/* =========================
   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");
   
   /* =========================
         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: #121212;
     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 #2D2D2D;
     padding: calc(var(--widget-padding) - 1px);
     background: var(--color-brighter-bg)
   }
   
   .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
   }
   
   /* Top-level nav links only — do not match .user-dropdown-item inside profile menu */
   .site-navigation .menu a:not(.user-dropdown-item) {
     font-size: 18px;
     color: #ffffff;
     font-family: "Plus Jakarta Sans", sans-serif;
     font-weight: 800;
     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:not(.user-dropdown-item):focus,
   .site-navigation .menu a:not(.user-dropdown-item):hover {
     color: inherit;
   }
   
   .site-navigation .menu a:not(.user-dropdown-item) 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:not(.user-dropdown-item) {
       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 {
     display: flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, #5a3a1a, #4a2c0f);
     padding: 8px 14px;
     border-radius: 8px;
     text-decoration: none;
     color: #d36a20;
     font-weight: bold;
     font-size: 16px;
     font-family: Inter, sans-serif
   }
   
   .log-in.btn-tertiary:hover {
     filter: saturate(1.2)
   }
   
   .log-in.btn-tertiary .logo {
     width: 24px;
     height: 24px
   }
   
   .log-in.btn-tertiary .login-text,
   .log-in.btn-tertiary .provider-text {
     color: #d36a20
   }
   
   /* ============================================
      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
   }
   
   /* Horizontal nav rail: primary links | spacer | divider | currency | account | cart (see navigation.twig) */
   @media (min-width: 960px) {
     .site-navigation.navigation-horizontal .navigation-list {
       justify-content: flex-start;
       gap: 12px;
     }
   
     .site-navigation.navigation-horizontal .nav-list-spacer {
       flex: 1 1 auto;
       min-width: 20px;
       list-style: none;
       margin: 0;
       padding: 0;
       align-self: stretch;
     }
   
     .site-navigation.navigation-horizontal .nav-rail-divider {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       list-style: none;
       margin: 0;
       padding: 0 4px;
       align-self: stretch;
     }
   
     .site-navigation.navigation-horizontal .nav-rail-divider__line {
       display: block;
       width: 1px;
       height: 24px;
       background: rgba(255, 255, 255, 0.08);
       border-radius: 1px;
     }
   }
   
   /* Nav + header utilities: shared tokens (high-end dark SaaS — muted default, lift on hover) */
   :root {
     --nav-util-text: #a0a0a0;
     --nav-util-text-hover: #ffffff;
     --nav-util-radius: 8px;
     --nav-util-height: 40px;
     --nav-util-pad-x: 12px;
     /* Profile + currency: identical surface */
     --nav-util-surface-bg: #121212;
     --nav-util-border: #1e1e1e;
     --nav-util-surface-hover-bg: rgba(255, 255, 255, 0.08);
     --nav-util-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
   }
   
   .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)
     }
   }
   
   .site-navigation .menu li > a:focus {
     outline: none !important;
     border: none !important;
   }
   
   .site-navigation .nav-basket-btn:focus {
     outline: none;
   }
   
   .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 and card styles are defined in shared.css.
      Removed conflicting generic.css overrides (mask-image, opacity, wrong gradients)
      that were causing pixelated/glitchy rendering. */
   
   .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)
   }
   
   /* Removed conflicting responsive review overrides and inset box-shadow.
      Responsive review styles are handled in shared.css. */
   
   .dot:focus {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px
   }
   
   .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;
     justify-content: center;
     gap: 10px;
     padding: 14px 28px;
     font-family: Arial, sans-serif;
     font-size: 15px;
     font-weight: 600;
     color: #0a0a0a;
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.08);
     border-radius: 10px;
     box-shadow:
       0 1px 0 rgba(255, 255, 255, 0.06) inset,
       0 2px 0 rgba(0, 0, 0, 0.04),
       0 6px 16px rgba(0, 0, 0, 0.22);
     cursor: pointer;
     text-decoration: none;
     line-height: 1;
     box-sizing: border-box;
     transition: background 0.15s ease, box-shadow 0.15s ease
   }
   
   .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: #ffffff;
     --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: 400px;
     width: auto;
     display: block;
   }
   
   /* Navigation list (horizontal: flex-start + spacer pushes utilities right; vertical unchanged) */
   .navigation-list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     align-items: center;
     gap: 20px;
     flex: 1;
     justify-content: flex-start;
   }
   
   .navigation-vertical .navigation-list {
     flex-direction: column;
     align-items: stretch;
   }
   
   .navigation-vertical .nav-list-spacer,
   .navigation-vertical .nav-rail-divider {
     display: none;
   }
   
   /* Navigation Items */
   .navigation-list>li {
     position: relative;
   }
   
   .navigation-list>li>a {
     display: flex;
     align-items: center;
     gap: 0;
     color: #ffffff;
     text-decoration: none;
     padding: 10px 12px;
     font-size: 16px;
     font-weight: 800;
     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 svg,
   .navigation-list>li>a .home-icon,
   .navigation-list>li>a .escrow-icon,
   .navigation-list>li>a .opensource-icon,
   .navigation-list>li>a .templates-icon {
     width: 16px;
     height: 16px;
     min-width: 16px;
     flex-shrink: 0;
     margin-right: 8px;
     color: inherit;
     transition: color 0.2s ease;
   }
   
   .navigation-list>li>a i {
     font-size: 16px;
     margin-right: 8px;
     color: inherit;
     transition: color 0.2s ease;
   }
   
   .navigation-list>li>a:hover {
     color: #ffffff;
     background: transparent;
   }
   
   /* Active link */
   .navigation-list .link-active {
     color: #ffffff;
     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 */
   .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 / login / basket: DOM order = … currency, account, cart (cart rightmost) */
   .user-nav-item,
   .login-nav-item {
     flex-shrink: 0;
     position: relative;
     z-index: 10001;
     overflow: visible;
   }
   
   .site-navigation.navigation-horizontal .user-nav-item,
   .site-navigation.navigation-horizontal .login-nav-item {
     margin-left: 0;
   }
   
   .basket-nav-item {
     flex-shrink: 0;
   }
   
   .site-navigation.navigation-horizontal .basket-nav-item {
     margin-left: 0;
   }
   
   /* Header row (currency + mobile cart on small viewports): align with nav utility spacing */
   @media (min-width: 961px) {
     .site-header-inner .actions {
       gap: 12px;
     }
   }
   
   /* ---- Currency selector (nav + header) ---- */
   .currency-nav-item {
     list-style: none;
     flex-shrink: 0;
     position: relative;
   }
   
   .site-navigation.navigation-horizontal .currency-nav-item {
     margin-left: 0;
   }
   
   .currency-selector {
     position: relative;
     z-index: 10002;
   }
   
   .currency-selector__toggle {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     height: var(--nav-util-height, 40px);
     min-height: var(--nav-util-height, 40px);
     padding: 0 10px;
     border-radius: var(--nav-util-radius, 8px);
     border: 1px solid var(--nav-util-border, #1e1e1e);
     background: var(--nav-util-surface-bg, #121212);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.05));
     color: var(--nav-util-text, #a0a0a0);
     font-size: 12px;
     font-weight: 600;
     font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif;
     cursor: pointer;
     transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   }
   
   .currency-selector__toggle:hover {
     background: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08));
     border-color: #252525;
     color: var(--nav-util-text-hover, #ffffff);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
   }
   
   .currency-selector__toggle:focus-visible {
     outline: 1px solid rgba(255, 255, 255, 0.28);
     outline-offset: 2px;
   }
   
   .currency-selector__toggle .currency-icon {
     width: 14px;
     height: 14px;
     color: inherit;
     stroke: currentColor;
     flex-shrink: 0;
   }
   
   .currency-selector__toggle .currency-selector__caret {
     width: 9px;
     height: 9px;
     color: inherit;
     opacity: 0.7;
     stroke: currentColor;
   }
   
   .currency-selector__toggle:hover .currency-selector__caret {
     opacity: 1;
   }
   
   .currency-selector.open .currency-selector__toggle {
     background: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08));
     border-color: #252525;
     color: var(--nav-util-text-hover, #ffffff);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
   }
   
   .currency-selector.open .currency-selector__toggle .currency-selector__caret {
     opacity: 1;
   }
   
   .currency-selector__code {
     letter-spacing: 0.04em;
     color: inherit;
   }
   
   .currency-selector__caret {
     flex-shrink: 0;
     transition: transform 0.2s ease;
   }
   
   .currency-selector.open .currency-selector__caret {
     transform: rotate(180deg);
   }
   
   /* Currency dropdown — compact panel (narrow list, small type) */
   .currency-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     width: max-content;
     min-width: 152px;
     max-width: min(220px, calc(100vw - 24px));
     padding: 4px;
     border-radius: 8px;
     background: #1a1a1a;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     z-index: 10002;
   }
   
   .currency-selector.open .currency-dropdown {
     display: flex;
     flex-direction: column;
     gap: 1px;
   }
   
   .currency-dropdown__item {
     display: flex;
     align-items: center;
     gap: 6px;
     width: 100%;
     padding: 5px 8px;
     border: none;
     border-radius: 4px;
     background: transparent;
     color: #e5e7eb;
     font-size: 12px;
     font-weight: 500;
     text-align: left;
     cursor: pointer;
     font-family: inherit;
     transition: background 0.15s ease, color 0.15s ease;
   }
   
   .currency-dropdown__item:hover {
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
   }
   
   .currency-dropdown__item:focus {
     outline: none;
   }
   
   .currency-dropdown__item:focus-visible {
     background: rgba(255, 255, 255, 0.08);
     box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
   }
   
   .currency-dropdown__item--active {
     background: rgba(59, 130, 246, 0.15);
     color: #fff;
   }
   
   .currency-dropdown__item--active:hover {
     background: rgba(59, 130, 246, 0.22);
     color: #fff;
   }
   
   .currency-dropdown__code {
     flex-shrink: 0;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.03em;
     color: #fff;
     line-height: 1.25;
   }
   
   .currency-dropdown__name {
     font-size: 10px;
     color: #9ca3af;
     font-weight: 400;
     line-height: 1.25;
     flex: 1;
     min-width: 0;
   }
   
   .currency-dropdown__item--active .currency-dropdown__name {
     color: #9ca3af;
   }
   
   .currency-dropdown__check {
     margin-left: auto;
     flex-shrink: 0;
     width: 12px;
     height: 12px;
     color: #60a5fa;
     stroke: currentColor;
   }
   
   /* Header strip: show when sidebar nav (no top nav) or mobile horizontal */
   .site-header-currency {
     display: none;
     align-items: center;
     flex-shrink: 0;
   }
   
   body.is-navigation-vertical .site-header-currency {
     display: flex;
   }
   
   @media (max-width: 960px) {
     body.is-navigation-horizontal .site-header-currency {
       display: flex;
     }
   
     body.is-navigation-horizontal .site-navigation.navigation-horizontal .currency-nav-item {
       display: none !important;
     }
   }
   
   body.is-navigation-vertical .site-navigation.navigation-vertical .currency-nav-item {
     display: none !important;
   }
   
   /* 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;
   }
   
   .navigation-list>li>a .home-icon,
   .navigation-list>li>a .escrow-icon,
   .navigation-list>li>a .opensource-icon,
   .navigation-list>li>a .templates-icon {
     margin-right: 8px;
   }
   
   /* Cart — same surface as currency / profile */
   .site-navigation .nav-basket-btn {
     position: relative;
     box-sizing: border-box;
     width: var(--nav-util-height, 40px);
     height: var(--nav-util-height, 40px);
     min-width: var(--nav-util-height, 40px);
     min-height: var(--nav-util-height, 40px);
     padding: 0;
     margin: 0;
     border-radius: var(--nav-util-radius, 8px);
     border: 1px solid var(--nav-util-border, #1e1e1e);
     background: var(--nav-util-surface-bg, #121212);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.05));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
     cursor: pointer;
     transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     color: var(--nav-util-text, #a0a0a0);
   }
   
   .site-navigation .nav-basket-btn .cart-icon {
     width: 20px;
     height: 20px;
     display: block;
     margin: 0;
     flex-shrink: 0;
     color: inherit;
     fill: currentColor;
   }
   
   .site-navigation .nav-basket-btn:hover {
     background: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08));
     border-color: #252525;
     color: var(--nav-util-text-hover, #ffffff);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
   }
   
   .site-navigation .nav-basket-btn:focus-visible {
     outline: 1px solid rgba(255, 255, 255, 0.28);
     outline-offset: 2px;
   }
   
   /* Tebex cart uses .btn-primary — neutralize to match utility rail */
   .site-navigation .nav-basket-btn.btn-primary {
     display: inline-flex !important;
     width: var(--nav-util-height, 40px) !important;
     min-width: var(--nav-util-height, 40px) !important;
     height: var(--nav-util-height, 40px) !important;
     line-height: 0 !important;
     padding: 0 !important;
     --btn-color-text: var(--nav-util-text, #a0a0a0) !important;
     --btn-color-bg: var(--nav-util-surface-bg, #121212) !important;
     --btn-color-text-hover: var(--nav-util-text-hover, #ffffff) !important;
     --btn-color-bg-hover: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08)) !important;
     background-color: var(--nav-util-surface-bg, #121212) !important;
     color: var(--nav-util-text, #a0a0a0) !important;
     border: 1px solid var(--nav-util-border, #1e1e1e) !important;
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.05)) !important;
     filter: none !important;
   }
   
   .site-navigation .nav-basket-btn.btn-primary:hover,
   .site-navigation .nav-basket-btn.btn-primary:focus {
     background-color: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08)) !important;
     border-color: #252525 !important;
     color: var(--nav-util-text-hover, #ffffff) !important;
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.06)) !important;
   }
   
   /* 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: 180px !important;
     padding: 0 16px !important;
     background: #E9E9EA !important;
     color: #111 !important;
     border: 1px solid #D6D6D8 !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: #111 !important;
     white-space: nowrap !important;
     flex-shrink: 0 !important;
   }
   
   /* RTL Support */
   [dir="rtl"] .btn-fivem-login {
     flex-direction: row-reverse;
   }
   
   /* User profile pill — same surface + radius as currency toggle */
   .user-profile-nav {
     position: relative;
     box-sizing: border-box;
     height: var(--nav-util-height, 40px);
     min-height: var(--nav-util-height, 40px);
     padding: 0 var(--nav-util-pad-x, 12px);
     border-radius: var(--nav-util-radius, 8px);
     background: var(--nav-util-surface-bg, #121212);
     border: 1px solid var(--nav-util-border, #1e1e1e);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.05));
     display: inline-flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     text-decoration: none;
     color: var(--nav-util-text, #a0a0a0);
     font-size: 14px;
     font-weight: 600;
     white-space: nowrap;
   }
   
   .user-profile-nav:hover {
     background: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08));
     border-color: #252525;
     color: var(--nav-util-text-hover, #ffffff);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
   }
   
   .user-profile-nav:focus-visible {
     outline: 1px solid rgba(255, 255, 255, 0.28);
     outline-offset: 2px;
   }
   
   .user-icon {
     font-size: 16px;
     width: 16px;
     height: 16px;
     color: inherit;
   }
   
   .user-name-nav {
     font-size: 14px;
     font-weight: 600;
     color: inherit;
   }
   
   .brand-caret {
     font-size: 12px;
     width: 12px;
     height: 12px;
     color: inherit;
     opacity: 0.7;
     transition: transform 0.2s ease, opacity 0.2s ease;
   }
   
   .user-profile-nav:hover .brand-caret {
     opacity: 1;
   }
   
   .user-profile-nav.open {
     background: var(--nav-util-surface-hover-bg, rgba(255, 255, 255, 0.08));
     border-color: #252525;
     color: var(--nav-util-text-hover, #ffffff);
     box-shadow: var(--nav-util-inner-glow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
   }
   
   .user-profile-nav.open .brand-caret {
     opacity: 1;
     transform: rotate(180deg);
   }
   
   /* User dropdown — same panel + row hover treatment as .currency-dropdown */
   .user-dropdown-menu {
     position: absolute;
     right: 0;
     top: calc(100% + 6px);
     min-width: 180px;
     padding: 4px;
     border-radius: 8px;
     background: #1a1a1a;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     display: none;
     flex-direction: column;
     gap: 1px;
     z-index: 10000;
   }
   
   /* Pointer bridge above menu (still part of menu → outside-click / toggle logic stay correct) */
   .user-profile-nav.open .user-dropdown-menu::before {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     bottom: 100%;
     height: 12px;
   }
   
   .user-profile-nav.open .user-dropdown-menu {
     display: flex;
   }
   
   /* Higher specificity than shared.css `.navigation-horizontal a { display:block }` */
   .site-navigation .user-dropdown-menu .user-dropdown-item,
   .user-dropdown-item {
     display: flex;
     /* DOM order is icon then copy; reverse main axis so icon sits on the right */
     flex-direction: row-reverse;
     flex-wrap: nowrap;
     align-items: center;
     gap: 10px;
     padding: 5px 8px;
     border-radius: 4px;
     color: #e5e7eb;
     text-decoration: none;
     font-size: 12px;
     font-weight: 500;
     font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif;
     transition: background 0.15s ease, color 0.15s ease;
   }
   
   .user-dropdown-item i {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     color: #9ca3af;
     width: 18px;
     min-width: 18px;
     flex-shrink: 0;
     text-align: center;
     transition: color 0.15s ease;
   }
   
   .user-dropdown-item-content {
     display: flex;
     flex-direction: column;
     gap: 0;
     flex: 1;
     min-width: 0;
   }
   
   .user-dropdown-item-title {
     font-size: 12px;
     font-weight: 700;
     color: #fff;
     line-height: 1.25;
     letter-spacing: 0.02em;
   }
   
   .user-dropdown-item-subtitle {
     font-size: 10px;
     font-weight: 400;
     color: #9ca3af;
     line-height: 1.25;
   }
   
   /* Same row hover as .currency-dropdown__item */
   .user-dropdown-item:hover {
     background: rgba(255, 255, 255, 0.08);
     color: #fff;
   }
   
   .user-dropdown-item:hover i {
     color: #d1d5db;
   }
   
   .user-dropdown-item:hover .user-dropdown-item-title {
     color: #fff;
   }
   
   .user-dropdown-item:hover .user-dropdown-item-subtitle {
     color: #9ca3af;
   }
   
   .user-dropdown-item:focus {
     outline: none;
   }
   
   .user-dropdown-item:focus-visible {
     background: rgba(255, 255, 255, 0.08);
     box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
   }
   
   .user-dropdown-item.logout:hover i {
     color: #ef4444;
   }
   
   .user-dropdown-item.logout {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     margin-top: 3px;
     padding-top: 6px;
   }
   
   .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: 15px;
     }
   }
   
   @media (max-width: 768px) {
     /* Horizontal strip: keep scroll for many links but don’t clip account/currency dropdowns */
     .site-navigation.navigation-horizontal .navigation-list {
       overflow-x: auto;
       overflow-y: visible;
       justify-content: flex-start;
       scrollbar-width: none;
       -ms-overflow-style: none;
       gap: 12px;
     }
   
     .site-navigation.navigation-horizontal .navigation-list::-webkit-scrollbar {
       display: none;
     }
   
     .site-navigation.navigation-horizontal .user-nav-item,
     .site-navigation.navigation-horizontal .currency-nav-item {
       position: relative;
       z-index: 10002;
     }
   
     .site-navigation {
       height: 52px;
     }
   
     .site-navigation .nav-basket-btn {
       width: var(--nav-util-height, 40px);
       height: var(--nav-util-height, 40px);
       min-width: var(--nav-util-height, 40px);
       min-height: var(--nav-util-height, 40px);
     }
   
     .site-navigation .nav-basket-btn .cart-icon {
       width: 20px;
       height: 20px;
     }
   
     /* 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: keep same rail height as currency / cart */
     .user-profile-nav {
       height: var(--nav-util-height, 40px);
       min-height: var(--nav-util-height, 40px);
       padding: 0 12px;
       font-size: 13px;
     }
   }
   
   /* ============================================
      BASKET DRAWER — LOGIN STATE
      When user is logged out, Tebex renders username.html
      content inside the basket-popup drawer. Style it to
      match the site's premium dark-glass + teal vibe.
      ============================================ */
   
   /* Drawer background + layout when it contains login content */
   .basket-popup-content:has(.btn-fivem-login),
   .basket-popup-content.store-form,
   .basket-popup-content.text-content,
   .basket-popup-content .store-form,
   .basket-popup-content .text-content {
     color: #f5f5f7 !important;
   }
   
   /* Drawer itself: center the login card vertically + horizontally */
   .basket-popup-content:has(.btn-fivem-login) {
     background:
       radial-gradient(120% 60% at 50% 20%, rgb(from var(--theme-accent) r g b / 0.35) 0%, transparent 55%),
       linear-gradient(180deg, #141618 0%, #0f1012 100%) !important;
     color: #f5f5f7 !important;
     justify-content: center !important;
     align-items: center !important;
     padding: 24px !important;
   }
   
   /* The inner <main data-popup> from username.html — centered card */
   .basket-popup-content:has(.btn-fivem-login) > main,
   .basket-popup-content:has(.btn-fivem-login) .store-text,
   .basket-popup-content:has(.btn-fivem-login) .store-form.text-content {
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     justify-content: center !important;
     flex: 0 0 auto !important;
     width: 100% !important;
     max-width: 380px !important;
     margin: 0 auto !important;
     padding: 36px 28px !important;
     text-align: center !important;
     background: rgba(255, 255, 255, 0.03) !important;
     border: 1px solid rgba(255, 255, 255, 0.06) !important;
     border-radius: 18px !important;
     box-shadow:
       0 24px 60px rgba(0, 0, 0, 0.45),
       inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px);
     min-height: 0 !important;
   }
   
   /* Heading */
   .basket-popup-content h1,
   .basket-popup-content h2,
   .basket-popup-content h3,
   .basket-popup-content .store-text h2 {
     color: #ffffff !important;
     font-family: Lexend, Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
     font-size: 24px !important;
     font-weight: 700 !important;
     line-height: 1.2 !important;
     letter-spacing: -0.2px !important;
     margin: 0 0 10px 0 !important;
     text-align: center !important;
     width: 100%;
   }
   
   /* Auto subtitle under the heading */
   .basket-popup-content .store-form h2::after,
   .basket-popup-content main > h2::after {
     content: "Sign in with your FiveM account to continue";
     display: block;
     margin-top: 8px;
     color: rgba(245, 245, 247, 0.6);
     font-size: 13px;
     font-weight: 400;
     letter-spacing: 0;
     line-height: 1.5;
   }
   
   /* Teal lock-icon badge above the heading */
   .basket-popup-content:has(.btn-fivem-login) > main::before,
   .basket-popup-content:has(.btn-fivem-login) .store-form::before {
     content: "";
     display: block;
     width: 56px;
     height: 56px;
     margin: 0 auto 18px;
     border-radius: 16px;
     background-color: var(--theme-accent);
     background-image:
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2' ry='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"),
       linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-hover) 100%);
     background-size: 28px 28px, 100% 100%;
     background-position: center, center;
     background-repeat: no-repeat, no-repeat;
     border: 1px solid rgba(255, 255, 255, 0.18);
     box-shadow:
       0 12px 32px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.22);
     flex-shrink: 0;
   }
   
   /* Field wrapper around the login button */
   .basket-popup-content:has(.btn-fivem-login) p.field,
   .basket-popup-content:has(.btn-fivem-login) .field {
     width: 100% !important;
     max-width: 100% !important;
     margin: 22px auto 0 !important;
     padding: 0 !important;
     text-align: center !important;
     display: flex !important;
     justify-content: center !important;
   }
   
   /* The FiveM login button — teal gradient premium */
   .basket-popup-content .btn-fivem-login,
   .basket-popup-content a.btn-primary.btn-fivem-login,
   .basket-popup-content a.btn-fivem-login {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 10px !important;
     width: 100% !important;
     max-width: 320px !important;
     min-width: 0 !important;
     height: 52px !important;
     padding: 0 22px !important;
     margin: 0 auto !important;
     background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-hover) 100%) !important;
     color: #ffffff !important;
     border: 1px solid rgba(255, 255, 255, 0.14) !important;
     border-radius: 12px !important;
     box-shadow:
       0 10px 24px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
     font-family: Lexend, Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     line-height: 1 !important;
     letter-spacing: 0.2px !important;
     white-space: nowrap !important;
     text-decoration: none !important;
     cursor: pointer !important;
     transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                 box-shadow 0.25s ease,
                 background 0.25s ease !important;
   }
   
   .basket-popup-content .btn-fivem-login:hover,
   .basket-popup-content a.btn-primary.btn-fivem-login:hover {
     background: linear-gradient(135deg, var(--theme-accent-hover) 0%, var(--theme-accent) 100%) !important;
     transform: translateY(-1px) !important;
     box-shadow:
       0 14px 30px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
   }
   
   .basket-popup-content .btn-fivem-login:active,
   .basket-popup-content a.btn-primary.btn-fivem-login:active {
     transform: translateY(0) !important;
     box-shadow:
       0 6px 16px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
   }
   
   .basket-popup-content .btn-fivem-login .login-text,
   .basket-popup-content .btn-fivem-login .provider-text,
   .basket-popup-content a.btn-primary.btn-fivem-login .login-text,
   .basket-popup-content a.btn-primary.btn-fivem-login .provider-text {
     color: #ffffff !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     letter-spacing: 0.1px !important;
   }
   
   .basket-popup-content .btn-fivem-login .provider-text,
   .basket-popup-content a.btn-primary.btn-fivem-login .provider-text {
     font-weight: 700 !important;
   }
   
   .basket-popup-content .btn-fivem-login svg,
   .basket-popup-content .btn-fivem-login .logo,
   .basket-popup-content .btn-fivem-login .fivem-logo svg,
   .basket-popup-content a.btn-primary.btn-fivem-login svg {
     width: 18px !important;
     height: 18px !important;
     fill: #ffffff !important;
     color: #ffffff !important;
     flex-shrink: 0 !important;
   }
   
   .basket-popup-content .btn-fivem-login svg path,
   .basket-popup-content a.btn-primary.btn-fivem-login svg path {
     fill: #ffffff !important;
   }
   
   /* Close button inside basket drawer login view */
   .basket-popup-content .popup-close {
     position: absolute !important;
     top: 18px !important;
     right: 18px !important;
     width: 38px !important;
     height: 38px !important;
     padding: 0 !important;
     background-color: rgba(22, 22, 25, 0.72) !important;
     background-image:
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='17' y1='7' x2='7' y2='17'/><line x1='7' y1='7' x2='17' y2='17'/></svg>") !important;
     background-size: 16px 16px !important;
     background-position: center !important;
     background-repeat: no-repeat !important;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 10px !important;
     color: transparent !important;
     font-size: 0 !important;
     line-height: 0 !important;
     opacity: 1 !important;
     cursor: pointer !important;
     -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
     backdrop-filter: blur(14px) saturate(140%) !important;
     box-shadow:
       0 6px 18px rgba(0, 0, 0, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
     transition: background-color 0.2s ease,
                 border-color 0.2s ease,
                 transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                 box-shadow 0.25s ease !important;
     z-index: 10 !important;
   }
   
   .basket-popup-content .popup-close::before,
   .basket-popup-content .popup-close::after {
     content: none !important;
     display: none !important;
   }
   
   .basket-popup-content .popup-close:hover {
     background-color: rgba(32, 32, 36, 0.88) !important;
     border-color: rgba(255, 255, 255, 0.22) !important;
     transform: scale(1.06) !important;
     box-shadow:
       0 8px 22px rgba(0, 0, 0, 0.45),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   }
   
   .basket-popup-content .popup-close:active {
     transform: scale(0.94) !important;
   }
   
   .basket-popup-content .popup-close:focus-visible {
     outline: 2px solid rgb(from var(--theme-accent) r g b / 0.35) !important;
     outline-offset: 2px !important;
   }
   /* Fallback IGN login form inside basket drawer */
   .basket-popup-content .ign-login-form {
     display: flex !important;
     flex-direction: column !important;
     gap: 10px !important;
     margin: 24px auto 0 !important;
     width: 100% !important;
     max-width: 320px !important;
   }
   
   .basket-popup-content .ign-login-form input {
     width: 100% !important;
     height: 48px !important;
     padding: 0 16px !important;
     background: rgba(255, 255, 255, 0.05) !important;
     border: 1px solid rgba(255, 255, 255, 0.12) !important;
     border-radius: 10px !important;
     color: #f5f5f7 !important;
     font-size: 14px !important;
     transition: border-color 0.2s ease, background 0.2s ease !important;
   }
   
   .basket-popup-content .ign-login-form input::placeholder {
     color: rgba(245, 245, 247, 0.4);
   }
   
   .basket-popup-content .ign-login-form input:focus {
     outline: none !important;
     border-color: rgb(from var(--theme-accent) r g b / 0.35) !important;
     background: rgba(255, 255, 255, 0.08) !important;
   }
   
   .basket-popup-content .ign-login-form button {
     width: 100% !important;
     height: 48px !important;
     background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-hover) 100%) !important;
     color: #fff !important;
     border: none !important;
     border-radius: 10px !important;
     font-weight: 600 !important;
     cursor: pointer !important;
   }
   
   /* Small screens */
   @media (max-width: 520px) {
     .basket-popup-content > main,
     .basket-popup-content .store-text,
     .basket-popup-content .store-form.text-content {
       padding: 40px 20px !important;
     }
   
     .basket-popup-content h1,
     .basket-popup-content h2,
     .basket-popup-content h3 {
       font-size: 20px !important;
     }
   }
   
   /* ============================================
      LOGIN POPUP — Premium dark-glass redesign
      (Modal variant — rarely used, but kept consistent)
      ============================================ */
   
   .login-popup-content {
     position: relative;
     width: 100% !important;
     max-width: 440px !important;
     margin: auto !important;
     padding: 40px 32px 32px !important;
     background:
       radial-gradient(120% 80% at 50% 0%, rgb(from var(--theme-accent) r g b / 0.35) 0%, transparent 60%),
       linear-gradient(180deg, #141618 0%, #0f1012 100%) !important;
     border: 1px solid rgba(255, 255, 255, 0.08) !important;
     border-radius: 18px !important;
     box-shadow:
       0 30px 80px rgba(0, 0, 0, 0.55),
       0 8px 24px rgba(0, 0, 0, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
     color: #f5f5f7 !important;
     overflow: hidden;
   }
   
   /* Subtle top glow accent line */
   .login-popup-content::before {
     content: "";
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60%;
     height: 1px;
     background: linear-gradient(90deg, transparent 0%, rgb(from var(--theme-accent) r g b / 0.35) 50%, transparent 100%);
     pointer-events: none;
   }
   
   .login-popup-content h1,
   .login-popup-content h2,
   .login-popup-content h3 {
     color: #ffffff !important;
     font-family: Lexend, Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
     font-size: 22px !important;
     font-weight: 700 !important;
     line-height: 1.2 !important;
     letter-spacing: -0.2px !important;
     margin: 0 0 8px 0 !important;
     text-align: center !important;
     display: block !important;
   }
   
   /* Friendly subtitle under the title */
   .login-popup-content h2::after {
     content: "Sign in with your FiveM account to continue";
     display: block;
     margin-top: 10px;
     color: rgba(245, 245, 247, 0.6);
     font-size: 13px;
     font-weight: 400;
     letter-spacing: 0;
     line-height: 1.5;
   }
   
   .login-popup-content p,
   .login-popup-content .field {
     margin: 0 !important;
     padding: 0 !important;
     text-align: center !important;
   }
   
   .login-popup-content p.field {
     margin-top: 28px !important;
   }
   
   .login-popup-content .login-description {
     display: none !important;
   }
   
   /* Close button — clean dark-glass circle */
   .login-popup-content .popup-close {
     position: absolute !important;
     top: 14px !important;
     right: 14px !important;
     width: 34px !important;
     height: 34px !important;
     padding: 0 !important;
     background: rgba(255, 255, 255, 0.06) !important;
     border: 1px solid rgba(255, 255, 255, 0.08) !important;
     border-radius: 999px !important;
     color: rgba(245, 245, 247, 0.8) !important;
     font-size: 0 !important;
     cursor: pointer !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
     opacity: 1 !important;
     background-image: none !important;
   }
   
   /* Hide the default Tebex × image since we draw our own */
   .login-popup-content .popup-close::before {
     content: "";
     width: 12px;
     height: 12px;
     background: none;
     background-image:
       linear-gradient(currentColor, currentColor),
       linear-gradient(currentColor, currentColor);
     background-size: 100% 1.5px, 1.5px 100%;
     background-position: center;
     background-repeat: no-repeat;
     transform: rotate(45deg);
   }
   
   .login-popup-content .popup-close:hover {
     background: rgba(255, 255, 255, 0.1) !important;
     border-color: rgba(255, 255, 255, 0.18) !important;
     transform: scale(1.05);
   }
   
   .login-popup-content .popup-close:active {
     transform: scale(0.95);
   }
   
   /* Premium teal FiveM login button inside the popup */
   .login-popup-content .btn-fivem-login,
   .login-popup-content a.btn-primary.btn-fivem-login {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 10px !important;
     width: 100% !important;
     max-width: 320px !important;
     height: 52px !important;
     padding: 0 22px !important;
     margin: 0 auto !important;
     background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-hover) 100%) !important;
     color: #ffffff !important;
     border: 1px solid rgba(255, 255, 255, 0.14) !important;
     border-radius: 12px !important;
     box-shadow:
       0 10px 24px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
     font-family: Lexend, Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     line-height: 1 !important;
     letter-spacing: 0.2px !important;
     white-space: nowrap !important;
     text-decoration: none !important;
     cursor: pointer !important;
     transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                 box-shadow 0.25s ease,
                 background 0.25s ease !important;
   }
   
   .login-popup-content .btn-fivem-login:hover,
   .login-popup-content a.btn-primary.btn-fivem-login:hover {
     background: linear-gradient(135deg, var(--theme-accent-hover) 0%, var(--theme-accent) 100%) !important;
     transform: translateY(-1px) !important;
     box-shadow:
       0 14px 30px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
   }
   
   .login-popup-content .btn-fivem-login:active,
   .login-popup-content a.btn-primary.btn-fivem-login:active {
     transform: translateY(0) !important;
     box-shadow:
       0 6px 16px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
   }
   
   .login-popup-content .btn-fivem-login .login-text,
   .login-popup-content a.btn-primary.btn-fivem-login .login-text {
     color: #ffffff !important;
     font-size: 14px !important;
     font-weight: 600 !important;
   }
   
   .login-popup-content .btn-fivem-login .provider-text,
   .login-popup-content a.btn-primary.btn-fivem-login .provider-text {
     color: #ffffff !important;
     font-weight: 700 !important;
     text-transform: capitalize;
   }
   
   .login-popup-content .btn-fivem-login svg,
   .login-popup-content .btn-fivem-login .logo,
   .login-popup-content .btn-fivem-login .fivem-logo svg,
   .login-popup-content a.btn-primary.btn-fivem-login svg {
     width: 18px !important;
     height: 18px !important;
     fill: #ffffff !important;
     color: #ffffff !important;
     flex-shrink: 0 !important;
   }
   
   .login-popup-content .btn-fivem-login svg path,
   .login-popup-content a.btn-primary.btn-fivem-login svg path {
     fill: #ffffff !important;
   }
   
   /* IGN form fallback (when external is false) */
   .login-popup-content .ign-login-form {
     display: flex !important;
     flex-direction: column !important;
     gap: 10px !important;
     margin-top: 24px !important;
     max-width: 320px !important;
     margin-left: auto !important;
     margin-right: auto !important;
   }
   
   .login-popup-content .ign-login-form input {
     width: 100% !important;
     height: 48px !important;
     padding: 0 16px !important;
     background: rgba(255, 255, 255, 0.05) !important;
     border: 1px solid rgba(255, 255, 255, 0.12) !important;
     border-radius: 10px !important;
     color: #f5f5f7 !important;
     font-size: 14px !important;
     transition: border-color 0.2s ease, background 0.2s ease !important;
   }
   
   .login-popup-content .ign-login-form input::placeholder {
     color: rgba(245, 245, 247, 0.4);
   }
   
   .login-popup-content .ign-login-form input:focus {
     outline: none !important;
     border-color: rgb(from var(--theme-accent) r g b / 0.35) !important;
     background: rgba(255, 255, 255, 0.08) !important;
   }
   
   .login-popup-content .ign-login-form button {
     width: 100% !important;
     height: 48px !important;
     background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-hover) 100%) !important;
     color: #fff !important;
     border: none !important;
     border-radius: 10px !important;
     font-weight: 600 !important;
     cursor: pointer !important;
     transition: transform 0.2s ease, box-shadow 0.25s ease !important;
   }
   
   .login-popup-content .ign-login-form button:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 24px rgb(from var(--theme-accent) r g b / 0.35);
   }
   
   /* Responsive */
   @media (max-width: 520px) {
     .login-popup-content {
       max-width: calc(100% - 24px) !important;
       padding: 32px 22px 24px !important;
       border-radius: 16px !important;
     }
   
     .login-popup-content h1,
     .login-popup-content h2,
     .login-popup-content h3 {
       font-size: 19px !important;
     }
   
     .login-popup-content h2::after {
       font-size: 12px;
     }
   
     .login-popup-content .btn-fivem-login,
     .login-popup-content a.btn-primary.btn-fivem-login {
       height: 48px !important;
       max-width: 100% !important;
     }
   }
   
   /* 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)
      Premium glass style — teal accent matches site vibe
      ============================================ */
   
   .product-card__discount-badge,
   article.product .product-discount-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     padding: 5px 10px;
     border-radius: 8px;
     background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-hover) 100%);
     color: #ffffff;
     font-family: Lexend, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.2px;
     text-transform: none;
     line-height: 1;
     border: 1px solid rgba(255, 255, 255, 0.14);
     box-shadow:
       0 4px 14px rgb(from var(--theme-accent) r g b / 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.18);
     animation: badgeEntrance 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }
   
   .product-card__discount-badge::before {
     content: "";
     width: 5px;
     height: 5px;
     border-radius: 999px;
     background: #ffffff;
     box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
     flex: 0 0 auto;
   }
   
   .product-card__discount-badge-text {
     font-weight: 700;
     font-size: 11px;
     letter-spacing: 0.2px;
   }
   
   @keyframes badgeEntrance {
     from {
       opacity: 0;
       transform: scale(0.85) translateY(-4px);
     }
     to {
       opacity: 1;
       transform: scale(1) translateY(0);
     }
   }
   
   /* ============================================
      PRODUCT TAGS (Top-Right of Image)
      Unified dark-glass pill system with color-coded accent dot
      ============================================ */
   
   .product-card__tag,
   article.product .product-tag {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 3;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 5px 10px 5px 9px;
     border-radius: 8px;
     background: rgba(14, 14, 16, 0.72);
     color: #f5f5f7;
     font-family: Lexend, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.2px;
     text-transform: none;
     line-height: 1;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow:
       0 6px 18px rgba(0, 0, 0, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.06);
     -webkit-backdrop-filter: blur(14px) saturate(140%);
     backdrop-filter: blur(14px) saturate(140%);
     animation: badgeEntrance 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   
   /* Hide emoji/font-awesome icons supplied in markup — we use the leading dot instead */
   .product-card__tag i,
   .product-card__tag svg {
     display: none;
   }
   
   /* Color-coded accent dot */
   .product-card__tag::before {
     content: "";
     width: 6px;
     height: 6px;
     border-radius: 999px;
     flex: 0 0 auto;
     background: var(--theme-accent);
     box-shadow: 0 0 8px currentColor;
   }
   
   .product-card__tag--bestseller,
   article.product .product-tag-bestseller {
     background: rgba(14, 14, 16, 0.72);
     color: #f5f5f7;
     border-color: rgba(255, 207, 86, 0.25);
   }
   .product-card__tag--bestseller::before {
     background: #ffcf56;
     color: rgba(255, 207, 86, 0.6);
   }
   
   .product-card__tag--popular {
     border-color: rgba(255, 107, 107, 0.25);
   }
   .product-card__tag--popular::before {
     background: #ff6b6b;
     color: rgba(255, 107, 107, 0.6);
   }
   
   .product-card__tag--new {
     border-color: rgb(from var(--theme-accent) r g b / 0.35);
   }
   .product-card__tag--new::before {
     background: var(--theme-accent);
     color: rgb(from var(--theme-accent) r g b / 0.35);
     animation: pulseDot 2s ease-in-out infinite;
   }
   
   @keyframes pulseDot {
     0%, 100% { box-shadow: 0 0 6px rgb(from var(--theme-accent) r g b / 0.35); }
     50%      { box-shadow: 0 0 12px rgb(from var(--theme-accent) r g b / 0.35); }
   }
   
   .product-card__tag--escrow,
   article.product .product-tag-escrow {
     border-color: rgba(255, 82, 82, 0.25);
   }
   .product-card__tag--escrow::before {
     background: #ff5252;
     color: rgba(255, 82, 82, 0.6);
   }
   
   .product-card__tag--esx,
   article.product .product-tag-esx {
     border-color: rgba(255, 146, 60, 0.25);
   }
   .product-card__tag--esx::before {
     background: #ff923c;
     color: rgba(255, 146, 60, 0.6);
   }
   
   .product-card__tag--standalone,
   article.product .product-tag-standalone {
     border-color: rgba(167, 139, 250, 0.28);
   }
   .product-card__tag--standalone::before {
     background: #a78bfa;
     color: rgba(167, 139, 250, 0.6);
   }
   
   /* Stack multiple tags vertically on the right so they don't overlap */
   .product-card__media,
   .product-card__image-wrapper,
   article.product .image-link {
     position: relative;
   }
   
   /* Stack extra tags only (discount badge is a sibling span; nth-of-type broke alignment). */
   .product-card__tag + .product-card__tag {
     top: 42px;
   }
   .product-card__tag + .product-card__tag + .product-card__tag {
     top: 74px;
   }
   .product-card__tag + .product-card__tag + .product-card__tag + .product-card__tag {
     top: 106px;
   }
   
   /* Mobile: slightly smaller tags */
   @media (max-width: 480px) {
     .product-card__discount-badge,
     article.product .product-discount-badge,
     .product-card__tag,
     article.product .product-tag {
       font-size: 10px;
       padding: 4px 8px 4px 7px;
       gap: 5px;
       border-radius: 7px;
     }
     .product-card__discount-badge::before,
     .product-card__tag::before {
       width: 5px;
       height: 5px;
     }
     .product-card__tag + .product-card__tag { top: 38px; }
     .product-card__tag + .product-card__tag + .product-card__tag { top: 66px; }
     .product-card__tag + .product-card__tag + .product-card__tag + .product-card__tag { top: 94px; }
   }
   
   /* ============================================
      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: 8px;
       left: 8px;
       font-size: 10px;
       padding: 4px 8px;
     }
   }
   
   /* ============================================
      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: var(--bg);
     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 (+ shared.css parity for logo / license checks) */
   .designer-credit {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: 8px;
     justify-content: flex-end;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }

   .designer-credit::before {
     content: '';
     display: block;
   }
   
   /* 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;
   }

   .designer-credit a {
     display: inline-flex;
     opacity: 1;
     visibility: visible;
     transition: opacity 0.3s ease;
   }

   .designer-credit a:hover {
     opacity: 0.7;
   }

   .designer-credit-link {
     position: relative;
     display: inline-flex;
     align-items: center;
     min-width: 72px;
     min-height: 28px;
   }

   .designer-credit-img-wrap {
     position: relative;
     display: inline-block;
     line-height: 0;
   }

   .designer-credit-img-wrap::after {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 0;
     background: url('https://i.ibb.co/B5H1Cnw8/Nolimitswithtextimage.png') center center / contain no-repeat;
     opacity: 0.45;
     pointer-events: none;
   }

   .credit-logo-img {
     position: relative;
     z-index: 1;
     height: 28px;
     width: auto;
     display: block;
     opacity: 0.45;
     transition: opacity 0.3s ease;
   }

   .designer-credit a:hover .credit-logo-img {
     opacity: 0.75;
   }

   .designer-credit a:hover .designer-credit-img-wrap::after {
     opacity: 0.75;
   }

   .designer-credit,
   .designer-credit * {
     visibility: visible;
     position: relative;
     overflow: visible;
     clip: auto;
     clip-path: none;
   }

   .designer-credit::after {
     content: 'Template by NoLimits - Removing credit violates license';
     position: absolute;
     left: -9999px;
   }

   /* License bind hook (must pass main.js nlCreditHidden); visible credit is #nl-designer-credit only */
   .theme-signature.nl-theme-bound {
     display: block;
     width: 2px;
     height: 2px;
     margin: 0;
     padding: 0;
     overflow: hidden;
     position: relative;
     opacity: 0.06;
     pointer-events: none;
   }

   .nl-theme-bound.nl-auth-sig::after {
     content: none;
     display: none;
   }
   
   /* 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: 10px;
     min-height: 52px;
     padding: 0 28px;
     background: #ffffff;
     color: #0a0a0a;
     font-weight: 600;
     font-size: 15px;
     text-decoration: none;
     border-radius: 10px;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow:
       0 1px 0 rgba(255, 255, 255, 0.06) inset,
       0 2px 0 rgba(0, 0, 0, 0.04),
       0 6px 16px rgba(0, 0, 0, 0.22);
     transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
     box-sizing: border-box;
   }
   
   .hero-cta:hover {
     background: #ededed;
     color: #050505;
     box-shadow:
       0 1px 0 rgba(255, 255, 255, 0.04) inset,
       0 2px 0 rgba(0, 0, 0, 0.06),
       0 4px 14px rgba(0, 0, 0, 0.28);
   }
   
   .hero-cta:focus {
     outline: 2px solid #FFFFFF;
     outline-offset: 2px;
   }
   
   .hero-visual {
     position: relative;
     height: 400px;
   }
   
   .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 */
   }
   
   /* Home: unified section headers + template buyer hints (index.html) */
   .section-header:has(.section-kicker)::before {
     content: none !important;
     display: none !important;
   }
   
   .section-kicker {
     display: inline-block;
     margin: 0 auto 10px;
     padding: 5px 12px;
     border-radius: 999px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: rgb(from var(--theme-accent) r g b / 0.35);
     background: rgb(from var(--theme-accent) r g b / 0.35);
     border: 1px solid rgb(from var(--theme-accent) r g b / 0.35);
   }
   
   .features-section__header {
     text-align: center;
     max-width: 720px;
     margin: 0 auto 28px;
     padding: 0 20px;
   }
   
   .features-section__header .section-title {
     font-size: clamp(26px, 4vw, 36px);
     margin-bottom: 10px;
   }
   
   .section-template-hint {
     font-size: 12px !important;
     line-height: 1.65 !important;
     color: rgba(255, 255, 255, 0.42) !important;
     max-width: 640px;
     margin: 12px auto 0 !important;
     text-align: center;
   }
   
   .section-template-hint--narrow {
     max-width: 520px;
     margin-left: auto !important;
     margin-right: auto !important;
   }
   
   .store-statistics-subheader .section-template-hint {
     margin-top: 10px !important;
   }
   
   .section-template-code {
     font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
     font-size: 0.9em;
     color: rgb(from var(--theme-accent) r g b / 0.35);
     background: rgba(0, 0, 0, 0.35);
     padding: 1px 6px;
     border-radius: 4px;
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   /* one row, evenly spaced, transparent */
   .features-section .features-container {
     max-width: 1450px;
     margin: 0 auto;
     padding: 0 00px;
     display: flex !important;
     align-items: flex-start;
     justify-content: space-between;
     gap: 72px;
     /* distance between items */
     flex-wrap: nowrap;
   }
   
   /* kill any previous "card" styling */
   .features-section .feature-card {
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
     outline: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
   
     display: flex;
     align-items: center;
     gap: 14px;
     min-width: 250px;
     /* keeps lines nice */
   }
   
   /* 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(255, 255, 255, 0.6)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
     transform: none;
   }
   
   /* text */
   .features-section .feature-content {
     max-width: 260px;
   }
   
   .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: 40px 64px;
       flex-wrap: wrap;
     }
   }
   
   @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: var(--theme-accent);
   }
   
   .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: #161616;
     border: 1px solid rgba(255, 255, 255, 0.07);
     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: var(--theme-accent) !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: var(--theme-accent) !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 CTA — follows Primary colour / Store accent from theme settings */
   .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: var(--theme-accent) !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: var(--theme-accent-hover) !important;
   }
   
   .store-product-full .actions .button-group .btn.add.btn-primary.wide:active:not(.remove-state):not([data-action="remove"]) {
     background: color-mix(in srgb, var(--theme-accent-hover) 78%, #000000) !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: var(--theme-accent);
     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 var(--theme-accent);
     animation: circlePulse 2s infinite;
   }
   
   @keyframes circlePulse {
     0% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgb(from var(--theme-accent) r g b / 0.35);
     }
   
     50% {
       transform: scale(1);
       box-shadow: 0 0 0 8px rgb(from var(--theme-accent) r g b / 0.35);
     }
   
     100% {
       transform: scale(0.95);
       box-shadow: 0 0 0 0 rgb(from var(--theme-accent) r g b / 0.35);
     }
   }
   
   .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: var(--theme-accent) !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 rgb(from var(--theme-accent) r g b / 0.35);
     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: var(--theme-accent);
     opacity: 0.7;
     flex-shrink: 0;
   }
   
   .promo-bar__code {
     color: var(--theme-accent);
     font-weight: 700;
     letter-spacing: 0.8px;
     padding: 2px 7px;
     background: rgb(from var(--theme-accent) r g b / 0.35);
     border-radius: 4px;
     border: 1px solid rgb(from var(--theme-accent) r g b / 0.35);
     font-size: 11px;
     cursor: pointer;
     transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
   }
   
   /* Non-interactive teal chip (e.g. auto-applied % off, no copy action) */
   .promo-bar__pill {
     display: inline-block;
     color: var(--theme-accent);
     font-weight: 700;
     letter-spacing: 0.8px;
     padding: 2px 7px;
     background: rgb(from var(--theme-accent) r g b / 0.35);
     border-radius: 4px;
     border: 1px solid rgb(from var(--theme-accent) r g b / 0.35);
     font-size: 11px;
     line-height: 1.2;
     vertical-align: baseline;
   }
   
   .promo-bar__code:hover {
     background: rgb(from var(--theme-accent) r g b / 0.35);
     border-color: rgb(from var(--theme-accent) r g b / 0.35);
     box-shadow: 0 0 8px rgb(from var(--theme-accent) r g b / 0.35);
   }
   
   .promo-bar__code--copied {
     background: rgb(from var(--theme-accent) r g b / 0.35) !important;
     border-color: var(--theme-accent) !important;
     color: #ffffff !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,
     .promo-bar__pill {
       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;
   }
   /* NAVBAR PREMIUM */

.site-navigation {
    background: rgba(8,8,12,.75) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168,85,247,.15);
    border-radius: 18px;
    margin: 12px auto;
    width: calc(100% - 40px);
    max-width: 1300px;
    box-shadow:
        0 0 40px rgba(168,85,247,.08),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.navigation-list {
    align-items: center;
}

.navigation-list li a {
    color: #cfcfcf !important;
    font-weight: 600;
    transition: .3s ease;
    position: relative;
}

.navigation-list li a:hover {
    color: #a855f7 !important;
}

.navigation-list li.active a,
.navigation-list li a.link-active {
    color: #ffffff !important;
}

.navigation-list li.active a::after,
.navigation-list li a.link-active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient(
        90deg,
        #7c3aed,
        #c084fc
    );
}

