/* ==========================================================================
   CYBERPUNK // NEON GRID
   Child-Theme von "classic" – Duality Beyond Studios
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap');

:root{
  --cp-bg:            #0a0a12;
  --cp-bg-alt:        #0f0f1a;
  --cp-surface:       #12121e;
  --cp-surface-alt:   #191927;
  --cp-border:        #2a2a40;
  --cp-cyan:          #00f6ff;
  --cp-magenta:       #ff00c8;
  --cp-yellow:        #f9e900;
  --cp-purple:        #9d4edd;
  --cp-text:          #e6e6f0;
  --cp-text-dim:      #a9a9c8;
  --cp-danger:        #ff2860;
  --cp-glow-cyan:     0 0 6px rgba(0,246,255,.8), 0 0 18px rgba(0,246,255,.4);
  --cp-glow-magenta:  0 0 6px rgba(255,0,200,.8), 0 0 18px rgba(255,0,200,.4);
  --cp-font-head:     'Orbitron', 'Segoe UI', sans-serif;
  --cp-font-mono:     'Share Tech Mono', 'Courier New', monospace;
}

/* ---------- Grundgerüst ---------- */
html, body{
  background-color: var(--cp-bg) !important;
  color: var(--cp-text) !important;
  font-family: var(--cp-font-mono);
}

body{
  background-image:
    linear-gradient(rgba(0,246,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,246,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  position: relative;
}

/* Scanline-Overlay über der gesamten Seite */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ---------- Layout & Kontrast: alle Standard-Wrapper von classic ---------- */
/* classic setzt auf vielen inneren Containern eigene weiße/helle
   Hintergründe (Bootstrap .card, .bg-white, list-group etc.), die vom
   body-Hintergrund nicht "durchgefärbt" werden. Hier pauschal erfassen: */
#wrapper,
#content-wrapper,
#content,
#main,
#index .page-content,
.page-content,
#category,
#product,
.block-category,
#left-column,
#right-column,
.card,
.card-block,
.card-body,
.page-footer,
.breadcrumb,
.sort-by-row,
.total-products,
.list-group-item,
.block-categories,
.category-sub-menu,
.facet,
.filter-block,
.definition-list,
#js-product-list-top,
#js-product-list-header,
#js-product-list,
.page-not-found,
.bg-white,
.bg-light,
.dropdown-menu{
  background-color: var(--cp-surface) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

/* Untergeordnete Text-Elemente in diesen Containern nicht dunkel lassen */
#wrapper p, #wrapper span, #wrapper li, #wrapper td, #wrapper label,
.card p, .card span, .card li,
.block-categories a, .category-sub-menu a{
  color: var(--cp-text);
}

.text-muted, .light, small{
  color: var(--cp-text-dim) !important;
}

/* Bootstrap-Grautöne, die classic gerne für Beschreibungstexte nutzt */
.description, .rte-content, .product-description,
#category-description, .cms-content{
  color: var(--cp-text) !important;
}
.description p, .rte-content p, .product-description p,
#category-description p, .cms-content p{
  color: var(--cp-text-dim) !important;
}

/* Sortier-/Filterleiste über den Produktlisten */
.sort-by-row select, .sort-by-row .select-title,
.total-products{
  color: var(--cp-text) !important;
}

a{ color: var(--cp-cyan); transition: color .2s ease, text-shadow .2s ease; }
a:hover{ color: var(--cp-magenta); text-shadow: var(--cp-glow-magenta); }

h1, h2, h3, h4, h5,
.h1, .h2, .h3,
.page-title, .cms-title, .block-category h1{
  font-family: var(--cp-font-head) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cp-text) !important;
}

/* Glitch-Effekt auf der Haupt-Seitenüberschrift */
.page-title, h1.h1{
  position: relative;
  color: var(--cp-cyan) !important;
  text-shadow: var(--cp-glow-cyan);
  display: inline-block;
}
.page-title::before, .page-title::after{
  content: attr(data-glitch);
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  opacity: .7;
}

/* ---------- Header ---------- */
#header{
  background: linear-gradient(180deg, var(--cp-bg-alt), var(--cp-bg)) !important;
  border-bottom: 1px solid var(--cp-cyan);
  box-shadow: 0 1px 12px rgba(0,246,255,.35);
}

#header .header-nav{
  background-color: var(--cp-surface) !important;
  border-bottom: 1px solid var(--cp-border);
}

#_desktop_logo img{
  filter: drop-shadow(0 0 8px rgba(0,246,255,.6));
}

.header-top{
  background-color: var(--cp-bg-alt) !important;
  border-bottom: 1px solid var(--cp-border);
}

/* Hauptnavigation */
#header .top-menu > li > a,
.menu > li > a{
  color: var(--cp-text) !important;
  font-family: var(--cp-font-head);
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .5px;
}
#header .top-menu > li > a:hover,
.menu > li > a:hover{
  color: var(--cp-cyan) !important;
  text-shadow: var(--cp-glow-cyan);
}

