/*
 Theme Name:   Lycogel Theme
 Theme URI:    https://elementor.com/hello-theme/
 Description:  Lycogel custom theme
 Author:       Vincent van den Brink
 Author URI:   https://pixelcrafted.nl
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-child
*/



/*** GENERAL ***/
html {
	scroll-behavior: smooth;
}

body * {
	outline: none;
}

/* Sharpen images in Chrome */
img {
	image-rendering: -webkit-optimize-contrast !important;
}

/* Hide inner shadow on inputs */
input,
textarea {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	box-shadow: inset 0 0 0 0 white !important;
}

/* Paragraphs */
.elementor-widget-text-editor p:last-child,
.elementor-widget-theme-post-content p:last-child {
	margin-bottom: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-block-start: 0.5rem;
  margin-block-end: 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }

@keyframes bounce {
    0%   { transform: translateY(0); }
	15%  { transform: translateY(-24px); }
    30%  { transform: translateY(0); }
    45%  { transform: translateY(-12px); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}



/*** HEADER ***/

/** Header buttons (small) **/
header .header-btn {
	width: 36px !important;
	height: 36px;
}

header .header-btn .elementor-button-icon {
	width: 36px;
	height: 36px;
	justify-content: center;
	align-items: center;
	display: flex;
}

header .header-btn a:hover.elementor-button svg path {
	fill: var(--e-global-color-accent) !important;
}


/** MENU **/
#menu  li.menu-item .sub-arrow {
	padding: 0;
}

#menu .elementor-nav-menu--dropdown .elementor-item:focus,
#menu .elementor-sub-item:focus {
	background-color: #FFFFFF1A !important;
}

#menu .sub-menu li a {
	line-height: var(--e-global-typography-text-line-height) !important;
	border: none !important;
	text-transform: none;
}

/** MOBILE MENU **/
#menu .elementor-menu-toggle {
	width: 36px;
	height: 36px;
}

#menu .elementor-menu-toggle__icon--open,
#menu .elementor-menu-toggle__icon--close {
	height: 28px;
}



/*** PAGE HEADER ***/

.page-header .scroll-down-btn a.elementor-button {
    width: 48px;
    height: 48px;
    animation: bounce 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
}


/*** HOMEPAGE ***/

.product .carousel {
	cursor: pointer;
	-webkit-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

.product .carousel:before,
.product .carousel:after {
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 16px;
	content: '';
	background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	position: absolute;
	z-index: 9;
}

.product .carousel:after {
	left: auto;
	right: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}



/*** LYCOGEL MOMENTS ***/
#lycogel-moments .e-hotspot__tooltip {
	top: initial;
	height: 80px;
	box-shadow: 0 0 8px rgba(255,255,255,0.25);
}

.full-height-image {
	top: 0;
	bottom: 0;
}



