/* ==================== CSS VARIABLES ==================== */
:root {
    /* Colors - Mystical Witchy Purple Palette */
    --deep-navy: #0a1628;
    --dark-purple: #1a1a3e;
    --dark-bg: #0a1628;
    --midnight-purple: #2d1b4e;
    --witchy-purple: #4a3866;
    --lavender: #9b7eb5;
    --soft-lavender: #c8a2d0;
    --text-light: #e8e0d4;
    --cannabis-green: #5a7a5c;
    --cannabis-light: #7a9a7c;
    --cannabis-dark: #3d5240;
    --amber: #d4a574;
    --gold: #b8860b;
    --redbull-blue: #1e3a8a;
    --redbull-silver: #c0c0c0;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--midnight-purple), var(--dark-purple));
    --gradient-card: linear-gradient(145deg, rgba(74, 56, 102, 0.3), rgba(45, 27, 78, 0.5));
    --gradient-glow: radial-gradient(circle, rgba(155, 126, 181, 0.3), transparent);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Typography */
    --font-mystical: 'Carattere', cursive;
    --font-elegant: 'Cinzel', serif;
    --font-body: 'Inter', sans-serif;
    --font-retro: 'VT323', monospace;

    /* Effects */
    --shadow-glow: 0 0 20px rgba(155, 126, 181, 0.4);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --border-mystical: 2px solid rgba(155, 126, 181, 0.3);
}

/* ==================== RESET & BASE STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--deep-navy);
    color: var(--soft-lavender);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
}

/* ==================== ANIMATED BACKGROUND ==================== */
.mystical-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        var(--deep-navy) 0%,
        var(--dark-purple) 50%,
        var(--midnight-purple) 100%);
}

/* Mystical mist overlay */
.mystical-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(155, 126, 181, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(90, 122, 92, 0.08) 0%, transparent 50%);
    animation: mistFlow 20s ease-in-out infinite;
}

@keyframes mistFlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Floating stars */
.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--soft-lavender);
    border-radius: 50%;
    box-shadow: 0 0 4px var(--lavender);
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Floating cannabis leaves */
.cannabis-leaf {
    position: absolute;
    font-size: 2rem;
    color: var(--cannabis-green);
    opacity: 0.2;
    animation: floatSway 15s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(90, 122, 92, 0.4));
}

@keyframes floatSway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-5deg); }
    75% { transform: translateY(-30px) rotate(3deg); }
}

/* Floating pot leaf images */
.pot-leaf-image {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.35;
    animation: leafSpin 20s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(90, 122, 92, 0.5));
    pointer-events: none;
}

@keyframes leafSpin {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    25% { transform: translateY(-25px) rotate(90deg) scale(1.1); }
    50% { transform: translateY(-15px) rotate(180deg) scale(0.9); }
    75% { transform: translateY(-35px) rotate(270deg) scale(1.05); }
}

/* Floating cannabis leaf images (high-quality extracted) */
.floating-leaf-image {
    position: absolute;
    width: 70px;
    height: auto;
    opacity: 0.4;
    animation: floatLeaf 15s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(100, 200, 100, 0.4));
    pointer-events: none;
}

@keyframes floatLeaf {
    0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
    33% { transform: translateY(-30px) rotate(10deg) scale(1.05); }
    66% { transform: translateY(-15px) rotate(-8deg) scale(0.95); }
}

/* Floating Red Bull can images */
.redbull-image {
    position: absolute;
    height: 80px;
    width: auto;
    opacity: 0.4;
    animation: canBob 10s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(30, 58, 138, 0.6));
    pointer-events: none;
}

@keyframes canBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-40px) rotate(3deg); }
}

/* Crescent moons */
.moon {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: inset -5px 0 0 var(--amber);
    opacity: 0.4;
    animation: moonGlow 6s ease-in-out infinite;
}

@keyframes moonGlow {
    0%, 100% { opacity: 0.3; filter: drop-shadow(0 0 5px var(--amber)); }
    50% { opacity: 0.6; filter: drop-shadow(0 0 15px var(--gold)); }
}

/* ==================== MAIN CONTAINER ==================== */
.container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-lg);
    box-sizing: border-box;
}

/* ==================== HEADER ==================== */
header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    position: relative;
}

.site-title {
    font-family: var(--font-mystical);
    font-size: clamp(3rem, 8vw, 6rem);
    color: var(--soft-lavender);
    text-shadow:
        0 0 20px rgba(155, 126, 181, 0.8),
        0 0 40px rgba(155, 126, 181, 0.4),
        2px 2px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: var(--spacing-sm);
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(155, 126, 181, 0.8), 0 0 40px rgba(155, 126, 181, 0.4); }
    50% { text-shadow: 0 0 30px rgba(155, 126, 181, 1), 0 0 60px rgba(155, 126, 181, 0.6); }
}

.site-subtitle {
    font-family: var(--font-mystical);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--cannabis-light);
    text-shadow:
        0 0 15px rgba(122, 154, 124, 0.8),
        0 0 30px rgba(122, 154, 124, 0.4);
    margin-bottom: var(--spacing-xs);
    animation: subtitleGlow 3s ease-in-out infinite;
    font-style: italic;
}

@keyframes subtitleGlow {
    0%, 100% { text-shadow: 0 0 15px rgba(122, 154, 124, 0.8), 0 0 30px rgba(122, 154, 124, 0.4); }
    50% { text-shadow: 0 0 25px rgba(122, 154, 124, 1), 0 0 50px rgba(122, 154, 124, 0.6); }
}

.site-tagline {
    font-family: var(--font-elegant);
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: var(--amber);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Decorative sunflowers */
.sunflower {
    position: absolute;
    width: 60px;
    height: auto;
    animation: gentleSway 4s ease-in-out infinite;
    transform-origin: bottom center;
    filter: drop-shadow(0 0 8px rgba(184, 134, 11, 0.4));
}

.sunflower.left {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.sunflower.right {
    right: 5%;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
    animation-delay: -2s;
}

@keyframes gentleSway {
    0%, 100% { transform: translateY(-50%) rotate(-5deg); }
    50% { transform: translateY(-50%) rotate(5deg); }
}

/* ==================== TWO COLUMN LAYOUT ==================== */
.main-layout {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: var(--spacing-lg);
    align-items: stretch; /* Allow columns to stretch to match heights */
}

/* ==================== LEFT SIDEBAR ==================== */
.sidebar {
    position: sticky;
    top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Profile Section */
.profile-section {
    padding: var(--spacing-lg);
    text-align: center;
}

.profile-content {
    position: relative;
}

.profile-photo-container {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--spacing-md);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo-container img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%; /* Adjust to center face */
    position: relative;
    z-index: 10;
    box-shadow: 0 0 20px rgba(74, 56, 102, 0.5);
}

.profile-photo-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--witchy-purple), var(--midnight-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--soft-lavender);
    position: relative;
    z-index: 10;
}

/* Ouroboros Snake Border */
.ouroboros-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    animation: ouroborosRotate 30s linear infinite;
}

@keyframes ouroborosRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ouroboros-body {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 8px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--deep-navy), var(--deep-navy)) padding-box,
        linear-gradient(90deg, var(--witchy-purple), var(--midnight-purple), var(--witchy-purple)) border-box;
    box-shadow:
        0 0 20px rgba(74, 56, 102, 0.5),
        inset 0 0 20px rgba(74, 56, 102, 0.3);
}

.snake-head {
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    width: 25px;
    height: 20px;
    background: linear-gradient(90deg, var(--witchy-purple), var(--midnight-purple));
    border-radius: 50% 30% 30% 50%;
    box-shadow: 0 0 15px rgba(74, 56, 102, 0.6);
}

.snake-head::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--gold);
    animation: snakeEyeBlink 4s ease-in-out infinite;
}

.snake-tail {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 20px;
    height: 12px;
    background: var(--midnight-purple);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.snake-scale {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--lavender);
    border-radius: 50%;
    opacity: 0.3;
}

.snake-scale:nth-child(4) { top: 10px; left: 50%; }
.snake-scale:nth-child(5) { top: 30px; right: 20px; }
.snake-scale:nth-child(6) { bottom: 30px; right: 15px; }
.snake-scale:nth-child(7) { bottom: 10px; left: 45%; }
.snake-scale:nth-child(8) { bottom: 25px; left: 20px; }
.snake-scale:nth-child(9) { top: 35px; left: 15px; }

@keyframes snakeEyeBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.profile-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--lavender);
    box-shadow: var(--shadow-glow);
    object-fit: cover;
    background: linear-gradient(135deg, var(--witchy-purple), var(--midnight-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--soft-lavender);
}

.profile-name {
    font-family: var(--font-elegant);
    font-size: 1.8rem;
    color: var(--soft-lavender);
    margin-bottom: var(--spacing-xs);
}

.profile-subtitle {
    font-size: 0.95rem;
    color: var(--amber);
    font-style: italic;
}

/* About Me Section */
.about-section {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 16px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-card);
}

.section-title {
    font-family: var(--font-elegant);
    font-size: 1.5rem;
    color: var(--amber);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    text-align: center;
}

.about-text {
    font-size: 0.95rem;
    color: var(--soft-lavender);
    line-height: 1.7;
}

/* ========================================
   Lunar Chronicle - Blog Pane
   ======================================== */
.blog-pane-lunar {
    background: linear-gradient(145deg, rgba(74, 56, 102, 0.4), rgba(45, 27, 78, 0.6));
    border: 2px solid rgba(155, 126, 181, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* Glowing accent line on left */
.blog-pane-lunar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--accent-purple) 20%,
        var(--soft-lavender) 50%,
        var(--accent-purple) 80%,
        transparent 100%
    );
    box-shadow: 0 0 20px var(--accent-purple), 0 0 40px rgba(181, 101, 255, 0.3);
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.8; box-shadow: 0 0 20px var(--accent-purple), 0 0 40px rgba(181, 101, 255, 0.3); }
    50% { opacity: 1; box-shadow: 0 0 30px var(--accent-purple), 0 0 60px rgba(181, 101, 255, 0.5); }
}

.blog-pane-lunar:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(181, 101, 255, 0.2);
    border-color: var(--accent-purple);
}

.pane-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.pane-moon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 15px rgba(181, 101, 255, 0.6));
    animation: moonFloat 4s ease-in-out infinite;
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.pane-title {
    font-family: var(--font-mystical);
    font-size: 1.8rem;
    color: var(--accent-purple);
    text-shadow: 0 0 20px rgba(181, 101, 255, 0.4);
}

.pane-subtitle {
    font-family: var(--font-elegant);
    font-size: 0.7rem;
    color: var(--lavender);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pane-category {
    display: inline-block;
    font-family: var(--font-retro);
    font-size: 0.85rem;
    color: var(--cannabis-green);
    background: rgba(90, 122, 92, 0.25);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    margin-left: 0.5rem;
}

.pane-post-title {
    font-family: var(--font-elegant);
    font-size: 1.15rem;
    color: var(--soft-lavender);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    padding-left: 0.5rem;
}

.pane-excerpt {
    font-size: 0.9rem;
    color: var(--lavender);
    line-height: 1.6;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pane-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.5rem;
}

.pane-date {
    font-family: var(--font-retro);
    font-size: 0.85rem;
    color: var(--lavender);
    opacity: 0.8;
}

.pane-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold);
    text-decoration: none;
    font-family: var(--font-elegant);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.pane-read-more:hover {
    color: #d4a50a;
    gap: 0.8rem;
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.5);
}

.pane-read-more::after {
    content: '→';
    font-size: 1.1rem;
}


/* Contact Me Button */
.contact-section {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 16px;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.contact-me-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--cannabis-dark), var(--cannabis-light));
    color: var(--cannabis-light);
    text-decoration: none;
    padding: var(--spacing-md);
    border-radius: 12px;
    font-family: var(--font-mystical);
    font-size: 2rem;
    font-weight: 400;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    box-shadow: var(--shadow-card), 0 0 20px rgba(122, 154, 124, 0.4);
    text-shadow: 0 0 10px rgba(122, 154, 124, 0.8), 0 0 20px rgba(122, 154, 124, 0.5);
    animation: mysticalGlow 3s ease-in-out infinite;
}

@keyframes mysticalGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(122, 154, 124, 0.8), 0 0 20px rgba(122, 154, 124, 0.5);
        box-shadow: var(--shadow-card), 0 0 20px rgba(122, 154, 124, 0.4);
    }
    50% {
        text-shadow: 0 0 15px rgba(122, 154, 124, 1), 0 0 30px rgba(122, 154, 124, 0.7), 0 0 40px rgba(122, 154, 124, 0.4);
        box-shadow: var(--shadow-card), 0 0 30px rgba(122, 154, 124, 0.6);
    }
}

.contact-me-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), 0 0 35px rgba(122, 154, 124, 0.7);
    background: linear-gradient(135deg, var(--cannabis-light), var(--gold));
    color: var(--dark-bg);
}

.contact-me-btn i {
    margin-right: 8px;
}

/* Social Media Icons */
.social-section {
    background: transparent;
    border: none;
    padding: var(--spacing-sm) 0;
    text-align: center;
}

.social-section .section-title {
    margin-bottom: var(--spacing-sm);
}

.social-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.social-icon-link {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(200, 160, 255, 0.8) 0%,
        rgba(181, 101, 255, 0.6) 50%,
        rgba(100, 60, 160, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 12px rgba(181, 101, 255, 0.4);
}

.social-icon-link:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 20px rgba(181, 101, 255, 0.8),
        inset 0 0 12px rgba(255, 255, 255, 0.2);
    border-color: #fff;
}

/* ==================== RIGHT MAIN CONTENT ==================== */
.main-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-height: 100%; /* Fill the grid cell height */
}

