/* ─── product detail page ─────────────────────────────────────────── */
.product {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 32px 24px;
}

/* the drive parks flush at the very bottom — keep the tail tight so the
   final frame is the ladder card + footer, not a void (the global .status
   margin of 70px is meant for the hero page) */
.status { margin-top: 12px; }

.crumbs {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 26px;
}
.crumbs span { margin: 0 8px; color: var(--ink-faint); }
.crumbs b { color: var(--green); font-weight: 600; }

/* ─── head: identity + metrics ────────────────────────────────────── */
.head {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: stretch;
}

.id-card, .metrics, .card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.35),
              0 0 26px rgba(255,255,255,0.028);
}

.id-card { display: flex; gap: 24px; padding: 26px; }
.hero-img { width: 148px; height: 148px; border-radius: 14px; flex: none; }
.id-text h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; }
.id-desc { margin-top: 10px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.placeholder-note { color: var(--ink-faint); font-style: italic; font-size: 12.5px; }

.vfm-line { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.grade.big { font-size: 14px; padding: 5px 12px; }
.vfm-tag { font-family: var(--mono); font-size: 11.5px; color: var(--green); letter-spacing: 0.05em; }
.vfm-rank { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }

.pct-bar {
  position: relative; margin-top: 14px; height: 4px; max-width: 380px;
  background: rgba(255,255,255,0.07); border-radius: 2px;
}
.pct-fill {
  position: absolute; inset: 0 5% 0 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent 40%, rgba(52,211,153,0.55));
  transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.3,.7,.3,1) .3s;
}
.in .pct-fill { transform: scaleX(1); }
.pct-marker {
  position: absolute; top: -4px; right: 5%; width: 2.5px; height: 12px;
  background: var(--green); border-radius: 2px;
  box-shadow: 0 0 10px rgba(52,211,153,0.7);
}

.metrics { display: flex; flex-direction: column; padding: 22px; gap: 16px; }
.m-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; color: var(--ink-faint); display: block; }
.m-big { font-family: var(--mono); font-size: 34px; font-weight: 700; display: block; margin-top: 4px; }
.m-store { font-size: 12.5px; color: var(--ink-dim); }
.m-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.m-cell {
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.m-val { font-family: var(--mono); font-size: 16px; font-weight: 600; }
.m-key { font-size: 11px; color: var(--ink-faint); }
.signal {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(52,211,153,0.3); border-radius: 12px;
  background: rgba(52,211,153,0.06);
  padding: 12px 14px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
}
.signal b { color: var(--green); font-weight: 600; }
.sig-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
  animation: pulse 2.4s infinite;
}

/* ─── generic card ────────────────────────────────────────────────── */
.card { margin-top: 18px; padding: 22px 26px; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.card-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; color: var(--ink-dim); }
.card-sub { font-size: 12px; color: var(--ink-faint); }

/* ─── chart ───────────────────────────────────────────────────────── */
.tf-chips { display: flex; gap: 6px; }
.tf {
  background: none; border: 1px solid var(--line-soft); border-radius: 8px;
  color: var(--ink-faint); font-family: var(--mono); font-size: 11px;
  padding: 4px 10px; cursor: pointer; transition: all .2s;
}
.tf.active { color: var(--green); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.08); }
.tf:hover { color: var(--ink); }

.chart { width: 100%; height: auto; display: block; }
.grid line { stroke: rgba(255,255,255,0.06); }
.grid text, .xlab text { fill: var(--ink-faint); font-family: var(--mono); }
.fc-lab { fill: var(--green); }
.today-line { stroke: rgba(255,255,255,0.14); stroke-dasharray: 3 4; }
.today-lab { fill: var(--ink-faint); font-family: var(--mono); letter-spacing: 0.08em; }

