/*======================================================
hrī Collection
Components
Version 1.0
======================================================*/


/*=========================================
SECTION TITLE
=========================================*/

.section-title{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-title p{

letter-spacing:4px;

text-transform:uppercase;

font-size:12px;

color:var(--gold);

margin-bottom:16px;

}

.section-title h2{

margin-bottom:20px;

}

.section-title .lead{

max-width:680px;

margin:auto;

}


/*=========================================
BUTTON GROUP
=========================================*/

.button-group{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:36px;

}


/*=========================================
PRODUCT CARD
=========================================*/

.product-card{

background:white;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow-sm);

transition:.35s;

}

.product-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.product-card img{

aspect-ratio:6/5;

object-fit:cover;

}

.product-card-content{

padding:28px;

}

.product-card h3{

margin-bottom:12px;

}

.product-card p{

margin-bottom:24px;

}


/*=========================================
FEATURE CARD
=========================================*/

.feature-card{

background:white;

padding:40px;

border-radius:22px;

text-align:center;

transition:.35s;

box-shadow:var(--shadow-sm);

}

.feature-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.feature-card img{

width:58px;

margin:0 auto 24px;

}

.feature-card h3{

margin-bottom:16px;

}


/*=========================================
ICON CIRCLE
=========================================*/

.icon-circle{

width:74px;

height:74px;

border-radius:50%;

background:var(--sage-light);

display:flex;

justify-content:center;

align-items:center;

margin:0 auto 24px;

}

.icon-circle img{

width:34px;

}


/*=========================================
BENEFIT CARD
=========================================*/

.benefit-card{

background:white;

padding:36px;

border-radius:20px;

transition:.35s;

box-shadow:var(--shadow-sm);

}

.benefit-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.benefit-card h3{

margin-bottom:14px;

}


/*=========================================
INGREDIENT CARD
=========================================*/

.ingredient-card{

display:flex;

gap:22px;

align-items:center;

background:white;

padding:24px;

border-radius:18px;

transition:.35s;

border:1px solid transparent;

}

.ingredient-card:hover{

border-color:var(--gold);

transform:translateX(6px);

}

.ingredient-card img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}


/*=========================================
TIMELINE CARD
=========================================*/

.timeline-card{

background:white;

padding:40px;

text-align:center;

border-radius:22px;

box-shadow:var(--shadow-sm);

position:relative;

transition:.35s;

}

.timeline-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.timeline-number{

width:68px;

height:68px;

border-radius:50%;

background:var(--sage);

display:flex;

justify-content:center;

align-items:center;

margin:0 auto 24px;

color:white;

font-family:'Cormorant Garamond',serif;

font-size:22px;

}


/*=========================================
GALLERY
=========================================*/

.gallery-grid{

display:grid;

grid-template-columns:

2fr 1fr 1fr;

grid-auto-rows:260px;

gap:24px;

}

.gallery-item{

overflow:hidden;

border-radius:22px;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-large{

grid-row:span 2;

}


/*=========================================
FAQ
=========================================*/

.accordion{

display:flex;

flex-direction:column;

gap:20px;

}

.accordion details{

background:white;

padding:28px;

border-radius:18px;

border:1px solid var(--border);

transition:.35s;

}

.accordion details:hover{

border-color:var(--gold);

}

.accordion summary{

cursor:pointer;

list-style:none;

font-family:'Cormorant Garamond',serif;

font-size:24px;

display:flex;

justify-content:space-between;

align-items:center;

}

.accordion summary::-webkit-details-marker{

display:none;

}

.accordion summary::after{

content:"+";

font-size:28px;

color:var(--gold);

}

.accordion details[open] summary::after{

content:"−";

}

.accordion p{

margin-top:18px;

}


/*=========================================
CTA
=========================================*/

.cta-box{

background:linear-gradient(

180deg,

var(--beige),

var(--cream)

);

padding:80px;

border-radius:30px;

text-align:center;

}

.cta-box h2{

margin-bottom:20px;

}

.cta-box p{

max-width:650px;

margin:auto;

margin-bottom:36px;

}


/*=========================================
TESTIMONIAL
=========================================*/

.testimonial{

background:white;

padding:40px;

border-radius:22px;

box-shadow:var(--shadow-sm);

}

.testimonial p{

font-style:italic;

margin-bottom:24px;

}

.testimonial strong{

display:block;

}


/*=========================================
PRODUCT TAG
=========================================*/

.tag{

display:inline-block;

padding:8px 18px;

background:var(--sage-light);

border-radius:999px;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

.gallery-grid{

grid-template-columns:1fr 1fr;

}

.gallery-large{

grid-row:auto;

}

.cta-box{

padding:50px;

}

}

@media(max-width:768px){

.button-group{

flex-direction:column;

}

.product-card img{

aspect-ratio:1/1;

}

.gallery-grid{

grid-template-columns:1fr;

}

.feature-card,

.benefit-card,

.timeline-card,

.testimonial{

padding:28px;

}

.cta-box{

padding:36px 24px;

}

}