/* item detail — lane-specific only. .mk-hair .mk-edge .mk-btn .mk-chip .mk-rail .mk-card__price belong to
   market/market.css (ART-CSS lane); this file never redefines them.
   Composition remixed from the first-party themebook export components.css .os-ticket/.os-ticket-grid/.os-price/
   .os-placard/.os-facts/.os-prov (SOURCES-server2-kexsio-local.json candidates[3], element "item_detail").
   NOTE: the brief cited "composition sheet 002"; no sheet is numbered in that file — candidates[3] is the cited row.
   Golden ratio plate/stub 61.8 : 38.2. Designed at 390px first; nothing under 12px; targets 44px. */

.mk-item-page main{padding:1.25rem 1rem 6.5rem}
.mk-hd{font:600 .75rem/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .5rem}
.mk-note{font:400 .8rem/1.6 var(--body);color:var(--muted);margin:.4rem 0}
.mk-gone{font:500 1rem/1.6 var(--body);color:var(--ink);display:flex;flex-direction:column;gap:1rem;align-items:flex-start;padding:2.5rem 0}

/* --- the plate : the stub ------------------------------------------------ */
.mk-golden{display:grid;grid-template-columns:1fr;gap:1.5rem;margin:0}
.mk-plate{min-width:0}
.mk-stub{min-width:0}
.mk-shot{margin:0;background:var(--wash);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mk-shot img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain}
.mk-thumbs{display:flex;gap:.5rem;margin:.6rem 0 0;padding:.15rem 0}
.mk-thumbs button{flex:0 0 auto;width:64px;height:64px;min-width:44px;min-height:44px;padding:0;background:var(--wash);
  border:1px solid var(--seam);cursor:pointer;scroll-snap-align:start}
.mk-thumbs button[aria-current="true"]{border-color:var(--gold)}
.mk-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.mk-stub h1{font:600 1.55rem/1.15 var(--display);letter-spacing:.01em;color:var(--ink);margin:.25rem 0 .5rem;overflow-wrap:anywhere}

/* --- buy box ------------------------------------------------------------- */
.mk-buy{padding:1rem 0;margin:.75rem 0 0}
.mk-buy .mk-card__price,.mk-sticky__p{font:500 1.25rem/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);margin:0}
.mk-asof{display:inline-block;margin:.35rem 0 0;color:var(--muted);font-size:.75rem}
.mk-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.mk-acts .mk-btn,.mk-sticky .mk-btn{min-height:44px;min-width:44px}
.mk-out{margin:.8rem 0 0;font:500 .8rem/1.5 var(--body)}
.mk-out a{color:var(--red-ink)}
.mk-out .mk-tag{display:inline-block;margin-left:.45rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.mk-say{margin:.7rem 0 0;font:400 .8rem/1.5 var(--body);color:var(--green-ink)}

/* --- specifics + provenance : the mono grid ------------------------------ */
.mk-specs{width:100%;margin:.25rem 0 0;border-collapse:collapse;font:400 .8rem/1.55 var(--mono);color:var(--ink)}
.mk-specs tr,.mk-specs .mk-row{display:grid;grid-template-columns:38.2% 61.8%;gap:.5rem;
  border-bottom:1px solid var(--seam);padding:.45rem 0}
.mk-specs th,.mk-specs dt{text-align:left;font-weight:400;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.mk-specs td,.mk-specs dd{margin:0;overflow-wrap:anywhere}
.mk-specs a{color:var(--red-ink)}
.mk-prov{margin:1.4rem 0 0}
.mk-prov .mk-hd{color:var(--green-ink)}

/* --- shop card ----------------------------------------------------------- */
.mk-shop{margin:1.4rem 0 0;padding:1rem;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.mk-shopname{margin:0;font:500 .95rem/1.4 var(--body);color:var(--ink)}
.mk-honest{margin:1.6rem 0 0;font-size:.75rem;color:var(--muted);max-width:44ch}

/* --- similar rail -------------------------------------------------------- */
.mk-similar{margin:2.2rem 0 0}
.mk-similar .mk-rail{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 0 .8rem}
.mk-similar a{flex:0 0 46%;max-width:220px;min-width:140px;scroll-snap-align:start;text-decoration:none;color:var(--ink);
  border:1px solid var(--seam);background:var(--panel);transition:border-color var(--m-dur-fast) var(--m-ease-out)}
.mk-similar a:hover,.mk-similar a:focus-visible{border-color:var(--gold)}
.mk-similar img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--wash)}
.mk-similar span{display:block;padding:.5rem .55rem;font:400 .75rem/1.4 var(--body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- sticky bottom bar (Amazon pattern), phone only ---------------------- */
.mk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;gap:.6rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--panel);
  border-top:1px solid var(--seam);transform:translateY(100%);transition:transform var(--m-dur-base) var(--m-ease-out)}
.mk-sticky[data-up]{transform:translateY(0)}
.mk-sticky__p{flex:1 1 auto;font-size:.95rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:640px){.mk-sticky:not([hidden]){display:flex}}

/* --- 390px first, then the golden split ---------------------------------- */
@media (min-width:640px){
  .mk-golden{grid-template-columns:61.8fr 38.2fr;gap:2.2rem;align-items:start}
  .mk-plate{position:sticky;top:1rem}
  .mk-stub h1{font-size:1.9rem}
  .mk-similar a{flex:0 0 22%}
}
@media (prefers-reduced-motion:reduce){
  .mk-sticky,.mk-similar a{transition:none}
}