@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* ----- reset styles ------ */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button,
a {
  background: none;
  outline: none;
  border: none;
  text-decoration: none;
}
/* ----- end of reset styles ------ */

:root {
  /* Primary Colors */
  --color-nornir-gold: #d4af37;
  --color-nordic-blue: #1c5a7b;
  --color-gow-red: #7b3031;
  --color-laufey-purple: #5a2a70;
  --accent-blue: #3682b1;
  --accent-red: #c61919;

  /* Typography */
  --font-heading: "Cinzel", serif;
  --font-subheading: "Cinzel", serif;
  --font-body: "Lato", sans-serif;

  /* Border Radius & Spacing UI */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Default Dark Mode Semantic Mapping */
  --bg-primary: #0d0d0d;
  --bg-primary-always: #0d0d0d;
  --text-white: #fff;
  --text-white-always: #fff;
  --text-black: #000;
  --text-black-always: #000;
  --light-line: #ffffff30;
}

[data-theme="light"] {
  /* Light Mode Overrides */
  --bg-primary: #f2f2f2;
  --bg-primary-always: #0d0d0d;
  --text-white: #000;
  --text-white-always: #fff;
  --text-black: #fff;
  --text-black-always: #000;
  --light-line: #00000035;
  --color-nornir-gold: #b99b37;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-white);
  transition:
    background-color 0.25s ease,
    color 0.3s ease;
  max-width: 100dvw;
  overflow-x: hidden;
}

.content-wrapper {
  max-width: 1500px;
  margin: auto auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
section {
  padding: 3.5rem 6rem;
}

.img-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ----- fonts & font sizes seprate ------ */

h1 {
  font-family: var(--font-heading);
  color: var(--text-white-always);
  font-weight: 900;
  font-size: 4rem;
  letter-spacing: 1px;
}
h2 {
  font-size: 2.5rem;
  font-weight: 800;
  span {
    font-size: 2.5rem;
  }
}
h3 {
  font-weight: 600;
  font-size: 2rem;
}
h4 {
  font-weight: 400;
  font-size: 1.25rem;
}

section {
  p {
    font-size: 1.15rem;
    font-weight: 300;
  }
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-subheading);
  color: var(--text-white);
  span {
    font-family: var(--font-subheading);
  }
  .red {
    color: var(--accent-red);
  }
  .blue {
    color: var(--accent-blue);
  }
}

a,
i,
p,
span,
textarea {
  color: var(--text-white);
  font-family: var(--font-body);
  line-height: 1.5;
  font-size: 1rem;
}
a {
  font-size: 1rem;
  font-family: var(--font-subheading);
}

button,
.btn {
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  font-family: var(--font-subheading);
  span {
    font-family: var(--font-subheading);
  }
}

/* ----- site navigation ------ */
nav {
  .logo-link {
    .logo-img {
      height: 3rem;
    }
  }
  button {
    height: 2.5rem;
    width: 2.5rem;
    position: relative;
    i {
      transition: 0.2s ease-in-out;
      user-select: none;
      pointer-events: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;

      &.active {
        opacity: 1;
      }
    }
  }
  /* for reveal animations */
  ul {
    li {
      overflow: hidden;
      a {
        border-radius: var(--radius-sm);
        overflow: hidden;
        padding: 0.5rem 0.75rem;
        position: relative;
        display: flex;
        transition:
          transform 0.25s ease-in-out,
          color 0.25s ease-in-out;
      }
    }
  }
}
.topnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  width: 95%;
  margin: auto auto;
  .top-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    a {
      padding: 0.5rem 1rem;
    }
  }
  hr {
    width: 100%;
    background: var(--light-line);
    border: none;
    height: 1px;
  }
}

