/* base spacing/section utilities the theme assumes (were site-wide defaults) */
.section-spacing{margin-bottom:60px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
main#content-main{display:block}
#content{width:100%}
/* keep the arcade banner from stretching edge to edge without a container */
.retro-banner-section{padding-top:10px}

/* ==================================================================
   Standalone compatibility layer.
   The block below the divider is the PlayedGaming OpenCart theme,
   lifted verbatim (stylesheet.css + retro-theme-header.css +
   retro-theme-responsive.css + home.twig inline styles) so the
   front end is identical. This top section only wires up the few
   chrome elements the standalone app renders that OpenCart handled
   server-side (flash messages, skip link, basket pill, pagers).
   ================================================================== */
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--card-background);padding:10px 14px;z-index:200;color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flash{max-width:1200px;margin:14px auto;padding:12px 16px;border-left:4px solid var(--neon-green);
  background:var(--card-background);color:#fff;box-shadow:0 0 12px rgba(0,255,140,.25)}
.flash-warn{border-left-color:var(--neon-pink);box-shadow:0 0 12px rgba(255,0,255,.25)}
.pill{background:var(--neon-yellow);color:#000;border-radius:999px;padding:1px 8px;font-size:.8rem;font-weight:800}
.cart-count-badge{background:var(--neon-yellow);color:#000;border-radius:999px;padding:0 7px;font-weight:800;font-size:.75rem}
.pager{display:flex;gap:6px;margin:28px 0;flex-wrap:wrap;justify-content:center}
.pager a{padding:8px 14px;background:var(--card-background);border:2px solid var(--card-border);
  color:var(--neon-cyan);text-decoration:none;font-family:var(--font-accent);font-size:.6rem}
.pager a.on{background:var(--neon-cyan);color:#000;border-color:var(--neon-cyan)}
.err{display:block;margin-top:4px;color:var(--neon-pink);font-style:normal}
.empty{background:var(--card-background);border:2px dashed var(--card-border);padding:26px;text-align:center;border-radius:var(--border-radius)}
.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.filters select{padding:8px 10px;background:rgba(0,0,0,.4);border:2px solid var(--card-border);color:#fff;font-family:var(--font-main)}
.count{margin-left:auto;color:var(--text-secondary)}
/* Neon Retro OpenCart Theme - Main Stylesheet */

/* -------------------------------- 
   Base Variables & Reset
-------------------------------- */
:root {
  --primary-color: #0c0029;        /* Deep navy/purple background */
  --secondary-color: #1a0042;      /* Slightly lighter purple for cards */
  --accent-color-cyan: #00fcff;      /* Neon cyan */
  --accent-color-pink: #ff00ff;      /* Neon pink */
  --accent-color-yellow: #fcee0c;    /* Neon yellow */
  --accent-color-purple: #b400ff;    /* Neon purple */
  --text-color: #ffffff;             /* White - main text */
  --text-secondary: #c5c5e2;         /* Light purple/blue - secondary text */
  --card-background: #1a0042;        /* Card backgrounds */
  --card-border: rgba(0, 252, 255, 0.3);  /* Subtle cyan border for cards */
  --card-shadow: 0 0 15px rgba(0, 252, 255, 0.3), 0 0 30px rgba(255, 0, 255, 0.2); /* Neon glow shadow */
  --border-radius: 16px;             /* Rounded corners */
  --border-radius-sm: 8px;           /* Smaller rounded corners */
  --transition-speed: 0.3s;          /* Transition speed */
  --font-main: 'Inter', 'Roboto', sans-serif;
  --font-accent: 'Press Start 2P', 'VT323', 'Courier New', monospace;
  --neon-text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
                      0 0 10px currentColor,
                      0 0 20px currentColor,
                      0 0 30px currentColor,
                      0 0 40px currentColor;
  --wave-height: 180px;
  --wave-color: #6a0099;
  --neon-cyan: #00ffff;
  --neon-pink: #ff00ff;
  --neon-yellow: #ffff00;
  --neon-green: #00ff8c;
}



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-main);
  background-color: var(--primary-color);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 16px;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 35%, rgba(106, 0, 153, 0.15) 0%, rgba(12, 0, 41, 0) 50%),
              radial-gradient(circle at 80% 20%, rgba(0, 252, 255, 0.1) 0%, rgba(12, 0, 41, 0) 50%);
  pointer-events: none;
  z-index: -1;
}

#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: transparent;
  position: relative;
  z-index: 1;
}

main {
  flex: 1 0 auto;
  padding: 20px 0;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------- 
   Typography & Links
-------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  font-weight: 700;
  color: var(--text-color);
}

h1, h2, .section-title {
  font-family: var(--font-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

h1 {
  font-size: 2.5rem;
  background: linear-gradient(to bottom, var(--accent-color-cyan) 0%, var(--accent-color-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--neon-text-shadow);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

h2 {
  font-size: 2rem;
  color: var(--accent-color-pink);
  text-shadow: 0 0 10px var(--accent-color-pink);
}

h3 {
  font-size: 1.5rem;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5),
                 0 0 5px currentColor;
}

h4 {
  font-size: 1.2rem;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5),
                 0 0 5px currentColor;
}

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

a {
  color: var(--accent-color-cyan);
  text-decoration: none;
  transition: all var(--transition-speed) ease;
  position: relative;
}

a:hover, a:focus {
  color: var(--accent-color-pink);
  text-shadow: 0 0 8px var(--accent-color-pink);
}

.neon-text {
  text-shadow: var(--neon-text-shadow);
}

.neon-cyan {
  color: var(--accent-color-cyan);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
              0 0 10px var(--accent-color-cyan),
              0 0 20px var(--accent-color-cyan),
              0 0 30px var(--accent-color-cyan);
}

.neon-pink {
  color: var(--accent-color-pink);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
              0 0 10px var(--accent-color-pink),
              0 0 20px var(--accent-color-pink),
              0 0 30px var(--accent-color-pink);
}

.neon-yellow {
  color: var(--accent-color-yellow);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
              0 0 10px var(--accent-color-yellow),
              0 0 20px var(--accent-color-yellow),
              0 0 30px var(--accent-color-yellow);
}

/* -------------------------------- 
   Header & Navigation 
-------------------------------- */
.site-header {
  background-color: var(--primary-color);
  padding: 20px 0;
  position: relative;
  z-index: 100;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Logo section - Bigger size */
.header-logo {
  flex: 0 0 auto;
  position: relative;
}

#logo img {
  max-height: 80px;
  width: auto;
  position: relative;
  z-index: 2;
}

#logo h1 {
  font-size: 2.5rem;
  margin: 0;
  letter-spacing: 2px;
}

/* Main menu section */
.header-menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

.header-menu .main-menu {
  background-color: transparent;
  box-shadow: none;
  margin: 0;
}

.header-menu #menu {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
}

.header-menu #menu .navbar-nav {
  justify-content: flex-end;
  width: 100%;
}

.header-menu #menu .nav-link {
  color: var(--text-color);
  padding: 10px 20px;
  font-weight: 500;
  font-size: 1rem;
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all var(--transition-speed) ease;
  position: relative;
  text-shadow: none;
}

.header-menu #menu .nav-link:hover,
.header-menu #menu .nav-link:focus,
.header-menu #menu .nav-link.active {
  color: var(--accent-color-cyan);
  text-shadow: 0 0 10px var(--accent-color-cyan);
  background-color: transparent;
}

.header-menu #menu .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-color-cyan);
  transition: all var(--transition-speed) ease;
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--accent-color-cyan);
}

.header-menu #menu .nav-link:hover::after,
.header-menu #menu .nav-link:focus::after,
.header-menu #menu .nav-link.active::after {
  width: 80%;
}

.header-menu #menu .dropdown-toggle::after {
  color: var(--text-secondary);
  font-size: 0.8em;
  vertical-align: middle;
}

/* Tools section (search, account, cart) */
.header-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.header-tools-item {
  margin-left: 15px;
  position: relative;
}

.header-tools-item:first-child {
  margin-left: 0;
}

.tool-icon {
  color: var(--text-color);
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition-speed) ease;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  position: relative;
  overflow: hidden;
}

.tool-icon:hover,
.tool-icon:focus {
  color: var(--accent-color-cyan);
  background-color: rgba(0, 252, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 252, 255, 0.5);
  transform: translateY(-3px);
}

/* Search icon and dropdown */
.search-dropdown .dropdown-menu {
  width: 300px;
  padding: 15px;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--secondary-color);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
}

/* Mobile menu toggle */
.navbar-toggler {
  border: none;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  border-radius: var(--border-radius-sm);
  padding: 10px 15px;
  margin-right: 15px;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid var(--accent-color-cyan);
}

.navbar-toggler i {
  font-size: 1.2rem;
}

/* Mobile menu container */
.mobile-menu {
  margin-bottom: 15px;
}

.mobile-menu .main-menu {
  margin-top: 15px;
  margin-bottom: 0;
}

.mobile-menu #menu {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius-sm);
}

.mobile-menu #menu .nav-link {
  color: var(--text-color);
  font-family: var(--font-accent);
  font-size: 0.9rem;
}

.mobile-menu #menu .nav-link:hover,
.mobile-menu #menu .nav-link:focus {
  color: var(--accent-color-cyan);
}

/* Cart icon with count */
.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--accent-color-pink);
  color: var(--text-color);
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 0 10px var(--accent-color-pink);
}

/* Cart dropdown button styling */
#cart > button {
  background: none;
  border: none;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  color: var(--text-color);
}

#cart > button i {
  font-size: 1.25rem;
}

#cart > button .cart-total {
  margin-left: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Enhanced cart dropdown */
#cart .dropdown-menu {
  width: 350px;
  padding: 15px;
  border: none;
  border-radius: var(--border-radius-sm);
  background-color: var(--secondary-color);
  box-shadow: var(--card-shadow);
  right: 0;
  left: auto;
  border: 1px solid var(--card-border);
}

.cart-dropdown-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  margin-bottom: 15px;
  color: var(--accent-color-cyan);
}

.cart-dropdown-header h5 {
  margin: 0;
  color: var(--accent-color-cyan);
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.cart-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-item-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--card-border);
}

.cart-item-name {
  font-weight: 500;
  color: var(--text-color);
  display: block;
  margin-bottom: 5px;
}

.cart-item-option,
.cart-item-quantity {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.cart-item-remove button {
  color: var(--accent-color-pink);
  background: none;
  border: none;
  font-size: 0.9rem;
  padding: 5px;
}

.cart-item-remove button:hover {
  text-shadow: 0 0 10px var(--accent-color-pink);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.cart-actions {
  margin-top: 15px;
}

/* Dropdown menu styling */
.dropdown-menu {
  border-radius: var(--border-radius-sm);
  box-shadow: var(--card-shadow);
  border: none;
  padding: 10px;
  margin-top: 5px;
  background-color: var(--secondary-color);
  border: 1px solid var(--card-border);
}

.dropdown-inner {
  display: flex;
}

.dropdown-inner ul {
  flex: 1;
  min-width: 160px;
  padding: 0 10px;
}

.dropdown-item {
  padding: 8px 15px;
  border-radius: 5px;
  transition: all var(--transition-speed) ease;
  color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(0, 252, 255, 0.1);
  color: var(--accent-color-cyan);
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.view-all-link {
  font-weight: 500;
  color: var(--accent-color-cyan);
}

.dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

/* -------------------------------- 
   Wave Animation Effect
-------------------------------- */
.wave-container {
  position: absolute;
  width: 100%;
  height: var(--wave-height);
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.wave {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--wave-color);
  bottom: 0;
  left: 0;
}

.wave::before,
.wave::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%236a0099'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%236a0099'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%236a0099'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  bottom: 0;
  left: 0;
}

/* -------------------------------- 
   Product Cards 
-------------------------------- */
.product-card {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  transition: all var(--transition-speed) ease;
  margin-bottom: 30px;
  overflow: hidden;
  height: 100%;
  border: 1px solid var(--card-border);
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0, 252, 255, 0.5), 0 0 50px rgba(255, 0, 255, 0.3);
  border-color: var(--accent-color-cyan);
}

.product-thumb {
  overflow: hidden;
  position: relative;
}

.product-thumb::before {
  content: '';
  display: block;
  padding-top: 75%;
}

.product-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed) ease;
}

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