/*** COLORS ***/
ul.lycogel-colors {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

ul.lycogel-colors li.color {
	width: 72px;
	height: 72px;
	color: white;
	font-size: 0.85em;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	display: inline-flex;
	background: var(--e-global-color-secondary);
}

ul.lycogel-colors li.color.creme 	{ background: #fadaba; }
ul.lycogel-colors li.color.beige 	{ background: #e7c1a2; }
ul.lycogel-colors li.color.pearl 	{ background: #f6c29a; }
ul.lycogel-colors li.color.caramel 	{ background: #e6b277; }
ul.lycogel-colors li.color.sand 	{ background: #d4a68b; }
ul.lycogel-colors li.color.honey 	{ background: #efab7b; }
ul.lycogel-colors li.color.almond 	{ background: #c38355; }
ul.lycogel-colors li.color.amber 	{ background: #be8769; }

ul.lycogel-colors li.color.no05 	{ background: #fdd7bb; }
ul.lycogel-colors li.color.no1 		{ background: #f6c29a; }
ul.lycogel-colors li.color.no2 		{ background: #efab7b; }
ul.lycogel-colors li.color.no3 		{ background: #c38355; }
ul.lycogel-colors li.color.no4 		{ background: #a6714d; }
ul.lycogel-colors li.color.no5 		{ background: #9e5f2c; }


/*** STORE INFORMATION ***/
.store-info .video {
	padding: 56.25% 0 0 0;
	position:relative;
}




/*** FORMS ***/

/** Radio / checkbox buttons **/
form.elementor-form .elementor-field-type-radio .elementor-field-label {
	display: none;
}

form.elementor-form .elementor-field-type-radio input[type="radio"] {
    visibility: hidden;
}

/* Stijl de aangepaste radio buttons */
form.elementor-form .elementor-field-type-radio label {
    padding-left: 28px;
    position: relative;
	cursor: pointer;
}

/* Pseudo-element voor een custom radio button */
form.elementor-form .elementor-field-type-radio label::before {
	left: 0;
    top: 50%;
    transform: translateY(-50%);
	width: 20px;
	height: 20px;
    background-color: var(--e-global-color-d2444d5);
    border: 2px solid var(--e-global-color-accent);
    border-radius: 50%;
    display: inline-block;
	content: "";
    position: absolute;
	transition: all 0.3s ease-in-out;
}

form.elementor-form .elementor-field-type-radio input[type="radio"]:checked + label::before {
    background-color: var(--e-global-color-accent);
}

form.elementor-form .elementor-field-type-radio input[type="radio"]:checked + label::after {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
	width: 8px;
    height: 8px;
    border-radius: 50%;
	background-color: var(--e-global-color-d2444d5);
    display: inline-block;
	content: "";
    position: absolute;
}


/** Required sign **/
form.elementor-form .elementor-field-required::after {
    top: 50%;
	right: 8px;
	height: 16px;
	content: "*";
	font-size: 1.5em;
	text-align: right;
    color: var(--e-global-color-accent);
	position: absolute;
	transform: translatey(-50%);
}


form.elementor-form .elementor-field-type-textarea.elementor-field-required::after {
	top: 12px;
	transform: none;
}

form.elementor-form .elementor-field-type-radio.elementor-field-required::after {
	top: -2px;
	right: auto;
	position: relative;
	display: inline-flex;
	transform: none;
}


/** Error styling **/
form.elementor-form .elementor-error.elementor-field-required::after {
	color: var(--e-global-color-3add2e0);
}

form.elementor-form .elementor-error input[type=text],
form.elementor-form .elementor-error input[type=email],
form.elementor-form .elementor-error textarea {
	border-color: var(--e-global-color-3add2e0);
}

form.elementor-form .elementor-field-group .elementor-message {
	display: none;
}

form.elementor-form .elementor-error.elementor-field-required::after {
	color: var(--e-global-color-3add2e0);
}


/** Form message **/
form.elementor-form .elementor-message::before {
	display: none;
}



/*** STORE LOGIN ***/
#store-login a.elementor-lost-password {
	font-size: var(--e-global-typography-text-font-size);
}

#store-login .store-login-error {
	color: var(--e-global-color-3add2e0);
}



/*** STORE ACCOUNT ***/

/* Logout */
#store-account .store-logout a.logout-button {
	margin-left: 8px;
	padding-left: 8px;
	text-decoration: underline;
	border-left: 1px solid var(--e-global-color-b8f4748);
}

#store-account .store-logout a:hover.logout-button {
	text-decoration: none;
}

/* Tabs */
#store-account #tabs .e-n-tabs-heading {
	border-bottom: 1px solid var(--e-global-color-b8f4748);
}


#store-account #tabs .e-n-tabs-heading button {
	border-radius: 0;
	border: none !important;
}

#store-account #tabs .e-n-tabs-heading button:hover:after,
#store-account #tabs .e-n-tabs-heading button[aria-selected="true"]:after {
	bottom: 0;
	width: 100%;
	content: '';
	height: 3px;
	background: var(--e-global-color-accent);
	position: absolute;
}

#store-account #tabs .e-n-tabs-content {
	display: block;
}

/* Store items */
#store-account ul.store-info {
	padding: 0;
	display: grid;
	gap: 24px;
	list-style: none;
}

#store-account ul.store-info.store-info--video 	{ grid-template-columns: repeat(2, 1fr); }
#store-account ul.store-info.store-info--file 	{ grid-template-columns: repeat(3, 1fr); }

#store-account ul.store-info li {
	padding: 16px;
	border-radius: 4px;
	border: 1px solid var(--e-global-color-b8f4748);
	flex-direction: column;
	justify-content: space-between;
	display: flex;
}

#store-account ul.store-info li p {
	margin-bottom: 16px;
}

/* No items message */
#store-account .store-info.no-info {
	font-weight: bold;
}



/*** FOOTER ***/
footer nav a:hover {
	color: var(--e-global-color-accent) !important;
}



@media only screen and (max-width: 1024px) {
	
	
	
	/*** HOMEPAGE ***/
	.product .carousel:before,
	.product .carousel:after {
		display: none;
	}

	
	
	/*** STORE ACCOUNT ***/
	#store-account ul.store-info.store-info--video {
		display: flex;
		flex-direction: column;
	}
	
	#store-account ul.store-info.store-info--file 	{
		grid-template-columns: repeat(2, 1fr);
	}
	
	
	
}

@media only screen and (max-width: 767px) {

	
	
	/*** GENERAL ***/
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.75rem; }
	h4 { font-size: 1.5rem; }
	h5 { font-size: 1.25rem; }
	h6 { font-size: 1rem; }

	/*** STORE ACCOUNT ***/
	#store-account #tabs .e-n-tabs-content .e-con.e-flex {
		flex-wrap: nowrap;
	}
	
	#store-account ul.store-info.store-info--file {
		display: flex;
		flex-direction: column;
	}
	
	
	
}