:root{
  --off-white:#F3F3F1;
  --black:#0A0A0A;
  --soft-gray:#B9B9B9;
  --charcoal:#222222;
  --gold:#B89B5E;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--off-white);color:var(--black);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit;text-decoration:none}
/* ===== NAV (reference based) ===== */
.nav{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:90px;
  background:rgba(10,10,10,0);
  border-bottom:1px solid rgba(245,245,243,.18);
  color:#F5F5F3;
  z-index:1000;
  display:flex;
  align-items:center;
  padding:0 26px;
  transition:background 320ms ease, border-color 320ms ease, color 320ms ease;
}
.nav.is-solid{
  background:rgba(245,245,243,.98);
  border-bottom:1px solid #DADADA;
  color:#111;
}
.nav__left,.nav__right{display:flex;align-items:center;gap:14px}
.nav__right{margin-left:auto}
.nav__logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav__logo .logo-text{
  font-family:Bebas Neue,Oswald;
  font-size:20px;
  letter-spacing:.22em;
  color:currentColor;
}
.nav .icon-btn{
  width:42px;
  height:42px;
  border:1px solid transparent;
  background:transparent;
  color:currentColor;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.icon-btn{width:42px;height:42px;border:1px solid transparent;background:transparent;color:currentColor;display:grid;place-items:center;cursor:pointer}
.hamburger-icon{
  width:18px;
  height:2px;
  background:currentColor;
  position:relative;
  display:block;
}
.hamburger-icon:before,.hamburger-icon:after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:currentColor;
}
.hamburger-icon:before{top:-6px}
.hamburger-icon:after{top:6px}
.nav__label{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  color:currentColor;
}
.nav__login{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  color:currentColor;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav__login:hover{opacity:.7}

/* ===== LEFT SIDEBAR (drawer overlay) ===== */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(420px,92vw);background:var(--off-white);border-right:1px solid #DADADA;z-index:999;transform:translateX(-102%);transition:transform 520ms cubic-bezier(.7,0,.2,1);pointer-events:auto}
.sidebar.is-open{transform:translateX(0)}
.sidebar__inner{height:100%;display:flex;flex-direction:column;padding:28px 28px 22px;position:relative}
.sidebar__close{position:absolute;right:18px;top:16px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;font-size:28px;line-height:1;color:var(--black)}
.sidebar__close:hover{opacity:.65}
.sidebar__content{display:flex;flex-direction:column;height:100%}
.sidebar__spacer{flex:1}
.sidebar__meta{padding:18px 8px;text-align:center}
.sidebar__footer{padding:12px 8px;text-align:center}
.sidebar .menu-label{font-family:Inter;font-size:10px;letter-spacing:8px;text-transform:uppercase;opacity:0.65}
.menu{margin-top:74px;display:flex;flex-direction:column;gap:10px}
.menu__item{font-family:Bebas Neue,Oswald;text-transform:uppercase;font-size:44px;line-height:.95;letter-spacing:.02em;padding:6px 0;transition:opacity 260ms ease,transform 260ms ease;color:var(--black)}
.menu__item:hover{opacity:.6;transform:translateX(2px)}
.sidebar__bottom{margin-top:auto;border-top:1px solid #DADADA;padding-top:16px}
.social{display:flex;gap:12px;align-items:center}
.social__item{width:36px;height:36px;display:grid;place-items:center;border:1px solid transparent;color:var(--charcoal);opacity:.85}
.social__item:hover{opacity:.6}
.sidebar__footer{margin-top:14px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;color:#666}

/* ===== RIGHT SIDEBAR (vertical nav, reference based) ===== */
.side-nav{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:800;
  pointer-events:auto;
  opacity:0;
  transition:opacity 400ms ease;
}
.side-nav.is-visible{opacity:1}
.side-nav__item{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--charcoal);
  opacity:0.55;
  position:relative;
  padding:8px 0;
  transition:color 220ms ease, opacity 220ms ease;
}
.side-nav__item:hover{opacity:.85}
.side-nav__item.is-active{color:var(--black);opacity:1}
/* on hero dark background, lighter */
.side-nav.hero-mode .side-nav__item{color:rgba(243,243,241,.55)}
.side-nav.hero-mode .side-nav__item.is-active{color:var(--off-white)}
.side-nav__item.is-active:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:1px;
  height:18px;
  background:var(--gold);
  transform:translateX(-50%);
  opacity:.85;
}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity 420ms ease;z-index:900;pointer-events:none}
.overlay[hidden]{display:block;opacity:0}
.overlay.is-open{opacity:1;pointer-events:auto}

main{margin-left:0;margin-right:0;padding-top:90px}
.hero{height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:-90px;margin-left:0;margin-right:0;width:100%}
.hero-media{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(40%) contrast(85%);background-blend-mode:multiply}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 40%, rgba(255,255,255,0.02), rgba(0,0,0,0.7)), linear-gradient(180deg, rgba(10,10,10,0.6), rgba(10,10,10,0.6))}
.hero-content{position:relative;color:var(--off-white);max-width:1400px;padding:40px}
.hero__grain{position:absolute;inset:-30%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.18;pointer-events:none;transform:translateZ(0)}
.hero-asym{display:grid;grid-template-columns:360px 1fr;gap:80px;align-items:center}
.editorial-meta{position:absolute;left:120px;top:36px;font-family:Inter;font-size:12px;letter-spacing:6px;text-transform:uppercase;opacity:0.6}
.hero-left .bottle-visual{width:360px;height:640px;background-image:url('assets/images/parfume2.jpeg');background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 40px 80px rgba(0,0,0,0.7));transform:translateX(-24px)}
.hero-right{text-align:left;padding-right:80px}
.collection-name{font-family:Oswald;letter-spacing:8px;font-size:12px;text-transform:uppercase;opacity:0.9}
.hero-title{font-family:Oswald,Anton,Druk Condensed,Oswald;font-weight:400;font-size:160px;line-height:0.78;text-transform:uppercase;letter-spacing:-2px;word-break:break-word}
.hero-title .of{font-size:36px;vertical-align:middle;letter-spacing:8px;display:inline-block;margin:0 8px;opacity:0.85}
.hero-title .scents{font-size:220px;display:inline-block;letter-spacing:-6px}

