/*******************************************************************************
********************************************************************************
MODULES
********************************************************************************
*******************************************************************************/
/*******************************************************************************
HEADER
*******************************************************************************/
/* Add blur to header */
.header__container
{
	backdrop-filter: var(--cerade-blur);
}
/*******************************************************************************
Layout
*******************************************************************************/
/* Sort container sizes and show/hide containers and elements on devices */
.header__logo
{
	width: 50% !important;
}
.header__navigation
{
	width: 0% !important;
	display: none !important;
}
.header__icons
{
	width: 50% !important;
}
.header__icons__account
{
	display: none !important;
}
.header__icons__cart
{
	margin-left: 0px;
}
.header__icons__menu
{
	display: block !important;
}
@media screen and (min-width: 1200px)
{
	.header__logo
	{
		width: 20% !important;
	}
	.header__navigation
	{
		width: 60% !important;
		display: flex !important;
	}
	.header__icons
	{
		width: 20% !important;
	}
	.header__icons__account
	{
		display: block !important;
	}
	.header__icons__cart
	{
		margin-left: 10px;
	}
	.header__icons__menu
	{
		display: none !important;
	}
}

/*******************************************************************************
Mega Menu
*******************************************************************************/
.header__navigation .e-n-menu-heading button
{
	background: none !important;
}
/* Make card titles change color on card hover */
.header__navigation__megamenu__item__carded:hover .elementor-icon-box-title
{
	color: var(--cerade-color-orange-light) !important;
}
/*******************************************************************************
Menu
*******************************************************************************/
/* Set correct spacing and round lower borders */
.header__navigation__menu ul.sub-menu
{
	padding:7px 15px !important;
	min-width: 275px !important;
	z-index: 9;
}

/* Submenu items should not jump on hover */
.elementor-nav-menu ul.sub-menu a,
.elementor-nav-menu ul.sub-menu a:hover
{
	line-height: 24px !important;
}

/*******************************************************************************
Icons
*******************************************************************************/
/* Change cart icon styling when cart is not empty */
.cerade__cart__filled .header__icons__cart a.elementor-icon
{
	background-color: var(--cerade-color-white) !important;
	color: var(--cerade-color-orange-light) !important;
}
.cerade__cart__filled .header__icons__cart a.elementor-icon svg
{
	stroke: var(--cerade-color-orange-light) !important;
}
.cerade__cart__filled .header__icons__cart a.elementor-icon:after
{
	position: absolute;
	top: -1px;
	right: 0px;
	width: 15px;
	height: 15px;
	content: '';
	background: red;
	border: 2px solid var(--cerade-color-white);
	border-radius: 100px;
}
.cerade__cart__filled .header__icons__cart a.elementor-icon:hover
{
	background-color: var(--cerade-color-orange-light) !important;
	color: var(--cerade-color-white) !important;
}
.cerade__cart__filled .header__icons__cart a.elementor-icon:hover svg
{
	stroke: var(--cerade-color-white) !important;
}
@media screen and (min-width: 1200px)
{
	/* .header__icons__cart a.elementor-icon
	{
		background-color: var(--cerade-color-orange-light) !important;
		color: var(--cerade-color-white) !important;
	}
	.header__icons__cart a.elementor-icon:hover
	{
		background-color: var(--cerade-color-black) !important;
		color: var(--cerade-color-white) !important;
	} */
}

/*******************************************************************************
Search
*******************************************************************************/
/* Hide search box by default */
.header__search
{
	display: none !important;
	z-index: 9;
}

/* Show search box on click */
.header__search.active
{
	display: flex !important;
}

/*******************************************************************************
Mobile menu
*******************************************************************************/
/* Items should not jump on hover */
.header__popup__mobile_menu__menu > nav.elementor-nav-menu--dropdown a,
.header__popup__mobile_menu__menu > nav.elementor-nav-menu--dropdown a:hover
{
	line-height: 27px !important;
}

