/* ==========================================================================
   cubase-core.css — WMDM Cubase Theme
   Single-file CSS for app/design/frontend/WMDM/cubase
   CSS merge is permanently disabled; all styles live in this file.
   Last cleaned: 2026-03-25
   ========================================================================== */

/* JetBrains Mono — Code font (400–700) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(../fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WMDM Cubase Theme — Phase 1 Shell CSS
   Design system + Header + Footer + Player + Skeletons + AJAX Nav
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. CSS CUSTOM PROPERTIES ────────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --bg: #0f0d0d;
    --bg-tint: #1a1517;
    --bg-card: #1a1517;
    --bg-elevated: #252022;
    --bg-hover: #1f1a1c;
    --bg-glass: rgba(26, 21, 23, 0.85);
    --bg-surface: #1a1517;

    /* Text */
    --text: #f5f5f7;
    --text-80: #c7c7cc;
    --text-60: #b0b0b5;
    --text-40: #a1a1a6;
    --text-20: #48484a;

    /* Borders */
    --border: #38383a;
    --border-light: #2c2c2e;

    /* Accent Colors */
    --primary: #C5032B;
    --primary-dark: #A50224;
    --primary-glow: rgba(197, 3, 43, 0.15);
    --teal: #00C2B0;
    --green: #8CC63F;
    --purple: #B45CE6;
    --yellow: #FFB800;
    --pink: #FF5CAA;
    --blue: #6C8EEF;
    --cyan: #5AC8FA;

    /* Radii */
    --radius: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);

    /* Typography */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container-width: 1440px; /* full-bleed containers (footer, player bar) — wider than --content-width (1400px) for visual breathing room */
    --content-width: 1400px;
    --header-h: 60px;
    --player-h: 108px;
    --page-padding: 20px;
    --column-gap: 30px;
    --sidebar-width: 325px;
    --sidebar-width-sm: 280px;

    /* Skeleton */
    --sk-base: #1e1a1c;
    --sk-shine: #2a2527;
    --sk-speed: 1.6s;
}

/* ── 2. RESET & BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100vw; }

/* Clip product list to prevent horizontal overflow */


body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
img { max-width: 100%; height: auto; display: block; }
button, [type="button"], [type="submit"] {
    cursor: pointer; border: none; background: none; font: inherit; color: inherit;
}
ul, ol { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--text);
}

/* ── 3. NOISE GRAIN OVERLAY — removed: causes full-viewport repaints ── */

/* ── 4. MAGENTO DARK OVERRIDES ───────────────────────────────────────────── */
.page-wrapper,
.page-main,
.columns,
.column.main,
.column.left,
.column.right,
.sidebar,
.sidebar-main,
.sidebar-additional {
    background-color: var(--bg);
    color: var(--text);
}

header.page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
footer.page-footer {
    background: none !important;
    border: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Dark form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    color: var(--text) !important;
    padding: 10px 14px;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
}
::placeholder { color: var(--text-40); }

/* Dark messages */
.message {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 12px;
}
.message.success { border-left: 3px solid var(--green) !important; }
.message.error { border-left: 3px solid var(--primary) !important; }
.message.warning { border-left: 3px solid var(--yellow) !important; }
.message.info { border-left: 3px solid var(--blue) !important; }

/* Dark primary buttons */
button.action.primary,
a.action.primary,
.action.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
button.action.primary:hover,
a.action.primary:hover,
.action.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(197,3,43,0.3);
}

/* Dark tables */
table { border-collapse: collapse; width: 100%; }
th, td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    color: var(--text);
}
th {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
}

/* ── 5. PAGE LAYOUT ──────────────────────────────────────────────────────── */
/* !important required: Blank theme's styles-l.min.css loads AFTER this file
   and sets .page-main{max-width:1280px}, .columns{display:block} with floats */
.page-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden;
    max-width: 100vw;
}
.page-main {
    flex: 1 !important;
    max-width: var(--content-width) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--page-padding) 32px !important;
    box-sizing: border-box !important;
    float: none !important;
}
.columns {
    display: flex !important;
    gap: var(--column-gap) !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}
.column.main {
    flex: 1 !important;
    min-width: 0 !important;
    float: none !important;
    width: 100% !important;
}
.sidebar-main {
    float: none !important;
}

/* 1-column layout — main takes full width */
.page-layout-1column .page-main {
    max-width: var(--content-width) !important;
}

/* CMS homepage — flush content, no extra top/bottom padding */
.cms-index-index .page-main {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: var(--player-h) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .columns {
        flex-direction: column !important;
    }
}

/* Breadcrumbs */


/* Page titles */
.page-title-wrapper { margin-bottom: 8px; }
.page-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: var(--text);
    line-height: 1.1;
}
.category-description { margin-bottom: 24px; }
.category-description p { font-size: 15px; color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--header-h);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header-inner {
    position: relative;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--text);
}
.header-logo:hover { color: var(--text); }
.header-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.header-logo-mark {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-logo-mark svg {
    width: 18px;
    height: 18px;
    fill: #fff;
    stroke: none;
}
.header-logo-text {
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.header-logo-text span {
    color: var(--text);
    font-weight: 400;
}

/* Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-80);
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}
.nav-link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.nav-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.2s ease;
}
.nav-item:hover > .nav-link svg {
    transform: rotate(180deg);
}

/* Dropdowns */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    z-index: 100;
}
.nav-item:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown.wide {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    top: auto;
    transform: translateY(-8px);
    padding: 28px calc((100vw - var(--content-width)) / 2) 24px;
    min-height: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.nav-item:hover > .nav-dropdown.wide {
    transform: translateY(0);
}

/* Genres mega layout — 4-column grid */
.genres-mega {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 8px;
}
.genres-mega__group { min-width: 0; }
.genres-mega__title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-80);
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}

.genres-mega__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-80);
    font-size: 15px;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}
.genres-mega__item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text);
}
.genres-mega__item .gm-count {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--text);
}
.genres-mega__footer {
    grid-column: 1 / -1;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.genres-mega__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 100px;
    background: rgba(197,3,43,0.08);
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s, background-color 0.2s;
    text-decoration: none;
}
.genres-mega__all:hover {
    background: rgba(197,3,43,0.15);
    color: var(--primary);
}

/* More mega-dropdown */
.nav-dropdown.mega {
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    top: auto;
    transform: translateY(-8px);
    padding: 28px calc((100vw - var(--content-width)) / 2) 24px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.nav-item:hover > .nav-dropdown.mega {
    transform: translateY(0);
}
.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.mega-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-20);
    padding: 8px 12px 6px;
    grid-column: 1 / -1;
}
.mega-section-title:not(:first-child) {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}
.mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
    color: var(--text);
    text-decoration: none;
}
.mega-item:hover {
    background: rgba(255,255,255,0.04);
}
.mi-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mi-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mi-icon.ic-red { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.mi-icon.ic-teal { background: linear-gradient(135deg, var(--teal), #00a090); }
.mi-icon.ic-yellow { background: linear-gradient(135deg, var(--yellow), #e0a000); }
.mi-icon.ic-purple { background: linear-gradient(135deg, var(--purple), #9340c0); }
.mi-icon.ic-pink { background: linear-gradient(135deg, var(--pink), #e04090); }
.mi-icon.ic-green { background: linear-gradient(135deg, var(--green), #70a030); }
.mi-icon.ic-blue { background: linear-gradient(135deg, var(--blue), #5070d0); }
.mi-label {
    font-size: 14px;
    font-weight: 500;
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
    color: var(--text);
    text-decoration: none;
}
.nav-dropdown-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}
.dd-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dd-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dd-icon.ic-red { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.dd-icon.ic-teal { background: linear-gradient(135deg, var(--teal), #00a090); }
.dd-icon.ic-yellow { background: linear-gradient(135deg, var(--yellow), #e0a000); }
.dd-icon.ic-purple { background: linear-gradient(135deg, var(--purple), #9340c0); }
.dd-icon.ic-pink { background: linear-gradient(135deg, var(--pink), #e04090); }
.dd-icon.ic-green { background: linear-gradient(135deg, var(--green), #70a030); }
.dd-icon.ic-blue { background: linear-gradient(135deg, var(--blue), #5070d0); }
.dd-icon.ic-cyan { background: linear-gradient(135deg, var(--cyan), #40b0e0); }
.dd-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}
.dd-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-40);
    font-weight: 500;
}
.nav-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
    grid-column: 1 / -1;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 36px;
    min-width: 300px;
}
.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    padding: 0 14px;
    height: 36px;
    transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), width 0.3s var(--ease-out);
    width: 200px;
}
.header-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    width: 280px;
}
.header-search svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-40);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.header-search input {
    border: none !important;
    background: none !important;
    outline: none;
    color: var(--text);
    font-size: 14px;
    width: 100%;
    padding: 0 !important;
    box-shadow: none !important;
}
.header-search input::placeholder { color: var(--text-40); }
.header-sell-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff !important;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.15s ease, background 0.2s ease;
    white-space: nowrap;
}
.header-sell-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--primary-light, #d4062f), var(--primary));
    color: #fff !important;
}
.header-sell-btn svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.header-action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text);
    transition: color 0.2s ease, background-color 0.2s ease;
    position: relative;
}
.header-action-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.header-action-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.header-cart-badge {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 18px;
    height: 18px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
.header-cart-badge:empty { display: none; }
.header-menu-btn {
    width: 36px;
    height: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text);
    transition: color 0.2s ease, background-color 0.2s ease;
}
.header-menu-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.header-menu-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. MOBILE DRAWER
   ═══════════════════════════════════════════════════════════════════════════ */

.drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 90vw;
    background: var(--bg-tint);
    border-left: 1px solid var(--border-light);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out);
    overflow: hidden;
}
.mobile-drawer.is-open {
    transform: translateX(0);
}
.drawer__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.drawer-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    padding: 0 14px;
    height: 40px;
}
.drawer-search svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-40);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.drawer-search input {
    border: none !important;
    background: none !important;
    outline: none;
    color: var(--text);
    font-size: 14px;
    width: 100%;
    padding: 0 !important;
    box-shadow: none !important;
}
.drawer__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text);
    transition: color 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}
.drawer__close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.drawer__close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.drawer-section {
    border-bottom: 1px solid var(--border-light);
}
.drawer-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.2s ease;
    cursor: pointer;
}
.drawer-section__toggle:hover { color: var(--primary); }
.drawer-section__toggle svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-40);
    fill: none;
    stroke-width: 2;
    transition: transform 0.3s var(--ease-out);
}
.drawer-section.is-expanded .drawer-section__toggle svg {
    transform: rotate(180deg);
}
.drawer-section__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease-out);
}
.drawer-section.is-expanded .drawer-section__content {
    max-height: 2000px;
}
.drawer-genre-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-80);
    padding: 12px 20px 4px 32px;
}
.drawer-genre-title:first-child {
    padding-top: 4px;
}
.drawer-sub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 32px;
    color: var(--text);
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
}
.drawer-sub-item:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text);
}
.drawer-sub-item .dsi-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.drawer-sub-item .dsi-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.drawer-sub-item .dsi-label { flex: 1; font-weight: 500; }
.drawer-sub-item .dsi-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-40);
    margin-left: auto;
}
.drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
    border-bottom: 1px solid var(--border-light);
}
.drawer-link:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text);
}
.dl-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dl-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dl-icon.ic-red { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.dl-icon.ic-teal { background: linear-gradient(135deg, var(--teal), #00a090); }
.dl-icon.ic-yellow { background: linear-gradient(135deg, var(--yellow), #e0a000); }
.dl-icon.ic-purple { background: linear-gradient(135deg, var(--purple), #9340c0); }
.dl-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--primary);
    color: #fff;
    margin-left: auto;
}
.drawer-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}
.drawer-section__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.2s ease;
    cursor: pointer;
}
.drawer-section__trigger:hover { color: var(--primary); }
.ds-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ds-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ds-icon.ic-red { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.ds-icon.ic-purple { background: linear-gradient(135deg, var(--purple), #9340c0); }
.ds-label { flex: 1; text-align: left; }
.ds-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-40);
}
.ds-chevron svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-40);
    fill: none;
    stroke-width: 2;
    transition: transform 0.3s var(--ease-out);
}
.drawer-section.is-expanded .ds-chevron svg {
    transform: rotate(180deg);
}
.drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 32px;
    color: var(--text-80);
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
}
.drawer-nav-item:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text);
}
.drawer-nav-item .dd-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.drawer-nav-item .dd-icon svg {
    width: 14px;
    height: 14px;
}
.drawer-nav-item .dd-count {
    margin-left: auto;
}
.drawer__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.drawer-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}
.drawer-footer-btn--primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
.drawer-footer-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(197,3,43,0.3);
    color: #fff;
}
.drawer-footer-btn--secondary {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text);
}
.drawer-footer-btn--secondary:hover {
    border-color: var(--border);
    background: var(--bg-hover);
    color: var(--text);
}
.drawer-footer-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    overflow: hidden;
    background: var(--bg-tint);
    border-top: 1px solid var(--border-light);
    position: relative;
    padding-bottom: var(--player-h);
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.4;
}
.footer-inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 60px var(--page-padding) 24px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 48px;
}

/* Footer Brand */
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-logo-img {
    height: 28px;
    width: auto;
}
.footer-logo-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.footer-logo-text span { color: var(--text-60); font-weight: 400; }
.footer-brand-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-60);
    margin: 0 auto;
}
.footer-socials {
    display: flex;
    gap: 8px;
}
.footer-social-link {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-60);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.footer-social-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-glow);
}
.footer-social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke: none;
}

/* Footer Links */
.footer-links h3,
.footer-links h4 {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    margin-bottom: 20px;
}
.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links a {
    font-size: 14px;
    color: var(--text-60);
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-links a:hover { color: var(--text); }
.link-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--green);
    color: #fff;
    letter-spacing: 0.04em;
}

/* Footer Newsletter */
.footer-newsletter h3,
.footer-newsletter h4 {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    margin-bottom: 20px;
}
.footer-newsletter p {
    font-size: 13px;
    color: var(--text-60);
    margin: 0 0 16px;
    line-height: 1.5;
}
.footer-newsletter-form {
    display: flex;
    gap: 8px;
}
.footer-newsletter-form input {
    flex: 1;
    height: 40px;
    padding: 0 14px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px;
    color: var(--text) !important;
    font-size: 13px;
}
.footer-newsletter-form button {
    height: 40px;
    padding: 0 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
.footer-newsletter-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(197,3,43,0.3);
}
.footer-trust-badges {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
.footer-trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-60);
}
.footer-trust-badge svg {
    width: 14px;
    height: 14px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}
.footer-copyright {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-40);
}
.footer-copyright a {
    color: var(--text-60);
    transition: color 0.2s;
}
.footer-copyright a:hover { color: var(--text-60); }
.footer-payments {
    display: flex;
    gap: 6px;
}
.footer-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 26px;
    padding: 0 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-40);
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PLAYER BAR (Phase 1 placeholder)
   ═══════════════════════════════════════════════════════════════════════════ */

.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--player-h);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--ease-out);
}
.player-bar.is-hidden {
    transform: translateY(100%);
}
.player-bar__inner {
    max-width: var(--container-width);
    width: 100%;
    padding: 0 var(--page-padding);
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
}
.player-bar__placeholder {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-40);
    font-size: 13px;
    width: 100%;
    justify-content: center;
}
.player-bar__placeholder svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-20);
    fill: none;
    stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. LOADING SKELETONS
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* Skeletons defined in SOURCE: components/skeletons.css section below */

/* ═══════════════════════════════════════════════════════════════════════════
   11. AJAX NAV TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Content area transitions */
main#maincontent {
    transition: opacity 0.2s ease;
}
main#maincontent.ajax-loading {
    opacity: 0.4;
    pointer-events: none;
}
main#maincontent.ajax-fade-in {
    animation: fadeIn 0.3s var(--ease-out) forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading progress bar at top of page */
.ajax-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--pink));
    z-index: 9998;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--primary-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .header-search { width: 160px; }
    .header-search:focus-within { width: 220px; }
}

@media (max-width: 900px) {
    :root {
        --header-h: 56px;
        --player-h: 80px;
    }

    /* Header: hide desktop nav, show hamburger */
    .header-nav { display: none; }
    .header-menu-btn { display: flex; }
    .header-sell-btn { display: none; }
    .header-search { width: 140px; }
    .header-search:focus-within { width: 200px; }
    .header-inner { padding: 0 16px; gap: 12px; }
    .header-actions { min-width: auto; flex-shrink: 1; }

    /* Page layout */
    .page-main { padding: 16px var(--page-padding); padding-bottom: 32px; }
    .columns { flex-direction: column; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer-inner { padding: 40px var(--page-padding) 20px; }
    .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
    .footer-payments { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    :root { --page-padding: 16px; }
    .page-title { font-size: 22px; }

    /* Player bar compact */
    .player-bar__inner { padding: 0 var(--page-padding); }
    /* Prevent hidden modals from causing horizontal overflow */
    .modals-wrapper { overflow: hidden; }
    .wmdm-pagination { flex-wrap: wrap; gap: 8px; }
    /* Mobile: larger touch targets for header icons */
    .header-action-btn,
    .header-menu-btn { width: 44px; height: 44px; }
    .header-action-btn svg,
    .header-menu-btn svg { width: 24px; height: 24px; }
    .header-search svg { width: 20px; height: 20px; }
    .wmdm-pagination__pages { flex-wrap: wrap; justify-content: center; }
    .header-inner { overflow: hidden; }
}

@media (max-width: 480px) {
    :root { --page-padding: 12px; }
    .header-inner { padding: 0 12px; gap: 8px; overflow: visible; position: relative; }
    .header-actions { gap: 0; }
    .header-search {
        width: 36px;
        padding: 0;
        justify-content: center;
        border: none;
        background: none;
        cursor: pointer;
    }
    .header-search input { display: none; }
    .header-search:focus-within {
        position: fixed;
        top: 8px;
        left: 12px;
        right: 12px;
        width: auto;
        z-index: 100;
        background: var(--bg-elevated);
        border: 1px solid var(--border-light);
        padding: 0 14px;
        box-sizing: border-box;
    }
    .header-search:focus-within input { display: block; font-size: 16px; }
    .header-logo-text {
    color: var(--primary); font-size: 15px; }

    /* Footer */
    .footer-inner { padding: 32px var(--page-padding) 16px; }
    .footer-trust-badges { flex-direction: column; gap: 8px; }
    .footer-newsletter-form { flex-direction: column; }
    .footer-newsletter-form button { width: 100%; }
    .wmdm-pagination__btn { min-width: 34px; height: 34px; padding: 0 8px; font-size: 12px; }
    .wmdm-pagination__btn svg { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
    .header-logo-text span { display: none; }
    .header-logo { flex-shrink: 1; min-width: 0; overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. CATEGORY & SEARCH RESULTS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page Layout: 2-column with sidebar on RIGHT ── */
/* styles-l.css sets .columns{display:block} and uses floats — override everything */
.page-layout-2columns-left .columns,
.page-products.page-layout-2columns-left .columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--column-gap) !important;
    position: relative !important;
}
/* kill clearfix pseudo-element — styles-m adds ::after{content:" "} which becomes
   an invisible 3rd flex item, creating an extra 30px gap and shrinking .column.main */
.page-layout-2columns-left .columns::after,
.page-products.page-layout-2columns-left .columns::after {
    content: none !important;
}
.page-layout-2columns-left .column.main,
.page-products.page-layout-2columns-left .column.main {
    flex: 1 1 0% !important;
    float: none !important;
    width: 100% !important;
    max-width: var(--content-width) !important; margin: 0 auto;
    min-width: 0 !important;
    order: 1 !important;
    padding-left: 0 !important;
}
.page-layout-2columns-left .sidebar.sidebar-main,
.page-layout-2columns-left .sidebar-main {
    flex: 0 0 var(--sidebar-width) !important; /* override styles-m flex:1/flex-basis:100% — sidebar must not grow */
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    float: none !important;
    order: 2 !important;
    overflow: hidden;
}


/* ── Toolbar ── */
.wmdm-toolbar {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-light));
    border-radius: var(--radius-md, 12px);
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
}
.wmdm-play-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--primary, #C5032B);
    border-radius: var(--radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    transition: background 0.2s;
    white-space: nowrap;
    text-decoration: none;
}
.wmdm-play-all:hover { background: var(--primary-dark, #A50224); }
.wmdm-play-all__icon { width: 16px; height: 16px; }
.wmdm-count {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}
.wmdm-count strong { color: var(--text); }
.wmdm-divider {
    width: 1px;
    height: 24px;
    background: var(--border-light);
    flex-shrink: 0;
}
.wmdm-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
}
.wmdm-filter__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-80);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    user-select: none;
}
.wmdm-filter__btn:hover {
    border-color: var(--border);
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}
.wmdm-filter__btn.has-value {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.wmdm-filter__arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.wmdm-filter__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary, #C5032B);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}
.wmdm-sort-dir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-light);
    color: var(--text);
    transition: color 0.2s, border-color 0.2s;
    text-decoration: none;
}
.wmdm-sort-dir:hover {
    border-color: var(--border);
    color: var(--text);
    background: rgba(255,255,255,0.04);
}
.wmdm-sort-dir__icon { width: 16px; height: 16px; }
.wmdm-views {
    display: flex;
    gap: 4px;
}
.wmdm-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm, 8px);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-40);
    background: transparent;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.wmdm-view-btn:hover {
    border-color: var(--border);
    color: var(--text);
}
.wmdm-view-btn.is-active {
    border-color: rgba(255,255,255,0.2);
    color: var(--text);
    background: rgba(255,255,255,0.08);
}
.wmdm-view-btn__icon { width: 14px; height: 14px; }
.wmdm-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-light);
    color: var(--text-40);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    text-decoration: none;
}
.wmdm-clear:hover {
    border-color: rgba(197,3,43,0.3);
    color: var(--primary, #C5032B);
    background: rgba(197,3,43,0.06);
}
.wmdm-clear__icon { width: 14px; height: 14px; }

/* Filter container — needs position:relative for dropdown */
.wmdm-filter {
    position: relative;
}
/* Filter dropdown panels — hidden by default, shown on .is-open */
.wmdm-filter__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-elevated, #252022);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), visibility 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), transform 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
    z-index: 200;
    padding: 0;
}
.wmdm-filter.is-open .wmdm-filter__menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Search input inside dropdown */
.wmdm-filter__search {
    flex-shrink: 0;
    padding: 8px 12px;
}
.wmdm-filter__search input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
}
.wmdm-filter__search input:focus {
    border-color: var(--primary);
    background: rgba(255,255,255,0.05);
}
.wmdm-filter__search input::placeholder {
    color: var(--text-20, #48484a);
}

/* Filter option rows (checkbox labels) */
.wmdm-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.wmdm-filter__option:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}
/* Checkbox styling */
.wmdm-filter__option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wmdm-filter__option input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.wmdm-filter__option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.wmdm-filter__option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wmdm-filter__count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text);
    flex-shrink: 0;
}

/* Single-select option (sort) */
.wmdm-filter__option--single {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    text-decoration: none;
}
.wmdm-filter__option--single:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}
.wmdm-filter__option--single.is-selected {
    color: var(--primary);
    background: rgba(197,3,43,0.06);
}

/* Apply button inside dropdown */

.wmdm-filter__apply-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Backdrop overlay for filter dropdowns */
.wmdm-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
}
.wmdm-filter-backdrop.is-visible { display: block; }

/* AJAX loader overlay */
.wmdm-ajax-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,13,13,0.6);
    z-index: 50;
    border-radius: var(--radius-md);
    backdrop-filter: blur(2px);
}
.wmdm-ajax-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: wmdm-spin 0.8s linear infinite;
}
@keyframes wmdm-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. PRODUCT LIST — CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.wmdm-product-list {
    list-style: none;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
}
.wmdm-product-item { min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; }

/* ── LIST VIEW ── */
.wmdm-product-list[data-view="list"] .wmdm-product-card {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--bg-card)) 0%, var(--bg-card) 100%);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-light));
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
    position: relative;
}
.wmdm-product-list[data-view="list"] .wmdm-product-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 2px 2px 0;
    z-index: 2;
}
.wmdm-product-list[data-view="list"] .wmdm-product-card:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}
.wmdm-product-list[data-view="list"] .wmdm-product-card:hover::before {
    opacity: 1;
}
.wmdm-product-list[data-view="list"] .wmdm-card-image {
    flex-shrink: 0;
    width: 200px;
    display: flex;
}
.wmdm-product-list[data-view="list"] .wmdm-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}
.wmdm-product-list[data-view="list"] .wmdm-product-card:hover .wmdm-card-image img {
    transform: none;
}

/* Card body */
.wmdm-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 24px;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.wmdm-card-info {
    flex: 1;
    min-width: 0;
}
.wmdm-card-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0 0 4px;
    line-height: 1.3;
}
.wmdm-card-title a {
    color: var(--text);
    transition: color 0.2s;
}
.wmdm-card-title a:hover { color: var(--primary); }
.wmdm-card-seller {
    font-size: 13px;
    margin-bottom: 10px;
}
.wmdm-card-seller a {
    color: var(--text-40);
    transition: color 0.2s;
}
.wmdm-card-seller a:hover { color: var(--teal); }

/* Meta tags */
.wmdm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
    max-height: 35px;
}
.wmdm-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.wmdm-meta-tag .tag-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}
.wmdm-meta-tag--daw {
    background: rgba(255,255,255,0.06);
    border-color: var(--text-20);
    color: var(--text-80);
}
.wmdm-meta-tag--genre {
    background: rgba(255,255,255,0.04);
    border-color: var(--text-20);
    color: var(--text);
}
.wmdm-meta-tag--bpm {
    background: rgba(255,255,255,0.03);
    border-color: var(--text-20);
    color: var(--text);
}
.wmdm-meta-tag--key {
    background: rgba(255,255,255,0.02);
    border-color: var(--text-20);
    color: var(--text-40);
}

/* ── Controls Cluster ── */
.wmdm-product-list[data-view="list"] .wmdm-card-controls {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: 100%;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--text-20);
    border-radius: var(--radius-md);
    padding: 10px;
    align-self: flex-start;
}
.wmdm-card-actions {
    display: flex;
    gap: 6px;
}
.wmdm-product-list[data-view="list"] .wmdm-card-actions {
    display: flex;
    gap: 6px;
    padding-right: 14px;
    border-right: 1px solid var(--border);
    align-self: flex-end;
}
.wmdm-card-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
.wmdm-card-btn svg {
    width: 16px;
    height: 16px;
}
.wmdm-card-btn-play {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
.wmdm-card-btn-play:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(197,3,43,0.3);
}
.wmdm-card-btn-queue {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--border-light);
    font-weight: 700;
    font-size: 18px;
}
.wmdm-card-btn-queue:hover {
    transform: scale(1.06);
    border-color: var(--border);
    color: var(--text);
    background: rgba(255,255,255,0.08);
}

