/*
 * csoft_prevnext_product  front-end module for Prestashop >= 1.7
 * Support contact: support@comonsoft.com.
 *
 * NOTICE OF LICENSE
 *
 * This source file is the property of Com'onSoft that is bundled 
 * with this package. It is also available through the world-wide-web 
 * at this URL: https://boutique.comonsoft.com/
 *
 * @category  front-end
 * @package   csoft_prevnext_product
 * @author    Com'onSoft (https://www.comonsoft.com/)
 * @copyright 2003-2023 Com'onSoft and contributors
 */

.cs-prevnext-buttons .row {
	display: block;
	clear: both
}

.cs-prevnext-title {
	text-align: center;
	margin: 10px 0
}

.cs-prevnext-buttons .row .cs-prevnext-button {
	margin: 10px 0 10px 0;
	z-index: 10;
	display: flex;
	align-items: center;
	height: unset !important
}

.cs-float-left {
	float: left;
	justify-content: left
}

.cs-float-right {
	float: right;
	justify-content: right
}

/* Sizes of product buttons depending on the number of options chosen  */

/* Quarter */
.cs-size-buttons-quarter-bo,
.cs-size-buttons-quarter-ai {
	width: 130px
}

/* Little */
.cs-size-buttons-little-bo {
	width: calc(43%/2)
}

.cs-size-buttons-little-ai {
	width: calc(80%/2);
	padding: 5px 0 !important
}

.cs-size-buttons-little-ai .cs-arrow-prevnext {
	max-width: 116px
}

.cs-size-buttons-little-ai .cs-img-no-effect .cs-img {
	margin: 0 !important
}

/* Half */
.cs-size-buttons-half-bo {
	width: calc(50%/2)
}

.cs-size-buttons-half-ai {
	width: calc(99%/2);
	padding: 5px 0 !important
}

.cs-size-buttons-half-ai .cs-arrow-prevnext {
	max-width: 164px;
	padding: 2px 0px
}

/* Half more */
.cs-size-buttons-half-more-bo {
	width: calc(53%/2)
}

.cs-size-buttons-half-more-ai {
	width: calc(98%/2);
	padding: 5px 0 !important
}

/* Almost full */
.cs-size-buttons-almost-full-bo {
	width: calc(79%/2);
	padding: 5px 0 !important
}

.cs-size-buttons-almost-full-bo .cs-arrow-prevnext {
	max-width: 124px
}

.cs-size-buttons-almost-full-ai {
	width: calc(99%/2);
	padding: 5px 0 !important
}

/* Full */
.cs-size-buttons-full-bo,
.cs-size-buttons-full-ai {
	width: calc(98%/2);
	padding: 5px 0 !important
}

/* Without */
.cs-size-buttons-without {
	display: none !important
}

.cs-superimposed {
	width: 100%;
	max-width: unset !important
}

.cs-arrow-prevnext {
	display: flex;
	white-space: initial;
	margin: 0;
	padding: 3px;
	align-items: center;
	min-width: 25px
}

.cs-arrow-prevnext i {
	color: #fff;
}

.cspnb-css-prev {
	font-size: 25px;
	margin-right: 12px
}

.cspnb-css-next {
	font-size: 25px;
	margin-left: 12px
}

.cs-margin-price-prev,
.cs-margin-price-next {
	margin-left: 10px
}

.cs-size-icon {
	justify-content: center;
	display: inline-flex;
	flex-direction: column
}

.cs-little-buttons a img,
.cs-little-buttons a .cs-button-text,
.cs-little-buttons a div {
	display: none
}

.cs-little-buttons:hover a img,
.cs-little-buttons:hover a .cs-button-text,
.cs-little-buttons:hover a div {
	display: block
}

.cs-button-text {
	white-space: initial;
	margin: 0 5px 0px 5px
}

.cs-only-arrow {
	position: fixed !important;
	top: 50%;
	opacity: 0.5;
	transition: all 0.7s ease-in-out
}

.cs-only-arrow.right {
	right: 0px
}

.cs-only-arrow.left {
	left: 0px
}

.cs-only-arrow:hover,
.cs-only-arrow:hover {
	opacity: 1
}

.cs-img-effect {
	overflow: hidden;
	min-width: 60px
}

.cs-img-no-effect {
	min-width: 60px
}

.cs-img {
	width: 60px;
	transition: all 0.7s ease-in-out;
	margin: 0 5px
}

.cs-zoom-rot-img-l:hover {
	-ms-transform: scale(1.5) rotate(-30deg);
	-webkit-transform: scale(1.5) rotate(-30deg);
	transform: scale(1.5) rotate(-30deg)
}

.cs-zoom-rot-img-r:hover {
	-ms-transform: scale(1.5) rotate(30deg);
	-webkit-transform: scale(1.5) rotate(30deg);
	transform: scale(1.5) rotate(30deg)
}

.cs-zoom-imgs:hover {
	-ms-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	transform: scale(1.4)
}

