/* ═══════════════════════════════════════════════════════════════════════════
   RENOVA - Luxury Skincare Design System
   Editorial Elegance meets Modern Commerce
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FONTS - Distinctive Typography
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES - Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ─────────────────────────────────────────────────────────────────────────
       Color System - Warm Luxury Palette
       ───────────────────────────────────────────────────────────────────────── */
    --r-bg-deep: #0d0c0a;
    --r-bg-base: #131210;
    --r-bg-surface: #1a1816;
    --r-bg-elevated: #211f1b;
    --r-bg-hover: #2a2723;

    --r-gold-50: #fdf9f0;
    --r-gold-100: #f9f0d9;
    --r-gold-200: #f0ddb3;
    --r-gold-300: #e5c785;
    --r-gold-400: #d9b15c;
    --r-gold-500: #c9a044;
    --r-gold-600: #b08536;
    --r-gold-700: #93692e;
    --r-gold-800: #79552b;
    --r-gold-900: #654627;

    --r-gold: #c9a044;
    --r-gold-light: #d9b86a;
    --r-gold-dark: #a88534;
    --r-gold-glow: rgba(201, 160, 68, 0.15);
    --r-gold-border: rgba(201, 160, 68, 0.2);

    /* Gold in a TEXT role. #c9a044 reads fine on the dark surfaces (6–8:1) but
       only 2.4:1 on white, so light mode re-points this alias to --r-gold-700.
       Use for gold *text*; fills/borders/rails/icons keep --r-gold unchanged.
       (Blueprint UI_UX_CONVERGENCE step A1.) */
    --r-gold-text: var(--r-gold);

    --r-text-primary: #f5f2eb;
    --r-text-secondary: #9a9287;
    /* Was #6b655c (3.07:1 on --r-bg-surface — fails AA). Lightened one step
       within the same warm-neutral family; stays visibly below secondary.
       (Blueprint UI_UX_CONVERGENCE step A1.) */
    --r-text-muted: #8b8479;
    --r-text-inverse: #0d0c0a;

    --r-border-subtle: rgba(255, 255, 255, 0.06);
    --r-border-default: rgba(255, 255, 255, 0.1);
    --r-border-emphasis: rgba(255, 255, 255, 0.15);

    /* Success/Error States */
    --r-success: #4ade80;
    --r-success-muted: rgba(74, 222, 128, 0.15);
    --r-error: #f87171;
    --r-error-muted: rgba(248, 113, 113, 0.15);

    /* Status colours in a TEXT role (step A5). The bright hues above read
       fine on dark surfaces but fail contrast as text on light ones (1.7:1
       and 2.8:1 on white), so light mode re-points these to darker steps
       DERIVED FROM THE SAME HUES (142° green, 0° red) — not an imported
       ramp. Fills/badges keep the -muted tokens, which work in both themes. */
    --r-success-text: var(--r-success);
    --r-error-text: var(--r-error);

    /* Canonical control tokens (step B3). One focus treatment for every
       .r-input control: a crisp 3px zero-blur ring plus a border change —
       focus must alter the control's SHAPE, not just its hue. Dedicated
       token, NOT --r-gold-glow (that one doubles as a decorative fill and
       cannot be tuned independently). Chevron stroke = --r-text-secondary,
       re-declared per theme because url() cannot resolve currentColor. */
    --r-focus-ring: 0 0 0 3px rgba(201, 160, 68, 0.14);
    --r-focus-border: var(--r-gold);
    --r-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9287' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Aliases for tokens referenced by some components but never defined — without
       these, var(--r-border)/(--r-rose)/(--r-danger) resolved to nothing and the
       border/colour declaration was silently dropped (invisible borders, etc.).
       They alias real tokens, so they automatically follow light/dark mode.
       (Audit ds-undefined-tokens-1.) */
    --r-border: var(--r-border-default);
    --r-rose: var(--r-error);
    --r-danger: var(--r-error);
    --r-danger-text: var(--r-error-text);

    /* ─────────────────────────────────────────────────────────────────────────
       Typography System
       ───────────────────────────────────────────────────────────────────────── */
    --r-font-display: 'Cormorant Garamond', Georgia, serif;
    --r-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* 11px step for badge/caption text. Added so the 36 hardcoded 11px
       declarations can be token-driven (step A4). */
    --r-text-2xs: 0.6875rem;
    --r-text-xs: 0.75rem;
    --r-text-sm: 0.875rem;
    --r-text-base: 1rem;
    --r-text-lg: 1.125rem;
    --r-text-xl: 1.25rem;
    --r-text-2xl: 1.5rem;
    --r-text-3xl: 1.875rem;
    --r-text-4xl: 2.25rem;
    --r-text-5xl: 3rem;
    --r-text-6xl: 3.75rem;
    --r-text-7xl: 4.5rem;
    --r-text-8xl: 6rem;

    /* ─────────────────────────────────────────────────────────────────────────
       Spacing System
       ───────────────────────────────────────────────────────────────────────── */
    --r-space-1: 0.25rem;
    --r-space-2: 0.5rem;
    --r-space-3: 0.75rem;
    --r-space-4: 1rem;
    --r-space-5: 1.25rem;
    --r-space-6: 1.5rem;
    --r-space-8: 2rem;
    --r-space-10: 2.5rem;
    --r-space-12: 3rem;
    --r-space-16: 4rem;
    --r-space-20: 5rem;
    --r-space-24: 6rem;
    --r-space-32: 8rem;

    /* ─────────────────────────────────────────────────────────────────────────
       Layout
       ───────────────────────────────────────────────────────────────────────── */
    --r-container-max: 1440px;
    --r-container-narrow: 960px;
    --r-container-prose: 720px;
    --r-container-padding: clamp(1rem, 5vw, 2.5rem);

    /* ─────────────────────────────────────────────────────────────────────────
       Borders & Radii
       ───────────────────────────────────────────────────────────────────────── */
    --r-radius-sm: 4px;
    --r-radius-md: 8px;
    --r-radius-lg: 12px;
    --r-radius-xl: 16px;
    --r-radius-2xl: 24px;
    --r-radius-full: 9999px;

    /* ─────────────────────────────────────────────────────────────────────────
       Shadows - Warm & Layered
       ───────────────────────────────────────────────────────────────────────── */
    --r-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --r-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --r-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --r-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35);
    --r-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.4);
    --r-shadow-gold: 0 8px 32px rgba(201, 160, 68, 0.25);
    --r-shadow-gold-lg: 0 16px 48px rgba(201, 160, 68, 0.3);

    /* ─────────────────────────────────────────────────────────────────────────
       Transitions
       ───────────────────────────────────────────────────────────────────────── */
    --r-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --r-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --r-duration-fast: 150ms;
    --r-duration-normal: 300ms;
    --r-duration-slow: 500ms;
    --r-duration-slower: 700ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
.mud-theme-light,
body.mud-theme-light {
    /* Surface ladder invariant (same as dark): a card is always LIGHTER than
       the page, and an inset well (elevated: inputs, selects, icon wells) is
       always darker than its card. The previous values inverted this — page
       #faf9f7 with cards #f5f3f0 meant every card sank into the page, and
       elevated equalled base so two levels collapsed into one.
       Page field is warm-tinted so a pure-white card reads as lifted without
       needing a shadow. (Blueprint UI_UX_CONVERGENCE step A1.) */
    --r-bg-deep: #f7f6f4;
    --r-bg-base: #faf9f7;
    --r-bg-surface: #ffffff;
    --r-bg-elevated: #f5f3f0;
    --r-bg-hover: #f0eeea;

    --r-text-primary: #1a1816;
    --r-text-secondary: #5c574f;
    /* Was #8a847a (3.35:1 on the old card surface — fails AA). Darkened within
       the warm-neutral family: 4.7–5.1:1 on all four light surfaces, still
       visibly quieter than --r-text-secondary. (Step A1.) */
    --r-text-muted: #736d64;
    --r-text-inverse: #f5f2eb;

    --r-border-subtle: rgba(0, 0, 0, 0.06);
    --r-border-default: rgba(0, 0, 0, 0.1);
    --r-border-emphasis: rgba(0, 0, 0, 0.15);

    --r-gold-glow: rgba(201, 160, 68, 0.1);
    --r-gold-border: rgba(201, 160, 68, 0.25);

    /* Gold as text on light surfaces: #c9a044 is 2.44:1 on white — decorative,
       not readable. --r-gold-700 is already in the ramp and measures 4.88:1 on
       white. Gold fills/borders/icons are NOT affected by this alias. (Step A1.) */
    --r-gold-text: var(--r-gold-700);

    /* Status text on light surfaces (step A5): same hues as --r-success /
       --r-error, darkened until they pass AA on every light surface.
       success 4.94:1 / error 6.03:1 on white. */
    --r-success-text: #18813e;
    --r-error-text: #ba2c2c;

    /* Focus + select chevron for the canonical controls (step B3). Gold on a
       warm cream base needs slightly MORE alpha than on warm charcoal to read
       at the same strength. Chevron stroke = light --r-text-secondary. */
    --r-focus-ring: 0 0 0 3px rgba(201, 160, 68, 0.18);
    --r-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c574f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --r-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --r-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --r-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --r-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --r-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.15);
    --r-shadow-gold: 0 8px 32px rgba(201, 160, 68, 0.15);
    --r-shadow-gold-lg: 0 16px 48px rgba(201, 160, 68, 0.2);
}

/* Light mode specific overrides for noise texture */
.mud-theme-light body::before,
body.mud-theme-light::before {
    opacity: 0.02;
}

/* Light mode header */
.mud-theme-light .r-header,
body.mud-theme-light .r-header {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.mud-theme-light .r-header.scrolled,
body.mud-theme-light .r-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Light mode hero — same computed colours as before A1b, now token-driven
   (base #faf9f7 → elevated #f5f3f0) so the gradient follows the ladder. */
.mud-theme-light .r-hero,
body.mud-theme-light .r-hero {
    background: linear-gradient(135deg, var(--r-bg-base) 0%, var(--r-bg-elevated) 100%);
}

/* Light mode sections — alternating tinted band on the (now white-leaning)
   page field. #f5f3f0 == --r-bg-elevated since A1. */
.mud-theme-light .r-section-alt,
body.mud-theme-light .r-section-alt {
    background: var(--r-bg-elevated);
}

/* Light mode cards — background override removed in A1b: base rule already
   uses --r-bg-surface, which is #ffffff since A1. Border kept: storefront
   cards carry a slightly stronger hairline than --r-border-subtle. */
.mud-theme-light .r-product-card,
.mud-theme-light .r-package-card,
body.mud-theme-light .r-product-card,
body.mud-theme-light .r-package-card {
    border-color: rgba(0, 0, 0, 0.08);
}

.mud-theme-light .r-product-card:hover,
.mud-theme-light .r-package-card:hover,
body.mud-theme-light .r-product-card:hover,
body.mud-theme-light .r-package-card:hover {
    border-color: var(--r-gold);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Light mode footer */
.mud-theme-light .r-footer,
body.mud-theme-light .r-footer {
    background: #1a1816;
    color: #f5f2eb;
}

.mud-theme-light .r-footer a,
body.mud-theme-light .r-footer a {
    color: #9a9287;
}

.mud-theme-light .r-footer a:hover,
body.mud-theme-light .r-footer a:hover {
    color: var(--r-gold);
}

/* Light mode CTA section */
.mud-theme-light .r-cta,
body.mud-theme-light .r-cta {
    background: var(--r-bg-deep);
}

/* Light mode inputs — these sit on the page (catalog toolbar), not on a card,
   so they take the card colour to read as lifted. Same computed values as
   before A1b, tokenized. */
.mud-theme-light .r-filter-input,
.mud-theme-light .r-filter-select,
body.mud-theme-light .r-filter-input,
body.mud-theme-light .r-filter-select {
    background: var(--r-bg-surface);
    border-color: var(--r-border-emphasis);
    color: var(--r-text-primary);
}

/* Light mode mobile nav — a drawer is an elevated overlay: card colour. */
.mud-theme-light .r-mobile-nav-panel,
body.mud-theme-light .r-mobile-nav-panel {
    background: var(--r-bg-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RTL (Right-to-Left) SUPPORT
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .r-header-nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .r-header-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .r-hero-content {
    text-align: right;
}

[dir="rtl"] .r-hero-cta {
    flex-direction: row-reverse;
}

[dir="rtl"] .r-btn .material-symbols-outlined:last-child {
    margin-left: 0;
    margin-right: var(--r-space-2);
    transform: rotate(180deg);
}

[dir="rtl"] .r-section-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .r-breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .r-product-info {
    text-align: right;
}

[dir="rtl"] .r-product-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .r-footer-grid {
    direction: rtl;
}

[dir="rtl"] .r-mobile-nav-link {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .r-mobile-nav-link .material-symbols-outlined {
    margin-right: 0;
    margin-left: var(--r-space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE RESET & FOUNDATION
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--r-font-body);
    font-size: var(--r-text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--r-text-primary);
    background-color: var(--r-bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    z-index: 9999;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Selection Styling */
::selection {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--r-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--r-bg-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--r-gold-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
.r-display {
    font-family: var(--r-font-display);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.r-display-lg {
    font-size: clamp(var(--r-text-5xl), 8vw, var(--r-text-8xl)); line-height: 1.1;
}

.r-display-md {
    font-size: clamp(var(--r-text-4xl), 6vw, var(--r-text-6xl)); line-height: 1.1;
}

.r-display-sm {
    font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-5xl)); line-height: 1.15;
}

.r-heading {
    font-family: var(--r-font-display);
    font-weight: 400;
    line-height: 1.2;
}

.r-heading-xl {
    font-size: var(--r-text-4xl); line-height: 1.15;
}

.r-heading-lg {
    font-size: var(--r-text-3xl); line-height: 1.2;
}

.r-heading-md {
    font-size: var(--r-text-2xl); line-height: 1.2;
}

.r-heading-sm {
    font-size: var(--r-text-xl);
}

.r-body-lg {
    font-size: var(--r-text-lg);
    line-height: 1.7;
}

.r-body {
    font-size: var(--r-text-base);
    line-height: 1.6;
}

.r-body-sm {
    font-size: var(--r-text-sm);
    line-height: 1.5;
}

.r-caption {
    font-size: var(--r-text-xs);
    line-height: 1.4;
}

.r-overline {
    font-size: var(--r-text-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.r-italic {
    font-style: italic;
}

.r-text-gold {
    color: var(--r-gold);
}

.r-text-secondary {
    color: var(--r-text-secondary);
}

.r-text-muted {
    color: var(--r-text-muted);
}

/* Text Gradient Effect */
.r-text-shimmer {
    background: linear-gradient(135deg, var(--r-gold-300) 0%, var(--r-gold) 50%, var(--r-gold-300) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.r-container {
    width: 100%;
    max-width: var(--r-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--r-container-padding);
    padding-right: var(--r-container-padding);
}

.r-container-narrow {
    max-width: var(--r-container-narrow);
}

.r-container-prose {
    max-width: var(--r-container-prose);
}

.r-section {
    padding-top: var(--r-space-20);
    padding-bottom: var(--r-space-20);
}

@media (min-width: 768px) {
    .r-section {
        padding-top: var(--r-space-24);
        padding-bottom: var(--r-space-24);
    }
}

@media (min-width: 1024px) {
    .r-section {
        padding-top: var(--r-space-32);
        padding-bottom: var(--r-space-32);
    }
}

.r-section-alt {
    background-color: var(--r-bg-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER - Transparent Floating Navigation
   ═══════════════════════════════════════════════════════════════════════════ */
.r-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--r-space-4) var(--r-container-padding);
    transition: background var(--r-duration-normal) var(--r-ease-out),
                backdrop-filter var(--r-duration-normal) var(--r-ease-out);
}

.r-header.scrolled {
    background: rgba(13, 12, 10, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.r-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--r-container-max);
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.r-header-logo {
    height: 36px;
    width: auto;
    transition: opacity var(--r-duration-fast);
}

.r-header-logo:hover {
    opacity: 0.8;
}

@media (min-width: 768px) {
    .r-header-logo {
        height: 42px;
    }
}

.r-header-nav {
    display: none;
    align-items: center;
    gap: var(--r-space-8);
}

@media (min-width: 960px) {
    .r-header-nav {
        display: flex;
    }
}

.r-header-link {
    position: relative;
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-text-secondary);
    transition: color var(--r-duration-fast);
}

.r-header-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--r-gold);
    transition: width var(--r-duration-normal) var(--r-ease-out);
}

.r-header-link:hover {
    color: var(--r-text-primary);
}

.r-header-link:hover::after {
    width: 100%;
}

.r-header-actions {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
}

.r-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-radius-full);
    background: rgba(255, 255, 255, 0.05);
    color: var(--r-text-primary);
    cursor: pointer;
    transition: all var(--r-duration-fast);
    position: relative;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

.r-header-btn:hover {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-header-btn:focus {
    outline: 2px solid var(--r-gold);
    outline-offset: 2px;
}

.r-header-btn:active {
    transform: scale(0.95);
}

.r-header-login-btn {
    display: none;
    align-items: center;
    gap: var(--r-space-2);
    padding: var(--r-space-2) var(--r-space-4);
    border-radius: var(--r-radius-full);
    background: var(--r-gold);
    color: var(--r-text-inverse);
    font-size: var(--r-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--r-duration-fast);
}

.r-header-login-btn:hover {
    background: var(--r-gold-light);
    transform: translateY(-1px);
    box-shadow: var(--r-shadow-gold);
}

.r-header-login-btn .material-symbols-outlined {
    font-size: 18px;
}

.r-header-login-text {
    display: none;
}

@media (min-width: 768px) {
    .r-header-login-btn {
        display: flex;
    }

    .r-header-login-text {
        display: inline;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .r-header-login-btn {
        display: flex;
        padding: var(--r-space-2);
    }

    .r-header-login-btn .r-header-login-text {
        display: none;
    }
}

.r-header-btn-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-radius-full);
    background: var(--r-gold);
    color: var(--r-text-inverse);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r-header-menu-btn {
    display: flex;
}

@media (min-width: 960px) {
    .r-header-menu-btn {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION - Cinematic Editorial
   ═══════════════════════════════════════════════════════════════════════════ */
.r-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--r-bg-deep);
}

/* Ambient gradient glow */
.r-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: radial-gradient(ellipse at 70% 50%, var(--r-gold-glow) 0%, transparent 60%);
    pointer-events: none;
}

/* Subtle grid pattern */
.r-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}

.r-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--r-container-max);
    margin: 0 auto;
    padding: calc(80px + var(--r-space-16)) var(--r-container-padding) var(--r-space-16);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-12);
    align-items: center;
}

@media (min-width: 960px) {
    .r-hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--r-space-16);
        padding-top: var(--r-space-24);
        padding-bottom: var(--r-space-24);
        min-height: 100vh;
    }
}

.r-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-6);
}

.r-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-2);
    width: fit-content;
    padding: var(--r-space-2) var(--r-space-4);
    border-radius: var(--r-radius-full);
    border: 1px solid var(--r-border-default);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    font-size: var(--r-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--r-text-secondary);
}

.r-hero-badge-icon {
    color: var(--r-gold);
}

.r-hero-title {
    font-family: var(--r-font-display);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--r-text-primary);
}

.r-hero-title em {
    font-style: italic;
    color: var(--r-gold);
}

.r-hero-subtitle {
    max-width: 480px;
    font-size: var(--r-text-lg);
    line-height: 1.7;
    color: var(--r-text-secondary);
}

.r-hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    margin-top: var(--r-space-4);
}

@media (min-width: 480px) {
    .r-hero-cta {
        flex-direction: row;
    }
}

/* Trust indicators */
.r-hero-trust {
    display: flex;
    align-items: center;
    gap: var(--r-space-4);
    padding-top: var(--r-space-6);
    margin-top: var(--r-space-4);
    border-top: 1px solid var(--r-border-subtle);
}

.r-hero-avatars {
    display: flex;
    align-items: center;
}

.r-hero-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--r-radius-full);
    border: 2px solid var(--r-bg-deep);
    object-fit: cover;
    margin-left: -10px;
}

.r-hero-avatar:first-child {
    margin-left: 0;
}

.r-hero-avatar-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-radius-full);
    border: 2px solid var(--r-bg-deep);
    background: var(--r-bg-surface);
    margin-left: -10px;
    font-size: var(--r-text-xs);
    font-weight: 600;
}

.r-hero-trust-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.r-hero-stars {
    display: flex;
    color: var(--r-gold);
}

.r-hero-stars svg {
    width: 14px;
    height: 14px;
}

.r-hero-trust-text {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
}

/* Hero Visual */
.r-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.r-hero-image-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
}

/* Background glow */
.r-hero-image-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, var(--r-gold-glow) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
}

.r-hero-image-container {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-radius-2xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--r-bg-surface) 0%, var(--r-bg-elevated) 100%);
    box-shadow: var(--r-shadow-2xl);
}

.r-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--r-duration-slower) var(--r-ease-out);
}

.r-hero-image-container:hover .r-hero-image {
    transform: scale(1.05);
}

/* Cinematic overlay */
.r-hero-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 12, 10, 0.6) 0%, rgba(13, 12, 10, 0.1) 40%, transparent 70%);
    pointer-events: none;
}

/* Floating product card */
.r-hero-float-card {
    position: absolute;
    bottom: var(--r-space-6);
    left: var(--r-space-6);
    right: var(--r-space-6);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--r-space-4);
    border-radius: var(--r-radius-lg);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--r-border-subtle);
}

/* Float-card content sits on a locked-dark glass background (see the
   .r-hero-float-card override around L3608). Theme-aware tokens like
   --r-text-primary flip to near-black in light mode, which renders the
   title invisible on the dark glass. Lock these to light values so the
   card reads identically in both themes. */
.r-hero-float-label {
    font-size: var(--r-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--r-gold);
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.r-hero-float-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-lg);
    font-weight: 500;
    color: #f5f2eb;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.01em;
}

.r-hero-float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-radius-full);
    background: #f5f2eb;
    color: #1a1816;
    transition: all var(--r-duration-fast);
}

.r-hero-float-btn:hover {
    background: var(--r-gold);
    transform: scale(1.1);
}

/* Scroll indicator */
.r-hero-scroll {
    position: absolute;
    bottom: var(--r-space-8);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--r-space-2);
    color: var(--r-text-muted);
    cursor: pointer;
    transition: color var(--r-duration-fast);
}

.r-hero-scroll:hover {
    color: var(--r-gold);
}

@media (min-width: 960px) {
    .r-hero-scroll {
        display: flex;
    }
}

.r-hero-scroll-text {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.r-hero-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, currentColor, transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.5; transform: scaleY(0.8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-space-2);
    height: 52px;
    padding: 0 var(--r-space-8);
    border-radius: var(--r-radius-lg);
    font-size: var(--r-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-btn-primary {
    background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-light) 100%);
    color: var(--r-text-inverse);
    box-shadow: var(--r-shadow-gold);
}

.r-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--r-shadow-gold-lg);
}

/* Muted variant — looks dim and shows a not-allowed cursor, but still
   fires @onclick. Used on the checkout pay button when gating conditions
   aren't met, so the click can fall through to a snackbar that explains
   the reason. Disabled buttons swallow click events silently and leave
   customers thinking the button is broken. */
.r-btn-muted {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
.r-btn-muted:hover {
    transform: none;
    box-shadow: none;
}

/* Email-verification banner — slim gold strip shown across all authenticated
   layouts when the signed-in user hasn't verified their email yet. */
.r-verify-banner { background: var(--r-gold-glow); border-bottom: 1px solid var(--r-gold-border); }
.r-verify-banner-inner { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.r-verify-banner-icon { font-size: 22px; color: var(--r-gold); flex-shrink: 0; }
.r-verify-banner-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.r-verify-banner-text strong { color: var(--r-text-primary); font-size: 14px; }
.r-verify-banner-text span { color: var(--r-text-secondary); font-size: 13px; }
.r-verify-banner-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.r-verify-banner-link { color: var(--r-gold); font-size: 13px; font-weight: 500; text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: background var(--r-duration-fast); }
.r-verify-banner-link:hover { background: rgba(201,160,68,0.12); }
.r-verify-banner-button { background: var(--r-gold); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--r-duration-fast); }
.r-verify-banner-button:hover:not(:disabled) { background: var(--r-gold-dark); }
.r-verify-banner-button:disabled { opacity: 0.6; cursor: wait; }

/* Register-page "this email is already registered" alert — shown when
   AuthService.RegisterAsync returns ErrorCode = ALREADY_REGISTERED. Two
   side-by-side CTAs (Sign in / Forgot password) replace the dead-end error. */
.r-register-exists-alert {
    display: flex; align-items: flex-start; gap: 14px;
    margin-top: 16px;
    padding: 16px 18px;
    background: var(--r-gold-glow);
    border: 1px solid var(--r-gold-border);
    border-radius: 8px;
}
.r-register-exists-icon { flex-shrink: 0; }
.r-register-exists-icon .material-symbols-outlined {
    font-size: 24px; color: var(--r-gold);
}
.r-register-exists-body { flex: 1; }
.r-register-exists-body strong {
    display: block; color: var(--r-text-primary);
    font-size: 14px; margin-bottom: 4px;
}
.r-register-exists-body p {
    margin: 0 0 12px;
    color: var(--r-text-secondary);
    font-size: 13px; line-height: 1.5;
}
.r-register-exists-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.r-register-exists-actions .r-btn { flex: 1; min-width: 140px; }

.r-btn-primary:active {
    transform: translateY(0);
}

.r-btn-secondary {
    background: transparent;
    border: 1px solid var(--r-gold-border);
    color: var(--r-text-primary);
}

.r-btn-secondary:hover {
    border-color: var(--r-gold);
    background: var(--r-gold-glow);
}

/* .r-btn-ghost was defined here a second time with a white-alpha fill that
   was invisible in light mode; the single canonical definition now lives with
   the other style variants (blueprint B7 tranche 2). */

.r-btn-sm {
    height: 40px;
    padding: 0 var(--r-space-5);
    font-size: var(--r-text-xs);
}

.r-btn-lg {
    height: 56px;
    padding: 0 var(--r-space-10);
    font-size: var(--r-text-base);
}

.r-btn-icon {
    width: 52px;
    padding: 0;
}

.r-btn-icon.r-btn-sm {
    width: 40px;
}

.r-btn svg, .r-btn .material-symbols-outlined {
    font-size: 20px;
    transition: transform var(--r-duration-fast);
}

.r-btn:hover svg, .r-btn:hover .material-symbols-outlined {
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */
.r-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    margin-bottom: var(--r-space-12);
}

@media (min-width: 768px) {
    .r-section-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.r-section-header-center {
    text-align: center;
    align-items: center;
}

@media (min-width: 768px) {
    .r-section-header-center {
        flex-direction: column;
        align-items: center;
    }
}

.r-section-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-5xl));
    font-weight: 300;
    line-height: 1.1;
    color: var(--r-text-primary);
}

.r-section-subtitle {
    max-width: 600px;
    font-size: var(--r-text-base);
    color: var(--r-text-secondary);
    line-height: 1.6;
}

.r-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-2);
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-text-secondary);
    transition: color var(--r-duration-fast);
}

.r-section-link:hover {
    color: var(--r-gold);
}

.r-section-link svg, .r-section-link .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--r-duration-fast);
}

.r-section-link:hover svg, .r-section-link:hover .material-symbols-outlined {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.r-product-grid {
    display: grid;
    gap: var(--r-space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .r-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .r-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .r-product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.r-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--r-bg-surface);
    border-radius: var(--r-radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--r-duration-normal) var(--r-ease-out),
                box-shadow var(--r-duration-normal) var(--r-ease-out);
}

.r-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--r-shadow-xl);
}

.r-product-card-media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--r-bg-elevated);
}

.r-product-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--r-duration-slow) var(--r-ease-out);
}

.r-product-card:hover .r-product-card-img {
    transform: scale(1.08);
}

.r-product-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--r-gold-glow) 0%, transparent 100%);
}

.r-product-card-placeholder .material-symbols-outlined {
    font-size: 48px;
    color: var(--r-gold);
    opacity: 0.3;
}

/* Badge */
.r-product-card-badge {
    position: absolute;
    top: var(--r-space-3);
    right: var(--r-space-3);
    padding: var(--r-space-1) var(--r-space-3);
    border-radius: var(--r-radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.r-badge-new {
    background: var(--r-success);
    color: var(--r-text-inverse);
}

.r-badge-sale {
    background: var(--r-error);
    color: white;
}

.r-badge-bestseller {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-badge-exclusive {
    background: linear-gradient(135deg, var(--r-gold-700) 0%, var(--r-gold) 100%);
    color: white;
}

/* Hover overlay */
.r-product-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 12, 10, 0.7);
    opacity: 0;
    transition: opacity var(--r-duration-normal);
}

.r-product-card:hover .r-product-card-overlay {
    opacity: 1;
}

.r-product-card-quick {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    padding: var(--r-space-3) var(--r-space-5);
    border-radius: var(--r-radius-lg);
    background: var(--r-text-primary);
    color: var(--r-text-inverse);
    font-size: var(--r-text-sm);
    font-weight: 600;
    transform: translateY(10px);
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-product-card:hover .r-product-card-quick {
    transform: translateY(0);
}

.r-product-card-quick:hover {
    background: var(--r-gold);
}

/* Content */
.r-product-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-2);
    padding: var(--r-space-4);
}

.r-product-card-category {
    font-size: var(--r-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--r-text-muted);
}

.r-product-card-name {
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.r-product-card-rating {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
}

.r-product-card-stars {
    display: flex;
    gap: 1px;
}

.r-product-card-stars svg {
    width: 14px;
    height: 14px;
    fill: var(--r-gold);
}

.r-product-card-stars svg.empty {
    fill: var(--r-bg-hover);
}

.r-product-card-reviews {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
}

.r-product-card-price {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    margin-top: var(--r-space-1);
}

.r-product-card-price-current {
    font-size: var(--r-text-lg);
    font-weight: 700;
    color: var(--r-gold);
}

.r-product-card-price-original {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    text-decoration: line-through;
}

/* Actions */
.r-product-card-actions {
    padding: 0 var(--r-space-4) var(--r-space-4);
}

.r-product-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-space-2);
    width: 100%;
    height: 44px;
    border-radius: var(--r-radius-md);
    border: 1px solid var(--r-gold-border);
    background: transparent;
    color: var(--r-text-primary);
    font-size: var(--r-text-sm);
    font-weight: 500;
    transition: all var(--r-duration-fast);
}

.r-product-card-btn:hover {
    border-color: var(--r-gold);
    background: var(--r-gold-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PACKAGE CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.r-package-grid {
    display: grid;
    gap: var(--r-space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .r-package-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .r-package-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.r-package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--r-bg-elevated);
    border-radius: var(--r-radius-xl);
    overflow: hidden;
    border: 1px solid var(--r-border-subtle);
    cursor: pointer;
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-package-card:hover {
    transform: translateY(-8px);
    border-color: var(--r-gold-border);
    box-shadow: var(--r-shadow-xl), 0 0 0 1px var(--r-gold-border);
}

.r-package-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--r-bg-surface);
}

.r-package-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--r-duration-slow) var(--r-ease-out);
}

.r-package-card:hover .r-package-card-img {
    transform: scale(1.05);
}

.r-package-card-badge {
    position: absolute;
    top: var(--r-space-3);
    right: var(--r-space-3);
}

.r-package-card-savings {
    position: absolute;
    bottom: var(--r-space-3);
    left: var(--r-space-3);
    display: flex;
    align-items: center;
    gap: var(--r-space-1);
    padding: var(--r-space-1) var(--r-space-3);
    border-radius: var(--r-radius-full);
    background: var(--r-success);
    color: var(--r-text-inverse);
    font-size: var(--r-text-2xs);
    font-weight: 700;
}

.r-package-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-3);
    padding: var(--r-space-5);
    flex: 1;
}

.r-package-card-name {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 400;
    color: var(--r-text-primary);
    line-height: 1.2;
}

.r-package-card-desc {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.r-package-card-includes {
    margin-top: auto;
}

.r-package-card-includes-label {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    margin-bottom: var(--r-space-2);
}

.r-package-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-space-2);
}

.r-package-card-tag {
    padding: var(--r-space-1) var(--r-space-2);
    border: 1px solid var(--r-border-default);
    border-radius: var(--r-radius-sm);
    font-size: var(--r-text-2xs);
    color: var(--r-text-secondary);
}

.r-package-card-tag-more {
    border-color: var(--r-gold-border);
    color: var(--r-gold);
}

.r-package-card-price {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    padding-top: var(--r-space-3);
    border-top: 1px solid var(--r-border-subtle);
}

.r-package-card-price-current {
    font-size: var(--r-text-xl);
    font-weight: 700;
    color: var(--r-gold);
}

.r-package-card-price-original {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    text-decoration: line-through;
}

.r-package-card-actions {
    padding: 0 var(--r-space-5) var(--r-space-5);
}

.r-package-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-space-2);
    width: 100%;
    height: 48px;
    border-radius: var(--r-radius-md);
    background: var(--r-gold);
    color: var(--r-text-inverse);
    font-size: var(--r-text-sm);
    font-weight: 600;
    transition: all var(--r-duration-fast);
}

.r-package-card-btn:hover {
    background: var(--r-gold-light);
    box-shadow: var(--r-shadow-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND APPROACH SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.r-brand {
    position: relative;
    overflow: hidden;
}

.r-brand-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-12);
    align-items: center;
}

@media (min-width: 960px) {
    .r-brand-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--r-space-16);
    }
}

.r-brand-visual {
    position: relative;
}

.r-brand-image-wrap {
    position: relative;
    border-radius: var(--r-radius-2xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.r-brand-image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--r-gold-border);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.r-brand-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--r-duration-slower) var(--r-ease-out);
}

.r-brand-visual:hover .r-brand-image {
    transform: scale(1.03);
}

.r-brand-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-8);
}

.r-brand-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-5xl));
    font-weight: 300;
    line-height: 1.1;
    color: var(--r-text-primary);
}

.r-brand-desc {
    font-size: var(--r-text-lg);
    line-height: 1.8;
    color: var(--r-text-secondary);
}

.r-brand-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-6);
}

@media (min-width: 480px) {
    .r-brand-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

.r-brand-feature {
    display: flex;
    gap: var(--r-space-4);
}

.r-brand-feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-radius-lg);
    background: var(--r-gold-glow);
    color: var(--r-gold);
}

.r-brand-feature-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-1);
}

.r-brand-feature-title {
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-brand-feature-desc {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.r-steps {
    position: relative;
}

.r-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-8);
}

@media (min-width: 768px) {
    .r-steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--r-space-6);
    }
}

.r-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--r-space-8) var(--r-space-6);
    border-radius: var(--r-radius-xl);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-step:hover {
    border-color: var(--r-gold-border);
    transform: translateY(-4px);
}

/* Connector line between steps */
@media (min-width: 768px) {
    .r-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -var(--r-space-3);
        width: var(--r-space-6);
        height: 1px;
        background: linear-gradient(to right, var(--r-gold), transparent);
        transform: translateX(100%);
    }
}

.r-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--r-radius-full);
    background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-light) 100%);
    color: var(--r-text-inverse);
    font-family: var(--r-font-display);
    font-size: var(--r-text-2xl); line-height: 1;
    font-weight: 500;
    margin-bottom: var(--r-space-6);
    box-shadow: var(--r-shadow-gold);
}

.r-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--r-radius-full);
    background: var(--r-gold-glow);
    color: var(--r-gold);
    margin-bottom: var(--r-space-6);
}

.r-step-icon .material-symbols-outlined {
    font-size: 28px;
}

.r-step-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-3);
}

.r-step-desc {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.r-cta {
    position: relative;
    padding: var(--r-space-20) 0;
    overflow: hidden;
}

.r-cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--r-bg-surface) 0%, var(--r-bg-elevated) 100%);
}

.r-cta-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background: radial-gradient(ellipse at center top, var(--r-gold-glow) 0%, transparent 60%);
}

.r-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--r-space-6);
}

.r-cta-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 5vw, var(--r-text-5xl));
    font-weight: 300;
    line-height: 1.1;
    color: var(--r-text-primary);
}

.r-cta-subtitle {
    max-width: 600px;
    font-size: var(--r-text-lg);
    color: var(--r-text-secondary);
    line-height: 1.7;
}

.r-cta-actions {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    margin-top: var(--r-space-4);
}

@media (min-width: 480px) {
    .r-cta-actions {
        flex-direction: row;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */
.r-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-6);
}

@media (min-width: 768px) {
    .r-testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.r-testimonial {
    display: flex;
    flex-direction: column;
    padding: var(--r-space-8);
    border-radius: var(--r-radius-xl);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-testimonial:hover {
    border-color: var(--r-gold-border);
    transform: translateY(-4px);
}

.r-testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--r-space-4);
}

.r-testimonial-stars svg {
    width: 18px;
    height: 18px;
    fill: var(--r-gold);
}

.r-testimonial-quote {
    flex: 1;
    font-size: var(--r-text-base);
    line-height: 1.7;
    color: var(--r-text-secondary);
    margin-bottom: var(--r-space-6);
}

.r-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding-top: var(--r-space-4);
    border-top: 1px solid var(--r-border-subtle);
}

.r-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--r-radius-full);
    object-fit: cover;
}

.r-testimonial-name {
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-testimonial-title {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.r-footer {
    padding: var(--r-space-16) 0 var(--r-space-8);
    background: var(--r-bg-base);
    border-top: 1px solid var(--r-border-subtle);
}

.r-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-10);
    margin-bottom: var(--r-space-12);
}

@media (min-width: 768px) {
    .r-footer-grid {
        grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr;
        align-items: start;
    }
}

.r-footer-newsletter h4 {
    font-size: var(--r-text-sm);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-4);
}
.r-footer-newsletter p {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--r-space-3);
}
.r-footer-newsletter form {
    display: flex;
    align-items: stretch;
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-md, 8px);
    overflow: hidden;
    transition: border-color var(--r-duration-fast);
}
.r-footer-newsletter form:focus-within {
    border-color: var(--r-gold);
}
.r-footer-newsletter input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 10px 12px;
    color: var(--r-text-primary);
    font: inherit;
    font-size: var(--r-text-sm);
}
.r-footer-newsletter input::placeholder { color: var(--r-text-muted); }
.r-footer-newsletter button {
    background: transparent;
    border: 0;
    padding: 0 12px;
    color: var(--r-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--r-duration-fast), color var(--r-duration-fast);
}
.r-footer-newsletter button:hover {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}
.r-footer-newsletter button svg { width: 18px; height: 18px; }

