/* ═══════════════════════════════════════════
   Stoling — AI-Powered Style Universe
   ═══════════════════════════════════════════ */
:root {
    --bg: #0a0a1e;
    --surface: rgba(255, 255, 255, .07);
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: rgba(255, 255, 255, .1);
    --accent: #6366f1;
    --accent2: #818cf8;
    --success: #10b981;
    --danger: #ef4444;
    --radius: 0.75rem;
    --shadow: 0 2px 8px rgba(0, 0, 0, .15), 0 4px 16px rgba(0, 0, 0, .08);

    /* ═══════════════════════════════════════════
       Homepage Design Match - Custom Properties
       ═══════════════════════════════════════════ */

    /* Background Colors */
    --homepage-bg-start: #0a0e1a;
    --homepage-bg-end: #1a1240;

    /* Accent Colors */
    --accent-purple-1: #7c3aed;
    --accent-purple-2: #a78bfa;
    --accent-pink: #ec4899;

    /* Card Colors */
    --card-bg: rgba(15, 18, 36, 0.85);
    --card-border: rgba(139, 92, 246, 0.3);
    --card-border-hover: rgba(139, 92, 246, 0.6);

    /* Effects */
    --glass-blur: blur(30px);
    --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    --card-shadow-hover: 0 25px 60px rgba(0, 0, 0, 0.7);

    /* Spacing */
    --grid-gap-mobile: 1rem;
    --grid-gap-tablet: 1.15rem;
    --grid-gap-desktop: 1.25rem;

    /* Transitions */
    --transition-fast: 200ms;
    --transition-medium: 350ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    font-size: 15px;
    scroll-behavior: smooth
}

@media(min-width:768px) {
    html {
        font-size: 16px
    }
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding-top: 72px;
    -webkit-font-smoothing: antialiased
}

/* Auth pages hide the navbar, so no top padding needed */
body.page-auth {
    padding-top: 0
}

/* Discover page — no extra body padding, discover-root handles it */
body.page-discover {
    padding-top: 0;
}

/* Discover is a full-screen React app with its own layered background; the
   shared footer (rendered by _Layout) clashes with the dark gradient and the
   embedded panels on Discover, so hide it the same way auth/profile/seller
   pages do. The chat widget and nav stay because they use translucent layers
   that blend correctly. */
body.page-discover .sc-footer {
    display: none;
}

/* ── NAV — Premium Dark Glass ──
   Two changes from the previous shape so the header stops blending into
   the page on dark surfaces (Shop, Feed, Profile):
   1. Stronger backdrop layer + a subtle gradient hairline at the bottom
      so there is always a visible boundary between header and content.
   2. A scroll-aware shadow (`.is-scrolled`) gets toggled by JS once the
      page is past ~12px — this is the same depth cue Stripe / Linear /
      Pinterest use so the header reads as "floating" rather than fused
      with the page background. */
.as-nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 1400px;
    z-index: 90;
    background: linear-gradient(180deg, rgba(8, 10, 24, 0.86), rgba(10, 13, 30, 0.78));
    backdrop-filter: blur(22px) saturate(220%);
    -webkit-backdrop-filter: blur(22px) saturate(220%);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.10),
        0 6px 28px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(139, 92, 246, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

/* Soft gradient hairline along the bottom of the bar — fades in/out
   from the brand violet so the boundary reads on both light and dark
   sections of the page. */
.as-nav::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(139, 92, 246, 0.55) 35%,
            rgba(236, 72, 153, 0.55) 65%,
            transparent);
    opacity: .45;
    pointer-events: none;
}

/* Activated by core.js once window scrollY > 12.
   The pop-out shadow is the depth cue that says "the header is on top of
   content" — without it, dark headers on dark pages read as flat. */
.as-nav.is-scrolled {
    background: linear-gradient(180deg, rgba(6, 8, 20, 0.92), rgba(8, 10, 26, 0.86));
    border-color: rgba(139, 92, 246, 0.28);
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.16),
        0 14px 46px rgba(0, 0, 0, 0.60),
        0 0 80px rgba(139, 92, 246, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.as-nav.is-scrolled::after {
    opacity: .8;
}

.as-nav-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.25rem
}

.as-logo {
    font-weight: 800;
    font-size: 1.45rem;
    text-decoration: none;
    color: #f1f5f9;
    letter-spacing: -.03em;
    display: flex;
    align-items: center;
    gap: .15rem;
    user-select: none;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.3)
}

.as-logo span {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4))
}

.as-nav-links {
    display: flex;
    align-items: center;
    gap: .2rem
}

.as-nav-group {
    display: flex;
    align-items: center;
    gap: .2rem
}

.as-nav-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .1);
    margin: 0 .5rem
}

.as-nav-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .65
}

.as-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all .25s ease;
    white-space: nowrap;
    position: relative
}

.as-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.15)
}

.as-nav-link:hover .as-nav-ico {
    opacity: 1
}

.as-nav-ico-only {
    padding: .5rem;
    border-radius: 12px;
    transition: all .25s ease
}

.as-nav-ico-only .as-nav-ico {
    width: 20px;
    height: 20px;
    opacity: .75
}

.as-nav-ico-only:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.1)
}

.as-nav-ico-only:hover .as-nav-ico {
    opacity: 1
}

.as-nav-signup {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff !important;
    padding: .5rem 1rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .25)
}

.as-nav-signup:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
    color: #fff !important
}

.as-nav-cart {
    position: relative
}

/* ─── Header utility cluster ─────────────────────────────────────────
   Holds search + auth CTAs + cart + notifications + avatar + lang switch.
   Sits flush right; primary nav fills the remaining space. */
.as-nav-utility {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    flex-wrap: nowrap
}

/* ── Header search ── */
.as-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
    max-width: 240px
}

.as-search-ico {
    position: absolute;
    left: .7rem;
    width: 14px;
    height: 14px;
    color: #64748b;
    pointer-events: none
}

.as-search-input {
    width: 100%;
    padding: .45rem .8rem .45rem 2rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    color: #e2e8f0;
    font-size: .82rem;
    font-family: inherit;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    outline: none;
}

.as-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35)
}

.as-search-input:focus {
    border-color: rgba(139, 92, 246, .55);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2)
}

.as-search-input::-webkit-search-cancel-button {
    appearance: none
}

/* ── Universal search dropdown ──────────────────────────────────────
   Three-group typeahead (products/users/brands) opened from the header
   search input. Mirrors the pattern social-commerce platforms use
   (Pinterest, Instagram). Width is generous so product titles + prices
   read on a single line; max-height + overflow keeps the panel inside
   the viewport on small laptops. */
.as-search {
    /* The form is the positioning context for the dropdown. */
    position: relative;
}

.as-search-clear {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .65);
    border-radius: 50%;
    line-height: 0;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}

.as-search-clear:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.as-search-suggest {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 420px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(10, 13, 30, 0.96), rgba(8, 10, 24, 0.94));
    border: 1px solid rgba(139, 92, 246, .22);
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, .10),
        0 18px 60px rgba(0, 0, 0, .55),
        0 0 80px rgba(139, 92, 246, .12);
    backdrop-filter: blur(22px) saturate(220%);
    -webkit-backdrop-filter: blur(22px) saturate(220%);
    padding: .65rem;
    z-index: 95;
    /* Hidden by default — the controller toggles `.is-open`. We use opacity
       + transform rather than display:none so the panel can animate. */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.as-search-suggest.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Stretch the panel to match the input + nav-utility cluster on small
   screens — a 420px panel from a 240px input looks balanced on desktop
   but cramped on a 760px viewport. */
@media (max-width: 900px) {
    .as-search-suggest {
        width: min(92vw, 420px);
        right: 0;
        left: auto;
    }
}

.as-search-state {
    padding: 1rem .75rem;
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.as-search-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(165, 180, 252, .25);
    border-top-color: #a5b4fc;
    animation: asSearchSpin .65s linear infinite;
    flex-shrink: 0;
}

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

.as-search-results {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.as-search-group+.as-search-group {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(139, 92, 246, .10);
}

.as-search-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .25rem .55rem .35rem;
}

.as-search-group-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #a5b4fc;
}

.as-search-group-more {
    font-size: .75rem;
    color: #c7d2fe;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
    display: inline-block;
}

.as-search-group-more:hover {
    color: #fff;
    transform: translateX(2px);
}

.as-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.as-search-item-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .55rem;
    border-radius: 10px;
    text-decoration: none;
    color: #e2e8f0;
    transition: background .15s ease, transform .15s ease;
    border: 1px solid transparent;
}

.as-search-item-link:hover,
.as-search-item-link.is-active {
    background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(99, 102, 241, .10));
    border-color: rgba(165, 180, 252, .28);
    color: #fff;
}

.as-search-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.as-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.as-search-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99, 102, 241, .35), rgba(236, 72, 153, .15));
    border: 1px solid rgba(165, 180, 252, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.as-search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.as-search-avatar-fallback {
    color: #c7d2fe;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
}

.as-search-brand-ico {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(251, 146, 60, .28), rgba(236, 72, 153, .15));
    border: 1px solid rgba(251, 146, 60, .35);
    color: #fdba74;
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.as-search-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.as-search-title {
    font-size: .85rem;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-search-sub {
    font-size: .72rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-search-price {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 700;
    color: #a5b4fc;
    font-variant-numeric: tabular-nums;
    margin-left: .35rem;
}

/* ── Notifications + cart badges ── */
.as-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 99px;
    background: linear-gradient(135deg, #ec4899, #ef4444);
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 8px rgba(236, 72, 153, .5)
}

.as-nav-notif {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px
}

.as-nav-notif:hover {
    background: rgba(139, 92, 246, 0.12)
}

.as-nav-notif-wrap {
    position: relative
}

.as-nav-avatar-wrap {
    position: relative
}

/* ── Generic dropdown (used by notif + avatar + lang) ── */
.as-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    min-width: 240px;
    padding: 6px;
    z-index: 999;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .2);
    animation: asDropdownIn .14s ease-out both;
}

.as-dropdown.is-open {
    display: block
}

@keyframes asDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.as-dropdown-header {
    padding: .55rem .7rem;
    color: #cbd5e1;
    font-size: .78rem
}

.as-dropdown-header strong {
    color: #f1f5f9;
    font-weight: 700
}

.as-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.375rem 0.75rem
}

.as-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    margin: 2px 0.25rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.as-dropdown-item:hover {
    background: rgba(139, 92, 246, 0.12);
    color: #ffffff
}

.as-dropdown-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(167, 139, 250, 0.6);
    opacity: 1
}

.as-dropdown-item:hover svg {
    opacity: 1
}

.as-dropdown-item--danger {
    color: rgba(239, 68, 68, 0.7)
}

.as-dropdown-item--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171
}

.as-dropdown-item--accent {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.08)
}

.as-dropdown-item--accent:hover {
    background: rgba(139, 92, 246, 0.18);
    color: #e9d5ff
}

/* Dropdown — language section (segmented control) */
.as-dropdown-section {
    padding: 8px 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem
}

.as-dropdown-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.1em;
    text-transform: uppercase
}

.as-dropdown-langs {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px;
    background: rgba(20, 25, 46, .7);
    border: 1px solid rgba(167, 139, 250, .18);
    border-radius: 8px
}

.as-dropdown-lang {
    min-width: 34px;
    padding: .3rem .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s
}

.as-dropdown-lang:hover {
    color: #fff;
    background: rgba(124, 58, 237, .18)
}

.as-dropdown-lang.is-active {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 4px 10px rgba(124, 58, 237, .35)
}

/* ── Notifications dropdown specifics ── */
.as-notif-dropdown {
    min-width: 320px;
    max-width: 360px
}

.as-notif-list {
    max-height: 340px;
    overflow-y: auto;
    padding: .2rem .3rem .4rem
}

.as-notif-empty {
    text-align: center;
    color: #64748b;
    font-size: .82rem;
    padding: 1.3rem .8rem 1.1rem;
    margin: 0;
}

.as-notif-item {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .55rem .65rem;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: .8rem;
    line-height: 1.4;
    transition: background .12s;
    cursor: pointer;
    position: relative;
}

.as-notif-item:hover {
    background: rgba(99, 102, 241, .1)
}

.as-notif-item-delete {
    position: absolute;
    top: .4rem;
    right: .4rem;
    background: none;
    border: none;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s, color .15s, background .15s;
}

.as-notif-item:hover .as-notif-item-delete {
    opacity: 1;
}

.as-notif-item-delete:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .1);
}

.as-notif-panel-actions {
    display: flex;
    gap: .5rem;
}

.as-notif-delete-all {
    background: none;
    border: none;
    color: #f87171;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background .15s;
}

.as-notif-delete-all:hover {
    background: rgba(239, 68, 68, .1);
}

.as-notif-item-icon {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .1rem
}

.as-notif-item-when {
    color: #64748b;
    font-size: .7rem;
    margin-top: .15rem
}

/* ── Avatar button + dropdown ── */
.as-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem .25rem .25rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 99px;
    cursor: pointer;
    transition: all .25s ease;
}

.as-avatar-btn:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(139, 92, 246, .4);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2)
}

.as-avatar-btn[aria-expanded=true] {
    background: rgba(139, 92, 246, .12);
    border-color: rgba(139, 92, 246, .5);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.25)
}

.as-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3)
}

.as-avatar-img:not([src]),
.as-avatar-img[src=""] {
    display: none
}

.as-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: .78rem;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    flex-shrink: 0;
}

.as-avatar-img[src=""]+.as-avatar-fallback,
.as-avatar-img:not([src])+.as-avatar-fallback {
    display: inline-flex
}

.as-avatar-img[src]:not([src=""])+.as-avatar-fallback {
    display: none
}

.as-avatar-chev {
    width: 12px;
    height: 12px;
    color: #94a3b8;
    transition: transform .2s
}

.as-avatar-btn[aria-expanded=true] .as-avatar-chev {
    transform: rotate(180deg)
}

.as-avatar-dropdown {
    background: rgba(15, 18, 36, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.08);
    min-width: 280px;
    padding: 0.5rem
}

.as-avatar-dropdown-head {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.25rem;
}

.as-avatar-dropdown-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.2);
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.as-avatar-dropdown-img:not([src]),
.as-avatar-dropdown-img[src=""] {
    display: none
}

.as-avatar-dropdown-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1
}

.as-avatar-dropdown-meta strong,
#nav-avatar-dropdown-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.as-avatar-dropdown-meta span,
#nav-avatar-dropdown-email {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.as-burger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px
}

.as-burger span {
    width: 18px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 2px;
    transition: all .2s
}

@media(max-width:767px) {
    .as-burger {
        display: flex
    }

    .as-nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: rgba(10, 10, 30, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        flex-direction: column;
        padding: 1rem;
        gap: .25rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
    }

    .as-nav-links.is-open {
        display: flex
    }

    .as-nav-group {
        flex-direction: column;
        width: 100%;
        gap: .25rem
    }

    .as-nav-link {
        width: 100%;
        padding: .6rem .8rem
    }

    .as-nav-divider {
        width: 100%;
        height: 1px;
        margin: .4rem 0
    }

    .as-nav-utility {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-left: 0;
        gap: .5rem
    }

    .as-search {
        width: 100%;
        max-width: 100%
    }

    .as-nav-user-group {
        flex-direction: row;
        justify-content: space-between;
        width: 100%
    }

    .as-dropdown {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: .4rem
    }

    .as-avatar-btn {
        width: 100%;
        justify-content: center
    }

    /* ── Mobile notification dropdown ─────────────────────────────────
       Make the notification panel full-width, increase max-height so
       the "View All" footer link is always visible and tappable. */
    .as-notif-dropdown {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .as-notif-list {
        max-height: 50vh;
    }

    .as-notif-panel-footer {
        display: block;
        text-align: center;
        padding: .75rem;
        color: #a5b4fc;
        font-size: .85rem;
        font-weight: 600;
        text-decoration: none;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    /* ── Mobile avatar/guest menu as a bottom sheet ──────────────────────
       On mobile the avatar dropdown (which holds Profile, Orders, Logout and
       "Log out from all devices") used to be trapped inside the horizontal
       icon row and rendered off-screen/cramped, so logout buttons were not
       reachable. Render the open menu as a full-width bottom sheet so every
       item — including Logout / Log out all — is always visible and tappable. */
    .as-nav-user-group {
        flex-wrap: wrap;
    }

    .as-avatar-dropdown.is-open,
    .as-guest-dropdown.is-open {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-height: 80vh;
        overflow-y: auto;
        margin: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
        z-index: 4000;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Bigger, finger-friendly rows inside the mobile sheet. */
    .as-avatar-dropdown.is-open .as-dropdown-item,
    .as-guest-dropdown.is-open .as-dropdown-item {
        padding: .85rem 1rem;
        font-size: .95rem;
    }
}

@media(max-width:1100px) and (min-width:768px) {
    .as-search {
        width: 160px
    }
}

/* ── LANG SWITCHER ── */
.as-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: .4rem;
    padding: 2px;
    background: rgba(20, 25, 46, .7);
    border: 1px solid rgba(167, 139, 250, .16);
    border-radius: 99px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.as-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 .55rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 99px;
    transition: all .18s
}

.as-lang-btn:hover {
    color: #f1f5f9;
    background: rgba(167, 139, 250, .10)
}

.as-lang-btn.is-active {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 4px 10px rgba(124, 58, 237, .35)
}

/* ── MAIN / FOOTER ── */
.as-main {
    min-height: calc(100vh - 140px);
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem
}

.as-footer {
    background: linear-gradient(145deg, #1e293b, #1e1b4b);
    color: #94a3b8;
    padding: 2.5rem 1.25rem;
    margin-top: 0;
    border-top: 1px solid rgba(99, 102, 241, .1)
}

.as-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.as-footer-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff
}

.as-footer-brand span {
    color: var(--accent2)
}

.as-footer-links {
    display: flex;
    gap: 1.2rem
}

.as-footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: .85rem
}

.as-footer-links a:hover {
    color: #fff
}

.as-footer-copy {
    font-size: .78rem;
    color: #475569;
    width: 100%;
    text-align: center;
    margin-top: .5rem
}

/* ── UTILITY ── */
.as-section {
    margin-bottom: 2.5rem
}

.as-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #f1f5f9
}

.as-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.as-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em
}

.as-badge-dark {
    background: var(--accent);
    color: #fff
}

.as-badge-light {
    background: #f1f5f9;
    color: var(--muted)
}

.as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.2rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: .88rem;
    border: none;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none
}

.as-btn-primary {
    background: var(--accent);
    color: #fff
}

.as-btn-primary:hover {
    background: #1e293b;
    color: #fff
}

.as-btn-outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text)
}

.as-btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.as-btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff
}

.as-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff
}

.as-btn-accent {
    background: var(--accent2);
    color: #fff
}

.as-btn-accent:hover {
    background: #4f46e5;
    color: #fff
}

.as-btn-lg {
    padding: .75rem 1.6rem;
    font-size: 1rem
}

.as-btn-sm {
    padding: .35rem .8rem;
    font-size: .78rem
}

.as-status {
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: .8rem
}

.flex-fill {
    flex: 1 1 auto
}

.w-100 {
    width: 100%
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: 1rem
}

.mb-2 {
    margin-bottom: .5rem
}

.d-none {
    display: none !important
}

.d-flex {
    display: flex
}

.gap-2 {
    gap: .5rem
}

/* ═══════════════════════════════════════════
   HOME — Premium Hero + Sections (Linear / Stripe quality)
   Layout: hero (text + AI Style Core), trending grid, for-you grid
   ═══════════════════════════════════════════ */

/* Active nav-link state (used on every page) */
.as-nav-link.is-active {
    color: #fff;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.35), 0 0 24px rgba(139, 92, 246, 0.1), inset 0 0 8px rgba(139, 92, 246, 0.08);
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.4)
}

.as-nav-link.is-active .as-nav-ico {
    opacity: 1;
    color: #c4b5fd;
    filter: drop-shadow(0 0 4px rgba(196, 181, 253, 0.5))
}

/* Tokens */
:root {
    --hh-bg: #0a0a1e;
    --hh-card: linear-gradient(165deg, rgba(22, 27, 49, .78), rgba(15, 18, 36, .72));
    --hh-border: rgba(148, 163, 255, .10);
    --hh-acc-1: #7c3aed;
    --hh-acc-2: #6366f1;
    --hh-acc-3: #a78bfa;
    --hh-pink: #f472b6;
    --hh-ease: cubic-bezier(.22, 1, .36, 1)
}

.page-home {
    background: var(--hh-bg);
    position: relative
}

.page-home .as-main {
    max-width: none;
    padding: 0
}

/* ═══ HERO ═══ */
.hh-section {
    position: relative;
    width: 92%;
    max-width: 1400px;
    margin: 1rem auto .5rem;
    padding: 1.5rem 1.5rem 2rem;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(124, 58, 237, .30) 0%, transparent 50%),
        radial-gradient(circle at 88% 70%, rgba(99, 102, 241, .24) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(56, 40, 124, .50) 0%, transparent 70%),
        linear-gradient(135deg, var(--homepage-bg-start) 0%, var(--homepage-bg-end) 100%);
    border: 1px solid rgba(167, 139, 250, .16);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 1px 2px rgba(0, 0, 0, .3),
        0 24px 60px rgba(15, 11, 40, .55),
        0 0 80px rgba(124, 58, 237, .12)
}

@media(min-width:768px) {
    .hh-section {
        padding: 2.5rem 2.5rem 2.75rem
    }
}

@media(min-width:1024px) {
    .hh-section {
        padding: 3rem 3.25rem 3.25rem;
        /* Tall but not full viewport — leave room to hint at content below */
        min-height: min(85vh, 780px);
        display: flex;
        align-items: center;
        justify-content: center
    }
}

/* Backdrop layers */
.hh-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

/* ═══ Multi-Layer Background System ═══ */
/* Background Layer 1 - Deep purple base with slow rotation */
.hh-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
    will-change: transform, opacity;
}

.hh-bg-layer--1 {
    background: radial-gradient(circle at 25% 35%,
            #1a1240 0%,
            #0f0e1f 35%,
            #0a0e1a 70%,
            transparent 100%);
    mix-blend-mode: multiply;
    animation: hhBgLayerRotate1 25s ease-in-out infinite;
}

.hh-bg-layer--2 {
    background: radial-gradient(ellipse at 75% 60%,
            #1a1240 0%,
            #12102a 30%,
            #0a0e1a 65%,
            transparent 100%);
    mix-blend-mode: overlay;
    opacity: 0.7;
    animation: hhBgLayerRotate2 30s ease-in-out infinite -10s;
}

.hh-bg-layer--3 {
    background: radial-gradient(circle at 50% 80%,
            #1a1240 0%,
            #0e0c20 40%,
            #0a0e1a 75%,
            transparent 100%);
    mix-blend-mode: screen;
    opacity: 0.6;
    animation: hhBgLayerRotate3 20s ease-in-out infinite -5s;
}

/* Background layer animations - subtle movement */
@keyframes hhBgLayerRotate1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.85;
    }

    33% {
        transform: translate(3%, -2%) scale(1.05) rotate(5deg);
        opacity: 0.9;
    }

    66% {
        transform: translate(-2%, 3%) scale(0.98) rotate(-3deg);
        opacity: 0.8;
    }
}

@keyframes hhBgLayerRotate2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.7;
    }

    40% {
        transform: translate(-3%, 2%) scale(1.08) rotate(-8deg);
        opacity: 0.75;
    }

    80% {
        transform: translate(2%, -3%) scale(0.95) rotate(4deg);
        opacity: 0.65;
    }
}

@keyframes hhBgLayerRotate3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.6;
    }

    50% {
        transform: translate(2%, 2%) scale(1.1) rotate(10deg);
        opacity: 0.7;
    }
}

.hh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    z-index: 2;
}

.hh-blob--1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(124, 58, 237, .4), transparent 60%);
    top: -25%;
    left: -10%;
    animation: hhBlobFloat 22s ease-in-out infinite
}

.hh-blob--2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(99, 102, 241, .32), transparent 60%);
    bottom: -20%;
    right: -8%;
    animation: hhBlobFloat 22s ease-in-out infinite -7s
}

.hh-blob--3 {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(167, 139, 250, .30), transparent 60%);
    top: 25%;
    right: 32%;
    animation: hhBlobFloat 22s ease-in-out infinite -14s
}

.hh-grid {
    position: absolute;
    inset: 0;
    opacity: .18;
    z-index: 2;
    background-image:
        linear-gradient(rgba(167, 139, 250, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167, 139, 250, .10) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%)
}

@keyframes hhBlobFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(40px, -30px) scale(1.08)
    }
}

.hh-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: center;
    width: 100%
}

@media(min-width:768px) {
    .hh-inner {
        /* Tablet: 60-40 width ratio for text-visual columns */
        grid-template-columns: 60fr 40fr;
        gap: 2rem
    }
}

@media(min-width:1024px) {
    .hh-inner {
        /* Desktop: 50-50 width ratio for balanced two-column layout */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4rem
    }
}

/* ─── LEFT: copy column ─── */
.hh-text {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    color: #f9fafb
}

.hh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    padding: .45rem .85rem .45rem .55rem;
    background: rgba(124, 58, 237, .14);
    border: 1px solid rgba(167, 139, 250, .30);
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: #c4b5fd;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 22px rgba(124, 58, 237, .18), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.hh-eyebrow-spark {
    color: #a78bfa;
    font-size: .85rem;
    text-shadow: 0 0 12px rgba(167, 139, 250, .7);
    animation: hhSparklePulse 2.4s ease-in-out infinite
}

@keyframes hhSparklePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0)
    }

    50% {
        opacity: .55;
        transform: scale(1.18) rotate(20deg)
    }
}

.hh-title {
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-shadow: 0 2px 32px rgba(124, 58, 237, .16)
}

.hh-title-accent {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 40%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hh-sub {
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    max-width: 40ch;
    margin: 0;
    letter-spacing: .005em
}

/* CTAs */
.hh-ctas {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .8rem
}

.hh-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.7rem;
    min-height: 44px;
    min-width: 44px;
    border-radius: 99px;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .005em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    overflow: hidden;
    transition: transform var(--transition-fast) var(--ease-out-expo),
        box-shadow var(--transition-fast) var(--ease-out-expo),
        filter var(--transition-fast) var(--ease-out-expo),
        background var(--transition-fast) var(--ease-out-expo)
}

.hh-cta--primary {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .22) inset,
        0 10px 24px rgba(124, 58, 237, .45),
        0 0 25px rgba(124, 58, 237, 0.3),
        0 0 0 1px rgba(167, 139, 250, .30)
}

.hh-cta--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-22deg);
    pointer-events: none
}

.hh-cta--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .28) inset,
        0 16px 36px rgba(124, 58, 237, .65),
        0 0 0 1px rgba(167, 139, 250, .45),
        0 0 50px rgba(124, 58, 237, .4)
}

.hh-cta--primary:hover::after {
    animation: hhShine .9s var(--hh-ease)
}

@keyframes hhShine {
    0% {
        transform: translateX(-100%) skewX(-22deg)
    }

    100% {
        transform: translateX(420%) skewX(-22deg)
    }
}

.hh-cta--secondary {
    background: rgba(255, 255, 255, .06);
    color: var(--text-secondary);
    border: 1.5px solid rgba(124, 58, 237, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 18px rgba(15, 11, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.hh-cta--secondary:hover {
    transform: translateY(-2px);
    color: #fff;
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.7);
    box-shadow: 0 12px 28px rgba(124, 58, 237, .22), inset 0 1px 0 rgba(255, 255, 255, .10)
}

.hh-cta-icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45))
}

.hh-cta-svg {
    width: 16px;
    height: 16px;
    opacity: .92
}

/* Stats */
.hh-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.hh-stat {
    display: flex;
    align-items: center;
    gap: .7rem
}

.hh-stat-ico {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, .14);
    border: 1px solid rgba(167, 139, 250, .28);
    color: #c4b5fd;
    box-shadow: 0 0 18px rgba(124, 58, 237, .18), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.hh-stat-ico svg {
    width: 18px;
    height: 18px
}

.hh-stat-meta {
    display: flex;
    flex-direction: column
}

.hh-stat-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.015em;
    line-height: 1.1
}

.hh-stat-label {
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .005em;
    margin-top: .05rem
}

/* ─── RIGHT: AI Style Core (replaces mannequin) ─── */
.hh-visual {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Enable absolute positioning for child elements (DNA helix, AI cards) */
    isolation: isolate
}

@media(min-width:1024px) {
    .hh-visual {
        min-height: 520px
    }
}

/* Decorative sparkles */
.hh-sparkle {
    position: absolute;
    color: rgba(167, 139, 250, .6);
    font-size: .85rem;
    pointer-events: none;
    text-shadow: 0 0 12px rgba(167, 139, 250, .7);
    animation: hhSparkleDrift 4s ease-in-out infinite
}

.hh-sparkle--1 {
    top: 8%;
    left: 18%;
    animation-delay: 0s;
    font-size: .7rem;
    color: rgba(244, 114, 182, .7)
}

.hh-sparkle--2 {
    top: 15%;
    right: 12%;
    animation-delay: -1.2s
}

.hh-sparkle--3 {
    top: 48%;
    left: 6%;
    animation-delay: -2.5s;
    font-size: .65rem
}

.hh-sparkle--4 {
    bottom: 30%;
    right: 8%;
    animation-delay: -3.4s;
    font-size: .95rem;
    color: rgba(244, 114, 182, .6)
}

.hh-sparkle--5 {
    bottom: 18%;
    left: 22%;
    animation-delay: -1.8s;
    font-size: .75rem
}

.hh-sparkle--6 {
    top: 32%;
    right: 30%;
    animation-delay: -0.7s;
    font-size: .7rem;
    color: rgba(244, 114, 182, .55)
}

@keyframes hhSparkleDrift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: .6
    }

    50% {
        transform: translate(8px, -12px) scale(1.18);
        opacity: 1
    }
}

/* ═══════════════════════════════════════════
   HERO PRODUCT SHOWCASE CARD
   Main container for DNA helix visualization
   ═══════════════════════════════════════════ */

/* Scene Container - holds DNA and will hold AI cards */
.hh-scene-container {
    position: relative;
    width: 100%;
    max-width: 720px;
    min-height: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 1;
}

/* ═══════════════════════════════════════════
   Holographic Base Platform
   Multiple concentric glowing rings with filled center glow,
   vertical beam effect, purple/violet theme
   ═══════════════════════════════════════════ */
.hh-platform {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) perspective(600px) rotateX(78deg);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Filled center glow — soft circular light */
.hh-platform-glow {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(124, 58, 237, 0.4) 0%,
            rgba(168, 85, 247, 0.25) 40%,
            rgba(192, 132, 252, 0.1) 70%,
            transparent 100%);
    filter: blur(8px);
    animation: hhPlatformPulse 4s ease-in-out infinite;
}

/* Ring 1 — outermost, thin solid */
.hh-platform-ring--1 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.5);
    box-shadow:
        0 0 15px rgba(124, 58, 237, 0.3),
        0 0 30px rgba(124, 58, 237, 0.15),
        inset 0 0 15px rgba(124, 58, 237, 0.1);
}

/* Ring 2 — dotted */
.hh-platform-ring--2 {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px dashed rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

/* Ring 3 — solid, brighter */
.hh-platform-ring--3 {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    border: 1.5px solid rgba(192, 132, 252, 0.5);
    box-shadow:
        0 0 12px rgba(192, 132, 252, 0.3),
        0 0 25px rgba(192, 132, 252, 0.15);
}

/* Ring 4 — innermost, thin dotted */
.hh-platform-ring--4 {
    position: absolute;
    inset: 42%;
    border-radius: 50%;
    border: 1px dotted rgba(167, 139, 250, 0.45);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.2);
}

/* Vertical beam from center — subtle hologram effect */
.hh-platform-beam {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 120px;
    background: linear-gradient(to top,
            rgba(124, 58, 237, 0.15) 0%,
            rgba(124, 58, 237, 0.05) 50%,
            transparent 100%);
    filter: blur(12px);
    pointer-events: none;
    animation: hhBeamPulse 3s ease-in-out infinite;
}

/* Platform pseudo-elements — remove old ones */
.hh-platform::before,
.hh-platform::after {
    display: none;
}

.hh-scene-container::after {
    display: none;
}

@keyframes hhPlatformPulse {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes hhBeamPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* DNA Container */
.hh-dna-container {
    position: relative;
    width: 60%;
    max-width: 320px;
    height: 100%;
    min-height: 420px;
    overflow: visible;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Three.js Canvas */
.hh-dna-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 420px;
    display: block !important;
    position: relative;
    z-index: 4;
}

.hh-dna-glow {
    display: none;
}

@keyframes hhDnaGlowPulse {

    0%,
    100% {
        opacity: 0.85;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) rotate(180deg);
    }
}

.hh-scene-container:hover .hh-dna-glow {
    animation-duration: 2.5s;
    filter: blur(55px);
    /* Slightly increased blur on hover, but not too much */
}

/* BACKGROUND BEHIND DNA: Keep mostly dark, only subtle glow around DNA */
/* REMOVED - no background behind DNA */
.hh-dna-container::before {
    display: none;
}

@keyframes hhDnaAmbientGlow {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

/* Subtle depth effect - DNA edges stay sharp and visible */
.hh-dna-container::after {
    content: '';
    position: absolute;
    inset: -5%;
    border-radius: 50%;
    /* CRITICAL: Very low opacity - ensure DNA edges stay sharp */
    background: radial-gradient(circle, transparent 40%, rgba(124, 58, 237, 0.08) 70%, rgba(236, 72, 153, 0.10) 100%);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
}

/* ═══════════════════════════════════════════
   DNA HELIX FALLBACK (Non-WebGL browsers)
   Static SVG fallback when WebGL is unavailable
   ═══════════════════════════════════════════ */

.hh-dna-fallback {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    /* Same as DNA canvas */
}

.hh-dna-fallback-image {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
}

.hh-dna-fallback-image svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.5)) drop-shadow(0 0 40px rgba(236, 72, 153, 0.3));
}

/* Subtle animation for fallback to maintain visual interest */
@keyframes hhFallbackPulse {

    0%,
    100% {
        opacity: 0.9;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.hh-dna-fallback-image {
    animation: hhFallbackPulse 4s ease-in-out infinite;
}

/* AI Cards will be added in Phase 5 */

/* ─── Premium 3D Holographic Fashion Mannequin ─── */
.holo-mannequin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 5;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.holo-mannequin--active {
    opacity: 1;
}

/* Holographic backdrop rings */
.holo-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.holo-backdrop-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, 0.3);
    animation: holoRingPulse 4s ease-in-out infinite;
}

.holo-backdrop-ring--1 {
    width: 100%;
    height: 100%;
    animation-delay: 0s;
}

.holo-backdrop-ring--2 {
    width: 85%;
    height: 85%;
    border-color: rgba(99, 102, 241, 0.25);
    animation-delay: -1.3s;
}

.holo-backdrop-ring--3 {
    width: 70%;
    height: 70%;
    border-color: rgba(167, 139, 250, 0.2);
    animation-delay: -2.6s;
}

@keyframes holoRingPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.6;
    }
}

/* Particle field */
.holo-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.holo-particle {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    animation: holoParticleFloat 6s ease-in-out infinite;
}

@keyframes holoParticleFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 0.8;
    }
}

/* Main mannequin body */
.holo-mannequin-body {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: holoRotate 20s linear infinite;
}

@keyframes holoRotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* Holographic scan lines */
.holo-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(167, 139, 250, 0.03) 0px,
            rgba(167, 139, 250, 0.03) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    animation: holoScan 3s linear infinite;
}

@keyframes holoScan {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}

