/* ######################################################################### */
/* BLACK MONTH 2024 - LEDpaerer.dk                                          */
/* Opdateret: November 2024                                                 */
/* ######################################################################### */

/* ========================================================================= */
/* CSS VARIABLER                                                             */
/* ========================================================================= */
:root {
    --bm-black: #000;
    --bm-dark: #121212;
    --bm-gray-dark: #222;
    --bm-gray-medium: #333;
    --bm-orange: #ff7d00;
    --bm-white: #fff;
    --bm-green: #72d140;
}

/* ========================================================================= */
/* BAGGRUND & LAYOUT                                                         */
/* ========================================================================= */

body#html-body {
    background-color: var(--bm-black);
}

#fullpagebackground {
    left: 0;
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(/media/campaigns/blackfriday/ledpaerer/blackfridaybackground-test3.jpg);
    background-size: cover; /* RETTET: Fra 'contain' til 'cover' for at fylde hele skærmen */
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    z-index: -10;
    animation: fadeIn 1.2s;
}

@media only screen and (max-width: 991px) {
    #fullpagebackground {
        display: none !important;
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ========================================================================= */
/* TYPOGRAFI                                                                 */
/* ========================================================================= */

h1, h2, h3, h4 {
    color: var(--bm-white) !important;
}

/* ========================================================================= */
/* HEADER & NAVIGATION                                                       */
/* ========================================================================= */

header.page-header.type2.header-newskin {
    background-color: var(--bm-black);
    background: none !important;
}

header .header.content {
    background-color: var(--bm-gray-medium);
}

header nav.navigation.sw-megamenu {
    background-color: var(--bm-gray-dark);
}

.nav-sections {
    background-color: var(--bm-black) !important;
}

@media only screen and (min-width: 768px) {
    .nav-sections {
        background-color: var(--bm-black) !important;
        background: none !important;
    }
}

.page-header.type2 .navigation .level0:hover > .level-top {
    color: var(--bm-gray-medium) !important;
}

.page-header.type2.header-newskin.sticky-header .nav-sections {
    background-color: var(--bm-gray-medium) !important;
}

/* BlackMonth menu highlight */
.sw-megamenu.navigation > ul li:last-of-type a.level-top {
    font-weight: 800;
    text-shadow: 1px 1px 2px #666 !important;
    letter-spacing: 0.03em;
    border: 2px solid var(--bm-orange) !important;
    border-radius: 5px;
    color: var(--bm-white);
    padding: 0 16px;
    line-height: 2 !important;
    background-color: var(--bm-gray-dark) !important;
}

.sw-megamenu.navigation > ul li:last-of-type a.level-top:hover {
    background-color: var(--bm-black) !important;
    color: var(--bm-white) !important;
    text-shadow: none !important;
    border-color: var(--bm-white) !important;
}

.sw-megamenu.navigation > ul li:last-of-type a.level-top:hover span {
    color: var(--bm-white);
}

/* Mobile menu */
@media only screen and (max-width: 991px) {
    .page-header.type2.header-newskin .nav-sections {
        background-color: var(--bm-black);
    }
}

@media only screen and (max-width: 767px) {
    .stickyburgermenu i:before {
        background: none;
        border: none;
    }
    
    li.ui-menu-item.level0.fullwidth:first-of-type,
    li.ui-menu-item.level0.fullwidth {
        border-color: var(--bm-gray-medium);
    }
    
    .navigation .parent .level-top:after {
        color: var(--bm-gray-medium);
    }
    
    .mobile-menu-customerservice ul a li {
        border-color: var(--bm-gray-medium) !important;
    }
    
    .mobile-menu-usp li:first-of-type {
        background-color: var(--bm-black);
        border-color: var(--bm-gray-medium);
        border-top: none;
    }
    
    .mobile-menu-usp li {
        background-color: var(--bm-black);
        border-color: var(--bm-gray-medium);
    }
    
    .mobile-menu-customerservice h3 {
        background-color: var(--bm-black);
    }
    
    .mobile-menu-newsletter {
        background-color: var(--bm-dark);
        border-top: none;
        border-color: var(--bm-gray-medium);
    }
    
    .navigation li.level0 > a.ui-state-active,
    .navigation li.level0 > a.ui-state-active + .submenu {
        background-color: var(--bm-dark);
    }
    
    .page-header.type2 .navigation .level0:hover > .level-top.ui-state-active {
        background-color: var(--bm-black);
    }
    
    .navigation .level0 {
        border-color: var(--bm-gray-medium);
    }
    
    .page-header.type2 .navigation .level0:hover > .level-top {
        color: var(--bm-white) !important;
    }
}

.stickyburgermenu i:before {
    background-color: var(--bm-gray-dark);
    border: 1px solid #121212;
}

/* ========================================================================= */
/* FORSIDE                                                                   */
/* ========================================================================= */

body.cms-ledpaerer_home .newsletter-about-container {
    background-color: var(--bm-black);
    border: 1px solid var(--bm-white);
    border-radius: 5px;
}

body.cms-ledpaerer_home .newsletter-about-container .about-container {
    color: var(--bm-white);
    background-color: var(--bm-black) !important;
    border: none !important;
}

body.cms-ledpaerer_home .newsletter-about-container .newsletter-container {
    background-color: var(--bm-black);
    border: none;
    color: var(--bm-white) !important;
}

body.cms-ledpaerer_home .featured-content-container p {
    color: var(--bm-white) !important;
}

@media only screen and (max-width: 991px) {
    ul.frontpage-mobile-usp li.usp-item,
    ul.frontpage-mobile-usp li.usp-item a {
        color: var(--bm-white) !important;
    }
    
    ul.frontpage-mobile-usp li.usp-item:before {
        filter: invert(100%) saturate(0%) brightness(500%);
    }
}

.gazellecontainer {
    filter: invert(100%) saturate(0%) brightness(200%);
}

/* ========================================================================= */
/* KATEGORI VISNING                                                          */
/* ========================================================================= */

div#narrow-by-list {
    background-color: var(--bm-white);
    margin-bottom: -30px;
    margin-top: 15px;
}