/* TikTok Carousel Section */
.tiktok-carousel {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 20px;
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    position: relative;
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.carousel-wrapper {
    overflow: hidden;
    flex: 1;
    border-radius: 12px;
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease-in-out;
}

.carousel-slide {
    min-width: min(325px, 100vw - 120px);
    max-width: min(325px, 100vw - 120px);
    min-height: 600px;
    flex-shrink: 0;
}

.carousel-btn {
    background: rgba(155, 126, 181, 0.2);
    border: 1px solid var(--lavender);
    color: var(--soft-lavender);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.carousel-btn:hover {
    background: var(--lavender);
    color: var(--dark-purple);
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(155, 126, 181, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dots .dot.active {
    background: var(--lavender);
    transform: scale(1.2);
}

.carousel-dots .dot:hover {
    background: var(--soft-lavender);
}

/* Links Section */
.links-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.links-category {
    margin-bottom: var(--spacing-lg);
}

.links-category:last-child {
    margin-bottom: 0;
}

.category-title {
    font-family: var(--font-elegant);
    font-size: 1.3rem;
    color: var(--amber);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.links-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.link-card {
    position: relative;
    background: var(--dark-purple);
    padding: 20px 28px;
    text-decoration: none;
    color: var(--soft-lavender);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 30px;
    overflow: hidden;
    border: none;
}

/* Subtle left accent bar */
.link-card::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 2px;
    height: calc(100% - 24px);
    background: linear-gradient(180deg, var(--accent-purple), var(--lavender));
    border-radius: 0 2px 2px 0;
    opacity: 0.4;
    transition: all 0.3s ease;
}

/* Subtle right accent bar */
.link-card::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 0;
    width: 2px;
    height: calc(100% - 24px);
    background: linear-gradient(180deg, var(--lavender), var(--accent-purple));
    border-radius: 2px 0 0 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.link-card:hover {
    background: var(--midnight-purple);
    box-shadow: 0 0 30px rgba(181, 101, 255, 0.15);
}

.link-card:hover::before,
.link-card:hover::after {
    opacity: 0.8;
    height: calc(100% - 16px);
    top: 8px;
    box-shadow: 0 0 8px rgba(181, 101, 255, 0.5);
}

/* Star cluster decoration */
.link-stars {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 14px;
    flex-shrink: 0;
}

.link-stars::before,
.link-stars::after {
    position: absolute;
    color: var(--lavender);
    transition: all 0.3s ease;
}

.link-stars::before {
    content: '\2726';
    top: 0;
    left: 8px;
    font-size: 0.7rem;
}

.link-stars::after {
    content: '\2726';
    bottom: 2px;
    left: 2px;
    font-size: 0.5rem;
}

.link-stars span {
    position: absolute;
    bottom: 4px;
    right: 2px;
    font-size: 0.45rem;
    color: var(--lavender);
    transition: all 0.3s ease;
}

.link-card:hover .link-stars::before,
.link-card:hover .link-stars::after,
.link-card:hover .link-stars span {
    color: var(--accent-purple);
    text-shadow: 0 0 8px var(--accent-purple);
}

.link-card:hover .link-stars::before {
    transform: scale(1.2);
}

.link-icon {
    font-size: 1.8rem;
    color: var(--cannabis-green);
    min-width: 40px;
    text-align: center;
    display: none; /* Hidden - replaced by stars */
}

.link-info {
    flex: 1;
    min-width: 0;
}

.link-title {
    font-family: 'Almendra', serif;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    font-weight: 600;
    margin-bottom: 4px;
    color: white;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.link-description {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    color: var(--lavender);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Link visit button */
.link-action {
    padding: 12px 24px;
    background: rgba(181, 101, 255, 0.15);
    border: 1px solid var(--accent-purple);
    border-radius: 20px;
    color: var(--accent-purple);
    font-family: var(--font-elegant);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-right: 12px;
}

.link-card:hover .link-action {
    background: var(--accent-purple);
    color: white;
}

/* Promo Codes Section */
.promo-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.promo-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.promo-card {
    position: relative;
    background: var(--dark-purple);
    padding: 20px 28px;
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    border: none;
}

/* Subtle left accent bar */
.promo-card::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 2px;
    height: calc(100% - 24px);
    background: linear-gradient(180deg, var(--accent-purple), var(--lavender));
    border-radius: 0 2px 2px 0;
    opacity: 0.4;
    transition: all 0.3s ease;
}

/* Subtle right accent bar */
.promo-card::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 0;
    width: 2px;
    height: calc(100% - 24px);
    background: linear-gradient(180deg, var(--lavender), var(--accent-purple));
    border-radius: 2px 0 0 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.promo-card:hover {
    background: var(--midnight-purple);
    box-shadow: 0 0 30px rgba(181, 101, 255, 0.15);
}

.promo-card:hover::before,
.promo-card:hover::after {
    opacity: 0.8;
    height: calc(100% - 16px);
    top: 8px;
    box-shadow: 0 0 8px rgba(181, 101, 255, 0.5);
}

/* Star cluster for promo cards */
.promo-stars {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: 14px;
    flex-shrink: 0;
}

.promo-stars::before,
.promo-stars::after {
    position: absolute;
    color: var(--lavender);
    transition: all 0.3s ease;
}

.promo-stars::before {
    content: '\2726';
    top: 0;
    left: 8px;
    font-size: 0.7rem;
}

.promo-stars::after {
    content: '\2726';
    bottom: 2px;
    left: 2px;
    font-size: 0.5rem;
}

.promo-stars span {
    position: absolute;
    bottom: 4px;
    right: 2px;
    font-size: 0.45rem;
    color: var(--lavender);
    transition: all 0.3s ease;
}

.promo-card:hover .promo-stars::before,
.promo-card:hover .promo-stars::after,
.promo-card:hover .promo-stars span {
    color: var(--accent-purple);
    text-shadow: 0 0 8px var(--accent-purple);
}

.promo-card:hover .promo-stars::before {
    transform: scale(1.2);
}

.promo-content {
    flex: 1;
    min-width: 0;
}

.promo-brand {
    font-family: 'Almendra', serif;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    color: white;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.promo-description {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    color: var(--lavender);
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-code-container {
    display: flex;
    gap: 0;
    align-items: center;
    margin-right: 12px;
}

.promo-code {
    display: none; /* Hidden - code shown in description */
}

.copy-btn {
    padding: 12px 24px;
    background: rgba(181, 101, 255, 0.15);
    border: 1px solid var(--accent-purple);
    border-radius: 20px;
    color: var(--accent-purple);
    font-family: var(--font-elegant);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 500;
}

.copy-btn:hover {
    background: var(--accent-purple);
    color: white;
    transform: none;
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn.copied {
    background: var(--accent-purple);
    color: white;
}

.promo-link-btn {
    padding: 12px 24px;
    background: rgba(181, 101, 255, 0.15);
    border: 1px solid var(--accent-purple);
    border-radius: 20px;
    color: var(--accent-purple);
    font-family: var(--font-elegant);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 500;
}

.promo-link-btn:hover {
    background: var(--accent-purple);
    color: white;
    transform: none;
}

.promo-link-btn:active {
    transform: scale(0.95);
}

/* ==================== LINKS & PROMO MODAL ==================== */
.links-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.links-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.links-modal {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.links-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--lavender);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.links-modal-close:hover {
    color: var(--accent-purple);
    transform: scale(1.1);
}

.links-modal-title {
    font-family: var(--font-elegant);
    font-size: 1.2rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Vertical Carousel */
.links-carousel {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.links-carousel::-webkit-scrollbar {
    display: none;
}

.links-carousel-item {
    scroll-snap-align: center;
    padding: 20px;
    margin-bottom: 16px;
    background: var(--dark-purple);
    border-radius: 20px;
    border: 1px solid rgba(155, 126, 181, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.links-carousel-item:hover,
.links-carousel-item.active {
    border-color: var(--accent-purple);
    box-shadow: 0 0 30px rgba(181, 101, 255, 0.2);
}

.links-carousel-item:last-child {
    margin-bottom: 0;
}

.carousel-item-stars {
    text-align: center;
    margin-bottom: 12px;
    color: var(--lavender);
    font-size: 0.6rem;
    letter-spacing: 8px;
}

.links-carousel-item:hover .carousel-item-stars,
.links-carousel-item.active .carousel-item-stars {
    color: var(--accent-purple);
    text-shadow: 0 0 8px var(--accent-purple);
}

.carousel-item-title {
    font-family: 'Almendra', serif;
    font-size: 1.2rem;
    color: white;
    text-align: center;
    margin-bottom: 8px;
}

.carousel-item-desc {
    font-size: 0.85rem;
    color: var(--lavender);
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.5;
}

.carousel-item-action {
    display: flex;
    justify-content: center;
}

.carousel-item-btn {
    padding: 14px 32px;
    background: var(--accent-purple);
    border: none;
    border-radius: 25px;
    color: white;
    font-family: var(--font-elegant);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.carousel-item-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(181, 101, 255, 0.5);
}

/* Carousel navigation dots */
.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.carousel-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--witchy-purple);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-nav-dot.active,
.carousel-nav-dot:hover {
    background: var(--accent-purple);
    box-shadow: 0 0 10px var(--accent-purple);
}

/* Trigger cards - remove direct link behavior */
.link-card,
.promo-card {
    cursor: pointer;
}

.link-card .link-action,
.promo-card .copy-btn,
.promo-card .promo-link-btn {
    display: none; /* Hide action buttons on cards - action is in modal */
}

/* ==================== GRIMOIRE SECTION ==================== */
.grimoire-section {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 20px;
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

/* Grimoire Book Colors */
.grimoire-panel,
.grimoire-modal {
    --page-dark: #2a2833;
    --page-mid: #363442;
    --page-light: #45424f;
    --page-edge: #1e1c24;
    --leather-dark: #151318;
    --leather-mid: #1f1b26;
    --leather-light: #2a2632;
    --text-bright: #d4d0de;
    --text-mid: #a8a2b8;
    --text-dim: #7a7488;
    --accent-silver: #b8b2c8;
    --page-shadow: rgba(10, 8, 15, 0.6);
}

/* Featured Panel - Clickable Book */
.grimoire-panel {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 2rem;
}

.grimoire-panel:hover {
    transform: translateY(-5px) scale(1.01);
}

.grimoire-panel:hover .grimoire-book {
    box-shadow:
        0 35px 60px rgba(0,0,0,0.6),
        0 15px 25px rgba(0,0,0,0.4),
        0 0 40px rgba(181, 101, 255, 0.15);
}

.grimoire-hint {
    text-align: center;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 1rem;
    opacity: 0.7;
}

/* Open Book Panel */
.grimoire-book {
    position: relative;
    display: flex;
    background: linear-gradient(180deg,
        var(--leather-mid) 0%,
        var(--leather-dark) 50%,
        var(--leather-mid) 100%
    );
    border-radius: 8px;
    padding: 15px;
    box-shadow:
        0 25px 50px rgba(0,0,0,0.5),
        0 10px 20px rgba(0,0,0,0.3),
        inset 0 1px 2px rgba(255,255,255,0.05);
    transform: perspective(1000px) rotateX(2deg);
    transform-style: preserve-3d;
}

/* Leather texture */
.grimoire-book::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Book spine center */
.grimoire-spine {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 24px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.7) 30%,
        rgba(0,0,0,0.9) 50%,
        rgba(0,0,0,0.7) 70%,
        rgba(0,0,0,0.5) 100%
    );
    z-index: 10;
}

.grimoire-spine::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        transparent 0%,
        var(--accent-silver) 10%,
        var(--accent-silver) 90%,
        transparent 100%
    );
    opacity: 0.3;
}

/* Left and right pages */
.grimoire-page {
    flex: 1;
    background: linear-gradient(145deg,
        var(--page-mid) 0%,
        var(--page-dark) 100%
    );
    padding: 1.5rem;
    position: relative;
    min-height: 280px;
}

.grimoire-page.left {
    border-radius: 4px 0 0 4px;
    box-shadow:
        inset -12px 0 25px var(--page-shadow),
        inset 0 2px 8px rgba(10, 8, 15, 0.3);
}

.grimoire-page.right {
    border-radius: 0 4px 4px 0;
    box-shadow:
        inset 12px 0 25px var(--page-shadow),
        inset 0 2px 8px rgba(10, 8, 15, 0.3);
}

/* Paper texture */
.grimoire-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

.grimoire-page-title {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.6rem;
    color: var(--text-bright);
    text-align: center;
    margin-bottom: 0.25rem;
}

.grimoire-page-subtitle {
    font-family: 'Satisfy', cursive;
    font-size: 1rem;
    color: var(--accent-purple);
    text-align: center;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.grimoire-ornament {
    text-align: center;
    color: var(--text-dim);
    font-size: 1rem;
    margin: 0.75rem 0;
    opacity: 0.5;
}

/* Mini recipe list items */
.grimoire-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(168, 162, 184, 0.1);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.grimoire-list-item:hover {
    background: rgba(181, 101, 255, 0.08);
    border-color: rgba(181, 101, 255, 0.2);
}

.grimoire-list-icon {
    width: 36px;
    height: 36px;
    background: rgba(181, 101, 255, 0.1);
    border: 1px solid rgba(181, 101, 255, 0.2);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.grimoire-list-info {
    flex: 1;
    min-width: 0;
}

.grimoire-list-name {
    font-family: 'MedievalSharp', cursive;
    font-size: 0.95rem;
    color: var(--text-bright);
    margin-bottom: 0.1rem;
}

.grimoire-list-category {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.7rem;
    color: var(--text-dim);
}

/* Right page intro */
.grimoire-intro {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    text-align: center;
    color: var(--text-mid);
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 1rem;
}

.grimoire-click-prompt {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-top: 1rem;
}

.grimoire-view-all {
    display: block;
    text-align: center;
    font-family: var(--font-elegant);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--accent-purple);
    text-transform: uppercase;
    margin-top: 1rem;
    opacity: 0.8;
}

/* Bookmark ribbon */
.grimoire-bookmark {
    position: absolute;
    top: -8px;
    right: 30px;
    width: 24px;
    height: 60px;
    background: linear-gradient(180deg, #8b2942 0%, #6b1932 100%);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    z-index: 20;
}

.grimoire-bookmark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-left: 12px solid #6b1932;
    border-right: 12px solid #6b1932;
    border-bottom: 10px solid transparent;
}

/* ========== GRIMOIRE MODAL ========== */
.grimoire-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 18, 0.92);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.grimoire-modal.active {
    display: flex;
    opacity: 1;
}

.grimoire-modal-book {
    position: relative;
    display: flex;
    background: linear-gradient(180deg,
        var(--leather-mid) 0%,
        var(--leather-dark) 50%,
        var(--leather-mid) 100%
    );
    border-radius: 10px;
    padding: 20px;
    max-width: 1300px;
    width: 92%;
    max-height: 90vh;
    box-shadow:
        0 30px 60px rgba(0,0,0,0.7),
        0 0 80px rgba(181, 101, 255, 0.15),
        inset 0 1px 2px rgba(255,255,255,0.05);
    transform: perspective(1200px) rotateX(2deg);
    animation: grimoireModalOpen 0.4s ease-out;
}

@keyframes grimoireModalOpen {
    from {
        opacity: 0;
        transform: perspective(1200px) rotateX(10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: perspective(1200px) rotateX(2deg) scale(1);
    }
}

.grimoire-modal-book .grimoire-spine {
    width: 30px;
}

/* Page nav - hidden on desktop, shown on mobile */
.grimoire-page-nav {
    display: none;
}

/* Modal close button */
.grimoire-modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--leather-dark);
    border: 2px solid var(--accent-silver);
    border-radius: 50%;
    color: var(--text-bright);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.grimoire-modal-close:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    transform: scale(1.1);
}

/* Modal left page - recipe list */
.grimoire-modal-page {
    flex: 1;
    background: linear-gradient(145deg,
        var(--page-mid) 0%,
        var(--page-dark) 100%
    );
    padding: 1.5rem;
    position: relative;
    overflow-y: auto;
    max-height: calc(85vh - 40px);
}

.grimoire-modal-page.left {
    border-radius: 6px 0 0 6px;
    box-shadow:
        inset -15px 0 30px var(--page-shadow),
        inset 0 3px 10px rgba(10, 8, 15, 0.3);
}

.grimoire-modal-page.right {
    border-radius: 0 6px 6px 0;
    box-shadow:
        inset 15px 0 30px var(--page-shadow),
        inset 0 3px 10px rgba(10, 8, 15, 0.3);
}

.grimoire-modal-title {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.4rem;
    color: var(--text-bright);
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(168, 162, 184, 0.15);
}

/* Recipe list in modal */
.grimoire-modal-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(168, 162, 184, 0.08);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.grimoire-modal-item:hover,
.grimoire-modal-item.active {
    background: rgba(181, 101, 255, 0.1);
    border-color: rgba(181, 101, 255, 0.3);
}

.grimoire-modal-item.active {
    border-left: 3px solid var(--accent-purple);
}

/* Recipe number indicator (replaces icon) */
.grimoire-modal-number {
    width: 32px;
    height: 32px;
    background: rgba(181, 101, 255, 0.15);
    border: 1px solid rgba(181, 101, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-elegant);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-purple);
    flex-shrink: 0;
}

.grimoire-modal-info h4 {
    font-family: 'MedievalSharp', cursive;
    font-size: 1rem;
    color: var(--text-bright);
    margin-bottom: 0.15rem;
    font-weight: normal;
}

.grimoire-modal-info p {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.grimoire-modal-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.65rem;
    color: var(--text-dim);
}

/* Right page - full recipe */
.grimoire-recipe-full {
    display: none;
}

.grimoire-recipe-full.active {
    display: block;
}

.grimoire-recipe-header {
    text-align: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(168, 162, 184, 0.15);
}

.grimoire-recipe-category {
    font-family: 'Satisfy', cursive;
    font-size: 0.85rem;
    color: var(--accent-purple);
    margin-bottom: 0.2rem;
}

.grimoire-recipe-name {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.4rem;
    color: var(--text-bright);
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.grimoire-recipe-verse {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--text-mid);
    font-size: 0.8rem;
}

/* Recipe photo (if uploaded) */
.grimoire-recipe-photo {
    width: 100%;
    max-height: 180px;
    margin-bottom: 0.75rem;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(168, 162, 184, 0.15);
}

.grimoire-recipe-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Old icon-based image display (deprecated) */
.grimoire-recipe-image {
    width: 100%;
    height: 150px;
    background: linear-gradient(145deg, var(--page-light) 0%, var(--page-mid) 100%);
    border: 1px solid rgba(168, 162, 184, 0.15);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border-radius: 3px;
}

.grimoire-recipe-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
}

.grimoire-meta-block {
    text-align: center;
}

.grimoire-meta-block .value {
    font-family: 'MedievalSharp', cursive;
    font-size: 1rem;
    color: var(--text-bright);
}

.grimoire-meta-block .label {
    font-family: 'IM Fell English', serif;
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.grimoire-recipe-section {
    margin-bottom: 1rem;
}

.grimoire-recipe-section h5 {
    font-family: var(--font-elegant);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--accent-silver);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed rgba(168, 162, 184, 0.15);
}

.grimoire-recipe-section ul {
    list-style: none;
    padding-left: 1rem;
}

.grimoire-recipe-section li {
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    color: var(--text-mid);
    margin-bottom: 0.3rem;
    position: relative;
}

.grimoire-recipe-section li::before {
    content: '\2726';
    position: absolute;
    left: -1rem;
    color: var(--accent-purple);
    font-size: 0.6rem;
    opacity: 0.6;
}

.grimoire-recipe-section p {
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.6;
}

/* Wax seal */
.grimoire-wax-seal {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%,
        #c41e3a 0%,
        #8b1a2b 50%,
        #5a1018 100%
    );
    border-radius: 50%;
    box-shadow:
        2px 3px 8px rgba(0,0,0,0.5),
        inset -2px -2px 4px rgba(0,0,0,0.3),
        inset 2px 2px 4px rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'UnifrakturMaguntia', cursive;
    color: rgba(255,255,255,0.25);
    font-size: 1.3rem;
}

/* Ingredient Checklist */
.ingredient-checklist {
    list-style: none;
    padding-left: 0;
}

.ingredient-checklist li {
    margin: 0.3rem 0;
}

.ingredient-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 0.5rem;
}

.ingredient-checkbox input[type="checkbox"] {
    display: none;
}

.ingredient-checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid var(--text-dim);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgba(0,0,0,0.2);
}

.ingredient-checkmark::after {
    content: '✓';
    font-size: 0.7rem;
    color: var(--cannabis-light);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.ingredient-checkbox:hover .ingredient-checkmark {
    border-color: var(--accent-purple);
}

.ingredient-checkbox input:checked + .ingredient-checkmark {
    border-color: var(--cannabis-light);
    background: rgba(90, 122, 92, 0.4);
}

.ingredient-checkbox input:checked + .ingredient-checkmark::after {
    opacity: 1;
    transform: scale(1);
}

.ingredient-text {
    transition: all 0.2s ease;
}

.ingredient-checkbox input:checked ~ .ingredient-text {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Print link */
.grimoire-print-link {
    position: absolute;
    bottom: 5px;
    right: 20px;
    font-family: 'IM Fell English', serif;
    font-size: 0.7rem;
    color: #444;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.grimoire-print-link:hover {
    opacity: 1;
    color: #333;
}

/* ========== MOBILE CLOSED GRIMOIRE BOOK ========== */
.grimoire-closed {
    display: none; /* Hidden on desktop */
}

.grimoire-closed-wrapper {
    position: relative;
    width: min(310px, calc(100% - 32px));
    height: 413px;
    margin: 0 auto 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.grimoire-closed-wrapper:hover {
    transform: scale(1.02);
}

.grimoire-closed-wrapper:hover .grimoire-closed-aura {
    opacity: 1;
    transform: scale(1.1);
}

.grimoire-closed-wrapper:hover .grimoire-closed-rune {
    opacity: 1;
    text-shadow: 0 0 15px var(--accent-purple), 0 0 25px var(--accent-purple);
}

/* Magical aura behind the book */
.grimoire-closed-aura {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center,
        rgba(181, 101, 255, 0.2) 0%,
        rgba(155, 126, 181, 0.1) 40%,
        transparent 70%
    );
    border-radius: 50%;
    opacity: 0.6;
    transition: all 0.5s ease;
    animation: grimoire-aura-pulse 3s ease-in-out infinite;
}

@keyframes grimoire-aura-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Closed book cover - V1 Weathered Slate */
.grimoire-closed-cover {
    position: absolute;
    inset: 0;
    /* Lighter, greyer tones */
    background: linear-gradient(145deg,
        #2a2832 0%,
        #1e1c24 50%,
        #2a2832 100%
    );
    border-radius: 4px 12px 12px 4px;
    box-shadow:
        0 0 25px rgba(155, 126, 181, 0.15),
        8px 8px 20px rgba(0, 0, 0, 0.6),
        inset 0 0 40px rgba(100, 90, 110, 0.08);
    border: 1px solid rgba(140, 120, 160, 0.2);
    overflow: hidden;
}

/* Noise/grain texture overlay */
.grimoire-closed-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Subtle vertical grain lines */
.grimoire-closed-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 3px,
        rgba(80, 75, 90, 0.03) 3px,
        rgba(80, 75, 90, 0.03) 4px
    );
    pointer-events: none;
}

/* Closed book spine */
.grimoire-closed-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 22px;
    background: linear-gradient(90deg,
        #151318 0%,
        #201e26 60%,
        #2a2832 100%
    );
    border-radius: 4px 0 0 4px;
    box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.5);
}

/* Glowing spine runes */
.grimoire-spine-rune {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(181, 101, 255, 0.6);
    text-shadow: 0 0 8px rgba(181, 101, 255, 0.5);
    animation: grimoire-rune-glow 2s ease-in-out infinite;
}

