#fw-section-hero-1771605481 {

.section-background__image {
  position: relative; 
}

.section-background__image::before {
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #84b6d900 -30%, #000015 100%);
  pointer-events: none; 
  z-index: 0; 
}

.section-background__image > * {
  position: relative;
  z-index: 1;
}

.hero__content {
text-shadow: 2px 2px 0px black;
}

a {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
a::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 0l2 2-8 8 1 1-2 2-2-2-2 2-2-2 2-2-2-2 2-2 1 1 8-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 0l2 2-8 8 1 1-2 2-2-2-2 2-2-2 2-2-2-2 2-2 1 1 8-8z'/%3E%3C/svg%3E");
  
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
a:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
a:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}

.hero__container {
    margin-inline: 16px;
   background: linear-gradient(145deg, #84b6d9 0%, #000015 100%);
  border: 4px solid #ffffff;
  box-shadow: 
    0 0 0 2px #6b6d75,        
    inset 0 0 0 2px #6b6d75;  
  border-radius: 5px;
  padding: 4px; 
  box-sizing: border-box;
  overflow: hidden; 
}

@media (min-width: 768px) {
  .hero__container {
    margin-inline: 32px;
  }
}
}
#fw-section-featured-collection-1771605481 {

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}

}
#fw-section-featured-collection-cb9b1f94-c6a9-4782-a1b1-3818f1f15c7e {

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}
}
#fw-section-featured-collection-a5aa81d4-ba5e-45db-87ba-54f6f629c575 {

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}
}
#fw-section-featured-collection-8bc9a3fb-541c-4ad1-a670-0dd07bdf3d80 {

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}
}
#fw-section-featured-collection-c89cc2eb-170d-49f3-80ad-5e6fb2dac40c {

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h2v2h4V2h2v2h2v4h-2v6H4V8H2V4h2V2z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}
}
#fw-section-recent-videos-1d7b03c6-c4fa-4dd3-b012-ec399992d1ae {

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10h3v2h-1v1H3v-1H2v-1h1z M5 3h1v7H5z M5 2h8v2H5z M12 3h1v7h-1z M10 10h3v2h-1v1h-2v-1H9v-1h1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10h3v2h-1v1H3v-1H2v-1h1z M5 3h1v7H5z M5 2h8v2H5z M12 3h1v7h-1z M10 10h3v2h-1v1h-2v-1H9v-1h1z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}


.video-tile {
  background: linear-gradient(180deg, #001489 0%, #000015 100%);

border: 4px solid #ffffff;

box-shadow: 0 0 0 2px #6b6d75, inset 0 0 0 2px #6b6d75;

border-radius: 5px;

padding: 4px;

box-sizing: border-box;

overflow: hidden;
}
.video-tile__title {
  padding: 4px 16px;
  /* Enables the flexbox-like model needed for line clamping */
  display: -webkit-box;
  
  /* Sets the box to stack its contents vertically */
  -webkit-box-orient: vertical;
  
  /* The magic number: limits the text to exactly 2 lines */
  -webkit-line-clamp: 2;
  
  /* Hides any text that overflows beyond those 2 lines */
  overflow: hidden;
  
  /* Optional: Ensures the text wraps cleanly on word breaks */
  word-wrap: break-word; 
}
}
#fw-section-newsletter-7d9a2eb9-b090-4e4f-867d-51bd74f4a8e4 {

/* Ensure the container spaces the input and potential error messages cleanly */
.newsletter-form__input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.input-field {
  width: 100%;
}

/* The primary text input styling */
.input-field__input {
  /* Reset defaults */
  appearance: none;
  border: none;
  outline: none;
  
  /* Start with a very dark, near-black blue for the resting state */
  background-color: #000015; 
  color: #ffffff;
  height: 53px;
  width: 100%;
  box-sizing: border-box;

  /* Sizing & Typography */
  padding: 16px;
  font-family: 'Press Start 2P', monospace; /* Keep the 8-bit font consistent */
  font-size: 14px;

  /* Space for the box-shadow borders */
  margin: 4px;

  /* Inset 8-bit shadow to make it look like a carved-out text field */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.8),         /* Deep inner shadow top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Faint inner highlight bottom/right */
    0px -4px 0px #000,                            /* Top black border */
    0px 4px 0px #000,                             /* Bottom black border */
    -4px 0px 0px #000,                            /* Left black border */
    4px 0px 0px #000;                             /* Right black border */

  transition: background-color 0.2s ease-in-out;
}

/* Style the placeholder text so it matches the vibe */
.input-field__input::placeholder {
  color: #8b8d96; /* Classic retro muted gray */
  text-transform: uppercase; 
}

/* Focus state: When the user clicks into the field to type */
.input-field__input:focus {
  background-color: #000015;                    /* Right black border */         /* Right black border */
}

/* Optional: Style the error message container just in case it triggers */
.form__error {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #ff5e5e; /* Retro 16-bit red */
  text-transform: uppercase;
}