@media only screen and (max-width: 767px) {
    div#narrow-by-list {
        margin-bottom: 0;
        margin-top: 0;
    }
}

.category-description p {
    color: var(--bm-white);
}

.category-description,
.category-articles-container,
.page-wrapper > .breadcrumbs,
.magepow-categories-grid {
    border-color: var(--bm-gray-medium);
}

.sidebar .custom-block {
    background: none;
}

.products-grid .product-item-info .product-item-details .product-item-actions .tocart,
.products-grid .product-item-info .product-item-details .product-item-actions .stock.unavailable {
    width: 180px;
    margin-bottom: 5px;
    border-radius: 0;
}

.category-footer-text {
    color: var(--bm-white) !important;
    border-top: 1px solid var(--bm-gray-medium);
}

.sidebar .sidebar-filterproducts.custom-block {
    background-color: var(--bm-white);
    padding-left: 5px;
    padding-top: 5px;
}

.toolbar .sorter {
    color: var(--bm-white);
}

div#lsCountdownSubTitle,
div#lsCountdownTitle {
    background-color: var(--bm-black) !important;
    color: var(--bm-white) !important;
}

div.lsCountdownContainer {
    border-color: var(--bm-white) !important;
}

.lsCountdownContainer li.amount,
.lsCountdownContainer li.type {
    color: var(--bm-white) !important;
}

.sidebar .filter .filter-current,
.sidebar .filter .block-actions.filter-actions {
    background-color: var(--bm-white);
}

.category-articles-container .category-article-item {
    background-color: var(--bm-gray-medium);
    border-color: var(--bm-gray-medium);
}

.magepow-categories-grid .magepow-categories-category-name,
.category-widget .magepow-categories-category-name {
    background-color: var(--bm-gray-medium);
}

.magepow-categories-grid .magepow-categories-category-name:hover {
    border: none;
    background-color: var(--bm-gray-dark);
    color: var(--bm-white);
}

.magepow-categories-category-image {
    background-color: var(--bm-white);
}

.magepow-categories-category-image img {
    border: none !important;
}

a.action.primary.small[data-role="apply-range"] {
    background-color: var(--bm-gray-medium);
    border: none;
}

a.action.primary.small[data-role="apply-range"]:hover {
    background-color: var(--bm-orange);
}

div.ias_spinner img {
    display: none !important;
}

div.ias_spinner span em {
    color: var(--bm-white) !important;
}

.iass-spinner {
    color: var(--bm-white);
}

.iass-spinner img {
    display: none;
}

body.categorypath-blackfriday .magepow-categories-subcategory-wrapper {
    display: none;
}

/* ========================================================================= */
/* PRODUKT VISNING                                                           */
/* ========================================================================= */

body.catalog-product-view .productsideinfo li.productsideinfo-usp-item {
    color: var(--bm-white) !important;
    border-color: var(--bm-gray-medium);
}

body.catalog-product-view .productsideinfo li.productsideinfo-usp-item a {
    color: var(--bm-white);
}

body.catalog-product-view .productsideinfo .productsideinfo-usp li:nth-child(1):before,
body.catalog-product-view .productsideinfo .productsideinfo-usp li:nth-child(2):before,
body.catalog-product-view .productsideinfo .productsideinfo-usp li:nth-child(3):before,
body.catalog-product-view .productsideinfo .productsideinfo-usp li:nth-child(4):before {
    filter: saturate(0%) brightness(1000%);
}