.grimoire-spine-rune:nth-child(1) { top: 25px; animation-delay: 0s; }
.grimoire-spine-rune:nth-child(2) { top: 50px; animation-delay: 0.3s; }
.grimoire-spine-rune:nth-child(3) { top: 50%; transform: translate(-50%, -50%); animation-delay: 0.6s; }
.grimoire-spine-rune:nth-child(4) { bottom: 50px; animation-delay: 0.9s; }
.grimoire-spine-rune:nth-child(5) { bottom: 25px; animation-delay: 1.2s; }

@keyframes grimoire-rune-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Floating runes on cover */
.grimoire-closed-rune {
    position: absolute;
    font-size: 14px;
    color: rgba(181, 101, 255, 0.4);
    opacity: 0.6;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(181, 101, 255, 0.3);
}

.grimoire-closed-rune:nth-child(1) { top: 20px; left: 40px; }
.grimoire-closed-rune:nth-child(2) { top: 20px; right: 35px; }
.grimoire-closed-rune:nth-child(3) { top: 45%; left: 40px; transform: translateY(-50%); }
.grimoire-closed-rune:nth-child(4) { top: 45%; right: 30px; transform: translateY(-50%); }
.grimoire-closed-rune:nth-child(5) { bottom: 20px; left: 40px; }
.grimoire-closed-rune:nth-child(6) { bottom: 20px; right: 35px; }

/* Central pentacle */
.grimoire-pentacle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}

.grimoire-pentacle-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(181, 101, 255, 0.4);
    border-radius: 50%;
    animation: grimoire-pentacle-rotate 20s linear infinite;
}

@keyframes grimoire-pentacle-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.grimoire-pentacle-inner {
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(181, 101, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle,
        rgba(181, 101, 255, 0.1) 0%,
        transparent 70%
    );
}

.grimoire-pentacle-star {
    font-size: 2.2rem;
    color: rgba(181, 101, 255, 0.7);
    text-shadow: 0 0 20px rgba(181, 101, 255, 0.5);
    animation: grimoire-star-pulse 2s ease-in-out infinite;
}

@keyframes grimoire-star-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Orbital dots on pentacle */
.grimoire-orbit-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(181, 101, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(181, 101, 255, 0.6);
}

.grimoire-orbit-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.grimoire-orbit-dot:nth-child(2) { bottom: 0; left: 50%; transform: translateX(-50%); }
.grimoire-orbit-dot:nth-child(3) { left: 0; top: 50%; transform: translateY(-50%); }
.grimoire-orbit-dot:nth-child(4) { right: 0; top: 50%; transform: translateY(-50%); }

/* Closed book title */
.grimoire-closed-title {
    position: absolute;
    top: 40px;
    left: 35px;
    right: 20px;
    text-align: center;
}

.grimoire-closed-title h3 {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.5rem;
    color: rgba(200, 162, 208, 0.95);
    text-shadow:
        0 0 15px rgba(181, 101, 255, 0.5),
        0 0 30px rgba(181, 101, 255, 0.3);
    letter-spacing: 2px;
    margin: 0;
}

.grimoire-closed-title span {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.8rem;
    color: rgba(181, 101, 255, 0.7);
    text-shadow: 0 0 10px rgba(181, 101, 255, 0.3);
}

/* Closed book tagline */
.grimoire-closed-tagline {
    position: absolute;
    bottom: 30px;
    left: 35px;
    right: 20px;
    text-align: center;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.75rem;
    color: rgba(181, 101, 255, 0.5);
    text-shadow: 0 0 10px rgba(181, 101, 255, 0.3);
}

/* Closed book page edges */
.grimoire-closed-pages {
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 7px;
    background: repeating-linear-gradient(
        0deg,
        #252329 0px,
        #252329 1px,
        #302d35 1px,
        #302d35 3px
    );
    border-radius: 0 4px 4px 0;
    box-shadow:
        inset 2px 0 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(155, 126, 181, 0.08);
}

/* Glowing bookmark */
.grimoire-closed-bookmark {
    position: absolute;
    top: -5px;
    right: 40px;
    width: 14px;
    height: 45px;
    background: linear-gradient(180deg,
        rgba(155, 126, 181, 0.7) 0%,
        rgba(130, 110, 150, 0.5) 100%
    );
    box-shadow:
        0 0 15px rgba(155, 126, 181, 0.4),
        2px 2px 5px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.grimoire-closed-bookmark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-left: 7px solid rgba(130, 110, 150, 0.5);
    border-right: 7px solid rgba(130, 110, 150, 0.5);
    border-bottom: 6px solid transparent;
}

