/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* Header styling */
.e-n-menu-item .e-n-menu-content .elementor-element .elementor-icon-list-item a .elementor-icon-list-text {
  display: inline-block;
  position: relative;
}

.e-n-menu-item .e-n-menu-content .elementor-element .elementor-icon-list-item a .elementor-icon-list-text::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--e-global-color-76f424c);
  transition: transform 0.25s ease-out;
  transform-origin: bottom right;
}

.e-n-menu-item .e-n-menu-content .elementor-element .elementor-icon-list-item a:hover .elementor-icon-list-text::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Footer */
footer .elementor-element .elementor-icon-list-item a .elementor-icon-list-text:first-child {
  display: inline-block;
  position: relative;
}

footer .elementor-element .elementor-icon-list-item a .elementor-icon-list-text:first-child::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--e-global-color-2cc5475);
  transition: transform 0.25s ease-out;
  transform-origin: bottom right;
}

footer .elementor-element .elementor-icon-list-item a:hover .elementor-icon-list-text:first-child::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.product-featured-image img,
.jet-woo-product-gallery__image img {
    aspect-ratio: 1;
    object-fit: scale-down;
    padding: 2rem;
    mix-blend-mode: multiply;
}

/* Facetwp */

.facet-sorter h3 {
    clip: rect(1px, 1px, 1px, 1px);
    word-wrap: normal !important;
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    overflow-wrap: normal !important;
    padding: 0;
    position: absolute !important;
    width: 1px;
}

.facet-sorter .facetwp-facet-sorter {
    margin-bottom: 0;
}

.facetwp-facet-sorter select {
    padding: .75rem;
}

.facetwp-flyout-open a {
    font-family: 'Outfit';
    padding: .75rem 1rem;
    border: 1px solid #111417;
    line-height: normal;
}

.facetwp-flyout-open a:hover .elementor-button-text {
    text-decoration: underline;
}

.facetwp-type-checkboxes .facetwp-checkbox {
	padding-left: 1.75rem;
    margin-bottom: .5rem;
    background-image: url('assets/images/empty-checkbox.svg');
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 1.25rem;
}

.facetwp-type-checkboxes .facetwp-checkbox:hover {
    background-image: url('assets/images/empty-checkbox-highlighted.svg');
}

.facetwp-type-checkboxes .facetwp-checkbox.checked {
    background-image: url('assets/images/filled-checkbox.svg');
}

.facetwp-toggle:not(.facetwp-hidden) {
	font-size: .875rem;
    text-decoration: underline;
    display: block;
    margin-top: 1rem;
}

.facetwp-toggle:not(.facetwp-hidden):is(:hover,:focus-visible) {
    text-decoration: none;
}

/* Facetwp - Checkboxes - Kleur */

.facetwp-facet-kleuren .facetwp-checkbox {
    display: flex;
}