/* Mannequin silhouette */
.holo-silhouette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 80%;
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.6)) drop-shadow(0 0 60px rgba(99, 102, 241, 0.4));
}

.holo-silhouette svg {
    width: 100%;
    height: 100%;
}

/* Energy field rings */
.holo-energy-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.holo-energy-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid;
    opacity: 0;
    animation: holoEnergyPulse 3s ease-in-out infinite;
}

@keyframes holoEnergyPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* DNA helix overlay */
.holo-dna-helix {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    opacity: 0.4;
    pointer-events: none;
}

.holo-dna-strand {
    stroke-linecap: round;
    animation: holoDNAFlow 8s ease-in-out infinite;
}

.holo-dna-strand--1 {
    animation-delay: 0s;
}

.holo-dna-strand--2 {
    animation-delay: -4s;
}

@keyframes holoDNAFlow {

    0%,
    100% {
        stroke-dasharray: 10 5;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 10 5;
        stroke-dashoffset: 30;
    }
}

/* Level badge */
.holo-level-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
}

.holo-level-badge-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(99, 102, 241, 0.2));
    border: 2px solid rgba(167, 139, 250, 0.5);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4),
        inset 0 0 20px rgba(167, 139, 250, 0.2);
}

.holo-level-number {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.8);
    line-height: 1;
}

.holo-level-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #c4b5fd;
    text-transform: uppercase;
    margin-top: 2px;
}

.holo-level-pulse {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.6);
    animation: holoLevelPulse 2s ease-in-out infinite;
}

@keyframes holoLevelPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Status indicators */
.holo-status-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.holo-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.holo-status-dot--active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    animation: holoStatusBlink 2s ease-in-out infinite;
}

.holo-status-dot--active:nth-child(2) {
    animation-delay: -0.7s;
}

.holo-status-dot--active:nth-child(3) {
    animation-delay: -1.4s;
}

@keyframes holoStatusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Holographic text overlay */
.holo-text-overlay {
    position: absolute;
    top: 30px;
    left: 30px;
    pointer-events: none;
}

.holo-text-line {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(203, 213, 225, 0.6);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
    margin-bottom: 4px;
}

.holo-text-line--accent {
    font-size: 14px;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Responsive */
@media(min-width:1024px) {
    .holo-mannequin {
        width: 550px;
        height: 550px;
    }
}

@media(max-width:1023px) {
    .holo-mannequin {
        width: 420px;
        height: 420px;
    }

    .holo-level-badge {
        width: 60px;
        height: 60px;
        top: 15px;
        right: 15px;
    }

    .holo-level-number {
        font-size: 20px;
    }
}

@media(max-width:639px) {
    .holo-mannequin {
        width: 320px;
        height: 320px;
    }

    .holo-level-badge {
        width: 50px;
        height: 50px;
        top: 10px;
        right: 10px;
    }

    .holo-level-number {
        font-size: 18px;
    }

    .holo-level-label {
        font-size: 7px;
    }

    .holo-text-overlay {
        top: 20px;
        left: 20px;
    }

    .holo-text-line {
        font-size: 9px;
    }

    .holo-text-line--accent {
        font-size: 12px;
    }
}

/* ─── Premium hero product showcase (real DB image, fashion-brand quality) ─── */
.hh-hero-product {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

/* Ambient aura — wide soft purple wash, deeply blurred */
.hh-hero-product-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(244, 114, 182, .22) 0%, transparent 55%),
        radial-gradient(circle at 65% 70%, rgba(99, 102, 241, .30) 0%, transparent 60%),
        radial-gradient(circle, rgba(124, 58, 237, .45) 0%, rgba(76, 29, 149, .26) 42%, transparent 72%);
    filter: blur(56px);
    pointer-events: none;
    z-index: 0;
    animation: hhHeroAuraPulse 6.5s ease-in-out infinite
}

@keyframes hhHeroAuraPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .9
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: 1
    }
}

/* Inner glow — concentrated halo right behind the card */
.hh-hero-product-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 480px;
    border-radius: 36%;
    background: radial-gradient(ellipse at 50% 50%, rgba(167, 139, 250, .45) 0%, rgba(124, 58, 237, .18) 50%, transparent 75%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
    animation: hhHeroAuraPulse 7.5s ease-in-out -1.8s infinite
}

/* The featured product card — premium fashion brand showcase */
.hh-hero-product-card {
    position: relative;
    z-index: 3;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: 300px;
    height: 420px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 100%);
    border: 1px solid rgba(167, 139, 250, .30);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .14) inset,
        0 32px 70px rgba(15, 11, 40, .75),
        0 0 60px rgba(124, 58, 237, .42),
        0 0 24px rgba(167, 139, 250, .25);
    transition: transform .55s var(--hh-ease), box-shadow .55s var(--hh-ease), border-color .55s var(--hh-ease);
    pointer-events: auto;
    animation: hhHeroFloat 7s ease-in-out infinite;
    will-change: transform
}

@media(min-width:1024px) {
    .hh-hero-product-card {
        width: 340px;
        height: 480px
    }
}

@keyframes hhHeroFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.hh-hero-product-card:hover {
    border-color: rgba(167, 139, 250, .6);
    animation: none;
    transform: translateY(-18px) scale(1.025);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .18) inset,
        0 44px 90px rgba(15, 11, 40, .85),
        0 0 90px rgba(124, 58, 237, .65),
        0 0 36px rgba(244, 114, 182, .30)
}

/* Image wrapper — fills the card, deep purple base for empty state */
.hh-hero-product-imgwrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(160deg, #1e1b4b 0%, #0f0a28 60%, #1a0d3e 100%)
}

.hh-hero-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--hh-ease), filter .55s var(--hh-ease)
}

.hh-hero-product-card:hover .hh-hero-product-img {
    transform: scale(1.08);
    filter: saturate(1.10) brightness(1.04)
}

/* Diagonal sheen sweep on hover (premium fashion brand touch) */
.hh-hero-product-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .9s var(--hh-ease)
}

.hh-hero-product-card:hover .hh-hero-product-shine {
    transform: translateX(100%)
}

/* "Featured" badge — pill at top-left */
.hh-hero-product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    background: rgba(15, 18, 36, .78);
    border: 1px solid rgba(167, 139, 250, .32);
    border-radius: 99px;
    color: #e9d5ff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
        0 8px 22px rgba(15, 11, 40, .55),
        0 0 18px rgba(124, 58, 237, .30),
        0 1px 0 rgba(255, 255, 255, .08) inset
}

.hh-hero-product-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, .9), 0 0 16px rgba(167, 139, 250, .5);
    animation: hhHeroDotPulse 1.6s ease-in-out infinite
}

@keyframes hhHeroDotPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .55;
        transform: scale(.8)
    }
}

/* Glass info overlay at bottom */
.hh-hero-product-info {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    padding: .95rem 1.05rem 1rem;
    background: linear-gradient(165deg, rgba(15, 18, 36, .85) 0%, rgba(15, 18, 36, .70) 100%);
    border: 1px solid rgba(167, 139, 250, .22);
    border-radius: 18px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        0 12px 30px rgba(15, 11, 40, .55),
        0 1px 0 rgba(255, 255, 255, .06) inset
}

.hh-hero-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .4rem
}

.hh-hero-product-cat {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c4b5fd
}

.hh-hero-product-rating {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 700;
    color: #fcd34d;
    font-variant-numeric: tabular-nums
}

.hh-hero-product-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0 0 .55rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis
}

.hh-hero-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem
}

.hh-hero-product-price {
    font-size: 1.18rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums
}

.hh-hero-product-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .42rem .8rem;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: 1px solid rgba(167, 139, 250, .4);
    border-radius: 99px;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow:
        0 6px 16px rgba(124, 58, 237, .42),
        0 0 12px rgba(167, 139, 250, .35),
        0 1px 0 rgba(255, 255, 255, .18) inset;
    transition: transform .25s var(--hh-ease), box-shadow .25s var(--hh-ease)
}

.hh-hero-product-cta svg {
    width: 11px;
    height: 11px;
    transition: transform .25s var(--hh-ease)
}

.hh-hero-product-card:hover .hh-hero-product-cta {
    transform: translateX(2px);
    box-shadow:
        0 10px 22px rgba(124, 58, 237, .6),
        0 0 22px rgba(167, 139, 250, .55),
        0 1px 0 rgba(255, 255, 255, .24) inset
}

.hh-hero-product-card:hover .hh-hero-product-cta svg {
    transform: translateX(2px)
}

/* Loading state (when no image yet) — subtle shimmer */
.hh-hero-product-card[data-loading="true"] .hh-hero-product-imgwrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(167, 139, 250, .12) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: hhHeroShimmer 1.6s linear infinite
}

@keyframes hhHeroShimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

/* Empty state (no products in DB) — show subtle placeholder */
.hh-hero-product-card[data-empty="true"] {
    display: none
}

/* Pedestal — glowing disc */
.hh-pedestal {
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hh-pedestal-glow {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(167, 139, 250, .85) 0%, rgba(124, 58, 237, .55) 30%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    animation: hhAuraPulse 4.5s ease-in-out infinite
}

.hh-pedestal-disc {
    position: relative;
    width: 78%;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(196, 181, 253, .55) 0%, rgba(124, 58, 237, .7) 35%, rgba(56, 40, 124, .95) 100%);
    border: 1px solid rgba(167, 139, 250, .5);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .20) inset,
        0 0 30px rgba(167, 139, 250, .55),
        0 6px 22px rgba(56, 40, 124, .7)
}

.hh-pedestal-shadow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%);
    filter: blur(8px);
    pointer-events: none
}

/* ═══ TRENDING + FOR-YOU SHARED STYLES ═══ */
.hf-section {
    padding: 1.25rem 1.5rem 2rem;
    position: relative
}

.hf-section--foryou {
    padding-top: 1.25rem;
    padding-bottom: 4rem
}

.hf-inner {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto
}

/* Container Card for Trending and For You Grids */
.hf-container-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: var(--glass-blur) saturate(140%);
    -webkit-backdrop-filter: var(--glass-blur) saturate(140%);
    box-shadow: var(--card-shadow);
    transition: border-color var(--transition-medium) var(--ease-out-expo)
}

.hf-container-card:hover {
    border-color: rgba(139, 92, 246, 0.4)
}

@supports not (backdrop-filter: blur(30px)) {
    .hf-container-card {
        background: rgba(15, 18, 36, 0.95);
    }
}

/* Section head */
.hf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}

.hf-head--split {
    align-items: center
}

.hf-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -.015em;
    display: inline-flex;
    align-items: center;
    gap: .55rem
}

.hf-title-spark {
    color: #a78bfa;
    font-size: .95rem;
    text-shadow: 0 0 12px rgba(167, 139, 250, .7);
    animation: hhSparklePulse 2.4s ease-in-out infinite
}

.hf-sub {
    font-size: .85rem;
    color: #94a3b8;
    margin: .15rem 0 0;
    font-weight: 500
}

.hf-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #cbd5e1;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s var(--hh-ease), transform .2s var(--hh-ease)
}

.hf-link svg {
    width: 14px;
    height: 14px;
    transition: transform .2s var(--hh-ease)
}

.hf-link:hover {
    color: #c4b5fd
}

.hf-link:hover svg {
    transform: translateX(3px)
}

/* Pills (For-you category filter) */
.hf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.hf-pill {
    padding: .55rem 1.05rem;
    background: rgba(20, 25, 46, .6);
    border: 1px solid rgba(148, 163, 255, .10);
    border-radius: 99px;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .005em;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: all var(--transition-fast) var(--ease-out-expo)
}

.hf-pill:hover {
    color: var(--text-secondary);
    border-color: var(--card-border-hover);
    background: rgba(124, 58, 237, .08);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, .16)
}

.hf-pill.is-active {
    background: linear-gradient(135deg, var(--accent-purple-1), var(--accent-purple-2));
    color: var(--text-primary);
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 18px rgba(124, 58, 237, .45)
}

/* ─── TRENDING (category tiles) ─── */
.hf-trends {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-mobile)
}

@media(min-width:640px) {
    .hf-trends {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-mobile)
    }
}

@media(min-width:768px) {
    .hf-trends {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-tablet)
    }
}

@media(min-width:1024px) {
    .hf-trends {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--grid-gap-desktop)
    }
}

.hf-trend {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: var(--glass-blur) saturate(140%);
    -webkit-backdrop-filter: var(--glass-blur) saturate(140%);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-medium) var(--ease-out-expo),
        box-shadow var(--transition-medium) var(--ease-out-expo),
        border-color var(--transition-medium) var(--ease-out-expo)
}

.hf-trend::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0), transparent);
    transition: background .35s var(--hh-ease);
    z-index: 2
}

.hf-trend:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover)
}

.hf-trend:hover::before {
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .45), transparent)
}

.hf-trend-imgwrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: linear-gradient(160deg, #1e1b4b 0%, #0f0a28 100%)
}

.hf-trend-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s var(--hh-ease), filter .35s var(--hh-ease)
}

.hf-trend:hover .hf-trend-img {
    transform: scale(1.07);
    filter: saturate(1.05)
}

.hf-trend-imgwrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(15, 11, 40, .65) 100%)
}

.hf-trend-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 100%, rgba(124, 58, 237, .20) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .35s var(--hh-ease)
}

.hf-trend:hover .hf-trend-overlay {
    opacity: 1
}

.hf-trend-info {
    padding: .75rem .9rem .85rem
}

.hf-trend-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.005em;
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.hf-trend-count {
    font-size: .74rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: .15rem;
    display: block
}

/* ─── FOR-YOU (product grid) ─── */
.hf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile)
}

@media(min-width:640px) {
    .hf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-mobile)
    }
}

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

@media(min-width:1024px) {
    .hf-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--grid-gap-desktop)
    }
}

.hf-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: var(--glass-blur) saturate(140%);
    -webkit-backdrop-filter: var(--glass-blur) saturate(140%);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-medium) var(--ease-out-expo),
        box-shadow var(--transition-medium) var(--ease-out-expo),
        border-color var(--transition-medium) var(--ease-out-expo);
    opacity: 0;
    transform: translateY(10px);
    will-change: transform
}

.hf-card.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.hf-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover)
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(30px)) {
    .hf-card {
        background: rgba(15, 18, 36, 0.95);
    }
}

.hf-card-imgwrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: linear-gradient(160deg, #1e1b4b 0%, #0f0a28 100%)
}

.hf-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s var(--hh-ease), filter .35s var(--hh-ease)
}

.hf-card:hover .hf-card-img {
    transform: scale(1.06);
    filter: saturate(1.05)
}

/* Wishlist heart */
.hf-card-wish {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .6) inset;
    transition: transform var(--transition-fast) var(--ease-out-expo),
        background var(--transition-fast) var(--ease-out-expo),
        box-shadow var(--transition-fast) var(--ease-out-expo)
}

.hf-card-wish svg {
    width: 15px;
    height: 15px;
    color: #475569;
    transition: color var(--transition-fast) var(--ease-out-expo),
        fill var(--transition-fast) var(--ease-out-expo)
}

.hf-card-wish:hover {
    transform: scale(1.10);
    background: #fff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .22)
}

.hf-card-wish:hover svg {
    color: var(--accent-purple-1)
}

.hf-card-wish.is-active {
    background: linear-gradient(135deg, var(--accent-purple-1), var(--accent-purple-2));
    box-shadow: 0 6px 16px rgba(124, 58, 237, .5), 0 0 22px rgba(167, 139, 250, .32);
    animation: hhHeartPop .35s var(--ease-out-expo)
}

.hf-card-wish.is-active svg {
    color: #fff;
    fill: #fff
}

@keyframes hhHeartPop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.30)
    }

    100% {
        transform: scale(1.10)
    }
}

/* Body */
.hf-card-body {
    padding: .8rem .95rem .95rem;
    display: flex;
    flex-direction: column;
    gap: .15rem
}

.hf-card-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -.005em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.hf-card-cat {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 500
}

.hf-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem
}

.hf-card-price {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums
}

.hf-card-rating {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .74rem;
    color: var(--accent-purple-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.hf-card-rating-star {
    color: #fbbf24;
    font-size: .85rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, .4))
}

/* ─── Personalization Indicators ─── */
/* Badge for personalized recommendations */
.hf-card-personalized {
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .65rem;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple-2));
    border-radius: 99px;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, .35), 0 1px 0 rgba(255, 255, 255, .2) inset;
    animation: hhPersonalizedPulse 3s ease-in-out infinite
}

.hf-card-personalized-icon {
    font-size: .75rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5))
}

@keyframes hhPersonalizedPulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(236, 72, 153, .35), 0 1px 0 rgba(255, 255, 255, .2) inset;
    }

    50% {
        box-shadow: 0 6px 18px rgba(236, 72, 153, .55), 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 20px rgba(236, 72, 153, .3);
    }
}

/* Enhanced border glow for personalized cards */
.hf-card.is-personalized {
    border-color: rgba(236, 72, 153, .4);
    box-shadow: var(--card-shadow), 0 0 30px rgba(236, 72, 153, .15)
}

.hf-card.is-personalized:hover {
    border-color: rgba(236, 72, 153, .7);
    box-shadow: var(--card-shadow-hover), 0 0 40px rgba(236, 72, 153, .25)
}

/* Status text */
.page-home .as-status {
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
    padding: 1.25rem 0;
    margin: 0;
    grid-column: 1/-1
}

/* ─── RESPONSIVE ─── */
@media(max-width:1023px) {
    .hh-section {
        margin: .75rem 1rem .5rem;
        padding: 1.75rem 1.25rem 2rem;
        border-radius: 20px
    }

    .hh-inner {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .hh-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem)
    }

    .hh-sub {
        font-size: .95rem
    }

    .hh-stats {
        gap: 1rem
    }

    .hh-visual {
        min-height: 420px
    }

    .hh-scene-container {
        max-width: 600px;
        min-height: 500px
    }

    .hh-dna-container {
        max-width: 280px;
        height: 400px
    }

    .hh-platform {
        width: 220px;
        height: 220px
    }

    .hf-section {
        padding: 1rem 1rem 1.5rem
    }

    .hf-container-card {
        padding: 1.5rem;
        border-radius: 20px
    }

    .hf-section--foryou {
        padding-top: .75rem;
        padding-bottom: 3rem
    }
}

/* Mobile: < 768px - Vertical stacking */
@media(max-width:767px) {
    .hh-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem
    }

    .hh-visual {
        min-height: 380px
    }

    .hh-scene-container {
        max-width: 500px;
        min-height: 450px
    }

    .hh-dna-container {
        max-width: 250px;
        height: 350px
    }

    .hh-platform {
        width: 190px;
        height: 190px
    }
}

@media(max-width:639px) {
    .hh-section {
        margin: .5rem .5rem .35rem;
        padding: 1.5rem 1rem 1.75rem;
        border-radius: 18px
    }

    .hh-inner {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .hh-scene-container {
        max-width: 420px;
        min-height: 400px
    }

    .hh-dna-container {
        max-width: 220px;
        height: 300px
    }

    .hh-platform {
        width: 160px;
        height: 160px
    }

    .hh-eyebrow {
        font-size: .66rem;
        padding: .4rem .75rem .4rem .5rem;
        letter-spacing: .12em
    }

    .hh-title {
        font-size: 1.7rem
    }

    .hh-ctas {
        flex-direction: column;
        gap: .55rem
    }

    .hh-cta {
        width: 100%;
        justify-content: center;
        padding: .8rem 1.2rem
    }

    .hh-stats {
        gap: .85rem;
        margin-top: 1.1rem;
        padding-top: 1.1rem
    }

    .hh-stat-ico {
        width: 32px;
        height: 32px;
        border-radius: 9px
    }

    .hh-stat-num {
        font-size: 1rem
    }

    .hh-stat-label {
        font-size: .66rem
    }

    .hh-visual {
        min-height: 360px
    }

    .hh-card--color {
        bottom: 14%;
        left: -4%
    }

    .hh-card--dna {
        bottom: 8%;
        right: -3%;
        min-width: 140px
    }

    .hh-spark {
        width: 42px;
        height: 18px
    }

    .hf-section {
        padding: .85rem .9rem 1.25rem
    }

    .hf-container-card {
        padding: 1.25rem;
        border-radius: 18px
    }

    .hf-title {
        font-size: 1.1rem
    }

    .hf-trends {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem
    }

    .hf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem
    }

    .hf-card-body {
        padding: .7rem .8rem .85rem
    }

    .hf-card-name {
        font-size: .85rem
    }
}

/* ═══════════════════════════════════════════
   HOMEPAGE ACCESSIBILITY FEATURES
   ═══════════════════════════════════════════ */

/* ─── Focus States for Interactive Elements ─── */
/* Visible focus outlines for keyboard navigation */
.hh-cta:focus-visible,
.hf-pill:focus-visible,
.hf-card:focus-visible,
.hf-card-wish:focus-visible,
.as-nav-link:focus-visible,
.as-btn:focus-visible {
    outline: 3px solid var(--accent-purple-2);
    outline-offset: 3px;
    border-radius: inherit
}

/* Hero CTA buttons - enhanced focus */
.hh-cta--primary:focus-visible {
    outline-color: var(--accent-purple-1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .28) inset,
        0 16px 36px rgba(124, 58, 237, .65),
        0 0 0 1px rgba(167, 139, 250, .45),
        0 0 0 4px rgba(124, 58, 237, .3)
}

.hh-cta--secondary:focus-visible {
    outline-color: var(--accent-purple-2);
    box-shadow:
        0 12px 28px rgba(124, 58, 237, .22),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 0 0 4px rgba(167, 139, 250, .2)
}

/* Card focus - subtle glow */
.hf-card:focus-visible {
    outline: 2px solid var(--accent-purple-2);
    outline-offset: 2px;
    box-shadow: var(--card-shadow-hover), 0 0 0 4px rgba(167, 139, 250, .2)
}

/* Wishlist button focus */
.hf-card-wish:focus-visible {
    outline: 2px solid var(--accent-purple-1);
    outline-offset: 2px;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .4), 0 0 0 4px rgba(167, 139, 250, .25)
}

/* Category pill focus */
.hf-pill:focus-visible {
    outline: 2px solid var(--accent-purple-2);
    outline-offset: 2px;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .3), 0 0 0 4px rgba(167, 139, 250, .2)
}

/* ─── Touch Target Sizes (Mobile) ─── */
/* Ensure minimum 44x44px touch targets on mobile */
@media(max-width:767px) {
    .hh-cta {
        min-height: 44px;
        padding: .85rem 1.5rem
    }

    .hf-pill {
        min-height: 44px;
        padding: .7rem 1.2rem
    }

    .hf-card-wish {
        width: 44px;
        height: 44px
    }

    .hf-card-wish svg {
        width: 18px;
        height: 18px
    }

    /* Navigation links */
    .as-nav-link {
        min-height: 44px;
        padding: .7rem .9rem
    }

    /* Avatar button */
    .as-avatar-btn {
        min-height: 44px;
        padding: .4rem .65rem .4rem .4rem
    }
}

/* ─── Reduced Motion Support ─── */
/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important
    }

    /* Disable specific homepage animations */
    .hh-blob,
    .hh-sparkle,
    .hh-eyebrow-spark,
    .hh-hero-product-aura,
    .hh-hero-product-glow,
    .hf-card-personalized {
        animation: none !important
    }

    /* Disable transform animations on hover */
    .hh-cta:hover,
    .hf-card:hover,
    .hf-pill:hover,
    .hf-card-wish:hover {
        transform: none !important
    }

    /* Keep opacity transitions for visibility */
    .hf-card {
        opacity: 1 !important;
        transform: none !important
    }

    .hf-card.is-visible {
        transition: opacity 0.01ms !important
    }
}

/* ─── High Contrast Mode Support ─── */
/* Enhance borders and outlines in high contrast mode */
@media (prefers-contrast: high) {

    .hh-section,
    .hf-card,
    .hf-pill,
    .hh-cta {
        border-width: 2px
    }

    .hf-card:focus-visible,
    .hf-pill:focus-visible,
    .hh-cta:focus-visible {
        outline-width: 4px;
        outline-offset: 4px
    }
}

/* ═══════════════════════════════════════════
   HOMEPAGE BROWSER COMPATIBILITY FALLBACKS
   ═══════════════════════════════════════════ */

/* ─── Backdrop-filter Fallbacks ─── */
/* Additional fallbacks for elements without backdrop-filter support */
@supports not (backdrop-filter: blur(30px)) {

    /* Hero section cards - more opaque background */
    .hh-card {
        background: rgba(15, 18, 36, 0.95);
    }

    /* Product cards - more opaque background */
    .hf-card {
        background: rgba(15, 18, 36, 0.95);
    }

    /* Trending cards - more opaque background */
    .hf-trend {
        background: rgba(15, 18, 36, 0.95);
    }

    /* Category pills - more opaque background */
    .hf-pill {
        background: rgba(20, 25, 46, 0.9);
    }

    /* Hero CTA secondary button - more opaque */
    .hh-cta--secondary {
        background: rgba(255, 255, 255, 0.12);
    }

    /* Hero eyebrow badge - more opaque */
    .hh-eyebrow {
        background: rgba(124, 58, 237, 0.25);
    }

    /* Wishlist button - more opaque */
    .hf-card-wish {
        background: rgba(255, 255, 255, 0.98);
    }

    /* Personalization badge - more opaque */
    .hf-card-personalized {
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.95), rgba(167, 139, 250, 0.95));
    }

    /* Hero product info card - more opaque */
    .hh-hero-product-info {
        background: rgba(15, 18, 36, 0.95);
    }

    /* Hero product badge - more opaque */
    .hh-hero-product-badge {
        background: rgba(124, 58, 237, 0.95);
    }
}

/* ─── CSS Grid Fallbacks ─── */
/* Flexbox fallback for older browsers without CSS Grid support */
@supports not (display: grid) {

    .hf-trends,
    .hf-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .hf-trends>*,
    .hf-grid>* {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 200px;
    }

    @media (min-width: 768px) {

        .hf-trends>*,
        .hf-grid>* {
            flex: 1 1 calc(33.333% - 0.75rem);
        }
    }

    @media (min-width: 1024px) {

        .hf-trends>*,
        .hf-grid>* {
            flex: 1 1 calc(16.666% - 1rem);
        }
    }

    .hh-inner {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    @media (min-width: 1024px) {
        .hh-inner {
            flex-direction: row;
        }

        .hh-inner>* {
            flex: 1 1 50%;
        }
    }
}

/* ─── Gradient Rendering Fixes ─── */
/* Ensure gradients render consistently across browsers */
.hh-cta--primary,
.hf-pill.is-active,
.hf-card-wish.is-active,
.hf-card-personalized,
.hh-hero-product-badge {
    /* Add solid color fallback before gradient */
    background-color: #7c3aed;
}

.hh-section {
    /* Add solid color fallback before gradient */
    background-color: var(--homepage-bg-start);
}

/* ─── Transform and Animation Performance ─── */
/* Use will-change sparingly for better performance */
.hf-card,
.hf-trend,
.hh-cta,
.hf-pill {
    will-change: transform;
}

/* Remove will-change after animation completes */
.hf-card.is-visible {
    will-change: auto;
}

/* ─── Vendor Prefixes for Critical Properties ─── */
/* Ensure backdrop-filter works in Safari */
.hh-card,
.hf-card,
.hf-trend,
.hf-pill,
.hh-cta--secondary,
.hh-eyebrow,
.hf-card-wish,
.hf-card-personalized,
.hh-hero-product-info,
.hh-hero-product-badge {
    -webkit-backdrop-filter: var(--glass-blur);
}

/* ─── Aspect Ratio Fallback ─── */
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 4/5) {
    .hf-card-imgwrap {
        position: relative;
        padding-bottom: 125%;
        /* 4:5 ratio = 125% */
        height: 0;
    }

    .hf-card-imgwrap .hf-card-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hf-trend-imgwrap {
        position: relative;
        padding-bottom: 100%;
        /* 1:1 ratio = 100% */
        height: 0;
    }

    .hf-trend-imgwrap .hf-trend-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .hh-hero-product-card {
        position: relative;
        padding-bottom: 142.857%;
        /* 7:10 ratio ≈ 142.857% */
        height: 0;
    }

    .hh-hero-product-card>* {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ─── Clamp() Fallback ─── */
/* Fallback for browsers without clamp() support */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
    .hh-title {
        font-size: 2.5rem;
    }

    @media (min-width: 768px) {
        .hh-title {
            font-size: 3rem;
        }
    }

    @media (min-width: 1024px) {
        .hh-title {
            font-size: 3.6rem;
        }
    }

    @media (max-width: 639px) {
        .hh-title {
            font-size: 2rem;
        }
    }
}

/* ─── Filter Effects Fallback ─── */
/* Fallback for browsers without filter support */
@supports not (filter: blur(110px)) {
    .hh-blob {
        opacity: 0.3;
        filter: none;
    }

    .hh-hero-product-aura,
    .hh-hero-product-glow {
        opacity: 0.4;
        filter: none;
    }
}

/* ═══════════════════════════════════════════
   SHOP — Premium Marketplace (Stripe / Linear quality)
   Visual upgrade: depth, glassmorphism, hover polish
   ═══════════════════════════════════════════ */

/* Tokens (8px spacing system + premium color stops) */
:root {
    --shop-bg: #0a0a1e;
    --shop-bg-soft: #0e0e24;
    --shop-card-bg: linear-gradient(165deg, rgba(22, 27, 49, .78) 0%, rgba(15, 18, 36, .72) 100%);
    --shop-card-border: rgba(148, 163, 255, .08);
    --shop-card-border-hover: rgba(124, 58, 237, .32);
    --shop-acc-1: #7c3aed;
    --shop-acc-2: #6366f1;
    --shop-acc-3: #a78bfa;
    --shop-shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shop-shadow-md: 0 1px 2px rgba(0, 0, 0, .32), 0 8px 20px rgba(8, 10, 24, .45);
    --shop-shadow-lg: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 32px rgba(8, 10, 24, .55);
    --shop-shadow-xl: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px rgba(8, 10, 24, .65), 0 0 0 1px rgba(124, 58, 237, .18);
    --shop-glow: 0 0 32px rgba(124, 58, 237, .32);
    --shop-ease: cubic-bezier(.22, 1, .36, 1)
}

/* Page base — ambient light wash from top-left */
.page-shop {
    background: var(--shop-bg);
    position: relative
}

.page-shop::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 8% -10%, rgba(124, 58, 237, .16), transparent 60%),
        radial-gradient(720px 480px at 100% 0%, rgba(99, 102, 241, .10), transparent 65%),
        radial-gradient(800px 600px at 50% 110%, rgba(56, 40, 124, .14), transparent 70%)
}

.page-shop .as-main {
    max-width: none;
    padding: 0
}

/* Page entrance */
@keyframes shopFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shopSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-16px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes shopShimmer {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(200%)
    }
}

@keyframes shopHeartPop {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.28)
    }

    100% {
        transform: scale(1.08)
    }
}

.page-shop .shop-section {
    animation: shopFadeUp .55s var(--shop-ease) both
}

.page-shop .shop-sidebar {
    animation: shopSlideLeft .6s var(--shop-ease) .05s both
}

/* Card fade-in (driven by JS .is-visible) */
.page-shop .shop-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s var(--shop-ease), transform .4s var(--shop-ease), box-shadow .35s var(--shop-ease), border-color .35s var(--shop-ease)
}

.page-shop .shop-card.is-visible {
    opacity: 1;
    transform: translateY(0)
}

/* Section + grid layout */
.shop-section {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 0 4rem
}

.shop-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start
}

@media(min-width:1024px) {
    .shop-layout {
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 1.75rem
    }
}

@media(min-width:1280px) {
    .shop-layout {
        grid-template-columns: 276px minmax(0, 1fr);
        gap: 2rem
    }
}

/* ─── SIDEBAR — soft, premium, low contrast ─── */
.shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0
}

@media(min-width:1024px) {
    .shop-sidebar {
        position: sticky;
        top: 80px
    }
}

.shop-side-card {
    position: relative;
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-card-border);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.35rem;
    box-shadow: var(--shop-shadow-md);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    overflow: hidden;
    transition: border-color .3s var(--shop-ease), box-shadow .3s var(--shop-ease)
}

.shop-side-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .22), transparent);
    pointer-events: none
}

.shop-side-card:hover {
    border-color: rgba(167, 139, 250, .18);
    box-shadow: var(--shop-shadow-lg)
}

.shop-side-title {
    font-size: .78rem;
    font-weight: 700;
    color: #cbd5e1;
    margin: 0 0 1rem;
    letter-spacing: .02em;
    text-transform: none
}

/* Categories list — softer hover, smoother active state */
.shop-cat-list {
    display: flex;
    flex-direction: column;
    gap: .15rem
}

.shop-cat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .7rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #94a3b8;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color .2s var(--shop-ease), background .2s var(--shop-ease), transform .2s var(--shop-ease)
}

.shop-cat-item:hover {
    background: rgba(148, 163, 255, .05);
    color: #e2e8f0
}

.shop-cat-item.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .18) 0%, rgba(99, 102, 241, .10) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .22), 0 0 14px rgba(124, 58, 237, .10)
}

.shop-cat-item.is-active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: linear-gradient(180deg, var(--shop-acc-1), var(--shop-acc-2));
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(124, 58, 237, .55)
}

.shop-cat-item-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .65;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s var(--shop-ease)
}

.shop-cat-item:hover .shop-cat-item-ico {
    opacity: .9
}

.shop-cat-item.is-active .shop-cat-item-ico {
    opacity: 1;
    color: var(--shop-acc-3)
}

.shop-cat-item-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.shop-cat-item-count {
    font-size: .72rem;
    font-weight: 600;
    color: #64748b;
    padding: .1rem .5rem;
    border-radius: 6px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    transition: color .2s var(--shop-ease), background .2s var(--shop-ease)
}

.shop-cat-item.is-active .shop-cat-item-count {
    color: #c4b5fd;
    background: rgba(124, 58, 237, .20)
}

/* Price range — premium track + glowing thumbs */
.shop-range-track {
    position: relative;
    height: 4px;
    border-radius: 99px;
    background: rgba(148, 163, 255, .10);
    margin: 1rem .25rem .35rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35)
}

.shop-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--shop-acc-1), var(--shop-acc-2));
    border-radius: 99px;
    box-shadow: 0 0 12px rgba(124, 58, 237, .45)
}

.shop-range {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: none;
    pointer-events: none;
    margin: 0;
    outline: none
}

.shop-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--shop-acc-1);
    box-shadow: 0 2px 6px rgba(124, 58, 237, .45), 0 0 0 4px rgba(124, 58, 237, .10);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .15s var(--shop-ease), box-shadow .15s var(--shop-ease)
}

.shop-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 14px rgba(124, 58, 237, .6), 0 0 0 6px rgba(124, 58, 237, .16)
}

.shop-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--shop-acc-1);
    box-shadow: 0 2px 6px rgba(124, 58, 237, .45), 0 0 0 4px rgba(124, 58, 237, .10);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .15s var(--shop-ease)
}

.shop-range::-moz-range-thumb:hover {
    transform: scale(1.15)
}

.shop-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    font-size: .78rem;
    color: #94a3b8;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em
}

/* Color swatches — refined ring + hover scale */
.shop-color-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap
}

.shop-color {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c, #475569);
    border: 1.5px solid rgba(255, 255, 255, .06);
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .2s var(--shop-ease), box-shadow .2s var(--shop-ease), border-color .2s var(--shop-ease)
}

.shop-color:hover {
    transform: scale(1.12);
    border-color: rgba(167, 139, 250, .55);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 12px rgba(124, 58, 237, .32)
}

.shop-color.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--shop-acc-1), inset 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 14px rgba(124, 58, 237, .45)
}

