/* Reset */

* {
  margin: 0px;
  padding: 0px;
  word-wrap: break-word;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

/* Variables */
:root {
  /* color */
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);
  --color-black-translucent: rgba(0, 0, 0, 0.75);
  --color-grey-950: rgb(29, 32, 38);
  --color-grey-500: rgb(105, 112, 125);
  --color-grey-300: rgb(195, 202, 217);
  --color-grey-100: rgb(228, 233, 242);
  --color-grey-050: rgb(246, 248, 253);
  --color-orange-500: rgb(255, 126, 27);
  --color-orange-300: rgb(255, 171, 106);
  /* spacing */
  --spacing-0000: 0px;
  --spacing-0100: 8px;
  --spacing-0200: 16px;
  --spacing-0300: 24px;
  --spacing-0400: 32px;
  --spacing-0500: 40px;
  --spacing-0600: 48px;
  --spacing-0700: 56px;
  --spacing-0900: 72px;
  --spacing-1000: 80px;
  --spacing-1200: 96px;
  --spacing-1300: 104px;
  --spacing-1600: 128px;
  /* typography */
  --font-1: "Kumbh Sans";
  /* presets */
  --fontsize-preset-1: 2.75rem; /* 44px */
  --fontweight-preset-1: 700;
  --lineheight-preset-1: 3rem; /* 48px */
  --letterspacing-preset-1: 0rem; /* px */

  --fontsize-preset-2: 1.75rem; /* 28px */
  --fontweight-preset-2: 700;
  --lineheight-preset-2: 2rem; /* 32px */
  --letterspacing-preset-2: 0rem; /* px */

  --fontsize-preset-3: 1rem; /* 16px */
  --fontweight-preset-3: 400;
  --lineheight-preset-3: 1.625rem; /* 26px */
  --letterspacing-preset-3: 0rem; /* px */

  --fontsize-preset-3-bold: 1rem; /* 16px */
  --fontweight-preset-3-bold: 700;
  --lineheight-preset-3-bold: 1.625rem; /* 26px */
  --letterspacing-preset-3-bold: 0rem; /* px */

  --fontsize-preset-4: 0.938rem; /* 15px */
  --fontweight-preset-4: 400;
  --lineheight-preset-4: 1.625rem; /* 26px */
  --letterspacing-preset-4: 0rem; /* px */

  --fontsize-preset-5: 0.813rem; /* 13px */
  --fontweight-preset-5: 700;
  --lineheight-preset-5: 1rem; /* 16px */
  --letterspacing-preset-5: 0.125rem; /* 2px */

  --fontsize-preset-6: 0.75rem; /* 12px */
  --fontweight-preset-6: 700;
  --lineheight-preset-6: 0.938rem; /* 15px */
  --letterspacing-preset-6: 0.116rem; /* 1.85px */
}
/* Font setting template */

html {
  font-family: var(--font-1);
  font-size: var(--fontsize-preset-4);
  font-weight: var(--fontweight-preset-4);
  line-height: var(--lineheight-preset-4);
  letter-spacing: var(--letterspacing-preset-4);
  color: var(--color-grey-500);
}

header {
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  background-color: var(--color-white);
  padding: var(--spacing-0200) var(--spacing-0300);
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-0200);
  align-items: center;
  z-index: 8;

  .navigation-menu-button {
    justify-self: flex-start;
    border: none;
    background-color: transparent;
  }

  .site-logo {
    justify-self: flex-start;
    flex-grow: 1;
  }

  .cart-link {
    justify-self: flex-end;
    border: none;
  }

  .navigation-menu-button,
  .site-logo,
  .cart-link {
    img {
      height: 100%;
      object-fit: contain;
    }
  }

  .profile-link {
    justify-self: flex-end;
    a img {
      max-height: var(--spacing-0300);
      max-width: var(--spacing-0300);
      object-fit: contain;
    }
  }
}

main {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-0300);
  padding-top: var(--spacing-0900);
  padding-bottom: var(--spacing-0900);
  background-color: var(--color-white);
}

.product-image-container {
  position: relative;
  img {
    max-width: 100%;
  }
  button {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    border-radius: 50%;
    height: var(--spacing-0500);
    width: var(--spacing-0500);
    padding: var(--spacing-0200);
    border: none;
  }
  .previous-button {
    left: 20px;
    img {
      translate: 0px -2px;
    }
  }
  .next-button {
    right: 20px;
    img {
      translate: 0px -2px;
    }
  }
}

