/* ============================================================
   NAZZA — Main Stylesheet
   ============================================================ */

:root {
  --black: #0a0a0a;
  --white: #fafaf8;
  --cream: #f5f2ec;
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --mid: #6b6b6b;
  --light: #e0ddd8;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', sans-serif;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ann-h: 38px; /* announcement bar height — nav sits below this */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* CURSOR */
.cursor { position: fixed; top:0; left:0; width:8px; height:8px; background:var(--white); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s; mix-blend-mode:difference; }
.cursor-ring { position:fixed; top:0; left:0; width:36px; height:36px; border:1px solid rgba(255,255,255,.5); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .3s,height .3s,border-color .3s; }
.cursor.hovering { width:16px; height:16px; background:var(--gold); }
.cursor-ring.hovering { width:60px; height:60px; border-color:var(--gold); }

/* ANNOUNCEMENT BAR — original style, untouched */
.ann-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: var(--gold); color: var(--black);
  text-align: center; padding: 10px;
  font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
  font-family: var(--sans); font-weight: 500;
}

/* NAVIGATION — sits directly below the announcement bar */
nav {
  position: fixed;
  top: var(--ann-h);   /* pushed down by bar height */
  left: 0; right: 0; z-index: 1000;
  padding: 20px 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .5s, padding .5s, border-color .5s;
}
/* When no announcement bar is present, nav goes back to top:0 */
body.no-ann nav { top: 0; }

nav.scrolled { background:rgba(10,10,10,.95); backdrop-filter:blur(20px); padding:14px 64px; border-bottom:1px solid rgba(255,255,255,.05); }
.nav-brand { display:flex; align-items:center; }
.nav-logo { height:45px; filter:invert(1); transition:opacity .3s; }
.nav-logo:hover { opacity:.7; }
.nav-icons { display:flex; align-items:center; gap:28px; }
.nav-icon { background:none; border:none; color:var(--white); cursor:pointer; font-size:11px; letter-spacing:2px; font-family:var(--sans); font-weight:300; text-transform:uppercase; transition:color .3s; padding:4px 0; text-decoration:none; display:flex; align-items:center; gap:4px; position:relative; }
.nav-icon:hover { color:var(--gold); }
.nav-icon svg { width:18px; height:18px; }
.cart-badge { position:absolute; top:-6px; right:-10px; width:16px; height:16px; background:var(--gold); border-radius:50%; font-size:8px; color:var(--black); font-weight:500; display:flex; align-items:center; justify-content:center; }

/* HAMBURGER */
.hamburger { background:none; border:none; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:4px; }
.hamburger span { display:block; width:24px; height:1px; background:var(--white); transition:all .4s var(--ease); }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* LANG SELECTOR */
.lang-selector { position:relative; }
.lang-current { background:none; border:none; color:rgba(255,255,255,.5); font-size:9px; letter-spacing:2px; cursor:pointer; font-family:var(--sans); font-weight:400; text-transform:uppercase; display:flex; align-items:center; gap:4px; transition:color .3s; }
.lang-current:hover { color:var(--white); }
.lang-dropdown { position:absolute; top:100%; right:0; background:rgba(10,10,10,.97); border:1px solid rgba(255,255,255,.08); padding:8px 0; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; min-width:72px; backdrop-filter:blur(20px); z-index:100; margin-top:8px; }
.lang-selector:hover .lang-dropdown { opacity:1; visibility:visible; }
.lang-dropdown button { display:block; width:100%; background:none; border:none; color:rgba(255,255,255,.4); font-size:9px; letter-spacing:1px; text-transform:uppercase; font-family:var(--sans); font-weight:400; padding:8px 16px; cursor:pointer; text-align:left; transition:color .2s,background .2s; }
.lang-dropdown button:hover, .lang-dropdown button.active { color:var(--gold); background:rgba(201,169,110,.05); }