.nav-logo {
    height: 42px !important;
    width: auto !important;
    transition: .3s;
}

.nav-logo:hover {
    transform: scale(1.08);
}

.btn-fivem-login {
    background: linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    ) !important;
    border: none !important;
    border-radius: 14px !important;
    color: white !important;
    font-weight: 700;
    transition: .3s;
}

.btn-fivem-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(168,85,247,.55);
}

.nav-basket-btn {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(168,85,247,.25) !important;
    border-radius: 14px !important;
}

.nav-basket-btn:hover {
    box-shadow: 0 0 20px rgba(168,85,247,.4);
}

.basket-count {
    background: #a855f7 !important;
    color: white !important;
}

.nav-rail-divider__line {
    background: rgba(255,255,255,.1) !important;
}
/* NAV ITEMS PREMIUM */

.navigation-list > li > a {
    position: relative;
    padding: 12px 18px !important;
    border-radius: 12px;
    transition: all .3s ease;
    overflow: hidden;
}

.navigation-list > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(168,85,247,.15),
        rgba(168,85,247,0)
    );
    opacity: 0;
    transition: .3s;
    border-radius: 12px;
}

.navigation-list > li > a:hover::before {
    opacity: 1;
}

.navigation-list > li > a:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(168,85,247,.25);
}

