#fw-section-hero-17fa08a8-4c12-4406-befa-b89a0a69eb0c {

h1{font-weight:900;font-size: 8rem; text-shadow: 5px 5px 10px #000;font-stretch: ultra-expanded;}
p{font-weight:900;font-size: 2rem; text-shadow: 0px 3px 0px #000}

.hero__content {
    max-width: 1140px;
}

@media only screen and (max-width: 950px) {

h1{font-weight:900;font-size: 2.45rem; text-shadow: 5px 5px 10px #000;font-stretch: ultra-expanded;}
p{font-weight:900;font-size: 1rem; text-shadow: 0px 3px 0px #000}

  }

}
#fw-section-custom-html-3ccc8fdb-d043-47f4-9c38-bec1b08a17e3 {

/* ===== Marquee (flush, centered, larger, icon-aligned) ===== */
.marquee-wrapper{
  width:100%;
  background:#000;
  color:#fff;                  /* icons use currentColor */
  overflow:hidden;
  white-space:nowrap;
  border-top:3px solid #fff;
  border-bottom:3px solid #fff;
  mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  display:flex;
  align-items:center;          /* centers the line between borders */
  margin:0;
  padding:1.25rem;
}

/* Kill outer padding the page builder might add around this section */
section:has(.marquee-wrapper),
div:has(.marquee-wrapper){ margin:0 !important; padding:0 !important; }

/* Viewport */
.marquee{
  width:100%;
  padding:10px 0;              /* set to 0 if you want none inside borders */
  overflow:hidden;              /* clip the moving strip */
}

/* The original line (we'll clone it in JS) */
.marquee-text{
  display:inline-flex;
  align-items:center;
  gap:4rem;                    /* ← consistent smaller gap */
  white-space:nowrap;
  font-weight:700;             /* keeps your H1 family, just bolder */
  font-size:clamp(64px, 4.6vw, 64px);
  line-height:1;               /* avoids top-heavy slack */
  margin:0;
}

/* Ensure no old margin spacing sneaks in */
.marquee-text span{ 
  display:inline-flex; 
  align-items:center; 
  margin-right:0 !important;
}

/* Icon separators (Font Awesome) — perfectly centered with text */
.marquee-text .sep i{
  display:block;                /* no inline baseline quirks */
  font-size:1em;                /* same optical size as text */
  line-height:1;
  transform:translateY(-0.08em);/* tiny optical nudge up; tweak -0.05..-0.12 */
  color:currentColor;
}

/* Optional image separators */
.sep-img{
  height:0.2em; width:auto; display:block; line-height:1;
  transform:translateY(-0.08em);
  filter:brightness(0) invert(1);
}

/* The moving strip that JS creates */
.marquee-strip{
  display:inline-flex;
  align-items:center;
  gap:4rem;                    /* ← consistent smaller gap */
  white-space:nowrap;
  will-change:transform;
}

/* (If you want the same 4rem gap at all sizes, keep these minimal) */
@media (max-width:479px){ .marquee{padding:8px 0} }

/* --- Hard override to ensure gap REALLY applies (beats theme/media overrides) --- */
.marquee-text,
.marquee-strip {
  gap: 4rem !important;
}

}

#fw-section-hero-208059ea-23f1-41de-9ed9-102da2212c01 {

p{font-size: 26px;}
}
#fw-section-hero-fc93167c-a31e-437f-a03a-42b54366d730 {

h1{font-size:1.5rem;font-weight:300;}
p{font-size:5rem; line-height: 5rem; font-weight:700;}

@media only screen and (max-width: 950px) {

h1{font-size:1.5rem;font-weight:300;}
p{font-size:3rem; line-height:2.75rem;font-weight:700;}

  }
/* =========================================================
   Fourthwall Image Banner (Hero)
   - 10% L/R padding on desktop
   - Border frames ONLY the image area (inside padding)
   - Mobile: show RIGHT side of image
   - Mobile: CTA button text stays on one line
   ========================================================= */

.hero{
  position: relative;
  box-sizing: border-box;

  /* this creates the “image area” inset */
  padding-left: 10%;
  padding-right: 10%;

  /* IMPORTANT: do NOT border the hero itself */
  border: none !important;
}

/* Keep content pushed right, text left-aligned */
.hero .hero__inner{
  display:flex;
  justify-content:flex-end;
  width:100%;
  max-width:none;
}

.hero .hero__content{
  max-width:680px;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.hero .hero__cta-container{
  width:100%;
  display:flex;
  justify-content:flex-start;
}

/* =========================================================
   IMAGE-ONLY BORDER FRAME
   Draw a border that matches ONLY the image canvas area.
   It sits inside the hero padding and does not wrap content outside it.
   ========================================================= */
.hero::before{
  content:"";
  position:absolute;

  /* Frame aligns to the same inset as the image area */
  left: 10%;
  right: 10%;
  top: 0;
  bottom: 0;

  border:2px solid #ffffff;
  box-sizing:border-box;
  pointer-events:none;

  /* Keep it above the background image, below text */
  z-index: 1;
}

/* Ensure text/content stays above the border frame */
.hero .hero__inner,
.hero .hero__content{
  position: relative;
  z-index: 2;
}

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

  .hero{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Border follows the mobile inset */
  .hero::before{
    left: 1rem;
    right: 1rem;
  }

  .hero .hero__inner{ justify-content:center; }
  .hero .hero__content{
    align-items:center;
    text-align:center;
  }

  .hero .hero__cta-container{
    justify-content:center;
    flex-wrap:nowrap;
    gap:0.75rem;
  }

  /* Force button text to stay on one line */
  .hero .hero__cta-container :where(a, button, .button, .btn){
    white-space: nowrap !important;
    min-width: max-content;
  }

  /* Show RIGHT side of the image on mobile */
  .hero{
    background-position: right center !important;
  }
  .hero::after{
    background-position: right center !important;
  }
  .hero :where(.hero__media, .hero__image, .hero__background, .hero__background-image){
    background-position: right center !important;
  }
  .hero :where(img, video){
    object-fit: cover;
    object-position: right center !important;
  }
}

}

#fw-section-hero-dfffced4-f94d-4784-9a82-2cbde7b96ff6 {

h1{font-size:1.5rem;font-weight:300;}
p{font-size:5rem; line-height: 5rem; font-weight:700;}

@media only screen and (max-width: 950px) {

h1{font-size:1.5rem;font-weight:300;}
p{font-size:3rem; line-height:2.75rem;font-weight:700;}

  }
/* =========================================================
   Fourthwall Image Banner (Hero)
   - 10% L/R padding on desktop
   - Border frames ONLY the image area (inside padding)
   - Mobile: show RIGHT side of image
   - Mobile: CTA button text stays on one line
   ========================================================= */

.hero{
  position: relative;
  box-sizing: border-box;

  /* this creates the “image area” inset */
  padding-left: 10%;
  padding-right: 10%;

  /* IMPORTANT: do NOT border the hero itself */
  border: none !important;
}

/* Keep content pushed right, text left-aligned */
.hero .hero__inner{
  display:flex;
  justify-content:flex-end;
  width:100%;
  max-width:none;
}

.hero .hero__content{
  max-width:680px;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.hero .hero__cta-container{
  width:100%;
  display:flex;
  justify-content:flex-start;
}

/* =========================================================
   IMAGE-ONLY BORDER FRAME
   Draw a border that matches ONLY the image canvas area.
   It sits inside the hero padding and does not wrap content outside it.
   ========================================================= */
.hero::before{
  content:"";
  position:absolute;

  /* Frame aligns to the same inset as the image area */
  left: 10%;
  right: 10%;
  top: 0;
  bottom: 0;

  border:2px solid #ffffff;
  box-sizing:border-box;
  pointer-events:none;

  /* Keep it above the background image, below text */
  z-index: 1;
}

/* Ensure text/content stays above the border frame */
.hero .hero__inner,
.hero .hero__content{
  position: relative;
  z-index: 2;
}

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

  .hero{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Border follows the mobile inset */
  .hero::before{
    left: 1rem;
    right: 1rem;
  }

  .hero .hero__inner{ justify-content:center; }
  .hero .hero__content{
    align-items:center;
    text-align:center;
  }

  .hero .hero__cta-container{
    justify-content:center;
    flex-wrap:nowrap;
    gap:0.75rem;
  }

  /* Force button text to stay on one line */
  .hero .hero__cta-container :where(a, button, .button, .btn){
    white-space: nowrap !important;
    min-width: max-content;
  }

  /* Show RIGHT side of the image on mobile */
  .hero{
    background-position: right center !important;
  }
  .hero::after{
    background-position: right center !important;
  }
  .hero :where(.hero__media, .hero__image, .hero__background, .hero__background-image){
    background-position: right center !important;
  }
  .hero :where(img, video){
    object-fit: cover;
    object-position: right center !important;
  }
}

}

#fw-section-custom-html-0b413825-20b8-4265-b5f5-76076985ccf8 {

/* =========================================================
   NEW ARRIVALS SECTION (Aligned to Featured Collection)
   - Transparent background (site bg shows through)
   - Same “container width + gutters” behavior
   - Tabs: Active = Pink, Hover = Purple
   - Grid: 4 across desktop, 2 across mobile
   ========================================================= */

/* IMPORTANT: Transparent background so site background shows through */
.na{
  padding-top: 65px;
  padding-bottom: 64px;
  padding-left: 0;              /* align to theme container */
  padding-right: 0;             /* align to theme container */
  background: transparent;
  color:#fff;
  position: relative;
}

/* Optional: subtle readability layer while still showing background */
.na::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.25);
  pointer-events:none;
}

