/* Front page style rules.

	* Table of contents

	- Main slider
	- Product slider
	- Front banner
	- Instagram
	- Front subscription

 */

.front-page__title,
.front-page__subtitle {
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
	line-height: 1.5;
	font-weight: 400;
}

.front-page__title {
	margin-top: 60px;
	margin-bottom: 10px;
	font-size: 3rem;
}

.front-page__subtitle {
	margin-bottom: 30px;
	font-size: 1.4rem;
}

@media screen and ( min-width: 768px ) {
	.home .wrap {
		max-width: unset;
	}
}

@media screen and ( min-width: 1024px ) {
	.front-page__title,
	.front-page__subtitle {
		padding-right: 0;
		padding-left: 0;
		font-weight: 400;
	}

	.front-page__title {
		margin-top: 80px;
		margin-bottom: 40px;
		font-size: 4rem;
	}

	.front-page__subtitle {
		font-size: 1.6rem;
	}
}

/* Main slider
------------------------------------------------------------------------------------------------- */

.main-slider__item {
	text-align: center;
}

.main-slider__arrow {
	display: none;
}

.main-slider.slick-slider {
	/* fix slick style */
	margin-bottom: 0;
}

.main-slider:not( .slick-slider ) .main-slider__item-wrap:not( :first-child ) {
	display: none;
}

.main-slider__video,
.main-slider__image {
	width: 100%;
	object-position: center;
	object-fit: cover;
}

@media screen and ( min-width: 768px ) {
	.main-slider__container {
		position: relative;
	}

	.main-slider__arrow {
		position: absolute;
		top: 50%;
		display: block;
		width: 20px;
		height: 20px;
		margin-top: calc( -20px / 2 );
		cursor: pointer;
		z-index: 20;
	}

	.main-slider__arrow svg {
		width: 100%;
		height: 100%;
	}

	.main-slider__arrow_prev path,
	.main-slider__arrow_next path {
		opacity: 0.5;
		stroke-opacity: 0.5;
		transition: opacity .3s, stroke-opacity .3s;
	}

	.main-slider__arrow_prev:hover path,
	.main-slider__arrow_next:hover path {
		opacity: 1;
		stroke-opacity: 1;
	}

	.main-slider__arrow_prev {
		left: 10px;
	}

	.main-slider__arrow_next {
		right: 10px;
	}
}

@media screen and ( min-width: 1024px ) {
	.main-slider__arrow {
		width: 35px;
		height: 35px;
		margin-top: calc( -35px / 2 );
	}

	.main-slider__arrow_prev {
		left: 20px;
	}

	.main-slider__arrow_next {
		right: 20px;
	}
}

/* Product slider
------------------------------------------------------------------------------------------------- */

.front-product-slider__slider .quickbuy-panel-container {
	display: none;
}

.front-product-slider__slider .slick-list {
	margin-left: -5px;
	margin-right: -5px;
}

.front-product-slider .slick-slide {
	padding: 0 5px;
	position: relative;
}

.front-product-slider .product-grid-image-container {
	margin-bottom: 15px;
}

.front-product-slider li {
	list-style-type: none;
}

.front-product-slider li.product a img {
	width: 100%;
}

.front-product-slider .slick-arrow,
.front-product-slider .slick-arrow::before {
	width: 11px;
	height: 20px;
}

.front-product-slider .slick-arrow {
	/* minus half of text block height (84px) to align in image center */
	margin-top: calc( -84px / 2 );
	z-index: 1;
}

.front-product-slider button.slick-prev {
	left: 5px;
}

.front-product-slider button.slick-prev::before {
	content: url( ../images/icons/arrow__left.svg );
}

.front-product-slider button.slick-prev::before:hover {
	content: url( ../images/icons/arrow__left.svg );
}

.front-product-slider button.slick-next {
	right: 5px;
}

.front-product-slider button.slick-next::before {
	content: url( ../images/icons/arrow__right.svg );
}

.front-product-slider button.slick-next::before:hover {
	content: url( ../images/icons/arrow__right.svg );
}

.front-product-slider .woocommerce-loop-product__title {
	margin-bottom: 5px;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.front-product-slider .price {
	display: flex;
	column-gap: 10px;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin-bottom: 7px;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
}

.front-product-slider .price del {
	color: var( --ct-color-dark-gray );
	font-size: 1rem;
}

@media screen and ( min-width: 1024px ) {
	.front-product-slider .woocommerce-loop-product__title,
	.front-product-slider .price {
		font-size: 1.4rem;
	}

	.front-product-slider .price del {
		font-size: 1.2rem;
	}
}

/* Front banner
------------------------------------------------------------------------------------------------- */

.front-banner__container {
	margin-top: 60px;
	margin-bottom: 30px;
}

.front-banner__container a {
	display: block;
}

.front-banner__image {
	width: 100%;
}

@media screen and ( min-width: 768px ) {
	.front-banner__container {
		margin-bottom: 60px;
	}
}

/* Instagram
------------------------------------------------------------------------------------------------- */

.insta-feed-hashtag {
	display: none;
}

.insta-feed-account {
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 60px;
	text-align: end;
}

.insta-feed-account-text {
	/* not need according to design, but should exists to display '@' to the left of account name */
	font-size: 0;
}

.insta-feed-account-link {
	text-transform: uppercase;
}

.fa.insta-feed-account-icon {
	font-size: 2rem;
	vertical-align: middle;
}

.iwebsite-insta-slider {
	padding-right: 5px;
	padding-left: 5px;
}

.iwebsite-insta-slider .insta-slider-inner .post-caption-container,
.iwebsite-insta-slider .instagram-grid-item .post-caption-container {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* force native styles */
	transform: translate( 0, 0 );
	font-size: 1.4rem;
}

.iwebsite-insta-slider .insta-slider-inner:hover .post-caption-container,
.iwebsite-insta-slider .instagram-grid-item:hover .post-caption-container {
	/* force native styles */
	background-color: var( --ct-color-black-alfa );
}

@media screen and ( min-width: 768px ) {
	.insta-feed-account {
		text-align: center;
	}

	.insta-feed-account-link {
		font-size: 3rem;
	}

	.insta-feed-account-icon {
		display: none;
	}
}

@media screen and ( min-width: 1024px ) {
	.insta-feed-account {
		margin-top: 80px;
		margin-bottom: 40px;
	}

	.insta-feed-account-link {
		font-size: 4rem;
	}
}

/* Front subscription
------------------------------------------------------------------------------------------------- */

.subscription-form_front {
	display: none;
}

@media screen and ( min-width: 768px ) {
	.subscription-form_front {
		display: block;
	}

	.subscription-form_front .subscription-form__title {
		margin-bottom: 30px;
	}

	.subscription-form_front .subscription-form__wrap {
		max-width: 340px;
		margin-right: auto;
		margin-left: auto;
	}
}