.scroll-nav {
  z-index: 100;
  transition: 0.25s ease-in-out;
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transform: translateY(-100%);
  background: var(--bg-primary);
  position: fixed;
  top: 0.5rem;
  left: 2rem;
  right: 2rem;
  border: 1px solid var(--light-line);
  margin: auto auto;
  padding: 0.25rem 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  border-radius: var(--radius-sm);
  .logo-link {
    margin-right: auto;
    .logo-img {
      padding-top: 5px;
      height: 30px;
    }
  }
  .menu-control-btn {
    display: none;
  }
  .desktop-links-wrapper ul {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
  &.active {
    transform: translateY(0%);
    opacity: 1;
    user-select: auto;
    pointer-events: auto;
  }
}

.overlay-menu {
  transition:
    transform 0.25s ease-in-out,
    background-color 0.25s ease;
  transform: translateY(-100%);
  background: var(--bg-primary);
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  width: 100dvw;
  height: 100dvh;
  display: none;
  flex-direction: column;
  align-items: center;
  .page-links {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3rem;
      li {
        a {
          opacity: 0;
          transform: translateY(100%);
          font-size: 1.25rem;
        }
      }
    }
  }
  &.active {
    transform: translateY(0%);
    ul {
      li {
        a {
          opacity: 1;
          transform: translateY(0%);
        }

        &:nth-child(1) a {
          transition-delay: 0.25s;
        }

        &:nth-child(2) a {
          transition-delay: 0.35s;
        }

        &:nth-child(3) a {
          transition-delay: 0.45s;
        }

        &:nth-child(4) a {
          transition-delay: 0.55s;
        }

        &:nth-child(5) a {
          transition-delay: 0.65s;
        }

        &:nth-child(6) a {
          transition-delay: 0.75s;
        }
      }
    }
  }
}

/* for shopping cart item numbers */
.shopping-cart {
  position: relative;
  .cart-count-badge {
    position: absolute;
    top: 0px;
    right: 0px;
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
  }
}

/* ----- header ----- */
header {
  position: relative;
  height: 95dvh;
  max-height: 1000px;
  width: 100dvw;
  overflow: hidden;
  .img-wrapper {
    z-index: 1;
    position: absolute;
    inset: 0;

    /* fade on bottom */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        #0d0d0d 5%,
        #0d0d0dbf 15%,
        #0d0d0d80 25%,
        #0d0d0d40 35%,
        #0d0d0d00 45%
      );
      pointer-events: none;
    }
    picture {
      filter: brightness(0.8);
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.25s ease-in-out;
      &.active {
        opacity: 1;
      }
    }
  }
  .content-container {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem;

    /* big text wrapper */
    .head-text-container {
      margin-bottom: auto; /* Keeps the bottom margin push */
      position: relative;
      width: 100%;
      min-height: 100px; /* Gives it a base height like description */
      height: 50%;
      overflow: hidden;

      div {
        height: 100%;

        h1 {
          position: absolute;
          top: 0;
          width: 100%;
          margin: 0;
          opacity: 0;
          user-select: none;
          pointer-events: none;
          transform: translateY(-100%);
          transition:
            opacity 0.4s ease-in-out,
            transform 0.4s ease-in-out;
        }

        &.active {
          h1 {
            opacity: 1;
            user-select: auto;
            pointer-events: auto;
            transform: translateY(0%);
          }
        }
      }
    }

    /* small text above buttons */
    .desc-text-container {
      /* Keeps layout identical to the top box */
      position: relative;
      width: 100%;
      max-width: 750px;
      height: 25%;
      min-height: 50px;
      overflow: hidden;

      div {
        height: 100%;

        p {
          color: var(--text-white-always);
          position: absolute;
          bottom: 0;
          width: 100%;
          margin: 0;
          font-size: 1.1rem;
          opacity: 0;
          user-select: none;
          pointer-events: none;
          transform: translateY(100%);
          transition:
            opacity 0.65s ease-in-out,
            transform 0.65s ease-in-out;
        }

        &.active {
          p {
            opacity: 1;
            user-select: auto;
            pointer-events: auto;
            transform: translateY(0%);
          }
        }
      }
    }

    /* controll buttons */
    .buttons-container {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 0.5rem;

      button {
        border-radius: var(--radius-sm);
        transition: 0.25s ease-in-out;
        color: var(--text-white-always);
        font-size: 1.15rem;
        width: 200px;
        padding: 0.75rem;
        backdrop-filter: blur(0.5rem) brightness(2);

        &.active {
          &.original {
            background: var(--color-gow-red);
          }
          &.ragnarok {
            background: var(--color-nordic-blue);
          }
          &.laufey {
            background: var(--color-laufey-purple);
          }
        }
      }
    }

    /* bottom scroll for more arrow & text */
    .scroll-for-more {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      p,
      i {
        color: var(--text-white-always);
        font-size: 0.9rem;
      }
    }
  }
}

