/* =========================
   XBYTE Design System (Catalog)
   - White background
   - Black primary buttons (white text)
   - Gold/black accent
   - Square corners everywhere
   - No animations/transitions
   ========================= */

:root {
  --xbyte-gold: #d4af37;
  --xbyte-gold-dark: #c49c2f;
  --xbyte-black: #111111;
  --xbyte-black-true: #000000;
  --xbyte-white: #ffffff;
  --xbyte-gray-50: #f9fafb;
  --xbyte-gray-100: #f3f4f6;
  --xbyte-gray-200: #e5e7eb;
  --xbyte-gray-300: #d1d5db;
  --xbyte-gray-500: #6b7280;
  --xbyte-text: var(--xbyte-black);
  --xbyte-border: var(--xbyte-gray-300);
  --xbyte-focus: var(--xbyte-gold);
}

html, body {
  background: var(--xbyte-white) !important;
  color: var(--xbyte-text);
}

/* Header should sit above the category bar + any dropdowns should overlay everything */
header {
  position: relative;
  z-index: 4000;
  background: var(--xbyte-white);
}

/* Better vertical alignment in header row */
header .row { align-items: center; }

/* Cart dropdown must overlay the category bar (#menu) */
#cart { position: relative; z-index: 4500; }
#cart .dropdown-menu { z-index: 5000 !important; }

/* Header account dropdown (Register/Login) */
.header-account { position: relative; z-index: 4500; }
.header-account .dropdown-menu {
  z-index: 5000 !important;
  min-width: 220px;
  padding: .35rem 0;
  background: var(--xbyte-white) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
.header-account .dropdown-item {
  padding: .65rem .9rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--xbyte-black) !important;
  background: transparent !important;
  text-decoration: none !important;
}
.header-account .dropdown-item:hover,
.header-account .dropdown-item:focus {
  background: var(--xbyte-gray-100) !important;
  color: var(--xbyte-black) !important;
}
.header-account .dropdown-item.active,
.header-account .dropdown-item:active {
  background: var(--xbyte-gray-100) !important;
  color: var(--xbyte-black) !important;
}

/* Mini cart (header dropdown) */
.xbyte-mini-cart {
  width: 380px;
  max-width: calc(100vw - 1rem);
  padding: 0 !important;
  background: var(--xbyte-white) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}
.xbyte-mini-cart__body { padding: .5rem .75rem; }
.xbyte-mini-cart__footer {
  padding: .75rem;
  border-top: 1px solid rgba(0,0,0,.10);
  background: var(--xbyte-gray-50);
}
.xbyte-mini-cart__empty {
  padding: 1.25rem .9rem;
  text-align: center;
}
.xbyte-mini-cart__empty-title { font-weight: 700; color: var(--xbyte-black); }

.xbyte-mini-cart__item {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: .6rem .75rem;
  align-items: start;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.xbyte-mini-cart__item:last-child { border-bottom: 0; }

.xbyte-mini-cart__thumb { display: block; }
.xbyte-mini-cart__thumb .img-thumbnail {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: var(--xbyte-white) !important;
}

.xbyte-mini-cart__name {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  color: var(--xbyte-black) !important;
}
.xbyte-mini-cart__sub {
  margin-top: .25rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .8rem;
  line-height: 1.25;
  color: var(--xbyte-black);
  opacity: .75;
}
.xbyte-mini-cart__qty { text-align: right; white-space: nowrap; }
.xbyte-mini-cart__qtyline { font-size: .85rem; opacity: .8; }
.xbyte-mini-cart__total { font-weight: 800; font-size: .95rem; }

.xbyte-mini-cart__remove .btn {
  border-color: rgba(0,0,0,.14) !important;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xbyte-mini-cart__totals { display: grid; gap: .35rem; }
.xbyte-mini-cart__totalrow {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
}
.xbyte-mini-cart__totaltitle { font-weight: 700; }
.xbyte-mini-cart__note { margin-top: .5rem; font-size: .8rem; opacity: .75; text-align: right; }

.xbyte-mini-cart__actions {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

/* Layout: remove OpenCart "absolute footer" hack and use a clean sticky footer */
#container {
  position: static !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}
#container > main {
  flex: 1 0 auto;
  padding-bottom: 3rem; /* breathing room before footer on long pages */
}

/* Remove the huge bottom padding used to make room for absolute footer */
#content, #column-left, #column-right { padding-bottom: 0 !important; }

/* Disable ALL animations/transitions site-wide (traditional look) */
*, *::before, *::after {
  animation: none !important;
  transition: none !important;
}
html:focus-within { scroll-behavior: auto !important; }

/* Square corners + no heavy shadows everywhere */
.btn,
.form-control,
.form-select,
.input-group-text,
.card,
.dropdown-menu,
.modal-content,
.alert,
.badge,
.img-thumbnail,
.list-group-item,
.nav-tabs .nav-link,
.pagination .page-link,
.table,
ul.breadcrumb,
hr {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Links: no underline anywhere (clean, professional) */
a { color: var(--xbyte-gold-dark); text-decoration: none; }
a:hover, a:focus { color: var(--xbyte-gold-dark); text-decoration: none !important; }
a:focus-visible { outline: 2px solid var(--xbyte-black); outline-offset: 2px; }

/* Footer (professional, black/gold, square corners) */
.xbyte-footer {
  position: static !important;
  width: 100%;
  margin-top: auto; /* keep footer at bottom even on short pages */
  background: var(--xbyte-black) !important;
  color: #e5e7eb;
  border-top: 3px solid var(--xbyte-gold);
  padding: 2rem 0 1.5rem;
}
.xbyte-footer__cols { row-gap: 1.25rem; }
.xbyte-footer h5 {
  margin: 0 0 .75rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--xbyte-white);
}
.xbyte-footer ul { margin: 0; padding: 0; }
.xbyte-footer li { margin: .35rem 0; }
.xbyte-footer a {
  color: #d1d5db;
  text-decoration: none;
}
.xbyte-footer a:hover,
.xbyte-footer a:focus {
  color: var(--xbyte-white);
  text-decoration: none !important;
}
.xbyte-footer__bottom {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.xbyte-footer__powered {
  margin: 0;
  color: #9ca3af;
  font-size: .9rem;
}

/* Category page intro (image + description) */
#product-category h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--xbyte-black);
}

#product-category .xbyte-category-intro {
  margin-top: .25rem;
  margin-bottom: .5rem;
}

#product-category .xbyte-category-image .img-thumbnail {
  border: 1px solid rgba(0,0,0,.18) !important;
  background: var(--xbyte-white) !important;
}

#product-category .xbyte-category-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--xbyte-black);
  max-width: 70ch; /* nicer reading width */
}

#product-category .xbyte-category-description p {
  margin-bottom: .75rem;
}

#product-category hr {
  border-top: 1px solid rgba(0,0,0,.14);
  opacity: 1;
}

/* Category refine (Suche verfeinern) */
.xbyte-refine { margin: 1.25rem 0 1rem; }
.xbyte-refine__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: var(--xbyte-black);
}

.xbyte-refine-card {
  border: 1px solid rgba(0,0,0,.14);
  background: var(--xbyte-white);
  padding: 1rem;
  height: 100%;
}

.xbyte-refine-card__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--xbyte-black);
  margin-bottom: .5rem;
}

.xbyte-refine-card__children {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
}

.xbyte-refine-card__child {
  font-size: .95rem;
  color: var(--xbyte-black);
  opacity: .9;
}

