/* =========================================
GLOBAL CARD STYLING
========================================= */

.song-card{
  position:relative;

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

  margin:0 auto;
}

/* IMAGE SETTINGS */
.song-image{
  width:100%;
  max-width:100%;

  height:auto;
  display:block;

  border-radius:28px;
}


/* =========================================
GLOBAL PLAY BUTTON
========================================= */

.play-button-wrap{
  position:absolute;

  left:50%;

  transform:translateX(-50%);

  z-index:999;

  transition:all 0.3s ease;
}


/* =========================================
PRESS PLAY TEXT
========================================= */

.press-play-text{
  position:absolute;

  top:-170%;
  left:50%;

  transform:translateX(-50%);

  color:white;

  font-size:14px;
  font-weight:700;
  letter-spacing:2px;

  white-space:nowrap;

  text-shadow:0 0 10px rgba(255,255,255,0.9);

  animation:pulseText 1.5s ease-in-out infinite;
}


/* =========================================
TEXT ANIMATION
========================================= */

@keyframes pulseText{

  0%{
    opacity:0.35;
    transform:translateX(-50%) scale(1);
  }

  50%{
    opacity:1;
    transform:translateX(-50%) scale(1.08);
  }

  100%{
    opacity:0.35;
    transform:translateX(-50%) scale(1);
  }

}


/* =========================================
DESKTOP BUTTON POSITIONING
========================================= */

.button1{
  top:87%;
}

.button2{
  top:87%;
}

.button3{
  top:87%;
}

.button4{
  top:87%;
}

.button5{
  top:87%;
}

.button6{
  top:87%;
}

.button7{
  top:87%;
}

.button8{
  top:87%;
}

.button9{
  top:87%;
}

.button10{
  top:87%;
}

/* =========================================
LAPTOP BREAKPOINT
========================================= */

@media (max-width:1400px){

  .song-card{
    max-width:320px;
  }

}


/* =========================================
TABLET
========================================= */

@media (max-width:1024px){

  .song-card{
    max-width:300px;
  }

}


/* =========================================
MOBILE STYLING
========================================= */

@media (max-width:768px){

  .song-card{
    max-width:280px;
  }

  .press-play-text{
    top:-120%;
    font-size:12px;
  }

  .button1{
    top:85%;
  }

  .button2{
    top:85%;
  }

  .button3{
    top:85%;
  }

	  .button4{
    top:85%;
  }

  .button5{
    top:85%;
  }

  .button6{
    top:85%;
  }

  .button7{
    top:85%;
  }

  .button8{
    top:85%;
  }

  .button9{
    top:85%;
  }

  .button10{
    top:85%;
  }

}







.custom-popup-btn{
    display:inline-block;
    padding:12px 24px;
    background:#000;
    color:#fff !important;
    text-decoration:none;
    border-radius:8px;
    font-weight:600;
}

.custom-popup-btn:hover{
    opacity:0.9;
}


.soundtailors-promo{
    max-width:700px;
    margin:auto;
    text-align:center;
    font-family:'Poppins',sans-serif;
}

.soundtailors-promo img{
    width:100%;
    border-radius:16px;
    display:block;
    margin-bottom:20px;
}

.promo-content{
    padding:10px;
}

.promo-content h3{
    color:#D4AF37;
    font-size:32px;
    margin-bottom:10px;
}

.promo-text{
    font-size:18px;
    line-height:1.5;
    margin-bottom:25px;
}

.promo-form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
}

.promo-form input{
    flex:1;
    min-width:260px;
    padding:16px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:16px;
}

.promo-form button{
    background:#D4AF37;
    color:#000;
    border:none;
    border-radius:8px;
    padding:16px 28px;
    font-weight:700;
    cursor:pointer;
    transition:all .3s ease;
}

.promo-form button:hover{
    transform:translateY(-2px);
    opacity:.95;
}

.promo-note{
    margin-top:15px;
    font-size:14px;
    color:#666;
}



/* Desktop image hidden by default */
.desktop-banner {
    display: block;
}

/* Mobile image hidden by default */
.mailpoet-mobile-image {
    display: none;
}

/* Mobile only */
@media screen and (max-width: 768px) {

    .desktop-banner img {
        display: none !important;
    }

    .mailpoet-mobile-image {
        display: block !important;
    }

    .mailpoet-mobile-image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Make popup taller */
@media screen and (max-width: 768px) {

    .mailpoet_form_popup {
        max-height: 90vh !important;
        height: 90vh !important;
    }

}
/* Make MailPoet popup taller on mobile */
@media screen and (max-width: 768px) {

    .mailpoet_form_popup {
        max-height: 90vh !important;
        height: 90vh !important;
    }

}

body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
HERO BACKGROUND SYSTEM
Controlled by JavaScript
========================================= */

.st-hero,
.st-hero-it{
    position:relative;
    background:none !important;
}

/* Fixed Memories Background */

#hero-bg{
    position:fixed;
    inset:0;

    z-index:-1;

    pointer-events:none;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    opacity:1;

    transition:opacity 1.5s ease;
}

