/* ============================================================
   Maison Lynx — SHOP LAYER
   Inherits every token from base.css. The shop must feel like
   the magazine, not like a store: no cards, no badges, no grid
   of tiles, no shouting buttons.
   ============================================================ */

/* ---------- nav: the bag ---------- */
.bag-btn{
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
  background:none;border:none;cursor:pointer;padding:0;
  transition:color .3s;
}
.bag-btn:hover{color:var(--ink)}
.bag-btn .count{font-family:var(--serif);letter-spacing:0;color:var(--oak)}
#nav:not(.scrolled) .bag-btn{color:var(--ink);text-shadow:0 1px 16px rgba(248,244,236,.9)}
.navlinks{align-items:center}

/* ---------- sub-header for interior pages (no hero) ---------- */
.page-top{padding-top:clamp(8rem,16vh,11rem);padding-bottom:0}
.page-top .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.page-title{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:400;margin:.8rem 0 1.2rem}
.page-lede{color:var(--ink-soft);max-width:44ch}
.crumb{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--warm-grey)}
.crumb a:hover{color:var(--ink)}

/* ============================================================
   CATALOGUE — an editorial index, not a product grid.
   Each row is a line in a register; the image answers on hover.
   ============================================================ */
.page-top + section{padding-top:0}
.cat-group{margin-top:clamp(3rem,8vh,6rem)}
.cat-group:first-child{margin-top:clamp(2.5rem,6vh,4rem)}
.cat-group > .eyebrow{display:block;margin-bottom:1.6rem}

.cat-list{border-top:1px solid var(--hair)}
.row{
  position:relative;display:grid;
  grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.5rem,3.4vh,2.4rem) 0;
  border-bottom:1px solid var(--hair);
  transition:padding-left .5s cubic-bezier(.23,1,.32,1);
}
.row:hover{padding-left:.8rem}
.row .r-num{font-family:var(--serif);font-size:.85rem;color:var(--oak)}
.row .r-name{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;font-weight:400}
.row .r-type{color:var(--warm-grey);font-size:.9rem}
.row .r-price{font-family:var(--serif);font-size:1.15rem;white-space:nowrap;color:var(--ink)}

/* the hovering preview — an editorial flourish, desktop only */
.row .r-peek{
  position:absolute;right:clamp(6rem,16vw,14rem);top:50%;
  width:clamp(150px,15vw,230px);aspect-ratio:4/5;
  transform:translateY(-50%) scale(.94);
  opacity:0;pointer-events:none;z-index:3;
  transition:opacity .45s ease, transform .55s cubic-bezier(.23,1,.32,1);
  box-shadow:0 30px 60px -30px rgba(42,38,33,.35);
}
.row:hover .r-peek{opacity:1;transform:translateY(-50%) scale(1)}
.row .r-peek img{width:100%;height:100%;object-fit:cover}
@media(hover:none),(max-width:900px){
  .row .r-peek{display:none}
}

/* mobile: the register becomes stacked spreads with the image present */
@media(max-width:900px){
  .row{grid-template-columns:1fr auto;gap:.4rem 1.5rem;padding:2rem 0}
  .row .r-num{grid-column:1/-1;margin-bottom:.4rem}
  .row .r-name{grid-column:1}
  .row .r-price{grid-column:2;align-self:center}
  .row .r-type{grid-column:1/-1}
  .row .r-shot{display:block;width:100%;aspect-ratio:3/2;margin-top:1.2rem;grid-column:1/-1}
  .row .r-shot img{width:100%;height:100%;object-fit:cover}
}
.row .r-shot{display:none}
.row .r-link{position:absolute;inset:0;z-index:2}

/* ============================================================
   PRODUCT PAGE — a magazine spread with a price in it
   ============================================================ */
.pdp{padding-top:clamp(7rem,14vh,10rem)}
.pdp-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,6vw,7rem);align-items:start;
}
.pdp-art{position:sticky;top:6rem;aspect-ratio:4/5}
.pdp-art img{width:100%;height:100%;object-fit:cover}
.pdp-side{padding-top:clamp(0rem,4vh,2.5rem)}
.pdp-side h1{font-size:clamp(2.4rem,4.6vw,3.8rem);font-weight:400;margin:.5rem 0 1rem}
.pdp-tag{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.4;
  color:var(--ink-soft);max-width:32ch;margin-bottom:2.4rem;
}
.pdp-buy{
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  padding:1.6rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.pdp-price{font-family:var(--serif);font-size:1.6rem;letter-spacing:-.01em}
.add-btn{
  font-family:var(--sans);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  background:none;border:none;border-bottom:1px solid var(--ink);
  padding:0 0 .35em;cursor:pointer;color:var(--ink);
  transition:opacity .4s, letter-spacing .4s, transform .16s cubic-bezier(.23,1,.32,1);
}
.add-btn:hover{opacity:.55;letter-spacing:.2em}
.add-btn:active{transform:scale(.97)}
.add-btn.added{opacity:.5;letter-spacing:.2em}
.pdp-ship{font-size:.82rem;color:var(--warm-grey);margin-top:1.2rem}

.pdp-body{margin-top:clamp(2.5rem,6vh,4rem);max-width:40ch}
.pdp-body p{margin-bottom:1.4rem;color:var(--ink-soft)}
.pdp-body p:first-child{color:var(--ink)}

.pdp-notes{margin-top:clamp(2.5rem,6vh,4rem);border-top:1px solid var(--hair)}
.note{padding:1.5rem 0;border-bottom:1px solid var(--hair)}
.note h4{
  font-family:var(--sans);font-weight:500;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--warm-grey);
  margin-bottom:.7rem;
}
.note p{color:var(--ink-soft);max-width:44ch}
.note.pending p{color:var(--warm-grey);font-style:italic}

