/*
Theme Name:     Pagecraft Child
Description:    Custom WordPress Child theme for theme "PageCraft"
Author:         Pagecraft
Author URI: 	https://pagecraft.nl
Tested up to:   6.2
Requires PHP:   8.2
Template:       pagecraft
Text Domain:    pagecraft-child
Version:        1.0.1
*/


/****************************************** GLOBAL ******************************************/

/* Variables */

:root {
	--pc-black: #000;
	--pc-white: #fff;
	--pc-transparent: #FFFFFF00;
	--light-gray: #F5F5F5;
	
	--spacing-desktop: 40px;
	--spacing-laptop: 30px;
	--spacing-tablet: 20px;
	--spacing-mobile: 20px;
	
	--gform-asterix-color: #3f3f3f;
	--gform-error-color: #ff0000;
	--gform-placeholder-color: #3f3f3f;
	--gform-border-color: #c5c5c5;
	--gform-active-border-color: #000;
	--gform-font-size: var(--e-global-typography-text-font-size);

}

/*  Variable COLORS - globals form Elementor page builder
	var(--e-global-color-primary);
	var(--e-global-color-secondary);
	var(--e-global-color-accent);
	var(--e-global-color-text);
	var(--e-global-color-584f52f) // Globale kleur 'Zwart'
	var(--e-global-color-43f9ea8) // Globale kleur 'Wit'
*/

/*  Variable Fonts - globals form Elementor page builder
	var(--e-global-typography-primary-font-family);
	var(--e-global-typography-secondary-font-family);
*/
/*  Default Elementor colors from plugin
	var(--e-a-color-black);
	var(--e-a-color-white);
*/