.shop-color--more {
    background: transparent;
    color: #94a3b8;
    font-size: .95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(148, 163, 184, .28);
    box-shadow: none
}

.shop-color--more:hover {
    border-color: var(--shop-acc-3);
    color: #c4b5fd;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(124, 58, 237, .22)
}

/* Sizes — softer chips */
.shop-size-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.shop-size {
    min-width: 38px;
    padding: .45rem .7rem;
    background: rgba(148, 163, 255, .04);
    border: 1px solid rgba(148, 163, 255, .10);
    border-radius: 9px;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all .2s var(--shop-ease)
}

.shop-size:hover {
    border-color: rgba(167, 139, 250, .4);
    color: #fff;
    background: rgba(124, 58, 237, .10);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, .18)
}

.shop-size.is-active {
    background: linear-gradient(135deg, var(--shop-acc-1), var(--shop-acc-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .18)
}

/* Scent family pills — Task 11.1 (perfume category filter) */
.shop-scent-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.shop-scent-pill {
    padding: .45rem .85rem;
    background: rgba(167, 139, 250, .06);
    border: 1px solid rgba(167, 139, 250, .15);
    border-radius: 20px;
    color: #cbd5e1;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all .2s var(--shop-ease)
}

.shop-scent-pill:hover {
    border-color: rgba(167, 139, 250, .5);
    color: #fff;
    background: rgba(139, 92, 246, .12);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, .2)
}

.shop-scent-pill.is-active {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(139, 92, 246, .5), inset 0 1px 0 rgba(255, 255, 255, .18)
}

/* Clear filters button */
.shop-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1rem;
    margin-top: .25rem;
    background: rgba(20, 25, 46, .55);
    border: 1px solid rgba(148, 163, 255, .10);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all .25s var(--shop-ease)
}

.shop-clear-btn:hover {
    border-color: rgba(167, 139, 250, .4);
    color: #fff;
    background: rgba(124, 58, 237, .10);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, .22), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.shop-clear-btn svg {
    width: 16px;
    height: 16px;
    opacity: .85
}

/* Visual search side card */
.shop-side-card--vs {
    padding: 1.1rem 1.25rem 1.2rem
}

.shop-vs-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    padding: .7rem .85rem;
    border-radius: 11px;
    background: rgba(124, 58, 237, .05);
    border: 1px dashed rgba(167, 139, 250, .32);
    color: #a5b4fc;
    font-size: .82rem;
    font-weight: 600;
    transition: all .25s var(--shop-ease)
}

.shop-vs-label:hover {
    border-color: rgba(167, 139, 250, .55);
    background: rgba(124, 58, 237, .10);
    box-shadow: 0 6px 18px rgba(124, 58, 237, .18)
}

.shop-vs-icon {
    font-size: 1.05rem
}

.shop-vs-preview {
    position: relative;
    margin-top: .7rem
}

.shop-vs-thumb {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(167, 139, 250, .18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35)
}

.shop-vs-clear {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(15, 23, 42, .85);
    border: none;
    color: #f87171;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: .7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all .2s var(--shop-ease)
}

.shop-vs-clear:hover {
    background: #ef4444;
    color: #fff;
    transform: scale(1.08)
}

.shop-vs-status {
    margin-top: .5rem;
    font-size: .76rem;
    min-height: 1rem;
    color: #94a3b8
}

/* ─── MAIN COLUMN ─── */
.shop-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

/* HERO BANNER — radial lighting, glow behind content, floating products */
.shop-hero {
    position: relative;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 15% 25%, rgba(167, 139, 250, .45) 0%, transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(99, 102, 241, .28) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(56, 40, 124, .5) 0%, transparent 70%),
        linear-gradient(135deg, #1a1240 0%, #241850 35%, #2a1f5c 65%, #1e1840 100%);
    border: 1px solid rgba(167, 139, 250, .18);
    border-radius: 22px;
    padding: 2rem 1.5rem 2rem 4.5rem;
    overflow: hidden;
    min-height: 260px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .05) inset,
        0 1px 2px rgba(0, 0, 0, .3),
        0 16px 40px rgba(15, 11, 40, .55),
        0 0 80px rgba(124, 58, 237, .12)
}

/* Top sheen */
.shop-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .18) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1
}

/* Glow blob behind text */
.shop-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    left: 5%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(167, 139, 250, .30) 0%, transparent 60%);
    filter: blur(50px);
    pointer-events: none
}

.shop-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    width: 100%;
    align-items: center
}

@media(min-width:768px) {
    .shop-hero-content {
        grid-template-columns: 1fr auto;
        gap: 2.25rem
    }
}

.shop-hero-text {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    max-width: 360px
}

.shop-hero-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: var(--shop-acc-3);
    text-transform: uppercase;
    width: fit-content;
    text-shadow: 0 0 16px rgba(167, 139, 250, .45)
}

.shop-hero-title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.12;
    letter-spacing: -.025em;
    text-shadow: 0 2px 24px rgba(124, 58, 237, .18)
}

.shop-hero-title-accent {
    background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.shop-hero-sub {
    font-size: .88rem;
    color: #cbd5e1;
    margin: 0;
    line-height: 1.6;
    max-width: 34ch;
    letter-spacing: .005em
}

.shop-hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    width: fit-content;
    margin-top: .4rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    border: none;
    border-radius: 99px;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .22) inset,
        0 8px 22px rgba(124, 58, 237, .45),
        0 0 0 1px rgba(167, 139, 250, .30);
    transition: transform .25s var(--shop-ease), box-shadow .25s var(--shop-ease), filter .25s var(--shop-ease)
}

.shop-hero-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
    transform: skewX(-22deg);
    pointer-events: none
}

.shop-hero-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .28) inset,
        0 14px 34px rgba(124, 58, 237, .65),
        0 0 0 1px rgba(167, 139, 250, .45),
        0 0 40px rgba(124, 58, 237, .4)
}

.shop-hero-cta:hover::after {
    animation: shopShimmer .9s var(--shop-ease)
}

.shop-hero-cta:active {
    transform: translateY(0)
}

.shop-hero-cta-icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45))
}

/* Hero product previews — floating with depth */
.shop-hero-previews {
    display: flex;
    align-items: center;
    gap: .85rem;
    perspective: 1000px
}

.shop-hero-preview {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    background: linear-gradient(165deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 100%);
    border: 1px solid rgba(167, 139, 250, .16);
    border-radius: 16px;
    padding: .6rem .6rem .7rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 8px 22px rgba(15, 11, 40, .55);
    transition: transform .35s var(--shop-ease), box-shadow .35s var(--shop-ease), border-color .35s var(--shop-ease)
}

.shop-hero-preview:hover {
    transform: translateY(-5px);
    border-color: rgba(167, 139, 250, .45);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .10) inset,
        0 18px 36px rgba(15, 11, 40, .65),
        0 0 30px rgba(124, 58, 237, .32)
}

.shop-hero-preview--center {
    transform: translateY(-6px) scale(1.10);
    border-color: rgba(167, 139, 250, .50);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .14) inset,
        0 22px 50px rgba(15, 11, 40, .75),
        0 0 40px rgba(124, 58, 237, .45),
        0 0 0 1px rgba(167, 139, 250, .25)
}

.shop-hero-preview--center:hover {
    transform: translateY(-9px) scale(1.10)
}

.shop-hero-preview-img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    object-fit: cover;
    margin-bottom: .5rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35)
}

.shop-hero-preview-name {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .005em
}

.shop-hero-preview-price {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    color: var(--shop-acc-3);
    margin-top: .15rem;
    font-variant-numeric: tabular-nums
}

/* Hero arrow buttons */
.shop-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 18, 36, .55);
    border: 1px solid rgba(167, 139, 250, .22);
    color: #cbd5e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .06) inset;
    transition: all .25s var(--shop-ease)
}

.shop-hero-arrow:hover {
    background: rgba(124, 58, 237, .30);
    border-color: rgba(167, 139, 250, .55);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 26px rgba(124, 58, 237, .4), 0 0 24px rgba(167, 139, 250, .25)
}

.shop-hero-arrow svg {
    width: 18px;
    height: 18px
}

.shop-hero-arrow--left {
    left: 1rem
}

.shop-hero-arrow--right {
    right: 1rem
}

/* ─── TOOLBAR (tabs + sort + view toggle) ─── */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .25rem 0
}

.shop-tabs {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0
}

.shop-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    background: rgba(20, 25, 46, .55);
    border: 1px solid rgba(148, 163, 255, .08);
    border-radius: 99px;
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .005em;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shop-shadow-sm);
    transition: all .25s var(--shop-ease)
}

.shop-tab:hover {
    color: #e2e8f0;
    border-color: rgba(167, 139, 250, .32);
    background: rgba(124, 58, 237, .08);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, .16)
}

.shop-tab.is-active {
    background: linear-gradient(135deg, var(--shop-acc-1) 0%, var(--shop-acc-2) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .18) inset,
        0 6px 18px rgba(124, 58, 237, .45),
        0 0 0 1px rgba(167, 139, 250, .30)
}

.shop-tab-icon {
    font-size: .95rem;
    display: inline-flex;
    align-items: center
}

.shop-toolbar-right {
    display: flex;
    align-items: center;
    gap: .7rem
}

.shop-sort-wrap {
    position: relative
}

.shop-sort,
.shop-page-size {
    appearance: none;
    -webkit-appearance: none;
    padding: .6rem 2.1rem .6rem 1rem;
    background: rgba(20, 25, 46, .55);
    border: 1px solid rgba(148, 163, 255, .10);
    border-radius: 11px;
    color: #cbd5e1;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .005em;
    cursor: pointer;
    outline: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shop-shadow-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    transition: all .25s var(--shop-ease)
}

.shop-sort:hover,
.shop-page-size:hover {
    border-color: rgba(167, 139, 250, .4);
    color: #fff;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .18)
}

.shop-sort:focus,
.shop-page-size:focus {
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .18), 0 6px 16px rgba(124, 58, 237, .18)
}

.shop-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .25rem;
    background: rgba(20, 25, 46, .55);
    border: 1px solid rgba(148, 163, 255, .10);
    border-radius: 11px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shop-shadow-sm)
}

.shop-view-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s var(--shop-ease)
}

.shop-view-btn svg {
    width: 16px;
    height: 16px
}

.shop-view-btn:hover {
    color: #e2e8f0;
    background: rgba(148, 163, 255, .06)
}

.shop-view-btn.is-active {
    background: linear-gradient(135deg, var(--shop-acc-1), var(--shop-acc-2));
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 4px 12px rgba(124, 58, 237, .4)
}

/* ─── PRODUCT GRID ─── */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    scroll-margin-top: 96px
}

@media(min-width:1024px) {
    .shop-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem
    }
}

@media(min-width:1280px) {
    .shop-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem
    }
}

/* List view variant */
.shop-grid.is-list {
    grid-template-columns: 1fr;
    gap: .85rem
}

.shop-grid.is-list .shop-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: stretch
}

.shop-grid.is-list .shop-card-imgwrap {
    aspect-ratio: 1/1
}

.shop-grid.is-list .shop-card-img {
    aspect-ratio: 1/1
}

/* Product card — premium, interactive, depth */
.shop-card {
    position: relative;
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-card-border);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--shop-shadow-md);
    will-change: transform
}

.shop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .0), transparent);
    pointer-events: none;
    z-index: 3;
    transition: background .35s var(--shop-ease)
}

.shop-card:hover {
    transform: translateY(-6px);
    border-color: var(--shop-card-border-hover);
    box-shadow: var(--shop-shadow-xl), 0 0 40px rgba(124, 58, 237, .18)
}

.shop-card:hover::before {
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .42), transparent)
}

.shop-card:active {
    transform: translateY(-2px)
}

.shop-card-imgwrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: linear-gradient(160deg, #f1f5f9 0%, #e2e8f0 100%)
}

.shop-card-imgwrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 65%, rgba(15, 18, 36, .18) 100%);
    opacity: 0;
    transition: opacity .35s var(--shop-ease)
}

.shop-card:hover .shop-card-imgwrap::after {
    opacity: 1
}

.shop-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .65s var(--shop-ease), filter .35s var(--shop-ease)
}

.shop-card:hover .shop-card-img {
    transform: scale(1.07);
    filter: saturate(1.05)
}

/* Image slider dots */
.shop-card-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.shop-card-slider .shop-card-img {
    transition: opacity .3s ease, transform .4s ease;
}

.shop-card-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 3;
    opacity: 1;
}

.shop-card-imgwrap:hover .shop-card-dots {
    opacity: 1;
}

.shop-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.shop-card-dot.is-active {
    background: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 4px rgba(99, 102, 241, .6);
}

/* Wishlist heart — smooth fill animation */
.shop-card-wish {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .6) inset;
    transition: transform .25s var(--shop-ease), background .25s var(--shop-ease), box-shadow .25s var(--shop-ease)
}

.shop-card-wish svg {
    width: 17px;
    height: 17px;
    color: #475569;
    transition: color .25s var(--shop-ease), fill .25s var(--shop-ease), transform .25s var(--shop-ease)
}

.shop-card-wish:hover {
    transform: scale(1.10);
    background: #fff;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .22)
}

.shop-card-wish:hover svg {
    color: var(--shop-acc-1)
}

.shop-card-wish.is-active {
    background: linear-gradient(135deg, var(--shop-acc-1), var(--shop-acc-2));
    box-shadow: 0 6px 18px rgba(124, 58, 237, .5), 0 0 24px rgba(167, 139, 250, .32), 0 1px 0 rgba(255, 255, 255, .18) inset;
    animation: shopHeartPop .35s var(--shop-ease)
}

.shop-card-wish.is-active svg {
    color: #fff;
    fill: #fff
}

/* Body */
.shop-card-body {
    padding: .95rem 1.1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .2rem
}

.shop-card-name {
    font-size: .95rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -.005em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.shop-card-cat {
    font-size: .74rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .005em
}

.shop-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
    gap: .5rem
}

.shop-card-price {
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums
}

.shop-card-rating {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: #cbd5e1;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.shop-card-rating-star {
    color: #fbbf24;
    font-size: .9rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, .4))
}

/* ─── Task 6: Product Card Enhancements ─── */

/* Card actions row (wishlist + cart) */
.shop-card-actions {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.shop-card-actions .shop-card-wish {
    position: static;
    top: auto;
    right: auto
}

/* Task 6.1: Cart button — same style as wishlist */
.shop-card-cart {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .6) inset;
    transition: transform .25s var(--shop-ease), background .25s var(--shop-ease), box-shadow .25s var(--shop-ease);
    font-size: .85rem;
    line-height: 1
}

.shop-card-cart:hover {
    transform: scale(1.10);
    background: #fff;
    box-shadow: 0 6px 18px rgba(34, 197, 94, .22)
}

.shop-card-cart.is-active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 6px 18px rgba(34, 197, 94, .5), 0 0 24px rgba(34, 197, 94, .32), 0 1px 0 rgba(255, 255, 255, .18) inset;
    color: #fff
}

.shop-card-cart.is-disabled,
.shop-card-cart:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none
}

.shop-card-cart.is-loading {
    opacity: .6;
    pointer-events: none
}

/* Task 6.4: Discount badge */
.shop-card-discount-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    padding: .3rem .6rem;
    border-radius: 4px;
    letter-spacing: .03em;
    box-shadow: 0 2px 10px rgba(239, 68, 68, .5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2)
}

/* Task 6.4: Price display with discount */
.shop-card-price-old {
    font-size: .78rem;
    color: #64748b;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, .6);
    text-decoration-thickness: 1.5px;
    font-weight: 500;
    margin-right: .35rem
}

.shop-card-price--sale {
    color: #ef4444;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(239, 68, 68, .2)
}

/* Task 6.3: Rating stars */
.shop-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
    flex-wrap: wrap
}

.shop-card-rating {
    display: inline-flex;
    align-items: center;
    gap: .25rem
}

.shop-card-rating-stars {
    color: #f59e0b;
    font-size: .82rem;
    letter-spacing: .04em;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, .4));
    line-height: 1
}

.shop-card-rating-value {
    font-size: .7rem;
    color: #94a3b8;
    font-weight: 600
}

.shop-card-rating--empty {
    font-size: .7rem;
    color: #64748b;
    font-style: italic;
    font-weight: 400
}

/* Task 6.5: Out of stock badge */
.shop-card-oos-badge {
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    background: rgba(239, 68, 68, .85);
    padding: .2rem .5rem;
    border-radius: 4px;
    letter-spacing: .01em;
    text-transform: uppercase
}

/* ─── Toast notifications (Task 6.2) ─── */
.shop-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none
}

.shop-toast {
    padding: .75rem 1.25rem;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: auto
}

.shop-toast.is-visible {
    opacity: 1;
    transform: translateX(0)
}

.shop-toast--success {
    background: linear-gradient(135deg, rgba(34, 197, 94, .92), rgba(22, 163, 74, .92))
}

.shop-toast--error {
    background: linear-gradient(135deg, rgba(239, 68, 68, .92), rgba(220, 38, 38, .92))
}

/* List-view body alignment */
.shop-grid.is-list .shop-card-body {
    padding: 1.05rem 1.2rem;
    justify-content: center
}

.shop-grid.is-list .shop-card-name {
    -webkit-line-clamp: 2;
    line-clamp: 2
}

/* ─── PAGINATION ROW ─── */
.shop-pag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 1rem 0 .5rem
}

.shop-pagination {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center
}

.shop-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 .65rem;
    background: transparent;
    border: none;
    border-radius: 9px;
    color: #94a3b8;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    transition: all .2s var(--shop-ease)
}

.shop-page-btn:hover {
    color: #fff;
    background: rgba(148, 163, 255, .08);
    transform: translateY(-1px)
}

.shop-page-btn.is-active {
    background: linear-gradient(135deg, var(--shop-acc-1), var(--shop-acc-2));
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .20) inset,
        0 6px 16px rgba(124, 58, 237, .45),
        0 0 0 1px rgba(167, 139, 250, .28)
}

.shop-page-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: none
}

.shop-page-info {
    font-size: .78rem;
    color: #64748b;
    font-weight: 600;
    padding: 0 .35rem
}

/* Loading status */
.page-shop .as-status {
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
    padding: 1.25rem 0;
    margin: 0;
    letter-spacing: .005em
}

/* ─── Hierarchical category list (parent + children) ─── */
.shop-cat-group {
    display: flex;
    flex-direction: column
}

.shop-cat-caret {
    margin-left: auto;
    font-size: .78rem;
    color: #94a3b8;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: transform .25s var(--shop-ease), background .2s var(--shop-ease), color .2s var(--shop-ease)
}

.shop-cat-caret:hover {
    background: rgba(167, 139, 250, .14);
    color: #c4b5fd
}

.shop-cat-caret.is-open {
    transform: rotate(180deg);
    color: #c4b5fd
}

.shop-cat-children {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: .15rem 0 .35rem .85rem;
    padding-left: .55rem;
    border-left: 1px dashed rgba(167, 139, 250, .20)
}

.shop-cat-child {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .55rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color .2s var(--shop-ease), background .2s var(--shop-ease)
}

.shop-cat-child:hover {
    background: rgba(148, 163, 255, .06);
    color: #e2e8f0
}

.shop-cat-child.is-active {
    background: linear-gradient(135deg, rgba(124, 58, 237, .16) 0%, rgba(99, 102, 241, .08) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .2)
}

.shop-cat-child-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.shop-cat-child-count {
    font-size: .68rem;
    font-weight: 600;
    color: #64748b;
    padding: .05rem .42rem;
    border-radius: 5px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums
}

.shop-cat-child.is-active .shop-cat-child-count {
    color: #c4b5fd;
    background: rgba(124, 58, 237, .18)
}

/* ─── Manual price inputs ─── */
.shop-price-inputs {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem
}

.shop-price-field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(15, 18, 36, .55);
    border: 1px solid rgba(167, 139, 250, .18);
    border-radius: 10px;
    padding: 0 .55rem 0 1.55rem;
    transition: border-color .2s var(--shop-ease), box-shadow .2s var(--shop-ease), background .2s var(--shop-ease)
}

.shop-price-field:focus-within {
    border-color: rgba(167, 139, 250, .55);
    background: rgba(20, 24, 48, .7);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .12)
}

.shop-price-currency {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
    font-weight: 700;
    color: #a5b4fc;
    pointer-events: none
}

.shop-price-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: .85rem;
    font-weight: 600;
    padding: .55rem 0;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield
}

.shop-price-input::-webkit-outer-spin-button,
.shop-price-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0
}

.shop-price-input::placeholder {
    color: #64748b;
    font-weight: 500
}

.shop-price-input.is-invalid,
.shop-price-field:has(.is-invalid) {
    border-color: rgba(248, 113, 113, .55);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .10)
}

.shop-price-dash {
    color: #64748b;
    font-weight: 600
}

.shop-price-error {
    margin: .5rem 0 0;
    font-size: .74rem;
    color: #fca5a5;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .18);
    padding: .4rem .55rem;
    border-radius: 8px;
    letter-spacing: .005em
}

/* ─── Empty hint (no colors / sizes for this category) ─── */
.shop-empty-hint {
    margin: .55rem 0 0;
    font-size: .74rem;
    color: #94a3b8;
    line-height: 1.45;
    letter-spacing: .005em
}

.shop-side-card.is-disabled .shop-side-title {
    opacity: .55
}

/* ═══ UNIFIED FILTER PANEL (Task 5.1) ═══ */
.shop-filter-panel {
    position: relative;
    background: var(--shop-card-bg);
    border: 1px solid var(--shop-card-border);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shop-shadow-md);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    overflow: hidden;
    transition: border-color .3s var(--shop-ease), box-shadow .3s var(--shop-ease)
}

/* ─── Sticky filter panel ─── */
@media (min-width: 769px) {
    .shop-filter-panel {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 255, .18) transparent;
    }

    .shop-filter-panel::-webkit-scrollbar {
        width: 4px;
    }

    .shop-filter-panel::-webkit-scrollbar-track {
        background: transparent;
    }

    .shop-filter-panel::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 255, .25);
        border-radius: 99px;
    }
}

@media (min-width: 1024px) {
    .shop-filter-panel {
        top: 5.5rem;
        max-height: calc(100vh - 6.5rem);
    }
}

.shop-filter-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .22), transparent);
    pointer-events: none
}

.shop-filter-panel:hover {
    border-color: rgba(167, 139, 250, .18);
    box-shadow: var(--shop-shadow-lg)
}

.shop-filter-section {
    padding: .15rem 0
}

.shop-filter-section--actions {
    padding-top: .5rem
}

.shop-filter-section[hidden] {
    display: none
}

.shop-filter-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 255, .12), transparent);
    margin: .75rem 0
}

.shop-filter-divider[hidden] {
    display: none
}

.shop-filter-title {
    font-size: .78rem;
    font-weight: 700;
    color: #cbd5e1;
    margin: 0 0 .75rem;
    letter-spacing: .02em;
    text-transform: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none
}

.shop-filter-title::after {
    content: '▾';
    font-size: .7rem;
    color: #64748b;
    transition: transform .25s ease
}

.shop-filter-section.is-collapsed .shop-filter-title::after {
    transform: rotate(-90deg)
}

.shop-filter-section.is-collapsed>*:not(.shop-filter-title) {
    display: none
}

/* ─── Text Search (Task 5.2) ─── */
.shop-search-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.shop-search-icon {
    position: absolute;
    left: .75rem;
    width: 16px;
    height: 16px;
    color: #64748b;
    pointer-events: none;
    transition: color .2s var(--shop-ease)
}

.shop-search-wrap:focus-within .shop-search-icon {
    color: #a78bfa
}

.shop-search-input {
    width: 100%;
    padding: .65rem .75rem .65rem 2.25rem;
    background: rgba(15, 23, 42, .45);
    border: 1px solid rgba(148, 163, 255, .12);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: .82rem;
    font-weight: 500;
    outline: none;
    transition: border-color .25s var(--shop-ease), background .25s var(--shop-ease), box-shadow .25s var(--shop-ease)
}

.shop-search-input:focus {
    border-color: rgba(167, 139, 250, .55);
    background: rgba(20, 24, 48, .7);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .08)
}

.shop-search-input::placeholder {
    color: #64748b;
    font-weight: 500
}

/* ─── Gender / Rating Radio (Task 5.3, 5.9) ─── */
.shop-gender-row,
.shop-rating-row {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.shop-radio-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .55rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s var(--shop-ease)
}

.shop-radio-label:hover {
    background: rgba(148, 163, 255, .05)
}

.shop-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.shop-radio-mark {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 163, 255, .25);
    flex-shrink: 0;
    transition: border-color .2s var(--shop-ease), box-shadow .2s var(--shop-ease)
}

.shop-radio-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--shop-acc-1);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .2s var(--shop-ease)
}

.shop-radio-input:checked~.shop-radio-mark {
    border-color: var(--shop-acc-1);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12)
}

.shop-radio-input:checked~.shop-radio-mark::after {
    transform: translate(-50%, -50%) scale(1)
}

.shop-radio-text {
    font-size: .8rem;
    font-weight: 500;
    color: #94a3b8;
    transition: color .2s var(--shop-ease)
}

.shop-radio-input:checked~.shop-radio-text {
    color: #e2e8f0
}

/* ─── Toggle switches (Task 5.10, 5.11) ─── */
.shop-toggle-label {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem 0;
    cursor: pointer
}

.shop-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.shop-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 99px;
    background: rgba(148, 163, 255, .12);
    border: 1px solid rgba(148, 163, 255, .18);
    flex-shrink: 0;
    transition: background .25s var(--shop-ease), border-color .25s var(--shop-ease)
}

.shop-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    transition: transform .25s var(--shop-ease), background .25s var(--shop-ease)
}

.shop-toggle-input:checked~.shop-toggle-switch {
    background: linear-gradient(135deg, var(--shop-acc-1), var(--shop-acc-2));
    border-color: transparent
}

.shop-toggle-input:checked~.shop-toggle-switch::after {
    transform: translateX(16px);
    background: #fff
}

.shop-toggle-text {
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color .2s var(--shop-ease)
}

.shop-toggle-input:checked~.shop-toggle-text {
    color: #e2e8f0
}

/* ─── Checkbox lists (Task 5.8, 5.12, 5.13) ─── */
.shop-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.shop-brand-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 255, .18) transparent
}

.shop-brand-list::-webkit-scrollbar {
    width: 4px
}

.shop-brand-list::-webkit-scrollbar-track {
    background: transparent
}

.shop-brand-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 255, .25);
    border-radius: 99px
}

.shop-checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .45rem;
    border-radius: 7px;
    cursor: pointer;
    transition: background .2s var(--shop-ease)
}

.shop-checkbox-label:hover {
    background: rgba(148, 163, 255, .05)
}

.shop-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.shop-checkbox-mark {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(148, 163, 255, .25);
    flex-shrink: 0;
    transition: border-color .2s var(--shop-ease), background .2s var(--shop-ease), box-shadow .2s var(--shop-ease)
}

.shop-checkbox-mark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .2s var(--shop-ease)
}

.shop-checkbox-input:checked~.shop-checkbox-mark {
    background: linear-gradient(135deg, var(--shop-acc-1), var(--shop-acc-2));
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .35)
}

.shop-checkbox-input:checked~.shop-checkbox-mark::after {
    transform: rotate(45deg) scale(1)
}

.shop-checkbox-text {
    font-size: .8rem;
    font-weight: 500;
    color: #94a3b8;
    transition: color .2s var(--shop-ease)
}

.shop-checkbox-input:checked~.shop-checkbox-text {
    color: #e2e8f0
}

.shop-checkbox-count {
    font-size: .7rem;
    font-weight: 600;
    color: #64748b;
    margin-left: auto;
    font-variant-numeric: tabular-nums
}

/* ─── Visual Search in unified panel ─── */
.shop-filter-section--vs .shop-vs-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    padding: .6rem .75rem;
    border-radius: 10px;
    background: rgba(124, 58, 237, .05);
    border: 1px dashed rgba(167, 139, 250, .32);
    color: #a5b4fc;
    font-size: .8rem;
    font-weight: 600;
    transition: all .25s var(--shop-ease)
}

.shop-filter-section--vs .shop-vs-label:hover {
    border-color: rgba(167, 139, 250, .55);
    background: rgba(124, 58, 237, .10);
    box-shadow: 0 4px 14px rgba(124, 58, 237, .18)
}

.shop-filter-section--vs .shop-vs-icon {
    font-size: 1rem
}

.shop-filter-section--vs .shop-vs-preview {
    position: relative;
    margin-top: .6rem
}

.shop-filter-section--vs .shop-vs-thumb {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(167, 139, 250, .18);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3)
}

.shop-filter-section--vs .shop-vs-clear {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(15, 23, 42, .85);
    border: none;
    color: #f87171;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: .65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: all .2s var(--shop-ease)
}

.shop-filter-section--vs .shop-vs-status {
    font-size: .72rem;
    margin-top: .4rem;
    font-weight: 500
}

/* ─── Empty hint in unified panel ─── */
.shop-filter-section .shop-empty-hint {
    font-size: .72rem;
    color: #64748b;
    font-style: italic;
    margin: .3rem 0 0
}

/* ─── Disabled filter section ─── */
.shop-filter-section.is-disabled .shop-filter-title {
    opacity: .55
}

/* ─── AI Hero box (replaces plain previews) ─── */
.shop-hero-aibox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .55rem
}

.shop-hero-aitag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    border-radius: 99px;
    background: linear-gradient(135deg, rgba(167, 139, 250, .18), rgba(99, 102, 241, .12));
    border: 1px solid rgba(167, 139, 250, .32);
    color: #e9d5ff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 0 18px rgba(124, 58, 237, .18), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.shop-hero-aitag-spark {
    color: #c4b5fd;
    animation: shopSpark 2.4s ease-in-out infinite;
    display: inline-block
}

@keyframes shopSpark {

    0%,
    100% {
        transform: scale(1);
        opacity: .85
    }

    50% {
        transform: scale(1.18) rotate(8deg);
        opacity: 1
    }
}

.shop-hero-previews[data-status="loading"],
.shop-hero-previews[data-status="empty"] {
    min-width: 260px;
    justify-content: center
}

.shop-hero-empty {
    margin: 0;
    font-size: .78rem;
    color: #a5b4fc;
    background: rgba(15, 18, 36, .5);
    border: 1px dashed rgba(167, 139, 250, .28);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    text-align: center;
    letter-spacing: .005em;
    min-width: 240px
}

/* AI badge on each preview card */
.shop-hero-preview-tag {
    position: absolute;
    top: .45rem;
    left: .45rem;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    padding: .18rem .45rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(124, 58, 237, .45);
    z-index: 2
}

/* Carousel dots */
.shop-hero-dots {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .15rem
}

.shop-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(167, 139, 250, .28);
    transition: transform .25s var(--shop-ease), background .25s var(--shop-ease)
}

.shop-hero-dot.is-active {
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(167, 139, 250, .55)
}

/* ─── RESPONSIVE ─── */
@media(max-width:1023px) {
    .shop-section {
        padding: 1.25rem 1rem 2.75rem
    }

    .shop-main {
        gap: 1.25rem
    }

    .shop-hero {
        padding: 1.5rem 1rem 1.5rem 3.25rem;
        min-height: auto
    }

    .shop-hero-arrow--left {
        left: .5rem
    }

    .shop-hero-arrow--right {
        right: .5rem
    }

    .shop-hero-title {
        font-size: 1.6rem
    }

    .shop-hero-aibox {
        align-items: flex-start;
        width: 100%
    }

    .shop-hero-previews {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: .3rem;
        width: 100%
    }

    .shop-toolbar {
        gap: .6rem
    }

    .shop-toolbar-right {
        width: 100%;
        justify-content: space-between
    }
}

@media(max-width:639px) {
    .shop-hero {
        padding: 1.3rem .9rem 1.3rem 2.75rem;
        border-radius: 18px
    }

    .shop-hero-arrow {
        width: 32px;
        height: 32px
    }

    .shop-hero-title {
        font-size: 1.4rem
    }

    .shop-hero-preview {
        width: 100px
    }

    .shop-tab {
        padding: .5rem .9rem;
        font-size: .76rem
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .85rem
    }

    .shop-card-body {
        padding: .8rem .9rem .95rem
    }

    .shop-card-name {
        font-size: .88rem
    }

    .shop-card-price {
        font-size: .95rem
    }

    .shop-price-inputs {
        flex-wrap: wrap
    }
}

/* ═══ PRODUCT DETAIL — Redesign ═══ */
.page-product-detail .as-main {
    max-width: none;
    padding: 0
}

.pd-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden
}

.pd-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .18
}

.pd-bg-blob--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #6366f1, transparent);
    top: -15%;
    left: -8%;
    animation: blobFloat 20s ease-in-out infinite
}

.pd-bg-blob--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #8b5cf6, transparent);
    bottom: -10%;
    right: -5%;
    animation: blobFloat 20s ease-in-out infinite -10s
}

.pd-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.2rem 1.25rem 4rem;
    min-height: 70vh
}

.pd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: .8rem;
    color: #94a3b8;
    font-size: .88rem
}

.pd-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .1);
    border-top-color: var(--accent2);
    border-radius: 50%;
    animation: spin .7s linear infinite
}

.pd-content {
    animation: pdFadeUp .5s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes pdFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Breadcrumb */
.pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: #64748b;
    margin-bottom: 1.2rem;
    flex-wrap: wrap
}

.pd-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s
}

.pd-breadcrumb a:hover {
    color: #a5b4fc
}

.pd-bc-sep {
    color: #475569
}

.pd-bc-current {
    color: #e2e8f0;
    font-weight: 600
}

/* ── TOP GRID ── */
.pd-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem
}

@media(min-width:768px) {
    .pd-top {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start
    }
}

@media(min-width:1024px) {
    .pd-top {
        grid-template-columns: 52% 1fr;
        gap: 3rem
    }
}

/* Gallery */
.pd-gallery {
    position: relative
}

@media(min-width:768px) {
    .pd-gallery {
        position: sticky;
        top: 80px
    }
}

.pd-gal-main {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgba(30, 41, 59, .3);
    border: 1px solid rgba(99, 102, 241, .08);
    aspect-ratio: 4/5
}

.pd-gal-hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .35s
}

.pd-gal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(10px);
    color: #e2e8f0;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    z-index: 2
}

.pd-gal-arrow:hover {
    background: rgba(99, 102, 241, .2);
    border-color: rgba(99, 102, 241, .4)
}

.pd-gal-arrow--l {
    left: .6rem
}

.pd-gal-arrow--r {
    right: .6rem
}

.pd-gal-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    overflow-x: auto;
    scrollbar-width: none
}

.pd-gal-thumbs::-webkit-scrollbar {
    display: none
}

.pd-gal-thumb {
    width: 72px;
    height: 88px;
    border-radius: .6rem;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .06);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s;
    background: rgba(30, 41, 59, .3)
}

.pd-gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pd-gal-thumb:hover {
    border-color: rgba(99, 102, 241, .3)
}

.pd-gal-thumb.is-active {
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .2)
}

/* Info */
.pd-info {
    display: flex;
    flex-direction: column;
    gap: 0
}

.pd-cat-badge {
    display: inline-block;
    width: fit-content;
    padding: .3rem .85rem;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #a5b4fc;
    background: rgba(99, 102, 241, .1);
    border: 1px solid rgba(99, 102, 241, .18);
    margin-bottom: .6rem
}

.pd-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #f1f5f9;
    margin: 0 0 .5rem;
    line-height: 1.15
}

.pd-price-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .3rem
}

.pd-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f1f5f9
}

.pd-stock {
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 99px
}

.pd-stock--in {
    background: rgba(16, 185, 129, .1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, .18)
}

.pd-stock--out {
    background: rgba(239, 68, 68, .1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, .18)
}

