/* ================================
   SEITE KOMPLETT SCHWARZ
   ================================ */
html, body {
    margin: 0;
    padding: 0;
    background: #000 !important;
    color: #00ff7b !important;
}

#multifilter_filters {
    background: #000 !important;
    color: #00ff7b !important;
}

label {
    background: #000 !important;
    color: #00ff7b !important;
}

.page,
.wrapper,
.container,
.content,
.main,
.section {
    background: #000 !important;
}

/* ================================
   BANNER – klein, rund, zentriert
   ================================ */
.blackweek-banner {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

/* ================================
   DESKTOP / MOBILE BILDER
   ================================ */
.banner-desktop {
    display: block;
    width: 100%;
    border-radius: 16px;
}

.banner-mobile {
    display: none;
    width: 100%;
    border-radius: 16px;
}

@media (max-width: 768px) {
    .banner-desktop {
        display: none;
    }
    .banner-mobile {
        display: block;
    }
}

/* ================================
   Bannerbild
   ================================ */
.banner-image {
    width: 100%;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.blackweek-banner:hover .banner-image {
    transform: scale(1.03);
    filter: brightness(1.12);
}

/* ================================
   LEUCHTENDE NEON-LINIEN
   ================================ */
.neon-lines .line {
    position: absolute;
    background: #00ff7b;
    opacity: 0;

    box-shadow:
            0 0 12px #00ff7b,
            0 0 22px rgba(0,255,123,0.65);

    transition:
            width 0.45s ease,
            height 0.45s ease,
            opacity 0.3s ease;
}

/* horizontale Linien */
.line.top, .line.bottom {
    height: 3px;
    width: 0%;
}

.line.top {
    top: 0;
    left: 0;
}

.line.bottom {
    bottom: 0;
    right: 0;
}

/* vertikale Linien */
.line.left, .line.right {
    width: 3px;
    height: 0%;
}

.line.left {
    left: 0;
    bottom: 0;
}

.line.right {
    right: 0;
    top: 0;
}

/* ================================
   GESTAFFELTE ANIMATION
   ================================ */
.blackweek-banner:hover .line.top {
    width: 100%;
    opacity: 1;
    transition-delay: 0s;
}

.blackweek-banner:hover .line.bottom {
    width: 100%;
    opacity: 1;
    transition-delay: 0.20s;
}

.blackweek-banner:hover .line.left {
    height: 100%;
    opacity: 1;
    transition-delay: 0.40s;
}

.blackweek-banner:hover .line.right {
    height: 100%;
    opacity: 1;
    transition-delay: 0.60s;
}

/* ================================
   NEON-ÜBERSCHRIFT
   ================================ */
.neon-outline {
    font-size: 48px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #ffffff;
    text-align: center;
    text-shadow: none;
    transition: text-shadow 0.35s ease, transform 0.25s ease;
}

.neon-outline:hover {
    text-shadow:
            0 0 8px rgba(0,255,123,0.8),
            0 0 18px rgba(0,255,123,0.6),
            0 0 35px rgba(0,255,123,0.4),
            0 0 60px rgba(0,255,123,0.25);
    transform: scale(1.03);
}

/* ================================
   PRODUKTBOXEN KOMPLETT SCHWARZ
   ================================ */
.t-product-box {
    background: #000 !important;
    border: none !important;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.35s ease, transform 0.25s ease;
}

.t-product-box .product-box-data,
.t-product-box .product-box-base,
.t-product-box .product-box-header,
.t-product-box .t-product-box_actions {
    background: #000 !important;
    border: none !important;
}

/* Produktbilder sollen ebenfalls schwarzen Hintergrund haben */
.t-product-box .product-box-picture {
    background: #000 !important;
    border: none !important;
}

.t-product-box .product-box-picture img {
    background: #000 !important;
    padding: 12px;
    border-radius: 8px;
}

/* Titel & Standard Preis */
.t-product-box .product-box-title,
.t-product-box .product-box-title *,
.t-product-box .product-box-price,
.t-product-box .product-box-price * {
    color: #fff !important;
}

/* Aktueller Preis - ROT */
.t-product-box .price-current {
    color: #ff0000 !important;
    font-weight: 900 !important;
}

/* Ersparnis - GRÜN */
.t-product-box .saving {
    color: #00ff7b !important;
}

/* DETAILS Button-Container */
.t-product-box_actions {
    background: #000 !important;
}

.t-product-box_actions .t-button--type-white {
    background: #000 !important;
    color: #00ff7b !important;
    border: 1px solid #00ff7b !important;
}

/* ================================
   OXID WEISSES LEUCHTEN DEAKTIVIEREN
   ================================ */
.t-product-box:hover,
.t-product-box:focus,
.t-product-box:active {
    outline: none !important;
    box-shadow: none;
}

.t-product-box .product-box-data:hover,
.t-product-box .product-box-base:hover {
    box-shadow: none !important;
}

/* ================================
   NEUER GRÜNER GLOW (sichtbar)
   ================================ */
.t-product-box:hover {
    transform: translateY(-4px);
    box-shadow:
            0 0 12px rgba(0,255,123,0.65),
            0 0 25px rgba(0,255,123,0.45),
            0 0 55px rgba(0,255,123,0.25) !important;
}

/* ================================
   SLICK-SLIDER SCHWARZ
   ================================ */
.slick-list,
.slick-track,
.slick-slide,
.slick-slide > div {
    background: #000 !important;
    border: none !important;
}
/* ================================================
   SCHWARZ-FIX FÜR VARIANTEN & SLICK-SLIDER
   ================================================ */

/* Produkt-Varianten-Bereich komplett schwarz */
.product-box-variants,
.product-box-variants * {
    background: #000 !important;
    border: none !important;
}

/* vertikaler Slick Slider (Variantenbilder) */
.slick-vertical,
.slick-vertical * {
    background: #000 !important;
}

/* Slick-List & Slick-Track (verhindert weißen Hintergrund) */
.slick-list,
.slick-list *,
.slick-track,
.slick-track * {
    background: #000 !important;
    border: none !important;
}

/* einzelne Slick-Slides */
.slick-slide,
.slick-slide > div,
.slick-slide > div > div {
    background: #000 !important;
    border: none !important;
}

/* Bildcontainer der Varianten */
.product-box-variants img {
    background: #000 !important;
    padding: 6px;
    border-radius: 6px;
}
/* ================================================
   FIX – Weißer Rand von OXID product-data:before
   ================================================ */

.product-data:before,
.product-data::before,
.t-product-box .product-data:before,
.t-product-box .product-data::before {
    background: #000 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.product-data:hover::before {
    background: #000 !important;
}
.t-product-box .product-box-picture {
    position: relative;
}

.t-product-box .product-box-title,
.t-product-box .product-box-title *,
.t-product-box .product-box-price,
.t-product-box .product-box-price *,
.t-product-box .product-box-savings,
.t-product-box .product-box-savings * {
    color: #00ff7b !important;
    text-shadow:
            0 0 5px rgba(0,255,123,0.8),
            0 0 15px rgba(0,255,123,0.5);
}
.t-product-box .product-box-price .product-box-prices span.lead.text-nowrap {
    font-size: 1.8em !important;
    color: red !important;
    text-shadow:
        0 0 8px rgba(255, 0, 0, 0.8),
        0 0 16px rgba(255, 0, 0, 0.6),
        0 0 24px rgba(255, 0, 0, 0.4) !important;
    margin-left: 7px !important;
}
.t-product-box .product-box-price .product-box-savings {
    margin-top: 0.5rem !important;
}

/* ================================
   SCROLLBAR STYLING - SCHWARZ
   ================================ */
/* Webkit-basierte Browser (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    background: #000 !important;
}

::-webkit-scrollbar-track {
    background: #000 !important;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #00ff7b !important;
    border-radius: 6px;
    border: 2px solid #000;
}

::-webkit-scrollbar-thumb:hover {
    background: #00cc66 !important;
}

::-webkit-scrollbar-corner {
    background: #000 !important;
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #00ff7b #000;
}

/* Spezifisch für Filter-Container */
#multifilter_filters,
#multifilter_filters *,
.filter-container,
.filter-container * {
    scrollbar-width: thin;
    scrollbar-color: #00ff7b #000;
}

#multifilter_filters::-webkit-scrollbar,
.filter-container::-webkit-scrollbar {
    width: 8px;
    background: #000 !important;
}

#multifilter_filters::-webkit-scrollbar-track,
.filter-container::-webkit-scrollbar-track {
    background: #000 !important;
}

#multifilter_filters::-webkit-scrollbar-thumb,
.filter-container::-webkit-scrollbar-thumb {
    background: #00ff7b !important;
    border-radius: 4px;
}

/* ================================
   BRAND LOGOS SICHTBAR MACHEN - DIFFUSE SHADOWS
   ================================ */
/* Universal Brand Logo Styling - diffuse round glow */
.product-box-brand-logo,
.brand-logo,
img.product-box-brand-logo,
img[class*="brand-logo"],
img[src*="adidas"],
img[src*="nike"],
img[src*="puma"],
img[src*="under-armour"],
img[src*="manufacturer"],
img[src*="brand"] {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1.0)) 
            drop-shadow(0 0 16px rgba(255, 255, 255, 0.7)) 
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.4)) !important;
    background: none !important;
    transition: all 0.3s ease !important;
}

