/* =========================
   FONT IMPORTS
   ========================= */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
/* 1. The correct Google Fonts import link */
@import url('https://googleapis.com');

/* =========================
      CSS VARIABLES
      ========================= */
:root {
  --color-primary: #a0a0a0;
  --color-brighter-bg: #1E1E1E;
  --bg-image: url("https://webstore-template-assets.tebex.io/images/page-header-bg-fivem.jpg");
  --widget-padding: 24px;
  --content-padding: 20px;
  --background-dark: #121212;
  --card-dark: #1e1e1e;
  --text-light: #fff;
  --accent-color: #6a1b9a;
  --tooltip-background: #2a2a2a;
}

@media (min-width:960px) {
  :root {
    --content-padding: 40px
  }
}

body {
  font-family: Lexend, sans-serif;
  background-color: #0d0e12;
  color: #fff
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-height: 400px;
  z-index: -1;
  background: var(--bg-image) center center/cover no-repeat;
  mask-image: linear-gradient(rgba(0, 0, 0, 0.5) 60%, transparent);
  pointer-events: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Lexend, sans-serif;
  font-weight: 700
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  filter: brightness(1.1)
}

.quantity-field {
  border-radius: 4px;
  overflow: hidden
}

.site-header-inner {
  font-family: Lexend, sans-serif
}

.site-header-inner .info .image {
  border-radius: 5px
}

.site-header-inner .user-name ul li {
  overflow: hidden
}

.site-header-inner .user-name ul li:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px
}

.site-header-inner .user-name ul li:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px
}

.site-sale-banner {
  border-radius: 4px
}

.site-home-categories {
  position: relative;
  z-index: 1
}

.site-home-categories .category {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  padding: 32px;
  min-height: 215px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-brighter-bg);
  transition: transform 0.3s ease
}

.site-home-categories .category:hover {
  color: var(--color-primary);
  transform: translateY(-5px)
}

.site-home-categories .category img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease
}

.site-home-categories .category:hover img {
  transform: scale(1.05)
}

.store-text,
.category-description,
.store-product,
.no-products {
  border-radius: 8px;
  border: 1px solid #5f5f5f07;
  padding: calc(var(--widget-padding) - 1px);
  background: #00000000;
}

.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6,
.category-description h1,
.category-description h2,
.category-description h3,
.category-description h4,
.category-description h5,
.category-description h6,
.store-product .descr h1,
.store-product .descr h2,
.store-product .descr h3,
.store-product .descr h4,
.store-product .descr h5,
.store-product .descr h6 {
  color: #fff
}

.widget {
  padding: 0
}

.widget-title {
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 700;
  text-align: center
}

.widget-content {
  border-radius: 8px;
  border: 1px solid #2D2D2D;
  padding: calc(var(--widget-padding) - 1px);
  background: var(--color-brighter-bg)
}

.widget .store-product {
  text-align: center
}

.popup .popup-close {
  border-radius: 0 8px 0 0
}

.store-product-tiered {
  border-radius: 8px;
  border: 1px solid #2D2D2D;
  background: rgba(0, 0, 0, 0.5)
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 {
  text-align: center
}

.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 5px;
  background: var(--color-brighter-bg)
}

.store-products-images .store-product {
  text-align: center
}

.store-product-full {
  border-radius: 5px;
  background: var(--color-brighter-bg)
}

.store-product .quantity-field {
  border-radius: 5px;
  background: var(--color-brighter-bg)
}

.store-product .quantity-field input[type=number] {
  border: none
}

.widget-gift-card .gift-card-input {
  border-radius: 2px
}

.widget-top-donator .avatar {
  border-radius: 50%
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 2px
}

.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 2px
}

.popup-content {
  border-radius: 5px
}

.popup-close {
  border-radius: 0 5px 0 5px
}

.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0
}

.basket-items {
  padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding))
}

.basket-item {
  border-radius: 5px
}

.basket-item .quantity {
  border-radius: 2px
}

.toast {
  border-radius: 6px
}

.toast-close {
  border-radius: 2px
}

.store-category-tiered {
  border-radius: 5px;
  background: var(--color-brighter-bg)
}

/* Old widget-recent avatar styles removed - see consolidated section */

.widget-top-donator .widget-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0;
  margin: 0;
  padding: 10px 0;
  text-align: center
}

.widget-top-donator .widget-title i.fa-solid.fa-crown {
  display: none
}

.widget-top-donator .widget-title::before {
  content: "\f521";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 22px;
  background: linear-gradient(135deg, #FFD700, #FA0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease
}

.widget-top-donator .widget-title::after {
  content: "Top Customer";
  font-family: Lexend, sans-serif;
  font-weight: 700;
  font-size: 22px;
  background: linear-gradient(135deg, #FFD700, #FA0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
  transition: all 0.3s ease
}

.widget-top-donator .widget-title:hover::before,
.widget-top-donator .widget-title:hover::after {
  text-shadow: 2px 2px 5px rgba(255, 215, 0, 0.6);
  filter: brightness(1.1)
}

.add i {
  margin-right: 8px
}

.store-product .image-link {
  display: block;
  width: 100%;
  text-decoration: none
}

.store-product .image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none
}

.site-navigation .menu a {
  font-size: 14px;
  color: #e1e1e1;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  transition: color 0.3s ease;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center
}

.site-navigation .menu a:focus,
.site-navigation .menu a:hover {
  color: inherit
}

.site-navigation .menu a i {
  transition: color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: 8px
}

.site-navigation .menu ul a {
  position: relative
}

@media (max-width:960px) {
  .site-navigation .menu a {
    font-size: 16px
  }
}

.site-navigation {
  pointer-events: auto
}

.user-actions .btn-secondary.btn-glyph-text.user-name:hover {
  color: red
}

.user-actions .btn-secondary.btn-glyph-text.user-name:hover i {
  color: red
}

/* Old widget-recent base styles removed - see consolidated section below */

.store-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out
}

.store-content.loaded {
  opacity: 1;
  transform: translateY(0)
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center
}

.bar {
  display: inline-block;
  width: 3px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  animation: scale-up4 1s linear infinite
}

.bar:nth-child(2) {
  height: 35px;
  margin: 0 5px;
  animation-delay: 0.25s
}

.bar:nth-child(3) {
  animation-delay: 0.5s
}

@keyframes scale-up4 {
  20% {
    background-color: #fff;
    transform: scaleY(1.5)
  }

  40% {
    transform: scaleY(1)
  }
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 18, 18, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none
}

@media (min-width:960px) {
  .bar {
    width: 4px;
    height: 30px
  }

  .bar:nth-child(2) {
    height: 50px
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

body.home-entry .site-home-categories .category {
  border: 2px solid var(--color-primary);
  background: linear-gradient(to bottom, #1e1e1e, #121212)
}

body.category-escrow .store-product {
  border-color: #4a90e2;
  background: linear-gradient(to bottom, #1e1e1e, #2a3a4a)
}

body.category-open-source .store-product {
  border-color: #2ecc71;
  background: linear-gradient(to bottom, #1e1e1e, #2a4a3a)
}

body.category-1 .store-product {
  border-color: #e94e77;
  background: linear-gradient(to bottom, #1e1e1e, #4a2a3a)
}

.store-products,
.site-home-categories {
  transition: all 0.5s ease
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(18, 18, 18, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.5s ease
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none
}

.loader {
  display: flex;
  align-items: center
}

.bar {
  display: inline-block;
  width: 3px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  animation: scale-up4 1s linear infinite
}

.bar:nth-child(2) {
  height: 35px;
  margin: 0 5px;
  animation-delay: 0.25s
}

.bar:nth-child(3) {
  animation-delay: 0.5s
}

@keyframes scale-up4 {
  20% {
    background-color: #fff;
    transform: scaleY(1.5)
  }

  40% {
    transform: scaleY(1)
  }
}

@media (min-width:960px) {
  .bar {
    width: 4px;
    height: 30px
  }

  .bar:nth-child(2) {
    height: 50px
  }
}

.store-text {
  text-align: center;
  font-family: Lato, sans-serif
}

.store-header-title {
  margin-bottom: 20px
}

.store-welcome-text {
  font-family: Lexend, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #a0a0a0;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px
}

.store-main-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px
}

.store-main-title {
  font-family: Lexend, sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2
}

.store-main-logo {
  width: 52px;
  height: 52px;
  object-fit: contain
}

.store-text p {
  color: #a0a0a0;
  line-height: 1.6;
  margin-bottom: 15px
}

.title-divider {
  border: 0;
  height: 1px;
  background: #2D2D2D;
  margin: 20px auto;
  width: 60%
}

.store-product .image-link {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 12px
}

.store-product .image-link .image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px
}

/* Disable hover overlay for store-product */
.store-product .image-link .hover-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important
}

.store-product .image-link .hover-overlay .fa-eye,
.store-product .image-link .hover-overlay .hover-text {
  display: none !important
}

/* No hover effects for store-product - only product-card gets premium hover */

.product-tag {
  position: absolute;
  top: 15px;
  right: -5px;
  font-family: Lexend, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 10;
  transform: rotate(5deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 5px
}

.product-tag-bestseller {
  background-color: #ffc107;
  color: #212529
}

.product-tag-bestseller i.fa-trophy {
  font-size: 14px
}

.log-in.btn-tertiary.lrc-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease !important;
  cursor: pointer !important;
  filter: none !important;
}
.log-in.btn-tertiary.lrc-login-btn:hover {
  border-color: rgba(255,255,255,0.45) !important;
  color: #fff !important;
  filter: none !important;
}
.log-in.btn-tertiary.lrc-login-btn svg {
  flex-shrink: 0 !important;
  opacity: 0.7;
}
.log-in.btn-tertiary.lrc-login-btn .login-text {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ============================================
   NAVIGATION CSS - CLEAN SLATE
   Add your custom navigation styles here
   ============================================ */

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #f44336;
  text-decoration: none;
  transition: all 0.2s ease
}

.logout-btn:hover {
  background: rgba(244, 67, 54, 0.2);
  border: none;
  color: #fff;
  transform: none
}

.logout-btn i {
  font-size: 12px
}

.fivem-logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.fivem-logo svg {
  width: 100%;
  height: 100%
}

.btn-fivem-login .login-text {
  color: #000;
  font-weight: 600;
  font-size: 14px
}

.site-navigation .menu li {
  position: relative;
  transition: all 0.2s ease
}

.site-navigation .menu li:hover {
  transform: none
}

.site-navigation .menu li a {
  transition: none;
  border-radius: 0;
  position: relative
}

.site-navigation .menu li a:hover {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none
}

.site-navigation .menu li.active {
  background: rgba(255, 255, 255, 0);
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none
}

@media (min-width:960px) {
  .navigation-horizontal .discord-link {
    order: 997;
    margin-left: auto
  }

  .navigation-horizontal .user-nav-item,
  .navigation-horizontal .login-nav-item {
    order: 998
  }

  .navigation-horizontal .basket-nav-item {
    order: 999
  }
}

.user-profile-nav::before {
  display: none
}

.nav-tooltip {
  display: none !important
}

@keyframes pulse-glow {

  0%,
  100% {
    transform: scale(1);
    box-shadow: none
  }

  50% {
    transform: scale(1);
    box-shadow: none
  }
}

@keyframes pulse-online {

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

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

.nav-basket-btn:focus,
.site-navigation .menu li a:focus {
  outline: none !important;
  border: none !important;
}

.logout-btn:focus,
.login-btn-nav:focus {
  outline: 1px solid rgba(255, 255, 255, 0.3);
  outline-offset: -1px
}

@media (max-width:960px) {
  .site-navigation .menu li {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1)
  }

  .show-navigation .site-navigation .menu li {
    opacity: 1;
    transform: translateY(0)
  }

  .show-navigation .site-navigation .menu li:nth-child(1) {
    transition-delay: 0.1s
  }

  .show-navigation .site-navigation .menu li:nth-child(2) {
    transition-delay: 0.15s
  }

  .show-navigation .site-navigation .menu li:nth-child(3) {
    transition-delay: 0.2s
  }

  .show-navigation .site-navigation .menu li:nth-child(4) {
    transition-delay: 0.25s
  }

  .show-navigation .site-navigation .menu li:nth-child(5) {
    transition-delay: 0.3s
  }

  .show-navigation .site-navigation .menu li:nth-child(6) {
    transition-delay: 0.35s
  }

  .show-navigation .site-navigation .menu li:nth-child(7) {
    transition-delay: 0.4s
  }

  .show-navigation .site-navigation .menu li:nth-child(8) {
    transition-delay: 0.45s
  }

  .show-navigation .site-navigation .menu li:nth-child(9) {
    transition-delay: 0.5s
  }

  .show-navigation .site-navigation .menu li:nth-child(10) {
    transition-delay: 0.55s
  }

  .show-navigation .site-navigation .menu li {
    animation: slideInFromTop 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards
  }

  @keyframes slideInFromTop {
    0% {
      opacity: 0;
      transform: translateY(-30px)
    }

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

  .show-navigation .site-navigation .menu li:nth-child(1) {
    animation-delay: 0.1s
  }

  .show-navigation .site-navigation .menu li:nth-child(2) {
    animation-delay: 0.15s
  }

  .show-navigation .site-navigation .menu li:nth-child(3) {
    animation-delay: 0.2s
  }

  .show-navigation .site-navigation .menu li:nth-child(4) {
    animation-delay: 0.25s
  }

  .show-navigation .site-navigation .menu li:nth-child(5) {
    animation-delay: 0.3s
  }

  .show-navigation .site-navigation .menu li:nth-child(6) {
    animation-delay: 0.35s
  }

  .show-navigation .site-navigation .menu li:nth-child(7) {
    animation-delay: 0.4s
  }

  .show-navigation .site-navigation .menu li:nth-child(8) {
    animation-delay: 0.45s
  }

  .show-navigation .site-navigation .menu li:nth-child(9) {
    animation-delay: 0.5s
  }

  .show-navigation .site-navigation .menu li:nth-child(10) {
    animation-delay: 0.55s
  }
}

@media (max-width:960px) {
  .toggle-navigation {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    z-index: 1002
  }

  @media (max-width:480px) {
    .toggle-navigation {
      right: 15px;
      left: auto
    }
  }
}

.site-header {
  margin-top: 0
}

.hero-info-container {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.hero-info-content {
  text-align: center
}

.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(160, 160, 160, 0.1);
  border: 1px solid #2D2D2D;
  border-radius: 6px;
  padding: 8px 16px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px
}

.welcome-badge i {
  color: var(--color-primary);
  font-size: 14px
}

.main-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap
}

.main-title {
  font-family: Lexend, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.1
}

.title-logo {
  height: 50px;
  background: var(--color-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease
}

.title-logo:hover {
  transform: scale(1.05)
}

.title-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain
}

.title-logo i {
  font-size: 24px;
  color: #fff
}

.hero-description {
  font-size: 1rem;
  color: #a0a0a0;
  line-height: 1.6;
  margin: 0 0 30px 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 600px;
  margin: 0 auto
}

.stat-item {
  text-align: center;
  padding: 20px 15px;
  background: rgba(160, 160, 160, 0.05);
  border: 1px solid #2D2D2D;
  border-radius: 8px;
  transition: all 0.3s ease
}

.stat-item:hover {
  background: rgba(160, 160, 160, 0.1);
  transform: translateY(-2px)
}

.stat-number {
  font-family: Lexend, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
  display: block
}

.stat-label {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500
}

.customer-reviews-section {
  text-align: center;
  margin-top: 0rem;
  padding: 2rem 1rem;
  color: #fff
}

.customer-reviews-section h2 {
  font-family: Lexend, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem
}

.customer-reviews-section>p {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #a0a0a0;
  font-weight: 400
}

.reviews-carousel {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  cursor: grab;
  border-radius: 12px;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0.8) 15%, black 25%, black 75%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.1) 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0.8) 15%, black 25%, black 75%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.1) 95%, transparent 100%)
}

