/*
 Theme Name:     2Special
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    2Special customizations
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    padding-bottom: 0!important;
}

a.custom-menu-item {
	gap:2px!important;
	display: flex;
    align-items: center;	
}

a.custom-menu-item:after {
	content:"";
	height: 2px;
	width: 10%;
	background-color: var(--gcid-primary-color);
	transition: all 0.3s ease-in-out;	
	opacity:0;
}

.page-id-155 .assortiment, .page-id-137 .innovatie  {
	font-weight:600!important;
}

a.custom-menu-item:hover::after, .page-id-155 .assortiment:after, .page-id-137 .innovatie:after  {
	content:"";
	height: 2px;
	width: 100%;
	opacity:1;
}

/*custom-form*/
.custom-form input[type=text], .custom-form input[type=submit], .custom-form input[type=password], .custom-form input[type=email],
.custom-form textarea, .custom-form select {
    border: 1px solid var(--gcid-secondary-color)!important; 
    border-radius: var(--gvid-02btnzqr3w)!important;
    background-color: var(--gcid-a8e8fda6hx)!important;
    padding-left: 8px!important;
    padding-right: 8px!important;
    font-size: var(--gvid-lqgkjswesl)!important;
	box-shadow: none!important;
}

.custom-form input[type=text], .custom-form .ts-control, .custom-form select, .custom-form input[type=submit], .custom-form input[type=password], .custom-form input[type=email]{
    height:50px!important;
	align-items:center;
}

.custom-form input[type=submit]{
	background-color: var(--gcid-wx2zsc1nh5)!important;
	color:var(--gcid-body-color)!important;
	border-radius: var(--gvid-hbrhq32dvr)!important;
	font-weight:600!important;
	padding-left: var(--gvid-329kglfclx)!important;
	padding-right: var(--gvid-329kglfclx)!important;
}


.gform-theme--foundation .gform_fields {
	    row-gap: 12px!important;
}

/* start assortiment hover columns */
.row-column-hovers .et_pb_column .et_pb_text {
	transition: all 0.3s ease-in-out;
}

.row-column-hovers .et_pb_column:hover {
	cursor:pointer;
}

.row-column-hovers .et_pb_column:hover .et_pb_text {
	background-color: var(--gcid-primary-color);
	color:white;
}

/* end assortiment hover columns */

.hover-group:hover {
	cursor:pointer
}

.hover-group .text, .hover-group .number {
	transition: all 0.3s ease-in-out;
}

.hover-group:hover .text, .hover-group.active .text {
	color:white;
}
.hover-group:hover .number, .hover-group.active .number {
	    background-color: var(--gcid-secondary-color);
}

/* =========================
   Bulbs Gallery - Layout
========================= */

.bulbs-gallery {
    width: 100%;
    animation: bulbsGalleryFadeIn 0.45s ease both;
}

@keyframes bulbsGalleryFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bulbs-gallery a {
    cursor: zoom-in;
}

.bulbs-gallery-main {
    margin-bottom: 14px;
}

.bulbs-gallery-main a {
    display: block;
    overflow: hidden;
    border-radius: 18px;

    transition:

        transform 0.35s ease;
}

.bulbs-gallery-main img {
    width: 100%;
    height: 520px;
    object-fit: contain;
    display: block;
    transition:
        transform 0.45s ease,
        opacity 0.35s ease;
}

.bulbs-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bulbs-gallery-thumbs a {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #f5f5f5;
    aspect-ratio: 1 / 1;

    transition:

        transform 0.35s ease,
        opacity 0.35s ease;
}

.bulbs-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition:
        transform 0.45s ease,
        opacity 0.35s ease;
}


/* =========================
   Bulbs Gallery - Hover
========================= */

@media (hover: hover) {

    .bulbs-gallery-main a:hover img {
        transform: scale(1.025);
    }

    .bulbs-gallery-thumbs a:hover {
        transform: translateY(-2px);
    }

    .bulbs-gallery-thumbs a:hover img {
        transform: scale(1.035);
        opacity: 0.96;
    }

}


/* =========================
   Lightbox - Overlay
========================= */

.bulbs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;
    background: rgba(0, 0, 0, 0.88);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.bulbs-lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.bulbs-lightbox-open {
    overflow: hidden;
}


/* =========================
   Lightbox - Image
========================= */



.bulbs-lightbox-stage {
    position: relative;
    width: 85vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulbs-lightbox-image {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.36s ease, transform 0.36s ease;
    border-radius: 14px;
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55);
}

.bulbs-lightbox-image.is-visible {
    opacity: 1;
    transform: scale(1);
}






/* =========================
   Lightbox - Buttons
========================= */