.xbyte-refine-card:hover { background: var(--xbyte-gray-100); }
.xbyte-refine-card:hover .xbyte-refine-card__title,
.xbyte-refine-card:hover .xbyte-refine-card__child { color: var(--xbyte-black); opacity: 1; }

/* Alerts (replace Bootstrap blue/green/red fills with clean brand-friendly notices) */
.alert {
  background: var(--xbyte-white) !important;
  color: var(--xbyte-text) !important;
  border: 1px solid var(--xbyte-border) !important;
}
.alert-info {
  background: rgba(212, 175, 55, 0.12) !important; /* subtle gold tint */
  border-color: var(--xbyte-gold) !important;
}
.alert-info i { color: var(--xbyte-black) !important; }
.alert-info a {
  color: var(--xbyte-gold-dark) !important;
  font-weight: 700;
  text-decoration: none;
}
.alert-info a:hover, .alert-info a:focus { color: var(--xbyte-gold-dark) !important; text-decoration: none !important; }

/* Smaller notice inside product cards (category grid) */
.product-thumb .alert,
.product-layout .alert {
  padding: .5rem .75rem !important;
  font-size: .9rem;
  line-height: 1.35;
}

/* Product cards (category grid/list) */
.product-thumb {
  border: 1px solid rgba(0,0,0,.14);
  background: var(--xbyte-white);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-thumb .image {
  padding: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: var(--xbyte-white);
}

.product-thumb .image a {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--xbyte-white);
}

.product-thumb .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-thumb .content {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
}

/* Override OpenCart default absolute/button layout for product cards */
.product-thumb .description {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.product-thumb .image a:hover { opacity: 1 !important; }

.product-thumb .description h4 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 700;
}

.product-thumb .description h4 a {
  color: var(--xbyte-black) !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-thumb .description p {
  margin: 0 0 .5rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--xbyte-black);
  opacity: .9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-thumb .price {
  font-size: 1.05rem;
  color: var(--xbyte-black);
}
.product-thumb .price .price-new { font-weight: 800; }
.product-thumb .price .price-old { opacity: .7; margin-left: .35rem; }
.product-thumb .price .price-tax { display:block; font-size: .85rem; opacity: .75; margin-top: .15rem; }

/* Card actions */
.product-thumb form { margin-top: auto; }
.product-thumb .button {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0,0,0,.10);
  position: static !important;
  width: auto !important;
  bottom: auto !important;
}
.product-thumb .button button {
  background: var(--xbyte-white);
  border: 0;
  border-right: 1px solid rgba(0,0,0,.10);
  padding: .85rem 0;
  color: var(--xbyte-black);
  font-size: 1rem;
  line-height: 1;
  width: auto !important;
}
.product-thumb .button button:last-child { border-right: 0; }
.product-thumb .button button:hover,
.product-thumb .button button:focus {
  background: var(--xbyte-gray-100);
}
.product-thumb .button button:focus-visible {
  outline: 2px solid var(--xbyte-black);
  outline-offset: -2px;
}

/* Product list view overrides (OpenCart adds borders/margins to .button) */
.product-list .product-thumb .button {
  border-left: 0 !important;
  margin-left: 0 !important;
  width: auto !important;
}

/* Account sidebar menu (appears on many account pages) */
.xbyte-account-menu {
  border: 1px solid rgba(0,0,0,.14);
  background: var(--xbyte-white);
}
.xbyte-account-menu .list-group-item {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--xbyte-black) !important;
  background: transparent !important;
  text-decoration: none !important;
}
.xbyte-account-menu .list-group-item:last-child { border-bottom: 0; }
.xbyte-account-menu .list-group-item:hover,
.xbyte-account-menu .list-group-item:focus {
  background: var(--xbyte-gray-100) !important;
  color: var(--xbyte-black) !important;
}

/* Active indicator (if OpenCart marks current link as active) */
.xbyte-account-menu .list-group-item.active {
  background: var(--xbyte-gray-100) !important;
  font-weight: 800;
  box-shadow: inset 4px 0 0 var(--xbyte-black) !important;
}