.r-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    align-items: flex-start;
}

.r-footer-logo {
    height: 40px;
    width: auto;
}

.r-footer-tagline {
    max-width: 320px;
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.r-footer-social {
    display: flex;
    gap: var(--r-space-3);
}

.r-footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-radius-full);
    background: var(--r-bg-hover);
    color: var(--r-text-secondary);
    transition: all var(--r-duration-fast);
}

.r-footer-social-link:hover {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-footer-nav h4 {
    font-size: var(--r-text-sm);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-4);
}

.r-footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--r-space-3);
}

.r-footer-nav a {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    transition: color var(--r-duration-fast);
}

.r-footer-nav a:hover {
    color: var(--r-gold);
}

.r-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    padding-top: var(--r-space-8);
    border-top: 1px solid var(--r-border-subtle);
}

@media (min-width: 768px) {
    .r-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.r-footer-copyright {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
}

.r-footer-legal {
    display: flex;
    gap: var(--r-space-6);
}

.r-footer-legal a {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    transition: color var(--r-duration-fast);
}

.r-footer-legal a:hover {
    color: var(--r-gold);
}

.r-footer-poweredby {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
}

.r-footer-poweredby a {
    color: var(--r-text-muted);
    transition: color var(--r-duration-fast);
}

.r-footer-poweredby a:hover {
    color: var(--r-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES (Privacy, Terms, Returns)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Top padding must clear the fixed .r-header (~72px tall) — the old
   clamp() bottomed out at 3rem on mobile and the title slid under it. */
.r-legal-page { padding: calc(80px + var(--r-space-8)) 0 clamp(3rem, 6vw, 5rem); background: var(--r-bg-base); }
.r-legal-header { max-width: 820px; margin: 0 auto 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--r-border-subtle); }
.r-legal-title { font-family: var(--r-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 0.5rem; color: var(--r-text-primary); }
.r-legal-meta { color: var(--r-text-muted); font-size: 0.9rem; margin: 0; }
.r-legal-body { max-width: 820px; margin: 0 auto; color: var(--r-text-secondary); line-height: 1.75; font-size: 1rem; }
.r-legal-body h2 { font-family: var(--r-font-display); font-size: 1.5rem; line-height: 1.25; color: var(--r-text-primary); margin: 2.25rem 0 0.75rem; }
.r-legal-body h2:first-child { margin-top: 0; }
.r-legal-body p { margin: 0 0 1rem; }
.r-legal-body a { color: var(--r-gold); text-decoration: none; }
.r-legal-body a:hover { text-decoration: underline; }
.r-legal-body strong { color: var(--r-text-primary); font-weight: 600; }
.r-legal-list { margin: 0 0 1rem; padding-inline-start: 1.5rem; }
.r-legal-list li { margin: 0.4rem 0; }
.r-legal-contact { list-style: none; padding: 1rem 1.25rem; margin: 0.5rem 0 1.5rem; background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: 8px; }
.r-legal-contact li { margin: 0.4rem 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — contact block + accepted payments
   ═══════════════════════════════════════════════════════════════════════════ */
.r-footer-contact { margin-top: var(--r-space-4); display: flex; flex-direction: column; gap: 6px; }
.r-footer-contact p { margin: 0; font-size: var(--r-text-sm); color: var(--r-text-muted); display: flex; align-items: center; gap: 8px; }
.r-footer-contact p a { color: var(--r-text-muted); text-decoration: none; transition: color var(--r-duration-fast); display: flex; align-items: center; gap: 8px; }
.r-footer-contact p a:hover { color: var(--r-gold); }
.r-footer-contact-icon { font-size: 16px !important; opacity: 0.85; }

.r-footer-payments { display: flex; align-items: center; gap: var(--r-space-4); flex-wrap: wrap; padding: var(--r-space-6) 0; border-top: 1px solid var(--r-border-subtle); margin-top: var(--r-space-6); }
.r-footer-payments-label { font-size: var(--r-text-sm); color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.r-footer-payments-list { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.r-footer-payment-logo { width: 48px; height: 30px; border-radius: 4px; background: #ffffff; padding: 4px; object-fit: contain; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */
.r-page-header {
    padding: calc(80px + var(--r-space-12)) 0 var(--r-space-12);
    background: var(--r-bg-surface);
    text-align: center;
}

.r-page-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-4xl), 6vw, var(--r-text-6xl));
    font-weight: 300;
    line-height: 1.1;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-4);
}

.r-page-subtitle {
    max-width: 600px;
    margin: 0 auto;
    font-size: var(--r-text-lg);
    color: var(--r-text-secondary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTERS BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.r-filters {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    padding: var(--r-space-6);
    margin-bottom: var(--r-space-8);
    border-radius: var(--r-radius-xl);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
}

@media (min-width: 768px) {
    .r-filters {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.r-filters-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-space-3);
}

.r-filter-input {
    flex: 1;
    min-width: 200px;
    height: 44px;
    padding: 0 var(--r-space-4);
    border-radius: var(--r-radius-md);
    border: 1px solid var(--r-border-default);
    background: var(--r-bg-elevated);
    color: var(--r-text-primary);
    font-size: var(--r-text-sm);
    transition: all var(--r-duration-fast);
}

.r-filter-input:focus {
    outline: none;
    border-color: var(--r-gold);
    box-shadow: 0 0 0 3px var(--r-gold-glow);
}

.r-filter-input::placeholder {
    color: var(--r-text-muted);
}

.r-filter-select {
    min-width: 160px;
    height: 44px;
    padding: 0 var(--r-space-10) 0 var(--r-space-4);
    border-radius: var(--r-radius-md);
    border: 1px solid var(--r-border-default);
    background: var(--r-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239a9287' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right var(--r-space-3) center no-repeat;
    background-size: 16px;
    color: var(--r-text-primary);
    font-size: var(--r-text-sm);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--r-duration-fast);
}

.r-filter-select:focus {
    outline: none;
    border-color: var(--r-gold);
    box-shadow: 0 0 0 3px var(--r-gold-glow);
}

.r-filters-count {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */
.r-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-space-2);
    margin-top: var(--r-space-12);
}

.r-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-radius-md);
    border: 1px solid var(--r-border-default);
    background: transparent;
    color: var(--r-text-secondary);
    font-size: var(--r-text-sm);
    font-weight: 500;
    transition: all var(--r-duration-fast);
}

.r-pagination-btn:hover:not(:disabled) {
    border-color: var(--r-gold);
    color: var(--r-gold);
}

.r-pagination-btn.active {
    background: var(--r-gold);
    border-color: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATES — the .r-skeleton family lives in ONE place further down
   ("Skeleton Loading - Shimmer Effect"). This earlier duplicate block was
   removed in blueprint step B4: the later definitions won the cascade anyway,
   so deleting this one changes nothing — except aspect-ratio: 3/4, which only
   existed here and was folded into the surviving .r-skeleton-card rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.r-animate-in {
    animation: fadeInUp 0.6s var(--r-ease-out) forwards;
}

.r-animate-delay-1 { animation-delay: 0.1s; }
.r-animate-delay-2 { animation-delay: 0.2s; }
.r-animate-delay-3 { animation-delay: 0.3s; }
.r-animate-delay-4 { animation-delay: 0.4s; }
.r-animate-delay-5 { animation-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   ═══════════════════════════════════════════════════════════════════════════ */
.r-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: all var(--r-duration-normal);
}

.r-mobile-nav.open {
    visibility: visible;
    opacity: 1;
}

.r-mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.r-mobile-nav-panel {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 100%;
    background: var(--r-bg-base);
    border-inline-end: 1px solid var(--r-border-subtle);
    transform: translateX(-100%);
    transition: transform var(--r-duration-normal) var(--r-ease-out);
    overflow-y: auto;
}

.r-mobile-nav.open .r-mobile-nav-panel {
    transform: translateX(0);
}

/* RTL: the drawer lives on the inline-start edge, so in Arabic it must slide
   in from the RIGHT. transform has no logical equivalent — sign flipped by
   override. The .open rule above outranks this (0,2,0 vs 0,1,1), so the
   open state needs no RTL twin. (Blueprint step A3.) */
[dir="rtl"] .r-mobile-nav-panel {
    transform: translateX(100%);
}

.r-mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--r-space-4) var(--r-space-6);
    border-bottom: 1px solid var(--r-border-subtle);
}

.r-mobile-nav-logo {
    height: 32px;
}

.r-mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-radius-full);
    background: var(--r-bg-hover);
    color: var(--r-text-primary);
}

.r-mobile-nav-links {
    padding: var(--r-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--r-space-2);
}

.r-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding: var(--r-space-4);
    border-radius: var(--r-radius-md);
    font-size: var(--r-text-base);
    font-weight: 500;
    color: var(--r-text-secondary);
    transition: all var(--r-duration-fast);
}

.r-mobile-nav-link:hover {
    background: var(--r-bg-hover);
    color: var(--r-text-primary);
}

.r-mobile-nav-link.active {
    background: var(--r-gold-glow);
    color: var(--r-gold);
}

.r-mobile-nav-login {
    margin-top: var(--r-space-4);
    padding-top: var(--r-space-4);
    border-top: 1px solid var(--r-border-subtle);
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-mobile-nav-login:hover {
    background: var(--r-gold-light);
    color: var(--r-text-inverse);
}

.r-mobile-nav-footer {
    padding: var(--r-space-6);
    border-top: 1px solid var(--r-border-subtle);
    margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.r-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.r-text-center { text-align: center; }
.r-text-left { text-align: left; }
.r-text-right { text-align: right; }

.r-flex { display: flex; }
.r-flex-col { flex-direction: column; }
.r-items-center { align-items: center; }
.r-justify-center { justify-content: center; }
.r-justify-between { justify-content: space-between; }
.r-gap-2 { gap: var(--r-space-2); }
.r-gap-4 { gap: var(--r-space-4); }
.r-gap-6 { gap: var(--r-space-6); }
.r-gap-8 { gap: var(--r-space-8); }

.r-mt-4 { margin-top: var(--r-space-4); }
.r-mt-8 { margin-top: var(--r-space-8); }
.r-mt-12 { margin-top: var(--r-space-12); }
.r-mb-4 { margin-bottom: var(--r-space-4); }
.r-mb-8 { margin-bottom: var(--r-space-8); }
.r-mb-12 { margin-bottom: var(--r-space-12); }

/* Hide on mobile */
@media (max-width: 767px) {
    .r-hide-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 768px) {
    .r-hide-desktop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.r-product-detail {
    padding: calc(80px + var(--r-space-8)) 0 var(--r-space-16);
}

.r-product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--r-space-12);
}

@media (min-width: 960px) {
    .r-product-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--r-space-16);
    }
}

/* Breadcrumb */
.r-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    margin-bottom: var(--r-space-6);
    font-size: var(--r-text-sm);
}

.r-breadcrumb a {
    color: var(--r-text-muted);
    transition: color var(--r-duration-fast);
}

.r-breadcrumb a:hover {
    color: var(--r-gold);
}

.r-breadcrumb-sep {
    color: var(--r-text-muted);
}

.r-breadcrumb-current {
    color: var(--r-text-secondary);
}

/* Product Gallery */
.r-product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    /* min-width: 0 lets the gallery shrink below its content's min-content width
       (the thumb strip, which is far wider than a phone); without it the strip
       pushes the whole grid track past the viewport and the page scrolls sideways. */
    min-width: 0;
    max-width: min(560px, 100%);
}

.r-product-gallery-main {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-radius-2xl);
    overflow: hidden;
    background: var(--r-bg-surface);
}

.r-product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--r-duration-slow) var(--r-ease-out);
}

.r-product-gallery-main:hover img {
    transform: scale(1.05);
}

.r-product-gallery-thumbs {
    display: flex;
    gap: var(--r-space-3);
    overflow-x: auto;
    padding-bottom: var(--r-space-2);
    /* The strip is the wide content: it scrolls inside itself rather than
       widening the gallery. min-width: 0 is what allows that shrink. */
    min-width: 0;
    max-width: 100%;
}

.r-product-gallery-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--r-radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--r-duration-fast);
}

.r-product-gallery-thumb:hover {
    border-color: var(--r-gold-border);
}

.r-product-gallery-thumb.active {
    border-color: var(--r-gold);
}

.r-product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 360° viewer + gallery layering ---------------------------------------------
   The .r360 spin viewer and the static <img> are stacked in the main area. The
   360 (a real frame sequence makes .r360 non-empty) sits ON TOP via z-index and
   simply COVERS the still image — the image is never force-hidden. Choosing a
   thumbnail adds .r-gallery-still, which hides the 360 so the still image below
   shows through. Products without a 360 leave .r360 empty → only the image. */
.r-product-gallery-main > .r360 { position: absolute; inset: 0; z-index: 2; }
.r-product-gallery-main > .r360:empty { display: none; }
.r-product-gallery-main > img,
.r-product-gallery-main > .r-product-card-placeholder { position: absolute; inset: 0; z-index: 1; }
/* A thumbnail was chosen → hide the 360 so the selected still image shows. */
.r-product-gallery-main.r-gallery-still > .r360 { display: none; }
/* "360°" toggle chip — only shown when a real 360 sequence is active. */
.r-gallery-360btn { display: none; align-items: center; justify-content: center; background: var(--r-bg-surface); color: var(--r-text-secondary); }
.r-gallery-360btn .material-symbols-outlined { font-size: 28px; }
.r-product-gallery:has(.r360[data-r360-active]) .r-gallery-360btn { display: inline-flex; }
/* Hide the strip only when there is nothing to navigate: a single still image
   AND no active 360. Two+ image thumbs (the inner :has) or any active 360 keep it.
   (.r-product-gallery-thumb:not(.r-gallery-360btn) = an image thumb, excluding the chip.) */
.r-product-gallery:not(:has(.r360[data-r360-active]))
  .r-product-gallery-thumbs:not(:has(.r-product-gallery-thumb:not(.r-gallery-360btn) ~ .r-product-gallery-thumb:not(.r-gallery-360btn))) {
    display: none;
}

/* Product Info */
.r-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    /* Same guard as the gallery: long unbroken content (SKU, price row, chips)
       must not widen the grid track. */
    min-width: 0;
}

.r-product-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--r-space-1) var(--r-space-3);
    border-radius: var(--r-radius-full);
    font-size: var(--r-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.r-product-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-4xl));
    font-weight: 400;
    line-height: 1.1;
    color: var(--r-text-primary);
}

.r-product-category {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.r-product-rating {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
}

.r-product-rating-stars {
    display: flex;
    gap: 2px;
}

.r-product-rating-stars svg {
    width: 18px;
    height: 18px;
    fill: var(--r-gold);
}

.r-product-rating-stars svg.empty {
    fill: var(--r-bg-hover);
}

.r-product-rating-text {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

.r-product-price {
    display: flex;
    align-items: center;
    gap: var(--r-space-4);
    padding: var(--r-space-4) 0;
}

.r-product-price-current {
    font-size: var(--r-text-3xl); line-height: 1;
    font-weight: 700;
    color: var(--r-gold);
}

.r-product-price-original {
    font-size: var(--r-text-xl);
    color: var(--r-text-muted);
    text-decoration: line-through;
}

.r-product-price-discount {
    padding: var(--r-space-1) var(--r-space-3);
    border-radius: var(--r-radius-full);
    background: var(--r-error);
    color: white;
    font-size: var(--r-text-xs);
    font-weight: 700;
}

.r-product-desc {
    font-size: var(--r-text-base);
    line-height: 1.7;
    color: var(--r-text-secondary);
}

/* Quantity Selector */
.r-quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--r-border-default);
    border-radius: var(--r-radius-md);
    overflow: hidden;
}

.r-quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--r-text-primary);
    font-size: var(--r-text-xl);
    transition: all var(--r-duration-fast);
}

.r-quantity-btn:hover {
    background: var(--r-gold-glow);
    color: var(--r-gold);
}

.r-quantity-value {
    width: 60px;
    text-align: center;
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
    border: none;
    background: transparent;
}

.r-quantity-value:focus {
    outline: none;
}

/* Add to Cart Row */
.r-product-actions {
    display: flex;
    gap: var(--r-space-4);
    margin-top: var(--r-space-4);
}

.r-product-actions .r-btn {
    flex: 1;
}

/* Benefits List */
.r-product-benefits {
    padding: var(--r-space-6) 0;
    border-top: 1px solid var(--r-border-subtle);
    margin-top: var(--r-space-4);
}

.r-product-benefits h4 {
    font-size: var(--r-text-sm);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-4);
}

.r-product-benefits ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--r-space-3);
}

.r-product-benefits li {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

.r-product-benefits li .material-symbols-outlined {
    color: var(--r-success);
    font-size: 18px;
}

/* Tabs */
.r-tabs {
    margin-top: var(--r-space-16);
}

.r-tabs-nav {
    display: flex;
    gap: var(--r-space-1);
    border-bottom: 1px solid var(--r-border-subtle);
}

.r-tab-btn {
    padding: var(--r-space-4) var(--r-space-6);
    background: transparent;
    color: var(--r-text-secondary);
    font-size: var(--r-text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--r-duration-fast);
}

.r-tab-btn:hover {
    color: var(--r-text-primary);
}

.r-tab-btn.active {
    color: var(--r-gold);
    border-bottom-color: var(--r-gold);
}

.r-tab-content {
    padding: var(--r-space-8) 0;
}

.r-tab-panel {
    display: none;
}

.r-tab-panel.active {
    display: block;
}

.r-tab-panel p {
    font-size: var(--r-text-base);
    line-height: 1.8;
    color: var(--r-text-secondary);
}

/* Ingredients Tags */
.r-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-space-2);
}

.r-ingredient-tag {
    padding: var(--r-space-2) var(--r-space-4);
    border: 1px solid var(--r-border-default);
    border-radius: var(--r-radius-full);
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

/* Related Products */
.r-related-section {
    margin-top: var(--r-space-20);
    padding-top: var(--r-space-12);
    border-top: 1px solid var(--r-border-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.r-about-hero {
    position: relative;
    padding: calc(80px + var(--r-space-16)) 0 var(--r-space-16);
    background: var(--r-bg-surface);
    overflow: hidden;
}

.r-about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at 70% 50%, var(--r-gold-glow) 0%, transparent 60%);
}

.r-about-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-12);
    align-items: center;
}

@media (min-width: 960px) {
    .r-about-hero-inner {
        grid-template-columns: 1fr 1fr;
    }
}

.r-about-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-6);
}

.r-about-hero-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-4xl), 5vw, var(--r-text-6xl));
    font-weight: 300;
    line-height: 1.1;
    color: var(--r-text-primary);
}

.r-about-hero-title em {
    font-style: italic;
    color: var(--r-gold);
}

.r-about-hero-text {
    font-size: var(--r-text-lg);
    line-height: 1.8;
    color: var(--r-text-secondary);
}

.r-about-image {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-radius-2xl);
    overflow: hidden;
}

.r-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Values Grid */
.r-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-6);
}

@media (min-width: 768px) {
    .r-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .r-values-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.r-value-card {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
    padding: var(--r-space-8);
    border-radius: var(--r-radius-xl);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    text-align: center;
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-value-card:hover {
    border-color: var(--r-gold-border);
    transform: translateY(-4px);
}

.r-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: var(--r-radius-full);
    background: var(--r-gold-glow);
    color: var(--r-gold);
}

.r-value-icon .material-symbols-outlined {
    font-size: 28px;
}

.r-value-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-text-primary);
}

.r-value-desc {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.6;
}

/* Story Section */
.r-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-12);
    align-items: center;
}

@media (min-width: 960px) {
    .r-story-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.r-story-content {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-6);
}

.r-story-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-4xl));
    font-weight: 300;
    line-height: 1.1;
    color: var(--r-text-primary);
}

.r-story-text {
    font-size: var(--r-text-base);
    line-height: 1.8;
    color: var(--r-text-secondary);
}

.r-story-image {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-radius-2xl);
    overflow: hidden;
}

.r-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stats */
.r-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--r-space-8);
}

@media (min-width: 768px) {
    .r-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.r-stat {
    text-align: center;
}

.r-stat-value {
    font-family: var(--r-font-display);
    font-size: var(--r-text-5xl);
    font-weight: 400;
    color: var(--r-gold);
    line-height: 1;
}

.r-stat-label {
    margin-top: var(--r-space-2);
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADVANCED ANIMATIONS & EFFECTS
   Premium micro-interactions and visual polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Hero Section - Staggered Reveal Animations
   ───────────────────────────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1) rotate(2deg);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes pricePulse {
    0%, 100% {
        color: var(--r-gold);
        text-shadow: none;
    }
    50% {
        color: var(--r-gold-light);
        text-shadow: 0 0 20px var(--r-gold-glow);
    }
}

@keyframes borderGlow {
    0%, 100% {
        border-color: var(--r-gold-border);
        box-shadow: 0 0 20px transparent;
    }
    50% {
        border-color: var(--r-gold);
        box-shadow: 0 0 30px var(--r-gold-glow);
    }
}

/* Hero animated elements */
.r-hero::before {
    animation: heroGlow 8s ease-in-out infinite;
}

.r-hero-badge {
    animation: fadeSlideUp 0.8s var(--r-ease-out) 0.2s both;
}

.r-hero-title {
    animation: fadeSlideUp 0.9s var(--r-ease-out) 0.35s both;
}

.r-hero-subtitle {
    animation: fadeSlideUp 0.9s var(--r-ease-out) 0.5s both;
}

.r-hero-cta {
    animation: fadeSlideUp 0.9s var(--r-ease-out) 0.65s both;
}

.r-hero-trust {
    animation: fadeSlideUp 0.9s var(--r-ease-out) 0.8s both;
}

.r-hero-visual {
    animation: fadeSlideRight 1s var(--r-ease-out) 0.4s both;
}

.r-hero-float-card {
    animation: float 4s ease-in-out infinite;
    animation-delay: 1.5s;
}

/* Hero title italic gradient effect */
.r-hero-title em {
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-300) 50%, var(--r-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section titles with subtle text shadow */
.r-section-title {
    text-shadow: 0 4px 30px rgba(201, 160, 68, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────
   Product Cards - Sophisticated Hover Effects
   ───────────────────────────────────────────────────────────────────────── */
.r-product-card {
    --card-glow-opacity: 0;
}

/* Golden glow ring on hover */
.r-product-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--r-radius-xl) + 2px);
    background: linear-gradient(135deg, var(--r-gold) 0%, transparent 40%, transparent 60%, var(--r-gold-light) 100%);
    opacity: var(--card-glow-opacity);
    z-index: -1;
    transition: opacity 0.5s var(--r-ease-out);
}

.r-product-card:hover {
    --card-glow-opacity: 1;
}

.r-product-card:hover .r-product-card-img {
    transform: scale(1.08);
    filter: brightness(1.05) contrast(1.02);
}

/* Quick view slide-in animation */
.r-product-card-overlay {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s var(--r-ease-out), transform 0.4s var(--r-ease-out);
}

.r-product-card:hover .r-product-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Sale price pulse animation */
.r-badge-sale ~ .r-product-card-content .r-product-card-price-current,
.r-product-card:has(.r-badge-sale) .r-product-card-price-current {
    animation: pricePulse 3s ease-in-out infinite;
}

/* Package card hover glow */
.r-package-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--r-radius-xl) + 2px);
    background: linear-gradient(135deg, var(--r-gold) 0%, transparent 40%, transparent 60%, var(--r-gold-light) 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s var(--r-ease-out);
}

.r-package-card:hover::before {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   Buttons - Shimmer & Tactile Effects
   ───────────────────────────────────────────────────────────────────────── */
.r-btn-primary {
    position: relative;
    overflow: hidden;
    border: none;
}

/* Shimmer sweep effect */
.r-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.6s var(--r-ease-out);
}

.r-btn-primary:hover::before {
    left: 100%;
}

/* Active pressed state */
.r-btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2), var(--r-shadow-gold);
}

/* Icon slide on hover */
.r-btn .material-symbols-outlined {
    transition: transform 0.3s var(--r-ease-out);
}

.r-btn:hover .material-symbols-outlined {
    transform: translateX(4px);
}

/* Secondary button border animation */
.r-btn-secondary {
    position: relative;
    overflow: hidden;
}

.r-btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--r-gold);
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.3s, transform 0.3s;
}

.r-btn-secondary:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* ─────────────────────────────────────────────────────────────────────────
   Scroll-Triggered Reveal Animations
   ───────────────────────────────────────────────────────────────────────── */
.r-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s var(--r-ease-out), transform 0.8s var(--r-ease-out);
}

.r-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.r-reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s var(--r-ease-out), transform 0.8s var(--r-ease-out);
}

.r-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.r-reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s var(--r-ease-out), transform 0.8s var(--r-ease-out);
}

.r-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.r-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s var(--r-ease-out), transform 0.8s var(--r-ease-out);
}

.r-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children reveal */
.r-reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--r-ease-out), transform 0.6s var(--r-ease-out);
}

.r-reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(7) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }
.r-reveal-stagger.revealed > *:nth-child(8) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────────────────
   Skeleton Loading - Shimmer Effect
   ───────────────────────────────────────────────────────────────────────── */
.r-skeleton {
    background: linear-gradient(
        90deg,
        var(--r-bg-surface) 0%,
        var(--r-bg-elevated) 20%,
        var(--r-bg-hover) 40%,
        var(--r-bg-elevated) 60%,
        var(--r-bg-surface) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-radius-md);
}

.r-skeleton-card {
    /* aspect-ratio folded in from the removed duplicate block (B4) — the
       storefront product-card skeletons rely on it when the parent gives
       no definite height. */
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    border-radius: var(--r-radius-lg);
}

.r-skeleton-text {
    height: 16px;
    border-radius: var(--r-radius-sm);
}

.r-skeleton-text.sm { width: 60%; }
.r-skeleton-text.md { width: 80%; }
.r-skeleton-text.lg { width: 100%; }

/* Admin skeleton compositions (blueprint B4) — consumed by
   AdminTableSkeleton / AdminStatsSkeleton / AdminDetailSkeleton. Row
   geometry mirrors .r-account-table (12px pad + 16px bar ≈ a 40px row). */
.r-skeleton-table { padding: var(--r-space-2) 0; }
.r-skeleton-row { display: flex; gap: var(--r-space-4); padding: var(--r-space-3) var(--r-space-5); border-bottom: 1px solid var(--r-border-subtle); }
.r-skeleton-row:last-child { border-bottom: none; }
.r-skeleton-row .r-skeleton-text { flex: 1; }
.r-skeleton-icon { width: 40px; height: 40px; border-radius: var(--r-radius-md); }

/* ─────────────────────────────────────────────────────────────────────────
   Visual Texture & Depth Enhancement
   ───────────────────────────────────────────────────────────────────────── */

/* Enhanced ambient gradients */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(201, 160, 68, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(201, 160, 68, 0.03) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(201, 160, 68, 0.02) 0%, transparent 60%);
    pointer-events: none;
    z-index: 9998;
}

/* Glassmorphism for floating elements */
.r-hero-float-card,
.r-package-card-savings {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(26, 24, 22, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────
   Link & Navigation Micro-interactions
   ───────────────────────────────────────────────────────────────────────── */

/* Underline animation origin swap */
.r-header-link::after {
    transform-origin: right center;
}

.r-header-link:hover::after {
    transform-origin: left center;
}

/* Footer link hover effect */
.r-footer-nav a {
    position: relative;
    display: inline-block;
}

.r-footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--r-gold);
    transition: width 0.3s var(--r-ease-out);
}

.r-footer-nav a:hover::after {
    width: 100%;
}

/* Section link arrow animation */
.r-section-link .material-symbols-outlined {
    transition: transform 0.3s var(--r-ease-out);
}

.r-section-link:hover .material-symbols-outlined {
    transform: translateX(6px);
}

/* ─────────────────────────────────────────────────────────────────────────
   Input Focus States - Glow Effect
   ───────────────────────────────────────────────────────────────────────── */
.r-filter-input:focus,
.r-filter-select:focus {
    border-color: var(--r-gold);
    box-shadow:
        0 0 0 3px var(--r-gold-glow),
        0 0 20px rgba(201, 160, 68, 0.15);
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Step Numbers - Animated Counter Effect
   ───────────────────────────────────────────────────────────────────────── */
.r-step-number {
    position: relative;
    overflow: hidden;
}

.r-step-number::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.r-step:hover .r-step-number::after {
    transform: translateX(100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   Stats Counter Animation
   ───────────────────────────────────────────────────────────────────────── */
.r-stat-value {
    background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─────────────────────────────────────────────────────────────────────────
   CTA Section - Animated Background
   ───────────────────────────────────────────────────────────────────────── */
.r-cta {
    position: relative;
    overflow: hidden;
}

.r-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--r-gold-glow) 0%, transparent 50%);
    animation: ctaGlow 10s linear infinite;
}

@keyframes ctaGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.r-cta-inner {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   Custom Scrollbar - Luxury Style
   ───────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--r-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--r-gold-700) 0%, var(--r-gold-800) 100%);
    border-radius: var(--r-radius-full);
    border: 2px solid var(--r-bg-deep);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--r-gold) 0%, var(--r-gold-700) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   Scroll Progress Indicator
   ───────────────────────────────────────────────────────────────────────── */
.r-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--r-gold) 0%, var(--r-gold-light) 100%);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ─────────────────────────────────────────────────────────────────────────
   Badge Animations
   ───────────────────────────────────────────────────────────────────────── */
.r-badge-new {
    animation: badgePop 0.5s var(--r-ease-out) both;
}

.r-badge-sale {
    animation: badgePop 0.5s var(--r-ease-out) both, borderGlow 2s ease-in-out infinite;
}

@keyframes badgePop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Image Reveal on Load
   ───────────────────────────────────────────────────────────────────────── */
.r-img-reveal {
    clip-path: inset(0 100% 0 0);
    animation: imgReveal 1s var(--r-ease-out) forwards;
}

@keyframes imgReveal {
    to { clip-path: inset(0 0 0 0); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Reduced Motion - Accessibility
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .r-reveal,
    .r-reveal-left,
    .r-reveal-right,
    .r-reveal-scale {
        opacity: 1;
        transform: none;
    }

    .r-reveal-stagger > * {
        opacity: 1;
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CART PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.r-cart-section {
    padding-top: calc(80px + var(--r-space-8));
    min-height: 100vh;
}

.r-cart-header {
    display: flex;
    align-items: baseline;
    gap: var(--r-space-4);
    margin-bottom: var(--r-space-8);
}

.r-cart-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-5xl)); line-height: 1.15;
    font-weight: 300;
    color: var(--r-text-primary);
}

.r-cart-count {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    padding: var(--r-space-1) var(--r-space-3);
    background: var(--r-bg-surface);
    border-radius: var(--r-radius-full);
}

.r-cart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--r-space-24) 0;
    gap: var(--r-space-4);
    color: var(--r-text-secondary);
}

.r-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--r-border-subtle);
    border-top-color: var(--r-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.r-cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--r-space-8);
}

@media (min-width: 1024px) {
    .r-cart-layout {
        grid-template-columns: 1fr 400px;
    }
}

/* Cart Items */
.r-cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-4);
}

.r-cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: var(--r-space-4);
    padding: var(--r-space-6);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    transition: border-color var(--r-duration-fast);
}

.r-cart-item:hover {
    border-color: var(--r-gold-border);
}

/* Both guards are needed, at both levels. .r-cart-item's 1fr track carries the
   product name, quantity stepper and Remove button; .r-cart-layout's single
   track then inherits that min-content. Measured on a 375px viewport the cart
   laid out 444px wide, so the row total and Remove were clipped by
   body{overflow-x:hidden} with no scrollbar to reach them. */
.r-cart-layout > *,
.r-cart-item > * {
    min-width: 0;
}

@media (max-width: 640px) {
    .r-cart-item {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
    }

    /* Stepper + Remove side by side need ~250px; on a phone the column has far
       less, so let them take two lines rather than push the row off-screen. */
    .r-cart-item-actions {
        flex-wrap: wrap;
        gap: var(--r-space-3);
    }

    .r-cart-item-total {
        grid-column: 1 / -1;
        text-align: right;
        padding-top: var(--r-space-4);
        border-top: 1px solid var(--r-border-subtle);
    }
}

.r-cart-item-image {
    width: 100px;
    height: 100px;
    border-radius: var(--r-radius-lg);
    overflow: hidden;
    background: var(--r-bg-elevated);
}

@media (max-width: 640px) {
    .r-cart-item-image {
        width: 80px;
        height: 80px;
    }
}

.r-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r-cart-item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--r-text-muted);
}

.r-cart-item-placeholder .material-symbols-outlined {
    font-size: 32px;
}

.r-cart-item-details {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-2);
}

.r-cart-item-name {
    font-family: var(--r-font-display);
    font-size: var(--r-text-lg);
    font-weight: 500;
    color: var(--r-text-primary);
    text-decoration: none;
    transition: color var(--r-duration-fast);
}

.r-cart-item-name:hover {
    color: var(--r-gold);
}

.r-cart-item-price {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

.r-cart-item-actions {
    display: flex;
    align-items: center;
    gap: var(--r-space-4);
    margin-top: var(--r-space-2);
}

.r-quantity-selector {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    background: var(--r-bg-elevated);
    border-radius: var(--r-radius-lg);
    padding: var(--r-space-1);
}

.r-quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-radius-md);
    background: transparent;
    color: var(--r-text-primary);
    cursor: pointer;
    transition: all var(--r-duration-fast);
}

.r-quantity-btn:hover:not(:disabled) {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-quantity-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.r-quantity-btn .material-symbols-outlined {
    font-size: 18px;
}

.r-quantity-value {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-cart-remove {
    display: flex;
    align-items: center;
    gap: var(--r-space-1);
    padding: var(--r-space-2) var(--r-space-3);
    border: none;
    background: transparent;
    color: var(--r-text-muted);
    font-size: var(--r-text-sm);
    cursor: pointer;
    transition: color var(--r-duration-fast);
}

.r-cart-remove:hover {
    color: var(--r-error);
}

.r-cart-remove .material-symbols-outlined {
    font-size: 18px;
}

.r-cart-item-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--r-space-1);
}

.r-cart-item-total-label {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.r-cart-item-total-value {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-gold);
}

.r-cart-continue {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-2);
    margin-top: var(--r-space-4);
    color: var(--r-text-secondary);
    font-size: var(--r-text-sm);
    text-decoration: none;
    transition: color var(--r-duration-fast);
}

.r-cart-continue:hover {
    color: var(--r-gold);
}

.r-cart-continue .material-symbols-outlined {
    font-size: 18px;
    transition: transform var(--r-duration-fast);
}

.r-cart-continue:hover .material-symbols-outlined {
    transform: translateX(-4px);
}

/* Order Summary */
.r-cart-summary {
    position: sticky;
    top: calc(80px + var(--r-space-4));
    padding: var(--r-space-8);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    height: fit-content;
}

.r-cart-summary-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-6);
}

.r-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--r-space-2) 0;
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

.r-cart-discount {
    /* --r-success-text, not --r-success: the bright hue is 1.74:1 on a white
       card in light mode. The -text alias aliases --r-success in dark (10.2:1
       unchanged) and drops to #18813e in light (4.94:1). */
    color: var(--r-success-text);
    /* The discount label can now carry a promo code (fixed-amount codes show
       the code instead of a percentage) and Code allows 50 chars — keep a long
       code from squeezing the amount out of the row. */
    gap: var(--r-space-3);
}

.r-cart-discount > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-cart-discount > span:last-child {
    flex-shrink: 0;
}

.r-free-shipping {
    /* See .r-cart-discount — same per-theme text alias. */
    color: var(--r-success-text);
    font-weight: 600;
}

.r-cart-shipping-notice {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    padding: var(--r-space-3);
    margin-top: var(--r-space-3);
    background: var(--r-gold-glow);
    border: 1px solid var(--r-gold-border);
    border-radius: var(--r-radius-md);
    font-size: var(--r-text-xs);
    color: var(--r-gold);
}

.r-cart-shipping-notice .material-symbols-outlined {
    font-size: 18px;
}

.r-cart-summary-divider {
    height: 1px;
    background: var(--r-border-default);
    margin: var(--r-space-4) 0;
}

.r-cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--r-text-lg);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-6);
}

.r-cart-summary-total span:last-child {
    font-family: var(--r-font-display);
    font-size: var(--r-text-2xl); line-height: 1;
    color: var(--r-gold);
}

/* Affiliate cashback note — what a member earns back, not a deduction from this total.
   Deliberately understated next to the price so it never reads as a discount. */
.r-cart-cashback {
    display: flex;
    align-items: flex-start;
    gap: var(--r-space-2);
    padding: var(--r-space-3);
    margin-bottom: var(--r-space-5);
    background: rgba(201, 160, 68, 0.08);
    border: 1px solid rgba(201, 160, 68, 0.22);
    border-radius: var(--r-radius-md, 8px);
    font-size: var(--r-text-sm);
    color: var(--r-text-primary);
    line-height: 1.5;
}

.r-cart-cashback .material-symbols-outlined {
    font-size: 20px;
    color: var(--r-gold);
    flex: none;
}

.r-cart-cashback small {
    display: block;
    margin-top: 2px;
    color: var(--r-text-muted);
    font-size: var(--r-text-xs);
}

/* Promo Code */
.r-promo-code {
    display: flex;
    gap: var(--r-space-2);
    margin-bottom: var(--r-space-4);
}

.r-promo-input {
    flex: 1;
    padding: var(--r-space-3) var(--r-space-4);
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-md);
    color: var(--r-text-primary);
    font-size: var(--r-text-sm);
    transition: border-color var(--r-duration-fast);
}

.r-promo-input::placeholder {
    color: var(--r-text-muted);
}

.r-promo-input:focus {
    outline: none;
    border-color: var(--r-gold);
}

