/* Montserrat Font-family */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Fraunces Font-family */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

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

:root {

    /* Primary colors */

--Green-700: hsl(158, 42%, 18%);
--Green-500: hsl(158, 36%, 37%);

    /* Neutral colors */

--Black: hsl(212, 21%, 14%);
--Grey: hsl(228, 12%, 48%);
--Cream: hsl(30, 38%, 92%);
--White: hsl(0, 0%, 100%);

    /* font sizes  */
--font-xl: 2.2rem;
--font-large: 1.8rem;
--font-mid: 0.9rem;
--font-base: 0.85rem;
--font-sm: 0.8rem;

    /* font family  */

--font-family-montserrat: 'Montserrat', sans-serif; 
--font-family-fraunces: 'Fraunces', sans-serif;   
}

body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--Cream);
}

main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem 0;
 }

.card-container {
    width: min(90%, 23.4375rem);
    height: auto;
    background-color: var(--White);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

.card-container > *:not(:first-child) {
    margin: 1.5rem;
}

 .product-img-section .product-visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

 /* Product content section styling  */

 .product-name {
    font-family: var(--font-family-montserrat);
    text-transform: uppercase;
    letter-spacing: 0.19rem;
    font-size: var(--font-base);
    color: var(--Grey);
 }

 .product-info h1 {
    font-family: var(--font-family-fraunces);
    font-size: var(--font-large);
    line-height: 1;
    color: var(--Black);
    margin-block: 1rem;
 }

 .product-description {
    font-family: var(--font-family-montserrat);
    font-size: var(--font-mid);
    color: var(--Grey);
    line-height: 1.4;
 }

 /* Product Pricing Information Styling  */

.product-pricing-info {
    display: flex;
    gap: 1rem;
    margin-block: 1rem;
}

   .offer-price {
    font-family: var(--font-family-fraunces);
    font-size: var(--font-large);
    font-weight: 700;
    color: var(--Green-500);
   }

   .og-price {
    font-family: var(--font-family-montserrat);
     align-content: center;
     text-decoration: line-through;
     text-decoration-thickness: 0.6px;
     font-size: var(--font-para);
     color: var(--Grey);

   }

/* Add to Cart button Styling  */

.btn {
   width: 100%;
   padding: 0.8rem;
   border: none;
   background-color: var(--Green-500);
   color: var(--White);
   font-family: var(--font-family-montserrat);
   font-size: var(--font-sm);
   font-weight: 500;
   border-radius: 0.3rem;
   display: inline-flex;
    gap: 0.6rem;
    justify-content: center;
    cursor: pointer;
}

 .cart-icon {
   transition: transform 0.3s ease;
}

.cart-icon:hover {
    transform: rotate(360deg);
} 

.btn:hover {
    transform: scale(1.02);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    
}

.btn:active {
  background-color: var(--Green-700);
}

/* footer styling  */

.attribution {
    font-size: var(--font-sm);
    text-align: center; 
}
.attribution a {
     color: var(--Green-700);
}

@media (min-width:37rem) {
   .card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 37rem;
   } 
  .card-container > *:not(:first-child) {
    margin: 2rem;
   }
   .product-img-section .product-visual{
    height: 100%;
   }
   .product-name {
    font-size: var(--font-mid);
   }
   .product-info h1 {
    font-size: var(--font-xl);
    margin-block: 1.5rem;
   }
   .product-pricing-info {
    margin-block: 1.5rem;
   }
   .offer-price {
    font-size: var(--font-xl);
   }
   .btn {
    font-size: var(--font-mid);
   }

}