/* Tatsächliche Markup-Struktur des Top-Menü-Popups in classic:
   <div class="popover sub-menu js-sub-menu collapse" id="top_sub_menu_...">
     <ul class="top-menu" data-depth="1">
       <li class="category"><a class="dropdown-item ...">...</a></li>
     </ul>
   </div>
   Bootstrap-Popover bringt eigene weiße Defaults mit, daher hart mit
   !important überschreiben: */
.popover.sub-menu,
.js-sub-menu,
#_desktop_top_menu .popover{
  background-color: var(--cp-surface-alt) !important;
  border: 1px solid var(--cp-cyan) !important;
  box-shadow: var(--cp-glow-cyan) !important;
}
.popover.sub-menu::before,
.popover.sub-menu::after,
.popover.sub-menu > .arrow::before,
.popover.sub-menu > .arrow::after{
  border-bottom-color: var(--cp-surface-alt) !important;
  display: none; /* Bootstrap-Popover-Pfeil passt farblich eh nicht mehr */
}

.popover.sub-menu a,
.popover.sub-menu li,
.popover.sub-menu span,
.popover.sub-menu .dropdown-item{
  color: var(--cp-text) !important;
  background-color: transparent !important;
}
.popover.sub-menu a:hover,
.popover.sub-menu .dropdown-item:hover{
  color: var(--cp-cyan) !important;
  text-shadow: var(--cp-glow-cyan);
}

/* Spalten-Header = oberste Ebene je Spalte (die Creator-Namen) */
.popover.sub-menu > .top-menu[data-depth="1"] > li.category > a.dropdown-item,
.popover.sub-menu .top-menu[data-depth="1"] > li.category > a.dropdown-submenu{
  color: var(--cp-cyan) !important;
  font-family: var(--cp-font-head);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.top-menu .dropdown-menu,
.dropdown-menu,
.mega-dropdown,
.dropdown-submenu .dropdown-menu,
.dropdown-menu .container,
.dropdown-menu .row,
.dropdown-menu .col,
.dropdown-menu [class*="col-"]{
  background-color: var(--cp-surface-alt) !important;
  border: 1px solid var(--cp-cyan) !important;
  box-shadow: var(--cp-glow-cyan);
}
.dropdown-menu a,
.dropdown-menu li,
.dropdown-menu span,
.dropdown-menu strong,
.dropdown-menu h1, .dropdown-menu h2, .dropdown-menu h3,
.dropdown-menu h4, .dropdown-menu h5, .dropdown-menu h6,
.dropdown-item{
  color: var(--cp-text) !important;
}
.dropdown-menu a:hover,
.dropdown-item:hover{
  color: var(--cp-cyan) !important;
  background-color: transparent !important;
  text-shadow: var(--cp-glow-cyan);
}
/* Spalten-Überschriften (Creator-Namen) im Mega-Menü etwas absetzen */
.dropdown-menu > .container > .row > [class*="col-"] > a:first-child,
.dropdown-menu .dropdown-submenu > a{
  color: var(--cp-cyan) !important;
  font-family: var(--cp-font-head);
  text-transform: uppercase;
}

/* Suchleiste */
#search_widget input,
.ui-autocomplete-input{
  background-color: var(--cp-surface) !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  font-family: var(--cp-font-mono);
}
#search_widget input:focus{
  border-color: var(--cp-magenta) !important;
  box-shadow: var(--cp-glow-magenta);
}
#search_widget button{
  background-color: transparent !important;
  color: var(--cp-cyan) !important;
}

/* Warenkorb-Icon / Blocks im Header */
.blockcart .header .material-icons,
#_desktop_user_info a,
#_desktop_cart a{
  color: var(--cp-cyan) !important;
}
.blockcart .cart-products-count{
  background-color: var(--cp-magenta) !important;
  box-shadow: var(--cp-glow-magenta);
}

/* ---------- Buttons ---------- */
.btn, button, .btn-primary,
a.btn-primary, input[type="submit"]{
  font-family: var(--cp-font-head) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 2px !important;
  border: 1px solid var(--cp-cyan) !important;
  background-color: transparent !important;
  color: var(--cp-cyan) !important;
  transition: all .2s ease;
}
.btn:hover, .btn-primary:hover, a.btn-primary:hover, input[type="submit"]:hover{
  background-color: var(--cp-cyan) !important;
  color: var(--cp-bg) !important;
  box-shadow: var(--cp-glow-cyan);
}

.btn-secondary, .btn-outline-secondary{
  border: 1px solid var(--cp-magenta) !important;
  color: var(--cp-magenta) !important;
  background: transparent !important;
}
.btn-secondary:hover{
  background-color: var(--cp-magenta) !important;
  color: var(--cp-bg) !important;
  box-shadow: var(--cp-glow-magenta);
}