@media(max-width:900px){
  .pdp-grid{grid-template-columns:1fr;gap:2.5rem}
  .pdp-art{position:static;aspect-ratio:3/2}
  .pdp-body,.note p{max-width:none}
}

/* next-piece footer nav */
.pdp-next{border-top:1px solid var(--hair);margin-top:clamp(4rem,9vh,7rem);padding-top:clamp(2rem,5vh,3.5rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.pdp-next .np-label{display:block;margin-bottom:.6rem}
.pdp-next h3{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400}

/* ============================================================
   BAG — a drawer that behaves like paper, not like a modal
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(42,38,33,.28);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
  backdrop-filter:blur(2px);
}
.scrim.open{opacity:1;pointer-events:auto}

.bag{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(30rem,100vw);background:var(--paper);
  border-left:1px solid var(--hair);
  transform:translateX(101%);
  transition:transform .6s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;
}
.bag.open{transform:none}
.bag-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.6rem clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--hair);
}
.bag-head h2{font-size:1.35rem;font-weight:400}
.bag-close{background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink-soft);
  transition:color .3s, transform .3s}
.bag-close:hover{color:var(--ink);transform:rotate(90deg)}

.bag-items{flex:1;overflow-y:auto;padding:clamp(1.4rem,3vw,2.2rem)}
.bag-empty{color:var(--warm-grey);font-family:var(--serif);font-style:italic;font-size:1.1rem;margin-top:2rem}
.bag-item{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1.1rem;
  padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--hair)}
.bag-item:last-child{border-bottom:none;margin-bottom:0}
.bag-item .bi-art{aspect-ratio:4/5;background:var(--cream)}
.bag-item .bi-art img{width:100%;height:100%;object-fit:cover}
.bag-item h4{font-family:var(--serif);font-size:1.05rem;font-weight:400;margin-bottom:.2rem}
.bag-item .bi-type{font-size:.78rem;color:var(--warm-grey);margin-bottom:.6rem}
.bag-item .bi-price{font-family:var(--serif);font-size:1rem;white-space:nowrap}
.qty{display:flex;align-items:center;gap:.7rem}
.qty button{background:none;border:none;cursor:pointer;color:var(--warm-grey);font-size:1rem;line-height:1;
  padding:.15rem .25rem;transition:color .25s}
.qty button:hover{color:var(--ink)}
.qty span{font-family:var(--serif);font-size:.95rem;min-width:1ch;text-align:center}

.bag-foot{padding:clamp(1.4rem,3vw,2.2rem);border-top:1px solid var(--hair);background:var(--cream)}
.bag-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.bag-total .t-label{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--warm-grey)}
.bag-total .t-sum{font-family:var(--serif);font-size:1.5rem}
.bag-give{font-size:.8rem;color:var(--ink-soft);margin-bottom:1.6rem;line-height:1.5}
.bag-checkout{
  display:block;width:100%;text-align:center;
  background:var(--ink);color:var(--paper);border:none;cursor:pointer;
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding:1.1rem;
  transition:opacity .35s, transform .16s cubic-bezier(.23,1,.32,1);
}
.bag-checkout:hover{opacity:.82}
.bag-checkout:active{transform:scale(.99)}
.bag-checkout[disabled]{opacity:.3;cursor:not-allowed}

/* toast */
.toast{
  position:fixed;left:50%;bottom:2.5rem;z-index:100;
  transform:translate(-50%,1.5rem);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.9rem 1.6rem;transition:opacity .4s, transform .5s cubic-bezier(.23,1,.32,1);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout{padding-top:clamp(7rem,14vh,10rem)}
.co-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,7vw,7rem);align-items:start}
.co-form fieldset{border:none;margin-bottom:clamp(2rem,5vh,3rem)}
.co-form legend{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--warm-grey);margin-bottom:1.4rem}
.field{margin-bottom:1.3rem}
.field label{display:block;font-size:.78rem;color:var(--warm-grey);margin-bottom:.35rem}
.field input,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--hair);
  padding:.6rem .1rem;font-family:var(--sans);font-size:1rem;color:var(--ink);
}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--oak)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.co-summary{background:var(--cream);padding:clamp(1.6rem,3vw,2.4rem);position:sticky;top:6rem}
.co-summary h3{font-size:1.4rem;font-weight:400;margin-bottom:1.6rem}
.co-line{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--hair);font-size:.95rem}
.co-line .cl-name{color:var(--ink-soft)}
.co-line .cl-price{font-family:var(--serif);white-space:nowrap}
.co-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.4rem}
.co-sum .t-sum{font-family:var(--serif);font-size:1.6rem}
.co-pending{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  font-size:.8rem;color:var(--warm-grey);line-height:1.6;
}
@media(max-width:900px){
  .co-grid{grid-template-columns:1fr}
  .co-summary{position:static;order:-1}
  .field-row{grid-template-columns:1fr}
}