/* ACTIVE PAGE */

.navigation-list > li.active > a,
.navigation-list > li > a.link-active {
    background: rgba(168,85,247,.12);
    color: #fff !important;
    box-shadow: 0 0 15px rgba(168,85,247,.25);
}

/* UNDERLINE ANIMATION */

.navigation-list > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        #7c3aed,
        #c084fc
    );
    transition: .3s;
}

.navigation-list > li > a:hover::after {
    width: 70%;
}

.navigation-list > li.active > a::after,
.navigation-list > li > a.link-active::after {
    width: 70%;
}
/* ========================= */
/* NAVBAR ALIGNMENT FIX */
/* ========================= */

.site-navigation {
    display: flex;
    align-items: center;
    width: 100%;
}

.navigation-list {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px;
}

.nav-logo-container {
    margin-right: 25px !important;
    flex-shrink: 0;
}

/* Home + Scripts */
.navigation-list > li {
    margin: 0 !important;
}

/* Push login/cart to right */
.nav-list-spacer {
    margin-left: auto !important;
    flex: 1;
}

/* Premium buttons */

.navigation-list > li > a {
    position: relative;
    padding: 12px 18px !important;
    border-radius: 12px;
    transition: all .3s ease;
}

.navigation-list > li > a:hover {
    color: #a855f7 !important;
    background: rgba(168,85,247,.08);
}