.product-card-body {
  padding: 20px;
  position: relative;
}

.product-name {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-accent);
  color: var(--accent-color-cyan);
}

.product-name a {
  color: var(--accent-color-cyan);
  text-decoration: none;
}

.product-name a:hover, 
.product-name a:focus {
  color: var(--accent-color-pink);
  text-shadow: 0 0 10px var(--accent-color-pink);
}

.product-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4.5em;
}

.price {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: var(--accent-color-yellow);
  text-shadow: 0 0 10px var(--accent-color-yellow);
}

.price-old {
  color: var(--text-secondary);
  text-decoration: line-through;
  font-weight: normal;
  font-size: 0.9rem;
  text-shadow: none;
}

.price-new {
  color: var(--accent-color-pink);
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-color-pink);
}

.product-action {
  margin-top: 15px;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 15px;
  margin-top: 15px;
  font-size: 0.85rem;
}

.product-category {
  display: inline-block;
  padding: 3px 10px;
  background-color: rgba(0, 252, 255, 0.1);
  color: var(--accent-color-cyan);
  border-radius: 20px;
  font-size: 0.75rem;
  margin-bottom: 10px;
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.product-date {
  color: var(--text-secondary);
}

/* -------------------------------- 
   Section Headings
-------------------------------- */
.section-title {
  position: relative;
  margin-bottom: 30px;
  color: var(--text-color);
  font-weight: 700;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-accent);
  text-transform: uppercase;
}

.section-title span {
  position: relative;
  z-index: 1;
  color: var(--accent-color-cyan);
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.section-title .view-all {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent-color-pink);
  text-shadow: 0 0 10px var(--accent-color-pink);
}

/* -------------------------------- 
   Home Banner
-------------------------------- */
.home-banner {
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
  background: linear-gradient(45deg, var(--secondary-color) 0%, var(--accent-color-purple) 100%);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
}

.home-banner-content {
  padding: 60px 30px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.home-banner h2 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 700;
  font-family: var(--font-accent);
  text-transform: uppercase;
  background: linear-gradient(to bottom, var(--accent-color-cyan) 0%, var(--accent-color-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
               0 0 10px var(--accent-color-cyan),
               0 0 20px var(--accent-color-pink);
  line-height: 1.2;
}

.home-banner p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  max-width: 800px;
  color: var(--text-secondary);
  margin-left: auto;
  margin-right: auto;
}

.home-banner:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('image/catalog/banner/grid.png');
  background-size: cover;
  opacity: 0.2;
  z-index: 1;
}

/* -------------------------------- 
   Floating elements for retro style
-------------------------------- */
.floating-element {
  position: absolute;
  z-index: 1;
}

.floating-element.circle-1 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-color-purple);
  top: 20%;
  left: 10%;
  box-shadow: 0 0 20px var(--accent-color-purple);
  animation: float 6s ease-in-out infinite;
}

.floating-element.circle-2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-color-cyan);
  bottom: 20%;
  right: 10%;
  box-shadow: 0 0 20px var(--accent-color-cyan);
  animation: float 8s ease-in-out infinite;
}

.floating-element.star-1 {
  width: 30px;
  height: 30px;
  background: var(--accent-color-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  top: 15%;
  right: 15%;
  box-shadow: 0 0 20px var(--accent-color-yellow);
  animation: float 7s ease-in-out infinite, spin 10s linear infinite;
}

.floating-element.square-1 {
  width: 30px;
  height: 30px;
  background: var(--accent-color-yellow);
  transform: rotate(45deg);
  bottom: 30%;
  left: 15%;
  box-shadow: 0 0 20px var(--accent-color-yellow);
  animation: float 9s ease-in-out infinite, spin 15s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* -------------------------------- 
   Buttons & Forms
-------------------------------- */
.btn {
  border-radius: 8px;
  padding: 12px 30px;
  transition: all var(--transition-speed) ease;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.btn:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  transition: all 0.3s;
  border-radius: 8px;
  z-index: -1;
}

.btn:hover:before {
  width: 100%;
}

.btn-primary {
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  font-family: var(--font-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 15px var(--accent-color-cyan);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  box-shadow: 0 0 25px var(--accent-color-cyan);
}

.btn-primary:before {
  background-color: var(--accent-color-pink);
}

.btn-outline-primary {
  border: 1px solid var(--accent-color-cyan);
  color: var(--accent-color-cyan);
  background-color: transparent;
  box-shadow: 0 0 10px var(--accent-color-cyan);
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--primary-color);
  box-shadow: 0 0 20px var(--accent-color-cyan);
}

.btn-outline-primary:before {
  background-color: var(--accent-color-cyan);
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.875rem;
}

.form-control {
  border-radius: var(--border-radius-sm);
  padding: 12px 15px;
  border: 1px solid var(--card-border);
  transition: all var(--transition-speed) ease;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
}

.form-control:focus {
  border-color: var(--accent-color-cyan);
  box-shadow: 0 0 0 0.2rem rgba(0, 252, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.1);
}

.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

/* -------------------------------- 
   Search styling
-------------------------------- */
#search .input-group {
  position: relative;
}

#search input {
  border-radius: 8px;
  padding-right: 50px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: var(--text-color);
}

#search .btn {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 8px 8px 0;
  z-index: 10;
  height: 100%;
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

#search .btn i {
  font-size: 1rem;
}

/* -------------------------------- 
   Footer Styling
-------------------------------- */
footer {
  background-color: var(--secondary-color);
  color: var(--text-color);
  padding: 60px 0 20px;
  margin-top: 60px;
  position: relative;
  z-index: 1;
}

footer:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('image/catalog/banner/grid.png');
  background-size: cover;
  opacity: 0.05;
  z-index: -1;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo img {
  max-height: 60px;
}

.footer-about {
  margin-bottom: 30px;
}

.footer-about p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.footer-heading {
  color: var(--accent-color-cyan);
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
  font-family: var(--font-accent);
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 12px;
}

.footer-list a {
  color: var(--text-secondary);
  transition: all var(--transition-speed) ease;
  position: relative;
  padding-left: 15px;
}

.footer-list a:before {
  content: '>';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color-pink);
  font-size: 0.8rem;
  opacity: 0;
  transition: all var(--transition-speed) ease;
}

.footer-list a:hover, 
.footer-list a:focus {
  color: var(--accent-color-cyan);
  text-shadow: 0 0 8px var(--accent-color-cyan);
  padding-left: 20px;
}

.footer-list a:hover:before, 
.footer-list a:focus:before {
  opacity: 1;
}

.footer-newsletter {
  margin-bottom: 30px;
}

.footer-newsletter p {
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.newsletter-form {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 252, 255, 0.2);
}

.newsletter-form input {
  flex: 1;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--card-border);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  padding: 12px 15px;
}

.newsletter-form .btn {
  border-radius: 0 8px 8px 0;
  padding: 0 20px;
}

.footer-socials {
  display: flex;
  margin-top: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: all var(--transition-speed) ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover,
.social-icon:focus {
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  transform: translateY(-5px);
  box-shadow: 0 0 15px var(--accent-color-cyan);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 20px;
  margin-top: 40px;
}

.footer-bottom p {
  color: var(--text-secondary);
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* -------------------------------- 
   Accessibility Controls
-------------------------------- */
.accessibility-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--secondary-color);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 15px rgba(0, 252, 255, 0.3);
  border: 1px solid var(--card-border);
}

.accessibility-controls button {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 3px;
  transition: all var(--transition-speed) ease;
}

.accessibility-controls button:hover,
.accessibility-controls button:focus {
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  box-shadow: 0 0 10px var(--accent-color-cyan);
}

/* -------------------------------- 
   Blog/News Section 
-------------------------------- */
.blog-card {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: var(--card-shadow);
  transition: all var(--transition-speed) ease;
  border: 1px solid var(--card-border);
  position: relative;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(0, 252, 255, 0.5), 0 0 50px rgba(255, 0, 255, 0.3);
  border-color: var(--accent-color-cyan);
}

.blog-thumb {
  position: relative;
  overflow: hidden;
}

.blog-thumb::before {
  content: '';
  display: block;
  padding-top: 60%;
}

.blog-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed) ease;
}

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

.blog-category {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--accent-color-pink);
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  z-index: 1;
  box-shadow: 0 0 15px var(--accent-color-pink);
  font-family: var(--font-accent);
  text-transform: uppercase;
}

.blog-content {
  padding: 20px;
}

.blog-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 10px;
  display: block;
}

.blog-title {
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: 600;
  line-height: 1.4;
  font-family: var(--font-accent);
}

.blog-title a {
  color: var(--accent-color-cyan);
  text-shadow: 0 0 8px var(--accent-color-cyan);
}

.blog-title a:hover,
.blog-title a:focus {
  color: var(--accent-color-pink);
  text-shadow: 0 0 8px var(--accent-color-pink);
}

.blog-excerpt {
  color: var(--text-secondary);
  margin-bottom: 15px;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4.5em;
}

.blog-meta {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 15px;
}

.blog-author {
  display: flex;
  align-items: center;
}

.blog-author-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid var(--card-border);
}

.blog-author-name {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* -------------------------------- 
   Pagination
-------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination .page-item .page-link {
  color: var(--text-secondary);
  background-color: var(--secondary-color);
  border: 1px solid var(--card-border);
  margin: 0 5px;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-speed) ease;
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  border-color: var(--accent-color-cyan);
  box-shadow: 0 0 15px var(--accent-color-cyan);
}

.pagination .page-item.active .page-link {
  background-color: var(--accent-color-cyan);
  color: var(--primary-color);
  border-color: var(--accent-color-cyan);
  box-shadow: 0 0 15px var(--accent-color-cyan);
}

/* -------------------------------- 
   Sidebar
-------------------------------- */
.sidebar {
  margin-bottom: 30px;
}

.sidebar-widget {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
}

.sidebar-widget-title {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--accent-color-cyan);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-accent);
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--accent-color-cyan);
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.category-list li:last-child {
  border-bottom: none;
}

.category-list a {
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-speed) ease;
}

.category-list a:hover, 
.category-list a:focus {
  color: var(--accent-color-cyan);
  text-shadow: 0 0 8px var(--accent-color-cyan);
  transform: translateX(5px);
}

.category-count {
  background-color: rgba(0, 252, 255, 0.1);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  color: var(--accent-color-cyan);
  box-shadow: 0 0 10px rgba(0, 252, 255, 0.2);
}

/* -------------------------------- 
   Product Detail Page
-------------------------------- */
.product-detail {
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
}

.product-images {
  position: relative;
  margin-bottom: 30px;
}

.product-image-main {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 15px;
  border: 1px solid var(--card-border);
  box-shadow: 0 0 15px rgba(0, 252, 255, 0.2);
}

.product-image-additional {
  display: flex;
  flex-wrap: wrap;
}

.product-image-additional img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-speed) ease;
}

.product-image-additional img:hover,
.product-image-additional img.active {
  border-color: var(--accent-color-cyan);
  box-shadow: 0 0 15px var(--accent-color-cyan);
}

