/* DIS — shared chrome: nav, footer, product cards, bag drawer, toast.
   Blackout register (tokens.css). Page-specific layout lives in each page. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.kicker{font-family:var(--wm);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim)}

/* ---- nav ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);height:64px;background:rgba(11,11,10,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
  transition:height .4s var(--ease)}
.nav .mono img{height:26px;width:auto}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a,.nav-links button{font-family:var(--wm);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);transition:color .25s}
.nav-links a:hover,.nav-links button:hover{color:var(--ink)}
.nav-links .bagbtn{color:var(--ink)}
.nav-links .bagbtn em{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  border-radius:50%;background:var(--ink);color:var(--bg);font-size:10px;letter-spacing:0;margin-left:7px;padding:0 4px}
@media(max-width:760px){.nav-links{gap:18px}.nav-links a.hidem{display:none}}

/* ---- product card ---- */
.card{position:relative;display:block}
.card .ph{position:relative;overflow:hidden;background:var(--studio);aspect-ratio:4/5}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .5s var(--ease)}
.card .ph img.alt{position:absolute;inset:0;opacity:0}
.card:hover .ph img.main{transform:scale(1.035)}
.card:hover .ph img.alt{opacity:1}
.card .badge{position:absolute;top:10px;left:10px;font-family:var(--wm);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--studio-ink);background:rgba(231,227,220,.85);padding:5px 9px}
.card .add{position:absolute;right:10px;bottom:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,10,.85);color:var(--ink);font-size:16px;line-height:1;opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.card:hover .add,.card .add:focus{opacity:1;transform:none}
@media(hover:none){.card .add{opacity:1;transform:none}}
.card .meta{padding:14px 2px 0}
.card .nm{font-family:var(--wm);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.card .cw{font-size:12px;color:var(--ink-dim);margin-top:3px}
.card .pr{font-family:var(--display);font-style:italic;font-size:15px;margin-top:5px;color:var(--ink-2)}

/* ---- section head + rails ---- */
.shead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.shead h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.2vw,40px)}
.shead h2 em{font-style:italic}
.shead .all{font-family:var(--wm);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .25s}
.shead .all:hover{color:var(--ink)}
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.rail{grid-template-columns:repeat(2,1fr)}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft);margin-top:var(--section);background:var(--bg-2)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:70px 0 50px}
@media(max-width:900px){.ft-top{grid-template-columns:1fr 1fr}}
.ft-top .mono img{height:40px;width:auto;margin-bottom:18px}
.ft-top p{font-size:13px;line-height:1.7;color:var(--ink-dim);max-width:280px}
.ft-top h4{font-family:var(--wm);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:16px}
.ft-top li{list-style:none;margin-bottom:10px}
.ft-top li a{font-size:13px;color:var(--ink-2);transition:color .25s}
.ft-top li a:hover{color:var(--ink)}
.ft-wm{padding:0 0 26px;overflow:hidden}
.ft-wm img{width:100%;max-width:880px;margin:0 auto;opacity:.9}
.ft-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid var(--line-soft);
  font-family:var(--wm);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim)}

/* ---- bag drawer ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .35s;z-index:70}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);background:var(--bg-2);border-left:1px solid var(--line-soft);
  transform:translateX(101%);transition:transform .45s var(--ease);z-index:71;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line-soft)}
.dr-head h3{font-family:var(--wm);font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.dr-head button{font-size:20px;color:var(--ink-dim)}
.dr-items{flex:1;overflow-y:auto;padding:10px 26px}
.dr-it{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.dr-it img{width:76px;height:95px;object-fit:cover;background:var(--studio)}
.dr-it .n{font-family:var(--wm);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.dr-it .s{font-size:12px;color:var(--ink-dim);margin:4px 0 10px}
.dr-it .q{display:flex;align-items:center;gap:12px}
.dr-it .q button{width:24px;height:24px;border:1px solid var(--line);color:var(--ink-2);font-size:13px}
.dr-it .p{font-family:var(--display);font-style:italic;font-size:14px;color:var(--ink-2)}
.dr-empty{padding:40px 0;color:var(--ink-dim);font-size:13px;text-align:center}
.dr-foot{padding:20px 26px 28px;border-top:1px solid var(--line-soft)}
.dr-tot{display:flex;justify-content:space-between;font-family:var(--wm);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.dr-tot em{font-family:var(--display);font-style:italic;font-size:16px;letter-spacing:0}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;background:var(--ink);color:var(--bg);
  font-family:var(--wm);font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:opacity .25s}
.btn:hover{opacity:.85}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.dr-note{margin-top:12px;font-size:11px;color:var(--ink-dim);text-align:center;letter-spacing:.06em}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--ink);color:var(--bg);
  font-family:var(--wm);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:14px 26px;z-index:80;
  transition:transform .45s var(--ease),visibility .45s;visibility:hidden}
.toast.on{visibility:visible}
.toast.on{transform:translate(-50%,0)}

/* ---- reveal ---- */
.rv{opacity:1;transform:none}
.armed .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.armed .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.armed .rv{opacity:1;transform:none;transition:none}}