.header-cart-minimal .cart-icon-wrap { position: relative; display: inline-block; line-height: 1; }
.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* Make the whole icon cluster larger + add separators between items */
.header-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 14px;
}
/* separators handled via ::before to avoid disappearing on hover/active */
.header-actions > * + * { border-left: 0 !important; }
.header-actions i { vertical-align: middle; line-height: 1; display: inline-block; }
.header-actions i { transition: none; }
.header-actions .header-cart-minimal { display:inline-flex; align-items:center; height: 46px; }
.header-wishlist .wishlist-icon-wrap { position: relative; display:inline-block; }
.header-wishlist .wishlist-badge { position:absolute; top:-7px; left:10px; background:#fff; border:2px solid #e5e7eb; border-radius:0; width:18px; height:18px; font-size:.7rem; display:flex; align-items:center; justify-content:center; pointer-events:none; }
/* Language inline with icons (let the wrapper handle padding/separators) */
.header-language { display:inline-flex; align-items:center; height:46px; position: relative; top: 0; padding-left: 0; border-left: 0 !important; }
.header-language .dropdown-toggle, .header-language form { margin: 0; }
.header-language .dropdown-toggle i.fa-caret-down { color:#111111; transition: none; margin-left: 4px; }
.header-language .dropdown-toggle:hover i.fa-caret-down,
.header-language .dropdown-toggle:focus i.fa-caret-down { color: var(--xbyte-gold) !important; }
.header-actions .header-account-toggle i,
.header-actions .header-wishlist i,
.header-actions .header-cart-minimal i { font-size: 1.55rem; line-height: 1; }
.header-actions .header-account-toggle,
.header-actions .header-wishlist,
.header-actions .header-cart-minimal .cart-minimal-toggle { padding: 0; }

/* Header icons cluster (final pass): consistent sizing, spacing, separators */
header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Normalize action wrappers (account / wishlist / cart / language) */
header .header-actions > * { padding: 0 !important; height: auto !important; border: 0 !important; }

header .header-actions .xbyte-action {
  position: relative;
  display: flex !important;
  align-items: center !important;
  height: 46px !important;
  padding: 0 14px !important;
  box-sizing: border-box;
}

/* Separators (DOM element) — avoids all stacking/box-shadow/rounding edge-cases */
header .header-actions .xbyte-action + .xbyte-action { box-shadow: none !important; }
header .header-actions .xbyte-action-sep {
  width: 1px;
  height: 26px;
  background: rgba(0,0,0,.18);
  align-self: center;
  flex: 0 0 1px;
}

/* Normalize all header action buttons/links (prevents one button looking different) */
header .header-actions .btn,
header .header-actions a,
header .header-actions button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
header .header-actions .btn:active,
header .header-actions .btn.active,
header .header-actions a:active,
header .header-actions button:active {
  background: transparent !important;
}

/* Square, consistent hit targets */
header .header-actions .header-account-toggle,
header .header-actions .header-wishlist {
  width: 46px;
  height: 46px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Cart toggle: align icon + total nicely */
header .header-actions .header-cart-minimal .cart-minimal-toggle {
  height: 46px;
  padding: 0 !important;
  align-items: center !important;
}
header .header-actions .header-cart-minimal .cart-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header .header-actions .header-cart-minimal .cart-minimal-total {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  margin-left: .55rem;
  display: inline-flex;
  align-items: center;
}

/* Language block spacing (remove bootstrap ms-2 extra gap) */
header .header-language.ms-2 { margin-left: 0 !important; }
.header-actions .header-cart-minimal .cart-badge { top: -3px; left: 10px; }
/* XBYTE theme overrides - compiled CSS */

/* Global font stack from reference site */
body, html, .btn, .form-control, .nav, .navbar, .dropdown-menu, .table, .breadcrumb, .modal, .card, .list-group, .alert {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* Make all price texts bold */
.price-block .price-new,
.price-block .price-old,
.price-block .price-tax,
.price,
.product-thumb .price,
.product-layout .price,
.list-group .price,
td.text-end .price,
td.text-end,
td.text-right .price { font-weight: 700; }

/* Header mini-cart total */
.header-cart-minimal .cart-minimal-total { font-weight: 700 !important; }

/* Unify ALL buttons (Primary = black/white) */
.btn { font-weight: 600; border-width: 1px; }

.btn-primary, .btn-info, .btn-success {
  background: var(--xbyte-black) !important;
  border-color: var(--xbyte-black) !important;
  color: var(--xbyte-white) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus,
.btn-success:hover, .btn-success:focus {
  background: var(--xbyte-black-true) !important;
  border-color: var(--xbyte-black-true) !important;
  color: var(--xbyte-white) !important;
}

/* Secondary = white with black border (traditional) */
.btn-secondary, .btn-light, .btn-default {
  background: var(--xbyte-white) !important;
  border-color: var(--xbyte-black) !important;
  color: var(--xbyte-black) !important;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-default:hover, .btn-default:focus {
  background: var(--xbyte-gray-100) !important;
  border-color: var(--xbyte-black) !important;
  color: var(--xbyte-black) !important;
}

/* Brand color for link-style buttons and primary links */
.btn-link, .link-primary, a.link-primary { color: var(--xbyte-gold) !important; }
.btn-link:hover, .link-primary:hover, a.link-primary:hover { color: #c49c2f !important; text-decoration: none !important; }
/* Optional: any text-primary utility should reflect brand gold */
.text-primary { color: var(--xbyte-gold) !important; }

/* Register page: make "Anmeldeseite" link gold */
#account-register a[href*="account/login"],
#account-register a[href*="route=account/login"] { color: var(--xbyte-gold) !important; }
#account-register a[href*="account/login"]:hover,
#account-register a[href*="route=account/login"]:hover { color: #c49c2f !important; text-decoration: underline; }
/* Register page: make privacy link gold (Datenschutzbestimmungen) */
#account-register a[href*="information"],
#account-register a[href*="privacy"],
#account-register a[href*="gdpr"],
#account-register a[href*="route=information"] {
  color: var(--xbyte-gold) !important;
}
#account-register a[href*="information"]:hover,
#account-register a[href*="privacy"]:hover,
#account-register a[href*="gdpr"]:hover,
#account-register a[href*="route=information"]:hover {
  color: #c49c2f !important; text-decoration: underline;
}
/* Ensure login link inside intro paragraph is gold */
#account-register p a[href*="login"],
#account-register p a[href*="account/login"],
#account-register p a[href*="route=account/login"] {
  color: var(--xbyte-gold) !important;
}
#account-register p a[href*="login"]:hover,
#account-register p a[href*="account/login"]:hover,
#account-register p a[href*="route=account/login"]:hover {
  color: #c49c2f !important; text-decoration: underline;
}

/* Cart button in header → gold brand color */
#cart .btn,
#cart .btn.btn-dark {
  background: transparent !important;
  border: none !important;
  color: #111111 !important;
}

#cart .btn:hover,
#cart .btn.btn-dark:hover {
  background: transparent !important;
  border: none !important;
  color: #000000 !important;
}

/* Full-width navbar (gold background for category bar, improved visibility) */
#menu {
  --xbyte-navbar-bg: var(--xbyte-gold);
  /* subtle hover on gold background (traditional, not "button-like") */
  --xbyte-navbar-hover: rgba(0, 0, 0, 0.06);
  --xbyte-navbar-text: #111111;
  background: transparent !important;
  border: 0;
  position: relative;
  z-index: 1500; /* below header dropdowns */
  overflow: visible; /* allow dropdown to extend outside navbar height */
  padding: .35rem 0; /* taller bar */
}

/* full-bleed background without clipping dropdowns */
#menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--xbyte-navbar-bg);
  z-index: 0;
  pointer-events: none;
}

/* keep navbar content above the full-bleed background */
#menu > * { position: relative; z-index: 1; }

/* Tighten dropdown to navbar: remove gaps/padding from container if any */
#menu .dropdown-menu { margin-top: 0 !important; padding-top: 0.25rem; }

/* neutralize default bootstrap bg so our full-width layer is visible */
#menu.navbar, #menu .navbar, #menu.bg-primary, #menu .bg-primary { background: transparent !important; }

#menu .nav-link,
#menu .dropdown-item,
#menu #category { color: var(--xbyte-navbar-text) !important; }

#menu .nav-link:hover { color: #111111 !important; background: var(--xbyte-navbar-hover) !important; }

/* Dropdown should be clean & professional (white panel) */
#menu .dropdown-menu {
  position: absolute;
  z-index: 3000 !important; /* always above other layers */
  background: var(--xbyte-gold) !important;
  border: 0 !important;
  border-top: 0 !important;
  padding: .25rem 0 !important;
  /* keep dropdown compact under the hovered category (avoid huge gold overlay) */
  min-width: 240px;
  width: 240px;
  max-width: 320px;
  left: 0;
  right: auto;
}

/* Ensure anchor for absolute-positioned dropdown */
#menu .nav-item.dropdown { position: relative; }

/* Force single-column dropdown layout */
#menu .dropdown-inner { display: block !important; }
#menu .dropdown-inner ul { width: 100% !important; min-width: 0 !important; }

/* Remove any gap between navbar and its dropdown panels */
#menu .dropdown-menu { margin-top: 0 !important; }

/* Ensure the dropdown is visually connected */
#menu .dropdown.show > .dropdown-menu { display:block; }

#menu .navbar-toggler, #menu .navbar-toggler .fa-bars { color: var(--xbyte-navbar-text) !important; }

/* keep menu text consistent */
#menu .nav-link { color: var(--xbyte-navbar-text) !important; }
#menu .nav-link:hover { color: #111111 !important; }

/* Dropdown items (subcategories) */
#menu .dropdown-menu .dropdown-item {
  color: var(--xbyte-black) !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: normal;
  padding: .55rem .9rem;
}
#menu .dropdown-menu .dropdown-item:hover,
#menu .dropdown-menu .dropdown-item:focus {
  color: var(--xbyte-black) !important;
  background: rgba(255, 255, 255, 0.18) !important; /* subtle highlight on gold */
  box-shadow: inset 3px 0 0 var(--xbyte-black) !important; /* marker */
  text-decoration: none !important;
}

#menu .dropdown-menu .dropdown-divider {
  border-color: rgba(0,0,0,.12) !important;
  opacity: 1;
}

/* Make sure dropdown overlays other content and opens on hover (desktop) */
#menu .dropdown-menu { z-index: 1030; }
@media (min-width: 992px) {
  #menu .dropdown:hover > .dropdown-menu { display: block; }
}

/* Prevent any horizontal scroll due to full-bleed layers */
html, body { max-width: 100%; overflow-x: hidden; }

