/* ==========================================================================
       Base Styles (Desktop First / General)
       ========================================================================== */
        :root {
            --primary-yellow: #d8c32c;
            --secondary-yellow: #ffd700;
            --dark-gray: #2d2d2d;
            --black: #000000;
        }

        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: 'Marcellus', serif;
        }



        /* CRT Overlay Effect */
        .crt-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        .crt-overlay::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 2px, 3px 100%;
        }

        .crt-overlay::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.1);
            opacity: 0;
            animation: flicker 0.15s infinite;
        }
        /* Everything above video */
.page-slide > *:not(.background-video-container) {
    position: relative;
    z-index: 2;
}



        @keyframes flicker {
            0% {
                opacity: 0.02;
            }

            50% {
                opacity: 0.05;
            }

            100% {
                opacity: 0.02;
            }
        }

.collectiveLogo {
    position: absolute;
    z-index: 999;
    background-color: #000;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;width:100%;
}
.channel-navigation.for-mobile {
    display: none;
}
.channel-arrows button img {
    width: 25px;
}

    .main-container {
            position: relative;
            z-index: 3;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 60px;
            box-sizing: border-box;
            background-color: transparent;    justify-content: space-between;
        }

        .nav-menu {
            display: flex;
            flex-direction: column;
            width: 16rem;
            gap: 0;    width: 430px;z-index: 99999;margin-top: 25px;
        }

        .menu-item {
            background-color: var(--primary-yellow);
            color: var(--black);
            border: 2px solid var(--black);
            padding: 1rem 1.5rem;
            text-align: center;
            transition: all 0.2s ease;
            font-size: 32px;
            letter-spacing: 0.05em;
            cursor: pointer;    font-family: 'Marcellus';    list-style: none;
        }
.menu-item a{color: var(--black); text-decoration:none;}
        .menu-item:hover {
            background-color: var(--dark-gray);
            border-color: var(--secondary-yellow);
        }
        .menu-item:hover a {
            color: var(--secondary-yellow) !important;
        }


      .title-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
a.menu-item {
    text-decoration: none;
}
        .title-text {
            font-family: "Pinyon Script", cursive;
    font-size: 142px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #D4BF1E;
   padding: 150px 0px 0px 100px;
  -webkit-text-stroke: 1px #000000;
  paint-order: stroke fill;

    text-align: center;
    margin: 0;
        }
 h1.main-title{    margin-top: 0px;}       

div#vol-display {
    display: flex;
    align-items: center;
}
.audio-controls {
    cursor: pointer;
}
.vol-text {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-family: "Marcellus", serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 1;

    color: #d4bf1e;

    -webkit-text-stroke: 1px #000;
    text-shadow: none;

    cursor: pointer;
    user-select: none;
}

.vol-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    height: 30px;
}

.vol-bar {
    display: block;

    width: 3px;
    height: 23px;

    background: #d4bf1e;

    border: 1px solid #000;

    transform: skewY(-8deg);

    opacity: 1;
}

.vol-bar.active {
    opacity: 1;
}

.vol-bar.active{
    opacity:1;
}

        .mute-btn {
            background: none;
            border: none;
            color: var(--secondary-yellow);
            font-family: monospace;
            cursor: pointer;
            font-size: 1rem;
            text-shadow: 1px 1px 2px #000;
        }
/*=================================
BACKGROUND VIDEO
=================================*/

   .background-video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

   .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional dark/light overlay */