.product-details-container {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-0400);
  padding: var(--spacing-0000) var(--spacing-0300);

  .text-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-0200);
  }

  .product-brand {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-6);
    font-weight: var(--fontweight-preset-6);
    line-height: var(--lineheight-preset-6);
    letter-spacing: var(--letterspacing-preset-6);
    color: var(--color-grey-500);
    text-transform: uppercase;
  }
  .product-title {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-2);
    font-weight: var(--fontweight-preset-2);
    line-height: var(--lineheight-preset-2);
    letter-spacing: var(--letterspacing-preset-2);
    color: var(--color-grey-950);
  }
  .product-description {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-4);
    font-weight: var(--fontweight-preset-4);
    line-height: var(--lineheight-preset-4);
    letter-spacing: var(--letterspacing-preset-4);
    color: var(--color-grey-500);
  }
}

.price-content {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-0200);

  .price-actual {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-2);
    font-weight: var(--fontweight-preset-2);
    line-height: var(--lineheight-preset-2);
    letter-spacing: var(--letterspacing-preset-2);
    color: var(--color-grey-950);
  }

  .price-discount {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-white);

    flex-grow: 1;

    p {
      background-color: var(--color-grey-950);
      padding: 0 var(--spacing-0100);
      border-radius: var(--spacing-0100);
      width: fit-content;
    }
  }

  .price-original {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);

    text-decoration: line-through;
  }
}

.product-checkout {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-0200);
}

.product-quantity {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: var(--spacing-0200);
  background-color: var(--color-grey-050);

  button {
    background-color: transparent;
    border: none;
  }

  p {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-950);
  }
}

.add-to-cart-button {
  background-color: var(--color-orange-500);

  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-0200);
  justify-content: center;
  align-items: center;
  padding: var(--spacing-0200) 0;
  border: none;
  border-radius: var(--spacing-0100);

  img {
    filter: brightness(0);
  }

  p {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-950);
  }
}

/* Cart popup styling */
.popup-cart {
  position: fixed;
  right: 0px;
  z-index: 9;

  background-color: var(--color-white);
  height: 256px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-0200) var(--spacing-0200);
  border-radius: var(--spacing-0100);
  margin: var(--spacing-1000) var(--spacing-0100);

  .popup-cart-title {
    border-bottom: solid var(--color-grey-100) 1px;
    padding-bottom: var(--spacing-0200);

    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-950);
  }

  .cart-item-list-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    row-gap: var(--spacing-0300);
    padding: var(--spacing-0300) var(--spacing-0100);

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
  }

  .cart-item-list-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .popup-cart-empty {
    justify-content: center;
  }

  .popup-cart-empty-text {
    text-align: center;

    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-500);
  }

  .popup-link-checkout {
    background-color: var(--color-orange-500);
    border: none;
    padding: var(--spacing-0200) var(--spacing-1300);
    border-radius: var(--spacing-0100);
    text-align: center;
    text-decoration: none;

    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-950);
  }
}

.popup-cart .cart-item-list-wrapper .cart-item-wrapper {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-0200);
  align-items: center;

  .cart-item-image {
    height: 50px;
    width: 50px;

    border-radius: var(--spacing-0100);
  }

  div {
    flex-grow: 1;
  }

  p {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3);
    font-weight: var(--fontweight-preset-3);
    line-height: var(--lineheight-preset-3);
    letter-spacing: var(--letterspacing-preset-3);
    color: var(--color-grey-500);
  }

  strong {
    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-950);
  }

  button {
    background-color: transparent;
    border: none;
    justify-self: flex-end;
  }
}

/* nav bar styling */

nav {
  .light-box-unfocus {
    position: fixed;
    z-index: 10;
    background-color: var(--color-black-translucent);
    height: 100vh;
    width: 100vw;
  }

  .light-box-focus {
    width: 66vw;
    max-width: 300px;
    height: 100%;
    background-color: var(--color-white);
    padding: var(--spacing-0300);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--spacing-0700);
  }

  ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--spacing-0400);
  }

  ul li a {
    text-decoration: none;

    font-family: var(--font-1);
    font-size: var(--fontsize-preset-3-bold);
    font-weight: var(--fontweight-preset-3-bold);
    line-height: var(--lineheight-preset-3-bold);
    letter-spacing: var(--letterspacing-preset-3-bold);
    color: var(--color-grey-950);
  }

  button {
    border: none;
    background-color: transparent;
  }
}