.reviews-carousel:active {
  cursor: grabbing
}

.reviews-carousel::before,
.reviews-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none
}

.reviews-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--background-dark) 0%, rgba(18, 18, 18, 0.9) 20%, rgba(18, 18, 18, 0.7) 40%, rgba(18, 18, 18, 0.3) 70%, transparent 100%)
}

.reviews-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--background-dark) 0%, rgba(18, 18, 18, 0.9) 20%, rgba(18, 18, 18, 0.7) 40%, rgba(18, 18, 18, 0.3) 70%, transparent 100%)
}

.reviews-container {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0;
  will-change: transform
}

.reviews-container.dragging {
  transition: none
}

.review-card {
  background: var(--color-brighter-bg);
  border: 1px solid #2D2D2D;
  border-radius: 8px;
  padding: 1.5rem;
  min-width: 320px;
  flex: 0 0 320px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  user-select: none;
  opacity: 0.7
}

.review-card.center {
  opacity: 1;
  transform: scale(1.02)
}

.review-card:hover {
  transform: translateY(-3px);
  opacity: 1
}

.review-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 1rem
}

.review-stars i {
  color: #ffc107;
  font-size: 1rem
}

.review-card img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: block;
  border: 2px solid #2D2D2D
}

.review-card p {
  font-size: 0.9rem;
  color: #a0a0a0;
  line-height: 1.5;
  margin-bottom: 1rem;
  font-style: italic
}

.review-card span {
  display: block;
  font-size: 0.85rem;
  color: #fff;
  font-weight: 500
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2D2D2D;
  cursor: pointer;
  transition: all 0.3s ease
}

.dot.active,
.dot:hover {
  background-color: var(--color-primary);
  transform: scale(1.2)
}

.extra-section {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-brighter-bg);
  border: 1px solid #2D2D2D;
  color: white;
  border-radius: 8px
}

.extra-section h3 {
  font-family: Lexend, sans-serif;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff
}

.extra-section p {
  color: #a0a0a0;
  margin-bottom: 1rem
}

.extra-section .btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--color-primary);
  color: #000;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 0.9rem
}

.extra-section .btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px)
}

@media (max-width:768px) {
  .customer-reviews-section {
    padding: 1.5rem 0.5rem
  }

  .review-card {
    min-width: 280px;
    flex: 0 0 280px;
    padding: 1.25rem
  }

  .reviews-container {
    gap: 1rem
  }

  .reviews-carousel::before,
  .reviews-carousel::after {
    width: 80px
  }

  .reviews-carousel {
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 8%, black 20%, black 80%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 8%, black 20%, black 80%, rgba(0, 0, 0, 0.3) 92%, transparent 100%)
  }
}

.dot:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {
  .reviews-container {
    animation: none
  }

  .review-card {
    transition: none
  }
}

.reviews-carousel {
  box-shadow: inset 40px 0 40px -40px rgba(18, 18, 18, 0.8), inset -40px 0 40px -40px rgba(18, 18, 18, 0.8)
}

.help-support-section {
  position: relative;
  padding: 3rem 1rem;
  margin-top: 0rem;
  text-align: center;
  background: var(--background-dark);
  overflow: hidden
}

.help-support-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 600px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 30%, rgba(255, 255, 255, 0.005) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.help-support-section.animate::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1
}

.help-support-container {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto
}

.help-support-content h2 {
  font-family: Lexend, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  overflow: hidden
}

.help-support-content h2 .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px) rotateX(90deg);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.help-support-section.animate .help-support-content h2 .letter {
  opacity: 1;
  transform: translateY(0) rotateX(0deg)
}

.help-support-content p {
  font-size: 1.1rem;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 2rem;
  overflow: hidden
}

.help-support-content p .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: 0.3em
}

.help-support-section.animate .help-support-content p .word {
  opacity: 0.9;
  transform: translateY(0)
}

.discord-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #f5f5f5;
  color: #333;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-family: Lexend, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative
}

.discord-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease
}

.help-support-section.animate .discord-cta-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.7s
}

.help-support-section.animate .discord-cta-btn::before {
  left: 100%;
  transition-delay: 1.2s
}

.discord-cta-btn .btn-text {
  display: inline-block;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.help-support-section.animate .discord-cta-btn .btn-text {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.9s
}

.help-support-section.animate .discord-cta-btn:hover {
  background-color: #e8e8e8;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease
}

.discord-cta-btn i {
  font-size: 1.2rem;
  color: #5865f2;
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.help-support-section.animate .discord-cta-btn i {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition-delay: 0.8s
}

@media (max-width:768px) {
  .help-support-section {
    padding: 3rem 1rem
  }

  .help-support-section::before {
    width: 600px;
    height: 450px
  }

  .help-support-content h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem
  }

  .help-support-content p {
    font-size: 1rem;
    margin-bottom: 1.75rem
  }

  .discord-cta-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
    gap: 10px
  }
}

@media (max-width:480px) {
  .help-support-section {
    padding: 2.5rem 0.75rem
  }

  .help-support-section::before {
    width: 400px;
    height: 350px
  }

  .help-support-content h2 {
    font-size: 1.75rem
  }

  .help-support-content p {
    font-size: 0.95rem
  }

  .discord-cta-btn {
    width: 100%;
    justify-content: center;
    max-width: 280px
  }
}

.discord-cta-btn:focus {
  outline: 2px solid #5865f2;
  outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {

  .help-support-section::before,
  .help-support-content h2 .letter,
  .help-support-content p .word,
  .discord-cta-btn,
  .discord-cta-btn i,
  .discord-cta-btn .btn-text,
  .discord-cta-btn::before {
    transition: none;
    transform: none;
    opacity: 1
  }

  .help-support-section.animate .discord-cta-btn:hover {
    transform: none
  }
}

.site-footer {
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  color: #fff
}

.site-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto
}

.site-footer .copyright {
  margin: 0;
  color: #fff
}

.site-footer .copyright span {
  color: #00c3ff
}

.site-footer .designed-by {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #888;
  font-size: 11px
}

.site-footer .designed-by:hover {
  color: #00c3ff
}

.site-footer .designed-text {
  margin-right: 6px;
  font-size: 10px
}

.site-footer .designed-by img {
  height: 16px;
  display: inline-block
}

.site-footer a {
  text-decoration: none
}

body {
  overflow: hidden
}

.page-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out
}

.page-content.loaded {
  opacity: 1;
  transform: translateY(0)
}

.browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  background: linear-gradient(to right, #e5e5e5, #cfcfcf, #bfbfbf);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1
}

.browse-btn svg {
  width: 18px;
  height: 18px;
  stroke: #000;
  stroke-width: 2;
  fill: none
}