.navigation-list > li.active > a,
.navigation-list > li > a.link-active {
    background: rgba(168,85,247,.12);
    color: #fff !important;
    box-shadow: 0 0 20px rgba(168,85,247,.15);
}

.navigation-list > li > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: #a855f7;
    transition: .3s;
}

.navigation-list > li > a:hover::after,
.navigation-list > li.active > a::after,
.navigation-list > li > a.link-active::after {
    width: 70%;
}
/* ========================= */
/* ZENITH PREMIUM PROMO BAR */
/* ========================= */

.promo-bar {
    position: relative;
    background: linear-gradient(
        90deg,
        #3b0764,
        #6d28d9,
        #7c3aed,
        #6d28d9,
        #3b0764
    ) !important;
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    height: 42px;
}

@keyframes gradientMove {
    0% {background-position:0% 50%;}
    50% {background-position:100% 50%;}
    100% {background-position:0% 50%;}
}

.promo-bar::before {
    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
    animation: shine 5s linear infinite;
}

@keyframes shine {
    from {left:-150%;}
    to {left:150%;}
}

.promo-bar__item {
    color:white !important;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.promo-bar__icon {
    color:#ffffff;
    filter:drop-shadow(0 0 8px rgba(255,255,255,.5));
}

.promo-bar__code {
    background:rgba(255,255,255,.15) !important;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15) !important;
    color:#fff !important;
    border-radius:999px !important;
    padding:6px 14px !important;
    font-weight:800;
    letter-spacing:1px;
    transition:.3s;
}