.r-promo-btn {
    padding: var(--r-space-3) var(--r-space-4);
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-md);
    color: var(--r-text-primary);
    font-size: var(--r-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--r-duration-fast);
}

.r-promo-btn:hover {
    background: var(--r-gold);
    border-color: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-btn-full {
    width: 100%;
}

/* Trust Badges */
.r-cart-trust {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-3);
    margin-top: var(--r-space-6);
    padding-top: var(--r-space-6);
    border-top: 1px solid var(--r-border-subtle);
}

.r-cart-trust-item {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    font-size: var(--r-text-xs);
    color: var(--r-text-secondary);
}

.r-cart-trust-item .material-symbols-outlined {
    font-size: 16px;
    color: var(--r-gold);
}

/* Payment Methods */
.r-cart-payments {
    margin-top: var(--r-space-4);
    text-align: center;
}

.r-cart-payments-label {
    display: block;
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    margin-bottom: var(--r-space-2);
}

.r-cart-payments-icons {
    display: flex;
    justify-content: center;
    gap: var(--r-space-2);
}

.r-payment-icon {
    padding: var(--r-space-1) var(--r-space-2);
    background: var(--r-bg-elevated);
    border-radius: var(--r-radius-sm);
    font-size: var(--r-text-xs);
    font-weight: 600;
    color: var(--r-text-muted);
}

/* Empty Cart */
.r-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--r-space-16) var(--r-space-4);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-2xl);
}

.r-cart-empty-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--r-gold-glow);
    border-radius: var(--r-radius-full);
    margin-bottom: var(--r-space-6);
}

.r-cart-empty-icon .material-symbols-outlined {
    font-size: 48px;
    color: var(--r-gold);
}

.r-cart-empty-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-2xl); line-height: 1.2;
    font-weight: 400;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-3);
}

.r-cart-empty-text {
    font-size: var(--r-text-base);
    color: var(--r-text-secondary);
    max-width: 400px;
    margin-bottom: var(--r-space-8);
    line-height: 1.6;
}

/* Recommendations */
.r-cart-recommendations {
    width: 100%;
    max-width: 800px;
    margin-top: var(--r-space-16);
    padding-top: var(--r-space-8);
    border-top: 1px solid var(--r-border-subtle);
}

.r-cart-recommendations h3 {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 400;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-6);
}

.r-cart-reco-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--r-space-4);
}

@media (max-width: 640px) {
    .r-cart-reco-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .r-cart-reco-grid .r-cart-reco-item:last-child {
        display: none;
    }
}

.r-cart-reco-item {
    display: flex;
    flex-direction: column;
    gap: var(--r-space-3);
    padding: var(--r-space-4);
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-lg);
    text-decoration: none;
    transition: all var(--r-duration-fast);
}

.r-cart-reco-item:hover {
    border-color: var(--r-gold-border);
    transform: translateY(-4px);
}

.r-cart-reco-image {
    aspect-ratio: 1;
    border-radius: var(--r-radius-md);
    overflow: hidden;
    background: var(--r-bg-surface);
}

.r-cart-reco-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r-cart-reco-name {
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-text-primary);
}

.r-cart-reco-price {
    font-family: var(--r-font-display);
    font-size: var(--r-text-base);
    color: var(--r-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT — Luxury Checkout Flow
   Elegant multi-step checkout with editorial refinement
   ═══════════════════════════════════════════════════════════════════════════ */

.r-checkout-section { padding-top: calc(80px + var(--r-space-8)); min-height: 100vh; }

/* Header */
.r-checkout-header { margin-bottom: var(--r-space-8); }
.r-checkout-breadcrumb { display: flex; align-items: center; gap: var(--r-space-2); margin-bottom: var(--r-space-4); font-size: var(--r-text-sm); }
.r-checkout-breadcrumb-link { display: inline-flex; align-items: center; gap: var(--r-space-1); color: var(--r-text-muted); text-decoration: none; transition: color var(--r-duration-fast); }
.r-checkout-breadcrumb-link:hover { color: var(--r-gold); }
.r-checkout-breadcrumb-link .material-symbols-outlined { font-size: 16px; }
.r-checkout-breadcrumb-sep { font-size: 16px; color: var(--r-text-muted); opacity: 0.4; }
.r-checkout-breadcrumb-current { color: var(--r-text-primary); font-weight: 500; }
.r-checkout-title { font-family: var(--r-font-display); font-size: clamp(var(--r-text-3xl), 4vw, var(--r-text-5xl)); line-height: 1.15; font-weight: 300; color: var(--r-text-primary); letter-spacing: -0.01em; }

/* Layout */
.r-checkout-layout { display: grid; grid-template-columns: 1fr; gap: var(--r-space-8); }
@media (min-width: 1024px) { .r-checkout-layout { grid-template-columns: 1fr 380px; } }
.r-checkout-main { min-width: 0; }
/* min-width: 0 to match .r-checkout-main — the sidebar holds the order summary,
   whose rows carry a nowrap price beside a product name. */
.r-checkout-sidebar { position: relative; min-width: 0; }
@media (min-width: 1024px) { .r-checkout-sidebar .r-cart-summary { position: sticky; top: calc(80px + var(--r-space-4)); } }

/* Step Indicator */
.r-checkout-steps { display: flex; align-items: center; gap: var(--r-space-3); margin-bottom: var(--r-space-8); padding: var(--r-space-6); background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-xl); }
.r-checkout-step { display: flex; align-items: center; gap: var(--r-space-3); padding: 0; background: none; border: none; cursor: pointer; color: var(--r-text-muted); font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; transition: color var(--r-duration-normal); }
.r-checkout-step.active { color: var(--r-text-primary); }
.r-checkout-step.completed { color: var(--r-gold); }
.r-checkout-step-number { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-radius-full); border: 2px solid var(--r-border-default); font-weight: 600; font-size: var(--r-text-sm); transition: all var(--r-duration-normal) var(--r-ease-out); }
.r-checkout-step.active .r-checkout-step-number { border-color: var(--r-gold); background: var(--r-gold); color: var(--r-text-inverse); box-shadow: 0 0 20px rgba(201, 160, 68, 0.3); }
.r-checkout-step.completed .r-checkout-step-number { border-color: var(--r-gold); background: transparent; color: var(--r-gold); }
.r-checkout-step.completed .r-checkout-step-number .material-symbols-outlined { font-size: 18px; }
.r-checkout-step-label { white-space: nowrap; }
@media (max-width: 480px) { .r-checkout-step-label { display: none; } }
.r-checkout-step-line { flex: 1; height: 2px; background: var(--r-border-default); border-radius: 1px; transition: background var(--r-duration-normal); }
.r-checkout-step-line.active { background: linear-gradient(90deg, var(--r-gold), var(--r-gold-light)); }

/* Cards */
.r-checkout-card { background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-xl); padding: var(--r-space-8); transition: border-color var(--r-duration-normal); }
.r-checkout-card:hover { border-color: var(--r-border-emphasis); }
.r-checkout-card-animate { animation: checkoutCardIn 0.4s var(--r-ease-out) both; }
@keyframes checkoutCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.r-checkout-card-header { display: flex; align-items: center; gap: var(--r-space-3); margin-bottom: var(--r-space-8); padding-bottom: var(--r-space-6); border-bottom: 1px solid var(--r-border-subtle); }
.r-checkout-card-header .material-symbols-outlined { font-size: 24px; color: var(--r-gold); }
.r-checkout-card-header h2 { font-family: var(--r-font-display); font-size: var(--r-text-2xl); line-height: 1.2; font-weight: 400; color: var(--r-text-primary); margin: 0; }
.r-checkout-card-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--r-space-8); padding-top: var(--r-space-6); border-top: 1px solid var(--r-border-subtle); }

/* Form Fields */
.r-checkout-form { display: flex; flex-direction: column; gap: var(--r-space-5); }
.r-checkout-field { display: flex; flex-direction: column; gap: var(--r-space-2); }
.r-checkout-label { font-size: var(--r-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--r-text-secondary); }
.r-checkout-input { width: 100%; padding: var(--r-space-3) var(--r-space-4); background: var(--r-bg-elevated); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); color: var(--r-text-primary); font-family: var(--r-font-body); font-size: var(--r-text-base); transition: all var(--r-duration-fast); outline: none; box-sizing: border-box; }
.r-checkout-input::placeholder { color: var(--r-text-muted); }
.r-checkout-input:focus { border-color: var(--r-gold); box-shadow: 0 0 0 3px var(--r-gold-glow); }
.r-checkout-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239a9287' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: var(--r-space-10); cursor: pointer; }
.r-checkout-select option { background: var(--r-bg-elevated); color: var(--r-text-primary); }
.r-checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-space-5); }
.r-checkout-row-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) { .r-checkout-row, .r-checkout-row-3 { grid-template-columns: 1fr; } }

/* Back / Navigation links */
.r-checkout-back-link { display: inline-flex; align-items: center; gap: var(--r-space-2); background: none; border: none; padding: 0; color: var(--r-text-secondary); font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; cursor: pointer; text-decoration: none; transition: color var(--r-duration-fast); }
.r-checkout-back-link:hover { color: var(--r-gold); }
.r-checkout-back-link .material-symbols-outlined { font-size: 18px; transition: transform var(--r-duration-fast); }
.r-checkout-back-link:hover .material-symbols-outlined { transform: translateX(-4px); }
[dir="rtl"] .r-checkout-back-link:hover .material-symbols-outlined { transform: translateX(4px); }

/* Pay Button */
.r-checkout-pay-btn { gap: var(--r-space-2); }
.r-checkout-pay-btn .material-symbols-outlined { font-size: 18px; }
.r-checkout-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.r-checkout-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }

/* Review Step */
.r-checkout-review-block { padding: var(--r-space-5) 0; }
.r-checkout-review-label { display: flex; align-items: center; gap: var(--r-space-2); font-size: var(--r-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--r-text-primary); margin-bottom: var(--r-space-3); }
.r-checkout-review-label .material-symbols-outlined { font-size: 18px; color: var(--r-gold); }
.r-checkout-edit-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; background: var(--r-bg-elevated); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); cursor: pointer; color: var(--r-text-muted); transition: all var(--r-duration-fast); }
.r-checkout-edit-btn:hover { border-color: var(--r-gold); color: var(--r-gold); }
.r-checkout-edit-btn .material-symbols-outlined { font-size: 14px; }
[dir="rtl"] .r-checkout-edit-btn { margin-left: 0; margin-right: auto; }
.r-checkout-review-address { display: flex; flex-direction: column; gap: var(--r-space-1); font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.6; padding-left: var(--r-space-6); }
[dir="rtl"] .r-checkout-review-address { padding-left: 0; padding-right: var(--r-space-6); }
.r-checkout-review-desc { font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.6; padding-left: var(--r-space-6); margin: 0; }
[dir="rtl"] .r-checkout-review-desc { padding-left: 0; padding-right: var(--r-space-6); }
.r-checkout-divider { height: 1px; background: var(--r-border-subtle); }

/* Trust Badges */
.r-checkout-trust-badges { display: flex; gap: var(--r-space-3); margin-top: var(--r-space-4); padding-left: var(--r-space-6); flex-wrap: wrap; }
[dir="rtl"] .r-checkout-trust-badges { padding-left: 0; padding-right: var(--r-space-6); }
.r-checkout-trust-badge { display: inline-flex; align-items: center; gap: var(--r-space-1); padding: var(--r-space-2) var(--r-space-3); background: var(--r-gold-glow); border: 1px solid var(--r-gold-border); border-radius: var(--r-radius-md); font-size: var(--r-text-xs); font-weight: 500; color: var(--r-gold); }
.r-checkout-trust-badge .material-symbols-outlined { font-size: 14px; }

/* Alerts */
.r-checkout-alert { display: flex; align-items: flex-start; gap: var(--r-space-3); padding: var(--r-space-4) var(--r-space-5); border-radius: var(--r-radius-lg); margin-bottom: var(--r-space-6); font-size: var(--r-text-sm); line-height: 1.6; animation: checkoutCardIn 0.3s var(--r-ease-out) both; }
.r-checkout-alert .material-symbols-outlined:first-child { font-size: 20px; margin-top: 1px; flex-shrink: 0; }
.r-checkout-alert-error { background: var(--r-error-muted); border: 1px solid rgba(248, 113, 113, 0.25); color: var(--r-error); }
.r-checkout-alert-warning { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.25); color: #fbbf24; }
.r-checkout-alert-close { display: inline-flex; margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; opacity: 0.6; padding: 0; transition: opacity var(--r-duration-fast); }
.r-checkout-alert-close:hover { opacity: 1; }
.r-checkout-alert-close .material-symbols-outlined { font-size: 18px; }
[dir="rtl"] .r-checkout-alert-close { margin-left: 0; margin-right: auto; }
/* "Suggest a strong password" / "Show" row under the guest password fields. Wraps rather than
   squeezes at 375px, where the two labels cannot share a line. */
.r-checkout-password-actions { display: flex; flex-wrap: wrap; gap: var(--r-space-4); margin-top: var(--r-space-2); }
.r-checkout-password-link { display: inline-flex; align-items: center; gap: var(--r-space-1); background: none; border: none; padding: 0; cursor: pointer; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-gold); transition: opacity var(--r-duration-fast); }
.r-checkout-password-link:hover:not(:disabled) { opacity: 0.75; }
.r-checkout-password-link:disabled { opacity: 0.5; cursor: default; }
.r-checkout-password-link .material-symbols-outlined { font-size: 18px; }
/* Alert that carries a trailing action control (e.g. "Sign in"). Without this the button is a
   flex item free to shrink: at 375px it collapses to a sliver and clips its own label — the
   Arabic "تسجيل الدخول" loses its first characters outright. The text block gets a wrap
   threshold instead, so the action drops to its own line rather than being squeezed. */
.r-checkout-alert-action { flex-wrap: wrap; }
.r-checkout-alert-action > div { flex: 1 1 12rem; min-width: 0; }
.r-checkout-alert-action > .r-btn { flex-shrink: 0; }
.r-checkout-alert-list { margin: var(--r-space-2) 0; padding-left: var(--r-space-5); }
[dir="rtl"] .r-checkout-alert-list { padding-left: 0; padding-right: var(--r-space-5); }

/* Guest Banner */
.r-checkout-guest-banner { display: flex; align-items: center; gap: var(--r-space-2); padding: var(--r-space-3) var(--r-space-4); background: var(--r-gold-glow); border: 1px solid var(--r-gold-border); border-radius: var(--r-radius-md); margin-bottom: var(--r-space-6); font-size: var(--r-text-sm); color: var(--r-gold); }
.r-checkout-guest-banner .material-symbols-outlined { font-size: 18px; }

.r-checkout-account-toggle { display: flex; align-items: center; gap: var(--r-space-3); margin-top: var(--r-space-5); cursor: pointer; font-size: var(--r-text-sm); color: var(--r-text-primary); }
.r-checkout-account-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--r-gold); cursor: pointer; }
.r-checkout-account-hint { margin: 4px 0 var(--r-space-4) 30px; font-size: var(--r-text-xs); color: var(--r-text-muted); line-height: 1.5; }
.r-checkout-field-error { margin: var(--r-space-2) 0 0; font-size: var(--r-text-sm); color: var(--r-error); }

/* Order Summary Items */
.r-checkout-items { display: flex; flex-direction: column; gap: var(--r-space-3); }
.r-checkout-item { display: flex; justify-content: space-between; align-items: center; gap: var(--r-space-4); }
.r-checkout-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-checkout-item-name { font-size: var(--r-text-sm); color: var(--r-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-checkout-item-qty { font-size: var(--r-text-xs); color: var(--r-text-muted); }
.r-checkout-item-price { font-size: var(--r-text-sm); color: var(--r-text-primary); font-weight: 500; white-space: nowrap; }

/* Promo Applied Tag */
.r-checkout-promo-applied { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--r-space-4); }

/* Stacked promo codes (multi-code checkout). A superseded code contributed
   nothing — shown quietly so the customer sees it BEFORE paying, but it is
   never recorded against the order or counted against its usage limit. */
.r-checkout-promo-applied.is-superseded { opacity: 0.6; }
/* Stacked rows: the base rule already supplies margin-bottom, so no extra
   top margin here — two codes would otherwise sit 24px apart. */
.r-checkout-promo-applied { gap: var(--r-space-2); }
/* A long code plus a benefit badge must wrap under itself at 375px rather
   than pushing the remove button off the row. */
.r-checkout-promo-tag { flex-wrap: wrap; min-width: 0; }
.r-checkout-promo-remove { flex-shrink: 0; }
.r-checkout-promo-benefit {
    margin-inline-start: var(--r-space-2);
    font-size: var(--r-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--r-text-muted);
}
.r-checkout-promo-applied:not(.is-superseded) .r-checkout-promo-benefit { color: var(--r-success-text); }
.r-checkout-promo-hint {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    margin: var(--r-space-2) 0 0;
}
.r-checkout-promo-tag { display: inline-flex; align-items: center; gap: var(--r-space-1); padding: var(--r-space-1) var(--r-space-3); background: var(--r-success-muted); border-radius: var(--r-radius-full); font-size: var(--r-text-xs); font-weight: 600; color: var(--r-success); }
.r-checkout-promo-tag .material-symbols-outlined { font-size: 14px; }
.r-checkout-promo-remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-full); cursor: pointer; color: var(--r-text-muted); transition: all var(--r-duration-fast); }
.r-checkout-promo-remove:hover { border-color: var(--r-error); color: var(--r-error); }
.r-checkout-promo-remove .material-symbols-outlined { font-size: 14px; }
.r-checkout-promo-error { font-size: var(--r-text-xs); color: var(--r-error); margin: var(--r-space-2) 0 0; }

/* Affiliate enrollment toggle */
.r-checkout-affiliate-toggle { display: flex; align-items: flex-start; gap: var(--r-space-3); cursor: pointer; padding: var(--r-space-3) 0; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-primary); line-height: 1.5; }
.r-checkout-affiliate-toggle input[type="checkbox"] { display: none; }
.r-checkout-affiliate-check { flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--r-border-emphasis); border-radius: 4px; background: var(--r-bg-elevated); transition: all var(--r-duration-fast); position: relative; margin-top: 1px; }
.r-checkout-affiliate-toggle input:checked + .r-checkout-affiliate-check { background: var(--r-gold); border-color: var(--r-gold); }
.r-checkout-affiliate-toggle input:checked + .r-checkout-affiliate-check::after { content: '✓'; position: absolute; top: -1px; left: 3px; font-size: 14px; color: var(--r-text-inverse); font-weight: 700; }
.r-checkout-affiliate-note { display: flex; align-items: flex-start; gap: var(--r-space-2); font-size: var(--r-text-xs); color: var(--r-text-secondary); background: var(--r-gold-glow); border: 1px solid var(--r-gold-border); border-radius: var(--r-radius-md); padding: var(--r-space-3); margin-top: var(--r-space-3); line-height: 1.5; }
.r-checkout-affiliate-note .material-symbols-outlined { font-size: 16px; color: var(--r-gold); flex-shrink: 0; margin-top: 1px; }
.r-checkout-affiliate-referral { display: flex; align-items: center; gap: var(--r-space-2); font-size: var(--r-text-sm); color: var(--r-gold); margin-top: var(--r-space-3); }
.r-checkout-affiliate-referral .material-symbols-outlined { font-size: 16px; }
.r-checkout-affiliate-referral strong { font-weight: 600; letter-spacing: 0.05em; }


/* ═══════════════════════════════════════════════════════════════════════════
   SECURE PAYMENT PAGE — HyperPay Widget
   Refined luxury payment experience with custom widget styling
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page layout */
.r-payment-page { padding-top: calc(80px + var(--r-space-6)); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; }
.r-payment-container { width: 100%; max-width: 860px; padding: var(--r-space-6) var(--r-space-4); position: relative; animation: paymentFadeIn 0.5s ease-out; }
@keyframes paymentFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Top bar: back + title */
.r-payment-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.r-payment-back { display: inline-flex; align-items: center; gap: 5px; font-family: var(--r-font-body); font-size: 0.8rem; color: var(--r-text-muted); text-decoration: none; transition: color 0.2s; }
.r-payment-back:hover { color: var(--r-gold); }
.r-payment-back .material-symbols-outlined { font-size: 16px; }
.r-payment-title { font-family: var(--r-font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 400; color: var(--r-text-primary); letter-spacing: 0.02em; margin: 0; }

/* Two-column layout */
.r-payment-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* LEFT column — sticky card */
.r-payment-left { position: sticky; top: 100px; }

/* Visual Card */
.r-pay-card-visual { perspective: 600px; animation: paymentCardIn 0.6s cubic-bezier(0.23,1,0.32,1) 0.1s both; }
@keyframes paymentCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.r-pay-card-face { position: relative; width: 100%; aspect-ratio: 1.586 / 1; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(145deg, #252220 0%, #1a1715 50%, #0f0e0c 100%); border: 1px solid rgba(201,160,68,0.18); box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(201,160,68,0.06) inset; transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s ease; }
.r-pay-card-face:hover { transform: translateY(-3px) rotateX(1deg); box-shadow: 0 28px 56px rgba(0,0,0,0.55), 0 1px 0 rgba(201,160,68,0.08) inset; }
.r-pay-card-face::before { content: ''; position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(ellipse at 75% 15%, rgba(201,160,68,0.05) 0%, transparent 50%), radial-gradient(ellipse at 15% 85%, rgba(255,255,255,0.02) 0%, transparent 40%); pointer-events: none; }
.r-pay-card-face::after { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100%; background: linear-gradient(180deg, transparent 0%, rgba(201,160,68,0.03) 30%, rgba(201,160,68,0.06) 50%, rgba(201,160,68,0.03) 70%, transparent 100%); pointer-events: none; transform: skewX(-8deg); transform-origin: top right; }

.r-pay-card-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }

/* EMV Chip */
.r-pay-card-chip { width: 38px; height: 28px; border-radius: 5px; background: linear-gradient(135deg, #c9a044, #a88534 50%, #d9b86a); position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.r-pay-card-chip::before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.15); }
.r-pay-card-chip::after { content: ''; position: absolute; top: 50%; left: 3px; right: 3px; height: 1px; background: rgba(0,0,0,0.12); }

.r-pay-card-brands { display: flex; gap: 6px; align-items: center; }
.r-pay-card-brands svg { transition: opacity 0.3s ease; }

.r-pay-card-number { font-family: 'Courier New', 'Consolas', monospace; font-size: 1.15rem; letter-spacing: 3px; color: rgba(255,255,255,0.5); font-weight: 500; position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); white-space: nowrap; overflow: hidden; }

.r-pay-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1; }
.r-pay-card-detail { display: flex; flex-direction: column; gap: 2px; }
.r-pay-card-detail-label { font-family: var(--r-font-body); font-size: 0.45rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.22); font-weight: 600; }
.r-pay-card-detail-value { font-family: var(--r-font-body); font-size: 0.75rem; color: rgba(255,255,255,0.55); font-weight: 500; letter-spacing: 0.04em; min-width: 50px; }

/* Total bar */
.r-payment-total-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; margin-top: 16px; background: var(--r-bg-surface); border: 1px solid var(--r-border-default); border-radius: 10px; animation: paymentCardIn 0.5s ease 0.2s both; }
.r-payment-total-label { font-family: var(--r-font-body); font-size: 0.72rem; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.r-payment-total-amount { font-family: var(--r-font-body); font-size: 1.3rem; font-weight: 700; color: var(--r-gold); letter-spacing: -0.02em; }

/* Trust strip */
.r-payment-trust { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; animation: paymentCardIn 0.5s ease 0.3s both; }
.r-payment-trust-item { display: flex; align-items: center; gap: 4px; }
.r-payment-trust-item .material-symbols-outlined { font-size: 13px; color: #5cb85c; }
.r-payment-trust-item span:last-child { font-family: var(--r-font-body); font-size: 0.65rem; color: var(--r-text-muted); letter-spacing: 0.02em; }
.r-payment-trust-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--r-text-muted); opacity: 0.25; }

/* RIGHT column — form */
.r-payment-right { animation: paymentCardIn 0.5s ease 0.15s both; }

/* Card container for widget */
.r-payment-card { background: var(--r-bg-surface); border: 1px solid var(--r-border-default); border-radius: 14px; padding: var(--r-space-5); position: relative; }
.r-payment-widget-wrap { padding: 28px 24px; }

/* Error state */
.r-payment-error { display: flex; flex-direction: column; align-items: center; gap: var(--r-space-3); text-align: center; padding: var(--r-space-4) 0 var(--r-space-6); }
.r-payment-error .material-symbols-outlined { font-size: 40px; color: var(--r-error); }
.r-payment-error p { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); margin: 0; line-height: 1.6; }
.r-payment-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--r-space-2); width: 100%; padding: var(--r-space-3) var(--r-space-5); font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; text-decoration: none; border-radius: 8px; transition: all 0.2s; cursor: pointer; }
.r-payment-btn-outline { background: transparent; color: var(--r-gold); border: 1px solid var(--r-gold-border); }
.r-payment-btn-outline:hover { background: var(--r-gold-glow); border-color: var(--r-gold); }
.r-payment-btn-outline .material-symbols-outlined { font-size: 18px; }

/* Loading state */
.r-payment-loading { display: flex; flex-direction: column; align-items: center; gap: var(--r-space-4); padding: var(--r-space-8) 0; }
.r-payment-spinner { width: 32px; height: 32px; border: 2px solid var(--r-border-subtle); border-top-color: var(--r-gold); border-radius: 50%; animation: paymentSpin 0.8s linear infinite; }
@keyframes paymentSpin { to { transform: rotate(360deg); } }
.r-payment-loading p { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   HyperPay Widget CSS Overrides (.wpwl-* classes)
   Hide brand selector — card type auto-detected from number
   ───────────────────────────────────────────────────────────────────────── */

/* Hide brand selection radio buttons — card type auto-detected from number */
.wpwl-group-brand { display: none !important; }

/* Form container — clean slate */
.wpwl-form { font-family: var(--r-font-body) !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; max-width: 100% !important; }

/* Group (label + input together) — no background, no padding, no rounded
   container. The label sits flush above the input, both sharing the full
   width of the parent. This kills the "label pill detached from input"
   alignment issue where HyperPay's row containers picked up surface bg. */
.wpwl-group { margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.wpwl-group-cardHolder { margin-bottom: 16px !important; }

/* Labels — flush-left, same x-padding as input (none), same width */
.wpwl-label { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 0 6px !important; font-family: var(--r-font-body) !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--r-text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; background: transparent !important; border: none !important; }

/* All input controls — consistent sizing, full width of group */
.wpwl-control { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; font-family: var(--r-font-body) !important; font-size: 0.875rem !important; color: var(--r-text-primary) !important; background: var(--r-bg-elevated) !important; border: 1px solid var(--r-border-default) !important; border-radius: 8px !important; padding: 0 12px !important; height: 42px !important; line-height: 42px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; outline: none !important; box-shadow: none !important; }
.wpwl-control:focus, .wpwl-control:active { border-color: var(--r-gold) !important; box-shadow: 0 0 0 2px var(--r-gold-glow) !important; }
.wpwl-control::placeholder { color: var(--r-text-muted) !important; opacity: 0.6 !important; }

/* Card Number & CVV are HyperPay iframes — explicit height + reset padding */
.wpwl-control-cardNumber, .wpwl-control-cvv { height: 42px !important; padding: 0 !important; }
iframe.wpwl-control { height: 42px !important; display: block !important; width: 100% !important; }

/* Wrapper for inline fields (expiry + cvv side by side) — equal columns */
.wpwl-sup-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; align-items: end !important; margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border: none !important; }
.wpwl-sup-wrapper .wpwl-group { margin: 0 !important; }

/* Belt-and-braces: in case HyperPay's default template injects extra
   <div> rows between groups, strip their visual treatment too. */
.wpwl-form > div, .wpwl-form .wpwl-row { background: transparent !important; border: none !important; padding: 0 !important; }

/* Submit button */
.wpwl-button-pay { font-family: var(--r-font-body) !important; font-size: 0.9rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-dark) 100%) !important; color: var(--r-text-inverse) !important; border: none !important; border-radius: 8px !important; padding: 13px 24px !important; width: 100% !important; cursor: pointer !important; transition: all 0.25s ease !important; box-shadow: 0 2px 12px rgba(201, 160, 68, 0.25) !important; margin-top: 4px !important; }
.wpwl-button-pay:hover { background: linear-gradient(135deg, var(--r-gold-light) 0%, var(--r-gold) 100%) !important; box-shadow: 0 4px 20px rgba(201, 160, 68, 0.35) !important; transform: translateY(-1px) !important; }
.wpwl-button-pay:active { transform: translateY(0) !important; }

/* Error messages */
.wpwl-hint { font-family: var(--r-font-body) !important; font-size: 0.75rem !important; color: var(--r-error) !important; margin-top: 4px !important; }
.wpwl-has-error .wpwl-control { border-color: var(--r-error) !important; box-shadow: 0 0 0 2px var(--r-error-muted) !important; }

/* Detected card brand icon — positioned inside card number field */
.wpwl-group-cardNumber { position: relative !important; }
.wpwl-brand-card { position: absolute !important; right: 12px !important; top: 34px !important; z-index: 2 !important; }
.wpwl-brand-VISA, .wpwl-brand-MASTER, .wpwl-brand-AMEX, .wpwl-brand-MADA { opacity: 0.85 !important; }
[dir="rtl"] .wpwl-brand-card { right: auto !important; left: 12px !important; }

/* Remove default widget decorations */
.wpwl-clearfix::after { display: none !important; }
.wpwl-wrapper-registration { display: none !important; }
.wpwl-wrapper { position: relative !important; }

/* Hide HyperPay's built-in trust/security badges — we have our own */
.wpwl-lock, .wpwl-group-secure, .wpwl-wrapper-secure { display: none !important; }
.wpwl-form img[src*="logo"], .wpwl-footer, .wpwl-group-submit + div:not(.wpwl-group) { display: none !important; }

/* Responsive — stack on mobile */
@media (max-width: 720px) {
    .r-payment-layout { grid-template-columns: 1fr; gap: 20px; }
    .r-payment-left { position: static; }
    .r-pay-card-face { padding: 20px; }
    .r-pay-card-number { font-size: 1rem; letter-spacing: 2px; }
    .r-payment-widget-wrap { padding: 22px 18px; }
    .r-payment-trust { gap: 12px; }
}

@media (max-width: 480px) {
    .r-payment-container { padding: var(--r-space-4) var(--r-space-3); }
    .r-payment-topbar h1 { font-size: 1.2rem; }
    .r-pay-card-face { padding: 18px; border-radius: 12px; }
    .r-pay-card-number { font-size: 0.9rem; }
    .r-pay-card-detail-value { font-size: 0.68rem; }
    .r-payment-widget-wrap { padding: 18px 14px; }
}

/* RTL support */
[dir="rtl"] .r-payment-back .material-symbols-outlined { transform: scaleX(-1); }
[dir="rtl"] .r-payment-topbar { direction: rtl; }
[dir="rtl"] .r-pay-card-bottom { direction: ltr; }
[dir="rtl"] .wpwl-control { text-align: right !important; }
[dir="rtl"] .wpwl-label { text-align: right !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM CINEMATIC ENHANCEMENTS
   Immersive luxury experience with depth and motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   CUSTOM CURSOR - Golden ring effect
   ───────────────────────────────────────────────────────────────────────── */
.r-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--r-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    mix-blend-mode: difference;
}

.r-cursor.hover {
    width: 50px;
    height: 50px;
    background: rgba(201, 160, 68, 0.1);
    border-color: var(--r-gold-light);
}

.r-cursor.clicking {
    transform: translate(-50%, -50%) scale(0.8);
}

.r-cursor-dot {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--r-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
}

@media (hover: none) {
    .r-cursor, .r-cursor-dot {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL PROGRESS INDICATOR - Golden line
   ───────────────────────────────────────────────────────────────────────── */
.r-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--r-gold-dark), var(--r-gold), var(--r-gold-light));
    z-index: 9999;
    transform-origin: left;
    box-shadow: 0 0 10px var(--r-gold), 0 0 20px rgba(201, 160, 68, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO CINEMATIC ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────── */

/* Floating Particles Container */
.r-hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.r-hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--r-gold);
    border-radius: 50%;
    opacity: 0;
    animation: floatParticle 8s infinite;
}

.r-hero-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.r-hero-particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.r-hero-particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.r-hero-particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.r-hero-particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.r-hero-particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.r-hero-particle:nth-child(7) { left: 70%; animation-delay: 6s; }
.r-hero-particle:nth-child(8) { left: 80%; animation-delay: 7s; }
.r-hero-particle:nth-child(9) { left: 90%; animation-delay: 0.5s; }
.r-hero-particle:nth-child(10) { left: 15%; animation-delay: 2.5s; }
.r-hero-particle:nth-child(11) { left: 45%; animation-delay: 4.5s; }
.r-hero-particle:nth-child(12) { left: 75%; animation-delay: 6.5s; }

@keyframes floatParticle {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }
    10% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    90% {
        opacity: 0;
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(50px) scale(1);
    }
}

/* Gradient Orbs - Floating atmospheric elements */
.r-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    animation: orbFloat 20s ease-in-out infinite;
}

.r-hero-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--r-gold) 0%, transparent 70%);
    top: -10%;
    right: 10%;
    animation-delay: 0s;
}

.r-hero-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(201, 160, 68, 0.5) 0%, transparent 70%);
    bottom: 10%;
    left: 5%;
    animation-delay: -5s;
}

.r-hero-orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(217, 184, 106, 0.4) 0%, transparent 70%);
    top: 40%;
    right: 30%;
    animation-delay: -10s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -20px) scale(1.1);
    }
    50% {
        transform: translate(-20px, 30px) scale(0.9);
    }
    75% {
        transform: translate(20px, 20px) scale(1.05);
    }
}

/* Title Character Animation */
.r-hero-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotateX(-40deg);
    animation: charReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes charReveal {
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

/* Enhanced Hero Visual with 3D tilt */
.r-hero-visual {
    perspective: 1000px;
}

.r-hero-image-container {
    transform-style: preserve-3d;
    transition: transform 0.3s ease-out;
}

.r-hero-image-container.tilting {
    transition: none;
}

/* Shine effect on hero image */
.r-hero-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 60%
    );
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.r-hero-image-container:hover::after {
    transform: translateX(100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT CARDS - 3D Glass Morphism
   ───────────────────────────────────────────────────────────────────────── */

/* 3D Container */
.r-product-card {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.r-product-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.3s ease-out;
}

/* Glass morphism effect */
.r-product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.r-product-card:hover::before {
    opacity: 1;
}

/* Luminous border on hover */
.r-product-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(
        135deg,
        var(--r-gold) 0%,
        transparent 30%,
        transparent 70%,
        var(--r-gold-light) 100%
    );
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.r-product-card:hover::after {
    opacity: 0.6;
}

/* Magnetic hover effect */
.r-product-card.magnetic-hover {
    transition: transform 0.15s ease-out;
}

/* Ingredient highlight on hover */
.r-product-card-ingredient {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: var(--r-space-2) var(--r-space-3);
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-gold-border);
    border-radius: var(--r-radius-md);
    font-size: var(--r-text-xs);
    color: var(--r-gold);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
}

.r-product-card-ingredient::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--r-gold-border);
}

.r-product-card:hover .r-product-card-ingredient {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Add-to-cart press feedback.
   Pseudo-element, not an injected node: the JS version of this appended a real <span>
   into a Blazor-rendered button and broke the renderer on the next patch (see the note
   in app.js initProductCardEffects). ::after is invisible to Blazor's diff, so the same
   effect costs nothing. Driven by :active, which fires on touch as well as mouse. */
/* No `transition` here on purpose: the base rule above already sets
   `transition: all var(--r-duration-fast)`, which covers transform, and redeclaring it
   narrowly would drop the hover border/background animation. */
.r-product-card-btn {
    position: relative;
    overflow: hidden;
}

.r-product-card-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--r-gold);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}

.r-product-card-btn:active {
    transform: scale(0.97);
}

.r-product-card-btn:active::after {
    opacity: 0.22;
    transition: opacity 0s;
}

@media (prefers-reduced-motion: reduce) {
    .r-product-card-btn::after {
        transition: none;
    }

    .r-product-card-btn:active {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   BRAND SECTION - Editorial Magazine Layout
   ───────────────────────────────────────────────────────────────────────── */

.r-brand-inner {
    position: relative;
}

/* Large decorative numbers */
.r-brand-feature-number {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--r-font-display);
    font-size: 120px;
    font-weight: 300;
    color: var(--r-gold);
    opacity: 0.08;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 1200px) {
    .r-brand-feature-number {
        display: none;
    }
}

/* Pull quote styling */
.r-brand-pullquote {
    position: relative;
    margin: var(--r-space-8) 0;
    padding-left: var(--r-space-8);
    font-family: var(--r-font-display);
    font-size: var(--r-text-2xl);
    font-style: italic;
    line-height: 1.5;
    color: var(--r-text-primary);
}

.r-brand-pullquote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 80px;
    color: var(--r-gold);
    opacity: 0.3;
    line-height: 1;
}

/* Image reveal mask animation */
.r-brand-image-wrap {
    position: relative;
    overflow: hidden;
}

.r-brand-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--r-bg-surface);
    transform: translateX(-101%);
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.r-brand-image-wrap.revealed::after {
    transform: translateX(101%);
}

/* Overlapping text effect */
.r-brand-content {
    position: relative;
}

