/* plaats je maatwerk CSS hieronder */
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap');
:root {
 	--site-nav-height: 60px; 
  	--site-nav-image-height: 50px;
}

/* ruimte tussen USP's & WWK iframe */
.productinfo_article_usps iframe {
 	margin-top: 1rem; 
}

@media screen and (min-width: 1200px) and (max-width: 1450px) {
 	.site-nav {
    	--site-nav-item-padding-x: 0;
  	}
}

@media screen and (min-width: 1200px) {
  	.site-nav .site-nav-item--level-0 .site-nav-item-link--level-0::before {
      	height: var(--site-nav-image-height);
  	}
  
  	/* Smartshop */
 	.site-nav .item2 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/smartshop.png);  
  	}
  
  	/* Headshop */
  	.site-nav .item3 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/headshop.png);
  	}
  
  	/* Herbshop */
  	.site-nav .item4 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/herbshop.png);
  	}
  
  	/* Healthshop */
  	.site-nav .item5 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/healthshop.png);
  	}
  
  	/* Shroomshop */
  	.site-nav .item6 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/shroomshop.png);
  	}
  
  	/* Kratom */
  	.site-nav .item7 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/kratom.png);
  	}
  
  	/* Ayahuasca */
  	.site-nav .item8 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/ayahuasca.png);
  	}
  
  	/* Vaporshop */
  	.site-nav .item9 .site-nav-item-link--level-0::before {
    	content: url(/images/cat/vaporshop.png);
  	}
  
  	/* carets achter dropdown items in menu weghalen */
  	.site-nav-item-link .st-icon {
    	display: none;  
  	}
}

/* Menu items font settings */
.site-nav-item-link,
.mega-menu__list-heading,
.mega-menu__list-item-link {
 	font-family: var(--heading-font-stack); 
  	font-weight: var(--font-weight-bold);
  	text-transform: uppercase; 
}

/* Mega menu achtergrondkleur veranderen */
.mega-menu {
 	background-color: var(--nav-items-bg-color); 
}

/* Mega menu borderkleur veranderen */
.site-nav-item--level-0:hover .mega-menu, 
.site-nav-item--level-0.js-hover .mega-menu {
	--mega-menu-box-shadow-border-color: var(--nav-items-bg-color);
}

/* Mega menu tekstkleur veranderen */
.hasNoSubChilds .mega-menu__list-heading, 
.mega-menu__list-item-link {
 	--mega-menu-link-color: var(--nav-text-color);
  	--mega-menu-link-color-hover: var(--nav-text-color-hover);
}
.hasSubChilds .mega-menu__list-heading {
	--mega-menu-heading-color: var(--nav-text-color);
  	--mega-menu-heading-color-hover: var(--nav-text-color-hover);
}

/* Mega menu items border veranderen */
.site-nav-item--level-0 {
 	 border: 1px solid var(--nav-bg-color);
}

/* Mega menu items hover border veranderen */
.site-nav-item--level-0:hover,
.site-nav-item--level-0.js-hover {
 	 border: 1px solid var(--nav-items-bg-color);
}

/*saletag*/
.productinfo-image-item .layover img, .productinfo-image-item #artikellayover img {
	max-width: 75% !important;  
}

.layover img, #artikellayover img{
  	bottom: unset;
}

.header-bottom_usps li {
 	color: var(--grey-50); 
}

@media screen and (max-width: 1199px) {
 	.header-bottom_usps {
   		overflow-x: auto;   
  	}
  
  	.header-bottom_usps ul {
   		width: max-content;
    	gap: var(--st-spacing-md);  
  	}
}

.section-header {
    border-bottom: 2px solid #000;
}

.bs-container {
    max-width: 1400px!important;
}

.site-nav-item--level-0.js-hover .dropdown-menu {
    display: block;
    background: #242424;
}

.site-nav .dropdown-item {
    --bs-dropdown-item-padding-x: clamp(1rem, var(--site-nav-item-padding-x), 1.5rem);
    color: #fff!important;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
    text-decoration: underline;
    background: none!important;
}

