/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

@font-face {
  font-family: "Red Hat Text";
  src: url("/assets/fonts/RedHatText-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Red Hat Text";
  src: url("/assets/fonts/RedHatText-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
}
.txt-1, h1 {
  font-family: "Red Hat Text";
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 120%;
  letter-spacing: 0;
}

.txt-2 {
  font-family: "Red Hat Text";
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 125%;
  letter-spacing: 0;
}

.txt-3 {
  font-family: "Red Hat Text";
  font-weight: 600;
  font-size: 1rem;
  line-height: 125%;
  letter-spacing: 0;
}

body, p, .txt-4 {
  font-family: "Red Hat Text";
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 125%;
  letter-spacing: 0;
}
body b, body strong, p b, p strong, .txt-4 b, .txt-4 strong {
  font-weight: 600;
}

.txt-red {
  color: hsl(14, 86%, 43%);
}

.txt-rose-900 {
  color: hsl(14, 65%, 9%);
}

.txt-rose-500 {
  color: hsl(12, 20%, 44%);
}

.txt-rose-400 {
  color: hsl(7, 20%, 60%);
}

.txt-rose-300 {
  color: hsl(14, 25%, 72%);
}

.txt-rose-100 {
  color: hsl(13, 31%, 94%);
}

.txt-rose-50 {
  color: hsl(20, 50%, 98%);
}

.txt-green {
  color: hsl(159, 68%, 38%);
}

button {
  cursor: pointer;
}

.btn {
  padding-inline: 24px;
  padding-block: 16px;
  background-color: hsl(14, 86%, 43%);
  color: white;
  border-radius: 9999px;
  border: none;
  font-family: "Red Hat Text";
  font-weight: 600;
  font-size: 1rem;
  line-height: 125%;
  letter-spacing: 0;
}
.btn:hover {
  background-image: linear-gradient(to left, hsla(0, 0%, 0%, 0.25), hsla(0, 0%, 0%, 0.25)), linear-gradient(to left, hsl(14, 86%, 43%), hsl(14, 86%, 43%));
}

.add-to-cart-btn {
  color: black;
  background-color: white;
  border: 1px solid hsl(7, 20%, 60%);
  padding-block: 12.5px;
  padding-inline: 28px;
  border-radius: 999px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.add-to-cart-btn::before {
  content: " ";
  width: 20px;
  height: 20px;
  background-image: url("/assets/images/icon-add-to-cart.svg");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 8px;
}
.add-to-cart-btn:hover {
  color: hsl(14, 86%, 43%);
  border-color: hsl(14, 86%, 43%);
}

.active-add-to-cart-btn-group {
  display: flex;
  max-width: fit-content;
  background-color: hsl(14, 86%, 43%);
  padding: 12px;
  gap: 45.5px;
  border-radius: 999px;
  color: white;
  user-select: none;
}
.active-add-to-cart-btn-group button {
  background: none;
  border: 2px solid white;
  border-radius: 999px;
  color: transparent;
  user-select: none;
  width: 20px;
  height: 20px;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.active-add-to-cart-btn-group button.minus-btn {
  background-image: url("/assets/images/icon-decrement-quantity.svg");
}
.active-add-to-cart-btn-group button.plus-btn {
  background-image: url("/assets/images/icon-increment-quantity.svg");
}

.carbon-neutral {
  display: flex;
  justify-content: center;
  gap: 8px;
  background-color: hsl(20, 50%, 98%);
  border-radius: 8px;
  padding: 16px;
}
.carbon-neutral::before {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: "";
  background-size: cover;
  background-image: url("/assets/images/icon-carbon-neutral.svg");
}

hr {
  height: 1px;
  border: 0 none;
  background-color: hsl(13, 31%, 94%);
  color: hsl(13, 31%, 94%);
}

main {
  padding: 24px;
  display: grid;
  gap: 32px;
}
@media only screen and (min-width: 480px) {
  main {
    padding: 40px;
  }
}
@media only screen and (min-width: 1280px) {
  main {
    grid-template-columns: 1fr 384px;
  }
}

#product-list h1 {
  padding-bottom: 32px;
}
#product-list .product-list-container {
  display: grid;
}
@media only screen and (min-width: 480px) {
  #product-list .product-list-container {
    grid-gap: 32px 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card picture {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
}
.product-card picture.active {
  border-color: hsl(14, 86%, 43%);
}
.product-card .add-to-cart-btn-wrapper {
  height: 38px;
  position: relative;
  display: flex;
  justify-content: center;
}
.product-card .add-to-cart-btn-wrapper .add-to-cart-btn,
.product-card .add-to-cart-btn-wrapper .active-add-to-cart-btn-group {
  position: absolute;
  transform: translate(0, -50%);
}

#cart .cart-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: white;
}
#cart .cart-container .cart-list .cart-item {
  display: grid;
  gap: 8px;
  grid-template: "name   action" auto "detail action" auto "sep sep"/1fr auto;
}
#cart .cart-container .cart-list .cart-item .cart-item-name {
  grid-area: name;
}
#cart .cart-container .cart-list .cart-item .cart-item-detail {
  grid-area: detail;
  display: flex;
  gap: 8px;
}
#cart .cart-container .cart-list .cart-item .cart-item-action {
  grid-area: action;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#cart .cart-container .cart-list .cart-item .cart-item-action button.cart-item-rm-btn {
  width: 20px;
  height: 20px;
  background-color: transparent;
  background-image: url("/assets/images/icon-remove-item.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12.5px 12.5px;
  border: 1px solid hsl(14, 25%, 72%);
  border-radius: 9999px;
  font-size: 0;
}
#cart .cart-container .cart-list .cart-item hr {
  grid-area: sep;
  margin-block: 16px;
}
#cart .cart-container .cart-list .cart-item:last-child hr {
  display: none;
  margin-block: none;
}
#cart .cart-container .order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-cart-placeholder {
  padding: 16px;
  text-align: center;
}
.empty-cart-placeholder img {
  margin-inline: auto;
  margin-bottom: 16px;
}