@media (min-width: 1024px) {
    .r-brand-content {
        margin-left: -60px;
        padding: var(--r-space-12);
        background: var(--r-bg-surface);
        border-radius: var(--r-radius-xl);
        box-shadow: var(--r-shadow-xl);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   CTA SECTION - Aurora Background Effect
   ───────────────────────────────────────────────────────────────────────── */

.r-cta {
    position: relative;
    overflow: hidden;
}

/* Aurora gradient animation */
.r-cta-aurora {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(201, 160, 68, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(168, 133, 52, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 80%, rgba(217, 184, 106, 0.12) 0%, transparent 50%);
    animation: auroraShift 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraShift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: translate(5%, -5%) scale(1.1);
        filter: hue-rotate(5deg);
    }
    50% {
        transform: translate(-5%, 5%) scale(0.95);
        filter: hue-rotate(-5deg);
    }
    75% {
        transform: translate(3%, 3%) scale(1.05);
        filter: hue-rotate(3deg);
    }
}

/* Floating product silhouettes */
.r-cta-silhouettes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
}

.r-cta-silhouette {
    position: absolute;
    width: 200px;
    height: 300px;
    background: linear-gradient(to bottom, var(--r-gold), transparent);
    border-radius: 100px 100px 40px 40px;
    animation: silhouetteFloat 20s ease-in-out infinite;
}

.r-cta-silhouette:nth-child(1) {
    left: 5%;
    top: 20%;
    animation-delay: 0s;
}

.r-cta-silhouette:nth-child(2) {
    right: 10%;
    top: 30%;
    width: 150px;
    height: 250px;
    animation-delay: -5s;
}

.r-cta-silhouette:nth-child(3) {
    left: 20%;
    bottom: 10%;
    width: 120px;
    height: 200px;
    animation-delay: -10s;
}

@keyframes silhouetteFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}

/* Pulsing CTA button */
.r-cta .r-btn-primary {
    position: relative;
}

.r-cta .r-btn-primary::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: var(--r-gold);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    animation: ctaPulse 2s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.05);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   VISUAL ATMOSPHERE - Global Effects
   ───────────────────────────────────────────────────────────────────────── */

/* Section light leaks */
.r-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(201, 160, 68, 0.02) 50%,
        transparent
    );
    pointer-events: none;
}

/* Floating accent orbs throughout page */
.r-atmosphere-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.15;
    animation: atmosphereFloat 30s ease-in-out infinite;
}

.r-atmosphere-orb-1 {
    width: 500px;
    height: 500px;
    background: var(--r-gold);
    top: -200px;
    right: -200px;
}

.r-atmosphere-orb-2 {
    width: 400px;
    height: 400px;
    background: rgba(201, 160, 68, 0.5);
    bottom: 20%;
    left: -150px;
    animation-delay: -10s;
}

@keyframes atmosphereFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(50px, 30px);
    }
    66% {
        transform: translate(-30px, -20px);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   STEPS SECTION - Connected Timeline
   ───────────────────────────────────────────────────────────────────────── */

.r-steps-grid {
    position: relative;
}

/* Connecting line between steps */
.r-steps-grid::before {
    content: '';
    position: absolute;
    top: 50px;
    left: calc(16.67% + 20px);
    right: calc(16.67% + 20px);
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--r-gold-border) 10%,
        var(--r-gold-border) 90%,
        transparent
    );
}

@media (max-width: 768px) {
    .r-steps-grid::before {
        display: none;
    }
}

/* Step number watermark */
.r-step {
    position: relative;
}

.r-step::before {
    content: attr(data-step);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--r-font-display);
    font-size: 150px;
    font-weight: 300;
    color: var(--r-gold);
    opacity: 0.04;
    line-height: 1;
    pointer-events: none;
}

/* Step styling */
.r-step {
    position: relative;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   PACKAGE CARDS - Premium Enhancements
   ───────────────────────────────────────────────────────────────────────── */

/* Gradient mesh background on hover */
.r-package-card {
    position: relative;
    overflow: hidden;
}

.r-package-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(201, 160, 68, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(217, 184, 106, 0.08) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.r-package-card:hover::before {
    opacity: 1;
}

/* Savings badge shimmer */
/* NOTE: do NOT redeclare `position` here — the base rule above already sets
   `position: absolute` to pin the badge to the bottom-left of the media.
   Overriding to `position: relative` made the badge flow inline and broke
   the layout (showed up as a phantom margin). `overflow: hidden` is enough
   to clip the ::after shimmer; the badge is already a containing block
   because it's positioned. */
.r-package-card-savings {
    overflow: hidden;
}

.r-package-card-savings::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: savingsShimmer 3s infinite;
}

@keyframes savingsShimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

/* Stacked product preview */
.r-package-card-products-preview {
    position: absolute;
    top: var(--r-space-3);
    right: var(--r-space-3);
    display: flex;
}

.r-package-card-products-preview img {
    width: 32px;
    height: 32px;
    border-radius: var(--r-radius-sm);
    border: 2px solid var(--r-bg-elevated);
    object-fit: cover;
    margin-left: -8px;
    transition: transform 0.2s ease;
}

.r-package-card-products-preview img:first-child {
    margin-left: 0;
}

.r-package-card:hover .r-package-card-products-preview img {
    margin-left: 4px;
}

.r-package-card:hover .r-package-card-products-preview img:first-child {
    margin-left: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATIONS - Glass Effect
   ───────────────────────────────────────────────────────────────────────── */

.r-toast {
    position: fixed;
    bottom: var(--r-space-6);
    right: var(--r-space-6);
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding: var(--r-space-4) var(--r-space-6);
    background: rgba(26, 24, 22, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--r-border-default);
    border-radius: var(--r-radius-lg);
    box-shadow: var(--r-shadow-xl);
    color: var(--r-text-primary);
    font-size: var(--r-text-sm);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10000;
}

.r-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.r-toast-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-toast-icon .material-symbols-outlined {
    font-size: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   PAGE TRANSITIONS
   ───────────────────────────────────────────────────────────────────────── */

.r-page-enter {
    animation: pageEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT MODE ADJUSTMENTS FOR NEW EFFECTS
   ───────────────────────────────────────────────────────────────────────── */

.mud-theme-light .r-cursor,
body.mud-theme-light .r-cursor {
    border-color: var(--r-gold-dark);
    mix-blend-mode: normal;
}

.mud-theme-light .r-hero-orb,
body.mud-theme-light .r-hero-orb {
    opacity: 0.2;
}

.mud-theme-light .r-atmosphere-orb,
body.mud-theme-light .r-atmosphere-orb {
    opacity: 0.08;
}

.mud-theme-light .r-cta-aurora,
body.mud-theme-light .r-cta-aurora {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(201, 160, 68, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(168, 133, 52, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 80%, rgba(217, 184, 106, 0.08) 0%, transparent 50%);
}

.mud-theme-light .r-toast,
body.mud-theme-light .r-toast {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED UI PRIMITIVES
   Reusable component styles for the design system
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   RenovaButton - Primary Button Component
   ───────────────────────────────────────────────────────────────────────── */
.r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--r-space-2);
    font-family: var(--r-font-body);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--r-duration-normal) var(--r-ease-out);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.r-btn:disabled,
.r-btn.r-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Size Variants.
   height: auto is load-bearing (B7): the earlier .r-btn base (used bare by
   the public CTAs) hardcodes height: 52px, and height beats min-height — so
   every sized button silently rendered 52px tall regardless of its variant.
   Releasing the height here lets min-height govern; size-class-less call
   sites keep the 52px CTA geometry unchanged. */
.r-btn-sm {
    height: auto;
    padding: var(--r-space-2) var(--r-space-4);
    font-size: var(--r-text-sm);
    border-radius: var(--r-radius-md);
    min-height: 36px;
}

.r-btn-md {
    height: auto;
    padding: var(--r-space-3) var(--r-space-6);
    font-size: var(--r-text-base);
    border-radius: var(--r-radius-lg);
    min-height: 44px;
}

.r-btn-lg {
    height: auto;
    padding: var(--r-space-4) var(--r-space-8);
    font-size: var(--r-text-lg);
    border-radius: var(--r-radius-lg);
    min-height: 52px;
}

/* Style Variants */
.r-btn-primary {
    background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-dark) 100%);
    color: var(--r-text-inverse);
    box-shadow: var(--r-shadow-gold);
}

.r-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--r-gold-light) 0%, var(--r-gold) 100%);
    transform: translateY(-2px);
    box-shadow: var(--r-shadow-gold-lg);
}

.r-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.r-btn-secondary {
    background: var(--r-bg-elevated);
    color: var(--r-text-primary);
    border: 1px solid var(--r-border-default);
}

.r-btn-secondary:hover:not(:disabled) {
    background: var(--r-bg-hover);
    border-color: var(--r-border-emphasis);
}

/* Ghost = the QUIET button (Cancel, back, tertiary). Spec adopted from the
   proven admin .r-product-ghost-btn (B7 tranche 2): the hairline border keeps
   it discoverable, and the old white-alpha fill was invisible in light mode. */
.r-btn-ghost {
    background: transparent;
    color: var(--r-text-secondary);
    border: 1px solid var(--r-border-subtle);
}

.r-btn-ghost:hover:not(:disabled) {
    color: var(--r-text-primary);
    border-color: var(--r-text-muted);
}

.r-btn-outline {
    background: transparent;
    color: var(--r-gold-text);
    border: 1px solid var(--r-gold-border);
}

/* Hover fills solid — adopted from .r-products-cta, the page-action CTA this
   variant now serves (B7). It had no live call sites of its own. */
.r-btn-outline:hover:not(:disabled) {
    background: var(--r-gold);
    color: var(--r-text-inverse);
    border-color: var(--r-gold);
}

/* Danger = quiet-until-hover destructive secondary, adopted from the admin
   .r-product-danger-btn (B7). The old solid-fill spec had zero call sites —
   destructive COMMITMENT lives in the confirm dialogs, not the trigger. */
.r-btn-danger {
    background: transparent;
    color: var(--r-error-text);
    border: 1px solid var(--r-error-muted);
}

.r-btn-danger:hover:not(:disabled) {
    background: var(--r-error-muted);
    border-color: var(--r-error);
}

.r-btn-danger:focus-visible {
    box-shadow: 0 0 0 3px var(--r-error-muted);
}

.r-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Full Width */
.r-btn-full {
    width: 100%;
}

/* Icon Only */
.r-btn-icon-only {
    padding: var(--r-space-3);
    aspect-ratio: 1;
}

.r-btn-icon-only.r-btn-sm {
    padding: var(--r-space-2);
}

.r-btn-icon-only.r-btn-lg {
    padding: var(--r-space-4);
}

/* Icon Styling */
.r-btn-icon {
    font-size: 1.25em;
}

/* Loading State */
.r-btn-loading {
    pointer-events: none;
}

.r-btn-spinner {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: r-spin 0.8s linear infinite;
}

@keyframes r-spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   BadgeChip - Versatile Badge/Chip Component
   ───────────────────────────────────────────────────────────────────────── */
.r-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-1);
    font-family: var(--r-font-body);
    font-weight: 500;
    border-radius: var(--r-radius-full);
    white-space: nowrap;
    transition: all var(--r-duration-fast) var(--r-ease-out);
}

/* Size Variants */
.r-chip-sm {
    padding: 0.125rem 0.5rem;
    font-size: var(--r-text-xs);
}

.r-chip-md {
    padding: 0.25rem 0.75rem;
    font-size: var(--r-text-sm);
}

.r-chip-lg {
    padding: 0.375rem 1rem;
    font-size: var(--r-text-base);
}

/* Color Variants - Filled */
.r-chip-filled.r-chip-default {
    background: var(--r-bg-elevated);
    color: var(--r-text-primary);
}

.r-chip-filled.r-chip-primary {
    background: var(--r-gold);
    color: var(--r-text-inverse);
}

.r-chip-filled.r-chip-gold {
    background: linear-gradient(135deg, var(--r-gold) 0%, var(--r-gold-dark) 100%);
    color: var(--r-text-inverse);
}

.r-chip-filled.r-chip-success {
    background: var(--r-success);
    color: #0d0c0a;
}

.r-chip-filled.r-chip-warning {
    background: #f59e0b;
    color: #0d0c0a;
}

.r-chip-filled.r-chip-error {
    background: var(--r-error);
    color: #ffffff;
}

.r-chip-filled.r-chip-info {
    background: #3b82f6;
    color: #ffffff;
}

/* Color Variants - Soft */
.r-chip-soft.r-chip-default {
    background: var(--r-bg-hover);
    color: var(--r-text-secondary);
}

.r-chip-soft.r-chip-primary,
.r-chip-soft.r-chip-gold {
    background: var(--r-gold-glow);
    color: var(--r-gold);
}

.r-chip-soft.r-chip-success {
    background: var(--r-success-muted);
    color: var(--r-success);
}

.r-chip-soft.r-chip-error {
    background: var(--r-error-muted);
    color: var(--r-error);
}

/* Color Variants - Outlined */
.r-chip-outlined {
    background: transparent;
    border: 1px solid currentColor;
}

.r-chip-outlined.r-chip-default {
    color: var(--r-text-secondary);
    border-color: var(--r-border-default);
}

.r-chip-outlined.r-chip-gold {
    color: var(--r-gold);
    border-color: var(--r-gold-border);
}

/* Clickable */
.r-chip-clickable {
    cursor: pointer;
}

.r-chip-clickable:hover {
    opacity: 0.85;
}

/* Dismissible */
.r-chip-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-inline-start: var(--r-space-1);
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--r-duration-fast);
}

.r-chip-dismiss:hover {
    opacity: 1;
}

.r-chip-dismiss .material-symbols-outlined {
    font-size: 0.875em;
}

.r-chip-icon {
    font-size: 1em;
}

/* ─────────────────────────────────────────────────────────────────────────
   StatCard - Statistics Display Card
   ───────────────────────────────────────────────────────────────────────── */
.r-stat-card {
    display: flex;
    align-items: flex-start;
    gap: var(--r-space-4);
    padding: var(--r-space-6);
    border-radius: var(--r-radius-xl);
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-stat-default {
    background: var(--r-bg-surface);
}

.r-stat-elevated {
    background: var(--r-bg-elevated);
    box-shadow: var(--r-shadow-lg);
}

.r-stat-outlined {
    background: transparent;
    border: 1px solid var(--r-border-default);
}

.r-stat-filled {
    background: var(--r-gold-glow);
    border: 1px solid var(--r-gold-border);
}

/* Icon */
.r-stat-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-radius-lg);
    flex-shrink: 0;
}

.r-stat-icon-wrapper .material-symbols-outlined {
    font-size: 24px;
}

.r-stat-icon-primary {
    background: var(--r-gold-glow);
    color: var(--r-gold);
}

.r-stat-icon-success {
    background: var(--r-success-muted);
    color: var(--r-success);
}

.r-stat-icon-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.r-stat-icon-error {
    background: var(--r-error-muted);
    color: var(--r-error);
}

.r-stat-icon-info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Content */
.r-stat-content {
    flex: 1;
    min-width: 0;
}

.r-stat-label {
    display: block;
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    margin-bottom: var(--r-space-1);
}

.r-stat-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--r-space-3);
    flex-wrap: wrap;
}

.r-stat-value {
    font-family: var(--r-font-display);
    font-size: var(--r-text-3xl);
    font-weight: 600;
    color: var(--r-text-primary);
    line-height: 1.2;
}

.r-stat-prefix,
.r-stat-suffix {
    font-size: 0.6em;
    color: var(--r-text-secondary);
}

/* Trend */
.r-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-1);
    font-size: var(--r-text-sm);
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--r-radius-full);
}

.r-stat-trend-up {
    color: var(--r-success);
    background: var(--r-success-muted);
}

.r-stat-trend-down {
    color: var(--r-error);
    background: var(--r-error-muted);
}

.r-stat-trend-icon {
    font-size: 1em;
}

.r-stat-description {
    display: block;
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    margin-top: var(--r-space-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   FeatureCard - Feature Highlight Card
   ───────────────────────────────────────────────────────────────────────── */
.r-feature-card {
    display: flex;
    flex-direction: column;
    padding: var(--r-space-6);
    border-radius: var(--r-radius-xl);
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-feature-default {
    background: transparent;
}

.r-feature-elevated {
    background: var(--r-bg-surface);
    box-shadow: var(--r-shadow-md);
}

.r-feature-elevated:hover {
    transform: translateY(-4px);
    box-shadow: var(--r-shadow-xl);
}

.r-feature-outlined {
    background: transparent;
    border: 1px solid var(--r-border-default);
}

.r-feature-outlined:hover {
    border-color: var(--r-gold-border);
}

.r-feature-filled {
    background: var(--r-bg-elevated);
}

.r-feature-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--r-border-subtle);
}

/* Layout Variants */
.r-feature-vertical {
    text-align: left;
}

.r-feature-centered {
    align-items: center;
    text-align: center;
}

.r-feature-horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--r-space-4);
}

/* Clickable */
.r-feature-clickable {
    cursor: pointer;
}

/* Icon */
.r-feature-icon-wrapper {
    margin-bottom: var(--r-space-4);
}

.r-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--r-gold-glow);
    border-radius: var(--r-radius-lg);
    color: var(--r-gold);
}

.r-feature-icon .material-symbols-outlined {
    font-size: 28px;
}

.r-feature-icon-glass {
    background: rgba(201, 160, 68, 0.1);
    backdrop-filter: blur(8px);
}

.r-feature-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Step Number */
.r-feature-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--r-font-display);
    font-size: var(--r-text-lg);
    font-weight: 600;
    color: var(--r-gold);
    background: var(--r-gold-glow);
    border: 1px solid var(--r-gold-border);
    border-radius: 50%;
    margin-bottom: var(--r-space-4);
}

/* Content */
.r-feature-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-text-primary);
    margin: 0 0 var(--r-space-2);
}

.r-feature-description {
    font-size: var(--r-text-base);
    color: var(--r-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.r-feature-extra {
    margin-top: var(--r-space-4);
}

/* CTA Link */
.r-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-2);
    margin-top: var(--r-space-4);
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-gold);
    text-decoration: none;
    transition: gap var(--r-duration-fast) var(--r-ease-out);
}

.r-feature-cta:hover {
    gap: var(--r-space-3);
}

.r-feature-cta .material-symbols-outlined {
    font-size: 1.25em;
}

/* ─────────────────────────────────────────────────────────────────────────
   TestimonialCard - Customer Testimonial Card
   ───────────────────────────────────────────────────────────────────────── */
.r-testimonial-card {
    display: flex;
    flex-direction: column;
    padding: var(--r-space-8);
    border-radius: var(--r-radius-xl);
    position: relative;
    transition: all var(--r-duration-normal) var(--r-ease-out);
}

.r-testimonial-default {
    background: var(--r-bg-surface);
}

.r-testimonial-elevated {
    background: var(--r-bg-elevated);
    box-shadow: var(--r-shadow-lg);
}

.r-testimonial-outlined {
    background: transparent;
    border: 1px solid var(--r-border-default);
}

.r-testimonial-featured {
    background: linear-gradient(135deg, var(--r-gold-glow) 0%, transparent 100%);
    border: 1px solid var(--r-gold-border);
}

.r-testimonial-minimal {
    background: transparent;
    padding: var(--r-space-4);
}

/* Quote Icon */
.r-testimonial-quote-icon {
    color: var(--r-gold);
    opacity: 0.3;
    margin-bottom: var(--r-space-4);
}

.r-testimonial-quote-icon .material-symbols-outlined {
    font-size: 40px;
}

/* Rating */
.r-testimonial-rating {
    display: flex;
    gap: 2px;
    margin-bottom: var(--r-space-4);
}

.r-testimonial-rating .material-symbols-outlined {
    font-size: 18px;
}

.r-star-filled {
    color: var(--r-gold);
}

.r-star-empty {
    color: var(--r-text-muted);
}

/* Quote */
.r-testimonial-quote {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-style: italic;
    font-weight: 400;
    color: var(--r-text-primary);
    line-height: 1.6;
    margin: 0 0 var(--r-space-6);
    flex: 1;
}

/* Author */
.r-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
}

.r-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.r-testimonial-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--r-bg-hover);
    border-radius: 50%;
    color: var(--r-text-muted);
}

.r-testimonial-author-info {
    display: flex;
    flex-direction: column;
}

.r-testimonial-author-name {
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-testimonial-author-title {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

.r-testimonial-date {
    position: absolute;
    top: var(--r-space-4);
    right: var(--r-space-4);
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   ImageWithOverlay - Image with Overlay Content
   ───────────────────────────────────────────────────────────────────────── */
.r-image-overlay {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-radius-lg);
}

.r-overlay-image {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform var(--r-duration-slow) var(--r-ease-out);
}

.r-img-cover {
    object-fit: cover;
}

.r-img-contain {
    object-fit: contain;
}

.r-image-overlay:hover .r-overlay-image {
    transform: scale(1.05);
}

/* Placeholder */
.r-overlay-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: var(--r-bg-surface);
    color: var(--r-text-muted);
}

.r-overlay-placeholder .material-symbols-outlined {
    font-size: 48px;
}

/* Gradient Overlay */
.r-overlay-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.r-gradient-to-top {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}

.r-gradient-to-bottom {
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 60%);
}

.r-gradient-to-left {
    background: linear-gradient(to left, rgba(0,0,0,0.7) 0%, transparent 60%);
}

.r-gradient-to-right {
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 60%);
}

.r-gradient-radial {
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.6) 100%);
}

/* Content Overlay */
.r-overlay-content {
    position: absolute;
    padding: var(--r-space-4);
    z-index: 2;
}

.r-overlay-top-left { top: 0; left: 0; }
.r-overlay-top-center { top: 0; left: 50%; transform: translateX(-50%); }
.r-overlay-top-right { top: 0; right: 0; }
.r-overlay-center-left { top: 50%; left: 0; transform: translateY(-50%); }
.r-overlay-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.r-overlay-center-right { top: 50%; right: 0; transform: translateY(-50%); }
.r-overlay-bottom-left { bottom: 0; left: 0; }
.r-overlay-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.r-overlay-bottom-right { bottom: 0; right: 0; }
.r-overlay-full { inset: 0; display: flex; align-items: center; justify-content: center; }

/* Hover Overlay */
.r-overlay-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--r-duration-normal) var(--r-ease-out);
    z-index: 3;
}

.r-overlay-has-hover:hover .r-overlay-hover {
    opacity: 1;
}

/* Aspect Ratios */
.r-aspect-1-1 { aspect-ratio: 1 / 1; }
.r-aspect-4-3 { aspect-ratio: 4 / 3; }
.r-aspect-16-9 { aspect-ratio: 16 / 9; }
.r-aspect-3-4 { aspect-ratio: 3 / 4; }
.r-aspect-2-3 { aspect-ratio: 2 / 3; }

/* ─────────────────────────────────────────────────────────────────────────
   GlassPanel - Glassmorphism Panel
   ───────────────────────────────────────────────────────────────────────── */
.r-glass {
    --glass-opacity: 0.1;
}

.r-glass-dark {
    background: rgba(255, 255, 255, var(--glass-opacity));
}

.r-glass-light {
    background: rgba(0, 0, 0, var(--glass-opacity));
}

.r-glass-primary {
    background: rgba(201, 160, 68, var(--glass-opacity));
}

/* Blur Intensity */
.r-glass-blur-light {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.r-glass-blur-medium {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.r-glass-blur-heavy {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Border Radius */
.r-glass-radius-none { border-radius: 0; }
.r-glass-radius-sm { border-radius: var(--r-radius-sm); }
.r-glass-radius-md { border-radius: var(--r-radius-md); }
.r-glass-radius-lg { border-radius: var(--r-radius-lg); }
.r-glass-radius-xl { border-radius: var(--r-radius-xl); }
.r-glass-radius-full { border-radius: var(--r-radius-full); }

/* Border */
.r-glass-bordered {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mud-theme-light .r-glass-bordered {
    border-color: rgba(0, 0, 0, 0.1);
}

/* Shadow */
.r-glass-shadow {
    box-shadow: var(--r-shadow-lg);
}

/* ─────────────────────────────────────────────────────────────────────────
   SectionWrapper - Page Section Container
   ───────────────────────────────────────────────────────────────────────── */
.r-section {
    position: relative;
    width: 100%;
}

/* Background Variants */
.r-section-default {
    background: transparent;
}

.r-section-surface {
    background: var(--r-bg-surface);
}

.r-section-elevated {
    background: var(--r-bg-elevated);
}

.r-section-alt {
    background: var(--r-bg-base);
}

.r-section-primary {
    background: var(--r-gold-glow);
}

.r-section-gradient {
    background: linear-gradient(180deg, var(--r-bg-base) 0%, var(--r-bg-surface) 100%);
}

.r-section-image {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: center;
}

/* Padding Variants */
.r-section-py-none { padding-top: 0; padding-bottom: 0; }
.r-section-py-sm { padding-top: var(--r-space-8); padding-bottom: var(--r-space-8); }
.r-section-py-default { padding-top: var(--r-space-16); padding-bottom: var(--r-space-16); }
.r-section-py-lg { padding-top: var(--r-space-20); padding-bottom: var(--r-space-20); }
.r-section-py-xl { padding-top: var(--r-space-24); padding-bottom: var(--r-space-24); }

/* Container */
.r-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--r-container-padding);
}

.r-container-narrow { max-width: var(--r-container-narrow); }
.r-container-prose { max-width: var(--r-container-prose); }
.r-container-default { max-width: var(--r-container-max); }
.r-container-wide { max-width: 1600px; }

/* Section Header */
.r-section-header {
    margin-bottom: var(--r-space-12);
}

.r-section-header-left { text-align: left; }
.r-section-header-center { text-align: center; }
.r-section-header-right { text-align: right; }

.r-section-eyebrow {
    display: inline-block;
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--r-space-3);
}

.r-section-title {
    font-family: var(--r-font-display);
    font-size: clamp(var(--r-text-3xl), 5vw, var(--r-text-5xl));
    font-weight: 500;
    color: var(--r-text-primary);
    line-height: 1.2;
    margin: 0 0 var(--r-space-4);
}

.r-section-subtitle {
    font-size: var(--r-text-lg);
    color: var(--r-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
}

.r-section-header-center .r-section-subtitle {
    margin-inline: auto;
}

.r-section-footer {
    margin-top: var(--r-space-12);
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   ResponsiveGrid - Flexible Grid Layout
   ───────────────────────────────────────────────────────────────────────── */
.r-grid {
    display: grid;
}

/* Column Variants */
.r-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.r-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (min-width: 640px) {
    .r-sm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .r-sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-sm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r-sm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .r-md-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .r-md-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-md-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r-md-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .r-lg-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .r-lg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r-lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .r-lg-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .r-lg-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .r-xl-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .r-xl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-xl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .r-xl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .r-xl-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .r-xl-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Gap Variants */
.r-gap-0 { gap: 0; }
.r-gap-1 { gap: var(--r-space-1); }
.r-gap-2 { gap: var(--r-space-2); }
.r-gap-4 { gap: var(--r-space-4); }
.r-gap-6 { gap: var(--r-space-6); }
.r-gap-8 { gap: var(--r-space-8); }

.r-gap-x-0 { column-gap: 0; }
.r-gap-x-1 { column-gap: var(--r-space-1); }
.r-gap-x-2 { column-gap: var(--r-space-2); }
.r-gap-x-4 { column-gap: var(--r-space-4); }
.r-gap-x-6 { column-gap: var(--r-space-6); }
.r-gap-x-8 { column-gap: var(--r-space-8); }

.r-gap-y-0 { row-gap: 0; }
.r-gap-y-1 { row-gap: var(--r-space-1); }
.r-gap-y-2 { row-gap: var(--r-space-2); }
.r-gap-y-4 { row-gap: var(--r-space-4); }
.r-gap-y-6 { row-gap: var(--r-space-6); }
.r-gap-y-8 { row-gap: var(--r-space-8); }

/* Alignment */
.r-items-stretch { align-items: stretch; }
.r-items-start { align-items: start; }
.r-items-center { align-items: center; }
.r-items-end { align-items: end; }
.r-items-baseline { align-items: baseline; }

.r-justify-stretch { justify-items: stretch; }
.r-justify-start { justify-items: start; }
.r-justify-center { justify-items: center; }
.r-justify-end { justify-items: end; }

/* ─────────────────────────────────────────────────────────────────────────
   PriceDisplay - Price Formatting Component
   ───────────────────────────────────────────────────────────────────────── */
.r-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--r-space-2);
    font-family: var(--r-font-body);
}

.r-price-inline {
    flex-direction: row;
    flex-wrap: wrap;
}

.r-price-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--r-space-1);
}

/* Size Variants */
.r-price-sm .r-price-current { font-size: var(--r-text-base); }
.r-price-md .r-price-current { font-size: var(--r-text-xl); }
.r-price-lg .r-price-current { font-size: var(--r-text-2xl); line-height: 1; }
.r-price-xl .r-price-current { font-size: var(--r-text-3xl); line-height: 1; }

/* Current Price */
.r-price-current {
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-price-currency {
    font-size: 0.75em;
    margin-right: 0.1em;
}

/* Original Price */
.r-price-original {
    font-size: 0.8em;
    color: var(--r-text-muted);
    text-decoration: line-through;
}

/* Savings Badge */
.r-price-savings {
    font-size: var(--r-text-xs);
    font-weight: 600;
    color: var(--r-success);
    background: var(--r-success-muted);
    padding: 0.125rem 0.5rem;
    border-radius: var(--r-radius-full);
}

/* Per Unit */
.r-price-unit {
    font-size: 0.7em;
    color: var(--r-text-secondary);
}

/* Discounted State */
.r-price-discounted .r-price-current {
    color: var(--r-gold);
}

/* -------------------------------------------------------------------------
   StarRating - Star Rating Display
   ------------------------------------------------------------------------- */
.r-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-2);
}

.r-rating-stars {
    display: inline-flex;
    gap: 2px;
}

.r-rating-star {
    display: flex;
    color: var(--r-text-muted);
    transition: color var(--r-duration-fast) var(--r-ease-out);
}

.r-rating-star.r-star-filled,
.r-rating-star.r-star-half {
    color: var(--r-gold);
}

.r-rating-interactive .r-rating-star {
    cursor: pointer;
}

.r-rating-interactive .r-rating-star:hover {
    transform: scale(1.1);
}

/* Size Variants */
.r-rating-sm .material-symbols-outlined { font-size: 14px; }
.r-rating-md .material-symbols-outlined { font-size: 18px; }
.r-rating-lg .material-symbols-outlined { font-size: 24px; }

.r-rating-value {
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-rating-count {
    font-size: 0.9em;
    color: var(--r-text-secondary);
}

.r-rating-label {
    font-size: 0.9em;
    color: var(--r-text-muted);
}

/* -------------------------------------------------------------------------
   LoadingSpinner - Loading Indicators
   ------------------------------------------------------------------------- */
.r-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--r-space-4);
}

.r-spinner-centered {
    justify-content: center;
}

.r-spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
}

/* Ring Spinner */
.r-spinner-ring {
    border-radius: 50%;
    border: 3px solid var(--r-border-subtle);
    border-top-color: var(--r-gold);
    animation: r-spin 0.8s linear infinite;
}

.r-spinner-sm .r-spinner-ring { width: 20px; height: 20px; border-width: 2px; }
.r-spinner-md .r-spinner-ring { width: 32px; height: 32px; }
.r-spinner-lg .r-spinner-ring { width: 48px; height: 48px; border-width: 4px; }

/* Dots Spinner */
.r-spinner-dots {
    display: flex;
    gap: 6px;
}

.r-spinner-dots span {
    width: 8px;
    height: 8px;
    background: var(--r-gold);
    border-radius: 50%;
    animation: r-bounce 1.4s ease-in-out infinite both;
}

.r-spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.r-spinner-dots span:nth-child(2) { animation-delay: -0.16s; }

.r-spinner-sm .r-spinner-dots span { width: 6px; height: 6px; }
.r-spinner-lg .r-spinner-dots span { width: 12px; height: 12px; }

@keyframes r-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Pulse Spinner */
.r-spinner-pulse {
    background: var(--r-gold);
    border-radius: 50%;
    animation: r-pulse 1.5s ease-in-out infinite;
}

.r-spinner-sm .r-spinner-pulse { width: 20px; height: 20px; }
.r-spinner-md .r-spinner-pulse { width: 32px; height: 32px; }
.r-spinner-lg .r-spinner-pulse { width: 48px; height: 48px; }

@keyframes r-pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
}

/* Logo Spinner */
.r-spinner-logo {
    color: var(--r-gold);
    animation: r-pulse 1.5s ease-in-out infinite;
}

.r-spinner-sm .r-spinner-logo .material-symbols-outlined { font-size: 24px; }
.r-spinner-md .r-spinner-logo .material-symbols-outlined { font-size: 36px; }
.r-spinner-lg .r-spinner-logo .material-symbols-outlined { font-size: 48px; }

.r-spinner-message {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

/* -------------------------------------------------------------------------
   EmptyState - Empty/No Data State
   ------------------------------------------------------------------------- */
.r-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--r-space-8);
}

.r-empty-sm { padding: var(--r-space-4); }
.r-empty-lg { padding: var(--r-space-12); }

.r-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    /* elevated, not surface: since A1 surface == card colour, so a surface
       circle disappears when the empty state sits inside a card (B2). */
    background: var(--r-bg-elevated);
    border-radius: 50%;
    margin-bottom: var(--r-space-6);
}

.r-empty-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--r-text-muted);
}

.r-empty-sm .r-empty-icon {
    width: 56px;
    height: 56px;
}

.r-empty-sm .r-empty-icon .material-symbols-outlined {
    font-size: 28px;
}

.r-empty-lg .r-empty-icon {
    width: 100px;
    height: 100px;
}

.r-empty-lg .r-empty-icon .material-symbols-outlined {
    font-size: 52px;
}

.r-empty-image {
    max-width: 200px;
    height: auto;
    margin-bottom: var(--r-space-6);
    opacity: 0.8;
}

.r-empty-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-text-primary);
    margin: 0 0 var(--r-space-2);
}

.r-empty-sm .r-empty-title { font-size: var(--r-text-lg); }
.r-empty-lg .r-empty-title { font-size: var(--r-text-2xl); line-height: 1.2; }

.r-empty-description {
    font-size: var(--r-text-base);
    color: var(--r-text-secondary);
    max-width: 400px;
    margin: 0;
    line-height: 1.6;
}

.r-empty-content {
    margin-top: var(--r-space-4);
}

.r-empty-actions {
    margin-top: var(--r-space-6);
    display: flex;
    gap: var(--r-space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANONICAL FORM CONTROLS (blueprint B3)

   THE input primitive. New and refactored forms use these instead of the
   sixteen historical treatments. Contract:
   - 16px text (--r-text-base): the only size that never triggers iOS
     Safari's zoom-on-focus. Admin-only dense screens may opt into
     .r-input-sm (14px) — never on a customer-facing surface.
   - background --r-bg-elevated: an inset well on the card in both themes
     (requires the A1 surface ladder).
   - focus = --r-focus-ring + --r-focus-border: shape change, not hue change.
   - .is-invalid / [aria-invalid="true"] pair with .r-field-error, which
     RESERVES its line so validation never shifts the layout.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-input,
.r-input-select,
.r-input-textarea {
    width: 100%;
    padding: var(--r-space-3) var(--r-space-4);
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-md);
    color: var(--r-text-primary);
    font-family: var(--r-font-body);
    font-size: var(--r-text-base);
    line-height: 1.4;
    transition: border-color var(--r-duration-fast), box-shadow var(--r-duration-fast), background var(--r-duration-fast);
    outline: none;
    box-sizing: border-box;
}

.r-input:focus,
.r-input-select:focus,
.r-input-textarea:focus {
    border-color: var(--r-focus-border);
    box-shadow: var(--r-focus-ring);
}

.r-input::placeholder,
.r-input-textarea::placeholder {
    color: var(--r-text-muted);
}

.r-input:disabled,
.r-input-select:disabled,
.r-input-textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Derived/immutable values stay in the tab order and the a11y tree —
   readonly, not disabled (the ProductEdit convention). */
.r-input[readonly] {
    background: var(--r-bg-surface);
    color: var(--r-text-secondary);
}

.r-input-select {
    appearance: none;
    background-image: var(--r-select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--r-space-3) center;
    padding-inline-end: calc(var(--r-space-3) * 2 + 12px);
    cursor: pointer;
}

[dir="rtl"] .r-input-select {
    background-position: left var(--r-space-3) center;
}

.r-input-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Admin-density opt-in. NEVER on customer-facing surfaces (iOS zoom). */
.r-input-sm {
    font-size: var(--r-text-sm);
    padding: var(--r-space-2) var(--r-space-3);
}

/* Validation state — both the class and the ARIA attribute, so binding
   aria-invalid in markup lights the style with no extra class plumbing. */
.r-input.is-invalid,
.r-input-select.is-invalid,
.r-input-textarea.is-invalid,
.r-input[aria-invalid="true"],
.r-input-select[aria-invalid="true"],
.r-input-textarea[aria-invalid="true"] {
    border-color: var(--r-error);
}

.r-input.is-invalid:focus,
.r-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--r-error-muted);
}

/* ─── Button focus convergence (blueprint B7, tranche 1) ─────────────────
   Audit found ZERO :focus rules across every button class in the product —
   keyboard users had only the UA outline, killed in several places by
   outline:none resets. One rule gives every button family the same ring the
   canonical inputs use. :focus-visible only, so mouse clicks stay clean.
   Markup migration onto .r-btn continues per page group; this rule makes the
   families consistent in the meantime. ─── */
.r-btn:focus-visible,
.r-products-action:focus-visible,
.r-admin-action-btn:focus-visible,
.r-referral-copy-btn:focus-visible,
.r-address-action-btn:focus-visible,
.r-image-upload-btn:focus-visible,
.r-tab-btn:focus-visible,
.r-products-chip:focus-visible,
.r-account-nav-link:focus-visible,
.r-account-mobile-nav-link:focus-visible {
    outline: none;
    box-shadow: var(--r-focus-ring);
}

/* Field scaffold: 6px label→control, 16px between fields (the 1:2.7
   proximity pair that makes groups legible without boxes). */
.r-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.r-field + .r-field {
    margin-top: var(--r-space-4);
}

.r-field-label {
    font-family: var(--r-font-body);
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-text-secondary);
}

.r-field-label .required {
    color: var(--r-error-text);
}

/* Error line reserves its height — appearing text never shifts the form. */
.r-field-error {
    min-height: 1.25rem;
    font-size: var(--r-text-xs);
    color: var(--r-error-text);
    line-height: 1.4;
}