.product-info h1 {
  margin-bottom: 15px;
  font-family: var(--font-accent);
  text-transform: uppercase;
  background: linear-gradient(to bottom, var(--accent-color-cyan) 0%, var(--accent-color-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
              0 0 10px var(--accent-color-cyan),
              0 0 20px var(--accent-color-pink);
}

.product-price {
  font-size: 1.5rem;
  color: var(--accent-color-yellow);
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-color-yellow);
}

.product-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.7;
}

/* -------------------------------- 
   Console Logo Carousel - ENHANCED
-------------------------------- */
.console-logo-carousel {
  overflow: hidden;
  position: relative;
  height: 120px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 2px solid var(--neon-cyan);
  border-bottom: 2px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  margin: 20px 0 30px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.logo-track {
  display: flex;
  animation: scroll 30s linear infinite;
  height: 100%;
  align-items: center;
}

.logo-slide {
  flex: 0 0 auto;
  padding: 10px;
  min-width: 140px;
  height: 100px;
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.logo-slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0) 30%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.logo-slide:hover::after {
  opacity: 1;
}

.logo-slide img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--neon-cyan));
  transition: all 0.3s ease;
  opacity: 0.8;
}

.logo-slide:hover img {
  filter: drop-shadow(0 0 10px var(--neon-pink));
  opacity: 1;
  transform: scale(1.15);
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-140px * 18 - 30px * 18)); }
}

/* -------------------------------- 
   Responsive Adjustments
-------------------------------- */
@media (max-width: 1199px) {
  .header-menu #menu .nav-link {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
  
  .home-banner h2 {
    font-size: 2.5rem;
  }
}

@media (max-width: 991px) {
  .header-menu {
    display: none;
  }
  
  .header-main {
    justify-content: space-between;
  }
  
  .mobile-menu {
    display: block;
  }
  
  .header-tools-item.search-dropdown {
    display: none;
  }
  
  .header-tools-item.wishlist-icon {
    display: none;
  }
  
  #cart > button .cart-total {
    display: none;
  }
  
  .home-banner-content {
    padding: 40px 20px;
  }
  
  .home-banner h2 {
    font-size: 2rem;
  }
  
  .home-banner p {
    font-size: 1rem;
  }
  
  .floating-element {
    display: none;
  }
  
  .product-card, .blog-card {
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 1.6rem;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-title .view-all {
    margin-left: 0;
    margin-top: 10px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .site-header {
    padding: 15px 0;
  }
  
  #logo img {
    max-height: 50px;
  }
  
  .header-tools-item {
    margin-left: 10px;
  }
  
  .tool-icon {
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
  }
  
  #cart .dropdown-menu {
    width: 290px;
    right: -70px;
  }
  
  .footer-about, 
  .footer-list, 
  .footer-newsletter {
    margin-bottom: 30px;
  }
  
  .newsletter-form {
    flex-direction: column;
  }
  
  .newsletter-form input {
    border-radius: 8px;
    margin-bottom: 10px;
  }
  
  .newsletter-form .btn {
    border-radius: 8px;
    width: 100%;
  }
}

@media (max-width: 575px) {
  .product-detail {
    padding: 15px;
  }
  
  .home-banner h2 {
    font-size: 1.5rem;
  }
  
  .home-banner p {
    font-size: 0.9rem;
  }
  
  .btn {
    padding: 10px 20px;
  }
}

/* ---------------------------------------------------------
   Responsive styles for the retro theme (from retro-theme-responsive.css)
--------------------------------------------------------- */

/* Tablets (medium screens) */
@media (max-width: 991px) {
  /* Header */
  .header-main {
    padding: 10px 0;
  }
  
  .header-logo img {
    max-height: 40px;
  }
  
  /* Hide desktop menu, show mobile menu */
  .header-menu.d-none.d-lg-block {
    display: none !important;
  }
  
  .mobile-menu.d-block.d-lg-none {
    display: block !important;
  }
  
  /* Mobile header tools */
  .header-tools {
    display: flex;
    align-items: center;
  }
  
  .header-tools-item {
    margin-left: 10px;
  }
  
  .tool-icon {
    font-size: 1.1rem;
    color: var(--text-light);
  }
  
  /* Mobile categories button */
  .retro-mobile-category-btn {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background-color: var(--secondary-bg);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    border-radius: var(--button-border-radius);
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
  }
  
  .retro-mobile-category-btn:after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Banner adjustments */
  .home-banner {
    padding: 30px 15px;
  }
  
  .banner-title {
    font-size: 1.5rem;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
  }
  
  .shop-now-btn {
    font-size: 0.8rem;
    padding: 10px 20px;
  }
  
  /* Products grid - 3 columns on tablet */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Category cards - 3 columns */
  .category-card {
    padding: 10px;
  }
  
  .category-image {
    height: 70px;
  }
  
  .category-title {
    font-size: 0.7rem;
    min-height: 40px;
  }
  
  /* Newsletter section */
  .newsletter-section {
    padding: 30px;
  }
  
  .newsletter-section h2 {
    font-size: 1.2rem;
  }
  
  .newsletter-section p {
    font-size: 1rem;
  }
}

/* Mobile (small screens) */
@media (max-width: 767px) {
  /* Section spacing */
  .section-spacing {
    margin-bottom: 30px;
  }
  
  /* Header */
  .header-logo img {
    max-height: 35px;
  }
  
  /* Banner */
  .home-banner {
    padding: 20px 10px;
  }
  
  .banner-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
  
  .banner-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  
  .shop-now-btn {
    font-size: 0.7rem;
    padding: 8px 16px;
  }
  
  /* Logo carousel */
  .logo-slide {
    width: 60px;
    height: 40px;
    margin: 0 10px;
  }
  
  .logo-slide img {
    max-height: 30px;
  }
  
  /* Play retro section */
  .play-retro-section {
    padding: 15px;
  }
  
  .play-retro-section h3 {
    font-size: 0.8rem;
  }
  
  /* Products grid - 2 columns on mobile */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  /* Product cards */
  .product-card {
    margin-bottom: 15px;
  }
  
  .product-thumb {
    height: 120px;
  }
  
  .product-card-body {
    padding: 8px;
  }
  
  .product-name {
    font-size: 0.9rem;
    min-height: 30px;
  }
  
  .price {
    font-size: 0.9rem;
  }
  
  .add-to-cart {
    font-size: 0.5rem;
    padding: 6px 8px;
  }
  
  /* Blog cards */
  .blog-thumb {
    height: 100px;
  }
  
  .blog-category {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
  
  .blog-title {
    font-size: 0.9rem;
    min-height: 30px;
  }
  
  .blog-excerpt {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
  }
  
  /* Newsletter section */
  .newsletter-section {
    padding: 20px;
    margin: 30px 0;
  }
  
  .newsletter-section h2 {
    font-size: 1rem;
  }
  
  .newsletter-section p {
    font-size: 0.9rem;
  }
  
  .newsletter-form input {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  
  .newsletter-form button {
    padding: 8px 12px;
    font-size: 0.6rem;
  }
  
  /* Footer */
  .site-footer {
    padding: 40px 0 20px;
    margin-top: 40px;
  }
  
  .footer-heading {
    font-size: 0.8rem;
    margin-bottom: 15px;
  }
  
  .footer-links a {
    font-size: 0.9rem;
  }
  
  .footer-bottom {
    margin-top: 30px;
    font-size: 0.8rem;
  }
}

/* Very small screens */
@media (max-width: 479px) {
  /* Header */
  .header-logo img {
    max-height: 30px;
  }
  
  /* Banner */
  .banner-title {
    font-size: 1rem;
  }
  
  .banner-subtitle {
    font-size: 0.9rem;
  }
  
  .shop-now-btn {
    font-size: 0.6rem;
    padding: 6px 12px;
  }
  
  /* Products grid - limit height on small screens */
  .product-thumb {
    height: 100px;
  }
  
  .product-name {
    font-size: 0.8rem;
  }
  
  .price {
    font-size: 0.8rem;
  }
  
  .add-to-cart {
    font-size: 0.45rem;
    padding: 5px 6px;
  }
  
  /* Category cards */
  .category-image {
    height: 60px;
  }
  
  .category-title {
    font-size: 0.6rem;
  }
  
  .category-explore-btn {
    font-size: 0.5rem;
    padding: 4px 8px;
  }
  
  /* Blog cards */
  .blog-thumb {
    height: 80px;
  }
  
  .blog-title {
    font-size: 0.8rem;
  }
  
  /* Newsletter section */
  .newsletter-form {
    flex-direction: column;
  }
  
  .newsletter-form input {
    border-radius: var(--button-border-radius);
    margin-bottom: 10px;
  }
  
  .newsletter-form button {
    border-radius: var(--button-border-radius);
    width: 100%;
  }
}

/* ---------------------------------------------------------
   Mobile Neon Glow Reduction (for headers, section titles, page titles, and play-retro-section)
--------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --neon-text-shadow: 0 0 1.5px rgba(255,255,255,0.8) !important,
                        0 0 3px currentColor !important,
                        0 0 6px currentColor !important,
                        0 0 9px currentColor !important,
                        0 0 12px currentColor !important;
  }
  .neon-cyan {
    text-shadow: 0 0 1.5px rgba(255,255,255,0.8) !important,
                 0 0 3px var(--accent-color-cyan) !important,
                 0 0 6px var(--accent-color-cyan) !important,
                 0 0 9px var(--accent-color-cyan) !important;
  }
  .neon-pink {
    text-shadow: 0 0 1.5px rgba(255,255,255,0.8) !important,
                 0 0 3px var(--accent-color-pink) !important,
                 0 0 6px var(--accent-color-pink) !important,
                 0 0 9px var(--accent-color-pink) !important;
  }
  .neon-yellow {
    text-shadow: 0 0 1.5px rgba(255,255,255,0.8) !important,
                 0 0 3px var(--accent-color-yellow) !important,
                 0 0 6px var(--accent-color-yellow) !important,
                 0 0 9px var(--accent-color-yellow) !important;
  }
  .header-menu #menu .nav-link:hover,
  .header-menu #menu .nav-link:focus,
  .header-menu #menu .nav-link.active {
    text-shadow: 0 0 3px var(--accent-color-cyan) !important;
  }
  .header-menu #menu .nav-link::after {
    box-shadow: 0 0 3px var(--accent-color-cyan) !important;
  }
  .cart-count {
    box-shadow: 0 0 3px var(--accent-color-pink) !important;
  }
  .footer-heading {
    text-shadow: 0 0 3px var(--accent-color-cyan) !important;
  }
  .blog-title a,
  .blog-title a:hover,
  .blog-title a:focus {
    text-shadow: 0 0 3px var(--accent-color-cyan) !important;
  }
  /* Reduce glow on headers, section titles, page titles, and play-retro-section elements */
  body h1,
  body h2,
  body .section-title,
  body .page-title,
  h2.section-title span.neon-cyan,
  .play-retro-section h3,
  .play-retro-section a.play-online-btn {
    text-shadow: 0 0 1px rgba(0,0,0,0.3) !important;
  }
}

/* ---------------------------------------------------------
   Fix for Category Card Overlapping on Mobile
--------------------------------------------------------- */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--secondary-color);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 15px; /* space between cards */
}

.category-image {
  width: 100%;
  height: 150px; /* adjust as needed */
  overflow: hidden;
  position: relative;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-content {
  padding: 15px;
  text-align: center;
}


/* Header styles for Retro Games Theme */

/* Header styles with scanline effect */
.top-header {
  background-color: #0b0033 !important; /* Forcing with !important to override any other styles */
  padding: 30px 0;
  border-bottom: 2px solid rgba(0, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  /* Added margin at top to create space for the neon line */
  margin-top: 8px;
}

/* Scanline effect for CRT monitor look */
.top-header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* CRT power-on animation for the header */
.top-header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(0, 0, 0, 0) 5%,
    rgba(0, 0, 0, 0) 95%, 
    rgba(255, 255, 255, 0.1) 100%
  );
  animation: crtOn 3s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}