/* ----- story intro ----- */
.story-intro {
  text-align: center;
  p {
    margin: auto auto;
    max-width: 800px;
  }
}

/* ----- story game cards ------ */
.game-story-cards {
  .section-title {
    margin-bottom: 2rem;
    text-align: center;
  }
  /* Card Layout Container */
  .card-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  /* Core Card Layout */
  .card {
    display: flex;
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 350px;
    /* Theme Backgrounds */
    &.card-red {
      background-color: var(--color-gow-red);

      .img-wrapper::after {
        background: linear-gradient(
          to right,
          var(--color-gow-red) 0%,
          #7b3031cc 15%,
          transparent 35%
        );
      }
    }
    &.card-blue {
      background-color: var(--color-nordic-blue);

      .img-wrapper::after {
        background: linear-gradient(
          to right,
          var(--color-nordic-blue) 0%,
          #30739dcc 15%,
          transparent 35%
        );
      }
    }
    &.card-purple {
      background-color: var(--color-laufey-purple);
      /* flip the image */
      .img-wrapper {
        img {
          transform: scaleX(-1);
        }
      }

      .img-wrapper::after {
        background: linear-gradient(
          to right,
          var(--color-laufey-purple) 0%,
          #5a2a70cc 15%,
          transparent 35%
        );
      }
    }
    /* Left Side: Content Box */
    .card-content {
      flex: 1;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      z-index: 2;
      * {
        color: var(--text-white-always);
      }
      p {
        padding-left: 0.5rem;
      }
    }

    /* Right Side: Media Box */
    .img-wrapper {
      flex: 1.3;
      position: relative;
      overflow: hidden;

      /* Visual Fade Masks using Nesting + Parent Reference */
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }

      picture {
        width: 100%;
        height: 100%;
      }

      /* Action Buttons */
      .btn {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1.25rem;
        border-radius: var(--radius-sm);
        text-decoration: none;
        font-weight: bold;
        color: white;
        z-index: 3;
        transition:
          background-color 0.2s ease-in-out,
          color 0.2s ease-in-out;
        font-size: 1rem;

        &.btn-red {
          background: var(--color-gow-red);
        }
        &.btn-blue {
          background: var(--color-nordic-blue);
        }
        &.btn-purple {
          background: var(--color-laufey-purple);
        }
      }
    }
  }
}

/* ----- game product cards ----- */
.game-product-cards {
  .section-title {
    text-align: center;
    margin-bottom: 2rem;
  }
  .saga-cards-grid {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    align-items: start;
    justify-content: center;
    gap: 2rem;
    .saga-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: calc(33%);
      gap: 1rem;
      .img-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1; /* Makes the wrapper a perfect square */
        border-radius: var(--radius-md);
        overflow: hidden;
        img {
          transition: transform 0.25s ease;
        }
      }
      /* Typography underneath the art */
      .game-title {
        text-align: center;
        font-size: 1.25rem;
        text-transform: uppercase;
      }
      /* Horizontal layout for action items */
      .buttons-container {
        display: flex;
        width: 90%;
        gap: 1rem;
        .btn {
          color: var(--text-white);
          flex: 1;
          padding: 1rem 0.5rem;
          font-size: 0.85rem;
          font-weight: 600;
          text-align: center;
          text-decoration: none;
          border-radius: var(--radius-sm);
          transition: all 0.25s ease-in-out;
          opacity: 0.8;
          position: relative;
          overflow: hidden;
          span {
            font-size: 0.85rem;
            display: block;
            transition:
              opacity 0.25s ease-in-out,
              transform 0.25s ease-in-out;
            &:first-child {
              opacity: 1;
              transform: translateY(0);
            }
            &:last-child {
              position: absolute;
              inset: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transform: translateY(100%);
            }
          }
          &:hover {
            color: var(--text-black-always);
            span {
              color: var(--text-black-always);
              &:first-child {
                opacity: 0;
                transform: translateY(-100%);
              }

              &:last-child {
                opacity: 1;
                transform: translateY(0);
              }
            }
          }

          &.btn-outline {
            border: 1px solid var(--light-line);
          }

          &.btn-disabled {
            color: var(--text-white);
            background-color: transparent;
            border: 1px solid var(--light-line);
            cursor: not-allowed;
            opacity: 0.5;
          }
        }
      }
    }
  }
}

