@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600&display=swap");

/* ==========================================================
   Variables
========================================================== */

:root {
    --cream: #fffaf5;
    --cream-dark: #f6efe8;
    --sage: #7f9b7b;
    --sage-dark: #61785d;

    --poppy: #d94b58;
    --poppy-dark: #b43245;

    --text: #53463c;
    --light-text: #8d7d73;

	--slate-grey: #707EA8;
	--slate-blue-dark: #48516B;
	--slate-grey-dark: #222633;
	

    --shadow: 0 15px 40px rgba(0,0,0,.12);

    --radius: 22px;

    --transition: .25s ease;
}

/* ==========================================================
   Reset
========================================================== */

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

body{

    font-family:"Poppins",sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:
        url("/images/background_middle.png")
        center top/100% auto repeat-y,
        var(--cream);
    color:var(--text);

    line-height:1.6;

}

/* Prevent scrolling while modal is open */

body.modal-open{

    overflow:hidden;

}


/* ==========================================================
   Hero
========================================================== */

.site-header{

    width:100%;
    min-height:clamp(200px,26vw,300px);
    background:
        url("/images/background_top.png")
        top center/100% auto no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;

}

.hero{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
    z-index:1;

}

.hero-overlay{

    position:absolute;
    inset:0;
}/*
    background:
        linear-gradient(
            rgba(255,250,245,.72),
            rgba(255,250,245,.88)
        );

}*/

.hero-content{

    position:relative;

    z-index:2;

    max-width:700px;

    padding:20px 25px;

}

.hero-logo{

    width:min(62vw,500px);
    max-width:100%;
    height:auto;
    display:block;
	padding-top:50px;
	margin:0 auto;

}

.hero h1{

    font-family:"Playfair Display",serif;

    font-size:4rem;

    color:var(--poppy);

    margin-bottom:20px;

}

.hero p{

    font-size:1.2rem;

    color:var(--text);

}

/* ==========================================================
   Intro
========================================================== */

.intro{

    position:relative;
    margin-top:-100px;
    padding-top:120px;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    padding-left:25px;
    padding-right:25px;
    text-align:center;
    z-index:2;
    background:transparent;

}

.intro h2{

    font-family:"Playfair Display",serif;

    font-size:2.4rem;

    color:var(--poppy);

    margin-bottom:15px;

}

.intro p{

    color:var(--light-text);

}

/* ==========================================================
   Gallery
========================================================== */

.gallery{

    width:min(1200px,92%);

    margin:0 auto 80px;

    display:grid;
    
    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.product-card{

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

}

.product-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}

.details{

    padding:24px;

}

.details h3{

    font-family:"Playfair Display",serif;

    color:var(--poppy);

    font-size:1.6rem;

    margin-bottom:10px;

}

.details p{

    color:var(--light-text);

    margin-bottom:20px;

}

.details span{

    color:var(--sage);

    font-weight:700;

    font-size:1.15rem;

}

/* ==========================================================
   Footer
========================================================== */

.site-footer{

    margin-top:auto;
    width:100%;
    aspect-ratio:1024 / 805;
    background:
      url("/images/background_bottom.png")
      bottom center/100% 100% no-repeat;

}

.site-footer h2{

    font-family:"Playfair Display",serif;

    font-size:2.4rem;

    color:var(--poppy);

    margin-bottom:15px;

}

.site-footer p{
	
	position:relative;
    padding-top:16px;
    margin-left:auto;
    margin-right:auto;
    padding-left:25px;
    padding-right:25px;
    text-align:center;
    z-index:2;
    color:var(--sage-dark);
	font-size:21px;
	white-space:pre-line;

}

.social-icons{

    position:relative;
    padding-top:120px;
    display:flex;
    justify-content:center;
    gap:20px;
    z-index:2;

}

.social-icon{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--poppy-dark);
    transition:opacity var(--transition), transform var(--transition);
    text-decoration:none;

}

.social-icon:hover{

    opacity:0.6;
    transform:scale(1.1);

}

/* ==========================================================
   Modal
========================================================== */

.modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);

    z-index:999;

    padding:25px;

}

.modal.show{

    display:flex;

}

.modal-content{

    position:relative;

    width:min(950px,100%);

    background:white;

    border-radius:28px;

    overflow:hidden;

    animation:popup .25s ease;

    box-shadow:
        0 30px 70px rgba(0,0,0,.25);

}

@keyframes popup{

    from{

        opacity:0;
        transform:scale(.95);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/* ==========================================================
   Close Button
========================================================== */

.modal-close{

    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:30px;

    color:var(--poppy);

    z-index:20;

    transition:var(--transition);

}

.modal-close:hover{

    background:var(--poppy);

    color:white;

}

/* ==========================================================
   Carousel
========================================================== */

.carousel{

    position:relative;

    background:#f8f5f3;

}

.carousel img{

    display:block;

    width:100%;

    height:500px;

    object-fit:cover;

}

/* ==========================================================
   Carousel Buttons
========================================================== */

.carousel-button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;
    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:var(--poppy);

    font-size:26px;

    cursor:pointer;

    display:flex;

    justify-content:center;
    align-items:center;

    transition:var(--transition);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);

}

.carousel-button:hover{

    background:var(--poppy);

    color:white;

}

.prev{

    left:18px;

}

.next{

    right:18px;

}

/* ==========================================================
   Dots
========================================================== */

.carousel-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    padding:20px;

}

.carousel-dot{

    width:12px;
    height:12px;

    border:none;

    border-radius:50%;

    background:#d7cfc8;

    cursor:pointer;

    transition:var(--transition);

}

.carousel-dot.active{

    background:var(--poppy);

    transform:scale(1.3);

}

/* ==========================================================
   Modal Details
========================================================== */

.modal-details{

    padding:35px;

    text-align:center;

}

.modal-details h2{

    font-family:"Playfair Display",serif;

    color:var(--poppy);

    font-size:2.2rem;

    margin-bottom:15px;

}

.modal-details p{

    color:var(--light-text);

    max-width:650px;

    margin:0 auto 25px;

}

.modal-price{

    color:var(--sage);

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:30px;

}

.details-button{

    border:none;

    cursor:pointer;

    padding:14px 32px;

    border-radius:999px;

    background:var(--poppy);

    color:white;

    font-size:1rem;

    font-weight:600;

    transition:var(--transition);

}

.details-button:hover{

    background:var(--poppy-dark);

    transform:translateY(-2px);

}

/* ==========================================================
   Spacers
========================================================== */

.spacer-sm  { height: 40px; }
.spacer-md  { height: 60px; }
.spacer-lg  { height: 80px; }
.spacer-xl  { height: 160px; }
.footer-spacer  { height: 160px; }

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:900px){

    .hero h1{

        font-size:3rem;

    }

    .carousel img{

        height:380px;

    }

}

@media (max-width:600px){

    .hero{

        min-height:clamp(110px,32vw,220px);

    }

    .hero h1{

        font-size:2.4rem;

    }

    .hero p{

        font-size:1rem;

    }

    .gallery{

        width:85%;
		gap:24px;
		grid-template-columns: 1fr;

    }

    .carousel img{

        height:260px;

    }

    .modal-details{

        padding:24px;

    }

    .modal-details h2{

        font-size:1.8rem;

    }

    .carousel-button{

        width:42px;
        height:42px;

        font-size:20px;

    }

    .spacer-sm  { height: 20px; }
    .spacer-md  { height: 30px; }
    .spacer-lg  { height: 40px; }
    .spacer-xl  { height: 80px; }
    .footer-spacer  { height: 0px; }
	
	.site-footer p{
		
		font-size:19px;
		font-weight: bold;
		color:var(--slate-grey-dark);
		
	}
	
	.footer-copy p{
		
		font-size:10px;
		font-weight: bold;
		color:var(--light-text);
		padding-top:200px;
		padding-bottom:5px;
		
	}

    .social-icon svg{

        width:48px !important;
        height:48px !important;

    }
	
	.social-icons{
		
		padding-top:65px;
		gap:20px;

	}

}