/* extreme responsive typography using clamp */
.hero-title{font-size:clamp(40px, 9.5vw, 220px)}
.hero-title .scents{font-size:clamp(48px, 12vw, 320px)}
.tagline{margin-top:18px;opacity:0.9;max-width:600px}
.cta{display:inline-block;margin-top:48px;padding:14px 84px;border:1px solid var(--off-white);letter-spacing:14px;text-transform:uppercase;transition:all 0.35s ease;border-radius:0}
.cta:hover{background:var(--off-white);color:var(--black);letter-spacing:18px;transform:translateY(-4px)}
.cta{font-family:Oswald,Inter}

/* editorial layers */
.hero-media:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 40% 20%, rgba(255,255,255,0.02), transparent), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><filter id="g"><feTurbulence baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23g)" opacity="0.02"/></svg>');background-repeat:repeat}

/* adjust for mobile */
@media(max-width:900px){
  .side-nav{display:none}
  .hero{margin-top:0;height:100dvh}
  .hero-asym{grid-template-columns:1fr;gap:16px;text-align:center;padding:20px}
  .hero-left .bottle-visual{width:100%;height:320px;transform:none;margin:0 auto;max-width:240px}
  .hero-right{text-align:center;padding-right:0}
  .hero-title{font-size:clamp(32px,8vw,48px);line-height:0.85}
  .hero-title .of{font-size:clamp(18px,4vw,28px)}
  .hero-title .scents{font-size:clamp(38px,10vw,56px)}
  .editorial-meta{position:static;text-align:center;margin-bottom:8px;left:auto;top:auto}
  .cta{padding:12px 40px;letter-spacing:8px;font-size:12px}
  .collection-name{font-size:11px}
  .tagline{font-size:13px;margin:12px auto}
  .hero-content{padding:20px}

  .collection-page .collection-grid{grid-template-columns:1fr;padding:100px 20px 60px;gap:16px}
  .product{height:300px}

  .product-page{grid-template-columns:1fr;padding:100px 20px 60px;gap:24px}
  .product-description{padding-right:0}
  .product-details-grid{grid-template-columns:1fr}
  .product-gallery .big-image{height:50vh}

  .featured{padding:40px 20px}
  .masonry{column-count:1}
  .m-item{height:260px}

  main{margin-right:0;padding-top:80px}
  .nav{height:64px;padding:0 12px}
  .nav__logo .logo-text{font-size:16px}
  .nav__label{font-size:10px}
  .nav__login{font-size:10px}

  .cart-panel{width:100%;max-width:360px}
  .auth{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-form-wrap{padding:40px 20px}
  .auth-inner h1{font-size:32px}
  .auth-inner .auth-sub{font-size:11px}
  .auth-visual-content{padding:40px}
  .auth-visual-content h2{font-size:48px}

  .sidebar{width:min(320px,85vw)}
  .menu__item{font-size:28px}
}
.featured{padding:80px 100px 80px 40px}
.featured .section-title{font-family:Oswald;font-size:22px;letter-spacing:6px;margin-bottom:28px}
.masonry{column-count:3;column-gap:28px}
.m-item{display:block;width:100%;height:380px;background-size:cover;background-position:center;margin-bottom:28px;transition:transform 0.8s ease,filter 0.8s ease;filter:grayscale(90%)}
.m-item:hover{filter:grayscale(0);transform:scale(1.03)}
.collection-page .collection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:140px 100px 80px 40px}
.product{display:block;height:420px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.product:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 50%);pointer-events:none}
.product .product-info{position:absolute;left:24px;bottom:24px;color:var(--off-white);text-transform:uppercase;font-family:Oswald;letter-spacing:6px;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,0.5)}
.product-page{display:grid;grid-template-columns:1fr 400px;gap:60px;padding:140px 100px 80px 40px;align-items:start}
.product-gallery .big-image{height:85vh;background-size:cover;background-position:center;margin-bottom:16px}
.product-gallery .thumbs{display:flex;gap:10px;margin-bottom:48px}
.product-gallery .thumbs div{width:80px;height:80px;background-size:cover;background-position:center;cursor:pointer;transition:opacity 0.3s;border:1px solid rgba(0,0,0,0.06)}
.product-gallery .thumbs div:hover{opacity:0.7}