/* Availability banner styles */
.availability-banner .availability-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.availability-banner .dot-green { background-color:#22c55e; }
.availability-banner .dot-red { background-color:#ef4444; }

/* Product title style similar to reference */
.product-title { font-size: 1.75rem; line-height:1.2; font-weight:700; margin: 0 0 .25rem; }

/* Submenu indentation */
#menu .dropdown-subitem > ul { padding-left: 0.75rem; margin-top: .25rem; }
#menu .dropdown-subitem > ul .dropdown-item.small { font-size: .925rem; }

/* Menu typography and touch target refinements */
#menu .nav-link.level-1 { font-size: 1rem; font-weight: 600; }
#menu .nav-link { line-height: 1.25; padding: .85rem 1rem; border-radius: 0; }
#menu .dropdown-item { line-height: 1.25; padding: .5rem .8rem; border-radius: 0; }
#menu .dropdown-item.level-2 { font-size: .95rem; font-weight: 600; }
#menu .dropdown-item.level-3 { font-size: .9rem; font-weight: 500; padding-left: 1rem; opacity: .95; }
#menu .dropdown-item.level-3::before { content: '\2013\00a0'; color: #9ca3af; }
#menu .dropdown-inner .dropdown-item { display:block; }
#menu .dropdown-inner ul { margin: 0; }
#menu .nav-link:hover { background: var(--xbyte-navbar-hover) !important; color: #111111 !important; }

/* Top categories (level-1): remove "grey box" + default underline, use a clean underline bar */
#menu .nav-link.level-1,
#menu .navbar-nav > li > a {
  text-decoration: none !important;
  position: relative;
}

#menu .nav-link.level-1:hover,
#menu .nav-link.level-1:focus,
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus {
  background: rgba(255, 255, 255, 0.18) !important; /* subtle highlight on gold */
  color: var(--xbyte-black) !important;
  text-decoration: none !important;
}

#menu .nav-link.level-1::after,
#menu .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .35rem;
  height: 2px;
  background: var(--xbyte-black);
  opacity: 0;
  pointer-events: none;
}

#menu .nav-link.level-1:hover::after,
#menu .nav-link.level-1:focus::after,
#menu .navbar-nav > li > a:hover::after,
#menu .navbar-nav > li > a:focus::after {
  opacity: 1;
}

/* Active (current category) */
#menu .nav-link.level-1.active,
#menu .navbar-nav > li.active > a,
#menu .navbar-nav > li > a.active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: var(--xbyte-black) !important;
}
#menu .nav-link.level-1.active::after,
#menu .navbar-nav > li.active > a::after,
#menu .navbar-nav > li > a.active::after {
  opacity: 1;
}

/* Active items inside dropdown */
#menu .dropdown-item.active {
  background: rgba(255, 255, 255, 0.18) !important; /* subtle highlight on gold */
  box-shadow: inset 3px 0 0 var(--xbyte-black) !important;
  color: var(--xbyte-black) !important;
  font-weight: 700;
}

/* Keyboard focus: clean, consistent ring (no browser default oddities) */
#menu .nav-link.level-1:focus-visible,
#menu .navbar-nav > li > a:focus-visible {
  outline: 2px solid var(--xbyte-black);
  outline-offset: 2px;
}

/* Override OpenCart default menu link styling (it has higher specificity and adds text-shadow/padding) */
#menu .navbar-nav > li > a {
  text-shadow: none;
  padding: .85rem 1rem;
  line-height: 1.25;
  background-color: transparent;
  border-radius: 0;
}

#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus {
  background: var(--xbyte-navbar-hover);
  color: #111111;
}