@keyframes crtOn {
  0% {
    opacity: 0;
    background: white;
    transform: scaleY(0.005);
  }
  3% {
    opacity: 1;
    transform: scaleY(0.005);
  }
  5% {
    transform: scaleY(1);
  }
  30% {
    background: rgba(255, 255, 255, 0.3);
  }
  100% {
    background: linear-gradient(to bottom, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(0, 0, 0, 0) 5%,
      rgba(0, 0, 0, 0) 95%, 
      rgba(255, 255, 255, 0.1) 100%
    );
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

/* Logo styles with enhanced glow effect */
.site-logo {
  flex: 0 0 auto;
  position: relative;
}

.site-logo img {
  height: 100px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
  image-rendering: pixelated;
}

/* Digital noise effect for the logo */
.site-logo:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="rgba(0,255,255,0.2)" x="10" y="10" /><rect width="1" height="1" fill="rgba(0,255,255,0.2)" x="30" y="20" /><rect width="1" height="1" fill="rgba(0,255,255,0.2)" x="25" y="60" /><rect width="1" height="1" fill="rgba(0,255,255,0.2)" x="65" y="35" /><rect width="1" height="1" fill="rgba(0,255,255,0.2)" x="70" y="70" /><rect width="1" height="1" fill="rgba(255,0,255,0.2)" x="15" y="45" /><rect width="1" height="1" fill="rgba(255,0,255,0.2)" x="45" y="15" /><rect width="1" height="1" fill="rgba(255,0,255,0.2)" x="50" y="50" /><rect width="1" height="1" fill="rgba(255,0,255,0.2)" x="80" y="80" /></svg>');
  background-size: 100px 100px;
  opacity: 0.4;
  z-index: -1;
  animation: digitalNoise 10s linear infinite;
  pointer-events: none;
}

@keyframes digitalNoise {
  0% { background-position: 0 0; }
  25% { background-position: 100px 0; }
  50% { background-position: 100px 100px; }
  75% { background-position: 0 100px; }
  100% { background-position: 0 0; }
}

.site-logo:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 5px;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 255, 0.2) 0%,
    transparent 70%
  );
  z-index: -1;
  opacity: 0.8;
  animation: logoGlow 3s ease-in-out infinite alternate;
}

@keyframes logoGlow {
  0% {
    opacity: 0.6;
    background: radial-gradient(
      circle at center,
      rgba(0, 255, 255, 0.2) 0%,
      transparent 70%
    );
  }
  100% {
    opacity: 0.9;
    background: radial-gradient(
      circle at center,
      rgba(255, 0, 255, 0.2) 0%,
      transparent 70%
    );
  }
}

/* Header right section with enhanced styling */
.header-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative; /* Added to create positioning context for #search-container */
}

.cart-button, 
.user-button,
.cart-icon,
.search-icon {
  color: #00ffff;
  font-size: 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
  transition: all 0.3s ease;
  /* Pixel border around icons */
  padding: 5px;
  border: 1px dashed rgba(0, 255, 255, 0.4);
}

.cart-button:hover, 
.user-button:hover,
.cart-icon:hover,
.search-icon:hover {
  color: #ff00ff;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 15px #ff00ff;
  transform: scale(1.1);
  border-color: rgba(255, 0, 255, 0.6);
}

/* Hide the original elements we're replacing */
.coins-display, 
#cart:not(#retro-cart) {
  display: none !important;
}

/* Ultra Retro Gaming Cart Styling */
#retro-cart {
  position: relative;
}

.retro-cart-button {
  text-decoration: none;
  display: block;
  transform: scale(1);
  transition: transform 0.2s ease;
  /* Pixel-perfect positioning */
  image-rendering: pixelated;
}

.retro-cart-button:hover {
  transform: scale(1.05);
}

/* Arcade cabinet style container */
.retro-cart-container {
  background-color: #1a0836;
  color: #ffffff;
  padding: 6px 14px;
  border: 2px solid #00ffff;
  box-shadow: 
    0 0 0 1px #1a0836,
    0 0 0 3px rgba(0, 255, 255, 0.3),
    0 0 10px rgba(255, 0, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  transition: all 0.3s ease;
  
  /* More pixelated shape */
  clip-path: polygon(
    0% 10%, 4% 10%, 4% 4%, 10% 4%, 10% 0%,
    90% 0%, 90% 4%, 96% 4%, 96% 10%, 100% 10%,
    100% 90%, 96% 90%, 96% 96%, 90% 96%, 90% 100%,
    10% 100%, 10% 96%, 4% 96%, 4% 90%, 0% 90%
  );
}

/* CRT scanlines effect */
.retro-cart-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

/* Classic arcade cabinet buttons */
.retro-cart-container::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 3px;
  background: linear-gradient(to right,
    #ff0000 0%,
    #ff0000 30%,
    #ffff00 33%,
    #ffff00 63%,
    #00ff00 66%,
    #00ff00 100%
  );
  z-index: 0;
  opacity: 0.7;
}

/* Game cartridge or controller icon with pixelated style */
.retro-cart-container i {
  color: #00ffff;
  font-size: 14px;
  filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.7));
  transform: rotate(5deg);
  display: inline-block;
  image-rendering: pixelated;
  animation: retro-icon-float 2s infinite alternate;
}

@keyframes retro-icon-float {
  0% {
    transform: translateY(0px) rotate(0deg);
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.7));
  }
  100% {
    transform: translateY(-3px) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.9));
  }
}

/* 8-bit style text */
.retro-cart-text {
  color: #ffffff;
  text-shadow: 
    2px 2px 0 #1a0836,
    -1px -1px 0 rgba(0, 255, 255, 0.5);
  letter-spacing: 1px;
  /* Pixel font rendering */
  image-rendering: pixelated;
  /* Text flicker effect */
  animation: text-glitch 8s infinite;
}

@keyframes text-glitch {
  0%, 100% { opacity: 1; }
  98.9% { opacity: 1; }
  99% { opacity: 0.8; }
  99.1% { opacity: 1; }
  99.2% { opacity: 0.6; }
  99.3% { opacity: 1; }
}

/* Ultra pixelated item counter */
#retro-cart #cart-count-display {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ff00ff;
  color: #fff;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  box-shadow: 
    0 0 0 1px #1a0836,
    0 0 0 2px rgba(255, 0, 255, 0.5),
    0 0 8px rgba(255, 0, 255, 0.7);
  image-rendering: pixelated;
  
  /* Even more pixelated corners for counter */
  clip-path: polygon(
    0% 25%, 25% 25%, 25% 0%,
    75% 0%, 75% 25%, 100% 25%,
    100% 75%, 75% 75%, 75% 100%,
    25% 100%, 25% 75%, 0% 75%
  );
}

/* Enhanced hover effects */
.retro-cart-container:hover {
  border-color: #ff00ff;
  background-color: #230d45;
  box-shadow: 
    0 0 0 1px #1a0836,
    0 0 0 3px rgba(255, 0, 255, 0.5),
    0 0 15px rgba(255, 0, 255, 0.6);
}

.retro-cart-container:hover .retro-cart-text {
  color: #00ffff;
  text-shadow: 
    0 0 5px #00ffff,
    0 0 10px rgba(0, 255, 255, 0.5);
}

.retro-cart-container:hover i {
  color: #ff00ff;
  animation: retro-icon-active 0.4s infinite alternate;
}

@keyframes retro-icon-active {
  0% {
    transform: rotate(-10deg) scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 0, 255, 0.8));
  }
  100% {
    transform: rotate(10deg) scale(1.3);
    filter: drop-shadow(0 0 10px rgba(255, 0, 255, 1));
  }
}

/* Animation for cart count updates */
.pixel-bounce {
  animation: pixel-bounce-animation 0.4s steps(4);
}

@keyframes pixel-bounce-animation {
  0% { transform: scale(1); }
  25% { transform: scale(1.5); }
  50% { transform: scale(1.2); }
  75% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

/* Add a classic arcade insert-coin prompt */
.retro-cart-container .insert-coin {
  position: absolute;
  bottom: -14px;
  right: 0;
  font-size: 6px;
  color: #ffff00;
  opacity: 0;
  text-shadow: 0 0 4px rgba(255, 255, 0, 0.8);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.retro-cart-container:hover .insert-coin {
  opacity: 1;
  animation: blink-text 1s steps(2) infinite;
}

@keyframes blink-text {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Console Navigation Menu */
.console-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 20px;
}

.console-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 25px;
}

.console-nav li {
  padding: 0;
  position: relative;
}

/* Header text - half size */
.console-nav a {
  color: white;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.45rem; /* Halved from 0.9rem */
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 5px 8px;
  transition: all 0.2s ease;
  position: relative;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  display: inline-block;
  /* Added pixelated border */
  border: 1px solid transparent;
}

/* Add pixel corners to nav items */
.console-nav a:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3px;
  height: 3px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.console-nav a:hover:before,
.console-nav a.active:before {
  background-color: #00ffff;
  box-shadow: 3px 0 0 transparent, 0 3px 0 transparent, 3px 3px 0 #00ffff;
}

/* Pixelated underline effect for retro feel */
.console-nav a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: transparent;
  box-shadow: 
    1px 0 0 #00ffff,
    3px 0 0 #00ffff,
    5px 0 0 #00ffff,
    7px 0 0 #00ffff,
    9px 0 0 #00ffff,
    11px 0 0 #00ffff,
    13px 0 0 #00ffff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.console-nav a:hover:after,
.console-nav a.active:after {
  opacity: 1;
}

/* Enhanced hover effect with improved flicker animation */
.console-nav a:hover,
.console-nav a.active {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
  transform: scale(1.05);
  animation: textFlicker 1.5s infinite alternate;
  border-color: rgba(0, 255, 255, 0.3);
}

/* More realistic CRT flicker animation */
@keyframes textFlicker {
  0% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
    opacity: 0.9;
  }
  90% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff;
    opacity: 1;
  }
  91% {
    text-shadow: none;
    opacity: 0.8;
  }
  92% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff;
    opacity: 1;
  }
  100% {
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff;
    opacity: 1;
  }
}

/* Pixel dots between menu items - brighter */
.console-nav li:not(:last-child):after {
  content: "•";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 255, 255, 0.7);
  font-size: 12px;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* Search dropdown with arcade style - more pixelated */
#search-container {
  position: absolute;
  top: 100%;
  right: 0;
  background: #23104a;
  padding: 7px;
  border-radius: 0;
  border: 2px solid #ff00ff;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3);
  z-index: 1000;
  width: 300px;
  display: none;
  /* Pixelated corners */
  clip-path: polygon(
    0% 2%, 2% 2%, 2% 0%,
    98% 0%, 98% 2%, 100% 2%,
    100% 98%, 98% 98%, 98% 100%,
    2% 100%, 2% 98%, 0% 98%
  );
}

#search-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 255, 0.05) 0px,
    rgba(255, 0, 255, 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  pointer-events: none;
}

#search-container .search-inner {
  display: flex;
  width: 100%;
  position: relative;
}

#search-container input {
  flex: 1;
  padding: 8px 10px;
  background-color: #1a0c35;
  color: #fff;
  border: 1px solid #00ffff;
  border-right: none;
  border-radius: 0;
  font-family: 'VT323', monospace;
  font-size: 18px;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.5) inset;
}

#search-container button {
  background: #ff00ff;
  color: #fff;
  border: 1px solid #ff00ff;
  border-radius: 0;
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
}