/* Container alignment to match Featured Collection */
.na__wrap{
  max-width: 1440px;            /* match common featured-collection container */
  margin: 0 auto;
  padding-left: 24px;           /* gutters */
  padding-right: 24px;          /* gutters */
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
  .na__wrap{
    padding-left: 16px;
    padding-right: 16px;
  }
}

.na__title{
  text-align:center;
  font-weight:800;
  letter-spacing:.06em;
  margin:0 0 22px;
  font-size:clamp(48px,6vw,64px);
}

.na__tabs{
  display:flex;
  justify-content:center;
  gap:40px;
  margin:0 auto 34px;
  max-width:1980px;
  border-bottom:2px solid rgba(255,255,255,.35);
  flex-wrap: wrap;
}

/* Tabs base */
.na__tab{
  color:#fff;
  text-decoration:none;
  font-size:36px;
  font-weight:600;
  padding:14px 6px;
  opacity:.9;
  position:relative;
  white-space: nowrap;
  transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}

.na__tab:hover{ opacity:1; }

/* ======================================
   TABS: ACTIVE = PINK | HOVER = PURPLE
   ====================================== */

/* Active tab stays pink */
.na__tab.is-active{
  color: #ff4fb8;
  opacity: 1;
  text-shadow: none;
}

/* Active underline stays pink */
.na__tab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:#ff4fb8;
  box-shadow: none;
}