/* License cards */
.wmdm-license-section {
    display: flex;
    align-items: center;
}
.wmdm-product-list[data-view="list"] .wmdm-license-section {
    padding: 0 14px;
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}
.wmdm-product-list[data-view="list"] .wmdm-license-section::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 44px;
    width: 1px;
    background: var(--border);
}
.wmdm-license-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.wmdm-license-card {
    display: block;
    cursor: pointer;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
.wmdm-license-card__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.wmdm-license-card__content {
    height: 44px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: rgba(255,255,255,0.02);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.wmdm-product-list[data-view="list"] .wmdm-license-card {
    min-width: 0;
    flex: 1;
}
.wmdm-license-card:hover .wmdm-license-card__content {
    border-color: var(--border);
    background: rgba(255,255,255,0.04);
}
.wmdm-license-card.is-selected .wmdm-license-card__content {
    border-color: var(--primary-dark);
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-dark) 30%, transparent);
}
.wmdm-license-card__header {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wmdm-license-card__name {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-40);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wmdm-license-card.is-selected .wmdm-license-card__name {
    color: var(--text);
}
.wmdm-license-card__price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.wmdm-license-card.is-selected .wmdm-license-card__price {
    color: var(--primary);
}
.wmdm-license-card__info-btn {
    display: none;
}

/* Cart button */
.wmdm-card-cart {
    flex-shrink: 0;
}
.wmdm-product-list[data-view="list"] .wmdm-card-cart {
    padding-left: 14px;
    display: flex;
    align-self: flex-end;
}
.wmdm-cart-form {
    display: inline-flex;
}
.wmdm-card-cart-btn {
    height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    white-space: nowrap;
}
.wmdm-card-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(197,3,43,0.3);
}
.wmdm-card-cart-btn .cart-icon {
    width: 16px;
    height: 16px;
}
.wmdm-card-cart-btn .price-current {
    font-size: 14px;
    font-weight: 700;
}
.wmdm-card-cart-btn .price-original {
    font-size: 12px;
    text-decoration: line-through;
    opacity: 0.6;
    font-weight: 400;
}
.wmdm-card-cart-btn.has-discount {
    background: linear-gradient(135deg, #8CC63F, #6ca82f);
}
.wmdm-card-cart-btn.has-discount:hover {
    box-shadow: 0 6px 20px rgba(140,198,63,0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. PRODUCT LIST — MICRO VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

.wmdm-product-list[data-view="micro"] {
    gap: 4px;
}
.wmdm-product-list[data-view="micro"] .wmdm-product-card {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    gap: 14px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.wmdm-product-list[data-view="micro"] .wmdm-product-card:hover {
    background: var(--bg-hover);
    border-color: var(--border);
}
.wmdm-product-list[data-view="micro"] .wmdm-card-image {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-image img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-body {
    padding: 0;
    gap: 10px;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-info {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.wmdm-product-list[data-view="micro"] .wmdm-card-title {
    font-size: 13px;
    margin-bottom: 1px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-seller {
    font-size: 11px;
    margin-bottom: 0;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-meta {
    display: none;
}

/* Micro: controls cluster */
.wmdm-product-list[data-view="micro"] .wmdm-card-controls {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 0;
    flex-shrink: 0;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-actions {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    border-right: 1px solid var(--border);
    align-items: center;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-btn {
    width: 30px;
    height: 30px;
    font-size: 11px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-btn svg {
    width: 12px;
    height: 12px;
}
.wmdm-product-list[data-view="micro"] .wmdm-license-section {
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-right: 1px solid var(--border);
}
.wmdm-product-list[data-view="micro"] .wmdm-license-section::after {
    display: none;
}
.wmdm-product-list[data-view="micro"] .wmdm-license-cards {
    gap: 3px;
}
.wmdm-product-list[data-view="micro"] .wmdm-license-card__content {
    height: 30px;
    padding: 2px 8px;
    min-width: 60px;
    border-radius: 4px;
}
.wmdm-product-list[data-view="micro"] .wmdm-license-card__name {
    font-size: 8px;
    letter-spacing: 0.3px;
}
.wmdm-product-list[data-view="micro"] .wmdm-license-card__price {
    font-size: 11px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-cart {
    padding-left: 0;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-cart-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    gap: 6px;
    border-radius: 0 5px 5px 0;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-cart-btn .cart-icon {
    width: 13px;
    height: 13px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-cart-btn .price-current {
    font-size: 12px;
}
.wmdm-product-list[data-view="micro"] .wmdm-card-cart-btn .price-original {
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.wmdm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
    padding: 20px 0;
}
.wmdm-pagination__info {
    font-size: 13px;
    color: var(--text-40);
    white-space: nowrap;
}
.wmdm-pagination__info strong {
    color: var(--text);
    font-weight: 600;
}
.wmdm-pagination__pages {
    display: flex;
    align-items: center;
    gap: 4px;
}
.wmdm-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    text-decoration: none;
}
.wmdm-pagination__btn svg {
    width: 18px;
    height: 18px;
}
.wmdm-pagination__btn:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-light);
    color: var(--text);
}
.wmdm-pagination__btn.wmdm-pagination__btn--active,
.wmdm-pagination__btn--active {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    border-color: var(--primary);
}
.wmdm-pagination__btn--disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}
.wmdm-pagination__ellipsis {
    color: var(--text-20);
    font-size: 14px;
    padding: 0 4px;
    user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. SIDEBAR — Top Sellers
   ═══════════════════════════════════════════════════════════════════════════ */

.wmdm-top-sellers {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}
.wmdm-top-sellers__header {
    background: linear-gradient(135deg, var(--primary) 0%, #a30222 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wmdm-top-sellers__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wmdm-top-sellers__title svg { width: 20px; height: 20px; }
.wmdm-top-sellers__play-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}
.wmdm-top-sellers__play-all:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.wmdm-top-sellers__play-all svg { width: 12px; height: 12px; fill: #fff; }
.wmdm-top-sellers__list { list-style: none; margin: 0 auto; padding: 0; }
.wmdm-top-seller-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}
.wmdm-top-seller-item:last-child { border-bottom: none; }
.wmdm-top-seller-item:hover { background: rgba(197,3,43,0.04); }
.wmdm-top-seller-image {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-elevated);
    display: block;
}
.wmdm-top-seller-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wmdm-top-seller-info {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    display: block;
    overflow: hidden;
}
.wmdm-top-seller-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wmdm-top-seller-item:hover .wmdm-top-seller-name { color: var(--primary); }
.wmdm-top-seller-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wmdm-top-seller-price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}
.wmdm-top-seller-price--old {
    font-size: 11px;
    color: var(--text-40);
    text-decoration: line-through;
    font-weight: 400;
}
.wmdm-top-seller-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}
.wmdm-top-seller-btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    padding: 0;
}
.wmdm-top-seller-btn svg { width: 14px; height: 14px; display: block; fill: var(--text-40); }
.wmdm-top-seller-btn--play {
    background: var(--primary); border-color: var(--primary);
}
.wmdm-top-seller-btn--play:hover {
    background: var(--primary-dark); border-color: var(--primary-dark);
}
.wmdm-top-seller-btn--play svg { margin-left: 2px; fill: #fff; }
.wmdm-top-seller-btn--cue { background: transparent; border-color: transparent; }
.wmdm-top-seller-btn--cue:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.wmdm-top-seller-btn--cue svg { fill: var(--text-40); }

/* ═══════════════════════════════════════════════════════════════════════════
   18. SIDEBAR — Top Creators
   ═══════════════════════════════════════════════════════════════════════════ */

.wmdm-top-creators {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}
.wmdm-top-creators__header {
    background: linear-gradient(135deg, var(--primary) 0%, #a30222 100%);
    padding: 16px 20px;
}
.wmdm-top-creators__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wmdm-top-creators__title svg { width: 20px; height: 20px; }
.wmdm-top-creators__list { list-style: none; margin: 0 auto; padding: 0; }
.wmdm-top-creators__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}
.wmdm-top-creators__item:last-child { border-bottom: none; }
.wmdm-top-creators__item:hover { background: rgba(197,3,43,0.04); }
.wmdm-top-creators__link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.wmdm-top-creators__avatar {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.wmdm-top-creators__avatar--placeholder {
    background: linear-gradient(135deg, var(--primary) 0%, #a30222 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}
.wmdm-top-creators__info {
    flex: 1;
    min-width: 0;
}
.wmdm-top-creators__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color 0.2s;
}
.wmdm-top-creators__item:hover .wmdm-top-creators__name { color: var(--primary); }
.wmdm-top-creators__count {
    font-size: 11px;
    color: var(--text-40);
    margin-top: 2px;
    display: block;
}
.wmdm-top-creators__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}
.wmdm-top-creators__btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    padding: 0;
}
.wmdm-top-creators__btn svg { width: 14px; height: 14px; display: block;  fill: var(--text-40); }
.wmdm-top-creators__btn--play {
    background: var(--primary); border-color: var(--primary);
}
.wmdm-top-creators__btn--play:hover {
    background: var(--primary-dark); border-color: var(--primary-dark);
}
.wmdm-top-creators__btn--play svg { margin-left: 2px; fill: #fff; }
.wmdm-top-creators__btn--cue { background: transparent; border-color: transparent; }
.wmdm-top-creators__btn--cue:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.wmdm-top-creators__btn--cue svg { fill: var(--text-40); }

/* ═══════════════════════════════════════════════════════════════════════════
   19. SEARCH RESULTS EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   20. CATEGORY PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .wmdm-product-list[data-view="list"] .wmdm-card-image { width: 160px; }
    .page-layout-2columns-left .sidebar.sidebar-main { width: var(--sidebar-width-sm) !important; min-width: var(--sidebar-width-sm) !important; max-width: var(--sidebar-width-sm) !important; }
}

@media (max-width: 900px) {
    .page-layout-2columns-left .columns { flex-direction: column; }
    .page-layout-2columns-left .sidebar.sidebar-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: var(--content-width) !important; margin: 0 auto;
        order: 2;
    }
    .wmdm-product-list[data-view="list"] .wmdm-card-image { width: 140px; }
    .wmdm-card-body { flex-wrap: wrap; padding: 14px 16px; overflow: hidden; }
    .wmdm-product-list[data-view="list"] .wmdm-card-controls {
        width: 100%;
        flex-wrap: wrap;
    }
    .wmdm-license-cards { flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .page-title { font-size: 26px; }
    /* List view: stack card vertically */
    .wmdm-product-list[data-view="list"] .wmdm-product-card { flex-direction: column; }
    .wmdm-product-list[data-view="list"] .wmdm-card-image {
        width: 100%;
        height: 220px;
    }
    .wmdm-product-list[data-view="list"] .wmdm-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .wmdm-card-body {
        flex-direction: column;
        align-items: stretch;
        padding: 16px; overflow: hidden;
    }
    .wmdm-card-info { margin-bottom: 12px; }
    .wmdm-card-title { font-size: 16px; }

    /* Controls: break out of cluster, stack vertically */
    .wmdm-product-list[data-view="list"] .wmdm-card-controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .wmdm-product-list[data-view="list"] .wmdm-card-actions {
        width: 100%;
        border-right: none;
        padding-right: 0;
        gap: 8px;
    }
    .wmdm-product-list[data-view="list"] .wmdm-card-actions .wmdm-card-btn {
        flex: 1;
        width: auto;
        height: 44px;
        border-radius: var(--radius-sm);
    }
    .wmdm-product-list[data-view="list"] .wmdm-license-section {
        padding: 0;
        width: 100%;
    }
    .wmdm-product-list[data-view="list"] .wmdm-license-section::after { display: none; }
    .wmdm-license-cards { width: 100%; }
    .wmdm-license-card { flex: 1; }
    .wmdm-product-list[data-view="list"] .wmdm-card-cart {
        padding-left: 0;
        width: 100%;
    }
    .wmdm-cart-form { width: 100%; display: flex; }
    .wmdm-card-cart-btn { width: 100%; justify-content: center; }

    /* Micro view tighter spacing */
    .wmdm-product-list[data-view="micro"] .wmdm-product-card { padding: 8px 12px; }
}

@media (max-width: 480px) {
    .wmdm-card-meta { gap: 4px; max-height: 28px; }
    .wmdm-meta-tag { font-size: 12px; padding: 5px 10px; }
    .wmdm-meta-tag .tag-icon { width: 12px; height: 12px; }
    .wmdm-license-cards { gap: 4px; }
    .wmdm-license-card__content { padding: 6px 10px; min-width: 70px; }
    .wmdm-license-card__name { font-size: 9px; }
    .wmdm-license-card__price { font-size: 12px; }
    .wmdm-card-btn { width: 40px; height: 40px; }
    .wmdm-card-cart-btn { height: 40px; font-size: 13px; }
    .wmdm-product-list[data-view="list"] .wmdm-card-image { height: 180px; }
}

@media (max-width: 360px) {
    .wmdm-card-title { font-size: 14px; }
    .wmdm-card-seller { font-size: 11px; }
    .wmdm-license-card__content { min-width: 60px; padding: 4px 8px; }
    .wmdm-card-cart-btn { padding: 0 12px; font-size: 12px; gap: 6px; }
}

/* ── Hide default Magento product-list elements on category/search pages only ── */
.catalog-category-view .products.wrapper,
.catalog-category-view .products-grid,
.catalog-category-view .products-list,
.catalogsearch-result-index .products.wrapper,
.catalogsearch-result-index .products-grid,
.catalogsearch-result-index .products-list { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SOURCE: audio-player.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   AUDIO PLAYER — Component Styles
   Classes: .audio-player, .player-*, .queue-*
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide the original FAP (fullwidthAudioPlayer) DOM — cubase player bar replaces it.
   Use offscreen positioning instead of display:none so the FAP's click handlers
   and DOM dimensions are preserved (needed for seek via jQuery .trigger('click')). */
#fap-wrapper,
#fap .fap-wrapper,
.fap-wrapper {
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 400px !important;
    height: 40px !important;
    opacity: 0 !important;
    z-index: -1 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   AUDIO PLAYER BAR
   ═══════════════════════════════════════════════════════════════════════ */

.audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: var(--player-h);
    background: rgba(18,15,16,0.96);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 0.45s var(--ease-out);
    will-change: transform;
}
.audio-player.is-visible {
    transform: translateY(0);
}

.audio-player::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary) 70%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s;
}
.audio-player.is-playing::before {
    opacity: 0.6;
}
/* ── Progress bar ── */

.player-progress {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    cursor: pointer;
    z-index: 5;
    padding: 2px 0;
}
.player-progress__track {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    position: relative;
    overflow: visible;
    transition: height 0.15s;
}
.player-progress:hover .player-progress__track { height: 5px; }
.player-progress__fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), #e8254a);
    border-radius: 2px;
    transition: width 0.1s linear;
}
.player-progress__thumb {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(197,3,43,0.5), 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.15s var(--ease-spring);
}
.player-progress:hover .player-progress__thumb {
    transform: translateY(-50%) scale(1);
}
.player-progress__buffered {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
}
/* ── Player inner layout ── */

.player-inner {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(160px, 240px) 1fr auto;
    align-items: center;
    gap: 20px;
}
/* ── Track info (left) ── */

.player-track {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
}
.player-track__art {
    width: 64px; height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.player-track__art img { width: 100%; height: 100%; object-fit: cover; }
.audio-player.is-playing .player-track__art {
    animation: artPulse 3s ease-in-out infinite;
}
@keyframes artPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 20px rgba(197,3,43,0.15); }
}

.player-track__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player-track__title {
    font-size: 13px; font-weight: 600; color: #fff !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.player-track__artist { font-size: 12px; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.player-track__artist a { color: #fff !important; transition: color 0.2s; }
.player-track__artist a:hover { color: var(--primary) !important; }
/* ── Center: waveform + controls ── */

.player-controls {
    width: 100%;
    display: flex;
    align-items: center;
}
.player-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: color 0.15s;
    border-radius: 50%;
}
.player-btn:hover { color: var(--text); }
.player-btn svg {
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Shuffle/repeat buttons removed from player */

.player-btn--prev,
.player-btn--next { width: 64px; height: 64px; }
.player-btn--prev svg,
.player-btn--next svg { width: 40px; height: 40px; fill: currentColor; stroke: none; }

.player-btn--play {
    width: 54px; height: 54px;
    background: #2a2a2e !important;
    color: #fff !important;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
.player-btn--play:hover {
    transform: scale(1.06);
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
}
.player-btn--play:active { transform: scale(0.96); }
.player-btn--play svg { width: 40px; height: 40px; fill: currentColor; stroke: none; }
.player-btn--play .icon-play { margin-left: 2px; }

.player-wave-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.player-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-40);
    width: 38px;
    flex-shrink: 0;
    text-align: center;
    letter-spacing: -0.3px;
}
.player-waveform {
    flex: 1;
    height: 56px;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.player-waveform canvas { width: 100%; height: 100%; display: block; }
/* ── Right: unified controls strip ── */

.player-right {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
}
/* ── Volume slider inline ── */

.player-volume__slider {
    -webkit-appearance: none; appearance: none;
    width: 72px; height: 3px;
    background: var(--border); border-radius: 2px;
    outline: none; cursor: pointer;
    flex-shrink: 0;
    margin: 0 2px;
}
.player-volume__slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: transform 0.15s var(--ease-spring);
}
.player-volume__slider:hover::-webkit-slider-thumb { transform: scale(1.2); }
.player-volume__slider::-moz-range-thumb {
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff; cursor: pointer; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* ── Volume button ── */

.player-btn--vol svg { width: 32px; height: 32px; }
/* ── Queue button with badge ── */

.player-btn--queue {
    position: relative;
    width: 56px; height: 56px;
}
.player-btn--queue svg { width: 36px; height: 36px; }
.player-btn--queue.is-active { color: var(--primary); }
/* ── Badge — floats on queue icon ── */

.queue-badge {
    position: absolute;
    top: 1px;
    right: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px; height: 15px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
    pointer-events: none;
}
.queue-badge.is-visible { opacity: 1; transform: scale(1); }
/* ── Close button ── */

.player-btn--close {
    width: 48px; height: 48px;
    color: var(--text-40);
    margin-left: 4px;
    transition: color 0.15s, border-color 0.2s;
    border: 1px solid transparent;
    border-radius: 50%;
}
.player-btn--close:hover { color: #fff; }
.player-btn--close svg { width: 28px; height: 28px; }
/* ── Mini-tab (shows when player is closed) ── */

.player-mini-tab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 2000;
    width: 48px; height: 36px;
    background: rgba(18,15,16,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.player-mini-tab.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.player-mini-tab:hover {
    background: rgba(30,26,27,0.98);
    border-color: var(--primary);
    box-shadow: 0 4px 24px rgba(197,3,43,0.2);
}
.player-mini-tab svg {
    width: 18px; height: 18px;
    color: var(--text);
    transition: color 0.15s;
}
.player-mini-tab:hover svg { color: var(--primary); }
/* ── Title + art links ── */

.player-track__title-link {
    color: #fff !important;
    text-decoration: none;
    display: block;
    min-width: 0;
}
.player-track__title-link:hover .player-track__title {
    color: var(--primary);
}
.player-track__art-link {
    display: block;
    width: 100%; height: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════
   QUEUE PANEL — FULL-WIDTH BOTTOM POP-UP (v2)
   Extends above the player bar as if the player is expanding
   ═══════════════════════════════════════════════════════════════════════ */

.queue-panel {
    position: fixed;
    bottom: var(--player-h);
    left: 0;
    right: 0;
    z-index: 1999;
    max-height: 380px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
    overflow: hidden;
}
.queue-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
/* ── Scrim overlay behind the panel ── */

.queue-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
    cursor: pointer;
}
.queue-scrim.is-visible {
    opacity: 1;
    visibility: visible;
}
/* ── Panel header ── */

.queue-panel__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 32px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.queue-panel__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.queue-panel__count {
    font-size: 12px;
    color: var(--text-40);
    font-family: var(--font-mono);
    flex: 1;
}
.queue-panel__clear {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-40);
    padding: 5px 14px;
    border-radius: 100px;
    transition: color 0.15s, background-color 0.15s;
}
.queue-panel__clear:hover {
    color: var(--primary);
    background: rgba(197,3,43,0.08);
}
/* ── Panel body — two-zone layout ── */

.queue-panel__body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* ── Now playing zone (left) ── */

.queue-np {
    width: 320px;
    flex-shrink: 0;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: 1px solid var(--border-light);
    background: rgba(197,3,43,0.02);
}
.queue-np__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-20);
}
.queue-np__track {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}
.queue-np__art {
    width: 72px; height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    position: relative;
}
.queue-np__art img { width: 100%; height: 100%; object-fit: cover; }
/* ── Mini EQ bars overlay on artwork ── */

.queue-np__eq {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}
.queue-np__eq span {
    display: block;
    width: 3px;
    background: #fff;
    border-radius: 1px;
    animation: eqBounce 0.8s ease-in-out infinite alternate;
}
.queue-np__eq span:nth-child(1) { height: 5px; animation-delay: 0s; }
.queue-np__eq span:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.queue-np__eq span:nth-child(3) { height: 4px; animation-delay: 0.3s; }
.queue-np__eq span:nth-child(4) { height: 8px; animation-delay: 0.1s; }

@keyframes eqBounce {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}
.audio-player:not(.is-playing) .queue-np__eq span,
.queue-panel:not(.is-playing) .queue-np__eq span {
    animation-play-state: paused;
}

.queue-np__info { min-width: 0; flex: 1; }
.queue-np__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-bottom: 2px;
}
.queue-np__artist {
    font-size: 13px;
    color: var(--text-40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}
.queue-np__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.queue-np__tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: 0.3px;
}
.queue-np__tag--time {
    background: rgba(255,255,255,0.04);
    color: var(--text-40);
    font-family: var(--font-mono);
}
.queue-np__tag--genre {
    background: rgba(180,92,230,0.08);
    color: var(--purple);
}
.queue-np__tag--bpm {
    background: rgba(0,194,176,0.08);
    color: var(--teal);
    font-family: var(--font-mono);
}
.queue-np__tag--key {
    background: rgba(108,142,239,0.08);
    color: var(--blue);
    font-family: var(--font-mono);
}
.queue-np__tag--format {
    background: rgba(255,184,0,0.08);
    color: var(--yellow);
}
.queue-np__tag--format-stem {
    background: rgba(140,198,63,0.08);
    color: var(--green);
}
.queue-np__tag--format-midi {
    background: rgba(255,92,170,0.08);
    color: var(--pink);
}
/* ── Next up zone (right, scrollable) ── */

.queue-next {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.queue-next__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-20);
    padding: 16px 24px 8px;
    flex-shrink: 0;
}
.queue-next__list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
}
.queue-next__list::-webkit-scrollbar { width: 4px; }
.queue-next__list::-webkit-scrollbar-track { background: transparent; }
.queue-next__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* ── Queue item row ── */

.queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 24px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    animation: queueSlideIn 0.25s var(--ease-out) both;
}
@keyframes queueSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.queue-item:hover { background: rgba(255,255,255,0.03); }

.queue-item__num {
    width: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-20);
    text-align: center;
    flex-shrink: 0;
}
.queue-item__thumb {
    width: 36px; height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.queue-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.queue-item__info { flex: 1; min-width: 0; }
.queue-item__title {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.queue-item__artist {
    font-size: 11px; color: var(--text-40);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.queue-item__tags {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    max-width: 280px;
    overflow: hidden;
}
.queue-item__tag {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 100px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
    flex-shrink: 0;
}
.queue-item__tag--genre { background: rgba(255,255,255,0.04); color: var(--text-60); }
.queue-item__tag--bpm { background: rgba(255,255,255,0.03); color: var(--text-60); font-family: var(--font-mono); }
.queue-item__tag--key { background: rgba(255,255,255,0.02); color: var(--text-40); font-family: var(--font-mono); }
.queue-item__tag--format { background: rgba(255,255,255,0.05); color: var(--text-80); }
.queue-item__tag--format-stem { background: rgba(255,255,255,0.04); color: var(--text-60); }
.queue-item__tag--format-midi { background: rgba(255,255,255,0.03); color: var(--text-60); }

.queue-item__duration {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-20);
    flex-shrink: 0;
}
.queue-item__remove {
    position: absolute !important;
    left: 24px !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 2 !important;
    opacity: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.queue-item:hover .queue-item__remove { opacity: 1 !important; }
.queue-item__remove:hover { color: var(--primary); background: rgba(197,3,43,0.08); }
.queue-item__remove svg {
    width: 13px; height: 13px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* ── Empty queue ── */

.queue-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 24px;
    gap: 12px;
    width: 100%;
}
.queue-panel__empty-icon { color: var(--text-20); }
.queue-panel__empty-icon svg {
    width: 44px; height: 44px; fill: none; stroke: currentColor;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.queue-panel__empty-text { font-size: 14px; font-weight: 600; color: var(--text-40); }
.queue-panel__empty-hint { font-size: 12px; color: var(--text-20); }
/* ═══════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════ */

.queue-toast {
    position: fixed;
    bottom: calc(var(--player-h) + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--shadow-md);
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.queue-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.queue-toast__icon {
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.queue-toast__icon svg {
    width: 14px; height: 14px; fill: none; stroke: var(--green);
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .player-inner {
        grid-template-columns: minmax(120px, 180px) 1fr auto;
        gap: 12px; padding: 0 16px;
    }
    .player-time { display: none; }
    .player-volume__slider { display: none; }

    /* Queue panel: stack NP zone above list */
    .queue-panel__body { flex-direction: column; }
    .queue-np {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 16px 24px;
        flex-direction: row;
        align-items: center;
    }
    .queue-np__label { display: none; }
    .queue-np__art { width: 52px; height: 52px; }
    .queue-np__title { font-size: 13px; }
    .queue-np__artist { font-size: 12px; margin-bottom: 4px; }
    .queue-panel { max-height: 55vh; }
    .queue-item__tags { max-width: 180px; }
}

@media (max-width: 640px) {
    .audio-player { height: 72px; }
    .player-inner {
        grid-template-columns: auto 1fr auto;
        gap: 8px; padding: 0 12px;
    }
    .player-track__art { width: 42px; height: 42px; }
    .player-track__info { display: none; }
    .player-waveform { height: 32px; }
    .player-right { gap: 2px; }
    .player-btn--prev,
    .player-btn--next { display: none; }
    .player-btn--vol { display: none; }
    .player-volume__slider { display: none; }
    .player-btn--play { width: 40px; height: 40px; }
    .player-btn--play svg { width: 28px; height: 28px; }
    .player-btn--close { margin-left: 0; }

    .queue-panel {
        bottom: 72px;
        max-height: 50vh;
    }
    .queue-panel__header { padding: 14px 20px 12px; }
    .queue-np { padding: 12px 16px; gap: 12px; }
    .queue-np__art { width: 44px; height: 44px; }
    .queue-item { padding: 8px 16px; }
    .queue-item__tags { display: none; }
    .queue-item__remove { opacity: 1; }
    .queue-toast {
        bottom: calc(72px + 12px);
        font-size: 12px; padding: 8px 18px;
    }
}

@media (max-width: 380px) {
    .player-track { gap: 10px; }
    .player-track__art { width: 36px; height: 36px; border-radius: 6px; }
}
/* ═══════════════════════════════════════════════════════════════
   SOURCE: toast.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   WMDM Cubase Theme — Toast Notifications
   Add-to-cart confirmation, stacked with auto-dismiss progress bar
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.toast-container {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 400px;
    width: calc(100vw - 40px);
}

/* ── Toast card ── */
.toast {
    pointer-events: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.2);
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%) scale(0.95);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
    position: relative;
}
.toast.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.toast.is-leaving {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
    transition-duration: 0.3s;
}

/* Success accent line */
.toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    z-index: 2;
}

/* ── Header ── */
.toast__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 0;
}
.toast__check {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
}
.toast__check svg {
    width: 12px; height: 12px; stroke: var(--primary); fill: none; stroke-width: 2.5;
}
.toast__label {
    font-size: 12px; font-weight: 600; color: var(--primary);
    letter-spacing: 0.02em;
}
.toast__close {
    margin-left: auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; color: var(--text-40);
    transition: color 0.15s, background-color 0.15s;
}
.toast__close:hover { background: rgba(255,255,255,0.06); color: var(--text-60); }
.toast__close svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
}

/* ── Body ── */
.toast__body {
    display: flex;
    gap: 12px;
    padding: 10px 14px 12px;
}
.toast__thumb {
    width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
}
.toast__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.toast__info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
}
.toast__title {
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.toast__seller {
    font-size: 11px; color: var(--text-40); margin-top: 1px;
}
.toast__meta {
    display: flex; align-items: center; gap: 6px; margin-top: 4px;
    flex-wrap: wrap;
}
.toast__license {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 100px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
    text-transform: uppercase;
}
.toast__license--basic {
    background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary);
}
.toast__license--premium {
    background: color-mix(in srgb, var(--primary) 15%, transparent); color: color-mix(in srgb, var(--primary), white 15%);
}
.toast__license--platinum {
    background: color-mix(in srgb, var(--primary) 20%, transparent); color: color-mix(in srgb, var(--primary), white 30%);
}
.toast__price {
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-left: auto;
}

/* ── Footer ── */
.toast__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 12px;
}
.toast__view-cart {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 34px; padding: 0 16px;
    background: var(--primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 12px; font-weight: 600; color: #fff;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.toast__view-cart:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(197,3,43,0.3);
}
.toast__view-cart svg {
    width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
}
.toast__continue {
    font-size: 12px; font-weight: 500; color: var(--text-40);
    padding: 8px 12px; border-radius: var(--radius-sm);
    transition: color 0.15s, background-color 0.15s;
    white-space: nowrap;
}
.toast__continue:hover { color: var(--text-60); background: rgba(255,255,255,0.04); }

/* ── Cart summary line ── */
.toast__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
    background: rgba(0,0,0,0.15);
}
.toast__summary-label {
    font-size: 11px; color: var(--text-40);
}
.toast__summary-total {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 700; color: var(--text-60);
}

/* ── Auto-dismiss progress bar ── */
.toast__progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--green), var(--teal));
    border-radius: 0 0 0 var(--radius-md);
    width: 100%;
    transform-origin: left;
    z-index: 2;
}
.toast__progress.is-running {
    animation: toastProgressShrink var(--toast-duration, 5s) linear forwards;
}
.toast:hover .toast__progress.is-running {
    animation-play-state: paused;
}

@keyframes toastProgressShrink {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 16px;
        right: 12px;
        left: 12px;
        max-width: 100%;
        width: auto;
    }
}

@media (max-width: 480px) {
    .toast__footer { flex-direction: column; }
    .toast__view-cart { width: 100%; }
    .toast__continue { width: 100%; text-align: center; }
}
/* ═══════════════════════════════════════════════════════════════
   SOURCE: cookie-banner.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   Fixed overlay above the player bar — does NOT push content.
   ═══════════════════════════════════════════════════════════════════════ */

.cookie-banner {
    position: fixed;
    bottom: calc(var(--player-h, 80px) + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(26, 21, 23, 0.98);
    border: 1px solid var(--border);
    border-radius: 100px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    max-width: 640px;
    width: calc(100% - 32px);
    animation: cookieSlideUp 0.4s var(--ease-out) both;
}

@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.cookie-banner.is-leaving {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.cookie-banner__text {
    font-size: 13px;
    color: #f5f5f7;
    line-height: 1.4;
    flex: 1;
}

.cookie-banner__link {
    color: #f5f5f7;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner__link:hover {
    color: var(--primary);
}

.cookie-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-banner__btn {
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-display);
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    border: none;
}

.cookie-banner__btn--decline {
    background: transparent;
    color: rgba(245,245,247,0.4);
    border: 1px solid rgba(245,245,247,0.15);
}
.cookie-banner__btn--decline:hover {
    color: #f5f5f7;
    border-color: rgba(245,245,247,0.4);
}

.cookie-banner__btn--accept {
    background: var(--primary);
    color: #fff;
}
.cookie-banner__btn--accept:hover {
    background: var(--primary-dark);
    box-shadow: 0 2px 12px var(--primary-glow);
}
/* ── Responsive ── */

@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        border-radius: var(--radius-md);
        padding: 16px 20px;
        gap: 12px;
        text-align: center;
        bottom: calc(var(--player-h-mobile, 64px) + 12px);
    }
    .cookie-banner__actions {
        width: 100%;
        justify-content: center;
    }
}
/* ═══════════════════════════════════════════════════════════════
   SOURCE: components/skeletons.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SKELETON COMPONENTS
   Shimmer placeholder system for async content loading states.

   Dependencies (must be defined in the main theme):
     --bg-card, --border-light, --radius, --radius-md, --radius-sm,
     --border, --ease-out

   Skeleton-specific tokens (defined here, override per-theme if needed):
     --sk-base:  #1e1a1c
     --sk-shine: #2a2527
     --sk-speed: 1.6s
   ═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────
   SKELETON TOKENS
   ─────────────────────────────────────────────────────────────────────── */

:root {
    --sk-base:  #1e1a1c;
    --sk-shine: #2a2527;
    --sk-speed: 1.6s;
}
/* ───────────────────────────────────────────────────────────────────────
   SK BASE — THE SHIMMER
   ─────────────────────────────────────────────────────────────────────── */

.sk {
    background: var(--sk-base);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.sk::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--sk-shine) 40%,
        var(--sk-shine) 60%,
        transparent 100%
    );
    animation: shimmer var(--sk-speed) ease-in-out infinite;
    transform: translateX(-100%);
}
/* ───────────────────────────────────────────────────────────────────────
   SK SHAPE VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.sk--circle { border-radius: 50%; }
.sk--pill    { border-radius: 100px; }
.sk--card    { border-radius: var(--radius-md); }
.sk--round   { border-radius: var(--radius); }
/* ───────────────────────────────────────────────────────────────────────
   SK STAGGER DELAYS — natural cascading feel
   ─────────────────────────────────────────────────────────────────────── */

.sk-delay-1         { --sk-speed: 1.6s; }
.sk-delay-1::after  { animation-delay: 0.1s; }
.sk-delay-2::after  { animation-delay: 0.2s; }
.sk-delay-3::after  { animation-delay: 0.3s; }
.sk-delay-4::after  { animation-delay: 0.4s; }
.sk-delay-5::after  { animation-delay: 0.5s; }
/* ───────────────────────────────────────────────────────────────────────
   SK ACCENT VARIANT — red-tinted skeleton for CTA/accent elements
   ─────────────────────────────────────────────────────────────────────── */

.sk--accent {
    background: rgba(197, 3, 43, 0.08);
}
.sk--accent::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(197, 3, 43, 0.06) 40%,
        rgba(197, 3, 43, 0.06) 60%,
        transparent 100%
    );
}
/* ═══════════════════════════════════════════════════════════════════════
   1. PRODUCT CARD GRID SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.sk-product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sk-product-card__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0;
}
.sk-product-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sk-product-card__title  { height: 16px; width: 80%; }
.sk-product-card__seller { height: 12px; width: 50%; }
.sk-product-card__meta {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sk-product-card__tag  { height: 22px; width: 60px; border-radius: 100px; }
.sk-product-card__tag2 { height: 22px; width: 45px; border-radius: 100px; }
.sk-product-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    margin-top: 2px;
}
.sk-product-card__price { height: 20px; width: 55px; }
.sk-product-card__btn   { height: 32px; width: 90px; border-radius: 100px; }
/* ═══════════════════════════════════════════════════════════════════════
   2. TOOLBAR SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.sk-toolbar__play    { width: 100px; height: 34px; border-radius: 100px; }
.sk-toolbar__count   { width: 120px; height: 14px; }
.sk-toolbar__divider { width: 1px; height: 24px; background: var(--border-light); flex-shrink: 0; }
.sk-toolbar__filters { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.sk-toolbar__filter  { height: 34px; border-radius: var(--radius-sm); }
.sk-toolbar__f1      { width: 72px; }
.sk-toolbar__f2      { width: 80px; }
.sk-toolbar__f3      { width: 76px; }
.sk-toolbar__f4      { width: 66px; }
.sk-toolbar__f5      { width: 100px; }
/* ═══════════════════════════════════════════════════════════════════════
   3. PRODUCT LIST ROW SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-list-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sk-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}
.sk-list-row:last-child { border-bottom: none; }

.sk-list-row__num    { width: 20px;  height: 12px; flex-shrink: 0; }
.sk-list-row__thumb  { width: 48px;  height: 48px; border-radius: 6px; flex-shrink: 0; }
.sk-list-row__info   { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-list-row__title  { height: 14px; width: 65%; }
.sk-list-row__seller { height: 11px; width: 35%; }
.sk-list-row__tags   { display: flex; gap: 6px; }
.sk-list-row__tag    { height: 20px; width: 50px; border-radius: 100px; }
.sk-list-row__dur    { width: 40px;  height: 12px; flex-shrink: 0; }
.sk-list-row__price  { width: 50px;  height: 16px; flex-shrink: 0; }
.sk-list-row__btn    { width: 34px;  height: 34px; border-radius: 50%; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   4. AUDIO PLAYER BAR SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-player {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.sk-player__btn      { width: 40px;  height: 40px; border-radius: 50%; flex-shrink: 0; }
.sk-player__track    { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-player__title    { height: 14px; width: 40%; }
.sk-player__waveform { height: 28px; width: 100%; border-radius: 4px; }
.sk-player__time     { width: 70px;  height: 12px; flex-shrink: 0; }
.sk-player__vol      { width: 60px;  height: 4px;  border-radius: 2px; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   5. CREATOR / SELLER PROFILE HEADER SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-profile {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.sk-profile__top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.sk-profile__avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; }
.sk-profile__info   { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-profile__name   { height: 20px; width: 180px; }
.sk-profile__handle { height: 13px; width: 120px; }
.sk-profile__bio    { height: 12px; width: 70%; }
.sk-profile__btn    { width: 110px; height: 36px; border-radius: 100px; flex-shrink: 0; }

.sk-profile__stats {
    display: flex;
    gap: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}
.sk-profile__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.sk-profile__stat-val   { width: 40px; height: 18px; }
.sk-profile__stat-label { width: 60px; height: 10px; }
/* ═══════════════════════════════════════════════════════════════════════
   6. ORDER / DOWNLOAD ITEM SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-order-items {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sk-order-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}
.sk-order-header__id     { width: 140px; height: 14px; }
.sk-order-header__date   { width: 90px;  height: 12px; }
.sk-order-header__spacer { flex: 1; }
.sk-order-header__badge  { width: 80px;  height: 22px; border-radius: 100px; }

.sk-order-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
}
.sk-order-row:last-child { border-bottom: none; }
.sk-order-row__thumb { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; }
.sk-order-row__info  { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-order-row__name  { height: 14px; width: 60%; }
.sk-order-row__sub   { height: 11px; width: 35%; }
.sk-order-row__price { width: 50px; height: 16px; flex-shrink: 0; }
.sk-order-row__dl    { width: 90px; height: 30px; border-radius: 100px; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════════
   7. SIDEBAR + CONTENT LAYOUT SKELETON (Account pages)
   ═══════════════════════════════════════════════════════════════════════ */

.sk-account-layout {
    display: flex;
    gap: 24px;
}

