:root {
  /* Base colors: Main project palette*/
  /* Primary */
    --green-500: hsl(158, 36%, 37%);
    --green-700: hsl(158, 42%, 18%);

    --black: hsl(212, 21%, 14%);
    --grey: hsl(228, 12%, 48%);
    --cream: hsl(30, 38%, 92%);
    --white: hsl(0, 0%, 100%);

  /* Fonts */
  --font-family-body: "Montserrat", sans-serif;
  --font-family-heading: "Fraunces", serif;

  --font-weight-b500: 500;
  --font-weight-b700: 700;

  --font-size-base: 14px;
  --font-size-sm: clamp(0.8rem, 1vw + 0.4rem, 0.9rem);   /* ~11–13px */
  --font-size-md: clamp(0.9rem, 1.5vw + 0.4rem, 1.1rem); /* ~13–15px */
  --font-size-lg: clamp(1.1rem, 2vw + 0.5rem, 1.4rem);   /* ~15–20px */
  --font-size-xl: clamp(1.4rem, 3vw + 0.5rem, 1.8rem);
}

/* --- --- Reset --- --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

dl, dt, dd, ol, ul, li{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    /* list-style-position: inside; */
    color: var(--stone-600)
}

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: inherit;
}

body{
    /* margin: 1rem 0; */
    
    min-height: 100vh;
    background-color: var(--cream);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);

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

h1,h2,h3,h4,h5,h6{
    font-family: var(--font-family-heading);
    color: var(--brown-800);
    font-weight: var(--font-weight-heading);
}

p{
    text-wrap: pretty;
    color: var(--stone-600);
}

/* --- main container --- */

.main-container {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  width: 22rem;
  height: 90vh;

  margin: 1rem 0;
  --main-padding: 0rem;
  padding: var(--main-padding);

  border-radius: 0.5rem;
  overflow: auto;
  flex-shrink: 0;
}

/* --- --- classes --- --- */

.product-preview{
  height: 45%;
  width: 100%;
  overflow: hidden;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.product-preview picture{
  height: 100%;
  width: 100%;
  display: block;
}
.product-preview img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.product-info{
  height: 55%;
  padding: 1rem 2rem;
  gap: 1rem;
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-shrink: 0;
}

.product-tag  p{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-b500);
  color: var(--grey);
}

.product-name h1{
  font-size: 2rem;
  font-weight: var(--font-weight-b700);
  line-height: 1;
}

.product-description p{
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--grey);
  font-weight: var(--font-weight-b500);
  line-height: 1.5;
}

.product-price{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.product-price-new{
  font-family: var(--font-family-heading);
  font-size: 2rem;
  color: var(--green-500);
  font-weight: var(--font-weight-b700);
}
.product-price-old{
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  color: var(--grey);
  font-weight: var(--font-weight-b500);
  text-decoration: line-through;
}

.add-to-cart-button{
  background-color: var(--green-500);
  border: 0;
  border-radius: 0.5rem;
  height: 3.5rem;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;

  cursor: pointer;
  transition: transform 0.3s ease;
}
.add-to-cart-button img{
  display: block;
  width: 1rem;
}
.add-to-cart-button p{
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--white);
  font-weight: var(--font-weight-b700);
}
.add-to-cart-button:hover{
  transform: scale(1.05);
  background-color: var(--green-700);
}
.add-to-cart-button:active{
  transform: scale(0.95);
  background-color: var(--green-700);
}
.add-to-cart-button:focus-visible{
  transform: scale(0.95);
  background-color: var(--green-700);
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

/* footer */

.attribution{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 1rem 0;

    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--brown-800); 
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 150%;
    letter-spacing: 0px;

    user-select: none; 
}

.attribution a{
    margin: 0 2px;
    display: inline-block;
    color: #3e52a3;
    transition: font-size 0.25s ease, color 0.25s ease;
    vertical-align: middle
}

.attribution a:hover{
    color: var(--green-500);
    font-size: 1.05rem;
    cursor: pointer;
}

.attribution a:focus-visible {
  outline: 1px solid hsla(228, 45%, 44%, 0.5);
  outline-offset: 1px;
  color: var(--green-500);
}

/* media-request for PC */
@media (min-width: 1024px){
    .main-container {
      flex-direction: row;
      justify-content: start;
      align-items: center;
      width: 38rem;
      min-height: 26rem;
      height: 50vh;
    }
    .product-info {
      width: 50%;
      height: 100%;
      justify-content: space-between;
      gap: 1rem;
      padding: 2rem;
    }
    .product-preview{
      width: 50%;
      height: 100%;
    }
}

/* media-request for mobile */
@media (max-width: 1023px) {
  .main-container {
    max-height: 90vh;
    min-height: 80vh;
  }
    .attribution {
      display: none;
  }
}