#fw-section-custom-html-81f7686d-42ca-4ec5-94da-10c45a35d021 {

body{
background:#161616;
font-family:Arial, Helvetica, sans-serif;
color:white;
margin:0;
overflow-x:hidden;
}

/* Spotlight Mouse Effect */

.spotlight{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background:radial-gradient(
circle at var(--x) var(--y),
rgba(255,59,0,0.15),
transparent 250px
);
z-index:1;
}

/* Section */

.about-section{
max-width:900px;
margin:auto;
padding:120px 20px;
position:relative;
z-index:2;
animation:fadeUp 1.2s ease;
}

/* Glass Card */

.about-card{
background:rgba(255,255,255,0.04);
backdrop-filter:blur(14px);
border-radius:20px;
padding:60px;
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 30px 80px rgba(0,0,0,0.7);
transition:.4s;
}

.about-card:hover{
transform:translateY(-10px);
box-shadow:0 40px 120px rgba(0,0,0,0.9);
}

/* Title */

.about-title{
font-size:58px;
font-weight:900;
letter-spacing:5px;
text-align:center;
margin-bottom:10px;
color:white;
animation:neonGlow 3s infinite alternate;
}

/* Subtitle */

.about-subtitle{
text-align:center;
color:#999;
margin-bottom:40px;
}

/* Divider */

.about-divider{
width:100px;
height:4px;
background:#ff3b00;
margin:30px auto 60px auto;
border-radius:20px;
animation:expand 2s ease;
}

/* Paragraph */

.about-section p{
margin-bottom:26px;
line-height:1.9;
color:#d6d6d6;
font-size:18px;
}

/* Orange Highlights */

.orange{
color:#ff3b00;
font-weight:600;
transition:.3s;
}

.orange:hover{
color:white;
text-shadow:0 0 10px #ff3b00;
}

/* Floating Background Particles */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image:radial-gradient(#ff3b00 1px, transparent 1px);
background-size:40px 40px;
opacity:0.05;
animation:moveParticles 60s linear infinite;
pointer-events:none;
}

/* Animations */

@keyframes neonGlow{

0%{
text-shadow:0 0 5px #ff3b00;
}

100%{
text-shadow:
0 0 10px #ff3b00,
0 0 20px #ff3b00,
0 0 40px #ff3b00;
}

}

@keyframes expand{

0%{
width:0;
}

100%{
width:100px;
}

}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes moveParticles{

0%{
transform:translateY(0);
}

100%{
transform:translateY(-1000px);
}

}

/* Responsive */

@media(max-width:768px){

.about-title{
font-size:38px;
}

.about-card{
padding:35px;
}

.about-section p{
font-size:16px;
}

}
}
#fw-section-rich-text-177385004406933 {
--font-heading-scale: 1.0;
--font-body-scale: 1.0;
}
#fw-section-rich-text-177385004406933 {
--color-primary: #D8D7D1;
--color-primary-rgb: 216, 215, 209;
--color-background: #161616;
--color-background-rgb: 22, 22, 22;
--color-on-background: #D8D7D1;
--color-on-background-rgb: 216, 215, 209;
--color-on-primary: #161616;
--color-on-primary-rgb: 22, 22, 22;
--color-product-image-background: #ffffff;
--color-background-brightness: 22;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #D8D7D1;
--primary-btn-text: #161616;
--primary-btn-border-color: #D8D7D1;
--secondary-btn-bg: transparent;
--secondary-btn-text: #D8D7D1;
--secondary-btn-border-color: #D8D7D1;
.gradient-text {
  background: linear-gradient(90deg,#ffffff,#999,#ffffff);
  background-size: 200%;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200%;
  }
}
}
#fw-section-custom-html-15151c83-052e-48bf-8417-6cca7b3472db {
--color-primary: #D8D7D1;
--color-primary-rgb: 216, 215, 209;
--color-background: #161616;
--color-background-rgb: 22, 22, 22;
--color-on-background: #D8D7D1;
--color-on-background-rgb: 216, 215, 209;
--color-on-primary: #161616;
--color-on-primary-rgb: 22, 22, 22;
--color-product-image-background: #ffffff;
--color-background-brightness: 22;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #D8D7D1;
--primary-btn-text: #161616;
--primary-btn-border-color: #D8D7D1;
--secondary-btn-bg: transparent;
--secondary-btn-text: #D8D7D1;
--secondary-btn-border-color: #D8D7D1;

}





#fw-section-collection-template-collection-song-packs {