#search-container button:hover {
  background: #00ffff;
  border-color: #00ffff;
  color: #0c0c1d;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Added glitching neon strip to header top - pink to blue with strong glow */
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px; /* Increased height */
  background: linear-gradient(to right,
    #ff00ff 0%,
    #00ffff 100%
  );
  opacity: 0.9; /* Slightly higher opacity */
  z-index: 9999;
  animation: neonGlitch 4s infinite;
  /* Added strong glow effect */
  box-shadow: 
    0 0 10px 2px rgba(255, 0, 255, 0.7),
    0 0 20px 5px rgba(0, 255, 255, 0.5);
}

/* Glitching neon animation - pink to blue with enhanced effects */
@keyframes neonGlitch {
  0% {
    opacity: 0.9;
    background: linear-gradient(to right, #ff00ff 0%, #00ffff 100%);
    transform: scaleX(1);
    box-shadow: 
      0 0 10px 2px rgba(255, 0, 255, 0.7),
      0 0 20px 5px rgba(0, 255, 255, 0.5);
  }
  5% {
    opacity: 1;
    background: linear-gradient(to right, #00ffff 0%, #ff00ff 100%);
    transform: scaleX(1.02);
    box-shadow: 
      0 0 15px 3px rgba(0, 255, 255, 0.8),
      0 0 25px 7px rgba(255, 0, 255, 0.6);
  }
  10% {
    opacity: 0.9;
    background: linear-gradient(to right, #ff00ff 0%, #00ffff 100%);
    transform: scaleX(0.98);
    box-shadow: 
      0 0 10px 2px rgba(255, 0, 255, 0.7),
      0 0 20px 5px rgba(0, 255, 255, 0.5);
  }
  15% {
    opacity: 0.95;
    background: linear-gradient(to right, #00ffff 0%, #ff00ff 100%);
    transform: scaleX(1);
    box-shadow: 
      0 0 12px 3px rgba(0, 255, 255, 0.7),
      0 0 22px 6px rgba(255, 0, 255, 0.5);
  }
  20% {
    opacity: 1;
    background: linear-gradient(to right, #ff00ff 0%, #00ffff 100%);
    box-shadow: 
      0 0 15px 3px rgba(255, 0, 255, 0.8),
      0 0 25px 7px rgba(0, 255, 255, 0.6);
  }
  25% {
    opacity: 0.9;
    background: linear-gradient(to right, #00ffff 0%, #ff00ff 100%);
    box-shadow: 
      0 0 10px 2px rgba(0, 255, 255, 0.7),
      0 0 20px 5px rgba(255, 0, 255, 0.5);
  }
  30% {
    background: linear-gradient(to right, #ff00ff 0%, #00ffff 100%);
    box-shadow: 
      0 0 12px 3px rgba(255, 0, 255, 0.7),
      0 0 22px 6px rgba(0, 255, 255, 0.5);
  }
  80% {
    background: linear-gradient(to right, #ff00ff 0%, #00ffff 100%);
    opacity: 0.9;
    box-shadow: 
      0 0 10px 2px rgba(255, 0, 255, 0.7),
      0 0 20px 5px rgba(0, 255, 255, 0.5);
  }
  82% {
    opacity: 0.4;
    box-shadow: 
      0 0 5px 1px rgba(255, 0, 255, 0.3),
      0 0 10px 2px rgba(0, 255, 255, 0.2);
  }
  84% {
    opacity: 0.9;
    box-shadow: 
      0 0 15px 3px rgba(255, 0, 255, 0.8),
      0 0 25px 7px rgba(0, 255, 255, 0.6);
  }
  86% {
    opacity: 0.2;
    box-shadow: 
      0 0 3px 1px rgba(255, 0, 255, 0.2),
      0 0 5px 2px rgba(0, 255, 255, 0.1);
  }
  88% {
    opacity: 0.8;
    box-shadow: 
      0 0 12px 3px rgba(255, 0, 255, 0.7),
      0 0 22px 6px rgba(0, 255, 255, 0.5);
  }
  90% {
    background: linear-gradient(to right, #00ffff 0%, #ff00ff 100%);
    opacity: 1;
    box-shadow: 
      0 0 15px 3px rgba(0, 255, 255, 0.8),
      0 0 25px 7px rgba(255, 0, 255, 0.6);
  }
  100% {
    background: linear-gradient(to right, #ff00ff 0%, #00ffff 100%);
    opacity: 0.9;
    box-shadow: 
      0 0 10px 2px rgba(255, 0, 255, 0.7),
      0 0 20px 5px rgba(0, 255, 255, 0.5);
  }
}

/* IMPROVED MOBILE STYLES */

/* Large Desktop optimization */
@media (min-width: 1200px) {
  .header-content {
    padding: 0 20px;
  }
  
  .console-nav ul {
    gap: 30px;
  }
  
  .console-nav a {
    font-size: 0.5rem;
  }
}

/* Desktop optimization */
@media (min-width: 992px) and (max-width: 1199px) {
  .console-nav ul {
    gap: 20px;
  }
}

/* Tablet & Mobile Style Improvements */
@media (max-width: 991px) {
  .header-content {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  
  .site-logo {
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 15px;
  }
  
  .header-tools {
    flex: 0 0 auto;
    margin: 5px 0;
    order: 3;
  }
  
  .console-nav {
    flex: 0 0 100%;
    order: 2;
    margin: 10px 0;
    justify-content: center;
  }
  
  /* Keep logo size more substantial on tablets */
  .site-logo img {
    height: 90px;
    margin: 0 auto;
  }
  
  /* Improve menu center alignment */
  .console-nav ul {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  /* Make navigation more prominent */
  .console-nav a {
    font-size: 0.5rem;
    padding: 8px 10px;
    margin-bottom: 5px;
  }
  
  /* Ensure retro basket maintains style */
  .retro-cart-container {
    padding: 6px 14px;
    font-size: 10px;
  }
  
  .retro-cart-container i {
    font-size: 14px;
  }
  
  #retro-cart #cart-count-display {
    font-size: 9px;
    min-width: 16px;
    height: 16px;
  }
}

/* Responsive styles for the retro theme */

/* Tablets (medium screens) */
@media (max-width: 991px) {
  /* Header */
  .header-main {
    padding: 10px 0;
  }
  
  .header-logo img {
    max-height: 40px;
  }
  
  /* Hide desktop menu, show mobile menu */
  .header-menu.d-none.d-lg-block {
    display: none !important;
  }
  
  .mobile-menu.d-block.d-lg-none {
    display: block !important;
  }
  
  /* Mobile header tools */
  .header-tools {
    display: flex;
    align-items: center;
  }
  
  .header-tools-item {
    margin-left: 10px;
  }
  
  .tool-icon {
    font-size: 1.1rem;
    color: var(--text-light);
  }
  
  /* Mobile categories button */
  .retro-mobile-category-btn {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background-color: var(--secondary-bg);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    border-radius: var(--button-border-radius);
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
  }
  
  .retro-mobile-category-btn:after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Banner adjustments */
  .home-banner {
    padding: 30px 15px;
  }
  
  .banner-title {
    font-size: 1.5rem;
  }
  
  .banner-subtitle {
    font-size: 1.2rem;
  }
  
  .shop-now-btn {
    font-size: 0.8rem;
    padding: 10px 20px;
  }
  
  /* Products grid - 3 columns on tablet */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Category cards - 3 columns */
  .category-card {
    padding: 10px;
  }
  
  .category-image {
    height: 70px;
  }
  
  .category-title {
    font-size: 0.7rem;
    min-height: 40px;
  }
  
  /* Newsletter section */
  .newsletter-section {
    padding: 30px;
  }
  
  .newsletter-section h2 {
    font-size: 1.2rem;
  }
  
  .newsletter-section p {
    font-size: 1rem;
  }
}

/* Mobile (small screens) */
@media (max-width: 767px) {
  /* Section spacing */
  .section-spacing {
    margin-bottom: 30px;
  }
  
  /* Header */
  .header-logo img {
    max-height: 35px;
  }
  
  /* Banner */
  .home-banner {
    padding: 20px 10px;
  }
  
  .banner-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
  
  .banner-subtitle {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  
  .shop-now-btn {
    font-size: 0.7rem;
    padding: 8px 16px;
  }
  
  /* Logo carousel */
  .logo-slide {
    width: 60px;
    height: 40px;
    margin: 0 10px;
  }
  
  .logo-slide img {
    max-height: 30px;
  }
  
  /* Play retro section */
  .play-retro-section {
    padding: 15px;
  }
  
  .play-retro-section h3 {
    font-size: 0.8rem;
  }
  
  /* Products grid - 2 columns on mobile */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  /* Product cards */
  .product-card {
    margin-bottom: 15px;
  }
  
  .product-thumb {
    height: 120px;
  }
  
  .product-card-body {
    padding: 8px;
  }
  
  .product-name {
    font-size: 0.9rem;
    min-height: 30px;
  }
  
  .price {
    font-size: 0.9rem;
  }
  
  .add-to-cart {
    font-size: 0.5rem;
    padding: 6px 8px;
  }
  
  /* Blog cards */
  .blog-thumb {
    height: 100px;
  }
  
  .blog-category {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
  
  .blog-title {
    font-size: 0.9rem;
    min-height: 30px;
  }
  
  .blog-excerpt {
    font-size: 0.8rem;
    -webkit-line-clamp: 2;
  }
  
  /* Newsletter section */
  .newsletter-section {
    padding: 20px;
    margin: 30px 0;
  }
  
  .newsletter-section h2 {
    font-size: 1rem;
  }
  
  .newsletter-section p {
    font-size: 0.9rem;
  }
  
  .newsletter-form input {
    padding: 8px 10px;
    font-size: 0.9rem;
  }
  
  .newsletter-form button {
    padding: 8px 12px;
    font-size: 0.6rem;
  }
  
  /* Footer */
  .site-footer {
    padding: 40px 0 20px;
    margin-top: 40px;
  }
  
  .footer-heading {
    font-size: 0.8rem;
    margin-bottom: 15px;
  }
  
  .footer-links a {
    font-size: 0.9rem;
  }
  
  .footer-bottom {
    margin-top: 30px;
    font-size: 0.8rem;
  }
}

/* Very small screens */
@media (max-width: 479px) {
  /* Header */
  .header-logo img {
    max-height: 30px;
  }
  
  /* Banner */
  .banner-title {
    font-size: 1rem;
  }
  
  .banner-subtitle {
    font-size: 0.9rem;
  }
  
  .shop-now-btn {
    font-size: 0.6rem;
    padding: 6px 12px;
  }
  
  /* Products grid - limit height on small screens */
  .product-thumb {
    height: 100px;
  }
  
  .product-name {
    font-size: 0.8rem;
  }
  
  .price {
    font-size: 0.8rem;
  }
  
  .add-to-cart {
    font-size: 0.45rem;
    padding: 5px 6px;
  }
  
  /* Category cards */
  .category-image {
    height: 60px;
  }
  
  .category-title {
    font-size: 0.6rem;
  }
  
  .category-explore-btn {
    font-size: 0.5rem;
    padding: 4px 8px;
  }
  
  /* Blog cards */
  .blog-thumb {
    height: 80px;
  }
  
  .blog-title {
    font-size: 0.8rem;
  }
  
  /* Newsletter section */
  .newsletter-form {
    flex-direction: column;
  }
  
  .newsletter-form input {
    border-radius: var(--button-border-radius);
    margin-bottom: 10px;
  }
  
  .newsletter-form button {
    border-radius: var(--button-border-radius);
    width: 100%;
  }
}

:root {
  /* Main colors - deeper purple background */
  --main-bg-color: #0b0033;
  --secondary-bg: #160849;
  --card-bg: #23104a;
  
  /* Neon accent colors */
  --neon-cyan: #00ffff;
  --neon-pink: #ff00ff;
  --neon-yellow: #ffff00;
  --neon-green: #00ff8c;
  --neon-blue: #00AAFF;
  --neon-red: #FF5555;
  
  /* Glow effects */
  --neon-cyan-glow: 0 0 7px #00ffff, 0 0 12px #00ffff, 0 0 25px #00ffff;
  --neon-pink-glow: 0 0 7px #ff00ff, 0 0 12px #ff00ff, 0 0 25px #ff00ff;
  --neon-yellow-glow: 0 0 7px #ffff00, 0 0 12px #ffff00, 0 0 25px #ffff00;
  --neon-green-glow: 0 0 7px #00ff8c, 0 0 12px #00ff8c, 0 0 25px #00ff8c;
}

/* -------- BANNER SECTION ENHANCEMENTS -------- */
.retro-banner-section {
  margin-bottom: 40px;
}

.retro-banner {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 40px;
  background-color: #050520;
  border: 4px solid var(--neon-cyan);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5), inset 0 0 50px rgba(0, 0, 80, 0.8);
  padding: 0;
  text-align: center;
  min-height: 450px;
  max-width: 100%;
  box-sizing: border-box;
}

.retro-grid-background {
  background-image: 
    linear-gradient(rgba(0, 27, 45, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 27, 45, 0.7) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center center;
}

.retro-glowing-banner {
  animation: retro-glow-pulse 3s infinite alternate;
}

@keyframes retro-glow-pulse {
  0% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), inset 0 0 30px rgba(0, 0, 80, 0.6); }
  100% { box-shadow: 0 0 40px rgba(0, 255, 255, 0.7), inset 0 0 70px rgba(0, 0, 80, 0.9); }
}

.retro-scan-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

/* Enhanced pixel blocks with more intricate shapes */
.retro-pixel-block {
  position: absolute;
  width: 25px;
  height: 25px;
  z-index: 3;
  clip-path: polygon(
    0% 0%, 20% 0%, 20% 20%, 40% 20%, 40% 0%, 60% 0%, 60% 20%, 80% 20%, 80% 0%,
    100% 0%, 100% 20%, 80% 20%, 80% 40%, 100% 40%, 100% 60%, 80% 60%, 80% 80%,
    100% 80%, 100% 100%, 80% 100%, 80% 80%, 60% 80%, 60% 100%, 40% 100%, 40% 80%,
    20% 80%, 20% 100%, 0% 100%, 0% 80%, 20% 80%, 20% 60%, 0% 60%, 0% 40%, 20% 40%,
    20% 20%, 0% 20%, 0% 0%
  );
  box-shadow: 0 0 15px currentColor;
  transition: all 0.3s ease;
}

.retro-pixel-block:hover {
  transform: scale(1.5) rotate(45deg);
  filter: brightness(1.5);
}

.retro-glow-animate {
  animation: retro-float-rotate 8s infinite ease-in-out;
}

@keyframes retro-float-rotate {
  0% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
  50% { transform: translateY(-15px) rotate(3deg); filter: brightness(1.3); }
  100% { transform: translateY(0) rotate(0deg); filter: brightness(1); }
}

/* Enhanced pixel characters */
.retro-pixel-character {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 3;
}

.retro-pacman {
  top: 20%;
  left: 5%;
  background: radial-gradient(circle at 70% 50%, transparent 9%, var(--neon-yellow) 10%, var(--neon-yellow) 100%);
  clip-path: polygon(100% 0, 100% 100%, 35% 50%);
  animation: retro-pacman-move 15s linear infinite;
}

@keyframes retro-pacman-move {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(calc(100% - 80px)) rotate(180deg); }
  51% { transform: translateX(calc(100% - 80px)) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.retro-space-invader {
  top: 70%;
  right: 10%;
  background-color: var(--neon-green);
  clip-path: polygon(
    0% 25%, 25% 25%, 25% 0%, 37.5% 0%, 37.5% 25%, 62.5% 25%, 62.5% 0%, 75% 0%, 
    75% 25%, 100% 25%, 100% 62.5%, 87.5% 62.5%, 87.5% 75%, 75% 75%, 75% 100%, 
    62.5% 100%, 62.5% 75%, 37.5% 75%, 37.5% 100%, 25% 100%, 25% 75%, 12.5% 75%, 
    12.5% 62.5%, 0% 62.5%
  );
  animation: retro-invader-move 8s infinite ease-in-out;
}

@keyframes retro-invader-move {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateX(20px) translateY(-10px); }
  50% { transform: translateY(15px); }
  75% { transform: translateX(-20px) translateY(-5px); }
}

.retro-mario {
  bottom: 15%;
  left: 15%;
  height: 40px;
  width: 30px;
  background-color: var(--neon-red);
  clip-path: polygon(
    30% 0%, 70% 0%, 70% 10%, 80% 10%, 90% 20%, 90% 60%, 80% 70%, 70% 70%,
    70% 80%, 60% 90%, 40% 90%, 30% 80%, 30% 70%, 20% 70%, 10% 60%, 10% 20%,
    20% 10%, 30% 10%
  );
  animation: retro-mario-jump 5s infinite ease-in-out;
}

@keyframes retro-mario-jump {
  0%, 40%, 60%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.retro-ghost {
  bottom: 25%;
  right: 15%;
  height: 35px;
  width: 30px;
  background-color: var(--neon-cyan);
  clip-path: polygon(
    0% 100%, 33% 100%, 33% 85%, 67% 85%, 67% 100%, 100% 100%, 
    100% 50%, 100% 0%, 0% 0%, 0% 50%
  );
  animation: retro-ghost-float 6s infinite ease-in-out;
}

@keyframes retro-ghost-float {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-15px); opacity: 1; }
}

/* Neon wireframe outlines */
.retro-neon-outline {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px var(--neon-pink);
  opacity: 0.7;
  animation: neon-outline-pulse 3s infinite alternate;
}

@keyframes neon-outline-pulse {
  0% { 
    opacity: 0.5; 
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink), inset 0 0 5px var(--neon-pink);
  }
  100% { 
    opacity: 0.8; 
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan), inset 0 0 10px var(--neon-cyan);
  }
}

.retro-controller {
  width: 100px;
  height: 70px;
  border-radius: 15px;
  top: 10%;
  right: 10%;
}

.retro-controller:before, 
.retro-controller:after {
  content: '';
  position: absolute;
  background-color: transparent;
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 5px var(--neon-pink);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: neon-outline-pulse 3s infinite alternate;
}

.retro-controller:before {
  top: 25px;
  left: 15px;
}

.retro-controller:after {
  top: 25px;
  right: 15px;
}

.retro-console {
  width: 90px;
  height: 40px;
  border-radius: 5px;
  bottom: 15%;
  left: 40%;
}

.retro-arcade-screen {
  position: relative;
  margin: 20px auto;
  padding: 20px;
  border: 6px solid #333;
  border-bottom: 16px solid #222;
  max-width: 850px;
  background: linear-gradient(135deg, rgba(0, 30, 50, 0.8), rgba(5, 5, 20, 0.95));
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.1);
  overflow: hidden;
}

.retro-banner-content {
  position: relative;
  z-index: 4;
  padding: 20px;
  margin: 0 auto;
}

/* Enhanced glitch text effect */
.retro-glitch-container {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 25px;
}

.retro-glitch-text {
  position: relative;
  font-family: 'Press Start 2P', cursive, sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 2.2rem;
  color: var(--neon-cyan);
  text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
  animation: retro-textShadowPulse 2s infinite alternate, retro-glitch-anim 5s infinite;
}

.retro-glitch-text::before,
.retro-glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.retro-glitch-text::before {
  animation: retro-glitch-effect 3s infinite;
  color: var(--neon-pink);
  left: 2px;
  text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
}

.retro-glitch-text::after {
  animation: retro-glitch-effect 2s infinite reverse;
  color: var(--neon-cyan);
  left: -2px;
  text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
}

@keyframes retro-glitch-effect {
  0% { transform: none; opacity: 0.8; }
  7% { transform: translate(2px, 3px); }
  10% { transform: none; }
  27% { transform: none; }
  30% { transform: translate(5px, -2px); }
  35% { transform: none; }
  52% { transform: none; }
  55% { transform: translate(-5px, 2px); }
  60% { transform: none; }
  100% { transform: none; }
}

@keyframes retro-glitch-anim {
  0%, 100% { opacity: 1; }
  98% { opacity: 1; }
  98.5% { opacity: 0.5; }
  99% { opacity: 1; }
}

@keyframes retro-textShadowPulse {
  0% { text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan); }
  100% { text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan); }
}

/* Horizontal glitch effect */
.retro-horizontal-glitch {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 5;
  transform: translateY(-50%);
  opacity: 0;
  animation: retro-horizontal-glitch 10s infinite;
}

@keyframes retro-horizontal-glitch {
  0%, 95%, 100% { opacity: 0; }
  96% { opacity: 0.8; top: 20%; }
  96.5% { opacity: 0; }
  97% { opacity: 0.8; top: 80%; }
  97.5% { opacity: 0; }
}

.retro-banner-subtitle {
  font-family: 'VT323', monospace, sans-serif;
  font-size: 1.4rem;
  color: #fff;
  max-width: 90%;
  margin: 0 auto 25px;
  line-height: 1.4;
}

.retro-action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}

.retro-pixelated-btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  font-family: 'Press Start 2P', cursive, sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  color: #000;
  text-decoration: none;
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 70%, 95% 100%, 0% 100%
  );
}

.retro-shop-now-btn {
  background-color: var(--neon-pink);
  box-shadow: 0 0 15px var(--neon-pink);
}

.retro-alt-btn {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan);
}

.retro-pixelated-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(255, 255, 255, 0.5) 0%, 
    rgba(255, 255, 255, 0) 50%, 
    rgba(0, 0, 0, 0.2) 51%, 
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.retro-pixelated-btn:hover {
  transform: translateY(-5px) scale(1.05);
  text-decoration: none;
  color: #000;
}

.retro-shop-now-btn:hover {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 20px var(--neon-cyan);
}

.retro-alt-btn:hover {
  background-color: var(--neon-pink);
  box-shadow: 0 0 20px var(--neon-pink);
}

/* Enhanced progress bar */
.retro-progress-container {
  max-width: 250px;
  margin: 0 auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.retro-power-icons {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5px;
}

.retro-power-icon {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  margin-right: 8px;
}

.retro-power-icon.active {
  color: var(--neon-yellow);
  text-shadow: 0 0 5px var(--neon-yellow);
  animation: retro-star-pulse 1.5s infinite alternate;
}

@keyframes retro-star-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.2); opacity: 1; }
}