dialog#order-confirmed {
  padding: 24px;
  padding-top: 40px;
  margin: auto;
  border: none;
  border-radius: 12px;
  width: 100%;
  max-width: 592px;
}
@media only screen and (min-width: 480px) {
  dialog#order-confirmed {
    padding: 40px;
  }
}
dialog#order-confirmed section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}

.green-checkmark {
  width: 48px;
  height: 48px;
  background-image: url("/assets/images/icon-order-confirmed.svg");
  background-size: 48px 48px;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 24px;
}

#order-detail {
  background-color: hsl(20, 50%, 98%);
  padding: 24px;
  border-radius: 8px;
}
#order-detail .order-detail-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#order-detail .order-detail-total .order-detail-total-number {
  font-family: "Red Hat Text";
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 125%;
  letter-spacing: 0;
}
#order-detail .order-item + .order-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid hsl(13, 31%, 94%);
}

.order-item {
  display: grid;
  grid-template: "img name name subtotal" auto "img amount price subtotal" auto/auto auto 1fr auto;
}
.order-item .order-item-image {
  grid-area: img;
}
.order-item .order-item-image img {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}
.order-item .order-item-name {
  grid-area: name;
  font-family: "Red Hat Text";
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 125%;
  letter-spacing: 0;
}
.order-item .order-item-name b, .order-item .order-item-name strong {
  font-weight: 600;
}
.order-item .order-item-amount {
  grid-area: amount;
  margin-right: 8px;
  font-family: "Red Hat Text";
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 125%;
  letter-spacing: 0;
}
.order-item .order-item-amount b, .order-item .order-item-amount strong {
  font-weight: 600;
}
.order-item .order-item-price {
  grid-area: price;
  color: hsl(14, 65%, 9%);
}
.order-item .order-item-subtotal {
  grid-area: subtotal;
  align-self: center;
  font-family: "Red Hat Text";
  font-weight: 600;
  font-size: 1rem;
  line-height: 125%;
  letter-spacing: 0;
}

body, html {
  background-color: hsl(20, 50%, 98%);
  color: hsl(14, 65%, 9%);
}

::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/*# sourceMappingURL=style.css.map */