@media (min-width: 767px) {
  html {
    padding-inline: var(--spacing-1000);
  }

  header {
    height: var(--spacing-600);
    padding-inline: var(--spacing-1000);

    .navigation-menu-button,
    .site-logo,
    .cart-link {
      height: var(--spacing-0300);
    }
    .profile-link {
      a img {
        max-height: var(--spacing-0600);
        max-width: var(--spacing-0600);
      }
    }
  }

  main {
    padding-top: var(--spacing-1600);
    row-gap: var(--spacing-0600);
  }

  .product-image-container {
    /* height: 350px; */

    img {
      max-height: 100%;
      object-fit: cover;
      border-radius: var(--spacing-0100);
    }

    button {
      height: var(--spacing-0500);
      width: var(--spacing-0500);
    }
    .previous-button {
      img {
        translate: 0px -4px;
      }
    }
    .next-button {
      img {
        translate: 0px -4px;
      }
    }
  }

  .product-details-container {
    padding: var(--spacing-0000);
    row-gap: var(--spacing-0300);

    .text-content {
      row-gap: var(--spacing-0300);
    }

    .product-title {
      font-family: var(--font-1);
      font-size: var(--fontsize-preset-1);
      font-weight: var(--fontweight-preset-1);
      line-height: var(--lineheight-preset-1);
      letter-spacing: var(--letterspacing-preset-1);
      color: var(--color-grey-950);
    }

    .product-description {
      font-family: var(--font-1);
      font-size: var(--fontsize-preset-3);
      font-weight: var(--fontweight-preset-3);
      line-height: var(--lineheight-preset-3);
      letter-spacing: var(--letterspacing-preset-3);
      color: var(--color-grey-500);
    }
  }

  .price-content {
    display: grid;
    grid-template-columns: max-content auto;
  }

  .product-checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-0100);
  }

  .product-quantity {
    border-radius: var(--spacing-0100);
  }

  .popup-cart {
    left: auto;
    box-shadow: var(--spacing-0000) var(--spacing-0100) var(--spacing-0200)
      var(--color-black-translucent);
  }

  @media (min-width: 1023px) {
    main {
      max-width: 1110px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--spacing-1600);
      justify-self: center;
      align-items: center;
      padding-inline: var(--spacing-1000);
    }

    main .product-image-section {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacing-0400);

      .product-image-container {
        height: auto;
        max-width: 480px;
      }
    }

    .product-thumbnail-container {
      display: flex;
      flex-direction: row;
      column-gap: var(--spacing-0400);
      overflow-x: auto;

      button {
        padding: var(--spacing-0000);
        border: none;
        background-color: transparent;
        border-radius: var(--spacing-0100);

        img {
          height: var(--spacing-1200);
          width: var(--spacing-1200);
          object-fit: cover;
          border-radius: var(--spacing-0100);
        }
      }
    }

    .light-box-unfocus {
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      z-index: 10;
      background-color: var(--color-black-translucent);
      display: flex;
      justify-content: center;
      align-items: center;

      .light-box-focus {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }
      .product-image-section {
        padding: 50px;
        max-width: 500px;
        flex-grow: 1;
        row-gap: var(--spacing-0300);
        display: flex;
        flex-direction: column;
        align-items: center;

        .button-close-lightbox {
          align-self: flex-end;
          padding: var(--spacing-0100);
          background-color: transparent;
          aspect-ratio: 1;
          border: none;
          img {
            filter: brightness(100);
          }
        }

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

        .previous-button:hover,
        .next-button:hover,
        .button-close-lightbox:hover {
          background-color: var(--color-orange-500);
          img {
            filter: brightness(100);
          }
        }

        .previous-button {
          left: -20px;
          img {
            translate: 0px -4px;
          }
        }
        .next-button {
          right: -20px;
          img {
            translate: 0px -4px;
          }
        }
      }
      .product-thumbnail-container {
        max-width: 400px;
        column-gap: var(--spacing-0300);
        height: 100%;
        img {
          width: var(--spacing-1000);
          height: var(--spacing-1000);
        }
        .button-thumbnail:hover {
          height: 100%;
          background-color: white;
          border-radius: var(--spacing-0100);
          img {
            opacity: 0.8;
          }
        }
      }
    }
    .button-thumbnail[aria-selected="true"] {
      background-color: white;
      border-radius: var(--spacing-0100);
      border: solid var(--color-orange-500) 3px;
      img {
        opacity: 0.6;
      }
    }
  }
}