/* ═══════════════════════════════════════════
   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;
}

/* ── Beta / test-mode notice ──────────────────────────────────────────────
   A floating, dismissible pill anchored bottom-centre. Deliberately NOT a top
   bar: the header is a floating pill and every page tunes its own body
   padding-top, so a top announcement bar would fight that layout. A bottom
   pill needs zero layout offset and works identically on every page.
   Toggled server-side via the "site.beta-banner" feature flag. */
.as-beta-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1150;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    max-width: min(92vw, 640px);
    padding: .6rem .7rem .6rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(124, 58, 237, .96), rgba(99, 102, 241, .96));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 10px 34px rgba(76, 29, 149, .5), 0 2px 8px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: .82rem;
    line-height: 1.35;
    backdrop-filter: blur(8px);
    transition: opacity .2s ease;
    animation: asBetaIn .35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes asBetaIn {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Subtle, always-on "beta" tag in the header — a quiet, premium signal of test
   mode. Deliberately understated: no bright fill, just a faint glassy pill with
   a brand-tinted label so it sits next to the logo without shouting. */
.as-beta-tag {
    align-self: stretch;
    margin-top: .1rem;
    padding: 0;
    font-size: .58rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .32em;
    text-indent: .32em;
    /* balances the trailing letter-spacing so text looks centred */
    text-align: center;
    text-transform: lowercase;
    /* Neutral, readable label — muted violet, no gradient/glow so it reads as a
       calm sub-label rather than a smudge over the logo. */
    background: none;
    -webkit-text-fill-color: currentColor;
    color: rgba(167, 139, 250, .85);
    filter: none;
    text-shadow: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 767px) {
    .as-beta-tag {
        font-size: .5rem;
        letter-spacing: .26em;
        text-indent: .26em;
    }
}

.as-beta-banner-ico {
    font-size: 1rem;
    flex-shrink: 0;
}

.as-beta-banner-txt {
    font-weight: 600;
}

.as-beta-banner-x {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.as-beta-banner-x:hover {
    background: rgba(255, 255, 255, .3);
}

/* Mobile: sit above the fixed bottom-nav and clear of the gesture bar. */
@media (max-width: 767px) {
    .as-beta-banner {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        font-size: .76rem;
        max-width: 94vw;
    }
}

/* 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: .5rem;
    user-select: none;
}

/* Vertical lockup: wordmark on top, tiny "beta" label tucked neatly underneath. */
.as-logo-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
}

/* Premium wordmark: a single smooth violet→pink gradient across the whole word
   with a soft, TIGHT glow (not a diffuse cloud) for depth without the smudge. */
.as-logo-word {
    display: inline-block;
    background: linear-gradient(105deg, #c4b5fd 0%, #8b5cf6 42%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 5px rgba(139, 92, 246, .35));
}

/* Admin-managed branding marks. The wordmark image replaces the text; the round
   icon sits before it. Heights track the text logo so the nav bar keeps its rhythm. */
.as-logo-img {
    height: 30px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

.as-logo-icon {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .as-logo-img {
        height: 26px;
        max-width: 140px;
    }

    .as-logo-icon {
        height: 26px;
        width: 26px;
    }
}

.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
    }
}

/* Desktop — hide mobile-only shop filter drawer elements */
@media(min-width:768px) {
    .shop-mobile-filter-btn {
        display: none !important;
    }

    .shop-filter-backdrop {
        display: none !important;
    }

    .shop-filter-close {
        display: none !important;
    }
}

.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
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP — COMPREHENSIVE MOBILE RESPONSIVE (≤767px)
   All 18 requirements: padding, filters, swatches, sizes, brands, switches,
   clear btn, hero, AI cards, category chips, toolbar, grid, product card,
   floating AI btn, header, overflow prevention, extra-small breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ─── Shop: Filter Drawer (mobile) ─── */
    .shop-mobile-filter-btn {
        display: flex;
        align-items: center;
        gap: .5rem;
        position: sticky;
        top: 72px;
        z-index: 50;
        padding: .6rem 1.2rem;
        background: linear-gradient(135deg, #1e1b4b, #0f172a);
        border: 1px solid rgba(99, 102, 241, .3);
        border-radius: 12px;
        color: #a5b4fc;
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
        margin-bottom: 12px;
        width: fit-content;
    }

    .shop-mobile-filter-btn.is-hidden {
        display: none !important;
    }

    .shop-mobile-filter-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .shop-filter-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 95;
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity .3s ease;
    }

    .shop-filter-backdrop.is-visible {
        display: block;
        opacity: 1;
    }

    .shop-filter-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid rgba(99, 102, 241, .2);
        background: rgba(99, 102, 241, .08);
        color: #a5b4fc;
        font-size: 1.1rem;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .shop-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 97 !important;
        border-radius: 0 16px 16px 0 !important;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
        box-shadow: 8px 0 32px rgba(0, 0, 0, .5);
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
        animation: none !important;
    }

    .shop-sidebar.is-open {
        transform: translateX(0);
    }

    /* Allow filter panel to scroll inside the drawer */
    .shop-filter-panel {
        overflow: visible !important;
        max-height: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        background: transparent !important;
    }

    /* Drawer itself needs solid dark background */
    .shop-sidebar {
        background: #0a0a1e !important;
    }

    .shop-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .shop-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .shop-hero-previews {
        padding-right: 16px;
    }

    /* ─── 1. Unified horizontal padding ─── */
    .shop-section,
    .shop-layout {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ─── 2. Filter panel spacing & headings ─── */
    .shop-filter-panel {
        gap: 0;
    }

    .shop-filter-section {
        padding: 10px 0;
        margin-bottom: 0;
    }

    .shop-filter-section+.shop-filter-section {
        margin-top: 4px;
    }

    .shop-filter-title {
        font-size: .84rem;
        font-weight: 800;
        letter-spacing: .02em;
    }

    /* Smooth collapse animation */
    .shop-filter-section>*:not(.shop-filter-title) {
        transition: max-height .3s ease, opacity .25s ease;
        overflow: hidden;
    }

    .shop-filter-section.is-collapsed>*:not(.shop-filter-title) {
        max-height: 0;
        opacity: 0;
        padding: 0;
        margin: 0;
    }

    /* ─── 3. Color swatches ─── */
    .shop-color-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        overflow: visible;
    }

    .shop-color {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        flex-shrink: 0;
    }

    /* ─── 4. Size chips ─── */
    .shop-size-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
    }

    .shop-size {
        padding: 8px 12px;
        min-height: 36px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* ─── 5. Brand list ─── */
    .shop-brand-list {
        max-height: 180px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shop-checkbox-label {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 6px 0;
    }

    .shop-checkbox-count {
        margin-left: auto;
        flex-shrink: 0;
    }

    .shop-checkbox-text {
        flex: 1;
        min-width: 0;
    }

    /* ─── 6. Switches (On Sale, In Stock) — 44px touch target ─── */
    .shop-toggle-label {
        gap: 12px;
        min-height: 44px;
        padding: 8px 0;
    }

    .shop-toggle-switch {
        width: 44px;
        height: 24px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 0;
        box-sizing: content-box;
    }

    /* ─── 7. Clear filters button ─── */
    .shop-clear-btn {
        height: 48px;
        border-radius: 14px;
        width: 100%;
        justify-content: center;
        font-size: .85rem;
    }

    /* ─── 8. Hero banner ─── */
    .shop-hero {
        padding: 16px !important;
        min-height: auto;
        border-radius: 16px;
    }

    .shop-hero-content {
        padding: 0;
        gap: 1rem;
    }

    .shop-hero-text {
        max-width: 100%;
        overflow: hidden;
    }

    .shop-hero-title {
        font-size: 1.35rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .shop-hero-sub {
        font-size: .82rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shop-hero-cta {
        min-height: 48px;
        min-width: 160px;
        justify-content: center;
        padding: 12px 24px;
    }

    /* Slider arrows repositioned so they don't overlay product cards */
    .shop-hero-arrow {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        z-index: 3;
    }

    .shop-hero-arrow--left {
        left: 4px;
    }

    .shop-hero-arrow--right {
        right: 4px;
    }

    /* ─── 9. AI product cards (hero previews / recommendations) ─── */
    .shop-hero-previews {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
    }

    .shop-hero-preview {
        width: 110px;
        min-width: 110px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .shop-hero-preview-img {
        aspect-ratio: 3/4;
        object-fit: cover;
        width: 100%;
    }

    .shop-hero-preview-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ─── 10. Category chips / tabs ─── */
    .shop-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
    }

    .shop-tab {
        min-height: 40px;
        padding: 8px 14px;
        font-size: .78rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .shop-tab.is-active {
        box-shadow: 0 4px 14px rgba(124, 58, 237, .4), 0 0 0 1px rgba(167, 139, 250, .5);
        border: 1.5px solid rgba(167, 139, 250, .6);
    }

    /* ─── 11. Toolbar (Grid/List toggle + Sort) ─── */
    .shop-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .shop-toolbar-right {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .shop-view-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .shop-sort {
        flex: 1;
        min-width: 0;
        height: 40px;
    }

    /* ─── 12. Product grid — ALWAYS 2 columns ─── */
    .shop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        align-items: stretch;
    }

    .shop-grid.is-list {
        grid-template-columns: 1fr !important;
    }

    .shop-grid.is-list .shop-card {
        grid-template-columns: 120px 1fr;
    }

    /* ─── 13. Product card ─── */
    .shop-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .shop-card-imgwrap {
        aspect-ratio: 3/4;
        overflow: hidden;
        flex-shrink: 0;
    }

    .shop-card-img {
        aspect-ratio: 3/4;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .shop-card-body {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .shop-card-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        font-size: .85rem;
    }

    .shop-card-bottom {
        margin-top: auto;
        padding-top: 6px;
    }

    .shop-card-price {
        font-size: .92rem;
    }

    /* Discount badge + Favorite don't overlap */
    .shop-card-discount-badge {
        top: 6px;
        left: 6px;
        font-size: .6rem;
        padding: 3px 6px;
        max-width: calc(100% - 48px);
    }

    .shop-card-wish,
    .shop-card-actions {
        top: 6px;
        right: 6px;
    }

    .shop-card-wish {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    /* ─── 14. Floating AI Button ─── */
    .ai-chat-fab {
        right: 16px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        width: 54px;
        height: 54px;
        z-index: 90;
    }

    /* ─── 15. Header — sticky doesn't overlap content ─── */
    .page-shop .as-main {
        padding-top: 0;
    }

    /* ─── 16. General overflow prevention ─── */
    .page-shop {
        overflow-x: hidden;
    }

    .page-shop .shop-sidebar {
        animation: none !important;
    }

    .page-shop .shop-section,
    .page-shop .shop-layout,
    .page-shop .shop-main {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Ensure all interactive elements have min 44px touch target */
    .shop-cat-item {
        min-height: 44px;
    }

    .shop-radio-label {
        min-height: 44px;
    }

    .shop-scent-pill {
        min-height: 40px;
        padding: 8px 14px;
    }

    /* Pagination row */
    .shop-pag-row {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .shop-page-size {
        height: 40px;
        min-height: 44px;
    }

    /* ═══════════════════════════════════════════════════════════════
       Mobile UI/UX Polish — Shop Page
       ═══════════════════════════════════════════════════════════════ */

    /* #1 Hero Banner: tighter to header, text breathing room */
    .shop-section {
        padding-top: 8px !important;
    }

    .shop-hero {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .shop-hero-content {
        padding: 20px 16px !important;
    }

    /* #2 Filter button + category chips: single horizontal scroll row, uniform size */
    .shop-mobile-filter-btn {
        position: relative !important;
        top: auto !important;
        margin: 0 !important;
        padding: 9px 14px !important;
        font-size: .78rem !important;
        border-radius: 20px !important;
        background: rgba(15, 18, 36, 0.85) !important;
        border: 1px solid rgba(139, 92, 246, .25) !important;
        backdrop-filter: blur(10px) !important;
        flex-shrink: 0 !important;
        height: 38px !important;
    }

    .shop-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 0 0 4px !important;
        margin-bottom: 12px !important;
        scrollbar-width: none !important;
        align-items: center !important;
    }

    .shop-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .shop-tab {
        flex-shrink: 0 !important;
        padding: 9px 14px !important;
        border-radius: 20px !important;
        font-size: .78rem !important;
        height: 38px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .shop-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        align-items: center !important;
    }

    /* #3 AI product slider: no card cutoff */
    .shop-hero-previews {
        padding-right: 40px !important;
        gap: 14px !important;
        scroll-padding-left: 16px;
    }

    .shop-hero-preview {
        width: 130px !important;
        min-width: 130px !important;
    }

    .shop-hero-preview-name {
        font-size: .75rem;
        padding: 6px 8px;
    }

    .shop-hero-preview-price {
        font-size: .72rem;
        padding: 0 8px 8px;
    }

    /* Slider arrows: don't overlay cards */
    .shop-hero-arrow {
        top: 50%;
        transform: translateY(-50%);
    }

    .shop-hero-arrow--right {
        right: -4px !important;
    }

    .shop-hero-arrow--left {
        left: -4px !important;
    }

    /* #4 Category chips: more spacing, wrap */
    .shop-tabs {
        gap: 10px !important;
        padding: 4px 0 !important;
        margin-bottom: 16px !important;
    }

    /* Removed duplicate tab rule — handled above */

    /* #5 Toolbar: compact row */
    .shop-toolbar {
        margin-bottom: 16px !important;
        align-items: center !important;
    }

    /* #6 Product grid: tighter to toolbar */
    .shop-grid {
        margin-top: 0 !important;
    }

    /* #7 Floating AI button: not covering cards */
    .page-shop .ai-chat-fab {
        bottom: 20px !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
    }

    /* #8 Unified vertical spacing between sections */
    .shop-hero {
        margin-bottom: 20px !important;
    }

    .shop-tabs {
        margin-bottom: 16px !important;
    }

    .shop-toolbar {
        margin-bottom: 16px !important;
    }

    /* #9 CTA button: premium look */
    .shop-hero-cta {
        min-height: 48px !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 24px rgba(99, 102, 241, .35) !important;
        font-weight: 700 !important;
    }

    /* #10 Product cards: equal height */
    .shop-card {
        border-radius: 16px !important;
    }

    .shop-card-imgwrap {
        border-radius: 16px 16px 0 0 !important;
    }

    /* #11 Page overflow */
    .page-shop,
    .page-shop .shop-section,
    .page-shop .shop-main {
        overflow-x: hidden !important;
    }

    /* ═══ AI PICKS — PREMIUM MOBILE REDESIGN ═══
       Banner hidden on mobile. Products show first.
       AI picks section appears AFTER the product grid. */

    /* ─── HIDE the entire hero banner on mobile ─── */
    .shop-hero {
        display: none !important;
    }

    /* ─── Section spacing without banner ─── */
    .shop-section {
        padding-top: 4px !important;
    }
}

/* ─── Extra-small devices (≤400px) ─── */
@media (max-width: 400px) {

    .shop-section,
    .shop-layout {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .shop-hero-title {
        font-size: 1.2rem;
    }

    .shop-hero-cta {
        min-width: 140px;
        padding: 10px 18px;
        font-size: .82rem;
    }

    .shop-hero-preview {
        width: 95px;
        min-width: 95px;
    }

    .shop-grid {
        gap: 8px;
    }

    .shop-card-body {
        padding: 8px 10px;
    }

    .shop-card-name {
        font-size: .8rem;
    }

    .shop-card-price {
        font-size: .85rem;
    }

    .shop-tab {
        padding: 6px 10px;
        font-size: .72rem;
        min-height: 36px;
    }

    .shop-view-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .shop-sort {
        font-size: .75rem;
        height: 36px;
    }

    .ai-chat-fab {
        width: 48px;
        height: 48px;
        right: 12px;
    }
}

/* ─── Extreme narrow screens (≤360px) ─── */
@media (max-width: 360px) {

    .shop-section,
    .shop-layout {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .shop-hero {
        padding: 12px !important;
        border-radius: 12px;
    }

    .shop-hero-title {
        font-size: 1.1rem;
    }

    .shop-hero-sub {
        font-size: .76rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .shop-grid {
        gap: 6px;
    }

    .shop-card-body {
        padding: 6px 8px;
    }

    .shop-card-name {
        font-size: .76rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .shop-card-price {
        font-size: .8rem;
    }

    .shop-color {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .shop-size {
        padding: 6px 10px;
        font-size: .72rem;
    }

    .shop-clear-btn {
        height: 44px;
        font-size: .8rem;
    }

    .shop-hero-preview {
        width: 85px;
        min-width: 85px;
    }
}

/* ═══ 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);
}

/* Product-level report link — a full-width subtle text button under the info column */
.pd-report-product {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1rem;
    font-size: .8rem;
    color: #94a3b8;
    opacity: .75;
}

.pd-report-product:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* 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 — Product Detail (≤767px) ═══ */
@media(max-width:767px) {
    .pd-wrap {
        padding: 1rem 0.75rem 3rem;
        overflow-x: hidden
    }

    /* Breadcrumb */
    .pd-breadcrumb {
        font-size: .7rem;
        flex-wrap: wrap;
        gap: .2rem;
        margin-bottom: .75rem
    }

    /* Top grid — stack vertically */
    .pd-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important
    }

    /* Gallery */
    .pd-gallery {
        position: relative !important;
        top: auto !important;
        width: 100%
    }

    .pd-gal-main {
        aspect-ratio: 3/4;
        max-height: 400px;
        border-radius: 1rem;
        width: 100%
    }

    .pd-gal-hero {
        max-height: 400px
    }

    .pd-gal-thumbs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: .4rem;
        padding: .5rem 0
    }

    .pd-gal-thumb {
        flex-shrink: 0;
        width: 60px;
        height: 72px;
        scroll-snap-align: start
    }

    .pd-gal-arrow {
        width: 32px;
        height: 32px;
        font-size: 1rem
    }

    /* Info panel */
    .pd-info {
        width: 100%;
        padding: 0 .25rem
    }

    .pd-cat-badge {
        font-size: .65rem;
        padding: .25rem .6rem
    }

    .pd-title {
        font-size: 1.35rem;
        line-height: 1.3
    }

    .pd-price-row {
        flex-wrap: wrap;
        gap: .4rem
    }

    .pd-price {
        font-size: 1.3rem
    }

    /* Inline price styles from JS — override with !important */
    .pd-price .pd-price-old {
        font-size: .7em !important;
        margin-right: .3rem !important
    }

    .pd-price .pd-price-badge {
        margin-left: .4rem !important;
        font-size: .65em !important;
        padding: .1rem .4rem !important
    }

    .pd-divider {
        margin: .75rem 0
    }

    /* Size/Color selectors — wrap */
    .pd-sizes {
        flex-wrap: wrap;
        gap: .35rem
    }

    .pd-size-btn {
        min-width: 44px;
        height: 40px;
        font-size: .78rem;
        padding: .3rem .55rem
    }

    .pd-colors {
        flex-wrap: wrap;
        gap: .3rem
    }

    .pd-color-chip {
        font-size: .72rem;
        padding: .3rem .55rem
    }

    .pd-color-dot {
        width: 10px;
        height: 10px
    }

    /* CTA — full width */
    .pd-cta-row {
        flex-direction: row;
        gap: .4rem
    }

    .pd-cta-cart {
        flex: 1;
        padding: .75rem 1rem;
        font-size: .85rem;
        border-radius: 12px
    }

    .pd-cta-wish {
        width: 46px;
        height: 46px;
        font-size: 1.1rem
    }

    /* Owner banner */
    .pd-owner-banner {
        flex-wrap: wrap;
        padding: .75rem .8rem;
        gap: .6rem
    }

    .pd-owner-banner-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem
    }

    .pd-owner-banner-title {
        font-size: .82rem
    }

    .pd-owner-banner-sub {
        font-size: .72rem
    }

    .pd-owner-banner-btn {
        width: 100%;
        text-align: center;
        padding: .5rem .8rem;
        font-size: .78rem
    }

    /* Outfit link */
    .pd-outfit-link {
        font-size: .78rem;
        padding: .5rem .75rem
    }

    /* Accordions */
    .pd-acc-head {
        padding: .7rem 0;
        font-size: .82rem
    }

    .pd-desc-text {
        font-size: .82rem
    }

    .pd-spec-table {
        font-size: .78rem
    }

    .pd-spec-l {
        padding: .35rem .75rem .35rem 0
    }

    .pd-ship-item {
        font-size: .78rem;
        padding: .4rem .5rem
    }

    /* Variant table */
    .pd-var-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .pd-var-table {
        min-width: 420px;
        font-size: .75rem
    }

    .pd-var-table th,
    .pd-var-table td {
        padding: .4rem .5rem
    }

    /* ═══ Reviews ═══ */
    .pd-section {
        margin-top: 1.75rem;
        padding-top: 1.25rem
    }

    .pd-section-title {
        font-size: 1.05rem;
        margin-bottom: .75rem
    }

    .pd-reviews-top {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .pd-rev-summary {
        align-items: center;
        text-align: center
    }

    .pd-rev-big-score {
        font-size: 2.4rem
    }

    .pd-rev-write {
        padding: .85rem;
        border-radius: 10px
    }

    .pd-rev-write h3 {
        font-size: .82rem
    }

    .pd-rev-name-input,
    .pd-rev-textarea,
    .pd-disc-name-input,
    .pd-disc-textarea {
        font-size: .82rem;
        padding: .5rem .65rem
    }

    .pd-rev-submit,
    .pd-disc-send {
        font-size: .78rem;
        padding: .5rem 1rem
    }

    .pd-rev-card {
        padding: .75rem;
        border-radius: 10px
    }

    .pd-rev-card-text {
        font-size: .82rem
    }

    .pd-rev-card-stars {
        font-size: .78rem
    }

    .pd-rev-card-date {
        font-size: .65rem
    }

    .pd-rev-card-author {
        font-size: .72rem
    }

    /* Discussion */
    .pd-disc-card {
        padding: .7rem;
        border-radius: 10px
    }

    .pd-disc-card-text {
        font-size: .8rem
    }

    .pd-disc-card-author {
        font-size: .75rem
    }

    .pd-disc-card-date {
        font-size: .62rem
    }

    .pd-disc-send {
        width: 40px;
        height: 40px;
        font-size: .85rem
    }

    /* Similar products — horizontal scroll */
    .pd-similar-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: .75rem;
        padding-bottom: .5rem
    }

    .pd-similar-grid::-webkit-scrollbar {
        display: none
    }

    .pd-sim-card {
        flex: 0 0 55%;
        min-width: 160px;
        max-width: 200px;
        scroll-snap-align: start
    }

    .pd-sim-img {
        aspect-ratio: 3/4
    }

    .pd-sim-body {
        padding: .5rem .6rem .6rem
    }

    .pd-sim-cat {
        font-size: .58rem
    }

    .pd-sim-name {
        font-size: .78rem
    }

    .pd-sim-price {
        font-size: .8rem
    }

    /* Confirm modal */
    .pd-confirm-box {
        width: 90%;
        max-width: 320px;
        padding: 1.25rem
    }

    .pd-confirm-msg {
        font-size: .85rem
    }

    /* Report modal */
    .pd-report-modal {
        width: 92%;
        max-width: 340px
    }

    /* Toast */
    .pd-toasts {
        left: .5rem;
        right: .5rem;
        max-width: none
    }

    .pd-toast {
        font-size: .78rem;
        padding: .55rem .85rem
    }

    /* Gone state */
    .pd-gone {
        padding: 2rem 1rem
    }

    .pd-gone-title {
        font-size: 1.1rem
    }

    .pd-gone-msg {
        font-size: .82rem
    }
}

/* ═══ RESPONSIVE — Product Detail Extra-small (≤400px) ═══ */
@media(max-width:400px) {
    .pd-wrap {
        padding: .75rem .5rem 2.5rem
    }

    .pd-breadcrumb {
        font-size: .62rem
    }

    .pd-gal-main {
        max-height: 320px;
        border-radius: .75rem
    }

    .pd-gal-hero {
        max-height: 320px
    }

    .pd-gal-thumb {
        width: 48px;
        height: 58px
    }

    .pd-title {
        font-size: 1.15rem
    }

    .pd-price {
        font-size: 1.15rem
    }

    .pd-price .pd-price-badge {
        display: block !important;
        margin-left: 0 !important;
        margin-top: .3rem !important;
        width: fit-content
    }

    .pd-size-btn {
        min-width: 38px;
        height: 36px;
        font-size: .72rem
    }

    .pd-color-chip {
        font-size: .65rem;
        padding: .25rem .4rem
    }

    .pd-cta-cart {
        padding: .65rem .75rem;
        font-size: .8rem
    }

    .pd-cta-wish {
        width: 40px;
        height: 40px
    }

    .pd-section-title {
        font-size: .95rem
    }

    .pd-rev-big-score {
        font-size: 2rem
    }

    .pd-rev-bar-star {
        font-size: .65rem
    }

    .pd-rev-bar-num {
        font-size: .62rem
    }

    .pd-rev-write {
        padding: .65rem
    }

    .pd-rev-card {
        padding: .6rem
    }

    .pd-disc-card {
        padding: .55rem
    }

    .pd-sim-card {
        flex: 0 0 65%;
        min-width: 140px
    }

    .pd-sim-name {
        font-size: .72rem
    }

    .pd-sim-price {
        font-size: .75rem
    }

    .pd-acc-head {
        font-size: .78rem;
        padding: .6rem 0
    }

    .pd-desc-text {
        font-size: .78rem
    }

    .pd-spec-table {
        font-size: .72rem
    }

    .pd-var-table {
        min-width: 360px;
        font-size: .7rem
    }

    .pd-owner-banner-title {
        font-size: .75rem
    }

    .pd-owner-banner-sub {
        font-size: .68rem
    }

    .pd-confirm-box {
        width: 94%;
        padding: 1rem
    }

    .pd-report-modal {
        width: 95%;
        padding: 0
    }
}

/* ═══ 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
}

/* ── New-system chrome (spec 9.5): the island surfaces (My Home / Today / My DNA)
      render their own Minimal_Chrome (ui-kit TopBar + left AppShell nav) and a small
      Ambient_Footer, so the legacy classic multi-column footer must NOT appear there.
      `.page-island` is an additive marker on those views (alongside page-home, which the
      legacy home page also uses — so we key off page-island, not page-home). ── */
body.page-island .sc-footer {
    display: none;
}

/* Island pages render their own Minimal_Chrome top bar (ui-kit TopBar with the
   search/cart/notifications/profile utilities) + left AppShell nav, so the legacy
   fixed top nav must NOT also render there (no double header). Its mobile reserved
   top-padding (page-home) is reset since the sticky ui-kit TopBar sits at top:0. */
body.page-island .as-nav {
    display: none;
}

@media (max-width: 767px) {
    body.page-island.page-home {
        padding-top: 0;
    }
}

.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 {
    position: relative;
    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
    }
}

/* ═══ Profile Mobile: Drawer Sidebar ═══ */
.prf-mobile-toggle {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .3);
    background: rgba(15, 18, 36, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #a5b4fc;
    font-size: 1.2rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    transition: background .2s, transform .2s;
}

.prf-mobile-toggle.is-hidden {
    display: none !important;
}

.prf-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}

.prf-sidebar-backdrop.is-visible {
    display: block;
    opacity: 1;
}

.prf-sidebar-close {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, .2);
    background: rgba(99, 102, 241, .08);
    color: #a5b4fc;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

@media (max-width: 767px) {
    .prf-mobile-toggle {
        display: flex;
    }

    .prf-sidebar-close {
        display: flex;
    }

    /* Prevent horizontal scroll from the off-screen sidebar */
    .page-profile {
        overflow-x: hidden;
    }

    .prf-dash {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow-x: hidden !important;
    }

    .prf-side {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        z-index: 97 !important;
        border-radius: 0 16px 16px 0 !important;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
        box-shadow: 8px 0 32px rgba(0, 0, 0, .5);
    }

    .prf-side.is-open {
        transform: translateX(0);
    }

    .prf-side-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding-top: 2.5rem;
    }

    .prf-side-section {
        flex: unset;
    }

    .prf-side-link {
        flex: unset;
        min-width: unset;
        justify-content: flex-start;
    }

    .prf-side-group {
        margin: 0;
    }

    .prf-main {
        /* Match the header pill: 95% width centered, so every card inside
           shares the exact same left/right edges as the top nav. */
        width: 95% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        padding: 8px 0 24px !important;
        gap: 16px !important;
    }

    .prf-right {
        display: none !important;
    }

    .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;
    }

    .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);
    }

    /* ═══ Mobile UI/UX Improvements ═══ */

    /* #1 — Toggle button repositioned inside card (absolute top-right) */
    .prf-mobile-toggle {
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    /* #2 — Profile card internal padding */
    .prf-topbar {
        padding: 20px 22px !important;
        overflow: visible !important;
    }

    /* #3 — Avatar to name spacing */
    .prf-topbar-head {
        gap: 16px;
    }

    /* #4 — Hide empty bio on mobile */
    .prf-topbar-bio {
        display: none;
    }

    /* #5 — Date/gender text — smaller, better contrast */
    .prf-topbar-meta {
        font-size: .75rem;
        color: rgba(255, 255, 255, .6);
    }

    /* #6 — Edit Profile button — taller, rounder */
    .prf-topbar-btn--edit,
    .prf-topbar-actions .prf-topbar-btn {
        height: 48px;
        min-height: 48px;
        border-radius: 14px;
        font-size: .9rem;
    }

    /* #7 — Stats spacing improvement */
    .prf-topbar-stats {
        gap: 1.25rem;
        padding: 1rem 0;
    }

    .prf-topbar-stat {
        gap: .35rem;
    }

    .prf-topbar-stat-ico {
        font-size: 1.1rem;
    }

    .prf-topbar-stat strong {
        font-size: 1.5rem;
    }

    .prf-topbar-stat span {
        font-size: .72rem;
    }

    /* #8 — Post composer avatar size */
    .prf-compose-avatar,
    .prf-compose img {
        width: 42px;
        height: 42px;
    }

    .prf-compose-input {
        margin-left: 12px;
    }

    /* #9 — Feed card header spacing */
    .prf-post-header {
        gap: .6rem;
    }

    .prf-post-avatar {
        width: 38px;
        height: 38px;
    }

    .prf-post-meta {
        gap: .2rem;
    }

    .prf-post-username {
        font-size: .82rem;
    }

    .prf-post-date {
        font-size: .68rem;
    }

    /* #10 — AI Floating Button — don't cover content */
    .page-profile .ai-chat-fab {
        bottom: 20px;
        right: 16px;
    }

    /* #11 — Vertical spacing between sections */
    .prf-topbar {
        margin-bottom: 16px;
    }

    .prf-compose-wrap {
        margin-bottom: 16px;
    }

    .prf-post-card+.prf-post-card {
        margin-top: 16px;
    }

    /* #12 — Profile card visual distinction from feed */
    .prf-topbar {
        background: rgba(20, 24, 48, 0.85) !important;
        border: 1px solid rgba(139, 92, 246, 0.2) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        border-radius: 18px !important;
    }

    /* #13 — Ensure touch targets 44px minimum */
    .prf-topbar-btn {
        min-height: 44px;
    }

    .prf-post-action {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 768px) {
    .prf-mobile-toggle {
        display: none !important;
    }

    .prf-sidebar-backdrop {
        display: none !important;
    }

    .prf-sidebar-close {
        display: none !important;
    }
}

@media(max-width:900px) and (min-width:768px) {
    .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
    }

    .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
    }
}

/* ── 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: .3rem;
    margin-bottom: .6rem;
    /* Wrap to the next line instead of clipping the last tab. Labels vary a lot in
       length across locales (e.g. EN "Security" vs AZ "Təhlükəsizlik"), so a fixed
       single scrollable row cut long labels off at the container edge. */
    flex-wrap: wrap;
    row-gap: .4rem;
    scrollbar-width: none
}

.prf-tabs::-webkit-scrollbar {
    display: none
}

.prf-tab {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .8rem;
    border-radius: 12px;
    border: 1.5px solid rgba(99, 102, 241, .08);
    background: rgba(30, 41, 59, .25);
    color: #64748b;
    font-size: .76rem;
    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 {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 97;
        width: 280px;
        box-shadow: 8px 0 32px rgba(0, 0, 0, .5);
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    }

    .slr-sidebar.is-open {
        transform: translateX(0);
    }
}

.slr-sidebar-header {
    position: relative;
    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;
}

#seller-page.is-onboarding .slr-mobile-toggle,
#seller-page.is-onboarding .slr-sidebar-backdrop {
    display: none !important;
}

/* 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 Mobile Responsive ──────────────────────────────────────────────
   Hamburger toggle + drawer sidebar + backdrop overlay + enhanced mobile
   layout for stats, tables, and forms. */

/* Hamburger toggle button — hidden on desktop, visible on mobile */
.slr-mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, .25);
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    color: #a5b4fc;
    font-size: 1.3rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    transition: background .2s, transform .2s, box-shadow .2s;
}