/* Reset and fix the hamburger button with higher specificity */
.site-header .actions .toggle-navigation {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 1002 !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(30, 30, 30, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: none !important;
  /* Hidden by default */
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Show only on mobile with important */
@media (max-width: 960px) {
  .site-header .actions .toggle-navigation {
    display: flex !important;
  }
}

/* Reset any inherited styles on the hamburger icon */
.toggle-navigation .hamburger-icon {
  position: relative !important;
  width: 24px !important;
  height: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Hamburger Lines with important to override conflicts */
.toggle-navigation .hamburger-icon .line {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #ffffff !important;
  border-radius: 2px !important;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  transform-origin: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  opacity: 1 !important;
}

/* Specific line positioning */
.toggle-navigation .hamburger-icon .line-1 {
  top: 0 !important;
}

.toggle-navigation .hamburger-icon .line-2 {
  top: auto !important;
  bottom: auto !important;
}

.toggle-navigation .hamburger-icon .line-3 {
  bottom: 0 !important;
}

/* Transform to X when navigation is open - with important */
body.show-navigation .toggle-navigation .hamburger-icon .line-1 {
  transform: translateY(9px) rotate(45deg) !important;
  background-color: #ff4444 !important;
  /* Red color when X */
}

body.show-navigation .toggle-navigation .hamburger-icon .line-2 {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

body.show-navigation .toggle-navigation .hamburger-icon .line-3 {
  transform: translateY(-9px) rotate(-45deg) !important;
  background-color: #ff4444 !important;
  /* Red color when X */
}

/* Button hover effect with important */
.toggle-navigation:hover {
  background: inherit !important;
  transform: none !important;
  border-color: inherit !important;
}

/* Active state with important */
body.show-navigation .toggle-navigation {
  background: rgba(244, 67, 54, 0.1) !important;
  border-color: rgba(244, 67, 54, 0.3) !important;
}

/* Remove any ::before or ::after that might interfere */
.toggle-navigation::before,
.toggle-navigation::after,
.hamburger-icon::before,
.hamburger-icon::after,
.line::before,
.line::after {
  display: none !important;
}

/* Ensure button text is hidden */
.toggle-navigation span:not(.hamburger-icon):not(.line) {
  display: none !important;
}

/* Fix z-index stacking */
.site-header {
  position: relative;
  z-index: 100;
}

.site-header .actions {
  position: static;
}


/* Accessibility focus state */
.toggle-navigation:focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Ensure button is clickable */
.toggle-navigation {
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Animation for attention on first load */
@keyframes pulse-attention {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.toggle-navigation.pulse {
  animation: pulse-attention 2s !important;
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

/* ===========================================
   END OF NAVIGATION CSS CLEANUP
   Add your fresh navigation styles below
   =========================================== */

/* ====== NAVIGATION — Transparent Clean Layout ====== */

:root {
  --nav-text-default: #E5E7EB;
  --nav-text-hover: #FFFFFF;
  --nav-accent: #3b82f6;
}

/* Navigation Container - Fully Transparent */
.site-navigation {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Logo */
.nav-logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* Center Navigation List */
.navigation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

/* Navigation Items */
.navigation-list>li {
  position: relative;
}

.navigation-list>li>a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(229, 231, 235, 0.9);
  text-decoration: none;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif;
  transition: color 0.2s ease;
  white-space: nowrap;
  background: transparent;
  border-radius: 0;
  letter-spacing: 0.01em;
}

.navigation-list>li>a i {
  font-size: 16px;
  margin-right: 8px;
  color: inherit;
  transition: color 0.2s ease;
}

.navigation-list>li>a:hover {
  color: #fff;
  background: transparent;
}

/* Active Link - Underline Only */
.navigation-list .link-active {
  color: #fff;
  background: transparent;
}

.navigation-list .link-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: #ffffff00;
  border-radius: 1px;
}

/* Focus State - Remove all outlines */
.navigation-list>li>a:focus,
.navigation-list>li>a:focus-visible,
.navigation-list .link-active:focus,
.navigation-list .link-active:focus-visible,
.site-navigation .menu li a:focus,
.site-navigation .menu li a:focus-visible {
  outline: none !important;
  outline-offset: 0;
  border: none !important;
  box-shadow: none !important;
}

/* Right Side Actions Container */
.navigation-list .push-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* User and Basket close together */
.user-nav-item,
.login-nav-item {
  margin-left: auto;
  order: 999;
  flex-shrink: 0;
  position: relative;
  z-index: 10001;
}

.basket-nav-item {
  margin-left: 12px;
  order: 998;
  flex-shrink: 0;
}

/* Home Icon Styling */
.home-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 12px;
  color: inherit;
  transition: color 0.2s ease;
}

/* Escrow Icon Styling */
.escrow-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 12px;
  color: inherit;
  transition: color 0.2s ease;
}

/* Open Source Icon Styling */
.opensource-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 12px;
  color: inherit;
  transition: color 0.2s ease;
}

/* Cart Button - Simple Icon */
.nav-basket-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #FFFFFF;
}

.nav-basket-btn .cart-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: #FFFFFF;
}

.nav-basket-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-basket-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Basket Count Badge - Small number badge */
#nav-basket-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Login Button - Premium Light Design */
.btn-fivem-login {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-width: 147px !important;
  padding: 0 16px !important;
  background: #0909c000 !important;
  color: #d6d6d6 !important;
  border: 1px solid #3d3d3d8e !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
  transition: none !important;
  min-height: 40px !important;
  flex-shrink: 0 !important;
}

.btn-fivem-login:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.btn-fivem-login[disabled],
.btn-fivem-login.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading State */
.btn-fivem-login.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn-fivem-login.is-loading .fivem-logo {
  display: none;
}

.btn-fivem-login.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #111;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
  flex-shrink: 0;
}

.btn-fivem-login.is-loading .login-text {
  opacity: 0.8;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* FiveM Logo */
.fivem-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fivem-logo svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.fivem-logo svg path {
  fill: currentColor !important;
}

.login-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #e2e2e2 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* RTL Support */
[dir="rtl"] .btn-fivem-login {
  flex-direction: row-reverse;
}

/* User Profile - Dark Pill for logged in users */
.user-profile-nav {
  position: relative;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #21212100;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: #1a1a1a00;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.user-profile-nav:hover {
  background: #ffffff02;
  color: #000;
}

.user-profile-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.user-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: inherit;
}

.user-name-nav {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
}

.brand-caret {
  font-size: 12px;
  width: 12px;
  height: 12px;
  color: #FFFFFF;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.user-profile-nav.open .brand-caret {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  right: -54px;
  top: calc(100% + 8px);
  min-width: 200px;
  padding: 6px;
  border-radius: 8px;
  background: #0000006c;
  border: 1px solid rgba(20, 70, 236, 0.219);
  box-shadow: 0 8px 24px rgba(16, 79, 253, 0.158);
  display: none;
  flex-direction: column;
  z-index: 10000;
}

.user-profile-nav.open .user-dropdown-menu {
  display: flex;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.user-dropdown-item i {
  font-size: 14px;
  color: #9ca3af;
  width: 14px;
  flex-shrink: 0;
}

.user-dropdown-item-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.user-dropdown-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.user-dropdown-item-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  line-height: 1.3;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-dropdown-item.logout {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2px;
  padding-top: 8px;
}

.user-dropdown-item.logout i {
  color: #ef4444;
}

/* Hide subcategory toggles and submenus in horizontal nav */
.navigation-list .has-children .toggle {
  display: none;
}

.navigation-list .has-children>ul {
  display: none;
}

/* Hide Discord link */
.navigation-list .discord-link {
  display: none;
}

/* Close navigation button (mobile) */
.close-navigation {
  display: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .site-navigation {
    padding: 0 16px;
    gap: 16px;
  }

  .navigation-list {
    gap: 16px;
  }

  .navigation-list>li>a {
    padding: 8px 10px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .navigation-list {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
  }

  .navigation-list::-webkit-scrollbar {
    display: none;
  }

  .site-navigation {
    height: 52px;
  }

  .nav-basket-btn {
    width: 36px;
    height: 36px;
  }

  .nav-basket-btn .cart-icon {
    width: 18px;
    height: 18px;
  }

  /* Login Button Mobile */
  .btn-fivem-login {
    height: 52px;
    padding: 0 19px;
    font-size: 15px;
    gap: 10px;
  }

  .fivem-logo svg {
    width: 20px;
    height: 20px;
  }

  .login-text {
    font-size: 15px;
  }

  /* User Profile Mobile */
  .user-profile-nav {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
}

/* Login Popup Styling */
.login-popup-content {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.login-popup-content h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-popup-content .popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.login-popup-content .popup-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.login-popup-content .login-description {
  color: #a0a0a0;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.login-popup-content .login-button-container {
  display: flex;
  justify-content: center;
}

.login-popup-content .btn-fivem-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  background: #E9E9EA;
  color: #111;
  border: 1px solid #C8C8CC;
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  cursor: pointer;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1px;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-height: 48px;
  margin: 0 auto;
}

.login-popup-content .btn-fivem-login:hover {
  background: #F1F1F2;
  border-color: #CFCFD2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.login-popup-content .fivem-logo svg {
  width: 18px;
  height: 18px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .btn-fivem-login {
    transition: none;
  }
}



/* ============================================
   RECENT CUSTOMERS WIDGET - DARK PREMIUM
   ============================================ */

/* Sidebar reset on product pages */
.site-content-widgets .store-sidebar {
  grid-column: 1 / -1 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Container */
.widget.widget-recent {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 50px !important;
  padding: 10px 20px 10px 16px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: Lexend, sans-serif !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 16px auto 0 !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}

/* Widget content - flatten into single row */
.widget.widget-recent .widget-content {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: contents !important;
}

/* Label */
.widget.widget-recent .widget-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
}

.widget.widget-recent .widget-title i,
.widget.widget-recent .user-icon {
  display: none !important;
}

.widget.widget-recent .widget-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

.widget.widget-recent .widget-title::after {
  display: none !important;
}

/* First purchase card - becomes part of the avatar row */
.widget.widget-recent .first-purchase-card {
  display: contents !important;
}

.widget.widget-recent .purchase-card-info {
  display: none !important;
}

/* Purchases grid - horizontal overlapping row */
.widget.widget-recent .purchases-grid {
  display: contents !important;
}

/* All avatars - overlapping stack */
.widget.widget-recent .purchase-card-avatar,
.widget.widget-recent .purchase-item {
  position: relative !important;
  margin: 0 0 0 -7px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.widget.widget-recent .purchase-card-avatar {
  margin-left: 0 !important;
}

.widget.widget-recent .purchase-card-avatar img,
.widget.widget-recent .purchase-item img,
.widget.widget-recent .avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #121212 !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  cursor: pointer !important;
  display: block !important;
  filter: none !important;
  box-shadow: none !important;
}

.widget.widget-recent .purchase-card-avatar img:hover,
.widget.widget-recent .purchase-item img:hover,
.widget.widget-recent .avatar:hover {
  transform: scale(1.1) !important;
  z-index: 10 !important;
  position: relative !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Tooltip */
.widget.widget-recent .tooltip {
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  bottom: 42px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(4px) !important;
  background: rgba(15, 15, 15, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  font-family: Lexend, sans-serif !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  white-space: normal !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 120px !important;
  max-width: 180px !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.widget.widget-recent .purchase-item:hover .tooltip,
.widget.widget-recent .purchase-card-avatar:hover .tooltip {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.widget.widget-recent .purchase-item:hover,
.widget.widget-recent .purchase-card-avatar:hover {
  z-index: 1001 !important;
}

.widget.widget-recent .tooltip .ign {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: #fff !important;
  margin: 0 !important;
  display: block !important;
}

.widget.widget-recent .tooltip .purchase-action {
  display: none !important;
}

.widget.widget-recent .tooltip .package-details {
  display: block !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  margin: 0 !important;
}

.widget.widget-recent .tooltip .tooltip-price {
  display: none !important;
}

.widget.widget-recent .tooltip small {
  display: block !important;
  color: rgba(255, 255, 255, 0.25) !important;
  font-size: 10px !important;
  margin-top: 2px !important;
  padding-top: 3px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.widget.widget-recent .tooltip::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  margin-left: -5px !important;
  border: 5px solid transparent !important;
  border-top-color: rgba(15, 15, 15, 0.96) !important;
}

.widget.widget-recent .tooltip::before {
  display: none !important;
}

.widget.widget-recent .empty {
  display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  .widget.widget-recent {
    padding: 8px 14px 8px 12px !important;
    gap: 10px !important;
    margin: 12px auto 0 !important;
  }

  .widget.widget-recent .widget-title {
    font-size: 9px !important;
  }

  .widget.widget-recent .purchase-card-avatar img,
  .widget.widget-recent .purchase-item img,
  .widget.widget-recent .avatar {
    width: 26px !important;
    height: 26px !important;
  }

  .widget.widget-recent .purchase-card-avatar,
  .widget.widget-recent .purchase-item {
    margin-left: -6px !important;
  }
}

@media (max-width: 480px) {
  .widget.widget-recent {
    padding: 7px 10px 7px 10px !important;
    gap: 8px !important;
  }

  .widget.widget-recent .purchase-card-avatar img,
  .widget.widget-recent .purchase-item img,
  .widget.widget-recent .avatar {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================
   MODERN PRODUCT CARD - CSS VARIABLES
   ============================================ */

:root {
  /* Spacing Scale */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;

  /* Colors */
  --color-card-bg: #1a1a1a;
  --color-card-bg-hover: #222222;
  --color-text-primary: #ffffff;
  --color-text-secondary: #b0b0b0;
  --color-text-muted: #888888;
  --color-price-current: #ffffff;
  --color-price-original: #888888;
  --color-discount-bg: #e74c3c;
  --color-discount-text: #ffffff;
  --color-tag-bestseller: #ffd700;
  --color-tag-text: #333333;
  --color-btn-primary: #e8e8e8;
  --color-btn-primary-hover: #f3f3f3;
  --color-btn-primary-active: #d0d0d0;
  --color-btn-remove: #e74c3c;
  --color-btn-remove-hover: #c0392b;
  --color-btn-remove-active: #a93226;
  --color-btn-text: #1a1a1a;
  --color-focus-ring: #ffffff;

  /* Shadows */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-discount: 0 2px 8px rgba(231, 76, 60, 0.3);
  --shadow-image-hover: 0 4px 16px rgba(0, 0, 0, 0.2);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Typography */
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Image Aspect Ratio */
  --image-aspect-ratio: 16 / 9;
}

/* ============================================
   PRODUCT CARD CONTAINER
   ============================================ */

.product-card,
article.product {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
  height: 100%;

  /* Initial hidden state for animation */
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  will-change: transform, opacity;
}

/* Animated state when visible */
.product-card.animate-in,
article.product.animate-in {
  animation: cleanCardEntrance 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.product-card:hover,
article.product:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px) scale(1.02);
}

/* Clean, modern card entrance animation - No blur, lightweight */
@keyframes cleanCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }

  60% {
    opacity: 0.9;
    transform: translateY(-2px) scale(1.01);
  }

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

/* Staggered animation delays for multiple cards - Ultra smooth cascade */
.product-card:nth-child(1) {
  animation-delay: 0.05s;
}

.product-card:nth-child(2) {
  animation-delay: 0.12s;
}

.product-card:nth-child(3) {
  animation-delay: 0.19s;
}

.product-card:nth-child(4) {
  animation-delay: 0.26s;
}

.product-card:nth-child(5) {
  animation-delay: 0.33s;
}

.product-card:nth-child(6) {
  animation-delay: 0.40s;
}

.product-card:nth-child(7) {
  animation-delay: 0.47s;
}

.product-card:nth-child(8) {
  animation-delay: 0.54s;
}

.product-card:nth-child(9) {
  animation-delay: 0.61s;
}

.product-card:nth-child(10) {
  animation-delay: 0.68s;
}

.product-card:nth-child(11) {
  animation-delay: 0.75s;
}

.product-card:nth-child(12) {
  animation-delay: 0.82s;
}

article.product:nth-child(1) {
  animation-delay: 0.05s;
}

article.product:nth-child(2) {
  animation-delay: 0.12s;
}

article.product:nth-child(3) {
  animation-delay: 0.19s;
}

article.product:nth-child(4) {
  animation-delay: 0.26s;
}

article.product:nth-child(5) {
  animation-delay: 0.33s;
}

article.product:nth-child(6) {
  animation-delay: 0.40s;
}

article.product:nth-child(7) {
  animation-delay: 0.47s;
}

article.product:nth-child(8) {
  animation-delay: 0.54s;
}

article.product:nth-child(9) {
  animation-delay: 0.61s;
}

article.product:nth-child(10) {
  animation-delay: 0.68s;
}

article.product:nth-child(11) {
  animation-delay: 0.75s;
}

article.product:nth-child(12) {
  animation-delay: 0.82s;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {

  .product-card,
  article.product {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .product-card.animate-in,
  article.product.animate-in {
    animation: none;
  }
}

/* ============================================
   IMAGE SECTION
   ============================================ */

.product-card__image-wrapper,
article.product .image-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--image-aspect-ratio);
  background: #000;
}

.product-card__image-link,
article.product .image-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.product-card__image,
article.product .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--transition-base);
  display: block;
}

/* Allow focal point positioning via data attribute or inline style */
/* Inline style takes precedence if focal point is provided */
/* Focal point will be set via inline style from template */
/* Fallback to center if not provided */

.product-card__image-link:hover .product-card__image,
article.product .image-link:hover .image {
  transform: scale(1.03);
}

.product-card__image-link:focus-visible,
article.product .image-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Hover Overlay */
.product-card__hover-overlay,
article.product .hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 1;
  pointer-events: none;
}

.product-card__image-link:hover .product-card__hover-overlay,
article.product .image-link:hover .hover-overlay {
  opacity: 1;
}

.product-card__hover-overlay i,
article.product .hover-overlay i {
  font-size: 2rem;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--spacing-sm);
}

.product-card__hover-overlay .product-card__eye-icon,
article.product .hover-overlay .product-card__eye-icon {
  width: 32px;
  height: 32px;
  color: white;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  margin-bottom: var(--spacing-sm);
  transition: transform var(--transition-base);
}

.product-card__image-link:hover .product-card__hover-overlay .product-card__eye-icon,
article.product .image-link:hover .hover-overlay .product-card__eye-icon {
  transform: scale(1.1);
}

.product-card__hover-text,
article.product .hover-text {
  color: white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ============================================
   DISCOUNT BADGE (Top-Left of Image)
   ============================================ */

.product-card__discount-badge,
article.product .product-discount-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 2;
  background: var(--color-discount-bg);
  color: var(--color-discount-text);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px rgba(231, 76, 60, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  min-height: 20px;
  animation: badgeEntrance 0.3s ease-out;
}

.product-card__discount-badge-text {
  font-weight: var(--font-weight-bold);
  font-size: 10px;
}

@keyframes badgeEntrance {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-4px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================
   PRODUCT TAGS (Top-Right of Image)
   ============================================ */

.product-card__tag,
article.product .product-tag {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 3;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-card__tag--bestseller,
article.product .product-tag-bestseller {
  background: var(--color-tag-bestseller);
  color: var(--color-tag-text);
}

.product-card__tag--escrow,
article.product .product-tag-escrow {
  background: #8b0000;
  color: #ffffff;
}

.product-card__tag--esx,
article.product .product-tag-esx {
  background: #ff6600;
  color: #ffffff;
}

.product-card__tag--standalone,
article.product .product-tag-standalone {
  background: #7a00cc;
  color: #ffffff;
}

/* ============================================
   PRODUCT CONTENT SECTION
   ============================================ */

.product-card__content,
article.product .product-info {
  padding: var(--spacing-lg);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 0;
}

/* Ensure clear separation from image */
.product-card__content::before,
article.product .product-info::before {
  content: '';
  display: block;
  height: 0;
  margin-top: 0;
}

/* Row wrapper for header and price - CLEAN HORIZONTAL LINE */
.product-card__header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
}

/* ============================================
   PRODUCT HEADER (Title + Countdown)
   ============================================ */

.product-card__header,
article.product .product-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
  max-width: 60%;
}

.product-card__title,
article.product .product-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-text-primary);
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Use the same display font as the product page for titles and prices */
.product-card__title,
.product-card__price,
.product-card__price-current,
.product-card__price-original {
  font-family: Lexend, sans-serif;
}

.product-card__title a,
article.product .product-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-card__title a:hover,
article.product .product-title a:hover {
  color: var(--color-text-secondary);
}

.product-card__title a:focus-visible,
article.product .product-title a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Countdown Badge */
.product-card__countdown,
article.product .countdown {
  display: inline-block;
  background: #e74c3c;
  color: #ffffff;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

/* ============================================
   PRICE SECTION
   ============================================ */

/* Hide default Tebex price elements */
.product-card .price:not(.product-card__price),
.product-card__footer .price,
.product-card__footer p.price,
article.product .price:not(.custom-price),
article.product p.price,
article.product .package-actions .price,
article.product .package-actions p.price {
  display: none !important;
}

.product-card__price,
article.product .custom-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--spacing-sm);
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.product-card__price-original,
article.product .custom-price .original-price {
  font-size: var(--font-size-lg);
  color: #ef4444;
  text-decoration: line-through;
  font-weight: var(--font-weight-medium);
  opacity: 0.9;
  order: 1;
}

.product-card__price-current,
article.product .custom-price .current-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-price-current);
  line-height: 1.2;
  /* Ensure AA contrast: #ffffff on #1a1a1a = 13.9:1 (AAA) */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  order: 2;
}

/* ============================================
   PRODUCT CARD FOOTER
   ============================================ */

.product-card__footer,
article.product .package-actions {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  margin-top: auto;
}

.product-card__footer .actions,
article.product .package-actions {
  padding: 0;
}

/* ============================================
   CTA BUTTON (Purchase Button)
   ============================================ */

.product-card__footer .btn-primary.wide,
.product-card__footer .btn-primary,
article.product .btn-primary.wide {
  width: 100%;
  min-height: 48px;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-md);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
  margin: 0;
  position: relative;
  overflow: hidden;
  /* Override global filter that causes green tint */
  filter: none !important;
}