/* Responsive grimoire */
@media (max-width: 768px) {
    /* Show closed book, hide open book on mobile */
    .grimoire-closed {
        display: block;
    }

    .grimoire-book {
        display: none;
    }

    .grimoire-hint {
        display: none;
    }

    .grimoire-modal-book {
        flex-direction: column;
        transform: none;
    }

    .grimoire-spine {
        display: none;
    }

    .grimoire-page.left,
    .grimoire-page.right,
    .grimoire-modal-page.left,
    .grimoire-modal-page.right {
        border-radius: 4px;
        box-shadow: inset 0 3px 10px var(--page-shadow);
    }

    .grimoire-modal-page {
        max-height: none;
    }

    /* Modal: Full book layout on mobile */
    .grimoire-modal-book {
        flex-direction: column;
        max-height: 95vh;
        overflow: hidden;
        background: var(--leather-dark);
        border-radius: 4px 8px 8px 4px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
        position: relative;
    }

    /* Hide recipe list on mobile - use nav instead */
    .grimoire-modal-page.left {
        display: none;
    }

    /* Book spine on mobile */
    .grimoire-modal-book .grimoire-spine {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 16px;
        background: linear-gradient(90deg,
            var(--leather-dark) 0%,
            var(--leather-mid) 50%,
            var(--page-dark) 100%
        );
        z-index: 10;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
    }

    /* Spine decorative dots */
    .grimoire-modal-book .grimoire-spine::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 5px;
        width: 2px;
        background: repeating-linear-gradient(
            180deg,
            rgba(155, 126, 181, 0.15) 0px,
            rgba(155, 126, 181, 0.15) 6px,
            transparent 6px,
            transparent 12px
        );
    }

    /* Page edges on right */
    .grimoire-modal-book::after {
        content: '';
        position: absolute;
        right: 0;
        top: 6px;
        bottom: 60px;
        width: 5px;
        background: repeating-linear-gradient(
            180deg,
            var(--page-edge) 0px,
            var(--page-edge) 1px,
            var(--page-mid) 1px,
            var(--page-mid) 3px
        );
        border-radius: 0 4px 4px 0;
        box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.3);
        z-index: 5;
    }

    /* Recipe content takes full space */
    .grimoire-modal-page.right {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        margin-left: 20px;
        margin-right: 8px;
        margin-top: 8px;
        margin-bottom: 0;
        border-radius: 2px 4px 0 2px;
        box-shadow:
            inset 12px 0 25px var(--page-shadow),
            inset 0 2px 8px rgba(10, 8, 15, 0.3);
    }

    /* Recipe page nav bar */
    .grimoire-page-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--leather-dark);
        border-top: 1px solid rgba(155, 126, 181, 0.1);
        margin-left: 16px;
    }

    .grimoire-nav-arrow {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: var(--text-dim);
        cursor: pointer;
        opacity: 0.6;
        transition: all 0.2s ease;
        background: none;
        border: none;
    }

    .grimoire-nav-arrow:hover {
        opacity: 1;
        color: var(--accent-purple);
    }

    .grimoire-nav-numbers {
        display: flex;
        gap: 8px;
        padding: 0 8px;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
    }

    .grimoire-nav-numbers::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .grimoire-nav-number {
        min-width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-elegant);
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-dim);
        cursor: pointer;
        transition: all 0.2s ease;
        opacity: 0.5;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(168, 162, 184, 0.2);
    }

    .grimoire-nav-number:hover {
        opacity: 0.8;
        transform: scale(1.05);
        border-color: rgba(181, 101, 255, 0.3);
    }

    .grimoire-nav-number.active {
        opacity: 1;
        color: var(--accent-purple);
        background: rgba(181, 101, 255, 0.15);
        border-color: var(--accent-purple);
        box-shadow: 0 0 8px rgba(181, 101, 255, 0.3);
    }

    .grimoire-page {
        min-height: auto;
        padding: 1rem;
    }

    .grimoire-page.right {
        padding-top: 0.5rem;
    }

    .grimoire-page-title {
        font-size: 1.3rem;
    }

    .grimoire-intro {
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

/* Contact Section */
.contact-section {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 20px;
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-label {
    font-weight: 600;
    color: var(--amber);
    font-size: 0.95rem;
}

.form-input,
.form-textarea {
    background: rgba(74, 56, 102, 0.3);
    border: 1px solid rgba(155, 126, 181, 0.3);
    border-radius: 8px;
    padding: var(--spacing-sm);
    color: var(--soft-lavender);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--lavender);
    box-shadow: 0 0 12px rgba(155, 126, 181, 0.3);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    background: linear-gradient(135deg, var(--lavender), var(--witchy-purple));
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

/* ==================== FOOTER ==================== */
footer {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-top: var(--spacing-xl);
    color: var(--lavender);
    font-size: 0.9rem;
    background: var(--gradient-card);
    border-top: var(--border-mystical);
    border-radius: 16px 16px 0 0;
    position: relative;
    /* Ensure footer is visible above fixed player on mobile */
    margin-bottom: 0;
}

@media (max-width: 768px) {
    footer {
        padding: var(--spacing-lg) var(--spacing-md);
        padding-bottom: calc(var(--spacing-lg) + 60px); /* Extra space for fixed player */
        font-size: 0.85rem;
    }

    footer::before {
        font-size: 1rem;
        letter-spacing: 0.3rem;
    }

    /* Mobile social icons */
    .social-icons-row {
        gap: 16px;
    }

    .social-icon-link {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }
}

footer::before {
    display: none;
}

footer p {
    margin-bottom: 0.5rem;
}

footer a {
    color: var(--amber);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 1024px) {
    .main-layout {
        grid-template-columns: 40% 60%;
    }

    .sidebar {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Add bottom padding for fixed music player */
    body {
        padding-bottom: 80px;
        /* Ensure readable body text on mobile */
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }

    /* Improve text readability on mobile */
    .about-text,
    .blog-excerpt,
    .promo-description,
    .link-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Section titles - slightly smaller but impactful */
    .section-title {
        font-size: 1.3rem;
    }

    .category-title {
        font-size: 1.1rem;
    }

    /* Center all content on mobile */
    .container {
        text-align: center;
        padding: var(--spacing-md);
        width: 100%;
        max-width: 100%;
    }

    /* Reset text alignment for content that should be left-aligned */
    .about-text,
    .blog-excerpt,
    .promo-description,
    .link-description {
        text-align: left;
    }

    /* CRITICAL: Reorder content for mobile */
    .main-layout {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-lg);
    }

    /* Make sidebar children participate directly in parent flex */
    .sidebar {
        display: contents;
    }

    /* Profile section comes FIRST (pic, name, subtitle) */
    .profile-section {
        order: 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Scale profile photo for mobile */
    .profile-photo-container {
        width: 160px;
        height: 160px;
    }

    .profile-photo-container img {
        width: 110px;
        height: 110px;
    }

    .ouroboros-border {
        width: 140px;
        height: 140px;
    }

    .ouroboros-body {
        border-width: 6px;
    }

    /* Mobile order: profile, links, products, collabs, about me, blog, recipes, strains */

    /* Main content also uses display:contents so children participate in flex */
    .main-content {
        display: contents;
    }

    /* 1. Profile */
    .profile-section {
        order: 1 !important;
    }

    /* 2. Links - TikToks, Merch, Promos */
    .tiktok-carousel {
        order: 2;
        width: 100%;
    }
    .links-section {
        order: 3;
        width: 100%;
    }
    .promo-section {
        order: 4;
        width: 100%;
    }

    /* 3. Products (constellation) */
    .constellation-section {
        order: 5;
        width: 100%;
    }

    /* 4. Collabs */
    .collabs-section,
    .main-content-collabs {
        order: 6;
        width: 100%;
    }

    /* 5. About Me */
    .about-card-combined {
        order: 7;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 6. Blog (Lunar Chronicle) */
    .blog-pane-lunar {
        order: 8;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 7. Recipes (Grimoire) */
    .sidebar-grimoire {
        order: 9;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 8. Strains */
    .top-strains-section {
        order: 10;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Other sidebar sections */
    .about-section,
    .sidebar-music-player,
    .contact-section {
        order: 11;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ensure main content sections don't stretch full width */
    .main-content > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sunflower {
        display: none;
    }

    .links-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .promo-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Fix sections stretching to edges on mobile - use padding instead of child margins */
    .links-section,
    .promo-section,
    .tiktok-carousel {
        padding: var(--spacing-md);
        width: 100%;
        box-sizing: border-box;
    }

    /* Ensure all sections have proper containment */
    .about-section,
    .about-card-combined,
    .blog-pane-lunar,
    .profile-section,
    .top-strains-section {
        width: 100%;
        box-sizing: border-box;
    }

    /* Remove problematic child margins, rely on parent padding */
    .link-card {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .promo-card {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* ===== TOUCH-FRIENDLY TARGETS (44px minimum) ===== */

    /* Link and promo cards - mobile stacked layout */
    .link-card,
    .promo-card {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 20px;
        border-radius: 20px;
        min-height: auto;
    }

    .link-card::before,
    .link-card::after,
    .promo-card::before,
    .promo-card::after {
        display: none;
    }

    .link-stars,
    .promo-stars {
        margin-left: 0;
    }

    .link-action,
    .promo-code-container {
        margin-right: 0;
    }

    .link-action,
    .copy-btn,
    .promo-link-btn {
        justify-content: center;
        width: 100%;
    }

    /* Copy button in promo cards */
    .copy-btn,
    .promo-link-btn {
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Read more links */
    .read-more {
        padding: var(--spacing-sm) 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Strain cards - larger tap target */
    .strain-showcase-card {
        min-height: 120px;
    }

    /* Carousel dots - easier to tap */
    .carousel-dots .dot {
        width: 14px;
        height: 14px;
        margin: 0 4px;
    }

    /* Center section titles */
    .section-title,
    .category-title {
        justify-content: center;
    }

    /* Center header elements */
    header {
        text-align: center;
        width: 100%;
    }

    /* Enhanced TikTok Carousel for Mobile */
    .carousel-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }

    .carousel-wrapper::-webkit-scrollbar {
        display: none;  /* Chrome/Safari */
    }

    .carousel-container {
        width: 100%;
        box-sizing: border-box;
    }

    .carousel-track {
        display: flex;
        gap: 12px;
    }

    .carousel-slide {
        min-width: calc(100vw - 6rem);
        max-width: calc(100vw - 6rem);
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    /* Make carousel buttons smaller on mobile */
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    /* Ensure TikTok embeds don't cause overflow */
    .carousel-slide blockquote,
    .carousel-slide iframe {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Swipe hint indicator */
    .carousel-dots {
        margin-top: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-lg: 1.25rem;
        --spacing-md: 0.875rem;
        --spacing-sm: 0.625rem;
    }

    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Smaller profile photo for phones */
    .profile-photo-container {
        width: 140px;
        height: 140px;
    }

    .profile-photo-container img {
        width: 95px;
        height: 95px;
    }

    .ouroboros-border {
        width: 120px;
        height: 120px;
    }

    .ouroboros-body {
        border-width: 5px;
    }

    /* Tighter container padding on small screens */
    .container {
        padding: var(--spacing-sm);
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    /* Slightly smaller title but still impactful */
    .site-title {
        font-size: 2.5rem;
    }

    .site-subtitle {
        font-size: 1.3rem;
    }

    .site-tagline {
        font-size: 0.8rem;
    }

    /* Stack promo code buttons vertically */
    .promo-code-container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .promo-code {
        width: 100%;
    }

    .copy-btn,
    .promo-link-btn {
        width: 100%;
        justify-content: center;
    }

    /* Extra small screen optimizations */
    .links-section,
    .promo-section,
    .tiktok-carousel,
    .about-section,
    .blog-pane-lunar,
    .profile-section,
    .top-strains-section {
        padding: var(--spacing-sm);
        width: 100%;
        box-sizing: border-box;
    }

    /* Better spacing for grids on small screens */
    .links-grid,
    .promo-grid {
        gap: var(--spacing-sm);
        width: 100%;
    }

    /* Reduce text sizes slightly for better fit */
    .link-title {
        font-size: 0.95rem;
    }

    .link-description {
        font-size: 0.8rem;
    }

    .promo-brand {
        font-size: 1.1rem;
    }

    .promo-description {
        font-size: 0.85rem;
    }

    /* Ensure YouTube player stays centered on small screens */
    .bottom-music-player {
        width: min(95vw, 380px);
        left: 50%;
        transform: translateX(-50%);
    }

    /* Enhanced carousel for small screens */
    .carousel-slide {
        min-width: calc(100vw - 4rem);
        max-width: calc(100vw - 4rem);
        min-height: 500px;
    }

    /* Hide carousel buttons on very small screens - use swipe */
    .carousel-btn {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    /* Ensure all cards fit properly */
    .link-card,
    .promo-card {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Extra small devices - 320px base */
@media (max-width: 360px) {
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Extra bottom padding for tiny screens */
    body {
        padding-bottom: 90px;
    }

    .container {
        padding: 0.5rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    /* Compact header for tiny screens */
    .site-title {
        font-size: 2.2rem;
    }

    .site-subtitle {
        font-size: 1.1rem;
    }

    .site-tagline {
        font-size: 0.75rem;
        letter-spacing: 1px;
    }

    .links-section,
    .promo-section,
    .tiktok-carousel,
    .about-section,
    .blog-pane-lunar,
    .profile-section,
    .top-strains-section {
        padding: var(--spacing-sm) 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Ensure content doesn't overflow on 320px screens */
    .link-card,
    .promo-card {
        padding: var(--spacing-sm);
        width: 100%;
        box-sizing: border-box;
    }

    .section-title {
        font-size: 1.3rem;
    }

    /* Ensure YouTube player stays centered on extra small screens */
    .bottom-music-player {
        width: min(98vw, 340px);
        max-width: 340px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Extra tight carousel for smallest screens */
    .carousel-slide {
        min-width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
        min-height: 450px;
    }

    /* Smaller carousel buttons on tiny screens */
    .carousel-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    /* Make strains grid single column on very small screens if needed */
    .strains-showcase {
        gap: 6px;
    }
}

/* ==================== UTILITY CLASSES ==================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* ==================== SITE HEADER (for blog pages) ==================== */
.site-header {
    background: rgba(45, 27, 78, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(155, 126, 181, 0.3);
    padding: 1.5rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 2rem;
}

.site-header h1 {
    font-family: var(--font-mystical);
    font-size: 2rem;
    color: var(--soft-lavender);
    display: inline;
    margin-right: 2rem;
}

.site-header h1 a {
    color: var(--soft-lavender);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-header h1 a:hover {
    color: var(--amber);
}

.site-header nav {
    display: inline;
}

.site-header nav a {
    color: var(--lavender);
    text-decoration: none;
    margin: 0 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.site-header nav a:hover,
.site-header nav a.active {
    background: rgba(155, 126, 181, 0.2);
    color: var(--soft-lavender);
}

/* ==================== BLOG ARCHIVE ==================== */
.blog-archive {
    position: relative;
    z-index: 1;
}

.page-title {
    font-family: var(--font-elegant);
    font-size: 2.5rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 2rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
}

.blog-card {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow), var(--shadow-card);
}

.blog-card h3 {
    font-family: var(--font-elegant);
    font-size: 1.5rem;
    color: var(--soft-lavender);
    margin-bottom: 0.5rem;
}

.blog-date {
    font-size: 0.9rem;
    color: var(--amber);
    margin-bottom: 1rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--lavender);
}

/* ==================== BLOG POST ==================== */
.blog-post {
    position: relative;
    z-index: 1;
}

.post-content {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 20px;
    padding: 3rem;
    max-width: 800px;
    margin: 0 auto;
}

.post-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(155, 126, 181, 0.3);
}

.post-category {
    display: inline-block;
    font-family: var(--font-retro);
    font-size: 0.85rem;
    color: var(--cannabis-green);
    background: rgba(90, 122, 92, 0.2);
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.post-content h1 {
    font-family: var(--font-elegant);
    font-size: 2.5rem;
    color: var(--soft-lavender);
    margin-bottom: 0.5rem;
}

.post-date {
    font-size: 0.9rem;
    color: var(--amber);
}

.post-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--lavender);
}

.post-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(155, 126, 181, 0.3);
}

.back-link {
    color: var(--amber);
    text-decoration: none;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: var(--gold);
}

/* ==================== CONTACT PAGE ==================== */
.contact-page {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.contact-card {
    background: var(--gradient-card);
    border: var(--border-mystical);
    border-radius: 20px;
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
}

.contact-intro {
    text-align: center;
    color: var(--lavender);
    margin-bottom: var(--spacing-lg);
    font-size: 1.1rem;
}

.char-counter {
    text-align: right;
    font-size: 0.85rem;
    color: var(--lavender);
    margin-top: 0.5rem;
}

.flash-message {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.flash-message.success {
    background: rgba(90, 122, 92, 0.2);
    border: 1px solid var(--cannabis-green);
    color: var(--cannabis-light);
}

.flash-message.error {
    background: rgba(220, 80, 80, 0.2);
    border: 1px solid #dc5050;
    color: #ff6b6b;
}

.error {
    color: #ff6b6b;
    font-size: 0.85rem;
    margin-top: 0.3rem;
    display: block;
}

/* ==================== SITE FOOTER ==================== */
.site-footer {
    text-align: center;
    padding: 3rem 2rem;
    margin-top: 4rem;
    color: var(--lavender);
    font-size: 0.9rem;
}

.site-footer a {
    color: var(--amber);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--gold);
}

/* Winamp-Style Pixel Art Music Player */
.bottom-music-player {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, 95vw);
    max-width: 420px;
    background: #0a0a1a;
    border: 3px solid #B565FF;
    border-bottom: none;
    z-index: 1000;
    box-shadow:
        0 0 0 1px #1a1a3e,
        0 -4px 20px rgba(181, 101, 255, 0.6),
        inset 0 0 0 1px #8B45FF;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    border-radius: 4px 4px 0 0;
}

/* Winamp-style title bar */
.bottom-music-player::before {
    content: '♪ LOTUS PLAYER ♪';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(180deg, #B565FF 0%, #8B45FF 100%);
    border: 3px solid #B565FF;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-family: var(--font-retro);
    font-size: 11px;
    color: #0a0a1a;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.player-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    position: relative;
}

/* Winamp-style compact buttons */
.player-toggle {
    background: #B565FF;
    border: 2px solid #8B45FF;
    width: 28px;
    height: 28px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    flex-shrink: 0;
    position: relative;
    box-shadow:
        inset -1px -1px 0 #8B45FF,
        inset 1px 1px 0 #D585FF,
        2px 2px 0 rgba(0, 0, 0, 0.5);
}

.player-toggle:hover {
    background: #D585FF;
    box-shadow:
        inset -1px -1px 0 #B565FF,
        inset 1px 1px 0 #FF95FF,
        2px 2px 0 rgba(0, 0, 0, 0.5);
}

.player-toggle:active {
    box-shadow:
        inset 1px 1px 0 #8B45FF,
        1px 1px 0 rgba(0, 0, 0, 0.5);
    transform: translate(1px, 1px);
}

.player-toggle i {
    color: #0a0a1a;
    font-size: 11px;
    text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.3);
}

/* Winamp-style compact display */
.player-info {
    flex: 1;
    min-width: 0;
    background: #000000;
    border: 2px solid #8B45FF;
    padding: 2px 4px;
    position: relative;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        inset 1px 1px 2px rgba(0, 0, 0, 0.8),
        inset -1px -1px 0 #1a1a3e;
}

/* LED-style scrolling text */
.player-track {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-retro);
    color: #00FF00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-shadow: 0 0 3px #00FF00;
    letter-spacing: 0.5px;
    line-height: 1;
    animation: ledGlow 1.5s ease-in-out infinite;
}

@keyframes ledGlow {
    0%, 100% {
        color: #00FF00;
        text-shadow: 0 0 3px #00FF00;
    }
    50% {
        color: #66FF66;
        text-shadow: 0 0 5px #00FF00, 0 0 8px #00FF00;
    }
}

.player-artist {
    font-size: 8px;
    font-family: var(--font-retro);
    color: #B565FF;
    margin-top: 1px;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 0 2px #B565FF;
}

/* Winamp-style compact controls */
.player-controls {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.player-btn {
    background: #2d1b4e;
    border: 2px solid #8B45FF;
    width: 24px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    color: #B565FF;
    font-size: 10px;
    box-shadow:
        inset -1px -1px 0 #1a1a3e,
        inset 1px 1px 0 #4a3866,
        1px 1px 0 rgba(0, 0, 0, 0.5);
}

.player-btn:hover {
    background: #4a3866;
    color: #D585FF;
}

.player-btn:active {
    box-shadow: inset 1px 1px 0 #1a1a3e;
    transform: translate(1px, 1px);
}

/* Winamp-style close button */
.player-close {
    background: #2d1b4e;
    border: 2px solid #8B45FF;
    color: #B565FF;
    width: 24px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    flex-shrink: 0;
    font-size: 10px;
    box-shadow:
        inset -1px -1px 0 #1a1a3e,
        inset 1px 1px 0 #4a3866,
        1px 1px 0 rgba(0, 0, 0, 0.5);
}

.player-close:hover {
    background: #4a3866;
    color: #ff6b6b;
}

.player-close:active {
    box-shadow: inset 1px 1px 0 #1a1a3e;
    transform: translate(1px, 1px);
}

/* Winamp-style mini equalizer */
.player-volume {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 28px;
    flex-shrink: 0;
    background: #000000;
    border: 2px solid #8B45FF;
    padding: 3px;
    box-shadow:
        inset 1px 1px 2px rgba(0, 0, 0, 0.8),
        inset -1px -1px 0 #1a1a3e;
}

.volume-bar {
    width: 3px;
    background: #1a1a3e;
    border: 1px solid #2d2d2d;
    transition: all 0.15s ease;
}

.volume-bar:nth-child(1) { height: 6px; }
.volume-bar:nth-child(2) { height: 10px; }
.volume-bar:nth-child(3) { height: 14px; }
.volume-bar:nth-child(4) { height: 18px; }

.volume-bar.active {
    background: linear-gradient(180deg, #00FF00 0%, #B565FF 100%);
    border-color: #B565FF;
    box-shadow: 0 0 4px #B565FF;
    animation: eqBounce 0.4s ease-in-out infinite alternate;
}

@keyframes eqBounce {
    0% { transform: scaleY(0.8); }
    100% { transform: scaleY(1.1); }
}

/* Hidden YouTube player container - prevent visual artifacts */
#youtubePlayerContainer {
    pointer-events: none !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}

/* Mobile optimizations for Winamp player */
@media (max-width: 768px) {
    .bottom-music-player {
        width: 95%;
        max-width: 380px;
        /* Center the player on mobile - keep the same centering approach */
        left: 50%;
        transform: translateX(-50%);
        /* Ensure player doesn't create overlay effect */
        pointer-events: auto;
        isolation: isolate;
    }

    .bottom-music-player::before {
        font-size: 10px;
    }

    .player-content {
        padding: 4px;
        gap: 4px;
    }

    .player-toggle {
        width: 36px;
        height: 36px;
    }

    .player-toggle i {
        font-size: 14px;
    }

    .player-info {
        height: 36px;
        padding: 3px 4px;
    }

    .player-track {
        font-size: 9px;
    }

    .player-artist {
        font-size: 7px;
    }

    .player-btn,
    .player-close {
        width: 32px;
        height: 36px;
        font-size: 12px;
    }

    .player-volume {
        height: 24px;
        padding: 2px;
    }

    .volume-bar {
        width: 2px;
    }

    .volume-bar:nth-child(1) { height: 4px; }
    .volume-bar:nth-child(2) { height: 7px; }
    .volume-bar:nth-child(3) { height: 10px; }
    .volume-bar:nth-child(4) { height: 13px; }
}

/* ==================== TOP STRAINS SHOWCASE ==================== */

.top-strains-section {
    margin-bottom: var(--spacing-lg);
}

.top-strains-section .section-title {
    margin-bottom: calc(var(--spacing-sm) / 2);
}

.strains-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: var(--spacing-sm);
}

/* Strain Card with Image (Showcase Grid Style) */
.strain-showcase-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
}

.strain-showcase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(181, 101, 255, 0.4);
}

.strain-showcase-card:focus {
    outline: 2px solid var(--lavender);
    outline-offset: 2px;
}

.strain-showcase-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid rgba(155, 126, 181, 0.3);
}

.strain-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.strain-showcase-image:hover img {
    transform: scale(1.05);
}

.strain-showcase-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.7) 60%, transparent 100%);
    padding: 50px 12px 12px 12px;
    transition: all 0.3s ease;
}

.strain-showcase-image:hover .strain-showcase-overlay {
    background: linear-gradient(to top, rgba(10, 22, 40, 0.98) 0%, rgba(10, 22, 40, 0.85) 70%, rgba(10, 22, 40, 0.3) 100%);
    padding-top: 60px;
}

.strain-showcase-name {
    color: #B565FF;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.strain-showcase-desc {
    color: var(--soft-lavender);
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* Strain Card without Image */
.strain-showcase-noimage {
    background: var(--gradient-card);
    border: 2px solid rgba(155, 126, 181, 0.3);
    border-radius: 12px;
    padding: var(--spacing-md);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

.strain-showcase-noimage:hover {
    border-color: #B565FF;
    box-shadow: 0 0 20px rgba(181, 101, 255, 0.3);
}

.strain-showcase-icon {
    font-size: 2.5rem;
    color: var(--cannabis-green);
    margin-bottom: var(--spacing-sm);
    opacity: 0.7;
}

.strain-showcase-noimage .strain-showcase-name {
    color: var(--soft-lavender);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.strain-showcase-noimage .strain-showcase-desc {
    color: var(--lavender);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Strain Type Badge on Cards */
.strain-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.strain-type-badge.strain-type-indica {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.85), rgba(75, 0, 130, 0.85));
    color: #e8d4ff;
    border-color: rgba(181, 101, 255, 0.5);
}

.strain-type-badge.strain-type-sativa {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.85), rgba(184, 134, 11, 0.85));
    color: #fff5e1;
    border-color: rgba(255, 215, 0, 0.5);
}

.strain-type-badge.strain-type-hybrid {
    background: linear-gradient(135deg, rgba(90, 122, 92, 0.85), rgba(61, 82, 64, 0.85));
    color: #e8f5e9;
    border-color: rgba(122, 154, 124, 0.5);
}

.strain-showcase-card:hover .strain-type-badge {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Responsive adjustments for strains */
@media (max-width: 768px) {
    .strains-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .strain-showcase-name {
        font-size: 0.85rem;
    }

    .strain-showcase-desc {
        font-size: 0.7rem;
    }

    .strain-type-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
}

@media (max-width: 480px) {
    .strains-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .strain-showcase-overlay {
        padding: 40px 10px 10px 10px;
    }

    .strain-showcase-noimage {
        padding: var(--spacing-sm);
    }

    .strain-showcase-icon {
        font-size: 2rem;
    }

    .strain-type-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
        top: 6px;
        right: 6px;
    }
}

/* ==================== APOTHECARY JAR STRAIN BUTTONS ==================== */

.apothecary-jar {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    outline: none;
}

.apothecary-jar:focus {
    outline: 2px solid var(--lavender);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Screw Lid */
.apothecary-jar .jar-lid {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 15%;
    background: linear-gradient(180deg, #3a2a4a 0%, #2a1a3a 50%, #1a0a2a 100%);
    border-radius: 4px;
    z-index: 3;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 2px 4px rgba(181, 101, 255, 0.2),
        0 3px 8px rgba(0,0,0,0.4);
    border: 1px solid rgba(181, 101, 255, 0.3);
}

.apothecary-jar .jar-lid::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(181, 101, 255, 0.3), transparent);
}

.apothecary-jar .jar-lid::after {
    content: '';
    position: absolute;
    top: 55%;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(181, 101, 255, 0.2), transparent);
}

@keyframes jar-unscrew {
    0% { transform: translateX(-50%) rotate(0deg) translateY(0); }
    25% { transform: translateX(-50%) rotate(15deg) translateY(-3px); }
    50% { transform: translateX(-50%) rotate(-10deg) translateY(-8px); }
    75% { transform: translateX(-50%) rotate(5deg) translateY(-12px); }
    100% { transform: translateX(-50%) rotate(0deg) translateY(-18px); }
}

.apothecary-jar:hover .jar-lid {
    animation: jar-unscrew 0.5s ease forwards;
    box-shadow:
        inset 0 2px 4px rgba(181, 101, 255, 0.3),
        0 8px 16px rgba(0,0,0,0.5),
        0 0 15px rgba(181, 101, 255, 0.2);
}

/* Glass Jar Body */
.apothecary-jar .jar-body {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 85%;
    background: linear-gradient(90deg,
        rgba(140, 100, 80, 0.08) 0%,
        rgba(180, 140, 100, 0.15) 30%,
        rgba(160, 120, 90, 0.12) 60%,
        rgba(140, 100, 80, 0.08) 100%
    );
    border: 2px solid rgba(155, 126, 181, 0.25);
    border-radius: 6px 6px 18px 18px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 0 25px rgba(181, 101, 255, 0.05),
        0 5px 15px rgba(0, 0, 0, 0.35);
}

.apothecary-jar:hover .jar-body {
    border-color: var(--accent-purple);
    box-shadow:
        inset 0 0 35px rgba(181, 101, 255, 0.1),
        0 0 20px rgba(181, 101, 255, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.45);
}

/* Glass Shine Effect */
.apothecary-jar .jar-glass-shine {
    position: absolute;
    top: 0;
    left: 8%;
    width: 12%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
    z-index: 2;
}

/* Purple Wrap-Around Label */
.apothecary-jar .jar-label {
    position: absolute;
    top: 45%;
    left: -4px;
    right: -4px;
    transform: translateY(-50%);
    height: 65%;
    background: linear-gradient(90deg,
        rgba(45, 27, 78, 0.7) 0%,
        rgba(74, 56, 102, 0.95) 8%,
        rgba(45, 27, 78, 0.95) 50%,
        rgba(74, 56, 102, 0.95) 92%,
        rgba(45, 27, 78, 0.7) 100%
    );
    border-top: 2px solid rgba(181, 101, 255, 0.5);
    border-bottom: 2px solid rgba(181, 101, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    clip-path: polygon(
        0% 8%, 4% 0%, 96% 0%, 100% 8%,
        100% 92%, 96% 100%, 4% 100%, 0% 92%
    );
}

/* Decorative side lines on label */
.apothecary-jar .jar-label::before,
.apothecary-jar .jar-label::after {
    content: '';
    position: absolute;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: linear-gradient(180deg,
        transparent,
        rgba(181, 101, 255, 0.35),
        transparent
    );
}

.apothecary-jar .jar-label::before { left: 6px; }
.apothecary-jar .jar-label::after { right: 6px; }

/* Icon Container */
.apothecary-jar .jar-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
}

.apothecary-jar .jar-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.1);
}

/* Strain Name */
.apothecary-jar .jar-strain-name {
    font-family: 'Almendra', serif;
    font-size: 0.8rem;
    color: #e0b0ff;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Strain Type */
.apothecary-jar .jar-strain-type {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 0.55rem;
    color: var(--lavender);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Responsive - Tablets */
@media (max-width: 768px) {
    .apothecary-jar .jar-icon {
        width: 30px;
        height: 30px;
    }

    .apothecary-jar .jar-strain-name {
        font-size: 0.7rem;
    }

    .apothecary-jar .jar-strain-type {
        font-size: 0.5rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .strains-showcase {
        gap: 10px;
    }

    .apothecary-jar .jar-icon {
        width: 26px;
        height: 26px;
        margin-bottom: 2px;
    }

    .apothecary-jar .jar-strain-name {
        font-size: 0.65rem;
    }

    .apothecary-jar .jar-strain-type {
        font-size: 0.45rem;
        letter-spacing: 0.08em;
    }

    .apothecary-jar .jar-label {
        padding: 6px 10px;
        height: 68%;
    }
}

/* ==================== WITCH COTTAGE SHELF ==================== */

.witch-shelf-container {
    position: relative;
    width: 100%;
    margin: calc(var(--spacing-sm) / 2) auto 0;
}

.witch-shelf-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Jar positioning */
.witch-jar-wrapper {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Jar slot positions - percentage-based for responsive scaling */
.witch-jar-slot-1 { top: 29.8%; left: 29.5%; width: 20%; }
.witch-jar-slot-2 { top: 27.7%; left: 50.5%; width: 17.5%; }
.witch-jar-slot-3 { top: 51.1%; left: 22.0%; width: 20.4%; }
.witch-jar-slot-4 { top: 52.1%; left: 38.0%; width: 22.9%; }
.witch-jar-slot-5 { top: 51.5%; left: 59.0%; width: 19.2%; }

.witch-jar {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
    transition: filter 0.4s ease, transform 0.3s ease;
}

/* Smoke/mist particles */
.witch-smoke-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.witch-smoke {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(181, 101, 255, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    filter: blur(3px);
}

.witch-jar-wrapper:hover .witch-smoke {
    animation: witch-smoke-rise 2s ease-out infinite;
}

.witch-smoke:nth-child(1) { left: 30%; animation-delay: 0s; }
.witch-smoke:nth-child(2) { left: 50%; animation-delay: 0.3s; }
.witch-smoke:nth-child(3) { left: 70%; animation-delay: 0.6s; }
.witch-smoke:nth-child(4) { left: 40%; animation-delay: 0.9s; }
.witch-smoke:nth-child(5) { left: 60%; animation-delay: 1.2s; }

@keyframes witch-smoke-rise {
    0% {
        bottom: 20%;
        opacity: 0;
        transform: translateX(0) scale(1);
    }
    20% {
        opacity: 0.8;
    }
    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(10px) scale(2);
    }
}

/* Hover: lift + glow */
.witch-jar-wrapper:hover {
    transform: translateY(-6px);
    z-index: 10;
}

.witch-jar-wrapper:hover .witch-jar {
    filter: drop-shadow(0 12px 25px rgba(0,0,0,0.5))
            drop-shadow(0 0 25px rgba(181, 101, 255, 0.7))
            drop-shadow(0 0 40px rgba(181, 101, 255, 0.4))
            brightness(1.15);
}

/* Type-specific glow colors */
.witch-jar-wrapper.indica:hover .witch-jar {
    filter: drop-shadow(0 12px 25px rgba(0,0,0,0.5))
            drop-shadow(0 0 25px rgba(139, 92, 246, 0.8))
            drop-shadow(0 0 40px rgba(139, 92, 246, 0.5))
            brightness(1.2);
}

.witch-jar-wrapper.indica:hover .witch-smoke {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.7) 0%, transparent 70%);
}

.witch-jar-wrapper.sativa:hover .witch-jar {
    filter: drop-shadow(0 12px 25px rgba(0,0,0,0.5))
            drop-shadow(0 0 25px rgba(245, 158, 11, 0.8))
            drop-shadow(0 0 40px rgba(245, 158, 11, 0.5))
            brightness(1.2);
}

.witch-jar-wrapper.sativa:hover .witch-smoke {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.7) 0%, transparent 70%);
}

.witch-jar-wrapper.hybrid:hover .witch-jar {
    filter: drop-shadow(0 12px 25px rgba(0,0,0,0.5))
            drop-shadow(0 0 25px rgba(16, 185, 129, 0.8))
            drop-shadow(0 0 40px rgba(16, 185, 129, 0.5))
            brightness(1.2);
}

.witch-jar-wrapper.hybrid:hover .witch-smoke {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.7) 0%, transparent 70%);
}

/* Strain label tooltip */
.witch-strain-label {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: linear-gradient(135deg, rgba(26,26,62,0.95), rgba(45,27,78,0.95));
    color: var(--lavender);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    border: 1px solid var(--accent-purple);
    box-shadow: 0 4px 15px rgba(181, 101, 255, 0.3);
    pointer-events: none;
    text-align: center;
}

.witch-jar-wrapper:hover .witch-strain-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.witch-strain-type {
    font-size: 0.65rem;
    color: var(--gold);
    display: block;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive - jar percentages scale automatically */
@media (max-width: 480px) {
    /* Jar sizes already percentage-based, no changes needed */

    .witch-strain-label {
        font-size: 0.7rem;
        padding: 6px 12px;
        bottom: -35px;
    }

    .witch-strain-type {
        font-size: 0.55rem;
    }
}

/* ==================== DARK APOTHECARY STRAIN CAROUSEL ==================== */

.strain-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10001;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: default;
}

/* Close Button */
.strain-carousel-close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(106, 58, 138, 0.5);
    border: 1px solid #6a3a8a;
    color: #c4a0d4;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 10010;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.strain-carousel-close:hover {
    color: #e0b0ff;
    background: rgba(181, 101, 255, 0.5);
    border-color: #b565ff;
    transform: scale(1.1);
}

/* Navigation Arrows */
.strain-carousel-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(106, 58, 138, 0.4);
    border: 1px solid #6a3a8a;
    color: #c4a0d4;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10010;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.strain-nav-prev { left: 30px; }
.strain-nav-next { right: 30px; }

.strain-carousel-nav:hover {
    color: #e0b0ff;
    background: rgba(181, 101, 255, 0.5);
    border-color: #b565ff;
    transform: translateY(-50%) scale(1.1);
}

/* Carousel Container */
.strain-carousel-container {
    width: 100%;
    height: calc(100vh - 120px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Carousel Track */
.strain-carousel-track {
    display: flex;
    gap: 40px;
    transition: transform 0.4s ease-out;
    align-items: center;
    will-change: transform;
}

/* Potion Jar Card - Floating Jar Style */
.card-dark-apothecary {
    flex-shrink: 0;
    width: 280px;
    height: 350px;
    background: transparent;
    position: relative;
    padding: 0;
    transition: all 0.4s ease, filter 0.3s ease;
    opacity: 0.6;
    transform: scale(0.85);
    cursor: pointer;
}

/* Jar image inside the card */
.card-dark-apothecary .jar-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.card-dark-apothecary.active-card {
    opacity: 1;
    transform: scale(1.2);
    z-index: 10;
}

.card-dark-apothecary.active-card .jar-image {
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 30px rgba(184, 134, 11, 0.3));
}

/* Glow colors by strain type */
.card-dark-apothecary.indica.active-card .jar-image {
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 35px rgba(181, 101, 255, 0.5));
}

.card-dark-apothecary.sativa.active-card .jar-image {
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 35px rgba(255, 170, 0, 0.5));
}

.card-dark-apothecary.hybrid.active-card .jar-image {
    filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 35px rgba(90, 180, 90, 0.5));
}

.card-dark-apothecary.active-card:hover .jar-image {
    transform: scale(1.02);
}

/* Carousel Dots */
.strain-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 0;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10010;
}

.strain-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(106, 58, 138, 0.4);
    border: 1px solid #6a3a8a;
    cursor: pointer;
    transition: all 0.3s ease;
}

.strain-dot:hover {
    background: rgba(181, 101, 255, 0.4);
    transform: scale(1.2);
}

.strain-dot.active {
    background: #b565ff;
    border-color: #e0b0ff;
    transform: scale(1.3);
    box-shadow: 0 0 15px rgba(181, 101, 255, 0.6);
}

/* Label Content Area - mystical floating card */
.dark-apothecary-frame {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) translateY(15px) scale(0.95);
    width: 95%;
    max-width: 260px;
    padding: 16px 14px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Dark mystical glassmorphism */
    background: linear-gradient(
        145deg,
        rgba(26, 26, 62, 0.95) 0%,
        rgba(45, 27, 78, 0.95) 50%,
        rgba(74, 56, 102, 0.9) 100%
    );
    backdrop-filter: blur(12px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(155, 126, 181, 0.3);
    opacity: 0;
    pointer-events: none;
}

/* Subtle inner glow effect */
.dark-apothecary-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(184, 134, 11, 0.4) 0%,
        rgba(155, 126, 181, 0.2) 50%,
        rgba(184, 134, 11, 0.4) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Show label on active card hover */
.card-dark-apothecary.active-card:hover .dark-apothecary-frame {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(184, 134, 11, 0.15),
        0 0 60px rgba(155, 126, 181, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(184, 134, 11, 0.5);
    pointer-events: auto;
}

.card-dark-apothecary.active-card:hover .dark-apothecary-frame::before {
    opacity: 1;
}

/* Corner Accents - hidden for cleaner look */
.dark-apothecary-corners {
    display: none;
}

.dark-apothecary-corner {
    display: none;
}

.dark-apothecary-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.dark-apothecary-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.dark-apothecary-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.dark-apothecary-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* Header - Kraft paper style */
.dark-apothecary-header {
    text-align: center;
    border-bottom: 1px solid #a08060;
    padding-bottom: 6px;
    margin-bottom: 6px;
    width: 100%;
}

.dark-apothecary-header .shop {
    font-family: 'Almendra', serif;
    font-size: 0.85rem;
    color: #4a3020;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.dark-apothecary-header .est {
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 0.5rem;
    color: #6a5a4a;
    letter-spacing: 0.15em;
    font-style: italic;
}

/* Strain Name - Elegant gold on dark */
.dark-apothecary-strain {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: #b8860b;
    font-weight: 600;
    margin: 0 0 4px;
    text-shadow:
        0 0 10px rgba(184, 134, 11, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.2em;
    letter-spacing: 0.03em;
}

.dark-apothecary-strain.long-name {
    font-size: 1.05rem;
}

.dark-apothecary-strain.very-long-name {
    font-size: 0.9rem;
}

/* Strain Type - Soft lavender */
.dark-apothecary-type {
    text-align: center;
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 0.65rem;
    color: #c8a2d0;
    letter-spacing: 0.18em;
    font-style: italic;
    margin-bottom: 6px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Ornament Divider - Glowing lines */
.dark-apothecary-ornament {
    text-align: center;
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.dark-apothecary-ornament .line {
    flex: 1;
    max-width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.6));
}

.dark-apothecary-ornament .line:last-child {
    background: linear-gradient(90deg, rgba(184, 134, 11, 0.6), transparent);
}

.dark-apothecary-ornament .divider-icon {
    font-size: 0.85rem;
    color: #b8860b;
    text-shadow: 0 0 8px rgba(184, 134, 11, 0.5);
    transition: all 0.3s ease;
}

/* Divider icon enhanced glow on card hover */
.card-dark-apothecary.active-card:hover .dark-apothecary-ornament .divider-icon {
    color: #d4a84a;
    text-shadow:
        0 0 8px rgba(184, 134, 11, 0.7),
        0 0 16px rgba(184, 134, 11, 0.4);
    transform: scale(1.1);
}

/* Lotus Moon Icon - warm brown tint */
.lotus-moon-icon {
    height: 22px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease, filter 0.3s ease;
    filter: sepia(60%) saturate(80%) brightness(70%) contrast(110%);
}

.card-dark-apothecary:hover .lotus-moon-icon {
    opacity: 1;
    filter: sepia(70%) saturate(100%) brightness(75%) contrast(115%);
}

/* Image Container - Kraft paper style */
.dark-apothecary-image {
    width: 70px;
    height: 70px;
    margin: 4px auto;
    border: 2px solid #a08060;
    border-radius: 4px;
    background: linear-gradient(135deg, #d4c4a4 0%, #c4b494 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.dark-apothecary-image .apothecary-strain-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dark-apothecary-image .placeholder {
    width: 40px;
    height: 40px;
    border: 1px solid #a08060;
    border-radius: 50%;
    opacity: 0.4;
}

/* Details Rows - Mystical dark style */
.dark-apothecary-details {
    margin: 6px 0;
    width: 100%;
    padding: 0 4px;
}

.dark-apothecary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(155, 126, 181, 0.2);
}

.dark-apothecary-row:last-child {
    border-bottom: none;
}

.dark-apothecary-row .label {
    color: #9b7eb5;
    flex-shrink: 0;
    margin-right: 8px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
}

.dark-apothecary-row span:not(.label) {
    color: #e8e0d4;
    text-align: right;
}

/* Value text with line clamp for long content */
.dark-apothecary-row .value-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: right;
    line-height: 1.3;
    max-width: 60%;
    color: #e8e0d4;
}

/* Genetics/Comments Box */
.dark-apothecary-genetics {
    text-align: center;
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 0.5rem;
    color: #5a4a3a;
    font-style: italic;
    padding: 4px 6px;
    background: rgba(160, 128, 96, 0.1);
    border: 1px solid #b0a080;
    border-radius: 3px;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Footer - Subtle mystical text */
.dark-apothecary-footer {
    text-align: center;
    margin-top: 8px;
    padding-top: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    color: rgba(184, 134, 11, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-top: 1px solid rgba(155, 126, 181, 0.15);
}

@keyframes cardMaterialization {
    0% {
        opacity: 0;
        transform: scale(0.9) rotateY(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* Mobile Responsive - Horizontal Carousel */
@media (max-width: 768px) {
    .strain-modal {
        padding: 0;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }

    .strain-carousel-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
        z-index: 1010;
    }

    /* Show mobile-friendly navigation arrows */
    .strain-carousel-nav {
        display: flex;
        width: 44px;
        height: 44px;
        font-size: 1rem;
        background: rgba(106, 58, 138, 0.6);
        z-index: 1005;
    }

    .strain-nav-prev {
        left: 8px;
    }

    .strain-nav-next {
        right: 8px;
    }

    .strain-carousel-container {
        width: 100%;
        height: 100%;
        padding: 60px 0 70px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .strain-carousel-track {
        display: flex;
        flex-direction: row;
        gap: 0;
        transition: transform 0.3s ease-out;
        touch-action: pan-x;
        will-change: transform;
    }

    .card-dark-apothecary {
        /* Mobile: floating jar style */
        width: min(240px, calc(100vw - 80px));
        min-width: min(240px, calc(100vw - 80px));
        max-width: min(240px, calc(100vw - 80px));
        height: min(320px, calc(100vh - 200px));
        flex-shrink: 0;
        margin-right: 30px;
        opacity: 0.5;
        transform: scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s ease;
        background: transparent;
    }

    .card-dark-apothecary.active-card {
        opacity: 1;
        transform: scale(1.1);
    }

    .strain-carousel-dots {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        z-index: 1005;
        padding: 8px 16px;
        background: rgba(26, 10, 26, 0.8);
        border-radius: 20px;
    }

    .strain-dot {
        width: 12px;
        height: 12px;
    }

    .dark-apothecary-strain {
        font-size: 1.1rem;
    }

    .dark-apothecary-strain.long-name {
        font-size: 0.95rem;
    }

    .dark-apothecary-strain.very-long-name {
        font-size: 0.85rem;
    }

    .dark-apothecary-image {
        width: 60px;
        height: 60px;
    }

    /* Mobile label positioning */
    .dark-apothecary-frame {
        padding: 10px 8px;
        top: 24%;
        left: 14%;
        width: 72%;
        height: 58%;
    }

    .dark-apothecary-header .shop {
        font-size: 0.75rem;
    }

    .dark-apothecary-header .est {
        font-size: 0.45rem;
    }

    .dark-apothecary-details {
        margin: 2px 0;
    }

    .dark-apothecary-row {
        font-size: 0.5rem;
        padding: 2px 0;
    }

    .dark-apothecary-footer {
        font-size: 0.45rem;
        margin-top: 6px;
        padding-top: 6px;
    }
}

@media (max-width: 480px) {
    .card-dark-apothecary {
        width: min(200px, calc(100vw - 60px));
        min-width: min(200px, calc(100vw - 60px));
        max-width: min(200px, calc(100vw - 60px));
        height: min(280px, calc(100vh - 180px));
        margin-right: 20px;
        background: transparent;
    }

    .dark-apothecary-strain {
        font-size: 1rem;
    }

    .dark-apothecary-strain.long-name {
        font-size: 0.85rem;
    }

    .dark-apothecary-strain.very-long-name {
        font-size: 0.75rem;
    }

    .dark-apothecary-image {
        width: 50px;
        height: 50px;
    }

    .strain-carousel-nav {
        width: 36px;
        height: 36px;
    }

    .strain-nav-prev {
        left: 4px;
    }

    .strain-nav-next {
        right: 4px;
    }
}

/* End of Dark Apothecary Carousel Styles */

/* Reduced Motion Support - respects user preferences for less animation */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .floating-leaf-image,
    .pot-leaf-image,
    .redbull-image,
    .star,
    .moon {
        animation: none !important;
        opacity: 0.3;
    }

    .mist-overlay {
        animation: none !important;
    }
}

/* ==================== CREATOR COLLABS - CRYSTAL PORTRAIT GALLERY ==================== */

.collabs-section {
    margin-bottom: var(--spacing-lg);
    overflow: visible;
}

.collabs-section .section-title.crystal-title {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.collabs-section .section-title.crystal-title::before,
.collabs-section .section-title.crystal-title::after {
    content: '✧';
    color: var(--gold);
    font-size: 0.8rem;
}

/* Crystal Gallery Panel */
.crystal-gallery {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(74, 56, 102, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(45, 27, 78, 0.3) 0%, transparent 50%),
        linear-gradient(180deg, rgba(26, 26, 62, 0.9) 0%, rgba(45, 27, 78, 0.8) 50%, rgba(26, 26, 62, 0.9) 100%);
    border-radius: 12px;
    padding: 25px 20px;
    position: relative;
    border: 1px solid rgba(155, 126, 181, 0.25);
    box-shadow: inset 0 0 60px rgba(155, 126, 181, 0.1), 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Mystical corner decorations */
.crystal-gallery::before {
    content: '⟡';
    position: absolute;
    top: 8px;
    left: 12px;
    color: rgba(184, 134, 11, 0.5);
    font-size: 1rem;
}

.crystal-gallery::after {
    content: '⟡';
    position: absolute;
    top: 8px;
    right: 12px;
    color: rgba(184, 134, 11, 0.5);
    font-size: 1rem;
}

/* 2x2 Grid of Portraits */
.crystal-portraits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Individual Crystal Portrait */
.crystal-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.crystal-portrait:hover {
    transform: translateY(-5px);
}

/* Crystal Frame Container */
.crystal-frame {
    position: relative;
    width: 90px;
    height: 90px;
    margin-bottom: 10px;
}

/* Outer Crystal Ring - Animated */
.crystal-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(184, 134, 11, 0.6) 60deg,
        transparent 120deg,
        rgba(155, 126, 181, 0.4) 180deg,
        transparent 240deg,
        rgba(200, 162, 208, 0.5) 300deg,
        transparent 360deg
    );
    animation: crystalSpin 8s linear infinite;
}

.crystal-portrait:nth-child(2) .crystal-ring { animation-delay: -2s; }
.crystal-portrait:nth-child(3) .crystal-ring { animation-delay: -4s; }
.crystal-portrait:nth-child(4) .crystal-ring { animation-delay: -6s; }

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

/* Inner Frame */
.crystal-inner {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 56, 102, 0.9) 0%, rgba(45, 27, 78, 0.95) 100%);
    border: 2px solid rgba(155, 126, 181, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(155, 126, 181, 0.2);
}

/* Glass shine effect */
.crystal-inner::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10px;
    width: 20px;
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.crystal-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.crystal-placeholder {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a2a5a 0%, #2a1a4a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lavender);
    font-size: 1.8rem;
}

.crystal-name {
    font-family: 'Carattere', cursive;
    font-size: 1.3rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 2px;
    text-shadow: 0 0 10px rgba(155, 126, 181, 0.3);
}

.crystal-handle {
    font-family: 'IM Fell English', serif;
    font-size: 0.7rem;
    color: rgba(155, 126, 181, 0.7);
    text-align: center;
    font-style: italic;
}

/* Hover glow effect */
.crystal-portrait:hover .crystal-inner {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 25px rgba(184, 134, 11, 0.4), 0 0 40px rgba(155, 126, 181, 0.3);
}

.crystal-portrait:hover .crystal-name {
    color: var(--gold);
    text-shadow: 0 0 15px rgba(184, 134, 11, 0.5);
}

/* ==================== CONSTELLATION COLLABS ==================== */
/* New starfield design with constellation frames around portraits */

.constellation-collabs {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    height: 100%;
    padding: 20px 0;
    overflow: visible;
}

/* Fading cosmic background */
.constellation-collabs .cosmic-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(168, 85, 247, 0.08) 0%,
            rgba(168, 85, 247, 0.04) 30%,
            transparent 70%);
    pointer-events: none;
}

/* Twinkling stars layer */
.constellation-collabs .stars-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.constellation-collabs .bg-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff8e7;
    border-radius: 50%;
    opacity: 0.3;
    animation: constellationTwinkle 3s ease-in-out infinite;
}

.constellation-collabs .bg-star:nth-child(1) { top: 8%; left: 12%; animation-delay: 0s; }
.constellation-collabs .bg-star:nth-child(2) { top: 15%; left: 88%; animation-delay: 0.5s; width: 1px; height: 1px; }
.constellation-collabs .bg-star:nth-child(3) { top: 28%; left: 5%; animation-delay: 1s; }
.constellation-collabs .bg-star:nth-child(4) { top: 38%; left: 95%; animation-delay: 1.5s; width: 1px; height: 1px; }
.constellation-collabs .bg-star:nth-child(5) { top: 52%; left: 8%; animation-delay: 2s; }
.constellation-collabs .bg-star:nth-child(6) { top: 65%; left: 92%; animation-delay: 0.3s; }
.constellation-collabs .bg-star:nth-child(7) { top: 78%; left: 15%; animation-delay: 0.8s; width: 1px; height: 1px; }
.constellation-collabs .bg-star:nth-child(8) { top: 88%; left: 85%; animation-delay: 1.3s; }

@keyframes constellationTwinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* Section title */
.constellation-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
    letter-spacing: 0.15em;
    position: relative;
    z-index: 2;
}

.constellation-title i {
    margin-right: 10px;
    font-size: 1rem;
    color: var(--gold);
}

/* Content area */
.constellation-content {
    flex: 1;
    position: relative;
    z-index: 2;
    padding: 0 20px;
    overflow: visible;
}

/* ==================== COLLAB CARDS - NEBULA CRYSTALS ==================== */

/* Crystal Collabs Section */
.crystal-collabs {
    position: relative;
    z-index: 2;
}

.crystal-collabs-title {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    color: #c0d0e8;
    text-align: center;
    text-shadow: 0 0 40px rgba(150, 180, 220, 0.3);
    margin: 0 0 15px 0;
}

.crystal-collabs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.crystal-collabs-divider .divider-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(150, 180, 220, 0.4), transparent);
}

