/* veikia */

body {
  border: 5px solid red !important;

.article-title {
  color: #353047; /* Change to any color you prefer */
  font-weight: bold;
}
  

.top-bar-image {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-image: url("/images/JC Uploads/Header Photo 3.png");
  background-size: cover;
  background-position: center;
  height: 170px; /* adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
}
  
.header-container
.header-menu ul {
                /* Make the menu vertical and centered */
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }
  


<div class="row header-bar-inner" data-bar-position="top" data-options="sticky_on: [medium, large]; is_hover: true; scrolltop: true;" data-topbar>
    <section class="top-bar-section">
                                    <div class="module-container shortcuts align-left">
                    <div class="module moduleShortcuts">
                    <a href="/c-3090021/home/" class="header_link"
                                >Home</a>
         <span class="header_link">|</span>                    <a href="/c-4950696/physical-store/" class="header_link"
                                >Winkel / Store</a>
         <span class="header_link">|</span>                    <a href="/c-3096260/faq/" class="header_link"
                                >FAQ</a>
         <span class="header_link">|</span>                    <a href="/c-3090023/contact/" class="header_link"
                                >Contact</a>
         <span class="header_link">|</span>                    <a href="/c-3090022/sell-trade-in/" class="header_link"
                                >Sell / Trade In</a>
            </div>

                </div>
                                                <div class="module-container cart align-right">
                    
<div class="header-cart module moduleCartCompact" data-ajax-cart-replace="true" data-productcount="0">
            <a href="/cart/?category_id=4612008" class="foldout-cart">
                <div   
    aria-hidden role="img"
    class="icon icon--sf-shopping-cart
        "
            title="Shopping Cart"
    >
    <svg><use xlink:href="#sf-shopping-cart"></use></svg>
    </div>
            <span class="count">0</span>
        </a>
        <div class="hidden-cart-details">
            <div class="invisible-hover-area">
                <div data-mobile-cart-replace="true" class="cart-details">
                                            <div class="cart-summary">
                            Your shopping cart is empty!
                        </div>
                                    </div>

                            </div>
        </div>
    </div>

                </div>
                        </section>
</div>

                                    </div>


<script>
  document.getElementById('menu-toggle').addEventListener('click', function () {
    document.getElementById('main-menu').classList.toggle('active');
  });
</script>


<button id="menu-toggle">☰ Menu</button>

<nav id="main-menu" class="offcanvas-menu">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Login</a></li>
    <!-- Add more items -->
  </ul>
</nav>



/* Off-canvas menu hidden by default */
.offcanvas-menu {
  position: fixed;
  top: 0;
  left: -250px; /* Hide off-screen */
  width: 250px;
  height: 100%;
  background-color: #111;
  overflow-y: auto;
  transition: left 0.3s ease;
  z-index: 1000;
  padding: 1em;
}

/* When active, slide in */
.offcanvas-menu.active {
  left: 0;
}

/* Style menu items */
.offcanvas-menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.offcanvas-menu .menu li {
  margin-bottom: 1em;
}

.offcanvas-menu .menu a {
  color: white;
  text-decoration: none;
  font-size: 1.2em;
}



.container-footer.footer {
  padding: 1px 1px;
  min-height: 1px;
}



#main-menu {
  width: 200px; /* or any desired size */
}




/* Style top-level menu items */
ul.mod-menu > li {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  color: #00ffcc;
}

/* Style dropdown container */
ul.mod-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #111;
  padding: 10px;
  z-index: 1000;
}

/* Show dropdown on hover */
ul.mod-menu li:hover > ul {
  display: block;
}

/* Style dropdown items */
ul.mod-menu li ul li {
  font-size: 14px;
  color: #ffffff;
  padding: 5px 10px;
  white-space: nowrap;
}

ul.mod-menu li ul li:hover {
  background-color: #333;
  color: #00ffcc;
}

/* Main menu font customization */
ul.mod-menu {
  font-family: 'Press Start 2P', cursive; /* Retro gaming font */
  font-size: 12px;
  font-weight: bold;
  color: #1E90FF; /* Tomato */
  text-transform: uppercase;
  letter-spacing: 1px;
}



#main-menu {
  width: 100px; /* or any desired size */
}




/* Style top-level menu items */
ul.mod-menu > li {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  color: #00ffcc;
}

/* Style dropdown container */
ul.mod-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #111;
  padding: 10px;
  z-index: 1000;
}

/* Show dropdown on hover */
ul.mod-menu li:hover > ul {
  display: block;
}

/* Style dropdown items */
ul.mod-menu li ul li {
  font-size: 14px;
  color: #ffffff;
  padding: 5px 10px;
  white-space: nowrap;
}

ul.mod-menu li ul li:hover {
  background-color: #333;
  color: #00ffcc;
}

/* Main menu font customization */
ul.mod-menu {
  font-family: 'Press Start 2P', cursive; /* Retro gaming font */
  font-size: 12px;
  font-weight: bold;
  color: #1E90FF; /* Tomato */
  text-transform: uppercase;
  letter-spacing: 1px;
}
    
.topbar-user {
  display: flex;
  align-items: center;     /* vertical centering of icon + text */
  margin-left: auto;       /* pushes this block to the right */
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--cassiopeia-color-primary, #112855);
  color: #fff;
  font-size: 1rem;
}

.topbar-container {
  display: flex;
  align-items: center;     /* keep top-bar items vertically aligned */
  padding: 0.5rem 1rem;
  background-color: var(--cassiopeia-color-primary, #112855);
}
    

.profile-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .topbar-user {
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.9rem;
  }

  .profile-icon {
    width: 24px;
    height: 24px;
  }
}


    

.footer {
  background-color: #333333; /* Replace with your desired color */
  color: #ffffff; /* Optional: change text color for contrast */
}
.footer {
  padding: 40px 20px; /* Top/bottom and left/right padding */
  min-height: 100px;  /* Minimum height */
}


.home-button:hover {
  background-color: #005fa3;
}




.top-bar-buttons {
  display: flex;
  gap: 15px;
}

.top-bar-btn {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.top-bar-btn:hover {
  background-color: #ff6600;
}

/* Style Jackie Chan menu item */
.item-jackiechan a {
  background-image: url('/images/Design Elements/Jackie Chan Logo mini.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 40px;
  color: #fff;
  font-weight: bold;
}

.topbar-container {
  display: flex;
  align-items: center;   /* vertical-center the items */
  padding: 5rem 10rem;   /* whatever spacing you already have */
  background-color: var (--cassiopeia-color-primary);
}