:root {
    --lighterBackground: #353637;
    --textColor:#E5E5E5;
    --blueButton:#1E75FE;
    --darkerBackground: #262728;
    --categoryColor: #68686A;
    --hoveredCategoryColor: #01D294;
    --category-title-and-sorting-wrap: #8A8A8A;
    --borderBottomWrap: #858585;
    --completeWrap: #474849;
    
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    outline: none;
    box-sizing: border-box;
}



#app {
    background: var(--darkerBackground)
}


.navbar {
    width: 100%;
    background-color: var(--lighterBackground);
    height: 90px;
    padding: 0 195px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--textColor);
    font-weight: bold;
    font-size: 28px;
    line-height: 35px;;
}
.cart-icon-wrap {
    position: relative;
    cursor: pointer;
}
.logo {
    cursor: pointer;
}
.items-in-cart {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #E43962;
    color: white;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero {
    background-image: url(http://534y567.mars-t2.mars-hosting.com/WebShop/assets/hero_img.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 480px;
    width: 100%;
    padding: 110px 180px 0 180px;

}

h1 {
    width: 335px;
    height: 60px;
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: bold;
    font-size: 52px;
    line-height: 65px;
    color: #353637;
    margin-bottom: 25px

}

h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 52px;
    line-height: 65px;
    color: var(--textColor);
}

.text-below-headline {
    width: 400px;
    height: 55px;
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 29px;
    margin-bottom: 50px;
    color: #353637;
    opacity: 0.7;
}

.blue-button {
    background: var(--blueButton);
    width: 155px;
    height: 46px;
    border-radius: 4px;
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #CDDAE3;
    cursor: pointer;
}

.main {
    height: 1140px;
    background: var(--darkerBackground);
    width: 100%;
    padding: 50px 30px;
    display: flex;
}

.sidebar {
    background-color: var(--lighterBackground);
    width: 290px;
    padding: 25px 30px;
    color: var(--sideBarTxt);
}

h3{
    color: var(--textColor);
    margin-bottom: 28px
}

.single-category {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    padding: 12px 0;
    color: var(--categoryColor);
    cursor: pointer;
    border-bottom: 1px solid var(--borderBottomWrap);
}

.single-category:hover {
    color: var(--hoveredCategoryColor);
    transition: .5s;
}

.single-card {
    width: 240px;
    min-height: 240px;
    background: var(--cardColor);
    margin: 50px 30px 50px 0;
    cursor: pointer;
    transition: all 0.5s;
}

.single-card:hover {
    transform: scale(1.05,1.05);
}

.product-info {
    padding: 15px;
    color: var(--textColor)
}

.singe-product-info {
    color: var(--textColor);
    padding: 58px;
    height: 480px;
}

.product-image-container {
    height: 170px;
}

.product-image-container img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-name {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 19px;
    margin: 10px 0;
}
.product-price {
    font-style: normal;
    font-weight: bold;
    font-size: 23px;
    line-height: 29px;
    margin-bottom: 30px;
}

.product-tag-container{
    overflow: auto;
    white-space: nowrap
}

.product-tag {
    padding: 0 12px;
    min-width: 64px;
    height: 26px;
    display: inline-block;
    border-radius: 3px;
    margin: 0 8px 8px 0;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: var(--textColor);
    cursor: pointer;
    background-color: var(--grayBtnColor);
}
.product-tag span {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.card-display {
    width: calc(100% -  240px);
    height: 100%;
    padding: 25px;
    overflow: auto;
}
.card-container{
    display: flex;
    flex-wrap: wrap;
}

.category-title-and-sorting-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: var(--category-title-and-sorting-wrap);
    padding-right: 132px;
}

.category-title-and-sorting-wrap > span > span {
    color: var(--textColor);
}

.selected-category {
    color: var(--hoveredCategoryColor)
}

.sort-btn {
    width: 114px;
    height: 37px;
    color: var(--textColor);
    border-radius: 6px;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    line-height: 16px;
    background: var(--grayBtnColor);
    border: none;
    cursor: pointer;
}

.single-product-page{
    width: 100%;
    background-color: var(--darkerBackground);
}

.single-product-page-content-wrap {
    max-width: 1520px;
    margin: 0 auto;
}

.single-product-gallery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 630px;
    border-bottom: 1px solid var(--borderBottomWrap);
    margin: 0 190px;
}

.left-side-stack {
    width: 105px;
    height: 105px;
    margin: 20px 0; 
}
.left-side-stack img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.selected-image-display {
    width: 428px;
    height: 480px; 
}