.wrapper:not(.full), #slider-homepage.standaard, .bs-container {
    width: 98%!important;
    max-width: 1400px!important;
}

.card-title {
    font-weight: var(--card-font-weight);
    font-size: 22px;
    line-height: 23px;
    color: #fff;
}

.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.card-supporting-dark .card-body {
 color: #ffffff;
}

.card.card-supporting-dark {
    --bs-card-bg: var(--supporting-800);
    --bs-card-color: var(--supporting-50);
    background: #252525;
}

.blog-card .card-body {
  color:#000;
}

.blog-card .card-title {
    font-weight: var(--card-font-weight);
    font-size: 22px;
    line-height: 23px;
    color: #000;
}

[id^=column_] .box_top, [id^=column_] .box_top a {
    color: var(--body-text-color);
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

[id^=column_] .box_content li {
    line-height: 1em;
    padding-block: 0.3em;
}

.prose :where(h1):not(:where([class~=not-prose] *)) {
    margin-top: 0;
    margin-bottom: 0px;
    line-height: 1.1;
}

.prose :where(p):not(:where([class~=not-prose] *)) {
    margin-top: 3px;
    margin-bottom: 1.25em;
}

@media screen and (max-width: 1000px){ 
.st_homepage:not(:has(.header_bottom)) .widget-wrapper, body:not(:has(.header_bottom)) .wrapper.content {
    margin-block-start: 84px!important;
  }} 

/* PDP article USP's box content styling */
.productinfo_article_usps>:where(:first-child) {
    margin-top: 0;
}

.productinfo_article_usps :where(p) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.productinfo_article_usps table {
 	margin-bottom: 1rem; 
}

.productinfo_article_usps ul {
 	padding: 0 !important;
  	border: none !important;
}

.cb-configure{
    font-size:14px;
    color:#808080;
}


@media only screen and (min-width: 900px) {
    .salebalk {
        display:none
    }
}

.salebalk {
    color: #fff;
    text-align: center;
    padding: 3px;
    background: #cb2642;
    font-weight: 700;
}

.salebalk span {
    color: #000;
}


.salebalk a {
    color: #fff;
}


@media only screen and (max-width: 900px) {
  .wrapper.header_bottom, .wrapper.content {
    color: var(--body-text-color);
    padding-bottom: 10px;
}
  .tgfloat{
    display:none;
}
  .header_bottom {
    margin-block-start: calc(var(--header-mobile-height) + var(--header-review-widget-mobile-wwk-height) + 10px);
}
}


.blog-post-content h2{
    border-bottom:1px solid #000;
}

.blog-post-content p{
    margin-bottom:
}

.blog-post-content h3{
    margin-top:10px;
    color:#f0514c;
}

.products_gallery_row_imagecontainer{
  max-height:150px;
}


  @media screen and (min-width: 768px) {
        .widget-slideshow-e18d63fb-9961-40db-aabc-29504e5cc738 .slideshow-slide img,
        .widget-slideshow-e18d63fb-9961-40db-aabc-29504e5cc738 .slide-container  {
            height: auto!important;
        }
    }

@media screen and (max-width: 1000px) {
    .st_homepage:not(:has(.header_bottom)) .widget-wrapper, body:not(:has(.header_bottom)) .wrapper.content {
        margin-block-start: 0px!important;
    }
}

@media only screen and (max-width: 900px) {
    .header_bottom {
        margin-block-start: 10px;
    }
  
  .socialshare-button-container{
    display:none;
  }
}

.homebalk{
    text-align:center;
    padding:10px;
    border:1px solid #000;
    background:#ffb874;
    margin-top:10px;
    font-size:17px;
    font-weight:bold;
}

.homebalk a{
  text-decoration:underline;
  color:#000;
}
.salebalk a{
  text-decoration:underline;
}

@media only screen and (max-width: 900px) {
    .homebalk {
        display:none
    }
}

.st_homepage .homebalk{
  display:none;
}

.c-enormail-webform--96f7139b51c43cc52e42a4f263be926b .c-enormail-webform__content {
    max-width: 257px !important;
}
/* ========================================
   TOPMENU STYLING - BEGIN
   #menu_top
   ======================================== */

#menu_top {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Alleen de directe ul in menu_top, niet geneste dropdowns */
#menu_top > ul,
#menu_top .topmenu-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

#menu_top > ul > li,
#menu_top .topmenu-nav > li {
    display: inline-block;
}