/* Left refine category list */
.category-refine > li > a { color:#1f2937; }
.category-refine > li > a:hover { color:#111111; }
.category-refine ul li a { color:#374151; text-decoration:none; }
.category-refine ul li a::before { content:'\2013\00a0'; color:#9ca3af; }
.category-refine ul li a:hover { color:#111111; }

/* Gold-styled sidebar category list */
.category-list-gold {
  border: 1px solid rgba(0,0,0,.22);
  border-radius: 0;
  background: var(--xbyte-white);
}

.category-list-gold .list-group-item {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.10);
  border-radius: 0;
  background: transparent;
  padding: .75rem 1rem;
  color: var(--xbyte-black);
  font-size: 1rem;
  line-height: 1.35;
}
.category-list-gold .list-group-item:last-child { border-bottom: 0; }

/* Remove old bullet squares (too "old school") */
.category-list-gold .bullet { display: none !important; }

/* Parent (level-1) */
.category-list-gold .category-parent {
  background: transparent;
  font-weight: 700;
}
.category-list-gold .category-parent.active {
  background: var(--xbyte-gray-100) !important;
  color: var(--xbyte-black) !important;
  box-shadow: inset 4px 0 0 var(--xbyte-black) !important;
}

/* Child / grandchild */
.category-list-gold .category-child,
.category-list-gold .category-grandchild {
  position: relative;
  padding-left: 1.75rem;
}
.category-list-gold .category-grandchild { padding-left: 2.35rem; }

/* subtle indent marker */
.category-list-gold .category-child::before,
.category-list-gold .category-grandchild::before {
  content: '';
  position: absolute;
  left: .85rem;
  top: 50%;
  width: 6px;
  height: 6px;
  background: rgba(0,0,0,.45);
  transform: translateY(-50%);
}
.category-list-gold .category-grandchild::before { left: 1.45rem; width: 5px; height: 5px; }

/* Hover (clean, no underline blocks) */
.category-list-gold .list-group-item:hover,
.category-list-gold .list-group-item:focus {
  background: var(--xbyte-gray-100);
  color: var(--xbyte-black);
  text-decoration: none;
}

/* Active (any level) */
.category-list-gold .list-group-item.active {
  background: var(--xbyte-gray-100) !important;
  color: var(--xbyte-black) !important;
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--xbyte-black) !important;
}

/* Simplified breadcrumbs */
ul.breadcrumb { background: transparent; border: 0; border-radius: 0; padding: .25rem 0; display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; }
ul.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content:"›"; color:#9aa1a7; font-weight:400; margin: 0 .4rem; }
ul.breadcrumb a { color: inherit; text-decoration:none; }
ul.breadcrumb a:hover { text-decoration: underline; }
ul.breadcrumb .breadcrumb-item.active { color:#222; font-weight:600; }
ul.breadcrumb i.fa-home { color: inherit; opacity:.75; }
ul.breadcrumb .breadcrumb-item { display:flex; align-items:center; min-width:0; padding:0; position: static; }
ul.breadcrumb .breadcrumb-item::after { content: none !important; }
ul.breadcrumb .breadcrumb-item a, ul.breadcrumb .breadcrumb-item span { display:inline; max-width:100%; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }

/* Fix child hover pill size to match */
#menu .dropdown-item { min-height: 2rem; }

/* Header account dropdown next to cart */
.header-account-toggle { color:#111111; border-color: transparent; background: transparent; }
.header-account-toggle:hover, .header-account-toggle:focus { color:#111111; border-color: transparent; background: transparent; }
.header-account .dropdown-menu { min-width: 12rem; }
.header-wishlist { color:#111111; border-color: transparent; background: transparent; }
.header-wishlist:hover, .header-wishlist:focus { color:#111111; border-color: transparent; background: transparent; }

/* Minimal cart button */
.header-cart-minimal .cart-minimal-toggle { color:#111111; text-decoration: none; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; height: 46px; position: relative; }
.header-cart-minimal .cart-minimal-toggle:hover, .header-cart-minimal .cart-minimal-toggle:focus { color:#111111; border: none; background: transparent; }
.header-cart-minimal .cart-minimal-total { margin-left: .5rem; font-weight: 600; color:#111111; line-height: 1; transition: none; }
.header-cart-minimal .cart-minimal-toggle i { position: static; top: auto; }
.header-cart-minimal .cart-badge { position:absolute; top:-18px; left:12px; background:#fff; border:2px solid #e5e7eb; border-radius: 0; width:18px; height:18px; font-size:.7rem; display:flex; align-items:center; justify-content:center; z-index: 1; pointer-events: none; }

/* Scale header icons to match search icon */
.header-account-toggle i,
.header-wishlist i,
.header-cart-minimal i { font-size: 1.25rem; }
.header-account-toggle,
.header-wishlist,
.header-cart-minimal .cart-minimal-toggle { padding: 0; }
/* Adjust badge for larger icon */
.header-cart-minimal .cart-badge { top: -17px; left: 10px; width: 18px; height: 18px; font-size: .7rem; }

/* Final overrides for exact alignment/size */
.header-actions .header-account-toggle i { font-size: 1.55rem !important; }
.header-cart-minimal .cart-badge { top: -17px; left: 10px; }


/* Ensure font stack applies site-wide */
html, body { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; }

/* Design tokens are declared at top */

/* Gold hover effect for header icons */
.header-account-toggle:hover i,
.header-account-toggle:focus i,
.header-wishlist:hover i,
.header-wishlist:focus i,
.header-cart-minimal .cart-minimal-toggle:hover i,
.header-cart-minimal .cart-minimal-toggle:focus i,
.header-cart-minimal .cart-minimal-toggle:hover .cart-minimal-total,
.header-cart-minimal .cart-minimal-toggle:focus .cart-minimal-total { color: var(--xbyte-gold) !important; }

/* Add breathing space above header since top bar was removed */
header { padding-top: 12px; }

/* Global input styling (applies site-wide) */
.form-control, .form-select {
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0; /* square corners site-wide */
  padding: .6rem .75rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
  transition: none;
}
.form-control:focus, .form-select:focus, #account-register .form-control:focus, #account-register .form-select:focus {
  border-color: var(--xbyte-focus);
  box-shadow: none;
  outline: 0;
}
.form-control::placeholder { color: #9ca3af; }

/* Input group polish */
.input-group .form-control { min-height: 42px; }
.input-group .btn { min-height: 42px; border: 1px solid #d1d5db; border-radius: 0; }

/* Header search overrides the generic input-group button border */
header #search.header-search .btn { border-radius: 0 !important; }

/* Header search styling to match reference */
#search.header-search { margin: 0 !important; }
header #search { margin: 0 !important; }

/* Make the search look like a single component (no mismatched borders) */
header #search.header-search {
  border: 1px solid rgba(0,0,0,.30);
  background: var(--xbyte-white);
  box-sizing: border-box;
  min-height: 44px;
  max-width: 560px;
  display: flex;
  flex-wrap: nowrap; /* prevent Bootstrap wrapping that causes clipping */
  align-items: stretch;
  overflow: visible;
}

header #search.header-search .form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
  padding-left: 2.35rem;
  min-height: 44px;
  font-size: 1rem;
  border: 0 !important;
  position: relative;
  z-index: 1;
}

header #search.header-search .btn {
  background: var(--xbyte-black);
  color: var(--xbyte-white);
  border: 0 !important;
  min-height: 44px;
  font-size: .95rem;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* keep the divider visible even when input is focused */
}

/* Stable divider between input and button (doesn't disappear on focus) */
header #search.header-search .btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.30);
}

header #search.header-search .btn:hover,
header #search.header-search .btn:focus {
  background: var(--xbyte-black-true);
  color: var(--xbyte-white);
}

/* =========================
   HEADER ACTIONS (FINAL OVERRIDE)
   Fix inconsistent icon sizes / vertical alignment caused by legacy duplicate rules.
   ========================= */
header .header-actions .xbyte-action,
header .header-actions #cart.xbyte-action,
header .header-actions .header-language.xbyte-action {
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
}

/* icons: same size + no baseline shift */
header .header-actions i,
header .header-actions i.bi,
header .header-actions i.fa,
header .header-actions i.fa-solid,
header .header-actions i.fa-regular {
  font-size: 1.45rem !important;
  line-height: 1 !important;
  display: block !important;
  vertical-align: baseline !important;
}

/* cart: align icon + total perfectly */
header .header-actions .header-cart-minimal,
header .header-actions .header-cart-minimal .cart-minimal-toggle {
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
}
header .header-actions .header-cart-minimal .cart-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
header .header-actions .header-cart-minimal .cart-minimal-total {
  font-size: .95rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: .55rem !important;
}

/* Auth cards (login/register) */
.auth-card {
  background-color: #ffffff;
  border: 1px solid #eef0f2;
  border-radius: 0;
  box-shadow: none;
}
.auth-card .form-control { border-radius: 0; }
.auth-card .form-control::placeholder { color: #9aa3ad; opacity: 1; }
.auth-card-login h2 { letter-spacing: .3px; }

/* Outline primary button in gold theme */
.btn-outline-primary {
  color: var(--xbyte-black) !important;
  border-color: var(--xbyte-black) !important;
  background-color: transparent !important;
  border-radius: 0;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--xbyte-white) !important;
  background-color: var(--xbyte-black) !important;
  border-color: var(--xbyte-black) !important;
}

/* Login page: remove underline from "Passwort vergessen?" link */
#account-login .auth-card-login a.link-primary { text-decoration: none !important; }
#account-login .auth-card-login a.link-primary:hover,
#account-login .auth-card-login a.link-primary:focus { text-decoration: none !important; }

/* =========================
   XBYTE Header Redesign
   Journal-inspired layout with cleaner XBYTE styling
   ========================= */

.xbyte-topbar {
  background: #111827;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
}

.xbyte-topbar__inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.xbyte-topbar__group {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex-wrap: wrap;
}

.xbyte-topbar__group--secondary {
  justify-content: flex-end;
}

.xbyte-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.xbyte-topbar__link:hover,
.xbyte-topbar__link:focus {
  color: var(--xbyte-white) !important;
}

.xbyte-topbar__link i {
  font-size: 0.82rem !important;
  color: var(--xbyte-gold);
}

header.xbyte-site-header {
  padding-top: 0 !important;
  position: relative;
  z-index: 4000;
  background: var(--xbyte-white);
  border-bottom: 1px solid var(--xbyte-gray-200);
}

.xbyte-header-main {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.xbyte-header-main__brand,
.xbyte-header-main__search,
.xbyte-header-main__actions {
  min-width: 0;
}

.xbyte-logo img {
  display: block;
  max-height: 48px;
  width: auto;
}

.xbyte-header-main__search {
  display: flex;
  align-items: center;
}

header.xbyte-site-header #search.header-search {
  margin: 0 !important;
  width: 100%;
  max-width: none;
  min-height: 52px;
  border: 1px solid var(--xbyte-gray-300);
  background: var(--xbyte-white);
  overflow: hidden;
}

header.xbyte-site-header #search.header-search .form-control {
  min-height: 52px;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 2.6rem;
  font-size: 0.98rem;
  font-weight: 600;
}

header.xbyte-site-header #search.header-search .btn {
  min-width: 112px;
  min-height: 52px;
  border: 0 !important;
  background: var(--xbyte-black);
  color: var(--xbyte-white);
  font-weight: 700;
  letter-spacing: 0.01em;
}

header.xbyte-site-header #search.header-search .btn:hover,
header.xbyte-site-header #search.header-search .btn:focus {
  background: var(--xbyte-black-true);
}

header.xbyte-site-header #search.header-search .btn::before {
  background: rgba(255, 255, 255, 0.12);
}

.xbyte-header-main__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.xbyte-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xbyte-header-icon-btn {
  width: 46px;
  height: 46px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid var(--xbyte-gray-200) !important;
  background: var(--xbyte-white) !important;
  color: var(--xbyte-black) !important;
  box-shadow: none !important;
}

.xbyte-header-icon-btn:hover,
.xbyte-header-icon-btn:focus {
  border-color: var(--xbyte-gray-300) !important;
  background: var(--xbyte-gray-50) !important;
  color: var(--xbyte-black) !important;
}

.xbyte-header-icon-btn i,
.xbyte-header-icon-btn i.bi,
.xbyte-header-icon-btn i.fa-solid,
.xbyte-header-icon-btn i.fa-regular {
  font-size: 1.22rem !important;
  line-height: 1 !important;
}

.xbyte-header-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xbyte-header-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--xbyte-gold);
  color: var(--xbyte-black);
  border: 2px solid var(--xbyte-white);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.xbyte-header-dropdown {
  margin-top: 0.65rem !important;
  padding: 0.45rem 0 !important;
  background: var(--xbyte-white) !important;
  border: 1px solid var(--xbyte-gray-200) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
}

.xbyte-header-dropdown .dropdown-item {
  padding: 0.7rem 1rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--xbyte-black) !important;
}

.xbyte-header-dropdown .dropdown-item:hover,
.xbyte-header-dropdown .dropdown-item:focus {
  background: var(--xbyte-gray-50) !important;
  color: var(--xbyte-black) !important;
}

.xbyte-header-cart,
.xbyte-header-cart__toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.xbyte-language-switcher__toggle {
  width: auto;
  min-width: 46px;
  padding: 0 0.7rem !important;
  gap: 0.45rem;
}

.xbyte-language-switcher__flag {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.xbyte-language-switcher__flag--item {
  margin-right: 0.55rem;
}

.xbyte-language-switcher__menu {
  min-width: 170px;
}

#menu.xbyte-nav {
  position: relative;
  z-index: 1600;
  margin: 0 0 1.5rem;
  padding: 0;
  background: transparent !important;
  border: 0;
}

#menu.xbyte-nav::before {
  display: none;
}

#menu.xbyte-nav > * {
  position: static;
}

