/* ============================================================
   THEME — Violet / StreamCards brand refresh
   ============================================================
   ROLLBACK: verwijder in main.php deze twee regels:
     <link rel="stylesheet" href=".../fonts.css">
     <link rel="stylesheet" href=".../theme-violet.css">
   De fontbestanden in public/fonts/ en public/css/fonts.css kunnen blijven staan.
   De rest van de CSS blijft volledig intact.
   ============================================================ */

/* ── Developer impersonation bar ────────────────────────────── */
.dev-bar {
    width: 100%;
    background: #1a0d2e;
    border-bottom: 1px solid rgba(124, 58, 237, 0.35);
    z-index: 9999;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 13px;
}
.dev-bar--impersonating {
    background: #2d0a0a;
    border-bottom-color: rgba(239, 68, 68, 0.4);
}
.dev-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    height: 42px;
    max-width: var(--page-max);
    margin: 0 auto;
    flex-wrap: nowrap;
    overflow: hidden;
}
.dev-bar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.dev-bar-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: rgba(124, 58, 237, 0.35);
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.4);
}
.dev-bar-badge--warn {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}
.dev-bar-origin {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}
.dev-bar-origin strong { color: #ffffff; }

.dev-bar-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dev-bar-role-pill--developer { background: rgba(124,58,237,.4);  color: #c4b5fd; }
.dev-bar-role-pill--admin     { background: rgba(239,68,68,.3);   color: #fca5a5; }
.dev-bar-role-pill--seller    { background: rgba(16,185,129,.3);  color: #6ee7b7; }
.dev-bar-role-pill--buyer     { background: rgba(14,165,233,.3);  color: #7dd3fc; }
.dev-bar-role-pill--moderator { background: rgba(245,158,11,.3);  color: #fcd34d; }
.dev-bar-role-pill--support   { background: rgba(99,102,241,.3);  color: #c7d2fe; }

.dev-bar-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.dev-bar-label {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.dev-bar-select {
    flex: 1;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.dev-bar-select:focus {
    border-color: rgba(124,58,237,0.6);
    box-shadow: 0 0 0 2px rgba(124,58,237,0.2);
}
.dev-bar-select option,
.dev-bar-select optgroup {
    background: #1a0d2e;
    color: #ffffff;
}

.dev-bar-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.dev-bar-btn--switch {
    background: rgba(124,58,237,0.5);
    color: #ffffff;
    border: 1px solid rgba(124,58,237,0.5);
}
.dev-bar-btn--switch:hover {
    background: rgba(124,58,237,0.75);
}
.dev-bar-btn--stop {
    background: rgba(239,68,68,0.25);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.35);
}
.dev-bar-btn--stop:hover {
    background: rgba(239,68,68,0.4);
    color: #ffffff;
}
.dev-bar-stop { flex-shrink: 0; }

/* Sidebar sticky-offset corrigeren wanneer de devbalk actief is */
.has-dev-bar .sidebar {
    top: calc(42px + var(--topbar-height) + 18px);
}

/* ── Google Font: Barlow ─────────────────────────────────────
   Barlow Semi Condensed: koppen — scherp, krachtig, compact
   Barlow: bodytekst — clean, goed leesbaar, energiek
   ─────────────────────────────────────────────────────────── */

/* ── Design tokens — light mode ─────────────────────────────── */
:root {
    /* Brand: violet */
    --accent:        #7c3aed;
    --accent-2:      #0ea5e9;
    --accent-soft:   rgba(124, 58, 237, 0.09);
    --accent-warm:   #a855f7;

    /* Backgrounds: koelere pagina-bg zodat witte kaarten "optillen" (kolom-onderscheid) */
    --bg:            #eaecf1;
    --bg-soft:       #ffffff;
    --surface:       #ffffff;
    --surface-2:     #f6f7f9;
    --input-bg:      #ffffff;

    /* Lijnen: iets crispere rand tegen de lichte bg, plus een sterkere variant voor scheidingen */
    --line:          #d9dce3;
    --line-strong:   #cfd3dc;
    --line-soft:     rgba(17, 24, 39, 0.06);

    /* Tekst */
    --text:          #12111a;
    --muted:         #6b7280;

    /* Feedback — groen blijft voor succes/betaald (semantisch correct) */
    --danger:        #dc2626;

    /* Schaduw: strak, neutraal en gelaagd (Linear/Stripe-look) i.p.v. paarse waas */
    --shadow:        0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);

    /* Radius iets genereuzer — vriendelijker */
    --radius-xl:     12px;
    --radius-lg:     10px;
    --radius-md:     8px;
    --radius-sm:     6px;
}

/* ── Design tokens — dark mode ───────────────────────────────── */
html[data-theme="dark"] {
    --accent:        #9d6ef7;
    --accent-2:      #22d3ee;
    --accent-soft:   rgba(157, 110, 247, 0.13);
    --accent-warm:   #c084fc;

    --bg:            #0d0b12;
    --bg-soft:       #120f1a;
    --surface:       #18152a;
    --surface-2:     #13101e;
    --input-bg:      #110e1c;

    --line:          #2e2845;
    --line-soft:     rgba(157, 110, 247, 0.10);

    --text:          #f1eeff;
    --muted:         #9b93b8;

    --shadow:        0 14px 34px rgba(0, 0, 0, 0.40);
}

/* ── Typografie ──────────────────────────────────────────────── */
body {
    font-family: 'Barlow', system-ui, -apple-system, sans-serif;
    font-size: 15px; /* identiek aan base.css — voorkomt layout-verschuivingen */
    font-weight: 400;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(28px, 3vw, 46px); line-height: 1.05; font-weight: 800; }
h2 { font-size: 22px; line-height: 1.15; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.2;  font-weight: 700; }

/* ── Knoppen ─────────────────────────────────────────────────── */

/* Primaire knop: violet met witte tekst + gloed */
.btn-primary {
    color: #ffffff;
    background: #7c3aed;
    border-color: #6d28d9;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.30);
    /* font-family en letter-spacing bewust NIET gewijzigd — voorkomt layout-verschuiving in grid/flex containers */
}
.btn-primary:hover {
    background: #6d28d9;
    border-color: #5b21b6;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.40);
}

html[data-theme="dark"] .btn-primary {
    background: #9d6ef7;
    border-color: #7c3aed;
    box-shadow: 0 6px 18px rgba(157, 110, 247, 0.28);
}
html[data-theme="dark"] .btn-primary:hover {
    background: #8b5cf6;
    border-color: #6d28d9;
}

/* Secondaire knop: hemelsblauw */
.btn-secondary {
    background: var(--accent-2);
    border-color: transparent;
}

/* Success knop: violet outline stijl */
.btn-success {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}
.btn-success:hover {
    background: var(--accent-soft);
}

/* ── Focus ring: violet ──────────────────────────────────────── */
.btn:focus-visible,
input:focus,
select:focus,
textarea:focus {
    outline-color: color-mix(in srgb, var(--accent) 55%, transparent);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ── Brand marks (sidebar, topbar, header) ───────────────────── */
/* Waren geel met donkere tekst — nu violet met witte tekst      */
.site-brand-mark,
.sidebar-brand-mark,
.wn-brand-mark,
.topbar-brand-mark {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.28);
}

/* ── Navigatie actief-pill ───────────────────────────────────── */
.wn-nav-pill.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Avatar knop (groot, in header) ─────────────────────────── */
.wn-avatar-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
}

/* ── Profile avatar gradient: violet ────────────────────────── */
.profile-avatar {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
}

/* ── Cart badge gradient: violet → cyan ─────────────────────── */
.header-cart-count {
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    color: #ffffff;
}

/* ── Cart berichten banner ───────────────────────────────────── */
.header-cart-messages {
    background: rgba(124, 58, 237, 0.09);
    border-color: rgba(124, 58, 237, 0.18);
}

/* ── Alert kleuren — violet tint ─────────────────────────────── */
.alert-success {
    background: rgba(16, 185, 129, 0.09);
    border-color: rgba(16, 185, 129, 0.22);
    color: #059669;
}
html[data-theme="dark"] .alert-success {
    color: #34d399;
}

/* ── Sidebar actief item: violet ─────────────────────────────── */
.sidebar-link.is-active,
.sidebar-link:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ── Homepage hero: wit met subtiele violet ondertoon ────────── */
.hp-hero {
    background: #ffffff;
    border-color: #e5e7eb;
}
html[data-theme="dark"] .hp-hero {
    background: linear-gradient(135deg, #1a1630 0%, #120f1e 100%);
    border-color: #2e2845;
}

/* ── Card hover glow: violet ─────────────────────────────────── */
.card:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.10);
}
html[data-theme="dark"] .card:hover {
    box-shadow: 0 8px 28px rgba(157, 110, 247, 0.14);
}

/* ── Homepage product-grid (trending + verlanglijst) ─────────── */
.hp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.hp-product-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hp-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(124,58,237,.12);
    border-color: rgba(124,58,237,.3);
}
.hp-product-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg);
}
.hp-product-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.hp-product-card:hover .hp-product-thumb img { transform: scale(1.04); }
.hp-product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
    color: var(--muted);
}
.hp-product-badge {
    position: absolute;
    top: 8px; left: 8px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.hp-product-badge--hot  { background: rgba(239,68,68,.9);  color: #fff; }
.hp-product-badge--out  { background: rgba(0,0,0,.65);      color: #fff; }
.hp-product-badge--low  { background: rgba(245,158,11,.9); color: #fff; }
.hp-product-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.hp-product-name  { font-weight: 700; font-size: .85rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hp-product-shop  { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.hp-product-price { font-size: .9rem; font-weight: 800; color: var(--accent); margin-top: 4px; }
.hp-product-sold  { font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* ── Social proof op productpagina ───────────────────────────── */
.product-social-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.product-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}
.product-proof-item--hot {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.25);
    color: #dc2626;
}

/* ── Verlanglijst-pagina ─────────────────────────────────────── */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.wishlist-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: border-color .15s;
}
.wishlist-card:hover { border-color: rgba(124,58,237,.3); }
.wishlist-card-media {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface);
}
.wishlist-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.wishlist-card:hover .wishlist-card-media img { transform: scale(1.04); }
.wishlist-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.4rem;
    color: var(--muted);
}
.wishlist-stock-badge {
    position: absolute;
    bottom: 8px; left: 8px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
}
.wishlist-stock-badge--out { background: rgba(0,0,0,.7);      color: #fff; }
.wishlist-stock-badge--low { background: rgba(245,158,11,.9); color: #fff; }
.wishlist-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.wishlist-card-title {
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.3;
    color: var(--text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wishlist-card-title:hover { color: var(--accent); }
.wishlist-card-price { font-weight: 800; font-size: .95rem; color: var(--accent); }
.wishlist-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    align-items: stretch;
}
.wishlist-remove-btn {
    flex-shrink: 0;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.wishlist-remove-btn:hover { border-color: #ef4444; color: #ef4444; }
.wishlist-card-added { font-size: .72rem; color: var(--muted); }

@media (max-width: 640px) {
    .hp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .wishlist-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shop productkaart acties: uitlijning ────────────────────── */
/* Zorg dat qty-rij en favorietenknop exact even breed zijn      */
.shop-product-actions {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 8px;
}
.shop-product-actions input[type="number"] {
    flex: 0 0 60px;
    width: 60px;
    min-width: 0;
}
.shop-product-actions .btn {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Status badges: groen blijft semantisch correct ─────────── */
/* (geen override nodig — groen voor betaald/succesvol is juist) */

/* ── Notificatie-dot: violet ─────────────────────────────────── */
.notif-dot {
    background: #a855f7;
}

/* ── Shop banner accent ──────────────────────────────────────── */
.shop-banner {
    background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(168,85,247,.22));
}

/* ── Stream thumbnail placeholder ───────────────────────────── */
.stream-thumb-placeholder {
    background: linear-gradient(160deg, rgba(124,58,237,.10), rgba(168,85,247,.18));
}

/* ── Dev-hero banner: violet ─────────────────────────────────── */
.dev-hero {
    background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(14,165,233,.06));
    border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

/* ═══════════════════════════════════════════════════════════════
   FLASH SALE — aanbieding prijs display
   ═══════════════════════════════════════════════════════════════ */
.product-sale-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-right: 6px;
    vertical-align: middle;
}
.product-compare-price {
    font-size: .9rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 6px;
    text-decoration: line-through;
}
.product-sale-countdown {
    display: inline-block;
    font-size: .75rem;
    color: #ef4444;
    font-weight: 600;
    margin-left: 8px;
}
/* Shop product card SALE pill */
.shop-product-sale-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.shop-product-compare-price {
    font-size: .75rem;
    color: rgba(255,255,255,.75);
    font-weight: 400;
    margin-left: 4px;
    text-decoration: line-through;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT COMMENTS — reacties sectie
   ═══════════════════════════════════════════════════════════════ */
.product-comments-section { padding: 24px; }
.product-comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.product-comment-form textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--fg);
    font-size: .875rem;
    font-family: inherit;
}
.product-comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}
.product-comment-item {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
}
.product-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.product-comment-head strong { font-size: .875rem; }
.product-comment-item p { margin: 0; font-size: .875rem; }

/* ═══════════════════════════════════════════════════════════════
   ACHIEVEMENTS — account pagina
   ═══════════════════════════════════════════════════════════════ */
.account-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.account-achievement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-soft);
    background: var(--bg-soft);
}
.account-achievement-emoji {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
}
.account-achievement-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-achievement-body strong { font-size: .875rem; }
.account-achievement-body .muted { font-size: .75rem; }

/* ═══════════════════════════════════════════════════════════════
   CLIPS GALLERY — publieke galerij (/clips)
   ═══════════════════════════════════════════════════════════════ */
.clips-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.clip-gallery-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line-soft);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.clip-gallery-card:hover {
    box-shadow: 0 4px 18px rgba(124,58,237,.13);
    transform: translateY(-2px);
}
.clip-gallery-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-soft);
    overflow: hidden;
}
.clip-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.clip-gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(168,85,247,.18));
}
.clip-gallery-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .15s;
}
.clip-gallery-card:hover .clip-gallery-play { opacity: 1; }
.clip-gallery-views {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: .68rem;
    color: #fff;
    background: rgba(0,0,0,.55);
    padding: 2px 6px;
    border-radius: 5px;
}
.clip-gallery-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.clip-gallery-title {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clip-gallery-shop  { font-size: .75rem; color: var(--accent); font-weight: 600; }
.clip-gallery-product { font-size: .72rem; color: var(--muted); }
.clip-gallery-date  { font-size: .7rem; color: var(--muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   DISCOVER PAGE — score-based product grid
   ═══════════════════════════════════════════════════════════════ */
.discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.discover-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line-soft);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.discover-card:hover {
    box-shadow: 0 4px 18px rgba(124,58,237,.13);
    transform: translateY(-2px);
}
.discover-card-thumb {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-soft);
    overflow: hidden;
}
.discover-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.discover-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(168,85,247,.14));
}
.discover-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.discover-badge--sale    { background: #ef4444; color: #fff; }
.discover-badge--hot     { background: #f59e0b; color: #fff; }
.discover-badge--popular { background: #ec4899; color: #fff; }
.discover-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.discover-card-title {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.discover-card-shop  { font-size: .72rem; color: var(--accent); font-weight: 600; }
.discover-card-pricing {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.discover-card-price   { font-size: .925rem; font-weight: 800; color: var(--fg); }
.discover-card-compare { font-size: .78rem; color: var(--muted); text-decoration: line-through; }
.discover-card-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.discover-card-stats span { font-size: .7rem; color: var(--muted); }

/* ── Homepage "Voor jou" subtitle ─────────────────────────────── */
.hp-section-sub {
    font-size: .82rem;
    color: var(--muted);
    margin: -10px 0 12px;
}

/* ═══════════════════════════════════════════════════════════════
   CSS-ONLY STAR RATING INPUT
   ═══════════════════════════════════════════════════════════════ */
.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    line-height: 1;
}
.star-input input[type="radio"] { display: none; }
.star-input label {
    font-size: 1.7rem;
    color: var(--line-soft);
    cursor: pointer;
    transition: color .1s;
    line-height: 1;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: #f59e0b; }

/* Review form criteria groepen (product vs seller) */
.review-criteria-group {
    background: var(--bg-soft, rgba(148,163,184,.04));
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px 14px;
}
.review-criteria-group-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: 10px;
}
.review-criteria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.review-criterion label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}
.review-required { color: #ef4444; margin-left: 2px; }

/* Review vergrendeld — nog niet gekocht/ontvangen */
.review-locked {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(148,163,184,.06);
    border: 1px solid var(--line-soft);
}
.review-locked-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.review-locked p    { font-size: .82rem; color: var(--muted); margin: 4px 0 0; }

/* Subcriteria display in review list */
.review-subcriteria {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 8px;
}
.review-subcriteria span { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.review-subcriteria .sub-stars { color: #f59e0b; letter-spacing: -.05em; }

/* ═══════════════════════════════════════════════════════════════
   SELLER PROFILE PAGE  (.sp-*)
   ═══════════════════════════════════════════════════════════════ */

/* Hero */
.sp-hero {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 28px;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    padding: 28px 28px 24px;
    position: relative;
}
.sp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.55) 0%, transparent 60%);
    pointer-events: none;
}
.sp-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}
.sp-hero-logo {
    width: 78px;
    height: 78px;
    object-fit: cover;
    border-radius: 14px;
    border: 3px solid rgba(255,255,255,.25);
    flex-shrink: 0;
}
.sp-hero-copy { flex: 1; min-width: 0; color: #fff; }
.sp-hero-name {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.sp-hero-desc { font-size: .875rem; opacity: .85; margin: 0 0 8px; line-height: 1.5; }
.sp-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; opacity: .8; }
.sp-hero-actions { flex-shrink: 0; align-self: flex-end; }

/* Score cards */
.sp-scores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.sp-score-card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.sp-score-card--total {
    background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(168,85,247,.04));
    border-color: rgba(124,58,237,.18);
}
.sp-score-icon { font-size: 1.5rem; flex-shrink: 0; }
.sp-score-body { min-width: 0; }
.sp-score-label {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.sp-score-stars { display: flex; gap: 1px; line-height: 1; margin-bottom: 2px; }
.sp-star         { font-size: 1rem; }
.sp-star--full   { color: #f59e0b; }
.sp-star--half   { color: #f59e0b; opacity: .5; }
.sp-star--empty  { color: var(--line-soft); }
.sp-score-value  { font-size: .875rem; font-weight: 700; color: var(--fg); }
.sp-score-value--big { font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.sp-score-empty  { font-size: .78rem; color: var(--muted); font-style: italic; }

/* Two-column layout */
.sp-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}
/* Fix 1 — geen sidebar: reviews vullen de volle breedte */
.sp-layout--full {
    grid-template-columns: 1fr;
}
.sp-layout--full .sp-reviews {
    grid-column: 1 / -1;
}

/* Sidebar */
.sp-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sp-widget {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px;
}
.sp-widget-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 0 0 12px;
}
.sp-buyer-stats { display: flex; gap: 16px; margin-bottom: 4px; }
.sp-buyer-stat  { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sp-buyer-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.sp-buyer-stat-label { font-size: .72rem; color: var(--muted); }
.sp-achievement-list { display: flex; flex-direction: column; gap: 10px; }
.sp-achievement-item { display: flex; align-items: center; gap: 10px; }
.sp-achievement-emoji { font-size: 1.4rem; flex-shrink: 0; }
.sp-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .82rem;
    color: var(--muted);
}
.sp-trust-list li.is-ok { color: var(--fg); }

/* Reviews column */
.sp-reviews-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sp-reviews-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    padding: 1px 8px;
    line-height: 1.5;
}
.sp-review {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.sp-review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sp-review-meta  { display: flex; flex-direction: column; gap: 2px; }
.sp-review-author  { font-size: .9rem; }
.sp-review-product { font-size: .8rem; color: var(--muted); }
.sp-review-product a { color: var(--accent); text-decoration: none; }
.sp-review-product a:hover { text-decoration: underline; }
.sp-review-date  { font-size: .75rem; color: var(--muted); }
.sp-review-overall { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sp-review-stars { color: #f59e0b; font-size: 1.1rem; letter-spacing: -.05em; }
.sp-review-score { font-size: .8rem; color: var(--muted); font-weight: 600; }
.sp-review-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.sp-review-criterion { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.sp-crit-stars   { color: #f59e0b; letter-spacing: -.05em; }
.sp-review-title { display: block; font-size: .9rem; margin-bottom: 4px; }
.sp-review-body  { font-size: .875rem; color: var(--fg); line-height: 1.55; margin: 0; }

/* Paginering */
.sp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
}
.sp-page-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: var(--card);
    color: var(--accent);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.sp-page-btn:hover { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.3); }
.sp-page-info { font-size: .82rem; color: var(--muted); }

/* Trust-widget boven reviews voor gasten */
.sp-trust-guest {
    border-left: 3px solid rgba(124,58,237,.25);
}

@media (max-width: 860px) {
    .sp-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .clips-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .discover-grid      { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .account-achievements-grid { grid-template-columns: 1fr; }
    .review-criteria-grid { grid-template-columns: 1fr; }
    .sp-scores { grid-template-columns: repeat(2, 1fr); }
    .sp-hero { padding: 18px; min-height: 140px; }
    .sp-hero-name { font-size: 1.2rem; }
}