.r-field-hint {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT AREA - Logged-in user dashboard pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Account Layout ────────────────────────────────────────────────────── */
.r-account-layout {
    /* Wider than --r-container-max (1440px) on purpose: this is app chrome,
       not marketing content. At 1440 the shell left ~250px of dead margin per
       side on 1920px screens, reading as wasted space next to a sidebar.
       1720px + a real gutter keeps line lengths sane while roughly halving
       the dead margin; below 1720px viewports the shell is full-width with
       just the gutter. */
    max-width: min(1720px, 100%);
    margin: 0 auto;
    padding: var(--r-space-4) clamp(1rem, 2vw, 1.75rem);
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 0;
    min-height: calc(100vh - 160px);
    transition: grid-template-columns var(--r-duration-normal) var(--r-ease-out);
}

.r-account-layout.sidebar-pinned {
    grid-template-columns: 260px 1fr;
}

@media (max-width: 959px) {
    .r-account-layout,
    .r-account-layout.sidebar-pinned {
        grid-template-columns: 1fr;
        gap: var(--r-space-4);
        padding-top: var(--r-space-4);
    }
}

.r-account-layout > main {
    /* padding-inline-start (not padding-left) so the sidebar gap lands on the
       correct side in RTL (Arabic). */
    padding-inline-start: var(--r-space-6);
    min-width: 0;
}

@media (max-width: 959px) {
    .r-account-layout > main {
        padding-inline-start: 0;
    }
}

/* ─── Content + Rail Split ──────────────────────────────────────────────── */
/* Dashboard/detail pages pair a main column with a fixed-width rail (quick
   actions, order summary). This MUST be a class, not an inline style: an
   inline grid-template-columns can't be overridden by the media query below,
   so the rail stays 340/360px on a 375px phone, the main column is squeezed
   past its min-content, and body{overflow-x:hidden} silently clips the rail
   off-screen. Collapses at the same 959px breakpoint as the sidebar. */
.r-account-split {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--r-space-6);
}

.r-account-split-wide {
    grid-template-columns: 1fr 360px;
}

/* Even halves (e.g. shipping + payment cards side by side). */
.r-account-split-even {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--r-space-4);
}

/* Weighted halves — a wide panel next to a narrower companion. */
.r-account-split-ratio {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--r-space-4);
}

/* Three equal panels. */
.r-account-split-thirds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--r-space-4);
}

/* min-width: 0 lets the content column shrink below its min-content instead
   of forcing the whole grid wider than the viewport. */
.r-account-split > *,
.r-account-split-even > *,
.r-account-split-ratio > *,
.r-account-split-thirds > * {
    min-width: 0;
}

@media (max-width: 959px) {
    .r-account-split,
    .r-account-split.r-account-split-wide,
    .r-account-split-ratio,
    /* thirds collapses here rather than at 767: its panels hold tables, and
       three across a 768px tablet leaves ~234px each — narrower than a table
       column set. One full-width column reads better on portrait tablets. */
    .r-account-split-thirds {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .r-account-split-even {
        grid-template-columns: 1fr;
    }
}

/* ─── Account Sidebar ───────────────────────────────────────────────────── */
.r-account-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    z-index: 20;
}

@media (max-width: 959px) {
    .r-account-sidebar {
        position: static;
        display: none;
    }
}

.r-account-sidebar-card {
    width: 68px;
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    transition: width var(--r-duration-normal) var(--r-ease-out),
                border-color var(--r-duration-normal),
                box-shadow var(--r-duration-normal);
}

.r-account-sidebar-card:hover,
.r-account-sidebar-card.expanded {
    width: 260px;
    border-color: var(--r-border-default);
    box-shadow: 8px 0 32px -8px rgba(0, 0, 0, 0.3);
}

/* RTL: the hover-expanded sidebar floats over content on its inline-end side,
   which in Arabic is the LEFT — mirror the directional shadow. (Step A3.) */
[dir="rtl"] .r-account-sidebar-card:hover,
[dir="rtl"] .r-account-sidebar-card.expanded {
    box-shadow: -8px 0 32px -8px rgba(0, 0, 0, 0.3);
}

.r-account-sidebar-card.pinned {
    width: 260px;
    box-shadow: none;
}

/* ─── Sidebar Pin Button ────────────────────────────────────────────────── */
.r-sidebar-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--r-radius-md);
    background: transparent;
    color: var(--r-text-muted);
    cursor: pointer;
    transition: all var(--r-duration-fast);
    opacity: 0;
    position: absolute;
    top: var(--r-space-3);
    inset-inline-end: var(--r-space-3);
    z-index: 2;
}

.r-account-sidebar-card:hover .r-sidebar-pin,
.r-account-sidebar-card.expanded .r-sidebar-pin,
.r-account-sidebar-card.pinned .r-sidebar-pin {
    opacity: 1;
}

.r-sidebar-pin:hover {
    background: var(--r-bg-hover);
    color: var(--r-gold);
}

.r-sidebar-pin.is-pinned {
    color: var(--r-gold);
}

.r-sidebar-pin .material-symbols-outlined {
    font-size: 16px;
    transition: transform var(--r-duration-fast);
}

.r-sidebar-pin.is-pinned .material-symbols-outlined {
    transform: rotate(45deg);
}

/* ─── Sidebar Profile ───────────────────────────────────────────────────── */
.r-account-profile {
    position: relative;
    padding: var(--r-space-4);
    text-align: center;
    background: linear-gradient(180deg, rgba(201, 160, 68, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--r-border-subtle);
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.r-account-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--r-radius-full);
    background: linear-gradient(135deg, var(--r-gold-600), var(--r-gold-400));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--r-bg-deep);
    letter-spacing: 1px;
    transition: width var(--r-duration-normal), height var(--r-duration-normal), font-size var(--r-duration-normal);
}

.r-account-sidebar-card:hover .r-account-avatar,
.r-account-sidebar-card.expanded .r-account-avatar,
.r-account-sidebar-card.pinned .r-account-avatar {
    width: 56px;
    height: 56px;
    font-size: var(--r-text-lg);
}

.r-account-profile-info {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--r-duration-normal) var(--r-ease-out),
                opacity var(--r-duration-normal),
                margin var(--r-duration-normal);
    margin-top: 0;
}

.r-account-sidebar-card:hover .r-account-profile-info,
.r-account-sidebar-card.expanded .r-account-profile-info,
.r-account-sidebar-card.pinned .r-account-profile-info {
    max-height: 80px;
    opacity: 1;
    margin-top: var(--r-space-2);
}

.r-account-name {
    font-family: var(--r-font-display);
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
}

.r-account-email {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.r-account-member-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-1);
    margin-top: var(--r-space-2);
    padding: 3px 12px;
    border-radius: var(--r-radius-full);
    background: rgba(201, 160, 68, 0.12);
    color: var(--r-gold);
    font-size: var(--r-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ─── Sidebar Navigation ────────────────────────────────────────────────── */
.r-account-nav {
    padding: var(--r-space-2) 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--r-border-default) transparent;
}
.r-account-nav::-webkit-scrollbar { width: 6px; }
.r-account-nav::-webkit-scrollbar-track { background: transparent; }
.r-account-nav::-webkit-scrollbar-thumb { background: var(--r-border-default); border-radius: 3px; }
.r-account-nav::-webkit-scrollbar-thumb:hover { background: var(--r-text-muted); }

/* Footer block (Settings + Logout) stays anchored at the bottom — does not scroll with the nav items above. */
.r-account-nav-footer { flex: 0 0 auto; padding: var(--r-space-2) 0; border-top: 1px solid var(--r-border-subtle); }
.r-account-nav-footer .r-account-nav-divider { display: none; }

.r-account-nav-link {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding: var(--r-space-3);
    margin: 1px var(--r-space-2);
    border-radius: var(--r-radius-md);
    color: var(--r-text-secondary);
    font-size: var(--r-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--r-duration-fast);
    position: relative;
    border: none;
    background: none;
    width: calc(100% - var(--r-space-4));
    cursor: pointer;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
}

.r-account-nav-link:hover {
    color: var(--r-text-primary);
    background: var(--r-bg-hover);
}

.r-account-nav-link.active {
    color: var(--r-gold);
    background: rgba(201, 160, 68, 0.08);
}

.r-account-nav-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--r-gold);
    border-start-end-radius: 3px; border-end-end-radius: 3px;
}

.r-account-nav-link .material-symbols-outlined {
    font-size: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}

.r-account-nav-link.active .material-symbols-outlined {
    opacity: 1;
}

.r-account-nav-label {
    opacity: 0;
    transition: opacity var(--r-duration-fast);
    overflow: hidden;
}

.r-account-sidebar-card:hover .r-account-nav-label,
.r-account-sidebar-card.expanded .r-account-nav-label,
.r-account-sidebar-card.pinned .r-account-nav-label {
    opacity: 1;
}

/* Collapsed: center the icon */
.r-account-nav-link {
    justify-content: center;
}

.r-account-sidebar-card:hover .r-account-nav-link,
.r-account-sidebar-card.expanded .r-account-nav-link,
.r-account-sidebar-card.pinned .r-account-nav-link {
    justify-content: flex-start;
}

/* Active indicator adjusts for collapsed */
.r-account-nav-link.active::before {
    inset-inline-start: -8px;
}

.r-account-sidebar-card:hover .r-account-nav-link.active::before,
.r-account-sidebar-card.expanded .r-account-nav-link.active::before,
.r-account-sidebar-card.pinned .r-account-nav-link.active::before {
    inset-inline-start: 0;
}

.r-account-nav-divider {
    height: 1px;
    background: var(--r-border-subtle);
    margin: var(--r-space-2) var(--r-space-3);
}

.r-account-nav-link.logout {
    color: var(--r-error);
}

.r-account-nav-link.logout:hover {
    background: rgba(248, 113, 113, 0.08);
}

/* ─── Mobile Bottom Nav (shows on mobile when sidebar is hidden) ────────── */
.r-account-mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--r-bg-surface);
    border-top: 1px solid var(--r-border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--r-space-1) 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 959px) {
    .r-account-mobile-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /* Add bottom padding to main content so it's not hidden behind the nav */
    .r-account-layout > main {
        padding-bottom: 72px;
    }
}

.r-account-mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--r-space-2) var(--r-space-3);
    border-radius: var(--r-radius-md);
    color: var(--r-text-muted);
    text-decoration: none;
    font-size: 10px;
    /* explicit family: the admin bar's "More" tab is a <button>, which does
       not inherit font-family the way <a> does (B6). */
    font-family: var(--r-font-body);
    font-weight: 500;
    transition: color var(--r-duration-fast);
    border: none;
    background: none;
    cursor: pointer;
}

.r-account-mobile-nav-link .material-symbols-outlined {
    font-size: 22px;
}

.r-account-mobile-nav-link.active {
    color: var(--r-gold);
}

.r-account-mobile-nav-link:hover {
    color: var(--r-text-primary);
}

.mud-theme-light .r-account-mobile-nav,
body.mud-theme-light .r-account-mobile-nav {
    background: rgba(255, 255, 255, 0.9);
}

/* ─── Account Page Titles ───────────────────────────────────────────────── */
.r-account-header {
    margin-bottom: var(--r-space-8);
}

.r-account-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-3xl); line-height: 1.2;
    font-weight: 500;
    color: var(--r-text-primary);
    letter-spacing: -0.02em;
}

.r-account-subtitle {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    margin-top: var(--r-space-1);
}

/* ─── Account Cards ─────────────────────────────────────────────────────── */
.r-account-card {
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    padding: var(--r-space-6);
    transition: all var(--r-duration-normal);
}

.r-account-card:hover {
    border-color: var(--r-border-default);
}

.r-account-card-title {
    font-family: var(--r-font-body);
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.r-account-card + .r-account-card {
    margin-top: var(--r-space-4);
}

/* ─── Welcome Banner ────────────────────────────────────────────────────── */
.r-welcome-banner {
    position: relative;
    background: linear-gradient(135deg, var(--r-bg-elevated) 0%, var(--r-bg-surface) 100%);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    padding: var(--r-space-8);
    overflow: hidden;
}

.r-welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 160, 68, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.r-welcome-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--r-space-5);
}

.r-welcome-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--r-radius-full);
    background: linear-gradient(135deg, var(--r-gold-600), var(--r-gold-400));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.r-welcome-avatar .material-symbols-outlined {
    font-size: 28px;
    color: var(--r-bg-deep);
}

.r-welcome-greeting {
    font-family: var(--r-font-display);
    font-size: var(--r-text-2xl); line-height: 1.2;
    font-weight: 500;
    color: var(--r-text-primary);
}

.r-welcome-email {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    margin-top: 2px;
}

/* ─── Stat Cards ────────────────────────────────────────────────────────── */
.r-account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--r-space-4);
}

/* Column-count modifiers. Pages used to set grid-template-columns inline,
   which beat the mobile rule below and left 3 tiles wedged onto a phone. */
.r-account-stats.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.r-account-stats.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
    .r-account-stats,
    .r-account-stats.cols-3,
    .r-account-stats.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.r-account-stat {
    /* Currency values ("$3,905.50" at 1.5rem) are wider than a half-width tile
       at 375px. Without this the tile's min-content pushes the grid past the
       viewport. Paired with the font step-down below. */
    min-width: 0;
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-lg);
    padding: var(--r-space-5);
    transition: all var(--r-duration-normal);
    position: relative;
    overflow: hidden;
}

.r-account-stat:hover {
    border-color: var(--r-border-default);
    transform: translateY(-2px);
}

.r-account-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--r-space-3);
}

.r-account-stat-icon .material-symbols-outlined {
    font-size: 22px;
}

.r-account-stat-icon.gold {
    background: rgba(201, 160, 68, 0.12);
    color: var(--r-gold);
}

.r-account-stat-icon.blue {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.r-account-stat-icon.green {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.r-account-stat-icon.rose {
    background: rgba(251, 113, 133, 0.12);
    color: #fb7185;
}

.r-account-stat-value {
    font-size: var(--r-text-2xl);
    font-weight: 700;
    color: var(--r-text-primary);
    line-height: 1;
    margin-bottom: var(--r-space-1);
}

.r-account-stat-label {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Small phones: two tiles per row leaves ~123px of content width. Step the
   value down so long currency figures still fit on one line. */
@media (max-width: 479px) {
    .r-account-stat {
        padding: var(--r-space-4);
    }

    .r-account-stat-value {
        font-size: var(--r-text-xl);
    }
}

/* ─── Feature Card (for referral code, points balance, rank, etc.) ────── */
.r-account-feature {
    position: relative;
    background: linear-gradient(135deg, var(--r-bg-elevated) 0%, var(--r-bg-surface) 100%);
    border: 1px solid rgba(201, 160, 68, 0.2);
    border-radius: var(--r-radius-xl);
    padding: var(--r-space-8);
    overflow: hidden;
}

.r-account-feature::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(201, 160, 68, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.r-account-feature-label {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: var(--r-space-2);
}

.r-account-feature-value {
    font-family: var(--r-font-display);
    font-size: var(--r-text-4xl);
    font-weight: 600;
    color: var(--r-gold);
    letter-spacing: 3px;
    line-height: 1.2;
}

.r-account-feature-sub {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    margin-top: var(--r-space-1);
}

/* ─── Account Table ─────────────────────────────────────────────────────── */
/* Wrap every .r-account-table in <div class="r-table-scroll"> so it scrolls
   inside its card on a phone. A 4-column order table needs ~460px of
   min-content; a 375px viewport leaves ~295px inside an .r-account-card, and
   body{overflow-x:hidden} would clip the overflow with no scrollbar and no
   hint that the Total column exists. */
.r-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bleed the scroller out to the card edges so the card's padding doesn't eat
   scroll width. The inset has to match the specific card variant's padding —
   these variants stack classes on one element (class="r-account-card
   r-products-table-card"), so the narrower rules must come last to win. */
.r-account-card > .r-table-scroll {
    margin-inline: calc(var(--r-space-6) * -1);
    padding-inline: var(--r-space-6);
}

.r-product-section > .r-table-scroll {
    margin-inline: calc(var(--r-space-5) * -1);
    padding-inline: var(--r-space-5);
}

/* padding: 0 !important — nothing to bleed past. */
.r-products-table-card > .r-table-scroll {
    margin-inline: 0;
    padding-inline: 0;
}

@media (max-width: 767px) {
    /* Once it scrolls, stop cells from wrapping into unreadable slivers. This
       targets any wrapped table, not just .r-account-table — a width:100%
       table (e.g. .r-data-table on /admin/seed) would otherwise shrink to fit
       the container and crush its columns instead of scrolling. nowrap pushes
       min-content past the container, which is what engages overflow-x. */
    .r-table-scroll > table thead th,
    .r-table-scroll > table tbody td {
        white-space: nowrap;
    }

    /* ─── Card-stack opt-in (blueprint C1): .r-account-table.as-cards ───
       Below 767px the table becomes a stack of row-cards: thead hidden, each
       td a label|value line whose label comes from its data-label attribute.
       Horizontal scroll remains the DEFAULT for un-opted tables — this is an
       opt-in for the heaviest operational lists, where thumb-scanning rows
       beats panning a 9-column grid. Two-class selectors deliberately outrank
       the one-class nowrap rule above. */
    .r-account-table.as-cards,
    .r-account-table.as-cards tbody,
    .r-account-table.as-cards tbody tr,
    .r-account-table.as-cards tbody td {
        display: block;
        white-space: normal;
    }

    .r-account-table.as-cards thead {
        display: none;
    }

    .r-account-table.as-cards tbody tr {
        border: 1px solid var(--r-border-subtle);
        border-radius: var(--r-radius-lg);
        background: var(--r-bg-surface);
        margin: var(--r-space-3) var(--r-space-4);
        padding: var(--r-space-2) 0;
        overflow: hidden;
    }

    .r-account-table.as-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--r-space-4);
        border-bottom: none;
        padding: var(--r-space-2) var(--r-space-4);
        text-align: end;
    }

    .r-account-table.as-cards tbody td::before {
        content: attr(data-label);
        font-size: var(--r-text-2xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--r-text-muted);
        flex-shrink: 0;
        text-align: start;
    }

    /* Cells without a data-label (thumbnails, primary identity) render alone,
       start-aligned, with no label slot. */
    .r-account-table.as-cards tbody td:not([data-label]) {
        justify-content: flex-start;
        text-align: start;
    }
    .r-account-table.as-cards tbody td:not([data-label])::before {
        content: none;
    }

    /* Row status tints (left rail per-cell) don't translate to card mode;
       the actions cell aligns its buttons to the inline-end. */
    .r-account-table.as-cards .r-products-actions-cell {
        justify-content: flex-end;
    }

    /* The width:1% shrink-wrap idiom and fixed th widths are meaningless in
       block flow — neutralise inline width styles set for table mode. */
    .r-account-table.as-cards tbody td[style] {
        width: auto !important;
    }
}

.r-account-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.r-account-table thead th {
    font-size: var(--r-text-2xs);
    font-weight: 600;
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--r-space-3) var(--r-space-4);
    border-bottom: 1px solid var(--r-border-subtle);
    text-align: start;
}

.r-account-table tbody td {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    padding: var(--r-space-3) var(--r-space-4);
    border-bottom: 1px solid var(--r-border-subtle);
    transition: background var(--r-duration-fast);
}

.r-account-table tbody tr:last-child td {
    border-bottom: none;
}

.r-account-table tbody tr:hover td {
    background: var(--r-bg-hover);
}

.r-account-table .text-right {
    text-align: end;
}

/* Money/points values use tabular figures so digits keep a fixed width and columns
   of prices/points/totals line up vertically. (Audit ds-tabular-nums-1.) */
.r-price-current,
.r-account-stat-value,
.r-account-feature-value,
.r-account-table .text-right,
.r-account-table .text-bold {
    font-variant-numeric: tabular-nums;
}

.r-account-table .text-bold {
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-account-table .text-success {
    color: var(--r-success);
    font-weight: 600;
}

.r-account-table .text-error {
    color: var(--r-error);
    font-weight: 600;
}

/* ─── Status Chips ──────────────────────────────────────────────────────── */
.r-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-radius-full);
    font-size: var(--r-text-2xs);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.r-status-processing {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.r-status-shipped {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.r-status-delivered {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.r-status-cancelled {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

.r-status-active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.r-status-inactive {
    background: rgba(161, 161, 170, 0.12);
    color: #a1a1aa;
}

.r-status-direct {
    background: rgba(201, 160, 68, 0.12);
    color: var(--r-gold);
}

.r-status-mlm {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.r-status-matching {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

/* Registered on a sponsor's link but never activated — deliberately neutral/amber so it
   never reads as an active downline member the way r-status-active did. */
.r-status-prospect {
    background: rgba(251, 191, 36, 0.12);
    color: #d19a1f;
}

/* Placeholder for fields a prospect genuinely has no value for (side, rank). */
.r-muted-dash {
    color: var(--r-text-muted);
}

/* ─── Order Cards ───────────────────────────────────────────────────────── */
.r-order-card {
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    overflow: hidden;
    transition: border-color var(--r-duration-normal);
}

.r-order-card:hover {
    border-color: var(--r-border-default);
}

.r-order-card + .r-order-card {
    margin-top: var(--r-space-4);
}

.r-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--r-space-4) var(--r-space-5);
    background: var(--r-bg-elevated);
    border-bottom: 1px solid var(--r-border-subtle);
    flex-wrap: wrap;
    gap: var(--r-space-3);
}

.r-order-meta {
    display: flex;
    gap: var(--r-space-6);
    flex-wrap: wrap;
}

.r-order-meta-item label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.r-order-meta-item span {
    font-size: var(--r-text-sm);
    color: var(--r-text-primary);
}

.r-order-card-body {
    padding: var(--r-space-5);
}

.r-order-items-preview {
    display: flex;
    gap: var(--r-space-3);
    flex-wrap: wrap;
    margin-top: var(--r-space-3);
}

.r-order-item-thumb {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding: var(--r-space-2);
    background: var(--r-bg-elevated);
    border-radius: var(--r-radius-md);
    border: 1px solid var(--r-border-subtle);
}

.r-order-item-img {
    width: 48px;
    height: 48px;
    border-radius: var(--r-radius-sm);
    object-fit: cover;
    background: var(--r-bg-hover);
}

.r-order-item-name {
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-text-primary);
}

.r-order-item-qty {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
}

.r-order-card-actions {
    display: flex;
    gap: var(--r-space-2);
    margin-top: var(--r-space-4);
    padding-top: var(--r-space-4);
    border-top: 1px solid var(--r-border-subtle);
}

/* ─── Address Cards ─────────────────────────────────────────────────────── */
.r-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--r-space-4);
}

.r-address-card {
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    padding: var(--r-space-5);
    display: flex;
    flex-direction: column;
    transition: all var(--r-duration-normal);
}

.r-address-card:hover {
    border-color: var(--r-border-default);
}

.r-address-card.default {
    border-color: rgba(201, 160, 68, 0.3);
}

.r-address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--r-space-3);
}

.r-address-type {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    font-weight: 600;
    font-size: var(--r-text-sm);
    color: var(--r-text-primary);
}

.r-address-type .material-symbols-outlined {
    font-size: 18px;
    color: var(--r-gold);
}

.r-address-default-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--r-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--r-radius-full);
    background: rgba(201, 160, 68, 0.12);
}

.r-address-body {
    flex: 1;
}

.r-address-name {
    font-weight: 600;
    font-size: var(--r-text-sm);
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-1);
}

.r-address-text {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    line-height: 1.6;
}

.r-address-phone {
    display: flex;
    align-items: center;
    gap: var(--r-space-1);
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
    margin-top: var(--r-space-2);
}

.r-address-phone .material-symbols-outlined {
    font-size: 14px;
}

.r-address-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--r-space-4);
    padding-top: var(--r-space-3);
    border-top: 1px solid var(--r-border-subtle);
}

.r-address-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-radius-md);
    background: transparent;
    color: var(--r-text-secondary);
    cursor: pointer;
    transition: all var(--r-duration-fast);
}

.r-address-action-btn:hover {
    background: var(--r-bg-hover);
    color: var(--r-text-primary);
}

.r-address-action-btn.delete:hover {
    background: rgba(248, 113, 113, 0.1);
    color: var(--r-error);
}

.r-address-action-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ─── Quick Actions ─────────────────────────────────────────────────────── */
.r-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.r-quick-action-link {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding: var(--r-space-3);
    border-radius: var(--r-radius-md);
    color: var(--r-text-secondary);
    font-size: var(--r-text-sm);
    text-decoration: none;
    transition: all var(--r-duration-fast);
}

.r-quick-action-link:hover {
    background: var(--r-bg-hover);
    color: var(--r-gold);
}

.r-quick-action-link .material-symbols-outlined {
    font-size: 20px;
    opacity: 0.6;
}

.r-quick-action-link:hover .material-symbols-outlined {
    opacity: 1;
}

/* ─── Empty States ──────────────────────────────────────────────────────── */
.r-account-empty {
    text-align: center;
    padding: var(--r-space-16) var(--r-space-8);
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
}

.r-account-empty .material-symbols-outlined {
    font-size: 48px;
    color: var(--r-text-muted);
    opacity: 0.4;
    margin-bottom: var(--r-space-4);
}

.r-account-empty-title {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-2);
}

.r-account-empty-text {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    margin-bottom: var(--r-space-6);
}

/* ─── Filter Bar ────────────────────────────────────────────────────────── */
.r-account-filters {
    display: flex;
    gap: var(--r-space-3);
    margin-bottom: var(--r-space-6);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .r-account-filters {
        flex-direction: column;
    }
}

/* ─── Timeline Steps ────────────────────────────────────────────────────── */
.r-timeline-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--r-space-4) 0;
    position: relative;
}

.r-timeline-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--r-border-subtle);
    transform: translateY(-10px);
}

.r-timeline-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--r-space-2);
}

.r-timeline-dot {
    width: 28px;
    height: 28px;
    border-radius: var(--r-radius-full);
    background: var(--r-bg-surface);
    border: 2px solid var(--r-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--r-duration-normal);
}

.r-timeline-dot.active {
    background: var(--r-gold);
    border-color: var(--r-gold);
}

.r-timeline-dot.active .material-symbols-outlined {
    font-size: 14px;
    color: var(--r-bg-deep);
}

.r-timeline-dot.completed {
    background: var(--r-gold);
    border-color: var(--r-gold);
}

.r-timeline-step-label {
    font-size: var(--r-text-xs);
    font-weight: 500;
    color: var(--r-text-muted);
    text-align: center;
}

.r-timeline-step.active .r-timeline-step-label {
    color: var(--r-gold);
}

.r-timeline-step-date {
    font-size: 10px;
    color: var(--r-text-muted);
}

/* ─── Rank Ladder ───────────────────────────────────────────────────────── */
.r-rank-ladder {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.r-rank-item {
    display: flex;
    align-items: center;
    gap: var(--r-space-3);
    padding: var(--r-space-3) var(--r-space-4);
    border-radius: var(--r-radius-md);
    transition: background var(--r-duration-fast);
}

.r-rank-item:hover {
    background: var(--r-bg-hover);
}

.r-rank-item.current {
    background: rgba(201, 160, 68, 0.08);
}

.r-rank-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-radius-full);
    background: var(--r-border-default);
    flex-shrink: 0;
}

.r-rank-item.current .r-rank-dot {
    background: var(--r-gold);
    box-shadow: 0 0 8px rgba(201, 160, 68, 0.4);
}

.r-rank-item.achieved .r-rank-dot {
    background: var(--r-gold);
}

.r-rank-name {
    font-size: var(--r-text-sm);
    color: var(--r-text-secondary);
}

.r-rank-item.current .r-rank-name {
    color: var(--r-gold);
    font-weight: 600;
}

.r-rank-item.achieved .r-rank-name {
    color: var(--r-text-primary);
}

/* ─── Rank Page (redesign — Account/Rank.razor) ─────────────────────────── */

/* Hero panel: badge + current rank + overall progress + floor chip */
.r-rank-hero {
    position: relative;
    background: linear-gradient(135deg, var(--r-bg-elevated) 0%, var(--r-bg-surface) 100%);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    padding: var(--r-space-6);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--r-space-6);
    align-items: center;
    overflow: hidden;
}
.r-rank-hero-glow {
    position: absolute; top: -40%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(201,160,68,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.r-rank-hero-badge {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--r-gold) 0%, #b58a3a 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(201,160,68,0.35);
    position: relative; z-index: 1;
}
.r-rank-hero-badge .material-symbols-outlined { font-size: 44px; color: var(--r-bg-deep); }
.r-rank-hero-current { position: relative; z-index: 1; min-width: 0; }
.r-rank-hero-eyebrow {
    font-size: var(--r-text-xs); color: var(--r-text-muted);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: var(--r-space-1);
}
.r-rank-hero-name {
    font-family: var(--r-font-display); font-size: 2rem; line-height: 1.1;
    color: var(--r-text-primary); font-weight: 600; letter-spacing: 1px;
}
.r-rank-hero-next { font-size: var(--r-text-sm); color: var(--r-text-secondary); margin-top: var(--r-space-3); }
.r-rank-hero-next-name { color: var(--r-gold); font-weight: 600; }
.r-rank-hero-top {
    display: inline-flex; align-items: center; gap: var(--r-space-2);
    margin-top: var(--r-space-3); font-size: var(--r-text-sm);
    color: var(--r-gold); font-weight: 500;
}
.r-rank-hero-progress {
    height: 8px; background: var(--r-bg-deep); border-radius: 4px;
    margin-top: var(--r-space-3); overflow: hidden; max-width: 360px;
}
.r-rank-hero-progress-bar {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--r-gold) 0%, #e0bf6d 100%);
    transition: width 600ms ease;
}
.r-rank-hero-progress-label {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 360px; margin-top: var(--r-space-2);
    font-size: var(--r-text-xs); color: var(--r-text-muted);
}
.r-rank-hero-mode {
    background: rgba(201,160,68,0.12); color: var(--r-gold);
    padding: 2px 8px; border-radius: 999px; font-weight: 500;
}
.r-rank-hero-floor {
    position: relative; z-index: 1;
    padding-inline-start: var(--r-space-6);
    border-inline-start: 1px solid var(--r-border-subtle);
    min-width: 140px;
}
.r-rank-hero-floor-label {
    font-size: var(--r-text-xs); color: var(--r-text-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
.r-rank-hero-floor-name {
    display: flex; align-items: center; gap: var(--r-space-1);
    font-family: var(--r-font-display); font-size: var(--r-text-lg);
    color: var(--r-text-primary); margin: var(--r-space-1) 0;
}
.r-rank-hero-floor-sub { font-size: var(--r-text-xs); color: var(--r-text-muted); }
@media (max-width: 768px) {
    .r-rank-hero { grid-template-columns: 1fr; text-align: center; }
    .r-rank-hero-badge { margin: 0 auto; }
    .r-rank-hero-progress, .r-rank-hero-progress-label { max-width: none; }
    .r-rank-hero-floor {
        padding-inline-start: 0; border-inline-start: none;
        padding-top: var(--r-space-4); border-top: 1px solid var(--r-border-subtle);
    }
}

/* Requirements card */
.r-rank-reqs { padding: var(--r-space-5); }
.r-rank-reqs-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--r-space-4);
}
.r-rank-reqs-summary {
    font-family: var(--r-font-display); font-size: var(--r-text-lg); color: var(--r-gold);
}
.r-rank-req-list { display: flex; flex-direction: column; gap: var(--r-space-3); }
.r-rank-req {
    display: grid; grid-template-columns: 40px 1fr auto; gap: var(--r-space-3);
    align-items: center; padding: var(--r-space-3);
    border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-lg);
    background: var(--r-bg-surface); transition: border-color 200ms;
}
.r-rank-req.met { border-color: rgba(201,160,68,0.4); background: rgba(201,160,68,0.05); }
.r-rank-req-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--r-bg-deep); display: flex; align-items: center; justify-content: center;
    color: var(--r-text-secondary);
}
.r-rank-req.met .r-rank-req-icon { background: rgba(201,160,68,0.15); color: var(--r-gold); }
.r-rank-req-icon .material-symbols-outlined { font-size: 22px; }
.r-rank-req-body { min-width: 0; }
.r-rank-req-line1 {
    display: flex; justify-content: space-between; gap: var(--r-space-2); align-items: baseline;
}
.r-rank-req-label { font-weight: 600; color: var(--r-text-primary); font-size: var(--r-text-sm); }
.r-rank-req-value {
    font-variant-numeric: tabular-nums; font-size: var(--r-text-sm);
    color: var(--r-text-primary); white-space: nowrap;
}
.r-rank-req-target { color: var(--r-text-muted); margin-inline-start: 2px; }
.r-rank-req-desc { font-size: var(--r-text-xs); color: var(--r-text-muted); margin-top: 2px; }
.r-rank-req-bar {
    height: 4px; background: var(--r-bg-deep); border-radius: 2px;
    margin-top: var(--r-space-2); overflow: hidden;
}
.r-rank-req-bar-fill {
    height: 100%; background: var(--r-gold); border-radius: 2px;
    transition: width 600ms ease;
}
.r-rank-req.met .r-rank-req-bar-fill { background: linear-gradient(90deg, var(--r-gold) 0%, #e0bf6d 100%); }
.r-rank-req-status { min-width: 36px; text-align: end; }
.r-rank-req-percent { font-size: var(--r-text-xs); color: var(--r-text-muted); font-variant-numeric: tabular-nums; }

/* Two-column ladder + history */
.r-rank-two-col {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--r-space-6); margin-top: var(--r-space-6);
}
@media (max-width: 900px) { .r-rank-two-col { grid-template-columns: 1fr; } }

/* Vertical rank ladder (timeline-style) */
.r-rank-ladder-v { position: relative; padding-inline-start: var(--r-space-2); }
.r-rank-step { position: relative; display: flex; gap: var(--r-space-3); padding: var(--r-space-2) 0; }
.r-rank-step::before {
    content: ""; position: absolute;
    inset-inline-start: 11px; top: 24px; bottom: -8px;
    width: 2px; background: var(--r-border-subtle);
}
.r-rank-step:last-child::before { display: none; }
.r-rank-step.achieved::before { background: var(--r-gold); }
.r-rank-step-marker {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--r-bg-elevated); border: 2px solid var(--r-border-subtle);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1;
}
.r-rank-step-marker .material-symbols-outlined { font-size: 14px; color: var(--r-text-muted); }
.r-rank-step.achieved .r-rank-step-marker { background: var(--r-gold); border-color: var(--r-gold); }
.r-rank-step.achieved .r-rank-step-marker .material-symbols-outlined { color: var(--r-bg-deep); }
.r-rank-step.current .r-rank-step-marker {
    background: var(--r-gold); border-color: var(--r-gold);
    box-shadow: 0 0 0 4px rgba(201,160,68,0.2);
}
.r-rank-step.current .r-rank-step-marker .material-symbols-outlined { color: var(--r-bg-deep); }
.r-rank-step.next .r-rank-step-marker { border-color: var(--r-gold); border-style: dashed; }
.r-rank-step.next .r-rank-step-marker .material-symbols-outlined { color: var(--r-gold); }
.r-rank-step-body { padding-top: 2px; }
.r-rank-step-name { font-weight: 600; color: var(--r-text-primary); font-size: var(--r-text-sm); }
.r-rank-step.locked .r-rank-step-name { color: var(--r-text-muted); }
.r-rank-step.current .r-rank-step-name { color: var(--r-gold); }
.r-rank-step-state { font-size: var(--r-text-xs); color: var(--r-text-muted); margin-top: 2px; }

/* Rank history vertical list */
.r-rank-history-v { display: flex; flex-direction: column; gap: var(--r-space-3); }
.r-rank-history-entry {
    padding: var(--r-space-3); border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-lg); background: var(--r-bg-surface);
}
.r-rank-history-date { font-size: var(--r-text-xs); color: var(--r-text-muted); margin-bottom: var(--r-space-1); }
.r-rank-history-line { display: flex; align-items: center; gap: var(--r-space-2); font-size: var(--r-text-sm); }
.r-rank-history-from { color: var(--r-text-secondary); }
.r-rank-history-to { color: var(--r-text-primary); font-weight: 600; }
.r-rank-history-reason {
    display: inline-block; margin-top: var(--r-space-2);
    padding: 2px 8px; border-radius: 999px;
    font-size: var(--r-text-xs); font-weight: 500;
    background: var(--r-bg-deep); color: var(--r-text-muted);
}
.r-rank-history-reason-instant { background: rgba(80,180,120,0.15); color: rgb(120,200,150); }
.r-rank-history-reason-monthly { background: rgba(80,140,220,0.15); color: rgb(140,180,240); }
.r-rank-history-reason-manual { background: rgba(201,160,68,0.15); color: var(--r-gold); }

/* ─── Binary Tree ───────────────────────────────────────────────────────── */
.r-tree-container {
    overflow-x: auto;
    padding: var(--r-space-4) 0;
}

.r-tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tree canvas (blueprint C2) — replaces the page's old inline
   min-width:600px. width:max-content = the tree's natural width, so
   .r-tree-container's overflow-x pans ONLY when the tree really is wider
   than the viewport; min-width:100% centres small trees. */
.r-tree-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    width: max-content;
    margin-inline: auto;
}