#hero-bg.hidden{
    opacity:0;
}


/* =========================================
GLOBAL ANIMATED SOUNDWAVE BACKGROUND
========================================= */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:url("https://thesoundtailors.com/wp-content/uploads/2026/05/Soundwave-background.webp");
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;

    opacity:0.50;

    animation:stWaveFloat 60s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:-2;
}

/* Dark centre overlay */

body::after{
    content:"";
    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.40) 30%,
            rgba(0,0,0,.15) 55%,
            rgba(0,0,0,0) 80%
        );

    pointer-events:none;

    z-index:-1;
}

/* Site canvas */

body{
    background:#000;
}

/* Desktop animation */

@keyframes stWaveFloat{

    0%{
        transform:scale(1.05) translateX(-3%);
    }

    100%{
        transform:scale(1.05) translateX(3%);
    }

}

/* Mobile animation */

@media (max-width:768px){

    body::before{
        animation:stWaveFloatMobile 30s ease-in-out infinite alternate;
    }

}

@keyframes stWaveFloatMobile{

    0%{
        transform:scale(1.08) translateX(-4%);
    }

    100%{
        transform:scale(1.08) translateX(4%);
    }

}

/* =========================================
   POPUP MAKER - SOUNDWAVE GLASS
========================================= */

/* Darken page behind popup */

.pum-overlay{
    background:rgba(0,0,0,.35) !important;
}

/* Main popup box */

.pum-container{

    background:rgba(0,0,0,.25) !important;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(189,155,71,.20);

    box-shadow:
        0 0 50px rgba(189,155,71,.20);

    overflow:hidden;
}

/* Remove theme backgrounds */

.pum-content,
.pum-content > div,
.pum-theme-1119 .pum-container,
.pum-theme-default-theme .pum-container{

    background:transparent !important;
}



.wp-element-button {
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.wp-element-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(212,175,55,.30);
}

mark.has-theme-6-color,
mark.has-theme-3-color{

    color: transparent !important;

    background: linear-gradient(
        90deg,
        #BD9B47 0%,
        #BD9B47 40%,
        #D8B867 50%,
        #BD9B47 60%,
        #BD9B47 100%
    ) !important;

    background-size: 300% 100% !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    animation: goldShimmer 3s linear infinite;
}

@keyframes goldShimmer{
    from{
        background-position:0% 50%;
    }
    to{
        background-position:300% 50%;
    }
}

mark.has-theme-6-color,
mark.has-theme-3-color{
    color: #BD9B47 !important;
text-shadow:
    0 0 12px rgba(189,155,71,.45),
    0 0 24px rgba(189,155,71,.30),
    0 0 40px rgba(189,155,71,.15);
}