.pd-divider {
    height: 1px;
    background: rgba(255, 255, 255, .06);
    margin: 1rem 0
}

/* Fields */
.pd-field {
    margin-bottom: 1rem
}

.pd-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: .45rem
}

/* Sizes */
.pd-sizes {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap
}

.pd-size-btn {
    min-width: 50px;
    height: 44px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: rgba(30, 41, 59, .4);
    color: #e2e8f0;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .85rem;
    transition: all .2s
}

.pd-size-btn:hover {
    border-color: rgba(99, 102, 241, .4);
    background: rgba(99, 102, 241, .06)
}

.pd-size-btn.is-active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .3)
}

.pd-size-btn--out {
    opacity: .3;
    cursor: not-allowed;
    text-decoration: line-through
}

.pd-size-hint {
    font-size: .8rem;
    color: #94a3b8;
    font-style: italic
}

/* Colors */
.pd-colors {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap
}

.pd-color-chip {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .65rem;
    border-radius: 99px;
    border: 1.5px solid rgba(255, 255, 255, .08);
    background: rgba(30, 41, 59, .3);
    color: #cbd5e1;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s
}

.pd-color-chip:hover {
    border-color: rgba(99, 102, 241, .3)
}

.pd-color-chip.is-active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, .15);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25)
}

.pd-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .25);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15)
}

/* Scent Family */
.pd-scent-display {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.pd-scent-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .75rem;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #a78bfa
}

/* CTA */
.pd-cta-row {
    display: flex;
    gap: .5rem;
    margin: 1.2rem 0 1.4rem
}

.pd-cta-cart {
    flex: 1;
    padding: .85rem 1.4rem;
    border-radius: 14px;
    border: none;
    font-weight: 700;
    font-size: .92rem;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 6px 24px rgba(99, 102, 241, .28);
    cursor: pointer;
    transition: all .25s
}

.pd-cta-cart:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(99, 102, 241, .38)
}

.pd-cta-cart:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none
}

.pd-cta-cart--added {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 6px 24px rgba(16, 185, 129, .28) !important
}

/* ── Owner banner — shown instead of the buy CTA when the viewer is the
   product's seller. Premium amber/gold so it reads as "ownership" rather
   than an error / blocking state. */
.pd-owner-banner {
    margin: 1.2rem 0 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(245, 158, 11, .06)),
        rgba(15, 19, 38, .65);
    border: 1px solid rgba(251, 191, 36, .35);
    display: flex;
    align-items: center;
    gap: .9rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 6px 24px -8px rgba(251, 191, 36, .25);
}

.pd-owner-banner-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 4px 12px -2px rgba(251, 191, 36, .55);
    font-size: 1.15rem;
}

.pd-owner-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pd-owner-banner-title {
    font-weight: 700;
    color: #f1f5f9;
    font-size: .92rem;
    letter-spacing: -0.01em;
}

.pd-owner-banner-sub {
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.4;
}

.pd-owner-banner-btn {
    flex-shrink: 0;
    padding: .6rem 1.05rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1c1917;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    box-shadow: 0 4px 14px -4px rgba(251, 191, 36, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pd-owner-banner-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(251, 191, 36, .65);
    color: #1c1917;
    text-decoration: none;
}

@media (max-width: 540px) {
    .pd-owner-banner {
        flex-wrap: wrap;
    }

    .pd-owner-banner-btn {
        width: 100%;
        text-align: center;
    }
}

/* "Mənimdir" badge for shop / cart / outfit cards — applied to seller-owned
   products when the viewer is the seller. Subtle so it doesn't compete with
   the price badge but still recognisable. */
.is-my-product-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .14rem .5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(251, 191, 36, .95), rgba(245, 158, 11, .85));
    color: #1c1917;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px -2px rgba(251, 191, 36, .55);
}

.pd-cta-wish {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: rgba(30, 41, 59, .4);
    font-size: 1.25rem;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0
}

.pd-cta-wish:hover {
    border-color: rgba(244, 114, 182, .35);
    color: #f472b6
}

.pd-cta-wish.is-wished {
    color: #f472b6;
    border-color: rgba(244, 114, 182, .35);
    background: rgba(244, 114, 182, .08)
}

/* Outfit CTA Link */
.pd-outfit-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: .6rem 1.2rem;
    background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(245, 158, 11, .08));
    border: 1px solid rgba(124, 58, 237, .2);
    border-radius: 12px;
    color: #a78bfa;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s
}

.pd-outfit-link:hover {
    background: rgba(124, 58, 237, .18);
    transform: translateY(-2px);
    color: #c4b5fd
}

/* Accordions */
.pd-acc-list {
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.pd-acc {
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.pd-acc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .85rem 0;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s
}

.pd-acc-head:hover {
    color: #a5b4fc
}

.pd-acc-ico {
    font-size: 1rem;
    color: #64748b;
    transition: transform .25s
}

.pd-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.16, 1, .3, 1), padding .25s
}

.pd-acc-body.is-open {
    max-height: 1200px;
    padding-bottom: .8rem
}

.pd-desc-text {
    font-size: .88rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0 0 .8rem
}

.pd-spec-table {
    width: 100%;
    font-size: .85rem;
    margin-top: .5rem
}

.pd-spec-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.pd-spec-table tr:last-child {
    border-bottom: none
}

.pd-spec-l {
    color: #94a3b8;
    padding: .45rem 1.5rem .45rem 0;
    font-weight: 500;
    white-space: nowrap
}

.pd-spec-v {
    color: #f1f5f9;
    padding: .45rem 0;
    font-weight: 600
}

.pd-ship-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.pd-ship-item {
    font-size: .85rem;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    background: rgba(99, 102, 241, .04);
    border: 1px solid rgba(99, 102, 241, .08);
    border-radius: 8px;
    transition: background .15s
}

.pd-ship-item:hover {
    background: rgba(99, 102, 241, .08)
}

/* ═══ VARIANT TABLE ═══ */
.pd-var-loading {
    font-size: .82rem;
    color: #64748b;
    padding: .4rem 0
}

.pd-var-empty {
    font-size: .85rem;
    color: #64748b;
    margin: 0
}

.pd-var-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(15, 23, 42, .4)
}

.pd-var-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem
}

.pd-var-table thead {
    background: rgba(99, 102, 241, .06);
    border-bottom: 1.5px solid rgba(255, 255, 255, .08)
}

.pd-var-table th {
    padding: .6rem .75rem;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    white-space: nowrap
}

.pd-var-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    vertical-align: middle;
    color: #e2e8f0
}

.pd-var-table tbody tr {
    transition: background .12s
}

.pd-var-table tbody tr:hover {
    background: rgba(99, 102, 241, .06)
}

.pd-var-color-cell {
    display: flex;
    align-items: center;
    gap: .35rem
}

.pd-var-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    flex-shrink: 0
}

.pd-var-sku {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .75rem;
    color: #94a3b8
}

.pd-var-stock {
    font-weight: 700;
    font-size: .78rem
}

.pd-var-stock--in {
    color: #34d399
}

.pd-var-stock--out {
    color: #f87171
}

.pd-var-status {
    font-size: .9rem
}

.pd-var-status--on {
    color: #34d399
}

.pd-var-status--off {
    color: #64748b
}

/* ═══ SECTIONS ═══ */
.pd-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

.pd-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 1.2rem;
    letter-spacing: -.02em
}

/* ═══ REVIEWS ═══ */
.pd-reviews-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem
}

@media(min-width:640px) {
    .pd-reviews-top {
        grid-template-columns: auto 1fr;
        gap: 2rem
    }
}

.pd-rev-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem
}

.pd-rev-big-score {
    font-size: 3.2rem;
    font-weight: 900;
    color: #f1f5f9;
    line-height: 1;
    letter-spacing: -.04em
}

.pd-rev-of {
    font-size: 1.2rem;
    color: #64748b;
    font-weight: 600
}

.pd-rev-stars-big {
    font-size: 1.1rem;
    color: #facc15;
    letter-spacing: .08em
}

.pd-rev-count {
    font-size: .78rem;
    color: #64748b
}

.pd-rev-bars {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    justify-content: center
}

.pd-rev-bar-row {
    display: flex;
    align-items: center;
    gap: .5rem
}

.pd-rev-bar-star {
    font-size: .75rem;
    color: #facc15;
    font-weight: 700;
    min-width: 30px
}

.pd-rev-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, .06);
    border-radius: 99px;
    overflow: hidden;
    min-width: 120px
}

.pd-rev-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #facc15, #fbbf24);
    border-radius: 99px;
    transition: width .4s ease;
    width: 0
}

.pd-rev-bar-num {
    font-size: .72rem;
    color: #64748b;
    font-weight: 700;
    min-width: 18px;
    text-align: right
}

/* Write review */
.pd-rev-write {
    background: rgba(30, 41, 59, .3);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1rem;
    padding: 1.2rem;
    margin-bottom: 1.2rem
}

.pd-rev-write h3 {
    font-size: .9rem;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 .6rem
}

.pd-rev-star-pick {
    display: flex;
    gap: .15rem;
    margin-bottom: .6rem
}

.pd-rev-star-pick button {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #facc15;
    cursor: pointer;
    padding: .1rem;
    transition: transform .15s
}

.pd-rev-star-pick button:hover {
    transform: scale(1.2)
}

.pd-rev-name-input,
.pd-rev-textarea,
.pd-disc-name-input,
.pd-disc-textarea {
    width: 100%;
    padding: .6rem .8rem;
    border: 1.5px solid rgba(99, 102, 241, .12);
    border-radius: 10px;
    background: rgba(15, 23, 42, .4);
    color: #e2e8f0;
    font-size: .85rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
    margin-bottom: .5rem
}

.pd-rev-name-input:focus,
.pd-rev-textarea:focus,
.pd-disc-name-input:focus,
.pd-disc-textarea:focus {
    border-color: rgba(99, 102, 241, .4)
}

.pd-rev-textarea {
    resize: vertical;
    min-height: 60px
}

.pd-disc-textarea {
    resize: vertical;
    min-height: 48px
}

.pd-rev-submit,
.pd-disc-send {
    padding: .55rem 1.2rem;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: .82rem;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    cursor: pointer;
    transition: all .2s
}

.pd-rev-submit:hover,
.pd-disc-send:hover {
    box-shadow: 0 4px 16px rgba(99, 102, 241, .3);
    transform: translateY(-1px)
}

/* Review cards */
.pd-rev-list {
    display: flex;
    flex-direction: column;
    gap: .7rem
}

.pd-rev-card {
    background: rgba(30, 41, 59, .3);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1rem;
    padding: 1rem 1.1rem
}

.pd-rev-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .4rem
}

.pd-rev-card-stars {
    color: #facc15;
    font-size: .85rem;
    letter-spacing: .04em
}

.pd-rev-card-date {
    font-size: .72rem;
    color: #64748b
}

.pd-rev-card-text {
    font-size: .88rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0 0 .4rem
}

.pd-rev-card-author {
    font-size: .78rem;
    color: #818cf8;
    font-weight: 600
}

/* Report button */
.pd-report-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    opacity: 0.4;
    transition: opacity 0.2s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.pd-report-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
}

/* Report card footer */
.pd-rev-card-footer,
.pd-disc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

/* Delete button for own reviews/comments */
.pd-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    opacity: .6;
    padding: 4px 6px;
    border-radius: 6px;
    transition: opacity .2s, background .2s;
    margin-right: 4px;
}

.pd-delete-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15);
}

/* Confirm Modal */
.pd-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease;
}

.pd-confirm-overlay.is-visible {
    opacity: 1;
}

.pd-confirm-box {
    background: linear-gradient(145deg, #1e293b, #1e1b4b);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: 16px;
    padding: 2rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform .2s ease;
}

.pd-confirm-overlay.is-visible .pd-confirm-box {
    transform: scale(1);
}

.pd-confirm-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.pd-confirm-msg {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.pd-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.pd-confirm-cancel {
    padding: 0.6rem 1.4rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.pd-confirm-cancel:hover {
    background: rgba(255, 255, 255, .1);
    color: #e2e8f0;
}

.pd-confirm-yes {
    padding: 0.6rem 1.4rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .3);
    transition: transform .15s, box-shadow .2s;
}

.pd-confirm-yes:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, .4);
}

/* Report modal overlay */
.pd-report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.pd-report-modal {
    background: #1a1a2e;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    overflow: hidden;
}

.pd-report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.pd-report-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #e0e7ff;
}

.pd-report-modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
}

.pd-report-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pd-report-modal-body label {
    font-size: 0.82rem;
    color: #a5b4fc;
    font-weight: 600;
}

.pd-report-select,
.pd-report-textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(15, 15, 35, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
}

.pd-report-select:focus,
.pd-report-textarea:focus {
    border-color: rgba(99, 102, 241, 0.5);
}

.pd-report-select option {
    background: #1a1a2e;
    color: #f1f5f9;
}

.pd-report-submit {
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pd-report-submit:hover {
    opacity: 0.9;
}

.pd-report-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Toast for product detail */
.pd-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pd-toast {
    padding: 0.7rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s;
}

.pd-toast--success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.pd-toast--error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.pd-toast--warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.pd-toast--info {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

.pd-toast--hide {
    opacity: 0;
}

.pd-rev-empty,
.pd-disc-empty {
    font-size: .85rem;
    color: #64748b;
    text-align: center;
    padding: 1.5rem 0
}

/* ═══ DISCUSSION ═══ */
.pd-disc-write {
    margin-bottom: 1rem
}

.pd-disc-input-row {
    display: flex;
    gap: .4rem
}

.pd-disc-textarea {
    flex: 1;
    margin-bottom: 0
}

.pd-disc-send {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0
}

.pd-disc-list {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.pd-disc-card {
    background: rgba(30, 41, 59, .25);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: .8rem;
    padding: .8rem 1rem
}

.pd-disc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .3rem
}

.pd-disc-card-author {
    font-size: .82rem;
    font-weight: 700;
    color: #a5b4fc
}

.pd-disc-card-date {
    font-size: .68rem;
    color: #64748b
}

.pd-disc-card-text {
    font-size: .85rem;
    color: #cbd5e1;
    line-height: 1.55;
    margin: 0
}

/* ═══ SIMILAR ═══ */
.pd-similar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem
}

@media(min-width:640px) {
    .pd-similar-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.pd-sim-card {
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(30, 41, 59, .35);
    border: 1px solid rgba(99, 102, 241, .06);
    transition: all .3s;
    text-decoration: none;
    color: #f1f5f9;
    display: block
}

.pd-sim-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(99, 102, 241, .1);
    border-color: rgba(99, 102, 241, .18)
}

.pd-sim-img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, .02)
}

.pd-sim-body {
    padding: .7rem .8rem .8rem
}

.pd-sim-cat {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a5b4fc;
    font-weight: 700;
    margin-bottom: .1rem
}

.pd-sim-name {
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .2rem
}

.pd-sim-price {
    font-weight: 800;
    font-size: .9rem;
    color: #c4b5fd
}

/* Responsive */
@media(max-width:767px) {
    .pd-wrap {
        padding: 1rem 1rem 3rem
    }

    .pd-gal-main {
        aspect-ratio: 3/4;
        border-radius: 1rem
    }

    .pd-title {
        font-size: 1.35rem
    }

    .pd-price {
        font-size: 1.3rem
    }

    .pd-similar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem
    }

    .pd-reviews-top {
        grid-template-columns: 1fr
    }
}

/* ═══ AUTH — Premium Split Layout ═══ */
.page-auth .as-main {
    max-width: none;
    padding: 0
}

.page-auth .as-nav {
    display: none
}

.page-auth .as-footer {
    display: none
}

.page-auth .sc-footer {
    display: none
}

.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh
}

/* ── Left panel — decorative ── */
.auth-split-left {
    position: relative;
    background: linear-gradient(155deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #1e293b 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem
}

.auth-split-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.auth-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px)
}

.auth-blob--1 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent);
    top: -15%;
    left: -10%;
    animation: blobFloat 20s ease-in-out infinite
}

.auth-blob--2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, .3), transparent);
    bottom: -10%;
    right: -8%;
    animation: blobFloat 20s ease-in-out infinite -7s
}

.auth-blob--3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(236, 72, 153, .2), transparent);
    top: 45%;
    right: 20%;
    animation: blobFloat 20s ease-in-out infinite -14s
}

.auth-split-left-content {
    position: relative;
    z-index: 1;
    max-width: 420px
}

.auth-brand {
    font-weight: 800;
    font-size: 1.3rem;
    color: #f1f5f9;
    text-decoration: none;
    letter-spacing: -.02em;
    display: block;
    margin-bottom: 3rem
}

.auth-brand span {
    color: #818cf8
}

.auth-left-text {
    margin-bottom: 2.5rem
}

.auth-left-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.auth-left-accent {
    background: linear-gradient(135deg, #a78bfa, #818cf8, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.auth-left-sub {
    font-size: .95rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
    max-width: 36ch
}

.auth-left-features {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.auth-left-feat {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .85rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(99, 102, 241, .12);
    border-radius: .75rem;
    backdrop-filter: blur(8px);
    color: #cbd5e1;
    font-size: .85rem;
    font-weight: 500;
    transition: all .2s
}

.auth-left-feat:hover {
    background: rgba(99, 102, 241, .08);
    border-color: rgba(99, 102, 241, .25);
    transform: translateX(4px)
}

.auth-left-feat-icon {
    font-size: 1.1rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0
}

/* ── Right panel — form ── */
.auth-split-right {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden
}

.auth-split-right::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, .06), transparent 70%);
    pointer-events: none
}

.auth-form-wrap {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1
}

/* Kicker */
.auth-form-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #a5b4fc;
    margin-bottom: 1rem;
    padding: .35rem .7rem .35rem .45rem;
    background: rgba(99, 102, 241, .1);
    border: 1px solid rgba(99, 102, 241, .18);
    border-radius: 99px
}

.auth-form-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    animation: dotPulse 2s ease-in-out infinite
}

/* Header */
.auth-form-header {
    margin-bottom: 2rem
}

.auth-form-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 .4rem;
    letter-spacing: -.03em
}

.auth-form-sub {
    font-size: .88rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.auth-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.auth-input-icon {
    position: absolute;
    left: .85rem;
    font-size: .9rem;
    pointer-events: none;
    z-index: 1
}

.auth-input {
    width: 100%;
    padding: .75rem .95rem .75rem 2.6rem;
    border: 1.5px solid rgba(99, 102, 241, .12);
    border-radius: .7rem;
    background: rgba(30, 41, 59, .4);
    color: #e2e8f0;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: all .25s
}

.auth-input--pw {
    padding-right: 2.8rem
}

.auth-input::placeholder {
    color: #475569
}

.auth-input:focus {
    border-color: rgba(99, 102, 241, .5);
    background: rgba(30, 41, 59, .6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1), 0 0 20px rgba(99, 102, 241, .05)
}

/* Password toggle eye */
.auth-pw-toggle {
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all .15s;
    z-index: 1
}

.auth-pw-toggle:hover {
    color: #a5b4fc;
    background: rgba(99, 102, 241, .08)
}

/* Submit */
.auth-submit {
    width: 100%;
    padding: .85rem 1.4rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .35);
    transition: all .25s;
    letter-spacing: -.01em;
    margin-top: .4rem
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .45)
}

.auth-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(99, 102, 241, .3)
}

/* Switch link */
.auth-switch {
    text-align: center;
    font-size: .85rem;
    color: #64748b;
    margin-top: 1.8rem
}

.auth-switch a {
    color: #818cf8;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s
}

.auth-switch a:hover {
    color: #a5b4fc
}

/* Back to Home */
.auth-back-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .9rem;
    width: 100%;
    font-size: .8rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: color .15s
}

.auth-back-home:hover {
    color: #94a3b8
}

.auth-back-home svg {
    flex-shrink: 0;
    transition: transform .15s
}

.auth-back-home:hover svg {
    transform: translateX(-3px)
}

/* Forgot password link */
.auth-forgot {
    text-align: right;
    margin-top: -.4rem
}

.auth-forgot a {
    font-size: .78rem;
    color: #818cf8;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s
}

.auth-forgot a:hover {
    color: #a5b4fc
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.2rem 0
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, .25), transparent)
}

.auth-divider span {
    font-size: .75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    white-space: nowrap
}

/* Google sign-in */
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    padding: .8rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(129, 140, 248, .2);
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(12px);
    color: #e2e8f0;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    text-decoration: none
}

.auth-google-btn:hover {
    border-color: rgba(129, 140, 248, .45);
    background: rgba(30, 41, 59, .8);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .15);
    color: #e2e8f0;
    text-decoration: none
}

.auth-google-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(99, 102, 241, .1)
}

.auth-google-btn svg {
    flex-shrink: 0
}

.auth-google-status {
    text-align: center;
    font-size: .82rem;
    color: #f87171;
    margin-top: .4rem;
    min-height: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, margin .3s ease
}

.auth-google-status.visible {
    max-height: 3rem;
    margin-top: .5rem
}

/* Success icon */
.auth-success-icon {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: 1rem;
    animation: successPop .5s cubic-bezier(.175, .885, .32, 1.275)
}

@keyframes successPop {
    0% {
        transform: scale(0);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

/* ── Responsive ── */
@media(max-width:900px) {
    .auth-split {
        grid-template-columns: 1fr
    }

    .auth-split-left {
        display: none
    }

    .auth-split-right {
        min-height: 100vh;
        padding: 2rem 1.25rem
    }
}

@media(max-width:480px) {
    .auth-form-title {
        font-size: 1.4rem
    }

    .auth-form-wrap {
        max-width: 100%
    }
}

/* ═══ PROFILE — Premium Dashboard (Design #2) ═══ */
.page-profile .as-main {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0
}

.prf-dash {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 292px;
    gap: 1.5rem;
    align-items: start;
    animation: prfSplitIn .45s cubic-bezier(.16, 1, .3, 1) both;
}

/* Sidebar premium card — "Obsidian Slate" surface, deliberately darker and
 * cooler than the main page so the rail reads as a separate slab. */
.prf-side {
    position: sticky;
    top: 96px;
    background:
        radial-gradient(ellipse 80% 220px at 50% -40px,
            rgba(124, 58, 237, 0.20),
            transparent 70%),
        radial-gradient(circle at 100% 100%,
            rgba(34, 211, 238, 0.05),
            transparent 60%),
        linear-gradient(180deg,
            rgba(7, 9, 22, 0.92) 0%,
            rgba(5, 7, 18, 0.92) 60%,
            rgba(4, 5, 14, 0.92) 100%);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid rgba(167, 139, 250, 0.16);
    border-radius: 1rem;
    padding: .65rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.45),
        0 0 36px rgba(99, 102, 241, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    min-height: calc(100vh - 106px);
}

.prf-side-nav {
    display: flex;
    flex-direction: column;
    gap: .12rem
}

/* Collapsible group section. */
.prf-side-section {
    display: flex;
    flex-direction: column;
}

.prf-side-section+.prf-side-section {
    margin-top: .5rem;
}

/* Inset the items so they "branch" from the group toggle, with a subtle
 * accent rail on the left in the group's colour. The rail fades in only
 * when the group is open so collapsed sections look like clean cards. */
.prf-side-section .prf-side-group-items {
    padding: .25rem 0 .15rem .25rem;
    margin-left: .55rem;
    position: relative;
}

.prf-side-section .prf-side-group-items::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg,
            rgba(var(--prf-side-accent), .35),
            rgba(var(--prf-side-accent), .05));
    opacity: 0;
    transition: opacity 220ms ease;
}

.prf-side-section:not(.is-collapsed) .prf-side-group-items::before {
    opacity: 1;
}

/* Section toggle button (was a label, now a real button so the whole row
 * is keyboard- and screen-reader-friendly). Each group section sets its
 * own accent colour via a CSS variable on the wrapper, then the button
 * inherits it for the leading dot, chevron and hover glow. */
.prf-side-section[data-prf-group="account"] {
    --prf-side-accent: 96, 165, 250;
}

/* sky */
.prf-side-section[data-prf-group="shopping"] {
    --prf-side-accent: 251, 146, 60;
}

/* orange */
.prf-side-section[data-prf-group="mine"] {
    --prf-side-accent: 52, 211, 153;
}

/* emerald */
.prf-side-section[data-prf-group="social"] {
    --prf-side-accent: 244, 114, 182;
}

/* pink */
.prf-side-section[data-prf-group="system"] {
    --prf-side-accent: 167, 139, 250;
}

/* violet */

.prf-side-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .65rem .8rem .65rem .95rem;
    margin: 0;
    background:
        linear-gradient(135deg,
            rgba(var(--prf-side-accent), .18) 0%,
            rgba(var(--prf-side-accent), .06) 100%),
        rgba(255, 255, 255, .02);
    border: 1px solid rgba(var(--prf-side-accent), .26);
    border-radius: .65rem;
    color: #e2e8f0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: background 220ms ease, border-color 220ms ease, color 200ms ease, transform 200ms ease;
}

/* Leading dot — group-coloured with a soft glow, doubles as the visual
 * anchor for the section. */
.prf-side-group::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgb(var(--prf-side-accent));
    box-shadow:
        0 0 0 2px rgba(var(--prf-side-accent), .15),
        0 0 10px rgba(var(--prf-side-accent), .55);
    transition: transform 220ms ease;
}

/* A subtle gradient sweep that lights up on hover. */
.prf-side-group::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(var(--prf-side-accent), .08) 35%,
            rgba(var(--prf-side-accent), .14) 50%,
            rgba(var(--prf-side-accent), .08) 65%,
            transparent 100%);
    transform: translateX(-110%);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.prf-side-group:hover {
    color: #ffffff;
    background:
        linear-gradient(135deg,
            rgba(var(--prf-side-accent), .30) 0%,
            rgba(var(--prf-side-accent), .12) 100%),
        rgba(255, 255, 255, .03);
    border-color: rgba(var(--prf-side-accent), .50);
    transform: translateX(2px);
}

.prf-side-group:hover::after {
    transform: translateX(110%);
}

.prf-side-group:hover::before {
    transform: scale(1.25);
}

.prf-side-group-label {
    flex: 1;
    text-align: left;
}

.prf-side-group-chev {
    display: inline-flex;
    width: 14px;
    height: 14px;
    color: rgba(var(--prf-side-accent), .85);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prf-side-group-chev svg {
    width: 100%;
    height: 100%;
}

/* Collapsed state: rotate chev so the affordance is unmistakable. */
.prf-side-group[aria-expanded="false"] .prf-side-group-chev {
    transform: rotate(-90deg);
}

/* When a group is collapsed, dim its dot a touch — visual cue that the
 * section is "asleep". */
.prf-side-section.is-collapsed .prf-side-group::before {
    box-shadow: 0 0 0 2px rgba(var(--prf-side-accent), .08);
    opacity: .65;
}

.prf-side-group-items {
    overflow: hidden;
    /* Generous cap — enough for any of our group sizes (≤ 4 items today). */
    max-height: 500px;
    opacity: 1;
    transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.prf-side-section.is-collapsed .prf-side-group-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.prf-side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .72rem;
    padding: .55rem .72rem;
    border-radius: .55rem;
    color: #94a3b8;
    font-size: .86rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.prf-side-link:hover {
    background: rgba(var(--prf-side-accent, 139, 92, 246), .10);
    color: #f1f5f9;
    transform: translateX(2px);
}

.prf-side-link.is-active {
    background: linear-gradient(135deg,
            rgba(var(--prf-side-accent, 139, 92, 246), .22),
            rgba(var(--prf-side-accent, 124, 58, 237), .12));
    color: #ffffff;
    border-color: rgba(var(--prf-side-accent, 99, 102, 241), .35);
    box-shadow: 0 6px 16px -8px rgba(var(--prf-side-accent, 99, 102, 241), .55);
}

.prf-side-link.is-active::before {
    content: "";
    position: absolute;
    left: -.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: rgb(var(--prf-side-accent, 167, 139, 250));
    box-shadow: 0 0 8px rgba(var(--prf-side-accent, 167, 139, 250), .7);
}

.prf-side-ico {
    font-size: 1rem;
    line-height: 1;
    width: 1.2rem;
    text-align: center;
    opacity: .85
}

.prf-side-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .72rem;
    border-radius: .6rem;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(148, 163, 184, .12);
}

.prf-side-footer:hover {
    background: rgba(99, 102, 241, .08);
    color: #cbd5e1
}

/* Main panel */
.prf-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .72rem
}

.prf-section {
    display: none;
    animation: prfSplitIn .3s cubic-bezier(.16, 1, .3, 1) both
}

.prf-section.is-visible {
    display: block
}

.prf-sec-header {
    margin-bottom: 1.1rem
}

.prf-sec-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 .3rem
}

.prf-sec-header p {
    color: #94a3b8;
    font-size: .88rem;
    margin: 0
}

/* Top profile card — premium "Midnight Slate" surface */
.prf-topbar {
    background:
        radial-gradient(ellipse 60% 200px at 50% 0,
            rgba(124, 58, 237, 0.16),
            transparent 70%),
        linear-gradient(180deg,
            rgba(15, 20, 48, 0.78) 0%,
            rgba(12, 16, 41, 0.78) 100%);
    border: 1px solid rgba(167, 139, 250, 0.14);
    border-radius: 1.1rem;
    overflow: hidden;
    margin-bottom: 0;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(99, 102, 241, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.prf-topbar-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2rem;
    align-items: center;
    padding: 1.25rem 1.35rem 1.25rem 1.65rem;
}

.prf-topbar-avatar-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 3px;
    cursor: pointer;
}

.prf-topbar-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #0f172a
}

.prf-topbar-avatar-edit {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #0f172a;
    background: #6366f1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.prf-topbar-avatar-edit svg {
    width: 14px;
    height: 14px
}

.prf-topbar-avatar-edit:hover {
    background: #5457e0;
    color: #fff
}

.prf-topbar-info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0
}

.prf-topbar-name-row {
    display: flex;
    flex-direction: column;
    gap: .15rem
}

.prf-topbar-name {
    font-size: 2rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    line-height: 1.1
}

.prf-topbar-username {
    font-size: .95rem;
    color: #a5b4fc;
    font-weight: 600
}

.prf-topbar-bio {
    font-size: .9rem;
    color: #cbd5e1;
    margin: .3rem 0 0;
    max-width: 60ch;
    line-height: 1.5
}

.prf-topbar-meta {
    font-size: .82rem;
    color: #94a3b8;
    margin: .15rem 0 0
}

.prf-topbar-dot {
    padding: 0 .4rem;
    color: #64748b
}

.prf-topbar-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.prf-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: .6rem 1rem;
    border-radius: .6rem;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    background: #6366f1;
    color: #fff;
    border: 1px solid transparent;
}

.prf-topbar-btn:hover {
    background: #5457e0;
    color: #fff
}

.prf-topbar-btn--ghost {
    background: transparent;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, .24)
}

.prf-topbar-btn--ghost:hover {
    background: rgba(148, 163, 184, .08)
}

.prf-topbar-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(99, 102, 241, .06);
    background: rgba(99, 102, 241, .05);
}

.prf-topbar-stat {
    padding: .95rem .6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    border-right: 1px solid rgba(99, 102, 241, .05);
}

.prf-topbar-stat:last-child {
    border-right: none
}

.prf-topbar-stat-ico {
    font-size: .95rem;
    opacity: .9
}

.prf-topbar-stat strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1
}

.prf-topbar-stat span {
    font-size: .78rem;
    color: #94a3b8
}

/* Anchor stats (Posts / Followers / Following) become clickable links —
 * the static one (Likes) keeps the plain look. */
a.prf-topbar-stat {
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}

a.prf-topbar-stat:hover {
    background: rgba(124, 58, 237, .12);
}

a.prf-topbar-stat:hover strong {
    color: #c4b5fd;
}

.prf-topbar-stat--static {
    cursor: default;
}

/* Feed width */
.prf-feed-wrap {
    max-width: none;
    margin: 0;
    width: 100%
}

/* Overview tiles + helpers */
.prf-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem;
    margin-bottom: 1.3rem
}

.prf-tile {
    background: rgba(15, 23, 42, .55);
    border: 1px solid rgba(99, 102, 241, .07);
    border-radius: 1rem;
    padding: 1rem;
    text-decoration: none;
    color: #e2e8f0;
}

.prf-tile:hover {
    background: rgba(99, 102, 241, .08);
    border-color: rgba(99, 102, 241, .28)
}

.prf-tile-ico {
    font-size: 1.25rem;
    margin-bottom: .3rem
}

.prf-tile-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff
}

.prf-tile-label {
    font-size: .76rem;
    color: #94a3b8
}

.prf-link-sm {
    font-size: .76rem;
    font-weight: 600;
    color: #a5b4fc;
    text-decoration: none
}

.prf-link-sm:hover {
    color: #c4b5fd
}

.prf-empty-mini {
    color: #64748b;
    font-size: .84rem;
    text-align: center;
    padding: 1rem 0
}

.prf-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .2rem;
    color: #cbd5e1;
    text-decoration: none;
    border-bottom: 1px solid rgba(148, 163, 184, .08);
}

.prf-mini-row:last-of-type {
    border-bottom: none
}

.prf-mini-row:hover {
    color: #f1f5f9
}

.prf-mini-row-status {
    font-size: .72rem;
    color: #94a3b8
}

.prf-mini-row-amt {
    font-weight: 700;
    color: #a5b4fc
}

/* CTA sections */
.prf-cta-card {
    text-align: center;
    padding: 2.3rem 1.6rem;
    background: rgba(15, 23, 42, .55);
    border: 1px solid rgba(99, 102, 241, .07);
    border-radius: 1rem;
}

.prf-cta-card-icon {
    font-size: 2.2rem;
    margin-bottom: .7rem
}

.prf-cta-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 .4rem
}

.prf-cta-card p {
    color: #94a3b8;
    font-size: .88rem;
    margin: 0 auto 1.2rem;
    max-width: 48ch;
    line-height: 1.55
}

.prf-cta-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.3rem;
    border-radius: .6rem;
    background: #6366f1;
    color: #fff;
    font-weight: 700;
    font-size: .86rem;
    text-decoration: none;
}

.prf-cta-card-btn:hover {
    background: #5457e0;
    color: #fff
}

/* About Me section */
.prf-about-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.prf-about-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(139, 92, 246, .08);
}

.prf-about-row:last-child {
    border-bottom: none;
}

.prf-about-label {
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
    font-weight: 500;
}

.prf-about-value {
    font-size: .85rem;
    color: #e2e8f0;
    font-weight: 600;
}

/* Wishlist grid */
.prf-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: .5rem 0;
}

.prf-wishlist-card {
    position: relative;
    background: rgba(15, 15, 40, .5);
    border: 1px solid rgba(139, 92, 246, .12);
    border-radius: 12px;
    overflow: visible;
    transition: border-color .2s, transform .2s;
}

.prf-wishlist-card:hover {
    border-color: rgba(139, 92, 246, .35);
    transform: translateY(-2px);
}

.prf-wishlist-card-img-wrap {
    display: block;
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.prf-wishlist-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prf-wishlist-card-body {
    padding: .6rem .75rem;
    display: flex;
    flex-direction: column;
}

.prf-wishlist-card-brand {
    font-size: .72rem;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .15rem;
}

.prf-wishlist-card-name {
    font-size: .85rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .2rem;
}

.prf-wishlist-card-price {
    font-size: .82rem;
    color: #a78bfa;
    font-weight: 600;
}

.prf-wishlist-card-remove {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    border: none;
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
}

.prf-wishlist-card:hover .prf-wishlist-card-remove {
    opacity: 1;
}

.prf-wishlist-card-remove:hover {
    background: rgba(248, 113, 113, .2);
}

/* Wishlist variant picker popover */
.prf-wl-vp {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    min-width: 200px;
    max-width: 260px;
    background: rgba(15, 18, 36, 0.95);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
}

.prf-wl-vp-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.prf-wl-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(108, 99, 255, 0.2);
    border-top-color: #6C63FF;
    border-radius: 50%;
    animation: prf-wl-spin 0.8s linear infinite;
}

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