.xbyte-nav {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  border-bottom: 1px solid var(--xbyte-gray-200);
}

.xbyte-nav__departments-toggle {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  background: var(--xbyte-gold);
  color: var(--xbyte-black);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.xbyte-nav__departments-toggle:hover,
.xbyte-nav__departments-toggle:focus {
  background: var(--xbyte-gold-dark);
  color: var(--xbyte-black);
}

.xbyte-nav__collapse {
  display: flex !important;
  min-width: 0;
  flex: 1 1 auto;
}

.xbyte-nav__list {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  flex-wrap: wrap;
}

#menu.xbyte-nav .nav-item {
  position: relative;
}

#menu.xbyte-nav .nav-link.level-1 {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--xbyte-black) !important;
  background: transparent !important;
}

#menu.xbyte-nav .nav-link.level-1::after {
  left: 1rem;
  right: 1rem;
  bottom: 0.65rem;
  height: 2px;
  background: var(--xbyte-gold);
}

#menu.xbyte-nav .nav-link.level-1:hover,
#menu.xbyte-nav .nav-link.level-1:focus,
#menu.xbyte-nav .nav-link.level-1.active {
  background: var(--xbyte-gray-50) !important;
  color: var(--xbyte-black) !important;
}

#menu.xbyte-nav .nav-link.level-1:hover::after,
#menu.xbyte-nav .nav-link.level-1:focus::after,
#menu.xbyte-nav .nav-link.level-1.active::after {
  opacity: 1;
}

#menu.xbyte-nav .dropdown-menu.xbyte-nav__dropdown {
  margin-top: 0 !important;
  padding: 1rem 0 0 !important;
  min-width: 520px;
  max-width: min(860px, calc(100vw - 2rem));
  background: var(--xbyte-white) !important;
  border: 1px solid var(--xbyte-gray-200) !important;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.1) !important;
}

.xbyte-nav__dropdown-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1rem;
  padding: 0 1rem 1rem;
}

.xbyte-nav__dropdown-column {
  margin: 0;
  padding: 0;
}

.xbyte-nav__dropdown-item {
  padding: 0 0 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}

.xbyte-nav__dropdown-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#menu.xbyte-nav .dropdown-item.level-2 {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--xbyte-black) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.xbyte-nav__dropdown-children {
  display: grid;
  gap: 0.25rem;
}

#menu.xbyte-nav .dropdown-item.level-3 {
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--xbyte-gray-500) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menu.xbyte-nav .dropdown-item.level-3::before {
  content: none;
}

#menu.xbyte-nav .dropdown-item.level-2:hover,
#menu.xbyte-nav .dropdown-item.level-2:focus,
#menu.xbyte-nav .dropdown-item.level-3:hover,
#menu.xbyte-nav .dropdown-item.level-3:focus {
  color: var(--xbyte-black) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.xbyte-nav__dropdown-footer {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--xbyte-gray-200);
  background: var(--xbyte-gray-50);
}

.xbyte-nav__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 !important;
  font-weight: 700;
  color: var(--xbyte-black) !important;
}

.xbyte-nav__view-all::after {
  content: '\2192';
  font-size: 0.85rem;
  color: var(--xbyte-gold-dark);
}

.xbyte-nav__mobile-toggle {
  display: none;
}

@media (min-width: 992px) {
  #menu.xbyte-nav .dropdown:hover > .dropdown-menu.xbyte-nav__dropdown {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .xbyte-topbar__group--secondary {
    display: none;
  }

  .xbyte-header-main {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    min-height: auto;
    padding: 1rem 0;
  }

  .xbyte-header-main__search {
    grid-column: 1 / -1;
    order: 3;
  }

  .xbyte-header-main__actions {
    gap: 0.45rem;
  }

  .xbyte-nav {
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--xbyte-gray-200);
  }

  .xbyte-nav__departments-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .xbyte-nav__collapse {
    width: 100%;
    display: block !important;
  }

  #menu.xbyte-nav .xbyte-nav__list {
    display: block;
  }

  #menu.xbyte-nav .xbyte-nav__list > .nav-item {
    border-top: 1px solid var(--xbyte-gray-200);
  }

  #menu.xbyte-nav .nav-link.level-1 {
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
  }

  #menu.xbyte-nav .dropdown-menu.xbyte-nav__dropdown {
    position: static !important;
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--xbyte-gray-200) !important;
    box-shadow: none !important;
  }

  .xbyte-nav__dropdown-grid {
    display: block !important;
    padding: 0;
  }

  .xbyte-nav__dropdown-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  }

  #menu.xbyte-nav .dropdown-item.level-2 {
    padding: 0.8rem 1rem;
    margin: 0;
  }

  .xbyte-nav__dropdown-children {
    padding: 0 0 0.75rem;
  }

  #menu.xbyte-nav .dropdown-item.level-3 {
    padding: 0.35rem 1.5rem;
  }

  .xbyte-nav__dropdown-footer {
    padding: 0.8rem 1rem;
  }
}