.crystal-collabs-divider .divider-gem {
    width: 8px;
    height: 8px;
    background: rgba(150, 180, 220, 0.6);
    transform: rotate(45deg);
}

/* Collab Grid */
.collab-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.collab-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Crystal container */
.crystal-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 25px;
}

/* Outer faceted glow */
.crystal-glow {
    position: absolute;
    inset: -15px;
    background: conic-gradient(
        from 0deg,
        rgba(147, 112, 219, 0.2) 0deg,
        rgba(100, 149, 237, 0.15) 60deg,
        rgba(186, 85, 211, 0.2) 120deg,
        rgba(138, 43, 226, 0.15) 180deg,
        rgba(147, 112, 219, 0.2) 240deg,
        rgba(100, 149, 237, 0.15) 300deg,
        rgba(147, 112, 219, 0.2) 360deg
    );
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.5;
    transition: all 0.5s ease;
}

.collab-card:hover .crystal-glow {
    opacity: 0.9;
    filter: blur(25px);
    transform: scale(1.1);
}

/* Main crystal sphere */
.crystal-sphere {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* Facet highlights */
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 30%),
        linear-gradient(225deg,
            rgba(200, 200, 255, 0.1) 0%,
            transparent 25%),
        /* Core gradient */
        radial-gradient(circle at 35% 35%,
            rgba(180, 160, 220, 0.25) 0%,
            transparent 40%),
        radial-gradient(circle at center,
            rgba(60, 40, 90, 0.9) 0%,
            rgba(30, 20, 50, 0.95) 60%,
            rgba(15, 10, 25, 1) 100%);
    border: 1px solid rgba(150, 130, 200, 0.3);
    box-shadow:
        inset 0 0 40px rgba(100, 80, 150, 0.3),
        inset -20px -20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(147, 112, 219, 0.2);
    transition: all 0.5s ease;
    overflow: hidden;
}