.prf-wl-vp-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.prf-wl-vp-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.prf-wl-vp-colors,
.prf-wl-vp-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.prf-wl-vp-pill {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: Inter, sans-serif;
}

.prf-wl-vp-pill:hover:not(:disabled) {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
}

.prf-wl-vp-pill.is-active {
    background: rgba(124, 58, 237, 0.3);
    border-color: #7c3aed;
    color: #fff;
}

.prf-wl-vp-confirm {
    width: 100%;
    padding: 0.45rem 0;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed, #6C63FF);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-family: Inter, sans-serif;
}

.prf-wl-vp-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Wishlist toast */
.prf-wl-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Wishlist card cart button */
.prf-wishlist-card-cart {
    margin-top: 0.4rem;
    padding: 0.45rem 0;
    width: 100%;
    background: linear-gradient(135deg, #7c3aed, #6C63FF);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.prf-wishlist-card-cart:hover {
    opacity: 0.85;
}

/* Right panel */
.prf-right {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prf-side-card {
    background:
        radial-gradient(ellipse 100% 180px at 50% 0,
            rgba(124, 58, 237, 0.12),
            transparent 70%),
        linear-gradient(180deg,
            rgba(15, 20, 48, 0.78) 0%,
            rgba(12, 16, 41, 0.78) 100%);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    border: 1px solid rgba(167, 139, 250, 0.14);
    border-radius: 1rem;
    padding: 1.15rem;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(99, 102, 241, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.prf-side-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 .75rem
}

.prf-side-card-text {
    color: #cbd5e1;
    font-size: .86rem;
    line-height: 1.55;
    margin: 0 0 .8rem
}

.prf-side-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem 0;
    color: #cbd5e1;
    font-size: .84rem
}

.prf-side-row-ico {
    width: 1.1rem;
    text-align: center;
    color: #94a3b8
}

.prf-quick-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .1rem;
    color: #cbd5e1;
    font-size: .85rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(148, 163, 184, .05);
}

.prf-quick-link:last-of-type {
    border-bottom: none
}

.prf-quick-link:hover {
    color: #fff
}

.prf-quick-link-label {
    flex: 1
}

.prf-quick-link-chev {
    color: #64748b
}

.prf-quick-link:hover .prf-quick-link-chev {
    color: #a5b4fc;
    transform: translateX(2px)
}

.prf-pro-card {
    background: linear-gradient(155deg, #6d28d9 0%, #7c3aed 60%, #5b21b6 100%);
    border: 1px solid rgba(167, 139, 250, .28);
    border-radius: 1rem;
    padding: 1.15rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 14px 34px rgba(91, 33, 182, .32),
        0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.prf-pro-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: radial-gradient(circle at 88% 14%, rgba(255, 255, 255, .24), transparent 46%);
    pointer-events: none;
}

.prf-pro-card::after {
    content: '';
    position: absolute;
    left: -35%;
    top: -120%;
    width: 70%;
    height: 260%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .18) 45%, transparent 80%);
    transform: rotate(12deg);
    animation: prfProSheen 6s ease-in-out infinite;
    pointer-events: none;
}

.prf-pro-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .45rem;
    text-shadow: 0 2px 10px rgba(76, 29, 149, .45);
    position: relative;
}

.prf-pro-card-text {
    color: rgba(255, 255, 255, .9);
    font-size: .84rem;
    line-height: 1.55;
    margin: 0 0 .9rem
}

.prf-pro-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .62rem;
    border-radius: .6rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #4f46e5 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .35), inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    position: relative;
    overflow: hidden;
}

.prf-pro-card-btn::before {
    content: '';
    position: absolute;
    left: -120%;
    top: 0;
    height: 100%;
    width: 60%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .42) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left .55s ease;
}

.prf-pro-card-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 30px rgba(99, 102, 241, .46), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.prf-pro-card-btn:hover::before {
    left: 135%
}

@keyframes prfProSheen {

    0%,
    65%,
    100% {
        transform: translateX(0) rotate(12deg);
        opacity: .35
    }

    80% {
        transform: translateX(145%) rotate(12deg);
        opacity: .8
    }
}

/* Responsive */
@media(max-width:1180px) {
    .prf-dash {
        grid-template-columns: 208px minmax(0, 1fr)
    }

    .prf-right {
        display: none
    }
}

@media(max-width:900px) {
    .prf-dash {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .prf-side {
        position: static
    }

    .prf-side-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .3rem
    }

    .prf-side-link {
        flex: 1 1 auto;
        min-width: 130px;
        justify-content: center
    }

    /* On mobile each group spans the whole row so toggle + items stay
     * together and don't break across columns. */
    .prf-side-section {
        flex: 1 0 100%;
    }

    .prf-side-group {
        margin: 0;
    }

    .prf-topbar-head {
        grid-template-columns: auto 1fr;
        gap: 1rem
    }

    .prf-topbar-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        width: 100%
    }

    .prf-topbar-btn {
        flex: 1 1 auto;
        min-width: 0
    }
}

@media(max-width:560px) {
    .prf-side-link span:not(.prf-side-ico) {
        font-size: .8rem
    }

    .prf-topbar-name {
        font-size: 1.4rem
    }

    .prf-topbar-stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .prf-topbar-stat:nth-child(2) {
        border-right: none
    }

    .prf-topbar-stat:nth-child(1),
    .prf-topbar-stat:nth-child(2) {
        border-bottom: 1px solid rgba(99, 102, 241, .12)
    }
}

/* ── Ambient Background ── */
.prf-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden
}

.prf-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .18
}

.prf-bg-blob--1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #6366f1, transparent);
    top: -20%;
    left: -15%;
    animation: blobFloat 22s ease-in-out infinite
}

.prf-bg-blob--2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #8b5cf6, transparent);
    bottom: -15%;
    right: -10%;
    animation: blobFloat 22s ease-in-out infinite -8s
}

.prf-bg-blob--3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ec4899, transparent);
    top: 40%;
    left: 50%;
    animation: blobFloat 22s ease-in-out infinite -15s
}

/* Profile page — allow full stretch to footer */
.page-profile .as-main {
    min-height: calc(100vh - 60px)
}

/* Profile page — hide footer (social feed style) */
.page-profile .sc-footer,
.page-user-profile .sc-footer {
    display: none
}

/* Shared keyframes for dashboard / topbar slide-in */
@keyframes prfSplitIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ── Tab Navigation ── */
.prf-tabs {
    display: flex;
    gap: .35rem;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none
}

.prf-tabs::-webkit-scrollbar {
    display: none
}

.prf-tab {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.2rem;
    border-radius: 16px 16px 0 0;
    border: 1.5px solid rgba(99, 102, 241, .08);
    border-bottom: none;
    background: rgba(30, 41, 59, .25);
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative
}

.prf-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: transparent;
    border-radius: 2px;
    transition: all .25s
}

.prf-tab:hover {
    color: #e2e8f0;
    background: rgba(99, 102, 241, .05);
    border-color: rgba(99, 102, 241, .15)
}

.prf-tab.is-active {
    background: rgba(30, 41, 59, .55);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, .2)
}

.prf-tab.is-active::after {
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    left: 15%;
    right: 15%
}

.prf-tab-icon {
    font-size: .9rem
}

/* ── Tab Panels ── */
.prf-panels {
    position: relative
}

.prf-panel {
    display: none;
    animation: prfFadeIn .4s cubic-bezier(.16, 1, .3, 1)
}

.prf-panel.is-visible {
    display: block
}

@keyframes prfFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ── Card ── */
.prf-card {
    position: relative;
    background: linear-gradient(165deg, rgba(15, 18, 36, .7), rgba(20, 15, 45, .55));
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(139, 92, 246, .1);
    border-radius: 0 1.25rem 1.25rem 1.25rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .03)
}

.prf-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -25%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(139, 92, 246, .06), transparent 65%);
    pointer-events: none
}

.prf-card-header {
    padding: 1.3rem 1.6rem .9rem;
    border-bottom: 1px solid rgba(139, 92, 246, .08);
    position: relative
}

.prf-card-header h3 {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #a5b4fc;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem
}

.prf-card-header h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(165, 180, 252, .25), transparent)
}

.prf-card-body {
    padding: 1.6rem
}

/* ── Security section ── */
.prf-security-section {
    padding: 1.4rem 1.6rem
}

.prf-security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(30, 41, 59, .4);
    border: 1px solid rgba(99, 102, 241, .08);
    border-radius: .85rem;
    transition: all .2s
}

.prf-security-item:hover {
    border-color: rgba(99, 102, 241, .18);
    background: rgba(30, 41, 59, .55)
}

.prf-security-info {
    display: flex;
    align-items: center;
    gap: .85rem
}

.prf-security-icon {
    font-size: 1.4rem;
    flex-shrink: 0
}

.prf-security-label {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    color: #f1f5f9
}

.prf-security-desc {
    margin: .15rem 0 0;
    font-size: .75rem;
    color: #64748b;
    line-height: 1.4
}

.prf-security-btn {
    padding: .55rem 1.2rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .78rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 3px 12px rgba(99, 102, 241, .3);
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap
}

.prf-security-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, .4)
}

@media(max-width:600px) {
    .prf-security-item {
        flex-direction: column;
        align-items: flex-start
    }

    .prf-security-btn {
        width: 100%;
        text-align: center
    }
}

/* ── Form elements ── */
.prf-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem
}

.prf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.prf-field {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.prf-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #94a3b8
}

.prf-input,
.prf-textarea,
.prf-select {
    width: 100%;
    padding: .72rem 1rem;
    border: 1.5px solid rgba(99, 102, 241, .1);
    border-radius: .75rem;
    background: rgba(15, 23, 42, .35);
    color: #e2e8f0;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: all .3s
}

.prf-input::placeholder,
.prf-textarea::placeholder {
    color: #475569
}

.prf-input:focus,
.prf-textarea:focus,
.prf-select:focus {
    border-color: rgba(99, 102, 241, .5);
    background: rgba(15, 23, 42, .55);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .08), 0 0 20px rgba(99, 102, 241, .04)
}

.prf-textarea {
    resize: vertical;
    min-height: 70px
}

.prf-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center
}

.prf-submit {
    width: 100%;
    padding: .85rem 1.4rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .92rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .3);
    transition: all .25s;
    margin-top: .5rem;
    position: relative;
    overflow: hidden
}

.prf-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent);
    opacity: 0;
    transition: opacity .25s
}

.prf-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .4)
}

.prf-submit:hover::before {
    opacity: 1
}

.prf-submit:active {
    transform: translateY(0)
}

/* ── Avatar upload area ── */
.prf-avatar-upload-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2.5rem;
    border: 2px dashed rgba(99, 102, 241, .18);
    border-radius: 1.25rem;
    background: rgba(99, 102, 241, .02);
    cursor: pointer;
    transition: all .25s;
    min-height: 160px
}

.prf-avatar-upload-area:hover {
    border-color: rgba(99, 102, 241, .4);
    background: rgba(99, 102, 241, .06);
    transform: translateY(-2px)
}

.prf-upload-icon {
    font-size: 2.2rem;
    opacity: .5
}

.prf-upload-text {
    font-size: .82rem;
    color: #64748b;
    text-align: center;
    margin: 0
}

.prf-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer
}

.prf-upload-preview {
    display: flex;
    justify-content: center;
    margin-top: .8rem
}

.prf-upload-preview img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(99, 102, 241, .25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25)
}

/* ── Avatar Management (current + change/delete) ── */
.prf-avatar-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem
}

.prf-avatar-current-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.prf-avatar-current-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(99, 102, 241, .3);
    background: rgba(15, 23, 42, .5);
    display: block;
    transition: filter .2s
}

.prf-avatar-current-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none
}

.prf-avatar-current-wrap:hover .prf-avatar-current-img {
    filter: brightness(.7)
}

.prf-avatar-current-wrap:hover .prf-avatar-current-overlay {
    opacity: 1
}

.prf-avatar-current-actions {
    display: flex;
    gap: .5rem
}

.prf-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem 1.1rem;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    border: 1.5px solid rgba(99, 102, 241, .15)
}

.prf-avatar-btn--change {
    background: rgba(99, 102, 241, .08);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, .2)
}

.prf-avatar-btn--change:hover {
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .4);
    transform: translateY(-1px)
}

.prf-avatar-btn--delete {
    background: rgba(239, 68, 68, .06);
    color: #f87171;
    border-color: rgba(239, 68, 68, .15)
}

.prf-avatar-btn--delete:hover {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .3);
    transform: translateY(-1px)
}

.prf-avatar-btn--cancel {
    background: rgba(255, 255, 255, .04);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, .1);
    padding: .75rem 1.2rem;
    border-radius: 14px;
    font-size: .88rem
}

.prf-avatar-btn--cancel:hover {
    background: rgba(255, 255, 255, .08);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, .2)
}

.prf-avatar-delete-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: rgba(239, 68, 68, .06);
    border: 1px solid rgba(239, 68, 68, .12);
    border-radius: .75rem;
    font-size: .82rem;
    color: #fca5a5;
    animation: prfFadeIn .2s ease
}

.prf-avatar-delete-confirm span {
    font-weight: 600
}

.prf-avatar-delete-confirm-actions {
    display: flex;
    gap: .4rem
}

.prf-avatar-form-actions {
    display: flex;
    gap: .5rem
}

.prf-avatar-form-actions .prf-submit {
    flex: 1
}

.prf-avatar-form-actions .prf-avatar-btn--cancel {
    flex-shrink: 0
}

/* ── Avatar Source Badge ── */
.prf-avatar-source-badge {
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 99px;
    letter-spacing: .04em
}

.prf-src--ai {
    background: rgba(168, 85, 247, .12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, .2)
}

.prf-src--preset {
    background: rgba(59, 130, 246, .1);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, .2)
}

.prf-src--upload {
    background: rgba(34, 197, 94, .1);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, .2)
}

/* Avatar Buttons — AI / Preset */
.prf-avatar-btn--ai {
    background: linear-gradient(135deg, rgba(168, 85, 247, .1), rgba(99, 102, 241, .1));
    color: #c084fc;
    border-color: rgba(168, 85, 247, .2)
}

.prf-avatar-btn--ai:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, .18), rgba(99, 102, 241, .18));
    border-color: rgba(168, 85, 247, .4);
    transform: translateY(-1px)
}

.prf-avatar-btn--preset {
    background: rgba(59, 130, 246, .08);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, .15)
}

.prf-avatar-btn--preset:hover {
    background: rgba(59, 130, 246, .14);
    border-color: rgba(59, 130, 246, .3);
    transform: translateY(-1px)
}

/* AI Status Spinner */
.prf-avatar-ai-status {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    background: rgba(168, 85, 247, .06);
    border: 1px solid rgba(168, 85, 247, .12);
    border-radius: .75rem;
    font-size: .82rem;
    color: #c084fc;
    animation: prfFadeIn .2s ease
}

.prf-avatar-ai-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(168, 85, 247, .2);
    border-top-color: #c084fc;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

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

/* ── Preset Grid ── */
.prf-avatar-presets {
    animation: prfFadeIn .2s ease
}

.prf-avatar-presets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem
}

.prf-avatar-presets-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #e2e8f0;
    font-weight: 700
}

.prf-avatar-presets-cats {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .75rem
}

.prf-preset-cat {
    padding: .3rem .7rem;
    border-radius: 99px;
    border: 1.5px solid rgba(99, 102, 241, .12);
    background: rgba(15, 23, 42, .3);
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s
}

.prf-preset-cat.is-active,
.prf-preset-cat:hover {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .3);
    color: #a5b4fc
}

.prf-avatar-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .6rem
}

.prf-preset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .5rem;
    border-radius: 14px;
    border: 2px solid rgba(99, 102, 241, .08);
    background: rgba(15, 23, 42, .3);
    cursor: pointer;
    transition: all .2s
}

.prf-preset-item:hover {
    border-color: rgba(99, 102, 241, .35);
    background: rgba(99, 102, 241, .06);
    transform: translateY(-2px)
}

.prf-preset-item img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(15, 23, 42, .5)
}

.prf-preset-item span {
    font-size: .62rem;
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
    line-height: 1.2
}

/* ── Lightbox ── */
.prf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out
}

.prf-lightbox.is-open {
    display: flex;
    animation: prfLbIn .35s ease
}

@keyframes prfLbIn {
    from {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.prf-lightbox-img {
    max-width: min(500px, 90vw);
    max-height: 80vh;
    border-radius: 1.5rem;
    object-fit: cover;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    border: 3px solid rgba(99, 102, 241, .25);
    cursor: default
}

.prf-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(8px);
    color: #e2e8f0;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    z-index: 1
}

.prf-lightbox-close:hover {
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .3);
    color: #f87171;
    transform: rotate(90deg) scale(1.1)
}

/* ── Profile Posts Grid ── */
.prf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.prf-new-post-btn {
    font-size: .72rem;
    font-weight: 700;
    color: #a5b4fc;
    text-decoration: none;
    padding: .35rem .8rem;
    border-radius: 99px;
    border: 1.5px solid rgba(99, 102, 241, .2);
    background: rgba(99, 102, 241, .06);
    transition: all .2s
}

.prf-new-post-btn:hover {
    background: rgba(99, 102, 241, .15);
    border-color: rgba(99, 102, 241, .4);
    color: #c7d2fe
}

.prf-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem
}

.prf-post-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: .6rem;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .04);
    transition: all .2s
}

.prf-post-thumb:hover {
    border-color: rgba(99, 102, 241, .2);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15)
}

.prf-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.prf-post-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    opacity: 0;
    transition: opacity .2s
}

.prf-post-thumb:hover .prf-post-thumb-overlay {
    opacity: 1
}

.prf-post-stat {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 700
}

.prf-posts-empty {
    text-align: center;
    color: #64748b;
    font-size: .88rem;
    padding: 2rem 0
}

/* ── Social Stats (Facebook-style) ── */
.prf-social-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: .8rem 0 .4rem;
    padding: .6rem 0;
    background: rgba(99, 102, 241, .04);
    border-radius: .75rem;
    border: 1px solid rgba(99, 102, 241, .08)
}

.prf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    flex: 1;
    padding: .3rem 0;
    cursor: default;
    transition: all .2s;
    border-radius: .5rem
}

.prf-stat:hover {
    background: rgba(99, 102, 241, .08)
}

.prf-stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -.02em;
    line-height: 1.2
}

.prf-stat-label {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b
}

.prf-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .08);
    flex-shrink: 0
}

/* ── Facebook-style Composer ── */
.prf-composer {
    background: rgba(10, 10, 30, 0.6);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(139, 92, 246, .1);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    margin-bottom: .72rem
}

.prf-composer-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.2rem
}

.prf-composer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(99, 102, 241, .2);
    background: rgba(15, 23, 42, .5);
    flex-shrink: 0
}

.prf-composer-input {
    flex: 1;
    padding: .7rem 1.1rem;
    border-radius: 99px;
    border: 1.5px solid rgba(99, 102, 241, .1);
    background: rgba(15, 23, 42, .35);
    color: #94a3b8;
    font-size: .88rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all .2s
}

.prf-composer-input:hover {
    border-color: rgba(99, 102, 241, .3);
    background: rgba(15, 23, 42, .5);
    color: #e2e8f0
}

.prf-composer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .15), transparent);
    margin: 0 1.2rem
}

.prf-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: .5rem .5rem
}

.prf-composer-action {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 99px;
    transition: all .15s
}

.prf-composer-action:hover {
    background: rgba(99, 102, 241, .08);
    color: #e2e8f0
}

.prf-composer-action-icon {
    font-size: 1.1rem
}

/* ── Facebook-style Feed Cards ── */
.prf-feed {
    display: flex;
    flex-direction: column;
    gap: .72rem
}

.prf-feed-card {
    position: relative;
    background: rgba(10, 10, 30, 0.6);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(139, 92, 246, .1);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: all .3s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15)
}

.prf-feed-card:hover {
    border-color: rgba(139, 92, 246, .25);
    box-shadow: 0 8px 32px rgba(139, 92, 246, .1)
}

/* Feed Card Header */
.prf-feed-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem
}

.prf-feed-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(99, 102, 241, .25);
    background: rgba(15, 23, 42, .5)
}

.prf-feed-card-info {
    flex: 1;
    min-width: 0
}

.prf-feed-card-name {
    font-weight: 700;
    font-size: .88rem;
    color: #e2e8f0;
    line-height: 1.3
}

.prf-feed-card-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    color: #475569
}

.prf-feed-card-time {
    color: #475569
}

.prf-feed-card-type {
    color: #a5b4fc;
    background: rgba(99, 102, 241, .1);
    padding: .1rem .45rem;
    border-radius: 99px;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em
}

.prf-feed-card-menu {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: none;
    color: #64748b;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
    opacity: .4
}

.prf-feed-card:hover .prf-feed-card-menu {
    opacity: 1
}

.prf-feed-card-menu:hover {
    background: rgba(239, 68, 68, .12);
    color: #f87171
}

/* Feed Card Body — caption/content */
.prf-feed-card-text {
    padding: .4rem 1rem .6rem
}

.prf-feed-card-caption {
    font-size: .92rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 .2rem;
    line-height: 1.45
}

.prf-feed-card-content {
    font-size: .84rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* Feed Card Image */
.prf-feed-card-img-wrap {
    position: relative;
    cursor: pointer;
    overflow: hidden
}

.prf-feed-card-img {
    width: 100%;
    max-height: 700px;
    object-fit: contain;
    display: block;
    background: rgba(0, 0, 0, .3);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1)
}

.prf-feed-card:hover .prf-feed-card-img {
    transform: scale(1.01)
}

/* Profile Carousel */
.prf-carousel {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.prf-carousel-track {
    display: flex;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.prf-carousel-slide {
    min-width: 100%;
    width: 100%;
    max-height: 700px;
    object-fit: contain;
    display: block;
    background: rgba(0, 0, 0, .3);
}

.prf-carousel-prev,
.prf-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s;
}

.prf-carousel-prev:hover,
.prf-carousel-next:hover {
    background: rgba(0, 0, 0, .75);
}

.prf-carousel-prev {
    left: .5rem;
}

.prf-carousel-next {
    right: .5rem;
}

.prf-carousel-dots {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .3rem;
    z-index: 2;
}

.prf-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.prf-carousel-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

.prf-carousel-counter {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 99px;
    z-index: 2;
}

.prf-feed-card-img-count {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(6px);
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    color: #fff
}

/* Feed Card Reaction Summary */
.prf-feed-card-reactions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem 1rem;
    font-size: .78rem;
    color: #64748b
}

.prf-feed-card-reactions-left {
    display: flex;
    align-items: center;
    gap: .3rem
}

.prf-feed-card-reactions-right {
    display: flex;
    gap: .8rem
}

/* Feed Card Actions Bar */
.prf-feed-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, .06);
    margin: 0 1rem
}

.prf-feed-card-actions {
    display: flex;
    align-items: center;
    padding: .25rem .5rem
}

.prf-feed-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    flex: 1;
    padding: .55rem .5rem;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: .6rem;
    transition: all .15s
}

.prf-feed-action:hover {
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0
}

.prf-feed-action-icon {
    font-size: 1.05rem
}

.prf-feed-action--liked {
    color: #f472b6
}

.prf-feed-action--liked .prf-feed-action-icon {
    color: #f472b6
}

.prf-feed-action--saved {
    color: #facc15
}

.prf-feed-action--saved .prf-feed-action-icon {
    color: #facc15
}

/* Feed Card Inline Comments */
.prf-feed-card-comments {
    padding: .5rem 1rem .8rem
}

.prf-feed-comment {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem
}

.prf-feed-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(15, 23, 42, .5);
    cursor: pointer;
    transition: opacity .15s
}

.prf-feed-comment-avatar:hover {
    opacity: .8
}

.prf-feed-comment-bubble {
    background: rgba(15, 23, 42, .4);
    border-radius: .8rem;
    padding: .4rem .7rem;
    flex: 1;
    min-width: 0
}

.prf-feed-comment-name {
    font-weight: 700;
    font-size: .72rem;
    color: #a5b4fc;
    cursor: pointer;
    transition: color .15s
}

.prf-feed-comment-name:hover {
    color: #c7d2fe
}

.prf-feed-comment-text {
    font-size: .8rem;
    color: #cbd5e1;
    line-height: 1.45;
    margin: .1rem 0 0
}

.prf-feed-comment-time {
    font-size: .6rem;
    color: #475569;
    margin-top: .15rem
}

.prf-feed-comment-input-row {
    display: flex;
    gap: .4rem;
    margin-top: .3rem
}

.prf-feed-comment-input {
    flex: 1;
    padding: .5rem .75rem;
    border: 1.5px solid rgba(99, 102, 241, .1);
    border-radius: 99px;
    background: rgba(15, 23, 42, .35);
    color: #e2e8f0;
    font-size: .8rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s
}

.prf-feed-comment-input:focus {
    border-color: rgba(99, 102, 241, .4)
}

.prf-feed-comment-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s
}

.prf-feed-comment-send:hover {
    transform: scale(1.08)
}

/* Feed Card Delete Confirmation Bar */
.prf-feed-card-delete-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .55rem 1rem;
    background: rgba(239, 68, 68, .08);
    border-top: 1px solid rgba(239, 68, 68, .15);
    font-size: .8rem;
    color: #fca5a5;
    animation: prfFadeIn .2s ease
}

.prf-feed-card-delete-bar span {
    font-weight: 600
}

.prf-feed-card-confirm-yes {
    padding: .3rem .8rem;
    border-radius: 99px;
    border: 1.5px solid rgba(239, 68, 68, .3);
    background: rgba(239, 68, 68, .15);
    color: #f87171;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s
}

.prf-feed-card-confirm-yes:hover {
    background: rgba(239, 68, 68, .3);
    border-color: rgba(239, 68, 68, .5)
}

.prf-feed-card-confirm-no {
    padding: .3rem .8rem;
    border-radius: 99px;
    border: 1.5px solid rgba(99, 102, 241, .15);
    background: rgba(99, 102, 241, .06);
    color: #a5b4fc;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s
}

.prf-feed-card-confirm-no:hover {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .3)
}

/* ── Responsive (legacy split layout was removed) ── */
@media(max-width:640px) {
    .prf-form-grid {
        grid-template-columns: 1fr
    }

    .prf-card {
        border-radius: 0 0 1rem 1rem
    }

    .prf-card-body {
        padding: 1.2rem
    }

    .prf-composer {
        border-radius: 1rem
    }

    .prf-feed-card {
        border-radius: 1rem
    }
}

/* ═══ DISCOVER — Premium Fashion Experience ═══ */
.disc {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    min-height: 70vh
}

/* ── Desktop: two-column layout — card left, sidebar right ── */
@media(min-width:1024px) {
    .disc {
        max-width: 1140px
    }

    .disc-feed-layout {
        display: grid;
        grid-template-columns: minmax(380px, 480px) 1fr;
        gap: 1.5rem;
        align-items: start
    }

    .disc-feed-main {
        position: sticky;
        top: 120px
    }

    .disc-feed-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1rem
    }

    /* ── Sidebar DNA Card — dark dramatic ── */
    .disc-sidebar-card--dna {
        background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
        border: 1px solid rgba(99, 102, 241, .2);
        border-radius: 1.25rem;
        padding: 1.2rem 1.3rem;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(15, 23, 42, .25), 0 0 0 1px rgba(99, 102, 241, .08)
    }

    .disc-sidebar-card--dna::before {
        content: '';
        position: absolute;
        top: -40%;
        right: -30%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(139, 92, 246, .2), transparent 70%);
        pointer-events: none
    }

    .disc-sidebar-card--dna h4 {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #a5b4fc;
        margin: 0 0 1rem;
        display: flex;
        align-items: center;
        gap: .4rem
    }

    .disc-sidebar-card--dna h4::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(165, 180, 252, .3), transparent)
    }

    .disc-sidebar-placeholder {
        font-size: .8rem;
        color: #64748b;
        text-align: center;
        padding: .8rem 0
    }

    .disc-sidebar-dna {
        display: flex;
        flex-direction: column;
        gap: .85rem
    }

    .disc-sidebar-dna .disc-dna-axis-labels {
        font-size: .68rem;
        color: #94a3b8;
        font-weight: 600;
        margin-bottom: .25rem
    }

    .disc-sidebar-dna .disc-dna-axis-bar {
        height: 6px;
        background: rgba(255, 255, 255, .06);
        border-radius: 99px
    }

    .disc-sidebar-dna .disc-dna-axis-fill {
        background: linear-gradient(90deg, #6366f1, #a78bfa, #c084fc)
    }

    .disc-sidebar-dna .disc-dna-axis-dot {
        width: 12px;
        height: 12px;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, .4), 0 0 12px rgba(139, 92, 246, .3)
    }

    .disc-sidebar-dna .disc-dna-axis-val {
        font-size: .65rem;
        color: #c4b5fd;
        font-weight: 700
    }

    /* ── Sidebar Stats — dark gradient cards ── */
    .disc-sidebar-card--stats {
        background: rgba(30, 41, 59, .5);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 1.25rem;
        padding: 1.2rem 1.3rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .08)
    }

    .disc-sidebar-card--stats h4 {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #94a3b8;
        margin: 0 0 .8rem;
        display: flex;
        align-items: center;
        gap: .4rem
    }

    .disc-sidebar-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .6rem
    }

    .disc-sidebar-stat {
        position: relative;
        text-align: center;
        padding: .75rem .4rem;
        border-radius: 1rem;
        overflow: hidden;
        transition: transform .2s
    }

    .disc-sidebar-stat:hover {
        transform: translateY(-2px)
    }

    .disc-sidebar-stat:nth-child(1) {
        background: rgba(219, 39, 119, .1);
        border: 1px solid rgba(219, 39, 119, .18)
    }

    .disc-sidebar-stat:nth-child(2) {
        background: rgba(37, 99, 235, .1);
        border: 1px solid rgba(37, 99, 235, .18)
    }

    .disc-sidebar-stat:nth-child(3) {
        background: rgba(22, 163, 74, .1);
        border: 1px solid rgba(22, 163, 74, .18)
    }

    .disc-sidebar-stat:nth-child(1) .disc-sidebar-stat-num {
        color: #f472b6
    }

    .disc-sidebar-stat:nth-child(2) .disc-sidebar-stat-num {
        color: #60a5fa
    }

    .disc-sidebar-stat:nth-child(3) .disc-sidebar-stat-num {
        color: #4ade80
    }

    .disc-sidebar-stat-num {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1
    }

    .disc-sidebar-stat-label {
        display: block;
        font-size: .58rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-weight: 700;
        margin-top: .3rem
    }

    /* ── Sidebar Activity — dark timeline ── */
    .disc-sidebar-card--activity {
        background: rgba(30, 41, 59, .5);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 1.25rem;
        padding: 1.2rem 1.3rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .08)
    }

    .disc-sidebar-card--activity h4 {
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #94a3b8;
        margin: 0 0 .8rem;
        display: flex;
        align-items: center;
        gap: .4rem
    }

    .disc-sidebar-card--activity .disc-feed-log {
        margin: 0;
        gap: 4px
    }

    .disc-sidebar-card--activity .disc-log-item {
        background: rgba(30, 41, 59, .5);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: .65rem;
        padding: .45rem .7rem;
        font-size: .76rem;
        transition: all .2s;
        color: #e2e8f0
    }

    .disc-sidebar-card--activity .disc-log-item:hover {
        background: rgba(30, 41, 59, .7);
        transform: translateX(3px);
        box-shadow: 0 2px 8px rgba(99, 102, 241, .1)
    }
}

@media(min-width:1280px) {
    .disc {
        max-width: 1260px
    }

    .disc-feed-layout {
        grid-template-columns: minmax(420px, 520px) 1fr;
        gap: 2rem
    }
}

/* Mobile: sidebar hidden */
@media(max-width:1023px) {
    .disc-feed-layout {
        display: block
    }

    .disc-feed-sidebar {
        display: none
    }
}

/* Ambient background blobs */
.disc-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden
}

.disc-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
    animation: blobFloat 20s ease-in-out infinite
}

.disc-bg-blob--1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #4338ca, transparent);
    top: -10%;
    left: -10%;
    animation-delay: 0s
}

.disc-bg-blob--2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #be185d, transparent);
    bottom: 10%;
    right: -8%;
    animation-delay: -7s
}

.disc-bg-blob--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #6d28d9, transparent);
    top: 40%;
    left: 50%;
    animation-delay: -14s
}

@keyframes blobFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    33% {
        transform: translate(30px, -25px) scale(1.05)
    }

    66% {
        transform: translate(-20px, 20px) scale(.95)
    }
}

/* ── Tab Bar — frosted glass pill style ── */
.disc-tabs {
    position: sticky;
    top: 56px;
    z-index: 20;
    background: rgba(17, 24, 39, .8);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: .5rem 0
}

.disc-tabs-inner {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 .5rem;
    scrollbar-width: none
}

.disc-tabs-inner::-webkit-scrollbar {
    display: none
}

.disc-tab {
    flex-shrink: 0;
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    border: none;
    background: none;
    border-radius: 99px;
    transition: all .2s;
    white-space: nowrap;
    position: relative
}

.disc-tab:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, .06)
}

.disc-tab.is-active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(99, 102, 241, .25)
}

.disc-panel {
    display: none
}

.disc-panel.is-visible {
    display: block;
    animation: fadeUp .35s cubic-bezier(.16, 1, .3, 1)
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* ── Onboarding — Hero matching Home page ── */
.disc-onboard {
    margin: 0
}

.disc-onboard-hero {
    position: relative;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 2rem 1.5rem;
    background: linear-gradient(145deg, #1e293b 0%, #1e1b4b 40%, #312e81 65%, #1e293b 100%)
}

.disc-onboard-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.disc-onboard-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .3
}

.disc-onboard-blob--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #6366f1, transparent);
    top: -20%;
    left: -10%;
    animation: blobFloat 20s ease-in-out infinite
}

.disc-onboard-blob--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ec4899, transparent);
    bottom: -10%;
    right: -5%;
    animation: blobFloat 20s ease-in-out infinite -7s
}

.disc-onboard-blob--3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #8b5cf6, transparent);
    top: 30%;
    right: 25%;
    animation: blobFloat 20s ease-in-out infinite -14s
}

.disc-onboard-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%
}

@media(min-width:768px) {
    .disc-onboard-content {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 3rem
    }
}

@media(min-width:1024px) {
    .disc-onboard-content {
        gap: 4rem
    }
}

/* Text side — matching home hero */
.disc-onboard-text {
    display: flex;
    flex-direction: column;
    gap: 0
}

.disc-onboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #a5b4fc;
    margin-bottom: 1.2rem;
    padding: .4rem .8rem .4rem .5rem;
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 99px;
    width: fit-content
}

.disc-onboard-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    animation: dotPulse 2s ease-in-out infinite
}

.disc-onboard-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 1.2rem;
    letter-spacing: -.04em;
    color: #fff
}

.disc-onboard-title-accent {
    background: linear-gradient(135deg, #a78bfa, #818cf8, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.disc-onboard-sub {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 44ch;
    margin: 0 0 1.8rem
}

.disc-onboard-gender {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap
}

/* CTAs — matching home hero */
.disc-onboard-ctas {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 340px
}

.disc-onboard-cta-main {
    padding: .9rem 1.8rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .35);
    transition: all .2s;
    letter-spacing: -.01em
}

.disc-onboard-cta-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .45)
}

.disc-onboard-cta-skip {
    padding: .65rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: .82rem;
    border: 1.5px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all .2s
}

