/*==================================================
VEDIC SPIRITUALS
ASHRAM COLLECTION
collection.css
==================================================*/

:root{

--bg:#F8F6F2;
--white:#ffffff;
--stone:#FBF9F5;

--gold:#B28A45;
--gold-dark:#8B6A2B;

--text:#555555;
--heading:#2E2E2E;

--border:#E7E1D6;

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

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

font-family:Arial,Helvetica,sans-serif;

color:var(--text);

line-height:1.9;

}

img{

display:block;

width:100%;

}

a{

text-decoration:none;

}

.container{

width:min(1200px,92%);

margin:auto;

}

.narrow{

max-width:760px;

margin:auto;

}

section{

padding:110px 0;

}

/*==========================
HERO
==========================*/

.collection-hero{

height:90vh;

background:url("../images/store.jpg") center center/cover;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

}

.hero-overlay{

position:absolute;

inset:0;

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

}

.hero-content{

position:relative;

z-index:5;

color:white;

width:min(900px,90%);

}

.hero-label{

letter-spacing:4px;

font-size:.85rem;

margin-bottom:20px;

}

.hero-content h1{

font-family:Georgia,serif;

font-size:4rem;

font-weight:500;

line-height:1.2;

margin-bottom:25px;

}

.hero-content p{

font-size:1.15rem;

max-width:700px;

margin:30px auto;

}

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

.primary-btn{

display:inline-block;

padding:16px 42px;

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

background:transparent;

color:white;

transition:.35s;

margin-top:20px;

}

.primary-btn:hover{

background:var(--gold);

}

/*==========================
HEADINGS
==========================*/

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-label{

letter-spacing:4px;

font-size:.85rem;

color:var(--gold);

margin-bottom:15px;

}

.section-heading h2,
.intro-section h2,
.coming-soon h2,
.collection-contact h2{

font-family:Georgia,serif;

font-size:3rem;

font-weight:500;

color:var(--heading);

margin-bottom:25px;

}

.gold-line{

width:80px;

height:2px;

background:var(--gold);

margin:25px auto;

}

/*==========================
INTRO
==========================*/

.intro-section{

text-align:center;

}

.intro-section p{

font-size:1.08rem;

}

/*==========================
ALTERNATE BACKGROUND
==========================*/

.light{

background:var(--stone);

}

/*==========================
GRID
==========================*/

.product-grid{

display:grid;

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

gap:45px;

}

/*==========================
CARDS
==========================*/

.product-card{

background:white;

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

padding:20px;

border-radius:18px;

transition:.35s;

box-shadow:0 6px 20px rgba(0,0,0,.05);

display:flex;

flex-direction:column;

}

.product-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow);

border-color:rgba(178,138,69,.45);

}

.product-card img{

height:240px;

object-fit:cover;

border-radius:12px;

margin-bottom:20px;

}

.product-card h3{

font-family:Georgia,serif;

font-size:1.5rem;

color:var(--heading);

margin-bottom:15px;

}

.product-card p{

margin-bottom:20px;

flex:1;

}

.product-card span{

font-size:.85rem;

letter-spacing:1px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:18px;

}

.product-card a{

display:inline-block;

padding:12px 26px;

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

color:var(--gold);

transition:.3s;

align-self:flex-start;

}

.product-card a:hover{

background:var(--gold);

color:white;

}

/*==========================
COMING SOON
==========================*/

.coming-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.coming-grid div{

background:white;

padding:40px;

border-radius:18px;

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

text-align:center;

font-family:Georgia,serif;

font-size:1.2rem;

color:var(--heading);

transition:.35s;

}

.coming-grid div:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

/*==========================
CONTACT
==========================*/

.collection-contact{

text-align:center;

background:var(--stone);

}

.collection-contact p{

max-width:700px;

margin:30px auto;

}

.collection-contact .primary-btn{

color:var(--gold);

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

}

.collection-contact .primary-btn:hover{

color:white;

}

/*==========================
FOOTER
==========================*/

.page-footer{

padding:70px 20px;

text-align:center;

background:#262626;

color:#d8d8d8;

font-size:1rem;

}

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

@media(max-width:992px){

.hero-content h1{

font-size:3rem;

}

.section-heading h2,
.intro-section h2,
.collection-contact h2{

font-size:2.3rem;

}

}

@media(max-width:768px){

section{

padding:80px 0;

}

.hero-content h1{

font-size:2.3rem;

}

.hero-content p{

font-size:1rem;

}

.product-card img{

height:210px;

}

.primary-btn{

display:block;

width:100%;

text-align:center;

}

}