/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
	--primary-color:#402655;
	--secondary-color:#926896;
	--input-background-color:#ECF0FC;
	--text-color: #FFF;
	--text-title-color:#644776;
	--primary-font: 'Poppins';

	--faqs-answer-background-color:#402655
}
body{
	font-family:var(--primary-font);
}
body h1.h1{
	color:var(--text-title-color);
}
#header, #header .header-top{
	background-color:var(--primary-color);
	padding:unset;
}
#header .header-top .container{
	width: 100%;
}

#header .header-top-secondary{
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: small;
    line-height: .98rem;
    padding: .5rem 1rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#header .header-top-secondary img{
	height: 4rem;
}
#header .top-title{
	display:flex;
	text-wrap:nowrap;
	gap:5%;
}
#header .top-title p,
#header .header-top-secondary p{
	margin-top:unset;
	margin-bottom:unset;
	color:var(--text-color);
}
#header .top-title p strong{
	font-weight:800;
	font-size:3ch;
}
#header .header-nav{
	border-bottom: unset;
	max-height:unset;
}
#header .header-nav #menu-icon .material-icons{
	font-size: 4ch;
}
#header .top-menu .sub-menu{
	width: unset;
	min-width: unset;
	margin-left: unset;
	top: unset;
	left: unset;
}
#header .top-menu .sub-menu ul li{
	margin: unset;
	padding: .2rem;
}
nav.header-nav .mobile,
#header .header-top .container .row,
#header .header-top .container .row .header-top-right,
#header .header-top .container .row .right-nav{
	display: flex;
    justify-content: space-between;
	align-items:center;
	gap: 1vw;
}
#header .header-top .container .row .right-nav .user-info{
	display: flex;
	flex-direction: column;
	align-items: flex-end;

}
#header .header-advisor{
	font-size: small;
	text-align:center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
	background-color:var(--text-color);
}
#header .header-top a[data-depth="0"], 
#header .header-top .container .row .right-nav span, 
#header .header-top .container .row .right-nav a{
	text-transform:unset;
	color:var(--text-color);
	font-size:.8rem;
}
#header .header-nav .cart-preview.active{
	background: var(--secondary-color);
}
/* Home */
#index #wrapper{padding-top: unset;}
/* ------ Buttons styles ------ */
.product-quantity{
	flex-wrap: wrap;
}	
.btn-primary{
	background-color: var(--primary-color);
	color: white;
	border: none; 
	padding: .6rem;  
	font-weight: 500; 
	border-radius: 2rem;
	cursor: pointer; 
	transition: background-color 0.3s ease;
	text-transform: unset;
}
.btn-primary:hover {
 	background-color: #4A245C; 
}

.btn-primary:active {
  	background-color: #3F1D4F; 
  	transform: translateY(1px); 
}
/* ------ Buttons styles ------ */

#wrapper > *:not(.banner-home){
	padding-top:unset;
	padding: 0 1rem;
}
#wrapper .banner-home {
	width:100%;
	height:35dvh;
	background-size:cover;
	background-repeat: no-repeat;
	background-image:url('https://ctinys.com/themes/child_classic/assets/img/banner_home_desktop.webp');
	background-position: center;
}
#wrapper .product-flags li.product-flag{
	background:var(--primary-color);
}
#wrapper .two-columns .two-columns-home-text .home-title, #wrapper .card-container-title {
	font-size: 3ch;
	color:var(--text-title-color);
}
#wrapper .two-columns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
	background-image:url('https://ctinys.com/themes/child_classic/assets/img/Degrado_Fondo_Blanco.webp');
}
#wrapper .two-columns-home-text,
#wrapper .two-columns-home-img{
	flex: 1; 
}
#wrapper .two-columns-home-img img {
    max-width: 100%;
    height: auto;
}

#wrapper div#custom-text, #wrapper div#custom-text2 {
  background-color:unset;
  padding:unset;
  font-size: 1ch;
}
#wrapper #custom-text .content-text,
#wrapper #custom-text .content-image {
  flex: 1;
  padding: 20px;
  position: relative;
}

