/* import fonts */
@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");

/* VARIABLES */
:root {
  --bg-color: #fff;
  --link-color: #000;
  --link-size: 1.1rem;
  --right-side-bg-color: 81, 187, 254;
}

/* General CSS */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Rubik;
}

html {
  font-size: 16px;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #000;
}

/* APP CONTAINER */
.app-container {
  width: 100vw;
  /* height: 100vh; */
}

/* APP BG */
.app-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  z-index: -1;
}
.app-bg .left-side {
  background-color: rgb(255, 255, 255);
  width: 75%;
  height: 100%;
}
.app-bg .right-side {
  background-color: rgb(var(--right-side-bg-color));
  width: 25%;
  height: 100%;
}

/* HEADER */
header {
  width: 100%;
  height: 100px;

  padding: 30px 10%;
  display: flex;
  justify-content: space-between;

  position: fixed;
  top: 0;
  left: 0;

  z-index: 99;
}
header nav ul {
  display: flex;
  align-items: center;
}
header nav ul li {
  list-style: none;
  margin: 0 10px;
  padding: 5px 5px;
  border-radius: 15px;
}
header nav ul li.active {
  border: 1px solid #000;
}
header nav ul li a {
  font-size: var(--link-size);
  display: flex;
  align-items: center;
  height: 32px;
}
header nav ul li.btn {
  background-color: rgba(var(--right-side-bg-color), 0.4);
  border: 1px solid rgb(var(--right-side-bg-color));
}
header nav ul li.btn img {
  width: 32;
  height: 32px;
}
header nav ul li.home a {
  display: flex;
  align-items: center;
}
header nav ul li.home a img {
  margin-right: 5px;
}
/* HEADER -> SHOOPING BAG */
.shopping-bag {
  padding: 0px 5px;
}
.shopping-bag a {
  display: flex;
  align-items: center;
}
.shopping-bag a img {
  width: 20px;
  height: 20px;
}
.shopping-bag .total-items-in-cart {
  margin-left: 10px;
  padding: 0px 5px;
  background-color: rgb(242, 255, 58);
  border-radius: 5px;
}
/* MAIN */
main {
  width: 100%;
  background-color: royalblue;
  position: relative;
  top: 100px;
}
main .products-preview {
  width: 60%;
  height: calc(100vh - 100px);
  position: absolute;
  left: 0;
}
main .model {
  width: 40%;
  height: calc(100vh - 100px);
  position: absolute;
  right: 0;
  z-index: -1;
}
/* PRODUCTS */
.products-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.product {
  width: 300px;
  border: 1px solid rgba(var(--right-side-bg-color), 0.4);
  border-radius: 10px;
  padding: 5px;
}
.product img {
  width: 100%;
}
/* MORE DETAILS */
.more-details {
  position: absolute;
  bottom: 80px;
  left: 50px;

  display: flex;
  align-items: center;
}
.more-details .see-more-btn {
  cursor: pointer;
  display: flex;
  align-items: center;

  transform: rotate(-90deg);

  font-size: 1.2rem;
}
.see-more-btn img {
  width: 80px;
  margin-right: 20px;
}
.more-details .description small {
  color: rgb(149, 149, 149);
}
.more-details .description h1 {
  margin: 10px 0;
}
.more-details .description h1 small {
  color: #000;
}
/* MODEL */
.model {
  display: flex;
  justify-content: right;
  align-items: center;
}
.model .model-img {
  height: 100vh;
  position: absolute;
  left: 35%;
  transform: translate(-50%);
  top: -100px;
}
.model .product {
  width: 300px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 5px;
}
.model .product img {
  width: 100%;
}
/* products list */
.products-list {
  width: 100vw;
  height: 100vh;
  padding-top: 100px;
  display: flex;
}

.add-to-cart img {
  width: 15px;
  height: 15px;
}

/* CART */
.cart {
  height: 100%;
  /* width: 25%; */
  position: relative;
}
/* cart header */
.cart-header {
  /* display: flex; */
  /* justify-content: space-around; */
  padding: 10px 0;
}
/* cart items */
.cart-items {
  /* max-height: calc(100vh - 247px); */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* cart item */
.cart-item {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}
.cart-item div {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* item info */
.cart-item .item-info {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0 10px 10px 0;
  padding: 10px;
}
.cart-item .item-info:hover {
  background-color: rgba(255, 0, 0, 0.6);
  cursor: pointer;
}
.cart-item .item-info img {
  height: 50px;
  width: 50px;
}
/* unit price */
.cart-item .unit-price {
  flex: 1;
  font-size: 1.2rem;
}
/* units */
.cart-item .units {
  flex: 1;
}
.cart-item .units .number {
  margin: 0 10px;
  font-size: 1.2rem;
}
.cart-item .units .btn {
  width: 10px;
  height: 25px;
  background-color: rgb(242, 255, 58);
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
}

/* cart footer */
.cart-footer {
  width: 100%;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  /* border-left: 1px solid rgb(var(--right-side-bg-color)); */
}
.cart-footer div {
  /* display: flex; */
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  font-size: 1.3rem;
}
.cart-footer .subtotal {
  background-color: white;
}
.cart-footer .checkout {
  background-color: rgb(242, 255, 58);
  cursor: pointer;
}
.h-pas { height: 200px; }
.h-footer { height: 125px; }