/* ----- game popup details ----- */
.popup {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85); /* Black dimming overlay background */
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;

  /* State when JavaScript triggers the popup open */
  &.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Inner Card Content Box */
  .popup-inner {
    background-color: var(--bg-primary);
    border: 1px solid var(--light-line);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
  }

  /* Close Action Button */
  .popup-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 2rem;
    cursor: pointer;
  }

  /* Header Container */
  .popup-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-line);

    /* Little UI Promotion Badges */
    .badge {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--text-white-always);
      filter: brightness(1.25);

      &.badge-sale {
        background-color: var(--color-gow-red);
      }
      &.badge-blue {
        background-color: var(--color-nordic-blue);
      }
      &.badge-upcoming {
        background-color: var(--color-laufey-purple);
      }
    }
  }

  /* Main Body Section */
  .popup-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    /* Store Meta Specification Layout */
    .store-specs {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .spec-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Aligns text correctly if layout wraps lines */
        gap: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px dashed var(--light-line);

        .spec-label {
          white-space: nowrap; /* Prevents titles from packing into narrow lines */
          font-weight: 600;
        }

        .spec-value {
          font-weight: 600;
          text-align: right;
          font-size: 0.9rem;
          max-width: 400px;
        }
      }
    }
  }
}

/* ----- Characters Section Styling ----- */
.characters {
  .section-title {
    text-align: center;
    margin-bottom: 3rem;
  }
  .character-showcase-container {
    display: flex;
    flex-direction: row;
    background-color: var(--bg-primary-always);
    border: 1px solid var(--light-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 550px;
    position: relative;
    gap: 0;
    /* Left Vertical Navigation Menu */
    .character-nav {
      width: 280px;
      background-color: rgba(0, 0, 0, 0.4);
      border-right: 1px solid var(--light-line);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 2rem 1rem;
      gap: 0.5rem;
      z-index: 2;

      .char-nav-btn {
        text-align: left;
        color: var(--text-muted);
        padding: 0.75rem 1.25rem;
        border-radius: var(--radius-sm);
        background: transparent;
        cursor: pointer;
        color: var(--text-white-always);

        &:hover {
          color: var(--text-white-always);
          background: var(--light-line);
        }

        &.active {
          color: var(--text-white-always);
          background-color: var(--color-nornir-gold);
          color: var(--text-black);
        }
      }
    }
    /* Right Content Display Area */
    .character-display-area {
      flex: 1;
      position: relative; /* Container for absolute positioned cards */
      overflow: hidden;
      background: radial-gradient(circle at right, #1f2226 0%, #0d0d0d 70%);
      /* Individual Content Panels */
      .char-panel {
        position: absolute;
        inset: 0;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 3rem;
        gap: 2rem;
        opacity: 0;
        pointer-events: none;
        transform: translateX(20px);
        transition:
          opacity 0.4s ease-in-out,
          transform 0.4s ease-in-out;
        &.active {
          opacity: 1;
          pointer-events: auto;
          transform: translateX(0);
        }

        .char-info {
          flex: 1.2;
          display: flex;
          flex-direction: column;
          gap: 1.25rem;
          z-index: 2;

          h3 {
            color: var(--text-white-always);
          }

          p {
            color: #dfdfdf;
            line-height: 1.6;
          }

          .char-weapons {
            margin-top: 1rem;
            h4 {
              color: var(--color-nornir-gold);
              margin-bottom: 0.35rem;
            }
          }
        }

        .img-wrapper {
          min-width: 0;
          flex: 1;
          height: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          position: relative;
          z-index: 1;

          img {
            max-height: 500px;
            width: auto;
            object-fit: contain;
          }
        }
      }
    }
  }
}

/* ----- shopping cart overlay sytles ------ */
.cart-popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;

  &.open {
    opacity: 1;
    pointer-events: auto;
  }

  .cart-popup-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--light-line);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 750px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    max-height: 95dvh;
    overflow-y: auto;

    h3 {
      text-align: center;
      border-bottom: 1px solid var(--light-line);
      padding-bottom: 1rem;
    }

    .cart-close-btn {
      position: absolute;
      top: 0.75rem;
      right: 1rem;
      background: none;
      border: none;
      color: var(--text-white);
      font-size: 2rem;
      cursor: pointer;
      &:hover {
        color: var(--color-nornir-gold);
      }
    }

    #cart-items-container {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      overflow-y: auto;
      padding-right: 0.5rem;
    }

    .cart-item-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff13;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--light-line);

      .cart-item-details {
        display: flex;
        align-items: center;
        gap: 1rem;

        .cart-item-remove {
          background: none;
          border: none;
          color: var(--text-white);
          font-size: 1.5rem;
          cursor: pointer;
          font-weight: bold;
          transition: transform 0.2s;

          &:hover {
            transform: scale(1.2);
            color: var(--color-nornir-gold);
          }
        }
      }
    }

    .cart-summary {
      border-top: 1px solid var(--light-line);
      padding-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;

        &.total-row {
          font-weight: 700;
          font-size: 1.2rem;
          color: var(--color-nornir-gold);
          border-top: 1px dashed var(--light-line);
          padding-top: 0.5rem;
          margin-top: 0.25rem;
        }
      }
    }

    .cart-actions {
      display: flex;
      justify-content: stretch;

      button {
        width: 100%;
        padding: 0.75rem;
        border-radius: var(--radius-sm);
        background: var(--color-gow-red);
        color: var(--text-white-always);
        &:hover {
          background: var(--color-nornir-gold);
          color: var(--text-black-always);
        }
      }
    }

    .checkout-msg-box {
      display: none;
      border: 1px solid var(--light-line);
      padding: 1rem;
      border-radius: var(--radius-sm);
      text-align: center;
      h4 {
        color: var(--color-nornir-gold);
      }
      p {
        color: var(--text-white);
      }
    }
  }
}