#wrapper #custom-text .content-image img{
	max-width: 65%;
}
#wrapper #custom-text .content-text .title-primary {
  color: var(--faqs-answer-background-color);
  font-size: 2.5rem;
}
.featured-products .products{
	flex-wrap: nowrap;
}
#index #wrapper .featured-products .products{
	justify-content: center;
}
#index #wrapper .featured-products .products .product{
	width: auto;
}
#wrapper .container-faqs{
	background: url(https://ctinys.com/themes/child_classic/assets/img/banner-faqs.webp);
	padding: 2rem;
}
#wrapper .container-faqs .title_category_page{
	display: flex;
    justify-content: center;
    color: var(--text-color);
}
#wrapper .container-faqs .faqs-card-block{
	background-color: unset;
	border:none;
	box-shadow: unset;
}
#wrapper .container-faqs .gomakoil_faq_page .questions{
	padding: 1rem;
	background-color: var(--faqs-answer-background-color);
	color:var(--text-color);
	border-radius: .5rem;
	margin-bottom: .5rem;
}
#wrapper .container-faqs .answer_faq{
	box-shadow: unset;
	background-color: transparent;
	border: none;
	margin-top: unset;
	line-height: unset;
}
#wrapper .container-faqs .answer_faq p,
#wrapper .child-advisor-container p{
	color: var(--text-color);
}
#wrapper .child-advisor-container{
	display: flex;
	flex-direction: column;
	text-align: left;
	background-color: var(--primary-color); 
	color: var(--text-color); 
	padding: 1rem;
}
#footer .block-contact .contact-infos{
	text-align: start;
    width: 95%;
}
#footer .block_newsletter{
	margin: unset;
}
#footer .block_newsletter form .input-wrapper{
	display: flex;
    justify-content: center;
    align-items: center;
}
#footer .block_newsletter form input{
	height: unset;
	background-color: var(--input-background-color);
	border: none;
	border-radius: .5rem;
}
#footer .block_newsletter form .btn-newsletter{
	bottom: unset;
}
#footer .footer-info{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
	align-items: center;
}
#footer .footer-info picture{
	display: flex;
	justify-content: center;
}
#footer .footer-info picture img{
	object-fit: contain;
	max-width: 60%;
}
/* PDP */
#product #wrapper .product-cover img{
	border-radius: 4px;
    box-shadow: 5px 5px 7px #6a6a6a;
}
#product #wrapper .product-prices{
	display: flex;
    align-items: center;
    gap: 2%;
}
#product #wrapper .container{
	padding: 1rem 0;
	width: 100%;
}
#product #wrapper .product-price{
	color: var(--primary-color);
	font-size: 3ch;
 }
#product #wrapper .product-actions .control-label{
	color: var(--text-title-color);
	font-weight: 500;
	font-size: 1.8ch;
}
.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover{
	border: var(--text-title-color) 3px solid;
}
/*---------- Carousel de variantes ---------- */
.owl-carousel .combination-card-container{
	width: max-content;
    margin: 0 auto;
}
.owl-carousel .combination-card-container .product-title{
	font-size: 1.8ch;
}
.owl-carousel .owl-nav{
	display: none;
}