/* Cart icon styling */
.product-card__footer .btn-primary .cart-icon,
.product-card__footer .btn-primary.wide .cart-icon,
article.product .btn-primary.wide .cart-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  color: currentColor;
}

.product-card__footer .btn-primary.wide:hover,
.product-card__footer .btn-primary:hover,
article.product .btn-primary.wide:hover {
  background-color: var(--color-btn-primary-hover) !important;
  color: var(--color-btn-text) !important;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
  transform: translateY(-1px);
  /* Prevent green tint from global hover */
  filter: none !important;
}

.product-card__footer .btn-primary.wide:active,
.product-card__footer .btn-primary:active,
article.product .btn-primary.wide:active {
  background-color: var(--color-btn-primary-active) !important;
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(74, 144, 226, 0.3);
  filter: none !important;
}

.product-card__footer .btn-primary.wide:focus-visible,
.product-card__footer .btn-primary:focus-visible,
article.product .btn-primary.wide:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  background-color: var(--color-btn-primary-hover) !important;
  box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2), 0 4px 12px rgba(74, 144, 226, 0.4);
  filter: none !important;
}

.product-card__footer .btn-primary.wide:disabled,
.product-card__footer .btn-primary:disabled,
article.product .btn-primary.wide:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.product-card__footer .btn-primary.wide.loading,
.product-card__footer .btn-primary.loading,
article.product .btn-primary.wide.loading {
  pointer-events: none;
  color: transparent;
}

.product-card__footer .btn-primary.wide.loading::before,
.product-card__footer .btn-primary.loading::before,
article.product .btn-primary.wide.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #666666;
  border-top: 2px solid #000000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Grid Layout - 8px baseline spacing */
.store-products-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  padding: var(--spacing-xl) 0;
  align-items: start;
}

.store-products-images>div {
  width: 100%;
  margin: 0;
  display: flex;
}

/* Ensure consistent card spacing */
.product-card,
article.product {
  margin: 0;
  align-self: stretch;
}

/* ============================================
   MOBILE: 320px - 480px
   ============================================ */