.background-video-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
    pointer-events: none;
}
.vol-indicator {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.page-slide .vol-text {
    font-size: 38px;
}
.page-slide .vol-bar {height: 30px;}
.vol-bar.active {
    opacity: 1;
}
video.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*=================================
MAIN SECTION
=================================*/

.home-slide{width:100%;height:100vh;display:grid;grid-template-rows:
    90px
    1fr
    80px;
 padding:30px;box-sizing:border-box;}
.site-slider{

    height:100vh;

    transition:transform .8s cubic-bezier(.76,0,.24,1);

    will-change:transform;

}

.page-slide{
  position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 60px; gap: 10px;
}

/*=================================
HEADER
=================================*/

.main-header{display:flex;justify-content:space-between;align-items:flex-start;}


/*=================================
CHANNEL
=================================*/

.channel-navigation{display:flex;border:2px solid #000;background:#d5c32a;}
.channel-btn{font-family: 'Marcellus'; width:350px;height:60px;background:none;border:none;font-size:39px;cursor:pointer}
.channel-arrows{width:70px;border-left:2px solid #000;}
.channel-arrows button{width:100%;height:50%;border:none;cursor:pointer;background:#d5c32a;display: flex;
    align-items: center;
    justify-content: center;}
.channel-arrows button:first-child{border-bottom:2px solid #000;}
.vol-bar{
    opacity:.25;
    transition:.25s;
}

.vol-bar.active{
    opacity:1;
}


/*=================================
CONTENT
=================================*/

.content-wrapper {
    display: grid;
    grid-template-columns: minmax(340px, 40%) 250px minmax(420px, 1fr);
    gap: 40px;

    width: 100%;
    height: calc(100vh - 80px);
    padding-top: 55px;
    margin: 60px auto 25px;

    align-items: center;

    overflow: hidden;
    box-sizing: border-box;
}

/*=================================
LEFT COLUMN
=================================*/

.left-column{display:flex;flex-direction:column;height:100%;    min-height: 0;}
/*.image-slider{flex:1;position:relative;overflow:hidden;border:1px solid #bdbdbd;}
 * 
.slide{ position:absolute;inset:0;opacity:0;transition:.5s;}
.slide.active{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;object-position: top center;}*/
.image-nav{display:flex;justify-content:center;align-items:center;gap:16px;position:relative;z-index:20;height:30px;}
.image-nav button{ width:21px;height:40px; border:none;background:transparent;color:#000;font-size:18px;cursor:pointer;transition:.3s;display:flex;justify-content:center;align-items:center;}
/*.image-nav button:hover{background:#e8d84d;}*/
.image-nav button img{    width: 100%;}

.image-nav.for-mobile {
    display: none;
}

.image-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* BOTH slides stay at exactly the same center */
.image-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Hide normal slides */
.image-slider .slide {
    position: absolute;
    top: 50%;
    left: 50%;

    opacity: 0;
    z-index: 1;

    transform: translate(-50%, -50%);
     transition:
        width 0.5s ease,
        height 0.5s ease,
        transform 0.5s ease,
        opacity 0.5s ease;
}

/* BACK IMAGE */
.image-slider .slide.behind {
    width: 78%;
    height: 95%;
    opacity: 1;
    z-index: 1;
    transform: translate(-50%, -50%);
}

/* ACTIVE IMAGE */
.image-slider .slide.active {
    width: 86%;
    height: 88%;
    opacity: 1;
    z-index: 2;
    transform: translate(-50%, -50%);
}


/* IMPORTANT */
.image-slider .slide img {
    width: 100%;
    height: 100%;

    display: block;

    /* NOT contain */
    object-fit: cover;object-position: center 20%;
}
.image-slider .slide:nth-child(1) img{object-position: center 51%;}

.image-slider .slide:nth-child(2) img,
.image-slider .slide:nth-child(4) img,
.image-slider .slide:nth-child(9) img,
.image-slider .slide:nth-child(10) img {
    object-position: center 12%;
}
/*=====================================
CENTER COLUMN
======================================*/

.center-column{display:flex;align-items:center;justify-content:center;}
.channel-description {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    transition: opacity 0.4s ease;
}
.center-column {
    position: relative;height: 100%;
}
.channel-description.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.channel-description p{font-size:17px;line-height:2;color:#333;}

/*=====================================
RIGHT COLUMN
======================================*/

.right-column{width:100%; min-width:0;    height: 100%;min-height: 0;}

/*=====================================
PRODUCT GALLERY
======================================*/

.product-gallery {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    position: absolute;
    top: 0;
    left: 0;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.4s ease;
}


/* ACTIVE SLIDE */

.product-gallery.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* RIGHT COLUMN */

.right-column {
    position: relative;
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}


/* COLUMNS */

.product-column {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    gap: 10px;

    min-width: 0;
    min-height: 0;
}


/* CARD */

.product-card {
    width: 100%;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    background: #e8e8e5;

    border: 1px solid #999;

    overflow: hidden;

    text-decoration: none;
    color: #222;

    flex: 1 1 0;
}


/* IMAGE */

.product-image {
    width: 100%;

    flex: 1 1 0;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}

.product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* INFO */

.product-info {
    flex: 0 0 34px;

    height: 34px;
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    border-top: 1px solid #999;

    font-size: 15px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}
/*=====================================
FOOTER
======================================*/
/*.main-footer{display:flex;justify-content:space-between; align-items:center;}*/

.main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    /* same horizontal spacing as header */
    padding: 0 40px 10px;
    box-sizing: border-box;


}

/* ==========================================
   FOOTER VOLUME CONTROL
========================================== */

.footer-right,
.audio-controls,
.vol-text {
    position: relative;
    z-index: 10000;
}

.footer-right,
.audio-controls,
.vol-text {
    pointer-events: auto;
}

.vol-text {
    cursor: pointer;
}


/* ==========================================
   BACKGROUND VIDEO
========================================== */

.background-video-container {
    pointer-events: none;
}

/*=====================================
BOTTOM CAPTION
======================================*/
.footer-left{width:52%}
.footer-left p{background:#D9D9D9;padding:16px 24px; font-size:22px;text-align:center;color: #000;margin: 0;display:none;}

/*=====================================
VOLUME
======================================*/
.footer-right{display:flex;align-items:center;justify-content: end;}
.volume-control{display:flex;align-items:center;gap:14px;}
.vol-label{ font-size:24px;letter-spacing:2px;}
.volume-bars{display:flex;gap:4px;}
.volume-bars .bar{ width:5px;height:18px;background:#c5b100;opacity:.3;}
.volume-bars .active{opacity:1;}
.mute-btn{border:none;background:none;cursor:pointer;font-size:14px;letter-spacing:1px;}

/*.fashion-video{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}

.fashion-video video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
.fashion-slide{
    display: grid;
    padding: 0 30px;
    height: 100vh;
     box-sizing: border-box; width: 100%;
}
.fashion-slide .main-header{

    position:absolute;

    top:0;

    left:30px; right: 30px;
    width:auto;

    padding:30px;

    z-index:20;

}
.fashion-slide .main-footer{

    position:absolute;

     left:30px; right: 30px;

    bottom:0;

    width:auto;

    padding:30px;

    z-index:20;

}
.fashion-video{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fashion-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}*/
/***slide3***/
.mixtape-content {
    min-height: calc(100vh - 200px);
    height: auto;

    margin: 100px auto 100px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: center;

    gap: 35px;

    box-sizing: border-box;

    overflow: visible;
}
/****Spotify grid***/
.playlist-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    width: 100%;
    max-width: 1450px;

    align-items: start;
    justify-content: center;

    gap: 50px;

    overflow: visible;
}
.playlist-grid,
.playlist-grid > *,
.playlist-grid img {
    overflow: visible !important;
}
.playlist-card{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.record{
    width:210px;
    height:210px;
    margin:auto;
    cursor:pointer;
}

.record img{
    width:100%;
    display:block;
    transition:.5s;
}

.spotify-btn{
    margin-top:18px;
    font-size:18px;
    cursor:pointer;
    font-family:Georgia,serif;
    color:#d7bc00;
    -webkit-text-stroke:.6px #000;
}

/* PLAYER */

.player-panel{
    width:260px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .45s ease,
        opacity .35s ease,
        margin-top .35s ease;

    margin-top:0;
}

.player-panel iframe{
    width:100%;
    height:352px;
    border:0;
    display:block;
}

.now-playing{

    margin-bottom:10px;
    font-size:14px;
    letter-spacing:1px;
}

/* OPEN */

.playlist-card.active .player-panel{
    max-height:420px;
    opacity:1;
    margin-top:12px;
}

/* RECORD SPIN */

.playlist-card.active .record img{

    animation:spinRecord 5s linear infinite;

}
.mixtape-description {
    max-width: 612px;
    text-align: center;
}

@keyframes spinRecord{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}
span.mobileArrow img {
    width: 20px;
}
span.mobileArrow{display: none;}

/* Play overlay on every record */
.record {
    position: relative;
    cursor: pointer;
}

/* Hide overlay on first 4 cards */
.playlist-card:nth-child(-n+4) .record::after,
.playlist-card:nth-child(-n+4) .record::before {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show overlay on hover for first 4 */
.playlist-card:nth-child(-n+4) .record:hover::after,
.playlist-card:nth-child(-n+4) .record:hover::before {
    opacity: 1;
}

/* 5th card - always visible */
.playlist-card:nth-child(5) .record::after,
.playlist-card:nth-child(5) .record::before {
    opacity: 1;
}

/* Play button */
.record::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80px;
    height: 80px;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    padding-left: 3px;
    box-sizing: border-box;

    z-index: 2;
}

/* Play preview text */
.record::before {
    content: "Play preview";
    position: absolute;
    top: calc(50% + 38px);
    left: 50%;
    transform: translateX(-50%);

    color: #fff;
    font-size: 13px;
    white-space: nowrap;

    z-index: 2;
}


 /* ==========================================================================
       Media Queries (Responsive Layouts)
 ========================================================================== */
@media (min-width: 1600px) {
    .mixtape-logo
 {
        width: 600px;
    }
	.content-wrapper{    margin: 50px auto 25px;}
	.main-footer{padding: 0 40px 22px;}
	.playlist-card.active .player-panel {
		max-height: 100%;}
}

/* ==========================
   FIXED GLOBAL HEADER
========================== */

@media (min-width: 768px) {
.collectiveLogo.for-mobile {
    display: block;
}
.collectiveLogo.for-desktope {
    display: none;
}
  .main-header {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    height: 120px;
    padding: 48px 50px 0;
    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    z-index: 9999;


  }

    .page-slide {
        box-sizing: border-box;
        padding-top: 80px;
    }

}

@media (max-width: 1570px) {
   .title-text{    font-size: 120px;    padding: 150px 0px 0px 142px;} 
   .nav-menu{    width: 350px;}
   a.menu-item{    font-size: 25px;}
   .menu-item{    padding: 1rem 0.5rem;  font-size: 24px;}
   .nav-menu{    width: 365px;}
   .page-slide{padding: 40px;}
.footer-left {
    width: 56%;
}
	.product-info{font-size:10px;}
.mixtape-logo {width: 280px;}

.record{    width: 190px;    height: 190px;}
.footer-left p{    font-size: 18px;}
.spotify-btn {
    margin-top: 5px;}
    .record{width: 160px;    height: 160px;}
    .channel-btn{font-size: 30px;height: 52px;}
    .page-slide .vol-text {
    font-size: 30px;
}
.page-slide .vol-bar {
    height: 22px;
}
 h1.main-title img {
    width: 85%;
}  
h1.main-title{    text-align: right;}
.product-info{    margin: 0px 10px;}
	.content-wrapper{gap: 24px;}	
}

@media (max-width: 1290px) {
    .nav-menu {
        width: 310px;
    }
        .menu-item {
        padding: 0.8rem 0.5rem;
    }
   .title-text {
        font-size: 90px;
    }
    .footer-left p{    padding: 16px 5px;
    font-size: 17px;}
    .page-slide .vol-text {
    font-size: 30px;}
    .channel-description p {
    font-size: 14px;}
.content-wrapper{gap: 20px;}

.footer-left p {
        font-size: 16px;
    }
	.product-info{font-size:9px;}	
}

@media (max-width:1050px){
    .content-wrapper{    grid-template-columns: minmax(340px, 40%) 170px minmax(429px, 1fr);}
    .footer-left p{font-size: 14px;}
	 .title-text {
        font-size: 70px;
    }
    .nav-menu {
        width: 265px;
    }
	.menu-item{font-size: 20px;}
}

@media (max-width: 980px) {
    a.menu-item {
        font-size: 18px;
    }
}
@media (max-width: 767px) {
	.channel-navigation.for-mobile {
        margin-bottom: 0 !important;
        bottom: 0 !important;
    }

    .mobile-channel-toggle {
        margin-top: 0 !important;
    }
.background-video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    /* iOS Safari rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}	
	
	
	.collectiveLogo{    position: absolute;    width: 100%;}
	.collectiveLogo img {
    width: 305px;
}
	.main-container{    height: 90vh;}
    /* Hide menu initially */
    .nav-menu {
        position: fixed;
        left: 10px;
        right: 10px;
          bottom: 44px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        width: 80%;
        z-index: 99999;
        margin: auto;
        display: none !important;
        flex-direction: column;gap: 0 !important;
    }

    /* Show menu when button is clicked */
    .nav-menu.mobile-open {
        display: flex !important;
    }

    .nav-menu .menu-item {
        width: 100%;
        min-height: 44px !important;
        height:44px !important;
        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box !important;

        background: #d4bf1e;
        border: 1px solid #000;
        border-bottom: 0;

        color: #000;
        text-decoration: none;
       margin-bottom: 0 !important;
        font-family: "Marcellus", serif;
        font-size: 16px;
		line-height: 44px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .nav-menu .menu-item:last-child {
        border-bottom: 1px solid #000;
    }
 .nav-menu ul {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Active channel */
    .nav-menu .menu-item.active {
        background: #222;
        color: #d4bf1e !important;        border: 1px solid #d4bf1e !important;
    }
  .nav-menu .menu-item a {
        line-height: 44px !important;
    }

    /* =================================
       BOTTOM TOGGLE BUTTON
       ================================= */

    .mobile-channel-toggle {
        position: fixed;

        left: 0px;
        right: 0px;
        bottom: 0px;

        width:100%;
        height: 44px;

        z-index: 100000;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #d4bf1e;
        border: 1px solid #000;

        color: #000;

        font-family: "Marcellus", serif;
        font-size: 16px;

        cursor: pointer;
    }

    .mobile-menu-arrow {
        position: absolute;
        right: 18px;

        font-size: 20px;
        line-height: 1;
    }
    .title-text{font-size: 75px; padding: 0px 30px; line-height: 1.1;}
.mobile-menu-arrow img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}
 .mobile-channel-toggle.open {
        background: #242424;
        color: #D4BF1E;        border: 2px solid #d4bf1e !important;
    }
section#styling {
    padding: 13px;
}	
    .audio-controls{    display: none;}
    .title-container{    left: 0;top: 20%;right: 0;bottom:auto;}
.footer-left {
    display: none;
}
.channel-btn{font-size: 25px;}  
html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Remove desktop slider movement */
    .site-slider {
        width: 100%;
        height: auto !important;
        transform: none !important;
    }

    /* Hide ALL slides by default */
    .site-slider .page-slide {
        display: none !important;
        position: relative;
        width: 100%;
        height: auto !important;
        min-height: 100vh;
        overflow: visible;
    }

    /* Show ONLY current slide */
    .site-slider .page-slide.active {
        display: block !important;
        height: 90vh !important;
        min-height: 100vh;
        overflow: visible;
    }

    /* Don't force video to 100vh */
    .site-slider .page-slide.active .background-video-container {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
	

    .site-slider .page-slide.active .bg-video,
    .site-slider .page-slide.active .background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Mobile doesn't use desktop slide arrows */
    .channel-navigation .channel-prev,
    .channel-navigation .channel-next {
        display: none;
    }
    
    /**CHANNEL ARROWS***/
     .channel-navigation {
        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: auto;
        height: 45px;
        z-index: 99999;

        display: flex;
    }



    .channel-arrows {
        width: 45px;
        height: 45px;

        display: flex;
        flex-direction: column;
    }

    .channel-arrows button {
        width: 45px;
        height: 22.5px;

        padding: 0;

        background: #D4BF1E;
        border: 1px solid #000;

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
    }

    .channel-arrows img {
        width: 12px;
        height: auto;
        display: block;
    }
   span.mobileArrow {
    display: block;
}
.channel-arrows {
    display: none;
}
a.channel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
      flex: 1;
        height: 45px;
        background: #D4BF1E;
        color: #000;
        border: 1px solid #000;
        font-family: 'Marcellus', serif;
        cursor: pointer;
	    text-decoration: none;
    padding: 0px;
    width: 100%;
}

/* =========================================
   MOBILE - EACH CHANNEL IS A SEPARATE PAGE
   ========================================= */

   html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .site-slider {
        width: 100%;
        height: auto;
        transform: none !important;
        display: block;
    }

    .page-slide {
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: auto;

        display: none;

        overflow: visible;
    }

    /* Only selected mobile page is visible */
    .page-slide.active {
        display: block;
    }

    /* Background video stays behind the page */
    .page-slide .background-video-container {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
    }

    .page-slide .bg-video,
    .page-slide .background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Content can scroll naturally */
    .page-slide .content-wrapper,
    .page-slide .mixtape-content {
        position: relative;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    /* Your bottom channel button */
    .page-slide .channel-navigation {
        position: fixed !important;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: auto;
        z-index: 9999;
    }

    /* Hide desktop up/down channel arrows on mobile */
    .page-slide .channel-arrows {
        display: none;
    }

    /* Main menu image/link if needed */
    .page-slide .main-title {
        z-index: 10;
    }

    /* Don't allow desktop wheel slider on mobile */
    .site-slider {
        pointer-events: auto;
    }
    .playlist-grid{    grid-template-columns: 1fr;padding-bottom: 200px;}
    header.main-header h1.main-title {
    display: none;
}
.content-wrapper{    grid-template-columns: 1fr;}
.left-column{min-height: 575px;}
.page-slide{    padding: 20px;}
.center-column {
    display: none;
}
.left-column{position: relative;}
.image-nav {
    position: absolute;
    top: 0;
    bottom: 0;display: block;
        margin: auto;
}
.image-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
button.img-prev {
    left: 0;
    position: absolute;
}
button.img-next {
    position: absolute;
    right: 0;
}
/*.image-nav button:hover {
    background: #e8d84d;
    right: 0;
    position: absolute;
}*/
section#jukebox, section#styling {
    height: 100vh !important;
    overflow: scroll !important;        padding-top: 41px;
}
.mixtape-content{position: relative; z-index: 9 !important;}
.mixtape-description{    max-width: 85%;position: fixed;
    bottom: 62px;    background-color: #d9d9d9a8;
}
.page-slide > *:not(.background-video-container){    z-index: 9999;}
.playlist-card{z-index: 0;    position: relative;}

.content-wrapper{z-index: 9 !important;}
  .page-slide#mixtapes .background-video-container, section#styling .background-video-container {
        display: none !important;
    }
	
	
    .record {
        width: 270px;
        height: 270px;
    }
.playlist-grid {
        grid-template-columns: 1fr;
    }

    .playlist-card:nth-child(1) {
        order: 5;
    }

    .playlist-card:nth-child(2) {
        order: 4;
    }

    .playlist-card:nth-child(3) {
        order: 3;
    }

    .playlist-card:nth-child(4) {
        order: 2;
    }

    .playlist-card:nth-child(5) {
        order: 1;
    }	
.image-nav.for-desktop {
    display: none;
}
.image-nav.for-mobile {
    display: flex !important;
}
	.image-slider .slide.active{width: 95%;}
	button.img-next{        right: 11px;}
	button.img-prev{        left: 11px;}
	.content-wrapper, .mixtape-content{margin: 0px;}
	.main-footer{display:none;}
	.channel-navigation.for-mobile {display: block;}
	header.main-header {
    display: none;
}
    button.img-prev {
        background-image: url(https://thecollective-rewind.com/wp-content/uploads/2026/08/mobile-left.png);
        background-repeat: no-repeat;
        background-size: 16px;
    }	
	button.img-next{
background-image: url(https://thecollective-rewind.com/wp-content/uploads/2026/08/mobile-right.png);
        background-repeat: no-repeat;
        background-size: 16px;		
	}	
button.img-prev img, button.img-next img {
    display: none;
}	
	.image-nav button:hover, .image-nav button:hover{background-color:transparent !important;}	
	
	.channel-navigation.for-mobile {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 40px;

        z-index: 99999;
    }

    .channel-navigation.for-mobile .channel-btn {
        width: 100%;
        height: 40px;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        background: #e0c914;
        border: 1px solid #000;

        color: #000;
        text-decoration: none;

        font-size: 16px;

        position: absolute;
        left: 0;
        bottom: 0;
    }
.channel-navigation.for-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    z-index: 99999;        box-sizing: border-box;
}
    /* ======================================
       ACTIVE BUTTON
       ALWAYS STAYS AT THE BOTTOM
       ====================================== */

    .channel-navigation.for-mobile
    .channel-btn.active {
        z-index: 3;
        bottom: 0;
		border-color: #ffd700;
        background-color: #242424;
        color: #ffd700;
    }
	.channel-navigation.for-mobile .channel-btn.active .mobileArrow img {
    filter: brightness(0) saturate(100%)
            invert(79%)
            sepia(98%)
            saturate(1200%)
            hue-rotate(5deg)
            brightness(104%)
            contrast(105%);
}
.mixtape-content {
    padding-top: 30px;
}
    /* ======================================
       CLOSED
       HIDE OTHER TWO
       ====================================== */

    .channel-navigation.for-mobile:not(.mobile-menu-open)
    .channel-btn:not(.active) {
        display: none;
    }

    /* ======================================
       OPEN
       OTHER BUTTONS MOVE UPWARD
       ====================================== */

    .channel-navigation.for-mobile.mobile-menu-open
    .channel-btn:not(.active) {
        display: flex;
        z-index: 2;
    }

    /* First non-active button = directly above active */
    .channel-navigation.for-mobile.mobile-menu-open
    .channel-btn.mobile-option-1 {
        bottom: 40px;
    }

    /* Second non-active button = above first */
    .channel-navigation.for-mobile.mobile-menu-open
    .channel-btn.mobile-option-2 {
        bottom: 80px;
    }

	 .channel-navigation.for-mobile .channel-btn.mobile-option-3 {
        display: flex;
        bottom: 120px;
    }
    /* ======================================
       ARROW
       ====================================== */

    .channel-navigation.for-mobile
    .mobileArrow {
        position: absolute;
        right: 20px;

        top: 50%;
        transform: translateY(-50%);

        display: flex;
        align-items: center;
    }

    .channel-navigation.for-mobile
    .mobileArrow img {
        width: 18px;
        height: auto;
        display: block;
    }

    /* Only active button shows arrow */
    .channel-navigation.for-mobile
    .channel-btn:not(.active)
    .mobileArrow {
        display: none;
    }
section#jukebox .background-video-container {
    display: none;
}	
	.mixtape-logo{width: 100%;}	
  .nav-menu .menu-item:hover > a {
        color: #000 !important;
    }
	
.product-gallery {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .product-column {
        gap: 8px;
    }
    .product-card {
        width: 100%;
        min-width: 0;
    }

    .product-info {
        height: 32px;
        min-height: 32px;
        flex-basis: 32px;

        padding: 0 10px;

        font-size: 8px;
        letter-spacing: 1px;
    }	
.right-column {
    width: 100%;
    height: auto;
    min-height: 100vh;        margin-bottom: 100px;
}	
	.content-wrapper{    padding-top: 20px;}	
}