.collab-card:hover .crystal-sphere {
    border-color: rgba(180, 160, 220, 0.5);
    box-shadow:
        inset 0 0 50px rgba(147, 112, 219, 0.4),
        inset -20px -20px 40px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(147, 112, 219, 0.35);
}

/* Prismatic refraction overlay */
.crystal-refraction {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(255, 200, 200, 0.05) 20%,
            rgba(200, 255, 200, 0.05) 40%,
            rgba(200, 200, 255, 0.08) 60%,
            transparent 80%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.collab-card:hover .crystal-refraction {
    opacity: 1;
}

/* Constellation etched inside crystal */
.crystal-constellation {
    position: absolute;
    inset: 25px;
    opacity: 0.6;
    transition: all 0.5s ease;
}

.collab-card:hover .crystal-constellation {
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(200, 180, 255, 0.5));
}

.crystal-constellation svg {
    width: 100%;
    height: 100%;
}

/* Portrait overlay on hover */
.crystal-portrait {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.5s ease;
    overflow: hidden;
    background: rgba(30, 20, 50, 0.95);
}

.collab-card:hover .crystal-portrait {
    opacity: 1;
    transform: scale(1);
}

.crystal-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crystal-portrait .portrait-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(180, 160, 220, 0.4);
    background: radial-gradient(circle at center,
        rgba(60, 40, 90, 0.8) 0%,
        rgba(30, 20, 50, 1) 100%);
}

/* Facet sparkle effect */
.crystal-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: crystalSparkle 3s ease-in-out infinite;
}

.crystal-sparkle:nth-child(1) { top: 20%; left: 25%; animation-delay: 0s; }
.crystal-sparkle:nth-child(2) { top: 35%; right: 20%; animation-delay: 1s; }
.crystal-sparkle:nth-child(3) { bottom: 30%; left: 30%; animation-delay: 2s; }

@keyframes crystalSparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.8; transform: scale(1); }
}

.collab-card:hover .crystal-sparkle {
    animation-duration: 1.5s;
}

/* Info section below crystal */
.collab-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    width: 100%;
}

.collab-card-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #d0c0e8;
    letter-spacing: 0.1em;
    margin: 0 0 5px 0;
    transition: all 0.3s ease;
}

.collab-card:hover .collab-card-name {
    color: #fff;
    text-shadow: 0 0 15px rgba(180, 160, 220, 0.5);
}

.collab-card-handle {
    font-family: 'Carattere', cursive;
    font-weight: 300;
    font-size: 1rem;
    color: rgba(180, 170, 200, 0.5);
    margin-bottom: 12px;
}

.collab-card-socials {
    display: flex;
    gap: 10px;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s ease;
}

.collab-card:hover .collab-card-socials {
    opacity: 1;
    transform: translateY(0);
}

/* Diamond-shaped social buttons */
.collab-card-socials a {
    width: 30px;
    height: 30px;
    background: rgba(100, 80, 150, 0.2);
    border: 1px solid rgba(150, 130, 200, 0.3);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 180, 230, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.collab-card-socials a i {
    transform: rotate(-45deg);
    font-size: 0.75rem;
}

.collab-card-socials a:hover {
    background: rgba(147, 112, 219, 0.3);
    border-color: rgba(180, 160, 220, 0.5);
    color: #fff;
    box-shadow: 0 0 15px rgba(147, 112, 219, 0.4);
}

/* Responsive - Tablet: 3 columns */
@media (max-width: 1024px) {
    .collab-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

/* Responsive - Small tablet: 2 columns */
@media (max-width: 768px) {
    .collab-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        padding: 0 15px;
    }

    .crystal-container {
        width: 140px;
        height: 140px;
    }

    .crystal-collabs-title {
        font-size: 1.3rem;
    }
}

/* Responsive - Mobile: 2 columns compact */
@media (max-width: 480px) {
    .collab-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 0 10px;
    }

    .crystal-container {
        width: 120px;
        height: 120px;
        margin-bottom: 18px;
    }

    .crystal-collabs-title {
        font-size: 1.1rem;
        letter-spacing: 0.2em;
    }

    .collab-card-name {
        font-size: 0.9rem;
    }

    .collab-card-handle {
        font-size: 0.85rem;
    }

    .collab-card-socials a {
        width: 26px;
        height: 26px;
    }

    .collab-card-socials a i {
        font-size: 0.65rem;
    }
}

/* ==================== OLD GRID STYLES (keeping for reference) ==================== */

/* 3x3 Constellation grid (checkerboard pattern) */
.constellation-grid {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    grid-template-rows: repeat(3, 180px);
    gap: 20px;
    justify-content: center;
}

/* Filled constellation cell (the X positions in checkerboard) */
.constellation-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    padding: 10px;
    overflow: visible;
    position: relative;
}

/* Spacer cells match filled cells */
.constellation-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.constellation-cell:hover {
    transform: scale(1.1);
}

.constellation-cell:hover .constellation-icon {
    filter: brightness(1.4) drop-shadow(0 0 15px rgba(168, 85, 247, 0.6));
    opacity: 1;
}

/* Large constellation icon container */
.constellation-icon {
    width: 120px;
    height: 120px;
    position: relative;
    transition: filter 0.3s ease, opacity 0.3s ease;
    overflow: visible;
    opacity: 0.5;
}

.constellation-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Constellation lines - match lotus constellation (white with purple glow) */
.const-line {
    stroke: #fff;
    stroke-width: 1.5;
    fill: none;
    filter: drop-shadow(0 0 3px rgba(181, 101, 255, 0.6));
}

/* Constellation stars - match lotus constellation (white with purple glow) */
.const-star {
    fill: #fff;
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgba(181, 101, 255, 0.7));
}

.const-star-glow {
    fill: none;
    stroke: rgba(181, 101, 255, 0.5);
    stroke-width: 1.5;
    opacity: 0.6;
}

/* Label under constellation - collaborator name */
.constellation-label {
    font-family: 'Carattere', cursive !important;
    font-size: 1.2rem !important;
    color: #fff !important;
    opacity: 0.6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: none;
    text-align: center;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: visible;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Purple glow on hover */
.constellation-cell:hover .constellation-label {
    text-shadow:
        0 0 8px rgba(181, 101, 255, 0.8),
        0 0 16px rgba(181, 101, 255, 0.6),
        0 0 24px rgba(155, 126, 181, 0.4);
    opacity: 1;
}

/* Spacer star styling - matches lotus constellation */
.spacer-star {
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.35;
    box-shadow: 0 0 4px rgba(181, 101, 255, 0.5);
    animation: constellationTwinkle 4s ease-in-out infinite;
}

/* Empty constellation slots */
.constellation-empty {
    opacity: 0.25;
    cursor: default;
}

.constellation-empty:hover {
    transform: none;
}

.constellation-empty .constellation-icon {
    filter: none;
}

/* Filler area for stretched version */
.constellation-filler {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}

.stardust-row {
    display: flex;
    gap: 40px;
    align-items: center;
}

.dust-star {
    width: 3px;
    height: 3px;
    background: #fff8e7;
    border-radius: 50%;
    opacity: 0.4;
    animation: dustPulse 4s ease-in-out infinite;
}

.dust-star:nth-child(1) { animation-delay: 0s; }
.dust-star:nth-child(2) { animation-delay: -1s; width: 2px; height: 2px; }
.dust-star:nth-child(3) { animation-delay: -2s; }
.dust-star:nth-child(4) { animation-delay: -3s; width: 2px; height: 2px; }
.dust-star:nth-child(5) { animation-delay: -0.5s; }

@keyframes dustPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.constellation-latin {
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    color: rgba(200, 162, 208, 0.3);
    font-style: italic;
    letter-spacing: 0.4em;
    margin: 25px 0;
}

/* Mobile responsive: 3x3 grid adjustments */
@media (max-width: 768px) {
    .constellation-grid {
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        gap: 8px;
    }

    .constellation-cell {
        padding: 5px;
    }

    .constellation-icon {
        width: 65px;
        height: 65px;
    }

    .constellation-label {
        font-size: 0.9rem;
        margin-top: 5px;
    }

    .constellation-filler {
        padding: 20px 10px;
    }

    .constellation-latin {
        font-size: 0.45rem;
        letter-spacing: 0.15em;
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    .constellation-grid {
        grid-template-columns: repeat(3, 90px);
        grid-template-rows: repeat(3, 90px);
        gap: 5px;
    }

    .constellation-cell {
        padding: 3px;
    }

    .constellation-icon {
        width: 58px;
        height: 58px;
    }

    .constellation-label {
        font-size: 0.8rem;
        margin-top: 3px;
    }

    .spacer-star {
        width: 2px;
        height: 2px;
    }

    .constellation-latin {
        font-size: 0.4rem;
        letter-spacing: 0.08em;
        margin: 8px 0;
        opacity: 0.35;
    }
}

/* ==================== CONSTELLATION MODAL ==================== */

.constellation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.97);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 10000;
    padding: 20px;
}

.constellation-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.constellation-modal-content {
    background: linear-gradient(180deg,
        rgba(45, 27, 78, 0.6) 0%,
        rgba(26, 26, 62, 0.5) 30%,
        rgba(10, 22, 40, 0.7) 100%);
    border: 1px solid rgba(181, 101, 255, 0.3);
    border-radius: 16px;
    padding: 50px 40px 40px;
    max-width: 400px;
    width: 100%;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s ease;
    box-shadow:
        0 0 80px rgba(181, 101, 255, 0.15),
        0 25px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(181, 101, 255, 0.05);
    overflow: hidden;
}

.constellation-modal-overlay.active .constellation-modal-content {
    transform: scale(1) translateY(0);
}

/* Large constellation background */
.constellation-modal-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.constellation-modal-bg svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.constellation-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--lavender);
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    z-index: 10;
    opacity: 0.7;
}

.constellation-modal-close:hover {
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 10px rgba(181, 101, 255, 0.8);
}

