.cart {
	margin-bottom:calc(var(--bs-gutter-x));;
}
.cart .box {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	height: 100%;
	background-color:#f5f5f6;
}
.cart .box .otherColors {
	position: absolute;
	left:15px;
	top:15px;
	opacity: 0;
	transition: .3s;
	z-index: 15;
	height: 55%;
	overflow-y: auto;
	direction: rtl; /* Elemanın metninin sağdan sola doğru akmasını sağlar */
  	overflow-y: auto; /* Dikey scrollbar'ı aktive eder */
  	direction: ltr; /* Yönü tekrar soldan sağa çevirir */
}
.cart .box .otherColors ul {}
.cart .box .otherColors ul li {
	margin-bottom:3px;
	position: relative;
	left:-15px;
}
.cart .box .otherSize {
	z-index: 15;
}
.cart .box .otherColors ul li:nth-child(1),
.cart .box .otherSize ul li:nth-child(1) {
	transition: .3s
}
.cart .box .otherColors ul li:nth-child(2),
.cart .box .otherSize ul li:nth-child(2) {
	transition: .6s
}
.cart .box .otherColors ul li:nth-child(3),
.cart .box .otherSize ul li:nth-child(3) {
	transition: .9s
}
.cart .box .otherColors ul li:nth-child(4),
.cart .box .otherSize ul li:nth-child(4) {
	transition: 1.2s
}
.cart .box .otherColors ul li:nth-child(5),
.cart .box .otherSize ul li:nth-child(5) {
	transition: 1.5s
}
.cart .box .otherColors ul li:nth-child(6),
.cart .box .otherSize ul li:nth-child(6) {
	transition: 1.8s
}
.cart .box .otherColors ul li:nth-child(7),
.cart .box .otherSize ul li:nth-child(7) {
	transition: 2.1s
}
.cart .box .otherColors ul li:nth-child(8),
.cart .box .otherSize ul li:nth-child(8) {
	transition: 2.4s
}
.cart .box .otherColors ul li:nth-child(9),
.cart .box .otherSize ul li:nth-child(9) {
	transition: 2.7s
}
.cart .box .otherColors ul li:nth-child(10),
.cart .box .otherSize ul li:nth-child(10) {
	transition: 3s
}
.cart .box .otherColors ul li:last-child {
	margin-bottom:0px;
}
.cart .box .otherColors ul li img,
.cart .box .otherColors ul li .videoThumb {
	height:56px;
	border:solid 1px rgba(255,255,255,1);
	border-radius: 3px;
	background-color:white;
	padding:2px;
	cursor: pointer;
	-webkit-box-shadow: 0 0 15px 5px rgba(0,0,0,.05);
    -moz-box-shadow: 0 0 15px 5px rgba(0,0,0,.05);
    box-shadow: 0 0 15px 5px rgba(0,0,0,.05);
    transition: .3s
}
.cart .box .otherColors ul li a {
	aspect-ratio: 1/1.3;
    display: block;
}
.cart .box .otherColors ul li .videoThumb {
	display:block;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.cart .box .otherColors ul li .videoThumb video{
	position: absolute;
	width: 100%;
	left:0;
	top:0;
}
.cart .box .otherColors ul li:hover img {
	border-color:rgba(0,0,0,0.5);
}
.cart .box .otherColors ul li.active img {
	border-color:var(--primaryColor);
}
.cart .box .otherColors ul li.active .videoThumb {
	border-color:var(--primaryColor);
}
.cart:hover .box .otherColors {
	left:15px;
	opacity: 1;
}
.cart:hover .box .otherColors li {
	left:0;
}

.cart .box .otherSize {
	position: absolute;
	right:15px;
	top:15px;
	opacity: 0;
	transition: .3s;
}
.cart .box .otherSize ul li {
	margin-bottom:3px;
	position: relative;
	right:-15px;
}
.cart .box .otherSize ul li a {
	height: 36px;
	aspect-ratio: 1/1;
	display:flex;
	align-items: center;
	justify-content: center;
	background-color:rgba(255,255,255,.6);
	color:rgba(0,0,0,0.5);
	font-size:13px;
	font-weight: 500;
	border-radius: 5px;
	border:solid 1px rgba(0,0,0,0.05);
	transition: .3s;
}
.cart:hover .box .otherSize {
	right:15px;
	opacity: 1;
}
.cart:hover .box .otherSize li {
	right:0;
}
.cart .box .otherSize ul li a:hover {
	background-color:var(--secondaryColor);
	color:white;
}
.cart .box .otherSize ul li.active a {
	background-color:var(--primaryColor);
	color:white;
}


.cart .data {
	background-color:#f5f5f6;
	padding-bottom:15px;
}
.cart .data .price {
	text-align: center;
	font-weight: 600;
	color:var(--primaryColor);
}
.cart .data .price .oldPrice {
	text-align: center;
	font-weight: 400;
	color:var(--cartTextColor);
	font-size:14px;
	margin-right:10px;
	text-decoration: line-through;
}
.cart .data .name {	
	height:42px;
	text-align: center;
	color:var(--cartTextColor);
	padding:10px 0px;
	font-size:14px;
	padding:0px 15px;
}
.cart .box .damping {	
	position: absolute;
	text-align: center;
	width: 100%;
	left:0;
	top:15px;
}
.cart .box .damping > span {	
	background-color:var(--success);
	border-radius: 5px;
	color:white;
	padding:0px 10px;
	line-height: 26px;
	font-size:12px;
	display:inline-block;
}
.cart .box .damping span i {	
	transform: rotate(90deg) scale(1) skew(0deg) translate(0)!important;
    -webkit-transform: rotate(90deg) scale(1) skew(0deg) translate(0)!important;
    -moz-transform: rotate(90deg) scale(1) skew(0deg) translate(0)!important;
    -o-transform: rotate(90deg) scale(1) skew(0deg) translate(0)!important;
    -ms-transform: rotate(90deg) scale(1) skew(0deg) translate(0)!important;
	display:inline-block;
	font-size:11px;
}
.cart .box .damping span span {	
	display:inline-block;
	animation-name: bounce;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
.cart .box .stars {
	display:flex;
	align-items: center;
	justify-content: center;
	font-size:13px;
	margin-top:10px;
}
.cart .box .stars i {
	color:black;
	opacity: .3;
}
.cart .box .stars .active i {
	color:black;
	opacity: 1;
}
.cart .box .data .buttons {
	position: relative;
}
.cart .box .data .buttons ul {
	position: absolute;
	display:flex;
	width: 100%;
	justify-content: center;
	bottom:0;
	opacity: 0;
	transition: .3s
}
.cart .box .data .buttons ul li .button {
	background-color:rgba(0,0,0,0.8);
	backdrop-filter:blur(5.9px);
    -webkit-backdrop-filter:blur(5.9px);
    line-height: 40px;
}
.cart .box .data .buttons ul li .button i {
    line-height: 40px;
}
.cart .box .data .buttons ul li {
	display:inline-flex;
}
.cart .box .data .buttons ul li:last-child {
	aspect-ratio: 1/1;
	height:41px;
}
.cart .box .data .buttons ul li .button:hover {
	background-color:var(--success);
}
.cart .box:hover .data .buttons ul {
	bottom:28px;
	opacity: 1;
}
.cart .box .data .buttons ul li:first-child {
	margin-right:10px;
}
.cart .box .data .buttons .likeToggle {
	padding:0px;
	aspect-ratio: 1/1;
	display:inline-flex;
	height: 100%;
	justify-content: center;
	align-items: center;
}
.cart .box .data .buttons .likeToggle i {
	margin:0px;
}
.cart .visual {
	padding-top:10%;
	background-color:#f5f5f6;
	text-align: center;
	aspect-ratio: 1/1.451;
	overflow: hidden;
	display:block;
}
.cart .visual img {
	width:90%;
	height:auto;
}
.cart .visual .videoThumb {
	width: 100%;
	display:block;
	margin-top:-10%;
}
.cart .visual .videoThumb video {
	width: 100%;
}
.cart {}
.cart {}
.cart {}
.cart {}


@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-7px);} 
    60% {transform: translateY(-5px);} 
} 