.disc-onboard-cta-skip:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    color: #fff
}

/* Mini stats */
.disc-onboard-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08)
}

.disc-onboard-stat {
    display: flex;
    flex-direction: column;
    gap: .1rem
}

.disc-onboard-stat-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: -.02em
}

.disc-onboard-stat-label {
    font-size: .62rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600
}

.disc-onboard-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .1)
}

/* Visual side — DNA helix */
.disc-onboard-visual {
    display: flex;
    justify-content: center;
    align-items: center
}

.disc-onboard-helix-wrap {
    text-align: center;
    position: relative
}

.disc-onboard-helix-label {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f1f5f9;
    margin-top: .8rem;
    letter-spacing: -.02em
}

.disc-onboard-helix-desc {
    font-size: .82rem;
    color: #94a3b8;
    margin: .3rem auto 0;
    max-width: 28ch;
    line-height: 1.5
}

/* ═══ Big onboard DNA helix — scaled up from base ═══ */
.dna-vis--onboard {
    height: 280px;
    margin-bottom: 0
}

.dna-vis--onboard .dna-helix {
    width: 110px;
    height: 220px
}

.dna-vis--onboard .dna-rung {
    top: calc(var(--i) * 22px);
    background: linear-gradient(90deg, rgba(129, 140, 248, .25), rgba(168, 85, 247, .18), rgba(244, 114, 182, .25))
}

.dna-vis--onboard .dna-rung::before,
.dna-vis--onboard .dna-rung::after {
    width: 16px;
    height: 16px;
    top: -7px
}

.dna-vis--onboard .dna-rung::before {
    left: -8px;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    box-shadow: 0 0 20px rgba(99, 102, 241, .7), 0 0 8px rgba(99, 102, 241, .4)
}

.dna-vis--onboard .dna-rung::after {
    right: -8px;
    background: linear-gradient(135deg, #f472b6, #ec4899);
    box-shadow: 0 0 20px rgba(236, 72, 153, .7), 0 0 8px rgba(236, 72, 153, .4)
}

.dna-vis--onboard .dna-orbit span {
    font-size: 1.15rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5))
}

.dna-vis--onboard .dna-glow-ring {
    width: 200px;
    height: 200px;
    border-color: rgba(99, 102, 241, .2);
    box-shadow: 0 0 50px rgba(99, 102, 241, .15), inset 0 0 35px rgba(139, 92, 246, .1)
}

@media(min-width:768px) {
    .dna-vis--onboard {
        height: 340px
    }

    .dna-vis--onboard .dna-helix {
        width: 130px;
        height: 260px
    }

    .dna-vis--onboard .dna-rung {
        top: calc(var(--i) * 26px)
    }

    .dna-vis--onboard .dna-rung::before,
    .dna-vis--onboard .dna-rung::after {
        width: 18px;
        height: 18px;
        top: -8px
    }

    .dna-vis--onboard .dna-rung::before {
        left: -9px;
        box-shadow: 0 0 24px rgba(99, 102, 241, .8), 0 0 10px rgba(99, 102, 241, .5)
    }

    .dna-vis--onboard .dna-rung::after {
        right: -9px;
        box-shadow: 0 0 24px rgba(236, 72, 153, .8), 0 0 10px rgba(236, 72, 153, .5)
    }

    .dna-vis--onboard .dna-orbit span {
        font-size: 1.3rem
    }

    .dna-vis--onboard .dna-glow-ring {
        width: 240px;
        height: 240px
    }
}

@media(min-width:1024px) {
    .dna-vis--onboard {
        height: 400px
    }

    .dna-vis--onboard .dna-helix {
        width: 150px;
        height: 300px
    }

    .dna-vis--onboard .dna-rung {
        top: calc(var(--i) * 30px)
    }

    .dna-vis--onboard .dna-rung::before,
    .dna-vis--onboard .dna-rung::after {
        width: 20px;
        height: 20px;
        top: -9px
    }

    .dna-vis--onboard .dna-rung::before {
        left: -10px;
        box-shadow: 0 0 28px rgba(99, 102, 241, .8), 0 0 12px rgba(99, 102, 241, .5)
    }

    .dna-vis--onboard .dna-rung::after {
        right: -10px;
        box-shadow: 0 0 28px rgba(236, 72, 153, .8), 0 0 12px rgba(236, 72, 153, .5)
    }

    .dna-vis--onboard .dna-orbit span {
        font-size: 1.5rem
    }

    .dna-vis--onboard .dna-glow-ring {
        width: 280px;
        height: 280px;
        box-shadow: 0 0 60px rgba(99, 102, 241, .18), inset 0 0 40px rgba(139, 92, 246, .12)
    }
}

.disc-gender-pill {
    padding: .55rem 1.1rem;
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 99px;
    font-size: .85rem;
    font-weight: 600;
    background: rgba(30, 41, 59, .5);
    color: #e2e8f0;
    cursor: pointer;
    transition: all .2s
}

.disc-gender-pill:hover {
    border-color: rgba(99, 102, 241, .4);
    background: rgba(99, 102, 241, .08);
    transform: translateY(-1px)
}

.disc-gender-pill.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3)
}

/* ── Premium CTA buttons ── */
.disc-cta-primary {
    display: block;
    width: 100%;
    padding: .85rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #111827, #1e293b);
    box-shadow: 0 4px 14px rgba(17, 24, 39, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: all .2s;
    letter-spacing: -.01em
}

.disc-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .28)
}

.disc-cta-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(17, 24, 39, .15)
}

.disc-cta-accent {
    display: block;
    width: 100%;
    padding: .85rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 14px rgba(99, 102, 241, .3);
    transition: all .2s
}

.disc-cta-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, .4)
}

.disc-cta-ghost {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    margin-top: .6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: .82rem;
    border: 1.5px solid rgba(255, 255, 255, .12);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all .2s
}

.disc-cta-ghost:hover {
    border-color: rgba(99, 102, 241, .4);
    color: #e2e8f0;
    background: rgba(30, 41, 59, .4)
}

.disc-cta-ghost-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: .82rem;
    border: 1.5px solid rgba(255, 255, 255, .15);
    background: transparent;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    transition: all .2s
}

.disc-cta-ghost-light:hover {
    border-color: rgba(255, 255, 255, .4);
    color: #fff
}

/* ── Section Header ── */
.disc-section-header {
    margin-bottom: 1.2rem;
    padding: 1rem 0
}

.disc-section-header h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .3rem;
    letter-spacing: -.02em
}

.disc-section-header p {
    font-size: .85rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5
}

/* ── Quiz — premium immersive experience ── */
.disc-quiz-wrap {
    position: relative;
    padding: 1.5rem 0;
    max-width: 680px;
    margin: 0 auto
}

/* Close button — floating glass */
.disc-quiz-close {
    position: absolute;
    top: .5rem;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(30, 41, 59, .6);
    backdrop-filter: blur(12px);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all .25s;
    z-index: 2
}

.disc-quiz-close:hover {
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .3);
    color: #f87171;
    transform: rotate(90deg) scale(1.1)
}

/* Progress bar — glowing gradient */
.disc-quiz-progress {
    height: 6px;
    background: rgba(255, 255, 255, .06);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: .5rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2)
}

.disc-quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
    border-radius: 99px;
    transition: width .5s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 0 12px rgba(99, 102, 241, .4), 0 0 4px rgba(139, 92, 246, .3);
    position: relative
}

.disc-quiz-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 10px rgba(167, 139, 250, .6), 0 0 20px rgba(167, 139, 250, .3);
    transition: opacity .3s
}

/* Counter — styled badge */
.disc-quiz-counter {
    font-size: .78rem;
    color: #a5b4fc;
    text-align: center;
    margin-bottom: 1.2rem;
    font-weight: 700;
    letter-spacing: .03em
}

/* Card — dramatic glass with glow */
.disc-quiz-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 41, 59, .7), rgba(30, 27, 75, .5));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: 1.5rem;
    padding: 2rem 1.8rem 1.8rem;
    animation: quizCardIn .4s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2), 0 0 0 1px rgba(99, 102, 241, .06), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden
}

.disc-quiz-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(99, 102, 241, .08), transparent 65%);
    pointer-events: none
}

@keyframes quizCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* Question text — accent line */
.disc-quiz-q {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
    line-height: 1.5;
    letter-spacing: -.02em;
    color: #f1f5f9;
    position: relative;
    padding-left: 1rem
}

.disc-quiz-q::before {
    content: '';
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 3px;
    border-radius: 99px;
    background: linear-gradient(180deg, #6366f1, #a78bfa)
}

/* Options — numbered cards with hover shine */
.disc-quiz-opts {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.disc-quiz-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1.1rem;
    border: 1.5px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(15, 23, 42, .4);
    font-size: .9rem;
    font-weight: 500;
    color: #cbd5e1;
    cursor: pointer;
    transition: all .2s cubic-bezier(.16, 1, .3, 1);
    text-align: left;
    overflow: hidden
}

.disc-quiz-opt::before {
    content: counter(quiz-opt, upper-alpha);
    counter-increment: quiz-opt;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: .72rem;
    font-weight: 800;
    color: #64748b;
    flex-shrink: 0;
    transition: all .2s;
    letter-spacing: .02em
}

.disc-quiz-opts {
    counter-reset: quiz-opt
}

.disc-quiz-opt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, .04), transparent);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none
}

/* Hover */
.disc-quiz-opt:hover {
    border-color: rgba(99, 102, 241, .35);
    background: rgba(99, 102, 241, .06);
    transform: translateX(4px);
    color: #e2e8f0
}

.disc-quiz-opt:hover::before {
    background: rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .3);
    color: #a5b4fc
}

.disc-quiz-opt:hover::after {
    opacity: 1
}

/* Selected — glowing accent */
.disc-quiz-opt.is-selected {
    border-color: rgba(99, 102, 241, .5);
    background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(139, 92, 246, .08));
    color: #e0e7ff;
    box-shadow: 0 0 20px rgba(99, 102, 241, .12), 0 4px 12px rgba(99, 102, 241, .08)
}

.disc-quiz-opt.is-selected::before {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .35)
}

.disc-quiz-opt.is-selected::after {
    opacity: 1;
    background: linear-gradient(135deg, rgba(99, 102, 241, .06), transparent)
}

/* Nav buttons — refined */
.disc-quiz-nav {
    display: flex;
    gap: .6rem;
    margin-top: 1.2rem
}

.disc-quiz-nav .as-btn {
    flex: 1;
    border-radius: 14px;
    padding: .75rem 1rem;
    font-weight: 700;
    font-size: .88rem;
    transition: all .2s
}

.disc-quiz-nav .as-btn-outline {
    border-color: rgba(255, 255, 255, .12);
    color: #94a3b8;
    background: rgba(255, 255, 255, .04)
}

.disc-quiz-nav .as-btn-outline:hover {
    border-color: rgba(255, 255, 255, .25);
    color: #e2e8f0;
    background: rgba(255, 255, 255, .08)
}

.disc-quiz-nav .as-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, .3)
}

.disc-quiz-nav .as-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, .4)
}

.disc-quiz-nav .as-btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.disc-quiz-nav .as-btn-outline:disabled {
    opacity: .3;
    cursor: not-allowed
}

/* Submit DNA button */
#quiz-submit {
    border-radius: 16px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(135deg, #6366f1, #7c3aed, #8b5cf6);
    box-shadow: 0 6px 24px rgba(99, 102, 241, .35), 0 0 40px rgba(139, 92, 246, .1);
    transition: all .25s
}

#quiz-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, .45), 0 0 60px rgba(139, 92, 246, .15)
}

/* Responsive — tighter on mobile */
@media(max-width:640px) {
    .disc-quiz-wrap {
        padding: 1rem 0
    }

    .disc-quiz-card {
        padding: 1.5rem 1.2rem 1.4rem;
        border-radius: 1.2rem
    }

    .disc-quiz-q {
        font-size: 1.05rem;
        padding-left: .85rem;
        margin-bottom: 1.2rem
    }

    .disc-quiz-opt {
        padding: .75rem .9rem;
        font-size: .85rem;
        border-radius: 14px
    }

    .disc-quiz-opt::before {
        width: 26px;
        height: 26px;
        font-size: .68rem;
        border-radius: 8px
    }
}

/* ── DNA Card — dramatic dark ── */
.disc-dna-card {
    position: relative;
    background: linear-gradient(145deg, #0f172a, #1e1b4b, #1e293b);
    color: #f9fafb;
    border-radius: 1.5rem;
    padding: 2.5rem 1.8rem;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .3)
}

.disc-dna-glow {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, .2), transparent 60%);
    pointer-events: none
}

/* ── 3D DNA Helix — base styles ── */
.dna-vis {
    position: relative;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    perspective: 800px
}

.dna-helix {
    position: relative;
    width: 70px;
    height: 130px;
    transform-style: preserve-3d;
    animation: helixSpin 8s linear infinite
}

@keyframes helixSpin {
    to {
        transform: rotateY(360deg)
    }
}

.dna-rung {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(129, 140, 248, .2), rgba(168, 85, 247, .15), rgba(244, 114, 182, .2));
    border-radius: 99px;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 36deg));
    top: calc(var(--i) * 13px)
}

.dna-rung::before,
.dna-rung::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -4px
}

.dna-rung::before {
    left: -5px;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    box-shadow: 0 0 12px rgba(99, 102, 241, .5), 0 0 4px rgba(99, 102, 241, .3)
}

.dna-rung::after {
    right: -5px;
    background: linear-gradient(135deg, #f472b6, #ec4899);
    box-shadow: 0 0 12px rgba(236, 72, 153, .5), 0 0 4px rgba(236, 72, 153, .3)
}

.dna-orbit {
    position: absolute;
    inset: -10px;
    pointer-events: none
}

.dna-orbit span {
    position: absolute;
    font-size: .75rem;
    animation: iconOrbit 10s ease-in-out infinite;
    animation-delay: var(--d);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3))
}

.dna-orbit span:nth-child(1) {
    top: 0;
    left: 10%
}

.dna-orbit span:nth-child(2) {
    top: 12%;
    right: 5%
}

.dna-orbit span:nth-child(3) {
    top: 40%;
    left: 0
}

.dna-orbit span:nth-child(4) {
    top: 55%;
    right: 0
}

.dna-orbit span:nth-child(5) {
    bottom: 15%;
    left: 8%
}

.dna-orbit span:nth-child(6) {
    bottom: 5%;
    right: 10%
}

@keyframes iconOrbit {

    0%,
    100% {
        transform: translateY(0) scale(.85);
        opacity: .35
    }

    50% {
        transform: translateY(-6px) scale(1.1);
        opacity: .7
    }
}

.dna-glow-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1.5px solid rgba(99, 102, 241, .1);
    box-shadow: 0 0 30px rgba(99, 102, 241, .08), inset 0 0 20px rgba(139, 92, 246, .05);
    animation: ringPulse 4s ease-in-out infinite;
    pointer-events: none
}

@keyframes ringPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .6
    }

    50% {
        transform: scale(1.06);
        opacity: 1
    }
}

/* Large DNA helix inside the main DNA card */
.dna-vis--lg {
    height: 200px;
    margin-bottom: 1.5rem
}

.dna-vis--lg .dna-helix {
    width: 90px;
    height: 160px
}

.dna-vis--lg .dna-rung {
    top: calc(var(--i) * 16px)
}

.dna-vis--lg .dna-rung::before,
.dna-vis--lg .dna-rung::after {
    width: 13px;
    height: 13px;
    top: -5.5px
}

.dna-vis--lg .dna-rung::before {
    left: -6.5px;
    box-shadow: 0 0 16px rgba(99, 102, 241, .6), 0 0 6px rgba(99, 102, 241, .4)
}

.dna-vis--lg .dna-rung::after {
    right: -6.5px;
    box-shadow: 0 0 16px rgba(236, 72, 153, .6), 0 0 6px rgba(236, 72, 153, .4)
}

.dna-vis--lg .dna-orbit span {
    font-size: 1rem
}

.dna-vis--lg .dna-glow-ring {
    width: 160px;
    height: 160px;
    border-color: rgba(99, 102, 241, .15);
    box-shadow: 0 0 40px rgba(99, 102, 241, .12), inset 0 0 30px rgba(139, 92, 246, .08)
}

/* Home hero DNA helix — light background variant */
.dna-vis--hero {
    height: 180px;
    margin-bottom: .8rem
}

.dna-vis--hero .dna-helix {
    width: 80px;
    height: 140px
}

.dna-vis--hero .dna-rung {
    top: calc(var(--i) * 14px);
    background: linear-gradient(90deg, rgba(99, 102, 241, .12), rgba(168, 85, 247, .08), rgba(236, 72, 153, .12))
}

.dna-vis--hero .dna-rung::before,
.dna-vis--hero .dna-rung::after {
    width: 12px;
    height: 12px;
    top: -5px
}

.dna-vis--hero .dna-rung::before {
    left: -6px;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    box-shadow: 0 0 14px rgba(99, 102, 241, .45), 0 0 5px rgba(99, 102, 241, .25)
}

.dna-vis--hero .dna-rung::after {
    right: -6px;
    background: linear-gradient(135deg, #f472b6, #ec4899);
    box-shadow: 0 0 14px rgba(236, 72, 153, .45), 0 0 5px rgba(236, 72, 153, .25)
}

.dna-vis--hero .dna-orbit span {
    font-size: .9rem;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .15))
}

.dna-vis--hero .dna-glow-ring {
    width: 140px;
    height: 140px;
    border-color: rgba(99, 102, 241, .12);
    box-shadow: 0 0 35px rgba(99, 102, 241, .1), inset 0 0 25px rgba(139, 92, 246, .06)
}

.disc-dna-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 1.8rem;
    text-align: center;
    letter-spacing: -.02em
}

.disc-dna-axes {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.disc-dna-summary {
    font-size: .88rem !important;
    line-height: 1.6 !important;
    opacity: .85
}

.disc-dna-actions {
    display: flex;
    gap: .5rem;
    margin-top: 2rem
}

.disc-dna-axis-labels {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: .3rem
}

.disc-dna-axis-bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, .1);
    border-radius: 99px;
    overflow: visible
}

.disc-dna-axis-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #6366f1, #a78bfa, #c084fc);
    transition: width .6s cubic-bezier(.16, 1, .3, 1)
}

.disc-dna-axis-dot {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .4), 0 2px 8px rgba(0, 0, 0, .2);
    transition: left .6s cubic-bezier(.16, 1, .3, 1)
}

.disc-dna-axis-val {
    text-align: right;
    font-size: .7rem;
    color: #a5b4fc;
    font-weight: 700;
    margin-top: 2px
}

/* ── Mood Chips — premium ── */
.disc-mood-bar {
    display: flex;
    gap: .4rem;
    margin-bottom: .8rem;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none
}

.disc-mood-bar::-webkit-scrollbar {
    display: none
}

.disc-mood-chip {
    flex-shrink: 0;
    padding: .4rem .85rem;
    border: 1.5px solid rgba(255, 255, 255, .1);
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    background: rgba(30, 41, 59, .4);
    color: #94a3b8;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    backdrop-filter: blur(8px)
}

.disc-mood-chip:hover {
    border-color: rgba(99, 102, 241, .3);
    color: #e2e8f0;
    transform: translateY(-1px)
}

.disc-mood-chip.is-selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 3px 10px rgba(99, 102, 241, .25)
}

/* ── Feed Spinner ── */
.disc-feed-empty-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, .1);
    border-top-color: var(--accent2);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    margin-bottom: .6rem
}

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

.disc-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8rem
}

.disc-feed-header h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.02em
}

.disc-feed-count {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: .15rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(99, 102, 241, .25)
}

/* ── Feed Stack ── */
.disc-feed-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 1.2rem;
    overflow: visible
}

.disc-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(30, 41, 59, .35);
    backdrop-filter: blur(12px);
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #94a3b8;
    text-align: center;
    padding: 2rem 1rem
}

.disc-fcard {
    position: absolute;
    inset: 0;
    border-radius: 1.2rem;
    overflow: hidden;
    background: #111;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease
}

.disc-fcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.disc-fcard-over {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 50%, transparent 100%);
    padding: 1.5rem 1.2rem 1.2rem;
    color: #fff
}

.disc-fcard-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: .4rem
}

.disc-fcard-tags span {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 99px;
    font-size: .62rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .03em
}

.disc-fcard-over h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    letter-spacing: -.01em
}

.disc-fcard-price {
    font-size: .92rem;
    font-weight: 600;
    color: #e5e7eb
}

.disc-fcard-bar {
    margin-top: .5rem;
    height: 4px;
    background: rgba(255, 255, 255, .1);
    border-radius: 99px;
    overflow: hidden
}

.disc-fcard-bar div {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 99px
}

.disc-fcard-pct {
    font-size: .65rem;
    color: #a7f3d0;
    font-weight: 700;
    text-align: right;
    margin-top: 2px
}

.disc-fcard-reason {
    font-size: .75rem;
    color: rgba(255, 255, 255, .7);
    font-style: italic;
    margin-top: 4px
}

.disc-fcard-source {
    position: absolute;
    top: .7rem;
    right: .7rem;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    padding: .25rem .6rem;
    border-radius: 99px;
    font-size: .62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: .04em
}

/* ── Feed Actions — floating bar ── */
.disc-feed-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    padding: 1.2rem 0
}

.disc-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .1);
    background: rgba(30, 41, 59, .5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.disc-fab:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12)
}

.disc-fab:active {
    transform: scale(.92)
}

.disc-fab-skip {
    border-color: rgba(148, 163, 184, .2)
}

.disc-fab-skip:hover {
    background: rgba(148, 163, 184, .1);
    border-color: rgba(148, 163, 184, .3)
}

.disc-fab-nope {
    border-color: rgba(248, 113, 113, .2)
}

.disc-fab-nope:hover {
    background: rgba(248, 113, 113, .1);
    border-color: rgba(248, 113, 113, .3)
}

.disc-fab-like {
    border-color: rgba(244, 114, 182, .2)
}

.disc-fab-like:hover {
    background: rgba(244, 114, 182, .1);
    border-color: rgba(244, 114, 182, .3)
}

.disc-fab-save {
    border-color: rgba(250, 204, 21, .2)
}

.disc-fab-save:hover {
    background: rgba(250, 204, 21, .1);
    border-color: rgba(250, 204, 21, .3)
}

.disc-fab-outfit {
    border-color: rgba(167, 139, 250, .2);
    width: 56px;
    height: 56px;
    font-size: 1.25rem
}

.disc-fab-outfit:hover {
    background: rgba(167, 139, 250, .1);
    border-color: rgba(167, 139, 250, .3)
}

.disc-feed-log {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.disc-log-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: #e2e8f0;
    padding: .3rem .5rem;
    background: rgba(30, 41, 59, .4);
    backdrop-filter: blur(6px);
    border-radius: .4rem;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: opacity .25s, transform .25s
}

.disc-log-enter {
    opacity: 0;
    transform: translateY(-6px)
}

/* ── Outfit Panel — premium redesign ── */
#panel-outfit {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box
}

.disc-outfit-hero {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(30, 41, 59, .4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.2rem;
    margin-bottom: 1rem
}

.disc-outfit-hero h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 .3rem;
    letter-spacing: -.02em;
    color: #f1f5f9
}

.disc-outfit-hero p {
    font-size: .85rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5
}

.disc-outfit-explain-box {
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: 1rem;
    padding: .8rem 1.1rem;
    margin-bottom: 1rem;
    font-size: .82rem;
    color: #a5b4fc;
    font-style: italic;
    line-height: 1.5
}

.disc-outfit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem
}

.disc-outfit-card {
    display: block;
    background: rgba(30, 41, 59, .4);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    overflow: hidden;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    text-decoration: none;
    color: inherit
}

.disc-outfit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .2)
}

.disc-outfit-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
    background: rgba(30, 41, 59, .3)
}

.disc-outfit-img-placeholder {
    width: 100%;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: rgba(30, 41, 59, .3)
}

.disc-outfit-info {
    padding: .7rem .8rem .8rem
}

.disc-outfit-cat {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent2);
    font-weight: 700
}

.disc-outfit-name {
    font-weight: 700;
    font-size: .88rem;
    margin: .2rem 0;
    letter-spacing: -.01em;
    line-height: 1.3
}

.disc-outfit-score {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #34d399)
}

.disc-outfit-explain {
    font-size: .72rem;
    color: var(--muted);
    margin-top: .35rem;
    line-height: 1.4;
    font-style: italic
}

.disc-outfit-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem
}

@media(min-width:640px) {
    .disc-outfit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem
    }
}

@media(min-width:1024px) {
    .disc-outfit-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem
    }

    .disc-outfit-name {
        font-size: .9rem
    }
}

/* Gallery grid — wider cards to fit item thumbnails */
#disc-outfit-gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem
}

@media(min-width:480px) {
    #disc-outfit-gallery-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:900px) {
    #disc-outfit-gallery-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* ── Analytics — glass cards ── */
.disc-analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem
}

.disc-stat {
    background: rgba(30, 41, 59, .4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: .75rem .5rem;
    text-align: center;
    transition: transform .2s
}

.disc-stat:hover {
    transform: translateY(-2px)
}

.disc-stat-num {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #e2e8f0
}

.disc-stat-label {
    display: block;
    font-size: .66rem;
    color: #64748b;
    margin-top: .15rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600
}

.disc-analytics-bars {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.disc-analytics-bar-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600
}

.disc-analytics-bar-item .disc-dna-axis-bar {
    flex: 1
}

.disc-analytics-list {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.disc-analytics-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem .6rem;
    background: rgba(30, 41, 59, .35);
    backdrop-filter: blur(6px);
    border-radius: .5rem;
    font-size: .8rem;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #e2e8f0
}

/* ── Journey — timeline cards ── */
.disc-journey-content {
    display: flex;
    flex-direction: column;
    gap: .7rem
}

.disc-journey-snap {
    background: rgba(30, 41, 59, .4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: .8rem 1rem;
    transition: all .2s
}

.disc-journey-snap:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, .1)
}

.disc-journey-latest {
    border-color: rgba(99, 102, 241, .3);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .08), 0 4px 16px rgba(99, 102, 241, .06)
}

.disc-journey-snap:not(.disc-journey-latest) {
    opacity: .55
}

.disc-journey-snap:hover {
    opacity: 1
}

.disc-journey-badge {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    margin-left: .3rem;
    box-shadow: 0 2px 6px rgba(99, 102, 241, .25)
}

.disc-journey-snap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .84rem;
    font-weight: 700;
    margin-bottom: .5rem
}

.disc-journey-snap-axes {
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.disc-journey-axis {
    display: flex;
    align-items: center;
    gap: .4rem
}

.disc-journey-axis-name {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    min-width: 100px;
    flex-shrink: 0
}

.disc-journey-axis .disc-dna-axis-bar {
    flex: 1;
    height: 6px
}

/* ═══ USER PUBLIC PROFILE ═══ */
.up {
    min-height: 100vh;
    padding: 2rem 1rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative
}

.up-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden
}

.up-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .12
}

.up-bg-blob--1 {
    width: 420px;
    height: 420px;
    background: var(--accent);
    top: -80px;
    right: -100px
}

.up-bg-blob--2 {
    width: 350px;
    height: 350px;
    background: #a855f7;
    bottom: -60px;
    left: -80px
}

.up-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--muted);
    font-size: .9rem
}

.up-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(99, 102, 241, .15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite
}

/* Header Card */
.up-header {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1.25rem;
    backdrop-filter: blur(12px);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1
}

.up-header-left {
    flex-shrink: 0
}

.up-avatar-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(99, 102, 241, .25)
}

.up-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: rgba(15, 23, 42, .5)
}

.up-header-right {
    flex: 1;
    min-width: 0
}

.up-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 .15rem
}

.up-username {
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 .4rem
}

.up-bio {
    font-size: .82rem;
    color: #cbd5e1;
    margin: 0 0 .75rem;
    line-height: 1.4
}

/* Stats */
.up-stats {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: .75rem
}

.up-stat {
    display: flex;
    flex-direction: column;
    align-items: center
}

.up-stat-num {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9
}

.up-stat-label {
    font-size: .6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em
}

.up-stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .08)
}

/* Follow Button */
.up-actions {
    display: flex;
    gap: .5rem
}

.up-follow-btn {
    padding: .5rem 1.8rem;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff
}

.up-follow-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .3)
}

.up-follow-btn--active {
    background: transparent;
    color: var(--accent)
}

.up-follow-btn--active:hover {
    background: rgba(99, 102, 241, .08)
}

/* Section Title */
.up-section-title {
    font-size: .88rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .75rem;
    position: relative;
    z-index: 1
}

/* Posts Grid */
.up-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
    position: relative;
    z-index: 1
}

.up-post-card {
    background: rgba(30, 41, 59, .45);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1rem;
    overflow: hidden;
    transition: all .2s;
    cursor: pointer
}

.up-post-card:hover {
    border-color: rgba(99, 102, 241, .2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25)
}

.up-post-img-wrap {
    position: relative
}

.up-post-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: rgba(15, 23, 42, .5)
}

.up-post-img-count {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .6rem;
    padding: .2rem .45rem;
    border-radius: 6px;
    font-weight: 600
}

.up-post-body {
    padding: .6rem .75rem
}

.up-post-caption {
    font-size: .78rem;
    color: #e2e8f0;
    margin: 0 0 .35rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.up-post-meta {
    display: flex;
    gap: .6rem;
    font-size: .65rem;
    color: var(--muted)
}

.up-posts-empty {
    text-align: center;
    color: var(--muted);
    font-size: .88rem;
    padding: 2rem;
    position: relative;
    z-index: 1
}

@media(max-width:600px) {
    .up-header {
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .up-stats {
        justify-content: center
    }

    .up-actions {
        justify-content: center
    }

    .up-posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
    }
}

/* ═══ WARDROBE ═══ */
.ward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem
}

.ward-card {
    background: rgba(30, 41, 59, .4);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    overflow: hidden;
    transition: all .25s;
    cursor: grab
}

.ward-card:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, .1);
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, .2)
}

.ward-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .25)
}

.ward-card.ward-dragging {
    opacity: .4;
    transform: rotate(2deg)
}

.ward-card-img-wrap {
    position: relative;
    overflow: hidden
}

.ward-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: rgba(255, 255, 255, .03);
    display: block;
    transition: transform .3s
}

.ward-card:hover .ward-card-img {
    transform: scale(1.03)
}

.ward-card-check {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .4);
    animation: wardCheckIn .2s ease
}

@keyframes wardCheckIn {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.ward-card-body {
    padding: .75rem
}

.ward-card-name {
    font-weight: 600;
    font-size: .88rem;
    color: #e2e8f0
}

.ward-card-meta {
    font-size: .75rem;
    color: #64748b;
    margin-top: .15rem
}

.ward-card-del-btn,
.ward-card-edit-btn {
    opacity: .4;
    transition: opacity .15s
}

.ward-card:hover .ward-card-del-btn,
.ward-card:hover .ward-card-edit-btn {
    opacity: 1
}

.ward-chip {
    display: inline-block;
    padding: .12rem .4rem;
    border-radius: 99px;
    background: rgba(99, 102, 241, .12);
    color: #a5b4fc;
    font-size: .68rem;
    margin-right: .2rem;
    margin-top: .3rem
}

/* ── Filter Bar ── */
.ward-filter-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    background: rgba(30, 41, 59, .3);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: .75rem
}

.ward-filter-search {
    flex: 1;
    min-width: 140px;
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-size: .82rem;
    color: #e2e8f0
}

.ward-filter-search::placeholder {
    color: #64748b
}

.ward-filter-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 110px;
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-size: .78rem;
    color: #e2e8f0;
    padding: .35rem .5rem
}

/* ── Color Picker ── */
.ward-color-picker {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .35rem 0
}

.ward-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: all .15s;
    padding: 0;
    flex-shrink: 0
}

.ward-color-swatch:hover {
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, .35)
}

.ward-color-swatch.is-active {
    border-color: #fff;
    transform: scale(1.25);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .4), 0 2px 8px rgba(0, 0, 0, .25)
}

/* ── Selected Items Preview ── */
.ward-selected-preview {
    margin-bottom: .75rem;
    min-height: 0
}

.ward-selected-empty {
    font-size: .72rem;
    color: #475569;
    text-align: center;
    padding: .5rem 0;
    border: 1.5px dashed rgba(255, 255, 255, .08);
    border-radius: .6rem
}

.ward-selected-items {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .4rem
}

.ward-selected-thumb {
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    overflow: hidden;
    border: 2px solid rgba(99, 102, 241, .3);
    flex-shrink: 0;
    position: relative;
    transition: all .15s
}

.ward-selected-thumb:hover {
    border-color: rgba(99, 102, 241, .6)
}

.ward-selected-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ward-selected-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    border: none;
    font-size: .6rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0
}

.ward-selected-thumb:hover .ward-selected-remove {
    display: flex
}

.ward-selected-count {
    font-size: .72rem;
    color: #a5b4fc;
    font-weight: 700;
    display: block
}

/* ── Outfit List ── */
.ward-outfit-list {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.ward-outfit-item {
    padding: .7rem .85rem;
    background: rgba(30, 41, 59, .4);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .75rem;
    transition: all .2s
}

.ward-outfit-item:hover {
    border-color: rgba(99, 102, 241, .2);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .06)
}

.ward-outfit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .35rem
}

.ward-outfit-name-click {
    cursor: pointer;
    transition: color .15s
}

.ward-outfit-name-click:hover {
    color: var(--accent) !important
}

.ward-outfit-item strong {
    font-size: .88rem;
    color: #e2e8f0
}

.ward-outfit-badge {
    font-size: .6rem;
    font-weight: 700;
    color: #a5b4fc;
    background: rgba(99, 102, 241, .1);
    padding: .15rem .45rem;
    border-radius: 99px;
    border: 1px solid rgba(99, 102, 241, .15)
}

.ward-outfit-thumbs {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .35rem 0
}

.ward-outfit-thumb {
    width: 40px;
    height: 40px;
    border-radius: .45rem;
    object-fit: cover;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .15s
}

.ward-outfit-thumb:hover {
    transform: scale(1.1);
    z-index: 1
}

.ward-outfit-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .45rem;
    background: rgba(99, 102, 241, .12);
    color: #a5b4fc;
    font-size: .7rem;
    font-weight: 700;
    border: 1px solid rgba(99, 102, 241, .15)
}

.ward-outfit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .25rem
}

.ward-outfit-footer .text-muted {
    font-size: .7rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-right: .5rem
}

.ward-outfit-del,
.ward-outfit-edit {
    opacity: .3;
    transition: opacity .15s;
    flex-shrink: 0
}

.ward-outfit-item:hover .ward-outfit-del,
.ward-outfit-item:hover .ward-outfit-edit {
    opacity: 1
}

/* ── Recommendations (enhanced for 3.4) ── */
.ward-recs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem
}

.ward-rec-card {
    padding: .8rem;
    background: rgba(30, 41, 59, .4);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .6rem;
    text-align: left;
    transition: all .2s
}

.ward-rec-card:hover {
    border-color: rgba(99, 102, 241, .15);
    transform: translateY(-1px)
}

.ward-rec-img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: .4rem;
    margin-bottom: .5rem;
    background: rgba(255, 255, 255, .03)
}

.ward-rec-score {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    color: var(--success);
    background: rgba(34, 197, 94, .1);
    padding: .15rem .45rem;
    border-radius: 99px;
    margin: .25rem 0
}

.ward-rec-axis {
    margin-top: .3rem
}

.ward-rec-axis-bar {
    height: 4px;
    background: rgba(255, 255, 255, .06);
    border-radius: 2px;
    overflow: hidden
}

.ward-rec-axis-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #818cf8);
    border-radius: 2px;
    transition: width .4s ease
}