/* Profile photo */
.constellation-modal-photo {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 56, 102, 0.6) 0%, rgba(45, 27, 78, 0.8) 100%);
    border: 2px solid rgba(181, 101, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 30px rgba(181, 101, 255, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.constellation-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.constellation-modal-photo i {
    font-size: 2.5rem;
    color: var(--lavender);
    opacity: 0.5;
}

.constellation-modal-name {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 4px;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 20px rgba(181, 101, 255, 0.5);
    letter-spacing: 0.05em;
}

.constellation-modal-handle {
    font-family: 'Carattere', cursive;
    font-size: 1.2rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    opacity: 0.9;
}

.constellation-modal-bio {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(200, 162, 208, 0.85);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    padding: 0 10px;
}

.constellation-modal-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.constellation-tag {
    background: rgba(181, 101, 255, 0.15);
    border: 1px solid rgba(181, 101, 255, 0.3);
    color: var(--soft-lavender);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.constellation-tag:hover {
    background: rgba(181, 101, 255, 0.25);
    border-color: rgba(181, 101, 255, 0.5);
}

.constellation-modal-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.constellation-modal-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(181, 101, 255, 0.1);
    border: 1px solid rgba(181, 101, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lavender);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.constellation-modal-socials a:hover {
    background: rgba(181, 101, 255, 0.3);
    border-color: rgba(181, 101, 255, 0.6);
    color: #fff;
    box-shadow: 0 0 20px rgba(181, 101, 255, 0.4);
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .constellation-modal-content {
        padding: 40px 30px 30px;
        max-width: 350px;
    }

    .constellation-modal-bg {
        width: 220px;
        height: 220px;
    }

    .constellation-modal-photo {
        width: 85px;
        height: 85px;
    }

    .constellation-modal-name {
        font-size: 1.4rem;
    }

    .constellation-modal-handle {
        font-size: 1.1rem;
    }

    .constellation-modal-bio {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .constellation-modal-content {
        padding: 35px 20px 25px;
        margin: 10px;
    }

    .constellation-modal-bg {
        width: 180px;
        height: 180px;
        opacity: 0.15;
    }

    .constellation-modal-photo {
        width: 75px;
        height: 75px;
    }

    .constellation-modal-socials a {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* ==================== OLD COLLAB STYLES (keeping for reference, can be removed) ==================== */
/* Legacy poster styles below - kept for backwards compatibility */

.collabs-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 15px;
}

/* Each stack container */
.collab-stack {
    position: relative;
    width: 280px;
    height: 460px;
    cursor: pointer;
}

/* Collab Poster Card - Aged Purple Parchment with Rusty Nails */
.collab-poster {
    width: 280px;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

/* Front poster (1st in each stack) */
.collab-poster:first-child {
    z-index: 3;
}

/* 2nd in stack - peeking behind */
.collab-poster:nth-child(2) {
    z-index: 2;
    transform: rotate(-3deg) translateX(-8px) translateY(8px);
    opacity: 0.55;
    filter: brightness(0.55);
}

/* 3rd in stack - further back */
.collab-poster:nth-child(3) {
    z-index: 1;
    transform: rotate(2deg) translateX(6px) translateY(16px);
    opacity: 0.35;
    filter: brightness(0.45);
}

/* 4th+ in stack hidden */
.collab-poster:nth-child(n+4) {
    display: none;
}

.collab-stack:hover .collab-poster:first-child {
    transform: translateY(-5px);
}

/* Rusty Square Nails */
.collab-poster .nail {
    position: absolute;
    width: 12px;
    height: 12px;
    z-index: 10;
    transform: rotate(45deg);
}

.collab-poster .nail-head {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #6b4a3a 0%, #4a3228 40%, #3a2218 70%, #2a1a12 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(139, 90, 60, 0.3);
    position: relative;
}

/* Rust texture spots */
.collab-poster .nail-head::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: rgba(139, 70, 50, 0.6);
    border-radius: 50%;
}

.collab-poster .nail-head::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 3px;
    height: 3px;
    background: rgba(100, 60, 40, 0.5);
    border-radius: 50%;
}

.collab-poster .nail.top-left { top: 12px; left: 12px; }
.collab-poster .nail.top-center { top: 8px; left: 50%; transform: translateX(-50%) rotate(45deg); }
.collab-poster .nail.top-right { top: 12px; right: 12px; }

/* Poster Body - Aged Purple Parchment */
.collab-poster .poster-body {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(90, 50, 100, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(74, 53, 88, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, #3d2a4a 0%, #352445 50%, #2d1d3d 100%);
    padding: 40px 25px 25px;
    position: relative;
    border: 1px solid rgba(155, 126, 181, 0.2);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), inset 0 0 50px rgba(45, 27, 78, 0.25);
    /* Fixed height for consistent poster size */
    height: 420px;
    display: flex;
    flex-direction: column;
    /* Torn/worn top edge */
    clip-path: polygon(
        0% 2%, 3% 0%, 8% 2%, 12% 0%, 18% 1%, 25% 0%,
        32% 2%, 40% 0%, 48% 1%, 52% 0%, 60% 2%, 68% 0%,
        75% 1%, 82% 0%, 88% 2%, 92% 0%, 97% 1%, 100% 2%,
        100% 100%, 0% 100%
    );
}

/* Paper texture noise */
.collab-poster .poster-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
}

/* Shadow under torn edge */
.collab-poster .poster-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 100%);
    pointer-events: none;
}

.collab-poster:hover .poster-body {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(155, 126, 181, 0.15), inset 0 0 50px rgba(45, 27, 78, 0.25);
}

/* Poster Header */
.collab-poster .poster-header {
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 2px double rgba(155, 126, 181, 0.4);
}

.collab-poster .poster-title {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 1.6rem;
    color: var(--lavender);
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(155, 126, 181, 0.25);
}

.collab-poster .poster-subtitle {
    font-family: 'IM Fell English', serif;
    font-size: 0.7rem;
    color: rgba(155, 126, 181, 0.65);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Image Frame */
.collab-poster .poster-image-frame {
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
    position: relative;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(155, 126, 181, 0.25) 0%, rgba(74, 56, 102, 0.35) 100%);
    border: 2px solid rgba(155, 126, 181, 0.35);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(155, 126, 181, 0.08);
}

.collab-poster .poster-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.collab-poster .poster-image-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, #4a3866 0%, #3d2a4a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.collab-poster .poster-image-placeholder i {
    font-size: 2.8rem;
    color: var(--lavender);
    opacity: 0.5;
}

/* Name and Handle */
.collab-poster .poster-name {
    font-family: 'Carattere', cursive;
    font-size: 2rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 3px;
}

.collab-poster .poster-handle {
    font-family: 'IM Fell English', serif;
    font-size: 0.85rem;
    color: rgba(155, 126, 181, 0.65);
    text-align: center;
    font-style: italic;
    margin-bottom: 14px;
}

/* Tagline */
.collab-poster .poster-tagline {
    font-family: 'Crimson Text', serif;
    font-size: 0.95rem;
    color: rgba(200, 162, 208, 0.88);
    text-align: center;
    line-height: 1.55;
    padding: 12px;
    margin-bottom: 16px;
    font-style: italic;
    border-top: 1px solid rgba(155, 126, 181, 0.25);
    border-bottom: 1px solid rgba(155, 126, 181, 0.25);
    /* Truncate long taglines */
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Social Icons */
.collab-poster .poster-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 16px;
    margin-top: auto;
}

.collab-poster .poster-socials a {
    color: var(--lavender);
    font-size: 1.15rem;
    transition: color 0.3s, transform 0.3s, text-shadow 0.3s;
}

.collab-poster .poster-socials a:hover {
    color: var(--soft-lavender);
    transform: scale(1.2);
    text-shadow: 0 0 12px var(--lavender);
}

/* CTA Button */
.collab-poster .poster-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: var(--lavender);
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 10px 18px;
    border: 1px solid rgba(155, 126, 181, 0.35);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.collab-poster .poster-cta:hover {
    background: rgba(155, 126, 181, 0.18);
    border-color: var(--lavender);
}

/* ==================== SIDEBAR COLLABS - COMPACT VERSION ==================== */
.sidebar .collabs-section {
    margin-bottom: var(--spacing-md);
}

.sidebar .collabs-section .section-title {
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
    padding-bottom: 6px;
}

.sidebar .collabs-grid {
    justify-content: center;
    gap: 10px;
    padding: 5px 0;
}

.sidebar .collab-stack {
    width: 130px;
    height: 195px;
    cursor: pointer;
}

.sidebar .collab-poster {
    width: 130px;
}

.sidebar .collab-poster .poster-body {
    padding: 12px 8px 10px;
    height: 175px;
}

/* Hide verbose header in sidebar - keep it minimal */
.sidebar .collab-poster .poster-header {
    display: none;
}

.sidebar .collab-poster .poster-image-frame {
    width: 55px;
    height: 55px;
    margin-bottom: 8px;
    margin-top: 4px;
    border-width: 2px;
}

.sidebar .collab-poster .poster-name {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.sidebar .collab-poster .poster-handle {
    font-size: 0.55rem;
    margin-bottom: 6px;
}

/* Hide tagline in compact view - too cramped */
.sidebar .collab-poster .poster-tagline {
    display: none;
}

.sidebar .collab-poster .poster-socials {
    gap: 10px;
    margin-bottom: 8px;
}

.sidebar .collab-poster .poster-socials span {
    font-size: 0.8rem;
}

.sidebar .collab-poster .poster-cta {
    font-size: 0.45rem;
    letter-spacing: 1.5px;
    padding: 5px 10px;
}

.sidebar .collab-poster .nail {
    width: 6px;
    height: 6px;
}

.sidebar .collab-poster .nail.top-left { top: 5px; left: 5px; }
.sidebar .collab-poster .nail.top-center { top: 3px; }
.sidebar .collab-poster .nail.top-right { top: 5px; right: 5px; }

/* Only show top 2 cards per stack in sidebar */
.sidebar .collab-poster:nth-child(n+3) {
    display: none;
}

/* Reduce offset for stacked cards in sidebar */
.sidebar .collab-poster:nth-child(2) {
    transform: rotate(-2deg) translateX(-3px) translateY(4px);
}

/* Hover lift effect for sidebar stacks */
.sidebar .collab-stack:hover .collab-poster:first-child {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Better CTA button styling in sidebar */
.sidebar .collab-poster .poster-cta {
    background: rgba(155, 126, 181, 0.1);
    border: 1px solid rgba(155, 126, 181, 0.3);
    border-radius: 3px;
}

.sidebar .collab-poster .poster-cta:hover {
    background: rgba(155, 126, 181, 0.2);
}

/* On mobile, reset sidebar-specific styles so standard mobile styles apply */
@media (max-width: 768px) {
    /* Reset sidebar compact overrides - use standard mobile sizes */
    .sidebar .collab-stack {
        width: 220px;
        height: 400px;
    }

    .sidebar .collab-poster {
        width: 220px;
    }

    .sidebar .collab-poster .poster-body {
        padding: 40px 25px 25px;
        height: 360px;
    }

    .sidebar .collab-poster .poster-header {
        display: block; /* Show header on mobile */
        padding-bottom: 12px;
        margin-bottom: 18px;
    }

    .sidebar .collab-poster .poster-title {
        font-size: 1.4rem;
        letter-spacing: 2px;
    }

    .sidebar .collab-poster .poster-subtitle {
        font-size: 0.7rem;
        letter-spacing: 3px;
    }

    .sidebar .collab-poster .poster-image-frame {
        width: 90px;
        height: 90px;
        margin-bottom: 18px;
        margin-top: 0;
    }

    .sidebar .collab-poster .poster-name {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }

    .sidebar .collab-poster .poster-handle {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }

    .sidebar .collab-poster .poster-tagline {
        display: block; /* Show tagline on mobile */
        font-size: 0.95rem;
        padding: 12px 15px;
        margin-bottom: 18px;
    }

    .sidebar .collab-poster .poster-socials {
        gap: 18px;
        margin-bottom: 18px;
    }

    .sidebar .collab-poster .poster-socials span {
        font-size: 1.15rem;
    }

    .sidebar .collab-poster .poster-cta {
        font-size: 0.6rem;
        letter-spacing: 3px;
        padding: 10px 18px;
    }

    .sidebar .collab-poster .nail {
        width: 12px;
        height: 12px;
    }

    .sidebar .collab-poster .nail.top-left { top: 12px; left: 12px; }
    .sidebar .collab-poster .nail.top-center { top: 8px; }
    .sidebar .collab-poster .nail.top-right { top: 12px; right: 12px; }
}

@media (max-width: 480px) {
    .sidebar .collab-stack {
        width: 155px;
        height: 340px;
    }

    .sidebar .collab-poster {
        width: 155px;
    }

    .sidebar .collab-poster .poster-body {
        padding: 28px 10px 12px;
        height: 300px;
    }

    .sidebar .collab-poster .poster-header {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .sidebar .collab-poster .poster-title {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .sidebar .collab-poster .poster-subtitle {
        font-size: 0.45rem;
        letter-spacing: 2px;
    }

    .sidebar .collab-poster .poster-image-frame {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }

    .sidebar .collab-poster .poster-name {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }

    .sidebar .collab-poster .poster-handle {
        font-size: 0.65rem;
        margin-bottom: 6px;
    }

    .sidebar .collab-poster .poster-tagline {
        font-size: 0.75rem;
        padding: 8px;
        margin-bottom: 10px;
    }

    .sidebar .collab-poster .poster-socials {
        gap: 12px;
        margin-bottom: 10px;
    }

    .sidebar .collab-poster .poster-socials span {
        font-size: 0.95rem;
    }

    .sidebar .collab-poster .poster-cta {
        font-size: 0.5rem;
        letter-spacing: 2px;
        padding: 7px 10px;
    }

    .sidebar .collab-poster .nail {
        width: 8px;
        height: 8px;
    }

    .sidebar .collab-poster .nail.top-left { top: 8px; left: 8px; }
    .sidebar .collab-poster .nail.top-center { top: 5px; }
    .sidebar .collab-poster .nail.top-right { top: 8px; right: 8px; }
}

/* ==================== COLLAB MODAL ==================== */

.collab-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 20px;
}

.collab-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Scroll Container */
.collab-modal-scroll {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s ease;
}

.collab-modal-overlay.active .collab-modal-scroll {
    transform: translateY(0) scale(1);
}

/* Scroll Top Bar with Nails */
.collab-modal-scroll .scroll-top {
    height: 22px;
    background: linear-gradient(180deg, #4a3255 0%, #3d2a4a 100%);
    border-radius: 3px 3px 0 0;
    position: relative;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

.collab-modal-scroll .scroll-nail {
    position: absolute;
    top: 5px;
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #6b4a3a 0%, #3a2218 70%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.collab-modal-scroll .scroll-nail.left { left: 18px; }
.collab-modal-scroll .scroll-nail.center { left: 50%; transform: translateX(-50%) rotate(45deg); }
.collab-modal-scroll .scroll-nail.right { right: 18px; }

/* Scroll Body */
.collab-modal-scroll .scroll-body {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(90, 50, 100, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(74, 53, 88, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #3d2a4a 0%, #352445 40%, #2d1d3d 100%);
    padding: 35px 30px;
    border-left: 1px solid rgba(155, 126, 181, 0.2);
    border-right: 1px solid rgba(155, 126, 181, 0.2);
    border-bottom: 1px solid rgba(155, 126, 181, 0.2);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
    position: relative;
}

.collab-modal-scroll .scroll-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

/* Close Button */
.collab-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--lavender);
    cursor: pointer;
    transition: transform 0.3s, color 0.3s;
    z-index: 10;
}

.collab-modal-close:hover {
    color: var(--soft-lavender);
    transform: rotate(90deg);
}

/* Modal Portrait */
.collab-modal-portrait {
    width: 130px;
    height: 130px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #4a3866 0%, #3d2a4a 100%);
    border: 3px solid rgba(155, 126, 181, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.collab-modal-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collab-modal-portrait i {
    font-size: 3.5rem;
    color: var(--lavender);
    opacity: 0.45;
}

/* Modal Name/Handle */
.collab-modal-name {
    font-family: 'Carattere', cursive;
    font-size: 2.6rem;
    color: var(--soft-lavender);
    text-align: center;
    margin-bottom: 4px;
}

.collab-modal-handle {
    font-family: 'IM Fell English', serif;
    font-size: 1rem;
    color: rgba(155, 126, 181, 0.65);
    text-align: center;
    font-style: italic;
    margin-bottom: 22px;
}

/* Divider */
.collab-modal-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(155, 126, 181, 0.35), transparent);
    margin: 18px 0;
}

/* Section Title */
.collab-modal-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: var(--lavender);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

/* Bio */
.collab-modal-bio {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    color: rgba(200, 162, 208, 0.88);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 22px;
}

/* Tags */
.collab-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-bottom: 22px;
}

.collab-modal-tag {
    font-family: 'IM Fell English', serif;
    font-size: 0.82rem;
    color: var(--soft-lavender);
    padding: 4px 11px;
    border: 1px solid rgba(155, 126, 181, 0.28);
    background: rgba(74, 56, 102, 0.18);
}

/* Quote */
.collab-modal-quote {
    text-align: center;
    padding: 18px;
    margin-bottom: 22px;
    border-left: 2px solid rgba(155, 126, 181, 0.28);
    border-right: 2px solid rgba(155, 126, 181, 0.28);
}

.collab-modal-quote-text {
    font-family: 'IM Fell English', serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--soft-lavender);
    line-height: 1.45;
}

.collab-modal-quote-text::before { content: '"'; }
.collab-modal-quote-text::after { content: '"'; }

/* Social Links */
.collab-modal-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(155, 126, 181, 0.28);
}

.collab-modal-socials a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lavender);
    text-decoration: none;
    font-family: 'IM Fell English', serif;
    font-size: 0.88rem;
    transition: color 0.3s;
}

.collab-modal-socials a:hover {
    color: var(--soft-lavender);
}

/* ==================== COLLAB CAROUSEL ==================== */
.collab-carousel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 22, 40, 0.97);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.collab-carousel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.collab-carousel-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--lavender);
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s, transform 0.3s;
}

.collab-carousel-close:hover {
    color: var(--soft-lavender);
    transform: rotate(90deg);
}

.collab-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(74, 56, 102, 0.4);
    border: 1px solid rgba(155, 126, 181, 0.3);
    color: var(--lavender);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collab-carousel-nav:hover {
    background: rgba(155, 126, 181, 0.3);
    color: var(--soft-lavender);
}

.collab-carousel-nav.prev { left: 20px; }
.collab-carousel-nav.next { right: 20px; }

.collab-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collab-carousel-item {
    position: absolute;
    opacity: 0.15;
    filter: brightness(0.3) blur(2px);
    transform: scale(0.75) translateX(0);
    transition: all 0.4s ease;
    pointer-events: none;
}

.collab-carousel-item.active {
    opacity: 1;
    filter: none;
    transform: scale(1) translateX(0);
    pointer-events: auto;
    z-index: 5;
}

.collab-carousel-item.prev {
    opacity: 0.25;
    filter: brightness(0.4);
    transform: scale(0.8) translateX(-120%);
    z-index: 3;
}

.collab-carousel-item.next {
    opacity: 0.25;
    filter: brightness(0.4);
    transform: scale(0.8) translateX(120%);
    z-index: 3;
}

.collab-carousel-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.collab-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(155, 126, 181, 0.3);
    border: 1px solid rgba(155, 126, 181, 0.5);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.collab-dot:hover {
    background: rgba(155, 126, 181, 0.5);
}

.collab-dot.active {
    background: var(--lavender);
    transform: scale(1.2);
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .collabs-grid {
        gap: 20px;
        padding: 15px 10px;
    }

    .collab-stack {
        width: 220px;
        height: 400px;
    }

    .collab-poster {
        width: 220px;
    }

    .collab-poster .poster-body {
        height: 360px;
    }

    .collab-poster .poster-name {
        font-size: 1.6rem;
    }

    .collab-poster .poster-title {
        font-size: 1.4rem;
    }

    .collab-poster .poster-image-frame {
        width: 90px;
        height: 90px;
    }

    .collab-modal-scroll .scroll-body {
        padding: 28px 22px;
    }

    .collab-modal-name {
        font-size: 2.2rem;
    }

    /* Carousel nav on tablet */
    .collab-carousel-nav {
        width: 40px;
        height: 40px;
    }
    .collab-carousel-nav.prev { left: 10px; }
    .collab-carousel-nav.next { right: 10px; }
}

/* Mobile portrait: side by side compact stacks */
@media (max-width: 480px) {
    .collabs-grid {
        gap: 10px;
        padding: 10px 5px;
    }

    .collab-stack {
        width: 155px;
        height: 340px;
    }

    .collab-poster {
        width: 155px;
    }

    /* Only show 2 in each stack on mobile */
    .collab-poster:nth-child(n+3) {
        display: none;
    }

    .collab-poster .poster-body {
        padding: 28px 10px 12px;
        height: 300px;
    }

    .collab-poster .poster-header {
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .collab-poster .poster-title {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }

    .collab-poster .poster-subtitle {
        font-size: 0.45rem;
        letter-spacing: 2px;
    }

    .collab-poster .poster-image-frame {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }

    .collab-poster .poster-name {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }

    .collab-poster .poster-handle {
        font-size: 0.65rem;
        margin-bottom: 6px;
    }

    .collab-poster .poster-tagline {
        font-size: 0.75rem;
        padding: 8px;
        margin-bottom: 10px;
    }

    .collab-poster .poster-socials {
        gap: 12px;
        margin-bottom: 10px;
    }

    .collab-poster .poster-socials a {
        font-size: 0.95rem;
    }

    .collab-poster .poster-cta {
        font-size: 0.5rem;
        letter-spacing: 2px;
        padding: 7px 10px;
    }

    .collab-poster .nail {
        width: 8px;
        height: 8px;
    }

    .collab-poster .nail.top-left { top: 8px; left: 8px; }
    .collab-poster .nail.top-center { top: 5px; }
    .collab-poster .nail.top-right { top: 8px; right: 8px; }

    .collab-modal-scroll .scroll-body {
        padding: 22px 18px;
    }

    .collab-modal-portrait {
        width: 110px;
        height: 110px;
    }

    .collab-modal-name {
        font-size: 2rem;
    }

    /* Carousel mobile */
    .collab-carousel-nav {
        width: 36px;
        height: 36px;
    }
    .collab-carousel-nav.prev { left: 5px; }
    .collab-carousel-nav.next { right: 5px; }

    .collab-carousel-item.prev {
        transform: scale(0.7) translateX(-80%);
    }
    .collab-carousel-item.next {
        transform: scale(0.7) translateX(80%);
    }

    .collab-carousel-close {
        top: 10px;
        right: 15px;
        font-size: 1.6rem;
    }

    .collab-carousel-dots {
        bottom: 15px;
    }
}

/* ================================================
   PRODUCTS I LOVE - LOTUS CONSTELLATION SECTION
   Static lotus flower with 13 star positions
   ================================================ */

.constellation-section {
    margin-bottom: 1rem; /* Reduced: half distance to links */
    margin-top: 0.5rem; /* Reduced: quarter distance from collabs */
    position: relative;
}

.constellation-header {
    text-align: center;
    padding: 1.5rem 1rem 0.5rem;
}

.constellation-title {
    display: block;
    font-family: var(--font-mystical);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--soft-lavender);
    text-shadow: 0 0 40px rgba(200, 162, 208, 0.4);
    margin-bottom: 0.2rem;
}