.glass-white {
    background: rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.glass-gold {
    background: rgba(198,165,75,0.3) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.wp-image-2358 {
    filter:
        drop-shadow(0 0 10px rgba(189,155,71,.60))
        drop-shadow(0 0 25px rgba(189,155,71,.40))
        drop-shadow(0 0 50px rgba(189,155,71,.25));
}

.wp-image-2373 {
    filter:
        drop-shadow(0 0 10px rgba(189,155,71,.60))
        drop-shadow(0 0 25px rgba(189,155,71,.40))
        drop-shadow(0 0 50px rgba(189,155,71,.25));
}

.is-style-section-1,
.is-style-section-3{
    transition:all .35s ease !important;
}

.is-style-section-1:hover,
.is-style-section-3:hover{

    transform:
        translateY(-10px)
        scale(1.015);

    box-shadow:
        0 25px 60px rgba(0,0,0,.50),
        0 0 35px rgba(189,155,71,.25);
}

/* Song card hover */

.song-card{
    transition:
        transform .35s ease;
}

.song-card:hover{
    transform:translateY(-8px);
}

/* Artwork animation */

.song-card img{
    transition:
        transform .4s ease,
        filter .4s ease;
}

.song-card:hover img{
    transform:scale(1.03);

    filter:
        drop-shadow(0 0 12px rgba(189,155,71,.40))
        drop-shadow(0 0 25px rgba(189,155,71,.25))
        drop-shadow(0 0 40px rgba(189,155,71,.15));
}

.addon-image img{
    transition:
        transform .4s ease,
        filter .4s ease;
}

.addon-image:hover img{
    transform:scale(1.03);

    filter:
        drop-shadow(0 0 12px rgba(189,155,71,.40))
        drop-shadow(0 0 25px rgba(189,155,71,.25))
        drop-shadow(0 0 40px rgba(189,155,71,.15));
}

/* =========================================
   BADGE BASE STYLING
========================================= */

.badge-gold,
.badge-silver,
.badge-bronze{
    transition:
        filter .4s ease,
        transform .4s ease;
}

/* =========================================
   SUBTLE AMBIENT GLOW
========================================= */

.badge-gold{
    filter:
        drop-shadow(0 0 4px rgba(189,155,71,.30))
        drop-shadow(0 0 10px rgba(189,155,71,.15));
}

.badge-silver{
    filter:
        drop-shadow(0 0 4px rgba(220,220,220,.30))
        drop-shadow(0 0 10px rgba(220,220,220,.15));
}

.badge-bronze{
    filter:
        drop-shadow(0 0 4px rgba(205,127,50,.30))
        drop-shadow(0 0 10px rgba(205,127,50,.15));
}

/* =========================================
   SLOW PULSE
========================================= */

.badge-gold,
.badge-silver,
.badge-bronze{
    animation:badgePulse 8s ease-in-out infinite;
}

@keyframes badgePulse{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.02);
    }

}

/* =========================================
   BRONZE CARD HOVER
========================================= */

.is-style-section-1:hover .badge-bronze{

    transform:scale(1.12);

    filter:
        drop-shadow(0 0 15px rgba(205,127,50,.95))
        drop-shadow(0 0 35px rgba(205,127,50,.75))
        drop-shadow(0 0 70px rgba(205,127,50,.55));
}

/* =========================================
   SILVER CARD HOVER
========================================= */

.is-style-section-3:hover .badge-silver{

    transform:scale(1.12);

    filter:
        drop-shadow(0 0 15px rgba(220,220,220,.95))
        drop-shadow(0 0 35px rgba(220,220,220,.75))
        drop-shadow(0 0 70px rgba(220,220,220,.55));
}

/* =========================================
   GOLD CARD HOVER
========================================= */

.is-style-section-1:hover .badge-gold{

    transform:scale(1.12);

    filter:
        drop-shadow(0 0 15px rgba(189,155,71,.95))
        drop-shadow(0 0 35px rgba(189,155,71,.80))
        drop-shadow(0 0 70px rgba(189,155,71,.60));
}


/* =========================================
   New Media Scroller
========================================= */

.sample-coverflow {
    width: 100%;
    padding: 100px 0;
    overflow: visible;
}

.sample-coverflow .swiper-slide {
    width: 420px;
    transition: all .5s ease;
}

.sample-item {
    text-align: center;
}

.sample-item h3 {
    margin-bottom: 20px;
}

.sample-item p {
    margin-top: 20px;
}

.sample-coverflow .swiper-slide {
    opacity: .4;
    transition: all .4s ease;
}

.sample-coverflow .swiper-slide-active {
    opacity: 1;
}

.sample-coverflow .swiper-slide {
    transition:
        transform .6s ease,
        opacity .6s ease;
}

.swipe-hint{
    display:none;
}

@media (max-width:768px){

    .swipe-hint{
        display:block;
        text-align:center;
        color:#d4af37;
        font-size:13px;
        font-weight:600;
        letter-spacing:2px;
        text-transform:uppercase;
        margin-bottom:20px;
        animation:swipePulse 2s ease-in-out infinite;
    }

}

@keyframes swipePulse{

    0%{opacity:.4;}
    50%{opacity:1;}
    100%{opacity:.4;}

}

.sample-item p{
    max-width:280px;
    margin:20px auto 0;
}

@media (max-width:768px){

    .sample-coverflow .swiper-slide{
        width:260px !important;
    }

}

/* =========================================
   PACKAGE CAROUSEL - MOBILE
========================================= */