.sk-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: fit-content;
}
.sk-sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}
.sk-sidebar__avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-sidebar__uinfo  { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sk-sidebar__uname  { height: 13px; width: 90px; }
.sk-sidebar__uemail { height: 10px; width: 120px; }

.sk-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
}
.sk-sidebar__link-icon { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.sk-sidebar__link-text { height: 12px; flex: 1; }

.sk-sidebar__link--active {
    background: rgba(197, 3, 43, 0.04);
    border-left: 3px solid rgba(197, 3, 43, 0.15);
}
.sk-sidebar__link--active .sk-sidebar__link-icon { background: rgba(197, 3, 43, 0.10); }
.sk-sidebar__link--active .sk-sidebar__link-text { background: rgba(197, 3, 43, 0.08); }

.sk-main-content { flex: 1; min-width: 0; }
.sk-main-content__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sk-main-content__icon   { width: 36px;  height: 36px; border-radius: 10px; flex-shrink: 0; }
.sk-main-content__titles { display: flex; flex-direction: column; gap: 6px; }
.sk-main-content__h      { height: 20px; width: 160px; }
.sk-main-content__sub    { height: 12px; width: 100px; }
/* ═══════════════════════════════════════════════════════════════════════
   8. HERO / BANNER SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.sk-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.sk-hero__badge  { width: 120px;  height: 24px; border-radius: 100px; }
.sk-hero__title  { height: 32px;  width: 60%; max-width: 400px; border-radius: 8px; }
.sk-hero__desc   { height: 14px;  width: 80%; max-width: 500px; }
.sk-hero__desc2  { height: 14px;  width: 55%; max-width: 350px; }
.sk-hero__cta    { width: 160px;  height: 44px; border-radius: 100px; margin-top: 8px; }

/* Decorative rings — structural only, no shimmer */
.sk-hero__ring {
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    opacity: 0.3;
}
.sk-hero__ring2 {
    position: absolute;
    top: -20px; right: -20px;
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    opacity: 0.15;
}
/* ═══════════════════════════════════════════════════════════════════════
   LOADED STATE — shimmer off, static placeholder shapes remain
   Toggle body.is-loaded to freeze skeletons when real content arrives.
   ═══════════════════════════════════════════════════════════════════════ */

body.is-loaded .sk::after {
    animation: none;
    opacity: 0;
}
body.is-loaded .sk {
    transition: opacity 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}

/* Card-specific loaded overrides */
body.is-loaded .sk-product-card__thumb  { background: linear-gradient(135deg, #2a1f22 0%, #1e1518 50%, #251d20 100%); }
body.is-loaded .sk-product-card__title  { background: var(--border); width: 80%; }
body.is-loaded .sk-product-card__seller { background: var(--border-light); }
body.is-loaded .sk-product-card__tag    { background: rgba(197, 3, 43, 0.10); }
body.is-loaded .sk-product-card__tag2   { background: rgba(108, 142, 239, 0.10); }
body.is-loaded .sk-product-card__price  { background: var(--border); }
body.is-loaded .sk-product-card__btn    { background: rgba(197, 3, 43, 0.15); }

body.is-loaded .sk-list-row__thumb { background: linear-gradient(135deg, #2a1f22, #1e1518); }
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .sk-account-layout     { flex-direction: column; }
    .sk-sidebar            { width: 100%; flex-direction: row; padding: 12px; overflow-x: auto; gap: 4px; }
    .sk-sidebar__user      { display: none; }
    .sk-sidebar__link      { padding: 8px 14px; flex-shrink: 0; }
    .sk-sidebar__link-text { width: 60px; }
    .sk-profile__stats     { gap: 20px; flex-wrap: wrap; }
}

@media (max-width: 768px) {
    .sk-product-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sk-profile__top  { flex-direction: column; align-items: flex-start; }
    .sk-profile__btn  { align-self: flex-start; }
    .sk-hero          { padding: 32px 24px; }
    .sk-player        { flex-wrap: wrap; }
    .sk-player__vol   { display: none; }
    .sk-list-row__tags { display: none; }
    .sk-list-row__dur  { display: none; }
}

@media (max-width: 480px) {
    .sk-product-grid       { grid-template-columns: 1fr 1fr; gap: 8px; }
    .sk-toolbar__filters   { gap: 4px; }
    .sk-toolbar__filter    { height: 30px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: components/empty-states.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY / ZERO RESULTS STATES
   CSS-only animated illustrations for each empty scenario
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE — SHARED
   ═══════════════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 60px 32px 48px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}

/* Subtle radial gradient backdrop */
.empty-state::before {
    content: ''; position: absolute;
    top: -60px; left: 50%; transform: translateX(-50%);
    width: 500px; height: 300px;
    background: radial-gradient(ellipse, rgba(197,3,43,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.empty-state__visual {
    position: relative;
    width: 200px; height: 140px;
    margin-bottom: 28px;
    display: flex; align-items: center; justify-content: center;
}

.empty-state__heading {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    color: var(--text);
}

.empty-state__sub {
    font-size: 14px; color: var(--text-40);
    max-width: 400px; line-height: 1.6;
    margin-bottom: 6px;
}

.empty-state__query {
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 600;
    color: var(--primary);
    background: rgba(197,3,43,0.06);
    border: 1px solid rgba(197,3,43,0.12);
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
    display: inline-block;
}

/* Active filter pills shown in filter state */
.empty-state__pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
    margin-bottom: 20px;
}
.empty-state__pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    background: rgba(197,3,43,0.06);
    border: 1px solid rgba(197,3,43,0.12);
    border-radius: 100px;
    font-size: 12px; font-weight: 500;
    color: var(--text);
}
.empty-state__pill svg {
    width: 10px; height: 10px; stroke: var(--text-20);
    fill: none; stroke-width: 2;
}

/* Action buttons */
.empty-state__actions {
    display: flex; gap: 10px;
    margin-top: 24px; margin-bottom: 32px;
}
.es-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 26px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-weight: 600; font-size: 14px;
    border-radius: 100px;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
}
.es-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(197,3,43,0.3);
}
.es-btn-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.es-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 26px;
    border: 1px solid var(--border);
    color: var(--text); font-weight: 600; font-size: 14px;
    border-radius: 100px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.es-btn-ghost:hover {
    border-color: var(--text-40); color: var(--text);
}
.es-btn-ghost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Suggestions */
.empty-state__suggestions {
    width: 100%;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}
.empty-state__suggestions-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--text-20);
    margin-bottom: 12px;
}
.empty-state__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
}
.es-chip {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    color: var(--text);
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.es-chip:hover {
    border-color: var(--border); color: var(--text);
    background: rgba(255,255,255,0.05);
}
.es-chip--hot {
    border-color: rgba(197,3,43,0.2);
    background: rgba(197,3,43,0.04);
}
.es-chip--hot:hover {
    border-color: rgba(197,3,43,0.35);
    background: rgba(197,3,43,0.08);
    color: var(--text);
}
/* ═══════════════════════════════════════════════════════════════════════
   VISUAL: SEARCH — FLATLINED WAVEFORM
   Equalizer bars that animate down to a flat line
   ═══════════════════════════════════════════════════════════════════════ */

.vis-waveform {
    display: flex; align-items: flex-end; gap: 3px;
    height: 100px; padding: 0 10px;
}
.vis-waveform__bar {
    width: 4px;
    border-radius: 2px;
    background: var(--text-20);
    animation: waveformFlatline 3s ease-in-out infinite;
    transform-origin: bottom;
}
/* Animate from tall to flat */
@keyframes waveformFlatline {
    0%, 100% { opacity: 0.2; }
    15% { opacity: 1; }
    50% { opacity: 0.15; }
}

/* Generate varied bars */
.vis-waveform__bar:nth-child(1)  { height: 12px; animation-delay: 0s; background: var(--primary); opacity: 0.3; }
.vis-waveform__bar:nth-child(2)  { height: 28px; animation-delay: 0.08s; }
.vis-waveform__bar:nth-child(3)  { height: 55px; animation-delay: 0.16s; background: var(--primary); opacity: 0.5; }
.vis-waveform__bar:nth-child(4)  { height: 72px; animation-delay: 0.24s; }
.vis-waveform__bar:nth-child(5)  { height: 90px; animation-delay: 0.32s; background: var(--primary); opacity: 0.7; }
.vis-waveform__bar:nth-child(6)  { height: 100px; animation-delay: 0.4s; }
.vis-waveform__bar:nth-child(7)  { height: 85px; animation-delay: 0.48s; background: var(--primary); opacity: 0.6; }
.vis-waveform__bar:nth-child(8)  { height: 65px; animation-delay: 0.56s; }
.vis-waveform__bar:nth-child(9)  { height: 78px; animation-delay: 0.64s; }
.vis-waveform__bar:nth-child(10) { height: 95px; animation-delay: 0.72s; background: var(--primary); opacity: 0.8; }
.vis-waveform__bar:nth-child(11) { height: 70px; animation-delay: 0.8s; }
.vis-waveform__bar:nth-child(12) { height: 50px; animation-delay: 0.88s; background: var(--primary); opacity: 0.4; }
.vis-waveform__bar:nth-child(13) { height: 80px; animation-delay: 0.96s; }
.vis-waveform__bar:nth-child(14) { height: 60px; animation-delay: 1.04s; }
.vis-waveform__bar:nth-child(15) { height: 88px; animation-delay: 1.12s; background: var(--primary); opacity: 0.65; }
.vis-waveform__bar:nth-child(16) { height: 45px; animation-delay: 1.2s; }
.vis-waveform__bar:nth-child(17) { height: 70px; animation-delay: 1.28s; }
.vis-waveform__bar:nth-child(18) { height: 92px; animation-delay: 1.36s; background: var(--primary); opacity: 0.75; }
.vis-waveform__bar:nth-child(19) { height: 55px; animation-delay: 1.44s; }
.vis-waveform__bar:nth-child(20) { height: 35px; animation-delay: 1.52s; }
.vis-waveform__bar:nth-child(21) { height: 68px; animation-delay: 1.6s; background: var(--primary); opacity: 0.5; }
.vis-waveform__bar:nth-child(22) { height: 82px; animation-delay: 1.68s; }
.vis-waveform__bar:nth-child(23) { height: 48px; animation-delay: 1.76s; }
.vis-waveform__bar:nth-child(24) { height: 25px; animation-delay: 1.84s; }
.vis-waveform__bar:nth-child(25) { height: 15px; animation-delay: 1.92s; background: var(--primary); opacity: 0.3; }

/* Muted speaker icon overlaid */
.vis-waveform__mute {
    position: absolute;
    bottom: -4px; right: 10px;
    width: 32px; height: 32px;
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: mutePulse 2s ease-in-out infinite;
}
.vis-waveform__mute svg {
    width: 16px; height: 16px;
    stroke: var(--primary); fill: none; stroke-width: 2;
}
@keyframes mutePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
/* ═══════════════════════════════════════════════════════════════════════
   VISUAL: FILTER — NON-OVERLAPPING VENN CIRCLES
   Three circles that drift apart, showing "no intersection"
   ═══════════════════════════════════════════════════════════════════════ */

.vis-venn {
    position: relative;
    width: 200px; height: 120px;
}
.vis-venn__circle {
    position: absolute;
    width: 80px; height: 80px;
    border-radius: 50%;
    border: 2px solid;
    opacity: 0.6;
}
.vis-venn__circle:nth-child(1) {
    border-color: var(--primary);
    background: rgba(197,3,43,0.06);
    top: 10px; left: 20px;
    animation: vennDrift1 4s ease-in-out infinite;
}
.vis-venn__circle:nth-child(2) {
    border-color: var(--blue);
    background: rgba(108,142,239,0.06);
    top: 10px; right: 20px;
    animation: vennDrift2 4s ease-in-out infinite;
}
.vis-venn__circle:nth-child(3) {
    border-color: var(--purple);
    background: rgba(180,92,230,0.06);
    bottom: 0; left: 50%; transform: translateX(-50%);
    animation: vennDrift3 4s ease-in-out infinite;
}
/* Labels inside circles */
.vis-venn__label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-20);
}

@keyframes vennDrift1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-8px, -6px); }
}
@keyframes vennDrift2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -6px); }
}
@keyframes vennDrift3 {
    0%, 100% { transform: translateX(-50%) translate(0, 0); }
    50% { transform: translateX(-50%) translate(0, 10px); }
}

/* Dashed line through center = "no match" */
.vis-venn__slash {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--text-20) 0, var(--text-20) 4px, transparent 4px, transparent 8px);
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0.5;
}
/* ═══════════════════════════════════════════════════════════════════════
   VISUAL: WISHLIST — DISSOLVING HEART
   Heart shape made of particles that float away
   ═══════════════════════════════════════════════════════════════════════ */

.vis-heart {
    position: relative;
    width: 120px; height: 110px;
}
/* CSS heart shape using pseudo-elements */
.vis-heart__shape {
    position: absolute;
    top: 28px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 50px; height: 50px;
    background: rgba(255,92,170,0.12);
    border: 2px solid rgba(255,92,170,0.25);
    animation: heartBeat 2.5s ease-in-out infinite;
}
.vis-heart__shape::before,
.vis-heart__shape::after {
    content: ''; position: absolute;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255,92,170,0.12);
    border: 2px solid rgba(255,92,170,0.25);
}
.vis-heart__shape::before { top: -27px; left: 0; }
.vis-heart__shape::after { left: 27px; top: 0; }

@keyframes heartBeat {
    0%, 100% { transform: translateX(-50%) rotate(45deg) scale(1); opacity: 0.6; }
    15% { transform: translateX(-50%) rotate(45deg) scale(1.08); opacity: 0.8; }
    30% { transform: translateX(-50%) rotate(45deg) scale(1); opacity: 0.6; }
    45% { transform: translateX(-50%) rotate(45deg) scale(1.05); opacity: 0.7; }
    60% { transform: translateX(-50%) rotate(45deg) scale(1); opacity: 0.6; }
}

/* Floating particles around heart */
.vis-heart__particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--pink);
    opacity: 0;
    animation: heartParticle 3s ease-out infinite;
}
.vis-heart__particle:nth-child(2) { top: 20px; left: 30px; animation-delay: 0s; }
.vis-heart__particle:nth-child(3) { top: 15px; left: 60px; animation-delay: 0.4s; }
.vis-heart__particle:nth-child(4) { top: 30px; right: 20px; animation-delay: 0.8s; width: 3px; height: 3px; }
.vis-heart__particle:nth-child(5) { top: 50px; left: 15px; animation-delay: 1.2s; width: 3px; height: 3px; }
.vis-heart__particle:nth-child(6) { top: 60px; right: 25px; animation-delay: 1.6s; }
.vis-heart__particle:nth-child(7) { bottom: 10px; left: 45px; animation-delay: 2s; width: 3px; height: 3px; }

@keyframes heartParticle {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    20% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(var(--dx, 15px), var(--dy, -30px)) scale(0); }
}
.vis-heart__particle:nth-child(2) { --dx: -20px; --dy: -25px; }
.vis-heart__particle:nth-child(3) { --dx: 15px; --dy: -30px; }
.vis-heart__particle:nth-child(4) { --dx: 25px; --dy: -15px; }
.vis-heart__particle:nth-child(5) { --dx: -25px; --dy: 10px; }
.vis-heart__particle:nth-child(6) { --dx: 20px; --dy: 15px; }
.vis-heart__particle:nth-child(7) { --dx: -10px; --dy: 20px; }
/* ═══════════════════════════════════════════════════════════════════════
   VISUAL: CART — EMPTY VINYL TURNTABLE
   Spinning record with no grooves — just the label
   ═══════════════════════════════════════════════════════════════════════ */

.vis-vinyl {
    position: relative;
    width: 120px; height: 120px;
}
.vis-vinyl__disc {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background:
        radial-gradient(circle at center, var(--bg-elevated) 18px, transparent 18px),
        radial-gradient(circle at center, var(--border-light) 19px, transparent 19px),
        radial-gradient(circle at center, var(--text-20) 3px, transparent 3px),
        repeating-radial-gradient(circle at center, transparent 24px, rgba(255,255,255,0.02) 25px, transparent 26px);
    animation: vinylSpin 8s linear infinite;
    opacity: 0.4;
}

/* Red label in center */
.vis-vinyl__label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-dark) 0%, var(--primary) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    animation: vinylSpin 8s linear infinite;
    opacity: 0.5;
}
.vis-vinyl__label::after {
    content: ''; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
}

/* Tonearm */
.vis-vinyl__arm {
    position: absolute;
    top: -5px; right: -8px;
    width: 3px; height: 55px;
    background: var(--border);
    border-radius: 2px;
    transform-origin: top right;
    transform: rotate(-30deg);
    opacity: 0.4;
}
.vis-vinyl__arm::after {
    content: ''; position: absolute;
    bottom: -2px; left: -2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-20);
}

@keyframes vinylSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.vis-vinyl__disc { animation-name: vinylSpinDisc; }
@keyframes vinylSpinDisc { to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════════════════════════════════
   VISUAL: DOWNLOADS — BROKEN CLOUD ARROW
   Cloud outline with a disconnected download arrow
   ═══════════════════════════════════════════════════════════════════════ */

.vis-cloud {
    position: relative;
    width: 140px; height: 100px;
}
/* Cloud shape via stacked circles */
.vis-cloud__body {
    position: absolute;
    bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 40px;
    border: 2px solid var(--border);
    border-radius: 0 0 20px 20px;
    border-top: none;
    opacity: 0.4;
}
.vis-cloud__body::before {
    content: ''; position: absolute;
    bottom: 100%; left: 12px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-bottom: none;
    clip-path: inset(0 0 50% 0);
    opacity: 1;
}
.vis-cloud__body::after {
    content: ''; position: absolute;
    bottom: 100%; right: 8px;
    width: 55px; height: 55px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-bottom: none;
    clip-path: inset(0 0 50% 0);
    opacity: 1;
}

/* Arrow pointing down with a gap in the middle */
.vis-cloud__arrow-top {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 3px; height: 18px;
    background: var(--teal);
    border-radius: 2px;
    opacity: 0.5;
    animation: arrowBounce 2s ease-in-out infinite;
}
.vis-cloud__arrow-btm {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 10px;
    background: var(--teal);
    border-radius: 2px;
    opacity: 0.3;
}
.vis-cloud__arrow-btm::after {
    content: ''; position: absolute;
    bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    border-bottom: 3px solid var(--teal);
    border-right: 3px solid var(--teal);
    opacity: 0.3;
}

/* Gap indicator — dashed line */
.vis-cloud__gap {
    position: absolute;
    top: 58%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--text-20) 0, var(--text-20) 2px, transparent 2px, transparent 5px);
    opacity: 0.5;
}

@keyframes arrowBounce {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) translateY(3px); opacity: 0.3; }
}
/* ═══════════════════════════════════════════════════════════════════════
   COMPACT EMPTY STATES (for inline cards)
   ═══════════════════════════════════════════════════════════════════════ */

.compact-states-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.empty-state--compact {
    padding: 40px 24px 32px;
}
.empty-state--compact .empty-state__visual {
    width: 120px; height: 90px;
    margin-bottom: 20px;
}
.empty-state--compact .empty-state__heading {
    font-size: 17px;
    margin-bottom: 6px;
}
.empty-state--compact .empty-state__sub {
    font-size: 13px;
    margin-bottom: 0;
}
.empty-state--compact .empty-state__actions {
    margin-top: 20px; margin-bottom: 0;
}
.empty-state--compact .es-btn-primary,
.empty-state--compact .es-btn-ghost {
    padding: 9px 20px; font-size: 13px;
}
.empty-state--compact .empty-state__suggestions { display: none; }

/* Scale visuals in compact */
.empty-state--compact .vis-heart { transform: scale(0.75); }
.empty-state--compact .vis-vinyl { transform: scale(0.7); }
.empty-state--compact .vis-cloud { transform: scale(0.8); }
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .compact-states-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .empty-state { padding: 40px 20px 36px; }
    .empty-state__heading { font-size: 19px; }
    .empty-state__actions { flex-direction: column; width: 100%; }
    .es-btn-primary, .es-btn-ghost { justify-content: center; }

    .vis-waveform { gap: 2px; }
    .vis-waveform__bar { width: 3px; }
}

@media (max-width: 480px) {
    .empty-state__chips { gap: 4px; }
    .es-chip { padding: 5px 12px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small Tablet (max-width: 900px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .columns { flex-direction: column; }
    .column.left { width: 100%; order: 2; }

    /* List view: smaller image, controls wrap */
    .wmdm-product-list[data-view="list"] .wmdm-card-image { width: 140px; }
    .wmdm-card-body { flex-wrap: wrap; padding: 14px 16px; }
    .wmdm-card-controls { width: 100%; flex-wrap: wrap; }
    .wmdm-license-cards { flex-wrap: wrap; }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Hide view switcher on mobile — regular (list) view only */
    .wmdm-views { display: none !important; }
    .wmdm-toolbar > .wmdm-divider { display: none; }
    /* List view: stack card vertically */
    .wmdm-product-list[data-view="list"] .wmdm-product-card { flex-direction: column; }
    .wmdm-product-list[data-view="list"] .wmdm-card-image { width: 100%; height: 220px; }
    .wmdm-product-list[data-view="list"] .wmdm-card-image img { width: 100%; height: 100%; object-fit: cover; }

    .wmdm-card-body { flex-direction: column; align-items: stretch; padding: 16px; overflow: hidden; }
    .wmdm-card-info { margin-bottom: 12px; }
    .wmdm-card-title { font-size: 16px; }

    /* Controls: break out of cluster, stack vertically */
    .wmdm-product-list[data-view="list"] .wmdm-card-controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .wmdm-product-list[data-view="list"] .wmdm-card-actions {
        width: 100%;
        border-right: none;
        padding-right: 0;
        gap: 8px;
    }
    .wmdm-product-list[data-view="list"] .wmdm-card-actions .wmdm-card-btn {
        flex: 1;
        width: auto;
        height: 44px;
        border-radius: var(--radius-sm);
    }
    .wmdm-product-list[data-view="list"] .wmdm-license-section {
        padding: 0;
        width: 100%;
    }
    .wmdm-product-list[data-view="list"] .wmdm-license-section::after { display: none; }
    .wmdm-license-cards { width: 100%; }
    .wmdm-license-card { flex: 1; }
    .wmdm-product-list[data-view="list"] .wmdm-card-cart {
        padding-left: 0;
        width: 100%;
    }
    .wmdm-cart-form { width: 100%; display: flex; }
    .wmdm-card-cart-btn { width: 100%; justify-content: center; }

    /* Micro view: tighter spacing */
    .wmdm-product-list[data-view="micro"] .wmdm-product-card { padding: 8px 12px; }

    /* Sidebar: full width on mobile */
    .column.left { padding: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small Mobile (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Toolbar compact */

    /* Cards: smaller meta, compact license cards */
    .wmdm-card-meta { gap: 4px; max-height: 28px; }
    /* Meta tag responsive inherited from cubase-theme.css */
    .wmdm-license-cards { gap: 4px; }
    .wmdm-license-card__content { padding: 6px 10px; min-width: 70px; }
    .wmdm-license-card__name { font-size: 9px; }
    .wmdm-license-card__price { font-size: 12px; }
    .wmdm-card-btn { width: 40px; height: 40px; }
    .wmdm-card-cart-btn { height: 40px; font-size: 13px; }

    /* List image shorter on small screens */
    .wmdm-product-list[data-view="list"] .wmdm-card-image { height: 180px; }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Extra Small (max-width: 360px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
    .wmdm-card-title { font-size: 14px; }
    .wmdm-card-seller { font-size: 11px; }
    .wmdm-license-card__content { min-width: 60px; padding: 4px 8px; }
    .wmdm-card-cart-btn { padding: 0 12px; font-size: 12px; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/category-page.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEADER — Breadcrumbs → Title → Description
   Shared by category (genre) and format (brand) pages
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tighter vertical rhythm: breadcrumbs → title ── */
.catalog-category-view .breadcrumbs {
    margin-bottom: 0 !important;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}
.catalog-category-view .page-main {
    padding-top: 12px !important;
}

/* ── Page title ── */
.catalog-category-view .page-title-wrapper {
    margin-bottom: 12px;
}
.catalog-category-view .page-title {
    margin-bottom: 0 !important;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATEGORY (GENRE) PAGES — Layout Fix
   On genre pages .page-main only holds the title.
   The description lives in .category-view (sibling of .page-main).
   The global player-clearance padding on page-main creates a ~132px gap.
   ═══════════════════════════════════════════════════════════════════════ */

.catalog-category-view:not(.brands-index-view) .page-main {
    padding-bottom: 0 !important;
}

/* Constrain .category-view to content width */
.category-view {
    max-width: var(--content-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--page-padding);
    box-sizing: border-box;
}

/* Reset ALL Page Builder wrappers inside category description */
.category-description div {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
    justify-content: initial !important;
    flex-direction: initial !important;
    background: none !important;
}

/* Category description typography */
.catalog-category-view .category-description {
    margin-bottom: 8px !important;
}
.category-description strong,
.category-description b {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-80);
    margin-bottom: 6px !important;
    letter-spacing: -0.01em;
}
.category-description,
.category-description p,
.category-description div,
.category-description span {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--text-60) !important;
}
.category-description > p:not(:first-child) {
    margin-top: 10px !important;
}

/* Player clearance moves to columns on genre pages */
.catalog-category-view:not(.brands-index-view) .columns {
    padding-bottom: var(--player-h);
}
/* ═══════════════════════════════════════════════════════════════════════
   FORMAT (BRAND) PAGES — Description
   On brand pages everything is inside .page-main,
   so the global player-clearance padding is fine.
   ═══════════════════════════════════════════════════════════════════════ */

.wmdm-format-description {
    margin-bottom: 8px;
}
.wmdm-format-description__content {

}
/* Reset inline Twitter/rich-text classes */
.wmdm-format-description__content div {
    margin: 0 !important;
    padding: 0 !important;
}
.wmdm-format-description__content > div:first-child {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-80);
    margin-bottom: 6px !important;
    letter-spacing: -0.01em;
}
.wmdm-format-description__content > div:first-child strong {
    font-weight: 700;
}
.wmdm-format-description__content > div:last-child {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--text-60) !important;
}
.wmdm-format-description__content > div:last-child br {
    display: none;
}
.wmdm-format-description__content span {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Sidebar Widget Adjustments
   ═══════════════════════════════════════════════════════════════════════ */

/* Small Tablet: sidebar stacks below product grid */
@media (max-width: 900px) {
    .sidebar-section { margin-bottom: 20px; }
}

/* Mobile: sidebar column flush, no padding */
@media (max-width: 768px) {
    .column.left { padding: 0; }
}

/* ── Chevron arrow ── */


.wmdm-filter.is-open .wmdm-filter__arrow {
    transform: rotate(180deg);
}
/* ── Badge (active count) ── */
/* ═══════════════════════════════════════════════════════════════════════
   DROPDOWN MENU
   ═══════════════════════════════════════════════════════════════════════ */

/* Scrollable options area inside dropdown */
.wmdm-filter__options {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.wmdm-filter__options::-webkit-scrollbar { width: 3px; }
.wmdm-filter__options::-webkit-scrollbar-track { background: transparent; }
.wmdm-filter__options::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Menus without .wmdm-filter__options wrapper (e.g. sort) scroll directly */
.wmdm-filter__menu:not(:has(.wmdm-filter__options)) {
    overflow-y: auto;
    padding: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   OPTION ITEMS (checkbox labels + single-select links)
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   APPLY BUTTON (inside multi-select dropdowns)
   ═══════════════════════════════════════════════════════════════════════ */

.wmdm-filter__apply {
    flex-shrink: 0;
    padding: 8px 12px 8px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-elevated, #252022);
}
.wmdm-filter__apply-btn {
    width: 100%;
    padding: 8px 16px;
    background: var(--primary, #C5032B);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.wmdm-filter__apply-btn:hover {
    background: var(--primary-dark, #A50224);
}
/* ═══════════════════════════════════════════════════════════════════════
   SORT DIRECTION TOGGLE
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   VIEW SWITCHER
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   CLEAR FILTERS BUTTON
   ═══════════════════════════════════════════════════════════════════════ */

/* Active Filter Pills */
.wmdm-toolbar.has-active-pills {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: 0;
}
.wmdm-active-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-top-color: var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-bottom: 20px;
}
.wmdm-active-filters__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-20, #48484a);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
}
.wmdm-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 12px;
    background: rgba(197,3,43,0.08);
    border: 1px solid rgba(197,3,43,0.15);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: #ccc;
    transition: color 0.15s, background-color 0.15s;
    animation: wmdmPillIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wmdmPillIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.wmdm-active-pill__x {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #999;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.wmdm-active-pill__x:hover { color: var(--primary, #C5032B); }
.wmdm-active-pill__x svg { width: 10px; height: 10px; }
.wmdm-active-clear-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary, #C5032B);
    margin-left: auto;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}
.wmdm-active-clear-all:hover { opacity: 0.7; }
/* ═══════════════════════════════════════════════════════════════════════
   BACKDROP (click-outside to close)
   ═══════════════════════════════════════════════════════════════════════ */

/* Magento core sets .page-products .columns { z-index:1; position:relative }
   which traps the toolbar in a z-index 1 stacking context.
   The backdrop lives on <body> at z-index 50, so it paints ABOVE the toolbar.
   Fix: raise .columns above the backdrop so the menu remains clickable. */
.page-products .columns {
    z-index: 60 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .wmdm-count { display: none; }
}

@media (max-width: 768px) {
    /* Single-line horizontal scrollable toolbar */
    .wmdm-toolbar {
    margin-bottom: 24px;
        padding: 10px 12px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .wmdm-toolbar::-webkit-scrollbar { display: none; }

    /* Hide view switcher + dividers on mobile */
    .wmdm-views { display: none !important; }
    .wmdm-toolbar > .wmdm-divider { display: none; }

    /* Keep everything on one line — compact sizing */
    .wmdm-play-all { flex-shrink: 0; padding: 6px 12px; font-size: 11px; }
    .wmdm-filters { flex: 0 0 auto; gap: 4px; flex-wrap: nowrap; }
    .wmdm-filter { flex-shrink: 0; }
    .wmdm-filter__btn { padding: 5px 8px; font-size: 11px; }
    .wmdm-sort-dir { flex-shrink: 0; width: 28px; height: 28px; }
    .wmdm-sort-dir__icon { width: 14px; height: 14px; }
    .wmdm-clear { flex-shrink: 0; width: 28px; height: 28px; }
    .wmdm-clear__icon { width: 14px; height: 14px; }

    /* Bottom sheet on mobile */
    .wmdm-filter__menu {
        position: fixed;
        top: auto !important;
        bottom: 0;
        left: 0 !important;
        right: 0;
        min-width: 100%;
        border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
        max-height: 70vh;
        transform: translateY(100%);
        padding: 0;
    }
    .wmdm-filter.is-open .wmdm-filter__menu {
        transform: translateY(0);
    }
    .wmdm-filter-backdrop.is-visible {
        background: rgba(0,0,0,0.5);
    }
    /* When filter is open, disable toolbar scroll so fixed bottom sheet escapes to viewport */
    .wmdm-toolbar:has(.wmdm-filter.is-open) { overflow: visible; }
    body.wmdm-filter-open .wmdm-toolbar {
    margin-bottom: 24px; overflow: visible;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/product-page.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   Extracted from cubase-product-page-v1.html
   Depends on: design tokens in :root (--bg, --primary, --text-*, --radius-*, etc.)
   ═══════════════════════════════════════════════════════════════════════ */
/* Override global page-main padding for product page — full width */
.wmdm-product-page .page-main {
    max-width: 100% !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT HERO — Two-Column Layout Container
   ═══════════════════════════════════════════════════════════════════════ */

.product-hero {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 0 48px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 48px;
    align-items: start;
}

/* Left Column: sticky media well */
.product-media {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT ARTWORK
   ═══════════════════════════════════════════════════════════════════════ */

.product-artwork {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-tint);
    border: 1px solid var(--border-light);
    aspect-ratio: 1;
}

.product-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Artwork hover play overlay */
.artwork-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    cursor: pointer;
}

.product-artwork:hover .artwork-play-overlay {
    opacity: 1;
}

.artwork-play-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(197, 3, 43, 0.4);
    transition: transform 0.2s var(--ease-spring);
}

.artwork-play-btn:hover {
    transform: scale(1.08);
}

.artwork-play-btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    margin-left: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════
   YOUTUBE EMBED (left-column media)
   ═══════════════════════════════════════════════════════════════════════ */

.product-youtube {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-tint);
    border: 1px solid var(--border-light);
}

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.youtube-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    transition: background-color 0.3s;
}

.youtube-placeholder:hover {
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
}

.youtube-play-icon {
    margin-bottom: 8px;
}

.youtube-play-icon svg {
    transition: transform 0.2s;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.youtube-placeholder:hover .youtube-play-icon svg {
    transform: scale(1.1);
}

.youtube-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text);
}

.youtube-play-btn {
    /* alias class used when the play icon element needs an explicit selector */
    display: contents;
}
/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT INFO — Right Column
   ═══════════════════════════════════════════════════════════════════════ */

.product-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* ── Title ── */
.product-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--text);
    margin-bottom: 10px;
}
/* ── Producer line ── */
.product-producer {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 24px;
}

.product-producer a {
    color: var(--primary);
    font-weight: 600;
    transition: color 0.2s, text-shadow 0.2s;
}

.product-producer a:hover {
    color: #fff;
    text-shadow: 0 0 12px rgba(197, 3, 43, 0.4);
}
/* ── Meta tags row ── */
.product-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}


/* Alias selector used in markup */
.product-meta-tag {
    /* same base as .wmdm-meta-tag — apply via multi-class if needed */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    border: 1px solid;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT PLAYER CONTROLS
   ═══════════════════════════════════════════════════════════════════════ */

.product-player-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-light);
}

.btn-play,
.btn-queue {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.btn-play {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 20px rgba(197, 3, 43, 0.25);
}

.btn-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(197, 3, 43, 0.35);
}

.btn-play svg,
.btn-queue svg {
    width: 18px;
    height: 18px;
}

.btn-play svg {
    fill: currentColor;
}

.btn-queue {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-queue svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.btn-queue:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: var(--border);
    transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════════════
   PLUGINS USED
   ═══════════════════════════════════════════════════════════════════════ */

.product-plugins {
    margin-bottom: 28px;
}

.plugins-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 12px;
}

.plugins-used,
.plugins-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.plugin-pill,
.plugin-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--text-20);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: background-color 0.2s, border-color 0.2s;
}

.plugin-pill svg,
.plugin-tag svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    opacity: 0.7;
}

.plugin-pill:hover,
.plugin-tag:hover {
    border-color: var(--text-40);
    color: var(--text);
    background: rgba(255,255,255,0.08);
}
/* ═══════════════════════════════════════════════════════════════════════
   LICENSE SECTION & CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.license-section {
    margin-bottom: 28px;
}

.license-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-40);
    margin-bottom: 14px;
}

.license-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.license-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px 18px;
    background: var(--bg-tint);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.license-card:hover {
    border-color: var(--border);
    background: var(--bg-hover);
    transform: translateY(-2px);
}

.license-card.is-selected,
.license-card:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: rgba(197, 3, 43, 0.06);
    box-shadow: 0 0 0 1px var(--primary), 0 4px 20px rgba(197, 3, 43, 0.12);
}

/* Hidden radio input inside card */
.license-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Selected state indicator dot */
.license-card.is-selected::after,
.license-card:has(input[type="radio"]:checked)::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(197, 3, 43, 0.5);
}

/* ── license-card sub-elements ── */

.license-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.license-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.license-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.license-card__icon svg {
    width: 18px;
    height: 18px;
}

.license-card__icon.ic-regular {
    background: rgba(108, 142, 239, 0.12);
}

.license-card__icon.ic-regular svg {
    fill: none;
    stroke: var(--blue);
    stroke-width: 2;
}

.license-card__icon.ic-commercial {
    background: rgba(180, 92, 230, 0.12);
}

.license-card__icon.ic-commercial svg {
    fill: none;
    stroke: var(--purple);
    stroke-width: 2;
}

.license-card__icon.ic-broadcast {
    background: rgba(255, 184, 0, 0.12);
}