.slr-mobile-toggle:hover {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(99, 102, 241, .3);
}

.slr-mobile-toggle:active {
    transform: scale(.95);
}

/* Backdrop — covers screen when sidebar is open on mobile */
.slr-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .3s ease;
}

.slr-sidebar-backdrop.is-visible {
    opacity: 1;
}

@media(max-width:767px) {

    /* Show the hamburger toggle */
    .slr-mobile-toggle {
        display: flex;
    }

    /* Hide toggle when sidebar is open (the X button inside sidebar closes it) */
    .slr-mobile-toggle.is-hidden {
        display: none;
    }

    /* Show backdrop when sidebar is open */
    .slr-sidebar-backdrop.is-visible {
        display: block;
        opacity: 1;
    }

    /* Close button inside sidebar header on mobile */
    .slr-sidebar-close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid rgba(99, 102, 241, .2);
        background: rgba(99, 102, 241, .08);
        color: #a5b4fc;
        font-size: 1.1rem;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        transition: background .15s;
    }

    .slr-sidebar-close:hover {
        background: rgba(99, 102, 241, .2);
    }

    /* Main content takes full width with top padding for hamburger */
    .slr-content {
        padding: 4rem 1rem 1.25rem;
    }

    /* Stats grid — 2 columns on mobile */
    .slr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }

    .slr-stat-card {
        padding: .85rem .75rem;
    }

    .slr-stat-icon {
        width: 38px;
        height: 38px;
        font-size: .95rem;
    }

    .slr-stat-value {
        font-size: 1.3rem;
    }

    .slr-stat-label {
        font-size: .7rem;
    }

    /* Recent orders table — horizontal scroll */
    .slr-recent-table {
        min-width: 600px;
    }

    /* Cancellations / Returns tables — horizontal scroll */
    .sc-table,
    .sr-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Product grid cards */
    .slr-product-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    /* Forms — full width stacked */
    .slr-form-row {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .slr-form-group input,
    .slr-form-group select,
    .slr-form-group textarea {
        width: 100%;
        font-size: 16px;
        /* Prevent iOS zoom */
    }

    /* Title/header adjustments */
    .slr-title {
        font-size: 1.2rem;
    }

    .slr-subtitle {
        font-size: .78rem;
    }

    /* Modal — full width on mobile */
    .slr-modal {
        width: 95% !important;
        max-width: none !important;
        margin: 1rem;
    }
}

