/* =====================================================================
   Pilot's Coffee — shell.css
   Sticky field-manual nav + bag/cart drawer. Shared on every page.
   Relies on tokens from styles.css (:root --paper / --ink / --rust …).
   ===================================================================== */

/* ---------------- NAV ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  z-index:120;
  display:flex; align-items:center; gap:18px;
  padding:clamp(14px,2.4vh,24px) clamp(16px,3.2vw,42px);
  /* clear the phone notch / status bar; --safe-top lets the preview fake it */
  padding-top:max(clamp(14px,2.4vh,24px), var(--safe-top, env(safe-area-inset-top)));
  padding-left:max(clamp(16px,3.2vw,42px), env(safe-area-inset-left));
  padding-right:max(clamp(16px,3.2vw,42px), env(safe-area-inset-right));
  background:transparent; border:none; box-shadow:none;
  transition:padding .28s ease;
}
.site-nav.scrolled{
  padding-top:max(clamp(9px,1.6vh,15px), var(--safe-top, env(safe-area-inset-top)));
  padding-bottom:clamp(9px,1.6vh,15px);
}
.nav-logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav-logo img{ height:clamp(26px,3vw,36px); width:auto; display:block; }
.nav-logo .logo-dark{ display:none; }
.nav-logo .logo-light{ filter:drop-shadow(0 2px 7px rgba(0,0,0,.5)); }
.site-nav.nav-dark .nav-logo .logo-light{ display:none; }
.site-nav.nav-dark .nav-logo .logo-dark{ display:block; }

.nav-links{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-left:auto; }
.nav-links a{
  font-family:var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:clamp(11px,1vw,13.5px);
  color:var(--cream); text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  padding:5px 1px; border-bottom:1.6px solid transparent;
  transition:color .18s, border-color .18s, text-shadow .18s;
}
.nav-links a:hover{ color:#fff; border-color:var(--rust); }
.nav-links a.is-current{ color:#fff; border-color:var(--rust); }
.site-nav.nav-dark .nav-links a{ color:var(--ink); text-shadow:none; }
.site-nav.nav-dark .nav-links a:hover{ color:var(--ink); border-color:var(--rust); }
.site-nav.nav-dark .nav-links a.is-current{ color:var(--rust-deep); border-color:var(--rust); }

/* cart button */
.nav-cart{
  position:relative; flex:0 0 auto; margin-left:clamp(10px,1.6vw,22px);
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; cursor:pointer;
  background:transparent; border:none; color:var(--cream);
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.5));
  transition:color .18s, transform .12s;
}
.nav-cart:hover{ color:#fff; }
.nav-cart:active{ transform:translateY(1px); }
.nav-cart svg{ width:23px; height:23px; }
.site-nav.nav-dark .nav-cart{ color:var(--ink); filter:none; }
.site-nav.nav-dark .nav-cart:hover{ color:var(--rust-deep); }
.cart-count{
  position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rust); color:var(--cream);
  font-family:var(--cond); font-weight:700; font-size:11.5px; line-height:1;
  border-radius:20px; border:2px solid var(--paper);
  opacity:0; transform:scale(.4); transition:opacity .2s, transform .2s;
}
.cart-count.has{ opacity:1; transform:scale(1); }
.cart-count.bump{ animation:cartbump .42s cubic-bezier(.3,1.4,.5,1); }
@keyframes cartbump{ 0%{transform:scale(1);} 35%{transform:scale(1.45);} 100%{transform:scale(1);} }

/* mobile: collapse link labels a touch */
@media (max-width:560px){
  .nav-links{ gap:13px; }
  .nav-links a{ letter-spacing:.1em; }
  .site-nav{ gap:10px; }
}

/* ---------------- CART DRAWER ---------------- */
.cart-scrim{
  position:fixed; inset:0; z-index:140; background:rgba(20,13,5,.5);
  opacity:0; pointer-events:none; transition:opacity .3s;
  -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);
}
.cart-scrim.show{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; z-index:150; height:100%;
  width:min(404px,92vw); display:flex; flex-direction:column;
  background:var(--paper);
  border-left:2px solid var(--ink);
  box-shadow:-22px 0 50px -24px rgba(20,12,4,.8);
  transform:translateX(105%); transition:transform .36s cubic-bezier(.5,.05,.2,1);
  font-family:var(--cond);
}
.cart-drawer.open{ transform:translateX(0); }
/* faint paper texture edge */
.cart-drawer::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(91deg, transparent 0 38px, rgba(36,31,24,.025) 38px 39px);
}

