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

:root{
  --navy:#071824;--cream:#f7f2e9;--gold:#c99545;--gold2:#dfb66d;
  --ink:#171717;--muted:#6e6a63;--white:#fff;--line:#e7e0d6
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"DM Sans",Arial,sans-serif;background:#fff}
a{text-decoration:none}
.topbar{background:var(--navy);color:#fff;padding:9px 6%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.4px}
.header{height:100px;background:#fff;display:flex;align-items:center;padding:0 6%;gap:30px;border-bottom:1px solid #eee;position:sticky;top:0;z-index:20}
.logo{font-family:"Playfair Display",serif;color:#111;position:relative;display:flex;flex-direction:column;line-height:.9;min-width:205px}
.logo strong{font-size:38px}.logo small{font-family:"DM Sans";font-size:10px;letter-spacing:3px;margin-top:9px;text-transform:uppercase;text-align:center}
.cross{position:absolute;color:var(--gold);font-size:23px;top:-18px;left:94px}
nav{display:flex;gap:26px;margin-left:auto}
nav a{color:#222;text-transform:uppercase;font-size:12px;font-weight:700}
nav a:hover{color:var(--gold)}
.cart{color:#111;font-size:18px;white-space:nowrap}.cart span{font-size:12px;font-weight:700}
.menu-btn{display:none;background:none;border:0;font-size:27px}

.hero{min-height:500px;background:var(--cream);display:flex}
.hero-copy{width:50%;padding:70px 6%;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:700}
.hero h1{font:600 clamp(48px,6vw,78px)/.98 "Playfair Display";margin:12px 0 22px}
.hero h1 em,.purpose em{color:var(--gold);font-style:normal}
.hero-copy>p:not(.eyebrow){font-size:18px;max-width:440px;line-height:1.55;color:#4d4942}
.hero-actions{display:flex;gap:12px;margin-top:18px}
.btn{border:0;padding:14px 23px;border-radius:7px;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.5px;display:inline-block}
.dark{background:#121212;color:#fff}.gold{background:var(--gold2);color:#171717}.outline{border:1px solid #b7aa98;color:#222;background:transparent}

.hero-art{width:50%;min-height:500px;background:linear-gradient(125deg,#d3ad76,#f3e3c9 48%,#a66f32);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-art:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,#fff9 0 8%,transparent 35%)}
.cross-large{position:absolute;font-size:150px;color:#fff5;right:10%;top:8%}
.hero-card{width:55%;height:260px;background:linear-gradient(135deg,#15120e,#493019);border-radius:5px 18px 14px 5px;box-shadow:0 25px 45px #3a251755;transform:rotate(-5deg);color:#e4bd70;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}
.hero-card span{font:500 17px "Playfair Display";letter-spacing:5px}.hero-card strong{font:700 27px "Playfair Display";letter-spacing:2px;margin:13px 0}.hero-card small{font-size:11px;letter-spacing:2px}

.benefits{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 6%;border-bottom:1px solid var(--line)}
.benefits div{padding:8px 22px;border-right:1px solid #ddd;display:flex;flex-direction:column;gap:6px}.benefits div:last-child{border:0}
.benefits b{font-size:11px}.benefits span{font-size:11px;color:var(--muted)}

.section{padding:58px 5%;text-align:center}.section-title{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:30px}.section-title h2{text-transform:uppercase;font-size:24px;letter-spacing:1px;margin:0}.section-title span{color:var(--gold)}
.categories{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1200px;margin:auto}.categories a{color:#111}
.cat-img{height:145px;border-radius:10px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #ddd;font-family:"Playfair Display";font-weight:700}
.bible,.books{background:#27231e;color:#e3c27e}.gifts{background:#eee6da;color:#a57938;font-size:48px}.decor{background:#dfcaa9;color:#29221a;text-align:center}.shirts{background:#181818;color:#fff;font-size:34px}.kids{background:#e8dfd1;color:#b48238;font-size:55px}
.products-section{background:#fbfaf8}
.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:-5px auto 28px}.filter{border:1px solid #d9d0c3;background:#fff;border-radius:30px;padding:8px 15px;font-size:11px;cursor:pointer}.filter.active,.filter:hover{background:#171717;color:#fff}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:auto;text-align:left}
.product-card{background:#fff;border:1px solid #e3ded5;border-radius:10px;padding:12px;overflow:hidden}
.product-image{height:220px;background:linear-gradient(135deg,#f0e9df,#e1d1b9);border-radius:7px;display:flex;align-items:center;justify-content:center;text-align:center;color:#87683e;font:700 21px "Playfair Display";padding:15px}
.product-card h3{font-size:14px;line-height:1.35;margin:13px 2px 5px}.category{font-size:10px;color:var(--gold);font-weight:700;text-transform:uppercase}.price{font-size:17px;font-weight:700;margin:7px 2px 12px}.buy{display:block;text-align:center;background:var(--gold2);color:#111;border-radius:6px;padding:10px;font-size:11px;font-weight:700}

.purpose{background:linear-gradient(90deg,#17130e,#322314);color:#fff;padding:42px 8%;display:grid;grid-template-columns:70px 1fr 230px;gap:22px;align-items:center}.purpose-icon{font-size:45px;color:var(--gold2)}.purpose h2{font:600 31px "Playfair Display";margin:5px 0 9px}.purpose p{line-height:1.5;color:#eee;margin:0}.purpose .eyebrow{margin:0}
footer{background:var(--navy);color:#fff;padding:45px 7% 18px;display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr;gap:30px}
footer h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--gold2)}footer a,footer p{display:block;color:#ddd;font-size:12px;line-height:1.8;margin:5px 0}
.footer-logo{font:700 36px "Playfair Display"}.footer-logo span{color:var(--gold2)}.footer-logo small{display:block;font:500 9px "DM Sans";letter-spacing:3px;text-transform:uppercase;margin-top:7px}
.copyright{grid-column:1/-1;border-top:1px solid #ffffff22;text-align:center;padding-top:17px;color:#aaa;font-size:10px}

@media(max-width:900px){
 .header{height:82px;padding:0 5%;justify-content:space-between}.logo{min-width:160px}.logo strong{font-size:30px}.logo small{font-size:8px;letter-spacing:2px}.cross{left:73px;top:-14px;font-size:19px}
 nav{display:none}.menu-btn{display:block;order:3}.cart{order:2}.hero{flex-direction:column}.hero-copy,.hero-art{width:100%}.hero-copy{padding:55px 8%}.hero-art{min-height:340px}.benefits{grid-template-columns:repeat(2,1fr)}.benefits div{border-bottom:1px solid #ddd}.categories{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.purpose{grid-template-columns:50px 1fr}.purpose .btn{grid-column:1/-1}
 footer{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}
@media(max-width:520px){
 .topbar span:last-child{display:none}.topbar{justify-content:center}.hero h1{font-size:49px}.hero-actions{flex-direction:column;width:100%}.hero-actions .btn{text-align:center}.hero-card{width:72%;height:220px}.categories{grid-template-columns:repeat(2,1fr)}.cat-img{height:120px}.product-grid{gap:9px}.product-image{height:165px}.product-card{padding:8px}.product-card h3{font-size:12px}.price{font-size:14px}.section{padding:42px 4%}.benefits{padding:14px 3%}.benefits div{padding:10px}.purpose{grid-template-columns:1fr;text-align:center}.purpose-icon{font-size:38px}footer{grid-template-columns:1fr}.footer-brand{grid-column:auto}
}