.license-card__icon.ic-broadcast svg {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 2;
}

.license-card__icon.ic-exclusive {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.2), rgba(184, 134, 11, 0.12));
}

.license-card__icon.ic-exclusive svg {
    fill: none;
    stroke: #D4A017;
    stroke-width: 2;
}

/* Exclusive license card premium styling */
.license-card--exclusive {
    border-color: rgba(212, 160, 23, 0.3);
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.04) 0%, var(--bg-tint) 100%);
}

.license-card--exclusive:hover {
    border-color: #D4A017;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.08) 0%, var(--bg-hover) 100%);
}

.license-card--exclusive:has(input[type="radio"]:checked) {
    border-color: #D4A017;
    background: rgba(212, 160, 23, 0.08);
    box-shadow: 0 0 0 1px #D4A017, 0 4px 20px rgba(212, 160, 23, 0.2);
}

.license-card--exclusive:has(input[type="radio"]:checked)::after {
    background: #D4A017;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.5);
}

.license-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.license-card__desc {
    font-size: 11px;
    color: var(--text-40);
    margin-bottom: 8px;
}

.license-card__price {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--primary), #ff6b7f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.license-card__info {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-40);
    transition: color 0.2s, background-color 0.2s;
}

.license-card__info svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.license-card__info:hover {
    background: var(--primary);
    color: #fff;
}

.license-card__radio {
    /* visually hidden radio, positioned absolutely */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.license-card__features {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    text-align: left;
}

.license-card__feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    padding: 3px 0;
}
/* ═══════════════════════════════════════════════════════════════════════
   PURCHASE SECTION & BUTTON
   ═══════════════════════════════════════════════════════════════════════ */

.purchase-section {
    margin-bottom: 0;
}

.purchase-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    box-shadow: 0 4px 24px rgba(197, 3, 43, 0.3);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.purchase-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.purchase-btn:hover::before {
    opacity: 1;
}

.purchase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 36px rgba(197, 3, 43, 0.4);
}

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

.purchase-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Cart action label — left side, icon after text */
.btn-cart-action {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row-reverse;
    order: -1;
}

/* Price wrapper inside the purchase button — right side */
.btn-price-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
}

.btn-price {
    font-size: 18px;
    font-weight: 800;
}

.btn-price-regular {
    font-size: 14px;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 0.6;
}

.btn-price--sale {
    color: #fff;
}
/* ═══════════════════════════════════════════════════════════════════════
   DETAILS SECTION — Tabbed description / specs / session details
   ═══════════════════════════════════════════════════════════════════════ */

.product-details-section {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--page-padding) 64px;
}

/* ── Tabs navigation bar ── */
.details-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 32px;
}

.details-tab {
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-60);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.details-tab:hover {
    color: var(--text);
}

.details-tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ── Tab content panels ── */
.details-panels {
    min-height: 200px;
}

.details-panel {
    display: none;
    animation: pdpFadeIn 0.3s ease;
}

.details-panel.is-active {
    display: block;
}

/* ── Description text ── */
.description-content {

    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
}

.description-content p {
    margin-bottom: 16px;
}

.description-content strong {
    color: var(--text);
    font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════
   SPECS GRID
   ═══════════════════════════════════════════════════════════════════════ */

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 700px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
}

.spec-item:nth-child(odd) {
    border-right: 1px solid var(--border-light);
}

.spec-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-40);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono);
}
/* ═══════════════════════════════════════════════════════════════════════
   SESSION DETAILS PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.session-details-content {

}

.session-detail-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text);
}

.session-detail-line .detail-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    opacity: 0.6;
}
/* ═══════════════════════════════════════════════════════════════════════
   RELATED PRODUCTS SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.related-section {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--page-padding) 80px;
}

.related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.related-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.related-nav {
    display: flex;
    gap: 8px;
}

.related-nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    cursor: pointer;
}

.related-nav-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.related-nav-btn:hover {
    background: rgba(197, 3, 43, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

/* ── Scrollable track ── */
.related-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.related-track::-webkit-scrollbar {
    display: none;
}

/* ── Related cards ── */
.related-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    scroll-snap-align: start;
}

.related-card:hover {
    border-color: rgba(255, 50, 80, 0.6);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.related-card__image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-elevated);
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.related-card:hover .related-card__image img {
    transform: scale(1.05);
}

.related-card__play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}

.related-card:hover .related-card__play-overlay {
    opacity: 1;
}

.related-card__play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 16px rgba(197, 3, 43, 0.4);
    transition: transform 0.2s;
}

.related-card__play-btn:hover {
    transform: scale(1.1);
}

.related-card__play-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    margin-left: 2px;
}

.related-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-card__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 auto;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card__title:hover {
    color: var(--primary);
}

.related-card__producer {
    font-size: 12px;
    color: var(--text-40);
}

.related-card__producer a {
    color: var(--text);
}

.related-card__producer a:hover {
    color: var(--primary);
}

.related-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.related-card__meta .tag-mini {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-40);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.related-card__meta .tag-mini.tag-daw {
    background: rgba(197, 3, 43, 0.1);
    color: var(--primary);
}

.related-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.related-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-display);
}

.related-card__view-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(197, 3, 43, 0.08);
    transition: background-color 0.2s;
}

.related-card__view-btn:hover {
    background: rgba(197, 3, 43, 0.15);
}

.related-card__view-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes pdpFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .product-hero {
        grid-template-columns: 360px 1fr;
        gap: 32px;
    }

    .product-title {
        font-size: 28px;
    }

    .related-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small Tablet / Large Mobile (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Hero: stack to single column */
    .product-hero {
        grid-template-columns: 1fr;
        padding: 20px var(--page-padding) 40px;
        gap: 24px;
    }

    .product-media {
        position: static;
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }

    .product-artwork {
        border-radius: var(--radius-md);
    }

    /* Info column: center-align on mobile */
    .product-title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 8px;
    }

    .product-producer {
        text-align: center;
        margin-bottom: 20px;
    }

    .product-meta-tags {
        justify-content: center;
        gap: 6px;
        margin-bottom: 24px;
    }

    .wmdm-meta-tag {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* Plugins: centered wrap */
    .product-plugins {
        margin-bottom: 24px;
    }

    .plugins-title {
        text-align: center;
    }

    .plugins-used,
    .plugins-list {
        justify-content: center;
    }

    .plugin-pill,
    .plugin-tag {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* Play / Queue: full width */
    .product-player-controls {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .btn-play,
    .btn-queue {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* License cards: keep 3-col but compact */
    .license-cards {
        gap: 8px;
    }

    .license-card {
        padding: 14px 10px 14px;
    }

    .license-card__icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }

    .license-card__icon svg {
        width: 16px;
        height: 16px;
    }

    .license-card__price {
        font-size: 16px;
    }

    .license-card__desc {
        font-size: 10px;
    }

    /* Purchase button */
    .purchase-btn {
        padding: 16px 24px;
        font-size: 15px;
    }

    .btn-price {
        font-size: 16px;
    }

    /* Details section */
    .product-details-section {
        padding: 0 0 48px;
    }

    .details-tabs {
        justify-content: center;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .spec-item:nth-child(odd) {
        border-right: none;
    }

    /* Related products: 2-up */
    .related-section {
        padding: 0 var(--page-padding) 60px;
    }

    .related-card {
        flex: 0 0 calc(50% - 10px);
        min-width: 180px;
    }

    .related-card__body {
        padding: 12px;
    }

    .related-card__title {
        font-size: 13px;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Small Mobile (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Hero */
    .product-hero {
        padding: 16px var(--page-padding) 32px;
        gap: 20px;
    }

    .product-media {
        max-width: 100%;
    }

    .product-title {
        font-size: 20px;
    }

    .product-producer {
        font-size: 13px;
    }

    /* Meta tags smaller */
    .product-meta-tags {
        gap: 5px;
    }

    .wmdm-meta-tag {
        padding: 4px 8px;
        font-size: 11px;
    }

    .wmdm-meta-tag .tag-icon {
        width: 12px;
        height: 12px;
    }

    /* Plugins compact */
    .plugins-used,
    .plugins-list {
        gap: 6px;
    }

    .plugin-pill,
    .plugin-tag {
        padding: 4px 8px;
        font-size: 10px;
    }

    .plugin-pill svg,
    .plugin-tag svg {
        width: 10px;
        height: 10px;
    }

    /* Play / Queue: stack vertically */
    .product-player-controls {
        flex-direction: column;
        gap: 8px;
    }

    /* License cards: single column, horizontal layout */
    .license-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .license-card {
        flex-direction: row;
        padding: 12px 16px;
        text-align: left;
        gap: 12px;
    }

    .license-card__icon {
        margin-bottom: 0;
    }

    .license-card__name {
        font-size: 14px;
    }

    .license-card__desc {
        font-size: 11px;
        margin-bottom: 0;
    }

    .license-card__price {
        font-size: 18px;
        margin-left: auto;
    }

    .license-card.is-selected::after,
    .license-card:has(input[type="radio"]:checked)::after {
        top: 50%;
        left: auto;
        right: 12px;
        transform: translateY(-50%);
    }

    /* Purchase button compact */
    .purchase-btn {
        padding: 14px 16px;
        font-size: 14px;
        border-radius: var(--radius-sm);
    }

    .btn-price-wrapper {
        padding: 4px 12px;
    }

    .btn-price {
        font-size: 16px;
    }

    /* Details section */
    .product-details-section {
        padding: 0 var(--page-padding) 40px;
    }

    .details-tabs {
        overflow-x: auto;
    }

    .details-tab {
        padding: 12px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    .spec-item {
        padding: 12px 16px;
    }

    .spec-label {
        font-size: 12px;
    }

    .spec-value {
        font-size: 13px;
    }

    /* Related: single card scroll */
    .related-section {
        padding: 0 0 48px;
    }

    .related-title {
        font-size: 18px;
    }

    .related-card {
        flex: 0 0 calc(80% - 10px);
        min-width: 200px;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Extra Small (max-width: 360px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
    .product-title {
        font-size: 18px;
    }

    .product-producer {
        font-size: 12px;
    }

    .wmdm-meta-tag {
        font-size: 10px;
    }

    /* License cards: even more compact */
    .license-card {
        padding: 10px 12px;
    }

    .license-card__icon {
        width: 28px;
        height: 28px;
    }

    .license-card__name {
        font-size: 12px;
    }

    .license-card__price {
        font-size: 16px;
    }

    /* Purchase button: stacked layout */
    .purchase-btn {
        flex-direction: column;
        gap: 8px;
        padding: 14px;
    }

    .btn-price-wrapper {
        order: -1;
    }

    /* Related full width */
    .related-card {
        flex: 0 0 calc(90%);
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   HIDE DUPLICATE MAGENTO OPTIONS AREA
   Product hero already renders license cards + add-to-cart.
   The standard Magento .product-add-form duplicates those elements
   with identical IDs, breaking radio selection and price updates.
   ═══════════════════════════════════════════════════════════════════════ */

.wmdm-product-page .product-add-form {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/cart-page.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   CART & CHECKOUT PAGE — Extracted from cubase-cart-page-v1.html
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

/* page-main overrides consolidated in MAGENTO DEFAULT CART OVERRIDES section below */
/* ═══════════════════════════════════════════════════════════════════════
   CART PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════ */

.cart-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.cart-page-icon {
    width: 48px; height: 48px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    flex-shrink: 0;
}
.cart-page-icon::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
}
.cart-page-icon svg {
    width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2;
    position: relative; z-index: 1;
}
.cart-page-title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}
.cart-page-count {
    font-size: 15px;
    color: var(--text-40);
    font-weight: 400;
    margin-left: 4px;
}
/* ═══════════════════════════════════════════════════════════════════════
   CART LAYOUT — two columns: items left, checkout right
   ═══════════════════════════════════════════════════════════════════════ */

.cart-container {
    display: flex;
    align-items: flex-start;
    padding-bottom: 80px;
}
.cart-items-column {
    flex: 1;
    min-width: 0;
}
.cart-checkout-column {
    width: 380px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
   CART ITEM CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.wmdm-cart-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    list-style: none;
}

.wmdm-cart-item {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    max-width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
    position: relative;
}
.wmdm-cart-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--primary); opacity: 0; transition: opacity 0.3s;
}
.wmdm-cart-item:hover { border-color: var(--border); }
.wmdm-cart-item:hover::before { opacity: 1; }

/* Card image */
.wmdm-cart-image {
    width: 200px; flex-shrink: 0; overflow: hidden; position: relative;
}
.wmdm-cart-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}
.wmdm-cart-item:hover .wmdm-cart-image img { transform: scale(1.05); }

/* Card body — vertical column layout (info on top, controls pushed to bottom) */
.wmdm-cart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 24px;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Card info — takes available vertical space */
.wmdm-cart-info {
    flex: 1;
    min-width: 0;
}
.wmdm-cart-title {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
    line-height: 1.3;
}
.wmdm-cart-title a { color: var(--text); transition: color 0.2s; }
.wmdm-cart-title a:hover { color: var(--primary); }
.wmdm-cart-seller {
    font-size: 13px; margin-bottom: 10px;
}
.wmdm-cart-seller a { color: var(--text-40); transition: color 0.2s; }
.wmdm-cart-seller a:hover { color: var(--teal); }
.wmdm-cart-meta {
    display: flex; flex-wrap: wrap; gap: 6px; overflow: hidden; max-height: 35px;
}
/* Meta tag base styles inherited from cubase-theme.css */
/* Meta tag color styles inherited from cubase-theme.css */

/* Controls Cluster — pushed to bottom, inline-flex, self-aligned left */
.wmdm-cart-controls {
    margin-top: auto;
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    align-self: flex-start;
}

/* Play / Queue section — right divider */
.wmdm-cart-actions {
    display: flex;
    gap: 6px;
    padding-right: 14px;
    border-right: 1px solid var(--border);
    align-self: flex-end;
}
.wmdm-cart-btn {
    width: 44px; height: 44px; padding: 0; border: none;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
.wmdm-cart-btn svg {
    width: 18px; height: 18px;
}
.wmdm-cart-btn--play {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
.wmdm-cart-btn--play svg { fill: #fff; stroke: none; }
.wmdm-cart-btn--play:hover { transform: scale(1.06); box-shadow: 0 4px 16px rgba(197,3,43,0.3); }
.wmdm-cart-btn--queue {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--border-light);
}
.wmdm-cart-btn--queue svg { fill: none; stroke: currentColor; stroke-width: 2; }
.wmdm-cart-btn--queue:hover { transform: scale(1.06); border-color: var(--border); color: var(--text); background: rgba(255,255,255,0.08); }

/* License section — padding + right divider via pseudo-element */
.wmdm-cart-license-section {
    display: flex;
    align-items: center;
    padding: 0 14px;
    position: relative;
    flex: 1;
    min-width: 0;
}
.wmdm-cart-license-section::after {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    height: 44px; width: 1px;
    background: var(--border);
}
.wmdm-cart-license-cards {
    display: flex; gap: 6px; width: 100%;
}
.wmdm-cart-license-card {
    display: block; cursor: pointer; position: relative;
    flex: 1 1 0; min-width: 0;
}
.wmdm-cart-license-card__content {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1px;
    padding: 6px 10px; height: 44px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}
.wmdm-cart-license-card:hover .wmdm-cart-license-card__content {
    border-color: var(--border);
    background: rgba(255,255,255,0.04);
}
.wmdm-cart-license-card.is-selected .wmdm-cart-license-card__content {
    border-color: var(--primary-dark);
    background: rgba(197,3,43,0.06);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-dark) 30%, transparent);
}
.wmdm-cart-license-card__name {
    font-size: 10px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-40);
}
.wmdm-cart-license-card.is-selected .wmdm-cart-license-card__name { color: var(--text-60); }
.wmdm-cart-license-card__price {
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-60);
}
.wmdm-cart-license-card.is-selected .wmdm-cart-license-card__price { color: var(--primary); }

/* Remove button */
.wmdm-cart-remove-btn {
    height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,68,68,0.08);
    color: #ff6b6b;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,68,68,0.15);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring);
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 14px;
    align-self: flex-end;
}
.wmdm-cart-remove-btn:hover {
    background: rgba(255,68,68,0.15);
    border-color: rgba(255,68,68,0.3);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,68,68,0.15);
}
.wmdm-cart-remove-btn .trash-icon {
    width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
}
.wmdm-cart-remove-btn .price-current {
    font-size: 14px; font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT SIDEBAR
   ═══════════════════════════════════════════════════════════════════════ */

.wmdm-checkout-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Checkout header */
.checkout-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
    background: rgba(197,3,43,0.04);
}
.checkout-header svg {
    width: 18px; height: 18px;
    fill: none; stroke: var(--primary); stroke-width: 2;
    flex-shrink: 0;
}
.checkout-header__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Express checkout buttons */
.checkout-express {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}
.express-btn {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 10px;
}
.express-btn:last-child { margin-bottom: 0; }
.express-btn--stripe {
    background: #635bff;
    color: #fff;
}
.express-btn--stripe:hover { background: #5046e5; }
.express-btn--paypal {
    background: #FFC439;
    color: #003087;
}
.express-btn--paypal:hover { background: #f0b62e; }
.express-btn--apple {
    background: #fff;
    color: #000;
}
.express-btn--apple:hover { background: #f0f0f0; }
.express-btn svg { height: 20px; }

/* Or divider */
.checkout-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    margin: 0 auto;
}
.checkout-divider::before,
.checkout-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.checkout-divider span {
    font-size: 11px;
    color: var(--text-40);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    padding: 16px 0;
}

/* Card form section */
.checkout-form {
    padding: 20px 24px;
}
.checkout-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.checkout-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color 0.2s;
    margin-bottom: 16px;
}
.checkout-input:focus {
    outline: none;
    border-color: var(--primary);
}
.checkout-input::placeholder { color: var(--text-40); }

/* Stripe card element placeholder */
.stripe-element {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-40);
    font-size: 13px;
}
.stripe-element .card-icons {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.stripe-element .card-icon {
    width: 32px;
    height: 20px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-40);
}

/* Coupon section */
.checkout-coupon {
    padding: 0 24px 20px;
}
.coupon-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-40);
    cursor: pointer;
    transition: color 0.2s;
    margin-bottom: 12px;
}
.coupon-toggle:hover { color: var(--text-60); }
.coupon-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.coupon-input-row {
    display: flex;
    gap: 8px;
}
.coupon-input-row input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-mono);
    transition: border-color 0.2s;
}
.coupon-input-row input:focus { outline: none; border-color: var(--primary); }
.coupon-input-row input::placeholder { color: var(--text-40); }
.coupon-apply-btn {
    height: 40px;
    padding: 0 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.2s, border-color 0.2s;
}
.coupon-apply-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Order summary */
.checkout-summary {
    padding: 0 24px 20px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text);
}
.summary-row span:last-child {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text);
}
.summary-row.discount span:last-child {
    color: var(--green);
}
.summary-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}
.summary-row.total {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    padding: 12px 0 4px;
}
.summary-row.total span:last-child {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff, var(--text-60));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pay button */
.checkout-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 48px);
    height: 56px;
    margin: 0 24px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.checkout-pay-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.checkout-pay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(197,3,43,0.4);
}
.checkout-pay-btn:hover::before { opacity: 1; }
.checkout-pay-btn svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
}
.checkout-pay-btn .pay-amount {
    font-family: var(--font-mono);
}

/* Trust signals */
.checkout-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}
.checkout-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-40);
}
.checkout-trust-item svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 2;
}
/* ═══════════════════════════════════════════════════════════════════════
   CONTINUE SHOPPING LINK
   ═══════════════════════════════════════════════════════════════════════ */

.cart-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-40);
    transition: color 0.2s;
}
.cart-continue:hover { color: var(--primary); }
.cart-continue svg {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2;
    transition: transform 0.2s;
}
.cart-continue:hover svg { transform: translateX(-4px); }
/* ═══════════════════════════════════════════════════════════════════════
   MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Large Tablet (max 1100px) ── */
@media (max-width: 1200px) {
    .cart-container { flex-direction: column; }
    .cart-checkout-column { width: 100%; position: static; }
    .cart-summary { width: 100% !important; position: static !important; }
}

/* ── Small Tablet (max 900px) ── */
@media (max-width: 900px) {
    /* List view: smaller image, controls wrap */
    .wmdm-cart-image { width: 140px; }
    .wmdm-cart-body { flex-wrap: wrap; padding: 14px 16px; }
    .wmdm-cart-controls { width: 100%; flex-wrap: wrap; }
    .wmdm-cart-license-cards { flex-wrap: wrap; }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
    .cart-page-header { padding: 24px 0 20px; }
    .cart-page-title { font-size: 22px; }
    .cart-page-icon { width: 40px; height: 40px; }
    .cart-page-icon svg { width: 20px; height: 20px; }

    /* Cart page containment */
    .checkout-cart-index .page-main { overflow-x: hidden !important; }
    .cart-summary { width: 100% !important; position: static !important; }
    .checkout-cart-index .cart-container { gap: 20px; overflow: hidden; }
    .wmdm-cart-license-card__content { white-space: normal; }

    /* Stack card image on top */
    .wmdm-cart-item { flex-direction: column; }
    .wmdm-cart-image { width: 100%; height: 220px; }
    .wmdm-cart-image img { width: 100%; height: 100%; object-fit: cover; }

    .wmdm-cart-body { flex-direction: column; align-items: stretch; padding: 16px; }
    .wmdm-cart-info { margin-bottom: 12px; }
    .wmdm-cart-title { font-size: 16px; }

    /* Controls: break out of cluster, stack vertically */
    .wmdm-cart-controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        align-self: stretch;
    }
    .wmdm-cart-actions {
        width: 100%;
        border-right: none;
        padding-right: 0;
        gap: 8px;
    }
    .wmdm-cart-actions .wmdm-cart-btn {
        flex: 1;
        width: auto;
        height: 44px;
        border-radius: var(--radius-sm);
    }
    .wmdm-cart-license-section {
        padding: 0;
        width: 100%;
    }
    .wmdm-cart-license-section::after { display: none; }
    .wmdm-cart-license-cards { width: 100%; }
    .wmdm-cart-license-card { flex: 1; }
    .wmdm-cart-license-card__content { width: 100%; min-width: 0; }

    /* Remove button: full width on mobile */
    .wmdm-cart-remove-btn {
        width: 100%;
        justify-content: center;
        padding-left: 20px;
        align-self: stretch;
    }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
    .cart-page-header { padding: 20px 0 16px; gap: 12px; }
    .cart-page-title { font-size: 20px; }
    .cart-page-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
    .cart-page-icon svg { width: 18px; height: 18px; }

    /* Cards: smaller meta, compact license cards */
    .wmdm-cart-meta { gap: 4px; max-height: 28px; }
    /* Meta tag responsive inherited from cubase-theme.css */
    .wmdm-cart-license-cards { gap: 4px; }
    .wmdm-cart-license-card__content { padding: 6px 10px; }
    .wmdm-cart-license-card__name { font-size: 9px; }
    .wmdm-cart-license-card__price { font-size: 12px; }
    .wmdm-cart-btn { width: 40px; height: 40px; }
    .wmdm-cart-remove-btn { height: 40px; font-size: 13px; }

    /* Shorter image on small screens */
    .wmdm-cart-image { height: 180px; }
}

/* ── Extra Small (max 360px) ── */
@media (max-width: 360px) {
    .wmdm-cart-title { font-size: 14px; }
    .wmdm-cart-seller { font-size: 11px; }
    .wmdm-cart-license-card__content { padding: 4px 8px; }
}
/* ═══════════════════════════════════════════════════════════════════════
   MAGENTO DEFAULT CART OVERRIDES
   Remove grey backgrounds from default Magento cart elements
   ═══════════════════════════════════════════════════════════════════════ */

.checkout-cart-index .page-main {
    margin: 0 auto !important;
    max-width: var(--content-width) !important;
    padding-left: var(--page-padding) !important;
    padding-right: var(--page-padding) !important;
}
.checkout-cart-index .columns {
    gap: 0 !important;
}
.checkout-cart-index .columns::after {
    content: none !important;
}
.checkout-cart-index .cart-container {
    gap: 32px;
}
.checkout-cart-index .cart-container::before,
.checkout-cart-index .cart-container::after {
    content: none !important;
}
.checkout-cart-index .form-cart {
    order: 0;
    flex: 1 1 0% !important;
    min-width: 0;
    float: none !important;
}
.cart-summary {
    order: 1;
    width: 380px !important;
    flex-shrink: 0;
    float: none !important;
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    position: sticky;
    top: 0;
}
.checkout-methods-items {
    background: transparent !important;
}
#shopping-cart-table {
    background: transparent !important;
}
.cart.table-wrapper {
    background: transparent !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/search-results.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH RESULTS PAGE
   Search-specific additions beyond product-list.css
   Extracted from cubase-search-results-v1.html
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   SEARCH RESULT COUNT & QUERY HIGHLIGHT
   ═══════════════════════════════════════════════════════════════════════ */

.search-result-count {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 4px;
}
.search-result-count strong {
    color: var(--text);
    font-weight: 600;
}

.search-query-highlight {
    color: var(--primary);
}
/* ═══════════════════════════════════════════════════════════════════════
   ACTIVE FILTER CHIPS
   ═══════════════════════════════════════════════════════════════════════ */

.search-active-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(197,3,43,0.08);
    border: 1px solid rgba(197,3,43,0.25);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.search-chip__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    padding: 0;
    line-height: 1;
}
.search-chip__clear:hover {
    background: var(--primary);
    color: #fff;
}

.search-clear-all {
    font-size: 12px;
    color: var(--text-40);
    transition: color 0.2s;
}
.search-clear-all:hover {
    color: var(--primary);
}
/* ═══════════════════════════════════════════════════════════════════════
   NO RESULTS STATE
   ═══════════════════════════════════════════════════════════════════════ */

.search-no-results {
    text-align: center;
    padding: 80px 20px;
}

.search-no-results__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-no-results__icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--text-40);
    fill: none;
    stroke-width: 1.5;
}

.search-no-results__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: var(--text);
}

.search-no-results__desc {
    font-size: 15px;
    color: var(--text-40);
    max-width: 400px;
    margin: 0 auto 32px;
    line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════════════
   SEARCH SUGGESTIONS (no-results state)
   ═══════════════════════════════════════════════════════════════════════ */

.search-no-results__suggestions {
    margin-bottom: 32px;
}
.search-no-results__suggestions h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-40);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.search-suggestions-list {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.search-suggestion-tag {
    display: inline-flex;
    padding: 8px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.search-suggestion-tag:hover {
    border-color: rgba(197,3,43,0.3);
    color: var(--text);
    background: rgba(197,3,43,0.06);
}
/* ═══════════════════════════════════════════════════════════════════════
   NO RESULTS CTA BUTTON
   ═══════════════════════════════════════════════════════════════════════ */

.search-no-results__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.search-no-results__cta:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(197,3,43,0.35);
}
.search-no-results__cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* Small Tablet (max 900px) */
@media (max-width: 900px) {
    .search-active-filters {
        gap: 6px;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .search-no-results {
        padding: 60px 16px;
    }
    .search-no-results__icon {
        width: 64px;
        height: 64px;
    }
    .search-no-results__icon svg {
        width: 28px;
        height: 28px;
    }
    .search-no-results__title {
        font-size: 20px;
    }
    .search-no-results__desc {
        font-size: 14px;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    .search-result-count {
        font-size: 13px;
    }
    .search-chip {
        font-size: 12px;
        padding: 5px 10px;
    }
    .search-suggestions-list {
        gap: 6px;
    }
    .search-suggestion-tag {
        font-size: 12px;
        padding: 6px 12px;
    }
    .search-no-results__cta {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/order-success.css
   ═══════════════════════════════════════════════════════════════ */

/* ORDER SUCCESS PAGE — Extracted from cubase-order-success-v1.html */

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

/* PAGE LAYOUT — handled by cubase-theme.css (removed duplicate rules) */

/* ═══════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ORDER SUCCESS — CENTERED CONTAINER
   ═══════════════════════════════════════════════════════════════════════ */

.order-success {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 0 80px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SUCCESS HERO
   ═══════════════════════════════════════════════════════════════════════ */

.order-success__hero {
    text-align: center;
    margin-bottom: 40px;
}

.order-success__checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(140,198,63,0.1);
    border: 2px solid rgba(140,198,63,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: checkPulse 2s ease-in-out infinite;
}
.order-success__checkmark svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: var(--green);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.order-success__checkmark::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(140,198,63,0.1);
    animation: checkRing 2s ease-in-out infinite;
}

@keyframes checkPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(140,198,63,0.2); }
    50% { transform: scale(1.04); box-shadow: 0 0 24px 4px rgba(140,198,63,0.1); }
}
@keyframes checkRing {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.4; }
}

/* Check SVG draw-in animation */
.order-success__checkmark svg polyline {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.6s 0.3s ease-out forwards;
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

.order-success__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}
.order-success__subtitle {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 8px;
}
.order-success__subtitle strong {
    color: var(--text);
    font-weight: 500;
}
.order-success__order-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(197,3,43,0.06);
    border: 1px solid rgba(197,3,43,0.15);
    padding: 6px 14px;
    border-radius: 100px;
    margin-top: 4px;
}
.order-success__order-number svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
   ORDER ITEMS CARD
   ═══════════════════════════════════════════════════════════════════════ */

.order-items-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: visible;
    margin-bottom: 16px;
}
.order-items-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-light);
}
.order-items-card__header svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-40);
    stroke-width: 2;
    flex-shrink: 0;
}
.order-items-card__title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-60);
}
.order-items-card__count {
    font-size: 12px;
    color: var(--text-40);
    margin-left: auto;
    font-family: var(--font-mono);
}

/* Order item rows */
.order-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}
.order-item:last-child { border-bottom: none; }
.order-item:hover { background: rgba(255,255,255,0.02); }

.order-item__image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.order-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-item__info {
    flex: 1;
    min-width: 0;
}
.order-item__name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-item__meta {
    font-size: 12px;
    color: var(--text-40);
}
.order-item__meta .seller { color: var(--text-60); }
.order-item__license {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 8px;
}
.order-item__license--commercial {
    background: rgba(197,3,43,0.06);
    border: 1px solid rgba(197,3,43,0.15);
    color: var(--primary);
}
.order-item__license--regular {
    background: rgba(140,198,63,0.06);
    border: 1px solid rgba(140,198,63,0.15);
    color: var(--green);
}
.order-item__license--broadcast {
    background: rgba(180,92,230,0.06);
    border: 1px solid rgba(180,92,230,0.15);
    color: var(--purple);
}

.order-item__price {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
    margin-right: 12px;
}

.order-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: rgba(140,198,63,0.08);
    border: 1px solid rgba(140,198,63,0.2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
    transition: background-color 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    flex-shrink: 0;
    white-space: nowrap;
}
.order-download-btn:hover {
    background: rgba(140,198,63,0.15);
    border-color: rgba(140,198,63,0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140,198,63,0.15);
}
.order-download-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Download All */
.order-download-all {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}
.order-download-all__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, var(--green), #6da832);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.order-download-all__btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.order-download-all__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(140,198,63,0.3);
}
.order-download-all__btn:hover::before { opacity: 1; }
.order-download-all__btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAYMENT SUMMARY CARD
   ═══════════════════════════════════════════════════════════════════════ */

.order-payment-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 32px;
}
.order-payment-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
}
.order-payment-card__header svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--text-60);
    stroke-width: 2;
    flex-shrink: 0;
}
.order-payment-card__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.order-payment-card__body {
    padding: 20px 24px;
}
.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text);
}
.order-summary-row span:last-child {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text);
}
.order-summary-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}
.order-summary-row.total {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    padding: 12px 0 4px;
}
.order-summary-row.total span:last-child {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff, var(--text-60));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.order-summary-row.payment {
    padding-top: 12px;
}
.order-summary-row.payment span:last-child {
    font-weight: 400;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.payment-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-40);
}

/* ═══════════════════════════════════════════════════════════════════════
   CTA BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

.order-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.order-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}
.order-cta-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.order-cta-btn--primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.order-cta-btn--primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.order-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197,3,43,0.35);
}
.order-cta-btn--primary:hover::before { opacity: 1; }

.order-cta-btn--outlined {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.order-cta-btn--outlined:hover {
    border-color: var(--text-40);
    color: var(--text);
    background: rgba(255,255,255,0.04);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {

    .order-success { padding: 32px 0 60px; }
    .order-success__title { font-size: 26px; }
    .order-success__subtitle { font-size: 14px; }
    .order-success__checkmark { width: 68px; height: 68px; margin-bottom: 20px; }
    .order-success__checkmark svg { width: 30px; height: 30px; }

    /* Stack item rows */
    .order-item { flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
    .order-item__image { width: 48px; height: 48px; }
    .order-item__info { min-width: calc(100% - 76px); }
    .order-item__price { order: 3; }
    .order-download-btn { order: 4; margin-left: auto; }

    .order-items-card__header { padding: 16px 20px; }
    .order-download-all { padding: 14px 20px; }
    .order-payment-card__header { padding: 16px 20px; }
    .order-payment-card__body { padding: 16px 20px; }

    .order-cta-row { flex-direction: column; }
    .order-cta-btn { width: 100%; }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
    .order-success { padding: 24px 0 48px; }
    .order-success__title { font-size: 22px; }
    .order-success__checkmark { width: 60px; height: 60px; margin-bottom: 16px; }
    .order-success__checkmark svg { width: 26px; height: 26px; }

    .order-item { padding: 14px 16px; }
    .order-item__image { width: 44px; height: 44px; }
    .order-item__name { font-size: 13px; }
    .order-item__meta { font-size: 11px; }
    .order-item__price { font-size: 14px; }
    .order-download-btn { height: 32px; padding: 0 12px; font-size: 11px; }
    .order-download-btn svg { width: 12px; height: 12px; }

    .order-items-card__header { padding: 14px 16px; }
    .order-download-all { padding: 12px 16px; }
    .order-download-all__btn { height: 44px; font-size: 13px; }
    .order-payment-card__header { padding: 14px 16px; }
    .order-payment-card__body { padding: 14px 16px; }

    .order-cta-btn { height: 44px; font-size: 13px; }
}

