/* ==================================================
ARTOVAULT PRODUCTION CSS
PART 1
Foundation + Header + Hero Banner
================================================== */

/* =========================
RESET
========================= */

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

:root{

--ivory:#F8F4EC;
--champagne:#EFE5D2;
--gold:#C8A45D;
--gold-dark:#A67C2E;
--maroon:#7A1F2B;
--text:#3A2F1F;
--muted:#6B5A43;
--white:#ffffff;

}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--ivory);
color:var(--text);
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

h1,h2,h3,h4{
font-family:'Playfair Display',serif;
}

.container{
width:min(1320px,92%);
margin:auto;
}

/* =========================
HEADER
========================= */

.header{
position:sticky;
top:0;
z-index:9999;

background:#fff;

border-bottom:1px solid #E5D8BF;

box-shadow:
0 3px 15px rgba(0,0,0,.05);
}

.nav{
display:grid;
grid-template-columns:
220px
1fr
420px;

align-items:center;

min-height:90px;

gap:25px;
}

/* logo */

.logo{
display:flex;
align-items:center;
}

.logo img{
height:72px;
width:auto;
}

/* menu */

.menu{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
}

.menu a{
font-size:15px;
font-weight:600;
color:var(--text);
transition:.3s;
}

.menu a:hover{
color:var(--gold-dark);
}

/* dropdown */

.dropdown{
position:relative;
}

.dropdown-content{
display:none;

position:absolute;
top:100%;
left:50%;

transform:translateX(-50%);

min-width:260px;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.12);
}

.dropdown-content a{
display:block;
padding:14px 18px;
border-bottom:1px solid #f3f3f3;
}

.dropdown-content a:last-child{
border-bottom:none;
}

.dropdown:hover .dropdown-content{
display:block;
}

/* search */

.header-right-premium{
display:flex;
align-items:center;
justify-content:flex-end;
gap:18px;
}

.search-style-premium form{
display:flex;
align-items:center;

width:100%;

height:48px;

background:#fff;

border:1px solid #E2D4B7;

border-radius:50px;

overflow:hidden;
}

.search-style-premium select{
width:140px;
height:48px;

border:none;

background:#F8F4EC;

padding:0 12px;
}

.search-style-premium input{
flex:1;

height:48px;

border:none;

padding:0 15px;

outline:none;
}

.search-style-premium button{
width:55px;
height:48px;

border:none;

background:var(--gold);

color:#fff;

cursor:pointer;
}

/* cart */

.cart-icon{
position:relative;
}

.cart-icon img{
width:30px;
}