@media (max-width: 480px) {
  .store-products-images {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
  }

  .product-card,
  article.product {
    border-radius: var(--radius-md);
  }

  .product-card__content,
  article.product .product-info {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    /* Ensure clear separation from image */
    margin-top: 0;
  }

  .product-card__header-row {
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .product-card__header {
    max-width: 50%;
  }

  .product-card__title,
  article.product .product-title {
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }

  .product-card__price,
  article.product .custom-price {
    flex-shrink: 0;
    gap: var(--spacing-xs);
  }

  .product-card__price-current,
  article.product .custom-price .current-price {
    font-size: var(--font-size-lg);
  }

  .product-card__price-original,
  article.product .custom-price .original-price {
    font-size: var(--font-size-sm);
  }

  .product-card__footer,
  article.product .package-actions {
    padding: 0 var(--spacing-md) var(--spacing-md);
  }

  .product-card__footer .btn-primary.wide,
  article.product .btn-primary.wide {
    min-height: 44px;
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Ensure badge doesn't overlap on small screens */
  .product-card__discount-badge,
  article.product .product-discount-badge {
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    font-size: 9px;
    padding: 2px 6px;
    min-height: 18px;
  }
}

/* ============================================
   TABLET: 481px - 768px
   ============================================ */

@media (min-width: 481px) and (max-width: 768px) {
  .store-products-images {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }

  .product-card__content,
  article.product .product-info {
    padding: var(--spacing-md);
  }

  .product-card__footer .btn-primary.wide,
  article.product .btn-primary.wide {
    min-height: 46px;
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   DESKTOP: 769px - 1199px
   ============================================ */

@media (min-width: 769px) and (max-width: 1199px) {
  .store-products-images {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

/* ============================================
   LARGE DESKTOP: 1200px+
   ============================================ */

@media (min-width: 1200px) {
  .store-products-images {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }
}

/* ============================================
   ACCESSIBILITY & PREFERENCES
   ============================================ */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  .product-card,
  article.product,
  .product-card__image,
  article.product .image,
  .product-card__hover-overlay,
  article.product .hover-overlay,
  .product-card__footer .btn-primary,
  article.product .btn-primary,
  .product-card__discount-badge {
    animation: none !important;
    transition: none !important;
  }

  /* Show cards immediately without animation */
  .product-card,
  article.product {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .product-card:hover,
  article.product:hover {
    transform: none !important;
  }

  .product-card__image-link:hover .product-card__image,
  article.product .image-link:hover .image {
    transform: none !important;
  }

  .product-card__footer .btn-primary.wide:hover,
  article.product .btn-primary.wide:hover {
    transform: none !important;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  .product-card__image,
  article.product .image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {

  .product-card__footer .btn-primary,
  article.product .btn-primary,
  .product-card__hover-overlay,
  article.product .hover-overlay,
  .product-card__tag,
  article.product .product-tag,
  .product-card__discount-badge {
    display: none;
  }

  .product-card,
  article.product {
    background: white;
    color: black;
    box-shadow: none;
    border: 1px solid black;
    page-break-inside: avoid;
  }

  .product-card__title,
  article.product .product-title,
  .product-card__price-current,
  article.product .custom-price .current-price {
    color: black;
  }

  .product-card__price-original,
  article.product .custom-price .original-price {
    color: #666;
  }
}

/* Additional utility classes */
article.product.featured {
  border: 2px solid #007bff;
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
}

article.product.sold-out {
  opacity: 0.7;
}

article.product.sold-out .add-to-cart,
article.product.sold-out .btn-primary {
  background: linear-gradient(45deg, #6c757d, #5a6268);
  cursor: not-allowed;
}

article.product.sold-out .add-to-cart:hover,
article.product.sold-out .btn-primary:hover {
  transform: none;
  background: linear-gradient(45deg, #6c757d, #5a6268);
}

/* Success state for buttons - disabled for product cards */
.product-card__footer .btn-primary.success,
article.product .btn-primary.wide.success {
  background-color: var(--color-btn-primary) !important;
  filter: none !important;
}

/* Success state for buttons - only for non-product-card buttons */
article.product .add-to-cart.success:not(.product-card__footer .btn-primary),
article.product .btn-primary.success:not(.product-card__footer .btn-primary):not(.product-card__footer .btn-primary.wide) {
  background: linear-gradient(45deg, #28a745, #1e7e34);
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

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

/* Performance optimizations */
article.product,
article.product .image,
article.product .hover-overlay {
  transform: translateZ(0);
  will-change: transform;
}

/* Optimize for retina displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  article.product {
    border-width: 0.5px;
  }
}



.featured-packages-section {
  padding: 40px 20px;
  background: var(--background-dark);
}

.featured-packages-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--text-light);
}

.featured-packages-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* Space between packages */
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
}

.featured-packages-container .product {
  flex: 0 0 320px;
  /* Increased from 280px to 320px */
  max-width: 320px;
  /* Increased from 280px to 320px */
  background: var(--card-dark);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-packages-container .product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.featured-packages-container .image-link {
  position: relative;
  display: block;
}

.featured-packages-container .image {
  width: 100%;
  height: 180px;
  /* Increased from 160px to 180px to maintain proportions */
  object-fit: cover;
}

.featured-packages-container .hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.featured-packages-container .image-link:hover .hover-overlay {
  opacity: 1;
}

.featured-packages-container .product-tag-bestseller {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff6b35;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 2;
}

.featured-packages-container .product-info {
  padding: 1.2rem;
  /* Slightly increased padding */
}

.featured-packages-container .custom-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.featured-packages-container .product-title {
  margin: 0;
  font-size: 1rem;
  color: var(--text-light);
}

.featured-packages-container .product-title a {
  color: inherit;
  text-decoration: none;
}

.featured-packages-container .product-title a:hover {
  color: var(--accent-color);
}

.featured-packages-container .actions {
  padding: 0 1.2rem 1.2rem;
  /* Increased padding to match */
}

.featured-packages-container .btn-primary {
  width: 100%;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background: var(--accent-color);
  color: white;
  border: none;
  cursor: pointer;
}

.featured-packages-container .btn-primary:hover {
  background: var(--color-primary);
}

/* Responsive design */
@media (max-width: 768px) {
  .featured-packages-container {
    flex-direction: column;
    align-items: center;
  }

  .featured-packages-container .product {
    flex: 0 0 100%;
    /* Full width on mobile */
    max-width: 100%;
    /* Full width on mobile */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .featured-packages-container .product {
    flex: 0 0 300px;
    /* Slightly smaller on tablets */
    max-width: 300px;
  }
}

/* Video Embed Styling */
.store-product.store-product-full .product-media .media-viewport .video-embed {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.store-product.store-product-full .product-media .media-viewport .video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
}

.store-product.store-product-full .product-media .media-viewport .video-wrapper .video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* Payment info - hidden on product pages */
.site-content.site-content-widgets .payment-info,
.store-product.store-product-full .payment-info {
  display: none;
}

/* Gift Button Styles */
.btn.btn-secondary.btn-icon.gift {
  width: 40px;
  /* Fixed width for square shape */
  height: 40px;
  /* Fixed height for square shape */
  display: flex;
  /* Flexbox for centering */
  align-items: center;
  /* Center icon vertically */
  justify-content: center;
  /* Center icon horizontally */
  background-color: #6c757d;
  /* Gray background */
  border: none;
  /* No border */
  border-radius: 8px;
  /* Rounded corners */
  color: white;
  /* White icon color */
  transition: background-color 0.3s;
  /* Smooth transition */
}

.btn.btn-secondary.btn-icon.gift:hover {
  background-color: #5a6268;
  /* Darker gray on hover */
}

/* Container for the button group */
.actions .button-group {
  display: flex !important;
  /* Flexbox for button alignment */
  align-items: stretch !important;
  /* Make buttons same height */
  gap: 0 !important;
  /* No gap between buttons */
  width: 100% !important;
  /* Full width */
  margin: 0 !important;
  /* Reset margin */
  padding: 0 !important;
  /* Reset padding */
}

/* If gift button is not present, make the main button fully rounded */
.actions .button-group:not(:has(.btn.btn-secondary.btn-icon.gift)) .btn.add.btn-primary.wide {
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-md) !important;
}

/* ============================================
   ADD TO BASKET BUTTON - CLEAN VERSION
   Overrides shared.css with higher specificity
   ============================================ */

.actions .button-group .btn.add.btn-primary.wide {
  /* Reset to override shared.css */
  all: unset;
  box-sizing: border-box;

  /* Layout */
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);

  /* Dimensions */
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  line-height: 1 !important;

  /* Colors - Clean grey/white theme */
  background: linear-gradient(135deg, var(--color-btn-primary) 0%, var(--color-btn-primary-hover) 100%) !important;
  color: var(--color-btn-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-right: none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;

  /* Typography - Navigation font */
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;

  /* Spacing */
  padding: 0 var(--spacing-lg) !important;
  margin: 0 !important;

  /* Effects - Dark theme shadows with white glow */
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  box-shadow: 0 2px 8px rgba(232, 232, 232, 0.15), 0 0 0 0 rgba(255, 255, 255, 0) !important;
  filter: none !important;

  /* Positioning */
  position: relative !important;
  overflow: hidden !important;
}

/* Button icon wrapper for smooth transitions */
.actions .button-group .btn.add.btn-primary.wide .button-icon-wrapper {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 18px;
}

/* Button icons - smooth transitions */
.actions .button-group .btn.add.btn-primary.wide .button-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
  color: currentColor;
  transition: opacity var(--transition-base), transform var(--transition-base);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Hidden class for icons - still rendered but invisible */
.actions .button-group .btn.add.btn-primary.wide .button-icon.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cart icon - visible when adding */
.actions .button-group .btn.add.btn-primary.wide .cart-icon:not(.hidden) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  pointer-events: auto;
}

/* Cart icon - hidden when removing */
.actions .button-group .btn.add.btn-primary.wide .cart-icon.hidden,
.actions .button-group .btn.add.btn-primary.wide[data-action="remove"] .cart-icon:not(.hidden),
.actions .button-group .btn.add.btn-primary.wide.remove-state .cart-icon:not(.hidden) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(90deg);
  pointer-events: none;
}

/* Trash icon - hidden when adding */
.actions .button-group .btn.add.btn-primary.wide .trash-icon.hidden,
.actions .button-group .btn.add.btn-primary.wide[data-action="add"] .trash-icon:not(.hidden) {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(-90deg);
  pointer-events: none;
}

/* Trash icon - visible when removing */
.actions .button-group .btn.add.btn-primary.wide .trash-icon:not(.hidden),
.actions .button-group .btn.add.btn-primary.wide[data-action="remove"] .trash-icon:not(.hidden),
.actions .button-group .btn.add.btn-primary.wide.remove-state .trash-icon:not(.hidden) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  pointer-events: auto;
}

/* Button transitioning state */
.actions .button-group .btn.add.btn-primary.wide.transitioning:not(.remove-state):not([data-action="remove"]) {
  opacity: 0.7;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.actions .button-group .btn.add.btn-primary.wide.transitioning.remove-state,
.actions .button-group .btn.add.btn-primary.wide.transitioning[data-action="remove"] {
  opacity: 0.7;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.15);
}

/* Remove state styling - RED */
.actions .button-group .btn.add.btn-primary.wide.remove-state,
.actions .button-group .btn.add.btn-primary.wide[data-action="remove"] {
  background: linear-gradient(135deg, var(--color-btn-remove) 0%, var(--color-btn-remove-hover) 100%) !important;
  border-color: rgba(231, 76, 60, 0.3) !important;
  border-right: none !important;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25), 0 0 0 0 rgba(231, 76, 60, 0) !important;
  color: #ffffff !important;
  opacity: 0.95;
}

.actions .button-group .btn.add.btn-primary.wide.remove-state:hover,
.actions .button-group .btn.add.btn-primary.wide[data-action="remove"]:hover {
  background: linear-gradient(135deg, var(--color-btn-remove-hover) 0%, var(--color-btn-remove-active) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(231, 76, 60, 0.5) !important;
  border-right: none !important;
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.4), 0 0 20px rgba(231, 76, 60, 0.2);
  transform: translateY(-1px);
  opacity: 1;
  filter: none !important;
}

.actions .button-group .btn.add.btn-primary.wide.remove-state:active,
.actions .button-group .btn.add.btn-primary.wide[data-action="remove"]:active {
  background: linear-gradient(135deg, var(--color-btn-remove-active) 0%, var(--color-btn-remove-hover) 100%) !important;
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(231, 76, 60, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  filter: none !important;
}

/* Button text - smooth transition */
.actions .button-group .btn.add.btn-primary.wide .button-text {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  transition: opacity var(--transition-base), transform var(--transition-base);
  display: inline-block;
}

/* Hover state - Enhanced glow effect (only for add state) */
.actions .button-group .btn.add.btn-primary.wide:hover:not(.remove-state):not([data-action="remove"]) {
  background: linear-gradient(135deg, var(--color-btn-primary-hover) 0%, #ffffff 100%) !important;
  color: var(--color-btn-text) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25), 0 0 20px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
  filter: none !important;
}

/* Active state (only for add state) */
.actions .button-group .btn.add.btn-primary.wide:active:not(.remove-state):not([data-action="remove"]) {
  background: linear-gradient(135deg, var(--color-btn-primary-active) 0%, var(--color-btn-primary) 100%) !important;
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.15);
  filter: none !important;
}

/* Focus state - White glow for add, red for remove */
.actions .button-group .btn.add.btn-primary.wide:focus-visible:not(.remove-state):not([data-action="remove"]) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  background: linear-gradient(135deg, var(--color-btn-primary-hover) 0%, #ffffff 100%) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(255, 255, 255, 0.3);
  filter: none !important;
}

.actions .button-group .btn.add.btn-primary.wide:focus-visible.remove-state,
.actions .button-group .btn.add.btn-primary.wide:focus-visible[data-action="remove"] {
  outline: 2px solid var(--color-btn-remove);
  outline-offset: 2px;
  background: linear-gradient(135deg, var(--color-btn-remove-hover) 0%, var(--color-btn-remove-active) 100%) !important;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.25), 0 4px 16px rgba(231, 76, 60, 0.4);
  filter: none !important;
}

/* Disabled state - Dark theme */
.actions .button-group .btn.add.btn-primary.wide:disabled {
  background: #2a2a2a !important;
  color: #666666 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none !important;
  filter: none !important;
}

/* Gift Button - Square on the right */
.actions .button-group .btn.btn-secondary.btn-icon.gift {
  all: unset !important;
  /* Reset all styles */

  width: 48px !important;
  /* Fixed square size */
  height: 48px !important;
  /* Fixed height */
  min-width: 48px !important;
  /* Minimum width */
  min-height: 48px !important;
  /* Minimum height */
  max-width: 48px !important;
  /* Maximum width */
  max-height: 48px !important;
  /* Maximum height */
  flex-shrink: 0 !important;
  /* Don't shrink */

  background-color: #3a3a3a !important;
  /* Dark gray background */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  /* Subtle border */
  border-left: none !important;
  /* No left border (connects to main button) */
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  /* Rounded right corners only */
  box-sizing: border-box !important;
  line-height: 1 !important;

  display: flex !important;
  /* Flexbox for centering */
  align-items: center !important;
  /* Center icon vertically */
  justify-content: center !important;
  /* Center icon horizontally */

  cursor: pointer !important;
  /* Pointer cursor */
  transition: background-color 0.3s ease !important;
  /* Smooth transition */

  box-sizing: border-box !important;
  /* Box model */
  margin: 0 !important;
  /* Reset margin */
  padding: 0 !important;
  /* Reset padding */

  font-size: 0 !important;
  /* Hide text */
  color: transparent !important;
  /* Hide color */
  text-indent: -9999px !important;
  /* Hide text */
  overflow: hidden !important;
  /* Prevent overflow */
}

/* Gift icon styling */
.actions .button-group .btn.btn-secondary.btn-icon.gift i.fa-gift,
.actions .button-group .btn.btn-secondary.btn-icon.gift .fa-gift {
  all: unset !important;
  /* Reset and set icon styles */

  display: inline-block !important;
  /* Inline block for icon */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  /* Font Awesome */
  font-weight: 900 !important;
  /* Bold icon */

  color: #ffffff !important;
  /* White icon color */
  font-size: 18px !important;
  /* Icon size */
  line-height: 1 !important;
  /* Line height */

  position: relative !important;
  /* Positioning */
  margin: 0 !important;
  /* Reset margin */
  padding: 0 !important;
  /* Reset padding */
  text-indent: 0 !important;
  /* Reset text indent */

  overflow: visible !important;
  /* Ensure visibility */
  z-index: 2 !important;
  /* Ensure icon is on top */
}

/* Force gift icon content */
.actions .button-group .btn.btn-secondary.btn-icon.gift i.fa-gift::before {
  content: "\f06b" !important;
  /* Gift icon unicode */
}

/* Hover states - handled above */

.actions .button-group .btn.btn-secondary.btn-icon.gift:hover {
  background-color: #4a4a4a !important;
  /* Lighter gray on hover */
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.actions .button-group .btn.btn-secondary.btn-icon.gift:hover i {
  color: #ffffff !important;
  /* White icon color on hover */
  transform: none !important;
}

/* Active states - handled above */

.actions .button-group .btn.btn-secondary.btn-icon.gift:active {
  background-color: #2a2a2a !important;
  /* Darker gray on active */
  transform: none !important;
}

/* Focus states - handled above for add button */
.actions .button-group .btn.btn-secondary.btn-icon.gift:focus {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .actions .button-group .btn.add.btn-primary.wide {
    min-height: 46px;
    height: 46px;
    font-size: 14px;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .actions .button-group .btn.btn-secondary.btn-icon.gift {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .actions .button-group .btn.add.btn-primary.wide {
    min-height: 44px;
    height: 44px;
    font-size: 13px;
    padding: 0 var(--spacing-sm);
  }

  .actions .button-group .btn.btn-secondary.btn-icon.gift {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
}

/* Remove any conflicting pseudo-elements */
.actions .button-group .btn::before,
.actions .button-group .btn::after,
.actions .button-group .btn.add::before,
.actions .button-group .btn.add::after,
.actions .button-group .btn.add.btn-primary::before,
.actions .button-group .btn.add.btn-primary::after {
  display: none !important;
  /* Hide pseudo-elements */
  content: none !important;
  /* Remove content */
  background: none !important;
}

/* Ensure button group buttons don't inherit unwanted shared.css styles */
.actions .button-group .btn.add.btn-primary.wide,
.actions .button-group .btn.btn-secondary.btn-icon.gift {
  vertical-align: baseline !important;
  text-overflow: clip !important;
}

/* Ensure proper stacking */
.actions .button-group {
  position: relative !important;
  /* Relative positioning */
  z-index: 1 !important;
  /* Ensure stacking order */
}

/* Hide any other text in gift button */
.actions .button-group .btn.btn-secondary.btn-icon.gift span:not(.fa):not([class*="fa-"]),
.actions .button-group .btn.btn-secondary.btn-icon.gift .sr-only {
  display: none !important;
  /* Hide unwanted text */
  visibility: hidden !important;
  /* Ensure hidden */
}

/* Removed old shopping cart icon styles - using SVG now */

/* ===== PREMIUM GAMING FOOTER — CONSOLIDATED & FIXED (with silver hairline) ===== */

/* Design tokens */
:root {
  --bg: #0F0F10;
  --elev-1: #151517;
  --text: #EDEDED;
  /* headings only */
  --muted: #A0A0A5;
  /* body copy */
  --link-idle: #CFCFD3;
  /* link idle */
  --link-hover: #FFFFFF;
  /* link hover */
  --accent: #ff0f56;
  --accent-2: #e00078;
  /* kept for brand usage elsewhere */
}

/* Footer shell + TOP LINE (updated to premium silver with edge fade) */
.site-footer {
  background: #0e309e05;
  padding: 48px 0 32px;
  margin-top: 40px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  position: relative;
  isolation: isolate;
  /* keeps the glow neat on dark bg */
}

/* Crisp 2px hairline with center highlight and transparent ends */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(232, 232, 236, .22) 10%,
      rgba(224, 224, 230, .38) 25%,
      rgba(255, 255, 255, .88) 50%,
      /* crisp center */
      rgba(224, 224, 230, .38) 75%,
      rgba(232, 232, 236, .22) 90%,
      rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}

/* Soft bloom under the line, also fading at edges */


/* Grid like the reference: Brand | Subpages | Legal */
.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 64px;
  align-items: start;
  width: 100%;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

/* Base type colors (ONLY headings are near-white) */
.site-footer p,
.site-footer small,
.site-footer li,
.site-footer a {
  color: var(--muted);
}

.site-footer h4,
.footer-title,
.brand-name {
  color: var(--text);
  font-weight: 600;
}

/* --- Column 1: Brand --- */
.footer-brand {
  max-width: 520px;
  grid-column: 1;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.brand-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name {
  font-size: 18px;
  letter-spacing: -.01em;
}

.brand-tagline {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 16px;
}

.brand-disclaimer {
  font-size: 11px;
  line-height: 1.6;
}

.brand-disclaimer p {
  margin: 0 0 8px;
}

.brand-disclaimer p:last-child {
  margin: 0;
}

/* --- Section titles --- */
.footer-title {
  font-size: 13px;
  letter-spacing: .03em;
  margin: 0 0 16px;
  text-transform: none;
}

/* --- Links (both Subpages & Legal) — INLINE row like the second image --- */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  /* visual spacing between inline links */
}

.footer-links li {
  margin: 0;
}

.footer-link {
  color: var(--link-idle);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

.footer-link:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Column 2 / Column 3 positioning --- */
.footer-subpages {
  grid-column: 2;
  align-items: flex-start;
}

.footer-legal {
  grid-column: 3;
  align-items: flex-start;
}

/* Socials directly under Legal links */
.social-icons {
  display: flex;
  gap: 16px;
  margin: 16px 0 8px;
}

.social-link {
  color: var(--link-idle);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
}

.social-link:hover,
.social-link:focus {
  color: var(--link-hover);
}

.social-link:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Designer credit aligned to the right edge */
.designer-credit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* Hide dynamically generated duplicate credit */
#tmpl-attr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

#tmpl-attr .t-credit,
#tmpl-attr .t-label,
#tmpl-attr .t-name {
  display: none !important;
  visibility: hidden !important;
}

.credit-text {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.credit-logo {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .5px;
}

/* Responsive */
@media (max-width:1024px) {
  .footer-container {
    gap: 40px;
    padding: 0 24px;
  }
}

@media (max-width:768px) {
  .site-footer {
    padding: 40px 0 32px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
  }

  .footer-links {
    flex-direction: column;
    gap: 8px;
  }

  .social-icons {
    justify-content: center;
  }

  .designer-credit {
    justify-content: center;
  }
}

@media (max-width:480px) {
  .footer-container {
    padding: 0 16px;
  }

  .site-footer {
    padding: 32px 0 24px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {

  .footer-link,
  .social-link {
    transition: none;
  }
}

.site-footer {
  padding: 48px 0 32px;
  margin-top: 56px;
}

.footer-container {
  gap: 40px;
}

.brand-header {
  margin-bottom: 10px;
}

.brand-tagline {
  margin: 0 0 12px;
}

.brand-disclaimer {
  line-height: 1.45;
}

.brand-disclaimer p {
  margin: 0 0 6px;
}

.footer-title {
  margin: 0 0 12px;
}

.footer-links {
  gap: 14px;
}

.social-icons {
  margin: 12px 0 6px;
  gap: 12px;
}

.designer-credit {
  margin-top: 6px;
}

/* ===== HOMEPAGE REDESIGN - NEON/PINK BRAND ===== */

/* Global Page Styles */
body {
  background: #0F0F10;
  color: #EDEDED;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
}

/* Hero Section */
.hero-section {
  padding: 80px 0;
  position: relative;
}

.hero-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-content {
  z-index: 2;
  position: relative;
}

.hero-headline {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 24px 0;
  color: #FFFFFF;
  text-transform: none;
}

.hero-accent {
  background: linear-gradient(135deg, #E5E7EB 0%, #9CA3AF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

.hero-subcopy {
  font-size: 17px;
  color: #9CA3AF;
  max-width: 560px;
  margin: 0 0 36px 0;
  line-height: 1.65;
  font-weight: 400;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  
  /* Use the direct URL here */
  background: url("https://cdn.tebex.io/store/1748590/templates/286139/assets/b33eb78f0b0443729d6c3c84675029903882ca83.png") no-repeat center !important;
  background-size: contain !important;
  background-color: transparent !important;
  
  /* Sizing: Adjust these based on the actual PNG shape */
  width: 250px; 
  height: 89px; 
  
  /* Text Styling */
  color: #000000 !important; 
  font-weight: 600;
  font-size: 15px;
  font-family: 'Bebas Neue', sans-serif !important;
  text-decoration: none;
  border: none !important;
  border-radius: 0 !important; /* Removes the rounded corners from the old white box */
  transition: transform 0.2s ease;
}

.hero-cta:hover {
  transform: scale(1.05);
  background-color: transparent !important;
}


.hero-glow {
  position: absolute;
  right: -20%;
  top: 30%;
  transform: translateY(-30%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at center,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(200, 200, 210, 0.06) 35%,
      rgba(180, 180, 190, 0.04) 55%,
      transparent 75%);
  filter: blur(80px);
  opacity: 0.6;
  pointer-events: none;
}

.hero-logo {
  position: absolute;
  right: -10%;
  top: 48%;
  transform: translate(0, -50%);
  width: 600px;
  height: auto;
  z-index: 2;
  opacity: 0.9;
  filter: drop-shadow(0 8px 32px rgba(255, 255, 255, 0.15));
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, -50%) translateY(0px);
  }

  50% {
    transform: translate(0, -50%) translateY(-20px);
  }
}

/* Hero Background Animation */
.hero-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    /* Dots at grid intersections */
    radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0.5px, transparent 0.5px),
    /* Vertical lines */
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    /* Horizontal lines */
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size:
    50px 50px,
    /* Dot spacing */
    50px 50px,
    /* Vertical line spacing */
    50px 50px;
  /* Horizontal line spacing */
  background-position: 0 0, 0 0, 0 0;
  /* Remove mask to show grid everywhere */
  opacity: 0.4;
}

.hero-bg-orb {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(60px);
  animation: heroOrbMove 15s infinite alternate ease-in-out;
  opacity: 0.8;
}

@keyframes heroOrbMove {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(50px, -30px) scale(1.1);
  }
}

/* ===== FEATURES STRIP (MERGED BAR) ===== */

/* Design tokens */
:root {
  --panel: #121214;
  --panel-2: #0E0E10;
  --divider: rgba(255, 255, 255, 0.08);
  --ring: rgba(255, 255, 255, 0.10);
  --glow: rgba(255, 255, 255, 0.06);
}

/* Features section wrapper */
.features {
  padding: 48px 0;
  margin-top: -20px;
}

/* The merged panel (single bar) */
.features__panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Grid container */
.features__grid {
  list-style: none;
  margin: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--ring);
  box-shadow: inset 0 1px 0 var(--glow), 0 10px 30px rgba(0, 0, 0, 0.35);
  border-radius: 0;
}

/* Individual feature column */
.feature {
  position: relative;
  padding: 0 28px;
}

/* Vertical separators between columns */
.feature:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--divider);
}

/* Icon container */
.feature__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 16px;
}

.feature__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--text);
  opacity: 0.95;
}

/* Feature title */
.feature__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

/* Feature body text */
.feature__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* Responsive: Tablet (2x2 grid) */
@media (max-width: 900px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px;
  }

  .feature {
    padding: 20px 24px;
  }

  /* Remove left separator on 3rd item (new row) */
  .feature:nth-child(3)::before {
    display: none;
  }

  /* Add horizontal separator for bottom row */
  .feature:nth-child(n+3) {
    border-top: 1px solid var(--divider);
    padding-top: 24px;
    margin-top: 24px;
  }
}

/* Responsive: Mobile (stacked 1 column) */
@media (max-width: 520px) {
  .features {
    padding: 32px 0;
  }

  .features__panel {
    padding: 0 20px;
  }

  .features__grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .feature {
    padding: 20px 16px;
  }

  /* Remove all vertical separators */
  .feature::before {
    display: none !important;
  }

  /* Add horizontal separators between all items */
  .feature:not(:last-child) {
    border-bottom: 1px solid var(--divider);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .feature:nth-child(n+3) {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}

/* ============================================
   CINEMATIC HERO - PREMIUM GAMING BRAND
   Bold • Cinematic • Conversion-Focused
   ============================================ */

.cinematic-hero {
  position: relative;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}

/* Background Effects */
.cinematic-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cinematic-hero__glow {
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(80, 80, 120, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.cinematic-hero__particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 60%, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
  opacity: 0.6;
}

/* Main Container - Split Layout */
.cinematic-hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 48px 40px;
  flex: 1;
}

/* Left: Content */
.cinematic-hero__content {
  max-width: 560px;
}

/* Badge */
.cinematic-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Headline */
.cinematic-hero__headline {
  font-family: Lexend, sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #fff;
  margin: 0 0 20px;
}

.cinematic-hero__accent {
  background: linear-gradient(135deg, #fff 0%, #666 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subheadline */
.cinematic-hero__subheadline {
  font-size: 18px;
  font-weight: 500;
  color: #888;
  line-height: 1.5;
  margin: 0 0 16px;
  letter-spacing: -0.2px;
}

/* Description */
.cinematic-hero__description {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 440px;
}

/* CTA Buttons */
.cinematic-hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cinematic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  cursor: pointer;
}

.cinematic-btn--primary {
  background: #fff;
  color: #000;
  box-shadow: 0 4px 24px rgba(255, 255, 255, 0.12);
}

.cinematic-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.18);
}

.cinematic-btn--primary svg {
  transition: transform 0.2s ease;
}

.cinematic-btn--primary:hover svg {
  transform: translateX(3px);
}

.cinematic-btn--secondary {
  background: transparent;
  color: #777;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.cinematic-btn--secondary:hover {
  color: #aaa;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
}

/* Right: Visual */
.cinematic-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
}

.cinematic-hero__spotlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.cinematic-hero__image {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}

/* Benefits Strip */
.cinematic-benefits {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cinematic-benefits__container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 48px;
}

.cinematic-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
}

.cinematic-benefit svg {
  color: #555;
  flex-shrink: 0;
}

/* Transition Fade */
.cinematic-hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Products Section Header */
.products-section-header {
  text-align: center;
  margin-bottom: 32px;
  padding-top: 16px;
}

.products-section-title {
  font-family: Lexend, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.products-section-subtitle {
  font-size: 14px;
  color: #555;
  margin: 0;
  font-weight: 400;
}

/* Spacing */
.cinematic-hero+.site-content {
  margin-top: 0;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
  .cinematic-hero__container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 32px 32px;
    text-align: center;
  }

  .cinematic-hero__content {
    max-width: 100%;
    order: 1;
  }

  .cinematic-hero__visual {
    order: 0;
    min-height: 280px;
  }

  .cinematic-hero__headline {
    font-size: 42px;
  }

  .cinematic-hero__description {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .cinematic-hero__cta {
    justify-content: center;
  }

  .cinematic-hero__image {
    max-height: 300px;
  }

  .cinematic-benefits__container {
    flex-wrap: wrap;
    gap: 24px 40px;
    padding: 16px 24px;
  }
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .cinematic-hero {
    min-height: auto;
  }

  .cinematic-hero__container {
    padding: 36px 20px 24px;
    gap: 24px;
  }

  .cinematic-hero__badge {
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 20px;
  }

  .cinematic-hero__headline {
    font-size: 32px;
    letter-spacing: -1px;
  }

  .cinematic-hero__subheadline {
    font-size: 16px;
  }

  .cinematic-hero__description {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .cinematic-hero__cta {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .cinematic-btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 24px;
    font-size: 14px;
  }

  .cinematic-hero__visual {
    min-height: 200px;
  }

  .cinematic-hero__image {
    max-height: 220px;
  }

  .cinematic-benefits__container {
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
  }

  .cinematic-benefit {
    font-size: 12px;
  }

  .products-section-header {
    margin-bottom: 24px;
  }

  .products-section-title {
    font-size: 22px;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-container {
    gap: 48px;
  }

  .hero-section {
    padding: 56px 0;
  }
}

@media (max-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-visual {
    height: 300px;
    order: 2;
  }

  .hero-content {
    order: 1;
  }

  .hero-headline {
    font-size: clamp(32px, 8vw, 48px);
  }

  .hero-section {
    padding: 40px 0;
  }

  .hero-glow {
    width: 80vw;
    height: 80vw;
  }

  .hero-logo {
    width: 200px;
    right: 10%;
  }
}

@media (max-width: 480px) {
  .hero-container {
    padding: 0 16px;
  }

  .hero-cta {
    width: 100%;
    justify-content: center;
  }

  .hero-logo {
    width: 150px;
    right: 5%;
  }
}

/* ===== FEATURES — ultra-clean row (no cards, no borders) ===== */

/* tokens */
:root {
  --fx-text: #EFEFEF;
  --fx-muted: #B4BAC3;
  --fx-icon-tile: rgba(255, 255, 255, 0.07);
  --fx-icon-tile-hover: rgba(255, 255, 255, 0.12);
}

/* section spacing */
.features-section {
  background: transparent !important;
  padding: 28px 0 12px !important;
  /* slim like your ref */
}

/* one row, evenly spaced, transparent */
.features-section .features-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex !important;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.features-gap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  pointer-events: none;
}

.features-gap svg {
  width: 28px !important;
  height: 28px !important;
}

/* kill any previous "card" styling */
.features-section .features-container {
  position: relative;
}

/* kill any previous "card" styling */
.features-section .feature-card {
  background: rgba(5,8,20,.6) !important;
  border: 1px solid rgba(0,72,255,.15) !important;
  box-shadow: 0 0 18px rgba(0,72,255,.07) !important;
  outline: 0 !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.features-section .feature-card:hover {
  border-color: rgba(0,72,255,.38) !important;
  box-shadow: 0 0 28px rgba(0,72,255,.18) !important;
}
.features-section .feature-card .fc-beam {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  overflow: hidden;
}
.features-section .feature-card .fc-beam canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* soft icon square */
.features-section .feature-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--fx-icon-tile) !important;
  /* subtle, no border */
  color: var(--fx-text);
  box-shadow: none !important;
  transition: background .15s ease;
}

.features-section .feature-card:hover .feature-icon {
  background: var(--fx-icon-tile-hover);
}

.features-section .feature-icon i,
.features-section .feature-icon svg {
  font-size: 16px;
  line-height: 1;
  transition: all 0.3s ease;
}

/* Icon glow effect on hover */
.features-section .feature-card:hover .feature-icon i,
.features-section .feature-card:hover .feature-icon svg {
  filter: drop-shadow(0 0 8px rgba(0,114,255,.9)) drop-shadow(0 0 14px rgba(0,114,255,.6));
  transform: none;
}

/* text */
.features-section .feature-content {
  min-width: 0;
  max-width: none;
}

.features-section .feature-title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  color: var(--fx-text);
}

.features-section .feature-description {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--fx-muted);
}

/* accessibility without outlines/borders */
.features-section .feature-card:focus-within .feature-icon {
  background: var(--fx-icon-tile-hover);
}

/* responsive: wrap to two columns then one */
@media (max-width: 1200px) {
  .features-section .features-container {
    justify-content: center;
    gap: 24px;
    flex-wrap: nowrap;
  }
}

@media (max-width: 640px) {
  .features-section .features-container {
    gap: 18px 24px;
  }

  .features-section .feature-card {
    min-width: 0;
  }

  .features-section .feature-content {
    max-width: none;
  }
}

.templates-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 12px;
  color: inherit;
  transition: color 0.2s ease;
}