.r-tree-node-card {
    /* Explicit flex column — when this element is a <button> (clickable
       cards), browsers can flatten block children to inline, jamming the
       name and rank onto the same line. Forcing flex layout keeps the
       avatar / name / rank stacked vertically and centred. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-lg);
    padding: var(--r-space-3) var(--r-space-4);
    text-align: center;
    min-width: 120px;
    transition: all var(--r-duration-fast);
}

/* Mobile step-down (C2): the tree had ZERO media queries — 120px-min cards
   forced ~2.8 screens of panning on a 375px phone. Smaller cards keep two
   levels of a binary tree visible without a pan; deeper levels still pan. */
@media (max-width: 479px) {
    .r-tree-node-card {
        min-width: 88px;
        padding: var(--r-space-2) var(--r-space-2);
    }
    .r-tree-node-avatar {
        width: 28px;
        height: 28px;
    }
    .r-tree-children {
        gap: var(--r-space-2);
    }
    /* Half-fork overhang must equal half the children gap (deliberately
       physical left/right — the forks are placement geometry, see the note
       on the base rules). */
    .r-tree-children > .r-tree-node:first-child::after {
        right: calc(var(--r-space-2) / -2);
    }
    .r-tree-children > .r-tree-node:last-child::after {
        left: calc(var(--r-space-2) / -2);
    }
}

.r-tree-node-card:hover {
    border-color: var(--r-gold);
}

.r-tree-node-card.empty {
    border-style: dashed;
    opacity: 0.4;
}

/* User-info tooltip — shown on hover for downline tree cards, or sticky on
   click for the root card (toggle via .is-info-open). Anchored to the card
   via position:absolute, hidden by default, fades in. */
.r-tree-node-card--has-info { position: relative; }
.r-tree-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 240px;
    padding: var(--r-space-3);
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 100;
    text-align: start;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.r-tree-node-card--has-info:hover .r-tree-tooltip,
.r-tree-node-card--has-info:focus-visible .r-tree-tooltip,
.r-tree-node-card--has-info.is-info-open .r-tree-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.r-tree-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--r-border-subtle);
}
.r-tree-tooltip::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--r-bg-elevated);
}
.r-tree-tooltip-name {
    font-family: var(--r-font-display);
    font-size: var(--r-text-base);
    font-weight: 600;
    color: var(--r-text-primary);
    margin-bottom: var(--r-space-2);
    padding-bottom: var(--r-space-2);
    border-bottom: 1px solid var(--r-border-subtle);
}
.r-tree-tooltip-row {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    font-size: var(--r-text-xs);
    color: var(--r-text-secondary);
    line-height: 1.4;
    margin-top: var(--r-space-1);
    word-break: break-word;
}
.r-tree-tooltip-row .material-symbols-outlined {
    font-size: 14px;
    color: var(--r-text-muted);
    flex-shrink: 0;
}
.r-tree-tooltip-status {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    margin-inline: 3px;
}
.r-tree-tooltip-status.active { background: rgb(120, 200, 150); box-shadow: 0 0 6px rgba(120, 200, 150, 0.5); }
.r-tree-tooltip-status.inactive { background: var(--r-text-muted); }

/* Breadcrumb pills above the binary tree (used by Account/Referrals page). */
.r-tree-crumb {
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-sm);
    color: var(--r-text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-1);
    font: inherit;
    font-size: var(--r-text-sm);
    padding: var(--r-space-1) var(--r-space-3);
    transition: border-color var(--r-duration-fast), color var(--r-duration-fast);
}
.r-tree-crumb:hover:not(:disabled) { border-color: var(--r-gold); color: var(--r-gold); }
.r-tree-crumb:disabled { cursor: default; opacity: 0.6; }
.r-tree-crumb-current {
    background: var(--r-gold);
    border-color: var(--r-gold);
    color: var(--r-bg-deep);
    cursor: default;
}

.r-tree-node-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-radius-full);
    background: rgba(201, 160, 68, 0.15);
    color: var(--r-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--r-space-1);
    font-size: 12px;
    font-weight: 600;
}

.r-tree-node-name {
    font-size: var(--r-text-2xs);
    font-weight: 600;
    color: var(--r-text-primary);
}

.r-tree-node-rank {
    font-size: 10px;
    color: var(--r-text-muted);
}

.r-tree-connector {
    width: 1px;
    height: var(--r-space-4);
    background: var(--r-border-default);
}

.r-tree-children {
    display: flex;
    gap: var(--r-space-4);
}

/* Branching connectors below a parent: each child gets a vertical drop
   (::before) and half of the horizontal fork (::after). The first child
   covers center→right, extended by half the flex gap so it bridges the
   space; the last child covers left→center the same way. The two halves
   meet at the midpoint of the gap, which is also where the parent's
   downstroke (.r-tree-connector) lands — producing a clean T below the
   parent and an upside-down T above each child. */
.r-tree-children > .r-tree-node {
    position: relative;
    padding-top: var(--r-space-4);
}
.r-tree-children > .r-tree-node::before,
.r-tree-children > .r-tree-node::after {
    content: "";
    position: absolute;
    background: var(--r-border-default);
    pointer-events: none;
}
/* NOTE (step A3): the tree connectors below stay PHYSICAL left/right on
   purpose. The genealogy tree renders MLM placement legs (PlacementSide
   Left/Right) — geometry, not prose. Mirroring them in RTL would make the
   drawn tree contradict the stored placement data. */
/* Vertical drop from the horizontal fork down to the child's card. */
.r-tree-children > .r-tree-node::before {
    top: 0;
    left: 50%;
    width: 1px;
    height: var(--r-space-4);
}
/* Horizontal half-fork — covers right half + half the gap. */
.r-tree-children > .r-tree-node:first-child::after {
    top: 0;
    height: 1px;
    left: 50%;
    right: calc(var(--r-space-4) / -2);
}
/* Horizontal half-fork — covers left half + half the gap. */
.r-tree-children > .r-tree-node:last-child::after {
    top: 0;
    height: 1px;
    right: 50%;
    left: calc(var(--r-space-4) / -2);
}
/* Defensive: a lone child means no sibling to fork to. */
.r-tree-children > .r-tree-node:only-child::after { display: none; }

/* ─── Profile Page ──────────────────────────────────────────────────────── */
.r-profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--r-space-6);
}

@media (max-width: 959px) {
    .r-profile-grid {
        grid-template-columns: 1fr;
    }
}

/* Same guard as .r-account-split. Without it a 1fr track keeps min-width:auto,
   so its automatic minimum is the min-content of whatever it holds — and this
   column holds the two referral share links, ~130 unbreakable characters each.
   The track was resolving to ~1280px, i.e. the whole page laid out 3.5x wider
   than a 375px phone, and body{overflow-x:hidden} then clipped the copy
   buttons off-screen with no scrollbar to reveal them. The ellipsis on
   .r-referral-link-value can only do its job once the track is free to
   shrink. */
.r-profile-grid > * {
    min-width: 0;
}

.r-profile-photo-card {
    text-align: center;
    padding: var(--r-space-8) var(--r-space-6);
}

.r-profile-avatar-lg {
    width: 100px;
    height: 100px;
    border-radius: var(--r-radius-full);
    background: linear-gradient(135deg, var(--r-gold-600), var(--r-gold-400));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--r-space-4);
    font-size: var(--r-text-3xl);
    font-weight: 700;
    color: var(--r-bg-deep);
    letter-spacing: 1px;
}

.r-profile-name {
    font-family: var(--r-font-display);
    font-size: var(--r-text-xl);
    font-weight: 500;
    color: var(--r-text-primary);
    margin-bottom: 2px;
}

.r-profile-email {
    font-size: var(--r-text-sm);
    color: var(--r-text-muted);
    margin-bottom: var(--r-space-4);
}

.r-profile-since {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    padding-top: var(--r-space-4);
    border-top: 1px solid var(--r-border-subtle);
    margin-top: var(--r-space-4);
}

/* ─── Referral / Affiliate Card ────────────────────────────────────────── */
.r-referral-card { margin-top: var(--r-space-4); }
.r-referral-desc { font-size: var(--r-text-sm); color: var(--r-text-secondary); margin-bottom: var(--r-space-4); line-height: 1.5; }
.r-referral-code-label { font-size: var(--r-text-xs); font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--r-space-2); }
.r-referral-code-box { display: flex; align-items: center; gap: var(--r-space-2); background: var(--r-bg-elevated); border: 1px dashed var(--r-gold); border-radius: 8px; padding: 10px 14px; }
.r-referral-code-value { font-family: var(--r-font-mono, monospace); font-size: var(--r-text-lg); font-weight: 700; letter-spacing: 0.15em; color: var(--r-gold); flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* flex: none — the copy button is the whole point of the row; it must never be
   the thing that shrinks when the link beside it is long. */
.r-referral-copy-btn { background: none; border: 1px solid var(--r-border-default); border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--r-text-secondary); transition: all 0.2s ease; display: flex; align-items: center; flex: none; }
.r-referral-copy-btn:hover { border-color: var(--r-gold); color: var(--r-gold); background: var(--r-gold-glow); }
.r-referral-copy-btn .material-symbols-outlined { font-size: 18px; }
.r-referral-link-box { display: flex; align-items: center; gap: var(--r-space-2); background: var(--r-bg-elevated); border: 1px solid var(--r-border-default); border-radius: 8px; padding: 10px 14px; }
/* word-break was dead here — white-space:nowrap means there is nothing to break
   onto a second line. The link is truncated with an ellipsis instead and copied
   in full by the button, which is the behaviour that actually works on a phone. */
/* text-align: left rides with the dir="ltr" in the markup — without it the LTR link sits
   flush right in an RTL card and the ellipsis eats the readable half of the URL. */
.r-referral-link-value { font-size: var(--r-text-xs); color: var(--r-text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* Shown only when a copy genuinely failed; the value beside it is selected at the same
   time so press-and-hold is one step away. */
.r-referral-copy-hint { font-size: 11px; line-height: 1.5; color: var(--r-error-text); margin-top: 6px; }
.r-referral-leg-hint { font-size: 11px; line-height: 1.5; color: var(--r-text-muted); margin-top: var(--r-space-2); }
/* Copy feedback for the icon-only copy buttons. app.js toggles .r-copied /
   .r-copy-failed for 1.8s; the glyph swap does most of the talking, this just keeps
   the button from looking inert. Listed per-class because a bare .r-copied would lose
   the specificity fight with .r-btn-secondary and friends. */
.r-referral-copy-btn.r-copied, .pts-copy.r-copied, .r-2fa-copy-btn.r-copied, .r-products-action.r-copied, .r-btn.r-copied, .mud-button-root.r-copied { border-color: var(--r-gold); color: var(--r-gold); }
.r-referral-copy-btn.r-copy-failed, .pts-copy.r-copy-failed, .r-2fa-copy-btn.r-copy-failed, .r-products-action.r-copy-failed, .r-btn.r-copy-failed, .mud-button-root.r-copy-failed { border-color: var(--r-error-text); color: var(--r-error-text); }

/* ─── Section Title (within cards) ──────────────────────────────────────── */
.r-section-label {
    font-size: var(--r-text-xs);
    font-weight: 600;
    color: var(--r-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--r-space-4);
}

/* ─── History Timeline ──────────────────────────────────────────────────── */
.r-history-timeline {
    position: relative;
    padding-inline-start: var(--r-space-6);
}

.r-history-timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 6px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--r-border-subtle);
}

.r-history-item {
    position: relative;
    padding-bottom: var(--r-space-5);
}

.r-history-item:last-child {
    padding-bottom: 0;
}

.r-history-item::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(-1 * var(--r-space-6) + 2px);
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: var(--r-radius-full);
    background: var(--r-gold);
    border: 2px solid var(--r-bg-surface);
}

.r-history-title {
    font-size: var(--r-text-sm);
    font-weight: 500;
    color: var(--r-text-primary);
}

.r-history-sub {
    font-size: var(--r-text-xs);
    color: var(--r-text-muted);
    margin-top: 2px;
}

/* ─── Action Buttons (consistent across account pages) ──────────────────── */
.r-account-action {
    display: inline-flex;
    align-items: center;
    gap: var(--r-space-2);
    padding: var(--r-space-2) var(--r-space-4);
    border-radius: var(--r-radius-md);
    font-size: var(--r-text-sm);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--r-duration-fast);
}

.r-account-action .material-symbols-outlined {
    font-size: 16px;
}

.r-account-action-primary {
    background: var(--r-gold);
    color: var(--r-bg-deep);
}

.r-account-action-primary:hover {
    background: var(--r-gold-400);
    transform: translateY(-1px);
}

.r-account-action-outline {
    background: transparent;
    color: var(--r-text-secondary);
    border: 1px solid var(--r-border-default);
}

.r-account-action-outline:hover {
    border-color: var(--r-gold);
    color: var(--r-gold);
}

.r-account-action-ghost {
    background: transparent;
    color: var(--r-text-secondary);
}

.r-account-action-ghost:hover {
    background: var(--r-bg-hover);
    color: var(--r-text-primary);
}

.r-account-action-danger {
    background: transparent;
    color: var(--r-error);
}

.r-account-action-danger:hover {
    background: rgba(248, 113, 113, 0.08);
}

/* ─── Loading Skeleton for Account ──────────────────────────────────────── */
.r-account-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--r-space-16);
}

.r-account-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--r-border-subtle);
    border-top-color: var(--r-gold);
    border-radius: var(--r-radius-full);
    animation: r-spin 0.8s linear infinite;
}

/* Light-mode card overrides removed (blueprint step A1b). They re-pointed the
   account cards from --r-bg-surface to --r-bg-base to dodge the old inverted
   light ladder (cards darker than the page). Since step A1 the token block
   itself satisfies the invariant — cards take the base rules in both themes. */

/* ─── Admin Layout (mirrors account layout exactly) ────────────────────── */
.r-admin-layout {
    max-width: 1680px;
    margin: 0 auto;
    padding: var(--r-space-4) clamp(0.5rem, 2vw, 1.5rem);
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 0;
    min-height: calc(100vh - 160px);
    transition: grid-template-columns var(--r-duration-normal) var(--r-ease-out);
}
.r-admin-layout.sidebar-pinned {
    grid-template-columns: 260px 1fr;
}
@media (max-width: 959px) {
    .r-admin-layout,
    .r-admin-layout.sidebar-pinned {
        grid-template-columns: 1fr;
        gap: var(--r-space-4);
        padding-top: var(--r-space-4);
    }
}

.r-admin-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    z-index: 20;
    width: 68px;
    transition: width var(--r-duration-normal) var(--r-ease-out);
}
.r-admin-layout.sidebar-pinned .r-admin-sidebar {
    width: 260px;
}
@media (max-width: 959px) {
    .r-admin-sidebar {
        position: static;
        display: none;
    }
}

.r-admin-sidebar-card {
    width: 68px;
    background: var(--r-bg-surface);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    transition: width var(--r-duration-normal) var(--r-ease-out),
                border-color var(--r-duration-normal),
                box-shadow var(--r-duration-normal);
    position: relative;
}
/* Hover: expand card visually (floats over content — NOT pinned) */
.r-admin-sidebar-card:not(.pinned):hover {
    width: 260px;
    border-color: var(--r-border-default);
    box-shadow: 8px 0 32px -8px rgba(0, 0, 0, 0.3);
    position: absolute;
}
/* Pinned: card fills its grid column — no overlay */
.r-admin-sidebar-card.pinned {
    width: 100%;
    box-shadow: none;
    position: relative;
}

/* Pin button */
.r-admin-sidebar-card .r-sidebar-pin { opacity: 0; }
.r-admin-sidebar-card:hover .r-sidebar-pin,
.r-admin-sidebar-card.pinned .r-sidebar-pin { opacity: 1; }

/* Profile area: hidden when collapsed */
.r-admin-sidebar-card .r-account-profile-info { max-height: 0; opacity: 0; margin-top: 0; }
.r-admin-sidebar-card:hover .r-account-profile-info,
.r-admin-sidebar-card.pinned .r-account-profile-info { max-height: 80px; opacity: 1; margin-top: var(--r-space-2); }

/* Avatar keeps compact size even when expanded — save vertical space for nav */
.r-admin-sidebar-card:hover .r-account-avatar,
.r-admin-sidebar-card.pinned .r-account-avatar { width: 44px; height: 44px; font-size: var(--r-text-sm); }
/* Tighter profile block in admin sidebar */
.r-admin-sidebar-card .r-account-profile { padding: var(--r-space-3) var(--r-space-3) var(--r-space-2); }
.r-admin-sidebar-card .r-account-name { font-size: var(--r-text-sm); }
.r-admin-sidebar-card .r-account-email { font-size: var(--r-text-2xs); }
.r-admin-sidebar-card .r-account-member-badge { margin-top: var(--r-space-1); padding: 2px var(--r-space-2); font-size: 10px; }

/* Nav labels */
.r-admin-sidebar-card .r-account-nav-label { opacity: 0; }
.r-admin-sidebar-card:hover .r-account-nav-label,
.r-admin-sidebar-card.pinned .r-account-nav-label { opacity: 1; }

/* Nav link centering when collapsed */
.r-admin-sidebar-card .r-account-nav-link { justify-content: center; }
.r-admin-sidebar-card:hover .r-account-nav-link,
.r-admin-sidebar-card.pinned .r-account-nav-link { justify-content: flex-start; }

/* Active indicator: shift in when collapsed */
.r-admin-sidebar-card .r-account-nav-link.active::before { inset-inline-start: -8px; }
.r-admin-sidebar-card:hover .r-account-nav-link.active::before,
.r-admin-sidebar-card.pinned .r-account-nav-link.active::before { inset-inline-start: 0; }

/* Group labels */
.r-admin-nav-group-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--r-text-muted);
    padding: var(--r-space-3) var(--r-space-3) var(--r-space-1);
    font-weight: 600;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity var(--r-duration-fast), height var(--r-duration-fast);
    white-space: nowrap;
}
.r-admin-sidebar-card:hover .r-admin-nav-group-label,
.r-admin-sidebar-card.pinned .r-admin-nav-group-label {
    opacity: 0.6;
    height: auto;
}

/* Dividers hidden when collapsed */
.r-admin-sidebar-card .r-account-nav-divider { margin: var(--r-space-1) var(--r-space-3); }
.r-admin-sidebar-card:hover .r-account-nav-divider,
.r-admin-sidebar-card.pinned .r-account-nav-divider { margin: var(--r-space-2) var(--r-space-3); }

/* Ambient scope cue — a 3px logical-start accent on the sidebar card. Visible in collapsed AND expanded states. RTL-safe via border-inline-start. */
.r-account-sidebar-card.scope-admin { border-inline-start: 3px solid var(--r-gold); }
.r-account-sidebar-card.scope-personal { border-inline-start: 3px solid transparent; }

/* Active section header — the section containing the current route. Subtle gold dot + bolder color. */
.r-sidebar-section-header.active { color: var(--r-gold); font-weight: 700; }
.r-sidebar-section-header.active::before { content: "● "; color: var(--r-gold); font-size: 0.7em; vertical-align: middle; }

/* Unified sidebar section header (used by RenovaSidebar in both account + admin layouts) */
/* Collapsed (default) state: the header collapses to a 1px hairline SEAM so
   the icon rail keeps its group boundaries — previously it was opacity:0 /
   height:0 and the collapsed rail (the default desktop state) had no visible
   grouping at all. Text is clipped by the 1px height; the label returns on
   hover/pin. (Blueprint B6.) */
.r-sidebar-section-header { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: transparent; background: var(--r-border-subtle); height: 1px; margin: var(--r-space-2) var(--r-space-4); padding: 0; border-radius: 1px; font-weight: 600; overflow: hidden; transition: opacity var(--r-duration-fast), height var(--r-duration-fast); white-space: nowrap; }
.r-account-sidebar-card:hover .r-sidebar-section-header,
.r-account-sidebar-card.pinned .r-sidebar-section-header,
.r-admin-sidebar-card:hover .r-sidebar-section-header,
.r-admin-sidebar-card.pinned .r-sidebar-section-header { opacity: 0.6; height: auto; color: var(--r-text-muted); background: transparent; margin: 0; padding: var(--r-space-3) var(--r-space-3) var(--r-space-1); }
/* No seam above the first group — the profile block's border already bounds it. */
.r-account-sidebar-card:not(:hover):not(.pinned) .r-sidebar-section-header:first-of-type,
.r-admin-sidebar-card:not(:hover):not(.pinned) .r-sidebar-section-header:first-of-type { background: transparent; margin-block: var(--r-space-1); }
.r-account-sidebar-card .r-sidebar-section-header:first-of-type,
.r-admin-sidebar-card .r-sidebar-section-header:first-of-type { padding-top: var(--r-space-2); }

/* Admin main content */
.r-admin-main {
    padding-inline-start: var(--r-space-6);
    min-width: 0;
}
@media (max-width: 959px) {
    .r-admin-main {
        padding-inline-start: 0;
    }
}

/* Admin sidebar scrollbar */
.r-admin-sidebar-card::-webkit-scrollbar { width: 4px; }
.r-admin-sidebar-card::-webkit-scrollbar-track { background: transparent; }
.r-admin-sidebar-card::-webkit-scrollbar-thumb { background: var(--r-border); border-radius: 4px; }
.r-admin-sidebar-card:hover::-webkit-scrollbar-thumb { background: var(--r-gold-dark); }

/* ─── Admin Dashboard Stats (6 columns vs account's 4) ────────────────── */
.r-admin-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--r-space-4);
    margin-top: var(--r-space-6);
}
@media (max-width: 1200px) { .r-admin-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .r-admin-stats { grid-template-columns: repeat(2, 1fr); } }

/* ─── Admin Filter Toolbars ────────────────────────────────────────────── */
/* Each page keeps its own desktop column template inline (they differ: 1fr 1fr
   auto, 2fr 1fr 1fr 1fr 1fr auto, …), so the mobile collapse needs !important
   to beat the inline declaration. Same trick PublicOrderDetails uses. */
.r-admin-filter-row {
    display: grid;
    gap: var(--r-space-3);
}

.r-admin-filter-row > * {
    min-width: 0;
}

@media (max-width: 959px) {
    .r-admin-filter-row {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }
}

/* ─── Admin Quick Actions ──────────────────────────────────────────────── */
.r-admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--r-space-3);
}
.r-admin-action-btn {
    display: flex;
    align-items: center;
    gap: var(--r-space-2);
    padding: var(--r-space-3) var(--r-space-4);
    border: 1px solid var(--r-border-subtle);
    border-radius: var(--r-radius-lg);
    background: var(--r-bg-surface);
    color: var(--r-text-secondary);
    font-family: var(--r-font-body);
    font-size: var(--r-text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--r-duration-fast);
}
.r-admin-action-btn:hover {
    border-color: var(--r-gold);
    color: var(--r-gold);
    background: rgba(201, 160, 68, 0.06);
    transform: translateY(-1px);
}
.r-admin-action-btn .material-symbols-outlined {
    font-size: 18px;
    opacity: 0.7;
}
.r-admin-action-btn:hover .material-symbols-outlined {
    opacity: 1;
}

/* ─── Admin Attention Alerts ────────────────────────────────────────────── */
.r-admin-alerts { display: flex; flex-wrap: wrap; gap: var(--r-space-3); margin-top: var(--r-space-6); }
.r-admin-alert { display: flex; align-items: center; gap: var(--r-space-2); padding: var(--r-space-2) var(--r-space-4); border-radius: var(--r-radius-lg); font-size: var(--r-text-sm); font-family: var(--r-font-body); text-decoration: none; transition: all var(--r-duration-fast); cursor: pointer; border: 1px solid transparent; }
.r-admin-alert .material-symbols-outlined { font-size: 18px; }
.r-admin-alert.danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.2); }
.r-admin-alert.danger:hover { background: rgba(239, 68, 68, 0.18); border-color: #ef4444; }
.r-admin-alert.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2); }
.r-admin-alert.warning:hover { background: rgba(245, 158, 11, 0.18); border-color: #f59e0b; }
.r-admin-alert.info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border-color: rgba(59, 130, 246, 0.2); }
.r-admin-alert.info:hover { background: rgba(59, 130, 246, 0.18); border-color: #3b82f6; }

/* ─── Admin KPI Trends ─────────────────────────────────────────────────── */
.r-admin-trend { display: flex; align-items: center; gap: 2px; font-size: var(--r-text-2xs); font-weight: 500; margin-top: var(--r-space-1); }
.r-admin-trend .material-symbols-outlined { font-size: 14px; }
.r-admin-trend.up { color: #22c55e; }
.r-admin-trend.down { color: #ef4444; }

/* ─── Order Pipeline ───────────────────────────────────────────────────── */
.r-admin-pipeline { display: flex; align-items: center; gap: var(--r-space-2); padding: var(--r-space-2) 0; }
.r-admin-pipeline-stage { text-align: center; min-width: 60px; }
.r-admin-pipeline-bar { height: 6px; border-radius: 3px; margin-bottom: var(--r-space-2); }
.r-admin-pipeline-bar.warning { background: #f59e0b; }
.r-admin-pipeline-bar.info { background: #3b82f6; }
.r-admin-pipeline-bar.gold { background: var(--r-gold); }
.r-admin-pipeline-bar.success { background: #22c55e; }
.r-admin-pipeline-bar.danger { background: #ef4444; }
.r-admin-pipeline-label { font-size: var(--r-text-2xs); color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.r-admin-pipeline-count { font-size: var(--r-text-lg); font-weight: 700; color: var(--r-text-primary); font-family: var(--r-font-body); font-variant-numeric: tabular-nums; }
.r-admin-pipeline-arrow { color: var(--r-text-muted); opacity: 0.4; }
.r-admin-pipeline-arrow .material-symbols-outlined { font-size: 20px; }
.r-admin-pipeline-sep { width: 1px; height: 40px; background: var(--r-border); margin: 0 var(--r-space-2); }

/* ─── Activity Feed ────────────────────────────────────────────────────── */
.r-admin-activity { display: flex; flex-direction: column; gap: 2px; }
.r-admin-activity-item { display: flex; align-items: flex-start; gap: var(--r-space-3); padding: var(--r-space-2) var(--r-space-1); border-radius: var(--r-radius-sm); text-decoration: none; transition: background var(--r-duration-fast); }
.r-admin-activity-item:hover { background: var(--r-bg-hover); }
.r-admin-activity-icon { width: 28px; height: 28px; border-radius: var(--r-radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.r-admin-activity-icon .material-symbols-outlined { font-size: 14px; }
.r-admin-activity-icon.gold { background: rgba(201, 160, 68, 0.15); color: var(--r-gold); }
.r-admin-activity-icon.green { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.r-admin-activity-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.r-admin-activity-content { min-width: 0; flex: 1; }
.r-admin-activity-text { font-size: 12px; color: var(--r-text-secondary); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r-admin-activity-time { font-size: 10px; color: var(--r-text-muted); margin-top: 2px; }

/* ─── Admin Date Filter ────────────────────────────────────────────────── */
.r-admin-date-filter {
    appearance: none;
    background: var(--r-bg-elevated);
    border: 1px solid var(--r-border);
    border-radius: var(--r-radius-md);
    color: var(--r-text-primary);
    font-family: var(--r-font-body);
    font-size: var(--r-text-sm);
    padding: var(--r-space-2) var(--r-space-4) var(--r-space-2) var(--r-space-3);
    cursor: pointer;
    outline: none;
    transition: border-color var(--r-duration-fast);
}
.r-admin-date-filter:hover, .r-admin-date-filter:focus { border-color: var(--r-gold); }
.r-admin-date-filter option { background: var(--r-bg-surface); color: var(--r-text-primary); }

/* ─── CSS Bar Charts ───────────────────────────────────────────────────── */
.r-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: var(--r-space-2) 0;
}
.r-chart-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.r-chart-bar {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, var(--r-gold), var(--r-gold-dark));
    border-radius: 3px 3px 0 0;
    transition: height 0.6s var(--r-ease-out);
}
.r-chart-bar.green { background: linear-gradient(180deg, #22c55e, #16a34a); }
.r-chart-bar.blue { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.r-chart-bar.gold { background: linear-gradient(180deg, var(--r-gold), var(--r-gold-dark)); }
.r-chart-bar-label {
    font-size: 9px;
    color: var(--r-text-muted);
    white-space: nowrap;
}
.r-chart-stacked-bar {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 1px;
    flex: 1;
}

/* ─── Progress Bar Chart ───────────────────────────────────────────────── */
.r-chart-progress-track {
    height: 6px;
    background: var(--r-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.r-chart-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--r-gold-dark), var(--r-gold));
    border-radius: 3px;
    transition: width 0.8s var(--r-ease-out);
}

/* ── MudBlazor Typography Alignment ──
   Ensure MudBlazor admin pages use Renova fonts */
.mud-typography { font-family: var(--r-font-body); }
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 { font-family: var(--r-font-display); }
.mud-typography-h5, .mud-typography-h6 { font-family: var(--r-font-body); font-weight: 600; }
.mud-typography-body1, .mud-typography-body2 { font-family: var(--r-font-body); }
.mud-typography-subtitle1, .mud-typography-subtitle2 { font-family: var(--r-font-body); }
.mud-typography-button { font-family: var(--r-font-body); }
.mud-typography-caption, .mud-typography-overline { font-family: var(--r-font-body); }
.mud-input, .mud-input-text, .mud-select { font-family: var(--r-font-body); }
.mud-table { font-family: var(--r-font-body); }
.mud-nav-link { font-family: var(--r-font-body); }
.mud-chip { font-family: var(--r-font-body); }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN HEADER — breadcrumb, user avatar, language disambiguation
   ══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb on the left of admin header */
.r-header-breadcrumb { display: flex; align-items: center; gap: var(--r-space-2); min-width: 0; }
.r-header-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.r-header-logo-small { height: 20px; width: auto; opacity: 0.85; transition: opacity var(--r-duration-fast); }
.r-header-logo-link:hover .r-header-logo-small { opacity: 1; }
.r-header-crumb { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); text-decoration: none; white-space: nowrap; transition: color var(--r-duration-fast); }
.r-header-crumb:hover { color: var(--r-text-primary); }
.r-header-crumb-current { color: var(--r-text-primary); font-weight: 500; }
.r-header-crumb-group { color: var(--r-text-secondary); }
.r-header-crumb-sep { color: var(--r-text-muted); opacity: 0.5; font-size: 14px; user-select: none; }

/* Admin header — breadcrumb on left, actions on right; breadcrumb flex-grows to fill space naturally */
.r-header-admin .r-header-inner { justify-content: flex-start; gap: var(--r-space-4); }
.r-header-admin .r-header-breadcrumb { flex: 1 1 auto; min-width: 0; }
.r-header-admin .r-header-actions { flex: 0 0 auto; }

/* min-width:0 lets the breadcrumb shrink, but its crumbs are white-space:nowrap
   — without overflow:hidden they paint straight out of the box and land on top
   of the theme/language/avatar buttons. Observed on a 375px phone: the trail
   rendered as "…n › Excepti" underneath the action cluster. */
.r-header-breadcrumb { overflow: hidden; }
.r-header-crumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
    /* The admin action cluster (theme + language + avatar + hamburger) needs
       ~185px of the ~343px available, so the full trail cannot fit. Keep the
       logo (the way home) and the page you're on; "Admin" and the group are
       repeated by the page heading directly below. */
    .r-header-admin .r-header-crumb:not(.r-header-crumb-current),
    .r-header-admin .r-header-crumb-sep { display: none; }

    .r-header-admin .r-header-crumb-current::before {
        content: '\203A';
        color: var(--r-text-muted);
        opacity: 0.5;
        margin-inline-end: var(--r-space-2);
    }

    /* Reclaim ~20px: the globe is redundant next to an explicit EN/AR code. */
    .r-header-lang { min-width: 44px !important; padding: 0 var(--r-space-2) !important; }
    .r-header-lang .material-symbols-outlined { display: none; }
}

/* Language button: icon + code side-by-side (disambiguates from user avatar) */
.r-header-lang { gap: 4px !important; width: auto !important; padding: 0 var(--r-space-3) !important; min-width: 64px; }
.r-header-lang .r-header-lang-code { font-size: var(--r-text-2xs); font-weight: 600; letter-spacing: 0.5px; }
.r-header-lang .material-symbols-outlined { font-size: 18px; }

/* Language picker dropdown items (rendered inside MudMenu via SelectLanguage) */
.r-header-lang-menu .mud-list-item { padding: 0 !important; }
.r-header-lang-item { display: flex; align-items: center; justify-content: space-between; gap: var(--r-space-3); padding: var(--r-space-2) var(--r-space-3); min-width: 200px; font-family: var(--r-font-body); transition: background var(--r-duration-fast); }
.r-header-lang-item.active { background: rgba(201, 160, 68, 0.08); }
.r-header-lang-item-main { display: flex; flex-direction: column; gap: 2px; }
.r-header-lang-item-code { font-size: var(--r-text-2xs); font-weight: 700; color: var(--r-gold); letter-spacing: 0.6px; }
.r-header-lang-item-native { font-size: var(--r-text-sm); color: var(--r-text-primary); font-weight: 500; }
.r-header-lang-item-en { font-size: var(--r-text-2xs); color: var(--r-text-muted); }
.r-header-lang-item-check { font-size: 16px !important; color: var(--r-gold); }

/* Mobile drawer nav icons. MudNavLink's own Icon parameter takes an SVG path,
   but the shared NavItem model carries Material Symbols ligature names (the
   sidebar renders them as text), so these go in as child content and need the
   alignment MudNavLink would otherwise supply. */
.r-drawer-nav-icon { font-size: 20px; line-height: 1; vertical-align: -4px; margin-inline-end: var(--r-space-3); opacity: 0.85; }

/* User avatar button — gold circle with initials; clearly NOT a toggle button */
.r-header-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--r-gold-600, var(--r-gold)), var(--r-gold-400, var(--r-gold-light))); color: var(--r-bg-deep); font-family: var(--r-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; border: 2px solid transparent; transition: all var(--r-duration-fast); }
.r-header-avatar:hover { transform: translateY(-1px); border-color: rgba(201, 160, 68, 0.4); box-shadow: 0 4px 12px rgba(201, 160, 68, 0.25); }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN PRODUCTS PAGE — List redesign (Phase 1)
   ══════════════════════════════════════════════════════════════════════════ */

/* Compact header — title + inline meta chips + primary CTA */
/* .r-products-header / .r-products-heading retired (B1 rollout complete) — every page now renders <PageHeader> (.r-page-header). */
.r-products-meta { display: flex; align-items: center; gap: var(--r-space-2); margin-top: var(--r-space-2); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); flex-wrap: wrap; }

/* ─── PageHeader component (blueprint B1) — the single page-title contract.
   Same geometry as .r-products-header, with the title unified on
   var(--r-text-3xl)/500/1.15. Pages must not override these. ─── */
.r-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r-space-4); flex-wrap: wrap; margin-bottom: var(--r-space-4); padding-bottom: var(--r-space-3); border-bottom: 1px solid var(--r-border-subtle); }
.r-page-header-title { font-family: var(--r-font-display); font-size: var(--r-text-3xl); font-weight: 500; line-height: 1.15; letter-spacing: 0.3px; color: var(--r-text-primary); margin: 0; }
.r-page-header-sub { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); margin: var(--r-space-1) 0 0; }
.r-page-header-meta { display: flex; align-items: center; gap: var(--r-space-2); margin-top: var(--r-space-2); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); flex-wrap: wrap; }
.r-page-header-actions { display: flex; align-items: center; gap: var(--r-space-2); flex-shrink: 0; }
.r-products-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--r-text-muted); opacity: 0.5; }
.r-products-meta-warn { color: #f59e0b; font-weight: 500; }

/* .r-products-cta retired (B7 tranche 3) — call sites migrated to .r-btn .r-btn-outline .r-btn-sm. */

/* Quick filter chips (stock filters — clickable, actionable) */
.r-products-chips { display: flex; gap: var(--r-space-2); flex-wrap: wrap; margin-bottom: var(--r-space-4); }
.r-products-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px var(--r-space-3); background: transparent; color: var(--r-text-secondary); font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; border-radius: 999px; border: 1px solid var(--r-border-subtle); cursor: pointer; transition: all var(--r-duration-fast); }
.r-products-chip .material-symbols-outlined { font-size: 15px; }
.r-products-chip.danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.r-products-chip.warning:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.r-products-chip.danger.active { border-color: #ef4444; color: #fff; background: #ef4444; font-weight: 600; }
.r-products-chip.warning.active { border-color: #f59e0b; color: var(--r-bg-deep); background: #f59e0b; font-weight: 600; }
.r-products-chip-clear { display: inline-flex; align-items: center; gap: 4px; padding: 5px var(--r-space-3); background: transparent; color: var(--r-text-muted); font-family: var(--r-font-body); font-size: var(--r-text-sm); border: none; cursor: pointer; border-radius: 999px; transition: color var(--r-duration-fast); }
.r-products-chip-clear:hover { color: var(--r-text-primary); }
.r-products-chip-clear .material-symbols-outlined { font-size: 15px; }

/* ── H14 admin-conversion polish (audit C.6) ─────────────────────────────── */
/* Red activity-icon for failed payment/refund events (PaymentDetail timeline). */
.r-admin-activity-icon.rose { background: var(--r-error-muted); color: var(--r-error); }
/* Info (blue) / success (green) filter-chip states — restores the original
   semantic colors the admin conversion had to flatten to gold (RankAudit). */
.r-products-chip.info:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
.r-products-chip.success:hover { border-color: #22c55e; color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.r-products-chip.info.active { border-color: #3b82f6; color: #fff; background: #3b82f6; font-weight: 600; }
.r-products-chip.success.active { border-color: #22c55e; color: #fff; background: #22c55e; font-weight: 600; }
/* Emphasized KPI tile (e.g. Commissions Grand Total) — gold accent + tint so the
   headline figure stands out from the sibling stat cards again. */
.r-account-stat.emphasis { border-color: var(--r-gold); background: linear-gradient(135deg, rgba(201, 160, 68, 0.12), rgba(201, 160, 68, 0.03)); }

/* Toolbar */
.r-products-toolbar { display: grid; grid-template-columns: 1fr 200px 160px auto; gap: var(--r-space-3); align-items: stretch; margin-top: var(--r-space-6); margin-bottom: var(--r-space-4); padding: var(--r-space-3); background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-lg); }
@media (max-width: 900px) { .r-products-toolbar { grid-template-columns: 1fr 1fr; } .r-products-toolbar .r-products-search { grid-column: 1 / -1; } .r-products-toolbar .r-products-view-toggle { grid-column: 1 / -1; justify-content: flex-end; } }
/* The 1fr tracks hold <select>s, whose min-content is their longest option
   label. Without this the track inflates to that label and the toolbar runs
   past the viewport on a phone — same failure as .r-profile-grid. Shared by
   /admin/products, /users, /orders, /countries, /evouchers and /network. */
.r-products-toolbar > * { min-width: 0; }

.r-products-search { position: relative; display: flex; align-items: center; }
.r-products-search .material-symbols-outlined { position: absolute; inset-inline-start: var(--r-space-3); font-size: 20px; color: var(--r-text-muted); pointer-events: none; }
.r-products-search input { width: 100%; padding: var(--r-space-3); padding-inline-start: calc(var(--r-space-3) * 2 + 20px); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); color: var(--r-text-primary); font-family: var(--r-font-body); font-size: var(--r-text-sm); transition: all var(--r-duration-fast); }
.r-products-search input:focus { outline: none; border-color: var(--r-gold); background: var(--r-bg-surface); box-shadow: 0 0 0 3px rgba(201, 160, 68, 0.12); }
.r-products-search input::placeholder { color: var(--r-text-muted); }

.r-products-filter { padding: var(--r-space-3) var(--r-space-4); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); color: var(--r-text-primary); font-family: var(--r-font-body); font-size: var(--r-text-sm); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9287' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--r-space-3) center; padding-right: calc(var(--r-space-3) * 2 + 12px); }
/* RTL: select chevron moves to the left edge; padding swaps sides. background-position
   has no logical-property form for offset positioning. (Step A3.) */
[dir="rtl"] .r-products-filter { background-position: left var(--r-space-3) center; padding-right: var(--r-space-4); padding-left: calc(var(--r-space-3) * 2 + 12px); }
.r-products-filter:focus { outline: none; border-color: var(--r-gold); }

.r-products-view-toggle { display: flex; gap: 2px; background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); padding: 3px; }
.r-products-view-toggle button { display: flex; align-items: center; justify-content: center; width: 36px; height: 100%; min-height: 36px; border: none; background: transparent; color: var(--r-text-muted); border-radius: calc(var(--r-radius-md) - 3px); cursor: pointer; transition: all var(--r-duration-fast); }
.r-products-view-toggle button:hover { color: var(--r-text-secondary); }
.r-products-view-toggle button.active { background: var(--r-bg-surface); color: var(--r-gold); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.r-products-view-toggle button .material-symbols-outlined { font-size: 18px; }

/* Actions column — force horizontal layout to prevent icon stacking */
.r-account-table .r-products-actions-cell { white-space: nowrap; }
.r-account-table .r-products-actions-cell .r-products-action { margin-inline-start: var(--r-space-1); }

/* Initials-based thumbnail fallback (elegant placeholder instead of grey box) */
.r-products-thumb-initials { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-radius-md); font-family: var(--r-font-body); font-size: 15px; font-weight: 500; color: var(--r-bg-deep); letter-spacing: 0.5px; text-transform: uppercase; overflow: hidden; }
.r-products-thumb-initials.tone-0 { background: linear-gradient(135deg, #d9b86a, #c9a044); }
.r-products-thumb-initials.tone-1 { background: linear-gradient(135deg, #c9a044, #a88534); }
.r-products-thumb-initials.tone-2 { background: linear-gradient(135deg, #b8956a, #97774c); }
.r-products-thumb-initials.tone-3 { background: linear-gradient(135deg, #ccb88a, #ab9861); }
.r-products-thumb-initials.tone-4 { background: linear-gradient(135deg, #d4b584, #b39763); }

/* Grid-view variant (square card media) */
.r-products-card-media .r-products-thumb-initials { width: 100%; height: 100%; border-radius: 0; font-size: 2rem; }

/* Table view */
.r-products-table-card { padding: 0 !important; overflow: hidden; }
.r-products-table-card .r-account-table thead th:first-child,
.r-products-table-card .r-account-table tbody td:first-child { padding-inline-start: var(--r-space-5); }
.r-products-table-card .r-account-table thead th:last-child,
.r-products-table-card .r-account-table tbody td:last-child { padding-inline-end: var(--r-space-5); }
.r-products-row td { padding-top: var(--r-space-4); padding-bottom: var(--r-space-4); vertical-align: middle; position: relative; }
.r-products-row.warning td:first-child::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: #f59e0b; }
.r-products-row.danger td:first-child::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 3px; background: #ef4444; }

.r-products-thumb { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-radius-md); background: var(--r-bg-base); overflow: hidden; border: 1px solid var(--r-border-subtle); }
.r-products-thumb img { width: 100%; height: 100%; object-fit: cover; }
.r-products-thumb .material-symbols-outlined { font-size: 22px; color: var(--r-text-muted); opacity: 0.5; }

.r-products-name { font-family: var(--r-font-body); font-weight: 600; color: var(--r-text-primary); text-decoration: none; display: block; }
.r-products-name:hover { color: var(--r-gold); }
.r-products-sku { font-size: var(--r-text-2xs); color: var(--r-text-muted); margin-top: 2px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.3px; }

.r-products-discount { font-size: var(--r-text-2xs); color: #ef4444; margin-top: 2px; font-weight: 500; }
.r-products-stock-warn { color: #f59e0b; font-weight: 600; }

.r-products-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--r-space-2); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.r-products-status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.r-products-status.active { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.r-products-status.active .r-products-status-dot { background: #22c55e; }
.r-products-status.inactive { color: var(--r-text-muted); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); }
.r-products-status.inactive .r-products-status-dot { background: var(--r-text-muted); }
.r-products-featured { display: inline-block; margin-inline-start: 6px; padding: 2px 6px; font-size: 9px; font-weight: 700; color: var(--r-gold); background: rgba(201, 160, 68, 0.12); border-radius: var(--r-radius-sm); text-transform: uppercase; letter-spacing: 0.5px; }

.r-products-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; background: transparent; border-radius: var(--r-radius-md); color: var(--r-text-muted); cursor: pointer; transition: all var(--r-duration-fast); margin-inline-start: var(--r-space-1); }
.r-products-action:hover { border-color: var(--r-gold); color: var(--r-gold); background: rgba(201, 160, 68, 0.06); }
.r-products-action.danger:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.06); }
/* C4: destructive actions are separated from safe ones by SPACE, not colour
   alone — a mis-tap 4px from "view" must not be able to land on "delete". */
.r-products-actions-cell .r-products-action.danger { margin-inline-start: var(--r-space-4); }
@media (max-width: 767px) {
    /* C4: 44x44 touch targets on phones (three 32px targets 4px apart is a
       mis-tap generator); icon scales with the box. */
    .r-products-action { width: 44px; height: 44px; }
    .r-products-action .material-symbols-outlined { font-size: 20px; }
}
.r-products-action .material-symbols-outlined { font-size: 18px; }

/* Grid view */
.r-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--r-space-4); margin-top: var(--r-space-4); }
.r-products-card { background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-lg); overflow: hidden; transition: all var(--r-duration-fast); position: relative; display: flex; flex-direction: column; }
.r-products-card:hover { border-color: var(--r-gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.r-products-card.warning::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #f59e0b; z-index: 2; }
.r-products-card.danger::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #ef4444; z-index: 2; }

.r-products-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--r-bg-base); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.r-products-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--r-duration-slow); }
.r-products-card:hover .r-products-card-media img { transform: scale(1.04); }
.r-products-card-media .material-symbols-outlined { font-size: 56px; color: var(--r-text-muted); opacity: 0.3; }
.r-products-card-badge { position: absolute; top: var(--r-space-2); inset-inline-end: var(--r-space-2); padding: 3px var(--r-space-2); background: var(--r-gold); color: var(--r-bg-deep); font-size: 10px; font-weight: 700; border-radius: var(--r-radius-sm); text-transform: uppercase; letter-spacing: 0.5px; z-index: 1; }
.r-products-card-badge.inactive { background: rgba(0, 0, 0, 0.7); color: #fff; top: auto; bottom: var(--r-space-2); }

.r-products-card-body { padding: var(--r-space-3) var(--r-space-4); flex: 1; display: flex; flex-direction: column; gap: var(--r-space-1); }
.r-products-card-body .r-products-name { font-size: var(--r-text-base); }
.r-products-card-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--r-space-2); font-size: var(--r-text-sm); color: var(--r-text-secondary); }

.r-products-card-actions { display: flex; gap: var(--r-space-1); padding: var(--r-space-2) var(--r-space-3); border-top: 1px solid var(--r-border-subtle); justify-content: flex-end; background: var(--r-bg-base); }

/* ── Blazor FocusOnNavigate outline suppression ──
   FocusOnNavigate (Routes.razor, Selector="h1") adds tabindex="-1" to the
   matched element on every route change and calls .focus() for a11y. Browsers
   draw their default focus ring around the element, which sighted users see as
   a random box around the page heading. Suppress it while preserving real
   interactive focus rings (buttons, links, inputs). */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* Empty state */
.r-products-empty { text-align: center; padding: var(--r-space-12) var(--r-space-6) !important; display: flex; flex-direction: column; align-items: center; }
.r-products-empty > .material-symbols-outlined { font-size: 56px; color: var(--r-text-muted); opacity: 0.4; }
.r-products-empty-title { font-family: var(--r-font-display); font-size: var(--r-text-xl); color: var(--r-text-primary); margin-top: var(--r-space-4); letter-spacing: 0.5px; }
.r-products-empty-sub { font-size: var(--r-text-sm); color: var(--r-text-muted); margin-top: var(--r-space-2); max-width: 360px; }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN PRODUCTS — Detail View + Edit Form (Phase 2)
   ══════════════════════════════════════════════════════════════════════════ */

/* Top action bar (shared by View + Edit) */
.r-product-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--r-space-4); margin-bottom: var(--r-space-5); padding-bottom: var(--r-space-3); border-bottom: 1px solid var(--r-border-subtle); flex-wrap: wrap; }
.r-product-topbar-title { font-family: var(--r-font-display); font-size: 1.25rem; color: var(--r-text-secondary); letter-spacing: 0.3px; }
.r-product-back { display: inline-flex; align-items: center; gap: var(--r-space-2); color: var(--r-text-muted); text-decoration: none; font-family: var(--r-font-body); font-size: var(--r-text-sm); transition: color var(--r-duration-fast); }
.r-product-back:hover { color: var(--r-text-primary); }
.r-product-back .material-symbols-outlined { font-size: 18px; }
.r-product-topbar-actions { display: flex; align-items: center; gap: var(--r-space-2); }

/* .r-product-ghost-btn retired (B7 tranche 3) — its spec became the canonical .r-btn-ghost. */

/* .r-product-danger-btn retired (B7 tranche 3) — its spec became the canonical .r-btn-danger. */

/* ── View Page ─────────────────────────────────────────────────────────── */

/* Hero */
.r-product-hero { display: grid; grid-template-columns: 240px 1fr; gap: var(--r-space-6); margin-bottom: var(--r-space-5); padding: var(--r-space-5); background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-xl); }
@media (max-width: 768px) { .r-product-hero { grid-template-columns: 1fr; } }

.r-product-hero-media { aspect-ratio: 1 / 1; background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.r-product-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.r-product-hero-media .r-products-thumb-initials { width: 100%; height: 100%; border-radius: 0; font-size: 4rem; }

.r-product-hero-body { display: flex; flex-direction: column; gap: var(--r-space-3); min-width: 0; }
.r-product-hero-badges { display: flex; align-items: center; gap: var(--r-space-2); flex-wrap: wrap; }
.r-product-hero-title { font-family: var(--r-font-display); font-size: 2.25rem; font-weight: 500; color: var(--r-text-primary); margin: 0; letter-spacing: 0.5px; line-height: 1.15; }
.r-product-hero-meta { display: flex; align-items: center; gap: var(--r-space-2); flex-wrap: wrap; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); }
.r-product-hero-sku { font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--r-text-secondary); font-weight: 500; }
.r-product-hero-price { display: flex; align-items: baseline; gap: var(--r-space-3); margin-top: var(--r-space-2); flex-wrap: wrap; }
.r-product-hero-price-value { font-family: var(--r-font-display); font-size: 2rem; line-height: 1; font-weight: 500; color: var(--r-gold); letter-spacing: 0.3px; }
.r-product-hero-discount { color: #ef4444; font-weight: 500; font-size: var(--r-text-sm); }
.r-product-hero-stock { color: var(--r-text-muted); font-size: var(--r-text-sm); margin-inline-start: auto; }

.r-product-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--r-space-2); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.r-product-chip .material-symbols-outlined { font-size: 13px; }
.r-product-chip.danger { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.r-product-chip.warning { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }

/* Detail grid — 2/3 main + 1/3 aside (admin pages: ProductView, UserDetail, OrderDetail) */
.r-product-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--r-space-4); align-items: start; }
/* minmax(0, 1fr), not 1fr: a bare `1fr` is `minmax(auto, 1fr)`, so a wide item's
   min-content size (the gallery's thumb strip) grows the track past the viewport. */