.promo-bar__code:hover {
    background:#fff !important;
    color:#7c3aed !important;
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 0 20px rgba(255,255,255,.4);
}

.promo-bar__code--copied {
    background:#22c55e !important;
    color:white !important;
}

.promo-bar:hover .promo-bar__track {
    animation-play-state:paused;
}
/* ============================= */
/* ZENITH V2 PREMIUM EFFECTS */
/* ============================= */

html{
  scroll-behavior:smooth;
}

body{
  background:#08080f !important;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
  radial-gradient(circle at top center,
  rgba(168,85,247,.18),
  transparent 35%);
  pointer-events:none;
  z-index:-1;
}

/* NAVBAR */

.site-navigation{
  background:rgba(8,8,15,.75) !important;
  backdrop-filter:blur(20px);
  border:1px solid rgba(168,85,247,.12);
  border-radius:18px;
  box-shadow:0 0 30px rgba(168,85,247,.10);
}

.navigation-list>li>a{
  border-radius:12px !important;
  transition:all .25s ease !important;
}

.navigation-list>li>a:hover{
  color:#c084fc !important;
  background:rgba(168,85,247,.12) !important;
  transform:translateY(-2px);
}

.navigation-list .link-active{
  background:rgba(168,85,247,.15) !important;
}

/* LOGIN BUTTON */

