:root {
  /* Colors */
  --black: #1c232b;
  --grey: #6c7289;
  --cream: #f2eae2;
  --white: #fff;
  --green-500: #3d8168;
  --green-700: #1a4032;

  /* Typography - Font Family */
  --font-family-montserrat: "Montserrat", sans-serif;
  --font-family-fraunces: "Fraunces", serif;

  /* Text Preset 1 */
  --tp-1-size: 3.2rem;
  --tp-1-weight: 700;
  --tp-1-line-height: 1;

  /* Text Preset 2 */
  --tp-2-size: 1.4rem;
  --tp-2-weight: 700;
  --tp-2-line-height: 1.1;

  /* Text Preset 3 */
  --tp-3-size: 1.4rem;
  --tp-3-weight: 500;
  --tp-3-line-height: 1.6;

  /* Text Preset 4 */
  --tp-4-size: 1.2rem;
  --tp-4-weight: 500;
  --tp-4-line-height: 1.2;

  /* Text Preset 5 */
  --tp-5-size: 1.3rem;
  --tp-5-weight: 500;
  --tp-5-line-height: 1.2;

  /* Spacing */
  --spacing-500: 4rem;
  --spacing-400: 3.2rem;
  --spacing-300: 2.4rem;
  --spacing-200: 1.6rem;
  --spacing-100: 0.8rem;
  --spacing-50: 0.4rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
}

body {
  font-family: var(--font-family-montserrat);
  background-color: var(--cream);
  min-height: 100vh;
  padding: var(--spacing-300);

  display: flex;
  align-items: center;
  justify-content: center;
}

.product-container {
  width: 100%;
  max-width: 60rem;
  background-color: var(--white);
  border-radius: 0.8rem;
  overflow: hidden;
  display: flex;
}

.img-container {
  width: 50%;
}

.product-img {
  width: 100%;
  height: 100%;
}

.detail-container {
  width: 50%;
  padding: var(--spacing-400);
}

.product-tag {
  color: var(--grey);
  font-size: var(--tp-4-size);
  font-weight: var(--tp-4-weight);
  line-height: var(--tp-4-line-height);
  text-transform: uppercase;
  display: inline-block;
}

.product-title {
  color: var(--black);
  font-size: var(--tp-1-size);
  font-weight: var(--tp-1-weight);
  line-height: var(--tp-1-line-height);
  font-family: var(--font-family-fraunces);
  margin: var(--spacing-300) 0;
}

.product-info {
  color: var(--grey);
  font-size: var(--tp-3-size);
  font-weight: var(--tp-3-weight);
  line-height: var(--tp-3-line-height);
}

.product-prices {
  font-family: var(--font-family-fraunces);
  margin: var(--spacing-400) 0;
  display: flex;
  align-items: center;
}

.product-new-price {
  color: var(--green-500);
  font-size: var(--tp-1-size);
  font-weight: var(--tp-1-weight);
  line-height: var(--tp-1-line-height);
  margin-right: var(--spacing-200);
}

.product-old-price {
  color: var(--grey);
  text-decoration: line-through;
}

.product-btn {
  color: var(--white);
  background-color: var(--green-500);
  font-size: var(--tp-2-size);
  font-weight: var(--tp-2-weight);
  line-height: var(--tp-2-line-height);
  width: 100%;
  border-radius: 0.8rem;
  border: none;
  padding: var(--spacing-200) var(--spacing-400);

  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

.product-btn:hover,
.product-btn:active {
  background-color: var(--green-700);
  cursor: pointer;
}

ion-icon {
  font-size: 1.6rem;
  --ionicon-stroke-width: 5rem;
}

/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */
/* Mobile = 384px = 24em */

/******************************************/
/* BELOW 384px (Mobile) */
/******************************************/
@media (max-width: 24em) {
  body {
    padding: var(--spacing-500) var(--spacing-200);
  }

  .product-container {
    flex-direction: column;
  }

  .img-container,
  .detail-container {
    width: 100%;
  }

  .product-prices {
    margin: var(--spacing-300) 0;
  }
}