@media (max-width: 1024px) { .r-product-detail-grid { grid-template-columns: minmax(0, 1fr); } }

/* Public ProductDetails page — gallery+info layout uses balanced columns */
@media (min-width: 960px) {
    .r-product-detail-grid:has(> .r-product-gallery) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r-space-12); }
}

.r-product-detail-main { display: flex; flex-direction: column; gap: var(--r-space-4); min-width: 0; }
.r-product-detail-aside { display: flex; flex-direction: column; gap: var(--r-space-4); position: sticky; top: 96px; }
@media (max-width: 1024px) { .r-product-detail-aside { position: static; } }

/* Sections (shared by View + Edit) */
.r-product-section { padding: var(--r-space-5) !important; }
.r-product-section-title { display: flex; align-items: center; gap: var(--r-space-2); font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: var(--r-space-4); }
.r-product-section-title .material-symbols-outlined { font-size: 16px; color: var(--r-gold); opacity: 0.8; }

.r-product-subsection { margin-top: var(--r-space-4); padding-top: var(--r-space-4); border-top: 1px solid var(--r-border-subtle); }
.r-product-subsection-title { font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: var(--r-space-2); }

.r-product-short-desc { font-family: var(--r-font-body); font-size: var(--r-text-base); color: var(--r-text-primary); line-height: 1.6; margin: 0 0 var(--r-space-3) 0; }
.r-product-prose { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.7; white-space: pre-wrap; }

/* Split section (Ingredients + Benefits) */
.r-product-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-space-4); }
@media (max-width: 768px) { .r-product-split { grid-template-columns: 1fr; } }

.r-product-chips-list { display: flex; flex-wrap: wrap; gap: var(--r-space-2); }
.r-product-tag { padding: 4px var(--r-space-3); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: 999px; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); }

.r-product-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--r-space-2); }
.r-product-bullets li { position: relative; padding-inline-start: var(--r-space-5); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.5; }
.r-product-bullets li::before { content: ''; position: absolute; inset-inline-start: var(--r-space-2); top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--r-gold); }

/* Commission — Direct highlighted card */
.r-product-commission-direct { padding: var(--r-space-4); background: linear-gradient(135deg, rgba(201, 160, 68, 0.1), rgba(201, 160, 68, 0.02)); border: 1px solid rgba(201, 160, 68, 0.25); border-radius: var(--r-radius-lg); margin-bottom: var(--r-space-4); position: relative; overflow: hidden; }
.r-product-commission-direct::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; bottom: 0; width: 3px; background: var(--r-gold); }
.r-product-commission-direct-label { font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: var(--r-gold); text-transform: uppercase; letter-spacing: 0.8px; }
.r-product-commission-direct-value { font-family: var(--r-font-body); font-variant-numeric: tabular-nums; font-size: 2.5rem; font-weight: 500; color: var(--r-text-primary); line-height: 1; margin-top: var(--r-space-1); }
.r-product-commission-direct-value span { font-size: 1.25rem; color: var(--r-gold); margin-inline-start: 4px; }
.r-product-commission-direct-sub { font-size: var(--r-text-sm); color: var(--r-text-muted); margin-top: var(--r-space-2); }

/* Commission — MLM levels list (View) */
.r-product-commission-levels { display: flex; flex-direction: column; gap: var(--r-space-2); }
.r-product-commission-level { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--r-space-3); padding: var(--r-space-3); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); transition: border-color var(--r-duration-fast); }
.r-product-commission-level:hover { border-color: rgba(201, 160, 68, 0.3); }
.r-product-commission-level-badge { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-sm); font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 700; color: var(--r-gold); letter-spacing: 0.5px; }
.r-product-commission-level-info { min-width: 0; }
.r-product-commission-level-name { font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 600; color: var(--r-text-primary); }
.r-product-commission-level-gate { font-size: var(--r-text-2xs); color: var(--r-text-muted); margin-top: 1px; }
.r-product-commission-level-value { font-family: var(--r-font-body); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 500; color: var(--r-gold); letter-spacing: 0.3px; }

/* Aside: key-value rows */
.r-product-kv { display: flex; flex-direction: column; gap: var(--r-space-2); }
.r-product-kv-row { display: flex; justify-content: space-between; align-items: center; padding: var(--r-space-2) 0; border-bottom: 1px solid var(--r-border-subtle); font-family: var(--r-font-body); font-size: var(--r-text-sm); }
.r-product-kv-row:last-child { border-bottom: none; }
.r-product-kv-row > span:first-child { color: var(--r-text-muted); }
.r-product-kv-row > span:last-child { color: var(--r-text-primary); font-weight: 500; }
.r-product-kv-emphasis > span:last-child { color: var(--r-gold); font-weight: 600; font-size: var(--r-text-base); }
.r-product-kv-warn > span:last-child { color: #ef4444; }
.r-product-kv-danger { color: #ef4444 !important; font-weight: 600 !important; }
.r-product-kv-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }
.r-product-kv-muted { color: var(--r-text-muted); font-weight: 400; }

/* Margin indicator */
.r-product-margin { margin-top: var(--r-space-4); padding: var(--r-space-3); background: var(--r-bg-base); border-radius: var(--r-radius-md); border: 1px solid var(--r-border-subtle); }
.r-product-margin-label { font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.r-product-margin-value { font-family: var(--r-font-body); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 500; margin-top: 2px; letter-spacing: 0.3px; }
.r-product-margin-value.positive { color: #22c55e; }
.r-product-margin-value.negative { color: #ef4444; }
.r-product-margin-pct { font-size: 0.9rem; color: var(--r-text-muted); font-weight: 400; margin-inline-start: 4px; }

/* ── Edit Page ─────────────────────────────────────────────────────────── */

/* Shell — same grid as View */
.r-product-edit-shell { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--r-space-4); align-items: start; }
@media (max-width: 1024px) { .r-product-edit-shell { grid-template-columns: 1fr; } }

.r-product-edit-main { display: flex; flex-direction: column; gap: var(--r-space-4); min-width: 0; }
.r-product-edit-aside { display: flex; flex-direction: column; gap: var(--r-space-4); position: sticky; top: 96px; }
@media (max-width: 1024px) {
    /* C3: below the two-column breakpoint the aside used to reflow BELOW the
       whole ~1200px form — preview, margin calc and checklist all scrolled out
       of reach for the entire edit session. display:contents promotes the
       aside's cards to shell grid items so they can be ordered individually:
       checklist first (the "what's left" signal), form next, preview and
       margin calc after. */
    .r-product-edit-aside { position: static; display: contents; }
    .r-product-edit-main { order: 1; }
    .r-product-edit-aside > .r-account-card { order: 2; }
    .r-product-edit-aside > .r-product-checklist-card { order: 0; }

    /* C3: keep Cancel/Save reachable during the whole edit. Sticky below the
       fixed 80px site header; opaque page-field background so the form does
       not show through. */
    .r-product-topbar {
        position: sticky;
        top: 80px;
        z-index: 30;
        background: var(--r-bg-deep);
        padding-top: var(--r-space-2);
    }
}

@media (max-width: 640px) {
    /* One-row sticky bar on phones: the centre title is redundant next to the
       back link and costs a wrap. */
    .r-product-topbar-title { display: none; }
}

/* Form grid */
.r-product-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--r-space-3) var(--r-space-4); }
.r-product-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.r-product-field.span-4 { grid-column: span 4; }
.r-product-field.span-6 { grid-column: span 6; }
.r-product-field.span-8 { grid-column: span 8; }
.r-product-field.span-12 { grid-column: span 12; }
@media (max-width: 640px) { .r-product-field[class*="span-"] { grid-column: span 12; } }

.r-product-field label { font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.8px; display: flex; align-items: center; gap: var(--r-space-2); }
.r-product-required { color: #ef4444; }
.r-product-hint { font-size: 10px; font-weight: 400; color: var(--r-text-muted); text-transform: none; letter-spacing: 0; opacity: 0.8; }
.r-product-hint-inline { font-size: var(--r-text-2xs); color: var(--r-text-muted); margin-top: 4px; }

/* Form inputs */
.r-product-input { width: 100%; padding: var(--r-space-3); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); color: var(--r-text-primary); font-family: var(--r-font-body); font-size: var(--r-text-sm); transition: all var(--r-duration-fast); }
.r-product-input:focus { outline: none; border-color: var(--r-gold); background: var(--r-bg-surface); box-shadow: 0 0 0 3px rgba(201, 160, 68, 0.12); }
.r-product-input::placeholder { color: var(--r-text-muted); opacity: 0.6; }
.r-product-input-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; letter-spacing: 0.3px; }
.r-product-input-lg { font-size: 1.5rem; font-weight: 500; padding: var(--r-space-2) var(--r-space-3); }
.r-product-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

/* Prefix/suffix input wrapper */
.r-product-input-affix { position: relative; display: flex; align-items: center; }
.r-product-input-prefix { position: absolute; inset-inline-start: var(--r-space-3); color: var(--r-text-muted); font-size: var(--r-text-sm); pointer-events: none; z-index: 1; }
.r-product-input-suffix { position: absolute; inset-inline-end: var(--r-space-3); color: var(--r-text-muted); font-size: var(--r-text-sm); pointer-events: none; z-index: 1; }
.r-product-input-affix input { padding-inline-start: calc(var(--r-space-3) * 2 + 8px); }
.r-product-input-affix input[type="number"] { padding-inline-end: calc(var(--r-space-3) * 2); }

/* Media row: preview + form */
.r-product-media-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--r-space-5); align-items: start; }
@media (max-width: 640px) { .r-product-media-row { grid-template-columns: 1fr; } }
.r-product-media-preview { aspect-ratio: 1 / 1; background: var(--r-bg-base); border: 1px dashed var(--r-border-subtle); border-radius: var(--r-radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.r-product-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.r-product-media-preview .r-products-thumb-initials { width: 100%; height: 100%; border-radius: 0; font-size: 3rem; }

/* Commission — Direct edit variant */
.r-product-commission-direct-edit { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--r-space-4); padding-bottom: var(--r-space-5); }
.r-product-commission-direct-edit .r-product-commission-direct-label { grid-column: 1 / -1; }
.r-product-commission-direct-input { width: 160px; }
.r-product-commission-direct-edit .r-product-commission-direct-sub { grid-column: 1 / -1; margin-top: 0; }

/* Divider between Direct and MLM */
.r-product-commission-sep { display: flex; align-items: center; gap: var(--r-space-3); margin: var(--r-space-4) 0; color: var(--r-text-muted); font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.r-product-commission-sep::before, .r-product-commission-sep::after { content: ''; flex: 1; height: 1px; background: var(--r-border-subtle); }

/* MLM levels edit grid */
.r-product-commission-levels-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--r-space-3); }
@media (max-width: 1024px) { .r-product-commission-levels-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .r-product-commission-levels-grid { grid-template-columns: repeat(2, 1fr); } }

.r-product-level-edit { display: flex; flex-direction: column; gap: 6px; padding: var(--r-space-3); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); position: relative; }
.r-product-level-edit .r-product-commission-level-badge { position: absolute; top: -10px; inset-inline-start: var(--r-space-3); background: var(--r-bg-surface); padding: 2px var(--r-space-2); }
.r-product-level-edit label { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* Toggle (Active / Featured) */
.r-product-toggle { display: grid; grid-template-columns: 44px 1fr; gap: var(--r-space-3); align-items: center; cursor: pointer; text-transform: none; letter-spacing: 0; user-select: none; }
.r-product-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.r-product-toggle-track { position: relative; width: 44px; height: 24px; background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: 999px; transition: all var(--r-duration-fast); }
.r-product-toggle-track::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; background: var(--r-text-muted); border-radius: 50%; transition: all var(--r-duration-fast); }
.r-product-toggle input:checked + .r-product-toggle-track { background: rgba(201, 160, 68, 0.2); border-color: var(--r-gold); }
.r-product-toggle input:checked + .r-product-toggle-track::after { inset-inline-start: 22px; background: var(--r-gold); }
.r-product-toggle-label { display: block; font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 600; color: var(--r-text-primary); text-transform: none; letter-spacing: 0; }
.r-product-toggle-help { display: block; font-size: var(--r-text-2xs); color: var(--r-text-muted); margin-top: 1px; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Preview card (aside) */
.r-product-preview-card { background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-lg); overflow: hidden; }
.r-product-preview-media { position: relative; aspect-ratio: 1 / 1; background: var(--r-bg-surface); display: flex; align-items: center; justify-content: center; }
.r-product-preview-media img { width: 100%; height: 100%; object-fit: cover; }
.r-product-preview-media .r-products-thumb-initials { width: 100%; height: 100%; border-radius: 0; font-size: 2.5rem; }
.r-product-preview-body { padding: var(--r-space-3) var(--r-space-4); }
.r-product-preview-name { font-family: var(--r-font-body); font-size: var(--r-text-base); font-weight: 600; color: var(--r-text-primary); }
.r-product-preview-sku { font-size: var(--r-text-2xs); color: var(--r-text-muted); font-family: ui-monospace, 'SF Mono', Menlo, monospace; margin-top: 2px; }
.r-product-preview-price { display: flex; gap: var(--r-space-2); align-items: baseline; margin-top: var(--r-space-2); }
.r-product-preview-price > span:first-child { font-family: var(--r-font-display); font-size: 1.25rem; color: var(--r-gold); font-weight: 500; }
.r-product-preview-discount { font-size: var(--r-text-2xs); color: #ef4444; }

/* Image upload zone — empty state, preview, hover-overlay change/remove */
.r-image-upload { position: relative; aspect-ratio: 16 / 9; max-width: 480px; border-radius: var(--r-radius-lg); overflow: hidden; background: var(--r-bg-base); border: 1px dashed var(--r-border-subtle); transition: border-color var(--r-duration-fast); }
.r-image-upload:hover { border-color: var(--r-gold); }
.r-image-upload.uploading { pointer-events: none; }

/* Empty state — large click-target dropzone */
.r-image-upload-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--r-space-2); width: 100%; height: 100%; cursor: pointer; color: var(--r-text-muted); transition: all var(--r-duration-fast); padding: var(--r-space-6); text-align: center; }
.r-image-upload-empty:hover { color: var(--r-gold); background: rgba(201, 160, 68, 0.04); }
.r-image-upload-empty .material-symbols-outlined { font-size: 40px; opacity: 0.6; }
.r-image-upload-empty:hover .material-symbols-outlined { opacity: 1; }
.r-image-upload-empty-title { font-family: var(--r-font-body); font-size: var(--r-text-base); font-weight: 500; }
.r-image-upload-empty-hint { font-size: var(--r-text-2xs); color: var(--r-text-muted); }

/* Preview state */
.r-image-upload-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-image-upload-overlay-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--r-space-2); background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity var(--r-duration-fast); }
.r-image-upload:hover .r-image-upload-overlay-actions { opacity: 1; }
.r-image-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: var(--r-space-2) var(--r-space-3); background: rgba(255, 255, 255, 0.95); color: #111; font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 600; border: none; border-radius: var(--r-radius-md); cursor: pointer; transition: all var(--r-duration-fast); white-space: nowrap; }
.r-image-upload-btn:hover { background: var(--r-gold); color: var(--r-bg-deep); }
.r-image-upload-btn .material-symbols-outlined { font-size: 16px; }
.r-image-upload-btn.danger:hover { background: #ef4444; color: #fff; }

/* Uploading spinner overlay */
.r-image-upload-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--r-space-2); background: rgba(0, 0, 0, 0.7); z-index: 2; }
.r-image-upload-overlay-label { color: #fff; font-family: var(--r-font-body); font-size: var(--r-text-sm); }

/* Multi-image gallery (edit-mode of ProductEdit) */
.r-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--r-space-3); }
.r-gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--r-radius-md); overflow: hidden; background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); transition: all var(--r-duration-fast); }
.r-gallery-item:hover { border-color: var(--r-gold); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.r-gallery-item.is-main { border-color: var(--r-gold); box-shadow: 0 0 0 2px rgba(201, 160, 68, 0.25); }
.r-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-gallery-badge { position: absolute; top: var(--r-space-2); inset-inline-start: var(--r-space-2); display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--r-space-2); background: var(--r-gold); color: var(--r-bg-deep); font-family: var(--r-font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-radius: var(--r-radius-sm); z-index: 1; }
.r-gallery-badge .material-symbols-outlined { font-size: 12px; }
.r-gallery-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--r-space-2); padding: var(--r-space-2); background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity var(--r-duration-fast); }
.r-gallery-item:hover .r-gallery-actions { opacity: 1; }
.r-gallery-actions .r-image-upload-btn { padding: 5px var(--r-space-2); font-size: var(--r-text-2xs); }
.r-gallery-actions .r-image-upload-btn .material-symbols-outlined { font-size: 14px; }
/* Gallery ordering: position 1 is the main image, so the order controls stay visible
   (not hover-only) — on touch the hover overlay never appears at all. */
.r-gallery-item.is-dragging { opacity: 0.45; border-color: var(--r-gold); }
.r-gallery-item[draggable="true"] { cursor: grab; }
.r-gallery-order { position: absolute; inset-inline-start: var(--r-space-2); bottom: var(--r-space-2); z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(4px); }
.r-gallery-pos-input { width: 34px; height: 26px; padding: 0; appearance: textfield; -moz-appearance: textfield; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-family: var(--r-font-body); font-size: var(--r-text-xs); font-weight: 700; text-align: center; cursor: text; transition: border-color var(--r-duration-fast), background var(--r-duration-fast); }
.r-gallery-pos-input::-webkit-outer-spin-button, .r-gallery-pos-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.r-gallery-pos-input:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.r-gallery-pos-input:focus { outline: none; border-color: var(--r-gold); background: rgba(0, 0, 0, 0.55); }
.r-gallery-pos-input:disabled { opacity: 0.5; }
.r-gallery-order-total { font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: rgba(255, 255, 255, 0.75); }

/* Drop marker: a bar on the edge the dragged tile would land against, so the
   target is unambiguous when several tiles sit side by side. */
.r-gallery-item.is-drop-before, .r-gallery-item.is-drop-after { border-color: var(--r-gold); }
.r-gallery-item.is-drop-before::after, .r-gallery-item.is-drop-after::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: var(--r-gold); box-shadow: 0 0 10px 2px rgba(201, 160, 68, 0.85); z-index: 3; pointer-events: none; }
.r-gallery-item.is-drop-before::after { inset-inline-start: 0; }
.r-gallery-item.is-drop-after::after { inset-inline-end: 0; }

/* Touch devices get no :hover, which would leave Set main / Delete unreachable. */
@media (hover: none) {
    .r-gallery-actions { opacity: 1; inset: auto 0 0 0; padding-bottom: 52px; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); }
    /* Drag-and-drop is desktop-only, so on touch the position field is the whole
       reordering story — give it a real tap target. */
    .r-gallery-order { padding: 4px 10px 4px 4px; }
    .r-gallery-pos-input { width: 48px; height: 36px; font-size: var(--r-text-sm); }
    .r-gallery-order-total { font-size: var(--r-text-xs); }
}

.r-gallery-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; cursor: pointer; border: 1px dashed var(--r-border-subtle); border-radius: var(--r-radius-md); background: var(--r-bg-base); color: var(--r-text-muted); transition: all var(--r-duration-fast); padding: var(--r-space-3); text-align: center; }
.r-gallery-add:hover { border-color: var(--r-gold); color: var(--r-gold); background: rgba(201, 160, 68, 0.04); }
.r-gallery-add .material-symbols-outlined { font-size: 28px; }
.r-gallery-add-label { font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; }
.r-gallery-add-hint { font-size: 10px; color: var(--r-text-muted); }
.r-gallery-add.uploading { pointer-events: none; opacity: 0.7; }
.r-gallery-add.uploading .r-account-spinner { width: 24px; height: 24px; border-width: 2px; }

/* Saved-path indicator (shown below dropzone after a successful upload) */
.r-image-upload-path { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--r-space-2); font-size: var(--r-text-2xs); color: var(--r-text-muted); }
.r-image-upload-path .material-symbols-outlined { font-size: 13px; }
.r-image-upload-path code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--r-text-2xs); color: var(--r-text-secondary); }

/* Smart-assist inline buttons (shown next to field labels) */
.r-product-assist { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: auto; padding: 2px var(--r-space-2); background: transparent; color: var(--r-gold); font-family: var(--r-font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; border: 1px solid rgba(201, 160, 68, 0.3); border-radius: var(--r-radius-sm); cursor: pointer; transition: all var(--r-duration-fast); }
.r-product-assist:hover { background: rgba(201, 160, 68, 0.1); border-color: var(--r-gold); }
.r-product-assist .material-symbols-outlined { font-size: 13px; }
.r-product-assist-right { margin-inline-start: auto; }
/* Field labels become flex so the assist button can sit on the right */
.r-product-field label { display: flex; align-items: center; gap: var(--r-space-2); }

/* Live pricing warnings (rule-based inline hints) */
.r-product-price-warnings { margin-top: var(--r-space-3); padding-top: var(--r-space-3); border-top: 1px solid var(--r-border-subtle); display: flex; flex-direction: column; gap: var(--r-space-1); }
.r-product-price-warning { display: flex; align-items: center; gap: var(--r-space-2); padding: var(--r-space-2) var(--r-space-3); background: rgba(245, 158, 11, 0.08); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); border-radius: var(--r-radius-md); font-family: var(--r-font-body); font-size: var(--r-text-sm); }
.r-product-price-warning .material-symbols-outlined { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN ORDERS — status pills + totals + address
   ══════════════════════════════════════════════════════════════════════════ */
.r-orders-status { display: inline-flex; align-items: center; padding: 3px var(--r-space-3); border-radius: 999px; font-family: var(--r-font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap; }
.r-orders-status.pending { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.25); }
.r-orders-status.processing { color: #3b82f6; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); }
.r-orders-status.shipped { color: var(--r-gold); background: rgba(201, 160, 68, 0.12); border-color: rgba(201, 160, 68, 0.25); }
.r-orders-status.delivered { color: #22c55e; background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.25); }
.r-orders-status.cancelled { color: #ef4444; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); }

/* Pagination */
.r-orders-pagination { display: flex; align-items: center; justify-content: center; gap: var(--r-space-4); margin-top: var(--r-space-5); }
.r-orders-page-indicator { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); }

/* Order totals (below line items) */
.r-order-totals { display: flex; flex-direction: column; gap: 6px; margin-top: var(--r-space-4); padding-top: var(--r-space-4); border-top: 1px solid var(--r-border-subtle); max-width: 320px; margin-inline-start: auto; }
.r-order-total-row { display: flex; justify-content: space-between; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); }
.r-order-total-row > span:last-child { color: var(--r-text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.r-order-total-warn > span:last-child { color: #ef4444; }
.r-order-total-grand { padding-top: var(--r-space-2); margin-top: var(--r-space-1); border-top: 1px solid var(--r-border-subtle); font-family: var(--r-font-body); font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.r-order-total-grand > span:last-child { color: var(--r-gold); font-weight: 600; font-size: 1.25rem; }

/* Payment chip in orders list */
.r-orders-payment-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--r-space-2); font-size: var(--r-text-2xs); font-weight: 500; color: var(--r-text-secondary); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-sm); white-space: nowrap; }
.r-orders-payment-chip .material-symbols-outlined { font-size: 13px; }
.r-orders-payment-chip.voucher { color: #3b82f6; background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); }

/* Primary-accent action button (quick action in list rows) */
.r-products-action-primary { border-color: var(--r-gold); color: var(--r-gold); background: rgba(201, 160, 68, 0.06); }
.r-products-action-primary:hover { border-color: var(--r-gold); color: var(--r-bg-deep); background: var(--r-gold); }

/* Fulfillment pipeline (OrderDetail) */
.r-order-pipeline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r-space-2); margin-bottom: var(--r-space-4); padding: var(--r-space-3); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); overflow-x: auto; }
.r-order-pipeline-step { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.r-order-pipeline-step:not(:last-child)::after { content: ''; position: absolute; top: 9px; inset-inline-start: calc(50% + 14px); inset-inline-end: calc(-50% + 14px); height: 2px; background: var(--r-border-subtle); z-index: 0; }
.r-order-pipeline-step.done:not(:last-child)::after,
.r-order-pipeline-step.active:not(:last-child)::after { background: var(--r-gold); }
.r-order-pipeline-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--r-bg-surface); border: 2px solid var(--r-border-subtle); position: relative; z-index: 1; transition: all var(--r-duration-fast); }
.r-order-pipeline-step.done .r-order-pipeline-dot { background: var(--r-gold); border-color: var(--r-gold); }
.r-order-pipeline-step.done .r-order-pipeline-dot::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--r-text-2xs); color: var(--r-bg-deep); font-weight: 700; }
.r-order-pipeline-step.active .r-order-pipeline-dot { background: var(--r-gold); border-color: var(--r-gold); box-shadow: 0 0 0 4px rgba(201, 160, 68, 0.2); }
.r-order-pipeline-step.active .r-order-pipeline-dot::after { content: ''; position: absolute; inset: 4px; background: var(--r-bg-deep); border-radius: 50%; }
.r-order-pipeline-step.cancelled .r-order-pipeline-dot { background: #ef4444; border-color: #ef4444; }
.r-order-pipeline-step.cancelled .r-order-pipeline-dot::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--r-text-2xs); color: #fff; font-weight: 700; }
.r-order-pipeline-label { font-family: var(--r-font-body); font-size: var(--r-text-2xs); font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }
.r-order-pipeline-step.active .r-order-pipeline-label,
.r-order-pipeline-step.done .r-order-pipeline-label { color: var(--r-text-primary); }
.r-order-pipeline-time { font-size: 10px; color: var(--r-text-muted); text-align: center; white-space: nowrap; }

/* Row of transition action buttons — forward group left, Cancel isolated right */
.r-order-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-space-3); margin-top: var(--r-space-3); }
.r-order-actions-forward { display: flex; flex-wrap: wrap; gap: var(--r-space-2); flex: 1; min-width: 0; }
.r-order-actions-divider { width: 1px; align-self: stretch; background: var(--r-border-subtle); margin: 0 var(--r-space-2); }
.r-order-actions-cancel { display: flex; }
@media (max-width: 640px) {
    .r-order-actions-row { flex-direction: column; align-items: stretch; }
    .r-order-actions-divider { display: none; }
    .r-order-actions-forward, .r-order-actions-cancel { width: 100%; }
    .r-order-actions-forward .r-btn, .r-order-actions-cancel .r-btn { width: 100%; justify-content: center; }
}