.btn-fivem-login{
  background:linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  ) !important;

  color:#fff !important;
  border:none !important;

  box-shadow:
  0 0 25px rgba(168,85,247,.35) !important;
}

.btn-fivem-login:hover{
  transform:translateY(-2px);
  box-shadow:
  0 0 35px rgba(168,85,247,.55) !important;
}

.login-text{
  color:#fff !important;
}

/* HERO BUTTON */

.browse-btn{
  background:linear-gradient(
    135deg,
    #7c3aed,
    #a855f7
  ) !important;

  color:white !important;
  border:none !important;

  box-shadow:
  0 0 25px rgba(168,85,247,.35);
}

.browse-btn:hover{
  transform:translateY(-3px);
  box-shadow:
  0 0 40px rgba(168,85,247,.55);
}

/* CARDS */

.feature-card,
.stat-item,
.review-card,
.store-product{
  transition:.35s ease !important;
}

.feature-card:hover,
.stat-item:hover,
.review-card:hover,
.store-product:hover{
  transform:translateY(-8px);
  border-color:#a855f7 !important;

  box-shadow:
  0 0 35px rgba(168,85,247,.18);
}

/* PRODUCT IMAGES */

.store-product .image{
  transition:.45s ease;
}

.store-product:hover .image{
  transform:scale(1.05);
}