/* ── Extra Small (max 360px) ── */
@media (max-width: 360px) {
    .order-item__name { font-size: 12px; }
    .order-item__meta { font-size: 10px; }
    .order-item__license { font-size: 9px; padding: 2px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/account.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   CUBASE TEMPLATES — ACCOUNT PAGES
   Extracted from:
     cubase-account-downloads-v1.html
     cubase-account-login-v1.html
     cubase-account-orders-v1.html
     cubase-account-profile-v1.html
     cubase-account-wishlist-v1.html
     cubase-account-seller-v1.html
   Excludes: :root, resets, body::after, header/nav/footer, page-wrapper/page-main
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   0. MAGENTO LAYOUT BRIDGE
   Maps Magento's default 2-column-left layout to Cubase theme styling.
   Magento generates: .columns > .column.main + .sidebar.sidebar-main
   Our theme expects: sidebar 280px left, main content fills the rest.
   ═══════════════════════════════════════════════════════════════════════ */

/* Fix 2-column layout: sidebar 280px left, main fills remaining space */
.wmdm-account .columns {
    display: flex;
    gap: 32px !important;
    padding: 32px 0 80px;
    align-items: flex-start;
}

/* Sidebar: fixed 280px, always on left */
.wmdm-account .sidebar.sidebar-main {    flex: 0 0 280px !important;    width: 280px !important;    order: -1 !important;    padding: 0 !important;}

/* Main content: fills remaining space */
.wmdm-account .column.main {
    flex: 1 1 0% !important;
    min-width: 0;
    order: 0 !important;
}

/* Hide sidebar-additional (Compare Products, Recently Ordered, Wishlist — not needed) */
.wmdm-account .sidebar.sidebar-additional {
    display: none;
}

/* Strip default block-collapsible-nav wrapper chrome */
.wmdm-account .block-collapsible-nav {
    background: none;
    border: none;
    padding: 0;
    margin: 0 auto;
}
.wmdm-account .block-collapsible-nav-title {
    display: none;
}
.wmdm-account .block-collapsible-nav-content {    display: block !important;    background: transparent !important;    padding: 0 !important;}

/* ── Page title ── */
.wmdm-account .page-title-wrapper {    display: none;}
.wmdm-account .page-title-wrapper .page-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

/* ── Dashboard blocks (Account Info, Addresses, Orders, Reviews) ── */
.wmdm-account .block-dashboard-info,
.wmdm-account .block-dashboard-addresses,
.wmdm-account .block-dashboard-orders,
.wmdm-account .block-reviews-dashboard {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Block titles */
.wmdm-account .block-dashboard-info > .block-title,
.wmdm-account .block-dashboard-addresses > .block-title,
.wmdm-account .block-dashboard-orders > .block-title,
.wmdm-account .block-reviews-dashboard > .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
}
.wmdm-account .block-dashboard-info > .block-title strong,
.wmdm-account .block-dashboard-addresses > .block-title strong,
.wmdm-account .block-dashboard-orders > .block-title strong,
.wmdm-account .block-reviews-dashboard > .block-title strong {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Block title links (View All, Manage Addresses, etc.) */
.wmdm-account .block-title .action {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    transition: opacity 0.2s;
}
.wmdm-account .block-title .action:hover {
    opacity: 0.8;
}

/* Block content */
.wmdm-account .block-dashboard-info > .block-content {
    padding: 24px;
}
.wmdm-account .block-dashboard-addresses > .block-content {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
/* Kill clearfix pseudo-elements that occupy grid cells */
.wmdm-account .block-dashboard-addresses > .block-content::before,
.wmdm-account .block-dashboard-addresses > .block-content::after {
    display: none !important;
    content: none !important;
}
.wmdm-account .block-dashboard-orders > .block-content,
.wmdm-account .block-reviews-dashboard > .block-content {
    padding: 24px;
}

/* Info boxes inside blocks — override Magento float/width for grid layout */
.wmdm-account .box {
    margin-bottom: 0;
    float: none !important;
    width: auto !important;
}
.wmdm-account .box-title {
    display: block;
    margin-bottom: 8px;
}
.wmdm-account .box-title > span {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wmdm-account .box-content {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
}
.wmdm-account .box-content p {
    margin: 0 0 4px;
}
.wmdm-account .box-actions {
    margin-top: 10px;
}
.wmdm-account .box-actions a,
.wmdm-account .action.edit,
.wmdm-account .action.change-password {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    transition: opacity 0.2s;
    text-decoration: none;
}
.wmdm-account .box-actions a:hover,
.wmdm-account .action.edit:hover,
.wmdm-account .action.change-password:hover {
    opacity: 0.8;
}
/* Separator between action links */
.wmdm-account .box-actions .action + .action {
    margin-left: 12px;
}

/* ── Tables (orders, reviews) ── */
.wmdm-account table {
    width: 100%;
    border-collapse: collapse;
}
.wmdm-account table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-40);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
}
.wmdm-account table tbody td {
    font-size: 14px;
    color: var(--text);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}
.wmdm-account table tbody tr:last-child td {
    border-bottom: none;
}
.wmdm-account table a {
    color: var(--primary);
    font-weight: 600;
    transition: opacity 0.2s;
}
.wmdm-account table a:hover {
    opacity: 0.8;
}

/* ── Empty state text ── */
.wmdm-account .message.info,
.wmdm-account .empty {
    font-size: 14px;
    color: var(--text-40);
    padding: 0;
}

/* ── Toolbar / pager ── */
.wmdm-account .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 13px;
    color: var(--text-40);
}

/* ── Responsive: account layout ── */
@media (max-width: 900px) {
    .wmdm-account .columns {
        flex-wrap: wrap;
        gap: 0;
        padding: 24px 0 60px;
    }
    .wmdm-account .sidebar.sidebar-main {
        flex: 0 0 100% !important;
        width: 100%;
        order: -1;
        margin-bottom: 24px;
    }
    .wmdm-account .column.main {
        flex: 0 0 100% !important;
        order: 0;
    }
    .wmdm-account .block-dashboard-info > .block-content,
    .wmdm-account .block-dashboard-addresses > .block-content {
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   1. SHARED ACCOUNT LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */

/* Breadcrumbs */
.breadcrumbs {
    max-width: var(--content-width);
    width: 100%;
    box-sizing: border-box;
    padding: 20px var(--page-padding) 0;
    margin: 0 auto;
    background: none;
}
.breadcrumbs .items {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: var(--text-40);
}
.breadcrumbs .items .item:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: var(--text-20);
}
.breadcrumbs .items a { color: var(--text-60); }
.breadcrumbs .items a:hover { color: var(--primary); }
.breadcrumbs .items strong { color: var(--text); font-weight: 500; }

/* Product page breadcrumb spacing */
.wmdm-product-page .breadcrumbs,
.catalog-product-view .breadcrumbs {
    padding-bottom: 16px;
}

/* Flat breadcrumb pattern (product pages) */
.breadcrumbs a { color: var(--text-40); transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs .sep { font-size: 11px; color: var(--text-20); }
.breadcrumbs .current { color: var(--text); }

/* Two-column layout */
.account-columns {
    display: flex;
    gap: 32px;
    padding: 32px 0 80px;
    align-items: flex-start;
}

/* ── Sidebar ── */
.acct-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.acct-sidebar__user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-light);
}
.acct-sidebar__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.acct-sidebar__user-info { min-width: 0; }
.acct-sidebar__name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-sidebar__email {
    font-size: 12px;
    color: var(--text-40);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acct-sidebar__since {
    font-size: 11px;
    color: var(--text-20);
    margin-top: 2px;
}

.acct-sidebar__nav { padding: 8px 0; }

.acct-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    transition: color 0.15s, background-color 0.15s;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.acct-nav-link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.03);
}
.acct-nav-link.is-active {
    border-left-color: var(--primary);
    color: var(--text);
    background: rgba(197,3,43,0.04);
}
.acct-nav-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    flex-shrink: 0;
}
.acct-nav-link .nav-label { flex: 1; }

.acct-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1;
}
.acct-nav-badge--primary { background: var(--primary); color: #fff; }
.acct-nav-badge--muted { background: rgba(255,255,255,0.06); color: var(--text-40); }

.acct-nav-divider {
    height: 1px;
    background: var(--border-light);
    margin: 6px 0;
}
.acct-nav-link--muted { color: var(--text-40); }
.acct-nav-link--muted:hover { color: var(--primary); }

/* ── Content Area ── */
.account-content {
    flex: 1;
    min-width: 0;
}

/* Page header */
.acct-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.acct-page-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.acct-page-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.acct-page-icon--green {
    background: rgba(140,198,63,0.1);
    border: 1px solid rgba(140,198,63,0.2);
    color: var(--green);
}
.acct-page-icon--primary {
    background: rgba(197,3,43,0.08);
    border: 1px solid rgba(197,3,43,0.2);
    color: var(--primary);
}
.acct-page-icon--neutral {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-light);
    color: var(--text);
}
.acct-page-icon--pink {
    background: rgba(255,92,170,0.1);
    border: 1px solid rgba(255,92,170,0.2);
    color: var(--pink);
}
.acct-page-icon--purple {
    background: rgba(180,92,230,0.1);
    border: 1px solid rgba(180,92,230,0.2);
    color: var(--purple);
}
.acct-page-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 auto;
}
.acct-page-count {
    font-size: 14px;
    color: var(--text-40);
    margin-top: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════
   2. LOGIN / REGISTER PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* Full-width login — remove page-main constraints */
.wmdm-login-page .page-main {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wmdm-login-page .page-title-wrapper {
    display: none;
}

.login-split {
    display: flex;
    min-height: calc(100vh - var(--header-h));
}

/* ── Left: Brand Panel ── */
.login-brand {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 80px 60px 80px 40px;
    overflow: hidden;
    background: var(--bg-tint);
}
.login-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(197,3,43,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(180,92,230,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(108,142,239,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.login-brand::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(197,3,43,0.06);
    pointer-events: none;
}
.login-brand__content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    width: 100%;
}
.login-brand__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(197,3,43,0.08);
    border: 1px solid rgba(197,3,43,0.15);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 28px;
}
.login-brand__badge svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
}
.login-brand__title {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin-bottom: 16px;
}
.login-brand__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--primary), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.login-brand__desc {
    font-size: 16px;
    color: var(--text-40);
    line-height: 1.7;
    margin-bottom: 48px;
}

/* Stats row */
.login-brand__stats {
    display: flex;
    gap: 40px;
    margin-bottom: 48px;
}
.login-stat { display: flex; flex-direction: column; }
.login-stat__value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
}
.login-stat__value--primary { color: var(--primary); }
.login-stat__value--teal { color: var(--teal); }
.login-stat__value--purple { color: var(--purple); }
.login-stat__label {
    font-size: 12px;
    color: var(--text-40);
    font-weight: 500;
}

/* Trust row */
.login-brand__trust { display: flex; gap: 24px; }
.login-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-40);
}
.login-trust-item svg {
    width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2; flex-shrink: 0;
}

/* Decorative waveform lines */
.login-brand__deco {
    position: absolute;
    bottom: 40px;
    left: 60px;
    right: 60px;
    height: 60px;
    opacity: 0.06;
    overflow: hidden;
}
.login-brand__deco svg { width: 100%; height: 100%; }

/* ── Right: Form Panel ── */
.login-form-panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    background: var(--bg);
    border-left: 1px solid var(--border-light);
}
.login-form-wrap {
    width: 100%;
    max-width: 400px;
}

/* Tab toggle */
.login-tabs {
    display: flex;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 32px;
    border: 1px solid var(--border-light);
}
.login-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-40);
    transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    cursor: pointer;
}
.login-tab.is-active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.login-tab:not(.is-active):hover { color: var(--text-60); }

/* Form panels */
.login-panel { display: none; }
.login-panel.is-active { display: block; }

/* Form elements */
.auth-form-group { margin-bottom: 18px; }
.auth-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(197,3,43,0.1);
}
.auth-input::placeholder { color: var(--text-40); }

/* Password field with toggle */
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 48px; }
.auth-eye-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-40);
    cursor: pointer;
    transition: color 0.2s;
    border-radius: 6px;
}
.auth-eye-toggle:hover { color: var(--text-60); }
.auth-eye-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Row: remember + forgot */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.auth-checkbox input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}
.auth-checkbox input:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.auth-checkbox input:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.auth-checkbox span { font-size: 13px; color: var(--text-60); }
.auth-forgot {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    transition: opacity 0.2s;
}
.auth-forgot:hover { opacity: 0.8; }

/* Submit button */
.auth-submit {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}
.auth-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(197,3,43,0.35);
}
.auth-submit:hover::before { opacity: 1; }
.auth-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Divider */
.auth-divider {
    display: none;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.auth-divider span {
    font-size: 12px;
    color: var(--text-40);
    white-space: nowrap;
}

/* Social login */
.auth-social-btns {
    display: none;
}
.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
    width: 100%;
}
.auth-social-btn:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--border);
    transform: translateY(-1px);
}
.auth-social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Terms text */
.auth-terms {
    font-size: 12px;
    color: var(--text-40);
    text-align: center;
    line-height: 1.6;
}
.auth-terms a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--border);
    transition: color 0.2s;
}
.auth-terms a:hover { color: var(--text); }

/* Register: name grid */
.auth-name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Register: terms checkbox row */
.auth-terms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 24px;
}
.auth-terms-check input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
}
.auth-terms-check input:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.auth-terms-check input:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.auth-terms-check label {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    cursor: pointer;
}
.auth-terms-check label a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--border);
}
/* ═══════════════════════════════════════════════════════════════════════
   3. DOWNLOADS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* Toolbar */
.dl-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.dl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    transition: border-color 0.2s;
}
.dl-search:focus-within { border-color: var(--border); }
.dl-search svg {
    width: 16px; height: 16px; flex-shrink: 0;
    stroke: var(--text-40); fill: none; stroke-width: 2;
}
.dl-search input {
    background: none; border: none; outline: none;
    color: var(--text); font-size: 13px; width: 100%; font-family: var(--font-body);
}
.dl-search input::placeholder { color: var(--text-40); }

.dl-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.dl-filters::-webkit-scrollbar { height: 4px; }
.dl-filters::-webkit-scrollbar-track { background: transparent; }
.dl-filters::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    white-space: nowrap;
}
.dl-chip:hover { border-color: var(--border); color: var(--text); }
.dl-chip.is-active {
    background: rgba(197,3,43,0.08);
    border-color: rgba(197,3,43,0.25);
    color: var(--primary);
}
.dl-chip .chip-count {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.7;
}

/* Download button unique additions */
.order-item__detail {
    font-size: 12px;
    color: var(--text-40);
    flex-shrink: 0;
    text-align: right;
    min-width: 60px;
}
.order-item__detail .dl-date { display: block; }
.order-item__detail .dl-size {
    display: block; font-family: var(--font-mono);
    font-size: 11px; color: var(--text-20); margin-top: 2px;
}

.order-item__actions {
    display: flex; gap: 8px; flex-shrink: 0; align-items: center;
}

/* License download button */
.order-license-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    background: rgba(90,200,250,0.06);
    border: 1px solid rgba(90,200,250,0.15);
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    color: var(--cyan);
    transition: background-color 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    flex-shrink: 0; white-space: nowrap;
}
.order-license-btn:hover {
    background: rgba(90,200,250,0.12);
    border-color: rgba(90,200,250,0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(90,200,250,0.12);
}
.order-license-btn svg {
    width: 14px; height: 14px; fill: none;
    stroke: currentColor; stroke-width: 2;
}

/* Multi-file download dropdown */
.dl-files-dropdown {
    position: relative;
    flex-shrink: 0;
}
.dl-files-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 12px;
    background: rgba(140,198,63,0.08);
    border: 1px solid rgba(140,198,63,0.2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
    cursor: pointer;
    transition: background-color 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    white-space: nowrap;
}
.dl-files-btn:hover {
    background: rgba(140,198,63,0.15);
    border-color: rgba(140,198,63,0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140,198,63,0.15);
}
.dl-files-btn svg:first-child {
    width: 14px; height: 14px;
}
.dl-files-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(140,198,63,0.2);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.dl-files-chevron {
    width: 12px; height: 12px;
    transition: transform 0.2s;
}
.dl-files-dropdown.is-open .dl-files-chevron {
    transform: rotate(180deg);
}
.dl-files-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 50;
    padding: 4px;
    overflow: hidden;
}
.dl-files-dropdown.is-open .dl-files-menu {
    display: block;
}
.dl-files-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
    border-radius: calc(var(--radius-sm) - 2px);
    transition: background 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.dl-files-menu__item:hover {
    background: rgba(140,198,63,0.08);
}
.dl-files-menu__item svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.dl-files-menu__item--disabled {
    color: var(--text-40);
    cursor: default;
}
.dl-files-menu__item--disabled:hover {
    background: none;
}
.dl-files-menu__status {
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. ORDERS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}
.order-card.is-expanded { border-color: var(--border); }

.order-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.order-card__header:hover { background: rgba(255,255,255,0.02); }

.order-card__number {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
}
.order-card__date {
    font-size: 13px;
    color: var(--text-40);
}
.order-card__items-count {
    font-size: 13px;
    color: var(--text-40);
}
.order-card__total {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-left: auto;
}
.order-card__status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.order-card__status--completed {
    background: rgba(140,198,63,0.08);
    border: 1px solid rgba(140,198,63,0.2);
    color: var(--green);
}
.order-card__status--processing {
    background: rgba(255,184,0,0.08);
    border: 1px solid rgba(255,184,0,0.2);
    color: var(--yellow);
}
.order-card__chevron {
    width: 20px; height: 20px;
    fill: none; stroke: var(--text-40);
    stroke-width: 2; flex-shrink: 0;
    transition: transform 0.3s var(--ease-out);
}
.order-card.is-expanded .order-card__chevron { transform: rotate(180deg); }

.order-card__body {
    display: none;
    border-top: 1px solid var(--border-light);
}
.order-card.is-expanded .order-card__body { display: block; }

/* Price column (orders page specific) */


/* Order footer */
.order-card__footer {
    border-top: 1px solid var(--border-light);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.order-card__subtotal { font-size: 14px; color: var(--text-60); }
.order-card__subtotal strong {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    margin-left: 8px;
}
.order-card__dl-all {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 20px;
    background: linear-gradient(135deg, var(--green), #6da832);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px; font-weight: 700; color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden;
}
.order-card__dl-all::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.3s;
}
.order-card__dl-all:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(140,198,63,0.25); }
.order-card__dl-all:hover::before { opacity: 1; }
.order-card__dl-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* ═══════════════════════════════════════════════════════════════════════
   5. PROFILE / ACCOUNT SETTINGS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}
.profile-card__header {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light);
}
.profile-card__header svg {
    width: 18px; height: 18px; fill: none;
    stroke: var(--text-60); stroke-width: 2; flex-shrink: 0;
}
.profile-card__title {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.profile-card__body { padding: 24px; }

/* Avatar section */
.profile-avatar-row {
    display: flex; align-items: center; gap: 20px; margin-bottom: 28px;
}
.profile-avatar-large {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.profile-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.profile-avatar-upload {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 16px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-light);
    font-size: 12px; font-weight: 600; color: var(--text-60);
    transition: border-color 0.2s, color 0.2s;
}
.profile-avatar-upload:hover { border-color: var(--border); color: var(--text); }
.profile-avatar-hint { font-size: 11px; color: var(--text-20); }

/* Form fields */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-label {
    font-size: 12px; font-weight: 600; color: var(--text-60);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.form-input {
    height: 44px; padding: 0 14px;
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); color: var(--text);
    font-size: 14px; font-family: var(--font-body);
    transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: var(--primary); }
.form-input::placeholder { color: var(--text-40); }

.form-actions {
    display: flex; justify-content: flex-end; gap: 12px;
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--border-light);
}
.btn-save {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 24px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-family: var(--font-display); font-size: 13px; font-weight: 600;
    color: #fff; transition: transform 0.25s, box-shadow 0.25s; position: relative; overflow: hidden;
}
.btn-save::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.3s;
}
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(197,3,43,0.3); }
.btn-save:hover::before { opacity: 1; }
.btn-cancel {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 20px; border-radius: var(--radius-sm);
    background: transparent; border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text-60);
    transition: border-color 0.2s, color 0.2s;
}
.btn-cancel:hover { border-color: var(--text-40); color: var(--text); }

/* Preference toggle rows */
.pref-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid var(--border-light);
}
.pref-row:last-child { border-bottom: none; }
.pref-info { flex: 1; }
.pref-label { font-size: 14px; font-weight: 500; }
.pref-desc { font-size: 12px; color: var(--text-40); margin-top: 2px; }

.toggle {
    position: relative; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
    position: absolute; inset: 0; border-radius: 100px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    transition: background-color 0.3s, border-color 0.3s;
}
.toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--text-40);
    transition: transform 0.3s var(--ease-spring), background-color 0.3s var(--ease-spring);
}
.toggle input:checked + .toggle-track {
    background: var(--primary); border-color: var(--primary);
}
.toggle input:checked + .toggle-track::after {
    transform: translateX(20px); background: #fff;
}

/* Address cards */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.address-tile {
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); padding: 20px; position: relative;
    transition: border-color 0.2s;
}
.address-tile:hover { border-color: var(--border); }
.address-tile__header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.address-tile__type {
    font-family: var(--font-display); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-60);
}
.address-tile__default {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: 100px; font-size: 10px; font-weight: 600;
    background: rgba(140,198,63,0.08); border: 1px solid rgba(140,198,63,0.2);
    color: var(--green); text-transform: uppercase; letter-spacing: 0.04em;
}
.address-tile__name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.address-tile__company { font-size: 13px; color: var(--cyan); margin-bottom: 4px; }
.address-tile__line { font-size: 13px; color: var(--text-40); line-height: 1.6; }
.address-tile__actions {
    display: flex; gap: 12px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.address-tile__action {
    font-size: 12px; font-weight: 600; color: var(--text-40);
    transition: color 0.2s; cursor: pointer;
}
.address-tile__action:hover { color: var(--text); }
.address-tile__action--delete:hover { color: var(--primary); }

.btn-add-outline {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 20px; border-radius: var(--radius-sm);
    background: transparent; border: 1px dashed var(--border);
    font-size: 13px; font-weight: 600; color: var(--text-40);
    transition: border-color 0.2s, color 0.2s; margin-top: 16px;
}
.btn-add-outline:hover { border-color: var(--primary); color: var(--primary); border-style: solid; }
.btn-add-outline svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Payment method cards */
.payment-list { display: flex; flex-direction: column; gap: 12px; }
.payment-tile {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); padding: 16px 20px;
    transition: border-color 0.2s;
}
.payment-tile:hover { border-color: var(--border); }
.payment-tile__icon {
    width: 48px; height: 32px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.payment-tile__icon--visa { background: linear-gradient(135deg, #1a1f71, #2e3b9e); color: #fff; }
.payment-tile__icon--mc { background: linear-gradient(135deg, #eb001b, #f79e1b); color: #fff; }
.payment-tile__icon--pp { background: linear-gradient(135deg, #003087, #009cde); color: #fff; }
.payment-tile__info { flex: 1; min-width: 0; }
.payment-tile__number {
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em;
}
.payment-tile__expiry { font-size: 12px; color: var(--text-40); margin-top: 2px; }
.payment-tile__badges { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.payment-tile__actions { display: flex; gap: 10px; flex-shrink: 0; }
.payment-tile__action {
    font-size: 12px; font-weight: 600; color: var(--text-40);
    transition: color 0.2s; cursor: pointer;
}
.payment-tile__action:hover { color: var(--text); }
.payment-tile__action--delete:hover { color: var(--primary); }

/* Danger zone */
.profile-card--danger { border-color: rgba(197,3,43,0.2); }
.profile-card--danger .profile-card__header { border-bottom-color: rgba(197,3,43,0.15); }
.profile-card--danger .profile-card__title { color: var(--primary); }
.danger-text { font-size: 13px; color: var(--text-40); line-height: 1.7; margin-bottom: 16px; }
.danger-link {
    font-size: 13px; font-weight: 600; color: var(--primary);
    transition: opacity 0.2s; cursor: pointer;
}
.danger-link:hover { opacity: 0.8; }
/* ═══════════════════════════════════════════════════════════════════════
   6. WISHLIST PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.wishlist-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.wish-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.3s, opacity 0.3s, transform 0.3s, max-height 0.3s;
}
.wish-item:last-child { border-bottom: none; }
.wish-item:hover { background: rgba(255,255,255,0.02); }
.wish-item.is-removing {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.wish-item__image {
    width: 56px; height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden; flex-shrink: 0;
}
.wish-item__image img { width: 100%; height: 100%; object-fit: cover; }

.wish-item__info { flex: 1; min-width: 0; }
.wish-item__name {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    letter-spacing: -0.02em; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wish-item__meta { font-size: 12px; color: var(--text-40); }
.wish-item__meta .seller { color: var(--text-60); }
.wish-item__added { font-size: 11px; color: var(--text-20); margin-top: 2px; }

.wish-item__tags { display: flex; gap: 4px; flex-shrink: 0; }
.wish-tag {
    display: inline-flex; padding: 2px 8px; border-radius: 100px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border-light);
    color: var(--text-40);
}

.wish-item__price {
    font-family: var(--font-mono);
    font-size: 15px; font-weight: 700;
    color: var(--text); flex-shrink: 0;
}

.wish-item__cart-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    background: rgba(197,3,43,0.08);
    border: 1px solid rgba(197,3,43,0.2);
    border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    color: var(--primary);
    transition: background-color 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring), transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    flex-shrink: 0; white-space: nowrap;
}
.wish-item__cart-btn:hover {
    background: rgba(197,3,43,0.15);
    border-color: rgba(197,3,43,0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(197,3,43,0.15);
}
.wish-item__cart-btn svg {
    width: 14px; height: 14px; fill: none;
    stroke: currentColor; stroke-width: 2;
}

.wish-item__remove {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--text-20);
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}
.wish-item__remove:hover { background: rgba(197,3,43,0.08); color: var(--primary); }
.wish-item__remove svg {
    width: 16px; height: 16px; fill: none;
    stroke: currentColor; stroke-width: 2;
}
/* ═══════════════════════════════════════════════════════════════════════
   7. SELLER DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */

.seller-cta {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.seller-cta__banner {
    height: 180px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 50%, var(--blue) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.seller-cta__banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.seller-cta__banner-icon {
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    border: 1px solid rgba(255,255,255,0.2);
}
.seller-cta__banner-icon svg {
    width: 36px; height: 36px;
    fill: none; stroke: #fff; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.seller-cta__body { padding: 40px; text-align: center; }
.seller-cta__title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}
.seller-cta__desc {
    font-size: 15px;
    color: var(--text);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto 36px;
}

/* Benefits grid */
.seller-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto 40px;
}
.seller-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    text-align: left;
}
.seller-benefit__icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.seller-benefit__icon svg {
    width: 22px; height: 22px;
    fill: none; stroke: #fff; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.seller-benefit__icon--green { background: rgba(140,198,63,0.15); }
.seller-benefit__icon--green svg { stroke: var(--green); }
.seller-benefit__icon--teal { background: rgba(0,194,176,0.15); }
.seller-benefit__icon--teal svg { stroke: var(--teal); }
.seller-benefit__icon--yellow { background: rgba(255,184,0,0.15); }
.seller-benefit__icon--yellow svg { stroke: var(--yellow); }
.seller-benefit__icon--purple { background: rgba(180,92,230,0.15); }
.seller-benefit__icon--purple svg { stroke: var(--purple); }
.seller-benefit__label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.seller-benefit__desc { font-size: 12px; color: var(--text-40); margin-top: 2px; }

/* CTA button */
.seller-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.seller-cta__btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}
.seller-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(197,3,43,0.4);
}
.seller-cta__btn:hover::before { opacity: 1; }
.seller-cta__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
/* ═══════════════════════════════════════════════════════════════════════
   8. RESPONSIVE MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════════════ */

/* Login page: 1100px intermediate breakpoint */
@media (max-width: 1100px) {
    .login-brand { padding: 60px 40px; }
    .login-brand__title { font-size: 36px; }
    .login-brand__stats { gap: 28px; }
    .login-stat__value { font-size: 24px; }
}

@media (max-width: 900px) {
    /* Sidebar: collapse to horizontal pill scrollbar */
    .account-columns { flex-direction: column; gap: 0; padding: 24px 0 60px; }
    .acct-sidebar {
        width: 100%; position: static;
        border-radius: var(--radius-sm);
        margin-bottom: 24px;
    }
    .acct-sidebar__user { display: none; }
    .acct-sidebar__nav {
        display: flex; gap: 4px; padding: 10px 12px;
        overflow-x: auto;
    }
    .acct-sidebar__nav::-webkit-scrollbar { display: none; }
    .acct-nav-link {
        padding: 8px 14px; border-left: none;
        border-radius: 100px; white-space: nowrap;
        font-size: 12px; gap: 6px;
        border: 1px solid transparent;
    }
    .acct-nav-link.is-active {
        background: rgba(197,3,43,0.1);
        border-color: rgba(197,3,43,0.25);
    }
    .acct-nav-divider { display: none; }
    .acct-nav-link--muted { display: none; }

    /* Login: stack vertically */
    .login-split { flex-direction: column; min-height: auto; }
    .login-brand { padding: 48px 32px; }
    .login-brand__deco { display: none; }
    .login-brand__title { font-size: 30px; }
    .login-brand__desc { margin-bottom: 32px; font-size: 15px; }
    .login-brand__stats { margin-bottom: 32px; }
    .login-form-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border-light);
        padding: 40px 32px;
    }
    .login-form-wrap { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 768px) {
    /* Shared page header */
    .acct-page-header { gap: 12px; margin-bottom: 20px; }
    .acct-page-icon { width: 40px; height: 40px; }
    .acct-page-icon svg { width: 20px; height: 20px; }
    .acct-page-title { font-size: 22px; }

    /* Downloads */
    .dl-toolbar { flex-direction: column; gap: 10px; }
    .dl-search { max-width: 100%; }
    .order-items-card__header { padding: 14px 20px; }
    .order-download-all { padding: 14px 20px; }
    .order-item { flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
    .order-item__image { width: 48px; height: 48px; }
    .order-item__info { min-width: calc(100% - 76px); }
    .order-item__detail { order: 3; }
    .order-item__actions { order: 4; margin-left: auto; }

    /* Orders */
    .order-card__header { padding: 16px 20px; gap: 10px; flex-wrap: wrap; }
    .order-card__date,
    .order-card__items-count { font-size: 12px; }
    .order-item__price { order: 3; }
    .order-download-btn { order: 4; margin-left: auto; }
    .order-card__footer { padding: 14px 20px; flex-direction: column; gap: 12px; }
    .order-card__dl-all { width: 100%; justify-content: center; }

    /* Profile */
    .form-grid { grid-template-columns: 1fr; }
    .address-grid { grid-template-columns: 1fr; }
    .payment-tile { flex-wrap: wrap; gap: 12px; }
    .payment-tile__badges { order: 3; width: 100%; }
    .payment-tile__actions { order: 4; margin-left: auto; }
    .profile-card__body { padding: 20px; }
    .profile-card__header { padding: 16px 20px; }
    .profile-avatar-row { flex-direction: column; text-align: center; }

    /* Wishlist */
    .wish-item { flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
    .wish-item__image { width: 48px; height: 48px; }
    .wish-item__info { min-width: calc(100% - 76px); }
    .wish-item__tags { display: none; }
    .wish-item__price { order: 3; }
    .wish-item__cart-btn { order: 4; }
    .wish-item__remove { order: 5; }

    /* Seller */
    .seller-cta__body { padding: 28px 20px; }
    .seller-cta__title { font-size: 22px; }
    .seller-cta__desc { font-size: 14px; }
    .seller-benefits { grid-template-columns: 1fr; }
    .seller-cta__btn { width: 100%; height: 48px; font-size: 14px; padding: 0 24px; }
    .seller-cta__banner { height: 140px; }
    .seller-cta__banner-icon { width: 64px; height: 64px; }
    .seller-cta__banner-icon svg { width: 28px; height: 28px; }

    /* Login */
    .login-brand { padding: 36px 20px; }
    .login-brand__badge { margin-bottom: 20px; }
    .login-brand__title { font-size: 26px; margin-bottom: 12px; }
    .login-brand__desc { font-size: 14px; margin-bottom: 24px; }
    .login-brand__stats { gap: 20px; flex-wrap: wrap; }
    .login-stat__value { font-size: 22px; }
    .login-brand__trust { flex-direction: column; gap: 10px; }
    .login-form-panel { padding: 32px 20px; }
    .auth-name-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    /* Shared */
    .acct-page-title { font-size: 20px; }
    .acct-page-count { font-size: 12px; }
    .acct-nav-badge { display: none; }

    /* Downloads */
    .order-items-card__header { padding: 12px 16px; }
    .order-download-all { padding: 12px 16px; }
    .order-download-all__btn { height: 44px; font-size: 13px; }
    .order-item { padding: 14px 16px; }
    .order-item__image { width: 44px; height: 44px; }
    .order-item__name { font-size: 13px; }
    .order-item__meta { font-size: 11px; }
    .order-item__actions { gap: 6px; }
    .order-download-btn { height: 32px; padding: 0 12px; font-size: 11px; }
    .order-download-btn svg { width: 12px; height: 12px; }
    .order-license-btn { height: 32px; padding: 0 10px; font-size: 11px; }
    .order-license-btn svg { width: 12px; height: 12px; }

    /* Orders */
    .order-card__header { padding: 14px 16px; }
    .order-card__number { font-size: 11px; }
    .order-card__total { font-size: 14px; }
    .order-item__price { font-size: 14px; }

    /* Profile */
    .profile-card__body { padding: 16px; }
    .profile-card__header { padding: 14px 16px; }
    .form-actions { flex-direction: column; }
    .btn-save,
    .btn-cancel { width: 100%; }

    /* Wishlist */
    .wish-item { padding: 14px 16px; }
    .wish-item__image { width: 44px; height: 44px; }
    .wish-item__name { font-size: 13px; }
    .wish-item__meta { font-size: 11px; }
    .wish-item__price { font-size: 14px; }
    .wish-item__cart-btn { height: 32px; padding: 0 12px; font-size: 11px; }

    /* Seller */
    .seller-cta__body { padding: 24px 16px; }
    .seller-cta__title { font-size: 20px; }
    .seller-benefit { padding: 14px 16px; }
    .seller-benefit__icon { width: 38px; height: 38px; }
    .seller-benefit__icon svg { width: 18px; height: 18px; }

    /* Login */
    .login-brand { padding: 28px 16px; }
    .login-brand__title { font-size: 22px; }
    .login-brand__stats { gap: 16px; }
    .login-stat__value { font-size: 20px; }
    .login-stat__label { font-size: 11px; }
    .login-form-panel { padding: 28px 16px; }
    .login-tabs { margin-bottom: 24px; }
    .auth-input { height: 44px; }
    .auth-submit { height: 46px; font-size: 14px; }
    .auth-social-btn { height: 42px; font-size: 12px; }
}

@media (max-width: 360px) {
    /* Downloads: very small screens */
    .order-item__name { font-size: 12px; }
    .order-item__meta { font-size: 10px; }
    .order-item__license { font-size: 9px; padding: 2px 6px; }
}


/* ── Pagination / Pager Dark Theme ── */
.wmdm-account .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 0;
    margin-top: 8px;
}

.wmdm-account .toolbar-amount {
    font-size: 13px;
    color: var(--text-40);
    margin: 0 auto;
}
.wmdm-account .toolbar-amount .toolbar-number {
    color: var(--text);
    font-weight: 600;
}

/* Pages */
.wmdm-account .pages {
    display: flex;
    align-items: center;
}
.wmdm-account .pages-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}
.wmdm-account .pages-items {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
.wmdm-account .pages-items .item {
    list-style: none;
}
.wmdm-account .pages-items .page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    text-decoration: none;
}
.wmdm-account .pages-items a.page:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255,255,255,0.07);
}
.wmdm-account .pages-items .item.current .page {
    background: rgba(197,3,43,0.08);
    border-color: rgba(197,3,43,0.25);
    color: var(--primary);
}
.wmdm-account .pages-items .page .label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* Next/Prev arrows */
.wmdm-account .pages-items .action.next,
.wmdm-account .pages-items .action.previous {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    color: var(--text-40);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    text-decoration: none;
}
.wmdm-account .pages-items .action.next:hover,
.wmdm-account .pages-items .action.previous:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255,255,255,0.07);
}

/* Limiter (Show X per page) */
.wmdm-account .limiter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-40);
}
.wmdm-account .limiter-label {
    font-weight: 600;
}
.wmdm-account .limiter-options {
    height: 36px;
    padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
}
.wmdm-account .limiter-options:focus {
    outline: none;
    border-color: var(--primary);
}
.wmdm-account .limiter-text {
    color: var(--text-40);
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/404.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.page-404 {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
}

/* Background glow */
.page-404::before {
    content: ''; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    width: 700px; height: 500px;
    background: radial-gradient(ellipse, rgba(197,3,43,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.four-o-four {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    max-width: 700px;
    position: relative;
    z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════════════
   GIANT 404 — GLITCHING DAW TRANSPORT
   ═══════════════════════════════════════════════════════════════════════ */

.transport {
    position: relative;
    margin-bottom: 12px;
}

/* The big number */
.transport__display {
    font-family: var(--font-mono);
    font-size: clamp(100px, 20vw, 180px);
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1;
    color: var(--text);
    position: relative;
    user-select: none;
}

/* Red glow behind the text */
.transport__display::before {
    content: '404';
    position: absolute; inset: 0;
    color: var(--primary);
    filter: blur(30px);
    opacity: 0.3;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.2; filter: blur(30px); }
    50% { opacity: 0.4; filter: blur(40px); }
}

/* Scan lines overlay */
.transport__scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Glitch effect — two offset copies */
.transport__glitch {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: clamp(100px, 20vw, 180px);
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 1;
    pointer-events: none;
    overflow: hidden;
}
.transport__glitch--r {
    color: rgba(197,3,43,0.5);
    animation: glitchR 4s steps(2) infinite;
    clip-path: inset(10% 0 60% 0);
}
.transport__glitch--c {
    color: rgba(90,200,250,0.3);
    animation: glitchC 4s steps(3) infinite;
    clip-path: inset(55% 0 15% 0);
}

@keyframes glitchR {
    0%, 92% { transform: translate(0, 0); }
    93% { transform: translate(6px, -2px); }
    94% { transform: translate(-4px, 1px); }
    95% { transform: translate(3px, -1px); }
    96%, 100% { transform: translate(0, 0); }
}
@keyframes glitchC {
    0%, 88% { transform: translate(0, 0); }
    89% { transform: translate(-5px, 2px); }
    90% { transform: translate(4px, -1px); }
    91% { transform: translate(-2px, 0px); }
    92%, 100% { transform: translate(0, 0); }
}

/* Transport bar underneath — mimics a DAW position bar */
.transport__bar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 8px;
    padding: 0 4px;
}
.transport__marker {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    color: var(--text-20);
    white-space: nowrap;
}
.transport__timeline {
    flex: 1; height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
/* Playhead scanning back and forth — "searching" */
.transport__playhead {
    position: absolute;
    top: 0; left: 0;
    width: 30px; height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border-radius: 2px;
    animation: playheadScan 3s ease-in-out infinite;
}
@keyframes playheadScan {
    0% { left: -30px; }
    50% { left: calc(100% + 30px); }
    50.01% { left: -30px; opacity: 0; }
    55% { opacity: 1; }
    100% { left: calc(100% + 30px); }
}

/* Blinking REC indicator */
.transport__rec {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 700;
    color: var(--primary);
    letter-spacing: 1px;
}
.transport__rec-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    animation: recBlink 1s ease-in-out infinite;
}
@keyframes recBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
/* ═══════════════════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════════════════ */

.four-o-four__tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600;
    color: var(--primary);
    background: rgba(197,3,43,0.06);
    border: 1px solid rgba(197,3,43,0.12);
    padding: 5px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.four-o-four__tag svg {
    width: 14px; height: 14px;
    stroke: var(--primary); fill: none; stroke-width: 2;
}

.four-o-four__heading {
    font-family: var(--font-display);
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.four-o-four__sub {
    font-size: 15px;
    color: var(--text-40);
    max-width: 440px;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Action buttons */
.four-o-four__actions {
    display: flex; gap: 10px;
    margin-bottom: 40px;
}
.four-o-four .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-weight: 600; font-size: 14px;
    border-radius: 100px;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
}
.four-o-four .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197,3,43,0.3);
}
.four-o-four .btn-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.four-o-four .btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px;
    border: 1px solid var(--border);
    color: var(--text); font-weight: 600; font-size: 14px;
    border-radius: 100px;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.four-o-four .btn-ghost:hover { border-color: var(--text-40); color: var(--text); }
.four-o-four .btn-ghost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* ═══════════════════════════════════════════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════════════════════════════════════════ */

.quick-links {
    display: flex; gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 28px;
    border-top: 1px solid var(--border-light);
    width: 100%;
    max-width: 500px;
}
.quick-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    color: var(--text-40);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-light);
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.quick-link:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255,255,255,0.04);
}
.quick-link svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
    flex-shrink: 0;
}
.quick-link--primary:hover {
    border-color: rgba(197,3,43,0.3);
    color: var(--text);
    background: rgba(197,3,43,0.04);
}
/* ═══════════════════════════════════════════════════════════════════════
   FLOATING CHANNEL STRIPS — ambient background decoration
   ═══════════════════════════════════════════════════════════════════════ */