@media (max-width:768px){

    /* Full-width carousel */
    .package-scroll{
        display:flex !important;
        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        gap:8px !important;

        width:100vw !important;
        max-width:100vw !important;

        padding:0 !important;

        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
    }

    .package-scroll::-webkit-scrollbar{
        display:none;
    }

    /* Individual cards */
    .package-scroll > *{
        flex:0 0 92% !important;
        min-width:92% !important;
        max-width:92% !important;

        scroll-snap-align:center;
    }
	.package-scroll{
    scroll-padding-left:4vw;
    scroll-padding-right:4vw;
}

    /* Remove desktop hover effects */
    .package-scroll .wp-block-column,
    .package-scroll .wp-block-group{
        transform:none !important;
        transition:none !important;
    }

    .package-scroll .wp-block-column:hover,
    .package-scroll .wp-block-group:hover{
        transform:none !important;
    }

    /* Card spacing */
    .package-scroll .wp-block-column,
    .package-scroll .wp-block-group,
    .package-scroll .wc-block-components-product-card{

        padding:16px !important;
        margin:0 !important;

        min-height:auto !important;
        height:auto !important;

        box-sizing:border-box;
    }

    /* Badge image */
    .package-scroll img{
        width:85px !important;
        max-width:85px !important;
        height:auto !important;

        display:block !important;
        margin:0 auto 10px auto !important;
    }

    /* Divider spacing */
    .package-scroll hr,
    .package-scroll .wp-block-separator{
        margin:8px 0 12px !important;
    }

    /* Package titles */
    .package-scroll h2,
    .package-scroll h3{
        font-size:24px !important;
        line-height:1.05 !important;

        text-align:center !important;

        margin:0 0 8px !important;
        padding:0 !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
    }

    /* Price */
    .package-scroll .price,
    .package-scroll .wc-block-components-product-price{
        font-size:18px !important;

        text-align:center !important;

        margin:0 0 12px !important;
    }

    /* Feature list */
    .package-scroll ul{
        padding-left:18px !important;
        margin:0 !important;
    }

    .package-scroll li,
    .package-scroll p{
        font-size:14px !important;
        line-height:1.2 !important;

        margin-bottom:4px !important;

        overflow-wrap:break-word;
        word-break:normal;
    }

    /* Quantity + button row */
    .package-scroll .cart{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        margin-top:10px !important;
    }

    /* Quantity selector */
    .package-scroll .quantity,
    .package-scroll .wc-block-components-quantity-selector{
        transform:scale(.50) !important;
        transform-origin:center center !important;

        margin:0 !important;
    }

    /* Add to basket button */
    .package-scroll .wp-element-button,
    .package-scroll .wc-block-components-product-button,
    .package-scroll .single_add_to_cart_button{

        transform:scale(.70) !important;
        transform-origin:center center !important;

        min-width:110px !important;
        min-height:auto !important;

        padding:8px 12px !important;

        margin:0 !important;
    }

    /* Prevent clipping */
    .package-scroll *{
        max-width:100%;
        box-sizing:border-box;
    }
}

/* ADD-ONS CAROUSEL */

.addon-scroll{
    display:flex !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:24px !important;

    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;

    padding-bottom:12px;

    scrollbar-width:thin;
    scrollbar-color:#BD9B47 rgba(255,255,255,.08);
}

.addon-scroll > *{
    flex:0 0 320px !important;
    min-width:320px !important;
    max-width:320px !important;

    scroll-snap-align:start;
}

.addon-scroll::-webkit-scrollbar{
    height:8px;
}

.addon-scroll::-webkit-scrollbar-track{
    background:rgba(255,255,255,.06);
    border-radius:999px;
}

.addon-scroll::-webkit-scrollbar-thumb{
    background:linear-gradient(
        90deg,
        #BD9B47,
        #D8B867,
        #BD9B47
    );
    border-radius:999px;
}

@media (max-width:768px){

    .addon-scroll{
        gap:12px !important;

        width:100vw !important;
        max-width:100vw !important;

        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;

        padding:0 10px 12px !important;

        scrollbar-width:none;
    }

    .addon-scroll::-webkit-scrollbar{
        display:none;
    }

    .addon-scroll > *{
        flex:0 0 85% !important;
        min-width:85% !important;
        max-width:85% !important;
    }
}

/* =========================================
   CAROUSEL ARROWS
========================================= */

.addon-section{
    position:relative;
}

.addon-prev,
.addon-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:50px;
    height:50px;

    border:none;
    border-radius:50%;

    background:#BD9B47;
    color:#000;

    font-size:28px;
    font-weight:700;

    cursor:pointer;

    z-index:100;
}

/* distance from carousel */

.addon-prev{
    left:calc(50% - 800px);
}

.addon-next{
    right:calc(50% - 800px);
}

.addon-prev:hover,
.addon-next:hover{
    background:#D8B867;
}

@media(max-width:768px){
    .addon-prev,
    .addon-next{
        display:none;
    }
}

/* =========================================
Scroll Fade
========================================= */
.scroll-fade{
    transition:
        transform .15s linear,
        opacity .15s linear;

    transform-origin:center center;
}