.retro-level-bar {
  height: 12px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.retro-level-progress {
  height: 100%;
  width: 65%;
  background: linear-gradient(to right, var(--neon-pink), var(--neon-cyan));
  border-radius: 10px;
  animation: retro-loading-pulse 2s infinite;
}

@keyframes retro-loading-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.retro-level-text {
  display: flex;
  justify-content: space-between;
  font-family: 'Press Start 2P', cursive, sans-serif;
  font-size: 0.65rem;
  color: var(--neon-cyan);
}

.retro-blinking-cursor::after {
  content: '▌';
  animation: retro-blink 1s infinite;
}

@keyframes retro-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Loading animation */
.retro-loading {
  margin-top: 15px;
  padding: 10px;
  border: 1px solid var(--neon-pink);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  display: none;
}

.retro-loading-bar {
  height: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-bottom: 5px;
}

.retro-loading-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--neon-pink), var(--neon-cyan));
  animation: retro-loading-animation 2s infinite linear;
}

@keyframes retro-loading-animation {
  0% { left: -100%; }
  100% { left: 100%; }
}

.retro-loading-text {
  font-family: 'Press Start 2P', cursive, sans-serif;
  font-size: 0.6rem;
  color: var(--neon-cyan);
  text-align: center;
}

.retro-arcade-controls {
  position: relative;
  height: 40px;
  background-color: #222;
  border-radius: 0 0 15px 15px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -5px auto 0;
  max-width: 850px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.retro-joystick {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  border: 4px solid #444;
  margin: 0 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.retro-joystick:hover {
  transform: scale(1.1);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
}

.retro-button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.retro-button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px currentColor, inset 0 0 5px rgba(255, 255, 255, 0.5);
}

.retro-button-red {
  background-color: var(--neon-pink);
}

.retro-button-blue {
  background-color: var(--neon-cyan);
}

/* Console logo carousel */
.console-logo-carousel {
  overflow: hidden;
  position: relative;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 2px solid var(--neon-cyan);
  border-bottom: 2px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  margin: 20px 0 30px;
  border-radius: 4px;
}

.logo-track {
  display: flex;
  animation: scroll 30s linear infinite;
}

.logo-slide {
  flex: 0 0 auto;
  padding: 0 20px;
  width: 80px;
  height: 50px;
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-slide img {
  max-width: 100%;
  max-height: 54.5px;
  filter: drop-shadow(0 0 6px var(--neon-cyan));
  transition: filter 0.3s ease, opacity 0.3s ease;
  opacity: 0.8;
}

.logo-slide img:hover {
  filter: drop-shadow(0 0 10px var(--neon-pink));
  opacity: 1;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-80px * 18 - 40px * 18)); }
}