.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 14px; border-bottom:1.5px solid rgba(36,31,24,.28);
  position:relative; z-index:1;
}
.cart-title{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.02em;
  font-size:24px; color:var(--ink); line-height:1;
}
.cart-head::after{
  content:'Manifest'; position:absolute; left:22px; bottom:5px;
  font-family:var(--type); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-mute);
}
.cart-x{
  background:transparent; border:none; cursor:pointer; color:var(--ink-soft);
  font-size:26px; line-height:1; width:34px; height:34px; border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s,color .15s;
}
.cart-x:hover{ background:rgba(36,31,24,.1); color:var(--ink); }

.cart-body{ flex:1; overflow-y:auto; padding:8px 22px 18px; position:relative; z-index:1; }

.cart-empty{ text-align:center; padding:64px 16px; color:var(--ink-mute); }
.cart-empty-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1.5px dashed rgba(36,31,24,.4); border-radius:50%;
  color:var(--ink-mute); font-size:18px; margin-bottom:16px;
}
.cart-empty p{ font-family:var(--cond); font-size:16px; color:var(--ink-soft); margin:0; }
.cart-empty-sub{ font-family:var(--type) !important; font-size:12px !important; color:var(--ink-mute) !important; letter-spacing:.04em; margin-top:6px !important; }

.cart-item{
  display:grid; grid-template-columns:58px 1fr auto; grid-template-areas:'thumb main rm';
  gap:14px; align-items:start; padding:17px 0;
  border-bottom:1px solid rgba(36,31,24,.16);
}
.ci-thumb{ grid-area:thumb; width:58px; height:74px; overflow:hidden; background:#1a140d;
  border:1px solid rgba(36,31,24,.3); border-radius:2px; }
.ci-thumb img{ width:100%; height:100%; object-fit:cover; }
.ci-main{ grid-area:main; min-width:0; }
.ci-name{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
  font-size:16px; line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:7px;
}
.ci-name span{
  font-family:var(--type); font-size:10.5px; letter-spacing:.06em; text-transform:none;
  color:var(--ink-mute); -webkit-text-stroke:0;
}
.ci-origin{ font-family:var(--type); font-size:11px; letter-spacing:.05em; color:var(--ink-mute); margin-top:5px; }
.ci-row{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; }
.ci-qty{ display:inline-flex; align-items:center; border:1.4px solid rgba(36,31,24,.4); border-radius:3px; overflow:hidden; }
.qbtn{
  width:27px; height:27px; background:transparent; border:none; cursor:pointer;
  color:var(--ink-soft); font-size:16px; line-height:1; font-family:var(--cond);
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s,color .15s;
}
.qbtn:hover{ background:var(--rust); color:var(--cream); }
.qval{ min-width:30px; text-align:center; font-family:var(--cond); font-weight:600; font-size:14px; color:var(--ink); }
.ci-price{ font-family:var(--cond); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:.02em; }
.ci-remove{
  grid-area:rm; align-self:start; background:transparent; border:none; cursor:pointer;
  font-family:var(--type); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); padding:2px 0; border-bottom:1px solid transparent; transition:color .15s,border-color .15s;
}
.ci-remove:hover{ color:var(--rust-deep); border-color:var(--rust); }

.cart-foot{
  padding:16px 22px calc(18px + env(safe-area-inset-bottom,0px));
  border-top:1.5px solid var(--ink); position:relative; z-index:1; background:var(--paper-warm);
}
.cart-sub{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:13px;
}
.cart-sub span:first-child{ font-family:var(--type); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.cart-sub span:last-child{ font-family:var(--display); font-size:28px; color:var(--ink); line-height:1; }
.cart-checkout{ width:100%; }
.cart-checkout.is-off{ opacity:.4; pointer-events:none; }
.cart-checkout.done{ background:var(--ink); }
.cart-note{
  margin:11px 0 0; text-align:center;
  font-family:var(--type); font-size:10.5px; letter-spacing:.08em; color:var(--ink-mute);
}

body.cart-locked{ overflow:hidden; }

/* ---------------- PHONE: roomier touch targets ---------------- */
@media (max-width:600px){
  .nav-links a{ padding-top:8px; padding-bottom:8px; }
  .qbtn{ width:40px; height:40px; font-size:19px; }
  .qval{ min-width:34px; font-size:15px; }
  .cart-x{ width:40px; height:40px; font-size:28px; }
  .ci-remove{ padding:6px 0; }
}