.selected-image-display img {
     object-fit: cover;
     display: block;
     width: 100%;
     height: 100%;
}

.price {
    font-style: normal;
    font-weight: bold;
    font-size: 39px;
    line-height: 49px;
    margin: 75px 0 40px 0;
}

.product-text-description{
    width: 400px;
    height: 87px;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 159.7%;
    color: var(--categoryColor);
}

.suggested-products{
    border-bottom: 1px solid var(--borderBottomWrap);
    margin: 0 190px; 
}

h4 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
    color: var(--textColor);
    margin: 40px 0 30px 0;
}

.suggested-producs-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cart {
    height: 100%;
}

.cart-wrap {
    width: 100%;
    height: 100vh;
    padding: 50px 195px;
}

table {
    width: 100%;
}

.cart-table-heading {
    width: 100%;
    height: 62px;
    background-color: var(--lighterBackground);
    margin: 32px 0;
    padding: 0 35px;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 19px;
    color: var(--textColor);
}

.cart-table {
    width: 100%;
    margin: 32px 0;
    padding: 0 35px 20px 35px;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 23px;
    color: var(--textColor); 
    border-bottom: 1px solid var(--borderColor);
}

.cart-table input {
    width: 74px;
    height: 28px;
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    padding: 3px;
    font-size: 15px;
    background: var(--darkerBackground);
    color: var(--textColor)
}

.td-image {
    width: 200px;
    display: flex;
    align-items: center;
    font-style: center;
}
.img-size-td {
    height: 40px;
    width: 40px;
}

.td-name {
    width: 400px;
}

.td-price {
    width: 300px;
}

.td-quantity {
    width: 300px;
}

.total-checkout-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-checkout-wrap a {
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #5E9CFE;
    text-decoration: none;
    display: inline-block;
    margin-right: 36px;

}

.total{
    font-style: normal;
    font-weight: 600;
    font-size: 21px;
    line-height: 26px;
    color: var(--textColor);
}

.total span {
    display: inline-block;
    margin-left: 3px;
    color: #01D294;
}

.checkout {
    width: 100%;
    position: relative;
}
.checkout-wrap {
    height: calc(100vh - 90px);
    padding: 50px 195px;
    width: 100%;
}

.ticket-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--darkerBackground);
    z-index: 2;
    opacity: 0.9;
}

.ticket {
    min-width: 880px;
    min-height: 540px;
    background: var(--lighterBackground);
    padding: 41px;
    opacity: 1;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    margin:-270px 0 0 -440px;
}

.ticket-data {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 21px;
    color: var(--textColor);
    margin: 8px 0 26px 0;
}

.ticket-left {
    border-right: 1px solid var(--borderBottomWrap);
    width: 25%;
}


.ticket-right {
    overflow-y: auto;
    margin-left: 30px;
    width: 100%;
}

.ticket-right img {
    display: inline-block;
    width: 72px;
    height: 72px;
}

.ticket-flex-wrap {
    display: flex;
}

h5 {
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    color: var(--textColor);
    margin-bottom: 41px;
}

.label {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    color: #9A9A9A;
}

.checkout-wrap .card-display {
    width: 100%;
    padding: 0;
}

.checkout-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 30px 0;
    background: var(--lighterBackground);
    padding: 50px 0;
}

.checkout-single-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.checkout-single-item span {
    font-style: normal;
    font-weight: 600;
    font-size: 17px;
    line-height: 21px;
    color: var(--textColor);
    display: inline-block;
    min-width: 100px;

}

.checkout-quantity {
    color: #8B8B8B !important;
}

.checkout-wrap .card-display input {
    font-size: 15px;
    width: 475px;    
    height: 56px;
    background: var(--inputBackground);
    border: 1px solid var(--inputBorderColor);
    box-sizing: border-box;
    border-radius: 4px;
    padding: 0 10px;
    color: var(--textColor); 
    margin: 10px 15px;

}


input::placeholder {
    color: var(--textColor);
    transition: .5s;
}

input:focus {
    background: var(--activeInputBackground)
}

input:focus::placeholder{
    font-size: 16px;
    
}

.x-btn {
    position: absolute;
    left: 95%;
    top: 4%;
}

.complete-purchase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px;
    background-color: var(--completeWrap);
    padding: 20px;
}

.complete-purchase a {
    color:#F53966;
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    margin-right: 35px;
    display: inline-block;
}