/* Different font size for submenu items */
.header__popup__mobile_menu__menu ul.sub-menu a
{
	font-size: 16px !important;
	text-transform: none !important;
}

/* Icons should be the same color as their labels */
.header__popup__mobile_menu__contact li.elementor-icon-list-item a .elementor-icon-list-icon svg
{
	transition: stroke 0.5s !important;
	fill: none !important;
	stroke: var(--cerade-color-black) !important;
}
.header__popup__mobile_menu__contact li.elementor-icon-list-item a:hover .elementor-icon-list-icon svg
{
	transition: stroke 0.5s !important;
	fill: none !important;
	stroke: var(--cerade-color-orange-light) !important;
}

/* WhatsApp icon should be WhatsApp brand color */
.header__popup__mobile_menu__contact li.elementor-icon-list-item:nth-child(3) a .elementor-icon-list-icon svg
{
	stroke: #128C7E !important;
}
.header__popup__mobile_menu__contact li.elementor-icon-list-item:nth-child(3) a:hover .elementor-icon-list-icon svg
{
	stroke: var(--cerade-color-orange-light) !important;
}

/* WhatsApp label should should be WhatsApp brand color */
.header__popup__mobile_menu__contact li.elementor-icon-list-item:nth-child(3) a span
{
	color: #128C7E !important;
}
.header__popup__mobile_menu__contact li.elementor-icon-list-item:nth-child(3) a:hover span
{
	color: var(--cerade-color-orange-light) !important;
}
/*******************************************************************************
BREADCRUMBS
*******************************************************************************/
/* Breadcrumbs should be seen. Change the color and font-weight of the breadcrumbs */
.rank-math-breadcrumb a
{
	color: var(--cerade-color-white) !important;
	font-weight: 700 !important;
}
.rank-math-breadcrumb a:hover
{
	color: var(--cerade-color-orange-light) !important;
}
.rank-math-breadcrumb span.last
{
	font-weight: 600 !important;
}

/*******************************************************************************
DIALOG
*******************************************************************************/
/* BUGFIX: Change UI colors */
.dialog-lightbox-widget .elementor-slideshow__footer
{
	color: var(--cerade-color-black) !important;
}
.dialog-lightbox-widget .dialog-lightbox-close-button svg
{
	fill: var(--cerade-color-black) !important;
}
.dialog-lightbox-widget .dialog-lightbox-close-button svg:hover
{
	fill: var(--cerade-color-orange-light) !important;
}
/* Blur background */
.dialog-lightbox-widget
{
  backdrop-filter: var(--cerade-blur);
}

/* Remove default shadow from image */
.dialog-lightbox-widget img
{
  box-shadow: none !important;
}

/*******************************************************************************
LOOP
*******************************************************************************/
/* Pull product up on hover */
.loop__product__global__content:hover
{
	cursor: pointer !important;
}

/* Change product title color on hover */
.loop__product__global:hover .loop__product__global__title .product_title
{
	color: var(--cerade-color-orange-light) !important
}

/*******************************************************************************
FOOTER
*******************************************************************************/
.footer__floater
{
	pointer-events: none;
}
/* Blur floater and make elements clickable */
.footer__floater__boxed__content
{
	backdrop-filter: var(--cerade-blur);
	pointer-events: auto;
}

/* Icons should not have fill. Also, icons should transition as fast as labels */
.footer__floater__boxed__content li.elementor-icon-list-item a .elementor-icon-list-icon svg
{
	transition: stroke 0.5s !important;
	fill: none !important;
	stroke: var(--cerade-color-black) !important;
}
.footer__floater__boxed__content li.elementor-icon-list-item a:hover .elementor-icon-list-icon svg
{
	transition: stroke 0.5s !important;
	fill: none !important;
	stroke: var(--cerade-color-orange-light) !important;
}