#menu_top > ul > li > a,
#menu_top .topmenu-nav > li > a {
    text-decoration: none;
    white-space: nowrap;
}

/* ========================================
   TOPMENU STYLING - EINDE
   #menu_top
   ======================================== */

/* ========================================
   ADD TO CART BUTTON - PRODUCTPAGINA - BEGIN
   .configuration_button_productinfo
   Alleen desktop (992px en breder)
   ======================================== */

@media screen and (min-width: 992px) {
    button.configuration_button_productinfo {
        padding: 15px 30px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease !important;
    }

    button.configuration_button_productinfo:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }

    button.configuration_button_productinfo:active {
        transform: scale(0.98);
    }
}

/* ========================================
   ADD TO CART BUTTON - PRODUCTPAGINA - EINDE
   ======================================== */

/* ========================================
   DROPDOWN MENU STYLING - BEGIN
   .site-nav .dropdown-menu
   Modern 2026 Design
   ======================================== */

.site-nav .dropdown-menu.menu-dropdown {
    border-radius: 12px;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(36, 36, 36, 0.95);
    animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-nav .dropdown-menu .dropdown-item {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 2px 0;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
}

.site-nav .dropdown-menu .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(240, 81, 76, 0.2), rgba(240, 81, 76, 0.1));
    color: #fff;
    transform: translateX(4px);
}

.site-nav .dropdown-menu .dropdown-item.menu-backlink {
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-radius: 8px 8px 0 0;
}

/* ========================================
   DROPDOWN MENU STYLING - EINDE
   ======================================== */

/* ========================================
   NAVIGATIEBALK STYLING - BEGIN
   .site-nav
   Modern 2026 Design
   ======================================== */

.site-nav.site-nav-header-big {
    background: linear-gradient(180deg, rgba(36, 36, 36, 1) 0%, rgba(28, 28, 28, 1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.site-nav .site-nav-item-link--level-0 {
    position: relative;
    padding: 14px 18px;
    border-radius: 8px;
    margin: 4px 2px;
    transition: all 0.2s ease;
}

.site-nav .site-nav-item-link--level-0:hover {
    background: rgba(255, 255, 255, 0.08);
}

.site-nav .site-nav-item-link--level-0::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #f0514c, #ff7b6b);
    border-radius: 2px;
    transition: all 0.25s ease;
    transform: translateX(-50%);
}

.site-nav .site-nav-item-link--level-0:hover::after {
    width: calc(100% - 36px);
}

.site-nav .site-nav-item--level-0.js-hover .site-nav-item-link--level-0,
.site-nav .site-nav-item--level-0:hover .site-nav-item-link--level-0 {
    background: rgba(255, 255, 255, 0.08);
}

/* ========================================
   NAVIGATIEBALK STYLING - EINDE
   ======================================== */

/* ========================================
   HOME ICON VERBERGEN - BEGIN
   .site-nav .home-icon
   ======================================== */

.site-nav .item-insert-jquery,
.site-nav a.home-icon {
    display: none !important;
}

/* ========================================
   HOME ICON VERBERGEN - EINDE
   ======================================== */
/* ========================================
   PROMO BANNER - BEGIN
   body::before
   ======================================== */

body::before {
    content: "Use code FIFTEENOFF for 15% off your order!";
    display: block;
    background: linear-gradient(90deg, #f0514c 0%, #d4453f 100%);
    color: #fff;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ========================================
   PROMO BANNER - EINDE
   ======================================== */