/* ---------- Produktkacheln ---------- */
.product-miniature, .js-product-miniature-wrapper .thumbnail-container{
  background-color: var(--cp-surface) !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: 4px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.product-miniature:hover, .thumbnail-container:hover{
  border-color: var(--cp-cyan) !important;
  box-shadow: var(--cp-glow-cyan);
  transform: translateY(-3px);
}

/* Der Text-/Preisblock UNTER dem Produktbild hat in classic ein eigenes
   weißes Kärtchen (.product-description), unabhängig vom umgebenden
   .product-miniature-Rahmen – das muss extra überschrieben werden: */
.product-description,
.product-miniature .product-description,
.thumbnail-container .product-description,
.highlighted-informations{
  background-color: var(--cp-surface) !important;
}

.product-title a{
  color: var(--cp-text) !important;
  font-family: var(--cp-font-head);
  font-size: .85rem;
}

.product-price-and-shipping .price,
.current-price span,
.product-price{
  color: var(--cp-yellow) !important;
  font-family: var(--cp-font-mono);
  text-shadow: 0 0 6px rgba(249,233,0,.5);
}

.regular-price{
  color: var(--cp-text-dim) !important;
}

/* Badges: NEU / SALE */
.product-flags .on-sale,
.product-flags .discount-percentage{
  background-color: var(--cp-danger) !important;
  box-shadow: 0 0 8px rgba(255,40,96,.7);
  color: #fff !important;
  border-radius: 2px;
}
.product-flags .new{
  background-color: var(--cp-purple) !important;
  box-shadow: 0 0 8px rgba(157,78,221,.7);
}

/* ---------- Produktdetailseite ---------- */
#product .product-prices .current-price span{
  font-size: 1.6rem;
  color: var(--cp-yellow) !important;
}
.product-quantity .add{
  box-shadow: var(--cp-glow-cyan);
}
.product-cover, .product-images img{
  border: 1px solid var(--cp-border);
  border-radius: 4px;
}

/* ---------- Formulare ---------- */
input, textarea, select,
.form-control{
  background-color: var(--cp-surface) !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  font-family: var(--cp-font-mono) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus{
  border-color: var(--cp-cyan) !important;
  box-shadow: var(--cp-glow-cyan) !important;
  outline: none;
}

/* ---------- Kategorien / Sidebar-Filter ---------- */
#left-column .block, #right-column .block,
.facet, .card{
  background-color: var(--cp-surface) !important;
  border: 1px solid var(--cp-border) !important;
}
.facet-title, .card-header{
  color: var(--cp-cyan) !important;
  font-family: var(--cp-font-head);
  text-transform: uppercase;
}

/* ---------- Pagination ---------- */
.pagination .page-item .page-link{
  background-color: var(--cp-surface) !important;
  border: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
}
.pagination .page-item.active .page-link{
  background-color: var(--cp-magenta) !important;
  border-color: var(--cp-magenta) !important;
  color: #fff !important;
  box-shadow: var(--cp-glow-magenta);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  background-color: transparent !important;
  color: var(--cp-text-dim);
}
.breadcrumb a{ color: var(--cp-text-dim); }
.breadcrumb a:hover{ color: var(--cp-cyan); }

/* ---------- Footer ---------- */
#footer, .footer-container{
  background-color: var(--cp-bg-alt) !important;
  border-top: 1px solid var(--cp-cyan);
  box-shadow: 0 -1px 12px rgba(0,246,255,.25);
  color: var(--cp-text-dim) !important;
}
#footer h3, .footer-container h3{
  color: var(--cp-cyan) !important;
  font-family: var(--cp-font-head);
  text-transform: uppercase;
}
#footer a{ color: var(--cp-text-dim); }
#footer a:hover{ color: var(--cp-magenta); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--cp-bg); }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--cp-cyan), var(--cp-magenta));
  border-radius: 4px;
}

/* ---------- Alerts / Meldungen ---------- */
.alert-danger{
  background-color: rgba(255,40,96,.12) !important;
  border: 1px solid var(--cp-danger) !important;
  color: var(--cp-danger) !important;
}
.alert-success{
  background-color: rgba(0,246,255,.1) !important;
  border: 1px solid var(--cp-cyan) !important;
  color: var(--cp-cyan) !important;
}

/* ---------- Checkout-Schritte ---------- */
.step-title{
  font-family: var(--cp-font-head) !important;
  color: var(--cp-text) !important;
}
.step-edit .done{ color: var(--cp-cyan) !important; }

/* ---------- Mobile ---------- */
@media (max-width: 991px){
  #menu-icon i, .mobile-menu i{ color: var(--cp-cyan) !important; }
  .mobile-menu-wrapper{
    background-color: var(--cp-surface) !important;
    border-right: 1px solid var(--cp-cyan);
  }
}

/* ---------- Dezenter Flicker-Loop für den Logo-Glow ---------- */
@keyframes cp-flicker{
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: .55; }
}
#_desktop_logo img{
  animation: cp-flicker 6s infinite;
}