/* ----- Gallery Section Styling ----- */
.gallery-section {
  .section-title {
    text-align: center;
    margin-bottom: 3rem;
  }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    .gallery-card {
      cursor: pointer;
      background-color: #121212;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 16 / 10;
      transition:
        transform 0.3s ease,
        border-color 0.3s ease;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
      }
    }
  }
}

/* ----- popup images ----- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  /* Active state (when open) */
  &.active {
    opacity: 1;
    pointer-events: auto;
  }
  .img-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 90dvw;
    height: auto;
  }
  p {
    color: var(--text-white-always);
    position: absolute;
    bottom: 0.5rem;
    font-size: 0.9rem;
  }
}

/* ----- Contact Section Styling ----- */
.contact-section {
  .contact-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
    .contact-form-wrapper {
      flex: 1.2;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      font-family: var(--font-body);
      .section-title {
        margin-bottom: 0.5rem;
      }
      /* for the submit info */
      .success-box {
        display: none;
        flex-direction: column;
        gap: 1rem;
        #submitted-info-list {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          font-size: 1rem;
        }
        .another-message-btn {
          margin-top: 0.5rem;
          align-self: flex-start;
          border: 1px solid var(--light-line);
          padding: 0.6rem 2.5rem;
          color: var(--text-white);
          border-radius: var(--radius-sm);
          &:hover {
            color: var(--text-black);
            background-color: var(--color-nornir-gold);
          }
        }
      }
      #contact-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        .form-group {
          input,
          textarea {
            width: 100%;
            background: var(--bg-primary);
            border: 1px solid var(--light-line);
            border-radius: var(--radius-sm);
            color: var(--text-white);
            padding: 0.9rem 1.2rem;
            outline: none;
            transition: border-color 0.3s ease;
            &:focus {
              border-color: var(--color-nornir-gold);
            }
          }
          .error-msg {
            color: var(--accent-red);
          }
          textarea {
            resize: vertical;
          }
          .radio-options {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;

            label {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              min-width: 120px;
              padding: 0.75rem 1.25rem;

              color: var(--text-white);
              border: 1px solid var(--light-line);
              border-radius: var(--radius-sm);
              background: rgba(255, 255, 255, 0.02);

              cursor: pointer;
              transition:
                border-color 0.3s ease,
                background-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease,
                transform 0.2s ease;

              &:hover {
                border-color: var(--color-nornir-gold);
                background: rgba(212, 175, 55, 0.08);
              }

              input {
                position: absolute;
                opacity: 0;
                pointer-events: none;
              }

              &:has(input:checked) {
                color: var(--text-black);
                background: var(--color-nornir-gold);
                border-color: var(--color-nornir-gold);
              }
            }
          }
        }
        .form-footer {
          display: flex;
          gap: 2rem;
          align-items: center;
          padding: 0.5rem 0;
          p {
            font-size: 0.9rem;
          }
          .notification-pref {
            display: flex;
            flex-direction: column;
          }
          .toggle-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            .switch {
              position: relative;
              display: inline-block;
              width: 50px;
              height: 26px;
              input {
                opacity: 0;
                width: 0;
                height: 0;

                &:checked + .slider {
                  background-color: var(--color-nornir-gold);
                  border-color: var(--color-nornir-gold);

                  &:before {
                    transform: translateX(24px);
                    background-color: #000;
                  }
                }
              }

              .slider {
                position: absolute;
                cursor: pointer;
                inset: 0;
                background-color: #333;
                transition: 0.3s;
                border-radius: 34px;
                border: 1px solid #444;

                &:before {
                  position: absolute;
                  content: "";
                  height: 18px;
                  width: 18px;
                  left: 3px;
                  bottom: 3px;
                  background-color: white;
                  transition: 0.3s;
                  border-radius: 50%;
                }
              }
            }
          }
        }

        .submit-btn {
          align-self: flex-start;
          border: 1px solid var(--light-line);
          padding: 0.6rem 2.5rem;
          color: var(--text-white);
          border-radius: var(--radius-sm);
          &:hover {
            color: var(--text-black);
          }
        }
      }
    }

    .img-wrapper {
      flex: 1;
      border-radius: var(--radius-md);
      overflow: hidden;
      height: auto;
    }
  }
}