.product.attribute.overview {
    color: var(--bm-white) !important;
}

.catalog-product-view .product-info-main .price-box .price,
.catalog-product-view .product-info-main .price-box .old-price .price,
.catalog-product-view .product-info-main .price-box span.old-price-label {
    color: var(--bm-white) !important;
}

@media only screen and (max-width: 767px) {
    .catalog-product-view .product-info-main .price-box .price {
        color: var(--bm-white);
    }
}

span.stockStatus.label {
    color: var(--bm-white);
}

.main-product-detail {
    background-color: var(--bm-dark);
    background: none;
    padding-top: 0;
}

.main-product-detail h2.sidebar-title {
    color: #313131 !important;
}

.qty-changer a {
    background-color: var(--bm-white);
}

.product-info-main .product-info-stock-sku {
    color: var(--bm-white);
}

.catalog-product-view .product-info-main .product.overview {
    border-color: var(--bm-gray-medium);
}

.catalog-product-view .stockStatusContainer {
    border-color: var(--bm-gray-medium);
}

strong#block-upsell-heading {
    background-color: var(--bm-black);
    color: var(--bm-white);
}

.catalog-product-view .block.upsell .products-grid .product-item .product.photo.product-item-photo {
    background-color: var(--bm-white);
}

.catalog-product-view span.stockStatus.value.instock {
    color: var(--bm-green);
}

@media only screen and (max-width: 767px) {
    .product.data.items > .item.title[aria-expanded="false"] a.data.switch {
        background-color: var(--bm-white);
        border-radius: 0;
        color: var(--bm-orange);
    }
    
    .product.data.items > .item.title[aria-expanded="true"] a.data.switch {
        border-top: 0 !important;
        margin-top: 5px;
    }
    
    .main-product-detail {
        padding-top: 0;
    }
}

.catalog-product-view .product-splatter {
    right: 0 !important;
    left: 10px !important;
}

@media only screen and (max-width: 767px) {
    .catalog-product-view .product-splatter {
        left: 20% !important;
    }
}

/* ========================================================================= */
/* CHECKOUT                                                                  */
/* ========================================================================= */

div#checkout-top-description div.description,
div#checkout-top-description span,
div#checkout-top-description p {
    color: var(--bm-white) !important;
}

.checkout-index-index .checkout-header .title {
    color: var(--bm-white) !important;
}

.checkout-index-index #checkout {
    background: none !important;
}

.checkout-index-index .amcheckout-title,
.step-title {
    background-color: var(--bm-gray-medium) !important;
}

.checkout-index-index .opc-block-summary {
    border: none !important;
}

/* ========================================================================= */
/* KONTO & CMS SIDER                                                         */
/* ========================================================================= */

body.account .columns,
body.cms-page-view .columns {
    background-color: var(--bm-white);
    padding-left: 15px;
    padding-top: 20px;
    padding-right: 20px;
}

body.account .columns h1,
body.account .columns h2,
body.account .columns h3,
body.account .columns h4,
body.cms-page-view .columns h1,
body.cms-page-view .columns h2,
body.cms-page-view .columns h3,
body.cms-page-view .columns h4 {
    color: var(--bm-black) !important;
}

.bundle-options-container .block-bundle-summary .bundle-summary {
    color: var(--bm-white) !important;
}

/* ========================================================================= */
/* BANNER                                                                    */
/* ========================================================================= */

.bfcat-mainbanner {
    height: 207px;
    width: 100%;
    background-color: var(--bm-black);
    margin-bottom: 10px;
    background-image: url(/media/campaigns/blackfriday/ledpaerer/landingpage/2022/ledpaerer-bf-855x207.jpg);
}

@media only screen and (max-width: 1200px) {
    .bfcat-mainbanner {
        background-image: url(/media/campaigns/blackfriday/ledpaerer/landingpage/2022/ledpaerer-bf-720x207.jpg);
    }
}

@media only screen and (max-width: 991px) {
    .bfcat-mainbanner {
        background-image: url(/media/campaigns/blackfriday/ledpaerer/landingpage/2022/ledpaerer-bf-540x207.jpg);
    }
}

@media only screen and (max-width: 767px) {
    .bfcat-mainbanner {
        background-image: url(/media/campaigns/blackfriday/ledpaerer/landingpage/2022/ledpaerer-bf-520x207.jpg);
    }
}

@media only screen and (max-width: 540px) {
    .bfcat-mainbanner {
        background-color: var(--bm-black);
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 40%;
    }
}

/* ========================================================================= */
/* RELATED PRODUCTS                                                          */
/* ========================================================================= */

div#amrelated-block-7 .product-item-photo {
    background-color: var(--bm-white);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

div#amrelated-block-7 .block-title strong {
    background-color: var(--bm-black);
    color: var(--bm-white);
}