/**********    Disable default styling    ***************/
ol, ul {
	padding-left: 20px;
	margin: 0;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.elementor-widget-text-editor p:first-of-type {
    margin-top: 0;
}

img {
	object-fit: cover;
}

img {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: auto;
}

/****************************************** Spacing classes *****************************************/
.padding-section {
	padding-top: var(--spacing-desktop);
	padding-bottom: var(--spacing-desktop);
}

.padding-top {
	padding-top: var(--spacing-desktop);
}

.padding-bottom {
	padding-bottom: var(--spacing-desktop);
}

@media screen and (min-width: 1160px) {
	.padding-left {
		padding-left: calc((100vw - var(--content-width)) / 2);
	}
	
	.padding-right {
		padding-right: calc((100vw - var(--content-width)) / 2);
	}
}

@media screen and (max-width: 1024px) {
	.padding-section {
		padding-top: var(--spacing-laptop);
		padding-bottom: var(--spacing-laptop);
	}

	.padding-top {
		padding-top: var(--spacing-laptop);
	}

	.padding-bottom {
		padding-bottom: var(--spacing-laptop);
	}
}


@media screen and (max-width: 767px) {
	.padding-section {
		padding-top: var(--spacing-tablet);
		padding-bottom: var(--spacing-tablet);
	}

	.padding-top {
		padding-top: var(--spacing-tablet);
	}

	.padding-bottom {
		padding-bottom: var(--spacing-tablet);
	}
}

@media screen and (max-width: 500px) {
	.padding-section {
		padding-top: var(--spacing-mobile);
		padding-bottom: var(--spacing-mobile);
	}

	.padding-top {
		padding-top: var(--spacing-mobile);
	}

	.padding-bottom {
		padding-bottom: var(--spacing-mobile);
	}
}

/****************************************** Gravity form style ******************************************/
/*** https://docs.gravityforms.com/css-targeting-examples/ ***/
body .gform_heading .gform_required_legend,
body .gform_footer.top_label .gform-loader {
	display: none;
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_required.gfield_required_asterisk {
	color: var(--gform-asterix-color);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input::placeholder,
body .gform_wrapper .gform_body .gfield .ginput_container textarea::placeholder {
	font-family: var(--e-global-typography-primary-font-family);
	color: var(--gform-placeholder-color);
	font-size: var(--gform-font-size);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:not([type='submit']),
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select {
	box-shadow: none;
	border: solid 1px var(--gform-border-color);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:not([type='submit']):focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:not([type='submit']):active,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:active,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select:active {
/* 	box-shadow: none; */
	border: solid 1px var(--gform-active-border-color);
	outline: none;
}


body .gform_wrapper .gform_footer input[type=submit] {
	font-family: var(--e-global-typography-primary-font-family);
	background-color: var(--e-global-color-secondary) !important;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: var(--e-global-color-primary) !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container label.error {
	color: var(--gform-error-color);
}


/* Swiper center align*/
.swiper-slide {
	display: flex !important;
	justify-content: center !important;
}

/* Elementor Cart Button*/
.elementor-menu-cart__toggle_button {
	background-color: var(--pc-transparent) !important;
	padding: 0 !important;
}

/* WooCommerce Buttons */

.woocommerce .button {
	color: var(--pc-white) !important;
	background-color: var(--e-global-color-primary) !important;
	transition: all ease .2s;
}

.woocommerce .button:hover {
	color: var(--pc-white) !important;
	background-color: var(--e-global-color-accent) !important;
}

/* WooCommerce My Account */

.woocommerce-MyAccount-content {
	font-family: var(--e-global-typography-text-font-family);
}

.woocommerce-MyAccount-content p {
	font-size: var(--e-global-typography-text-font-size);
}

.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-content-wrapper > p:first-of-type {
	margin-block-start: 0 !important;
}

.woocommerce-MyAccount-content-wrapper p a,
p.woocommerce-LostPassword.lost_password a {
	color: var(--e-global-color-accent) !important;
}

.woocommerce-MyAccount-content-wrapper p a:hover,
p.woocommerce-LostPassword.lost_password a:hover {
	color: var(--e-global-color-primary) !important;
}

/* Search & Filter styling */

.sf-product-filter .search-filter-field__input {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; 
}

@media screen and (max-width: 767px) {
	.sf-product-filter .search-filter-field__input {
		grid-template-columns: repeat(1, 1fr);
		gap: 5px;
	}
}

.sf-product-filter .search-filter-field__input .search-filter-input-radio--is-active span,
.sf-product-filter .search-filter-field__input .search-filter-input-checkbox.search-filter-input-checkbox--is-active span{
    font-family: var(--e-global-typography-961fb23-font-family);
    font-size: var(--e-global-typography-961fb23-font-size);
    text-transform: uppercase;
    font-weight: var(--e-global-typography-2ad9436-font-weight);
	color: var(--e-global-color-8cb9d01);
}

.sf-product-filter .search-filter-field__input span,
.sf-product-filter .search-filter-field__input .search-filter-input-checkbox span {
    font-family: var(--e-global-typography-961fb23-font-family);
    font-size: var(--e-global-typography-961fb23-font-size);
    text-transform: uppercase;
    font-weight: var(--e-global-typography-primary-font-weight);
	color: var(--e-global-color-8cb9d01);
}

@media screen and (max-width: 767px) {
	.sf-product-filter .search-filter-field__input .search-filter-input-radio--is-active span,
	.sf-product-filter .search-filter-field__input .search-filter-input-checkbox.search-filter-input-checkbox--is-active span,
	.sf-product-filter .search-filter-field__input span,
	.sf-product-filter .search-filter-field__input .search-filter-input-checkbox span {
		font-size: 18px;
	}
}

.search-filter-input-radio--is-active>.search-filter-input-radio__container>.search-filter-input-radio__control>svg,
.search-filter-input-checkbox--is-active>.search-filter-input-checkbox__container>.search-filter-input-checkbox__control>svg,
.search-filter-input-checkbox__control>svg,
.search-filter-input-radio__control>svg {
	color: var(--e-global-color-8cb9d01);
	fill: var(--e-global-color-8cb9d01);
}

/* Color overlay */

.color-overlay::before {
	opacity: 0.9;
	background-color: #EE2A23;
	mix-blend-mode: multiply;
}

/* Product Single Page */

.single ul.wp-block-list li {
    padding-bottom: 25px;
}

/* Header */

/* Header on News single post, white styling instead of red */

header > div {
	width: 100% !important;
}

.single-post header.scrolled-10 .elementor-nav-menu > li.menu-item::before,
.blog header.scrolled-10 .elementor-nav-menu > li.menu-item::before{
	 background-image: url('/wp-content/uploads/2025/09/red-cross.svg');
}

.single-post header .elementor-nav-menu > li.menu-item a,
.blog header .elementor-nav-menu > li.menu-item a {
	color: var(--pc-white) !important;
	fill: var(--pc-white) !important;
}

.single-post header.scrolled-10 .elementor-nav-menu > li.menu-item a,
.blog header.scrolled-10 .elementor-nav-menu > li.menu-item a {
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
}

.single-post header .elementor-sticky--effects .elementor-nav-menu > li.menu-item,
.blog header .elementor-sticky--effects .elementor-nav-menu > li.menu-item,
.single-post header .sub-menu li.menu-item a,
.blog header .sub-menu li.menu-item a {
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;	
}

header .sub-menu li.menu-item a,
header .elementor-sticky--effects .elementor-nav-menu > li.menu-item a,
header .sub-menu {
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;	
}

/* header .sub-menu li.menu-item a:hover,
body:not(.single-post) header .elementor-nav-menu > li.menu-item a:hover {
	color: var(--e-global-color-text) !important;
	fill: var(--e-global-color-text) !important;	
} */

.single-post header .elementor-widget-theme-site-logo img,
.blog header .elementor-widget-theme-site-logo img {
	transition: all ease .2s;
	width: 100%;
	content: url("/wp-content/uploads/2025/01/ASO-logo-full-white.svg");
}

.single-post header .elementor-nav-menu > li.menu-item::before,
.blog header .elementor-nav-menu > li.menu-item::before {
	content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
	margin-right: 8px;
    background-image: url('/wp-content/uploads/2025/09/cross-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    transition: all .3s ease;
}

.elementor-nav-menu li.menu-item::before,
.single-post header .elementor-sticky--effects .elementor-nav-menu li.menu-item::before,
.blog header .elementor-sticky--effects .elementor-nav-menu li.menu-item::before,
.menu-item-health-care::before, .menu-item-wound-care::before, .menu-item-foot-care::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url('/wp-content/uploads/2025/09/red-cross.png');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    transform: rotate(-90deg);
    opacity: 0;
    transition: all .3s ease;
}

.elementor-nav-menu li.menu-item:hover::before,
.single-post header .elementor-sticky--effects .elementor-nav-menu li.menu-item:hover::before,
.blog header .elementor-sticky--effects .elementor-nav-menu li.menu-item:hover::before,
.elementor-nav-menu li.menu-item:has(> a.elementor-item-active)::before,
.single-post header .elementor-sticky--effects .elementor-nav-menu li.menu-item:has(> a.elementor-item-active)::before,
.blog header .elementor-sticky--effects .elementor-nav-menu li.menu-item:has(> a.elementor-item-active)::before,
.elementor-nav-menu li.menu-item.current-menu-ancestor::before,
.single-our_products .elementor-nav-menu li.menu-item:has(> a.has-submenu)::before,
.menu-item-health-care:hover::before, .menu-item-wound-care:hover::before, .menu-item-foot-care:hover::before,
.term-health-care .menu-item-health-care::before, .term-wound-care .menu-item-wound-care::before, .term-foot-care .menu-item-foot-care::before {
    transform: rotate(0deg);
    opacity: 1;
}

header .sub-menu li.menu-item,
.menu-item-health-care, .menu-item-wound-care, .menu-item-foot-care{
	display: inline-flex;
	align-items: center;
	gap: 5px;
}


.our_products.e-loop-item .elementor-widget-theme-post-featured-image img,
.our_products.e-loop-item .elementor-icon {
	transition: transform ease .3s;
}

.our_products.e-loop-item:hover .elementor-icon {
	transform: rotate(90deg);
}

.our_products.e-loop-item:hover .elementor-widget-theme-post-featured-image img {
	transform: scale(1.05);
}


.sub-menu {
    width: 100% !important;
	padding: 15px !important;
}

.single-post .elementor-search-form__input,
.blog .elementor-search-form__input {
	color: var(--e-global-color-primary) !important;
}

.single-post .elementor-search-form__container,
.blog .elementor-search-form__container {
	background-color: var(--pc-white) !important;
}

.single-post .elementor-sticky--effects .elementor-search-form__container,
.blog .elementor-sticky--effects .elementor-search-form__container {
	background-color: var(--e-global-color-49fa36c) !important;
}

.elementor-nav-menu>li {
	display: flex;
	align-items: center;
	padding: 0px 20px;
}

.mobile-menu .elementor-nav-menu li::before {
	position: absolute;
    left: 0px;
    top: 13px;
}

.mobile-menu .elementor-nav-menu li {
	align-items: flex-start;
	flex-direction: column;
}

.mobile-menu .elementor-nav-menu a {
	margin-left: 20px;
}


/* .elementor-nav-menu li.menu-item::before, .single-post header .elementor-sticky--effects .elementor-nav-menu li.menu-item::before, .blog header .elementor-sticky--effects .elementor-nav-menu li.menu-item::before, .menu-item-health-care::before, .menu-item-wound-care::before, .menu-item-foot-care::before
Specificity: (0,2,2)
 {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url(/wp-content/uploads/2025/09/red-cross.png);
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    transform: rotate(-90deg);
    opacity: 0;
    transition: all .3s 
ease;
    position: absolute;
    DISPLAY: BLOCK;
    left: -20px;
    top: 13px;
    z-index: 99999999999;
    background-color: black;
} */

.elementor-nav-menu:first-child {
	padding-left: 0px;
}

.elementor-nav-menu:last-child {
	padding-right: 0px;
}


@media screen and (max-width: 767px) {
	.elementor-nav-menu>li {
		flex-wrap: wrap;
	}
	
	.elementor-nav-menu .sub-menu .menu-item {
		padding-bottom: 10px;
	}
}

.search-filter-input-radio--is-active .search-filter-input-radio__control svg {
    display: none;
}

.search-filter-input-radio--is-active .search-filter-input-radio__control {
    position: relative;
	display: flex;
	align-items: center;
}

.search-filter-input-radio--is-active .search-filter-input-radio__control::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/wp-content/uploads/2025/09/cross-white-red-background.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   	vertical-align: top;
}

header .elementor-sticky--effects,
header.scrolled-10 .elementor-sticky {
	background-color: #fffffff2 !important;
	backdrop-filter: blur(15px);
	box-shadow: 0px 0px 5px #00000014;
	transition: all ease .2s;
	z-index: 9999 !important;
	padding-top: 0px;
	padding-bottom: 0px;
}

header .elementor-sticky,
header img,
header .header .elementor-sticky--effects {
	transition: all ease .2s !important;
}

header .elementor-sticky--effects .elementor-widget-theme-site-logo {
	transition: all ease .2s;
	display: none;
}

header .elementor-widget-theme-site-logo {
	animation: fadeIn .2s ease-in forwards;
}

header .elementor-sticky--effects .sticky-logo {
	transition: all ease .2s;
	display: block;
	content: url("/wp-content/uploads/2025/09/aso-icon.svg");
	animation: fadeIn .2s ease-in forwards;
	height: 45px;
	object-fit: contain;
}

.single-post header .elementor-sticky--effects .main-logo,
.blog header .elementor-sticky--effects .main-logo {
	transition: all ease .2s;
	display: block;
	content: url("/wp-content/uploads/2025/09/ASO-logo.svg");
/* 	width: 200px !important; */
}

@media screen and (min-width: 1024px) {
	.single-post header .elementor-sticky--effects .main-logo,
	.blog header .elementor-sticky--effects .main-logo {
		transition: all ease .2s;
		display: none;
	}
}

.single-post header .elementor-icon svg,
.blog header .elementor-icon svg {
	fill: var(--pc-white) !important;
}

.single-post header .elementor-sticky--effects .elementor-icon svg,
.blog header .elementor-sticky--effects .elementor-icon svg {
	fill: var(--e-global-color-primary) !important;
}

header .elementor-sticky--effects {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

header .elementor-sticky--effects .e-con-inner {
	padding: 0 !important;
}

header .elementor-icon-wrapper {
	display: flex;
}

/* Header main logo tussen 10px - 120px */

header.scrolled-10:not(.elementor-sticky--effects) .main-logo {
	transition: all ease .2s;
	content: url("/wp-content/uploads/2025/09/aso-icon.svg");
	width: 45px;
	height: 45px;
}

@media screen and (max-width: 1024px) {
	header .elementor-sticky--effects .main-logo {
		transition: all ease .2s;
		display: block;
	}
	
	header .sticky-logo {
		transition: all ease .2s;
		display: none !important;
	}
}

/* Search Form */
.elementor-search-form__submit {
    padding: 10px !important;
    border-radius: 50px !important;
}

.elementor-search-form input::placeholder {
	opacity: 1.0!important;
}


/* Icon before heading */

.icon-red,
.icon-white {
	display: flex;
    flex-direction: row;
    align-items: center;
	gap: 10px;
	align-items: flex-start;
}

.icon-white.in-view,
.icon-red.in-view{
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.icon-white::before,
.icon-red::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url('/wp-content/uploads/2025/09/cross-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	top: 17px;
	left: -50px;
	position: absolute;
	/*Animatie*/
	transform: rotate(0deg);
	opacity: 0;
	transition: transform 2s ease, opacity 0.5s ease;
} 

.icon-red::before {
    background-image: url('/wp-content/uploads/2025/09/red-cross.svg');
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(300px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(300px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
.icon-white.in-view::before,
.icon-red.in-view::before {
    transform: rotate(360deg);
    opacity: 1;
}


@media screen and (max-width: 1366px) {
	.icon-red,
	.icon-white {
		padding-top: 50px!important;
	}
	.icon-red::before,
	.icon-white::before {
		top: 0;
		left: 0;
	}
}
/* 
@media screen and (max-width: 1024px) {
	.icon-red::before,
	.icon-white::before {
		margin-top: 0px !important;
	}
}

@media screen and (max-width: 767px) {
	.icon-red::before,
	.icon-white::before {
		margin-top: 0px !important;
	}
} */

/* Icon button */

.icon-white-button .elementor-button-content-wrapper {
	align-items: center;
}

.icon-white-button .elementor-button-content-wrapper:after {
	content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url('/wp-content/uploads/2025/09/red-cross-white-background.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	margin-left: 15px;
}

.icon-white-button .elementor-field-type-submit {
	display: flex;
	position: absolute;
	right: 5px;
	bottom: 0;
	justify-content: flex-end;
	margin-bottom: 10px !important;
}

input#form-field-subject::placeholder {
	color: var(--e-global-color-primary) !important;
}

.swiper-pagination { 
	z-index: 99 !important; 
}


/* Animation */
.sphere {
    position: relative;
    overflow: hidden;
}

.sphere-overlay {
    position: absolute;
    inset: 0 -50px;
    display: grid;
    grid-template-columns: repeat(var(--cols, 6), 1fr);
    opacity: 0.9;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 10;
}

.sphere-object {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    transform: scale(0);
    opacity: 0;
    animation: grow 3s ease-in-out forwards;
    background-color: var(--e-global-color-primary);
}

@keyframes grow {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(2); opacity: 1; }
}

.single-our_products .swiper-slide-image img {
    border-radius: 10px;
}

.e-gallery-image {
    background-size: contain;
    background-repeat: no-repeat;
}
/* 
.single-our_products .elementor-nav-menu li.menu-item::before .elementor-item.has-submenu {
	opacity: 1;
} */


/* Product USPs */

.acf-icon-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.acf-icon-list li {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-left: 35px;
}

.acf-icon-list li.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s forwards;
}

.acf-icon-list .acf-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
}

.acf-icon-list .acf-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--e-global-color-primary);
}

.acf-icon-list .acf-text {
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-2ad9436-font-family), Sans-serif;
    font-size: var(--e-global-typography-2ad9436-font-size);
/*     font-weight: var(--e-global-typography-2ad9436-font-weight); */
    text-transform: var(--e-global-typography-2ad9436-text-transform);
    line-height: var(--e-global-typography-2ad9436-line-height);
    letter-spacing: var(--e-global-typography-2ad9436-letter-spacing);
}

/* Carrousel */