/* ============================================
   PRODUCT CARD - ULTRA PREMIUM HOVER EFFECT
   Cinematic • Luxury • AAA Quality
   ============================================ */

/* Base Card Styling */
article.product-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-brighter-bg);
  transition: transform 0.22s cubic-bezier(.2, .9, .3, 1),
    box-shadow 0.22s cubic-bezier(.2, .9, .3, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Premium Card Hover - Lift & Luxury Shadow */
article.product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Image Wrapper - Stable Container */
.product-card__image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Image Link - Clean Block */
.product-card__image-link {
  display: block;
  position: relative;
  overflow: hidden;
}

/* Product Image - Base State */
img.product-card__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: brightness(0.97) saturate(0.98);
  transition: transform 0.26s cubic-bezier(.2, .9, .3, 1),
    filter 0.26s cubic-bezier(.2, .9, .3, 1);
  will-change: transform, filter;
}

/* Image Hover - Subtle Clarity & Scale */
article.product-card:hover img.product-card__image {
  transform: scale(1.015);
  filter: brightness(1.01) saturate(1);
}

/* ===== DISABLE HOVER OVERLAY COMPLETELY ===== */
.product-card__hover-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
}

.product-card__eye-icon,
.product-card__hover-text {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Cinematic Gloss Sweep - Ultra Subtle */
.product-card__image-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.018) 45%,
      rgba(255, 255, 255, 0.025) 50%,
      rgba(255, 255, 255, 0.018) 55%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(.2, .9, .3, 1);
  pointer-events: none;
  z-index: 2;
}