/* ----- Footer Section Styling ----- */
.site-footer {
  position: relative;
  background-image: url("../images/footer_bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 3.5rem;
  padding: 6rem 0 2.5rem 0;

  /* Dark overlay to ensure text stands out against the background image */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0a0a0a51;
    z-index: 1;
  }

  /* fade on bottom */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      #0d0d0d 5%,
      #0d0d0dbf 15%,
      #0d0d0d80 25%,
      #0d0d0d40 35%,
      #0d0d0d00 45%
    );
    pointer-events: none;
  }

  .footer-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

    .footer-logo {
      .logo-img {
        max-height: 40px;
        width: auto;
        object-fit: contain;
      }
    }

    /* Updated footer-review container to manage absolute sliding panels */
    .footer-review-container {
      padding: 0 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      width: 100%;
      max-width: 850px;

      .reviews-slider {
        position: relative;
        width: 100%;
        min-height: 175px; /* Reserves space to prevent vertical shifting */

        .review-panel {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center; /* Centers content vertically */
          text-align: center;
          gap: 1.5rem;
          opacity: 0;
          pointer-events: none;
          transform: translateY(10px);
          transition:
            opacity 0.4s ease-in-out,
            transform 0.4s ease-in-out;
          font-family: var(--font-subheading);
          color: var(--text-white-always);

          &.active {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
          }

          .rating {
            color: var(--color-nornir-gold);
          }

          .quote-text {
            font-size: 1.35rem;
            line-height: 1.5;
          }

          p {
            color: var(--text-white-always);
          }
        }
      }

      /* Dot Indicators Styling */
      .carousel-dots {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;

        .dot-btn {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #ffffff7a;
          cursor: pointer;
          padding: 0;
          transition: all 0.3s ease;
          backdrop-filter: blur(0.5rem) brightness(2);
          &:hover {
            background: var(--color-nornir-gold);
          }
          &.active {
            width: 40px;
            height: 20px;
            border-radius: var(--radius-sm);
            background-color: var(--color-nornir-gold);
          }
        }
      }
    }

    .footer-divider {
      width: 100%;
      border: none;
      border-top: 1px solid var(--light-line);
    }
    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      justify-content: center;
      gap: 3.5rem;
      padding: 0 0.5rem;
      a {
        color: var(--text-white-always);
        transition: 0.25s ease-in-out;
        &:hover {
          color: var(--color-nornir-gold);
        }
      }
    }

    .footer-copyright {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      opacity: 0.75;
      padding: 0 0.5rem;

      p {
        font-size: 0.85rem;
        color: var(--text-white-always);
      }
    }
  }
}