/* Unified OrderTransitionDialog */
.r-order-dialog { display: flex; flex-direction: column; gap: var(--r-space-4); padding: var(--r-space-2) 0; }
.r-order-dialog-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--r-space-3); padding: var(--r-space-3) var(--r-space-4); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); }
.r-order-dialog-status-from, .r-order-dialog-status-to { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.r-order-dialog-status-label { font-size: 10px; font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.r-order-dialog-arrow .material-symbols-outlined { font-size: 20px; color: var(--r-gold); }

.r-order-dialog-summary { display: flex; align-items: center; gap: var(--r-space-2); padding: var(--r-space-2) var(--r-space-3); background: rgba(201, 160, 68, 0.05); border: 1px solid rgba(201, 160, 68, 0.15); border-radius: var(--r-radius-sm); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); }
.r-order-dialog-summary .material-symbols-outlined { font-size: 16px; color: var(--r-gold); }

.r-order-dialog-section { display: flex; flex-direction: column; gap: var(--r-space-3); }
.r-order-dialog-info { display: flex; align-items: flex-start; gap: var(--r-space-2); padding: var(--r-space-3); background: rgba(59, 130, 246, 0.06); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: var(--r-radius-md); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.5; }
.r-order-dialog-info .material-symbols-outlined { font-size: 18px; color: #3b82f6; flex-shrink: 0; }

/* Order address */
.r-order-address { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.7; display: flex; flex-direction: column; gap: 2px; }
.r-order-address-name { color: var(--r-text-primary); font-weight: 600; font-size: var(--r-text-base); margin-bottom: 2px; }
.r-order-address-phone { display: inline-flex; align-items: center; gap: var(--r-space-2); margin-top: var(--r-space-2); color: var(--r-text-muted); }
.r-order-address-phone .material-symbols-outlined { font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN USERS — role chips
   ══════════════════════════════════════════════════════════════════════════ */
.r-users-role-chip { display: inline-flex; align-items: center; padding: 3px var(--r-space-2); border-radius: var(--r-radius-sm); font-family: var(--r-font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid transparent; }
.r-users-role-superadmin { color: #ef4444; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); }
.r-users-role-admin { color: var(--r-gold); background: rgba(201, 160, 68, 0.12); border-color: rgba(201, 160, 68, 0.25); }
.r-users-role-moderator { color: #3b82f6; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.25); }
.r-users-role-member { color: #22c55e; background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.25); }
.r-users-role-user { color: var(--r-text-secondary); background: var(--r-bg-base); border-color: var(--r-border-subtle); }
/* Fallback for custom roles created in /admin/roles — without it they render as an invisible chip. */
.r-users-role-custom { color: var(--r-gold); background: rgba(201, 160, 68, 0.08); border-color: rgba(201, 160, 68, 0.30); }

/* User detail — multi-select role picker (roles are additive; permissions union across them) */
.r-role-picker { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding: var(--r-space-2); border: 1px solid var(--r-border); border-radius: var(--r-radius-lg); background: var(--r-bg-base); }
.r-role-picker .r-role-option { display: flex; align-items: flex-start; gap: var(--r-space-2); padding: var(--r-space-2); border: 1px solid transparent; border-radius: var(--r-radius-md); cursor: pointer; font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; color: var(--r-text-primary); text-transform: none; letter-spacing: normal; transition: background var(--r-duration-fast), border-color var(--r-duration-fast); }
.r-role-picker .r-role-option:hover { background: var(--r-bg-elevated); }
.r-role-picker .r-role-option.selected { background: rgba(201, 160, 68, 0.08); border-color: rgba(201, 160, 68, 0.30); }
.r-role-picker .r-role-option input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--r-gold); cursor: pointer; }
.r-role-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-role-option-name { display: flex; align-items: center; gap: var(--r-space-2); font-weight: 600; }
.r-role-option-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--r-gold); border: 1px solid rgba(201, 160, 68, 0.35); border-radius: 999px; padding: 1px 6px; }
.r-role-option-desc { font-size: var(--r-text-2xs); font-weight: 400; line-height: 1.4; color: var(--r-text-muted); }

/* User detail — commission breakdown grid */
.r-user-commission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-space-3); }
/* Three currency cells won't fit a phone — stack them. */
@media (max-width: 767px) { .r-user-commission-grid { grid-template-columns: 1fr; } }
.r-user-commission-cell { padding: var(--r-space-3); background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); }
.r-user-commission-label { font-family: var(--r-font-body); font-size: 10px; font-weight: 600; color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.r-user-commission-value { font-family: var(--r-font-body); font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--r-gold); font-weight: 500; margin-top: 2px; }

/* Minimal account footer (replaces public SiteFooter on account pages) */
.r-account-footer { border-top: 1px solid var(--r-border-subtle); padding: var(--r-space-4) clamp(1rem, 3vw, 2rem); margin-top: var(--r-space-8); background: var(--r-bg-base); }
.r-account-footer-inner { max-width: 1680px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--r-space-4); flex-wrap: wrap; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); }
.r-account-footer-copyright { font-size: 12px; }
.r-account-footer-links { display: flex; align-items: center; gap: var(--r-space-3); }
.r-account-footer-links a { color: var(--r-text-muted); text-decoration: none; transition: color var(--r-duration-fast); font-size: 12px; }
.r-account-footer-links a:hover { color: var(--r-gold); }
.r-account-footer-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--r-text-muted); opacity: 0.4; }
@media (max-width: 600px) { .r-account-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--r-space-2); } }

/* Account Settings page */
.r-settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--r-space-4); padding: var(--r-space-4) 0; border-bottom: 1px solid var(--r-border-subtle); }
.r-settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.r-settings-row:first-of-type { padding-top: var(--r-space-2); }
.r-settings-row-info { flex: 1; min-width: 0; }
.r-settings-row-label { font-family: var(--r-font-body); font-size: var(--r-text-base); font-weight: 600; color: var(--r-text-primary); }
.r-settings-row-help { font-size: 12px; color: var(--r-text-muted); margin-top: 2px; line-height: 1.4; }
/* flex-wrap so the language group (one nowrap button per language) takes a
   second line on a phone instead of running off the side — it is inline-flex
   with flex-shrink:0, so nothing else can absorb the width. */
.r-settings-toggle-group { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--r-bg-base); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md); padding: 3px; flex-shrink: 0; max-width: 100%; }
.r-settings-option { display: inline-flex; align-items: center; gap: 6px; padding: var(--r-space-2) var(--r-space-3); background: transparent; color: var(--r-text-muted); font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 500; border: none; border-radius: calc(var(--r-radius-md) - 3px); cursor: pointer; transition: all var(--r-duration-fast); white-space: nowrap; }
.r-settings-option:hover { color: var(--r-text-secondary); }
.r-settings-option.active { background: var(--r-bg-surface); color: var(--r-gold); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.r-settings-option .material-symbols-outlined { font-size: 16px; }
/* .r-settings-link-btn retired (B7 tranche 3) — migrated to .r-btn .r-btn-ghost .r-btn-sm. */
.r-settings-readonly { display: flex; flex-direction: column; gap: var(--r-space-2); }
.r-settings-readonly-row { display: flex; justify-content: space-between; padding: var(--r-space-2) 0; border-bottom: 1px solid var(--r-border-subtle); font-family: var(--r-font-body); font-size: var(--r-text-sm); }
.r-settings-readonly-row:last-child { border-bottom: none; }
.r-settings-readonly-row > span:first-child { color: var(--r-text-muted); }
.r-settings-readonly-value { color: var(--r-text-primary); font-weight: 500; }

/* Completion checklist */
.r-product-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r-space-2); }
.r-product-checklist li { display: flex; align-items: center; gap: var(--r-space-2); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); transition: color var(--r-duration-fast); }
.r-product-checklist li.done { color: var(--r-text-primary); }
.r-product-checklist li .material-symbols-outlined { font-size: 18px; color: var(--r-text-muted); }
.r-product-checklist li.done .material-symbols-outlined { color: #22c55e; }
.r-product-checklist-progress { height: 4px; background: var(--r-bg-base); border-radius: 999px; margin-top: var(--r-space-4); overflow: hidden; }
.r-product-checklist-bar { height: 100%; background: linear-gradient(90deg, var(--r-gold), #22c55e); border-radius: 999px; transition: width var(--r-duration-normal); }
.r-product-checklist-count { font-size: var(--r-text-2xs); color: var(--r-text-muted); margin-top: var(--r-space-2); text-align: end; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERITAGE STRIP — thin band under the hero. Keeps Jordan / Dead Sea /
   frankincense visible above the fold without competing with the hero CTA.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-heritage-strip { background: var(--r-bg-elevated); border-top: 1px solid var(--r-border-subtle); border-bottom: 1px solid var(--r-border-subtle); padding: var(--r-space-5) 0; position: relative; overflow: hidden; }
.r-heritage-strip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(201, 160, 68, 0.04), transparent); pointer-events: none; }
.r-heritage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--r-space-5) var(--r-space-8); }
.r-heritage-item { display: inline-flex; align-items: center; gap: var(--r-space-2); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); letter-spacing: 0.02em; white-space: nowrap; }
.r-heritage-icon { font-size: 22px; color: var(--r-gold); flex-shrink: 0; }
.r-heritage-label { font-weight: 500; }
@media (max-width: 768px) { .r-heritage-list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--r-space-2); scrollbar-width: none; } .r-heritage-list::-webkit-scrollbar { display: none; } .r-heritage-item { font-size: 13px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP BY CONCERN — 4-card grid mapping common skin/hair concerns to
   category pages. Replaces the multi-persona reach of the old carousel
   without autoplay. Each card behaves as a category entry-point.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-concerns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r-space-5); margin-top: var(--r-space-8); }
.r-concern-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-space-3); padding: var(--r-space-6); background: var(--r-bg-surface); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-xl); text-decoration: none; color: inherit; transition: transform var(--r-duration-normal), border-color var(--r-duration-normal), box-shadow var(--r-duration-normal); position: relative; overflow: hidden; }
.r-concern-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(201, 160, 68, 0.08), transparent 60%); opacity: 0; transition: opacity var(--r-duration-normal); pointer-events: none; }
.r-concern-card:hover { transform: translateY(-3px); border-color: var(--r-gold); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.25); }
.r-concern-card:hover::before { opacity: 1; }
.r-concern-icon { font-size: 32px; color: var(--r-gold); padding: var(--r-space-2); background: rgba(201, 160, 68, 0.08); border-radius: var(--r-radius-md, 8px); }
.r-concern-title { font-family: var(--r-font-display); font-size: var(--r-text-lg); font-weight: 500; color: var(--r-text-primary); margin: 0; line-height: 1.25; }
.r-concern-desc { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); line-height: 1.5; margin: 0; flex: 1; }
.r-concern-link { display: inline-flex; align-items: center; gap: var(--r-space-1); font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 600; color: var(--r-gold); margin-top: var(--r-space-2); transition: gap var(--r-duration-fast); }
.r-concern-link .material-symbols-outlined { font-size: 18px; transition: transform var(--r-duration-fast); }
.r-concern-card:hover .r-concern-link { gap: var(--r-space-2); }
.r-concern-card:hover .r-concern-link .material-symbols-outlined { transform: translateX(2px); }
[dir="rtl"] .r-concern-card:hover .r-concern-link .material-symbols-outlined { transform: translateX(-2px) scaleX(-1); }
[dir="rtl"] .r-concern-link .material-symbols-outlined { transform: scaleX(-1); }
@media (max-width: 1024px) { .r-concerns-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .r-concerns-grid { grid-template-columns: 1fr; gap: var(--r-space-4); } .r-concern-card { padding: var(--r-space-5); } }

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT FUNNEL — incremental fixes
   • Real payment-logo row in cart sidebar
   • Payment-method radio cards (replaces inline-styled <label>s in Checkout.razor)
   • Voucher block (replaces inline-styled success/error panels)
   • Mobile-collapsible order summary (uses native <details>)
   • Spacing helpers used to be inline `style="margin-top: ..."`
   • RTL arrow flip utility used across the funnel
   ═══════════════════════════════════════════════════════════════════════════ */

/* Real payment-logo row (cart sidebar) */
.r-cart-payment-logo { height: 22px; width: auto; opacity: 0.85; }
[data-theme="light"] .r-cart-payment-logo { filter: none; opacity: 1; }

/* RTL utility — flip directional arrows so back/forward read correctly */
[dir="rtl"] .r-arrow-rtl-flip { transform: scaleX(-1); display: inline-flex; }

/* Spacing helpers — replace inline `style="margin-top: var(--r-space-3)"` */
.r-checkout-alert-spaced { margin-top: var(--r-space-3); }
.r-checkout-review-desc-spaced { margin-top: var(--r-space-3); }

/* Payment-method radio cards (was inline styles using broken --r-color-* tokens) */
.r-pay-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--r-space-3); margin-top: var(--r-space-3); }
.r-pay-method { position: relative; display: flex; align-items: center; gap: var(--r-space-3); padding: var(--r-space-4); border: 1.5px solid var(--r-border-default); border-radius: var(--r-radius-lg, 12px); background: var(--r-bg-surface); cursor: pointer; transition: border-color var(--r-duration-fast), background var(--r-duration-fast), box-shadow var(--r-duration-fast); }
.r-pay-method:hover { border-color: var(--r-border-emphasis); }
.r-pay-method.is-selected { border-color: var(--r-gold); background: rgba(201, 160, 68, 0.06); box-shadow: 0 0 0 3px rgba(201, 160, 68, 0.12); }
.r-pay-method input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.r-pay-method-icon { font-size: 26px; color: var(--r-gold); flex-shrink: 0; }
.r-pay-method-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.r-pay-method-text strong { font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 600; color: var(--r-text-primary); }
.r-pay-method-sub { font-size: var(--r-text-xs); color: var(--r-text-muted); }
.r-pay-method-check { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--r-gold); opacity: 0; transition: opacity var(--r-duration-fast); }
.r-pay-method-check .material-symbols-outlined { font-size: 22px; }
.r-pay-method.is-selected .r-pay-method-check { opacity: 1; }
@media (max-width: 600px) { .r-pay-method-grid { grid-template-columns: 1fr; } }

/* Voucher block (was inline styles + hardcoded hex colours) */
.r-voucher-block { margin-top: var(--r-space-3); }
.r-voucher-input-row { display: flex; gap: var(--r-space-2); align-items: flex-start; }
.r-voucher-input { flex: 1; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; }
.r-voucher-validate-btn { white-space: nowrap; }
.r-voucher-result { display: flex; align-items: flex-start; gap: var(--r-space-2); margin-top: var(--r-space-2); padding: var(--r-space-3); border-radius: var(--r-radius-md, 10px); font-family: var(--r-font-body); font-size: var(--r-text-sm); line-height: 1.4; }
.r-voucher-result .material-symbols-outlined { flex-shrink: 0; margin-top: 2px; }
.r-voucher-result-ok { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25); color: #4ade80; }
.r-voucher-result-ok strong { color: #4ade80; }
.r-voucher-result-err { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); color: #f87171; }
.r-voucher-result-warn { color: #f87171; font-size: var(--r-text-xs); margin-top: 2px; }
.r-voucher-result-info { color: var(--r-text-secondary); font-size: var(--r-text-xs); margin-top: 2px; }

/* Mobile-collapsible order summary (uses native <details>; CSS forces open on desktop) */
.r-checkout-summary-collapsible { padding: 0; }
.r-checkout-summary-collapsible > .r-cart-summary-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--r-space-3); padding: var(--r-space-4) var(--r-space-5); cursor: pointer; list-style: none; user-select: none; }
.r-checkout-summary-collapsible > .r-cart-summary-summary::-webkit-details-marker { display: none; }
.r-checkout-summary-collapsible > .r-cart-summary-summary > .r-cart-summary-title { margin: 0; flex: 1; }
.r-checkout-summary-total-mobile { display: none; font-family: var(--r-font-body); font-weight: 600; color: var(--r-gold); }
.r-checkout-summary-chevron { display: none; transition: transform var(--r-duration-fast); color: var(--r-text-muted); }
.r-checkout-summary-collapsible[open] .r-checkout-summary-chevron { transform: rotate(180deg); }
/* Pad the children consistently with the original .r-cart-summary block */
.r-checkout-summary-collapsible > *:not(summary) { padding-left: var(--r-space-5); padding-right: var(--r-space-5); }
.r-checkout-summary-collapsible > *:last-child { padding-bottom: var(--r-space-5); }
@media (max-width: 900px) {
    /* On mobile, collapse by default and reveal the chevron + total on the summary line */
    .r-checkout-summary-total-mobile { display: inline-flex; }
    .r-checkout-summary-chevron { display: inline-flex; }
}
@media (min-width: 901px) {
    /* On desktop, the summary is opened by code (Razor sets [open]) and we
       just disable the toggle affordances so it can't be accidentally
       collapsed. CSS cannot force-open a <details> element on its own —
       the open attribute is the only thing that controls body visibility. */
    .r-checkout-summary-collapsible > .r-cart-summary-summary { cursor: default; pointer-events: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT RESULT (PaymentComplete.razor) — replaces the MudBlazor markup that
   used to ship here. Single centred card; spinner during processing, error
   state with action buttons otherwise.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-payment-result { padding: calc(80px + var(--r-space-8)) 0 var(--r-space-12); min-height: 70vh; display: flex; align-items: flex-start; justify-content: center; }
/* margin-inline is what actually centres the card: justify-content on .r-payment-result
   centres its flex child (.r-container), and the card is a plain block inside that
   container — so without this it hugs the container's inline-start edge on desktop. */
.r-payment-result-card { max-width: 520px; width: 100%; margin-inline: auto; padding: var(--r-space-10) var(--r-space-8); background: var(--r-bg-surface); border: 1px solid var(--r-border-default); border-radius: var(--r-radius-xl, 16px); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.5); }
.r-payment-result-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--r-space-3); }
.r-payment-result-icon { font-size: 56px; color: var(--r-gold); padding: var(--r-space-3); border-radius: 50%; background: rgba(201, 160, 68, 0.08); }
.r-payment-result-error .r-payment-result-icon { color: #f87171; background: rgba(239, 68, 68, 0.08); }
/* Captured-but-no-order: the customer's money is fine, only the order is missing — gold, not red. */
.r-payment-result-held .r-payment-result-icon { color: var(--r-gold); background: rgba(201, 160, 68, 0.1); }
.r-payment-result-notice { display: flex; align-items: flex-start; gap: var(--r-space-2); width: 100%; margin: 0 0 var(--r-space-2); padding: var(--r-space-3); background: rgba(201, 160, 68, 0.08); border: 1px solid rgba(201, 160, 68, 0.28); border-radius: var(--r-radius-md, 8px); font-family: var(--r-font-body); font-size: var(--r-text-sm); line-height: 1.5; color: var(--r-text-primary); text-align: start; }
.r-payment-result-notice .material-symbols-outlined { flex: 0 0 auto; font-size: 20px; color: var(--r-gold); }
.r-payment-result-ref { display: flex; flex-direction: column; align-items: center; gap: var(--r-space-1); width: 100%; padding: var(--r-space-3); background: var(--r-bg-base); border: 1px dashed var(--r-border-default); border-radius: var(--r-radius-md, 8px); }
.r-payment-result-ref-label { font-family: var(--r-font-body); font-size: var(--r-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--r-text-muted); }
/* Selectable, wraps on narrow screens — gateway ids are long and this is the one string
   the customer has to hand to support. direction:ltr keeps it readable under RTL. */
.r-payment-result-ref-value { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; font-size: var(--r-text-sm); color: var(--r-text-primary); word-break: break-all; user-select: all; }
.r-payment-result-title { font-family: var(--r-font-display); font-size: var(--r-text-2xl, 1.5rem); font-weight: 500; color: var(--r-text-primary); margin: 0; line-height: 1.3; }
.r-payment-result-text { font-family: var(--r-font-body); font-size: var(--r-text-base); color: var(--r-text-secondary); margin: 0 0 var(--r-space-4); line-height: 1.55; max-width: 420px; }
.r-payment-result-actions { display: flex; flex-direction: column; gap: var(--r-space-2); width: 100%; margin-top: var(--r-space-3); }
.r-payment-result-support-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--r-space-2); margin-top: var(--r-space-3); padding: var(--r-space-2); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-muted); text-decoration: none; transition: color var(--r-duration-fast); }
.r-payment-result-support-link:hover { color: var(--r-gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC CARD PAGES UNDER THE FIXED HEADER
   PublicLayout's .r-header is position:fixed and the layout adds no top
   offset, so every page root has to clear it itself — the shared idiom is
   `calc(80px + …)`. These three had no rule at all (or only styled their
   children), so their cards rendered underneath the header.
   ═══════════════════════════════════════════════════════════════════════════ */
/* VerifyEmail.razor + VerifyEmailLink.razor — OTP entry / magic-link landing */
.r-verify-page { padding: calc(80px + var(--r-space-8)) 0 var(--r-space-12); min-height: 70vh; }
/* PublicOrderDetails.razor — guest order tracking */
.r-public-order { padding: calc(80px + var(--r-space-8)) 0 var(--r-space-12); min-height: 70vh; }
/* StaticPage.razor (/faq, /shipping, /contact, /cookies, /careers, /press).
   It used to reference .renova-container/.renova-section from site.css, which
   App.razor never links — so the page had no container and no padding at all. */
.r-static-page { padding: calc(80px + var(--r-space-8)) 0 var(--r-space-16); min-height: 70vh; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT SUCCESS (CheckoutSuccess.razor) — full r-* rewrite of the page
   that confirms the order. Animated check mark, order block, delivery
   estimate, what's-next list, refer-a-friend, trust strip.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-success { padding: calc(80px + var(--r-space-8)) 0 var(--r-space-12); min-height: 80vh; display: flex; justify-content: center; align-items: flex-start; }
.r-success-card { max-width: 640px; width: 100%; padding: var(--r-space-10) var(--r-space-8); background: var(--r-bg-surface); border: 1px solid var(--r-border-default); border-radius: var(--r-radius-xl, 16px); box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.55); text-align: center; }
@media (max-width: 600px) { .r-success-card { padding: var(--r-space-6) var(--r-space-5); } }

/* Animated check mark */
.r-success-mark { display: flex; justify-content: center; margin-bottom: var(--r-space-5); }
.r-success-svg { width: 88px; height: 88px; }
.r-success-circle { stroke: var(--r-gold); stroke-width: 2.5; stroke-dasharray: 166; stroke-dashoffset: 166; animation: rSuccessCircle 0.65s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards; }
.r-success-check { stroke: var(--r-gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: rSuccessCheck 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; }
@keyframes rSuccessCircle { to { stroke-dashoffset: 0; } }
@keyframes rSuccessCheck { to { stroke-dashoffset: 0; } }

.r-success-title { font-family: var(--r-font-display); font-size: var(--r-text-3xl, 2rem); line-height: 1.15; font-weight: 500; color: var(--r-text-primary); margin: 0 0 var(--r-space-2); letter-spacing: 0.01em; }
.r-success-subtitle { font-family: var(--r-font-body); font-size: var(--r-text-lg); color: var(--r-gold); margin: 0 0 var(--r-space-6); }

.r-success-order { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--r-space-4) var(--r-space-5); margin: 0 auto var(--r-space-5); max-width: 360px; background: var(--r-bg-elevated); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md, 10px); }
.r-success-order-label { font-family: var(--r-font-body); font-size: var(--r-text-xs); color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.r-success-order-number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--r-text-xl); font-weight: 600; color: var(--r-text-primary); letter-spacing: 0.04em; }

/* inline-flex with no wrap ran past a 320px viewport once the delivery range
   text was spelled out ("Monday 1 – Thursday 4 September"). max-width + wrap
   keeps it inside the card on small phones. */
.r-success-delivery { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: var(--r-space-3); padding: var(--r-space-3) var(--r-space-5); margin-bottom: var(--r-space-5); background: rgba(201, 160, 68, 0.06); border: 1px solid rgba(201, 160, 68, 0.2); border-radius: var(--r-radius-md, 10px); }
.r-success-delivery-icon { font-size: 22px; color: var(--r-gold); }
.r-success-delivery-text { display: flex; flex-direction: column; align-items: flex-start; }
.r-success-delivery-label { font-family: var(--r-font-body); font-size: var(--r-text-xs); color: var(--r-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.r-success-delivery-range { font-family: var(--r-font-body); font-size: var(--r-text-base); font-weight: 500; color: var(--r-text-primary); }

.r-success-email { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); margin: 0 0 var(--r-space-6); line-height: 1.55; max-width: 480px; margin-left: auto; margin-right: auto; }

.r-success-next { padding: var(--r-space-5); margin-bottom: var(--r-space-6); background: var(--r-bg-elevated); border: 1px solid var(--r-border-subtle); border-radius: var(--r-radius-md, 10px); text-align: start; }
.r-success-next-title { font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 600; color: var(--r-text-primary); margin: 0 0 var(--r-space-3); text-transform: uppercase; letter-spacing: 0.08em; }
.r-success-next-list { list-style: none; margin: 0; padding: 0; counter-reset: rstep; display: flex; flex-direction: column; gap: var(--r-space-3); }
.r-success-next-list li { display: flex; align-items: center; gap: var(--r-space-3); font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); }
.r-success-next-list li .material-symbols-outlined { font-size: 20px; color: var(--r-gold); flex-shrink: 0; }

.r-success-actions { display: flex; flex-direction: column; gap: var(--r-space-2); margin-bottom: var(--r-space-6); }

/* Sign-in prompt — shown when a guest's email matched an existing account
   and we attached the order to it instead of throwing. Mirrors the refer
   block's layout so they don't fight each other if both render. */
.r-success-signin { display: flex; align-items: flex-start; gap: var(--r-space-3); padding: var(--r-space-5); margin-bottom: var(--r-space-6); background: var(--r-bg-elevated); border: 1px solid var(--r-border); border-radius: var(--r-radius-md, 10px); text-align: start; }
.r-success-signin-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--r-bg-surface); border: 1px solid var(--r-border); border-radius: 50%; color: var(--r-gold); flex-shrink: 0; }
.r-success-signin-icon .material-symbols-outlined { font-size: 22px; }
.r-success-signin-body { flex: 1; }
.r-success-signin-title { font-family: var(--r-font-display); font-size: var(--r-text-lg); font-weight: 500; color: var(--r-text-primary); margin: 0 0 4px; }
.r-success-signin-text { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); margin: 0 0 var(--r-space-3); line-height: 1.5; }

/* Refer-a-friend block — only shown for logged-in users with a code */
.r-success-refer { display: flex; align-items: flex-start; gap: var(--r-space-3); padding: var(--r-space-5); margin-bottom: var(--r-space-6); background: linear-gradient(135deg, rgba(201, 160, 68, 0.08), rgba(201, 160, 68, 0.03)); border: 1px solid rgba(201, 160, 68, 0.25); border-radius: var(--r-radius-md, 10px); text-align: start; }
.r-success-refer-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--r-gold); border-radius: 50%; color: var(--r-bg-deep); flex-shrink: 0; }
.r-success-refer-icon .material-symbols-outlined { font-size: 22px; }
.r-success-refer-body { flex: 1; }
.r-success-refer-title { font-family: var(--r-font-display); font-size: var(--r-text-lg); font-weight: 500; color: var(--r-text-primary); margin: 0 0 4px; }
.r-success-refer-text { font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-text-secondary); margin: 0 0 var(--r-space-3); line-height: 1.5; }

.r-success-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--r-space-5); padding-top: var(--r-space-5); border-top: 1px solid var(--r-border-subtle); }
.r-success-trust-item { display: inline-flex; align-items: center; gap: var(--r-space-1); font-family: var(--r-font-body); font-size: var(--r-text-xs); color: var(--r-text-muted); letter-spacing: 0.04em; }
.r-success-trust-item .material-symbols-outlined { font-size: 16px; color: var(--r-gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   HYPERPAY POLISH — extras the rewrite of HyperPayCheckout.razor relies on
   ═══════════════════════════════════════════════════════════════════════════ */
.r-pay-card-brand { height: 18px; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.r-pay-card-accept-label { padding: 0 var(--r-space-5); font-family: var(--r-font-body); font-size: var(--r-text-xs); color: rgba(255, 255, 255, 0.55); letter-spacing: 0.16em; text-transform: uppercase; }
.r-pay-card-detail-end { text-align: end; }

/* Skeleton placeholder while HyperPay's external script loads its iframes.
   Hidden once HyperPay injects form fields into #hyperpay-widget-container. */
.r-payment-widget-skeleton { display: flex; flex-direction: column; padding: var(--r-space-2) 0; }
.r-payment-widget-wrap:has(#hyperpay-widget-container > *) .r-payment-widget-skeleton { display: none; }

/* Total-to-pay header inside the form card (replaces the standalone bar
   that used to sit above the form). Top-aligns with the card visual on
   the left because the card's outer top edge is now also at row 0. */
.r-payment-widget-wrap { padding: 0; overflow: hidden; }
.r-payment-total-bar-inset { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; margin: 0; background: var(--r-bg-elevated); border: none; border-bottom: 1px solid var(--r-border-subtle); border-radius: 0; }
.r-payment-widget-wrap > #hyperpay-widget-container,
.r-payment-widget-wrap > .r-payment-widget-skeleton { padding: 24px; }

/* Kill stray empty containers HyperPay's template can leave after the
   submit button (the empty white rectangle visible below PAY NOW). */
.wpwl-form > div:empty,
.wpwl-form > .wpwl-group:empty,
.wpwl-button-pay ~ *:not(.wpwl-hint):not(.wpwl-group),
.wpwl-group-submit ~ div { display: none !important; }

/* ──────────────────────────────────────────────────────────────────────
   Blazor circuit-down banner (#blazor-error-ui)

   Blazor toggles `display: block` on this element when the SignalR
   connection drops. We override the default unstyled stripe with a
   Renova-branded toast pinned to the bottom of the viewport.

   Blazor's JS binds to the .reload and .dismiss class names — we keep
   them but rename the visual classes (r-circuit-error-*) so existing
   site CSS can style them independently.
   ────────────────────────────────────────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    box-shadow: none;
}
#blazor-error-ui .r-circuit-error-content,
#components-reconnect-modal .r-circuit-error-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 800px;
    margin: 0 auto 1rem;
    padding: 0.85rem 1rem;
    background: #2a1b00;
    color: #fff;
    border: 1px solid var(--r-gold, #c9a044);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    font-family: var(--r-font-body, 'DM Sans', sans-serif);
}
#blazor-error-ui .material-symbols-outlined,
#components-reconnect-modal .material-symbols-outlined { font-size: 1.5rem; color: var(--r-gold, #c9a044); }
#blazor-error-ui .r-circuit-error-text,
#components-reconnect-modal .r-circuit-error-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
#blazor-error-ui .r-circuit-error-text strong,
#components-reconnect-modal .r-circuit-error-text strong { font-size: 0.95rem; font-weight: 600; }
#blazor-error-ui .r-circuit-error-text span,
#components-reconnect-modal .r-circuit-error-text span { font-size: 0.85rem; color: rgba(255,255,255,0.75); }
#blazor-error-ui .r-circuit-error-btn,
#components-reconnect-modal .r-circuit-error-btn {
    padding: 0.4rem 0.9rem;
    background: var(--r-gold, #c9a044);
    color: #2a1b00;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
}
#blazor-error-ui .r-circuit-error-btn:hover,
#components-reconnect-modal .r-circuit-error-btn:hover { background: #b08a36; }
#blazor-error-ui .r-circuit-error-close {
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 0.5rem;
    text-decoration: none;
}
#blazor-error-ui .r-circuit-error-close:hover { color: #fff; }

/* ──────────────────────────────────────────────────────────────────────
   Blazor reconnect UI (#components-reconnect-modal)

   Driven entirely by Blazor's UserSpecifiedDisplay, which toggles the
   components-reconnect-* classes below (see wwwroot/js/blazor-reconnect.js
   for the full contract). On .NET 9 that display exposes exactly four
   mutually-exclusive classes — -show, -hide, -failed, -rejected — and no
   per-attempt class, so the escalation below is:

     (no class) / -hide  connected / recovered → invisible
     -show               reconnecting          → invisible for the first
                                                 GRACE period, then a quiet
                                                 pill; a 1s blip must not
                                                 flash UI, but a user staring
                                                 at dead buttons deserves to
                                                 know why
     -failed / -rejected unrecoverable         → branded banner with Reload

   The grace period is the animation-delay on r-reconnect-reveal rather than a
   JS timer: Blazor removes the class on recovery, which resets the animation
   for free and leaves no timer to cancel.

   Never use `display: none !important` on this element or on
   #blazor-error-ui: an important rule outranks the inline `display: block`
   the framework sets, which silently swallows the fatal-error banner.
   ────────────────────────────────────────────────────────────────────── */
#components-reconnect-modal { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 9999; text-align: center; }
#components-reconnect-modal .r-reconnect-pill,
#components-reconnect-modal .r-circuit-error-content { display: none; }

#components-reconnect-modal.components-reconnect-show { display: block; }
#components-reconnect-modal.components-reconnect-show .r-reconnect-pill {
    display: inline-flex;
    visibility: hidden;
    animation: r-reconnect-reveal 0s linear 2500ms forwards;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    padding: 0.5rem 0.9rem;
    background: #2a1b00;
    color: rgba(255,255,255,0.85);
    border: 1px solid var(--r-border, rgba(201,160,68,0.35));
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    font-family: var(--r-font-body, 'DM Sans', sans-serif);
    font-size: 0.82rem;
}
#components-reconnect-modal .r-reconnect-spinner {
    width: 0.85rem; height: 0.85rem; flex: none;
    border: 2px solid rgba(201,160,68,0.3);
    border-top-color: var(--r-gold, #c9a044);
    border-radius: 50%;
    animation: r-reconnect-spin 0.8s linear infinite;
}
@keyframes r-reconnect-spin { to { transform: rotate(360deg); } }
/* Not decorative — this is the grace-period gate, so it is exempt from the
   reduced-motion rule below. 0s duration + delay + forwards = a pure timer. */
@keyframes r-reconnect-reveal { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal .r-reconnect-spinner { animation: none; }
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal.components-reconnect-failed .r-circuit-error-content,
#components-reconnect-modal.components-reconnect-rejected .r-circuit-error-content { display: flex; text-align: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIER PRICE CHIP
   Marks a price the visitor gets from their tier (Partner / referred). Gold and
   quiet on purpose: this is a standing price, not a promotion, so it must not
   read as clearance the way the red .r-badge-sale does. Lives beside the price
   rather than over the image so it no longer competes with the merchandising
   badge — the two used to overwrite each other in a single badge slot.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-tier-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--r-space-2); background: var(--r-gold-glow); border: 1px solid var(--r-gold-border); border-radius: var(--r-radius-full); font-family: var(--r-font-body); font-size: 10px; font-weight: 700; line-height: 1.6; color: var(--r-gold); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.r-tier-chip .material-symbols-outlined { font-size: 12px; }

/* Price rows are flex and were single-line; let the chip wrap under the price
   instead of squeezing it on a ~375px card. */
.r-product-card-price, .r-product-price, .product-card-price, .r-package-card-price, .shop-home .pcard-price-row { flex-wrap: wrap; }

/* The home card's row is baseline-aligned for its numerals, which would drop the
   chip's border below the text baseline. */
.shop-home .pcard-price-row .r-tier-chip { align-self: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   REFERRAL WELCOME BAR + INVITED NOTE
   Shown to a visitor who arrived on a member's share link. Mobile-first: the
   layout below is the ~375px one (stacked, full-width buttons) and only becomes
   a single row at 768px, because most share links are opened from WhatsApp on a
   phone. Flex handles RTL on its own — no [dir] overrides needed.
   ═══════════════════════════════════════════════════════════════════════════ */
.r-referral-bar { background: var(--r-gold-glow); border-bottom: 1px solid var(--r-gold-border); }
.r-referral-bar-inner { position: relative; display: flex; flex-direction: column; gap: var(--r-space-3); max-width: 1200px; margin: 0 auto; padding: 14px 44px 14px 16px; }
.r-referral-bar-icon { display: none; color: var(--r-gold); font-size: 24px; flex-shrink: 0; }
.r-referral-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-referral-bar-text strong { font-family: var(--r-font-body); font-size: var(--r-text-sm); font-weight: 700; color: var(--r-gold); }
.r-referral-bar-text span { font-family: var(--r-font-body); font-size: var(--r-text-xs); line-height: 1.5; color: var(--r-text-secondary); }
.r-referral-bar-actions { display: flex; flex-wrap: wrap; gap: var(--r-space-2); }
.r-referral-bar-actions .r-btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.r-referral-bar-close { position: absolute; top: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: none; border-radius: var(--r-radius-full); color: var(--r-text-muted); cursor: pointer; }
.r-referral-bar-close:hover { background: var(--r-bg-elevated); color: var(--r-text-primary); }
.r-referral-bar-close .material-symbols-outlined { font-size: 18px; }

@media (min-width: 768px) {
    .r-referral-bar-inner { flex-direction: row; align-items: center; gap: var(--r-space-4); padding: 12px 48px; }
    .r-referral-bar-icon { display: block; }
    .r-referral-bar-text { flex: 1; }
    .r-referral-bar-actions { flex-wrap: nowrap; flex-shrink: 0; }
    .r-referral-bar-actions .r-btn { flex: 0 0 auto; }
    .r-referral-bar-close { top: 50%; transform: translateY(-50%); }
}

/* Register page: confirms the pre-filled referral code belongs to a real member. */
.r-invited-note { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 12px 14px; background: var(--r-gold-glow); border: 1px solid var(--r-gold-border); border-radius: 8px; }
.r-invited-note .material-symbols-outlined { flex-shrink: 0; font-size: 20px; color: var(--r-gold); }
.r-invited-note strong { display: block; font-family: var(--r-font-body); font-size: var(--r-text-sm); color: var(--r-gold); }
.r-invited-note p { margin: 2px 0 0; font-family: var(--r-font-body); font-size: var(--r-text-xs); line-height: 1.5; color: var(--r-text-secondary); }