/* ========================================================================
   LedAlbum — Dark Stage Lights Theme Override
   Überschreibt die LedKicker-Farben für das Dark Theme
   ======================================================================== */

:root {
  --blue: #a855f7;
  --blue-hover: #9333ea;
  --blue-light: #1f1b2e;
  --blue-hero: #a855f7;
  --brand: #a855f7;
  --accent: #ec4899;
  --red: #ef4444;
  --gold: #fbbf24;
  --green: #22c55e;
  --ink: #ffffff;
  --dark: #ffffff;
  --gray-2: #d4d4d8;
  --gray-3: #a1a1aa;
  --gray-4: #71717a;
  --muted: #a1a1aa;
  --bg: #0a0a0f;
  --bg-alt: #141420;
  --bg-card: #1a1a2e;
  --bg-card-hover: #252540;
  --border: #2a2a3e;
  --line: #2a2a3e;
}

/* Body + base text */
body {
  background: var(--bg) !important;
  color: #ffffff !important;
}

/* Override specific heading colors from original CSS */
h1, h2, h3, h4 {
  color: #ffffff !important;
}

/* Header sticky */
.site-header, #site-header {
  background: rgba(10, 10, 15, 0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border) !important;
}

.site-header .logo, .site-header a {
  color: #ffffff !important;
}

/* Promo bar gradient */
.promo-bar {
  background: linear-gradient(90deg, #ff006e, #8338ec, #3a86ff) !important;
  color: #ffffff !important;
}

/* Product cards */
.p-card, .bestseller-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.p-card:hover, .bestseller-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.2) !important;
}

.p-card-title, .p-card-price {
  color: #ffffff !important;
}

.p-card-old {
  color: var(--gray-3) !important;
}

/* Buttons */
.btn-primary, .btn-atc, button[class*="btn-"] {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-primary:hover, .btn-atc:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4) !important;
}