.hist {
  stroke: #cfd8d4; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.band { fill: rgba(52,211,153,0.08); opacity: 0; transition: opacity .8s ease .2s; }
.chart-card.in .band { opacity: 1; }
.fc {
  stroke: var(--green); stroke-width: 2; stroke-dasharray: 6 6;
  opacity: 0; transition: opacity .7s ease .35s;
}
.chart-card.in .fc { opacity: 1; }
.sale-dot { fill: var(--green); opacity: 0; transition: opacity .4s; }
.chart-card.in .sale-dot { opacity: 1; }
.chart-card.in .sale-dot:nth-child(1) { transition-delay: .5s; }
.chart-card.in .sale-dot:nth-child(2) { transition-delay: .7s; }
.chart-card.in .sale-dot:nth-child(3) { transition-delay: .9s; }
.sale-lab { fill: var(--ink-faint); font-family: var(--mono); opacity: 0; transition: opacity .5s 1s; }
.chart-card.in .sale-lab { opacity: 1; }
.now-dot { fill: #fff; opacity: 0; transition: opacity .4s .4s; }
.chart-card.in .now-dot { opacity: 1; }

.pred { opacity: 0; transition: opacity .6s ease .9s; }
.chart-card.in .pred { opacity: 1; }
.pred-dot { fill: var(--green); }
.pred-pulse {
  fill: none; stroke: var(--green); stroke-width: 1.5;
  transform-origin: 690px 220px;
  animation: pred-ring 2.2s ease-out infinite;
}
@keyframes pred-ring {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pred-lab { fill: var(--green); font-family: var(--mono); font-weight: 600; }
.pred-price { fill: var(--ink-dim); font-family: var(--mono); }

.chart-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); }

/* ─── audit + availability ────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo .card { margin-top: 18px; }

.audit-log { display: flex; flex-direction: column; gap: 10px; }
.alog {
  font-family: var(--mono); font-size: 13px; color: var(--ink-dim);
  opacity: 0; transform: translateX(-8px);
}
.audit.in .alog {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s ease;
}
.audit.in .alog:nth-child(1) { transition-delay: .15s; }
.audit.in .alog:nth-child(2) { transition-delay: .4s; }
.audit.in .alog:nth-child(3) { transition-delay: .65s; }
.audit.in .alog:nth-child(4) { transition-delay: .9s; }
.audit.in .alog:nth-child(5) { transition-delay: 1.15s; }
.audit.in .alog:nth-child(6) { transition-delay: 1.4s; }
.audit.in .alog:nth-child(7) { transition-delay: 1.65s; }
.audit.in .alog:nth-child(8) { transition-delay: 2s; }
.alog.total { color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line-soft); }
.alog b { color: var(--green); }

.v-rows { display: flex; flex-direction: column; }
.v-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 10px;
  transition: background 0.12s, border-color 0.12s;
  border: 1px solid transparent;
}
.v-row.scan { background: rgba(255,255,255,0.06); }
.v-row.best { border: 1px solid rgba(52,211,153,0.25); }
.v-row.best { background: rgba(52,211,153,0.07); }
.v-row.out { opacity: 0.45; }
.v-chip {
  font-family: var(--mono); font-size: 10px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px;
}
.v-name { font-size: 14px; flex: 1; }
.v-price { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.v-row.best .v-price { color: var(--green); }
.v-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-dim); width: 128px; justify-content: flex-end;
}
.v-status i { width: 6px; height: 6px; border-radius: 50%; }
.v-status.ok i { background: var(--green); }
.v-status.low i { background: #d5c896; }
.v-status.off i { background: transparent; border: 1px solid var(--ink-faint); }

.order.small {
  margin-top: 14px; width: 100%;
  padding: 11px 0; font-size: 14px; border-radius: 10px;
}

/* ─── competitors ─────────────────────────────────────────────────── */
.comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.comp {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px;
  transition: border-color .2s, transform .2s;
}
.comp:hover { border-color: var(--line); transform: translateY(-2px); }
.comp.best {
  border-color: rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.05);
  box-shadow: 0 0 18px rgba(52,211,153,0.12);
}
.comp-img { width: 56px; height: 56px; border-radius: 10px; }
.comp-brand { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.comp-price { font-family: var(--mono); font-size: 14px; }
.comp.best .comp-price { color: var(--green); }
.comp-note { font-size: 11.5px; color: var(--ink-faint); }
.comp-flag { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
.pos-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.pos-tag.pick { color: var(--green); }
.g-d { color: #c98a6a; background: rgba(201, 138, 106, 0.12); }

.tagline.in-card { margin-top: 18px; text-align: center; opacity: 1; transform: none; }

/* ─── responsive ──────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .head { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr 1fr; }
  .id-card { flex-direction: column; }
}

/* ─── finale: the hero's intro logo replayed as the closing shot ──── */
/* sits UNDER the iris (z 70): the curtain closes over the veil and the
   300px window it leaves frames the logo — halo, orbit and wordmark all
   fit inside the square. Keyframes (intro-fade/appear/draw) come from
   style.css, which this page already loads. */
.logo-finale {
  position: fixed; inset: 0; z-index: 69;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px;
  background: radial-gradient(circle at 50% 46%, #071009, #050505 72%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.logo-finale.on { opacity: 1; }
.fin-halo {
  position: absolute;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.13), transparent 68%);
  opacity: 0;
  animation: intro-fade 1.6s ease-out 0.3s forwards;
}
.fin-logo {
  width: 200px; height: 200px;
  opacity: 0;
  animation: intro-appear 0.9s ease-out 0.12s forwards;
}
.fin-draw {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: intro-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}
.fin-sat { opacity: 0; animation: intro-fade 0.5s ease-out 1.3s forwards; }
.fin-word {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: 0.5em; margin-left: 0.5em; /* recentre the tracking */
  color: var(--ink);
  opacity: 0;
  animation: intro-fade 0.9s ease-out 1.15s forwards;
}

/* softer close: the stock iris (style.css) slams shut in 0.45s — here the
   window glides onto the logo and the green frame breathes in afterwards */
.iris {
  transition: width 1.05s cubic-bezier(0.55, 0, 0.15, 1),
              height 1.05s cubic-bezier(0.55, 0, 0.15, 1);
}
.iris::after { transition: opacity 0.5s 0.75s; }