.ward-rec-axis-label {
    font-size: .6rem;
    color: #94a3b8;
    font-weight: 600
}

.ward-rec-explanation {
    font-size: .68rem;
    color: #94a3b8;
    margin-top: .4rem;
    font-style: italic;
    line-height: 1.4;
    border-left: 2px solid rgba(99, 102, 241, .2);
    padding-left: .5rem
}

/* ── Empty States ── */
.ward-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: .88rem;
    border: 1.5px dashed rgba(255, 255, 255, .08);
    border-radius: 1rem;
    grid-column: 1 / -1
}

.ward-empty-sm {
    padding: 1.2rem .8rem;
    font-size: .82rem;
    border-radius: .75rem
}

.ward-empty-icon {
    font-size: 2.5rem;
    margin-bottom: .6rem;
    opacity: .5
}

.ward-empty-sm .ward-empty-icon {
    font-size: 1.5rem;
    margin-bottom: .3rem
}

/* ── Skeleton Loading ── */
.ward-skeleton {
    pointer-events: none
}

.ward-skel-img {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 75%);
    background-size: 200% 100%;
    animation: wardShimmer 1.5s ease-in-out infinite;
    border-radius: 0
}

.ward-skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 75%);
    background-size: 200% 100%;
    animation: wardShimmer 1.5s ease-in-out infinite;
    margin-bottom: .4rem
}

@keyframes wardShimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

/* ── Button Spinner ── */
.ward-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle
}

/* ── Modal (shared) ── */
.ward-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.ward-modal-overlay.is-open {
    display: flex;
    animation: wardModalBgIn .2s ease
}

@keyframes wardModalBgIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ward-modal {
    background: linear-gradient(165deg, rgba(30, 41, 59, .95), rgba(25, 25, 52, .92));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: 1.25rem;
    padding: 2rem 1.8rem;
    text-align: center;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    animation: wardModalIn .25s cubic-bezier(.16, 1, .3, 1);
    position: relative
}

.ward-modal-lg {
    max-width: 600px;
    text-align: left
}

@keyframes wardModalIn {
    from {
        opacity: 0;
        transform: scale(.92) translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.ward-modal-close {
    position: absolute;
    top: .8rem;
    right: 1rem;
    font-size: 1.4rem;
    cursor: pointer;
    color: #94a3b8;
    transition: color .15s;
    line-height: 1
}

.ward-modal-close:hover {
    color: #f1f5f9
}

.ward-modal-icon {
    font-size: 2.5rem;
    margin-bottom: .8rem
}

.ward-modal-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 .4rem;
    letter-spacing: -.02em
}

.ward-modal-desc {
    font-size: .85rem;
    color: #94a3b8;
    margin: 0 0 1.5rem;
    line-height: 1.5
}

.ward-modal-body {
    margin-bottom: 1.2rem;
    text-align: left
}

.ward-modal-actions {
    display: flex;
    gap: .6rem;
    justify-content: center
}

.ward-modal-actions .as-btn {
    min-width: 100px;
    padding: .65rem 1.2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: .88rem
}

.ward-modal-danger-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, .3)
}

.ward-modal-danger-btn:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, .4);
    transform: translateY(-1px)
}

/* ── Edit Form (inside modal) ── */
.ward-edit-form {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.ward-edit-row {
    display: flex;
    align-items: center;
    gap: .5rem
}

.ward-edit-row label {
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    min-width: 60px;
    flex-shrink: 0
}

.ward-edit-row .form-control,
.ward-edit-row .form-select {
    flex: 1
}

/* ── Edit Outfit Items Grid ── */
.ward-edit-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: .3rem;
    max-height: 200px;
    overflow-y: auto;
    padding: .3rem
}

.ward-edit-item {
    width: 48px;
    height: 48px;
    border-radius: .4rem;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    position: relative;
    transition: all .15s
}

.ward-edit-item:hover {
    border-color: rgba(255, 255, 255, .25)
}

.ward-edit-item.is-in {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .3)
}

.ward-edit-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.ward-edit-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, .35);
    color: #fff;
    font-size: .7rem;
    font-weight: 800
}

/* ── Outfit Detail Modal ── */
.ward-detail-body {
    margin-top: .8rem
}

.ward-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem
}

.ward-detail-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .6rem;
    overflow: hidden;
    transition: all .2s
}

.ward-detail-card:hover {
    border-color: rgba(99, 102, 241, .15);
    transform: translateY(-1px)
}

.ward-detail-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, .03)
}

.ward-detail-card-info {
    padding: .5rem .6rem
}

.ward-detail-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    justify-content: flex-end
}

/* ═══ ADMIN PANEL ═══ */

/* Admin: restore light theme vars */
body:has(#admin-page) {
    --bg: #f8fafc;
    --surface: #fff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04)
}

/* Hide site nav/footer on admin page */
body:has(#admin-page) .as-nav {
    display: none
}

body:has(#admin-page) {
    padding-top: 0
}

body:has(#admin-page) .as-footer {
    display: none
}

body:has(#admin-page) .as-main {
    max-width: none;
    padding: 0
}

/* Layout */
.adm {
    display: grid;
    grid-template-columns: 256px 1fr;
    min-height: 100vh
}

@media(max-width:767px) {
    .adm {
        grid-template-columns: 1fr
    }
}

/* Sidebar */
.adm-sidebar {
    background: #0f172a;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto
}

@media(max-width:767px) {
    .adm-sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 96;
        width: 280px;
        box-shadow: 8px 0 32px rgba(0, 0, 0, .3)
    }

    .adm-sidebar.is-open {
        display: flex
    }
}

.adm-sidebar-header {
    padding: 1.5rem 1.25rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.adm-sidebar-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: #f9fafb;
    letter-spacing: -.02em
}

.adm-sidebar-brand span {
    color: var(--accent2)
}

.adm-sidebar-sub {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #475569;
    margin-top: .25rem
}

.adm-sidebar-nav {
    flex: 1;
    padding: .75rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.adm-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .9rem;
    border-radius: .55rem;
    font-size: .87rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    border: none;
    background: none
}

.adm-nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #e2e8f0
}

.adm-nav-item.is-active {
    background: rgba(99, 102, 241, .16);
    color: #a5b4fc;
    font-weight: 600
}

.adm-nav-icon {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
    flex-shrink: 0
}

.adm-sidebar-footer {
    padding: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .06)
}

/* Content */
.adm-content {
    background: #f8fafc;
    padding: 2rem 2.5rem;
    overflow-y: auto;
    min-height: 100vh
}

@media(max-width:767px) {
    .adm-content {
        padding: 1.25rem 1rem
    }
}

.adm-section {
    display: none;
    animation: fadeUp .25s ease
}

.adm-section.is-visible {
    display: block
}

/* Header */
.adm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem
}

.adm-title {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.02em
}

.adm-subtitle {
    font-size: .85rem;
    color: var(--muted);
    margin: .2rem 0 0
}

/* Stats cards */
.adm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem
}

.adm-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.3rem;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s
}

.adm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08)
}

.adm-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0
}

.adm-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1
}

.adm-stat-label {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: .15rem
}

/* Cards */
.adm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.adm-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.adm-card-header h3 {
    font-size: .82rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted)
}

.adm-card-body {
    padding: 1.25rem
}

/* Toolbar */
.adm-toolbar {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem
}

/* Table */
.adm-table-wrap {
    overflow-x: auto
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem
}

.adm-table thead {
    background: #f8fafc
}

.adm-table th {
    padding: .75rem 1rem;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap
}

.adm-table td {
    padding: .65rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle
}

.adm-table tbody tr {
    transition: background .1s
}

.adm-table tbody tr:hover {
    background: #fafbfd
}

.adm-table-img {
    width: 42px;
    height: 42px;
    border-radius: .45rem;
    object-fit: cover;
    background: #f1f5f9
}

/* Status badges */
.adm-status-active {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    background: #dcfce7;
    color: #166534
}

.adm-status-inactive {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    background: #fef2f2;
    color: #991b1b
}

/* Action buttons */
.adm-actions {
    display: flex;
    gap: .3rem
}

.adm-act {
    width: 32px;
    height: 32px;
    border-radius: .45rem;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    cursor: pointer;
    transition: all .12s
}

.adm-act:hover {
    border-color: var(--accent);
    background: #f8fafc;
    transform: scale(1.08)
}

.adm-act-danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: #fef2f2
}

/* Pagination */
.adm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border)
}

.adm-page-btn {
    min-width: 34px;
    height: 34px;
    border-radius: .45rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    display: flex;
    align-items: center;
    justify-content: center
}

.adm-page-btn:hover {
    border-color: var(--accent);
    background: #f8fafc
}

.adm-page-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

/* Modal */
.adm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.adm-modal-overlay.is-open {
    display: flex
}

.adm-modal {
    background: var(--surface);
    border-radius: var(--radius);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
    animation: fadeUp .2s ease
}

.adm-modal.adm-modal--wide {
    max-width: 860px
}

.adm-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border)
}

.adm-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0
}

.adm-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s
}

.adm-modal-close:hover {
    background: #f1f5f9;
    color: var(--text)
}

.adm-modal-body {
    padding: 1.5rem
}

.adm-modal-body .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .3rem
}

/* Admin Product Detail */
.adm-detail-hero {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem
}

.adm-detail-hero-img {
    width: 180px;
    min-width: 180px;
    height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid var(--border)
}

.adm-detail-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.adm-detail-hero-info {
    flex: 1;
    min-width: 0
}

.adm-detail-name {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 .3rem;
    color: var(--text)
}

.adm-detail-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: .6rem
}

.adm-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .7rem
}

.adm-detail-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid var(--border)
}

.adm-detail-desc {
    font-size: .85rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0
}

.adm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem
}

.adm-detail-info-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: .65rem .85rem
}

.adm-detail-info-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .2rem
}

.adm-detail-info-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text)
}

.adm-detail-section {
    margin-bottom: 1.5rem
}

.adm-detail-section-title {
    font-size: .88rem;
    font-weight: 700;
    margin: 0 0 .75rem;
    color: var(--text)
}

.adm-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: .5rem
}

.adm-detail-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    border: 2px solid transparent;
    background: #f1f5f9
}

.adm-detail-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.adm-detail-gallery-item.is-main {
    border-color: var(--accent)
}

.adm-detail-gallery-main {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 2rem
}

.adm-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border)
}

@media(max-width:600px) {
    .adm-detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .adm-detail-hero-img {
        width: 140px;
        height: 170px
    }

    .adm-detail-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* Toasts */
.adm-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    pointer-events: none
}

.adm-toast {
    padding: .65rem 1.3rem;
    border-radius: .55rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    animation: fadeUp .25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transition: opacity .3s
}

.adm-toast-success {
    background: #059669
}

.adm-toast-error {
    background: #dc2626
}

.adm-toast-info {
    background: #6366f1
}

/* Recent products on dashboard */
.adm-recent-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid #f1f5f9
}

.adm-recent-item:last-child {
    border: 0
}

.adm-recent-item img {
    width: 42px;
    height: 42px;
    border-radius: .45rem;
    object-fit: cover;
    background: #f1f5f9;
    flex-shrink: 0
}

.adm-recent-item .fw-600 {
    font-weight: 600;
    font-size: .88rem
}

.adm-recent-item .text-muted {
    font-size: .78rem;
    color: var(--muted)
}

/* Image manager in modal */
.adm-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem
}

.adm-img-item {
    position: relative;
    border-radius: .5rem;
    overflow: hidden;
    border: 2px solid var(--border);
    aspect-ratio: 1;
    transition: border-color .15s
}

.adm-img-item.is-main {
    border-color: var(--accent2);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .2)
}

.adm-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.adm-img-order {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px
}

.adm-img-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3))
}

.adm-img-act {
    flex: 1;
    padding: 4px;
    border: none;
    border-radius: 4px;
    font-size: .62rem;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    transition: opacity .12s
}

.adm-img-act:hover {
    opacity: .85
}

.adm-img-act-main {
    background: var(--accent2)
}

.adm-img-act-del {
    background: var(--danger)
}

/* Image reorder list */
.adm-img-reorder-list {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.adm-img-reorder-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .4rem
}

.adm-img-reorder-handle {
    cursor: grab;
    color: var(--muted);
    font-size: 1rem;
    user-select: none;
    flex-shrink: 0
}

.adm-img-reorder-thumb {
    width: 36px;
    height: 36px;
    border-radius: .3rem;
    object-fit: cover;
    background: #f1f5f9;
    flex-shrink: 0
}

.adm-img-reorder-input {
    width: 64px !important;
    padding: .25rem .4rem;
    font-size: .82rem;
    text-align: center;
    flex-shrink: 0
}

/* Category tree */
/* ═══════════════════════════════════════════
   Admin category tree (admin-categories.js render target)
   ─────────────────────────────────────────────
   The legacy ".adm-tree-children" used `--border` which is not defined in
   the admin theme, so the connector line never showed and every level was
   visually identical to the previous one. Replaced with explicit colours
   plus pseudo-element guides so each node renders as a proper branch.
   ═══════════════════════════════════════════ */
.adm-tree {
    padding: .35rem 0;
    font-size: .88rem;
    color: var(--adm-text-primary, #e0e7ff);
}

/* Strong specificity wins over Bootstrap / browser defaults that would
   otherwise leave bullet markers next to every node. We scope the reset
   to anything inside .adm-tree so the rest of the admin doesn't change.
   `display:block` on the <li> kills the bullet renderer entirely (the
   marker is generated by `display:list-item`); `list-style:none` covers
   browsers that ignore the display change. */
.adm-tree ul,
.adm-tree li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.adm-tree li {
    display: block !important;
}

.adm-tree li::marker {
    content: '' !important;
    display: none !important;
}

.adm-tree-list {
    /* Vertical guide line that lines up with the elbow of each child item.
       The first child's pseudo-element extends from the parent name down so
       siblings share a single connecting trunk. */
    padding-left: 1.25rem;
    position: relative;
}

.adm-tree-list--root {
    padding-left: 0;
}

/* Each list item is the row + (optionally) its own nested ul.
   The horizontal "elbow" comes from a pseudo-element on the row itself. */
.adm-tree-node {
    list-style: none;
    position: relative;
    padding: .15rem 0;
}

.adm-tree-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .5rem;
    border-radius: 6px;
    cursor: default;
    transition: background 120ms ease;
    position: relative;
}

.adm-tree-row:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* Child nodes draw a horizontal elbow from the parent's vertical line. */
.adm-tree-list:not(.adm-tree-list--root)>.adm-tree-node>.adm-tree-row::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 50%;
    width: 0.65rem;
    height: 1px;
    background: rgba(148, 163, 184, 0.35);
}

/* Vertical connector that links every sibling under the same parent. */
.adm-tree-list:not(.adm-tree-list--root) {
    border-left: 1px dashed rgba(148, 163, 184, 0.35);
    margin-left: 0.6rem;
}

/* Trim the connector at the last child so the trunk doesn't dangle past
   the final elbow. */
.adm-tree-list:not(.adm-tree-list--root)>.adm-tree-node:last-child {
    /* mask the trunk below the elbow row by drawing a same-coloured-as-bg
       block on top of the inherited border-left. */
    --tree-mask-bg: var(--adm-card-bg, #1a1f3a);
}

.adm-tree-list:not(.adm-tree-list--root)>.adm-tree-node:last-child::before {
    content: '';
    position: absolute;
    left: -1px;
    top: calc(0.5rem + 0.3rem);
    bottom: -2px;
    width: 1px;
    background: var(--tree-mask-bg, #1a1f3a);
    z-index: 1;
}

.adm-tree-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
}

.adm-tree-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-tree-name--root {
    font-weight: 700;
    color: var(--adm-text-primary, #e0e7ff);
}

.adm-tree-count {
    margin-left: auto;
    font-size: .7rem;
    color: var(--adm-text-muted, #94a3b8);
    font-weight: 500;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
}

/* Mobile sidebar toggle */
.adm-mobile-toggle {
    display: none;
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 95;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    transition: transform .15s
}

.adm-mobile-toggle:hover {
    transform: scale(1.1)
}

@media(max-width:767px) {
    .adm-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

/* ── Admin: Role badges ── */
.adm-role-badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em
}

.adm-role-superadmin {
    background: linear-gradient(135deg, rgba(99, 102, 241, .15), rgba(139, 92, 246, .15));
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, .2)
}

.adm-role-admin {
    background: rgba(245, 158, 11, .1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, .15)
}

.adm-role-member {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0
}

.adm-role-select {
    padding: .3rem .5rem;
    border-radius: .4rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color .15s
}

.adm-role-select:focus {
    border-color: var(--accent)
}

/* ── Admin: Seller cards ── */
.adm-seller-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem
}

.adm-seller-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s
}

.adm-seller-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08)
}

.adm-seller-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .6rem
}

.adm-seller-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text)
}

.adm-seller-email {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .15rem
}

.adm-seller-date {
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap
}

.adm-seller-desc {
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 .5rem
}

.adm-seller-phone {
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 .8rem
}

.adm-seller-actions {
    display: flex;
    gap: .5rem
}

.adm-seller-approve {
    flex: 1;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid rgba(16, 185, 129, .2);
    background: rgba(16, 185, 129, .08);
    color: #10b981;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s
}

.adm-seller-approve:hover {
    background: rgba(16, 185, 129, .15);
    border-color: rgba(16, 185, 129, .35);
    transform: translateY(-1px)
}

.adm-seller-reject {
    flex: 1;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid rgba(239, 68, 68, .15);
    background: rgba(239, 68, 68, .06);
    color: #ef4444;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s
}

.adm-seller-reject:hover {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .3);
    transform: translateY(-1px)
}

.adm-seller-person {
    font-size: .85rem;
    color: var(--muted);
    margin: 0 0 .4rem
}

/* ── Admin: Seller Tabs ── */
.adm-seller-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1.2rem
}

.adm-seller-tab {
    padding: .55rem 1.2rem;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s
}

.adm-seller-tab:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.adm-seller-tab.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

/* ── Admin: Seller Detail Modal Grid ── */
.adm-seller-detail-grid {
    display: flex;
    flex-direction: column;
    gap: .1rem
}

.adm-seller-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
    gap: 1rem
}

.adm-seller-detail-row:last-child {
    border-bottom: none
}

.adm-seller-detail-label {
    font-weight: 600;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 130px
}

.adm-seller-detail-row span:last-child {
    text-align: right;
    word-break: break-word
}

/* ── Admin: Empty state ── */
.adm-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--muted)
}

.adm-empty-icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    opacity: .6
}

/* Utilities for admin */
.mt-3 {
    margin-top: 1rem
}

.text-center {
    text-align: center
}

/* ═══════════════════════════════════════
   SELLER DASHBOARD — Dark Premium
   ═══════════════════════════════════════ */
.page-seller .as-main {
    max-width: none;
    padding: 0
}

.page-seller .as-footer,
.page-seller .sc-footer {
    display: none
}

/* Seller dashboard has its own sidebar chrome — the site-wide top navbar is
   redundant and wastes vertical space. Hide it so the seller panel feels like
   a standalone app (same pattern the admin panel uses). */
.page-seller .as-header,
.page-seller .as-nav,
.page-seller .as-navbar,
.page-seller>header,
.page-seller nav.as-topbar {
    display: none !important
}

/* The body has 72px padding-top to clear the fixed navbar. With the navbar
   hidden on the seller page, that padding becomes dead space — zero it out
   so the sidebar + content start flush at the viewport top. */
body.page-seller {
    padding-top: 0;
}

/* Layout — matching admin grid */
.slr {
    display: grid;
    grid-template-columns: 256px 1fr;
    min-height: 100vh
}

@media(max-width:767px) {
    .slr {
        grid-template-columns: 1fr
    }
}

/* ── Sidebar ── */
.slr-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #131035 50%, #1e1b4b 100%);
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid rgba(99, 102, 241, .08)
}

@media(max-width:767px) {
    .slr-sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 96;
        width: 280px;
        box-shadow: 8px 0 32px rgba(0, 0, 0, .5)
    }

    .slr-sidebar.is-open {
        display: flex
    }
}

.slr-sidebar-header {
    padding: 1.5rem 1.25rem 1.2rem;
    border-bottom: 1px solid rgba(99, 102, 241, .1)
}

.slr-sidebar-brand {
    font-weight: 800;
    font-size: 1.15rem;
    color: #f9fafb;
    letter-spacing: -.02em
}

.slr-sidebar-brand span {
    color: #818cf8
}

.slr-sidebar-sub {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6366f1;
    margin-top: .25rem
}

.slr-sidebar-nav {
    flex: 1;
    padding: .75rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 2px
}

/* ── Collapsible groups (admin sidebar parity) ─────────────────────────────
   Each group carries its own accent rgb tuple via [data-slr-group].
   The header uses a gradient + leading dot + sweep animation; the items
   list animates open/closed with a max-height transition. While the
   sidebar has [data-hydrating="true"] those transitions are suppressed
   to avoid the expand→collapse flash on first paint after a navigation. */
.slr-side-section {
    position: relative;
    display: flex;
    flex-direction: column;
}

.slr-side-section+.slr-side-section {
    margin-top: .5rem;
}

/* Group accent palette */
.slr-side-section[data-slr-group="overview"] {
    --slr-side-accent: 167, 139, 250;
    /* violet */
}

.slr-side-section[data-slr-group="orders"] {
    --slr-side-accent: 96, 165, 250;
    /* sky */
}

.slr-side-section[data-slr-group="finance"] {
    --slr-side-accent: 52, 211, 153;
    /* emerald */
}

.slr-side-section[data-slr-group="support"] {
    --slr-side-accent: 244, 114, 182;
    /* pink */
}

/* Group header — gradient pill with leading dot and sweep on hover */
.slr-side-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    margin: 0;
    padding: .55rem .8rem .55rem .9rem;
    background:
        linear-gradient(135deg,
            rgba(var(--slr-side-accent, 99, 102, 241), .16) 0%,
            rgba(var(--slr-side-accent, 99, 102, 241), .05) 100%),
        rgba(255, 255, 255, .02);
    border: 1px solid rgba(var(--slr-side-accent, 99, 102, 241), .22);
    color: #e2e8f0;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    user-select: none;
    border-radius: .55rem;
    overflow: hidden;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.slr-side-group::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgb(var(--slr-side-accent, 99, 102, 241));
    box-shadow:
        0 0 0 2px rgba(var(--slr-side-accent, 99, 102, 241), .14),
        0 0 8px rgba(var(--slr-side-accent, 99, 102, 241), .45);
    transition: transform .2s, box-shadow .2s;
}

.slr-side-group::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(var(--slr-side-accent, 99, 102, 241), .06) 35%,
            rgba(var(--slr-side-accent, 99, 102, 241), .10) 50%,
            rgba(var(--slr-side-accent, 99, 102, 241), .06) 65%,
            transparent 100%);
    transform: translateX(-110%);
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.slr-side-group:hover {
    color: #fff;
    background:
        linear-gradient(135deg,
            rgba(var(--slr-side-accent, 99, 102, 241), .28) 0%,
            rgba(var(--slr-side-accent, 99, 102, 241), .10) 100%),
        rgba(255, 255, 255, .025);
    border-color: rgba(var(--slr-side-accent, 99, 102, 241), .45);
    transform: translateX(2px);
}

.slr-side-group:hover::after {
    transform: translateX(110%);
}

.slr-side-group:hover::before {
    transform: scale(1.25);
    box-shadow:
        0 0 0 2px rgba(var(--slr-side-accent, 99, 102, 241), .20),
        0 0 12px rgba(var(--slr-side-accent, 99, 102, 241), .65);
}

.slr-side-group:focus-visible {
    outline: 2px solid rgb(var(--slr-side-accent, 99, 102, 241));
    outline-offset: 2px;
}

.slr-side-section.is-collapsed .slr-side-group::before {
    box-shadow: 0 0 0 2px rgba(var(--slr-side-accent, 99, 102, 241), .08);
    opacity: .7;
}

.slr-side-group-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slr-side-group-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

/* Active-dot signals "your current page lives in this collapsed group" */
.slr-side-group-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--slr-side-accent, 99, 102, 241));
    box-shadow:
        0 0 0 2px rgba(var(--slr-side-accent, 99, 102, 241), .20),
        0 0 10px rgba(var(--slr-side-accent, 99, 102, 241), .85);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s, transform .2s;
}

.slr-side-section.has-active.is-collapsed .slr-side-group-active-dot {
    opacity: 1;
    transform: scale(1);
    animation: slrSideActivePulse 2s ease-in-out infinite;
}

@keyframes slrSideActivePulse {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(var(--slr-side-accent, 99, 102, 241), .20),
            0 0 10px rgba(var(--slr-side-accent, 99, 102, 241), .85);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(var(--slr-side-accent, 99, 102, 241), .10),
            0 0 14px rgba(var(--slr-side-accent, 99, 102, 241), 1);
    }
}

.slr-side-group-chev {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgb(var(--slr-side-accent, 99, 102, 241));
    opacity: .85;
    transition: transform .2s, opacity .2s;
}

.slr-side-group:hover .slr-side-group-chev {
    opacity: 1;
}

.slr-side-section.is-collapsed .slr-side-group-chev {
    transform: rotate(-90deg);
}

.slr-side-group-items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    padding: .35rem 0 .2rem .55rem;
    margin: .15rem 0 0 .85rem;
    background:
        linear-gradient(180deg,
            rgba(var(--slr-side-accent, 99, 102, 241), .35),
            rgba(var(--slr-side-accent, 99, 102, 241), .05)) left / 2px 100% no-repeat;
    max-height: 600px;
    opacity: 1;
    transition: max-height 280ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease;
}

.slr-sidebar[data-hydrating="true"] .slr-side-group-items,
.slr-sidebar[data-hydrating="true"] .slr-side-group-chev {
    transition: none !important;
}

.slr-side-section.is-collapsed>.slr-side-group-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.slr-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .9rem;
    border-radius: .55rem;
    font-size: .87rem;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    border: none;
    background: none
}

.slr-nav-item:hover {
    background: rgba(99, 102, 241, .08);
    color: #e2e8f0
}

.slr-nav-item.is-active {
    background: rgba(99, 102, 241, .16);
    color: #a5b4fc;
    font-weight: 600
}

.slr-nav-icon {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
    flex-shrink: 0
}

.slr-sidebar-footer {
    padding: .6rem;
    border-top: 1px solid rgba(99, 102, 241, .1)
}

/* ── Content ── */
.slr-content {
    background: var(--bg);
    padding: 2rem 2.5rem;
    overflow-y: auto;
    min-height: 100vh
}

@media(max-width:767px) {
    .slr-content {
        padding: 1.25rem 1rem
    }
}

.slr-section {
    display: none;
    animation: fadeUp .25s ease
}

.slr-section.is-visible {
    display: block
}

/* ── Onboarding mode (no seller profile yet, or Pending / Rejected / Suspended) ──
   Collapse the sidebar and let the content span the full width so the apply form
   reads as a standalone page instead of a seller dashboard with an empty body.
   Approved sellers get the full two-column shell back via the absence of this class. */
#seller-page.is-onboarding {
    grid-template-columns: 1fr;
}

#seller-page.is-onboarding .slr-sidebar {
    display: none;
}

/* Let the hero gradient bleed to the edges — the default .slr-content padding boxes
   it in and breaks the full-bleed premium look. We also match the rest of the site
   by pulling the purple tones up so the form feels like it belongs to Stoling, not
   to the admin dashboard. */
#seller-page.is-onboarding .slr-content {
    padding: 0;
    background: var(--bg);
}

#seller-page.is-onboarding .slr-gate-wrap {
    min-height: calc(100vh - 80px);
}

/* ── Header ── */
.slr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.8rem
}

.slr-title {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.02em;
    color: #f1f5f9
}

.slr-subtitle {
    font-size: .85rem;
    color: #64748b;
    margin: .2rem 0 0
}

/* ── Badge — "Approved" header pill ─────────────────────────────────────────
   Premium emerald gradient + leading dot + soft pulse so the live
   status reads as "active and verified" rather than a flat label.
   Same family as .adm-badge--active in the admin panel. */
.slr-badge-approved {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .85rem .32rem .65rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6ee7b7;
    background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(34, 197, 94, .08));
    border: 1px solid rgba(110, 231, 183, .38);
    box-shadow: 0 0 18px -4px rgba(110, 231, 183, .55);
}

.slr-badge-approved::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: slr-approved-pulse 2.2s ease-in-out infinite;
}

@keyframes slr-approved-pulse {

    0%,
    100% {
        box-shadow: 0 0 6px currentColor;
    }

    50% {
        box-shadow: 0 0 12px currentColor, 0 0 0 3px rgba(110, 231, 183, .18);
    }
}

/* ── Stat Cards — premium accent palette per metric ─────────────────────────
   Mirrors the admin dashboard: each card pulls its own colour from a
   data-metric tag, gradient icon pill, top accent rail, hover lift +
   accent shadow. Default is the brand indigo when no metric is set. */
.slr-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.slr-stat-card {
    --slr-stat-accent: 99, 102, 241;
    /* indigo brand default */
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 19, 38, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 14px;
    padding: 1.2rem 1.25rem;
    overflow: hidden;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* Per-metric accent — keep parity with the admin palette where possible. */
.slr-stat-card[data-metric="products"] {
    --slr-stat-accent: 251, 146, 60;
}

/* orange */
.slr-stat-card[data-metric="store"] {
    --slr-stat-accent: 167, 139, 250;
}

/* violet */
.slr-stat-card[data-metric="earnings"] {
    --slr-stat-accent: 52, 211, 153;
}

/* emerald */

/* Action-required row */
.slr-stat-card[data-metric="pack"] {
    --slr-stat-accent: 96, 165, 250;
}

/* sky */
.slr-stat-card[data-metric="transit"] {
    --slr-stat-accent: 34, 211, 238;
}

/* cyan */
.slr-stat-card[data-metric="cancel"] {
    --slr-stat-accent: 251, 191, 36;
}

/* amber */
.slr-stat-card[data-metric="return"] {
    --slr-stat-accent: 244, 114, 182;
}

/* pink */
.slr-stat-card[data-metric="dispute"] {
    --slr-stat-accent: 248, 113, 113;
}

/* red */

/* Top accent rail — invisible until hover, then sweeps in. */
.slr-stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(var(--slr-stat-accent), 0) 0%,
            rgba(var(--slr-stat-accent), 0.85) 50%,
            rgba(var(--slr-stat-accent), 0) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
}

.slr-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--slr-stat-accent), 0.32);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.32),
        0 0 24px -4px rgba(var(--slr-stat-accent), 0.20);
}

.slr-stat-card:hover::before {
    opacity: 1;
}

.slr-stat-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        linear-gradient(135deg,
            rgba(var(--slr-stat-accent), 0.28) 0%,
            rgba(var(--slr-stat-accent), 0.10) 100%);
    border: 1px solid rgba(var(--slr-stat-accent), 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 12px -4px rgba(var(--slr-stat-accent), 0.30);
    font-size: 1.35rem;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.slr-stat-card:hover .slr-stat-icon {
    transform: scale(1.06) rotate(-2deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 6px 18px -4px rgba(var(--slr-stat-accent), 0.55);
}

.slr-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: #f1f5f9;
    letter-spacing: -0.02em;
}

/* Earnings card — money number gets a subtle gradient text so it
   reads as "this is real revenue" without going cartoonish. */
.slr-stat-card[data-metric="earnings"] .slr-stat-value {
    background: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.slr-stat-label {
    font-size: .78rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: .15rem;
}

/* ── Gate (Apply / Pending / Rejected) ── */
.slr-gate-wrap {
    min-height: calc(100vh - 120px);
    padding: 0
}

/* Centered state cards (loading, pending, rejected, suspended) */
.slr-gate-state-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 2rem;
    color: #94a3b8;
    text-align: center;
    background: var(--bg);
}

.slr-gate-card-compact {
    background:
        linear-gradient(165deg, rgba(139, 92, 246, .08) 0%, rgba(255, 255, 255, .03) 55%),
        rgba(20, 14, 48, .55);
    border: 1px solid rgba(167, 139, 250, .22);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 500px;
    width: 100%;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow:
        0 24px 60px -12px rgba(76, 29, 149, .45),
        0 0 0 1px rgba(255, 255, 255, .03) inset
}

.slr-gate-card-compact h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 .3rem;
}

.slr-gate-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.slr-gate-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.3rem;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all .2s;
}

.slr-gate-btn--secondary {
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .25);
    color: #a5b4fc;
}

.slr-gate-btn--secondary:hover {
    background: rgba(99, 102, 241, .2);
    color: #c7d2fe;
}

.slr-gate-btn--danger {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #fca5a5;
}

.slr-gate-btn--danger:hover {
    background: rgba(239, 68, 68, .2);
    color: #fecaca;
}

/* ── Cancel Confirmation Modal ── */
.slr-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn .2s ease;
}

.slr-confirm-overlay.d-none {
    display: none;
}

.slr-confirm-card {
    background:
        linear-gradient(165deg, rgba(139, 92, 246, .08) 0%, rgba(255, 255, 255, .03) 55%),
        rgba(20, 14, 48, .92);
    border: 1px solid rgba(167, 139, 250, .22);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 24px 60px -12px rgba(76, 29, 149, .5);
}

.slr-confirm-icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}

.slr-confirm-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 .5rem;
}

.slr-confirm-card p {
    font-size: .88rem;
    color: #94a3b8;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.slr-confirm-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

letter-spacing: -.02em
}

.slr-gate-icon {
    font-size: 3.5rem;
    margin-bottom: .5rem
}

.slr-gate-desc {
    font-size: .88rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1.2rem
}

/* ── Apply Hero — full-width premium layout ── */
.slr-apply-hero {
    position: relative;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Use the site's base background (var(--bg) = #0b0a1a) with a subtle purple
       radial glow — same feel as the shop/feed/discover pages. No separate
       gradient that makes the apply page look like a different app. */
    background: var(--bg);
}

.slr-apply-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.slr-apply-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35
}

.slr-apply-blob--1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, #8b5cf6, transparent 70%);
    top: -18%;
    left: -10%;
    animation: blobFloat 20s ease-in-out infinite
}

.slr-apply-blob--2 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #ec4899, transparent 70%);
    bottom: -15%;
    right: -8%;
    animation: blobFloat 20s ease-in-out infinite -10s
}

.slr-apply-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 2rem
}

/* Kicker */
.slr-apply-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #a5b4fc;
    margin-bottom: 1rem;
    padding: .4rem .8rem .4rem .5rem;
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 99px
}

.slr-apply-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    animation: dotPulse 2s ease-in-out infinite
}

.slr-apply-hero-text {
    margin-bottom: 2rem
}

.slr-apply-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    letter-spacing: -.03em
}

.slr-apply-sub {
    font-size: 1rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
    max-width: 50ch
}

/* ── Wide Form ── */
.slr-apply-form-wide {
    /* Glassmorphism card: sits on top of the purple hero gradient, carries a faint
       violet edge so it reads as "on brand" instead of a neutral floating panel. */
    background:
        linear-gradient(165deg, rgba(139, 92, 246, .08) 0%, rgba(255, 255, 255, .03) 55%),
        rgba(20, 14, 48, .55);
    border: 1px solid rgba(167, 139, 250, .22);
    border-radius: 1.25rem;
    padding: 2rem;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow:
        0 24px 60px -12px rgba(76, 29, 149, .45),
        0 0 0 1px rgba(255, 255, 255, .03) inset
}

.slr-afw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.slr-afw-span2 {
    grid-column: 1 / -1
}

.slr-afw-group {
    display: flex;
    flex-direction: column
}

.slr-afw-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a5b4fc;
    margin-bottom: .4rem
}