/* =========================
   XBYTE Header Polish Pass 2
   Closer to the chosen Journal reference
   ========================= */

.xbyte-topbar {
  background: linear-gradient(90deg, #4a1821 0%, #2c1017 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.xbyte-topbar__inner {
  min-height: 32px;
}

.xbyte-topbar__group {
  gap: 1.15rem;
}

.xbyte-topbar__link {
  font-size: 0.78rem;
  font-weight: 600;
}

.xbyte-topbar__link i {
  color: #f5ca55;
}

header.xbyte-site-header {
  background: #0a3368;
  border-bottom: 0;
  box-shadow: 0 18px 40px rgba(10, 51, 104, 0.16);
}

.xbyte-header-main {
  min-height: 118px;
  grid-template-columns: minmax(220px, 270px) minmax(420px, 1fr) auto;
  gap: 2rem;
  padding: 1.3rem 0 1rem;
}

.xbyte-logo a,
.xbyte-logo h1 a {
  display: inline-flex;
  align-items: center;
  min-height: 68px;
  padding: 0.9rem 1.15rem;
  background: #ffffff;
  border-left: 4px solid var(--xbyte-gold);
  box-shadow: 0 14px 32px rgba(8, 25, 49, 0.16);
}

.xbyte-logo img {
  max-height: 54px;
}

header.xbyte-site-header #search.header-search {
  min-height: 58px;
  border: 0;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(8, 25, 49, 0.15);
}

header.xbyte-site-header #search.header-search .form-control {
  min-height: 58px;
  padding-left: 3rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  background-position: 16px center;
}

header.xbyte-site-header #search.header-search .form-control::placeholder {
  color: #9ca3af;
  font-weight: 600;
}

header.xbyte-site-header #search.header-search .btn {
  min-width: 124px;
  min-height: 58px;
  background: linear-gradient(180deg, #f6d366 0%, #ddb53b 100%);
  color: #111111;
  font-weight: 800;
}

header.xbyte-site-header #search.header-search .btn:hover,
header.xbyte-site-header #search.header-search .btn:focus {
  background: linear-gradient(180deg, #f0ca54 0%, #d6ab2d 100%);
  color: #111111;
}

header.xbyte-site-header #search.header-search .btn::before {
  background: rgba(17, 17, 17, 0.08);
}

.xbyte-header-main__actions {
  gap: 0.7rem;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.xbyte-header-icon-btn,
.xbyte-header-cart__toggle {
  width: 50px;
  height: 50px;
  border: 0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 24px rgba(8, 25, 49, 0.12) !important;
}

.xbyte-header-icon-btn:hover,
.xbyte-header-icon-btn:focus,
.xbyte-header-cart__toggle:hover,
.xbyte-header-cart__toggle:focus {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.xbyte-header-icon-btn i,
.xbyte-header-icon-btn i.bi,
.xbyte-header-icon-btn i.fa-solid,
.xbyte-header-icon-btn i.fa-regular,
.xbyte-header-cart__toggle i {
  font-size: 1.15rem !important;
}

.xbyte-header-badge {
  top: -7px;
  right: -8px;
  min-width: 19px;
  height: 19px;
  background: #f4c94f;
  border-color: #ffffff;
  font-size: 0.66rem;
}

.xbyte-header-dropdown {
  margin-top: 0.9rem !important;
  padding: 0.55rem 0 !important;
  border: 0 !important;
  box-shadow: 0 24px 42px rgba(15, 23, 42, 0.16) !important;
}

.xbyte-header-dropdown .dropdown-item {
  padding: 0.8rem 1.1rem;
}

.xbyte-language-switcher__toggle {
  min-width: 56px;
  padding: 0 0.85rem !important;
  gap: 0.55rem;
}

.xbyte-language-switcher__flag {
  width: 19px;
  height: 19px;
}

#menu.xbyte-nav {
  margin: 0 0 2rem;
}

.xbyte-nav {
  gap: 0;
  background: #0a3368;
  border-bottom: 0;
  box-shadow: 0 18px 30px rgba(8, 25, 49, 0.12);
}

.xbyte-nav__departments-toggle {
  min-width: 184px;
  min-height: 54px;
  padding: 0 1.2rem;
  background: linear-gradient(180deg, #f7d35f 0%, #deb53a 100%);
  box-shadow: inset -1px 0 0 rgba(17, 17, 17, 0.08);
}

.xbyte-nav__departments-toggle:hover,
.xbyte-nav__departments-toggle:focus {
  background: linear-gradient(180deg, #f1ca53 0%, #d6a92b 100%);
}

.xbyte-nav__collapse {
  padding-left: 0.4rem;
}

.xbyte-nav__list {
  gap: 0.1rem;
}

#menu.xbyte-nav .nav-link.level-1 {
  min-height: 54px;
  padding: 0 1.15rem;
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 0.92rem;
  font-weight: 700;
}

#menu.xbyte-nav .nav-link.level-1::after {
  left: 1.15rem;
  right: 1.15rem;
  bottom: 0.6rem;
  background: #f4c94f;
}

#menu.xbyte-nav .nav-link.level-1:hover,
#menu.xbyte-nav .nav-link.level-1:focus,
#menu.xbyte-nav .nav-link.level-1.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#menu.xbyte-nav .dropdown-menu.xbyte-nav__dropdown {
  margin-top: 0 !important;
  min-width: 560px;
  border-top: 3px solid #f4c94f !important;
  box-shadow: 0 28px 50px rgba(15, 23, 42, 0.16) !important;
}

.xbyte-nav__dropdown-grid {
  gap: 0 1.5rem;
  padding: 1.1rem 1.25rem 1rem;
}

.xbyte-nav__dropdown-item {
  padding: 0 0 1rem;
  margin-bottom: 1rem;
}

#menu.xbyte-nav .dropdown-item.level-2 {
  margin-bottom: 0.5rem;
  font-size: 0.96rem;
}

#menu.xbyte-nav .dropdown-item.level-3 {
  font-size: 0.9rem;
  line-height: 1.55;
}

.xbyte-nav__dropdown-footer {
  padding: 0.95rem 1.25rem;
  background: #f8fafc;
}

.xbyte-nav__view-all {
  color: #0f172a !important;
}

.xbyte-nav__view-all::after {
  color: #c99712;
}

@media (max-width: 991.98px) {
  header.xbyte-site-header {
    box-shadow: none;
  }

  .xbyte-header-main {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    min-height: auto;
    padding: 1rem 0;
  }

  .xbyte-logo a,
  .xbyte-logo h1 a {
    min-height: 60px;
    padding: 0.8rem 1rem;
  }

  header.xbyte-site-header #search.header-search,
  header.xbyte-site-header #search.header-search .form-control,
  header.xbyte-site-header #search.header-search .btn {
    min-height: 52px;
  }

  .xbyte-header-main__actions {
    padding: 0.35rem;
    gap: 0.45rem;
  }

  .xbyte-header-icon-btn,
  .xbyte-header-cart__toggle {
    width: 46px;
    height: 46px;
  }

  .xbyte-nav {
    background: #ffffff;
    box-shadow: none;
    border: 1px solid var(--xbyte-gray-200);
  }

  .xbyte-nav__departments-toggle {
    width: 100%;
    box-shadow: none;
  }

  .xbyte-nav__collapse {
    padding-left: 0;
  }

  #menu.xbyte-nav .nav-link.level-1 {
    color: var(--xbyte-black) !important;
  }

  #menu.xbyte-nav .nav-link.level-1:hover,
  #menu.xbyte-nav .nav-link.level-1:focus,
  #menu.xbyte-nav .nav-link.level-1.active {
    background: var(--xbyte-gray-50) !important;
    color: var(--xbyte-black) !important;
  }
}