/* =========================================
   ALL PRODUCTS PAGE - SALSA SONG PACKS STYLE
   Based on your final clean version
========================================= */

/* ===== PAGE / COLLECTION AREA ===== */
.collection,
.collection-page,
main:has([class*="collection"]),
body:has([class*="collection"]) {
  position: relative !important;
}

/* ===== TITLE ===== */
/* Targets common collection headings */
.collection h1,
.collection-page h1,
[class*="collection"] h1:first-of-type,
main h1:first-of-type {
  text-align: center !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
  text-shadow:
    0 0 10px rgba(255,59,0,0.2),
    0 0 24px rgba(255,59,0,0.16) !important;
  animation: titleGlow 3s ease-in-out infinite !important;
}

/* underline under main heading */
.collection h1::after,
.collection-page h1::after,
[class*="collection"] h1:first-of-type::after,
main h1:first-of-type::after {
  content: "" !important;
  display: block !important;
  width: 120px !important;
  height: 2px !important;
  margin: 20px auto 0 auto !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,59,0,1),
    rgba(255,140,0,1),
    transparent
  ) !important;
  box-shadow: 0 0 14px rgba(255,59,0,0.3) !important;
}

/* ===== PRODUCT GRID ===== */
.col-grid,
[class*="collection__grid"],
[class*="col-grid--product-gap"],
[class*="products-grid"],
[class*="product-grid"] {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  padding: 10px 20px 30px !important;
}

/* ===== PRODUCT CARDS ===== */
.col-grid > *,
[class*="collection__grid"] > *,
[class*="col-grid--product-gap"] > *,
[class*="products-grid"] > *,
[class*="product-grid"] > * {
  flex: 0 1 230px !important;
  max-width: 230px !important;
  min-width: 230px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  ) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,59,0,0.08),
    0 0 18px rgba(255,59,0,0.12) !important;
  transform: scale(0.97) !important;
  transition: all 0.3s ease !important;
}

/* ===== GLOW BORDER ===== */
.col-grid > *::before,
[class*="collection__grid"] > *::before,
[class*="col-grid--product-gap"] > *::before,
[class*="products-grid"] > *::before,
[class*="product-grid"] > *::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 22px !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(255,59,0,0.15),
    rgba(255,140,0,0.4),
    rgba(255,59,0,0.1)
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  pointer-events: none !important;
}

/* ===== HOVER ===== */
.col-grid > *:hover,
[class*="collection__grid"] > *:hover,
[class*="col-grid--product-gap"] > *:hover,
[class*="products-grid"] > *:hover,
[class*="product-grid"] > *:hover {
  transform: scale(1.03) translateY(-6px) !important;
  box-shadow:
    0 18px 36px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,140,0,0.25),
    0 0 28px rgba(255,59,0,0.25) !important;
  z-index: 2 !important;
}

/* ===== IMAGES ===== */
img {
  border-radius: 16px !important;
  transition: transform 0.3s ease !important;
}

.col-grid > *:hover img,
[class*="collection__grid"] > *:hover img,
[class*="col-grid--product-gap"] > *:hover img,
[class*="products-grid"] > *:hover img,
[class*="product-grid"] > *:hover img {
  transform: scale(1.04) !important;
}

/* ===== TITLE ANIMATION ===== */
@keyframes titleGlow {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

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

@media (max-width: 768px) {
  .collection h1,
  .collection-page h1,
  [class*="collection"] h1:first-of-type,
  main h1:first-of-type {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .collection h1::after,
  .collection-page h1::after,
  [class*="collection"] h1:first-of-type::after,
  main h1:first-of-type::after {
    width: 70px !important;
    margin-top: 14px !important;
  }

  .col-grid,
  [class*="collection__grid"],
  [class*="col-grid--product-gap"],
  [class*="products-grid"],
  [class*="product-grid"] {
    justify-content: center !important;
    gap: 12px !important;
    padding: 10px 14px 24px !important;
    flex-wrap: wrap !important;
  }

  .col-grid > *,
  [class*="collection__grid"] > *,
  [class*="col-grid--product-gap"] > *,
  [class*="products-grid"] > *,
  [class*="product-grid"] > * {
    flex: 0 1 calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  .col-grid > *::before,
  [class*="collection__grid"] > *::before,
  [class*="col-grid--product-gap"] > *::before,
  [class*="products-grid"] > *::before,
  [class*="product-grid"] > *::before {
    opacity: 0.6 !important;
  }
}
}
#fw-section-featured-collection-0ffa021d-593c-4ce0-a458-4096ed8f9e3f {

/* =========================================
   SALSA SONG PACKS - FINAL CLEAN VERSION
========================================= */

.featured-collection {
  position: relative !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,59,0,0.06), transparent 45%);
}

