/* ═══════════════════════════════════════════════════════════
   THE BLACK LIGHT DISTRICT — Theme
   Dark background, neon glows. Products are the stars.
   ═══════════════════════════════════════════════════════════ */

.skin-blacklight {
    --color-bg: #000;
    --color-text: #9999ff;
    --color-text-muted: #888;
    --color-accent-warm-pastel: #9999ff;
    --color-primary: #00ff73;
    --color-primary-dim: rgba(0, 255, 115, 0.2);
    --color-secondary: #5e00ff;
    --color-secondary-dim: rgba(94, 0, 255, 0.2);
    --color-accent: #ff007b;
    --color-accent-dim: rgba(255, 0, 123, 0.5);
    --color-accent-warm: #f0ff00;
    --color-primary-subtle: rgba(0, 255, 115, 0.05);
    /* Badge / stock / sold-out */
    --color-badge-bg: #5e00ff;
    --color-badge-text: #ff007b;
    --color-stock-text: #888;
    --color-soldout-text: #ff007b;
    --color-soldout-glow: rgba(255, 0, 123, 0.5);
    --color-soldout-overlay: rgba(0, 0, 0, 0.45);

    --color-surface: #0a0a0a;
    --color-border: #1a1a1a;
    --color-input-fill: #1e0f3d;

    --radius: 4px;
    --border-inset: 70px;

    /* Black → dark purple gradient toward bottom */
    background: linear-gradient(180deg, #000000 0%, #000000 50%, #0d0821 75%, #1a0e3e 100%) fixed;
}

/* ─── Decorative 9-slice border frame ──────────────────── */
/* Desktop (256px source, 113px corners) */
.skin-blacklight .border-frame {
    border: 113px solid transparent;
    border-image-source: url('/assets/images/site/borders/9slice_border_blank.png');
    border-image-slice: 113;
    border-image-width: 113px;
    border-image-repeat: repeat;
}

/* Tablet (128px source, 56px corners) */
@media (max-width: 1024px) {
    .skin-blacklight {
        --border-inset: 35px;
    }
    .skin-blacklight .border-frame {
        border-width: 56px;
        border-image-source: url('/assets/images/site/borders/9slice_border_blank_128.png');
        border-image-slice: 56;
        border-image-width: 56px;
    }
}

/* Mobile (64px source, 28px corners) */
@media (max-width: 600px) {
    .skin-blacklight {
        --border-inset: 18px;
    }
    .skin-blacklight .border-frame {
        border-width: 28px;
        border-image-source: url('/assets/images/site/borders/9slice_border_blank_64.png');
        border-image-slice: 28;
        border-image-width: 28px;
    }
}

/* ─── Header: subtle glow underline ──────────────────────── */
.skin-blacklight .site-header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid #111;
    box-shadow: 0 1px 20px var(--color-primary-subtle);
}

.skin-blacklight .site-logo {
    text-shadow: 0 0 10px var(--color-primary-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 1.2rem;
}

/* ─── Product Cards: no borders, float on black ──────────── */
.skin-blacklight .product-card {
    background: transparent;
}

.skin-blacklight .product-card:hover {
    transform: translateY(-4px);
}

.skin-blacklight .product-card:hover .product-card-title {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary-dim);
}

.skin-blacklight .product-card-price {
    color: var(--color-primary);
    text-shadow: 0 0 6px var(--color-primary-dim);
}

/* ─── Buttons: neon glow on hover ────────────────────────── */
.skin-blacklight .btn-primary {
    background: var(--color-primary);
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
}

.skin-blacklight .btn-primary:hover {
    box-shadow:
        0 0 10px var(--color-primary),
        0 0 30px var(--color-primary-dim),
        inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.skin-blacklight .btn-secondary {
    border-color: #333;
    color: var(--color-text-muted);
}

.skin-blacklight .btn-secondary:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    box-shadow: 0 0 10px var(--color-secondary-dim);
}

/* ─── Quantity buttons ───────────────────────────────────── */
.skin-blacklight .qty-btn {
    border-color: #333;
}

.skin-blacklight .qty-btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary-dim);
    background: var(--color-primary-subtle);
}

/* ─── Product detail price glow ──────────────────────────── */
.skin-blacklight .product-price {
    text-shadow: 0 0 12px var(--color-primary-dim);
}

/* ─── Gallery thumbnails ─────────────────────────────────── */
.skin-blacklight .gallery-thumb.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary-dim);
}

/* ─── Cart badge pulse ───────────────────────────────────── */
.skin-blacklight .cart-badge {
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent-dim);
}

/* ─── Cart summary box ───────────────────────────────────── */
.skin-blacklight .cart-summary {
    background: #050505;
    border-color: #1a1a1a;
}

/* ─── Notification toast ─────────────────────────────────── */
.skin-blacklight .cart-notification {
    background: #0a0a0a;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary-dim);
}

/* ─── Footer ─────────────────────────────────────────────── */
.skin-blacklight .site-footer {
    border-top-color: #111;
}

/* ─── Links ──────────────────────────────────────────────── */
.skin-blacklight a:hover {
    text-shadow: 0 0 6px var(--color-primary-dim);
}

/* ─── Selection highlight ────────────────────────────────── */
.skin-blacklight ::selection {
    background: var(--color-primary);
    color: #000;
}