/* Coelli's Deli — base: reset, type, nav (incl. mobile menu), buttons, footer, section scaffold */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0;}
p{margin:0;}
a{color:inherit;}
img,video{max-width:100%; display:block;}
button{font:inherit; cursor:pointer;}
.mono{font-family:var(--font-mono); letter-spacing:0.04em;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* ---------- NAV ---------- */
header.nav{
  /* Solid background, not translucent+blur: backdrop-filter on this element would make
     any position:fixed descendant (the mobile nav-links panel) size itself against this
     header's own small box instead of the viewport. Solid is simpler and always correct. */
  position:sticky; top:0; z-index:80;
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.wordmark{font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:0.01em; text-decoration:none; color:var(--ink); white-space:nowrap;}
.nav-links{display:flex; gap:32px; font-size:13px; text-transform:uppercase; letter-spacing:0.08em;}
.nav-links a{text-decoration:none; opacity:0.75;}
.nav-links a:hover, .nav-links a[aria-current="page"]{opacity:1;}
.nav-cta-mobile{display:none;}
.nav-cta{
  font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:2px; text-decoration:none;
  white-space:nowrap;
}
.nav-toggle{
  display:none; background:none; border:none; padding:8px; margin:-8px;
  color:var(--ink);
}
.nav-toggle svg{width:24px; height:24px; display:block;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* ---------- CART ICON + DRAWER ---------- */
.cart-open{
  position:relative; background:none; border:none; padding:8px; margin:-8px;
  color:var(--ink); display:flex; align-items:center;
}
.cart-open svg{width:22px; height:22px; display:block;}
.cart-badge{
  position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
  background:var(--gold); color:var(--band-bg); border-radius:50%;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.cart-badge[hidden]{display:none;}
.cart-overlay{
  position:fixed; inset:0; background:rgba(20,15,8,0.5); z-index:90;
  opacity:0; pointer-events:none; transition:opacity 200ms ease;
}
.cart-overlay.is-open{opacity:1; pointer-events:auto;}
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 92vw); z-index:95;
  background:var(--surface); border-left:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden;
  transition:transform 220ms ease, visibility 0s linear 220ms;
}
.cart-drawer.is-open{transform:translateX(0); visibility:visible; transition:transform 220ms ease;}
.cart-drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line-soft);
}
.cart-drawer-header h2{font-size:1.3rem;}
.cart-drawer-close{background:none; border:none; color:var(--ink); padding:6px; margin:-6px;}
.cart-drawer-close svg{width:20px; height:20px; display:block;}
.cart-drawer-body{flex:1; overflow-y:auto; padding:8px 24px;}
.cart-empty{color:var(--ink-soft); font-size:0.95rem; padding:24px 0;}
.cart-empty a{color:var(--gold); font-weight:600; text-decoration:none;}
.cart-line{padding:20px 0; border-bottom:1px solid var(--line-soft); display:flex; flex-direction:column; gap:10px;}
.cart-line-region{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--olive);}
.cart-line-name{font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-top:2px;}
.cart-line-crush{font-size:10.5px; color:var(--ink-soft); margin-top:2px;}
.cart-line-controls{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.cart-line-price{font-size:0.95rem; font-weight:600;}
.cart-line-remove{background:none; border:none; color:var(--ink-soft); font-size:11.5px; text-decoration:underline; padding:4px;}
.cart-drawer-footer{padding:20px 24px 28px; border-top:1px solid var(--line-soft);}
.cart-subtotal{display:flex; justify-content:space-between; font-size:1.05rem; font-weight:600; margin-bottom:6px;}
.cart-shipping-note{font-size:11.5px; color:var(--ink-soft); margin-bottom:16px;}
.cart-checkout-btn{display:block; text-align:center; width:100%;}

@media (max-width:820px){
  .nav-links{
    position:fixed; inset:69px 0 0 0; z-index:70;
    background:var(--paper); flex-direction:column; gap:0;
    padding:12px 20px 32px; font-size:15px;
    transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    overflow-y:auto;
  }
  .nav-links.is-open{transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible; transition:opacity 180ms ease, transform 180ms ease;}
  .nav-links a{display:block; padding:16px 4px; border-bottom:1px solid var(--line-soft); opacity:1;}
  .nav-cta{display:none;}
  .nav-links .nav-cta-mobile{
    display:block; margin-top:20px; text-align:center;
    background:var(--ink); color:var(--paper); padding:15px; border-radius:2px;
    font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; text-decoration:none;
  }
  .nav-toggle{display:block;}
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
  padding:15px 28px; border-radius:2px; text-decoration:none; display:inline-block; border:1.5px solid transparent;
  cursor:pointer;
}
.btn.primary{background:var(--gold); color:var(--band-bg);}
.btn.ghost{border-color:var(--band-ink); color:var(--band-ink); background:none;}
.btn.outline{border-color:var(--ink); color:var(--ink); background:none;}
.btn.outline:hover{background:var(--ink); color:var(--paper);}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:110px 0;}
@media (max-width:640px){ section{padding:64px 0;} }
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--olive); margin-bottom:16px;
}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h1, .section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
.section-head p{color:var(--ink-soft); font-size:1.05rem; margin-top:16px; max-width:56ch;}
.section-head.center p{margin-left:auto; margin-right:auto;}

/* ---------- PAGE HERO (non-video pages) ---------- */
.page-hero{padding:80px 0 60px; border-bottom:1px solid var(--line-soft);}
.page-hero .eyebrow{justify-content:center; display:flex;}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem); text-align:center; max-width:20ch; margin:0 auto;}
.page-hero p{text-align:center; max-width:56ch; margin:20px auto 0; color:var(--ink-soft); font-size:1.05rem;}

/* ---------- FOOTER ---------- */
footer{padding:56px 0 40px; border-top:1px solid var(--line-soft);}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; align-items:flex-start;}
.footer-grid .wordmark{font-size:20px;}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:14px; font-family:var(--font-body); font-weight:600;}
.footer-col a{display:block; font-size:13.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:9px;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}