/* WhatsApp icon should be WhatsApp brand color */
.footer__floater__boxed__content li.elementor-icon-list-item:nth-child(3) a .elementor-icon-list-icon svg
{
	stroke: #128C7E !important;
}
.footer__floater__boxed__content li.elementor-icon-list-item:nth-child(3) a:hover .elementor-icon-list-icon svg
{
	stroke: var(--cerade-color-orange-light) !important;
}

/* WhatsApp label should should be WhatsApp brand color */
.footer__floater__boxed__content li.elementor-icon-list-item:nth-child(3) a span
{
	color: #128C7E !important;
}
.footer__floater__boxed__content li.elementor-icon-list-item:nth-child(3) a:hover span
{
	color: var(--cerade-color-orange-light) !important;
}

@media screen and (max-width: 1200px)
{
	/* Resize content on smaller screens */
	.footer__floater .footer__floater__boxed .e-con-inner
	{
		max-width: 275px;
	}

	/* Hide text on icons on mobile */
	.footer__floater .elementor-icon-list-items .elementor-icon-list-text
	{
		display: none !important;
	}

	/* Hide working hours on mobile */
	.footer__floater__boxed__content li.elementor-icon-list-item:first-child
	{
		display: none !important;
	}
}

/*******************************************************************************
FORMS
*******************************************************************************/
/* Make sure row is allways fullwidth and has spacing */
.contact-form--row
{
	width: 100%;
	margin-bottom: 8px;
}

/* Equalize gap between rows on mobile */
.contact-form--row:nth-child(3) .contact-form--input--email
{
	margin-bottom: 8px;
}


@media screen and (min-width: 1024px)
{
	/* Make phone and e-mail address inputs side by side on desktop */
	.contact-form--row:nth-child(3)
	{
		display:flex;
		column-gap: 20px;
	}
	.contact-form--row:nth-child(3) .contact-form--input
	{
		width: 48%;
	}

	/* Remove additonal mobile gap */
	.contact-form--row:nth-child(3) .contact-form--input--email
	{
		margin-bottom: 0px;
	}
}

/* Style input label */
.contact-form--input label.contact-form--input--label
{
	margin-left: 15px !important;
	margin-bottom: 3px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	color: var(--cerade-color-black) !important;
}

/* Style default input and textarea */
.contact-form--input input,
.contact-form--input textarea
{
	width: 100%;
	padding: 10px 15px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: #999999 !important;
	border: 1px solid #999999 !important;
}

/* Style default upload input */
.contact-form--input input[type="file"]
{
	padding: 10px 15px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: #999999 !important;
}

/* Style inputs on focus */
.contact-form--input input:focus,
.contact-form--input textarea:focus
{
	color: var(--cerade-color-black) !important;
	border: 1px solid #999999 !important;
}

/* Set correct border radius to inputs */
.contact-form--input input
{
	border-radius: 100px !important;
}

/* Set correct border radius to textareas */
.contact-form--input textarea
{
	border-radius: 10px !important;
	height: 100px;
}

/* Style GDPR input */
.contact-form--input .wpcf7-acceptance label
{
	display: flex;
	gap: 10px;
	margin-top: 25px;
}
.contact-form--input .wpcf7-acceptance input[type="checkbox"]
{
	width: 20px;
}
.contact-form--input .wpcf7-acceptance .wpcf7-list-item-label
{
	line-heigth: 1em;
}

/* SUBMIT */
.contact-form--submit p
{
	text-align: center;
}
.contact-form--submit input
{
	width: auto !important;
	margin-top: 25px;
	padding: 15px 20px !important;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 23px !important;
	color: var(--cerade-color-white) !important;
	border: 0px !important;
}

/* SPINNER */
/* Hide spinner */
.wpcf7-spinner
{
	display: none;
}

/* ERRORS */
/* Style error text on inputs */
.contact-form--input .wpcf7-not-valid-tip
{
	margin-top: 5px !important;
	margin-left: 15px !important;
	font-family: 'Roboto', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--cerade-color-orange-dark) !important;
	line-height: 21px !important;
}