/* Inactive tab hover = strong purple */
.na__tab:not(.is-active):hover{
  color: #c7a8ff;
  text-shadow:
    0 0 14px rgba(74,0,165,0.9),
    0 0 28px rgba(74,0,165,0.6);
}

/* Purple underline on hover only (inactive tabs) */
.na__tab:not(.is-active):hover::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background: linear-gradient(90deg, #4a00a5, #7a2cff, #4a00a5);
  box-shadow: 0 0 20px rgba(74,0,165,0.85);
}

/* ================================
   PRODUCT GRID RESPONSIVE LAYOUT
   ================================ */

/* Desktop: 4 across */
.na__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:32px;
  margin-top:18px;
}

/* Tablet: still 4 across but tighter */
@media (max-width: 1200px){
  .na__grid{
    gap:24px;
  }
}

/* Mobile: 2 across */
@media (max-width: 768px){
  .na__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
  }
}

/* NOTE:
   If you are now injecting GLOBAL product card markup from collection pages,
   do NOT style .na__card/.na__imgwrap/.na__img/.na__name/.na__price here,
   because those elements may not exist (or could conflict with theme cards).
   Keeping this section focused on layout + tabs + CTA ensures alignment. */

.na__footer{
  display:flex;
  justify-content:center;
  margin-top:34px;
}

.na__viewall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  min-width:220px;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,#ff63c6 0%,#c92cff 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  transition:transform .15s ease, filter .15s ease;
}

.na__viewall:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

/* General small-screen tuning */
@media (max-width: 980px){
  .na__tabs{ gap:18px; }
  .na__tab{ font-size:16px; }
}
/* ======================================
   Soft transition for tab product swaps
   ====================================== */

.na__grid{
  transition:
    opacity 220ms ease-in-out,
    transform 220ms ease-in-out;
}