.bg-channels {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.bg-channel {
    position: absolute;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to top, var(--border-light), transparent);
    border-radius: 2px;
    opacity: 0;
    animation: channelRise 6s ease-in-out infinite;
}

.bg-channel:nth-child(1) { left: 8%; height: 25%; animation-delay: 0s; }
.bg-channel:nth-child(2) { left: 15%; height: 40%; animation-delay: 0.8s; }
.bg-channel:nth-child(3) { left: 22%; height: 18%; animation-delay: 1.6s; }
.bg-channel:nth-child(4) { left: 35%; height: 55%; animation-delay: 0.4s; }
.bg-channel:nth-child(5) { left: 48%; height: 30%; animation-delay: 2.2s; }
.bg-channel:nth-child(6) { left: 58%; height: 45%; animation-delay: 1.2s; }
.bg-channel:nth-child(7) { left: 68%; height: 22%; animation-delay: 2.8s; }
.bg-channel:nth-child(8) { left: 78%; height: 50%; animation-delay: 0.6s; }
.bg-channel:nth-child(9) { left: 85%; height: 35%; animation-delay: 2s; }
.bg-channel:nth-child(10) { left: 92%; height: 28%; animation-delay: 1.4s; }

/* Red accent on some channels */
.bg-channel:nth-child(4) { background: linear-gradient(to top, rgba(197,3,43,0.15), transparent); }
.bg-channel:nth-child(8) { background: linear-gradient(to top, rgba(197,3,43,0.1), transparent); }

@keyframes channelRise {
    0% { opacity: 0; transform: scaleY(0.3); }
    30% { opacity: 0.12; transform: scaleY(1); }
    70% { opacity: 0.12; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0.3); }
}
/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .page-404 { padding: 32px 20px; }
    .four-o-four__actions { flex-direction: column; width: 100%; max-width: 300px; }
    .four-o-four .btn-primary, .four-o-four .btn-ghost { justify-content: center; }
    .transport__bar { display: none; }
    .quick-links { gap: 6px; }
    .quick-link { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 480px) {
    .transport__display { letter-spacing: -2px; }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/seller-profile.css
   ═══════════════════════════════════════════════════════════════ */

/* WMDM Cubase Theme — Seller Profile Page */

/* ============================================================
   HERO / BANNER
   ============================================================ */

.seller-hero {
    position: relative;
    margin-bottom: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.seller-banner {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.seller-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg) 0%, rgba(15,13,13,0.6) 40%, transparent 70%);
}

/* ============================================================
   PROFILE ROW
   ============================================================ */

.seller-profile-row {
    position: relative;
    z-index: 2;
    margin-top: -50px;
    padding: 0 var(--page-padding);
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.seller-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    object-fit: cover;
    background: var(--bg-elevated);
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.seller-info {
    flex: 1;
    min-width: 0;
    padding-bottom: 4px;
}

.seller-name {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.seller-tagline {
    font-size: 14px;
    color: var(--text);
    margin-top: 4px;
}

.seller-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.seller-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.seller-stat strong {
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 600;
}

.seller-stat svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.seller-stat-divider {
    width: 1px;
    height: 16px;
    background: var(--border-light);
}

/* ============================================================
   PROFILE ACTIONS
   ============================================================ */

.seller-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.seller-play-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
    white-space: nowrap;
}

.seller-play-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197,3,43,0.35);
}

.seller-play-all svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.seller-social-links {
    display: flex;
    gap: 6px;
}

.seller-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    color: var(--text-40);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.seller-social-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(197,3,43,0.06);
}

.seller-social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ============================================================
   TABS
   ============================================================ */

.seller-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-top: 24px;
    padding: 0 var(--page-padding);
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.seller-tab {
    padding: 14px 24px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-40);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    border: none;
    background: none;
}

.seller-tab:hover {
    color: var(--text);
}

.seller-tab.is-active {
    color: var(--text);
}

.seller-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

.tab-panel {
    display: none;
}

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

/* ============================================================
   PAGE LAYOUT COLUMNS (seller page)
   ============================================================ */

.column.left {
    width: var(--sidebar-width);
    flex-shrink: 0;
    margin-top: 25px;
}

/* ============================================================
   ABOUT TAB
   ============================================================ */

.about-content {
    padding-top: 24px;
    display: flex;
    gap: var(--column-gap);
}

.about-main {
    flex: 1;
    min-width: 0;
}

.about-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
}

.about-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 2.5rem;
}

.about-section h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.about-bio p {
    font-size: 14px;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 12px;
}

.about-bio p:last-child {
    margin-bottom: 0;
}

.about-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.about-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-detail-row:first-of-type {
    padding-top: 0;
}

.about-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-40);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100px;
    flex-shrink: 0;
    padding-top: 2px;
}

.about-detail-value {
    font-size: 14px;
    color: var(--text);
    flex: 1;
}

.about-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.about-detail-tag {
    padding: 4px 12px;
    background: rgba(197,3,43,0.06);
    border: 1px solid rgba(197,3,43,0.15);
    border-radius: 100px;
    font-size: 12px;
    color: var(--text);
}

/* ============================================================
   WEBKUL COLLECTION CONTAINER
   ============================================================ */

.wk_mp_design {
    width: 100%;
}

.wk-mp-collection-container {
    display: flex;
    gap: var(--column-gap);
    margin-top: 24px;
}

/* Hide "SELLER'S COLLECTION" heading */
.wk-mp-collection-right .block.block-account {
    display: none !important;
}

/* ---- Sidebar (Shopping Options / Layered Nav) ---- */

.wk-mp-collection-left {
    width: var(--sidebar-width);
    flex-shrink: 0;
    order: 2;
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

.wk-mp-collection-right {
    flex: 1;
    min-width: 0;
    order: 1;
}

/* Style the sidebar filter block */
.wk-mp-collection-left .block.filter {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
}

.wk-mp-collection-left .block-subtitle,
.wk-mp-collection-left .filter-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-bottom: 12px;
}

.wk-mp-collection-left .filter-options-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.wk-mp-collection-left .filter-options-content {
    padding: 8px 0;
}

.wk-mp-collection-left .filter-options-item .item {
    padding: 4px 0;
}

.wk-mp-collection-left .filter-options-item .item a {
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s;
}

.wk-mp-collection-left .filter-options-item .item a:hover {
    color: var(--primary);
}

.wk-mp-collection-left .filter-options-item .count {
    font-size: 11px;
    color: var(--text-40);
}

/* Topselling CMS block in sidebar — hide if empty or style */
.wk-mp-collection-left .block-cms {
    display: none;
}

/* ---- Product List (WMDM cards) ---- */

.wk-mp-collection-right .page-products {
    padding: 0 !important;
}

/* Hide standard Magento toolbar — we use WMDM toolbar instead */
.marketplace-seller-collection .toolbar.toolbar-products:not(.wmdm-toolbar) {
    display: none !important;
}

/* ---- Top Sellers Sidebar ---- */

.wk-mp-collection-left .wmdm-top-sellers {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.wk-mp-collection-left .wmdm-top-sellers__header {
    background: linear-gradient(135deg, var(--primary) 0%, #a30222 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wk-mp-collection-left .wmdm-top-sellers__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wk-mp-collection-left .wmdm-top-sellers__title svg {
    width: 20px;
    height: 20px;
}

.wk-mp-collection-left .wmdm-top-sellers__play-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

.wk-mp-collection-left .wmdm-top-sellers__play-all:hover {
    background: rgba(255,255,255,0.25);
}

.wk-mp-collection-left .wmdm-top-sellers__play-all svg {
    width: 12px;
    height: 12px;
    fill: #fff;
}

.wk-mp-collection-left .wmdm-top-sellers__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

.wk-mp-collection-left .wmdm-top-seller-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease;
}

.wk-mp-collection-left .wmdm-top-seller-item:last-child {
    border-bottom: none;
}

.wk-mp-collection-left .wmdm-top-seller-item:hover {
    background: rgba(197,3,43,0.04);
}

.wk-mp-collection-left .wmdm-top-seller-image {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-elevated);
    display: block;
}

.wk-mp-collection-left .wmdm-top-seller-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wk-mp-collection-left .wmdm-top-seller-info {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    display: block;
    overflow: hidden;
}

.wk-mp-collection-left .wmdm-top-seller-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-mp-collection-left .wmdm-top-seller-item:hover .wmdm-top-seller-name {
    color: var(--primary);
}

.wk-mp-collection-left .wmdm-top-seller-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wk-mp-collection-left .wmdm-top-seller-price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.wk-mp-collection-left .wmdm-top-seller-price--old {
    font-size: 11px;
    color: var(--text-40);
    text-decoration: line-through;
    font-weight: 400;
}

.wk-mp-collection-left .wmdm-top-seller-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.wk-mp-collection-left .wmdm-top-seller-btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.wk-mp-collection-left .wmdm-top-seller-btn svg {
    width: 14px;
    height: 14px;
    display: block;
}

.wk-mp-collection-left .wmdm-top-seller-btn--play {
    background: var(--primary); border-color: var(--primary);
}

.wk-mp-collection-left .wmdm-top-seller-btn--play:hover {
    background: var(--primary-dark); border-color: var(--primary-dark);
}

.wk-mp-collection-left .wmdm-top-seller-btn--play svg {
    margin-left: 2px;
}

.wk-mp-collection-left .wmdm-top-seller-btn--cue {
    background: var(--bg-elevated);
}

.wk-mp-collection-left .wmdm-top-seller-btn--cue:hover {
    background: var(--border);
}

.wk-mp-collection-left .wmdm-top-seller-btn--cue svg {
    fill: var(--text-60);
}

/* ---- Become a Creator CTA ---- */

.wmdm-creator-cta-wrapper {
    margin-bottom: 20px;
}

.wmdm-creator-cta {
    padding: 16px 14px;
    background: linear-gradient(135deg, rgba(197,3,43,0.08) 0%, rgba(180,92,230,0.06) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    text-align: center;
}

.wmdm-creator-cta__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, #a30222 100%);
    border-radius: var(--radius-sm);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.wmdm-creator-cta__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wmdm-creator-cta__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(197,3,43,0.4);
    color: #fff;
}

.wmdm-creator-cta__link:hover::before {
    opacity: 1;
}

.wmdm-creator-cta__link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.wmdm-creator-cta__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.wmdm-creator-cta__label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.wmdm-creator-cta__sub {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.75;
}

/* ---- Pagination (WMDM) ---- */

.marketplace-seller-collection .wmdm-pagination,
.wk-mp-collection-right .wmdm-pagination {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 20px;
}

.marketplace-seller-collection .wmdm-pagination .toolbar-amount,
.wk-mp-collection-right .wmdm-pagination .toolbar-amount {
    color: var(--text);
    font-size: 13px;
}

.marketplace-seller-collection .pages .items .item a,
.marketplace-seller-collection .pages .items .item > span,
.wk-mp-collection-right .pages .items .item a,
.wk-mp-collection-right .pages .items .item > span {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-60) !important;
    border-radius: var(--radius-sm) !important;
}

.marketplace-seller-collection .pages .items .item a:hover,
.wk-mp-collection-right .pages .items .item a:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.marketplace-seller-collection .pages .items .item.current a,
.marketplace-seller-collection .pages .items .item.current > strong,
.wk-mp-collection-right .pages .items .item.current a,
.wk-mp-collection-right .pages .items .item.current > strong {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* ============================================================
   RESPONSIVE — 1100px
   ============================================================ */

@media (max-width: 1200px) {
    .about-sidebar {
        width: var(--sidebar-width-sm);
    }

    .wk-mp-collection-left {
        width: var(--sidebar-width-sm);
    }
}

/* ============================================================
   RESPONSIVE — 900px
   ============================================================ */

@media (max-width: 900px) {
    .seller-profile-row {
        padding: 0 var(--page-padding);
    }

    .seller-tabs {
        padding: 0 var(--page-padding);
    }

    .columns {
        flex-direction: column;
    }

    .column.left {
        width: 100%;
        order: 2;
    }

    .about-content {
        flex-direction: column;
    }

    .about-sidebar {
        width: 100%;
    }

    .wk-mp-collection-container {
        flex-direction: column;
    }

    .wk-mp-collection-left {
        width: 100%;
        order: 2;
    }

    .wk-mp-collection-right {
        order: 1;
    }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */

@media (max-width: 768px) {
    .seller-banner {
        height: 180px;
    }

    .seller-profile-row {
        padding: 0 var(--page-padding);
        flex-wrap: wrap;
        gap: 16px;
    }

    .seller-avatar {
        width: 72px;
        height: 72px;
    }

    .seller-name {
        font-size: 22px;
    }

    .seller-actions {
        width: 100%;
    }

    .seller-tabs {
        padding: 0 var(--page-padding);
    }

    .about-content {
        flex-direction: column;
    }

    .about-sidebar {
        width: 100%;
    }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */

@media (max-width: 480px) {
    .seller-profile-row {
        padding: 0 var(--page-padding);
    }

    .seller-tabs {
        padding: 0 var(--page-padding);
    }

    .seller-stats {
        gap: 12px;
    }

    .seller-stat {
        font-size: 12px;
    }

    .about-detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .about-detail-label {
        width: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/landing.css
   ═══════════════════════════════════════════════════════════════ */

/*
 * Landing Page Styles — cv2 landing page components
 *
 * Covers: .cv2 scoped resets & variables, hero, sections, steps,
 * catalog cards, bundle, social proof, genre browse, final CTA,
 * reveal animations, tag pills, responsive overrides.
 *
 * EXCLUDES: global resets, header/footer, page-wrapper/main,
 * breadcrumbs, player, wmdm-product/card, toast.
 */

/* ═══ CV2 SCOPE: VARIABLES & SCOPED RESETS ═══ */
.cv2 {
  --bg: #08080E;
  --surface: #0F0F18;
  --elevated: #171724;
  /* Intentionally brighter red than :root --primary (#C5032B) — cv2 uses a deeper dark background
     (#08080E vs #0f0d0d) that requires the higher-luminance #E8102E for WCAG contrast compliance. */
  --primary: #E8102E;
  --primary-dark: #C40D25;
  --primary-glow: rgba(232, 16, 46, 0.12);
  --teal: #20D5C4;
  --blue: #5B8DEF;
  --green: #6FCF4A;
  --purple: #A855F7;
  --pink: #EC4899;
  --yellow: #FACC15;
  --amber: #F0A030;
  --cyan: #22D3EE;
  --text: #E8E4DF;
  --text-muted: #8A8698;
  --text-dim: #4A475E;
  --border: #1C1C2C;
  --border-light: #28283A;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.5);
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Outfit', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --header-height: 140px;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

/* Scoped resets — only inside .cv2, won't affect global page */
.cv2 *,
.cv2 *::before,
.cv2 *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.cv2 a { color: inherit; text-decoration: none; }
.cv2 button { font-family: var(--font-body); cursor: pointer; border: none; background: none; color: inherit; }
.cv2 h1, .cv2 h2, .cv2 h3, .cv2 h4,
.cv2 p, .cv2 span, .cv2 div, .cv2 a, .cv2 button, .cv2 li { color: inherit; }
.cv2 h1, .cv2 h2, .cv2 h3 { margin: 0; padding: 0; border: none; }

/* Noise grain overlay — scoped to .cv2, not body */
.cv2::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
/* ═══ HERO ═══ */
.cv2 .hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 60px 0;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Perspective grid */
.cv2 .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(232, 16, 46, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 16, 46, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 75%);
}

/* Radial bloom */
.cv2 .hero-bloom {
  position: absolute;
  top: 15%;
  right: -5%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 16, 46, 0.07) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: cv2-bloom 25s ease-in-out infinite;
}

@keyframes cv2-bloom {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%       { transform: translate(-40px, 30px) scale(1.15); opacity: 1; }
}

/* Diagonal accent stripes */
.cv2 .hero-stripe {
  position: absolute;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  opacity: 0.12;
  transform-origin: top center;
}
.cv2 .hero-stripe-1 { top: -20%; right: 25%; height: 140%; transform: rotate(22deg); }
.cv2 .hero-stripe-2 { top: -10%; right: 35%; height: 130%; transform: rotate(22deg); opacity: 0.06; }

.cv2 .hero-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.cv2 .hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--primary);
  font-weight: 500;
  padding-left: 20px;
  border-left: 2px solid var(--primary);
  margin-bottom: 40px;
  animation: cv2-fade-up 0.7s var(--ease) both;
}

.cv2 .hero h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -2px;
  margin-bottom: 32px;
  animation: cv2-fade-up 0.7s var(--ease) 0.08s both;
}
.cv2 .hero h1 .line { display: block; }
.cv2 .hero h1 .accent {
  font-style: italic;
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, #FF4060 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cv2 .hero-sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 48px;
  animation: cv2-fade-up 0.7s var(--ease) 0.16s both;
}

/* Hero tags */
.cv2 .hero-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
  animation: cv2-fade-up 0.7s var(--ease) 0.24s both;
}

.cv2 .hero-tag {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease);
  border-radius: 4px;
}
.cv2 .hero-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cv2 .hero-tag:hover { transform: translateY(-2px); }

/* Tag colour variants */
.cv2 .tag-cubase::before { background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); }
.cv2 .tag-cubase:hover   { border-color: rgba(232, 16, 46, 0.4); background: rgba(232, 16, 46, 0.06); }

.cv2 .tag-stem::before { background: var(--teal); }
.cv2 .tag-stem:hover   { border-color: rgba(32, 213, 196, 0.4); background: rgba(32, 213, 196, 0.06); }

.cv2 .tag-midi::before { background: var(--yellow); }
.cv2 .tag-midi:hover   { border-color: rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.06); }

.cv2 .tag-sample::before { background: var(--purple); }
.cv2 .tag-sample:hover   { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.06); }

.cv2 .tag-vocal::before { background: var(--pink); }
.cv2 .tag-vocal:hover   { border-color: rgba(236, 72, 153, 0.4); background: rgba(236, 72, 153, 0.06); }

.cv2 .tag-stock::before { background: var(--green); }
.cv2 .tag-stock:hover   { border-color: rgba(111, 207, 74, 0.4); background: rgba(111, 207, 74, 0.06); }

.cv2 .tag-license::before { background: var(--amber); }
.cv2 .tag-license:hover   { border-color: rgba(240, 160, 48, 0.4); background: rgba(240, 160, 48, 0.06); }

/* Hero stats strip */
.cv2 .hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 32px 0;
  margin-top: 48px;
  border-top: 1px solid var(--border);
  animation: cv2-fade-up 0.7s var(--ease) 0.32s both;
}
.cv2 .hero-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 36px;
}
.cv2 .hero-stat:first-child { padding-left: 0; }
.cv2 .hero-stat + .hero-stat { border-left: 1px solid var(--border); }

.cv2 .hero-stat-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
}
.cv2 .hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  font-weight: 400;
}

@keyframes cv2-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ═══ SECTIONS ═══ */
.cv2 .section {
  padding: 100px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.cv2 .section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--primary);
  font-weight: 500;
  padding-left: 16px;
  border-left: 2px solid var(--primary);
  margin-bottom: 20px;
}

.cv2 .section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.05;
  margin-bottom: 20px;
  color: var(--text);
}
.cv2 .section-title em { font-style: italic; color: var(--primary); }

.cv2 .section-desc {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 520px;
  font-weight: 400;
  line-height: 1.7;
}

/* Section divider */
.cv2 .section-divider {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.2;
}
/* ═══ STEPS / HOW IT WORKS ═══ */
.cv2 .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.cv2 .step-card {
  padding: 40px 32px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--primary);
  transition: background-color 0.4s var(--ease);
}
.cv2 .step-card:first-child { border-radius: 4px 0 0 4px; }
.cv2 .step-card:last-child  { border-radius: 0 4px 4px 0; }
.cv2 .step-card:hover { background: var(--elevated); }

.cv2 .step-num {
  font-family: var(--font-mono);
  font-size: 80px;
  font-weight: 700;
  color: var(--border);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -4px;
}

.cv2 .step-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--primary-glow);
}
.cv2 .step-icon svg { width: 24px; height: 24px; stroke: var(--primary); fill: none; stroke-width: 1.5; }

.cv2 .step-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 10px;
}
.cv2 .step-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
/* ═══ CATALOG CARDS ═══ */
.cv2 .catalog-header { margin-bottom: 60px; }

.cv2 .catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.cv2 .catalog-card {
  background: var(--surface);
  overflow: hidden;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
  cursor: pointer;
  display: block;
  position: relative;
}
.cv2 .catalog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  transition: height 0.4s var(--ease);
}
.cv2 .catalog-card:hover { background: var(--elevated); transform: translateY(-4px); }
.cv2 .catalog-card:hover::before { height: 3px; }

/* Card type accent colours — top border */
.cv2 .card-cubase::before   { background: var(--primary); }
.cv2 .card-stems::before    { background: var(--teal); }
.cv2 .card-midi::before     { background: var(--yellow); }
.cv2 .card-samples::before  { background: var(--purple); }
.cv2 .card-acapella::before { background: var(--pink); }
.cv2 .card-vocals::before   { background: var(--cyan); }
.cv2 .card-stock::before    { background: var(--green); }
.cv2 .card-licenses::before { background: var(--amber); }