.bulbs-lightbox-close,
.bulbs-lightbox-prev,
.bulbs-lightbox-next {
    position: fixed;
    z-index: 1000000;

    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #111111;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.82;

    transition:
        background 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.bulbs-lightbox-close:hover,
.bulbs-lightbox-prev:hover,
.bulbs-lightbox-next:hover {
    background: #ffffff;
    opacity: 1;
}

.bulbs-lightbox-close {
    top: 22px;
    right: 26px;

    width: 46px;
    height: 46px;

    border-radius: 50%;
    font-size: 34px;
    line-height: 1;
}

.bulbs-lightbox-close:hover {
    transform: scale(1.04);
}

.bulbs-lightbox-prev,
.bulbs-lightbox-next {
    top: 50%;

    width: 52px;
    height: 52px;

    border-radius: 50%;
    font-size: 42px;
    line-height: 1;

    transform: translateY(-50%);
}

.bulbs-lightbox-prev:hover,
.bulbs-lightbox-next:hover {
    transform: translateY(-50%) scale(1.04);
}

.bulbs-lightbox-prev {
    left: 24px;
}

.bulbs-lightbox-next {
    right: 24px;
}


/* =========================
   Accessibility
========================= */

.bulbs-gallery a:focus-visible,
.bulbs-lightbox-close:focus-visible,
.bulbs-lightbox-prev:focus-visible,
.bulbs-lightbox-next:focus-visible {
    outline: 3px solid #8ca85c;
    outline-offset: 3px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 768px) {

    .bulbs-gallery-main img {
        height: 360px;
    }

    .bulbs-gallery-thumbs {
        gap: 8px;
    }

    .bulbs-lightbox {
        padding: 18px;
    }

    .bulbs-lightbox-close {
        top: 14px;
        right: 14px;

        width: 42px;
        height: 42px;

        font-size: 30px;
    }

    .bulbs-lightbox-prev,
    .bulbs-lightbox-next {
        width: 44px;
        height: 44px;
        font-size: 34px;
    }

    .bulbs-lightbox-prev {
        left: 12px;
    }

    .bulbs-lightbox-next {
        right: 12px;
    }

}

@media (max-width: 480px) {

    .bulbs-gallery-main img {
        height: 300px;
    }

}

/*alternatives*/

/*.bulbs-alternatives-grid {

display: flex;
    justify-content: space-between;
	gap:var(--gvid-zv9vf59ujj);

}*/

.bulbs-alternative-card {
	    display: flex;
    flex-direction: column;
    align-items: center;
}

/* search results */

.bulbs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.bulbs-grid a img, .bulbs-gallery img {
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    z-index:1;
}

.bulbs-grid a:hover img, .bulbs-gallery img:hover  {
    transform: scale(1.05);
}

.bulbs-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px,.5vw,9.6px);

}

.bulbs-grid a h2 {
    padding-top: var(--gvid-tlycafk96n) !important;
    padding-right: var(--gvid-329kglfclx) !important;
    padding-bottom: var(--gvid-tlycafk96n) !important;
    padding-left: var(--gvid-329kglfclx) !important;
    border-top-left-radius: var(--gvid-hbrhq32dvr);
    border-top-right-radius: var(--gvid-hbrhq32dvr);
    border-bottom-left-radius: var(--gvid-hbrhq32dvr);
    border-bottom-right-radius: var(--gvid-hbrhq32dvr);
    border-width: var(--gvid-njervhkp41);  
    line-height: var(--et_global_body_font_height);
    width: 100%;
    display: flex;
    justify-content: center;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
    transition-delay: 0ms;
    font-size: var(--gvid-isna6qo6n3);
    z-index:2;
}

.bulbs-grid a:hover h2 {
    background: var(--gcid-primary-color);
    color:white;
  
}

.product_specs .et_pb_group>div:first-child {
    max-width:200px;
    width:200px;
}

.wp-block-search-filter-control {
    display: flex;
    align-items: center;
    padding-top:2rem;
}

.search-column {
        gap: .5rem;
    display: flex;
    flex-direction: column;
    font-size:    font-size: var(--gvid-isna6qo6n3)!important;
}



/* toggles */

/* Alle filter-inhoud standaard dicht */
.search-column .search-filter-field__input {
    display: none;
}

/* Zoekveld altijd zichtbaar */
.search-column .wp-block-search-filter-search-text .search-filter-field__input {
    display: flex;
}

/* Klikbare headers */
.search-column .search-filter-label {
    cursor: pointer;
    padding: 12px;
    background: #e5dbcd;
    margin:0!important;
   
    border-radius:8px;
}

.search-column .search-filter-label, .search-filter-input-text,
.search-filter-input-checkbox *,
.search-filter-component-range-slider__range-text, 
.search-filter-input-text__input::placeholder,
.search-filter-input-text::placeholder,
.search-filter-component-combobox__actions-input::placeholder,
.search-filter-component-combobox__actions-input {
    font-size: var(--gvid-isna6qo6n3)!important;
}

.search-column .search-filter-label::after {
    content: '+';
    float: right;
}

.search-column .search-filter-label.active::after {
    content: '−';
}

.search-filter-input-group, .search-filter-component-combobox, .search-filter-component-range-slider {
    margin-top:.5rem;
    margin-bottom:1rem;
}