/* SCROLL REVEAL */

.store-product,
.feature-card,
.stat-item,
.review-card{
  animation:fadeUp .8s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(25px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* HERO TITLE GLOW */

.hero-title,
.hero-content h1,
.hero-content h2 {
    text-shadow:
    0 0 20px rgba(168,85,247,.25),
    0 0 40px rgba(168,85,247,.15);
}

/* HERO IMAGE FLOAT */

.hero-image img {
    animation: heroFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 50px rgba(168,85,247,.35));
}

@keyframes heroFloat {
    0%,100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}
/* FEATURED SCRIPTS */

.featured-script-card,
.store-product {
    background: rgba(15,15,25,.85) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168,85,247,.15) !important;
    border-radius: 20px !important;
    transition: .35s ease;
}

.featured-script-card:hover,
.store-product:hover {
    transform: translateY(-10px);
    border-color: #a855f7 !important;

    box-shadow:
    0 0 40px rgba(168,85,247,.25);
}
.store-product img,
.featured-script-card img {
    transition: .5s ease;
}

.store-product:hover img,
.featured-script-card:hover img {
    transform: scale(1.08);
}
.review-card {
    background: rgba(18,18,28,.9) !important;

    border: 1px solid rgba(168,85,247,.15) !important;

    border-radius: 20px !important;

    transition: .3s ease;
}