/* Variant buttons */
.var-btn {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.var-btn.selected {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.var-btn:hover:not(.selected) {
  border-color: var(--brand) !important;
}

/* Category pills */
.cat-pill, .sort-btn, .filter-pill {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.cat-pill.active, .sort-btn.active, .filter-pill.active {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  border-color: transparent !important;
}

/* Hero section */
.hero, .shop-gallery-wrap {
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
}

/* Product detail page */
.pd {
  background: var(--bg) !important;
}

.pd-title, .pd-price {
  color: #ffffff !important;
}

.pd-accordion summary {
  background: var(--bg-card) !important;
  color: #ffffff !important;
}

.pd-accordion .acc-body {
  background: var(--bg-card) !important;
  color: var(--gray-2) !important;
}

/* Cards in general */
.card {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

.pd-feat span {
  color: #ffffff !important;
}

/* Input fields */
input, textarea, select {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--gray-4) !important;
}

/* Search bar */
.shop-search {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.shop-search input {
  background: transparent !important;
  color: #ffffff !important;
}

/* Mobile menu */
.mobile-nav, .mobile-menu {
  background: var(--bg) !important;
  color: #ffffff !important;
}

/* Footer */
footer, .footer {
  background: #050508 !important;
  color: var(--gray-3) !important;
  border-top: 1px solid var(--border) !important;
}

footer a, .footer a {
  color: var(--gray-2) !important;
}

/* Reviews */
.review-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

/* Video row cards */
.video-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* Breadcrumbs */
.breadcrumbs {
  color: var(--gray-3) !important;
}

.breadcrumbs a {
  color: var(--gray-2) !important;
}

/* Section titles */
.section-header h2, .bestseller-title {
  color: #ffffff !important;
}

/* Sale badge stays punchy */
.p-card-sale {
  background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
}

/* Wishlist heart */
.p-card-wish {
  background: rgba(10, 10, 15, 0.8) !important;
  color: #ffffff !important;
}

.p-card-wish.active {
  color: #ec4899 !important;
}

/* Cost preview box */
.cost-preview, .pd-bundle-banner {
  background: rgba(168, 85, 247, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  color: #ffffff !important;
}

/* Gift wrap / Fan bundle cards */
.pd-giftwrap, .fan-bundle, .zubehoer-wrap label {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.pd-giftwrap:hover, .fan-bundle:hover {
  border-color: var(--brand) !important;
}

.pd-giftwrap input:checked ~ div, .fan-bundle input:checked ~ div {
  color: #ffffff !important;
}

/* Price tag green for accessories */
.pd-giftwrap-price, .fan-bundle-price {
  color: var(--green) !important;
}

/* Modal overlays */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

.modal {
  background: var(--bg-card) !important;
  color: #ffffff !important;
}

/* Loading spinner */
.spinner {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-top-color: var(--brand) !important;
}

/* Delivery info */
.pd-delivery {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

/* Viewers social proof */
.pd-viewers {
  color: var(--gray-3) !important;
}

/* Floating cart */
#floating-cart {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Tag for neon glow effect on hover */
.p-card-img img {
  transition: filter 0.3s !important;
}
.p-card:hover .p-card-img img {
  filter: brightness(1.1) saturate(1.2) !important;
}

/* Chat widget dark */
.chat-widget-frame {
  filter: invert(0.92) hue-rotate(180deg);
}

/* ========================================================================
   Additional Dark Overrides — specific white backgrounds in LedKicker CSS
   ======================================================================== */

/* Header search */
.search-wrap, .search-box, #search-input,
.site-header .search-wrap,
.site-header input[type="search"] {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border-color: var(--border) !important;
}

.site-header .search-wrap input::placeholder,
#search-input::placeholder {
  color: var(--gray-4) !important;
}

/* Hero search form — was white */
.hero-search,
form.hero-search {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

.hero-search input {
  background: transparent !important;
  color: #ffffff !important;
}

.hero-search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.hero-search button {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.hero-search button:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

.hero-search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.hs-item:hover {
  background: var(--bg-card-hover) !important;
}

.hs-item {
  color: #ffffff !important;
  border-color: var(--border) !important;
}

/* Hero primary button — was white */
.hero-btn-primary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.hero-btn-outline {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

/* CTA Card — "Deine Band fehlt?" section */
.cta-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #2a1a3e 100%) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.cta-card h2, .cta-card p {
  color: #ffffff !important;
}

.cta-card p {
  color: var(--gray-2) !important;
}

/* Footer — was light/dark gradient */
.footer-trust {
  background: #050508 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--gray-2) !important;
}

.footer-main {
  background: #050508 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border-top: 1px solid var(--border) !important;
}

.footer-brand p, .footer-col a, .footer-small, .footer-bottom {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-col h4 {
  color: #ffffff !important;
}

.footer-social a {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.footer-social a:hover {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.footer-col a:hover {
  color: #a855f7 !important;
}

/* Gallery arrows */
.gallery-arrow, .thumb-scroll-btn {
  background: rgba(20, 20, 32, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.gallery-arrow:hover, .thumb-scroll-btn:hover {
  background: var(--bg-card-hover) !important;
}

/* Fan bundle card hover */
.fan-bundle {
  background: var(--bg-card) !important;
}

.fan-bundle:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* pd-giftwrap hover (Geschenkverpackung) */
.pd-giftwrap {
  background: var(--bg-card) !important;
}

.pd-giftwrap:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* Utility/promo bar */
.utility-bar {
  background: #141420 !important;
  color: var(--gray-3) !important;
  border-bottom: 1px solid var(--border) !important;
}

.utility-inner {
  color: var(--gray-3) !important;
}

/* Hero social proof stars */
.hero-social-proof {
  color: #ffffff !important;
}

.hero-stars {
  color: #fbbf24 !important;
}

/* Status colors stay semantic but dark */
.status-gray { background: rgba(255,255,255,0.1) !important; color: var(--gray-2) !important; }
.status-orange { background: rgba(234,88,12,0.15) !important; color: #fb923c !important; }
.status-red { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }

/* Category pills & filter pills - dark */
.category-pills, .sort-controls, .filter-bar {
  background: transparent !important;
}

.cat-pill, .sort-btn, .filter-pill {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--gray-2) !important;
}

.cat-pill:hover, .sort-btn:hover, .filter-pill:hover {
  border-color: var(--brand) !important;
  color: #ffffff !important;
}

/* Section backgrounds */
.usp-section, .reviews-section, .bestseller-section {
  background: transparent !important;
}

.usp-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.usp-card h3 {
  color: #ffffff !important;
}

.usp-card p {
  color: var(--gray-3) !important;
}

.usp-icon {
  background: rgba(168, 85, 247, 0.15) !important;
  color: var(--brand) !important;
}

/* Header search — was white */
.search-wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
}

.search-wrapper input {
  color: #ffffff !important;
  caret-color: #a855f7 !important;
}

.search-wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.search-wrapper:focus-within {
  border-color: #a855f7 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.search-wrapper .search-icon,
.search-wrapper svg {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Search results dropdown */
.search-results, .search-dropdown, #search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.search-result-item {
  color: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

.search-result-item:hover {
  background: var(--bg-card-hover) !important;
}

.search-result-item .price {
  color: var(--brand) !important;
}

/* Product Detail Reviews — dark theme override */
.pd-reviews {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pd-reviews-h {
  color: #ffffff !important;
}

.rev-empty, .rev-count, .rev-bar-label, .rev-bar-count, .rev-empty-filter {
  color: var(--gray-3) !important;
}

.rev-avg {
  color: #ffffff !important;
}

.rev-summary {
  border-bottom-color: var(--border) !important;
}

.stars, .stars .star {
  color: #444 !important;
}

.stars .star.filled {
  color: #fbbf24 !important;
}

.rev-bar-row {
  background: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.rev-bar-row:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--border) !important;
}

.rev-bar-row.active {
  background: rgba(251, 191, 36, 0.15) !important;
  border-color: #fbbf24 !important;
}

.rev-bar {
  background: var(--bg-alt) !important;
}

.rev-bar-fill {
  background: #fbbf24 !important;
}

.rev-filter-row {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
}

.rev-filter-active b {
  color: #fbbf24 !important;
}

.rev-filter-clear {
  background: transparent !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

.rev-filter-clear:hover {
  background: #fbbf24 !important;
  color: #0a0a0f !important;
}

/* Single review cards (in list) */
.rev-card {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.rev-title {
  color: #ffffff !important;
}

.rev-text {
  color: var(--gray-2) !important;
}

.rev-meta {
  color: var(--gray-4) !important;
}

.rev-verified {
  color: #22c55e !important;
}

/* Review images */
.rev-img-thumb {
  border-color: var(--border) !important;
}

.rev-img-thumb:hover {
  border-color: #fbbf24 !important;
}

.rev-img-pv-item {
  border-color: var(--border) !important;
}

/* Review form */
.rev-form-wrap {
  border-top-color: var(--border) !important;
}

.rev-form-toggle {
  background: var(--bg-card) !important;
  border: 2px solid var(--brand) !important;
  color: #ffffff !important;
}

.rev-form-wrap[open] .rev-form-toggle {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.rev-form-label {
  color: #ffffff !important;
}

.rev-form input[type=text],
.rev-form textarea {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.rev-form input[type=text]:focus,
.rev-form textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.rev-form input[type=text]::placeholder,
.rev-form textarea::placeholder {
  color: var(--gray-4) !important;
}

.rev-star-btn {
  color: #444 !important;
}

.rev-star-btn:hover,
.rev-star-btn.hover,
.rev-star-btn.selected {
  color: #fbbf24 !important;
}

.rev-file-btn {
  background: var(--bg-alt) !important;
  border: 1px dashed var(--gray-4) !important;
  color: #ffffff !important;
}

.rev-file-btn:hover {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

.rev-file-hint {
  color: var(--gray-4) !important;
}

.rev-show-more {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--brand) !important;
}

.rev-show-more:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: var(--brand) !important;
}

.rev-form-msg.ok {
  color: #22c55e !important;
}

.rev-form-msg.err {
  color: #f87171 !important;
}

/* Also the homepage reviews carousel */
.review-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.review-text {
  color: var(--gray-2) !important;
}

.review-author strong {
  color: #ffffff !important;
}

.review-author span, .review-meta span {
  color: var(--gray-4) !important;
}

.review-avatar {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.reviews-header h2 {
  color: #ffffff !important;
}

.reviews-nav button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.reviews-nav button:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* Cart sidebar / Discount row / Bundle hints */
.discount-row {
  border-top-color: var(--border) !important;
}

.discount-input {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  color: #ffffff !important;
}

.discount-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.discount-input::placeholder {
  color: var(--gray-4) !important;
}

/* "Einloesen" button */
.discount-apply {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.discount-apply:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

.discount-msg.success,
.ct-row.discount {
  color: #22c55e !important;
}

.discount-msg.error {
  color: #f87171 !important;
}

/* Cart bundle hint "Noch X Artikel dazu" */
.ct-bundle-hint {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #e9d5ff !important;
}

/* "Fuege XY hinzu fuer 10%" / bundle add button */
.ct-bundle-btn, .cart-upsell-btn {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* Cart total rows */
.ct-row {
  color: #ffffff !important;
}

.ct-row.total {
  border-top-color: var(--border) !important;
  color: #ffffff !important;
}

.shipping-note {
  color: var(--gray-4) !important;
}

/* Btn-checkout in cart */
.btn-checkout {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

.btn-checkout:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* Cart overlay + sidebar */
.cart-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
}

.cart-sidebar, #cart-panel {
  background: var(--bg) !important;
  color: #ffffff !important;
  border-left: 1px solid var(--border) !important;
}

.cart-header, .cart-footer {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.cart-item {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.cart-item-name {
  color: #ffffff !important;
}

.cart-item-variant, .cart-item-meta {
  color: var(--gray-3) !important;
}

.cart-empty {
  color: var(--gray-3) !important;
}

/* Qty buttons in cart */
.cart-qty-btn, .qty-btn {
  background: var(--bg-alt) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
}

.cart-qty-btn:hover, .qty-btn:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--brand) !important;
}

/* Remove item button */
.cart-item-remove, .remove-btn {
  color: var(--gray-3) !important;
}

.cart-item-remove:hover {
  color: #f87171 !important;
}

/* pd-bundle-banner (3x sparen banner) */
.pd-bundle-banner {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.pd-bundle-text strong {
  color: #e9d5ff !important;
}

.pd-bundle-text span {
  color: var(--gray-2) !important;
}

.pd-bundle-icon {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* btn-outline pages */
.btn-outline {
  background: transparent !important;
  border: 1px solid var(--brand) !important;
  color: var(--brand) !important;
}

.btn-outline:hover {
  background: var(--brand) !important;
  color: #ffffff !important;
}

/* Empty state pages */
.empty-state {
  color: var(--gray-2) !important;
}

.empty-state h2 {
  color: #ffffff !important;
}

.empty-state p {
  color: var(--gray-3) !important;
}

/* Konfigurator page wrapper — dark background */
.konfig-page {
  background: var(--bg) !important;
  color: #ffffff !important;
}

/* Konfigurator embed container */
#led-konfigurator {
  background: var(--bg-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
}

/* Konfigurator internal buttons/inputs — broad overrides */
#led-konfigurator button,
#led-konfigurator input,
#led-konfigurator select,
#led-konfigurator textarea,
#led-konfigurator label,
#led-konfigurator h1,
#led-konfigurator h2,
#led-konfigurator h3,
#led-konfigurator p,
#led-konfigurator span,
#led-konfigurator div {
  color: #ffffff !important;
}

#led-konfigurator input,
#led-konfigurator select,
#led-konfigurator textarea {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
}

#led-konfigurator button[type="submit"],
#led-konfigurator .primary-btn,
#led-konfigurator .btn-primary {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  border: none !important;
  color: #ffffff !important;
}

/* Tracking / Legal page overrides */
.tracking-page, .legal-page {
  background: var(--bg) !important;
  color: #ffffff !important;
}

.tracking-page h1,
.legal-page h1 {
  color: #ffffff !important;
}

.tracking-sub {
  color: var(--gray-3) !important;
}

.f-input {
  background: var(--bg-alt) !important;
  border-color: var(--border) !important;
  color: #ffffff !important;
}

.f-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.f-input::placeholder {
  color: var(--gray-4) !important;
}

.fg label {
  color: #ffffff !important;
}

/* ========================================================================
   Chat Widget Dark Theme Override (.lk-chat-* classes)
   ======================================================================== */

/* Chat window — main panel */
.lk-chat-window {
  background: #141420 !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

/* Chat body/messages area */
.lk-chat-body, .lk-chat-messages {
  background: #141420 !important;
  color: #ffffff !important;
}

/* Form area (name, email, order number inputs) */
.lk-chat-form,
.lk-chat-prechat,
.lk-chat-start-form {
  background: #141420 !important;
  color: #ffffff !important;
}

/* Input fields */
.lk-chat-input,
.lk-chat-window input,
.lk-chat-window textarea,
.lk-chat-window select {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
}

.lk-chat-input:focus,
.lk-chat-window input:focus,
.lk-chat-window textarea:focus {
  border-color: #a855f7 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

.lk-chat-input::placeholder,
.lk-chat-window input::placeholder,
.lk-chat-window textarea::placeholder {
  color: #71717a !important;
}

/* Labels */
.lk-chat-window label,
.lk-chat-label {
  color: #ffffff !important;
  font-weight: 600;
}

/* Bot messages (agent side) */
.lk-chat-msg-bot,
.lk-chat-msg.bot,
.lk-chat-bot-msg {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
}

/* User messages */
.lk-chat-msg-user,
.lk-chat-msg.user,
.lk-chat-user-msg {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* Message sender labels / timestamps */
.lk-chat-msg-meta,
.lk-chat-msg-time,
.lk-chat-timestamp {
  color: #71717a !important;
}

/* Send button */
.lk-chat-send,
.lk-chat-start-btn,
.lk-chat-window button[type='submit'] {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.lk-chat-send:hover,
.lk-chat-start-btn:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* Input footer row (send button + attach) */
.lk-chat-footer,
.lk-chat-input-area,
.lk-chat-input-row {
  background: #141420 !important;
  border-top: 1px solid #2a2a3e !important;
}

/* Attach/emoji buttons */
.lk-chat-attach,
.lk-chat-emoji-btn {
  color: #a1a1aa !important;
  background: transparent !important;
}

.lk-chat-attach:hover,
.lk-chat-emoji-btn:hover {
  color: #ffffff !important;
  background: #2a2a3e !important;
}

/* Optional field hint text "Alle Felder sind optional" */
.lk-chat-window p,
.lk-chat-hint,
.lk-chat-small {
  color: #a1a1aa !important;
}

/* Link in chat */
.lk-chat-link {
  color: #a855f7 !important;
}

.lk-chat-link:hover {
  color: #ec4899 !important;
}

/* Product card in chat (when bot shares a product) */
.lk-chat-product,
.lk-chat-product-card {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

.lk-chat-product-name {
  color: #ffffff !important;
}

.lk-chat-product-price {
  color: #a855f7 !important;
}

/* Image preview in chat */
.lk-chat-preview,
.lk-chat-image-preview {
  background: #1a1a2e !important;
}

/* Typing indicator */
.lk-chat-typing,
.lk-chat-typing-dots {
  color: #a1a1aa !important;
}

/* Scrollbar — subtle dark */
.lk-chat-body::-webkit-scrollbar,
.lk-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.lk-chat-body::-webkit-scrollbar-thumb,
.lk-chat-messages::-webkit-scrollbar-thumb {
  background: #2a2a3e !important;
  border-radius: 3px;
}

.lk-chat-body::-webkit-scrollbar-thumb:hover,
.lk-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #3a3a4e !important;
}

/* Avatar (if any) */
.lk-chat-avatar {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

/* Header already has primary color from chat_primary_color setting — keep */
/* But ensure the X close button is visible */
.lk-chat-header button,
.lk-chat-close {
  color: #ffffff !important;
  background: transparent !important;
}

.lk-chat-header button:hover,
.lk-chat-close:hover {
  background: rgba(255,255,255,0.2) !important;
}

/* Remove any default white body background from parent-reset */
.lk-chat-container {
  background: transparent !important;
}

/* ========================================================================
   Konfigurator Widget (.lr-* classes) — override hardcoded whites
   ======================================================================== */

.lr-url-input {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-url-input::placeholder {
  color: #71717a !important;
}

.lr-url-input:focus {
  border-color: #a855f7 !important;
}

.lr-option-card {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-option-card:hover {
  background: #252540 !important;
  border-color: #a855f7 !important;
}

.lr-option-card.selected {
  background: #2a1a3e !important;
  border-color: #a855f7 !important;
  color: #ffffff !important;
}

/* Any other .lr-* element with hardcoded white */
.lr-upload-area,
.lr-upload-tab,
.lr-step,
.lr-preview,
.lr-summary-row,
.lr-config-section,
.lr-price-box,
.lr-file-btn {
  background: #141420 !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-upload-tab {
  background: #1a1a2e !important;
}

.lr-upload-tab.active {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
}

/* Step indicators — numbers 1, 2, 3 */
.lr-step.active,
.lr-step-active {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.15) !important;
}

/* Labels inside konfigurator */
.lr-label, .lr-step-title, .lr-step-subtitle {
  color: #ffffff !important;
}

.lr-step-subtitle, .lr-help-text, .lr-hint {
  color: #a1a1aa !important;
}

/* Upload drop zone */
.lr-dropzone {
  background: #141420 !important;
  border: 2px dashed #2a2a3e !important;
  color: #ffffff !important;
}

.lr-dropzone:hover {
  border-color: #a855f7 !important;
  background: #1a1a2e !important;
}

/* File button */
.lr-file-btn {
  color: #a855f7 !important;
  background: transparent !important;
}

.lr-file-btn:hover {
  color: #ec4899 !important;
}

/* Primary "Weiter"-Button */
.lr-btn-primary, .lr-next-btn, .lr-add-cart-btn {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  border: none !important;
}

.lr-btn-primary:hover, .lr-next-btn:hover {
  background: linear-gradient(135deg, #9333ea, #db2777) !important;
}

/* Secondary "Zurück"-Button */
.lr-btn-secondary, .lr-back-btn {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
}

.lr-btn-secondary:hover, .lr-back-btn:hover {
  background: #252540 !important;
  border-color: #a855f7 !important;
}

/* Summary table */
.lr-summary-row {
  border-bottom: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

.lr-summary-label {
  color: #a1a1aa !important;
}

.lr-summary-value {
  color: #ffffff !important;
}

.lr-total-row {
  color: #a855f7 !important;
  font-weight: 700;
}

/* Konfigurator — Email capture + step 3 extras */
.lr-email-capture {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: 16px !important;
  color: #ffffff !important;
}

.lr-email-capture label {
  color: #ffffff !important;
  font-weight: 600;
}

.lr-email-subtitle,
.lr-email-capture p {
  color: #a1a1aa !important;
  font-size: 0.85rem;
  margin: 4px 0 8px !important;
}

#lr-email-input,
.lr-email-capture input {
  background: #141420 !important;
  color: #ffffff !important;
  border: 1px solid #2a2a3e !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  width: 100% !important;
}

#lr-email-input:focus {
  border-color: #a855f7 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}

#lr-email-input::placeholder {
  color: #71717a !important;
}

/* Konfigurator Step 3 (summary/extras) — force dark */
.lr-extra-card,
.lr-extras-list,
.lr-extras-item,
.lr-addon-card,
.lr-msg,
.lr-msg.success,
.lr-msg.warning {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border-color: #2a2a3e !important;
}

.lr-msg.success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #86efac !important;
}

.lr-msg.warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

/* Checkbox-style extras on step 3 */
.lr-checkbox-card,
.lr-extra-item,
.lr-toggle-card {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

.lr-checkbox-card:hover,
.lr-extra-item:hover {
  border-color: #a855f7 !important;
  background: #252540 !important;
}

.lr-checkbox-card.selected,
.lr-extra-item.selected,
.lr-checkbox-card.checked {
  border-color: #a855f7 !important;
  background: #2a1a3e !important;
}

/* Description / Help text */
.lr-desc, .lr-extra-desc, .lr-small {
  color: #a1a1aa !important;
}

/* Price on extra cards */
.lr-extra-price, .lr-price {
  color: #a855f7 !important;
  font-weight: 600;
}

/* Step indicator header */
.lr-step-indicator,
.lr-steps {
  background: transparent !important;
}

/* Total summary box */
.lr-total,
.lr-total-box,
.lr-summary-total {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
}

/* Blog article dark theme */
.blog-article {
  color: #ffffff !important;
}

.blog-header h1 {
  color: #ffffff !important;
}

.blog-header time {
  color: #a1a1aa !important;
}

.blog-content {
  color: #d4d4d8 !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  color: #ffffff !important;
  margin-top: 2em !important;
}

.blog-content h2 {
  font-size: 1.5rem !important;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2a3e;
}

.blog-content h3 {
  font-size: 1.2rem !important;
  color: #e9d5ff !important;
}

.blog-content p {
  color: #d4d4d8 !important;
  margin: 0 0 1.2em !important;
}

.blog-content a {
  color: #a855f7 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(168, 85, 247, 0.4) !important;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.blog-content a:hover {
  color: #ec4899 !important;
  text-decoration-color: #ec4899 !important;
}

.blog-content ul, .blog-content ol {
  color: #d4d4d8 !important;
}

.blog-content li {
  color: #d4d4d8 !important;
  margin-bottom: 8px !important;
}

.blog-content li strong {
  color: #ffffff !important;
}

.blog-content strong, .blog-content b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.blog-content em, .blog-content i {
  color: #e9d5ff !important;
}

.blog-content blockquote {
  background: #1a1a2e !important;
  border-left: 3px solid #a855f7 !important;
  color: #d4d4d8 !important;
}

.blog-content code {
  background: #1a1a2e !important;
  color: #ec4899 !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.blog-content pre {
  background: #1a1a2e !important;
  border: 1px solid #2a2a3e !important;
  color: #d4d4d8 !important;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
}

.blog-content hr {
  border: none;
  border-top: 1px solid #2a2a3e !important;
  margin: 2em 0;
}

.blog-footer {
  border-top: 1px solid #2a2a3e !important;
  color: #a1a1aa !important;
}

/* Blog listing grid */
.blog-grid {
  gap: 20px;
}

.blog-card {
  background: #141420 !important;
  border: 1px solid #2a2a3e !important;
  color: #ffffff !important;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}

.blog-card:hover {
  transform: translateY(-2px);
  border-color: #a855f7 !important;
}

.blog-card h3, .blog-card h2 {
  color: #ffffff !important;
}

.blog-card p {
  color: #a1a1aa !important;
}

.blog-card time {
  color: #71717a !important;
}

/* Hero image on blog article */
.blog-hero-img {
  border: 1px solid #2a2a3e !important;
}

/* Product detail accordions — rounded corners */
.pd-accordions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 16px !important;
  margin-top: 16px !important;
}

@media (min-width: 768px) {
  .pd-accordions {
    padding: 0 !important;
  }
}

.pd-accordion {
  border: 1px solid #2a2a3e !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #141420 !important;
  transition: border-color 0.2s;
}

.pd-accordion:hover {
  border-color: #3a3a5e !important;
}

.pd-accordion[open] {
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.pd-accordion summary {
  background: #141420 !important;
  color: #ffffff !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}

.pd-accordion[open] summary {
  border-radius: 12px 12px 0 0 !important;
  background: #1a1a2e !important;
}

.pd-accordion summary::after {
  color: #a855f7 !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
}

.pd-accordion .acc-body {
  background: #141420 !important;
  color: #d4d4d8 !important;
  padding: 16px 20px 20px !important;
  border-radius: 0 0 12px 12px !important;
}

.pd-accordion .acc-body p {
  color: #d4d4d8 !important;
  margin-bottom: 12px;
}

.pd-accordion .acc-body a {
  color: #a855f7 !important;
}

.pd-accordion .acc-body strong {
  color: #ffffff !important;
}

.pd-accordion .acc-body table {
  color: #d4d4d8 !important;
}

.pd-accordion .acc-body th {
  color: #ffffff !important;
  text-align: left;
  padding: 8px 12px 8px 0;
}

.pd-accordion .acc-body td {
  padding: 8px 0;
}

/* Quantity selector — polished dark design */
.qty-row {

  margin-bottom: 16px !important;
}

.qty-box {
  background: #141420 !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s;
}

.qty-box:hover {
  border-color: #a855f7 !important;
}

.qty-box:focus-within {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qty-btn {
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  color: #a1a1aa !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex !important;
  align-items: center !important;

}

.qty-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2)) !important;
  color: #ffffff !important;
}

.qty-btn:active {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  transform: scale(0.95);
}

.qty-val {
  width: 56px !important;
  height: 44px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid #2a2a3e !important;
  border-right: 1px solid #2a2a3e !important;
  outline: none !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
}

.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.qty-val:focus {
  background: rgba(168, 85, 247, 0.08) !important;
}
/* ========================================================================
   LED-Racer Theme — schwarz + violett #7a00df (basierend auf led-racer.com)
   Überschreibt theme-dark.css (LedAlbum purple) mit LED-Racer Farbschema
   ======================================================================== */

:root {
  --blue: #7a00df;
  --blue-hover: #5a00a8;
  --blue-light: #1a0a26;
  --blue-hero: #7a00df;
  --brand: #7a00df;
  --accent: #9d3bff;
  --gold: #f5a623;
  --green: #22c55e;
  --bg: #000000;
  --bg-alt: #0a0a0f;
  --bg-card: #141420;
  --bg-card-hover: #1e1e30;
  --border: #2a2a3e;
  --line: #2a2a3e;
}

/* Body background pure black */
body {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Override the LedAlbum pink/purple gradients with LED-Racer violet */
.promo-bar {
  background: linear-gradient(90deg, #7a00df, #4a008f) !important;
  color: #ffffff !important;
}

/* Buttons — violet gradient instead of pink/purple */
.btn-primary, .btn-atc, button[class*="btn-"]:not(.qty-btn) {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-primary:hover, .btn-atc:hover {
  background: linear-gradient(135deg, #9d3bff, #7a00df) !important;
  box-shadow: 0 4px 20px rgba(122, 0, 223, 0.4) !important;
}

/* Variant buttons selected state */
.var-btn.selected {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.var-btn:hover:not(.selected) {
  border-color: #7a00df !important;
}

/* Category / sort / filter pills */
.cat-pill.active, .sort-btn.active, .filter-pill.active {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
  border-color: transparent !important;
}

.cat-pill:hover, .sort-btn:hover, .filter-pill:hover {
  border-color: #7a00df !important;
}

/* Hero */
.hero, .shop-gallery-wrap {
  background: linear-gradient(135deg, #000000, #0a0a0f, #000000) !important;
}

/* Logo text gradient */
.site-header span[style*="gradient"],
.footer-brand span[style*="gradient"] {
  background: linear-gradient(90deg, #9d3bff, #7a00df, #4a008f) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Hero search */
.hero-search button {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

.hero-search button:hover {
  background: linear-gradient(135deg, #9d3bff, #7a00df) !important;
}

/* Hero primary button */
.hero-btn-primary {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
  color: #ffffff !important;
}

/* Checkout button in cart */
.btn-checkout {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

.btn-checkout:hover {
  background: linear-gradient(135deg, #9d3bff, #7a00df) !important;
}

/* Product card hover border */
.p-card:hover, .bestseller-card:hover {
  border-color: #7a00df !important;
  box-shadow: 0 8px 30px rgba(122, 0, 223, 0.2) !important;
}

/* Wishlist heart active */
.p-card-wish.active {
  color: #7a00df !important;
}

/* Bundle banner */
.pd-bundle-banner {
  background: rgba(122, 0, 223, 0.12) !important;
  border: 1px solid rgba(122, 0, 223, 0.3) !important;
}

.pd-bundle-text strong {
  color: #e0ccff !important;
}

.pd-bundle-icon {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

/* CTA Card */
.cta-card {
  background: linear-gradient(135deg, #0a0a14 0%, #1a0a26 100%) !important;
  border: 1px solid #2a1a3e !important;
}

/* Fan bundle / gift wrap hover */
.fan-bundle:hover, .pd-giftwrap:hover {
  border-color: #7a00df !important;
}

/* Focus states */
.hero-search input:focus,
input:focus, textarea:focus, select:focus {
  border-color: #7a00df !important;
  box-shadow: 0 0 0 3px rgba(122, 0, 223, 0.25) !important;
}

/* Chat widget — LED-Racer purple */
.lk-chat-send, .lk-chat-start-btn,
.lk-chat-window button[type='submit'] {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

.lk-chat-send:hover, .lk-chat-start-btn:hover {
  background: linear-gradient(135deg, #9d3bff, #7a00df) !important;
}

.lk-chat-msg-user, .lk-chat-user-msg {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

/* Zubehoer checkbox labels */
.zubehoer-wrap label {
  border-color: #2a2a3e !important;
}

.zubehoer-wrap label:hover {
  border-color: #7a00df !important;
}

/* Star ratings */
.hero-stars, .stars .star.filled {
  color: #f5a623 !important;
}

/* Discount button */
.discount-apply {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

.discount-apply:hover {
  background: linear-gradient(135deg, #9d3bff, #7a00df) !important;
}

/* Links */
.blog-content a {
  color: #9d3bff !important;
}

.blog-content a:hover {
  color: #7a00df !important;
}

/* Floating cart button */
#floating-cart {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
}

/* Accordion open state */
.pd-accordion[open] {
  border-color: rgba(122, 0, 223, 0.4) !important;
}

.pd-accordion summary::after {
  color: #9d3bff !important;
}

/* Search wrapper */
.search-wrapper:focus-within {
  border-color: #7a00df !important;
  box-shadow: 0 0 0 3px rgba(122, 0, 223, 0.25) !important;
}

/* Shop CTA — LED-Racer Theme */
.shop-cta {
  background: linear-gradient(135deg, #0a0a14 0%, #1a0a26 100%) !important;
  border: 1px solid rgba(122, 0, 223, 0.3) !important;
}
.shop-cta-inner h2 { color: #ffffff !important; }
.shop-cta-inner p { color: #a1a1aa !important; }
.shop-cta-btn {
  background: linear-gradient(135deg, #7a00df, #4a008f) !important;
  color: #ffffff !important;
}
.shop-cta-btn:hover {
  background: linear-gradient(135deg, #9d3bff, #7a00df) !important;
  box-shadow: 0 4px 20px rgba(122, 0, 223, 0.4) !important;
}

/* Cart upsells — dark theme override */
.cart-upsells {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}
.cart-upsells-title {
  color: #ffffff !important;
}
.cart-upsell-card {
  background: var(--bg-alt, #141420) !important;
  border: 1px solid var(--border) !important;
}
.cart-upsell-card .cup-title {
  color: #ffffff !important;
}
.cart-upsell-card .cup-desc {
  color: #a1a1aa !important;
}
.cart-upsell-card .cup-price {
  color: #ffffff !important;
}
.cart-upsell-card .cup-add {
  background: transparent !important;
  border: 1.5px solid #a855f7 !important;
  color: #a855f7 !important;
}
.cart-upsell-card .cup-add:hover {
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}


/* ======================================================
   Product page overrides — unified design fixes
   ====================================================== */

/* Features row: transparent background, no card look */
.pd-features {
  background: transparent !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
.pd-feat {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  color: #d4d4d8 !important;
}
.pd-feat svg {
  flex-shrink: 0 !important;
}

/* Trust badges: transparent */
.pd-badges {
  background: transparent !important;
  border: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
.pd-badge {
  background: transparent !important;
  border: none !important;
  color: #d4d4d8 !important;
  font-size: 0.82rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

/* Payment icons: bigger and transparent */
.pd-payments {
  background: transparent !important;
  border: none !important;
}
.pd-payments img {
  height: 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Full-width accordions and reviews on desktop (pd is 2-col grid) */
@media (min-width: 768px) {
  .pd-imgrid, .pd-accordions {
    grid-column: 1 / -1 !important;
  }
  .pd-reviews-wrap {
    grid-column: 1 / -1 !important;
  }
  #upsell-area {
    grid-column: 1 / -1 !important;
  }
}

/* Product gallery: 4:3 aspect ratio */
.swipe-gallery {
  max-height: none !important;
}
.swipe-slide {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: var(--bg-alt) !important;
  max-height: none !important;
  width: 100% !important;
}
.swipe-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-height: 100% !important;
  height: 100% !important;
}

/* Border radius 8px everywhere */
.btn-atc, .btn-express, .btn-outline {
  border-radius: 8px !important;
}
.qty-btn, .qty-val {
  border-radius: 8px !important;
}
.search-wrapper, #search-input {
  border-radius: 8px !important;
}
.pd-delivery, .pd-bundle-banner {
  border-radius: 8px !important;
}
.pd-giftwrap, .fan-bundle, .pewc-check {
  border-radius: 8px !important;
}

/* Delivery + bundle same visual height as option rows */
.pd-delivery {
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
}
.pd-bundle-banner {
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
}

/* Accordion border radius override to 8px */
.pd-accordion {
  border-radius: 8px !important;
}
.pd-accordion summary {
  border-radius: 8px !important;
}
.pd-accordion[open] summary {
  border-radius: 8px 8px 0 0 !important;
}
.pd-accordion .acc-body {
  border-radius: 0 0 8px 8px !important;
}

/* Thumbnail row: more gap from gallery */
.gallery-thumbs-wrap {
  margin-top: 12px !important;
}
.gallery-thumbs {
  gap: 8px !important;
}
.gallery-thumb {
  border-radius: 6px !important;
}

/* Qty + Price on same row */
.qty-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 14px 0 !important;
}
.qty-price-row .atc-price {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* Product image grid (Größen, Standfuß, Strom) */
.pd-imgrid {
  padding: 0 !important;
  margin-top: 8px !important;
}
.pd-imgrid-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}
.pd-imgrid-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 640px) {
  .pd-imgrid-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.pd-imgrid-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.pd-imgrid-item img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}
.pd-imgrid-item p {
  padding: 8px 10px !important;
  font-size: 0.78rem !important;
  color: var(--gray-2) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* Reviews: full width but constrained by max-width */
.pd-reviews-wrap {
  max-width: 100% !important;
}
.pd-reviews {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* WhatsApp share button — proper green button */
.pd-share-wa {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: transparent !important;
  color: #25D366 !important;
  border: 2px solid #25D366 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.pd-share-wa:hover {
  background: rgba(37,211,102,0.12) !important;
  color: #25D366 !important;
  opacity: 1 !important;
}
.pd-share-wa span {
  text-decoration: none !important;
}

.footer-bottom {
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 16px !important;
}

/* Search bar: full width between logo and icons */
.header-search {
  flex: 1 !important;
  max-width: none !important;
}

/* Nav: single unified background */
.nav-row-cats {
  background: transparent !important;
}

/* Product cards: consistent height — price & button always aligned */
.p-card {
  display: flex !important;
  flex-direction: column !important;
}
.p-card-img {
  flex-shrink: 0 !important;
}
.p-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.p-card-price {
  margin-top: auto !important;
}

/* Quick-buy: both buttons same width & style */
.qb-size {
  width: 100% !important;
  background: #7c3aed !important;
  color: #fff !important;
  border: none !important;
  padding: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius, 8px) !important;
  cursor: pointer !important;
}
.qb-size:hover {
  background: #6d28d9 !important;
  color: #fff !important;
  transform: none !important;
}

/* Search bar: transparent dark to match header */
.search-wrapper {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.search-wrapper input,
#search-input {
  background: transparent !important;
  color: #fff !important;
}
.search-wrapper input::placeholder,
#search-input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
.search-wrapper svg,
.search-wrapper .search-icon {
  color: rgba(255,255,255,0.55) !important;
  stroke: rgba(255,255,255,0.55) !important;
}
.search-wrapper:focus-within {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.4) !important;
  box-shadow: none !important;
}

/* ============ PEWC Options (preloaded to prevent FOUC) ============ */
.pewc-opts{margin:16px 0}
.pewc-group{margin-bottom:14px}
.pewc-label{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#a1a1aa;margin-bottom:8px}
.pewc-cur{font-size:.88rem;font-weight:700;color:transparent;text-transform:none;letter-spacing:0;pointer-events:none}
.pewc-btns{display:flex;flex-wrap:wrap;gap:8px}
.pewc-btn{padding:11px 18px;border:2px solid #2a2a3e;border-radius:10px;background:#1a1a2e;color:#e4e4e7;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1.3;flex:1;min-width:100px;text-align:center}
.pewc-btn:hover{border-color:#a855f7;background:#252540;color:#fff}
.pewc-btn.selected{border-color:#a855f7;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;box-shadow:0 4px 12px rgba(168,85,247,.3)}
.pewc-check{display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #2a2a3e;border-radius:8px;cursor:pointer;margin-top:8px;font-size:.9rem;font-weight:500;transition:border-color .15s;background:#1a1a2e;color:#e4e4e7}
.pewc-check:hover{border-color:#a855f7}
.pewc-check input{width:16px;height:16px;accent-color:#a855f7;cursor:pointer;flex-shrink:0}
.zubehoer-wrap{margin-top:12px;padding-top:12px;border-top:1px dashed #2a2a3e}
.pd-giftwrap{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid #2a2a3e;border-radius:10px;cursor:pointer;margin-top:10px;background:#1a1a2e;transition:all .15s}
.pd-giftwrap:hover{border-color:#a855f7;background:#252540}
.pd-giftwrap input{width:18px;height:18px;accent-color:#a855f7;cursor:pointer;flex-shrink:0}
.pd-giftwrap-info{flex:1}
.pd-giftwrap-title{font-size:.95rem;font-weight:700;color:#e4e4e7}
.pd-giftwrap-desc{font-size:.78rem;color:#a1a1aa;margin-top:2px}
.pd-giftwrap-price{font-weight:700;color:#a855f7}
.fan-bundle{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid #2a2a3e;border-radius:10px;cursor:pointer;margin-top:10px;background:#1a1a2e;transition:all .15s}
.fan-bundle:hover{border-color:#a855f7;background:#252540}
.fan-bundle input{width:18px;height:18px;accent-color:#a855f7;cursor:pointer;flex-shrink:0}
.fan-bundle-info{flex:1}
.fan-bundle-title{font-size:.95rem;font-weight:700;color:#e4e4e7}
.fan-bundle-desc{font-size:.78rem;color:#a1a1aa;margin-top:2px}
.fan-bundle-price{font-weight:700;color:#a855f7}
.var-group{margin-bottom:14px}
.var-label{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#a1a1aa;margin-bottom:8px}
.var-buttons{display:flex;flex-wrap:wrap;gap:8px}
.var-btn{padding:11px 18px;border:2px solid #2a2a3e;border-radius:10px;background:#1a1a2e;color:#e4e4e7;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:normal;line-height:1.3;flex:1;min-width:80px;text-align:center;max-width:100%;word-break:break-word}
.var-btn[data-attr="Paket"]{flex:1 1 100%;font-size:.78rem;padding:8px 12px}
.var-btn:hover{border-color:#a855f7;background:#252540;color:#fff}
.var-btn.selected{border-color:#a855f7;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;box-shadow:0 4px 12px rgba(168,85,247,.3)}

/* Plain text features line */
.pd-feat-line {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin: 4px 0 12px;
  line-height: 1.5;
}

/* Kostenloser Versand note under price */
.pd-versand-note {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin: 2px 0 10px;
}

/* WhatsApp: small subtle text link */
.pd-share-wa-small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: #52525b;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 0;
  margin: 8px 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
  text-decoration: none;
}
.pd-share-wa-small:hover {
  opacity: 1;
  color: #25D366;
}

/* Features grid — text only, white, 4 columns */
.pd-feat-txt {
  font-size: 0.82rem;
  color: #fff;
  text-align: center;
  padding: 8px 4px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
}

/* Bundle banner: transparent bg, stronger lila border */
.pd-bundle-banner {
  background: transparent !important;
  border: 2px solid rgba(122, 0, 223, 0.6) !important;
  border-radius: 8px !important;
}
.pd-bundle-text span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
}

/* Bundle text: einzeilig */
.pd-bundle-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.pd-bundle-text strong,
.pd-bundle-text span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline !important;
}

/* Fan-Paket: grüner Haken wie Batterien/Netzstecker */
.fan-bundle input[type=checkbox] {
  accent-color: #22c55e !important;
}
.pd-giftwrap input[type=checkbox] {
  accent-color: #22c55e !important;
}

/* Gestrichelte Linie auch unten */
.zubehoer-wrap {
  border-bottom: 1px dashed #2a2a3e !important;
  padding-bottom: 12px !important;
}

/* Gestrichelte Linie unten nach Fan-Paket, nicht nach Zubehoer */
.zubehoer-wrap {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.pd-extras {
  border-bottom: 1px dashed #2a2a3e !important;
  padding-bottom: 12px !important;
}

/* Gleiche Abstände oben und unten */
.pd-extras {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}

/* pd-extras: symmetrische Abstände oben/unten wie zubehoer-wrap */
.pd-extras {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
.zubehoer-wrap {
  margin-bottom: 0 !important;
}
.fan-bundle {
  margin-bottom: 0 !important;
}
/* Wrapper-Linie: unter Fan-Paket, gleicher Abstand wie oben */
#pd-extras-wrap {
  border-bottom: 1px dashed #2a2a3e;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* Empfehlungen: volle Breite im pd-Grid, wie pd-imgrid */
#upsell-area {
  grid-column: 1 / -1;
}
#upsell-area .upsell {
  margin: 24px 0 8px;
}
#upsell-area .upsell h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
}
#upsell-area .upsell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media(max-width: 767px) {
  #upsell-area .upsell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Bundle banner: responsive text für mobile */
@media (max-width: 600px) {
  .pd-bundle-text {
    white-space: normal !important;
    flex-wrap: wrap !important;
  }
  .pd-bundle-text strong,
  .pd-bundle-text span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.78em !important;
  }
}

/* Produktdetails: seitlicher Abstand auf mobile (wie Akkordion) */
@media (max-width: 767px) {
  .pd-info {
    padding: 0 16px !important;
  }
}

/* Force pd-info padding on mobile — higher specificity */
@media (max-width: 767px) {
  .pd .pd-info {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===============================================================
   Discount Slide-Up Banner (timer-gesteuert) — Dark Theme Override
   (Fix: --dark ist im Racer-Theme weiß, deshalb war der Titel-Text unsichtbar)
   =============================================================== */
.discount-banner-inner {
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(168,85,247,.15);
  color: #fff;
}
.discount-banner-title {
  color: #ffffff !important;
}
.discount-banner-code {
  background: rgba(168, 85, 247, 0.18) !important;
  color: var(--brand) !important;
  letter-spacing: 0.02em;
}
.discount-banner-cta {
  background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.discount-banner-cta:hover {
  filter: brightness(1.12);
  background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
}
.discount-banner-close {
  color: var(--gray-3) !important;
}
.discount-banner-close:hover {
  color: #fff !important;
}

/* ===============================================================
   Social-Toast 'xy aus Berlin hat \u2026 bestellt' — Dark Override
   =============================================================== */
.pd-social-toast {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.12);
  color: #fff !important;
}
.pd-toast-text strong {
  color: #ffffff !important;
}
.pd-toast-text span {
  color: var(--gray-2) !important;
}
.pd-social-toast img {
  border: 1px solid var(--border);
}

/* Homepage: hide products 5-8 on mobile (show only 4 = 2x2 grid) */
@media(max-width:767px){
  #home-products .p-card:nth-child(n+5){display:none !important;}
}