/* Extra-small screens — single column stats */
@media(max-width:400px) {
    .slr-stats-grid {
        grid-template-columns: 1fr;
    }

    .slr-content {
        padding: 3.5rem .75rem 1rem;
    }

    .slr-mobile-toggle {
        top: 8px;
        left: 8px;
        width: 40px;
        height: 40px;
    }
}

/* Desktop — hide mobile-only elements */
@media(min-width:768px) {
    .slr-mobile-toggle {
        display: none !important;
    }

    .slr-sidebar-backdrop {
        display: none !important;
    }

    .slr-sidebar-close {
        display: none !important;
    }
}

/* ── 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;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS ENHANCEMENTS — Seller Panel
   Nav sidebar touch targets, product grid improvements
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Sidebar nav items: ensure adequate touch target (min 44px) ── */
    .slr-nav-item {
        min-height: 44px;
        padding: .7rem 1rem;
        font-size: .9rem;
    }

    .slr-nav-icon {
        font-size: 1.15rem;
        width: 1.5rem;
    }

    /* Sidebar group headers — larger tap target */
    .slr-side-group {
        min-height: 44px;
        padding: .75rem .9rem;
    }

    .slr-side-group-label {
        font-size: .75rem;
    }

    /* Sidebar nav section spacing */
    .slr-sidebar-nav {
        padding: .5rem;
        gap: .2rem;
    }

    .slr-side-group-items {
        padding-left: .25rem;
    }

    /* Nav badge (notification count) — readable on mobile */
    .slr-nav-badge {
        font-size: .7rem;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
    }

    /* Product grid — single column full width cards */
    .slr-product-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .slr-prod-card {
        margin: 0;
    }

    .slr-prod-card:hover {
        transform: none;
    }

    .slr-prod-actions {
        gap: .4rem;
    }

    .slr-prod-act {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .4rem .65rem;
        font-size: .85rem;
    }

    /* Pagination — touch-friendly */
    .slr-pagination {
        flex-wrap: wrap;
        gap: .35rem;
    }

    .slr-pagination button,
    .slr-pagination a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE TOP-BAR QUICK ACTIONS  +  MOBILE SEARCH SHEET
   Appended last; both clusters are display:none above 767px so the desktop
   header keeps its existing layout exactly.

   Why: search, notifications and profile were only reachable after opening the
   burger drawer — three taps for the most-used destinations on a shopping site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden by default — desktop keeps these inside the utility cluster. */