.button {
  /* Reset default button styles */
  appearance: none;
  border: none;
  outline: none;
  background-color: #0058b0; /* Classic Final Fantasy menu blue */
  color: white;
  text-decoration: none; /* Removes default link underline */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* The space between the sword and the text */
  
  /* Sizing & Typography */
  padding: 16px 24px;
  font-family: 'Press Start 2P', monospace; /* Applies the 8-bit font */
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  
  /* Make room for the outer box-shadow borders */
  margin: 4px; 
  
  /* The 8-bit magic: layering shadows */
  box-shadow: 
    /* 1. Inner highlight (top and left) */
    inset 4px 4px 0px rgba(255, 255, 255, 0.4),
    /* 2. Inner shadow (bottom and right) */
    inset -4px -4px 0px rgba(0, 0, 0, 0.4),
    /* 3. Outer black pixel border edges */
    0px -4px 0px #000, /* Top */
    0px 4px 0px #000,  /* Bottom */
    -4px 0px 0px #000, /* Left */
    4px 0px 0px #000;  /* Right */

  /* Smooth out the transition for the click effect */
  transition: transform 0.1s, box-shadow 0.1s;
}

/* The inline sword icon acting as a stencil */
.button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  
  /* The background color fills the mask. 
     'currentColor' makes it perfectly match your text color! */
  background-color: currentColor; 

  /* The inline pixel-art sword SVG acting as a stencil */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h12v1H2z M2 11h12v1H2z M2 5h1v6H2z M13 5h1v6H13z M3 5h1v1H3z M12 5h1v1H12z M4 6h1v1H4z M11 6h1v1H11z M5 7h1v1H5z M10 7h1v1H10z M6 8h4v1H6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h12v1H2z M2 11h12v1H2z M2 5h1v6H2z M13 5h1v6H13z M3 5h1v1H3z M12 5h1v1H12z M4 6h1v1H4z M11 6h1v1H11z M5 7h1v1H5z M10 7h1v1H10z M6 8h4v1H6z'/%3E%3C/svg%3E");
  /* Keep the icon contained and unrepeated */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  /* Forces the browser to keep the SVG edges sharp and blocky */
  image-rendering: pixelated; 
}

/* Hover state: slight brightness bump */
.button:hover {
  background-color: #006ce6;
  opacity: 1;
}

/* Active state: the physical "press" down */
button:active {
  /* Push the button down to mimic 3D movement */
  transform: translateY(4px);
  
  /* Invert the inner shadows to make it look depressed */
  box-shadow: 
    inset 4px 4px 0px rgba(0, 0, 0, 0.5), /* Inner shadow moves to top/left */
    inset -4px -4px 0px rgba(255, 255, 255, 0.1), /* Highlight moves to bottom/right */
    0px -4px 0px #000, 
    0px 0px 0px #000, /* Remove bottom border offset to sit flat */
    -4px 0px 0px #000, 
    4px 0px 0px #000; 
}

}

#fw-section-header {

.header__logo-image {
  max-height: 48px !important;      
}

@media (min-width: 768px) {
  .header__logo-image {
    max-height: none !important;      
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  /* Scoped specifically to the main navigation to protect your cart/icons */
  .header__nav .header__list-item:nth-last-child(-n+2) {
    display: none !important;
  }
}

.header__list-item, .mobile-menu__list-item {
  font-family: var(--font-family-heading);
}

.header__list-item a:hover, .mobile-menu__list-item:hover {
  color: var(--color-primary);
}

/* =========================================
   1. MOBILE SETTINGS (Default: Logo left, "RGL" right)
   ========================================= */

/* Use Flexbox to align everything in a single row */
.header__logo-link {
  display: inline-flex;
  align-items: center; 
  text-decoration: none;
}

/* 1st: Force the image to sit on the far left */
.header__logo-image {
  order: 1;
}

/* 2nd: The "RG" text comes immediately after the image */
.header__logo-link::before {
  content: "RG";
  font-family: var(--font-family-heading) !important;
  color: #ffffff; 
  font-size: 24px; 
  margin-left: 12px; /* Adds a nice gap between the logo and the text */
  order: 2;
  margin: -6px 0 0 -16px;
}

/* 3rd: The "L" text in red comes last */
.header__logo-link::after {
  content: "L";
  font-family: var(--font-family-heading) !important;
  color: var(--color-primary); 
  font-size: 24px;
  order: 3;
  margin-top: -6px;
}


/* =========================================
   2. TABLET & DESKTOP (768px+: Stacked layout)
   ========================================= */
@media (min-width: 768px) {
  
  /* Switch from Flexbox to a 2-column, 2-row Grid */
  .header__logo-link {
    display: inline-grid;
    grid-template-columns: auto 1fr; 
    grid-template-rows: auto auto; 
    column-gap: 16px; /* Replaces the margin-left used on mobile */
  }

  /* Lock the image into the left column spanning both rows */
  .header__logo-image {
    grid-column: 1;
    grid-row: 1 / span 2; 
    align-self: center; 
  }

  /* Swap "RG" to "Retro Gamer" and place it in the top row */
  .header__logo-link::before {
    content: "Retro Gamer";
    margin-left: 0; /* Reset the mobile spacing so the grid handles it */
    grid-column: 2;
    grid-row: 1;
    align-self: end; 
    line-height: 1;
    font-size: 24px;
    margin-top: -6px;
  }

  /* Swap "L" to "LoFi" and place it in the bottom row */
  .header__logo-link::after {
    content: "LoFi";
    grid-column: 2;
    grid-row: 2;
    align-self: start; 
    line-height: 1;
    margin-top: 4px; /* A tiny gap between the top and bottom words */
  }
}
}