@import 'partials';
.cart-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 0px;
@media($sm-1679){
padding: 30px 0px;
}
@media($sm-1441){
padding: 25px 0px;
}
@media($sm-1199){
padding: 20px 0px;
}
.link-text{
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
text-decoration: none;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
.cart-title{
font-family: $primary-font;
font-weight: 400;
font-size: 42px;
line-height: 48px;
letter-spacing: 0%;
text-transform: uppercase;
color: #fff;
margin-bottom: 0px;
@media($sm-1679){
font-size: 38px;
}
@media($sm-1441){
font-size: 36px;
}
@media($sm-1199){
font-size: 34px;
}
@media($sm-991){
font-size: 32px;
}
@media($sm-767){
font-size: 28px;
}
@media($sm-579){
font-size: 26px;
}
@media(max-width:379px){
font-size: 20px;
}
span{
font-weight: 600;
color: $primary;
}
}
.text-sec{
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: right;
color: $white;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
span{
color: $primary;
}
}
}
.cart-inner{
padding: 0px 15px;
@media($sm-1679){
padding: 0px 12px;
}
.cart-inner-sec{
background: #18181A;
border-radius: 38px;
@media($sm-991){
margin-bottom: 20px;
}
}
}
.cart-item{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #26262A;
padding: 44px 39px;
@media($sm-1679){
padding: 40px 34px;
}
@media($sm-1441){
padding: 30px;
}
@media($sm-1199){
padding: 20px;
flex-wrap: wrap;
}
&:last-child{
border-bottom: 0px;
}
.product-inner{
display: flex;
align-items: center;
@media($sm-1199){
width: 65%;
padding-bottom: 10px;
}
@media(max-width:660px){
width: 100%;
}
@media($sm-479){
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
}
.quatity{
@media($sm-1199){
flex: 1;
display: flex;
align-items: flex-end;
}
.qty-box{
display: flex;
@media($sm-1199){
width: 100%;
justify-content: flex-end;
}
.minus,.plus,.delete {
width: 42px;
height: 42px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color:#29292C;
font-size: 18px;
color: #fff;
border-bottom: 1px solid #29292C;
margin: 0px 5px;
box-shadow: 0px;
border: none;
font-family: $primary-font;
@media($sm-1679){
width: 38px;
height: 38px;
}
@media($sm-1441){
width: 34px;
height: 34px;
}
@media($sm-1199){
width: 32px;
height: 32px;
}
@media($sm-1199){
width: 28px;
height: 28px;
}
img{
@media($sm-1679){
height: 12px;
width: 12px;
object-fit: contain;
}
}
}
}
}
.product{
width: 87px;
height: 87px;
border-radius: 11px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
@media($sm-1679){
width: 77px;
height: 77px;
}
@media($sm-1441){
width: 67px;
height: 67px;
}
@media($sm-1199){
width: 57px;
height: 57px;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
.product-details{
margin-left: 23px;
@media($sm-479){
margin-left: 0px;
}
.product-name{
font-family: $primary-font;
font-weight: 600;
font-size: 18px;
line-height: 32px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
word-break: break-all;
@media($sm-1679){
font-size: 16px;
line-height: 24px;
}
@media($sm-1441){
font-size: 14px;
line-height: 20px;
}
@media($sm-479){
margin-top: 10px;
}
}
.tags{
display: flex;
align-items: center;
flex-wrap: wrap;
@media($sm-1199){
flex-wrap: wrap;
}
.badge{
height: auto;
white-space: normal;
overflow: visible;
text-overflow: unset;
padding: 7px 12px;
background-color: #28282B;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0%;
text-align: left;
text-transform: capitalize;
color: #fff;
border-radius: 12px;
margin-right: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
a{
color: #fff;
}
@media($sm-1679){
// height: 30px;
font-size: 12px;
}
@media($sm-1441){
// height: 28px;
}
@media($sm-1199){
margin-bottom: 10px;
}
&.txt-sec{
justify-content: space-between;
span{
margin: 0px 5px;
}
.txt{
color: #61616F;
text-decoration: line-through;
}
.txt-col{
color: #CD6429;
}
}
}
}
}
}
.cart-summary{
background: #18181A;
border-radius: 28px;
margin-left: 50px;
@media($sm-1679){
margin-left: 40px;
}
@media($sm-1441){
margin-left: 30px;
}
@media($sm-1199){
margin-left: 20px;
}
@media($sm-991){
margin-left: 0px;
}
.card-details,.totl-sec{
display: flex;
justify-content: space-between;
color: #606069;
padding: 21px 42px;
@media($sm-1679){
margin-left: 40px;
padding: 18px 35px;
}
@media($sm-1441){
margin-left: 35px;
padding: 16px 30px;
}
@media($sm-1199){
margin-left: 30px;
padding: 16px 20px;
}
@media($sm-1441){
margin-left: 25px;
padding: 15px;
}
.total-amount-txt,.totl-amunt{
font-weight: 500;
font-size: 20px;
line-height: 32px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
font-family: $primary-font;
@media($sm-1679){
font-size: 18px;
}
@media($sm-1441){
font-size: 16px;
}
@media($sm-1199){
font-size: 14px;
}
}
}
.totl-sec{
border-top: 1px dashed #343437;
}
}
.checkout-sec{
margin-left: 50px;
@media($sm-1679){
margin-left: 40px;
}
@media($sm-1441){
margin-left: 30px;
}
@media($sm-1199){
margin-left: 20px;
}
@media($sm-579){
margin-left: 0px;
}
.checkout-btn{
background-color: #CD6429;
border: 1px solid #CD6429;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500;
font-size: 16px;
line-height: 100%;
font-family: $primary-font;
letter-spacing: 0%;
width: 100%;
border-radius: 50px;
margin-top: 22px;
@media($sm-1679){
height: 48px;
}
@media($sm-1441){
height: 42px;
}
@media($sm-1199){
height: 38px;
}
}
}
.product-sec{
position: relative;
.out-of-stock{
position: absolute;
width: 100%;
height: 100%;
color: #fff;
font-weight: 700;
font-size: 16px;
line-height: 20px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
background: #28282BE5;
top: 0px;
text-transform: uppercase;
display: flex;
align-items: center;
border-radius: 10px;
font-family: $primary-font;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
.cart-rt-sec{
margin-right: 0px;
}
.cart-page{
min-height: calc(100vh - 565px);
padding-bottom: 80px;
@media($sm-991){
padding-top: 60px;
}
.col-md-8 , .col-md-4{
@media($sm-991){
width: 100%;
}
}
}