.as-nav-quick {
    display: none;
}

.as-msearch {
    display: none;
}

@media (max-width: 767px) {

    /* ── Quick action cluster, sitting just left of the burger ── */
    .as-nav-quick {
        display: flex;
        align-items: center;
        gap: .15rem;
        margin-left: auto;
        margin-right: .15rem;
    }

    .as-quick-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        padding: 0;
        border-radius: 12px;
        color: rgba(233, 231, 255, .92);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background .18s ease, color .18s ease;
    }

    .as-quick-btn:active {
        background: rgba(139, 92, 246, .18);
        color: #fff;
    }

    .as-quick-btn svg {
        width: 21px;
        height: 21px;
    }

    /* Unread counter, mirrored from the drawer bell by notifications.js */
    .as-quick-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #f43f5e;
        color: #fff;
        font-size: .6rem;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 0 0 2px rgba(10, 10, 30, .9);
    }

    /* Burger no longer needs the auto margin now that the cluster owns it. */
    .as-burger {
        margin-left: 0;
    }

    /* ── Declutter the burger drawer ──
          Everything reachable elsewhere is removed; the drawer becomes a clean
          ACCOUNT MENU listing the items that have no other home:
          Orders, My Store, Wardrobe, Disputes, (Seller/Admin), Settings,
          Language, Logout.
            • primary nav links  → hero chips + bottom nav
            • search             → bottom-nav "Axtarış"
            • cart / messages    → top-bar icons
            • notifications      → top-bar bell
            • Profile            → bottom-nav "Profil" */
    .as-nav-links .as-search,
    .as-nav-links .as-nav-notif-wrap,
    .as-nav-links .as-nav-primary,
    .as-nav-links .as-nav-cart,
    .as-nav-links #nav-messages-btn,
    .as-nav-links .as-avatar-btn,
    .as-nav-links #nav-guest-btn {
        display: none !important;
    }

    /* Render the account dropdown inline in the drawer (no avatar tap, no
       floating-card chrome) so every item is listed directly. */
    .as-nav-links .as-avatar-dropdown,
    .as-nav-links .as-guest-dropdown {
        display: block !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
        animation: none !important;
    }

    /* Drop the big profile header and the Profile row (Profile is a bottom tab). */
    .as-nav-links .as-avatar-dropdown-head,
    .as-nav-links .as-avatar-dropdown a[href="/Home/Profile#profile"] {
        display: none !important;
    }

    /* Comfortable tap targets for the listed account items. */
    .as-nav-links .as-dropdown-item {
        padding: 0.7rem 0.6rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    .as-nav-links .as-dropdown-item svg {
        width: 20px;
        height: 20px;
    }

    /* ── Search sheet: a floating card aligned to the nav's geometry ── */
    .as-msearch {
        display: block;
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        width: 92%;
        max-width: 1400px;
        z-index: 89;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }

    .as-msearch[hidden] {
        display: none;
    }

    .as-msearch.is-open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .as-msearch-form {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .75rem;
        background: linear-gradient(180deg, rgba(12, 14, 32, .97), rgba(10, 13, 30, .95));
        backdrop-filter: blur(22px) saturate(200%);
        -webkit-backdrop-filter: blur(22px) saturate(200%);
        border: 1px solid rgba(139, 92, 246, .28);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    }

    .as-msearch-ico {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        color: rgba(196, 181, 253, .8);
    }

    .as-msearch-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        border: none;
        background: none;
        color: #f4f3ff;
        /* 16px keeps iOS Safari from zooming the viewport on focus. */
        font-size: 16px;
        outline: none;
    }

    .as-msearch-input::placeholder {
        color: rgba(200, 200, 225, .55);
    }

    .as-msearch-close {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(255, 255, 255, .07);
        border-radius: 10px;
        color: rgba(233, 231, 255, .85);
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
    }
}

