/* ═══════════════════════════════════════════
   JOHN & CO — Shared Stylesheet
   All pages share these variables & base styles
═══════════════════════════════════════════ */

:root {
  --cream:    #f7f2e8;
  --cream-d:  #ede5d0;
  --navy:     #1a1a2e;
  --gold:     #c9a96e;
  --gold-l:   #e2c98a;
  --charcoal: #3a3a4a;
  --muted:    #7a7a8a;
  --violet:   #8a4fcf;
  --white:    #fefcf8;
  --border:   #e4ddd0;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system,'Helvetica Neue',Arial,sans-serif; background:var(--cream); color:var(--navy); line-height:1.6; overflow-x:hidden; }
.serif { font-family: Georgia,'Times New Roman',serif; }
h1,h2,h3,h4 { font-family:Georgia,serif; font-weight:400; }
a { text-decoration:none; }
img { max-width:100%; display:block; }

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 52px; height:68px;
  background:rgba(247,242,232,0); backdrop-filter:blur(0);
  transition:background .4s,backdrop-filter .4s,box-shadow .4s;
}
nav.scrolled {
  background:rgba(247,242,232,0.97); backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(201,169,110,0.2);
}
nav.solid {
  background:var(--cream); box-shadow:0 1px 0 var(--border);
}
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  font-family:Arial,sans-serif; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--navy); transition:color .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-logo {
  font-family:Georgia,serif; font-size:18px; letter-spacing:2px;
  color:var(--navy); transition:opacity .2s;
}
.nav-logo:hover { opacity:.7; }
.nav-right { display:flex; align-items:center; gap:20px; }
.bag-btn {
  display:flex; align-items:center; gap:7px;
  background:none; border:none; cursor:pointer;
  font-family:Arial,sans-serif; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--navy); transition:color .2s;
}
.bag-btn:hover { color:var(--gold); }
.bag-count {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; background:var(--navy); color:var(--white);
  border-radius:50%; font-size:9px; transition:background .2s;
}
.bag-btn:hover .bag-count { background:var(--gold); color:var(--navy); }
.nav-cta {
  font-family:Arial,sans-serif; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:var(--white); background:var(--navy);
  padding:9px 20px; border-radius:1px; transition:background .2s,color .2s;
}
.nav-cta:hover { background:var(--gold); color:var(--navy); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--navy); transition:all .3s; }

/* Mobile nav drawer */
.mobile-nav {
  display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
  background:var(--cream); z-index:99; flex-direction:column;
  padding:40px 32px; gap:32px;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  font-family:Georgia,serif; font-size:28px; color:var(--navy);
  letter-spacing:1px; border-bottom:1px solid var(--cream-d); padding-bottom:20px;
}
.mobile-nav a:hover { color:var(--gold); }

/* ── ANNOUNCEMENT STRIP ── */
.ann-strip {
  background:var(--navy); color:var(--gold); text-align:center;
  padding:10px 20px; font-family:Arial,sans-serif; font-size:9px;
  letter-spacing:3.5px; text-transform:uppercase;
  margin-top:68px;
}
.ann-strip span { color:rgba(201,169,110,.45); margin:0 10px; }
.ann-strip a { color:var(--gold-l); }

/* ── PAGE HERO (interior pages) ── */
.page-hero {
  background:var(--cream); padding:80px 52px 64px;
  text-align:center; border-bottom:1px solid var(--border);
}
.page-hero .eyebrow {
  font-family:Arial,sans-serif; font-size:9px; letter-spacing:5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block;
}
.page-hero h1 { font-size:clamp(36px,5vw,64px); color:var(--navy); margin-bottom:16px; }
.page-hero p {
  font-family:Arial,sans-serif; font-size:15px; color:var(--charcoal);
  max-width:520px; margin:0 auto; line-height:1.85;
}

