/* ========== Full style.css ========== */

/* ========== Base & Variables ========== */
:root{
  --gold:#d4af37;
  --text:#222;
  --muted:#666;
  --light:#f7f7f7;
  --dark:#0a0a0a;
  --container:1200px;
  --radius:14px;
  --shadow:0 10px 24px rgba(255, 255, 255, 0.08);
  --header-h:72px;              /* taller navbar */
  --section-py:64px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}

/* Make anchors land nicely under fixed header */
section { scroll-margin-top: calc(var(--header-h) + 20px); }

/* ========== Header ========== */
/* ========== Header ========== */
header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(0,0,0,.85);
  height:var(--header-h);
  display:flex;
  align-items:center;
  padding: 0 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* Left links */
.nav-left, .nav-right {
  display: flex;
  gap: 22px;
  align-items: center;
}

/* Center logo */
.logo {
  font-family:'Playfair Display',serif;
  color:var(--gold);
  font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2rem);
  text-align:center;
}

/* Nav links */
.nav-left a,.nav-right a{
  color:#fff;
  text-decoration:none;
  font-size:1rem;
  letter-spacing:.25px;
  transition:color .25s ease, transform .12s ease;
  padding:6px 6px;
}
.nav-left a:hover,.nav-right a:hover{
  color:var(--gold);
  transform:translateY(-2px);
}

/* Mobile layout */
@media (max-width: 768px){
  .navbar{flex-direction: column; gap:12px;}
  .nav-left,.nav-right{justify-content:center;}
}


/* Remove unwanted gap between header and hero */
main{padding-top:0; margin-top:0}

/* ========== Hero Section with Slider ========== */
.hero {
  position: relative;
  height: 100vh;
  min-height: clamp(520px, 70vh, 900px);
  overflow: hidden;
  display:block;
}

.hero-slider {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;  
  background: white;   /* fills empty space */
}

/* Overlay + Content */
.hero-overlay,
.hero .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  z-index: 2;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: #fff;
  text-align: center;
  width: 92%;
  max-width: 900px;
  padding: 20px;
}

.hero-content h1 {
  font-family: 'Playfair Display', serif;
  letter-spacing: .6px;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  color: var(--gold);
  margin-bottom: 0.6rem;
}

.lead, .hero-content p {
  font-size: clamp(0.98rem, 2.2vw, 1.15rem);
  margin: .9rem auto 1.6rem;
  color: #f2f2f2;
  max-width: 820px;
}

/* CTA */
.btn {
  display:inline-block;
  padding:.9rem 2rem;
  border-radius:999px;
  background:var(--gold);
  color:#000;
  text-decoration:none;
  font-weight:700;
  transition:transform .12s ease, background .25s ease, color .25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.btn:hover{ transform: translateY(-3px); background:#fff; }

/* ========== Collections ========== */
.collections{
  padding:var(--section-py) 0;
  background:#fff;
}
.collections h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--gold);
  text-align:center;
  margin-bottom:28px;
}

.collections .grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media (max-width: 1100px){ .collections .grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 768px){ .collections .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 480px){ .collections .grid{grid-template-columns:1fr;} }

.card{
  background:#fafafa;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(0,0,0,0.12);
}
.card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  cursor:pointer;
}

/* ========== About ========== */
.about{
  padding:var(--section-py) 0;
  background:#fff;
}
.about h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--gold);
  text-align:center;
  margin-bottom:14px;
}
.about p{
  max-width:900px;
  margin:0 auto 12px;
  color:var(--muted);
  line-height:1.8;
}

/* ========== Contact ========== */
.contact{
  padding:var(--section-py) 0;
  background:#f8f8f8;
}
.contact h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--gold);
  text-align:center;
  margin-bottom:26px;
}
.contact-grid{
  display:grid;
  gap:24px;
  align-items:start;
  grid-template-columns: 1.1fr 1.2fr;
  max-width:980px;
  margin:0 auto;
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

.contact-info{
  font-size:1rem; color:#333;
  background:#fff; border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.contact-info p{margin:.35rem 0}
.contact-info a{color:#111; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06)}
.contact-info a:hover{border-color:var(--gold)}

.contact-form{
  background:#fff; border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
  display:grid; gap:12px;
}
.contact-form input,.contact-form textarea{
  width:100%; border:1px solid #e5e5e5; border-radius:10px;
  padding:12px 14px; font:inherit; transition:border-color .2s ease;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--gold)}
.contact-form button{
  padding:12px 18px; border:none; border-radius:999px;
  background:var(--gold); color:#000; font-weight:700; cursor:pointer;
  transition:filter .2s ease, transform .12s ease;
}
.contact-form button:hover{filter:brightness(1.03); transform:translateY(-2px)}

/* ========== Footer ========== */
footer{
  position:relative;
  background: linear-gradient(180deg, #0b0b0b, #111);
  color:#fff;
  padding:56px 0 28px;
}
footer .overlay{
  position:absolute; inset:0; opacity:.12; pointer-events:none;
}
.footer-grid{
  position:relative; z-index:1;
  display:grid; gap:24px;
  grid-template-columns: 1.3fr .8fr .9fr;
}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .footer-grid{grid-template-columns:1fr} }

.footer-brand h3{
  font-family:'Playfair Display',serif;
  color:var(--gold);
  font-size:clamp(1.25rem,2.4vw,1.6rem);
  margin-bottom:8px;
}
.footer-brand p{color:#cfcfcf; max-width:380px; line-height:1.6}

.footer-links h4,.footer-social h4{
  color:var(--gold);
  font-size:1.05rem;
  margin-bottom:10px;
}
.footer-links a{
  display:block; color:#d9d9d9; text-decoration:none; margin:.28rem 0;
  transition:color .2s ease;
}
.footer-links a:hover{color:#fff}

.social-icons{
  display:flex; gap:12px; align-items:center;
}
.social-icons a{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.06);
  color:#fff; text-decoration:none; font-size:1rem;
  transition:transform .15s ease, background .25s ease, color .25s ease;
}
.social-icons a:hover{transform:translateY(-2px); background:var(--gold); color:#000}

.footer-bottom{
  position:relative; z-index:1;
  margin-top:26px; text-align:center; color:#bdbdbd; font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.12); padding-top:16px;
}

/* ========== Lightbox ========== */
.lightbox{
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.92);
  justify-content:center; align-items:center;
}
.lightbox-content{
  max-width:90%; max-height:80%;
  border:4px solid var(--gold); border-radius:10px;
}
.close{
  position:absolute; top:18px; right:28px; color:#fff; font-size:2rem; cursor:pointer;
}
.lightbox-nav .prev,.lightbox-nav .next{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2.4rem; color:var(--gold); cursor:pointer; user-select:none; padding:8px 12px;
}
.lightbox-nav .prev{left:18px} .lightbox-nav .next{right:18px}

/* ========== Reveal ========== */
.reveal{opacity:0; transform:translateY(18px); transition:all .6s ease}
.reveal.active{opacity:1; transform:none}

/* Small utilities */
.text-center{text-align:center}
.mt-24{margin-top:24px}
.mb-16{margin-bottom:16px}

/* End of file */