.constellation-subtitle {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--lavender);
    opacity: 0.5;
    text-transform: uppercase;
}

/* Container fills available pane space */
.constellation-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* The lotus constellation field */
.constellation-field {
    position: relative;
    width: 100%;
    /* MUST match actual image aspect ratio (1492x1058 = 746:529) for star positioning */
    aspect-ratio: 746 / 529;
}

/* Lotus lines image - transparent PNG with white lines */
.lotus-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
    pointer-events: none;
}

/* ===== STAR STYLES ===== */
.lotus-star {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Large filled star */
.lotus-star.star-large::before {
    content: '\2726';
    font-size: 18px;
    color: #fff;
    text-shadow:
        0 0 6px #fff,
        0 0 12px rgba(181, 101, 255, 0.7),
        0 0 20px rgba(155, 126, 181, 0.4);
}

/* Medium star */
.lotus-star.star-medium::before {
    content: '\2726';
    font-size: 13px;
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 10px rgba(181, 101, 255, 0.6);
}

/* Outline star */
.lotus-star.star-outline::before {
    content: '\2727';
    font-size: 14px;
    color: #fff;
    text-shadow:
        0 0 4px #fff,
        0 0 8px rgba(181, 101, 255, 0.5);
}

/* Small dot */
.lotus-star.star-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 4px #fff,
        0 0 8px rgba(181, 101, 255, 0.5);
}

/* ===== EMPTY STARS (no product assigned) ===== */
/* Make empty stars dimmer/faded to indicate no product */
.lotus-star:not(.has-product).star-large::before,
.lotus-star:not(.has-product).star-medium::before,
.lotus-star:not(.has-product).star-outline::before {
    color: rgba(155, 126, 181, 0.4);
    text-shadow:
        0 0 3px rgba(155, 126, 181, 0.3),
        0 0 6px rgba(155, 126, 181, 0.2);
}

.lotus-star:not(.has-product).star-dot {
    background: rgba(155, 126, 181, 0.4);
    box-shadow:
        0 0 3px rgba(155, 126, 181, 0.3),
        0 0 6px rgba(155, 126, 181, 0.2);
}

/* Hover effects */
.lotus-star.has-product {
    cursor: pointer;
}

.lotus-star.has-product:hover {
    transform: translate(-50%, -50%) scale(1.5);
}

.lotus-star.star-large.has-product:hover::before,
.lotus-star.star-medium.has-product:hover::before,
.lotus-star.star-outline.has-product:hover::before {
    text-shadow:
        0 0 10px #fff,
        0 0 20px rgba(181, 101, 255, 1),
        0 0 30px rgba(181, 101, 255, 0.7);
}

.lotus-star.star-dot.has-product:hover {
    box-shadow:
        0 0 8px #fff,
        0 0 16px rgba(181, 101, 255, 0.8);
}

/* 13 Star Positions - Cropped lotus image (1492x1058) */
.lotus-star[data-position="1"]  { top: 78.7%; left: 50.0%; }
.lotus-star[data-position="2"]  { top: 83.8%; left: 35.4%; }
.lotus-star[data-position="3"]  { top: 59.3%; left: 28.6%; }
.lotus-star[data-position="4"]  { top: 47.6%; left: 36.9%; }
.lotus-star[data-position="5"]  { top: 51.0%; left: 62.7%; }
.lotus-star[data-position="6"]  { top: 59.6%; left: 70.9%; }
.lotus-star[data-position="7"]  { top: 83.9%; left: 67.0%; }
.lotus-star[data-position="8"]  { top: 71.2%; left: 10.9%; }
.lotus-star[data-position="9"]  { top: 40.4%; left: 5.0%; }
.lotus-star[data-position="10"] { top: 15.9%; left: 23.9%; }
.lotus-star[data-position="11"] { top: 16.5%; left: 76.8%; }
.lotus-star[data-position="12"] { top: 39.4%; left: 95.0%; }
.lotus-star[data-position="13"] { top: 71.5%; left: 89.3%; }

/* ===== ALWAYS-VISIBLE STAR NAME LABELS ===== */
.star-name-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(10, 22, 40, 0.9),
                 0 0 4px rgba(10, 22, 40, 1);
    transition: opacity 0.3s ease;
    opacity: 0.75;
}

.star-label-name {
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.03em;
    color: var(--lavender);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.star-label-price {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    color: var(--cannabis-green);
    white-space: nowrap;
    margin-top: 1px;
}

.lotus-star.has-product:hover .star-name-label {
    opacity: 1;
}

.lotus-star.has-product:hover .star-label-name {
    color: var(--soft-lavender);
}

/* Left side stars - label on right */
.lotus-star[data-position="2"] .star-name-label,
.lotus-star[data-position="3"] .star-name-label,
.lotus-star[data-position="4"] .star-name-label,
.lotus-star[data-position="8"] .star-name-label,
.lotus-star[data-position="9"] .star-name-label,
.lotus-star[data-position="10"] .star-name-label {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

/* Right side stars - label on left */
.lotus-star[data-position="5"] .star-name-label,
.lotus-star[data-position="6"] .star-name-label,
.lotus-star[data-position="7"] .star-name-label,
.lotus-star[data-position="11"] .star-name-label,
.lotus-star[data-position="12"] .star-name-label,
.lotus-star[data-position="13"] .star-name-label {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}

/* Center star - label below */
.lotus-star[data-position="1"] .star-name-label {
    left: 50%;
    transform: translateX(-50%);
    top: 14px;
    text-align: center;
}

/* Constellation name watermark */
.constellation-name {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mystical);
    font-size: 1.5rem;
    color: var(--lavender);
    opacity: 0.12;
    letter-spacing: 0.15em;
    white-space: nowrap;
    pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .constellation-container {
        padding: 0;
    }

    /* IMPORTANT: Keep the same aspect ratio as desktop for star positioning to work! */
    .constellation-field {
        /* aspect-ratio inherited from base style - do NOT override */
    }

    /* Make stars slightly smaller on mobile */
    .lotus-star.star-large::before {
        font-size: 14px;
    }

    .lotus-star.star-medium::before {
        font-size: 10px;
    }

    .lotus-star.star-outline::before {
        font-size: 11px;
    }

    .lotus-star.star-dot {
        width: 5px;
        height: 5px;
    }

    .constellation-name {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    /* Even smaller stars on very small screens */
    .lotus-star.star-large::before {
        font-size: 12px;
    }

    .lotus-star.star-medium::before {
        font-size: 9px;
    }

    .lotus-star.star-outline::before {
        font-size: 10px;
    }

    .lotus-star.star-dot {
        width: 4px;
        height: 4px;
    }

    .constellation-name {
        font-size: 0.8rem;
        bottom: 8px;
    }
}

/* ================================================
   PRODUCTS I LOVE - MODAL STYLES
   ================================================ */

.pil-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 8, 16, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 1000;
}

.pil-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.pil-product-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: linear-gradient(145deg,
        rgba(26, 26, 62, 0.95),
        rgba(10, 22, 40, 0.98)
    );
    border-radius: 12px;
    border: 1px solid rgba(181, 101, 255, 0.3);
    transform: scale(0.9);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 0 40px rgba(181, 101, 255, 0.15),
        0 25px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    max-height: 90vh;
    overflow-y: auto;
}

.pil-modal-overlay.active .pil-product-modal {
    transform: scale(1);
}

.pil-glow-bar {
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--accent-purple),
        transparent
    );
    border-radius: 2px;
    box-shadow: 0 0 20px var(--accent-purple);
}

.pil-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(45, 27, 78, 0.5);
    border: 1px solid rgba(155, 126, 181, 0.3);
    border-radius: 8px;
    color: var(--lavender);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.pil-modal-close:hover {
    background: rgba(155, 126, 181, 0.2);
    border-color: var(--lavender);
}

.pil-modal-content {
    padding: 2rem;
}

.pil-product-category {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: rgba(181, 101, 255, 0.15);
    border: 1px solid rgba(181, 101, 255, 0.3);
    border-radius: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: var(--accent-purple);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.pil-product-name {
    font-family: var(--font-elegant);
    font-size: 1.5rem;
    color: var(--star-white, #f0f4ff);
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.pil-product-tagline {
    font-family: var(--font-mystical);
    font-size: 1.2rem;
    color: var(--lavender);
    margin-bottom: 1.2rem;
}

/* Image gallery */
.pil-product-gallery {
    margin-bottom: 1.2rem;
}

.pil-gallery-main {
    width: 100%;
    height: 200px;
    background: linear-gradient(145deg,
        rgba(45, 27, 78, 0.4),
        rgba(26, 26, 62, 0.6)
    );
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.pil-gallery-main img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pil-gallery-placeholder {
    font-size: 4rem;
    color: var(--lavender);
    opacity: 0.5;
}

.pil-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
}

.pil-thumb {
    width: 60px;
    height: 60px;
    background: rgba(45, 27, 78, 0.4);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pil-thumb:hover,
.pil-thumb.active {
    border-color: var(--accent-purple);
}

.pil-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.pil-thumb-placeholder {
    font-size: 1.5rem;
    color: var(--lavender);
    opacity: 0.4;
}

.pil-thumb-empty {
    border: 2px dashed rgba(155, 126, 181, 0.2);
    background: transparent;
}

.pil-product-description {
    font-family: 'IM Fell English', serif;
    font-size: 0.9rem;
    color: var(--soft-lavender);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.pil-specs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pil-spec-pill {
    padding: 0.4rem 0.8rem;
    background: rgba(45, 27, 78, 0.5);
    border: 1px solid rgba(155, 126, 181, 0.2);
    border-radius: 6px;
    font-size: 0.7rem;
}

.pil-spec-label {
    color: var(--lavender);
    opacity: 0.7;
}

.pil-spec-value {
    color: var(--star-white, #f0f4ff);
    margin-left: 0.3rem;
}

.pil-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(155, 126, 181, 0.3),
        transparent
    );
    margin-bottom: 1.5rem;
}

.pil-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pil-product-price {
    font-family: var(--font-elegant);
    font-size: 1.6rem;
    color: var(--cannabis-green);
}

.pil-view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, var(--accent-purple), var(--witchy-purple));
    border: none;
    border-radius: 8px;
    color: var(--star-white, #f0f4ff);
    font-family: var(--font-elegant);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pil-view-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(181, 101, 255, 0.3);
}

.pil-link-arrow {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.pil-view-link:hover .pil-link-arrow {
    transform: translateX(3px);
}

/* Lotus Constellation Responsive - keep the lotus shape on smaller screens */
/* The new constellation CSS already has mobile styles at max-width: 768px */

@media (max-width: 460px) {
    .pil-modal-content {
        padding: 1.5rem;
    }

    .pil-product-name {
        font-size: 1.3rem;
    }

    .pil-gallery-main {
        height: 160px;
    }

    .pil-modal-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .pil-product-price {
        text-align: center;
    }

    .pil-view-link {
        justify-content: center;
    }
}

/* ===== CAROUSEL TRACK LAYOUT ===== */
.pil-carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px;
    padding: 0 1rem;
}

/* Close button at top */
.pil-modal-close-top {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: rgba(45, 27, 78, 0.8);
    border: 1px solid rgba(155, 126, 181, 0.4);
    border-radius: 50%;
    color: var(--lavender);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pil-modal-close-top:hover {
    background: rgba(155, 126, 181, 0.3);
    color: #fff;
}

/* All carousel cards - uniform height */
.pil-carousel-track .pil-product-modal {
    flex-shrink: 0;
    height: 650px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pil-carousel-track .pil-modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Truncate description to fit */
.pil-carousel-track .pil-product-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

/* Specs row shouldn't grow */
.pil-carousel-track .pil-specs-row {
    flex-shrink: 0;
    max-height: 60px;
    overflow: hidden;
}

/* Gallery takes remaining space */
.pil-carousel-track .pil-product-gallery {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pil-carousel-track .pil-gallery-main {
    flex: 1;
    min-height: 120px;
}

/* Ensure footer stays visible */
.pil-carousel-track .pil-modal-footer {
    margin-top: auto;
    padding-top: 1rem;
}

/* Adjacent cards (prev/next) - faded and smaller */
.pil-card-prev,
.pil-card-next {
    width: 280px;
    opacity: 0.35;
    transform: scale(0.9);
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pil-card-prev:hover,
.pil-card-next:hover {
    opacity: 0.55;
    transform: scale(0.92);
}

.pil-card-prev .pil-modal-content,
.pil-card-next .pil-modal-content {
    padding: 1.2rem;
}

.pil-card-prev .pil-product-category,
.pil-card-next .pil-product-category {
    font-size: 0.5rem;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.5rem;
}

.pil-card-prev .pil-product-name,
.pil-card-next .pil-product-name {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pil-card-prev .pil-gallery-main,
.pil-card-next .pil-gallery-main {
    flex: 1;
    height: auto;
    min-height: 280px;
    margin-bottom: 0.8rem;
}

.pil-card-prev .pil-product-price,
.pil-card-next .pil-product-price {
    font-size: 1.1rem;
    margin-top: auto;
}

/* Current card (center) - full size */
.pil-card-current {
    width: 420px;
    z-index: 5;
}

/* Animation for all three cards */
.pil-card-prev,
.pil-card-current,
.pil-card-next {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sliding animations */
.pil-carousel-track.sliding .pil-card-prev {
    animation: cardSlidePrev 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pil-carousel-track.sliding .pil-card-current {
    animation: cardSlideCurrent 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pil-carousel-track.sliding .pil-card-next {
    animation: cardSlideNext 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardSlideCurrent {
    0% {
        opacity: 0.35;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cardSlidePrev {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(-30px);
    }
    100% {
        opacity: 0.35;
        transform: scale(0.9) translateX(0);
    }
}

@keyframes cardSlideNext {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(30px);
    }
    100% {
        opacity: 0.35;
        transform: scale(0.9) translateX(0);
    }
}

.pil-carousel-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.pil-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(155, 126, 181, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.pil-carousel-dot:hover {
    background: rgba(155, 126, 181, 0.7);
}

.pil-carousel-dot.active {
    background: var(--accent-purple);
    box-shadow: 0 0 8px var(--accent-purple);
}

/* Mobile carousel adjustments */
@media (max-width: 1024px) {
    /* Hide adjacent cards on tablet and below */
    .pil-card-prev,
    .pil-card-next {
        display: none;
    }

    .pil-carousel-track {
        padding: 0 2rem;
    }

    .pil-carousel-track .pil-product-modal {
        height: auto;
        max-height: 80vh;
    }

    .pil-card-current {
        width: 100%;
        max-width: 420px;
    }

    /* Still animate the center card on mobile */
    .pil-carousel-track.sliding .pil-card-current {
        animation: cardSlideCurrent 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@media (max-width: 768px) {
    .pil-carousel-dots {
        bottom: 1rem;
    }

    .pil-modal-close-top {
        top: 0.5rem;
        right: 0.5rem;
        width: 36px;
        height: 36px;
    }

    /* Hide star name labels on mobile - too crowded */
    .star-name-label {
        display: none;
    }
}

/* ==================== SIDEBAR GRIMOIRE (CLOSED BOOK) ==================== */

/* Sidebar grimoire panel - always shows closed book */
.sidebar-grimoire {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    cursor: pointer;
}

/* Always show closed book in sidebar (both desktop and mobile) */
.sidebar-grimoire .grimoire-closed {
    display: block;
}

/* Wrapper for proper sizing in sidebar - fills width */
.sidebar-grimoire .grimoire-closed-wrapper {
    width: 99%;
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    position: relative;
}

/* Enhanced magical aura for sidebar - fills surrounding space */
.sidebar-grimoire .grimoire-closed-aura {
    inset: -30px;
    background: radial-gradient(ellipse at center,
        rgba(181, 101, 255, 0.25) 0%,
        rgba(155, 126, 181, 0.15) 35%,
        rgba(74, 56, 102, 0.08) 60%,
        transparent 80%
    );
    border-radius: 50%;
    opacity: 0.8;
}

/* Book cover scales to wrapper */
.sidebar-grimoire .grimoire-closed-cover {
    position: absolute;
    inset: 0;
}

/* Title sizing for sidebar - scales with larger book */
.sidebar-grimoire .grimoire-closed-title h3 {
    font-size: 1.5rem;
}

.sidebar-grimoire .grimoire-closed-title span {
    font-size: 0.8rem;
}

/* Pentacle size for sidebar */
.sidebar-grimoire .grimoire-pentacle {
    width: 100px;
    height: 100px;
}

.sidebar-grimoire .grimoire-pentacle-star {
    font-size: 2.2rem;
}

/* Hover effect for sidebar grimoire */
.sidebar-grimoire:hover .grimoire-closed-wrapper {
    transform: scale(1.03);
}

.sidebar-grimoire:hover .grimoire-closed-aura {
    opacity: 1;
    transform: scale(1.15);
}

/* Main content collabs - larger grid display, stretches to fill remaining space */
.main-content-collabs {
    margin-top: 0.5rem; /* Reduced: quarter distance to products */
    margin-bottom: var(--spacing-md);
    flex: 1; /* Grow to fill remaining vertical space in main-content */
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.main-content-collabs .crystal-portraits-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.main-content-collabs .crystal-frame {
    width: 100px;
    height: 100px;
}

.main-content-collabs .crystal-name {
    font-size: 1rem;
}

.main-content-collabs .crystal-handle {
    font-size: 0.8rem;
}

/* Responsive: Main content collabs */
@media (max-width: 1024px) {
    .main-content-collabs .crystal-portraits-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .sidebar-grimoire .grimoire-closed-wrapper {
        max-width: 320px;
        margin: 0 auto;
    }

    .main-content-collabs .crystal-portraits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .main-content-collabs .crystal-frame {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .sidebar-grimoire .grimoire-closed-wrapper {
        max-width: 220px;
    }

    .sidebar-grimoire .grimoire-pentacle {
        width: 65px;
        height: 65px;
    }

    .sidebar-grimoire .grimoire-pentacle-star {
        font-size: 1.5rem;
    }

    .sidebar-grimoire .grimoire-closed-title h3 {
        font-size: 1.1rem;
    }
}