/* ============================================================
   detail.css: plugin pages (/shop/<slug>/), the shop index (/shop/) and the manuals hub (/manuals/).
   Generated by shop/build-shop.mjs. Loads after styles.css + shop.css. Bump ?v= (DETAIL_CSS in
   build-shop.mjs) on every change. Nothing here waits on JS: every section is visible without it.
   ============================================================ */

.dpage main { max-width: 1180px; margin: 0 auto; padding: clamp(4.6rem, 7vw, 6rem) var(--gutter) 0; }
/* styles.css pads every <section> for the old one-page layout; these pages space their own */
.dpage main section { padding: 0; max-width: none; margin: 0; }

.kicker {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lime); font-weight: 700; line-height: 1.3;
}
.lead { color: #c9c9c2; max-width: 62ch; margin: -0.4rem 0 1.2rem; }
.fine { color: var(--muted-2); font-size: 0.82rem; margin-top: 0.8rem; }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.price b { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.02em; }
.price s { color: var(--muted); font-size: 1.05rem; }
.newpill {
  display: inline-block; margin-left: 0.5rem; vertical-align: middle; position: relative; top: -0.1em;
  background: var(--lime); color: #0a0a0a; border-radius: 100px; padding: 0.3em 0.75em;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1;
}

/* ---------- breadcrumb ---------- */
.crumb { font-size: 0.85rem; color: var(--muted); padding: 0.4rem 0 1rem; }
.crumb a { color: var(--muted); transition: color .25s var(--ease); }
.crumb a:hover { color: var(--lime); }
.crumb [aria-current] { color: var(--text); }

/* ---------- hero ---------- */
.dpage main .dhero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem);
}
.dmedia {
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(198, 244, 50, 0.32);
}
.dmedia img, .dmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* square art (no video frame yet) sits whole inside the 16:9 frame instead of being cropped */
.dmedia.sq { background: radial-gradient(ellipse at center, #1d1d22, #0a0a0b 70%); }
.dmedia.sq img { object-fit: contain; padding: 4%; }
.dcopy { min-width: 0; }
.dtitle { display: flex; align-items: center; gap: 0.9rem; margin: 0.5rem 0 0.8rem; }
.dicon { flex: none; width: 58px; height: 58px; border-radius: 14px; object-fit: cover; }
.detail-name {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
}
.detail-name .pre { display: block; font-size: 0.38em; letter-spacing: -0.01em; line-height: 1.1; color: var(--muted); margin-bottom: 0.15em; }
.dtag { color: #c9c9c2; font-size: 1.05rem; max-width: 46ch; margin-bottom: 1rem; }
.bundle { color: var(--muted); font-size: 0.95rem; margin: -0.3rem 0 0.9rem; }
.bundle span { color: var(--lime); font-weight: 700; }
.bundle a { color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dhero .price { margin-bottom: 1rem; }
.dcta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dcta .btn { padding: 0.8rem 1.35rem; font-size: 0.98rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.chips li { font-size: 0.8rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem; color: #c9c9c2; }
.soon-tag {
  display: inline-block; color: var(--lime); border: 1px solid var(--lime); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.8rem;
}
.soon-lead { color: var(--muted); margin-bottom: 0.8rem; max-width: 46ch; }
.signup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.signup input[type="email"] {
  flex: 1 1 220px; max-width: 340px; padding: 0.8rem 1.1rem; border-radius: 100px;
  background: var(--bg); border: 1px solid #3a3a40; color: var(--text); font: inherit; font-size: 0.95rem;
}
.signup input[type="email"]:focus { outline: none; border-color: var(--lime); }
.signup .btn { padding: 0.8rem 1.3rem; font-size: 0.95rem; }

/* ---------- section shell ---------- */
.dpage main .dsec { padding: clamp(2.2rem, 5vw, 3.6rem) 0; border-top: 1px solid var(--line); }
.dh {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0.35rem 0 1.2rem;
}
.dh3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.sblock + .sblock { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- see it move ---------- */
.looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.lk { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #000; }
.lk video, .lk img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.lk figcaption {
  position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.15rem 0.55rem; border-radius: 5px;
  background: rgba(14, 14, 16, 0.84); font-size: 0.78rem; font-weight: 700;
}
.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.showcase-item { margin: 0; }
.showcase-item img, .showcase-item video {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev);
}
.showcase-item figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.92rem; line-height: 1.45; max-width: 62ch; }
.showcase-item figcaption strong { color: var(--text); font-weight: 600; }
.showcase-wide { grid-column: 1 / -1; }
.showcase-narrow { max-width: 360px; justify-self: center; }

/* ---------- what you get ---------- */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.ft { background: var(--bg-elev); border-radius: 12px; padding: 1.1rem 1.15rem 1.2rem; }
.ft .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--lime); }
.ft h3 { font-size: 1rem; font-weight: 700; margin: 0.6rem 0 0.3rem; }
.ft p { color: var(--muted); font-size: 0.9rem; }
.dbundle {
  display: flex; align-items: center; gap: 1rem; max-width: 640px; margin-bottom: 1.2rem;
  padding: 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev);
  transition: border-color .25s var(--ease);
}
.dbundle:hover { border-color: var(--lime); }
.dbundle img { width: 4.5rem; height: 4.5rem; flex: none; border-radius: 10px; object-fit: cover; }
.dbundle span { color: var(--muted); font-size: 0.92rem; }
.dbundle b { display: block; color: var(--lime); font-weight: 600; }
.more { margin-top: 1.2rem; max-width: 70ch; }
.more summary { cursor: pointer; color: var(--lime); font-weight: 600; width: fit-content; }
.more p, .prose p { color: #c9c9c2; margin-top: 0.8rem; }
.prose { max-width: 70ch; }

/* ---------- walkthrough ---------- */
.vid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.vid.has-chap { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.yt.sq img { object-fit: contain; padding: 4%; background: radial-gradient(ellipse at center, #1d1d22, #0a0a0b 70%); }
.yt-play {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, 0.25); border: 0; transition: background-color .3s var(--ease);
}
.yt-play:hover { background: rgba(0, 0, 0, 0.1); }
.yt-play span {
  width: 68px; height: 68px; border-radius: 50%; background: var(--lime); position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.yt-play span::after {
  content: ""; position: absolute; left: 27px; top: 22px;
  border-left: 20px solid #0a0a0a; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.yt-play:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; }
.chap { list-style: none; }
.chap li { border-bottom: 1px solid var(--line); }
.chap button {
  display: flex; gap: 0.8rem; width: 100%; padding: 0.65rem 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: #c9c9c2; font: inherit; font-size: 0.92rem;
}
.chap button:hover { color: var(--text); }
.chap button span { color: var(--lime); font-variant-numeric: tabular-nums; min-width: 2.6rem; }

/* ---------- gallery + details ---------- */
.wide-shots { display: grid; gap: 1rem; }
.wide-shots img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }
.two.solo { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
.shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
/* the real inspector, cropped to its top: the full grab is one click away */
.shot img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; object-position: top; }
.reqs { font-size: 0.92rem; }
.req { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.req span:first-child { color: var(--muted); flex: none; }
.req span:last-child { text-align: right; }
.links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }

/* ---------- faq (reuses .faq-list / .faq-item from shop.css) ---------- */
.dsec .faq-list { max-width: 820px; }
.dsec .faq-answer a { color: var(--lime); font-weight: 600; }

/* ---------- pairs ---------- */
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.xc { display: block; background: var(--bg-elev); border: 1px solid transparent; border-radius: 12px; overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.xc:hover { border-color: var(--lime); transform: translateY(-3px); }
.xc img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.xc-b { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.7rem 0.85rem; font-size: 0.92rem; }
.xc-b span { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }

/* ---------- final buy block ---------- */
.dpage main .final { text-align: center; background: radial-gradient(ellipse at center, rgba(198, 244, 50, 0.1), transparent 70%); }
.final .lead { margin: -0.4rem auto 1.2rem; }
.final .price, .final .dcta { justify-content: center; }
.final .price { margin-bottom: 1rem; }

/* ---------- sticky buy bar (detail.js shows it once the hero is off screen) ---------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(14, 14, 16, 0.94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.buybar.show { transform: none; }
.buybar[hidden] { display: none; }
.buybar-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem var(--gutter); }
.buybar img { flex: none; width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.bb-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-name small { display: block; color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.buybar .price b { font-size: 1.3rem; }
.buybar .price s { font-size: 0.85rem; }
.bb-cta { display: flex; gap: 0.5rem; }
.bb-cta .btn { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
/* leave room so the bar never covers the footer links */
body.has-buybar .footer { padding-bottom: 5.5rem; }

/* ---------- shop index + manuals hub ---------- */
.index-head { padding: 1rem 0 1.6rem; }
.index-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.4rem, 5vw, 3.8rem); margin: 0.4rem 0 0.9rem; }
.index-head .lead { margin: 0 0 1.4rem; }
.index-head .shop-search { max-width: 420px; }
.dpage main .shop-group, .dpage main .mgroup { padding: clamp(1.6rem, 3.5vw, 2.4rem) 0; border-top: 1px solid var(--line); }
.group-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.02em; margin-bottom: 1.1rem; }
.group-title span { color: var(--muted-2); font-weight: 600; font-size: 0.6em; vertical-align: middle; margin-left: 0.3rem; }
.shop-group[hidden] { display: none; }
.shop-card .price b { font-size: 1.15rem; }
.shop-card .price s { font-size: 0.85rem; }
.shop-index .shop-faq-link { display: flex; width: fit-content; margin: 1.5rem 0 3rem; }
.shop-index .shop-tool-link { margin-bottom: 0; }
.mlist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.mitem { display: flex; gap: 1rem; align-items: center; background: var(--bg-elev); border-radius: 12px; padding: 0.8rem; }
.mitem img { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.mitem h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.5rem; }
.mitem h3 a:hover { color: var(--lime); }
.mlinks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dpage main .mgroup:last-child { margin-bottom: 3rem; }

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone: media on top, then name, price and the button, all above the fold ---------- */
@media (max-width: 760px) {
  .dpage main { padding-top: 4.4rem; }
  .crumb { padding: 0.2rem 0 0.7rem; font-size: 0.8rem; }
  .dpage main .dhero { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding-bottom: 1.8rem; }
  .dmedia { border-radius: 12px; }
  .dtitle { margin: 0.3rem 0 0.5rem; gap: 0.7rem; }
  .dicon { width: 44px; height: 44px; border-radius: 11px; }
  .detail-name { font-size: 2.3rem; }
  .dtag { font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.7rem; }
  .bundle { font-size: 0.88rem; margin-bottom: 0.6rem; }
  .dhero .price { margin-bottom: 0.7rem; }
  .price b { font-size: 1.75rem; }
  .dcta .btn { padding: 0.72rem 1.15rem; }
  .fine { margin-top: 0.6rem; }
  .chips { margin-top: 0.8rem; }
  .feats { grid-template-columns: minmax(0, 1fr); }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .vid.has-chap, .two { grid-template-columns: minmax(0, 1fr); }
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs .xc:nth-child(3) { display: none; }
  .xc-b { flex-direction: column; gap: 0.15rem; }
  .mlist { grid-template-columns: minmax(0, 1fr); }
  .hide-m { display: none; }
  .buybar-in { padding: 0.55rem 1rem; gap: 0.7rem; }
  .buybar .price s { display: none; }
  .bb-name small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
  .xc:hover { transform: none; }
}