/* Fading out (before fetch completes) */
.na__grid.is-fading{
  opacity: 0;
  transform: translateY(6px);
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .na__grid{
    transition: none;
  }
}
.na__tab::after{
  transition:
    width 200ms ease,
    opacity 200ms ease,
    transform 200ms ease;
}
.na__grid{
  transition: opacity 220ms ease-in-out, transform 220ms ease-in-out;
}
.na__grid.is-fading{
  opacity: 0;
  transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce){
  .na__grid{ transition: none; }
}

}
#fw-section-rich-text-30efc137-774d-48ef-aed0-ee8786b4d771 {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #f40094;
--color-background-rgb: 244, 0, 148;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 90;
background-color: var(--color-background);
color: var(--color-on-background);
h1 {
  font-size: 55px;
  font-weight: bold;
  line-height: 70px;
}
h2 {
  font-size: 31.74px;
  color: #000;
  font-weight: normal;
}
}
#fw-section-recent-videos-8a076ebd-e677-4556-a772-a7d1385bc740 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #f40094;
--color-background-rgb: 244, 0, 148;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #000000;
--color-on-background-rgb: 0, 0, 0;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 90;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-links-list-fbe759b4-74b9-4943-9962-42135a3aecdd {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #f40094;
--color-background-rgb: 244, 0, 148;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 90;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-b1393e86-f90a-4569-b9f1-aff616c67e15 {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* ===== Static Icons Bar ===== */
.marquee-wrapper.icons-bar {
  width: 100%;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.25rem 0; /* spacing inside borders */
}

/* Center the icons horizontally */
.icons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem; /* space between icons */
}

/* Icon styles */
.icons-container i {
  font-size: 3rem; /* icon size */
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Optional hover effects */
.icons-container i:hover {
  color: #ff0000; /* YouTube red as default hover color */
  transform: scale(1.15);
}

/* Individual hover colors (optional) */
.icons-container a:nth-child(1):hover i { color: #bf94ff; } /* Twitch */
.icons-container a:nth-child(2):hover i { color: #ff0000; } /* YouTube */
.icons-container a:nth-child(3):hover i { color: #fff; }    /* X stays white */
.icons-container a:nth-child(4):hover i { color: #5865f2; } /* Discord blurple */

/* Remove any default section spacing from page builder */
section:has(.icons-bar),
div:has(.icons-bar) {
  margin: 0 !important;
  padding: 0 !important;
}

}
#fw-section-image-with-text-37c76b13-4cf7-4235-b12d-4207696c7b26 {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #4a00a5;
--color-background-rgb: 74, 0, 165;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 41;
background-color: var(--color-background);
color: var(--color-on-background);
h1{font-size:5rem;}
h3{font-weight:300;}

@media only screen and (max-width: 950px) {

h1{font-size:3.5rem;}
h3{font-weight:300;}
  }
}
#fw-section-image-with-text-86be078b-9bc0-47ba-bb66-db53c98e030c {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #164295;
--color-background-rgb: 22, 66, 149;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 62;
background-color: var(--color-background);
color: var(--color-on-background);
h1{font-size:5rem;}
h3{font-weight:300;}

@media only screen and (max-width: 950px) {

h1{font-size:3.5rem;}
h3{font-weight:300;}
  }
}
#fw-section-image-with-text-b723516e-6058-4c80-aa6f-5c487cc45fd5 {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
h1{font-size:5rem;}
h3{font-weight:300;}

@media only screen and (max-width: 950px) {

h1{font-size:3.5rem;}
h3{font-weight:300;}
  }
}
#fw-section-featured-collection-d4a78030-d193-4986-8c48-55af15ee0e32 {

.grid__column--4\@md {
  flex-basis: 25%
}
@media only screen and (max-width: 950px) {

.grid__column--4\@md {
  flex-basis: 50%
  }}
}
#fw-section-image-with-text-f58d9f33-a072-4227-8c60-093c4e1d1008 {

h1{font-size:5rem;}
h3{font-weight:300;}

@media only screen and (max-width: 950px) {

h1{font-size:3.5rem;}
h3{font-weight:300;}
  }
}
#fw-section-image-with-text-408e28d1-7f20-47f7-9e72-4135eac8e13e {

h1{font-size:5rem;}
h3{font-weight:300;}

@media only screen and (max-width: 950px) {

h1{font-size:3.5rem;}
h3{font-weight:300;}
  }
}


#fw-section-donations-323e9e0d-3131-4205-bc1b-d9cbb3a18f6a {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-footer {
--color-primary: #f40094;
--color-primary-rgb: 244, 0, 148;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* Hide Footer Social Icons Globally */
.footer__social,
ul.footer-list__social,
ul.footer__social-icons,
a[href*="youtube.com"],
a[href*="twitch.tv"],
a[href*="x.com"],
a[href*="discord.com"] {
    display: none !important;
}

}
#fw-section-announcement-bar-ef1017fd-6ab3-4824-84cd-1ecc97f5189e {
--color-primary: #030303;
--color-primary-rgb: 3, 3, 3;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #3c3c3c;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
.announcement-bar {
   background-color: var(--color-background);
    color: var(--color-on-primary);
    font-size: 0.75rem;
}
.announcement-bar a {
    color: rgba(var(--color-on-background-rgb), 0.5);
    text-decoration: none;
}
}
#fw-section-header {

a {font-weight:900;font-size:1.1rem;}
main__sections first-child first-child {
        padding-bottom: 0px !important;
    }
main__sections {padding-bottom: 0px !important;}
}