div#hiddenbfcat {
    display: block !important;
}

/* ========================================================================= */
/* BLACK MONTH SPLATTER BADGES                                               */
/* ========================================================================= */

/* 
SPLATTER INFORMATION:
- Gamle splatter: /media/wysiwyg/mix2-stor.png (122x120px)
- Gamle splatter: /media/wysiwyg/mix2-stor-lille.png (62x80px)
- 
- NYE SPLATTER (STØRRE FOR BEDRE SYNLIGHED):
  * Desktop: /media/wysiwyg/blackmonth-2024-desktop1.png (160x160px)
  * Mobil: /media/wysiwyg/blackmonth-2024-mobil1.png (100x100px)
  * Katalog/Søgning: /media/wysiwyg/blackmonth-2024-thumb1.png (80x80px)

VIGTIGT: SKU findes i klassen på .product-splatter elementet
Eksempel: <div class="product-splatter i31-205"></div> betyder SKU = 31-205
*/

/* VIS splatter som standard på alle produkter */

/* Desktop - Produktside */
@media (min-width: 768px) {
    body.catalog-product-view .product-splatter::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
        width: 160px;
        height: 160px;
        background-image: url('https://ledpaerer.dk//media/wysiwyg/blackmonth-2024-desktop1.png');
        background-color: transparent;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* Mobil - Produktside */
@media (max-width: 767px) {
    body.catalog-product-view .product-splatter::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
        width: 100px;
        height: 100px;
        background-image: url('https://ledpaerer.dk//media/wysiwyg/blackmonth-2024-mobil1.png');
        background-color: transparent;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* Søgeresultater */
.product-item-info .product-splatter::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    width: 80px;
    height: 80px;
    background-image: url('https://ledpaerer.dk//media/wysiwyg/blackmonth-2024-thumb1.png');
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Katalog */
body.catalog-category-view .product-item-info .product-splatter::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 100;
    width: 80px;
    height: 80px;
    background-image: url('https://ledpaerer.dk//media/wysiwyg/blackmonth-2024-thumb1.png');
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* SKJUL splatter på nedsatte produkter (automatisk via CSS) */
body.catalog-product-view .product-info-main:has(.special-price) .product-splatter::before,
body.catalog-product-view .columns:has(.special-price) .product-splatter::before,
.product-item-info:has(.special-price) .product-splatter::before,
body.catalog-category-view .product-item-info:has(.special-price) .product-splatter::before {
    content: none !important;
    display: none !important;
}

/* SKJUL splatter på produkter med SKU starter med "02-" (100% CSS!) */
/* SKU er i klassen, f.eks. class="product-splatter i02-123" */
body.catalog-product-view .product-splatter[class*="i02-"]::before,
.product-item-info .product-splatter[class*="i02-"]::before,
body.catalog-category-view .product-item-info .product-splatter[class*="i02-"]::before {
    content: none !important;
    display: none !important;
}

/* Positioning og fjern ALLE baggrunde */
body.catalog-product-view .product-splatter {
    position: relative;
    z-index: 1;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

body.catalog-product-view .product-splatter::after {
    display: none !important;
}

.product-item-info {
    position: relative;
    z-index: 4;
}

body.catalog-category-view .product-item-info {
    position: relative;
    z-index: 2;
}

.product-splatter {
    z-index: 4 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

.product-splatter::after {
    display: none !important;
}

/* ========================================================================= */
/* KATEGORI BESKRIVELSE - MOBIL                                              */
/* ========================================================================= */

@media only screen and (max-width: 767px) {
    .catalog-category-view .category-description {
        max-height: 30000px !important;
        overflow: visible !important;
        border-bottom: 1px solid #ebebeb;
        transition: height 2s;
        margin-bottom: 3px;
    }
    
    .catalog-category-view .longshortdescription {
        display: block !important;
        color: var(--bm-gray-medium);
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        padding: 5px 0;
        font-weight: 600;
        margin: 0 10px 15px 10px;
    }
    
    .catalog-category-view .longshortdescription span:after {
        content: '\f823';
        font-family: 'porto-icons';
        margin-left: 5px;
        font-weight: 500;
    }
    
    .catalog-category-view .longshortdescription span.expanded:after {
        content: '\f820';
    }
    
    .category-description.fullLength {
        overflow: initial !important;
        height: auto;
        max-height: initial;
    }
}

body.catalog-product-view .product.attribute.overview .value span[style*="background-color"],
body.catalog-product-view .product.attribute.description .value span[style*="background-color"],
body.catalog-product-view #description .product.attribute.description .value span[style*="background-color"] {
  background-color: transparent !important;
}



/* ========================================================================= */
/* END OF FILE                                                               */
/* ========================================================================= */