/* general reset */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
/* outline: 1px red solid; */

}

/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
font-family: inherit;
font-size: inherit;
}


/* custom porperties  */

/* Colors */
:root {
    --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%);


    --fs-M:"Montserrat", sans-serif;
    --fs-F: "Fraunces", serif;
}

/* Typography */

body {
font-family:var(--fs-M);
font-size: 14px;
color: var(--black);

background-color: var(--cream);
}


/* Default desktop image */

    .responsive-image {
        content: url('./images/image-product-desktop.jpg');
    }

    p {
    font-weight: 500;
    }


    .wrapper{
        min-height: 100vh;

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

    .container{
        width:580px;

        background-color: var(--white);

        display: flex;
        flex-direction: row;
        justify-content: space-between;

        border-radius: 10px;
        
    }

    .image,
    .content {
        flex: 1;
    }

    .responsive-image{
        height: 100%;
        width: 100%;

        object-fit:cover;

        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
        
    .content {
    padding: 0.8rem;
    }

    .content > .title {
    font-family: var(--fs-M);
    color: var(--grey);
    letter-spacing: 7px;
    }

    .content h1{
    font-family: var(--fs-F);
    max-width: 10ch;
    color: var(--green-700);
    }

    .para{
        padding: 1rem 0;
        margin-top: 0;
    }


    .price{
        display: flex;
        flex-direction: row;

        gap: 8px;
    }

    .current_price {
        color: var(--green-700);
        font-size: 36px;
        font-family: var(--fs-F);
        font-weight: bold;

        margin-top: 0;
    }

    .prev_price{
        text-decoration:line-through;
    }

    button{
        display:flex;
        gap: 4px;

        min-width: 90%;
        height: 3rem;
        justify-content: center;
        justify-self: center;

        background-color: var(--green-500);

        border-style: none;
        border-radius: 8px;
        color: var(--white);

        margin: 1rem 0 0 0;

    }
    .content > button {
        align-items: center;
    }

    button >p {
        margin-top: 0;
    }




/* mobile Design*/
@media screen and (max-width: 375px) {
    .container {
        max-width: 80%;
    }

    .container{
        width:580px;

        background-color: var(--white);

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        border-radius: 10px;
        
    }

    .responsive-image{

        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
    }


    .content h1{

    max-width: 15ch;

    }

    .responsive-image {
        content: url('./images/image-product-mobile.jpg');
    }

}