/* abd-chrome.css — shared site chrome: header, nav overlay, cart drawer,
   toasts. Injected markup comes from abd-chrome.js. Design tokens here so
   commerce pages share one look. */
:root{
  --ink:#1c1b19;
  --paper:#f4f2ee;
  --line:rgba(28,27,25,.15);
}

/* one background for the whole site — every page (and the full-screen menu)
   sits in the same studio world as the homepage, so page-to-page parallax
   transitions read as one continuous space rather than theme jumps.
   Path is relative to shared/. */
.abd-studio-bg{
  background:#cccccc url("../optimized/background-image.jpg") center 60% / cover no-repeat;
}

/* ---------- header ---------- */
.abd-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 32px;
  pointer-events:none; /* children opt back in */
}
.abd-header > *{ pointer-events:auto; }
.abd-menu-btn, .abd-bag-btn{
  background:none;
  border:none;
  font-family:inherit;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  padding:6px 2px;
  opacity:.7;
  transition:opacity .2s ease;
}
.abd-menu-btn:hover, .abd-bag-btn:hover{ opacity:1; }
.abd-header-logo{ display:block; }
.abd-header-logo img{ display:block; width:54px; height:auto; }
.abd-bag-count{
  display:inline-block;
  min-width:18px;
  text-align:center;
  margin-left:4px;
  padding:2px 4px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:10px;
}

/* ---------- standalone menu button (lite mount — pages with their own
   chrome: homepage, View All). Wrapped so pages can fade the wrap without
   fighting the button's own hover opacity. ---------- */
.abd-menu-solo{
  position:fixed;
  top:22px; left:32px;
  z-index:290;
}

/* ---------- page wrapper: mount() moves the page's own elements in here so
   the menu push can translate them while the body background stays still.
   min-height keeps fixed descendants (which re-anchor to this box while it
   is transformed) at exact viewport geometry. ---------- */
.abd-page{ min-height:100vh; }

/* ---------- menu sheet (site chrome — TRANSPARENT: the page's own still
   background shows through; opening pushes the page elements down 100vh
   while this sheet rides in from the top at the same speed — see
   openNav/closeNav in abd-chrome.js) ---------- */
.abd-nav-overlay{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  visibility:hidden; /* toggled by JS; GSAP owns y */
}
.abd-nav-close{
  position:absolute;
  top:22px; right:32px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  opacity:.6;
}
.abd-nav-close:hover{ opacity:1; }
.abd-nav-link{
  font-size:clamp(28px, 4.6vw, 54px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  line-height:1.25;
  opacity:.85;
  transition:opacity .2s ease, letter-spacing .25s ease;
}
.abd-nav-link:hover{ opacity:1; letter-spacing:.06em; }
.abd-nav-logo{
  width:88px;
  height:auto;
  margin-bottom:22px;
}
.abd-nav-foot{
  position:absolute;
  bottom:30px; left:0; right:0;
  text-align:center;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.55;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.abd-nav-foot a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(28,27,25,.25);
  padding-bottom:1px;
}
.abd-nav-foot a:hover{ border-bottom-color:var(--ink); }
.abd-nav-foot .sep{ opacity:.4; }

/* ---------- cart drawer (slides from the RIGHT) ---------- */
.abd-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:250;
  background:rgba(28,27,25,.35);
  opacity:0;
  visibility:hidden;
}
.abd-cart-drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(400px, 92vw);
  z-index:260;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  visibility:hidden; /* toggled by JS; GSAP owns x */
  box-shadow:-18px 0 40px rgba(0,0,0,.08);
}
.abd-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 26px 16px;
  border-bottom:1px solid var(--line);
}
.abd-drawer-title{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.abd-drawer-close{
  background:none;
  border:none;
  font-size:18px;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
  opacity:.5;
  padding:4px;
}
.abd-drawer-close:hover{ opacity:1; }
.abd-drawer-items{
  flex:1;
  overflow-y:auto;
  padding:8px 26px;
}
.abd-drawer-empty{
  padding:40px 0;
  text-align:center;
  font-size:12px;
  color:var(--ink);
  opacity:.45;
  letter-spacing:.06em;
}
.abd-cart-item{
  display:flex;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  overflow:hidden; /* height-collapse removal animates cleanly */
}
.abd-cart-item-thumb{
  width:56px; height:74px;
  object-fit:cover;
  object-position:top center;
  background:#dddad4;
  flex:none;
}
.abd-cart-item-info{ flex:1; min-width:0; }
.abd-cart-item-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.abd-cart-item-meta{
  margin-top:4px;
  font-size:10.5px;
  color:var(--ink);
  opacity:.55;
  display:flex;
  align-items:center;
  gap:6px;
}
.abd-cart-item-meta .dot{
  width:10px; height:10px;
  border-radius:50%;
  border:1px solid rgba(28,27,25,.25);
  display:inline-block;
}
.abd-cart-item-row{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.abd-cart-qty{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--ink);
}
.abd-cart-qty button{
  width:20px; height:20px;
  border:1px solid var(--ink);
  background:none;
  color:var(--ink);
  font-family:inherit;
  font-size:11px;
  line-height:1;
  cursor:pointer;
}
.abd-cart-qty button:hover{ background:var(--ink); color:var(--paper); }
.abd-cart-item-price{
  font-size:11px;
  color:var(--ink);
  letter-spacing:.03em;
}
.abd-cart-item-remove{
  background:none;
  border:none;
  font-family:inherit;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.4;
  cursor:pointer;
  padding:0;
  margin-top:6px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.abd-cart-item-remove:hover{ opacity:.9; }
.abd-drawer-foot{
  padding:18px 26px 24px;
  border-top:1px solid var(--line);
}
.abd-drawer-subtotal{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink);
  margin-bottom:14px;
}
.abd-drawer-actions{ display:flex; flex-direction:column; gap:10px; }
.abd-btn{
  display:block;
  width:100%;
  text-align:center;
  padding:13px 20px;
  font-family:inherit;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:1px solid var(--ink);
  transition:background-color .2s ease, color .2s ease, opacity .2s ease;
}
.abd-btn-primary{ background:var(--ink); color:var(--paper); }
.abd-btn-primary:hover{ opacity:.85; }
.abd-btn-secondary{ background:none; color:var(--ink); }
.abd-btn-secondary:hover{ background:var(--ink); color:var(--paper); }

/* ---------- toasts (detail — rise from BELOW) ---------- */
.abd-toasts{
  position:fixed;
  bottom:28px; left:50%;
  z-index:400;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
}
.abd-toast{
  background:var(--ink);
  color:var(--paper);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:12px 22px;
  white-space:nowrap;
}