/* ── SECTIONS ── */
.section { max-width:1200px; margin:0 auto; padding:80px 52px; }
.section-sm { max-width:1200px; margin:0 auto; padding:48px 52px; }
.section-label {
  font-family:Arial,sans-serif; font-size:9px; letter-spacing:5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:block;
}
.section-title { font-size:clamp(28px,4vw,48px); color:var(--navy); line-height:1.15; margin-bottom:16px; }
.section-intro { font-family:Arial,sans-serif; font-size:15px; color:var(--charcoal); line-height:1.85; }
.gold-rule { width:36px; height:1px; background:var(--gold); margin-bottom:28px; }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-block; font-family:Arial,sans-serif; font-size:10px;
  letter-spacing:3px; text-transform:uppercase; color:var(--white);
  background:var(--navy); padding:15px 36px; border-radius:1px;
  border:none; cursor:pointer; transition:background .25s,color .25s,transform .2s;
}
.btn-primary:hover { background:var(--gold); color:var(--navy); transform:translateY(-1px); }
.btn-outline {
  display:inline-block; font-family:Arial,sans-serif; font-size:10px;
  letter-spacing:3px; text-transform:uppercase; color:var(--navy);
  background:transparent; border:1px solid var(--navy); padding:15px 36px;
  border-radius:1px; cursor:pointer; transition:background .25s,color .25s,transform .2s;
}
.btn-outline:hover { background:var(--navy); color:var(--cream); transform:translateY(-1px); }
.btn-gold {
  display:inline-block; font-family:Arial,sans-serif; font-size:10px;
  letter-spacing:3px; text-transform:uppercase; color:var(--navy);
  background:var(--gold); padding:15px 36px; border-radius:1px;
  cursor:pointer; transition:background .25s,transform .2s;
}
.btn-gold:hover { background:var(--gold-l); transform:translateY(-1px); }

/* ── FOOTER ── */
footer {
  background:var(--navy); padding:56px 52px; display:flex;
  flex-direction:column; align-items:center; gap:20px; text-align:center;
}
.footer-logo { font-family:Georgia,serif; font-size:22px; color:var(--cream); letter-spacing:3px; }
.footer-tagline { font-family:Arial,sans-serif; font-size:8px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); }
.footer-rule { width:40px; height:1px; background:rgba(201,169,110,.3); }
.footer-links { display:flex; gap:32px; list-style:none; flex-wrap:wrap; justify-content:center; }
.footer-links a {
  font-family:Arial,sans-serif; font-size:9px; letter-spacing:2.5px;
  text-transform:uppercase; color:rgba(232,220,200,.4); transition:color .2s;
}
.footer-links a:hover { color:var(--gold); }
.footer-copy { font-family:Arial,sans-serif; font-size:10px; color:rgba(232,220,200,.2); letter-spacing:1px; }

/* ── BAG DRAWER ── */
.bag-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(26,26,46,.45); z-index:200; backdrop-filter:blur(2px);
}
.bag-overlay.open { display:block; }
.bag-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:var(--white); z-index:201;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.bag-drawer.open { transform:translateX(0); }
.bag-top { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--border); }
.bag-top h3 { font-family:Georgia,serif; font-size:18px; font-weight:400; }
.bag-close { background:none; border:none; font-size:24px; color:var(--muted); cursor:pointer; }
.bag-items { flex:1; overflow-y:auto; padding:20px 28px; display:flex; flex-direction:column; gap:16px; }
.bag-empty { text-align:center; padding:48px 20px; font-family:Georgia,serif; font-size:15px; font-style:italic; color:var(--muted); }
.bag-item { display:flex; align-items:flex-start; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.bag-item-info { flex:1; }
.bag-item-name { font-family:Georgia,serif; font-size:15px; margin-bottom:2px; }
.bag-item-coll { font-family:Arial,sans-serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.bag-item-price { font-family:Arial,sans-serif; font-size:13px; }
.bag-item-remove { background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; padding:2px 4px; transition:color .2s; }
.bag-item-remove:hover { color:#c0392b; }
.bag-footer { padding:24px 28px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.bag-total { display:flex; justify-content:space-between; align-items:center; }
.bag-total-label { font-family:Arial,sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.bag-total-amount { font-family:Georgia,serif; font-size:22px; }
.bag-note { font-family:Arial,sans-serif; font-size:11px; color:var(--muted); line-height:1.6; text-align:center; }
.btn-checkout {
  font-family:Arial,sans-serif; font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--white); background:var(--navy); border:none; padding:16px; border-radius:1px;
  cursor:pointer; transition:background .25s; width:100%;
}
.btn-checkout:hover { background:var(--gold); color:var(--navy); }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.32s; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── MOBILE ── */
@media(max-width:900px){
  nav { padding:0 24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .section, .section-sm { padding:56px 24px; }
  .page-hero { padding:64px 24px 48px; }
  footer { padding:48px 24px; }
}