.owl-carousel .combination-card-container .product-title a{
	color:var(--primary-color);
}
.owl-carousel .owl-item img{
	border-radius: .5rem;
}
/*---------- Carousel de variantes ---------- */
/* PDP */
/* AUTH */
	.authentication-page-header, 
	.registration-page-header {
		display: flex;
		justify-content:center;
		margin: 3.25rem auto;
	}
	.authentication-page-header .logo,
	.registration-page-header .logo {
		background-color: var(--primary-color);
		border-radius: 4px;
	}
	main#authentication.authentication-page,
	main#registration.registration-page {
		display: flex;
		justify-content: center;
	}
	main#authentication.authentication-page .features_login,
	main#registration.registration-page .features_login {
		max-width: var(--elements-size);
		padding: var(--spacing-05);
		border-right: 1px solid #CCC;
		flex: 1;
		padding-right: 3.75rem;
	}
	main#authentication.authentication-page .feature_item,
	main#registration.registration-page .feature_item {
		width: 100%;
		padding: 1.5rem;
		flex-wrap: nowrap;
		align-items: center;
		display: flex;
	}
	main#authentication.authentication-page .feature_item svg,
	main#authentication.authentication-page .feature_item .feature_text,
	main#registration.registration-page .feature_item svg,
	main#registration.registration-page .feature_item .feature_text
	{
		flex: 1;
	}
	main#authentication.authentication-page .section-divider,
	main#registration.registration-page .section-divider{
		width: 100%;
		height: auto;
		text-align: center;
		position: relative;
		margin: 2rem 0;
		min-height: 22px;
	}
	main#authentication.authentication-page .section-divider span,
	main#registration.registration-page .section-divider span{
		display: inline-block;
		margin: -9px auto;
		background: #FFFFFF;
		padding: 0 1rem;
		position: relative;
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-weight: 700;
	}
	main#authentication.authentication-page .section-divider::before,
	main#registration.registration-page .section-divider::before{
		content: '';
		width: 100%;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		background: #CCCCCC;
	}
	main#authentication.authentication-page .googlesignin,
	main#registration.registration-page .googlesignin {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	main#authentication.authentication-page .content-comment, .input-group-visibility,
	main#registration.registration-page .content-comment{
		top:1rem;
		left: 90%;
	}
	main#authentication.authentication-page .container_loginform,
	main#registration.registration-page .container_loginform {
		max-width: var(--elements-size);
		padding:3rem;
		flex:1;
	}
	main#authentication.authentication-page section.logic-form,
	main#registration.registration-page section.logic-form {
		display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	width: 25rem;
	}

    main#authentication.authentication-page .forgot-password .forgot-password-link,
	main#registration.registration-page .forgot-password .forgot-password-link {
		font-size: 0.875rem;
		line-height: 1.25rem;
		text-decoration: underline;
        display: block;
        margin-bottom: 0.5rem;
	}
	main#authentication.authentication-page .btn-primary,
	main#registration.registration-page .btn-primary,
	main#authentication.authentication-page .btn-secondary,
	main#registration.registration-page .btn-secondary {
		display: flex;
    	justify-content: center;
		width: 50%;
   		margin: 1rem auto;
	}
/* AUTH */
/*----------Responsive----------*/
#mobile_top_menu_wrapper .user-actions-menu_mobile{
	display:flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width:1200px){
	#wrapper .two-columns{
		width:100%;
		flex-direction:column;
		text-align:center;
	}
	.featured-products .products{
	flex-wrap: wrap;
	}
}
@media screen and (max-width:767px){
	#wrapper .banner-home {
	background-image: url(https://ctinys.com/themes/child_classic/assets/img/banner_home_responsive.webp);
	}
	#header .header-top a[data-depth="0"]{
		color:var(--primary-color);
	}
	#header .top-logo img{
		max-height:unset;
	}
	#header .header-top {
		padding:unset;
	}
	#header .header-top .container .row{
		display: inherit;
	}
	#header .header-top-secondary p{
		font-size:1.5ch;
	}
	#wrapper .two-columns {
    flex-direction: column;
    text-align: center;
	margin: 1rem auto;
  	}
	#wrapper .banner-home picture .banner-home-madein{
		right: 0;
	}
	#wrapper #custom-text .content-image img{
	max-width: 100%;
	}
	#product .owl-carousel .owl-nav,
	#index .owl-carousel .owl-nav{
	position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	font-size: 10ch;
	top: 35%;
	color: var(--secondary-color);
	}
	#wrapper .owl-theme .owl-nav [class*=owl-]:hover{
	background: unset;
	color: var(--primary-color);
	text-decoration: none;
	}
  #footer{
	padding-top:unset;
  }
  #footer .footer-info{
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	justify-content: center;
  }
  #footer .footer-container .row{
	display: flex;
	flex-direction: column-reverse;
  }
/* AUTH */
main#authentication.authentication-page .features_login,
main#registration.registration-page .features_login {
	display: none;
}
.authentication-page-header,
.registration-page-header {
	margin: 1.5rem auto;
}
main#authentication.authentication-page .container_loginform,
main#registration.registration-page .container_loginform {
	padding: 1.5rem;
}
/* AUTH */	

}
/*----------Responsive----------*/