.review-card:hover {
    transform: translateY(-8px);

    box-shadow:
    0 0 30px rgba(168,85,247,.2);
}
body {
    background:
    radial-gradient(
    circle at top left,
    rgba(168,85,247,.12),
    transparent 35%),

    radial-gradient(
    circle at top right,
    rgba(124,58,237,.10),
    transparent 40%),

    #07070d !important;
}
button,
.btn,
.hero-btn,
.featured-scripts-cta a {
    transition: .3s ease !important;
}

button:hover,
.btn:hover,
.hero-btn:hover,
.featured-scripts-cta a:hover {

    transform: translateY(-3px);

    box-shadow:
    0 0 25px rgba(168,85,247,.45);
}
.featured-scripts-section,
.customer-reviews-section,
.faq-section {
    position: relative;
}

.featured-scripts-section::before,
.customer-reviews-section::before,
.faq-section::before {

    content: "";

    position: absolute;

    top: -50px;

    left: 50%;

    transform: translateX(-50%);

    width: 250px;

    height: 1px;

    background:
    linear-gradient(
    90deg,
    transparent,
    #a855f7,
    transparent);
}
/* SCROLL ANIMATION */

.feature-card,
.featured-script-card,
.review-card,
.stat-item,
.faq-item {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.featured-script-card,
.review-card {

    opacity: 0;
    transform:
    translateY(50px)
    scale(.95);

    transition:
    all .8s cubic-bezier(.16,1,.3,1);
}

.featured-script-card.active,
.review-card.active {

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