/* Card visual area */
.cv2 .card-visual {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cv2 .card-cubase .card-visual   { background: linear-gradient(160deg, #14080A 0%, #1E0810 100%); }
.cv2 .card-stems .card-visual    { background: linear-gradient(160deg, #081412 0%, #0A1E1A 100%); }
.cv2 .card-midi .card-visual     { background: linear-gradient(160deg, #141208 0%, #1E1A0A 100%); }
.cv2 .card-samples .card-visual  { background: linear-gradient(160deg, #100820 0%, #180C30 100%); }
.cv2 .card-acapella .card-visual { background: linear-gradient(160deg, #18081A 0%, #200A22 100%); }
.cv2 .card-vocals .card-visual   { background: linear-gradient(160deg, #081018 0%, #0A1520 100%); }
.cv2 .card-stock .card-visual    { background: linear-gradient(160deg, #0A1008 0%, #10180A 100%); }
.cv2 .card-licenses .card-visual { background: linear-gradient(160deg, #141008 0%, #1E160A 100%); }

/* Card icon */
.cv2 .card-icon {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease-spring);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cv2 .catalog-card:hover .card-icon { transform: scale(1.06); }
.cv2 .card-icon svg { width: 32px; height: 32px; stroke-width: 1.5; fill: none; stroke: currentColor; }

.cv2 .card-cubase .card-icon   { background: rgba(232, 16, 46, 0.1);  color: var(--primary); }
.cv2 .card-stems .card-icon    { background: rgba(32, 213, 196, 0.1); color: var(--teal); }
.cv2 .card-midi .card-icon     { background: rgba(250, 204, 21, 0.1); color: var(--yellow); }
.cv2 .card-samples .card-icon  { background: rgba(168, 85, 247, 0.1); color: var(--purple); }
.cv2 .card-acapella .card-icon { background: rgba(236, 72, 153, 0.1); color: var(--pink); }
.cv2 .card-vocals .card-icon   { background: rgba(34, 211, 238, 0.1); color: var(--cyan); }
.cv2 .card-stock .card-icon    { background: rgba(111, 207, 74, 0.1); color: var(--green); }
.cv2 .card-licenses .card-icon { background: rgba(240, 160, 48, 0.1); color: var(--amber); }

/* Card body */
.cv2 .card-body { padding: 24px; }
.cv2 .card-title { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.cv2 .card-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

.cv2 .card-meta  { display: flex; align-items: center; gap: 8px; }
.cv2 .card-from  { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.cv2 .card-price { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }

.cv2 .card-cubase .card-price   { color: var(--primary); }
.cv2 .card-stems .card-price    { color: var(--teal); }
.cv2 .card-midi .card-price     { color: var(--yellow); }
.cv2 .card-samples .card-price  { color: var(--purple); }
.cv2 .card-acapella .card-price { color: var(--pink); }
.cv2 .card-vocals .card-price   { color: var(--cyan); }
.cv2 .card-stock .card-price    { color: var(--green); }
.cv2 .card-licenses .card-price { color: var(--amber); }

.cv2 .card-arrow {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  color: var(--text-dim);
}
.cv2 .catalog-card:hover .card-arrow { background: var(--primary); border-color: var(--primary); color: #fff; }
.cv2 .card-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ═══ BUNDLE ═══ */
.cv2 .bundle-section {
  padding: 100px 60px;
  background: var(--bg);
}

.cv2 .bundle-card {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  background: linear-gradient(140deg, #10060A 0%, #1A0810 40%, #10060A 100%);
  border: 1px solid rgba(232, 16, 46, 0.12);
  border-radius: 4px;
}

.cv2 .bundle-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.cv2 .bundle-visual::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 16, 46, 0.15), transparent 70%);
  animation: cv2-bp 5s ease-in-out infinite;
}
@keyframes cv2-bp {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}

.cv2 .bundle-img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}

.cv2 .bundle-content {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cv2 .bundle-tag {
  font-family: var(--font-mono);
  display: inline-flex;
  padding: 5px 14px;
  border-radius: 2px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  width: fit-content;
  margin-bottom: 24px;
}

.cv2 .bundle-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 16px;
  color: var(--text);
}

.cv2 .bundle-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 400px;
}

.cv2 .bundle-pricing {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
}

.cv2 .bundle-price-current {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -2px;
}

.cv2 .bundle-btn {
  padding: 14px 32px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 4px;
  width: fit-content;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cv2 .bundle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(232, 16, 46, 0.25);
  background: var(--primary-dark);
}
.cv2 .bundle-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* ═══ SOCIAL PROOF ═══ */
.cv2 .proof-section {
  padding: 100px 60px;
  background: var(--surface);
}

.cv2 .proof-inner { max-width: 1400px; margin: 0 auto; }

.cv2 .proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.cv2 .proof-card {
  padding: 40px 32px;
  background: var(--bg);
  position: relative;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
  border-left: 2px solid var(--border);
}
.cv2 .proof-card:hover { border-left-color: var(--primary); background: var(--elevated); }

.cv2 .proof-quote-mark {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.3;
  position: absolute;
  top: 16px;
  right: 24px;
}

.cv2 .proof-quote {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  font-style: italic;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.cv2 .proof-author  { display: flex; align-items: center; gap: 14px; }

.cv2 .proof-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

.cv2 .proof-name { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: -0.3px; }
.cv2 .proof-role { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.5px; }
/* ═══ GENRE BROWSE ═══ */
.cv2 .genres-header { display: flex; justify-content: space-between; align-items: flex-end; }

.cv2 .genre-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }

.cv2 .genre-pill {
  font-family: var(--font-mono);
  padding: 8px 20px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cv2 .genre-pill:hover  { border-color: var(--text-dim); color: var(--text); }
.cv2 .genre-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }

.cv2 .genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 40px;
}

.cv2 .genre-product {
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  position: relative;
}
.cv2 .genre-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(232, 16, 46, 0.08);
}

.cv2 .genre-product-link { display: block; text-decoration: none; color: inherit; }

.cv2 .genre-product-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: var(--elevated);
}
.cv2 .genre-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.cv2 .genre-product:hover .genre-product-img img { transform: scale(1.04); }

.cv2 .genre-product-info { padding: 14px 16px 12px; }

.cv2 .genre-product-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv2 .genre-product-creator { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.cv2 .genre-product-price   { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--text); }

.cv2 .genre-product-actions {
  position: absolute;
  bottom: 11px;
  right: 14px;
  display: flex;
  gap: 4px;
  z-index: 3;
}

.cv2 .genre-btn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
.cv2 .genre-btn-play  { background: var(--primary); color: #fff; }
.cv2 .genre-btn-play:hover  { transform: scale(1.1); box-shadow: 0 4px 12px rgba(232, 16, 46, 0.35); }
.cv2 .genre-btn-queue { background: var(--border-light); color: var(--text); font-weight: 700; font-size: 15px; }
.cv2 .genre-btn-queue:hover { transform: scale(1.1); background: var(--text-dim); }
/* ═══ FINAL CTA ═══ */
.cv2 .final-cta {
  padding: 120px 60px;
  text-align: center;
  position: relative;
  background: var(--bg);
}
.cv2 .final-cta .section-label { border-left: none; padding-left: 0; text-align: center; }
.cv2 .final-cta .section-title { max-width: 700px; margin: 0 auto 16px; }
.cv2 .final-cta .section-desc  { max-width: 480px; margin: 0 auto 40px; text-align: center; }
/* ═══ REVEAL ANIMATIONS ═══ */
.cv2 .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.cv2 .reveal.visible { opacity: 1; transform: translateY(0); }
.cv2 .reveal-d1 { transition-delay: 0.08s; }
.cv2 .reveal-d2 { transition-delay: 0.16s; }
.cv2 .reveal-d3 { transition-delay: 0.24s; }
/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .cv2 .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .cv2 .genre-grid   { grid-template-columns: repeat(2, 1fr); }
  .cv2 .bundle-card  { grid-template-columns: 1fr; }
  .cv2 .proof-grid   { grid-template-columns: repeat(2, 1fr); }
  .cv2 .hero-stats   { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .cv2 .hero    { padding: 80px 24px 0; }
  .cv2 .section { padding: 60px 24px; }

  .cv2 .catalog-grid,
  .cv2 .genre-grid,
  .cv2 .steps-grid,
  .cv2 .proof-grid { grid-template-columns: 1fr; }

  .cv2 .genres-header { flex-direction: column; align-items: flex-start; }
  .cv2 .genre-pills  { gap: 6px; }
  .cv2 .genre-pill   { padding: 7px 14px; font-size: 11px; }

  .cv2 .bundle-content { padding: 32px 24px; }
  .cv2 .bundle-title   { font-size: 32px; }

  .cv2 .bundle-section,
  .cv2 .proof-section,
  .cv2 .final-cta { padding-left: 24px; padding-right: 24px; }

  .cv2 .hero-stats { gap: 0; flex-direction: column; }
  .cv2 .hero-stat  { padding: 12px 0; }
  .cv2 .hero-stat + .cv2 .hero-stat { border-left: none; border-top: 1px solid var(--border); }

  .cv2 .step-card:first-child,
  .cv2 .step-card:last-child { border-radius: 0; }

  .cv2 .hero-tags { gap: 6px; }
}

@media (max-width: 480px) {
  .cv2 .hero-tag { padding: 7px 14px; font-size: 12px; }
}

/* Force-close dropdowns after AJAX navigation (added by ajax-nav.js) */
.header-nav.nav-dropdowns-closed .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LICENSES SECTION — Reusable license tier cards for landing pages
   ═══════════════════════════════════════════════════════════════════════════ */
.cubase-landing .lic-section {
  padding: 100px 60px; background: var(--bg); position: relative; overflow: hidden;
  font-family: var(--font-display); color: var(--text); -webkit-font-smoothing: antialiased;
  width: 100%;
}
.cubase-landing .lic-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 15% 50%, rgba(197,3,43,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 50%, rgba(197,3,43,0.15) 0%, transparent 70%);
  opacity: 0.5;
}
.cubase-landing .lic-section::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.025;
  background:
    linear-gradient(var(--primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--primary) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
}
.cubase-landing .lic-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.cubase-landing .lic-header { text-align: center; margin-bottom: 64px; }

/* Eyebrow */
.cubase-landing .lic-eyebrow {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 4px; color: var(--primary); font-weight: 500;
  margin-bottom: 20px; display: inline-block;
}
.cubase-landing .lic-eyebrow::before, .cubase-landing .lic-eyebrow::after {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: var(--primary); vertical-align: middle; opacity: 0.4;
}
.cubase-landing .lic-eyebrow::before { margin-right: 16px; }
.cubase-landing .lic-eyebrow::after { margin-left: 16px; }

/* Title */
.cubase-landing .lic-title {
  font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px);
  font-weight: 700; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 16px;
}
.cubase-landing .lic-title em {
  font-style: normal; font-weight: 700; color: var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary), white 25%) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cubase-landing .lic-subtitle {
  font-size: 17px; color: var(--text-60); max-width: 580px; margin: 0 auto; line-height: 1.65;
}

/* Format pills */
.cubase-landing .lic-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.cubase-landing .lic-format-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-light); background: rgba(255,255,255,0.02);
  color: var(--text); transition: border-color 0.25s ease, background-color 0.25s ease;
}
.cubase-landing .lic-format-pill svg {
  width: 14px; height: 14px; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.cubase-landing .lic-format-pill.included svg { stroke: var(--primary); }
.cubase-landing .lic-format-pill.included { border-color: color-mix(in srgb, var(--primary), transparent 70%); }
.cubase-landing .lic-format-pill.excluded { opacity: 0.5; border-style: dashed; }
.cubase-landing .lic-format-pill.excluded svg { stroke: var(--text-40); }

/* Formats note */
.cubase-landing .lic-formats-note {
  font-size: 13px; color: var(--text-20); text-align: center; margin-top: 16px;
  font-family: var(--font-mono); letter-spacing: 0.3px;
}
.cubase-landing .lic-formats-note svg {
  width: 13px; height: 13px; stroke: var(--text-20); stroke-width: 2;
  fill: none; vertical-align: -2px; margin-right: 4px;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Card grid */
.cubase-landing .lic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

/* Individual card */
.cubase-landing .lic-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: rgba(26,21,23,0.92);
  border: 1px solid var(--border-light);
  padding: 40px 32px 36px; display: flex; flex-direction: column;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cubase-landing .lic-card:hover {
  background: rgba(37,32,34,0.8); border-color: var(--border);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.2), 0 0 0 1px var(--border);
}

/* Popular badge */
.cubase-landing .lic-card.popular {
  border-color: var(--primary);
  box-shadow: 0 0 40px rgba(197,3,43,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.cubase-landing .lic-card.popular::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(197,3,43,0.15) 0%, transparent 50%);
  opacity: 0.5;
}
.cubase-landing .lic-card.popular:hover {
  box-shadow: 0 24px 48px rgba(0,0,0,0.3), 0 0 60px rgba(197,3,43,0.15);
}
.cubase-landing .lic-popular-tag {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 2px; font-weight: 600;
  padding: 6px 14px; border-radius: 100px;
  background: var(--primary); color: #fff;
}

/* Card icon */
.cubase-landing .lic-card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 24px;
  background: rgba(197,3,43,0.15); border: 1px solid color-mix(in srgb, var(--primary), transparent 70%);
  position: relative; z-index: 1;
}
.cubase-landing .lic-card-icon svg {
  width: 24px; height: 24px; stroke: var(--primary); stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Card content */
.cubase-landing .lic-card-type {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 3px; color: var(--primary); font-weight: 600; margin-bottom: 8px;
  position: relative; z-index: 1;
}
.cubase-landing .lic-card-name {
  font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.5px; margin-bottom: 8px; position: relative; z-index: 1;
}
.cubase-landing .lic-card-tagline {
  font-size: 14px; color: var(--text-60); margin-bottom: 28px;
  position: relative; z-index: 1; line-height: 1.5;
}

/* Feature list */
.cubase-landing .lic-features {
  list-style: none; padding: 0; margin: 0 0 auto 0; display: flex;
  flex-direction: column; gap: 12px; position: relative; z-index: 1;
}
.cubase-landing .lic-features li {
  display: flex; align-items: flex-start; gap: 12px; font-size: 14px;
  color: var(--text-60); line-height: 1.5;
}
.cubase-landing .lic-features li svg {
  width: 18px; height: 18px; min-width: 18px; margin-top: 1px;
  stroke: var(--primary); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.cubase-landing .lic-features li.disabled { opacity: 0.7; }
.cubase-landing .lic-features li.disabled svg { stroke: var(--primary); opacity: 0.85; }

/* Divider + CTA area */
.cubase-landing .lic-card-bottom {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--border-light);
  position: relative; z-index: 1;
}
.cubase-landing .lic-card-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 24px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 14px; text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.cubase-landing .lic-card-cta svg {
  width: 16px; height: 16px; stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s ease;
}
.cubase-landing .lic-card-cta:hover svg { transform: translateX(3px); }

/* Ghost CTA */
.cubase-landing .lic-card-cta.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.cubase-landing .lic-card-cta.ghost:hover {
  background: rgba(197,3,43,0.15); border-color: var(--primary);
  color: var(--primary);
}

/* Filled CTA */
.cubase-landing .lic-card-cta.filled { background: var(--primary); color: #fff; border: none; }
.cubase-landing .lic-card-cta.filled:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(197,3,43,0.15);
}

/* Note below CTA */
.cubase-landing .lic-card-note {
  font-size: 12px; color: var(--text-20); text-align: center;
  margin-top: 12px; position: relative; z-index: 1;
}

/* Footer line */
.cubase-landing .lic-footer {
  text-align: center; margin-top: 48px;
  font-size: 14px; color: var(--text-60);
}
.cubase-landing .lic-footer a {
  color: var(--primary); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.cubase-landing .lic-footer a:hover { border-bottom-color: var(--primary); }

/* Reveal animations */
.cubase-landing .lic-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cubase-landing .lic-reveal.visible { opacity: 1; transform: translateY(0); }
.cubase-landing .lic-reveal-d1 { transition-delay: 0.08s; }
.cubase-landing .lic-reveal-d2 { transition-delay: 0.16s; }
.cubase-landing .lic-reveal-d3 { transition-delay: 0.24s; }
.cubase-landing .lic-reveal-d4 { transition-delay: 0.32s; }

/* Responsive */
@media (max-width: 960px) {
  .cubase-landing .lic-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 16px; }
  .cubase-landing .lic-section { padding: 60px 24px; }
  .cubase-landing .lic-card.popular { order: -1; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .cubase-landing .lic-grid { gap: 14px; }
  .cubase-landing .lic-card { padding: 32px 24px 28px; }
  .cubase-landing .lic-card-name { font-size: 24px; }
}

/* ── Currently playing queue item ── */
.queue-item.is-current { background: rgba(255,255,255,0.04); }
.queue-item.is-current .queue-item__num { color: var(--primary); font-weight: 700; }
.queue-item.is-current .queue-item__title { color: var(--primary); }

.queue-item:hover .queue-item__num { opacity: 0; }
.queue-item.is-current .queue-item__remove { opacity: 0; }
.queue-item.is-current:hover .queue-item__remove { opacity: 1; }

/* ── Fix: Prevent queue item rebuild flash ── */
.queue-item { animation: none !important; }

/* ── Clean border hover on all transport/control buttons ── */
.player-btn--prev,
.player-btn--next,
.player-btn--vol,
.player-btn--queue,
.player-btn--prev:hover,
.player-btn--next:hover,
.player-btn--vol:hover,
.player-btn--queue:hover,
.player-btn--close:hover {
    border-color: rgba(255,255,255,0.15);
    background: transparent;
    color: #fff;
}
.player-btn--queue.is-active {
    border-color: rgba(197,3,43,0.3);
}
/* ═══════════════════════════════════════════════════════════════
   SOURCE: pages/about-page.css
   ═══════════════════════════════════════════════════════════════ */

/* ── About Page ── */
.about-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
/* ── Contact page full-width override ── */
.contact-page {
    max-width: 1400px;
}
.about-hero {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-light);
}

.about-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.about-hero__sub {
    font-size: 18px;
    color: var(--text-60);
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto;
}

/* ── Stats Grid ── */
.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    padding: 2.25rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

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

.about-stat__number {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.about-stat__label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-60);
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.about-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1rem;
}

.about-section p {
    font-size: 16px;
    color: var(--text-80);
    line-height: 1.75;
    margin: 0 0 0.85rem;
}

.about-section p:last-child {
    margin-bottom: 0;
}

.about-section strong {
    color: var(--text);
    font-weight: 600;
}

/* ── CTA ── */
.about-cta {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3.5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-light);
}

.about-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.35rem 3.5rem;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    min-width: 260px;
}

.about-cta__btn:hover {
    transform: translateY(-2px);
}

.about-cta__btn--primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(197, 3, 43, 0.3);
}

.about-cta__btn--primary:hover {
    background: var(--primary-dark);
    color: #fff;
    box-shadow: 0 6px 24px rgba(197, 3, 43, 0.4);
}

.about-cta__btn--secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

.about-cta__btn--secondary:hover {
    background: var(--bg-hover);
    border-color: var(--text-40);
    color: var(--text);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        overflow: hidden;
        padding: 1.5rem;
    }
    .about-stat__number {
        font-size: 1.75rem;
    }
}

@media (max-width: 600px) {
    .about-page {
        padding: 1.5rem 1.25rem 3rem;
    }
    .about-hero h1 {
        font-size: 1.75rem;
    }
    .about-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .about-cta__btn {
        min-width: unset;
    }
}

/* ── Override CMS page defaults ── */
.cms-about .page-title-wrapper,
.cms-wmdm-faqs .page-title-wrapper,
.cms-guide-to-success .page-title-wrapper,
.cms-getting-started .page-title-wrapper {
    display: none;
}

.cms-about .column.main,
.cms-wmdm-faqs .column.main,
.cms-guide-to-success .column.main,
.cms-getting-started .column.main {
    padding-top: 0;
    font-size: 16px;
}

/* ── FAQ Accordion ── */
.faq-group {
    margin-bottom: 3rem;
}

.faq-group h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.faq-item {
    border-bottom: 1px solid var(--border-light);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item summary {
    display: flex;
    align-items: center;
    padding: 1.1rem 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    gap: 0.75rem;
    transition: color 0.2s;
}

.faq-item summary:hover {
    color: var(--primary);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border-light);
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-60);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.faq-item[open] summary::before {
    content: '−';
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.faq-item__answer {
    padding: 0 0 1.25rem 2.75rem;
    font-size: 16px;
    color: var(--text-80);
    line-height: 1.75;
}

.faq-item__answer p {
    margin: 0 0 0.75rem;
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}

.faq-item__answer ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.faq-item__answer li {
    margin-bottom: 0.4rem;
    line-height: 1.65;
    font-size: 16px;
    color: var(--text-80);
}

.faq-item__answer a {
    color: var(--primary);
    text-decoration: underline;
}

.faq-item__answer strong {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 600px) {
    .faq-item summary {
        font-size: 15px;
        padding: 1rem 0;
    }
    .faq-item__answer {
        padding-left: 2.25rem;
        font-size: 15px;
    }
    .faq-item summary::before {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 1.1rem;
    }
}
/* ── Contact Page ── */
.contact-index-index .contact-container,
.contact-index-index .contact-form-wrap.col-sm-12 {
    max-width: none;
    padding: 0;
    margin: 0;
    flex: none;
    width: 100%;
}

.contact-index-index .page-title-wrapper {
    display: none;
}

.contact-index-index .column.main {
    padding-top: 0;
    font-size: 16px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2.5rem;
    align-items: start;
}

/* ── Info Cards ── */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-card {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.contact-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 3, 43, 0.1);
    border-radius: 10px;
    margin-bottom: 0.85rem;
    color: var(--primary);
}

.contact-card__icon svg {
    width: 22px;
    height: 22px;
}

.contact-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.4rem;
}

.contact-card p {
    font-size: 14px;
    color: var(--text-60);
    line-height: 1.6;
    margin: 0;
}

.contact-card strong {
    color: var(--text);
}

.contact-card__link {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.contact-card__link:hover {
    color: var(--primary-dark, #a3022b);
    text-decoration: underline;
}

/* ── Form Card ── */
.contact-form-card {
    padding: 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.contact-form-card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1.75rem;
}

.contact-form-card .form.contact {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-form-card .form.contact .fieldset,
.contact-form-card .form.contact .legend,
.contact-form-card .form.contact .field.note,
.contact-form-card .form.contact .actions-toolbar {
    display: none;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.contact-form__field {
    margin-bottom: 1.25rem;
}

.contact-form__field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-60);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.contact-form__field .req {
    color: var(--primary);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated, #1a1a1a);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm, 6px);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    resize: vertical;
    min-height: 140px;
}

.contact-form__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.contact-form__field select option {
    background: var(--bg-card, #fff);
    color: var(--text, #222);
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: var(--text-40, #666);
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    outline: none !important;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(197, 3, 43, 0.12);
}


/* Validation error styling */
.contact-form__field input.mage-error,
.contact-form__field textarea.mage-error {
    border-color: var(--primary);
}

.contact-form__field div.mage-error {
    font-size: 13px;
    color: var(--primary);
    margin-top: 0.35rem;
}

/* Submit button */
.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.15rem 2rem;
    margin-top: 0.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 6px);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(197, 3, 43, 0.3);
}

.contact-submit:hover {
    background: var(--primary-dark, #a3022b);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(197, 3, 43, 0.4);
    color: #fff;
}

.contact-submit:active {
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-sidebar {
        order: 2;
    }
    .contact-form-card {
        order: 1;
    }
}

@media (max-width: 600px) {
    .contact-form__row {
        grid-template-columns: 1fr;
    }
    .contact-form-card {
        padding: 1.5rem;
    }
    .contact-form-card h2 {
        font-size: 1.25rem;
    }
}

/* ── CLS FIX — Homepage hero stabilization ──
   The CMS <style> block is in <body>, parsed AFTER first paint.
   We must define hero dimensions in <head> CSS so the hero has a
   stable size at first paint, preventing layout shifts. */
.cubase-landing {
  --header-height: 140px;
}
.cubase-landing .hero,
section.hero {
  position: relative;
  overflow: hidden;
  contain: layout style;
  min-height: calc(100vh - 140px);
  min-height: calc(100dvh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 40px 60px;
  background-color: var(--bg);
}
@media (max-width: 768px) {
  .cubase-landing .hero,
  section.hero {
    padding: 100px 24px 60px;
  }
}

/* ── MODAL / POPUP — Essential hiding rules ──
   Previously in styles-m.css. Modals are JS-rendered by KnockoutJS
   and must be hidden until triggered via ._show class. */
.modal-popup,
.modal-slide,
.custom-slide {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 900;
  transition: visibility 0s .3s, opacity .3s ease;
  pointer-events: none;
}
.modal-popup._show,
.modal-slide._show,
.custom-slide._show {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease;
  pointer-events: auto;
}
.modal-popup .modal-inner-wrap,
.modal-slide .modal-inner-wrap {
  background: var(--bg-card, #1a1517);
  color: var(--text, #f5f5f7);
  box-shadow: 0 0 12px 2px rgba(0,0,0,.35);
  opacity: 1;
  pointer-events: auto;
}
.modal-popup .modal-inner-wrap {
  margin: 5rem auto;
  width: 75%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.modal-popup._show .modal-inner-wrap {
  transform: translateY(0);
}
.modal-slide .modal-inner-wrap {
  height: 100%;
  overflow-y: auto;
  position: static;
  transform: translateX(100%);
  transition: transform .3s ease-in-out;
}
.modal-slide._show .modal-inner-wrap {
  transform: translateX(0);
}
.modals-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.55);
  z-index: 899;
}
.modal-popup .action-close,
.modal-slide .action-close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-60, #a1a1a6);
  font-size: 24px;
}
.modal-popup .modal-header,
.modal-popup .modal-content,
.modal-popup .modal-footer {
  padding: 1.5rem 2rem;
}
/* Authentication popup — hidden until JS triggers it */
.authentication-wrapper, .block-authentication, [data-block="authentication"], #authenticationPopup { display: none !important; }
.authentication-wrapper {
  position: relative;
  z-index: 1;
}
.authentication-dropdown {
  display: none;
}
.authentication-wrapper._show .authentication-dropdown {
  display: block;
}
/* Block minicart sidebar — hidden until opened */
.block-minicart {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAGEFAN BLOG — Dark Theme Styles
   Covers: blog list, post view, sidebar widgets, pagination
   Theme: WMDM/cubase  |  store: cbten
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PAGE-LEVEL LAYOUT (blog pages use 2columns-right) ──────────────── */

.blog-page-list.page-layout-2columns-right .columns,
.blog-post-view.page-layout-2columns-right .columns,
.blog-category-view.page-layout-2columns-right .columns,
.blog-search-index.page-layout-2columns-right .columns,
.blog-tag-view.page-layout-2columns-right .columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: var(--column-gap) !important;
    align-items: flex-start;
}

/* Kill the Magento clearfix pseudo-element that creates ghost flex items */
.blog-page-list.page-layout-2columns-right .columns::after,
.blog-post-view.page-layout-2columns-right .columns::after,
.blog-category-view.page-layout-2columns-right .columns::after,
.blog-search-index.page-layout-2columns-right .columns::after,
.blog-tag-view.page-layout-2columns-right .columns::after {
    content: none !important;
}

/* Main column: flex-grow, takes ~70% */
.blog-page-list.page-layout-2columns-right .column.main,
.blog-post-view.page-layout-2columns-right .column.main,
.blog-category-view.page-layout-2columns-right .column.main,
.blog-search-index.page-layout-2columns-right .column.main,
.blog-tag-view.page-layout-2columns-right .column.main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    float: none !important;
    width: auto !important;
    max-width: var(--content-width) !important; margin: 0 auto;
    order: 1 !important;
    padding-left: 0 !important;
}

/* Sidebar: fixed width, right side */
.blog-page-list.page-layout-2columns-right .sidebar.sidebar-additional,
.blog-post-view.page-layout-2columns-right .sidebar.sidebar-additional,
.blog-category-view.page-layout-2columns-right .sidebar.sidebar-additional,
.blog-search-index.page-layout-2columns-right .sidebar.sidebar-additional,
.blog-tag-view.page-layout-2columns-right .sidebar.sidebar-additional {
    flex: 0 0 var(--sidebar-width) !important;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    float: none !important;
    order: 2 !important;
    overflow: hidden;
}

/* Blog page title */
.blog-page-list .page-title-wrapper .page-title,
.blog-category-view .page-title-wrapper .page-title,
.blog-post-view .page-title-wrapper .page-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text);
    line-height: 1.15;
    margin-bottom: 8px;
}

/* ── 2. POST LIST GRID ─────────────────────────────────────────────────── */

.post-list-wrapper {
    width: 100%;
}

ol.post-list.modern,
ol.post-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Hide the empty JS addthis sentinel list item */
ol.post-list li.hidden {
    display: none !important;
}

/* ── 3. POST CARD ──────────────────────────────────────────────────────── */

li.post-item.post-holder {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.post-item .post-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.post-item .post-container:hover {
    border-color: var(--border-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── 4. POST IMAGE AREA — 16:9 aspect ratio ────────────────────────────── */

.post-item .post-image {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.post-item .post-image .image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    overflow: hidden;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .post-item .post-image .image-container {
        padding-top: 56.25%;
        height: 0;
    }
    .post-item .post-image .image-container .image-wrap {
        position: absolute;
        inset: 0;
    }
}

.post-item .post-image .image-wrap {
    display: block;
    width: 100%;
    height: 100%;
}

.post-item .post-image .bg-img,
.post-item .post-image .animation-type-zoom.bg-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--bg);
    transition: transform 0.45s var(--ease-out);
    will-change: transform;
}

.post-item .post-container:hover .bg-img,
.post-item .post-container:hover .animation-type-zoom.bg-img {
    transform: scale(1.06);
}

/* Lazy-load reveal: mfblogunveil gets background set by JS */
.bg-img.mfblogunveil {
    background-color: var(--sk-base);
}

/* ── 5. CATEGORY BADGE (overlaid on image) ─────────────────────────────── */

.post-item .post-image .post-category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.post-item .post-image .post-category .category-name {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(197, 3, 43, 0.88);
    color: #fff;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: 20px;
    text-decoration: none;
    line-height: 1.5;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease;
}

.post-item .post-image .post-category .category-name:hover {
    background: var(--primary);
}

/* ── 6. POST INFO (card body) ─────────────────────────────────────────── */

.post-item .post-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
    gap: 10px;
}

/* Post title */
.post-item .post-title-wrap {
    margin: 0;
}

.post-item .post-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.3px;
}

.post-item .post-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-item .post-title a:hover {
    color: var(--primary);
}

/* Post meta line: author + date */
.post-item .post-data-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
}

.post-item .post-author-name {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-60);
}

.post-item .post-author-name a {
    color: var(--text-60);
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-item .post-author-name a:hover {
    color: var(--text);
}

.post-item .post-author-name span {
    color: var(--text-20);
    margin: 0 2px;
}

.post-item .post-date {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-40);
}

.post-item .post-view {
    font-size: 11px;
    color: var(--text-40);
    margin-left: auto;
}

/* Post description excerpt */
.post-item .post-description {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-60);
    margin: 0;
    flex: 1;
}

.post-item .post-description p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read more button */
.post-item .post-read-more {
    margin-top: auto;
    padding-top: 4px;
}

.post-item .post-read-more .post-read.btn-white,
.post-item .post-read.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-60);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}

.post-item .post-read-more .post-read.btn-white:hover,
.post-item .post-read.btn-white:hover {
    color: var(--text);
    border-color: rgba(245, 245, 247, 0.28);
    background: rgba(245, 245, 247, 0.05);
}

/* ── 7. BLOG POST VIEW PAGE ────────────────────────────────────────────── */

/* Outer wrapper added by view-modern.phtml */
.blog-post-view ._post-view {
    width: 100%;
}

/* Post holder */
.blog-post-view .post-holder {
    background: transparent;
}

/* Post header: category badge + meta on view page */
.blog-post-view .post-header {
    margin-bottom: 28px;
}

.blog-post-view .post-header .post-category {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.blog-post-view .post-header .post-category .category-name {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(197, 3, 43, 0.2);
    color: var(--primary);
    border: 1px solid rgba(197, 3, 43, 0.35);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-post-view .post-header .post-category .category-name:hover {
    background: rgba(197, 3, 43, 0.35);
    color: #fff;
}

/* Post meta */
.blog-post-view .post-data-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-40);
}

.blog-post-view .post-data-wrap .post-author-name {
    color: var(--text-60);
    font-size: 13px;
}

.blog-post-view .post-data-wrap .post-author-name a {
    color: var(--text-60);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-view .post-data-wrap .post-author-name a:hover {
    color: var(--text);
}

.blog-post-view .post-data-wrap .post-author-name span,
.blog-post-view .post-data-wrap span {
    color: var(--text-20);
}

.blog-post-view .post-data-wrap .post-date {
    color: var(--text-40);
    font-size: 13px;
}

.blog-post-view .post-data-wrap .post-view,
.blog-post-view .post-data-wrap .post-comments {
    color: var(--text-40);
    font-size: 12px;
}

.blog-post-view .post-data-wrap .post-comments a {
    color: var(--text-40);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-view .post-data-wrap .post-comments a:hover {
    color: var(--text);
}

/* ── 7a. POST CONTENT TYPOGRAPHY ─────────────────────────────────────── */

.blog-post-view .post-content {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-60);
    max-width: 780px;
}

/* Featured image */
.blog-post-view .post-featured-image {
    width: 100%;
    max-width: 100%;
    margin-bottom: 32px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.blog-post-view .post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.blog-post-view .post-description {
    color: var(--text-60);
}

/* Headings inside post body */
.blog-post-view .post-description h1,
.blog-post-view .post-description h2,
.blog-post-view .post-description h3,
.blog-post-view .post-description h4,
.blog-post-view .post-description h5,
.blog-post-view .post-description h6 {
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: -0.4px;
    margin-top: 2em;
    margin-bottom: 0.6em;
    line-height: 1.25;
}

.blog-post-view .post-description h2 {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.blog-post-view .post-description h3 {
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 700;
}

.blog-post-view .post-description h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.blog-post-view .post-description h5,
.blog-post-view .post-description h6 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Paragraphs */
.blog-post-view .post-description p {
    margin-bottom: 1.2em;
    color: var(--text-60);
}

/* Links */
.blog-post-view .post-description a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(197, 3, 43, 0.4);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.blog-post-view .post-description a:hover {
    color: #e8043a;
    text-decoration-color: rgba(197, 3, 43, 0.8);
}

/* Bold / strong */
.blog-post-view .post-description strong,
.blog-post-view .post-description b {
    color: var(--text);
    font-weight: 700;
}

/* Blockquote */
.blog-post-view .post-description blockquote {
    position: relative;
    margin: 2em 0;
    padding: 20px 24px 20px 36px;
    background: rgba(197, 3, 43, 0.07);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-60);
    font-style: italic;
}

.blog-post-view .post-description blockquote::before {
    content: '\201C';
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 36px;
    color: var(--primary);
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.6;
}

.blog-post-view .post-description blockquote p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

/* Inline code */
.blog-post-view .post-description code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.875em;
    background: rgba(245, 245, 247, 0.08);
    color: #e2b96a;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    word-break: break-word;
}

/* Code blocks */
.blog-post-view .post-description pre {
    margin: 1.5em 0;
    padding: 20px;
    background: #0a0709;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.blog-post-view .post-description pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 13.5px;
    color: #c9d1d9;
    white-space: pre;
    word-break: normal;
}

/* Lists */
.blog-post-view .post-description ul,
.blog-post-view .post-description ol {
    margin: 0 0 1.2em 0;
    padding-left: 1.6em;
    color: var(--text-60);
}

.blog-post-view .post-description ul {
    list-style: none;
    padding-left: 1.4em;
}

.blog-post-view .post-description ul li {
    position: relative;
    padding-left: 8px;
    margin-bottom: 6px;
}

.blog-post-view .post-description ul li::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 9px;
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.blog-post-view .post-description ol li {
    margin-bottom: 6px;
    padding-left: 4px;
}

.blog-post-view .post-description ol li::marker {
    color: var(--primary);
    font-weight: 700;
    font-family: var(--font-display);
}

/* Nested lists */
.blog-post-view .post-description ul ul,
.blog-post-view .post-description ol ol,
.blog-post-view .post-description ul ol,
.blog-post-view .post-description ol ul {
    margin-top: 6px;
    margin-bottom: 0;
}

/* Horizontal rules */
.blog-post-view .post-description hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2.5em 0;
}

/* Images inside post body */
.blog-post-view .post-description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: block;
    margin: 1.5em auto;
}

/* Tables */
.blog-post-view .post-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
    overflow-x: auto;
    display: block;
}

.blog-post-view .post-description table thead th {
    background: rgba(245, 245, 247, 0.05);
    color: var(--text);
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    white-space: nowrap;
}

.blog-post-view .post-description table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.blog-post-view .post-description table tbody tr:hover {
    background: rgba(245, 245, 247, 0.03);
}

.blog-post-view .post-description table tbody td {
    padding: 10px 14px;
    color: var(--text-60);
    vertical-align: top;
}

/* Post tags strip */
.blog-post-view .post-tag {
    margin: 24px 0;
}

.blog-post-view .post-tag .item.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-post-view .post-tag .post-tag-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-40);
    margin-right: 4px;
}

.blog-post-view .post-tag .item.post-tags a {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--text-60);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.blog-post-view .post-tag .item.post-tags a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(197, 3, 43, 0.08);
}

/* ── 7b. POST INFO BLOCK (icons layout, used in older template) ─────────── */

.blog-post-view .post-info .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-40);
    margin-right: 16px;
    margin-bottom: 8px;
}

.blog-post-view .post-info .item .label {
    color: var(--text-40);
    font-weight: 600;
}

.blog-post-view .post-info .item a {
    color: var(--text-60);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-view .post-info .item a:hover {
    color: var(--primary);
}

/* ── 7c. POST BOTTOM / SOCIAL SHARING ──────────────────────────────────── */

.blog-post-view .post-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.blog-post-view .post-sharing-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── 8. BLOG PAGINATION ────────────────────────────────────────────────── */

.toolbar.toolbar-blog-posts {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
    margin-top: 8px;
}

.toolbar.toolbar-blog-posts .pages {
    display: flex;
    justify-content: center;
}

.toolbar.toolbar-blog-posts .pages-label {
    display: none;
}

.toolbar.toolbar-blog-posts ul.items.pages-items {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.toolbar.toolbar-blog-posts .pages-items li {
    margin: 0;
    padding: 0;
}

/* All page links and current page */
.toolbar.toolbar-blog-posts .pages-items .page,
.toolbar.toolbar-blog-posts .pages-items a.page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-60);
    text-decoration: none;
    background: transparent;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.toolbar.toolbar-blog-posts .pages-items a.page:hover {
    background: rgba(245, 245, 247, 0.05);
    border-color: var(--border-light);
    color: var(--text);
}

/* Current active page (rendered as <strong>) */
.toolbar.toolbar-blog-posts .pages-items strong.page,
.toolbar.toolbar-blog-posts .pages-items .current .page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: default;
}

/* Previous / Next action links */
.toolbar.toolbar-blog-posts .pages-items .action.previous,
.toolbar.toolbar-blog-posts .pages-items .action.next {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-60);
    text-decoration: none;
    background: transparent;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.toolbar.toolbar-blog-posts .pages-items .action.previous:hover,