/* MEGA MENU */
.mega-menu { position:fixed; inset:0; background:var(--black); z-index:999; display:grid; grid-template-columns:1fr 1fr; opacity:0; visibility:hidden; transition:opacity .6s var(--ease),visibility .6s; }
.mega-menu.open { opacity:1; visibility:visible; }
.mega-menu-left { padding:120px 64px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.08); }
.mega-menu-right { position:relative; overflow:hidden; }
.menu-visual { width:100%; height:100%; background:linear-gradient(160deg,#1a1510 0%,#2d2418 40%,#0f0c0a 100%); display:flex; align-items:center; justify-content:center; }
.menu-visual-letter { font-family:var(--serif); font-size:22vw; color:rgba(201,169,110,.06); font-weight:300; font-style:italic; }
.menu-label { font-size:9px; letter-spacing:4px; color:var(--gold); text-transform:uppercase; margin-bottom:48px; font-family:var(--sans); font-weight:400; }
.menu-nav-item { display:block; font-family:var(--serif); font-size:clamp(32px,4vw,56px); font-weight:300; color:var(--white); text-decoration:none; line-height:1.25; margin-bottom:6px; transition:color .3s,transform .4s var(--ease); opacity:0; transform:translateY(20px); }
.mega-menu.open .menu-nav-item { opacity:1; transform:translateY(0); }
.mega-menu.open .menu-nav-item:nth-child(2) { transition-delay:.1s; }
.mega-menu.open .menu-nav-item:nth-child(3) { transition-delay:.15s; }
.mega-menu.open .menu-nav-item:nth-child(4) { transition-delay:.2s; }
.mega-menu.open .menu-nav-item:nth-child(5) { transition-delay:.25s; }
.mega-menu.open .menu-nav-item:nth-child(6) { transition-delay:.3s; }
.mega-menu.open .menu-nav-item:nth-child(7) { transition-delay:.35s; }
.menu-nav-item:hover { color:var(--gold); transform:translateX(12px) !important; }
.menu-sub { margin-top:40px; padding-top:40px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:32px; flex-wrap:wrap; }
.menu-sub a { font-size:9px; letter-spacing:3px; color:var(--mid); text-transform:uppercase; text-decoration:none; transition:color .3s; font-family:var(--sans); font-weight:400; }
.menu-sub a:hover { color:var(--white); }

/* BUTTONS */
.btn-primary { display:inline-flex; align-items:center; gap:12px; background:var(--gold); color:var(--black); font-family:var(--sans); font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:500; padding:16px 32px; text-decoration:none; cursor:pointer; border:none; transition:background .3s,transform .3s; }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-1px); }
.btn-ghost { display:inline-flex; align-items:center; gap:12px; background:transparent; color:var(--white); font-family:var(--sans); font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:400; padding:8px 0; text-decoration:none; cursor:pointer; border:none; border-bottom:1px solid rgba(255,255,255,.25); transition:border-color .3s,color .3s; }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* SECTION HELPERS */
.section-label { font-size:8px; letter-spacing:5px; color:var(--gold); text-transform:uppercase; font-family:var(--sans); font-weight:400; margin-bottom:16px; }
.section-title { font-family:var(--serif); font-size:clamp(32px,4vw,60px); font-weight:300; line-height:1.1; letter-spacing:-.5px; }
.section-title em { font-style:italic; color:var(--gold-light); }

/* PRODUCT CARDS */
.product-card { position:relative; background:var(--black); overflow:hidden; cursor:pointer; }
.product-img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.product-card:hover .product-img { transform:scale(1.06); }
.product-img-placeholder { width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:clamp(60px,10vw,120px); color:rgba(255,255,255,.04); font-weight:300; background:linear-gradient(160deg,#141210 0%,#1e1a16 50%,#0f0d0b 100%); transition:transform .8s var(--ease); }
.product-card:hover .product-img-placeholder { transform:scale(1.04); }
.product-overlay { position:absolute; bottom:0; left:0; right:0; padding:28px 24px; background:linear-gradient(to top,rgba(10,10,10,.95) 0%,transparent 100%); transform:translateY(6px); transition:transform .4s var(--ease); }
.product-card:hover .product-overlay { transform:translateY(0); }
.product-tag { font-size:8px; letter-spacing:3px; color:var(--gold); text-transform:uppercase; font-family:var(--sans); font-weight:400; margin-bottom:6px; }
.product-name { font-family:var(--serif); font-size:18px; font-weight:300; margin-bottom:4px; }
.product-price { font-size:11px; letter-spacing:1px; color:rgba(255,255,255,.5); font-family:var(--sans); font-weight:300; }
.product-action { position:absolute; top:16px; right:16px; opacity:0; transform:translateY(-8px); transition:opacity .3s,transform .3s; }
.product-card:hover .product-action { opacity:1; transform:translateY(0); }
.wishlist-btn { background:rgba(10,10,10,.8); border:1px solid rgba(255,255,255,.15); color:var(--white); width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(10px); transition:background .3s,border-color .3s; }
.wishlist-btn:hover { background:rgba(201,169,110,.2); border-color:var(--gold); }
.wishlist-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.2; }

/* STATUS BADGES */
.status-badge { display:inline-block; font-size:7px; letter-spacing:2px; text-transform:uppercase; font-family:var(--sans); font-weight:500; padding:4px 10px; margin-bottom:10px; }
.status-available { background:rgba(201,169,110,.12); color:var(--gold); border:1px solid rgba(201,169,110,.25); }
.status-limited { background:rgba(255,80,80,.08); color:#ff8080; border:1px solid rgba(255,80,80,.18); }
.status-order { background:rgba(255,255,255,.04); color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.08); }

/* ORNAMENT */
.ornament { display:flex; align-items:center; gap:20px; max-width:200px; margin:0 auto 40px; }
.ornament-line { flex:1; height:1px; background:var(--gold); opacity:.3; }
.ornament-diamond { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); opacity:.6; }