.slr-afw-input,
.slr-afw-textarea {
    width: 100%;
    padding: .7rem .95rem;
    border: 1.5px solid rgba(167, 139, 250, .16);
    border-radius: .65rem;
    /* Darker purple-tinted field so the input "wells" feel embedded in the card
       instead of sitting flat against a neutral dark slate. */
    background: rgba(10, 7, 28, .6);
    color: #e2e8f0;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: all .25s
}

.slr-afw-input:focus,
.slr-afw-textarea:focus {
    border-color: rgba(139, 92, 246, .6);
    background: rgba(10, 7, 28, .8);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .15)
}

.slr-afw-input::placeholder,
.slr-afw-textarea::placeholder {
    color: #475569
}

.slr-afw-textarea {
    resize: vertical;
    min-height: 60px
}

.slr-afw-submit {
    display: block;
    width: 100%;
    padding: .9rem 1.6rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .35);
    transition: all .25s;
    margin-top: 1.5rem;
    letter-spacing: -.01em
}

.slr-afw-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .45)
}

.slr-afw-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.slr-apply-back {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: .85rem;
    color: #94a3b8;
    text-decoration: none;
    transition: color .2s;
}

.slr-apply-back:hover {
    color: #a5b4fc;
}

@media(max-width:640px) {
    .slr-apply-hero-content {
        padding: 2rem 1rem
    }

    .slr-afw-grid {
        grid-template-columns: 1fr
    }

    .slr-apply-form-wide {
        padding: 1.2rem
    }

    .slr-apply-title {
        font-size: 1.5rem
    }
}

/* Spinner */
.slr-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(99, 102, 241, .15);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: slrSpin .7s linear infinite
}

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

/* ── Apply Form ── */
.slr-apply-form {
    width: 100%;
    text-align: left;
    margin-top: .5rem
}

.slr-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin: 1rem 0 .35rem
}

.slr-input,
.slr-textarea,
.slr-select {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid rgba(99, 102, 241, .15);
    border-radius: .65rem;
    background: rgba(15, 23, 42, .5);
    color: #e2e8f0;
    font-size: .88rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s
}

.slr-input:focus,
.slr-textarea:focus,
.slr-select:focus {
    border-color: rgba(99, 102, 241, .5)
}

.slr-textarea {
    resize: vertical;
    min-height: 60px
}

.slr-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center
}

/* CTA */
.slr-cta-main {
    display: block;
    width: 100%;
    padding: .8rem 1.4rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .92rem;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 16px rgba(99, 102, 241, .3);
    transition: all .2s;
    margin-top: 1.2rem
}

.slr-cta-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .4)
}

.slr-cta-main:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

/* ── Product Grid ── */
.slr-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem
}

.slr-prod-card {
    position: relative;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(99, 102, 241, .08);
    border-radius: 1rem;
    overflow: hidden;
    transition: all .25s
}

.slr-prod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(99, 102, 241, .12);
    border-color: rgba(99, 102, 241, .2)
}

.slr-prod-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, .02)
}

.slr-prod-body {
    padding: .85rem 1rem 1rem
}

.slr-prod-name {
    font-weight: 700;
    font-size: .92rem;
    color: #e2e8f0;
    margin: 0 0 .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.slr-prod-meta {
    font-size: .78rem;
    color: #64748b;
    margin: 0 0 .4rem
}

.slr-prod-price {
    font-weight: 800;
    font-size: 1rem;
    color: #a5b4fc
}

.slr-prod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem
}

.slr-prod-act {
    padding: .35rem .55rem;
    border-radius: .5rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    font-size: .72rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    white-space: nowrap
}

.slr-prod-act:hover {
    border-color: rgba(99, 102, 241, .3);
    color: #e2e8f0;
    background: rgba(99, 102, 241, .06)
}

.slr-prod-act--danger:hover {
    border-color: rgba(239, 68, 68, .4);
    color: #f87171;
    background: rgba(239, 68, 68, .06)
}

.slr-prod-status {
    position: absolute;
    top: .6rem;
    right: .6rem;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em
}

.slr-prod-status--active {
    background: rgba(16, 185, 129, .15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, .2)
}

.slr-prod-status--inactive {
    background: rgba(239, 68, 68, .12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, .15)
}

/* ── Pagination ── */
.slr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.2rem 0
}

.slr-page-btn {
    min-width: 36px;
    height: 36px;
    border-radius: .5rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    font-size: .82rem;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: all .12s;
    display: flex;
    align-items: center;
    justify-content: center
}

.slr-page-btn:hover {
    border-color: rgba(99, 102, 241, .3);
    color: #e2e8f0
}

.slr-page-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

/* ── Settings Card ── */
.slr-settings-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(99, 102, 241, .1);
    border-radius: 1rem;
    overflow: hidden
}

.slr-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.slr-setting-row:last-child {
    border-bottom: none
}

.slr-setting-label {
    font-size: .82rem;
    font-weight: 600;
    color: #64748b
}

.slr-setting-value {
    font-size: .88rem;
    color: #e2e8f0;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* ── Modal ── */
.slr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .7);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.slr-modal-overlay.is-open {
    display: flex
}

.slr-modal {
    background: linear-gradient(160deg, #1e293b, #1e1b4b);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: 1.25rem;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .4);
    animation: fadeUp .2s ease
}

.slr-modal.slr-modal--wide {
    max-width: 860px;
}

/* Action-required cards — clickable navigation tiles. The accent comes
   from the [data-metric] palette above; we just add the pointer cursor
   here. The legacy --action / --warn / --danger modifiers stay no-ops
   for layout safety; their colours are already overridden by [data-metric]. */
.slr-stat-card--action,
.slr-stat-card--warn,
.slr-stat-card--danger {
    cursor: pointer;
}

/* When a counter is non-zero on the action row, gently pulse the value
   so the seller's eye is drawn there. Set by JS via .has-attention. */
.slr-stat-card.has-attention .slr-stat-value {
    animation: slr-attention-pulse 2.4s ease-in-out infinite;
}

@keyframes slr-attention-pulse {

    0%,
    100% {
        text-shadow: 0 0 0 rgba(var(--slr-stat-accent), 0);
    }

    50% {
        text-shadow: 0 0 12px rgba(var(--slr-stat-accent), 0.55);
    }
}

/* ── Order status pills — used in seller dashboard tables (recent orders,
   shipments). Same gradient + leading dot family as the admin badge so
   the entire surface speaks one visual language. */
.slr-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem .2rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    border: 1px solid transparent;
}

.slr-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

.slr-pill--confirmed {
    color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, .20), rgba(245, 158, 11, .06));
    border-color: rgba(251, 191, 36, .35);
    box-shadow: 0 0 14px -4px rgba(251, 191, 36, .45);
}

.slr-pill--shipped {
    color: #93c5fd;
    background: linear-gradient(135deg, rgba(96, 165, 250, .20), rgba(59, 130, 246, .06));
    border-color: rgba(147, 197, 253, .35);
    box-shadow: 0 0 14px -4px rgba(147, 197, 253, .45);
}

.slr-pill--delivered {
    color: #6ee7b7;
    background: linear-gradient(135deg, rgba(110, 231, 183, .20), rgba(34, 197, 94, .06));
    border-color: rgba(110, 231, 183, .35);
    box-shadow: 0 0 14px -4px rgba(110, 231, 183, .45);
}

.slr-pill--buyerconfirmed {
    color: #4ade80;
    background: linear-gradient(135deg, rgba(74, 222, 128, .22), rgba(22, 163, 74, .06));
    border-color: rgba(74, 222, 128, .40);
    box-shadow: 0 0 16px -4px rgba(74, 222, 128, .55);
}

/* Buyer-confirmed = escrow released = a "win" — give it a slow heartbeat. */
.slr-pill--buyerconfirmed::before {
    animation: slr-pill-heartbeat 2.4s ease-in-out infinite;
}

@keyframes slr-pill-heartbeat {

    0%,
    100% {
        box-shadow: 0 0 6px currentColor;
    }

    50% {
        box-shadow: 0 0 12px currentColor, 0 0 0 3px rgba(74, 222, 128, .18);
    }
}

.slr-pill--cancelled {
    color: #fca5a5;
    background: linear-gradient(135deg, rgba(252, 165, 165, .18), rgba(220, 38, 38, .04));
    border-color: rgba(252, 165, 165, .35);
}

.slr-pill--neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, .10);
    border-color: rgba(148, 163, 184, .22);
}

.slr-pill--neutral::before {
    box-shadow: none;
    opacity: .7;
}

/* ── Dashboard recent-orders table ────────────────────────────────────────
   Premium scannable list: tabular-nums money column with violet accent,
   soft row hover, initials avatar pill next to the buyer name, and a
   relative-time date with the full timestamp surfaced via title=. */
.slr-recent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.slr-recent-table thead tr {
    border-bottom: 1px solid rgba(99, 102, 241, .14);
}

.slr-recent-table th {
    text-align: left;
    padding: .5rem .65rem;
    color: #94a3b8;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.slr-recent-table .slr-recent-th-num {
    text-align: right;
}

.slr-recent-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    transition: background .18s ease;
}

.slr-recent-table tbody tr:hover {
    background: linear-gradient(90deg,
            rgba(99, 102, 241, .07) 0%,
            rgba(99, 102, 241, .03) 50%,
            transparent 100%);
}

.slr-recent-table td {
    padding: .55rem .65rem;
    color: #cbd5e1;
    vertical-align: middle;
}

.slr-recent-td-id {
    color: #e2e8f0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.slr-recent-td-money {
    color: #a5b4fc;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.slr-recent-td-date {
    color: #64748b;
    font-size: .78rem;
    cursor: help;
    white-space: nowrap;
}

/* Buyer cell — avatar + name laid out on a single row */
.slr-recent-buyer {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.slr-recent-buyer-name {
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slr-recent-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, .35), rgba(139, 92, 246, .15));
    border: 1px solid rgba(165, 180, 252, .35);
    color: #c7d2fe;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .35) inset;
}

/* Action column on the recent-orders table — keeps the message link narrow
   and right-aligned so the table still reads as a scannable summary. */
.slr-recent-table .slr-recent-th-actions {
    width: 44px;
    text-align: right;
}

.slr-recent-td-actions {
    width: 44px;
    text-align: right;
    padding-right: .5rem !important;
}

/* Compact message-icon button used across seller order surfaces:
   recent-orders table, cancellations row, returns row. Premium violet
   accent on hover so it reads as a primary action without being loud. */
.slr-msg-btn,
.sc-buyer-msg,
.sr-buyer-msg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: .4rem;
    border-radius: 8px;
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .18);
    color: #a5b4fc;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    flex-shrink: 0;
}

.slr-msg-btn:hover,
.sc-buyer-msg:hover,
.sr-buyer-msg:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(139, 92, 246, .15));
    border-color: rgba(165, 180, 252, .55);
    color: #ffffff;
    transform: translateY(-1px);
}

.slr-msg-btn svg,
.sc-buyer-msg svg,
.sr-buyer-msg svg {
    width: 14px;
    height: 14px;
}

/* Variant used inline within the seller-shipments action row — uses the
   same as-btn family but keeps the chat icon consistent with the table
   icons elsewhere. */
.slr-ship-msg-btn {
    display: inline-flex;
    align-items: center;
}

.slr-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(99, 102, 241, .1)
}

.slr-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #f1f5f9
}

.slr-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .12s
}

.slr-modal-close:hover {
    background: rgba(255, 255, 255, .06);
    color: #f1f5f9
}

.slr-modal-body {
    padding: 1.5rem
}

.slr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem
}

.slr-form-col {
    display: flex;
    flex-direction: column
}

/* Empty product state */
.slr-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
    font-size: .9rem
}

.slr-empty-icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    opacity: .5
}

@media(max-width:767px) {
    .slr-gate-card-compact {
        padding: 2rem 1.5rem
    }

    .slr-gate-card-compact h2 {
        font-size: 1.1rem
    }

    .slr-stats-grid {
        grid-template-columns: 1fr
    }

    .slr-product-grid {
        grid-template-columns: 1fr
    }

    .slr-form-row {
        grid-template-columns: 1fr
    }

    .slr-header {
        flex-direction: column;
        align-items: flex-start
    }
}

/* ── Seller file upload ── */
.slr-file-upload {
    margin-bottom: .75rem
}

.slr-file-input {
    width: 100%;
    padding: .55rem .65rem;
    background: rgba(99, 102, 241, .06);
    border: 1px dashed rgba(99, 102, 241, .25);
    border-radius: 10px;
    color: #c7d2fe;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .2s
}

.slr-file-input:hover {
    border-color: #818cf8
}

.slr-file-input::file-selector-button {
    background: #6366f1;
    color: #fff;
    border: none;
    padding: .35rem .7rem;
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
    margin-right: .5rem
}

.slr-file-preview {
    position: relative;
    display: inline-block;
    margin-top: .5rem
}

.slr-file-preview img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgba(99, 102, 241, .25)
}

.slr-file-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

/* ═══════════════════════════════════════
   CART PAGE — Premium Shopping Cart
   ═══════════════════════════════════════ */

/* Nav cart badge */
.as-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    margin-left: 2px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(239, 68, 68, .4)
}

/* Hero */
.cart-hero-wrap {
    position: relative;
    background: linear-gradient(145deg, #1e293b 0%, #1e1b4b 50%, #312e81 100%);
    overflow: hidden;
    padding: 0 2rem
}

.cart-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.cart-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .25
}

.cart-hero-blob--1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #6366f1, transparent);
    top: -20%;
    left: -5%;
    animation: blobFloat 20s ease-in-out infinite
}

.cart-hero-blob--2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #ec4899, transparent);
    bottom: -15%;
    right: -5%;
    animation: blobFloat 20s ease-in-out infinite -8s
}

.cart-hero {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 0 2.5rem;
    text-align: center
}

.cart-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 .5rem;
    letter-spacing: -.03em
}

.cart-hero-sub {
    color: #94a3b8;
    font-size: .95rem;
    margin: 0
}

/* Section */
.cart-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 0
}

/* Empty state */
.cart-empty {
    text-align: center;
    padding: 4rem 1rem
}

.cart-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: .5
}

.cart-empty-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 .5rem
}

.cart-empty-sub {
    color: #94a3b8;
    font-size: .95rem;
    margin: 0 0 2rem;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto
}

/* Layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem
}

@media(min-width:900px) {
    .cart-layout {
        grid-template-columns: 1fr 380px
    }
}

/* Items column */
.cart-items-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12)
}

.cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem
}

.cart-items-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0
}

.cart-clear-btn {
    background: none;
    border: none;
    color: #ef4444;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: .3rem .6rem;
    border-radius: 8px;
    transition: all .15s
}

.cart-clear-btn:hover {
    background: rgba(239, 68, 68, .1)
}

/* Items scrollable container */
.cart-items-list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: .25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, .3) transparent
}

.cart-items-list::-webkit-scrollbar {
    width: 5px
}

.cart-items-list::-webkit-scrollbar-track {
    background: transparent
}

.cart-items-list::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, .25);
    border-radius: 99px
}

.cart-items-list::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, .45)
}

/* Item card */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
    transition: all .2s
}

.cart-item:hover {
    border-color: rgba(99, 102, 241, .25);
    background: rgba(255, 255, 255, .07)
}

.cart-item-img-link {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0
}

.cart-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s
}

.cart-item:hover .cart-item-img {
    transform: scale(1.05)
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0
}

.cart-item-name {
    font-size: .92rem;
    font-weight: 600;
    color: #e2e8f0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s
}

.cart-item-name:hover {
    color: #818cf8
}

.cart-item-price {
    font-size: .8rem;
    color: #94a3b8
}

/* Quantity control */
.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    overflow: hidden
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    transition: all .15s
}

.cart-qty-btn:hover {
    background: rgba(99, 102, 241, .15);
    color: #818cf8
}

.cart-qty-value {
    min-width: 28px;
    text-align: center;
    font-size: .88rem;
    font-weight: 600;
    color: #e2e8f0
}

.cart-item-total {
    font-size: .95rem;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap
}

.cart-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    color: #94a3b8;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s
}

.cart-item-remove:hover {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .3);
    color: #ef4444
}

/* Summary card */
.cart-summary-col {
    position: sticky;
    top: 5rem;
    align-self: start
}

.cart-summary-card {
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08)
}

.cart-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 1.25rem
}

.cart-summary-rows {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
    color: #94a3b8
}

.cart-summary-row--total {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9
}

.cart-summary-free {
    color: #10b981;
    font-weight: 600
}

.cart-summary-divider {
    height: 1px;
    background: rgba(255, 255, 255, .08);
    margin: .25rem 0
}

.cart-checkout-btn {
    width: 100%;
    margin-top: 1.25rem;
    padding: .85rem 1.5rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(99, 102, 241, .35);
    transition: all .2s;
    letter-spacing: -.01em
}

.cart-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, .45)
}

.cart-checkout-btn:active {
    transform: translateY(0)
}

.cart-summary-info {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.cart-summary-info-item {
    font-size: .78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: .4rem
}

/* Mobile responsive */
@media(max-width:899px) {
    .cart-item {
        grid-template-columns: 64px 1fr;
        gap: .75rem;
        padding: .85rem 1rem
    }

    .cart-item-img-link {
        width: 64px;
        height: 64px
    }

    .cart-item-info {
        grid-column: 2/3
    }

    .cart-item-qty {
        grid-column: 1/2;
        grid-row: 2/3;
        justify-self: start
    }

    .cart-item-total {
        grid-column: 2/3;
        grid-row: 2/3;
        justify-self: end
    }

    .cart-item-remove {
        position: absolute;
        top: .5rem;
        right: .5rem
    }

    .cart-item {
        position: relative
    }

    .cart-summary-col {
        position: static
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   Notifications — Panel, Toast, Page styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panel header (mark-all button) ── */
.as-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .7rem;
}

.as-notif-mark-all {
    background: none;
    border: none;
    color: #a78bfa;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    padding: .2rem .5rem;
    border-radius: 6px;
    transition: background .12s, color .12s;
}

.as-notif-mark-all:hover {
    background: rgba(167, 139, 250, .12);
    color: #c4b5fd;
}

/* ── Panel footer (view all link) ── */
.as-notif-panel-footer {
    display: block;
    text-align: center;
    padding: .55rem .7rem;
    color: #a78bfa;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    transition: background .12s;
}

.as-notif-panel-footer:hover {
    background: rgba(167, 139, 250, .08);
    color: #c4b5fd;
}

/* ── Notification item enhancements ── */
.as-notif-item--unread {
    background: rgba(99, 102, 241, .06);
    border-left: 2px solid #818cf8;
}

.as-notif-item-body {
    flex: 1;
    min-width: 0;
}

.as-notif-item-title {
    font-weight: 600;
    color: #f1f5f9;
    font-size: .78rem;
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-notif-item-msg {
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════ */

.notif-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
    max-width: 360px;
    width: 100%;
}

.notif-toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .2);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity .3s ease, transform .3s ease;
}

.notif-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.notif-toast.is-dismissing {
    opacity: 0;
    transform: translateX(100%);
}

.notif-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.notif-toast-body {
    flex: 1;
    min-width: 0;
}

.notif-toast-title {
    font-weight: 600;
    color: #f1f5f9;
    font-size: .82rem;
    margin-bottom: .15rem;
}

.notif-toast-msg {
    color: #94a3b8;
    font-size: .75rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-toast-close {
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 .2rem;
    line-height: 1;
    transition: color .12s;
}

.notif-toast-close:hover {
    color: #f1f5f9;
}

/* ═══════════════════════════════════════
   Full Notifications Page
   ═══════════════════════════════════════ */

.notif-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.notif-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.notif-page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
}

.notif-page-mark-all {
    background: rgba(167, 139, 250, .1);
    border: 1px solid rgba(167, 139, 250, .25);
    color: #a78bfa;
    font-size: .8rem;
    font-weight: 600;
    padding: .45rem .9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.notif-page-mark-all:hover {
    background: rgba(167, 139, 250, .2);
    color: #c4b5fd;
}

.notif-page-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.notif-page-delete-all {
    background: rgba(239, 68, 68, .1);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #fca5a5;
    padding: .45rem .9rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.notif-page-delete-all:hover {
    background: rgba(239, 68, 68, .2);
    color: #fecaca;
}

/* ── Filters ── */
.notif-page-filters {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.notif-page-filters select {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-size: .8rem;
    padding: .4rem .7rem;
    border-radius: 8px;
    cursor: pointer;
    min-width: 140px;
}

.notif-page-filters select:focus {
    outline: none;
    border-color: #6366f1;
}

/* ── Notification list items (page) ── */
.notif-page-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    background: linear-gradient(155deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    padding: .75rem;
}

.as-notif-page-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: rgba(30, 41, 59, .5);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    position: relative;
}

.as-notif-page-item:hover {
    background: rgba(99, 102, 241, .08);
    border-color: rgba(99, 102, 241, .15);
}

.as-notif-page-item:hover .as-notif-item-delete {
    opacity: 1;
}

.as-notif-page-item--unread {
    background: rgba(99, 102, 241, .06);
    border-left: 3px solid #818cf8;
}

.as-notif-page-item-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: .15rem;
}

.as-notif-page-item-body {
    flex: 1;
    min-width: 0;
}

.as-notif-page-item-title {
    font-weight: 600;
    color: #f1f5f9;
    font-size: .85rem;
    margin-bottom: .2rem;
}

.as-notif-page-item-msg {
    color: #94a3b8;
    font-size: .78rem;
    line-height: 1.4;
    margin-bottom: .25rem;
}

.as-notif-page-item-when {
    color: #64748b;
    font-size: .7rem;
}

.notif-page-empty {
    text-align: center;
    color: #64748b;
    font-size: .9rem;
    padding: 3rem 1rem;
}

/* ── Load more button ── */
.notif-load-more {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: .6rem;
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .2);
    color: #a78bfa;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}

.notif-load-more:hover {
    background: rgba(99, 102, 241, .15);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .notif-toast-container {
        right: 10px;
        left: 10px;
        max-width: none;
        width: auto;
    }

    .notif-page {
        padding: 1.5rem .75rem;
    }

    .notif-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    .notif-page-filters {
        flex-direction: column;
    }
}

/* ═══ Profile Social Lists (Following/Followers) ═══ */
.prf-social-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}

.prf-social-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.prf-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.prf-social-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.prf-social-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.prf-social-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.prf-social-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prf-social-username {
    font-size: 0.75rem;
    color: #94a3b8;
}

.prf-social-unfollow,
.prf-social-unblock {
    padding: 5px 12px;
    font-size: 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: transparent;
    color: #f87171;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.prf-social-unfollow:hover,
.prf-social-unblock:hover {
    background: rgba(239, 68, 68, 0.1);
}

.prf-social-actions {
    display: flex;
    gap: 6px;
}

.prf-social-accept {
    padding: 5px 12px;
    font-size: 0.75rem;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    cursor: pointer;
    transition: all 0.15s;
}

.prf-social-accept:hover {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.prf-social-reject {
    padding: 5px 12px;
    font-size: 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s;
}

.prf-social-reject:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ═══ Profile Payments Section ═══ */
.prf-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    margin-bottom: 8px;
}

.prf-pay-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.2);
}

.prf-pay-row-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prf-pay-num {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f1f5f9;
}

.prf-pay-date {
    font-size: 0.72rem;
    color: #94a3b8;
}

.prf-pay-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prf-pay-amount {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
}

.prf-pay-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.prf-pay-badge--success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.prf-pay-badge--default {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.prf-empty-mini {
    text-align: center;
    color: #64748b;
    font-size: 0.82rem;
    padding: 1.5rem 0;
}

/* ═══ Stoling AI Chat Button ═══ */
.ai-chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 20px rgba(124, 58, 237, 0.45),
        0 0 40px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: ai-fab-pulse 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.ai-chat-fab::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #7c3aed, #ec4899, #a855f7, #7c3aed);
    z-index: -1;
    opacity: 0.5;
    animation: ai-fab-ring-spin 4s linear infinite;
    filter: blur(4px);
}

@keyframes ai-fab-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

.ai-chat-fab:hover {
    transform: scale(1.12) translateY(-3px);
    box-shadow:
        0 8px 35px rgba(124, 58, 237, 0.6),
        0 0 80px rgba(168, 85, 247, 0.3);
}

.ai-chat-fab:hover::before {
    opacity: 0.8;
}

/* Hover gesture — energetic wave that fires once per hover-enter. The hand
   rotates faster + the eye gives an extra wink so the user sees a
   definitive "hey!" the moment they engage. */
.ai-chat-fab:hover .ai-mascot-hand {
    animation: ai-mascot-wave-hover 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1,
        ai-mascot-wave 6s ease-in-out infinite 0.9s;
}

.ai-chat-fab:hover .ai-mascot-eye--right {
    animation: ai-mascot-wink 0.6s ease-in-out 1, ai-mascot-blink 5s ease-in-out infinite 0.6s;
}

@keyframes ai-mascot-wave-hover {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(28deg);
    }

    40% {
        transform: rotate(-14deg);
    }

    60% {
        transform: rotate(24deg);
    }

    80% {
        transform: rotate(-8deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.ai-chat-fab .ai-chat-fab-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 0;
    /* Lift the mascot a hair so the bottom shadow plate sits inside the
       button without clipping. */
    transform: translateY(-1px);
}

/* SVG mascot — the whole svg gets a gentle "float" (idle bob); the body
   group inside breathes; eyes blink + wink; the paw waves; one small
   sparkle pulses near the corner. Layered, light, never noisy. */
.ai-mascot {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: center 60%;
    animation: ai-mascot-float 5s ease-in-out infinite;
    will-change: transform;
}

.ai-mascot-body {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-mascot-breath 4.5s ease-in-out infinite;
    will-change: transform;
}

/* Soft ground shadow shrinks/grows with the float to sell the bob. */
.ai-mascot-shadow {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-mascot-shadow 5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Both eyes blink together every ~5 s. */
.ai-mascot-eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-mascot-blink 5s ease-in-out infinite;
    will-change: transform;
}

/* Right eye additionally winks on a longer offset cycle. */
.ai-mascot-eye--right {
    animation: ai-mascot-blink 5s ease-in-out infinite,
        ai-mascot-wink 7s ease-in-out infinite 2.5s;
}

/* Paw pivots from the cheek attachment point. */
.ai-mascot-hand {
    transform-box: fill-box;
    transform-origin: 0% 80%;
    animation: ai-mascot-wave 5.5s ease-in-out infinite;
    will-change: transform;
}

/* Single tasteful sparkle in the corner — pops once per cycle. */
.ai-mascot-sparkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-mascot-twinkle 3.4s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes ai-mascot-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.5px);
    }
}

@keyframes ai-mascot-breath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

@keyframes ai-mascot-shadow {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 0.18;
    }

    50% {
        transform: scaleX(0.85);
        opacity: 0.1;
    }
}

/* Both eyes scale-Y collapse for ~140 ms every cycle — the rest of the
   timeline holds the normal open state so the eyes feel calm. */
@keyframes ai-mascot-blink {

    0%,
    92%,
    100% {
        transform: scaleY(1);
    }

    94%,
    97% {
        transform: scaleY(0.08);
    }
}

/* Wink — only the right eye, a slightly slower-than-blink close that
   reads as a deliberate gesture rather than a reflex. */
@keyframes ai-mascot-wink {

    0%,
    88%,
    100% {
        transform: scaleY(1);
    }

    92%,
    96% {
        transform: scaleY(0.05);
    }
}

/* Wave — paw rotates around the attachment to the cheek. ~75 % of the
   cycle the paw rests, then a brief multi-rotation burst before settling. */
@keyframes ai-mascot-wave {

    0%,
    6%,
    32%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(22deg);
    }

    14% {
        transform: rotate(-12deg);
    }

    18% {
        transform: rotate(20deg);
    }

    22% {
        transform: rotate(-6deg);
    }

    26% {
        transform: rotate(10deg);
    }
}

/* Twinkle — sparkle scales from invisible to full size and rotates a
   quarter turn so it reads as a shimmer rather than a static dot. */
@keyframes ai-mascot-twinkle {

    0%,
    100% {
        transform: scale(0.2) rotate(0deg);
        opacity: 0;
    }

    20% {
        transform: scale(1.2) rotate(45deg);
        opacity: 1;
    }

    40% {
        transform: scale(1) rotate(90deg);
        opacity: 0.85;
    }

    60% {
        transform: scale(0.6) rotate(135deg);
        opacity: 0.4;
    }
}

/* Pause every animation when the user prefers reduced motion. The badge
   pulse ring + breath are also suppressed so the FAB stays calmly visible
   without any movement. */
@media (prefers-reduced-motion: reduce) {

    .ai-chat-fab,
    .ai-chat-fab::before,
    .ai-mascot,
    .ai-mascot-body,
    .ai-mascot-shadow,
    .ai-mascot-eye,
    .ai-mascot-eye--right,
    .ai-mascot-hand,
    .ai-mascot-sparkle,
    .ai-mascot-star {
        animation: none !important;
    }
}

.ai-chat-fab-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 8px;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

@keyframes ai-fab-pulse {

    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(124, 58, 237, 0.45),
            0 0 40px rgba(168, 85, 247, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow:
            0 4px 25px rgba(124, 58, 237, 0.65),
            0 0 60px rgba(168, 85, 247, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* Hide on chat page itself and for guests */
.page-chat .ai-chat-fab {
    display: none;
}

/* Hide the AI chat FAB on the Messages page (mobile) — it overlaps the message input */
.page-messages .ai-chat-fab {
    display: none;
}

@media (max-width: 768px) {
    .ai-chat-fab {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .ai-chat-fab svg {
        width: 20px;
        height: 20px;
    }
}

/* ═══ AI Chat Widget (inline modal panel) ═══ */
.ai-chat-fab {
    z-index: 9998;
    border: none;
}

.ai-chat-fab-close {
    display: none;
}

.ai-chat-fab.is-active .ai-chat-fab-icon {
    display: none;
}

.ai-chat-fab.is-active .ai-chat-fab-close {
    display: block;
}

.ai-chat-fab.is-active {
    animation: none;
    background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

.ai-chat-widget {
    position: fixed;
    bottom: 92px;
    right: 24px;
    z-index: 9997;
    width: 380px;
    height: 560px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.2);
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-chat-widget.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.ai-chat-widget-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg, #0a0a0f);
}

/* Widget uses inline ch-container — override height for widget mode */
.ai-chat-widget .ch-container {
    height: 100%;
    max-width: 100%;
    border-radius: 0;
}

.page-chat .ai-chat-fab,
.page-chat .ai-chat-widget {
    display: none !important;
}

@media (max-width: 768px) {
    .ai-chat-widget {
        bottom: 78px;
        right: 8px;
        left: 8px;
        width: auto;
        height: calc(100vh - 140px);
        border-radius: 16px;
    }
}


/* ── Suspended-account banner (login page) ── */
.auth-suspended {
    display: flex;
    gap: .9rem;
    padding: 1rem 1.1rem;
    margin: 0 0 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(220, 38, 38, .15), rgba(190, 18, 60, .12));
    border: 1px solid rgba(248, 113, 113, .35);
    color: #fecaca;
    align-items: flex-start;
}

.auth-suspended-icon {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .15rem;
}

.auth-suspended-body {
    flex: 1;
    min-width: 0;
}

.auth-suspended-title {
    display: block;
    font-size: .98rem;
    color: #fecaca;
    margin-bottom: .35rem;
}

.auth-suspended-text {
    margin: 0 0 .35rem;
    font-size: .87rem;
    color: #fecaca;
    line-height: 1.45;
    word-break: break-word;
}

.auth-suspended-meta {
    margin: 0 0 .35rem;
    font-size: .8rem;
    color: #fda4af;
    line-height: 1.4;
}

.auth-suspended-help {
    margin: .55rem 0 0;
    font-size: .8rem;
    color: rgba(254, 202, 202, .85);
}

.auth-suspended-help a {
    color: #fef2f2;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: .25rem;
    font-weight: 600;
}

.auth-suspended-help a:hover {
    color: #fff;
}


/* ── Anonymous ban-appeal modal ── */
.auth-appeal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, .65);
    backdrop-filter: blur(6px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-appeal-modal {
    width: 100%;
    max-width: 480px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 18px;
    padding: 1.6rem 1.6rem 1.4rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
    color: #e2e8f0;
    position: relative;
}

.auth-appeal-close {
    position: absolute;
    top: .55rem;
    right: .85rem;
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .5rem;
}

.auth-appeal-close:hover {
    color: #f1f5f9;
}

.auth-appeal-title {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    padding-right: 1.5rem;
}

.auth-appeal-sub {
    margin: 0 0 1rem;
    font-size: .85rem;
    color: #94a3b8;
    line-height: 1.5;
}

.auth-appeal-form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.auth-appeal-label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #cbd5f5;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-appeal-label input,
.auth-appeal-label textarea {
    padding: .65rem .8rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #1e293b;
    color: #f1f5f9;
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
}

.auth-appeal-label textarea {
    min-height: 110px;
    resize: vertical;
}

.auth-appeal-label input:focus,
.auth-appeal-label textarea:focus {
    outline: 2px solid rgba(99, 102, 241, .55);
    outline-offset: -1px;
    border-color: rgba(99, 102, 241, .8);
}

.auth-appeal-status {
    margin: 0;
    min-height: 1.1em;
    font-size: .82rem;
}

.auth-appeal-actions {
    display: flex;
    gap: .55rem;
    justify-content: flex-end;
    margin-top: .35rem;
}

.auth-appeal-btn {
    padding: .55rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: opacity .15s;
}

.auth-appeal-btn--ghost {
    background: transparent;
    border-color: rgba(148, 163, 184, .25);
    color: #cbd5f5;
}

.auth-appeal-btn--ghost:hover {
    border-color: rgba(148, 163, 184, .55);
    color: #f1f5f9;
}

.auth-appeal-btn--primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.auth-appeal-btn--primary:hover {
    opacity: .9;
}

.auth-appeal-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}


/* ─── Cart: unavailable (soft-archived product) row ─── 
   Backend marks the line as IsUnavailable=true when the product has
   been soft-archived or deactivated since the buyer added it. We grey
   out the row, drop the price + qty stepper, and disable the checkout
   button. The Remove button stays so the buyer can clean up. */

.cart-item--unavailable {
    opacity: 0.55;
    filter: saturate(0.45);
}

.cart-item--unavailable .cart-item-img {
    filter: grayscale(100%);
}

.cart-item-img-link--disabled {
    cursor: not-allowed;
    pointer-events: none;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-name--disabled {
    color: rgba(229, 231, 235, 0.65);
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.5);
    font-size: 0.92rem;
    font-weight: 600;
}

.cart-item-unavailable-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    width: fit-content;
}

.cart-item-qty--placeholder {
    color: #475569;
    font-size: 1.2rem;
    text-align: center;
    width: 110px;
    /* matches the active stepper width */
}

.cart-item-total--muted {
    color: #475569;
}

#cart-checkout-btn.is-disabled,
#cart-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════════
   Product Detail — "this listing is gone" state
   Surfaces when the product 404s on aggregate fetch (soft-archived /
   hard-deleted). Replaces the raw error wall with a friendly card +
   auto-redirect, mirroring Instagram / Etsy "content unavailable" UX.
   ════════════════════════════════════════════════════════════════════ */
.pd-gone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 4rem 1.5rem;
    max-width: 520px;
    margin: 3rem auto;
    background: linear-gradient(145deg, rgba(30, 41, 59, .55), rgba(30, 27, 75, .55));
    border: 1px solid rgba(99, 102, 241, .18);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
}

.pd-gone-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(245, 158, 11, .35));
}

.pd-gone-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -.01em;
}

.pd-gone-msg {
    margin: 0;
    color: #94a3b8;
    font-size: .95rem;
    line-height: 1.55;
}