/* ===== BASE STYLES ===== */
        body {
            background: var(--primary-100);
            margin: 0;
            overflow-x: hidden;
            width: 100%;
            box-sizing: border-box;
            padding-top: 80px; /* Account for fixed nav */
        }
        
        * {
            box-sizing: border-box;
        }

        /* ===== HERO SECTION ===== */
        .collection-hero {
            background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
            color: white;
            padding: 4rem 0;
            margin-bottom: 3rem;
            position: relative;
            overflow: hidden;
        }

        /* Visually hide breadcrumb and category subtitle (keep in DOM for data hooks) */
        .collection-breadcrumb,
        #collection-category { display: none !important; }


        .collection-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('/Background-Image/Be Thou My Vision [Score Background].png') center/cover;
            opacity: 0.05; /* softer overall image */
            filter: blur(3px) brightness(1.06) saturate(0.9); /* deeper blur, slightly brighter color */
            z-index: 0;
        }

        /* Soft edge vignette to calm the background near edges */
        .collection-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(140% 160% at 50% 42%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.10) 36%, rgba(255,255,255,0.02) 52%, rgba(15,23,42,0.40) 78%, rgba(15,23,42,0.72) 100%),
                linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(15,23,42,0.14) 24%, rgba(15,23,42,0.14) 76%, rgba(15,23,42,0.34) 100%);
            z-index: 0;
        }

        .collection-hero-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
        }

        .collection-breadcrumb {
            font-size: 0.9rem;
            margin-bottom: 1rem;
            opacity: 0.9;
        }

        .collection-breadcrumb a {
            color: white;
            text-decoration: none;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .collection-breadcrumb a:hover {
            opacity: 1;
        }

        .collection-title {
            font-size: 3rem;
            font-weight: 700;
            margin: 0 0 1rem 0;
            line-height: 1.2;
        }

        .collection-subtitle {
            font-size: 1.25rem;
            opacity: 0.95;
            margin-bottom: 2rem;
            font-weight: 300;
        }

        .collection-meta-row {
            display: flex;
            gap: 3rem;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .collection-meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .collection-meta-icon {
            font-size: 1.2rem;
        }

        .collection-meta-label {
            font-weight: 300;
            opacity: 0.9;
        }

        .collection-meta-value {
            font-weight: 600;
            font-size: 1.1rem;
        }

        /* ===== BUY SECTION ===== */
        .collection-buy-section {
            display: flex;
            align-items: center;
            gap: 2rem;
            flex-wrap: nowrap;
            justify-content: space-between; /* push savings to the other side */
            width: 100%;
        }

        .collection-buy-btn {
            background: white;
            color: var(--primary-700);
            border: none;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            white-space: nowrap; /* keep label on one line */
        }

        .collection-buy-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
            background: var(--gray-50);
        }

        .collection-price {
            font-size: 1.8rem;
            font-weight: 700;
        }

        .collection-savings {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            padding: 0;
            background: transparent;
            border-radius: 0;
            font-size: 1rem;
            color: rgba(255,255,255,.95);
            text-align: right; /* align text right when positioned at end */
            align-items: flex-end;
            margin-left: auto; /* keep to the far right on wide screens */
        }

        .collection-savings .savings-line {
            font-weight: 500; /* one step lighter */
            font-size: 1.15rem; /* make saving text bigger */
        }
        .collection-savings .savings-line strong { font-weight: 700; }

        .collection-savings .individual-line {
            font-weight: 500;
            opacity: .95;
        }

        .collection-savings strong { color: #fff; }

        /* Description placed under buy section in hero */
        .collection-hero-description {
            margin-top: 1rem;
            color: rgba(255,255,255,.95);
            font-size: 1.05rem;
            line-height: 1.65;
            max-width: 900px;
        }
        .collection-hero-description p { margin: .15rem 0; }

        /* ===== MAIN CONTENT ===== */
        .collection-main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* ===== DESCRIPTION SECTION ===== */
        .collection-description-section {
            display: block;
            margin: 1.5rem 0 2rem;
        }

        .collection-description-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .collection-description {
            font-size: 1.1rem;
            color: var(--gray-700);
            max-width: 1100px;
            margin: 0 auto;
        }

        /* ===== COMPOSITIONS SECTION ===== */
        .collection-compositions-section {
            margin-bottom: 2rem; /* tighten section spacing */
        }

        .collection-compositions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .collection-compositions-title {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--gray-800);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .compositions-count {
            background: var(--primary-100);
            color: var(--primary-700);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .compositions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: .85rem; /* tighter gallery gutter */
            margin-bottom: 1.25rem; /* reduce trailing space */
        }

        /* Carousel navigation hidden on desktop */
        .carousel-nav { display: none; }

        .composition-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--gray-200); /* crisper edges */
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
            cursor: pointer;
            position: relative;
            border: 3px solid white;
        }

        .composition-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
            border-color: var(--gray-300);
        }

        .composition-card-image {
            width: 100%;
            height: 168px; /* tighter cover height */
            object-fit: cover;
            background: var(--gray-200);
        }

        .composition-card-body {
            padding: .9rem; /* tighter internal padding */
        }

        .composition-card-title {
            font-size: 1.06rem;
            font-weight: 700;
            color: var(--gray-800);
            margin-bottom: .35rem; /* tighten spacing under title */
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .composition-card-instrument {
            font-size: .9rem;
            color: var(--gray-600);
            margin-bottom: .6rem; /* less vertical space */
        }

        .composition-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: .65rem; /* crisper separation */
            border-top: 1px solid var(--gray-100);
        }

        .composition-card-price {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary-600);
        }

        .composition-card-meta {
            display: flex;
            gap: .75rem;
            font-size: .82rem; /* slightly smaller */
            color: var(--gray-500);
        }

        /* ===== RELATED COLLECTIONS SECTION ===== */
        .related-collections-section {
            background: var(--primary-400);
            padding: .75rem 0 3rem 0;
            border-top: 3px solid var(--gray-300);
        }

        /* Score videos grid inherits compositions grid sizing */
        .collection-score-videos-section { margin-top: 2rem; }

        .related-collections-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .related-collections-title {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--gray-800);
            margin-bottom: 2rem;
            text-align: center;
        }

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

        .related-collection-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .related-collection-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .related-collection-header {
            display: flex;
            align-items: start;
            gap: 1rem;
        }

        .related-collection-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-100);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .related-collection-info {
            flex: 1;
        }

        .related-collection-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 0.25rem;
        }

        .related-collection-category {
            font-size: 0.85rem;
            color: var(--primary-600);
            font-weight: 500;
        }

        .related-collection-stats {
            display: flex;
            justify-content: space-between;
            padding-top: 1rem;
            border-top: 1px solid var(--gray-100);
        }

        .related-collection-stat {
            text-align: center;
        }

        .related-collection-stat-value {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gray-800);
            display: block;
        }

        .related-collection-stat-label {
            font-size: 0.75rem;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Remove borders from placeholder containers in composition cards */
        .composition-card-image-container,
        .composition-card-image-container .silo-placeholder,
        .composition-card-image-container .feature-media,
        .collection-comp-placeholder-target,
        .collection-comp-placeholder-target .silo-placeholder,
        .collection-comp-placeholder-target .feature-media {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

        /* ===== LOADING OVERLAY ===== */
        #collection-loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            backdrop-filter: blur(4px);
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--primary-200);
            border-top: 3px solid var(--primary-600);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            .collection-title {
                font-size: 2rem;
            }

            .collection-hero {
                padding: 2rem 0;
            }

            .collection-meta-row {
                gap: 1.5rem;
            }

            /* Smaller section title and count on mobile */
            .collection-compositions-title { font-size: 1.12rem; letter-spacing: -.01em; }
            .compositions-count { font-size: .8rem; padding: .2rem .6rem; }

            /* Mobile carousel for compositions */
            .collection-compositions-section { position: relative; }
            /* Allow wrapping on mobile so savings stack under the button */
            .collection-buy-section { flex-wrap: wrap; }
            .carousel-nav { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .25rem 0 1rem; }
            .carousel-btn {
                appearance: none;
                border: 1px solid var(--gray-300);
                background: #ffffff;
                color: var(--gray-800);
                padding: .45rem .8rem;
                border-radius: 999px;
                font-weight: 700;
                cursor: pointer;
                box-shadow: 0 6px 16px rgba(2,6,23,.10);
                transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
            }
            .carousel-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,6,23,.14); }
            .carousel-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

            .compositions-grid {
                display: flex;
                overflow-x: auto;
                gap: .85rem;
                padding: .25rem .25rem 1rem .25rem;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
            }
            .compositions-grid::-webkit-scrollbar { display: none; }
            .composition-card { flex: 0 0 82%; scroll-snap-align: center; }

            .related-collections-grid {
                grid-template-columns: 1fr;
            }

            .collection-description-section {
                padding: 1.5rem;
            }
        }

        /* ===== DARK MODE SUPPORT ===== */
        [data-theme="dark"] body {
            background: var(--gray-900);
        }

        /* ===== CONDENSED MODE (slug-gated via JS) ===== */
        /* Applies only when <html> has .collection-condensed set in collections.js */
        .collection-condensed .collection-hero { padding: 2.25rem 0; margin-bottom: 1.5rem; }
        .collection-condensed .collection-title { font-size: 2.2rem; margin-bottom: .5rem; }
        .collection-condensed .collection-meta-row { gap: 1.25rem; margin-bottom: 1rem; }
        .collection-condensed .collection-buy-section { gap: 1rem; }
        .collection-condensed .collection-hero-description { margin-top: .5rem; font-size: 1rem; }
        .collection-condensed .collection-compositions-section { margin-bottom: 1.25rem; }
        .collection-condensed .compositions-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .65rem; }
        /* Condensed media: normalize both <img> and placeholder container */
        .collection-condensed .composition-card-image { height: 148px; width: 100%; object-fit: cover; display: block; }
        .collection-condensed .composition-card-image-container { width: 100%; aspect-ratio: 8.5/11; height: 148px; position: relative; overflow: hidden; }
        .collection-condensed .collection-comp-placeholder-target,
        .collection-condensed .collection-comp-placeholder-target .feature-media,
        .collection-condensed .collection-comp-placeholder-target .silo-placeholder { width: 100% !important; height: 100% !important; }
        .collection-condensed .composition-card-body { padding: .7rem; }
        .collection-condensed .composition-card-title { font-size: 1rem; margin-bottom: .25rem; }
        .collection-condensed .composition-card-instrument { font-size: .85rem; margin-bottom: .45rem; }
        .collection-condensed .composition-card-footer { padding-top: .5rem; }
        .collection-condensed .composition-card-price { font-size: 1rem; }
        .collection-condensed .composition-card-meta { gap: .5rem; font-size: .78rem; }

        [data-theme="dark"] .collection-description-section,
        [data-theme="dark"] .composition-card,
        [data-theme="dark"] .related-collection-card {
            background: var(--gray-800);
        }

        [data-theme="dark"] .collection-title,
        [data-theme="dark"] .collection-compositions-title,
        [data-theme="dark"] .collection-description-title,
        [data-theme="dark"] .composition-card-title,
        [data-theme="dark"] .related-collection-title {
            color: var(--gray-100);
        }

        [data-theme="dark"] .collection-description,
        [data-theme="dark"] .composition-card-instrument {
            color: var(--gray-300);
        }

        [data-theme="dark"] .composition-card:hover,
        [data-theme="dark"] .related-collection-card:hover {
            background: var(--gray-700);
        }
        /* ===== SECTION REVEAL (slide-fade-up) ===== */
        [data-reveal] {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 360ms cubic-bezier(.2,.65,.2,1), transform 360ms cubic-bezier(.2,.65,.2,1);
            will-change: opacity, transform;
        }
        [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) {
            [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
        }