/* ===== TITLE ===== */
.featured-collection::before {
  content: "Salsa Song Packs" !important;
  display: block !important;
  text-align: center !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
  text-shadow:
    0 0 10px rgba(255,59,0,0.2),
    0 0 24px rgba(255,59,0,0.16);
  animation: titleGlow 3s ease-in-out infinite;
}

.featured-collection::after {
  content: "" !important;
  display: block !important;
  width: 120px !important;
  height: 2px !important;
  margin: 0 auto 20px auto !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,59,0,1),
    rgba(255,140,0,1),
    transparent
  );
  box-shadow: 0 0 14px rgba(255,59,0,0.3);
}

/* ===== DESKTOP GRID ===== */
.featured-collection .col-grid,
.featured-collection [class*="collection__grid"],
.featured-collection [class*="col-grid--product-gap"] {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
  padding: 10px 20px 30px !important;
}

/* ===== CARDS ===== */
.featured-collection .col-grid > *,
.featured-collection [class*="collection__grid"] > *,
.featured-collection [class*="col-grid--product-gap"] > * {
  flex: 0 0 230px !important;
  max-width: 230px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  position: relative !important;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  ) !important;

  border: 1px solid rgba(255,255,255,0.08) !important;

  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,59,0,0.08),
    0 0 18px rgba(255,59,0,0.12);

  transform: scale(0.97);
  transition: all 0.3s ease;
}

/* glow border */
.featured-collection .col-grid > *::before,
.featured-collection [class*="collection__grid"] > *::before,
.featured-collection [class*="col-grid--product-gap"] > *::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,59,0,0.15),
    rgba(255,140,0,0.4),
    rgba(255,59,0,0.1)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* hover */
.featured-collection .col-grid > *:hover,
.featured-collection [class*="collection__grid"] > *:hover,
.featured-collection [class*="col-grid--product-gap"] > *:hover {
  transform: scale(1.03) translateY(-6px);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,140,0,0.25),
    0 0 28px rgba(255,59,0,0.25);
}

/* images */
.featured-collection img {
  border-radius: 16px !important;
  transition: transform 0.3s ease;
}

.featured-collection .col-grid > *:hover img {
  transform: scale(1.04);
}

/* ===== TITLE ANIMATION ===== */
@keyframes titleGlow {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* =========================================
   MOBILE FIX (THIS IS THE IMPORTANT PART)
========================================= */

@media (max-width: 768px) {

  .featured-collection {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .featured-collection::before {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .featured-collection::after {
    width: 70px !important;
    margin-bottom: 14px !important;
  }

  /* turn into horizontal scroll */
  .featured-collection .col-grid,
  .featured-collection [class*="collection__grid"],
  .featured-collection [class*="col-grid--product-gap"] {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 10px 14px 24px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* hide scrollbar */
  .featured-collection .col-grid::-webkit-scrollbar {
    display: none;
  }

  /* cards size for mobile */
  .featured-collection .col-grid > *,
  .featured-collection [class*="collection__grid"] > *,
  .featured-collection [class*="col-grid--product-gap"] > * {
    flex: 0 0 72vw !important;
    min-width: 72vw !important;
    max-width: 72vw !important;
    scroll-snap-align: center;
  }

  /* reduce glow intensity */
  .featured-collection .col-grid > *::before {
    opacity: 0.6;
  }
}
}


#fw-section-text-carousel-2d1d610a-d7be-4bf1-9829-f479d308d327 {
--color-primary: #ff3b00;
--color-primary-rgb: 255, 59, 0;
--color-background: #161616;
--color-background-rgb: 22, 22, 22;
--color-on-background: #D8D7D1;
--color-on-background-rgb: 216, 215, 209;
--color-on-primary: #161616;
--color-on-primary-rgb: 22, 22, 22;
--color-product-image-background: #ffffff;
--color-background-brightness: 22;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #ff3b00;
--primary-btn-text: #161616;
--primary-btn-border-color: #D8D7D1;
--secondary-btn-bg: transparent;
--secondary-btn-text: #D8D7D1;
--secondary-btn-border-color: #D8D7D1;

}




#fw-section-text-carousel-28cbe725-6b3e-42fb-993a-d7ce67d92d31 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #161616;
--color-background-rgb: 22, 22, 22;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 22;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;

}