/* =========================
   XBYTE Header Final Direction
   White background + gold typography
   ========================= */

.xbyte-topbar {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.xbyte-topbar__link {
  color: #b78b18 !important;
}

.xbyte-topbar__link:hover,
.xbyte-topbar__link:focus {
  color: #8f6a10 !important;
}

.xbyte-topbar__link i {
  color: #c9a227 !important;
}

header.xbyte-site-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.xbyte-header-main {
  min-height: 108px;
  grid-template-columns: minmax(220px, 280px) minmax(420px, 1fr) auto;
  gap: 1.75rem;
  padding: 1.1rem 0 0.95rem;
}

.xbyte-logo a,
.xbyte-logo h1 a {
  min-height: 0;
  padding: 0;
  background: transparent;
  border-left: 0;
  box-shadow: none;
}

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

.xbyte-logo__image {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  opacity: 1 !important;
  visibility: visible !important;
}

.xbyte-logo__inline {
  display: block;
  width: 220px;
  max-width: 100%;
}

.xbyte-logo__inline svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #111111;
}

header.xbyte-site-header #search.header-search {
  min-height: 56px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  box-shadow: none;
}

header.xbyte-site-header #search.header-search .form-control {
  min-height: 56px;
  color: #111111;
  font-weight: 600;
}

header.xbyte-site-header #search.header-search .btn {
  min-height: 56px;
  min-width: 118px;
  background: #ffffff;
  color: #b78b18;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-weight: 800;
}

header.xbyte-site-header #search.header-search .btn:hover,
header.xbyte-site-header #search.header-search .btn:focus {
  background: #fff9e8;
  color: #8f6a10;
}

header.xbyte-site-header #search.header-search .btn::before {
  display: none;
}

.xbyte-header-main__actions {
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.xbyte-header-icon-btn,
.xbyte-header-cart__toggle {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  color: #b78b18 !important;
  box-shadow: none !important;
}

.xbyte-header-icon-btn:hover,
.xbyte-header-icon-btn:focus,
.xbyte-header-cart__toggle:hover,
.xbyte-header-cart__toggle:focus {
  background: #fff9e8 !important;
  border-color: rgba(183, 139, 24, 0.32) !important;
  color: #8f6a10 !important;
}

.xbyte-header-icon-btn i,
.xbyte-header-icon-btn i.bi,
.xbyte-header-icon-btn i.fa-solid,
.xbyte-header-icon-btn i.fa-regular,
.xbyte-header-cart__toggle i {
  font-size: 1.08rem !important;
}

.xbyte-header-badge {
  background: #c9a227;
  color: #ffffff;
  border-color: #ffffff;
}

.xbyte-header-dropdown {
  margin-top: 0.75rem !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08) !important;
}

.xbyte-header-dropdown .dropdown-item {
  color: #a17813 !important;
}

.xbyte-header-dropdown .dropdown-item:hover,
.xbyte-header-dropdown .dropdown-item:focus {
  background: #fff9e8 !important;
  color: #7f5d0d !important;
}

.xbyte-language-switcher__toggle {
  min-width: 52px;
}

#menu.xbyte-nav {
  margin: 0 0 1.75rem;
}

.xbyte-nav {
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

.xbyte-nav__departments-toggle {
  min-width: 170px;
  min-height: 52px;
  background: #f4e3a0;
  color: #8b6914;
  box-shadow: none;
}

.xbyte-nav__departments-toggle:hover,
.xbyte-nav__departments-toggle:focus {
  background: #efd98b;
  color: #7f5d0d;
}

.xbyte-nav__collapse {
  padding-left: 0.25rem;
}

#menu.xbyte-nav .nav-link.level-1 {
  min-height: 52px;
  color: #b78b18 !important;
  font-size: 0.94rem;
  font-weight: 700;
}

#menu.xbyte-nav .nav-link.level-1::after {
  background: #c9a227;
}

#menu.xbyte-nav .nav-link.level-1:hover,
#menu.xbyte-nav .nav-link.level-1:focus,
#menu.xbyte-nav .nav-link.level-1.active {
  background: #fff9e8 !important;
  color: #8f6a10 !important;
}

#menu.xbyte-nav .dropdown-menu.xbyte-nav__dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: 2px solid #d0aa33 !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.09) !important;
}

#menu.xbyte-nav .dropdown-item.level-2 {
  color: #916c12 !important;
}

#menu.xbyte-nav .dropdown-item.level-3 {
  color: #b58b24 !important;
}

#menu.xbyte-nav .dropdown-item.level-2:hover,
#menu.xbyte-nav .dropdown-item.level-2:focus,
#menu.xbyte-nav .dropdown-item.level-3:hover,
#menu.xbyte-nav .dropdown-item.level-3:focus {
  color: #7f5d0d !important;
}

.xbyte-nav__dropdown-footer {
  background: #fffaf0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.xbyte-nav__view-all {
  color: #916c12 !important;
}

.xbyte-nav__view-all::after {
  color: #c9a227;
}

@media (max-width: 991.98px) {
  header.xbyte-site-header {
    box-shadow: none;
  }

  .xbyte-header-main {
    gap: 0.9rem;
    padding: 0.95rem 0;
  }

  .xbyte-logo img {
    max-height: 52px;
  }

  .xbyte-logo__image {
    width: 190px;
  }

  .xbyte-logo__inline {
    width: 190px;
  }

  .xbyte-nav {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .xbyte-nav__departments-toggle {
    width: 100%;
  }
}

/* =========================
   Header actions rail
   Fully rebuilt with isolated classes
   ========================= */

.xbyte-actions-rail {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  line-height: 1;
}

.xbyte-actions-rail__item {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

.xbyte-actions-rail__divider {
  width: 1px;
  height: 18px;
  margin: 0 8px;
  background: rgba(0, 0, 0, 0.15);
  flex: 0 0 1px;
}

.xbyte-actions-rail__button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: none;
}

.xbyte-actions-rail__button:hover,
.xbyte-actions-rail__button:focus {
  color: #111111;
  opacity: 0.72;
  background: transparent;
}

.xbyte-actions-rail__dropdown,
.xbyte-actions-rail__language {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xbyte-actions-rail__badge-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xbyte-actions-rail__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}

.xbyte-actions-rail__icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xbyte-actions-rail__icon--cart {
  transform: translateY(2px);
}

.xbyte-actions-rail__badge {
  position: absolute;
  top: -2px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.xbyte-actions-rail__language .xbyte-language-switcher__flag {
  width: 17px;
  height: 17px;
}

@media (max-width: 991.98px) {
  .xbyte-actions-rail__item {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .xbyte-actions-rail__divider {
    margin: 0 7px;
    height: 16px;
  }

  .xbyte-actions-rail__icon,
  .xbyte-actions-rail__icon svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .xbyte-actions-rail__icon--cart svg {
    width: 19px;
    height: 19px;
  }
}