/* Hover-Effekt für Brand Logos */
.product-box-brand-logo:hover,
.brand-logo:hover,
img.product-box-brand-logo:hover,
img[class*="brand-logo"]:hover,
img[src*="adidas"]:hover,
img[src*="nike"]:hover,
img[src*="puma"]:hover,
img[src*="under-armour"]:hover,
img[src*="manufacturer"]:hover,
img[src*="brand"]:hover {
    filter: drop-shadow(0 0 10px rgba(0, 255, 123, 0.9)) 
            drop-shadow(0 0 20px rgba(0, 255, 123, 0.6)) 
            drop-shadow(0 0 30px rgba(0, 255, 123, 0.3)) !important;
    transform: scale(1.05) !important;
}

/* ================================
   H1 ÜBERSCHRIFTEN NEON GRÜN
   ================================ */
h1, .page-header h1, .category-headline h1 {
    color: #00ff7b !important;
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    margin: 30px auto !important;
    text-shadow: none !important;
}

/* Responsive H1 für Mobile */
@media (max-width: 768px) {
    h1, .page-header h1, .category-headline h1 {
        font-size: 2.5rem !important;
        letter-spacing: 2px !important;
        margin: 20px auto !important;
    }
}

#tsp_list_header_multifilter_ajax div.category-headline h1 {
    display: none;
}

div.category-count {
    display: none !important;
}

.category-actions .filters-open-btn .btn-default {
    color: #00ff7b !important;
}

#filterresults .filterset .badge-default, #filterresults .filterset .badge-default a {
    color: black !important;
}

.cookie_consent_modal_content__container {
    color: black !important;
}
.cookie_consent_modal_content__container .cookie_consent__categories .custom-control label {
    background: white !important;
    color: black !important;
}
.cookie_consent_modal_content__container .cookie_consent__categories .custom-control label:disabled {
    background: white !important;
    color: #CCCCCC !important;
}