/* ============================================================
   One piece, on a page of its own.

   Deliberately close to the quick-look panel in shop.css, because
   a customer who clicks through from the grid should feel they are
   looking at the same thing, not a different shop. The tokens come
   from silver.css; nothing here invents a colour.
   ============================================================ */

.piece-page{ background:var(--ink); color:var(--silver); font-family:var(--sans) }

.pc-wrap{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--hh) + 2rem) clamp(1rem,4vw,2.5rem) 5rem;
}

/* ---- breadcrumb ---------------------------------------------------------- */
.pc-crumb{ font-size:.82rem; color:var(--mute); margin-bottom:clamp(1.2rem,3vw,2rem) }
.pc-crumb a{ color:var(--mute); text-decoration:none; border-bottom:1px solid transparent }
.pc-crumb a:hover{ color:var(--silver-dim); border-bottom-color:var(--line) }
.pc-crumb span{ margin:0 .35rem }
.pc-crumb [aria-current]{ color:var(--silver-dim); margin:0 }

/* ---- the two columns ----------------------------------------------------- */
.pc-grid{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr }
@media (min-width:880px){ .pc-grid{ grid-template-columns:1.05fr .95fr; align-items:start } }

.pc-media{ display:grid; gap:.5rem; grid-template-columns:1fr 1fr }
.pc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio:4/5; background:var(--ink-soft); border:1px solid var(--line-soft);
}
/* A single photograph gets the whole width rather than sitting in half of it. */
.pc-media img:only-child{ grid-column:1/-1; aspect-ratio:1/1 }
.pc-media .ph{
  grid-column:1/-1; min-height:22rem; display:grid; place-items:center;
  background:var(--ink-soft); border:1px solid var(--line-soft); color:var(--mute);
}

.pc-body{ display:grid; gap:.9rem; align-content:start }

.pc-type{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
.pc-body h1{
  font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(1.9rem,4vw,2.9rem);
}
.pc-meta{ color:var(--mute); font-size:.92rem }

/* ---- money --------------------------------------------------------------- */
.pc-price{ display:grid; gap:.15rem; font-variant-numeric:tabular-nums; margin-top:.4rem }
.pc-price b{ font-size:1.5rem; font-weight:500 }
.pc-price s{ color:var(--mute); margin-right:.4rem; font-size:1.05rem }
.pc-tax,.pc-live{ font-size:.78rem; color:var(--mute) }
.pc-live{ color:var(--brass) }
.pc-ask{ font-size:1.05rem; color:var(--brass-bright) }

.pc-stock{ font-size:.85rem; color:var(--silver-dim) }
.pc-stock.low{ color:var(--brass-bright) }
.pc-stock.none{ color:var(--mute) }

/* The summary is always whole; the description below it is clamped by
   shop.css (.rich.clamp) until Read more. */
.pc-summary{ color:var(--silver); line-height:1.65; margin-top:.3rem; white-space:pre-line }
.pc-desc{ color:var(--silver-dim); line-height:1.7 }

/* ---- actions ------------------------------------------------------------- */
.pc-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin:.8rem 0 .4rem }
.pc-actions .btn{ flex:1 1 auto; min-width:11rem; text-align:center }
.pc-actions .btn[disabled]{ opacity:.45; cursor:not-allowed }

/* ---- the spec table ------------------------------------------------------ */
.pc-specs{ display:grid; gap:0; border-top:1px solid var(--line); margin-top:.6rem }
.pc-specs > div{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--line-soft);
}
.pc-specs dt{ color:var(--mute); font-size:.82rem }
.pc-specs dd{ color:var(--silver-dim); font-size:.88rem }

/* ---- the page for a slug we do not sell ---------------------------------- */
.pc-missing{ text-align:center; padding-top:calc(var(--hh) + 5rem); display:grid; gap:1rem; justify-items:center }
.pc-missing h1{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,4vw,2.4rem) }
.pc-missing p{ color:var(--mute) }

/* ---- more from the atelier ----------------------------------------------- */
/* Real links, not a carousel. They are here so a crawler arriving at one
   piece can reach the rest; a shopper who has scrolled this far is served
   by the same thing. */
.pc-more{ border-top:1px solid var(--line); margin-top:2.6rem; padding-top:1.4rem }
.pc-more h2{ font-family:var(--serif); font-weight:400; font-size:1.1rem; margin-bottom:.9rem }
.pc-more ul{ list-style:none; display:grid; gap:.1rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)) }
.pc-more li{ padding:.42rem 0; border-bottom:1px solid var(--line-soft) }
.pc-more a{ color:var(--silver-dim); text-decoration:none }
.pc-more a:hover{ color:var(--silver); text-decoration:underline }
.pc-more li span{ color:var(--mute); font-size:.82rem; margin-left:.4rem }
.pc-more > p{ margin-top:1rem; font-size:.88rem }

/* ---- every piece, as a list ---------------------------------------------- */
.pc-index{ padding-top:calc(var(--hh) + 2.4rem); padding-bottom:4rem; max-width:62rem }
.pc-index h1{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,4vw,2.5rem); margin:.4rem 0 .6rem }
.pc-index-group{ margin-top:2rem }
.pc-index-group h2{
  font-family:var(--serif); font-weight:400; font-size:1.05rem; color:var(--mute);
  border-bottom:1px solid var(--line); padding-bottom:.4rem; margin-bottom:.5rem;
}
.pc-index-group ul{ list-style:none; display:grid; gap:.1rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)) }
.pc-index-group li{ padding:.42rem 0; border-bottom:1px solid var(--line-soft) }
.pc-index-group a{ color:var(--silver-dim); text-decoration:none }
.pc-index-group a:hover{ color:var(--silver); text-decoration:underline }
.pc-index-group li span{ color:var(--mute); font-size:.82rem; margin-left:.4rem }