article.product-card:hover .product-card__image-link::after {
  left: 140%;
}

/* Focus State - Accessibility */
article.product-card:focus-within {
  outline: 2px solid rgba(255, 255, 255, 0.12);
  outline-offset: 3px;
}

/* Stability - No Layout Shift */
.product-card__content,
.product-card__header-row,
.product-card__title,
.product-card__price,
.product-card__footer {
  transition: none;
  transform: none;
}

/* Mobile - Lighter Hover, No Gloss */
@media (max-width: 768px) {
  article.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }

  article.product-card:hover img.product-card__image {
    transform: scale(1.008);
  }

  .product-card__image-link::after {
    display: none;
  }
}

/* Tablet - Slightly Reduced */
@media (min-width: 769px) and (max-width: 1024px) {
  article.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4);
  }
}



/* ============================================
   GLOBAL WIREFRAME GRID BACKGROUND
   ============================================ */

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(120, 120, 140, 0.4) 1.5px, transparent 1.5px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(80, 80, 100, 0.25) 3px, rgba(80, 80, 100, 0.25) 4px, transparent 4px, transparent 8px),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(80, 80, 100, 0.25) 3px, rgba(80, 80, 100, 0.25) 4px, transparent 4px, transparent 8px);
  background-size: 80px 80px, 80px 8px, 8px 80px;
  background-position: 0 0, 0 0, 0 0;
  opacity: 0.5;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center bottom, rgba(100, 100, 140, 0.08) 0%, rgba(80, 80, 120, 0.04) 30%, transparent 60%);
  opacity: 0.8;
}

.site,
.site-header,
.site-navigation {
  position: relative;
  z-index: 100;
}