/* ===== HOVER & INTERACTION STATES ===== */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-nornir-gold);
  }

  nav button:hover i,
  .popup-close:hover,
  .shopping-cart:hover i {
    color: var(--color-nornir-gold);
    &.fa-moon {
      color: var(--accent-blue);
    }
  }

  .header-btn:not(.active):hover {
    color: var(--color-nornir-gold);
    background: transparent;
  }

  .game-story-cards .card .img-wrapper .btn:hover {
    background: var(--color-nornir-gold);
    color: var(--text-black);
  }

  .game-product-cards .saga-card .img-wrapper:hover img {
    transform: scale(1.04);
  }

  .game-product-cards
    .saga-card
    .buttons-container
    .btn:not(.btn-disabled):hover,
  .contact-section .submit-btn:hover {
    background: var(--color-nornir-gold);
    border-color: var(--color-nornir-gold);
    color: var(--text-black-always);
    opacity: 1;
  }

  .characters .char-nav-btn:not(.active):hover {
    color: var(--text-white);
    background: var(--light-line);
  }

  .gallery-card:hover {
    transform: translateY(-0.25rem);
    border-color: var(--color-nornir-gold);
  }

  .gallery-card:hover img {
    transform: scale(1.05);
  }
}

/* ----- scroll animations ------ */
.fade-in {
  opacity: 1;
}
@supports (animation-timeline: view()) {
  .fade-in {
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }

  .fade-in-card {
    animation: fadeIn linear;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(60px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Keyboard focus should remain visible even on devices without hover. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-nornir-gold);
  outline-offset: 3px;
}

/* ===== RESPONSIVE STYLES ===== */
/* ----- 1024px ----- */
@media screen and (max-width: 1024px) {
  section {
    padding: 3.5rem 4rem;
  }

  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2rem;
    span {
      font-size: 2rem;
    }
  }
  h3 {
    font-size: 1.75rem;
  }

  .topnav {
    width: 100%;
    padding-inline: 1.5rem;

    .page-links,
    hr {
      display: none;
    }
  }
  .scroll-nav {
    left: 1rem;
    right: 1rem;
    padding: 0.25rem 0.5rem;
    gap: 0rem;

    .menu-control-btn {
      display: flex;
    }
    .desktop-links-wrapper ul {
      display: none;
    }
  }
  .overlay-menu {
    display: flex;
  }

  .game-story-cards {
    /* Core Card Layout */
    .card {
      flex-direction: column;
      height: auto; /* Changed from 600px to auto so text flows naturally */
      /* remove fade */
      .img-wrapper::after {
        display: none;
      }
      .img-wrapper {
        flex: none;
        height: 350px;
        .btn {
          position: absolute;
          bottom: 1.5rem;
          right: unset;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .card-content {
        flex: auto;
        height: auto; /* Text wrapper height is auto */
        text-align: center;
        p {
          padding-left: 0rem;
        }
      }
    }
  }

  .game-product-cards {
    .saga-cards-grid {
      flex-wrap: wrap;
      .saga-card {
        width: calc(50% - 1rem);
      }
    }
  }

  .characters {
    .character-showcase-container {
      flex-direction: column;
      overflow: hidden;
      min-height: 800px;
      .character-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--light-line);
        flex-direction: row;
        justify-content: flex-start; /* Changed from center to allow proper scrolling */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 1rem;
        .char-nav-btn {
          text-align: center;
          padding: 0.75rem 1.25rem;
          white-space: nowrap;
          flex-shrink: 0; /* Prevents buttons from squishing */
        }
      }
      /* Right Content Display Area */
      .character-display-area {
        /* Individual Content Panels */
        .char-panel {
          flex-direction: column;
          padding: 2rem;
          gap: 1rem;
          transform: translateX(0);
          transform: translateY(20px);
          &.active {
            transform: translateX(0);
            transform: translateY(0px);
          }
        }
      }
    }
  }

  .gallery-section {
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      .gallery-card {
        aspect-ratio: 1 / 1;
        &:last-child {
          display: none;
        }
      }
    }
  }

  .contact-section {
    .contact-container {
      .img-wrapper {
        display: none;
      }
    }
  }
}