/* Style global errors */
.wpcf7-response-output
{
	margin: 25px 0px 0px 0px !important;
	padding: 0px !important;
	background: none;
	text-align: center;
	color: var(--cerade-color-black);
	border: 0px !important;
}

/*******************************************************************************
WOOCOMMERCE
*******************************************************************************/
/* FORMS */
/* Change color or asterisk for required fields */
.woocommerce form .form-row .required
{
	color: var(--cerade-color-orange-dark) !important;
}
/* QUANTITY */
/* Make quantity buttons look nice */
.quantity .qty-btn
{
	width: 25px !important;
	height: 25px !important;
	margin: 0px !important;
	padding: 5px !important;
	background: var(--cerade-color-gray-light) !important;
	border: 0px !important;
	border-radius: 50px !important;
	font-family:'Roboto', sans-serif !important;
	font-size: 15px !important;
	line-height: 15px !important;
	color: var(--cerade-color-orange-light) !important;
}
.quantity .qty-btn:hover
{
	background: var(--cerade-color-orange-light) !important;
	color: var(--cerade-color-white) !important;
}

/* Make quantity input look nice */
.woocommerce .product-quantity input,
.woocommerce .quantity input
{
	width: 30px !important;
	height: 25px !important;
	min-height: 25px !important;
	max-height: 25px !important;
	margin: 0px 5px !important;
	padding: 0px !important;
	background: var(--cerade-color-white) !important;
	border: 0px !important;
	border-radius: 50px !important;
	font-family:'Roboto', sans-serif !important;
	font-size: 14px !important;
	line-height: 25px !important;
	text-align: center !important;
	color: var(--cerade-color-black) !important;
	vertical-align: top !important;
}

/* NOTICES */
/* Make notices work with flex */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info
{
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	padding: 10px;
	padding-left: 45px;
}

/* Make icons bigger */
.woocommerce-error:before,
.woocommerce-message:before,
.woocommerce-info:before
{
	top: 20px;
	left: 15px;
	font-size: 20px;
}

/* Reposition icons */
.woocommerce-error:not(:has(.button)):before,
.woocommerce-error:not(:has(.wc-forward)):before,
.woocommerce-message:not(:has(.button)):before,
.woocommerce-message:not(:has(.wc-forward)):before,
.woocommerce-info:not(:has(.button)):before,
.woocommerce-info:not(:has(.wc-forward)):before
{
	top: 10px;
}

/* Move link a bit to the right */
.woocommerce-message .restore-item
{
	margin-left: 5px;
}

/* Push button to the right */
.woocommerce-info a.button,
.woocommerce-info a.wc-forward,
.woocommerce-message a.button,
.woocommerce-message a.wc-forward
{
	order: 3;
	margin-left: auto;
	margin-right: 0px;
}

/* Handle .woocommerce-error displaying like a list */
/* Make border-radius smaller when there is multiple errors in the list */
.woocommerce-error:has(li:nth-of-type(2))
{
	border-radius: 10px;
}

/* Make each error appear in its own row */
.woocommerce-error li
{
	width: 100%;
}

@media screen and (max-width: 767px)
{
	/* Make errors mmore boxed so they work better on mobile on mobile. */
	.woocommerce-error,
	.woocommerce-message,
	.woocommerce-info
	{
		border-radius: 10px !important;
		padding-left: 50px; !important
	}

	/* Reposition icons */
	.woocommerce-error:before,
	.woocommerce-message:before,
	.woocommerce-info:before
	{
		top: 10px;
		left: 20px !important;
		font-size: 20px !important;
	}

	/* Push button to the right */
	.woocommerce-message a.button,
	.woocommerce-message a.wc-forward,
	.woocommerce-info a.button,
	.woocommerce-info a.wc-forward
	{
		order: 5;
		flex-basis: 100%;
		width: auto;
		text-align: center;
		margin-top: 10px;
	}
}