.toolbar.toolbar-blog-posts .pages-items .action.next:hover {
    background: rgba(245, 245, 247, 0.05);
    border-color: var(--border-light);
    color: var(--text);
}

.toolbar.toolbar-blog-posts .pages-items .action span.label {
    display: none;
}

/* ── 9. SIDEBAR WIDGETS ────────────────────────────────────────────────── */

/* Common widget block shell */
.sidebar.sidebar-additional .widget.block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}

.sidebar.sidebar-additional .widget.block:last-child {
    margin-bottom: 0;
}

/* Block title bar */
.sidebar.sidebar-additional .widget.block .block-title {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(245, 245, 247, 0.03);
}

.sidebar.sidebar-additional .widget.block .block-title strong {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-40);
    margin: 0;
    padding: 0;
}

/* ── 9a. CATEGORIES WIDGET ──────────────────────────────────────────────── */

.sidebar.sidebar-additional .widget.block-categories ul.accordion {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.sidebar.sidebar-additional .widget.block-categories ul.accordion li {
    margin: 0;
    padding: 0;
}

.sidebar.sidebar-additional .widget.block-categories ul.accordion li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-60);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    border-left: 2px solid transparent;
}

.sidebar.sidebar-additional .widget.block-categories ul.accordion li a:hover {
    color: var(--text);
    background: rgba(245, 245, 247, 0.04);
    border-left-color: var(--primary);
}

/* Active / current category */
.sidebar.sidebar-additional .widget.block-categories ul.accordion li.current > a,
.sidebar.sidebar-additional .widget.block-categories ul.accordion li.active > a {
    color: var(--text);
    border-left-color: var(--primary);
    background: rgba(197, 3, 43, 0.07);
}

/* Posts count in parentheses */
.sidebar.sidebar-additional .widget.block-categories ul.accordion li a + * {
    color: var(--text-40);
    font-size: 11px;
    font-family: var(--font-display);
}

/* Nested sub-categories */
.sidebar.sidebar-additional .widget.block-categories ul.accordion ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.15);
}

.sidebar.sidebar-additional .widget.block-categories ul.accordion ul li a {
    padding-left: 32px;
    font-size: 12px;
    color: var(--text-40);
}

.sidebar.sidebar-additional .widget.block-categories ul.accordion ul li a:hover {
    color: var(--text-60);
}

/* ── 9b. RECENT / POPULAR POSTS WIDGETS ─────────────────────────────────── */

.sidebar.sidebar-additional .widget.block-list-posts .block-content {
    padding: 8px 0;
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix {
    display: flex;
    flex-direction: column;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
    transition: background 0.2s ease;
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix:last-child {
    border-bottom: none;
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix:hover {
    background: rgba(245, 245, 247, 0.03);
}

/* Thumbnail inside sidebar post item */
.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix .post-image {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix .post-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: opacity 0.2s ease;
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix .post-image a:hover img {
    opacity: 0.85;
}

/* Post title link */
.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix a.post-item-link {
    display: block;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-60);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix a.post-item-link:hover {
    color: var(--text);
}

/* Post date */
.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix .post-item-date {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--text-40);
}

.sidebar.sidebar-additional .widget.block-list-posts .item.clearfix .post-item-date .value {
    color: var(--text-40);
}

/* ── 10. "NO POSTS" EMPTY STATE ────────────────────────────────────────── */

.blog-page-list .message.info.empty,
.blog-category-view .message.info.empty,
.blog-search-index .message.info.empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-40);
    font-family: var(--font-display);
    font-size: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ── 11. RELATED POSTS (bottom of post view) ───────────────────────────── */

.blog-post-view .block-blog-related-posts {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.blog-post-view .block-blog-related-posts .block-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -0.4px;
}

.blog-post-view .block-blog-related-posts .post-list,
.blog-post-view .block-blog-related-posts ol.post-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── 12. BOOTSTRAP UTILITY OVERRIDES (Magefan loads bootstrap-4.4.1) ────── */
/* Scoped to blog pages only so they don't leak into the rest of the theme */

.blog-page-list .mb-2,
.blog-post-view .mb-2 { margin-bottom: 0 !important; }

.blog-page-list .mb-3,
.blog-post-view .mb-3 { margin-bottom: 0 !important; }

.blog-page-list .mb-4,
.blog-post-view .mb-4 { margin-bottom: 0 !important; }

/* Bootstrap float utilities — neutralised */
.blog-page-list .float-right,
.blog-post-view .float-right { float: none !important; }

/* ── 13. RESPONSIVE ────────────────────────────────────────────────────── */

/* Tablet: 2-col grid, single sidebar */
@media (max-width: 1024px) {

    ol.post-list.modern,
    ol.post-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .blog-page-list.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-post-view.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-category-view.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-search-index.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-tag-view.page-layout-2columns-right .sidebar.sidebar-additional {
        flex: 0 0 var(--sidebar-width-sm) !important;
        width: var(--sidebar-width-sm) !important;
        min-width: var(--sidebar-width-sm) !important;
        max-width: var(--sidebar-width-sm) !important;
    }

    .blog-post-view .post-content {
        max-width: 100%;
    }
}

/* Mobile: single column, stacked layout */
@media (max-width: 768px) {

    .blog-page-list.page-layout-2columns-right .columns,
    .blog-post-view.page-layout-2columns-right .columns,
    .blog-category-view.page-layout-2columns-right .columns,
    .blog-search-index.page-layout-2columns-right .columns,
    .blog-tag-view.page-layout-2columns-right .columns {
        flex-direction: column !important;
    }

    .blog-page-list.page-layout-2columns-right .column.main,
    .blog-post-view.page-layout-2columns-right .column.main,
    .blog-category-view.page-layout-2columns-right .column.main,
    .blog-search-index.page-layout-2columns-right .column.main,
    .blog-tag-view.page-layout-2columns-right .column.main {
        order: 1 !important;
        width: 100% !important;
    }

    .blog-page-list.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-post-view.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-category-view.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-search-index.page-layout-2columns-right .sidebar.sidebar-additional,
    .blog-tag-view.page-layout-2columns-right .sidebar.sidebar-additional {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 2 !important;
    }

    ol.post-list.modern,
    ol.post-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .blog-post-view .post-content {
        font-size: 15px;
        max-width: 100%;
    }

    .blog-post-view .post-description blockquote {
        padding: 14px 16px 14px 28px;
    }

    .blog-post-view .post-description h2 {
        font-size: 20px;
    }

    .blog-post-view .post-description pre {
        padding: 14px;
        font-size: 12.5px;
    }

    .blog-post-view .block-blog-related-posts .post-list,
    .blog-post-view .block-blog-related-posts ol.post-list {
        grid-template-columns: 1fr;
    }

    .sidebar.sidebar-additional .widget.block-list-posts .item.clearfix {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }

    .sidebar.sidebar-additional .widget.block-list-posts .item.clearfix .post-image {
        width: 80px;
        flex-shrink: 0;
    }

    .toolbar.toolbar-blog-posts .pages-items .action.previous span.label,
    .toolbar.toolbar-blog-posts .pages-items .action.next span.label {
        display: none;
    }
}

/* Small mobile: keep cards comfortable */
@media (max-width: 480px) {

    .post-item .post-info {
        padding: 16px;
    }

    .post-item .post-title {
        font-size: 15px;
    }

    .post-item .post-description p {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Override Magento default loading-mask for dark theme */
.loading-mask {
    background: rgba(15, 13, 13, 0.65) !important;
    backdrop-filter: blur(2px);
}
.loading-mask .loader > img {
    filter: invert(1) brightness(0.8);
}

/* Fix Magento loader — must be fixed overlay, not in document flow */
.loader {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 13, 13, 0.65) !important;
    backdrop-filter: blur(2px);
}
.loader > img {
    position: static !important;
    margin: 0 !important;
    max-width: 40px;
    filter: invert(1) brightness(0.8);
}

/* Force light text in player bar — always dark bg regardless of store theme */
.audio-player {
    --text: #f5f5f7;
    --text-80: #c7c7cc;
    --text-60: #b0b0b5;
    --text-40: #a1a1a6;
    --text-20: #48484a;
    --border: rgba(255,255,255,0.1);
    --bg: #0f0d0d;
}
.hidden {
    display: none;
    visibility: hidden;
    display: none !important;
}

/* Hide jQuery UI datepicker that renders visibly on marketplace pages */
#ui-datepicker-div { display: none !important; }

/* Hide duplicate pagination inside product list grid rows */
.wk-mp-fieldset .order-products-toolbar.toolbar.bottom { display: none; }
.admin__data-grid-wrap { padding: 0 !important; }

/* ============================================================
   Spring Bloom Sale Banner
   ============================================================ */

.sale-banner {
    position: relative;
    z-index: 10001;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 25%, #e8f5e9 50%, #c8e6c9 75%, #fff9c4 100%);
    border-bottom: 1px solid rgba(216, 140, 170, 0.4);
    box-shadow: 0 2px 12px rgba(248, 187, 208, 0.45);
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.sale-banner--dismissed {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.sale-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 48px 8px 16px;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.sale-banner__text {
    font-size: 13px;
    font-weight: 500;
    color: #2d1a24;
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1.4;
}

.sale-banner__text strong {
    font-weight: 700;
    color: #1a2d1a;
}

.sale-banner__code {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 800;
    font-size: 14px;
    color: #7b1fa2;
    background: rgba(123, 31, 162, 0.1);
    border: 1.5px solid rgba(123, 31, 162, 0.35);
    border-radius: 4px;
    padding: 1px 7px;
    letter-spacing: 0.12em;
    animation: sale-banner-pulse 2.2s ease-in-out infinite;
}

@keyframes sale-banner-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(123, 31, 162, 0);
        background: rgba(123, 31, 162, 0.1);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(123, 31, 162, 0.18);
        background: rgba(123, 31, 162, 0.18);
    }
}

.sale-banner__close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 26, 36, 0.12);
    border: 1px solid rgba(45, 26, 36, 0.2);
    border-radius: 50%;
    color: #2d1a24;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.sale-banner__close:hover,
.sale-banner__close:focus {
    background: rgba(45, 26, 36, 0.22);
    color: #1a0d16;
    outline: none;
}

@media (max-width: 767px) {
    .sale-banner__inner {
        min-height: auto;
        padding: 10px 40px 10px 12px;
        align-items: flex-start;
    }

    .sale-banner__text {
        font-size: 16px;
        text-align: center;
    }

    .sale-banner__code {
        font-size: 13px;
    }
}

/* Sticky header — sticks when banner scrolls out of view */
.page-header .header.container,
.header.container {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* ── Login Page Messages ── */
.auth-messages { margin-bottom: 1rem; }
.auth-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.auth-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.auth-msg--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.auth-msg--notice { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }


/* ── Page Messages (login errors, cart notices, etc.) ── */
.page.messages { max-width: 1400px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 10; }
.page.messages .message { padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.5; margin: 8px 0; }
.page.messages .message-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.page.messages .message-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }







/* ═══════════════════════════════════════════════════════════════════════
   SERVICES — Landing Page + Product Page
   Theme-adaptive — uses CSS variables from cubase-core.css
   Works on both light (wmdm.com) and dark (all other stores) color schemes
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide Magento page title, sidebar, toolbar on services landing */
body.wmdm-services-page .page-title-wrapper { display: none !important; }
body.wmdm-services-page .sidebar,
body.wmdm-services-page .sidebar-main,
body.wmdm-services-page .sidebar-additional,
body.wmdm-services-page .block-compare,
body.wmdm-services-page .block-wishlist,
body.wmdm-services-page .toolbar,
body.wmdm-services-page .filter,
body.wmdm-services-page .block-filter,
body.wmdm-services-page .block.filter,
body.wmdm-services-page .filter-options,
body.wmdm-services-page .filter-current,
body.wmdm-services-page .toolbar-products,
body.wmdm-services-page .toolbar-sorter,
body.wmdm-services-page .sorter,
body.wmdm-services-page .limiter,
body.wmdm-services-page .modes,
body.wmdm-services-page .breadcrumbs,
body.wmdm-services-page #layered-filter-block,
body.wmdm-services-page #narrow-by-list,
body.wmdm-services-page .cdz-ajax-search-filter,
body.wmdm-services-page [data-role="layered-filter-block"] { display: none !important; }

/* Service pages use theme colors */
body.wmdm-services-page .page-main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.wmdm-services-page .column.main { width: 100% !important; float: none !important; padding: 0 !important; }


/* Hide upsells, related, cross-sells on service product pages */
body.catalog-product-view:has(.sp) .block.upsell,
body.catalog-product-view:has(.sp) .block.related,
body.catalog-product-view:has(.sp) .block.crosssell,
body.catalog-product-view:has(.sp) .wmdm-related-products,
body.catalog-product-view:has(.sp) .product-items-related,
body.catalog-product-view:has(.sp) [class*="related"],
body.catalog-product-view:has(.sp) [class*="upsell"] { display: none !important; }

/* ═══ LANDING PAGE (.svl) ═══ */

.svl { max-width: var(--content-width, 1400px); margin: 0 auto; padding: 0 var(--page-padding, 20px); color: var(--text) !important; font-family: var(--font-body); -webkit-font-smoothing: antialiased; background: var(--bg); }
.svl *, .svl *::before, .svl *::after { box-sizing: border-box; }
.svl a { color: inherit; text-decoration: none; }
.svl h1, .svl h2, .svl h3, .svl h4, .svl h5 { color: var(--text) !important; }
.svl p, .svl span, .svl li, .svl div { color: inherit; }

/* Hero — matches homepage hero style */
.svl-hero { text-align: center; padding: 72px 0 48px; position: relative; overflow: hidden; }
.svl-hero__glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(0,184,212,0.06) 0%, transparent 70%); pointer-events: none; }
.svl-hero__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--bg-glass); border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-80); margin-bottom: 28px; }
.svl-hero__pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #00B8D4; animation: svl-pulse 2s ease-in-out infinite; }
@keyframes svl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.svl-hero__title { font-family: 'Sora', sans-serif; font-size: clamp(48px, 8vw, 86px); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 24px; color: var(--text) !important; }
.svl-hero__title em { font-style: normal; background: linear-gradient(135deg, #006874, #7C3AED, #C2185B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svl-hero__sub { font-size: 20px; color: var(--text-80) !important; max-width: 620px; margin: 0 auto; line-height: 1.7; }
.svl-hero__sub strong { color: var(--text) !important; font-weight: 600; }

/* Trust Bar */
.svl-trust-bar { display: flex; align-items: center; justify-content: center; gap: 0; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 72px; flex-wrap: wrap; }
.svl-trust-bar__item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-80) !important; padding: 10px 24px; white-space: nowrap; }
.svl-trust-bar__item svg { color: var(--primary) !important; flex-shrink: 0; }
.svl-trust-bar__sep { width: 1px; height: 18px; background: #e8e8ec; }

/* Section Title */
.svl-section-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; text-align: center; margin: 0 0 48px; color: var(--text) !important; }

/* Process Steps */
.svl-process { margin-bottom: 80px; }
.svl-process__grid { display: flex; align-items: flex-start; gap: 0; justify-content: center; }
.svl-process__step { flex: 1; max-width: 260px; text-align: center; padding: 0 16px; }
.svl-process__num { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-60); transition: all 0.3s ease; }
.svl-process__step:hover .svl-process__num { border-color: var(--primary); color: var(--primary); background: var(--primary-glow); }
.svl-process__label { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--text) !important; }
.svl-process__desc { font-size: 14px; color: var(--text-80) !important; line-height: 1.7; margin: 0; }
.svl-process__connector { width: 40px; height: 1px; background: var(--border); margin-top: 22px; flex-shrink: 0; }

/* Category Sections */
.svl-category { margin-bottom: 72px; }
.svl-category__header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.svl-category__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svl-category__icon--green { background: rgba(140,198,63,0.08); border: 1px solid rgba(140,198,63,0.15); }
.svl-category__icon--teal { background: var(--primary-glow); border: 1px solid var(--primary-glow); }
.svl-category__icon--purple { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.15); }
.svl-category__title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text) !important; }
.svl-category__sub { font-size: 16px; color: var(--text-80) !important; margin: 0; line-height: 1.6; }

/* Service Cards */
.svl-cards { display: grid; gap: 16px; }
.svl-cards--3 { grid-template-columns: repeat(3, 1fr); }
.svl-cards--2 { grid-template-columns: repeat(2, 1fr); }
.svl-cards--2x2 { grid-template-columns: repeat(2, 1fr); }

.svl-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 16px; transition: all 0.3s var(--ease-out); cursor: pointer; overflow: hidden; color: var(--text) !important; }
.svl-card:hover { border-color: var(--border) !important; transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.svl-card--featured { border-color: var(--primary-glow) !important; background: linear-gradient(180deg, var(--primary-glow) 0%, var(--bg) 40%) !important; }
.svl-card--featured:hover { border-color: var(--primary) !important; }
.svl-card__ribbon { position: absolute; top: 12px; right: -28px; transform: rotate(45deg); padding: 3px 36px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.svl-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.svl-card__badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.svl-card__badge--green { background: rgba(140,198,63,0.1); color: var(--green); }
.svl-card__badge--teal { background: var(--primary-glow); color: var(--primary); }
.svl-card__badge--purple { background: rgba(124,58,237,0.08); color: var(--purple); }
.svl-card__turnaround { font-family: var(--font-mono); font-size: 11px; color: var(--text-60) !important; }
.svl-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text) !important; letter-spacing: -0.01em; }
.svl-card__desc { font-size: 14px; color: var(--text-80) !important; line-height: 1.7; margin: 0 0 16px; flex: 1; }
.svl-card__highlights { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.svl-card__highlights li { font-size: 14px; color: var(--text-60) !important; padding-left: 18px; position: relative; }
.svl-card__highlights li::before { content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #d1d1d6; }
.svl-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--border); margin-top: auto; }
.svl-card__price { font-size: 16px; color: var(--text-80) !important; font-weight: 500; }
.svl-card__price span { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--text) !important; letter-spacing: -0.02em; }
.svl-card__arrow { font-size: 18px; color: #d1d1d6; transition: all 0.3s ease; }
.svl-card:hover .svl-card__arrow { color: var(--primary); transform: translateX(3px); }

/* Guarantee — teal tinted instead of red */
.svl-guarantee { margin-bottom: 64px; }
.svl-guarantee__inner { background: linear-gradient(135deg, rgba(0,194,176,0.06), rgba(124,58,237,0.04)); border: 1px solid rgba(0,184,212,0.12); border-radius: var(--radius); padding: 48px 40px; text-align: center; }
.svl-guarantee__icon { margin: 0 auto 16px; }
.svl-guarantee__title { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 0 0 16px; color: var(--text) !important; letter-spacing: -0.02em; }
.svl-guarantee__text { font-size: 17px; color: var(--text-80) !important; max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* CTA — teal gradient button */
.svl-cta { text-align: center; padding: 48px 24px; background: var(--bg-elevated) !important; border: 1px solid var(--border) !important; border-radius: var(--radius); margin-bottom: 64px; }
.svl-cta__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin: 0 0 10px; color: var(--text) !important; letter-spacing: -0.02em; }
.svl-cta__desc { font-size: 17px; color: var(--text-80) !important; margin: 0 0 24px; }
.svl-cta__btn { display: inline-flex; padding: 14px 28px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff !important; border-radius: 12px; font-size: 15px; font-weight: 600; transition: all 0.3s ease; }
.svl-cta__btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Landing Responsive */
@media (max-width: 900px) {
    .svl-cards--3, .svl-cards--2, .svl-cards--2x2 { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .svl-process__grid { flex-direction: column; align-items: center; gap: 8px; }
    .svl-process__connector { width: 1px; height: 24px; margin: 0; }
    .svl-process__step { max-width: 280px; }
    .svl-trust-bar { flex-direction: column; gap: 4px; }
    .svl-trust-bar__sep { display: none; }
}
@media (max-width: 600px) {
    .svl-hero { padding: 48px 0 32px; }
    .svl-guarantee__inner { padding: 32px 20px; }
    .svl-cta { padding: 32px 20px; }
    .svl-category__header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══ PRODUCT PAGE (.sp) ═══ */

.sp { max-width: var(--content-width, 1400px); margin: 0 auto; padding: 0 var(--page-padding, 20px) 80px; color: var(--text) !important; font-family: var(--font-body); -webkit-font-smoothing: antialiased; background: var(--bg); }
.sp a { color: inherit; }
.sp h1, .sp h2, .sp h3, .sp h4, .sp h5 { color: var(--text) !important; }
.sp p, .sp span, .sp li, .sp div { color: inherit; }

/* Hero */
.sp-hero { padding: 10px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 36px; }
.sp-hero__badge { display: none; }
.sp-hero__title { font-family: 'Sora', sans-serif; font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 16px; color: var(--text) !important; }
.sp-hero__desc { font-size: 18px; color: var(--text-80) !important; line-height: 1.7; margin: 0 0 24px; max-width: 640px; }
.sp-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-hero__tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--primary-glow); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--primary) !important; }
.sp-hero__tag svg { color: var(--primary) !important; }

/* Grid */
.sp-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }

/* Content Cards */
.sp-content { display: flex; flex-direction: column; gap: 20px; }
.sp-card { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 16px; padding: 28px 24px; color: var(--text) !important; }
.sp-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 20px; color: var(--text) !important; letter-spacing: -0.01em; }

/* Checklist */
.sp-checklist { list-style: none; padding: 0; margin: 0; }
.sp-checklist__item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-light); font-size: 15px; color: var(--text-80) !important; line-height: 1.6; }
.sp-checklist__item:last-child { border-bottom: none; }
.sp-checklist__item svg { flex-shrink: 0; }

/* Steps */
.sp-steps { display: flex; flex-direction: column; gap: 0; }
.sp-steps__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.sp-steps__item:last-child { border-bottom: none; }
.sp-steps__num { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--primary-glow); border: 1px solid var(--primary-glow); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 1px; }
.sp-steps__text { font-size: 14px; color: var(--text-80) !important; line-height: 1.5; }
.sp-steps__text strong { display: block; color: var(--text) !important; font-weight: 600; margin-bottom: 2px; }

/* Trust Grid */
.sp-card--trust { padding: 24px; }
.sp-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-trust-grid:has(:last-child:nth-child(2)) { grid-template-columns: 1fr 1fr; }
.sp-trust-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--bg-elevated) !important; border-radius: 12px; }
.sp-trust-item svg { flex-shrink: 0; margin-top: 2px; }
.sp-trust-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--text) !important; margin-bottom: 2px; }
.sp-trust-item span { font-size: 12px; color: var(--text-80) !important; line-height: 1.4; }

/* Service Cart Item */
.wmdm-cart-item--service { display: flex; flex-direction: column; gap: 0; padding: 20px !important; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 16px; }
.svc-cart-badge { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.svc-cart-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.svc-cart-info { flex: 1; min-width: 0; }
.svc-cart-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.svc-cart-title a { color: var(--text) !important; text-decoration: none; }
.svc-cart-title a:hover { color: var(--svc-accent, #00838F) !important; }
.svc-cart-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.svc-cart-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-80); background: var(--bg-elevated); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.svc-cart-tag svg { flex-shrink: 0; opacity: 0.6; }
.svc-cart-payment { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-top: 8px; background: var(--bg-elevated); color: var(--text-80); }
.svc-cart-payment--deposit { background: var(--primary-glow); color: var(--primary); }
.svc-cart-payment--balance { background: rgba(255,183,0,0.12); color: #b48a00; }
.svc-cart-payment--full { background: rgba(16,185,129,0.1); color: #059669; }
.svc-cart-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.svc-cart-price { font-size: 18px; font-weight: 700; color: var(--text) !important; }

/* Audio Demos */
.sp-demos { display: flex; flex-direction: column; gap: 10px; }
.sp-demo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elevated) !important; border-radius: 12px; transition: background 0.15s; }
.sp-demo:hover { background: var(--bg-hover) !important; }
.sp-demo__play { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-elevated); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; padding: 0; }
.sp-demo__play:hover { background: var(--bg-hover); }
.sp-demo__play svg { margin-left: 2px; }
.sp-demo__info { flex: 1; min-width: 0; }
.sp-demo__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sp-demo__name { font-size: 14px; font-weight: 600; color: var(--text) !important; }
.sp-demo__genre { font-size: 11px; font-weight: 500; color: var(--sp-accent); background: var(--bg-elevated); padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.sp-demo__waveform { height: 32px; cursor: pointer; position: relative; overflow: hidden; border-radius: 4px; }
.sp-demo__bars { display: flex; align-items: center; gap: 1px; height: 100%; position: relative; z-index: 1; }
.sp-demo__bars span { flex: 1; background: var(--text-20); border-radius: 1px; min-width: 1px; }
.sp-demo__progress { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--sp-accent); opacity: 0.25; z-index: 0; border-radius: 4px; transition: width 0.15s linear; }
.sp-demo__waveform:hover .sp-demo__bars span { background: var(--text-60); }
.sp-demo__time { font-size: 12px; color: var(--text-60) !important; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; flex-shrink: 0; }

/* Reviews */
.sp-reviews { display: flex; flex-direction: column; gap: 16px; }
.sp-review { background: var(--bg-elevated) !important; border-radius: 12px; padding: 16px 18px; }
.sp-review__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-review__stars { display: flex; gap: 2px; }
.sp-review__author { font-size: 13px; font-weight: 600; color: var(--text) !important; }
.sp-review__text { font-size: 14px; color: var(--text-80) !important; line-height: 1.6; margin: 0; }

/* Producers */
.sp-producers { display: flex; flex-direction: column; gap: 14px; }
.sp-producer { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-elevated) !important; border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.2s; }
a.sp-producer:hover { background: var(--bg-hover) !important; }
.sp-producer__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; object-fit: cover; }
.sp-producer__info { display: flex; flex-direction: column; }
.sp-producer__info strong { font-size: 14px; color: var(--text) !important; margin-bottom: 3px; }
.sp-producer__info span { font-size: 13px; color: var(--text-80) !important; line-height: 1.4; }

/* Sidebar Reviews */
.sp-sidebar-reviews { margin-top: 20px; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); }
.sp-sidebar-reviews__title { font-size: 15px; font-weight: 700; color: var(--text) !important; margin: 0 0 16px; font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif); }
.sp-sidebar-review { padding: 14px 16px; background: var(--bg-elevated) !important; border-radius: 12px; margin-bottom: 10px; }
.sp-sidebar-review:last-of-type { margin-bottom: 0; }
.sp-sidebar-review__stars { display: flex; gap: 1px; margin-bottom: 6px; }
.sp-sidebar-review__text { font-size: 13px; color: var(--text-80) !important; line-height: 1.5; margin: 0 0 6px; font-style: italic; }
.sp-sidebar-review__author { font-size: 12px; color: var(--text-60) !important; font-weight: 600; }

/* Purchase Card — teal gradient CTA */
.sp-sidebar { position: sticky; top: 80px; }
.sp-purchase { background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 20px; padding: 28px; box-shadow: var(--shadow-sm); color: var(--text) !important; }
.sp-purchase__toggle { display: flex; background: var(--bg-elevated); border-radius: 10px; padding: 3px; margin-bottom: 24px; }
.sp-purchase__toggle-btn { flex: 1; padding: 10px 12px; border-radius: 8px; border: none; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: transparent; color: var(--text-60); }
.sp-purchase__toggle-btn--active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; }
.sp-purchase__price { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--text) !important; letter-spacing: -0.03em; margin-bottom: 4px; line-height: 1; }
.sp-purchase__price-label { font-size: 15px; font-weight: 400; color: var(--text-80) !important; }
.sp-purchase__price-sub { font-size: 13px; color: var(--text-80) !important; margin-bottom: 24px; }
.sp-purchase__original { text-decoration: line-through; opacity: 0.5; margin-right: 4px; }
.sp-purchase__btn { display: block; width: 100%; padding: 16px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none; border-radius: 12px; font-family: var(--font-body); font-size: 16px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.2s ease; margin-bottom: 20px; }
.sp-purchase__btn:hover { opacity: 0.9; transform: translateY(-1px); }
.sp-purchase__trust { padding-top: 16px; border-top: 1px solid var(--border-light); }
.sp-purchase__trust-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-80) !important; }
.sp-purchase__trust-item:last-child { margin-bottom: 0; }
.sp-purchase__trust-item svg { color: var(--primary) !important; flex-shrink: 0; }

/* Product Page Responsive */
@media (max-width: 900px) {
    .sp-grid { grid-template-columns: 1fr; }
    .sp-sidebar { position: static; }
    .sp-trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sp-hero__meta { flex-direction: column; gap: 8px; }
    .sp-card { padding: 20px 16px; }
    .sp-purchase { padding: 20px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   DESIGN FIXES 2026-04-21
   - Small top breathing room on cart header (desktop only)
   - Coupon "Discount Code" card match reference (primary-filled Apply)
   - Mobile: contain checkout sidebar content (no overflow)
   - Light themes: darker borders on main + actions
   ═══════════════════════════════════════════════════════════════════════ */

/* Small top breathing room — desktop only */
@media (min-width: 769px) {
    .cart-page-header { margin-top: 10px; }
}

/* ─── Coupon "Discount Code" card ──────────────────────────────────── */
.coupon-input-row { align-items: stretch; gap: 10px; flex-wrap: nowrap; }
.coupon-input-row input {
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--radius-md);
}
.coupon-input-row input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.coupon-apply-btn {
    height: 48px;
    min-width: 104px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    flex: 0 0 auto;
    background: var(--primary) !important;
    color: #fff !important;
    border: 1px solid var(--primary) !important;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.coupon-apply-btn:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--primary-glow);
}
.coupon-apply-btn:active { transform: translateY(0); }

/* Mobile: contain checkout sidebar so nothing spills past the card */
@media (max-width: 1200px) {
    .cart-checkout-column {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .wmdm-checkout-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .wmdm-checkout-card > *,
    .checkout-header,
    .checkout-express,
    .checkout-divider,
    .checkout-form,
    .checkout-coupon,
    .checkout-summary,
    .checkout-actions {
        max-width: 100%;
        box-sizing: border-box;
    }
    .express-btn,
    .checkout-input,
    .stripe-element,
    .coupon-input-row input,
    .coupon-apply-btn { max-width: 100%; box-sizing: border-box; min-width: 0; }
    .coupon-apply-btn { min-width: 88px; }
}

@media (max-width: 480px) {
    .checkout-header,
    .checkout-express,
    .checkout-form,
    .checkout-coupon,
    .checkout-summary { padding-left: 16px; padding-right: 16px; }
    .checkout-divider { padding-left: 16px; padding-right: 16px; }
}

/* ─── Light themes: darker borders on main + actions ─────────────────── */
body.store-en .wmdm-cart-item,
body.store-pg .wmdm-cart-item,
body.store-en .wmdm-checkout-card,
body.store-pg .wmdm-checkout-card {
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
body.store-en .wmdm-cart-item:hover,
body.store-pg .wmdm-cart-item:hover {
    border-color: var(--text-20);
}
body.store-en .wmdm-cart-controls,
body.store-pg .wmdm-cart-controls,
body.store-en .wmdm-cart-actions,
body.store-pg .wmdm-cart-actions {
    border-color: var(--border);
}
body.store-en .wmdm-cart-license-card__content,
body.store-pg .wmdm-cart-license-card__content,
body.store-en .checkout-input,
body.store-pg .checkout-input,
body.store-en .stripe-element,
body.store-pg .stripe-element,
body.store-en .coupon-input-row input,
body.store-pg .coupon-input-row input {
    border-color: var(--border);
}
body.store-en .checkout-header,
body.store-pg .checkout-header,
body.store-en .checkout-express,
body.store-pg .checkout-express,
body.store-en .checkout-form,
body.store-pg .checkout-form {
    border-bottom-color: var(--border);
}


/* ═══════════════════════════════════════════════════════════════════════
   HEADER BOTTOM GRADIENT STRIP — mirrors .site-footer::before 2026-04-21
   ═══════════════════════════════════════════════════════════════════════ */
.site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.4;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   STICKY HEADER RE-ENABLE 2026-04-21
   overflow-x: hidden on html/.page-wrapper creates a scroll container
   that kills position:sticky on descendants. Swap to overflow-x: clip
   (supported all modern browsers, doesn't establish a scroll container).
   ═══════════════════════════════════════════════════════════════════════ */
html { overflow-x: clip !important; }
.page-wrapper { overflow-x: clip !important; }
body { overflow-x: clip !important; }

.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Top Sellers header left-align */
.wmdm-top-sellers__title { margin: 0 !important; justify-content: flex-start !important; }


/* ═══════════════════════════════════════════════════════════════════════
   MEGAMENU ICONS 2026-04-22
   - Genre icons: black-on-transparent, inverted on dark themes via CSS filter
   - Format (DAW) icons: full-color, circle background
   - Reveal via body.is-loaded + opacity fade (pagespeed-safe)
   - Fixed dimensions → zero CLS; loading=lazy → deferred fetch
   ═══════════════════════════════════════════════════════════════════════ */

/* Push count to the right while icon + label stay on the left */
.genres-mega__item .gm-label { flex: 1; min-width: 0; text-overflow: ellipsis; overflow: hidden; }

.gm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    line-height: 0;
}
.gm-icon img {
    width: 18px;
    height: 18px;
    display: block;
}

/* Format (DAW) icons — full color, circle background for brands */
.gm-icon--format {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    padding: 2px;
}
.gm-icon--format img { width: 22px; height: 22px; }
body.store-en .gm-icon--format,
body.store-pg .gm-icon--format {
    background: rgba(0,0,0,0.05);
}

/* Genre icons — invert black → white on dark themes */
body.store-cbten .gm-icon--genre img,
body.store-lgten .gm-icon--genre img,
body.store-abten .gm-icon--genre img,
body.store-flsen .gm-icon--genre img,
body.store-io    .gm-icon--genre img,
body.store-es    .gm-icon--genre img {
    filter: invert(1) brightness(1.1);
}

/* Mobile drawer: icon + label + count on one row */
.drawer-sub-item { display: flex; align-items: center; gap: 10px; }
.drawer-sub-item .gm-icon { margin-right: 0; }