/* Play retro section */
.play-retro-section {
  background-color: var(--secondary-bg);
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  border: 2px dashed var(--neon-pink);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
  margin-bottom: 40px;
}

.play-retro-section h3 {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: var(--text-light);
}

.play-online-btn {
  background-color: var(--neon-pink);
  color: #000;
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--neon-pink);
}

.play-online-btn:hover {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan);
  transform: translateY(-2px);
}

/* Section header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 3px solid var(--neon-cyan);
  box-shadow: 0 4px 6px -4px var(--neon-cyan);
}

.section-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 3px solid var(--neon-cyan);
  box-shadow: 0 4px 6px -4px var(--neon-cyan);
  animation: border-glow 3s infinite alternate;
}

@keyframes border-glow {
  0% { border-color: var(--neon-cyan); box-shadow: 0 4px 6px -4px var(--neon-cyan); }
  100% { border-color: var(--neon-pink); box-shadow: 0 4px 6px -4px var(--neon-pink); }
}

.section-title span {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.2rem;
  text-transform: uppercase;
  animation: title-glow 3s ease-in-out infinite;
}

@keyframes title-glow {
  0%, 100% { text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 15px var(--neon-cyan); }
  50% { text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan); }
}

.view-all {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.7rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.view-all:hover {
  text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
}

/* Grids */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Category items */
.category-item {
  background-color: var(--card-bg);
  border-radius: 4px;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.category-item:hover {
  border-color: var(--neon-pink);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
  transform: translateY(-5px);
}

.console-logo {
  margin-bottom: 15px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.console-logo img {
  max-height: 80px;
  max-width: 100%;
  filter: drop-shadow(0 0 5px var(--neon-cyan));
  transition: filter 0.3s ease;
}

.category-item:hover .console-logo img {
  filter: drop-shadow(0 0 10px var(--neon-pink));
}

.console-name {
  color: var(--neon-cyan);
  font-family: 'Press Start 2P', cursive;
  font-size: 0.9rem;
  margin-bottom: 15px;
  text-shadow: 0 0 5px var(--neon-cyan);
}

.category-explore-btn {
  background-color: transparent;
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  border-radius: 0;
  text-transform: uppercase;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.7rem;
  padding: 5px 10px;
  display: inline-block;
  transition: all 0.3s ease;
}

.category-explore-btn:hover {
  background-color: var(--neon-cyan);
  color: var(--main-bg-color);
  box-shadow: 0 0 10px var(--neon-cyan);
}

/* Product items */
.product-item {
  background-color: var(--card-bg);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  border: 2px solid var(--neon-cyan);
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  border-color: var(--neon-pink);
}

.product-thumb {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.product-thumb img {
  max-width: 100%;
  max-height: 140px;
  transition: transform 0.3s ease;
}

.product-item:hover .product-thumb img {
  transform: scale(1.05);
}

.product-info {
  padding: 15px;
  text-align: center;
}

.product-name {
  font-size: 0.9rem;
  margin-bottom: 8px;
  font-family: 'Press Start 2P', cursive;
  min-height: 40px;
}

.product-name a {
  color: var(--neon-cyan);
  text-shadow: 0 0 3px var(--neon-cyan);
  transition: all 0.3s ease;
}

.product-name a:hover {
  color: var(--neon-pink);
  text-shadow: 0 0 5px var(--neon-pink);
}

.price {
  display: inline-block;
  color: var(--neon-yellow);
  text-shadow: 0 0 5px var(--neon-yellow);
  font-family: 'Press Start 2P', cursive;
  font-size: 0.9rem;
  margin: 5px 0;
  font-weight: bold;
}

.price-new {
  color: var(--neon-yellow);
  text-shadow: 0 0 5px var(--neon-yellow);
}

.price-old {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: line-through;
  font-size: 0.8rem;
  text-shadow: none;
}

.add-to-cart {
  background-color: var(--neon-pink);
  color: #000;
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  padding: 8px 10px;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 10px var(--neon-pink);
  transition: all 0.3s ease;
  margin-top: 10px;
  animation: button-pulse 2s infinite;
}

@keyframes button-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px var(--neon-pink); }
}

.add-to-cart:hover {
  background-color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan);
}

/* News items */
.news-item {
  background-color: var(--card-bg);
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
  border-color: var(--neon-pink);
}

.news-thumb {
  position: relative;
  height: 150px;
  overflow: hidden;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item:hover .news-thumb img {
  transform: scale(1.05);
}

.news-category {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--neon-pink);
  color: #000;
  font-size: 0.7rem;
  padding: 3px 8px;
  font-family: 'Press Start 2P', cursive;
  box-shadow: 0 0 5px var(--neon-pink);
}

.news-content {
  padding: 15px;
}

.news-date {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  margin-bottom: 5px;
  display: block;
}

.news-title {
  margin: 8px 0;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.9rem;
}

.news-title a {
  color: var(--neon-cyan);
  text-shadow: 0 0 3px var(--neon-cyan);
  transition: all 0.3s ease;
}

.news-title a:hover {
  color: var(--neon-pink);
  text-shadow: 0 0 5px var(--neon-pink);
}

.news-excerpt {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Newsletter */
.newsletter-section {
  background-color: var(--secondary-bg);
  border-radius: 4px;
  padding: 30px;
  margin-bottom: 40px;
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
  display: flex;
  flex-direction: column;
}

.newsletter-content {
  margin-bottom: 20px;
}

.newsletter-content h2 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.newsletter-form {
  display: flex;
  max-width: 100%;
}

.newsletter-form input {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--neon-cyan);
  color: white;
  padding: 10px 15px;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  border-radius: 0;
  margin-right: 10px;
}

.newsletter-form input:focus {
  outline: none;
  box-shadow: 0 0 10px var(--neon-cyan);
}