@media screen and (max-width:992px) {
	.cart {
		padding:5px;
	    margin-bottom: 0px;
	}
	.cart .data .name {
	    height: 42px;
	    text-align: left;
	    color: var(--cartTextColor);
	    font-size: 12px;
	    padding: 0px 15px;
	}
	.cart .data .price {
		zoom:85%;
		text-align: left;
		padding-left:15px;
	}
	.cart .box .stars {
		justify-content: flex-start;
		padding-left:13px;
	}
	.cart .box .otherColors {
		position: relative;
		opacity: 1;
		height: auto;
		order:2;
		top:0;
		overflow-x: auto;
		direction: initial;
		left:0;
		padding:5px;
		padding-bottom:7px;
		z-index: 25;
		margin-bottom: 5px;
	}
	.cart .box .otherColors ul {
		display:flex;
		width: fit-content;
	}
	.cart .box .otherColors ul li a {
		height:56px;
	}
	.cart .box .visual {
		order:1;
	}
	.cart .box  {
		display:flex;
		flex-wrap: wrap;
	}
	.cart .data {
		order:3;
	}
	.cart .box .otherColors ul li {
		left:0;
		margin-bottom:0px;
		margin-right:7px;
		transition: 0s !important;
	}
	.cart:hover .box .otherColors {
	    left: initial;
	}
	.cart .box .otherColors ul li img {
		background-color:transparent;
	}
	.cart .box .data .buttons ul {
		opacity: 1;
		position: relative;
		bottom: 0;
		zoom:77%;
		justify-content: flex-start;
		padding-left:13px;
	}
	.cart .box .data .buttons {
	    margin-bottom:10px;
	}
	.cart .box:hover .data .buttons ul {
	    bottom: 0;
	}
	.cart .box .data .buttons ul li .button {
		border-radius: 7px;
	}
	.cart .otherColors {
		height:75px !important;
	}
	.cart .box .data .buttons ul li:first-child {
		margin-right:5px;
	}
	.cart:hover .box .otherSize {
		zoom:88%;
	}

}