.facetwp-facet-kleuren .facetwp-display-value {
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.facetwp-facet-kleuren .facetwp-display-value:before {
    content: '';
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 100vw;
    background-color: var(--canvas-light);
    background-size: 1.25rem;
    background-position: center;
    background-repeat: no-repeat;
}

.facetwp-checkbox[data-value="blauw"] .facetwp-display-value:before {
    background-color: #0000cd;
}

.facetwp-checkbox[data-value="geel"] .facetwp-display-value:before {
    background-color: #FFD900;
}

.facetwp-checkbox[data-value="grijs"] .facetwp-display-value:before {
    background-color: grey;
}

.facetwp-checkbox[data-value="groen"] .facetwp-display-value:before {
    background-color: #018935;
}

.facetwp-checkbox[data-value="oranje"] .facetwp-display-value:before {
    background-color: #ED6B00;
}

.facetwp-checkbox[data-value="paars"] .facetwp-display-value:before {
    background-color: #6E1FF6;
}

.facetwp-checkbox[data-value="rood"] .facetwp-display-value:before {
    background-color: #E91B0C;
}

.facetwp-checkbox[data-value="wit"] .facetwp-display-value:before {
    background-color: #ffffff;
    border: 1px solid #111417;
}

.facetwp-checkbox[data-value="zwart"] .facetwp-display-value:before {
    background-color: #111417;
}

.facetwp-checkbox[data-value="marine"] .facetwp-display-value:before {
    background-color: #042E60;
}

.facetwp-checkbox[data-value="jeans"] .facetwp-display-value:before {
    background-color: #7caac6;
}

.facetwp-checkbox[data-value="legergroen"] .facetwp-display-value:before {
    background-color: #4B5320;
}

.facetwp-checkbox[data-value="antreciet-grijs"] .facetwp-display-value:before {
    background-color: #353C40;
}

.facetwp-checkbox[data-value="beige"] .facetwp-display-value:before {
    background-color: #EDE8D0;
}

.facetwp-checkbox[data-value="bordeaux"] .facetwp-display-value:before {
    background-color: #7B1B38;
}

.facetwp-checkbox[data-value="bruin"] .facetwp-display-value:before {
    background-color: #964B00;
}

.facetwp-checkbox[data-value="bruin"] .facetwp-display-value:before {
    background-color: #964B00;
}

.facetwp-checkbox[data-value="camel"] .facetwp-display-value:before {
    background-color: #C19A6B;
}

.facetwp-checkbox[data-value="fuchsia"] .facetwp-display-value:before {
    background-color: #FF00FF;
}

.facetwp-checkbox[data-value="goud"] .facetwp-display-value:before {
    background-color: #D4AF37;
}

.facetwp-checkbox[data-value="khaki"] .facetwp-display-value:before {
    background-color: #F0E68C;
}

.facetwp-checkbox[data-value="licht-blauw"] .facetwp-display-value:before {
    background-color: #ADD8E6;
}

.facetwp-checkbox[data-value="licht-blauw-ciel"] .facetwp-display-value:before {
    background-color: #77b5FE;
}

.facetwp-checkbox[data-value="licht-roze"] .facetwp-display-value:before {
    background-color: #FFC5D3;
}

.facetwp-checkbox[data-value="lila"] .facetwp-display-value:before {
    background-color: #C8A2C8;
}

.facetwp-checkbox[data-value="off-white"] .facetwp-display-value:before {
    background-color: #FAF9F6;
}

.facetwp-checkbox[data-value="roze"] .facetwp-display-value:before {
    background-color: #FA9BCF;
}

.facetwp-checkbox[data-value="turquoise"] .facetwp-display-value:before {
    background-color: #40E0D0;
}

.facetwp-checkbox[data-value="zalm"] .facetwp-display-value:before {
    background-color: #ff8c69;
}

.facetwp-checkbox[data-value="zilver"] .facetwp-display-value:before {
    background-color: #C4C4C4;
}

.facetwp-checkbox[data-value="diversen"] .facetwp-display-value:before,
.facetwp-checkbox[data-value="multi"] .facetwp-display-value:before {
    background-image: url('assets/images/color-wheel.png');
}

.facetwp-checkbox[data-value="camouflage"] .facetwp-display-value:before{
    background-image: url('assets/images/camouflage.png');
}

.facetwp-checkbox[data-value="tijger"] .facetwp-display-value:before{
    background-image: url('assets/images/tijgerprint.png');
}

.facetwp-checkbox[data-value="wit"] .facetwp-display-value:before,
.facetwp-checkbox[data-value="off-white"] .facetwp-display-value:before {
    border: 1px solid #111417;
}

.facetwp-counter {
    display: none;
}

.facetwp-slider-reset {
    display: none;
}

.facetwp-facet-reset.facetwp-type-reset {
    margin-bottom: 0;
}

.facetwp-reset {
    text-decoration: underline;
}

.facetwp-reset:hover {
	text-decoration: none;
}

.facetwp-flyout.active {
    width: 400px;
    max-width: 100%;
}

.flyout-row {
    margin-block: 1rem;
}

.flyout-row h3 {
    font-size: var(--n-accordion-title-font-size);
    line-height: 1.2;
	cursor: pointer;
	margin: 0.5rem 0;
    padding-block: .5rem;
    text-transform: uppercase;
}

.flyout-row h3:not(.screen-reader-text):after {
	content: '';
	float: right;
	background-color: #111;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.25em' height='1.25em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L273 239z'/%3E%3C/svg%3E") no-repeat 50% 50%;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.25em' height='1.25em' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L273 239z'/%3E%3C/svg%3E") no-repeat 50% 50%;
	width: 1rem;
	height: 1rem;
	rotate: 90deg;
}

.flyout-row.expanded h3:after {
	rotate: 270deg;
}

.flyout-item {
	display: none;
}

.name-reset .flyout-item,
.flyout-row.expanded .flyout-item {
	display: block;
}

.facetwp-flyout .facetwp-flyout-content {
	padding: 0 1rem;
}

.facetwp-flyout .facetwp-flyout-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
}

.facetwp-flyout-header h2 {
	font-size: 1.5rem;
    padding: 0;
	margin: 0;
}

.facetwp-flyout-close.btn-close {
    background: none;
    border: none;
    position: relative;
}

.facetwp-flyout-close.btn-close:after,
.facetwp-flyout-close.btn-close:before {
    background: #111;
    border-radius: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 1.5em;
    transition: 250ms ease-in-out;
}

.facetwp-flyout-close.btn-close:before {
    transform: rotate(45deg)
}

.facetwp-flyout-close.btn-close:after {
    transform: rotate(-45deg)
}

.facetwp-flyout-close.btn-close:hover:before {
    transform: rotate(-45deg);
}

.facetwp-flyout-close.btn-close:hover:after {
    transform: rotate(45deg);
}

/* Product detail */
.jet-woo-product-gallery-grid .jet-woo-product-gallery__image-item:first-child:last-child { 
    grid-column: span 2;
    justify-items: flex-end;
}

.jet-woo-product-gallery-grid .jet-woo-product-gallery__image-item:first-child:last-child .jet-woo-product-gallery__image {
    max-width: 50%;
}

/* Product detail product information */
.single_variation_wrap span.popup-matt-label,
.elementor-2828 .elementor-element.elementor-element-525cf685 .cart .single_variation_wrap button,
.elementor-2828 .elementor-element.elementor-element-e93800c .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-2828 .elementor-element.elementor-element-42777fe > .elementor-widget-container p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    text-transform: none;
}

/* Product detail listing slider */
.jet-listing-grid__items.jet-equal-columns__wrapper .slick-slide img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Product pricing style */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    background: inherit;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #111;
    text-decoration: none;
}

ins {
    text-decoration: none;
}