.product-description{padding-right:40px}
.product-description h3{font-family:Oswald;letter-spacing:8px;font-size:14px;margin-bottom:18px;text-transform:uppercase}
.product-description p{font-size:14px;line-height:1.9;margin-bottom:18px;color:var(--charcoal);max-width:620px}

.product-accords{margin:36px 0;border-top:1px solid rgba(0,0,0,0.06);padding-top:24px}
.product-accords h4{font-family:Oswald;font-size:12px;letter-spacing:6px;margin-bottom:16px}
.accord-list{display:flex;flex-wrap:wrap;gap:10px}
.accord-item{font-size:11px;text-transform:uppercase;letter-spacing:4px;padding:6px 16px;border:1px solid rgba(0,0,0,0.12)}

.product-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px;border-top:1px solid rgba(0,0,0,0.06);padding-top:24px}
.product-details-grid h5{font-family:Oswald;font-size:11px;letter-spacing:5px;text-transform:uppercase;opacity:0.65;margin-bottom:4px}
.product-details-grid p{font-size:13px;line-height:1.5}

.product-page .product-info{position:sticky;top:100px;padding:0}
.product-title{font-family:Oswald;font-size:36px;letter-spacing:8px;text-transform:uppercase;margin-bottom:6px}
.scent-category{font-size:12px;letter-spacing:4px;text-transform:uppercase;opacity:0.7;margin-bottom:4px}
.product-meta{display:flex;gap:16px;font-size:11px;letter-spacing:4px;text-transform:uppercase;opacity:0.55;margin-bottom:18px}
.price{font-size:28px;font-weight:400;margin:24px 0;letter-spacing:2px}
.add-to-cart{width:100%;padding:16px;border:1px solid var(--black);background:transparent;text-transform:uppercase;letter-spacing:8px;cursor:pointer;transition:all 0.3s;margin-bottom:40px}
.add-to-cart:hover{background:var(--black);color:var(--off-white)}
.scent-notes{border-top:1px solid rgba(0,0,0,0.06);padding-top:20px}
.note-group{margin-bottom:16px}
.note-group h4{font-family:Oswald;font-size:11px;letter-spacing:5px;text-transform:uppercase;opacity:0.65;margin-bottom:4px}
.note-group p{font-size:13px;line-height:1.6}
.perfumer-note{margin-top:24px;border-top:1px solid rgba(0,0,0,0.06);padding-top:20px}
.perfumer-note h4{font-family:Oswald;font-size:11px;letter-spacing:5px;text-transform:uppercase;opacity:0.65;margin-bottom:8px}
.perfumer-note p{font-size:13px;line-height:1.7;font-style:italic;color:var(--charcoal)}
.cart-panel{position:fixed;right:0;top:0;bottom:0;width:420px;background:rgba(10,10,10,0.96);color:var(--off-white);transform:translateX(100%);transition:transform 0.4s ease;padding:28px;z-index:1100}
.cart-panel.open{transform:translateX(0)}
.cart-inner{height:100%;display:flex;flex-direction:column}
.cart-close{background:none;border:none;color:var(--off-white);font-size:28px;align-self:flex-end}
.cart-item{display:flex;gap:12px;align-items:center;margin:12px 0}
.cart-item img{width:64px;height:64px;object-fit:cover}
.checkout{margin-top:auto;padding:14px;border:1px solid var(--gold);background:transparent;color:var(--gold);text-transform:uppercase}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center}
.auth-inner{background:var(--off-white);padding:48px;max-width:420px;width:100%;text-align:center}
.input-label{display:block;margin:12px 0}