.cs-name-price {
	white-space: initial;
	margin: 0 5px 0 5px;
	padding: 3px;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.icon-color-s {
	color: green
}

.icon-color-w {
	color: orange
}

.icon-color-d {
	color: red
}

.btn-primary .material-icons {
	margin-right: 0
}

.label_max_size {
	width: 100px
}

@media (min-width: 701px) {
	.cs-prevnext-buttons .row .cs-prevnext-button {
		max-width: 540px;
		padding: .375rem .75rem
	}
}

@media (max-width: 1199px) {
	
	.cs-size-buttons-half-more-bo {
		width: calc(63%/2)
	}

	.cs-size-buttons-half-bo {
		width: calc(57%/2)
	}

	.cs-size-buttons-almost-full-bo {
		width: calc(90%/2)
	}

	.cs-size-buttons-almost-full-ai {
		width: calc(99%/2)
	}
}

@media (max-width: 991px) {
	.cs-size-buttons-little-bo {
		width: calc(55%/2)
	}

	.cs-size-buttons-little-ai {
		width: calc(99%/2)
	}

	.cs-size-buttons-little-ai .cs-arrow-prevnext {
		max-width: 94px
	}

	.cs-size-buttons-half-bo {
		width: calc(65%/2)
	}

	.cs-size-buttons-half-bo .cs-arrow-prevnext {
		max-width: 120px
	}

	.cs-size-buttons-half-ai .cs-arrow-prevnext {
		max-width: 100px
	}

	.cs-size-buttons-half-more-bo {
		width: calc(86%/2)
	}

	.cs-size-buttons-almost-full-bo,
	.cs-size-buttons-almost-full-ai {
		width: calc(98%/2)
	}
	.cs-size-buttons-full-bo {
		float: unset !important;
		width: 100%;
		max-width: unset !important
	}
}

@media (max-width: 767px) {
	.cs-size-buttons-almost-full-bo {
		width: 100%
	}

	.cs-a-mobile-bo {
		width: unset
	}

	.cs-a-mobile-bo .cs-name-price {
		white-space: initial;
		margin: 0;
		padding: 3px;
		max-width: 100%
	}

	.cs-previous-button {
		text-align: left
	}

	.cs-next-button {
		text-align: right
	}

	.cs-size-buttons-little-bo,
	.cs-size-buttons-little-ai {
		width: calc(82%/2);
		padding: 5px 0
	}

	.cs-size-buttons-half-more-bo,
	.cs-size-buttons-half-more-ai {
		width: calc(99% /2);
		padding: 5px 0
	}

	.cs-size-buttons-half-bo {
		width: calc(75%/2);
		padding: 5px 0 !important
	}

	.label_max_size {
		width: 78px
	}

	.cs-size-buttons-little-ai .cs-arrow-prevnext {
		max-width: 116px
	}

	.cs-size-buttons-half-bo {
		width: calc(93%/2);
		margin: 0;
		padding: 5px
	}

	.cs-size-buttons-half-ai .cs-arrow-prevnext {
		max-width: 120px
	}
}

@media (max-width: 575px) {

	.cs-size-buttons-half-more-bo {
		width: 100%
	}

	.cs-size-buttons-half-bo {
		width: calc(85%/2)
	}
}

@media (max-width: 460px) {
	.cs-prevnext-buttons .row .cs-prevnext-button {
		padding: 5px 0
	}

	.cs-row-mobile-bo-block {
		display: block !important
	}

	.cs-a-mobile-bo-block {
		margin: 10px auto !important;
		width: 100%
	}

	.cs-name-price {
		margin: 3px
	}


	.cs-previous-button {
		max-width: 120px;
		text-align: left;
		min-width: 105px
	}

	.cs-next-button {
		max-width: 120px;
		text-align: right
	}

	.cs-size-buttons-right-part {
		width: 100%
	}

	.cs-size-buttons-little-bo,
	.cs-size-buttons-little-ai {
		width: calc(98% /2)
	}

	.cs-size-buttons-half-bo {
		width: calc(99%/2)
	}

}

@media (max-width: 400px) {
	.cs-size-buttons-half-bo {
		width: 100%
	}

	.cs-size-buttons-almost-full-bo,
	.cs-size-buttons-almost-full-ai,
	.cs-size-buttons-almost-full-bo .cs-arrow-prevnext,
	.cs-size-buttons-almost-full-ai .cs-arrow-prevnext {
		padding: 5px 0 !important
	}

	.cs-size-buttons-almost-full-bo .cs-img-no-effect,
	.cs-size-buttons-almost-full-ai .cs-img-no-effect {
		min-width: 40px
	}

	.cs-size-buttons-almost-full-bo .cs-img-no-effect .cs-img,
	.cs-size-buttons-almost-full-ai .cs-img-no-effect .cs-img {
		margin: 0 !important;
		width: 40px !important
	}

	.cs-size-buttons-almost-full-bo .cs-name-price,
	.cs-size-buttons-almost-full-ai .cs-name-price {
		margin: 0px
	}

	.cs-size-buttons-half-ai .cs-name-price {
		margin: auto
	}

	.cs-size-buttons-half-ai .cs-arrow-prevnext {
		max-width: 95px
	}
}

@media (max-width: 390px) {
	.cs-size-buttons-little-bo {
		width: 100%
	}
}

@media (max-width: 350px) {
	.cs-size-buttons-little-ai .cs-img-no-effect {
		min-width: 50px
	}

	.cs-size-buttons-little-ai .cs-img-no-effect img {
		width: 50px
	}
}