/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  font-family: Lexend, sans-serif;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-link {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

.breadcrumb-link:hover {
  color: #ffffff;
}

.breadcrumb-page {
  color: #ffffff;
  font-weight: 600;
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  user-select: none;
}

.breadcrumb-separator::before {
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumb-item.hide-mobile {
    display: none;
  }
}


/* ============================================
   PACKAGE DETAIL PAGE - CLEAN CONSOLIDATED
   One single source of truth for product pages
   ============================================ */

/* Base reset - override shared.css grid template */
.store-product.store-product-full {
  display: block !important;
  grid-template: none !important;
  padding: 0;
  background: transparent;
  border: none;
  max-width: 100%;
  margin: 0;
  animation: pkgFadeIn 0.5s ease-out;
}

@keyframes pkgFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-content-widgets {
  padding-top: 16px;
}

/* Two-column grid */
.store-product-full .product-main {
  display: grid !important;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  align-items: start;
}

/* Left column: Media */
.store-product-full .product-media {
  grid-column: 1;
  grid-row: 1;
  width: 100% !important;
  max-width: 100% !important;
}

.store-product-full .product-media .media-viewport {
  position: relative !important;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.store-product-full .media-thumbs {
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.store-product-full .media-thumbs .thumb {
  width: 80px;
  height: 54px;
  overflow: hidden;
  border-radius: 8px;
  flex: 0 0 auto;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.store-product-full .media-thumbs .thumb:hover,
.store-product-full .media-thumbs .thumb.is-active {
  border-color: #1662d4;
}

.store-product-full .media-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right column: Summary card */
.store-product-full .product-summary {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100% !important;
  max-width: 100% !important;
  background: #00000079;
  border: 1px solid rgba(21, 76, 179, 0.37);
  border-radius: 14px;
  padding: 28px;
}

/* Title */
.store-product-full .product-title {
  font-family: Lexend, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  padding: 0 !important;
}

/* Price */
.store-product-full .product-actions .price {
  font-family: Lexend, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  order: -1 !important;
}

.store-product-full .product-actions .price strong {
  font-family: Lexend, sans-serif !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  font-size: inherit !important;
}

.store-product-full .product-actions .price .discount {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Product actions container */
.store-product-full .product-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  align-items: flex-start !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: static !important;
}

/* Override shared.css sticky actions bar */
.store-product.store-product-full .actions {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Button group row */
.store-product-full .actions .button-group {
  display: flex !important;
  gap: 10px !important;
  width: auto !important;
  justify-content: flex-start !important;
  margin-bottom: 0 !important;
}

/* Primary button - teal */
.store-product-full .actions .button-group .btn.add.btn-primary.wide {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 180px !important;
  max-width: 280px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: #0099ff !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  font-family: Lexend, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
  padding: 0 22px !important;
}

.store-product-full .actions .button-group .btn.add.btn-primary.wide:hover:not(.remove-state):not([data-action="remove"]) {
  background: #0099ff !important;
}

.store-product-full .actions .button-group .btn.add.btn-primary.wide:active:not(.remove-state):not([data-action="remove"]) {
  background: #0099ff !important;
}

/* Gift button - dark square */
.store-product-full .actions .button-group .btn.btn-secondary.btn-icon.gift {
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

.store-product-full .actions .button-group .btn.btn-secondary.btn-icon.gift:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

.store-product-full .actions .button-group .btn.btn-secondary.btn-icon.gift i,
.store-product-full .actions .button-group .btn.btn-secondary.btn-icon.gift .fa-gift {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Product header inside card */
.store-product-full .product-summary .product-header {
  padding-bottom: 0;
  margin-bottom: 20px;
  border-bottom: none;
}

/* Hide payment-info from buy zone - clutters the flow */
.store-product-full .product-summary .payment-info {
  display: none !important;
}

/* Live Stats - Minimal elegant */
.live-stats-card {
  margin: 0 0 24px;
  padding: 20px 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
}

.live-stats-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.live-stats-pulse {
  width: 8px;
  height: 8px;
  background: #4db8a8;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.live-stats-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #4db8a8;
  animation: circlePulse 2s infinite;
}

@keyframes circlePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(77, 184, 168, 0.7);
  }

  50% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(77, 184, 168, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(77, 184, 168, 0);
  }
}

.live-stats-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.live-stats-numbers {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 0 8px;
}

.live-stat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.live-stat-num {
  font-family: Lexend, sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.live-stat-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}

.live-stats-divider {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  flex-shrink: 0;
}

.live-stats-foot {
  padding-top: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.18);
  text-align: center;
}

.live-stats-foot strong {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

/* Description section */
.store-product-full .product-summary .product-description {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 !important;
  padding: 20px 0 0 !important;
  margin-top: 4px !important;
  height: fit-content;
}

.store-product-full .product-summary .product-description .description-title {
  font-family: Lexend, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

.store-product-full .product-summary .product-description .descr {
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.store-product-full .product-description .descr p {
  margin: 0 0 12px 0;
  line-height: 1.7;
}

.store-product-full .product-description .descr p:last-child {
  margin-bottom: 0;
}

.store-product-full .product-description hr {
  display: none !important;
}

.store-product-full .product-description pre {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  font-family: inherit !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.store-product-full .product-description h1,
.store-product-full .product-description h2,
.store-product-full .product-description h3,
.store-product-full .product-description h4,
.store-product-full .product-description h5,
.store-product-full .product-description h6 {
  border: none !important;
  background: transparent !important;
  padding: 0;
  margin: 16px 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff !important;
}

.store-product-full .product-description ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0 0 12px 0;
}

.store-product-full .product-description li {
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.store-product-full .product-description a {
  color: #068fff4d !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.store-product-full .product-description a:hover {
  color: #6FE1D5 !important;
  text-decoration: underline;
}

.store-product-full .product-description * {
  color: rgba(255, 255, 255, 0.55);
}

.store-product-full .product-description code {
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.store-product-full .product-description blockquote {
  background: transparent !important;
  border-left: 3px solid rgba(255, 255, 255, 0.1);
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}

/* Countdown */
.store-product-full .countdown {
  background: rgba(255, 68, 68, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}


/* ============================================
   RESPONSIVE - PRODUCT PAGE
   ============================================ */
@media (max-width: 1024px) {
  .store-product-full .product-main {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }

  .store-product-full .product-media,
  .store-product-full .product-summary {
    grid-column: auto;
    grid-row: auto;
  }

  .store-product-full .product-summary {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .store-product-full .product-summary {
    padding: 20px;
    border-radius: 12px;
  }

  .store-product-full .product-title {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  .store-product-full .product-summary {
    padding: 16px;
  }

  .store-product-full .product-title {
    font-size: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-product.store-product-full {
    animation: none;
  }
}

/* =========================
   FAQ SECTION
   ========================= */
.faq-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 20px 60px;
}

.faq-heading {
  font-family: Lexend, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item:hover {
  border-color: #3d3d3d;
}

.faq-item.open {
  border-color: #444;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: none;
  border: none;
  color: #e0e0e0;
  font-family: Lexend, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: #fff;
}

.faq-chevron {
  flex-shrink: 0;
  color: #666;
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: #a0a0a0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 22px;
}

.faq-item.open .faq-answer {
  max-height: 200px;
  padding: 0 22px 18px;
}

.faq-answer p {
  font-family: Lexend, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 600px) {
  .faq-section {
    padding: 50px 16px 40px;
  }

  .faq-heading {
    font-size: 24px;
    margin-bottom: 28px;
  }

  .faq-question {
    font-size: 14px;
    padding: 16px 18px;
  }

  .faq-answer {
    padding: 0 18px;
  }

  .faq-item.open .faq-answer {
    padding: 0 18px 16px;
  }
}


/* ============================================
   PROMO ANNOUNCEMENT BAR - Animated Marquee
   ============================================ */

.promo-bar {
  position: relative;
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  background: #0e0e10;
  border-bottom: 1px solid rgba(77, 184, 168, 0.15);
  font-family: Lexend, sans-serif;
  user-select: none;
}

.promo-bar__track {
  display: flex;
  width: max-content;
  animation: promoScroll 25s linear infinite;
  will-change: transform;
}

.promo-bar__content {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.promo-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.promo-bar__star {
  width: 12px;
  height: 12px;
  color: #4db8a8;
  opacity: 0.7;
  flex-shrink: 0;
}

.promo-bar__code {
  color: #4db8a8;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  background: rgba(77, 184, 168, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(77, 184, 168, 0.15);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.promo-bar__code:hover {
  background: rgba(77, 184, 168, 0.2);
  border-color: rgba(77, 184, 168, 0.35);
  box-shadow: 0 0 8px rgba(77, 184, 168, 0.2);
}

.promo-bar__code--copied {
  background: rgba(77, 184, 168, 0.25) !important;
  border-color: #4db8a8 !important;
  color: #6fe1d5 !important;
}



@keyframes promoScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .promo-bar__item {
    padding: 8px 28px;
    font-size: 11px;
  }

  .promo-bar__track {
    animation-duration: 18s;
  }
}

@media (max-width: 480px) {
  .promo-bar__item {
    padding: 7px 20px;
    font-size: 10px;
    gap: 6px;
  }

  .promo-bar__code {
    font-size: 10px;
    padding: 1px 5px;
  }
}

/* ===========================
   STICKY FOOTER FIX
   Switches .site from grid to flexbox column so the footer always
   sits at the bottom of the viewport on short pages (packages, etc.)
   without creating empty space inside the content area.
   =========================== */
.site {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - var(--tebex-footer-height, 35px)) !important;
  gap: 0 !important;
}

.site > * {
  width: 100%;
}

/* Content area grows to push footer to the bottom */
.site-content {
  flex: 1 !important;
  padding-bottom: var(--widget-padding, 24px);
}

/* Remove the artificial gap between content and footer */
.site-footer {
  margin-top: 0 !important;
}

/* ----------------------------------------------------------
   HERO CTA GROUP — primary + ghost button side-by-side
   ---------------------------------------------------------- */
.hero-cta-group {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Ghost / outline variant */
.hero-cta.hero-cta--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  gap: 8px;
}

.hero-cta.hero-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.hero-cta.hero-cta--ghost svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ----------------------------------------------------------
   UPCOMING PROJECTS SECTION
   All visual control is here — edit freely.
   ---------------------------------------------------------- */

.up-section {
  padding: 100px 0 100px;
  position: relative;
}

/* faint top border to separate from the section above */
.up-section::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin-bottom: 80px;
}

.up-section-inner {
  margin: 0 auto;
  padding: 0 var(--content-padding);
  max-width: var(--content-width);
}

/* Section header */
.up-section-header {
  text-align: center;
  margin-bottom: 56px;
}

.up-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.up-eyebrow::before,
.up-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.45;
}

.up-section-title {
  font-family: Lexend, sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.1;
}

.up-section-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.4);
}

/* Grid — 2 columns, stacks to 1 on mobile */
.up-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  .up-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.up-card {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.up-card:hover {
  border-color: rgba(0,72,255,0.4);
  background: rgba(0,72,255,0.04);
}

/* Media area */
.up-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #080808;
  overflow: hidden;
}

.up-card-media img,
.up-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.up-card:hover .up-card-media img,
.up-card:hover .up-card-media video {
  transform: scale(1.04);
}

/* Badge */
.up-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  color: #fff;
}

.up-badge--wip  { background: rgba(200,120,0,0.85); }
.up-badge--soon { background: rgba(0,72,255,0.85); }
.up-badge--done { background: rgba(30,160,80,0.85); }

/* Card body */
.up-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.up-card-slug {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  font-family: monospace;
}

.up-card-title {
  font-family: Lexend, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.up-card-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}

/* Feature chips */
.up-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.up-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Progress bar — controlled by --p CSS variable (0-100) */
.up-progress {
  margin-top: 6px;
}

.up-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 5px;
}

.up-progress-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.up-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
  width: calc(var(--p, 0) * 1%);
}

.navigation-list > li > a {
  font-size: 12px !important;
}

/* ============================================
   STICKY FLOATING NAVBAR
   ============================================ */

/* Outer fixed wrapper — keeps the pill centred at the top of the viewport */
.nav-float-wrapper {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  width: calc(100% - 48px);
  max-width: 1100px;
  pointer-events: none; /* let clicks pass through the invisible area */
}

/* The actual pill card */
@media (min-width: 961px) {
  .nav-float-wrapper .site-navigation.navigation-horizontal {
    pointer-events: auto;
    background: rgba(15, 15, 18, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0 12px;
    /* reset any existing positioning from shared.css */
    position: relative;
    width: 100%;
    view-transition-name: none;
  }

  /* Tighten the menu row inside the pill */
  .nav-float-wrapper .navigation-horizontal .menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    overflow: visible;
  }

  /* Logo sits to the left, flush */
  .nav-float-wrapper .nav-logo-container {
    flex-shrink: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
    padding: 6px 0;
  }

  .nav-float-wrapper .nav-logo {
    height: 32px;
    width: auto;
  }

  /* Push the right-side actions (login/basket) to the far right */
  .nav-float-wrapper .login-nav-item,
  .nav-float-wrapper .user-nav-item,
  .nav-float-wrapper .basket-nav-item {
    margin-left: auto;
  }

  /* Nav links — compact pill hover */
  .nav-float-wrapper .navigation-horizontal .menu > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
  }

  .nav-float-wrapper .navigation-horizontal .menu > li > a:hover,
  .nav-float-wrapper .navigation-horizontal .menu > li > a.link-active {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
  }

  /* Discount badge — keep as-is, just tuck spacing */
  .nav-float-wrapper .discount-badge {
    margin: 0 4px;
  }

  /* Login button — styled as an outline pill */
  .nav-float-wrapper .btn-fivem-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    height: auto;
    line-height: 1;
  }

  .nav-float-wrapper .btn-fivem-login:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
  }

  /* Cart icon button — compact */
  .nav-float-wrapper .nav-basket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: transparent;
    border-radius: 8px;
    transition: background 0.15s ease;
  }

  .nav-float-wrapper .nav-basket-btn:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  .nav-float-wrapper .nav-basket-btn .cart-icon {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Reserve page space so content doesn't sit under the floating nav */
  body.is-navigation-horizontal .site-header {
    padding-top: 70px;
  }

  /* Slide-in animation on page load */
  @keyframes navSlideDown {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-14px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .nav-float-wrapper {
    animation: navSlideDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

/* Mobile: hide the float wrapper, let the existing drawer handle it */
@media (max-width: 960px) {
  .nav-float-wrapper {
    display: none;
  }
}

/* ── Roadmap nav button ─────────────────────────────────────── */

/* Use flex order to push the roadmap button after login, before basket.
   Default order is 0 for all flex children, so we only need to nudge
   the three items we care about. */
.navigation-list .roadmap-nav-item  { order: 10; }
.navigation-list .login-nav-item    { order: 9;  }
.navigation-list .user-nav-item     { order: 9;  }
.navigation-list .basket-nav-item   { order: 11; }

.roadmap-nav-item {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.navigation-list .basket-nav-item {
  margin-left: 10px;
}

.roadmap-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 8px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 0;
}

.roadmap-nav-btn:hover {
  opacity: 0.8;
  transform: scale(1.08);
}

.roadmap-nav-btn img {
  border-radius: 6px;
  display: block;
  width: 26px;
  height: 26px;
}