@media (max-width: 380px) {
    .as-quick-btn {
        width: 36px;
        height: 36px;
    }

    .as-quick-btn svg {
        width: 19px;
        height: 19px;
    }

    .as-nav-quick {
        gap: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI CHAT FAB — premium restyle (desktop + mobile)
   Appended last so it supersedes the earlier .ai-chat-fab blocks.

   What was wrong:
     • a 64x64 cartoon mascot with overflow:visible, while the mobile rule
       `.ai-chat-fab svg { width:20px }` shrank it inside a 44px box — the glyph
       ended up off-centre and spilling past the circle
     • a spinning conic-gradient ::before with filter:blur(4px) at inset:-3px,
       which read as a smudged purple halo rather than a crisp ring
     • a red "AI" pill hanging off the corner (removed from the markup)
     • a permanent pulse animation drawing the eye away from the content
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-chat-fab {
    /* Slightly smaller and calmer than before; 56px is a comfortable thumb
       target without dominating the viewport. */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Lifted off the viewport edge: at the old 24px the button sat flush with
       the bottom of the window and read as clipped on a laptop screen. */
    bottom: 40px;
    right: 32px;
    border: 1px solid rgba(255, 255, 255, .22);
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(145deg, #8b5cf6 0%, #7c3aed 45%, #c026d3 100%);
    color: #fff;
    /* Layered, tight shadows read as depth; the old 40–80px glow read as haze. */
    box-shadow:
        0 8px 24px rgba(88, 28, 160, .45),
        0 2px 6px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    /* No idle pulse — the halo ring below carries just enough life. */
    animation: none;
    overflow: visible;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1),
        box-shadow .22s ease,
        filter .22s ease;
}

/* Crisp breathing ring instead of the blurred conic smudge. */
.ai-chat-fab::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: none;
    border: 1px solid rgba(196, 181, 253, .45);
    opacity: .55;
    filter: none;
    z-index: -1;
    animation: ai-fab-halo 3.2s ease-in-out infinite;
}

@keyframes ai-fab-halo {

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

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

.ai-chat-fab:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        0 12px 30px rgba(88, 28, 160, .55),
        0 3px 8px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .34);
}

.ai-chat-fab:active {
    transform: translateY(0) scale(.97);
}

.ai-chat-fab:focus-visible {
    outline: 2px solid #ddd6fe;
    outline-offset: 3px;
}

/* ── Glyph ── */
.ai-chat-fab .ai-chat-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    transform: none;
}

.ai-chat-fab .ai-spark {
    /* Explicit size on the element itself, so the old
       `@media (max-width:768px) .ai-chat-fab svg { width:20px }` rule cannot
       leave the glyph mis-scaled inside the circle. */
    width: 25px;
    height: 25px;
    overflow: visible;
    filter: drop-shadow(0 1px 3px rgba(46, 8, 84, .5));
}

.ai-spark-main {
    transform-origin: 12px 12px;
    animation: ai-spark-breathe 4.5s ease-in-out infinite;
}

.ai-spark-mini {
    transform-origin: 19px 5.2px;
    animation: ai-spark-twinkle 3.6s ease-in-out infinite;
}

@keyframes ai-spark-breathe {

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

    50% {
        transform: scale(1.07) rotate(8deg);
    }
}

