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

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  
  body {
    /* 3. Add accessible line-height */
    line-height: 1.7;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  
  /* 5. Improve media defaults */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  /* 6. Inherit fonts for form controls */
  input, button, textarea, select {
    font: inherit;
  }

  h1,h2,h3{
    line-height: 1.1;
  }


*{
    margin:0;
    padding:0;
}

:root{
    --clr-primary-400:hsl(158, 36%, 37%);
    --clr-primary-500:hsl(158, 36%, 27%);
    --clr-secondary-200:hsl(30, 38%, 92%);

    --clr-neutral-900:hsl(158, 13%, 24%);
    --clr-neutral-400:hsl(228, 12%, 48%);
    --clr-neutral-100:hsl(0, 0%, 100%);
    --ff-accent:"Fraunces", serif;
    --ff-base:"Montserrat",sans-serif;

    --fw-regular:500;
    --fw-bold:700;
}

body{
    font-family: var(--ff-base);
    font-weight:var(--fw-regular);
    background-color: var(--clr-secondary-200);
    color: var(--clr-neutral-400);
    height:100vh;
    display: grid;
    place-content: center;
}

.product{
    background-color: var(--clr-neutral-100);
    margin:2rem;
    border-radius:1rem;
    overflow: hidden;
    max-width:37.5rem;
    
}

.product{
    --content-padding:1.5rem;
}

@media screen and (min-width:600px){
    .product{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }
}

.product_content{
    padding:var(--content-padding);
    display: grid;
    gap:1rem
    
}

.product_category{
    letter-spacing:6px;
    text-transform: uppercase;
}

.product_title{
    
    font-family: var(--ff-accent);
    font-weight:var(--fw-bold);
    font-size: 2rem;
    color:var(--clr-neutral-900);
} 

.flex-box{
    display: flex;
    gap:0px 20px;

}

.produt_price{
    color: var(--clr-primary-400);
    font-family: var(--ff-accent);
    font-size: 2.5rem;
}

.product_orginal-price{
    text-decoration: line-through;
    align-self: center;
}

.button{
    background-color: var(--clr-primary-400);
    padding:10px;
    border:none;
    border-radius: 10px;
    color:var(--clr-neutral-100);
    font-weight:var(--fw-bold);
}

.button:is(:hover, :focus){
    background-color: var(--clr-primary-500);

}

/* 
.button[data-icon="shopping-cart"]::before {
    content: "";
    width:15px;
    height:15px;
    background-image:url(./images/icon-cart.svg); 
    
} */

.button[data-icon="shopping-cart"] {
    position: relative; 
    display: inline-block; 
  }
  
  .button[data-icon="shopping-cart"]::before {
    content: "";
    width: 15px;
    height: 15px;
    background-image: url(./images/icon-cart.svg);
    /* background-size: cover; To ensure the image fills the background */
    position: absolute;
    top: 50%;
    left: 21%;
    transform: translateY(-50%); 
  }