.subscribe-btn {
  background-color: var(--neon-cyan);
  color: #000;
  border: none;
  font-family: 'Press Start 2P', cursive;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.subscribe-btn:hover {
  background-color: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
}

/* Responsive */
@media (max-width: 767px) {
  .retro-banner {
    min-height: 350px;
  }
  
  .retro-glitch-text {
    font-size: 1.5rem;
  }
  
  .retro-banner-subtitle {
    font-size: 1.2rem;
  }
  
  .retro-action-buttons {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .retro-arcade-screen {
    margin: 10px;
    padding: 15px;
  }
  
  .retro-progress-container {
    max-width: 200px;
  }
  
  .retro-neon-outline,
  .retro-ghost {
    display: none;
  }
  
  .product-grid,
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .news-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  
  .newsletter-form input {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .retro-glitch-text {
    font-size: 1.2rem;
  }
  
  .retro-banner-subtitle {
    font-size: 1rem;
  }
  
  .retro-pixelated-btn {
    font-size: 0.7rem;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .console-logo-carousel {
    height: 50px;
  }
  
  .logo-slide {
    width: 60px;
    height: 40px;
    margin: 0 10px;
  }
  
  .logo-slide img {
    max-height: 35px;
  }
}
/* ---- standalone transactional pages inside the retro theme ---- */
.narrow-page{max-width:820px}
.card-add{margin-top:8px}
.retro-add-form{margin-top:10px}
.retro-quantity{display:flex;flex-direction:column;gap:4px}
.retro-screen-effect{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);border-radius:inherit}
.lines{width:100%;border-collapse:collapse;background:var(--card-background);border:2px solid var(--card-border);border-radius:var(--border-radius-sm)}
.lines td{padding:12px 14px;border-bottom:1px solid var(--card-border);vertical-align:middle;color:#fff}
.lines tr:last-child td{border-bottom:0}
.lines .muted{display:block;color:var(--text-secondary);font-size:.85rem}
.thumbcell{width:88px}
.big{font-family:var(--font-accent);font-size:.75rem;color:var(--neon-yellow)}
.totals{display:grid;grid-template-columns:1fr auto;gap:8px 20px;margin:24px 0;color:#fff}
.totals dt{color:var(--text-secondary)}
.totals dd{margin:0;text-align:right}
.totals dt.big,.totals dd.big{border-top:2px solid var(--neon-cyan);padding-top:10px;margin-top:8px}
.form{background:var(--card-background);border:2px solid var(--card-border);padding:24px;border-radius:var(--border-radius-sm);box-shadow:var(--card-shadow)}
.form fieldset{border:0;padding:0;margin:0 0 24px}
.form legend{font-family:var(--font-accent);font-size:.7rem;color:var(--neon-cyan);text-transform:uppercase;padding:0;margin-bottom:12px}
.form label{display:block;color:var(--neon-yellow);font-size:.9rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.form input,.form select,.form textarea{width:100%;padding:11px 12px;background:rgba(0,0,0,.4);border:2px solid var(--card-border);color:#fff;font-family:var(--font-main);font-size:1rem;border-radius:6px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--neon-cyan);box-shadow:0 0 10px rgba(0,252,255,.5);outline:none}
.form select option{background:var(--primary-color)}
.form p{margin:0 0 16px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radio{display:flex;align-items:center;gap:10px;border:2px solid var(--card-border);padding:12px;margin-bottom:8px;background:rgba(0,0,0,.25);border-radius:6px;color:#fff}
.radio input{width:auto}
.radio strong{margin-left:auto;color:var(--neon-yellow)}
.discount{display:flex;gap:8px;align-items:end;margin-top:20px;flex-wrap:wrap}
.discount label{display:block;color:var(--neon-yellow);font-size:.9rem}
.discount input{padding:10px 12px;background:rgba(0,0,0,.4);border:2px solid var(--card-border);color:#fff;border-radius:6px}
.qtycell input{width:70px;padding:8px;background:rgba(0,0,0,.4);border:2px solid var(--card-border);color:#fff;border-radius:6px}
.narrow-page h1{font-family:var(--font-accent);font-size:1.1rem;color:var(--neon-cyan);margin-bottom:18px}
.narrow-page h2{font-family:var(--font-accent);font-size:.85rem;color:var(--neon-cyan);margin:24px 0 12px}
.btn{display:inline-block;background:var(--neon-pink);color:#000;border:0;font-family:var(--font-accent);font-size:.65rem;
  text-transform:uppercase;letter-spacing:1px;padding:13px 20px;cursor:pointer;box-shadow:0 0 12px var(--neon-pink);text-decoration:none}
.btn:hover{background:var(--neon-cyan);color:#000;box-shadow:0 0 18px var(--neon-cyan)}
.btn.ghost{background:transparent;color:var(--neon-cyan);border:2px solid var(--neon-cyan);box-shadow:0 0 10px rgba(0,252,255,.4)}
.btn.wide{width:100%}
.prose{color:var(--text-secondary);line-height:1.7}
.prose a{color:var(--neon-cyan)}

/* ---- game market ---- */
.market-promo{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:24px;align-items:center;
  background:var(--card-background);border:3px solid var(--neon-pink);border-radius:var(--border-radius);
  box-shadow:0 0 24px rgba(255,0,255,.35);overflow:hidden;padding:0}
.market-promo-img{align-self:stretch}
.market-promo-img img{width:100%;height:100%;object-fit:cover;min-height:220px}
.market-promo-body{padding:26px 26px 26px 0}
.market-tag,.market-tab{display:inline-block;font-family:var(--font-accent);font-size:.55rem;text-transform:uppercase;
  background:var(--neon-pink);color:#000;padding:5px 10px;box-shadow:0 0 10px var(--neon-pink);margin-bottom:12px}
.market-promo-body h2{font-family:var(--font-accent);font-size:clamp(.9rem,2.4vw,1.3rem);margin:0 0 10px}
.market-tagline{color:var(--text-secondary);font-size:1.1rem;margin:0 0 14px}
.market-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--text-secondary);margin:0 0 16px}
.market-meta i{color:var(--neon-cyan);margin-right:6px}
.market-cta{display:flex;gap:12px;flex-wrap:wrap}
.market-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.market-card{background:var(--card-background);border:2px solid var(--neon-cyan);border-radius:var(--border-radius);overflow:hidden;display:block;color:inherit;transition:all .3s ease}
.market-card:hover{border-color:var(--neon-pink);box-shadow:0 0 20px rgba(255,0,255,.4);transform:translateY(-4px);text-shadow:none}
.market-card-img{aspect-ratio:16/10;background:rgba(0,0,0,.35)}
.market-card-img img{width:100%;height:100%;object-fit:cover}
.market-card-body{padding:14px 16px 18px}
.market-card-body h3{font-family:var(--font-accent);font-size:.72rem;margin:0 0 10px}
.market-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start;margin-top:10px}
.market-hero img{width:100%;border:2px solid var(--neon-cyan);border-radius:var(--border-radius);box-shadow:0 0 18px rgba(0,255,255,.3)}
.market-info h1{font-family:var(--font-accent);font-size:clamp(1rem,3vw,1.5rem)}
.market-facts{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.market-facts li{border-left:3px solid var(--neon-yellow);padding-left:12px;color:var(--text-secondary)}
.market-facts i{color:var(--neon-cyan);margin-right:8px}
.market-desc{max-width:75ch;margin:28px 0;color:var(--text-secondary);line-height:1.7}
.market-book{margin-top:20px}
.market-tabs{display:flex;gap:10px;margin-bottom:18px}
.mt-tab{text-decoration:none;background:transparent;color:var(--neon-cyan);border:2px solid var(--neon-cyan);
  font-family:var(--font-accent);font-size:.6rem;text-transform:uppercase;padding:10px 16px}
.mt-tab.on,.mt-tab:hover{background:var(--neon-cyan);color:#000;text-shadow:none}
.market-form{margin-bottom:20px}
.market-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.market-price{font-family:var(--font-accent);font-size:.8rem;color:var(--neon-yellow);text-shadow:var(--neon-yellow-glow);display:flex;align-items:center;gap:14px;margin-bottom:16px}
.market-left{font-family:var(--font-main);font-size:.85rem;color:var(--neon-green);text-shadow:none}
.market-soldout{color:var(--text-secondary)}
.market-ref{margin:24px auto;max-width:360px;border:2px dashed var(--neon-cyan);border-radius:var(--border-radius);padding:20px}
.market-ref span{display:block;color:var(--text-secondary);font-size:.85rem;text-transform:uppercase}
.market-ref strong{display:block;font-family:var(--font-accent);font-size:1.4rem;color:var(--neon-cyan);text-shadow:var(--neon-cyan-glow);margin:8px 0}
.market-ref small{color:var(--text-secondary)}
@media(max-width:820px){.market-promo,.market-detail{grid-template-columns:1fr}.market-promo-body{padding:22px}.market-form .two{grid-template-columns:1fr}}

/* market: choose buttons, locked state, QR pass */
.market-choose{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.retro-locked{opacity:.55;cursor:not-allowed;border-style:dashed!important}
.pass{background:var(--card-background);border:3px solid var(--neon-cyan);border-radius:var(--border-radius);
  box-shadow:0 0 26px rgba(0,255,255,.35);padding:26px;text-align:center;max-width:440px;margin:10px auto}
.pass-head h1{font-family:var(--font-accent);font-size:1rem;color:var(--neon-cyan);margin:10px 0 6px}
.pass-qr{background:#fff;display:inline-block;padding:14px;border-radius:10px;margin:16px auto}
.pass-qr img,.pass-qr canvas{display:block}
.pass-ref{margin-top:8px}
.pass-ref span{display:block;color:var(--text-secondary)}
.pass-ref strong{display:block;font-family:var(--font-accent);font-size:1.5rem;color:var(--neon-yellow);text-shadow:var(--neon-yellow-glow);margin:8px 0;letter-spacing:2px}

/* brand logo image */
.site-logo img{height:52px;width:auto;display:block;filter:drop-shadow(0 0 8px rgba(0,255,255,.25))}
.foot-logo img{height:64px;width:auto;display:block;margin-bottom:6px}
@media(max-width:820px){.site-logo img{height:42px}}


/* ---- category page: sidebar tree + products ---- */
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.cat-aside{background:var(--card-background);border:2px solid var(--card-border);border-radius:var(--border-radius);
  padding:14px 12px;position:sticky;top:14px}
.cat-aside-head{font-family:var(--font-accent);font-size:.6rem;text-transform:uppercase;color:var(--neon-cyan);
  text-shadow:0 0 6px var(--neon-cyan);padding:4px 8px 12px;border-bottom:1px solid var(--card-border);margin-bottom:8px}
.cat-side{list-style:none;margin:0;padding:0}
.cat-side li{margin:1px 0}
.cat-side a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;color:var(--text-light);
  text-decoration:none;font-size:.98rem;line-height:1.3}
.cat-side a:hover{background:rgba(0,255,255,.1);color:#fff;text-shadow:none}
.cat-side a.on{background:var(--neon-pink);color:#000;box-shadow:0 0 10px rgba(255,0,255,.4)}
.cat-side a.on:hover{background:var(--neon-pink);color:#000}
.cat-side > li > a{font-family:var(--font-accent);font-size:.6rem;text-transform:uppercase}
.cat-side img{width:24px;height:24px;min-width:24px;max-width:24px;object-fit:contain;border-radius:50%;background:rgba(0,0,0,.3);flex:none}
.cat-side-sub{list-style:none;margin:2px 0 6px;padding-left:14px;border-left:1px dashed rgba(0,255,255,.25)}
.cat-side-sub a{font-size:.92rem;padding:6px 10px}
.cat-side-sub .cat-side-sub{padding-left:12px}
.cat-main .filters{margin-bottom:20px}
@media(max-width:820px){
  .cat-layout{grid-template-columns:1fr}
  .cat-aside{position:static;margin-bottom:20px}
  .cat-side{display:flex;flex-wrap:wrap;gap:6px}
  .cat-side-sub{width:100%;border-left:0;padding-left:0}
}

/* subcategory tiles on the category main page */
.subcat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:0 0 26px}
.subcat-tile{background:var(--card-background);border:2px solid var(--card-border);border-radius:var(--border-radius);
  overflow:hidden;text-decoration:none;color:#fff;display:flex;flex-direction:column;transition:all .25s ease}
.subcat-tile:hover{border-color:var(--neon-pink);box-shadow:0 0 18px rgba(255,0,255,.35);transform:translateY(-4px);color:#fff;text-shadow:none}
.subcat-tile-img{aspect-ratio:1;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:14px}
.subcat-tile-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.subcat-tile-name{padding:10px 12px 14px;text-align:center;font-family:var(--font-accent);font-size:.6rem;
  text-transform:uppercase;border-top:2px solid var(--neon-cyan)}
@media(max-width:820px){.subcat-tiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}

.subcat-heading{font-family:var(--font-accent);font-size:.7rem;text-transform:uppercase;color:var(--neon-yellow);
  text-shadow:0 0 6px rgba(255,255,0,.4);margin:6px 0 14px}

/* ---- storefront mobile polish (added sections) ---- */
@media (max-width: 820px){
  .head-bar{gap:10px;row-gap:10px}
  .brand{font-size:.85rem}
  .site-logo img{height:38px}
  .head-links{gap:12px;font-size:.5rem}
  .cat-scroll{gap:14px}
  /* cart + order tables: let long rows breathe */
  .lines{display:block;overflow-x:auto}
  .form .two{grid-template-columns:1fr}
  .totals{grid-template-columns:1fr auto}
  .addform{flex-wrap:wrap}
}
@media (max-width: 560px){
  .site-head .head-bar{flex-wrap:wrap}
  .brand{order:1}
  .head-links{order:2;margin-left:auto}
  .search{order:3;flex-basis:100%}
  .product{gap:18px}
  .price{font-size:1.3rem}
  .grid,.product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .subcat-tiles{grid-template-columns:1fr 1fr}
  .market-cta,.market-choose{flex-direction:column}
  .market-cta a,.market-choose a{width:100%;text-align:center}
  .pass-qr{padding:10px}
  .btn.wide{width:100%}
}
/* the retro cart button can be wide on small screens — keep it compact */
@media (max-width: 480px){
  .retro-cart-button .insert-coin{display:none}
  .grid,.product-grid{grid-template-columns:1fr 1fr}
}

/* product gallery scroller */
.retro-product-image-main{position:relative}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border:0;
  background:rgba(12,0,41,.7);color:var(--neon-cyan);border:2px solid var(--neon-cyan);border-radius:50%;
  cursor:pointer;font-size:1rem;display:grid;place-items:center;transition:all .2s;box-shadow:0 0 12px rgba(0,255,255,.3)}
.gal-arrow:hover{background:var(--neon-pink);color:#000;border-color:var(--neon-pink);box-shadow:0 0 14px var(--neon-pink)}
.gal-prev{left:10px}.gal-next{right:10px}
.gal-count{position:absolute;bottom:10px;right:12px;z-index:5;background:rgba(12,0,41,.8);color:#fff;
  border:1px solid var(--neon-cyan);border-radius:20px;padding:3px 12px;font-family:var(--font-main);font-size:.95rem}
.retro-image-scroller{display:flex;gap:8px;overflow-x:auto;padding:10px 2px;scrollbar-width:thin;scroll-snap-type:x mandatory}
.retro-thumbnail-item{scroll-snap-align:center;flex:0 0 auto;cursor:pointer}
.retro-thumbnail-frame{width:70px;height:70px;border:2px solid var(--card-border);border-radius:6px;overflow:hidden;background:rgba(0,0,0,.3)}
.retro-thumbnail-item.active .retro-thumbnail-frame{border-color:var(--neon-pink);box-shadow:0 0 10px rgba(255,0,255,.4)}
.retro-thumbnail-frame img{width:100%;height:100%;object-fit:contain}
@media(max-width:560px){.gal-arrow{width:38px;height:38px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* homepage SEO intro */
.seo-intro{background:var(--card-background);border:1px solid var(--card-border);border-radius:var(--border-radius);padding:26px 28px;max-width:none}
.seo-intro h2{font-family:var(--font-accent);font-size:.85rem;text-transform:uppercase;margin-bottom:14px}
.seo-intro p{color:var(--text-secondary);line-height:1.8;margin-bottom:12px;max-width:80ch}
.seo-intro a{color:var(--neon-cyan)}
.seo-intro a:hover{color:var(--neon-pink)}