@keyframes ai-spark-twinkle {

    0%,
    100% {
        opacity: .35;
        transform: scale(.75);
    }

    45% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.ai-chat-fab:hover .ai-spark {
    transform: rotate(14deg);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Open state: neutral dark circle with the close icon ── */
.ai-chat-fab.is-active {
    background: linear-gradient(145deg, #2a2145 0%, #1c1633 100%);
    border-color: rgba(196, 181, 253, .3);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

.ai-chat-fab.is-active::before {
    animation: none;
    opacity: 0;
}

.ai-chat-fab .ai-chat-fab-close {
    width: 20px;
    height: 20px;
}

/* The badge is gone from the markup; keep the rule so a cached page that still
   ships it does not show the old red pill. */
.ai-chat-fab-badge {
    display: none !important;
}

/* Panel follows the button: 40px offset + 56px button + 12px breathing room.
   Scoped to >=769px on purpose — an earlier `@media (max-width: 768px)` block
   makes the panel near-full-width with its own bottom/left/right, and an
   unscoped rule here would win by source order and break it. */
@media (min-width: 769px) {
    .ai-chat-widget {
        bottom: 108px;
        right: 32px;
    }
}

/* On short laptop viewports the 560px panel would run past the top of the
   window, so cap it to the space actually available above the button. */
@media (min-width: 769px) and (max-height: 760px) {
    .ai-chat-widget {
        height: calc(100vh - 148px);
        max-height: 560px;
    }
}

@media (max-width: 767px) {
    .ai-chat-fab {
        width: 52px;
        height: 52px;
        /* Sit above the iOS home indicator. */
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 16px;
    }

    /* The feed has its own fixed bottom nav and a "Paylaş" FAB; a third floating
       control landed on top of the "Profil" tab. Desktop feed has room, so this
       is scoped to mobile only. */
    .page-feed .ai-chat-fab,
    .page-feed .ai-chat-widget {
        display: none !important;
    }

    .ai-chat-fab .ai-spark {
        width: 23px;
        height: 23px;
    }

    .ai-chat-fab .ai-chat-fab-close {
        width: 19px;
        height: 19px;
    }

    /* One less moving element on a small screen. */
    .ai-chat-fab::before {
        animation-duration: 4s;
        opacity: .4;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ai-chat-fab::before,
    .ai-spark-main,
    .ai-spark-mini {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — Mobile UX tightening (max-width 768px only)
   Requested: more compact header, shorter hero, tighter trending section,
   spaced product cards, scroll-hidden FAB, 16px uniform side padding.
   Desktop/tablet pixel-perfect unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── 1. Header: floating rounded pill, matching the desktop/web header.
          Centred, a hair of side gutter, full border + rounded corners. ── */
    .as-nav {
        top: 10px !important;
        left: 50% !important;
        right: auto !important;
        width: 94% !important;
        max-width: 100% !important;
        transform: translateX(-50%) !important;
        border-radius: 18px !important;
        border: 1px solid rgba(139, 92, 246, .18) !important;
    }

    .as-nav-inner {
        padding: .5rem 16px;
    }

    .as-logo {
        font-size: 1.28rem;
    }

    .as-nav-quick {
        gap: 8px;
    }

    .as-quick-btn {
        width: 40px;
        height: 40px;
    }

    .as-quick-btn svg {
        width: 20px;
        height: 20px;
    }

    /* Space between the icon cluster and the burger. */
    .as-nav-quick+.as-burger {
        margin-left: 8px;
    }

    .as-burger span {
        width: 16px;
    }

    /* ── 2. Hero height lives in hero-slider.css (loads later); nothing here. ── */

    /* ── 3. Sections: kill the big gaps ──
          .hf-section had 1.25rem top / 2rem bottom padding, and .hf-head added
          another 1.5rem below the title before the grid even started — roughly
          70px of dead space per section. Collapse to a consistent 16px rhythm. */
    .hf-section {
        padding: 14px 16px 18px;
    }

    .hf-section--foryou {
        padding-top: 4px;
    }

    .hf-head {
        margin-bottom: 12px;
        align-items: center;
        gap: .5rem;
    }

    .hf-title {
        font-size: 1.12rem;
        margin: 0;
    }

    /* ── 4. Product grid: even 2-col, tighter body, smaller heart ──
          Trending uses .hf-trends inside a padded .hf-container-card; For You
          uses .hf-grid. Cover both, and shrink the card wrapper padding that
          was boxing the trending grid in ~20px on every side. */
    .hf-container-card {
        padding: 12px;
        border-radius: 16px;
    }

    .hf-grid,
    .hf-trends {
        gap: 12px;
        padding: 0;
        grid-template-columns: repeat(2, 1fr);
    }

    .hf-card {
        border-radius: 14px;
    }

    /* Secondary text contrast bump (Home_ForYouSub etc.) */
    .hf-sub {
        font-size: .8rem;
        color: #a9b4c6;
    }

    /* The 4/5 image already carries the card; trim the text block that follows
       so two rows fit on the first screen. */
    .hf-card-body {
        padding: .55rem .65rem .65rem;
        gap: .1rem;
    }

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

    .hf-card-cat {
        font-size: .7rem;
    }

    .hf-card-bottom {
        margin-top: .3rem;
    }

    .hf-card-price {
        font-size: .9rem;
    }

    /* Favorite button must not dominate the image (was 30px). */
    .hf-card-wish {
        width: 26px;
        height: 26px;
        top: .4rem;
        right: .4rem;
        background: rgba(255, 255, 255, .82);
    }

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

    /* ── 5. FAB: scroll-hide transition hook ──
          JS adds .ai-fab-hidden when the user scrolls down; this handles the
          visual slide. Position already set in the earlier mobile FAB block. */
    .ai-chat-fab {
        transition: transform .28s cubic-bezier(.4, 0, .2, 1),
            opacity .28s ease,
            box-shadow .22s ease,
            filter .22s ease;
    }

    .ai-chat-fab.ai-fab-hidden {
        transform: translateY(90px) scale(.85);
        opacity: 0;
        pointer-events: none;
    }

    /* ── 6. Typography: slightly brighter secondary text ── */
    .hf-card-info span,
    .hf-card-count {
        color: rgba(203, 213, 225, .88);
    }

    /* ── 7. Uniform 16px side padding ── */
    .as-main {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 400px) {

    .hero-slider-section,
    .hero-slides {
        min-height: 230px;
    }

    .hf-section {
        padding: .65rem 12px 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION  (max-width 768px only)
   Fixed glass tab bar — the premium standard for a shop + social + games app.
   Desktop/tablet never see it (display:none above 768px).
   ═══════════════════════════════════════════════════════════════════════════ */
.as-bottomnav {
    display: none;
}

@media (max-width: 768px) {
    .as-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(180deg, rgba(12, 14, 32, .92), rgba(9, 11, 26, .98));
        backdrop-filter: blur(22px) saturate(200%);
        -webkit-backdrop-filter: blur(22px) saturate(200%);
        border-top: 1px solid rgba(139, 92, 246, .18);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .35);
    }

    .as-bnav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 58px;
        text-decoration: none;
        color: rgba(180, 188, 208, .72);
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease;
    }

    .as-bnav-item svg {
        width: 23px;
        height: 23px;
        transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
    }

    .as-bnav-item span {
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: -.01em;
    }

    .as-bnav-item:active svg {
        transform: scale(.88);
    }

    /* Active tab: brand accent + a short indicator pill above the icon. */
    .as-bnav-item.is-active {
        color: #c4b5fd;
    }

    .as-bnav-item.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, #8b5cf6, #c026d3);
        box-shadow: 0 0 10px rgba(167, 139, 250, .6);
    }

    .as-bnav-item.is-active svg {
        transform: translateY(-1px);
    }

    /* ── Give page content room so the bar never covers the last element.
          The footer is the last thing on every page, so clearing it there
          guarantees nothing hides behind the fixed bar. 58px bar + safe area. ── */
    body:not(.page-feed):not(.page-chat):not(.page-messages):not(.page-auth) .sc-footer {
        margin-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Hide on pages that own their bottom UI ──
          Feed now uses the shared bar too (its own .fd-bottom-nav is hidden in
          feed.css), so it is no longer excluded here. ── */
    .page-chat .as-bottomnav,
    .page-messages .as-bottomnav,
    .page-auth .as-bottomnav {
        display: none;
    }

    /* ── Lift the AI FAB above the bar so they never collide ── */
    body:not(.page-feed):not(.page-chat):not(.page-messages):not(.page-auth) .ai-chat-fab {
        bottom: calc(58px + 14px + env(safe-area-inset-bottom, 0px));
    }

    /* The chat panel opens above the lifted FAB. */
    body:not(.page-feed):not(.page-chat):not(.page-messages):not(.page-auth) .ai-chat-widget {
        bottom: calc(58px + 70px + env(safe-area-inset-bottom, 0px));
        height: calc(100vh - 58px - 150px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CATEGORY CHIPS  (max-width 768px only)
   Slim outlined pills under the hero for the five content verticals. Elegant,
   not the heavy gradient tiles from before. Hidden on desktop/tablet.
   ═══════════════════════════════════════════════════════════════════════════ */
.hp-chips {
    display: none;
}

@media (max-width: 768px) {

    /* All five verticals in one row, no scroll: icon tile on top, label below. */
    .hp-chips {
        display: flex;
        gap: 6px;
        padding: 14px 12px 2px;
        overflow: visible;
    }

    .hp-chip {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: rgba(214, 220, 236, .9);
        -webkit-tap-highlight-color: transparent;
    }

    /* Icon lives in a rounded tile; the label is plain text underneath. */
    .hp-chip svg {
        box-sizing: content-box;
        width: 22px;
        height: 22px;
        color: #a78bfa;
        flex: 0 0 auto;
        padding: 12px;
        border-radius: 14px;
        background: rgba(139, 92, 246, .08);
        border: 1px solid rgba(139, 92, 246, .22);
        transition: transform .16s ease, background .18s ease, border-color .18s ease;
    }

    .hp-chip span {
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        text-align: center;
    }

    .hp-chip:active svg {
        transform: scale(.92);
        background: rgba(139, 92, 246, .18);
        border-color: rgba(167, 139, 250, .5);
    }

    /* Tighten the gap into the trending section that follows. */
    .hp-chips+.hf-section {
        padding-top: 10px;
    }
}

@media (max-width: 380px) {
    .hp-chip svg {
        padding: 10px;
    }

    .hp-chip span {
        font-size: .63rem;
    }
}

/* Bottom-nav search is a <button>; strip native button chrome so it matches
   the anchor items exactly. */
@media (max-width: 768px) {
    button.as-bnav-item {
        background: none;
        border: none;
        cursor: pointer;
        font: inherit;
    }

    /* ── Center raised "Paylaş" (create/share) action ── */
    .as-bnav-post {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        height: 58px;
        padding-bottom: 6px;
        text-decoration: none;
        color: rgba(180, 188, 208, .82);
        -webkit-tap-highlight-color: transparent;
    }

    .as-bnav-post-btn {
        position: absolute;
        top: -10px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 45%, #c026d3 100%);
        border: 2px solid rgba(9, 11, 26, .9);
        box-shadow:
            0 6px 16px rgba(124, 58, 237, .45),
            inset 0 1px 0 rgba(255, 255, 255, .28);
        transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
    }

    .as-bnav-post-btn svg {
        width: 22px;
        height: 22px;
    }

    .as-bnav-post:active .as-bnav-post-btn {
        transform: scale(.9);
    }

    .as-bnav-post-label {
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: -.01em;
        margin-top: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SEARCH RESULTS  +  MOBILE NOTIFICATION PANEL  (max-width 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
.as-msearch-results {
    display: none;
}

.as-mnotif {
    display: none;
}

@media (max-width: 768px) {

    /* ── Live search results, docked under the search field ── */
    .as-msearch-results {
        display: none;
        margin-top: 8px;
        max-height: 62vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, rgba(14, 16, 34, .98), rgba(10, 13, 30, .98));
        border: 1px solid rgba(139, 92, 246, .22);
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    }

    .as-msearch-results.is-open {
        display: block;
    }

    .as-msr-group-title {
        padding: 10px 14px 4px;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: rgba(167, 139, 250, .8);
    }

    .as-msr-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 14px;
        text-decoration: none;
        color: #e6e8f2;
        border-top: 1px solid rgba(255, 255, 255, .04);
    }

    .as-msr-item:active {
        background: rgba(139, 92, 246, .12);
    }

    .as-msr-thumb {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        object-fit: cover;
        background: rgba(255, 255, 255, .05);
        flex: 0 0 auto;
    }

    .as-msr-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        background: rgba(139, 92, 246, .2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: .85rem;
        color: #ddd6fe;
        flex: 0 0 auto;
        overflow: hidden;
    }

    .as-msr-info {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

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

    .as-msr-sub {
        font-size: .72rem;
        color: rgba(180, 188, 208, .8);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .as-msr-price {
        font-size: .82rem;
        font-weight: 700;
        color: #c4b5fd;
        flex: 0 0 auto;
    }

    .as-msr-state {
        padding: 16px 14px;
        text-align: center;
        color: rgba(180, 188, 208, .75);
        font-size: .82rem;
    }

    .as-msr-all {
        display: block;
        padding: 12px 14px;
        text-align: center;
        font-weight: 700;
        font-size: .82rem;
        color: #c4b5fd;
        text-decoration: none;
        border-top: 1px solid rgba(139, 92, 246, .18);
    }

    /* ── Notification panel (same geometry as the search sheet) ── */
    .as-mnotif {
        display: block;
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        width: 92%;
        max-width: 1400px;
        z-index: 96;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }

    .as-mnotif[hidden] {
        display: none;
    }

    .as-mnotif.is-open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .as-mnotif-card {
        background: linear-gradient(180deg, rgba(14, 16, 34, .98), rgba(10, 13, 30, .98));
        border: 1px solid rgba(139, 92, 246, .26);
        border-radius: 18px;
        box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
        overflow: hidden;
    }

    .as-mnotif-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .as-mnotif-head strong {
        font-size: .95rem;
        color: #f4f3ff;
    }

    .as-mnotif-close {
        width: 30px;
        height: 30px;
        border: none;
        background: rgba(255, 255, 255, .07);
        border-radius: 9px;
        color: rgba(233, 231, 255, .85);
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
    }

    .as-mnotif-list {
        max-height: 56vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .as-mnotif-all {
        display: block;
        padding: 13px 14px;
        text-align: center;
        font-weight: 700;
        font-size: .84rem;
        color: #c4b5fd;
        text-decoration: none;
        border-top: 1px solid rgba(139, 92, 246, .18);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE — PREMIUM MOBILE HEADER  (max-width 767px only)
   Horizontal identity (avatar left / info right), gradient avatar ring, glass
   card, clean inline stats without emoji tiles. Appended last so it is
   authoritative over the earlier layered profile mobile rules.
   Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Header card ── */
    .page-profile .prf-topbar {
        position: relative;
        padding: 20px !important;
        margin: 0 !important;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(30, 27, 64, .55), rgba(16, 14, 38, .65)) !important;
        border: 1px solid rgba(139, 92, 246, .18) !important;
        box-shadow: 0 14px 36px rgba(0, 0, 0, .35) !important;
        overflow: visible !important;
    }

    /* Sections drawer toggle → subtle top-right */
    .page-profile .prf-mobile-toggle {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        color: #cbd5e1;
        font-size: 1.1rem;
        z-index: 2;
    }

    /* ── Identity: grid so it works WITH the base grid layout (not against it).
          Areas: avatar top-left, info top-right, edit button full-width below. ── */
    .page-profile .prf-topbar-head {
        display: grid !important;
        grid-template-columns: 88px 1fr !important;
        grid-template-areas:
            "avatar info"
            "actions actions" !important;
        align-items: center !important;
        column-gap: 16px !important;
        row-gap: 16px !important;
        text-align: left !important;
        padding-right: 0 !important;
    }

    /* Gradient avatar ring */
    .page-profile .prf-topbar-avatar-wrap {
        grid-area: avatar;
        position: relative;
        width: 88px !important;
        height: 88px !important;
        margin: 0 !important;
        padding: 3px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #c026d3);
        box-shadow: 0 6px 18px rgba(124, 58, 237, .4);
    }

    .page-profile .prf-topbar-avatar {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50%;
        border: 3px solid #0e0c26 !important;
        object-fit: cover;
    }

    /* Camera edit badge, bottom-right of the avatar */
    .page-profile .prf-topbar-avatar-edit {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        border: 2px solid #0e0c26;
        color: #fff;
    }

    .page-profile .prf-topbar-avatar-edit svg {
        width: 14px;
        height: 14px;
    }

    /* Info column */
    .page-profile .prf-topbar-info {
        grid-area: info;
        min-width: 0;
        text-align: left !important;
        align-items: flex-start !important;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .page-profile .prf-topbar-name-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px;
    }

    .page-profile .prf-topbar-name {
        font-size: 1.32rem !important;
        font-weight: 800;
        line-height: 1.15;
    }

    .page-profile .prf-topbar-username {
        font-size: .85rem !important;
        color: #a78bfa !important;
        font-weight: 600;
    }

    .page-profile .prf-topbar-meta {
        font-size: .74rem !important;
        color: rgba(203, 213, 225, .7) !important;
        margin: 2px 0 0;
    }

    .page-profile .prf-topbar-bio {
        display: block !important;
        font-size: .84rem;
        line-height: 1.45;
        color: rgba(226, 232, 240, .85);
        margin: 8px 0 0;
    }

    /* ── Edit button: full-width gradient pill (grid area below identity) ── */
    .page-profile .prf-topbar-actions {
        grid-area: actions;
        grid-column: auto !important;
        width: 100%;
        margin-top: 0;
    }

    .page-profile .prf-topbar-actions .prf-topbar-btn {
        display: flex !important;
        width: 100%;
        height: 46px;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        font-size: .9rem;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
        border: none !important;
        box-shadow: 0 8px 20px rgba(124, 58, 237, .35);
    }

    /* ── Stats: clean inline row, no emoji tiles, hairline dividers ── */
    .page-profile .prf-topbar-stats {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        margin-top: 18px;
        padding: 16px 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .page-profile .prf-topbar-stat {
        flex: 1 1 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px !important;
        position: relative;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .page-profile .prf-topbar-stat+.prf-topbar-stat::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 30px;
        background: rgba(255, 255, 255, .08);
    }

    /* Drop the emoji icons — they read as childish */
    .page-profile .prf-topbar-stat-ico {
        display: none !important;
    }

    .page-profile .prf-topbar-stat strong {
        font-size: 1.3rem !important;
        font-weight: 800;
        color: #fff;
    }

    .page-profile .prf-topbar-stat span {
        font-size: .68rem !important;
        color: rgba(203, 213, 225, .7) !important;
        font-weight: 500;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE — PREMIUM MOBILE POLISH  (max-width 767px only)
   Fixes the narrow edit button, hides the stray empty bio, and gives every
   section card a consistent premium glass treatment aligned to the header
   width. Appended last = authoritative. Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Edit button: force true full-width (base had min-width:150px + inline
          flex, so it collapsed to ~150px and wrapped to three lines) ── */
    .page-profile .prf-topbar-actions {
        grid-area: actions !important;
        display: block !important;
        width: 100% !important;
    }

    .page-profile .prf-topbar-actions .prf-topbar-btn {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    /* ── Hide the empty/placeholder bio (renders as a lone ".") ── */
    .page-profile .prf-topbar-bio {
        display: none !important;
    }

    /* ── Section headers: tighter, premium type ── */
    .page-profile .prf-sec-header {
        margin-bottom: 14px !important;
    }

    .page-profile .prf-sec-header h1 {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        letter-spacing: -.01em;
    }

    .page-profile .prf-sec-header p {
        font-size: .82rem !important;
        color: rgba(203, 213, 225, .68) !important;
    }

    /* ── Overview tiles → 2-col premium glass grid ── */
    .page-profile .prf-tile-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .page-profile .prf-tile {
        padding: 16px !important;
        border-radius: 18px !important;
        background: linear-gradient(165deg, rgba(30, 27, 64, .5), rgba(16, 14, 38, .6)) !important;
        border: 1px solid rgba(139, 92, 246, .16) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .26) !important;
        transition: transform .18s ease, border-color .18s ease;
    }

    .page-profile .prf-tile:active {
        transform: scale(.97);
        border-color: rgba(167, 139, 250, .4) !important;
    }

    .page-profile .prf-tile-ico {
        font-size: 1.3rem !important;
        margin-bottom: 6px !important;
    }

    .page-profile .prf-tile-num {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
    }

    .page-profile .prf-tile-label {
        font-size: .74rem !important;
        color: rgba(203, 213, 225, .7) !important;
    }

    /* ── Generic cards (recent orders, CTA cards, settings blocks) ── */
    .page-profile .prf-card {
        border-radius: 18px !important;
        border: 1px solid rgba(139, 92, 246, .14) !important;
        background: linear-gradient(165deg, rgba(24, 21, 52, .55), rgba(15, 13, 34, .6)) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
    }

    .page-profile .prf-card-header h3 {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    /* ── Composer (What's your style today?) premium card ── */
    .page-profile .prf-composer {
        border-radius: 18px !important;
        border: 1px solid rgba(139, 92, 246, .16) !important;
        background: rgba(20, 18, 44, .55) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .26) !important;
        padding: 14px !important;
    }

    .page-profile .prf-composer-avatar,
    .page-profile .prf-composer img {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── CTA cards (Orders/Disputes link-outs) ── */
    .page-profile .prf-cta-card {
        border-radius: 18px !important;
    }

    /* ── Feed posts inside profile → rounded premium ── */
    .page-profile .prf-post-card,
    .page-profile .prf-feed-card {
        border-radius: 18px !important;
        border: 1px solid rgba(139, 92, 246, .12) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .26) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE — width + top-gap alignment  (max-width 767px only)
   `.page-profile .as-main` was 92% wide, and `.prf-main` was another 95% of
   that (≈87%) — narrower than the 95% header pill. It also kept a 24px top
   padding that opened a big gap under the header. Collapse to a single 95%
   column flush to the header edges, with a tight top offset.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .page-profile .as-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .page-profile .prf-main {
        width: 95% !important;
        max-width: none !important;
        margin: 0 auto !important;
        /* Top: match the feed's tight offset under the header.
           Bottom: profile hides the footer, so it has no nav clearance — pad
           for the fixed 58px bottom bar + safe area so the last card is fully
           visible. */
        padding: 4px 0 calc(58px + 28px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 16px !important;
    }

    /* Pull the profile content up to the same header offset the feed uses
       (~64px), instead of the global 72px body padding. */
    body.page-profile {
        padding-top: 72px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WARDROBE — PREMIUM MOBILE REDESIGN  (max-width 767px only)
   The page used raw Bootstrap form-controls (white inputs, native file button)
   on a dark theme, so it looked cheap. This gives it the same premium glass
   language as the rest of the app, aligned to the header width. Appended last.
   Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Align the page to the header pill width, tight top, nav clearance ── */
    .page-wardrobe .as-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #wardrobe-page {
        width: 95%;
        max-width: 560px;
        margin: 0 auto;
        padding: 6px 0 calc(58px + 28px + env(safe-area-inset-bottom, 0px));
    }

    body.page-wardrobe {
        padding-top: 72px;
    }

    /* ── Title ── */
    #wardrobe-page .as-section-title {
        font-size: 1.35rem;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    /* ── Cards (Add item, Create outfit) → premium glass ── */
    #wardrobe-page .as-card {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 18px !important;
        background: linear-gradient(165deg, rgba(30, 27, 64, .5), rgba(16, 14, 38, .6)) !important;
        border: 1px solid rgba(139, 92, 246, .16) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
    }

    /* ── Dark-theme every form input so nothing is white ── */
    #wardrobe-page .form-control,
    #wardrobe-page .form-select,
    #wardrobe-page .ward-filter-search,
    #wardrobe-page .ward-filter-select {
        min-height: 44px;
        font-size: 16px;
        /* 16px stops iOS zoom */
        border-radius: 12px !important;
        background: rgba(10, 10, 30, .55) !important;
        border: 1px solid rgba(139, 92, 246, .2) !important;
        color: #e6e8f2 !important;
        box-shadow: none !important;
    }

    #wardrobe-page .form-control::placeholder {
        color: rgba(180, 188, 208, .55) !important;
    }

    #wardrobe-page .form-control:focus,
    #wardrobe-page .form-select:focus {
        border-color: rgba(167, 139, 250, .55) !important;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, .18) !important;
    }

    /* Native file input → themed */
    #wardrobe-page input[type="file"] {
        padding: 9px 12px;
        color: rgba(180, 188, 208, .8) !important;
    }

    #wardrobe-page input[type="file"]::file-selector-button {
        margin-right: 10px;
        padding: 7px 12px;
        border: none;
        border-radius: 9px;
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        color: #fff;
        font-weight: 600;
        font-size: .82rem;
    }

    /* ── Add-item form: stack to a clean single column ── */
    #wardrobe-page #ward-item-form>[class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #wardrobe-page #ward-submit-btn {
        width: 100% !important;
        height: 46px;
        border-radius: 12px;
        font-size: 1.1rem;
    }

    /* ── Colour swatches: bigger, evenly wrapped, ring when active ── */
    #wardrobe-page .ward-color-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 4px 0;
    }

    #wardrobe-page .ward-color-swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .12);
        padding: 0;
    }

    #wardrobe-page .ward-color-swatch.is-active {
        border-color: #fff;
        box-shadow: 0 0 0 2px #a855f7, 0 0 10px rgba(167, 139, 250, .6);
    }

    /* ── Filter bar → horizontal scroll row, dark pills ── */
    #wardrobe-page .ward-filter-bar {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        margin-bottom: 16px;
    }

    #wardrobe-page .ward-filter-bar::-webkit-scrollbar {
        display: none;
    }

    #wardrobe-page .ward-filter-search {
        flex: 1 0 60%;
    }

    #wardrobe-page .ward-filter-select,
    #wardrobe-page #ward-filter-clear {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
    }

    /* ── Items grid → premium 2-col cards ── */
    #wardrobe-page .ward-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #wardrobe-page .ward-card {
        border-radius: 16px !important;
        border: 1px solid rgba(139, 92, 246, .14) !important;
        background: rgba(20, 18, 44, .55) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .26) !important;
    }

    #wardrobe-page .ward-card-img {
        height: auto !important;
        aspect-ratio: 3 / 4;
    }

    #wardrobe-page .ward-card-body {
        padding: 10px !important;
    }

    #wardrobe-page .ward-card-name {
        font-size: .82rem !important;
        font-weight: 700 !important;
        line-height: 1.3;
    }

    #wardrobe-page .ward-card-meta {
        font-size: .68rem !important;
        color: rgba(180, 188, 208, .7) !important;
    }

    /* Action buttons: always visible on touch, evenly sized */
    #wardrobe-page .ward-card-del-btn,
    #wardrobe-page .ward-card-edit-btn {
        opacity: 1 !important;
    }

    #wardrobe-page .ward-card-actions,
    #wardrobe-page .ward-card-body .d-flex {
        gap: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — align to the full-width header  (max-width 767px only)
   The hero was 92% wide while the sections used a 16px gutter, so nothing lined
   up; and the global 72px body padding left a big gap under the new flat header.
   Give the whole page one 16px gutter (hero, chips and sections all match),
   tighten the top, and crisp up the hero corners to suit the flat header.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    body.page-home {
        padding-top: 68px;
    }

    /* Tight 10px gutter → wider hero + cards, nearly edge-to-edge like the
       full-width header. Every block fills it. */
    .page-home .as-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 8px !important;
    }

    .hero-slider-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
        border-radius: 14px !important;
    }

    .hero-slides {
        border-radius: 14px !important;
    }

    /* Chips + sections drop their own horizontal padding so they align to the
       page gutter (same left/right edge as the hero and the header). */
    .hp-chips {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hf-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The .hf-inner wrapper was 92% wide + centred, insetting both grids far
       more than the hero. Make it fill the full page gutter so section content
       shares the hero's exact left/right edge. */
    .page-home .hf-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Drop the glass container-card chrome + padding on mobile so the trending
       and for-you tiles sit directly in the gutter — flush with the hero and
       each other, giving one single vertical alignment line. */
    .page-home .hf-container-card {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
    }

    /* Both grids: identical 2-col layout + gap so trending and for-you align. */
    .page-home .hf-trends,
    .page-home .hf-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .hf-card {
        border-radius: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP (Mağaza) — MOBILE ALIGNMENT FIX  (max-width 767px only)
   Problems fixed:
   • Cards were 92% wide while the header pill is 94% → misaligned edges.
   • Category tabs were flex-nowrap + overflow-x:auto, so chips hid behind a
     horizontal scroll on the right.
   • Filter button / sort / view controls didn't line up cleanly.
   Solution: match the header width exactly, let every tab wrap so they are all
   visible with no scroll, and give the toolbar a tidy two-row rhythm.
   Appended last so it wins over the earlier shop mobile blocks. Desktop/tablet
   untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Width: align the whole shop column to the header pill (94%, centred).
          Kill the extra side padding the small-screen blocks added on top. ── */
    .page-shop .shop-section {
        width: 94% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-shop .shop-layout {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ── Toolbar: two clean rows. Row 1 = filter button + category chips (all
          wrapping, no scroll). Row 2 = sort + view toggle, full width. ── */
    .page-shop .shop-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        row-gap: 10px !important;
    }

    .page-shop .shop-mobile-filter-btn {
        flex: 0 0 auto !important;
    }

    /* Tabs wrap onto as many rows as needed → every category visible, no
       right-side horizontal scroll. */
    .page-shop .shop-tabs {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .page-shop .shop-tab {
        flex: 0 0 auto !important;
        height: 38px !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
    }

    /* Sort + view toggle sit on their own full-width row, aligned. */
    .page-shop .shop-toolbar-right {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Grid fills the aligned column → cards share the header's exact edges.
       Only the GRID view is 2-col; the LIST view stays 1-per-row (image left,
       info right) — scope with :not(.is-list) so we don't break list mode. */
    .page-shop .shop-grid:not(.is-list) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .page-shop .shop-grid.is-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP (Mağaza) — MOBILE "double background" FIX  (max-width 767px only)
   The off-canvas filter drawer sits at translateX(-100%) with its right edge on
   the screen's left edge. Its box-shadow (8px 0 32px rgba(0,0,0,.5)) bled a dark
   blurred strip onto the page even while closed — reading as a second, darker
   background layer down the left side. Kill the shadow while closed; only show
   it once the drawer is actually open. Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .page-shop .shop-sidebar {
        box-shadow: none !important;
    }

    .page-shop .shop-sidebar.is-open {
        box-shadow: 8px 0 32px rgba(0, 0, 0, .5) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP (Mağaza) — MOBILE: AI FAB + filter drawer clearance  (max-width 767px)
   • The AI chat FAB sat at bottom:20px (below the 58px bottom nav) and poked up
     over the Profil item. Lift it clear above the bottom nav.
   • The off-canvas filter drawer only reserved 2rem at the bottom, so the last
     control ("Filterləri təmizlə") fell under the bottom nav. Give it enough
     bottom padding to scroll fully into view.
   Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Float the AI button above the bottom nav (58px) with a comfortable gap. */
    .page-shop .ai-chat-fab {
        bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        z-index: 96 !important;
    }

    /* ── Simple, reliable drawer: search now lives outside (in the main area),
       so the drawer is shorter. It scrolls normally; the Clear button is just
       the last item in the scroll. The bottom nav is hidden while the drawer is
       open, so nothing covers it. No sticky/fixed tricks. ── */
    .page-shop .shop-sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 3rem !important;
        /* generous bottom room so the Clear button clears the mobile browser
           chrome even when 100dvh isn't supported and height falls back to
           100vh (which overshoots the visible viewport). */
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .page-shop .shop-filter-panel {
        overflow: visible !important;
    }

    .page-shop .shop-filter-footer {
        position: static !important;
        margin-top: 14px !important;
        padding: 14px 0 0 !important;
        border-top: 1px solid rgba(148, 163, 255, .12) !important;
        background: transparent !important;
    }

    .page-shop .shop-clear-btn {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ── Search sits inline on row 1 next to the Filters button; the category
       tabs wrap onto the next row. ── */
    .page-shop .shop-searchbar {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .page-shop .shop-searchbar .shop-search-wrap {
        width: 100% !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .page-shop .shop-searchbar .shop-search-input {
        height: 38px !important;
    }

    /* Push the category tabs to their own full-width row (below filter+search). */
    .page-shop .shop-tabs {
        flex: 1 1 100% !important;
    }

    /* The bottom nav (z-index 95) was rendering OVER the filter drawer and
       hiding its footer. While the drawer is open, hide the bottom nav and
       lift the drawer + backdrop clearly above everything else. */
    body.shop-filter-open .as-bottomnav {
        display: none !important;
    }

    body.shop-filter-open .ai-chat-fab {
        display: none !important;
    }

    .page-shop .shop-sidebar {
        z-index: 1200 !important;
    }

    .page-shop .shop-filter-backdrop {
        z-index: 1150 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CART (Səbət) — PREMIUM MOBILE REDESIGN  (max-width 767px only)
   Every block — hero, items card, summary card — aligns to the header pill
   width (94%, centred) so nothing exceeds it and the page has one clean
   vertical alignment line. Rounded glass cards, tight 8pt spacing, nav + FAB
   clearance. Desktop/tablet untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    body.page-cart {
        padding-top: 68px;
    }

    .page-cart .as-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ── Hero → rounded banner card at the header width ── */
    .page-cart .cart-hero-wrap {
        width: 94% !important;
        margin: 6px auto 14px !important;
        padding: 0 !important;
        border-radius: 20px !important;
        border: 1px solid rgba(139, 92, 246, .20) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .32) !important;
    }

    .page-cart .cart-hero {
        padding: 26px 18px !important;
    }

    .page-cart .cart-hero-title {
        font-size: 1.55rem !important;
    }

    /* ── Content column at the header width, with nav clearance at the bottom ── */
    .page-cart .cart-section {
        width: 94% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 0 calc(58px + 28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .page-cart .cart-layout {
        gap: 14px !important;
    }

    /* ── Cards fill the 94% column exactly → aligned with hero + each other ── */
    .page-cart .cart-items-card,
    .page-cart .cart-summary-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        padding: 16px !important;
        background: rgba(20, 18, 44, .55) !important;
        border: 1px solid rgba(139, 92, 246, .16) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .26) !important;
    }

    /* Individual item rows: soft inner cards, comfortable spacing */
    .page-cart .cart-item {
        border-radius: 14px !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    /* ── AI FAB lifted above the bottom nav so it doesn't overlap Profil ── */
    .page-cart .ai-chat-fab {
        bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        z-index: 96 !important;
    }
}