/* ----- 768px ----- */
@media screen and (max-width: 768px) {
  section {
    padding: 3.5rem 1.5rem;
  }

  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.75rem;
    span {
      font-size: 1.75rem;
    }
  }
  h3 {
    font-size: 1.5rem;
  }

  .topnav {
    .logo-link {
      .logo-img {
        height: 2rem;
      }
    }
  }

  header {
    .content-container {
      /* controll buttons */
      .buttons-container {
        flex-wrap: wrap;
        gap: 0.25rem;
        button {
          width: 33%;
          min-width: 150px;
        }
      }
    }
  }

  .characters {
    .character-showcase-container {
      /* Right Content Display Area */
      .character-display-area {
        /* Individual Content Panels */
        .char-panel {
          padding: 2rem 1rem;
        }
      }
    }
  }

  .game-product-cards {
    .saga-cards-grid {
      flex-wrap: wrap;
      .saga-card {
        width: 100%;
      }
    }
  }

  .popup {
    /* Main Body Section */
    .popup-inner {
      max-height: 95vh;
      overflow-y: auto; /* Enables vertical scrolling inside the popup */
      padding: 1.25rem; /* Slightly tighter padding for mobile */
    }
    .popup-header {
      text-align: center;
    }
    .popup-body {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      /* Store Meta Specification Layout */
      .store-specs {
        .spec-item {
          flex-direction: column;
          .spec-value {
            text-align: left;
          }
        }
      }
    }
  }

  .site-footer {
    .footer-content {
      .footer-review-container {
        .reviews-slider {
          min-height: 300px; /* Reserves space to prevent vertical shifting */
          margin-top: auto;
        }
      }
      .footer-nav {
        gap: 2.5rem;
      }
    }
  }
}

/* ----- 480px ----- */
@media screen and (max-width: 480px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
    span {
      font-size: 2rem;
    }
  }
  h3 {
    font-size: 1.5rem;
  }

  section {
    padding: 3.5rem 1rem;
  }
}