.cart-icon span{
position:absolute;

top:-8px;
right:-10px;

width:22px;
height:22px;

border-radius:50%;

background:var(--gold-dark);

color:#fff;

font-size:12px;

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

/* =========================
BANNER
========================= */

.premium-banner-wrap{
padding:18px 0 30px;
}

.premium-banner{

display:grid;
grid-template-columns:42% 58%;

align-items:center;

background:#fff;

border-radius:22px;

overflow:hidden;

border:1px solid #E2D4B7;

box-shadow:
0 8px 25px rgba(0,0,0,.05);
}

.banner-text{
padding:40px;
}

.eyebrow{
display:block;

font-size:11px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:12px;
}

.banner-text h2{
font-size:42px;
line-height:1.15;

margin-bottom:15px;
}

.banner-text p{
font-size:16px;
line-height:1.8;

color:#666;

margin-bottom:22px;
}

.btn{
display:inline-block;

padding:12px 28px;

background:var(--gold);

color:#fff;

border-radius:40px;

font-weight:600;

transition:.3s;
}

.btn:hover{
background:var(--gold-dark);
}

.banner-image img{
width:100%;
height:320px;
object-fit:cover;
}

/* =========================
TABLET
========================= */

@media(max-width:1024px){

.nav{
grid-template-columns:
180px
1fr
300px;
}

.logo img{
height:60px;
}

.banner-text h2{
font-size:34px;
}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.container{
width:94%;
}

.nav{
display:flex;
flex-direction:column;
gap:15px;
padding:15px 0;
}

.menu{
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

.header-right-premium{
width:100%;
flex-direction:column;
}

.search-style-premium,
.search-style-premium form{
width:100%;
}

.premium-banner{
grid-template-columns:1fr;
}

.banner-image{
order:-1;
}

.banner-image img{
height:220px;
}

.banner-text{
padding:22px;
text-align:center;
}

.banner-text h2{
font-size:28px;
}

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

.logo img{
height:52px;
}

.banner-image img{
height:180px;
}

.banner-text h2{
font-size:24px;
}

}
/* ==================================================
PART 2
SECTION HEADINGS
CATEGORIES
LATEST MASTERPIECES
STORY
================================================== */

/* =========================
COMMON SECTION HEADINGS
========================= */

.section{
padding:50px 0;
}

.premium-head,
.section-heading{
text-align:center;
max-width:850px;
margin:0 auto 35px;
}

.head-tag,
.section-heading .subtitle{
display:block;

font-size:11px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.premium-head h2,
.section-heading h2{
font-size:34px;
font-weight:600;
color:var(--text);
margin-bottom:12px;
}

.premium-head p,
.section-heading p{
max-width:650px;
margin:auto;

font-size:15px;
line-height:1.8;

color:#666;
}

.head-divider{
width:90px;
height:1px;

background:#D7C39B;

margin:18px auto;
position:relative;
}

.head-divider span{
position:absolute;

left:50%;
top:50%;

width:10px;
height:10px;

background:var(--gold-dark);

transform:
translate(-50%,-50%)
rotate(45deg);
}

/* =========================
EXPLORE COLLECTIONS
========================= */

.premium-category-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.premium-category-card{
position:relative;

height:260px;

overflow:hidden;

border-radius:18px;

display:block;
}

.premium-category-card img{
width:100%;
height:100%;

object-fit:cover;

transition:.7s;
}

.category-overlay{
position:absolute;
inset:0;

display:flex;
flex-direction:column;
justify-content:flex-end;

padding:20px;

background:
linear-gradient(
transparent 25%,
rgba(0,0,0,.85)
);
}

.category-overlay h3{
font-size:22px;
color:#fff;
margin-bottom:5px;
}

.category-overlay span{
font-size:12px;
font-weight:600;
letter-spacing:1px;
color:#D8B26A;
text-transform:uppercase;
}

.premium-category-card:hover img{
transform:scale(1.08);
}

/* =========================
LATEST MASTERPIECES
========================= */

.latest-masterpieces{
padding:40px 0;
background:#faf8f4;
}

.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.product-card{
background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid #ECE2CF;

transition:.35s;
}

.product-card:hover{
transform:translateY(-4px);
box-shadow:
0 12px 25px rgba(0,0,0,.08);
}

.product-image{
display:block;
}

.product-image img{
width:100%;
height:170px;

object-fit:cover;

transition:.6s;
}

.product-card:hover .product-image img{
transform:scale(1.06);
}

.pcontent{
padding:14px;
}

.pcontent h3{
font-size:15px;
line-height:1.5;

min-height:44px;

margin-bottom:10px;

color:var(--text);
}

.price{
font-size:17px;
font-weight:700;
color:var(--gold-dark);

margin-bottom:12px;
}

.art-btn{
display:block;

text-align:center;

padding:10px;

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

border-radius:40px;

font-size:11px;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

color:var(--gold-dark);

transition:.3s;
}

.art-btn:hover{
background:var(--gold);
color:#fff;
}

/* =========================
ART AS LEGACY
========================= */

.story{
padding:40px 0;
background:transparent;
}

.story-inner{
max-width:900px;
margin:auto;

padding:40px;

border-radius:24px;

background:
linear-gradient(
135deg,
#C8A45D,
#B89247
);

text-align:center;

color:#fff;
}

.story-tag{
display:block;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:10px;
}

.story h2{
font-size:34px;
margin-bottom:10px;
}

.story p{
font-size:15px;
line-height:1.8;

max-width:600px;
margin:auto;
}

/* =========================
TABLET
========================= */

@media(max-width:1024px){

.premium-category-grid{
grid-template-columns:repeat(3,1fr);
}

.product-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.section{
padding:35px 0;
}

.premium-head h2,
.section-heading h2{
font-size:28px;
}

.premium-category-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.premium-category-card{
height:200px;
}

.category-overlay{
padding:15px;
}

.category-overlay h3{
font-size:18px;
}

.product-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.product-image img{
height:150px;
}

.story-inner{
padding:25px;
}

.story h2{
font-size:28px;
}

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

.premium-category-grid{
grid-template-columns:1fr;
}

.product-grid{
grid-template-columns:1fr;
}

.premium-category-card{
height:220px;
}

.product-image img{
height:180px;
}

}
/* ==================================================
PART 3
PAINTINGS
SACRED
COINS
SCULPTURES
MAGNETS
================================================== */

/* =========================
FEATURED PAINTINGS
========================= */

.paintings-showcase{
padding:50px 0;
background:#faf8f4;
}

.gallery-heading{
text-align:center;
max-width:750px;
margin:0 auto 35px;
}

.gallery-heading span{
display:block;

font-size:11px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.gallery-heading h2{
font-size:34px;
margin-bottom:12px;
}

.gallery-heading p{
font-size:15px;
line-height:1.8;
color:#666;
}

.painting-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.painting-card{
position:relative;

overflow:hidden;

border-radius:18px;

display:block;
}

.painting-card img{
width:100%;
height:280px;

object-fit:cover;

transition:.7s;
}

.painting-card:hover img{
transform:scale(1.08);
}

.painting-overlay{
position:absolute;
inset:0;

display:flex;
flex-direction:column;
justify-content:flex-end;

padding:20px;

background:
linear-gradient(
transparent 20%,
rgba(0,0,0,.85)
);
}

.painting-overlay h3{
font-size:18px;
color:#fff;
margin-bottom:5px;
}

.painting-overlay span{
font-size:11px;
color:#D8B26A;
text-transform:uppercase;
letter-spacing:1px;
}

/* =========================
RELIGIOUS TREASURES
========================= */

.sacred-showcase{
padding:50px 0;
}

.sacred-content{
display:grid;
grid-template-columns:280px 1fr;
gap:25px;
align-items:center;
}

.sacred-tag{
display:block;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.sacred-text h2{
font-size:32px;
margin-bottom:12px;
}

.sacred-text p{
font-size:15px;
line-height:1.8;
color:#666;
margin-bottom:18px;
}

.sacred-btn{
display:inline-block;

padding:10px 22px;

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

border-radius:40px;

font-size:11px;

font-weight:600;

text-transform:uppercase;

letter-spacing:1px;

color:var(--gold-dark);
}

.sacred-items{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}

.sacred-card{
display:block;
overflow:hidden;
border-radius:14px;
}

.sacred-card img{
width:100%;
height:140px;
object-fit:cover;
transition:.5s;
}

.sacred-card:hover img{
transform:scale(1.06);
}

/* =========================
ANCIENT COINS
========================= */

.coin-showcase{
padding:50px 0;
background:#f7f3eb;
}

.coin-header{
text-align:center;
max-width:700px;
margin:0 auto 35px;
}

.coin-tag{
display:block;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.coin-header h2{
font-size:34px;
margin-bottom:12px;
}

.coin-header p{
font-size:15px;
line-height:1.8;
color:#666;
}

.coin-row{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:20px;
}

.coin-item{
width:150px;
text-align:center;
color:var(--text);
}

.coin-image{
width:150px;
height:150px;

margin:auto;

border-radius:50%;

padding:8px;

background:
linear-gradient(
135deg,
#D9C08B,
#A67C2E
);
}

.coin-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}

.coin-item h3{
font-size:13px;
margin-top:10px;
line-height:1.4;
}

/* =========================
SCULPTURES
========================= */

.sculpture-gallery{
padding:50px 0;
background:#faf8f4;
}

.sculpture-header{
text-align:center;
max-width:700px;
margin:0 auto 35px;
}

.sculpture-tag{
display:block;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.sculpture-header h2{
font-size:34px;
margin-bottom:12px;
}

.sculpture-header p{
font-size:15px;
line-height:1.8;
color:#666;
}

.sculpture-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.sculpture-card{
text-align:center;
color:var(--text);
}

.sculpture-image{
height:220px;

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

.sculpture-image img{
max-height:200px;
object-fit:contain;
transition:.4s;
}

.sculpture-card:hover img{
transform:
translateY(-5px)
scale(1.04);
}

.pedestal{
width:90px;
height:10px;

margin:0 auto 12px;

border-radius:50px;

background:var(--gold);
}

.sculpture-card h3{
font-size:14px;
line-height:1.5;
}

/* =========================
MAGNETS
========================= */

.magnet-wall{
padding:50px 0;
}

.magnet-header{
text-align:center;
max-width:700px;
margin:0 auto 35px;
}

.magnet-tag{
display:block;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.magnet-header h2{
font-size:34px;
margin-bottom:12px;
}

.magnet-header p{
font-size:15px;
line-height:1.8;
color:#666;
}

.magnet-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}

.magnet-card{
background:#fff;

padding:12px;

border-radius:16px;

text-align:center;

box-shadow:
0 4px 12px rgba(0,0,0,.05);

transition:.3s;
}

.magnet-card:hover{
transform:translateY(-4px);
}

.magnet-card img{
width:100%;
aspect-ratio:1/1;

object-fit:cover;

border-radius:12px;
}

.magnet-card span{
display:block;

margin-top:10px;

font-size:13px;

line-height:1.4;

color:var(--text);
}

/* =========================
TABLET
========================= */

@media(max-width:1024px){

.painting-grid{
grid-template-columns:repeat(2,1fr);
}

.sacred-content{
grid-template-columns:1fr;
}

.sculpture-row{
grid-template-columns:repeat(2,1fr);
}

.magnet-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.gallery-heading h2,
.coin-header h2,
.sculpture-header h2,
.magnet-header h2{
font-size:28px;
}

.painting-grid{
grid-template-columns:1fr;
}

.sacred-items{
grid-template-columns:repeat(2,1fr);
}

.coin-item{
width:120px;
}

.coin-image{
width:120px;
height:120px;
}

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

.sacred-items,
.sculpture-row,
.magnet-grid{
grid-template-columns:1fr;
}

.coin-item{
width:110px;
}

.coin-image{
width:110px;
height:110px;
}

}
/* ==================================================
PART 4
BLOG
FOOTER
GLOBAL RESPONSIVE
UTILITIES
================================================== */

/* =========================
BLOG SECTION
========================= */

.journal-heading{
text-align:center;
max-width:750px;
margin:0 auto 35px;
}

.journal-heading span{
display:block;

font-size:11px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

color:var(--gold-dark);

margin-bottom:10px;
}

.journal-heading h2{
font-size:34px;
margin-bottom:12px;
color:var(--text);
}

.journal-heading p{
font-size:15px;
line-height:1.8;
color:#666;
}

.blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.blog-card{
display:block;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:
0 5px 15px rgba(0,0,0,.05);

transition:.3s;
}

.blog-card:hover{
transform:translateY(-4px);
}

.blog-card img{
width:100%;
height:200px;

object-fit:cover;
}

.blog-card h3{
padding:15px;

font-size:16px;
line-height:1.5;

color:var(--text);
}

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

.premium-footer{
margin-top:60px;

background:#F5EFE4;

padding:70px 0 30px;

border-top:
1px solid rgba(200,164,93,.25);
}

.footer-top{
display:grid;
grid-template-columns:
2fr
1fr
1fr
1.2fr;

gap:40px;
}

.footer-brand img{
width:220px;
margin-bottom:15px;
}

.footer-brand p{
font-size:14px;
line-height:1.8;
color:var(--muted);
}

.footer-social{
display:flex;
gap:15px;
margin-top:15px;
}

.footer-social a{
font-size:14px;
font-weight:600;
color:var(--gold-dark);
}

.footer-links h4,
.footer-contact h4{
font-size:22px;
margin-bottom:15px;
}

.footer-links ul{
list-style:none;
}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:var(--muted);
transition:.3s;
}

.footer-links a:hover{
color:var(--gold-dark);
}

.footer-contact p{
font-size:14px;
line-height:1.8;
color:var(--muted);
margin-bottom:10px;
}

.footer-divider{
height:1px;

background:
rgba(200,164,93,.25);

margin:40px 0 25px;
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.footer-bottom p{
font-size:14px;
color:var(--muted);
}

.payment-icons img{
max-height:36px;
}

/* =========================
UTILITY CLASSES
========================= */

.text-center{
text-align:center;
}

.mb-0{
margin-bottom:0;
}

.mb-10{
margin-bottom:10px;
}

.mb-20{
margin-bottom:20px;
}

.mb-30{
margin-bottom:30px;
}

.mt-20{
margin-top:20px;
}

.mt-30{
margin-top:30px;
}

/* =========================
TABLET
========================= */

@media(max-width:1024px){

.footer-top{
grid-template-columns:
1fr 1fr;
}

.blog-grid{
grid-template-columns:
repeat(2,1fr);
}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.blog-grid{
grid-template-columns:1fr;
}

.journal-heading h2{
font-size:28px;
}

.footer-top{
grid-template-columns:1fr;
gap:30px;
}

.footer-brand{
text-align:center;
}

.footer-brand img{
margin:auto auto 15px;
}

.footer-social{
justify-content:center;
}

.footer-links,
.footer-contact{
text-align:center;
}

.footer-bottom{
flex-direction:column;
text-align:center;
}

.payment-icons img{
margin:auto;
}

}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

.footer-brand img{
width:180px;
}

.blog-card img{
height:180px;
}

}

/* ==================================================
FINAL SAFETY RULES
(Prevents Mobile Overflow)
================================================== */

img{
max-width:100%;
}

table{
max-width:100%;
overflow-x:auto;
display:block;
}

iframe{
max-width:100%;
}

body{
overflow-x:hidden;
}


/* ==================================================
END OF ARTOVAULT CSS
================================================== */