/* BREADCRUMB */
.breadcrumb { padding:24px 64px 0; display:flex; gap:8px; align-items:center; font-size:10px; color:rgba(255,255,255,.3); }
.breadcrumb a { color:rgba(255,255,255,.3); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span:last-child { color:rgba(255,255,255,.6); }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* COLLECTIONS PAGE / GRID */
.page-header { padding:100px 64px 48px; }
.shop-layout { display:grid; grid-template-columns:220px 1fr; gap:40px; padding:0 64px 80px; }
.filters { }
.filter-section { margin-bottom:32px; border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:28px; }
.filter-title { font-size:9px; letter-spacing:3px; text-transform:uppercase; font-weight:500; margin-bottom:16px; color:rgba(255,255,255,.5); }
.filter-option { display:flex; align-items:center; gap:10px; margin-bottom:10px; cursor:pointer; }
.filter-option input[type=checkbox] { accent-color:var(--gold); }
.filter-option label { font-size:12px; color:rgba(255,255,255,.45); cursor:pointer; transition:color .2s; }
.filter-option:hover label { color:var(--white); }
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2px; }

/* FOOTER */
footer { background:#050504; padding:80px 64px 40px; border-top:1px solid rgba(255,255,255,.04); }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:64px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:48px; }
.footer-brand-logo { height:28px; filter:invert(1); margin-bottom:18px; opacity:.6; display:block; }
.footer-brand-text { font-size:11px; color:rgba(255,255,255,.28); line-height:1.85; max-width:240px; margin-bottom:24px; }
.footer-social { display:flex; gap:10px; }
.social-link { width:36px; height:36px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--mid); transition:border-color .3s,color .3s; font-size:10px; font-weight:400; }
.social-link:hover { border-color:var(--gold); color:var(--gold); }
.footer-col-title { font-size:8px; letter-spacing:3px; color:var(--gold); text-transform:uppercase; font-weight:500; margin-bottom:18px; }
.footer-col a { display:block; font-size:12px; color:rgba(255,255,255,.3); text-decoration:none; margin-bottom:10px; transition:color .3s; font-weight:300; }
.footer-col a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-size:10px; color:rgba(255,255,255,.18); letter-spacing:.5px; }
.footer-langs { display:flex; gap:12px; }
.footer-langs button { background:none; border:none; color:rgba(255,255,255,.18); font-size:9px; letter-spacing:1px; cursor:pointer; font-family:var(--sans); font-weight:400; transition:color .3s; text-transform:uppercase; }
.footer-langs button:hover, .footer-langs button.active { color:var(--gold); }

/* NEWSLETTER */
#newsletter { padding:100px 64px; text-align:center; border-top:1px solid rgba(255,255,255,.05); }
.newsletter-inner { max-width:500px; margin:0 auto; }
.newsletter-sub { font-size:13px; color:rgba(255,255,255,.35); margin-bottom:48px; line-height:1.75; }
.newsletter-form { display:flex; border:1px solid rgba(255,255,255,.12); }
.newsletter-input { flex:1; background:transparent; border:none; padding:16px 22px; color:var(--white); font-family:var(--sans); font-size:12px; letter-spacing:1px; outline:none; }
.newsletter-input::placeholder { color:rgba(255,255,255,.22); }
.newsletter-btn { background:var(--gold); border:none; padding:16px 26px; color:var(--black); font-family:var(--sans); font-size:9px; letter-spacing:3px; text-transform:uppercase; font-weight:500; cursor:pointer; transition:background .3s; white-space:nowrap; }
.newsletter-btn:hover { background:var(--gold-light); }
.newsletter-note { font-size:10px; color:rgba(255,255,255,.18); margin-top:14px; letter-spacing:.5px; }

/* RESPONSIVE */
@media (max-width:1024px) {
  :root { --ann-h: 36px; }
  nav, nav.scrolled { padding:16px 32px; }
  .breadcrumb { padding:20px 32px 0; }
  .page-header { padding:80px 32px 40px; }
  .shop-layout { grid-template-columns:1fr; padding:0 32px 64px; }
  .filters { display:none; }
  footer { padding:64px 32px 32px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  #newsletter { padding:80px 32px; }
}
@media (max-width:640px) {
  :root { --ann-h: 34px; }
  nav, nav.scrolled { padding:12px 20px; }
  .hide-mobile { display:none !important; }
  .mega-menu { grid-template-columns:1fr; }
  .mega-menu-right { display:none; }
  .mega-menu-left { padding:80px 24px; }
  footer { padding:48px 20px 24px; }
  .footer-top { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; gap:16px; }
  .page-header { padding:70px 20px 32px; }
  #newsletter { padding:60px 20px; }
  .newsletter-form { flex-direction:column; }
  body { cursor:auto; }
  .cursor, .cursor-ring { display:none; }
}