/* ==========================================================================
   Glacier — product detail page.
   Loaded on top of tokens/base/components, only on product.html.
   ========================================================================== */

.product { padding-block: var(--s-7) var(--s-8); }

/* --------------------------------------------------------------- back --- */
.back-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: var(--fs-small); font-weight: 500;
  color: var(--muted);
  transition: color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}
.back-link .i { transform: rotate(180deg); }
.back-link:hover { color: var(--cyan); gap: var(--s-3); }

/* --------------------------------------------------------------- grid --- */
.product-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); align-items: start;
}
@media (max-width: 900px) { .product-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* -------------------------------------------------------------- media --- */
.product-media {
  position: relative;
  border-radius: var(--r-xl);
  aspect-ratio: 16 / 10;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--scrim) 100%);
  pointer-events: none;
}
.product-media .mod-tag { top: var(--s-4); left: var(--s-4); }

/* --------------------------------------------------------------- info --- */
.product-info > * + * { margin-top: var(--s-4); }
.product-info .eyebrow { margin-bottom: 0; }

.product-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  letter-spacing: var(--tr-display); line-height: 1.02;
}

.product-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-data); color: var(--faint);
}
.product-meta .m-rating { display: inline-flex; align-items: center; gap: 5px; color: var(--ice); }
.product-meta .m-rating .i { color: var(--warn); fill: currentColor; stroke: none; }
.product-meta .m-dl { display: inline-flex; align-items: center; gap: var(--s-2); }
.product-meta .m-dl b { color: var(--muted); font-weight: 600; }

.product-lead { color: var(--muted); font-size: var(--fs-lead); max-width: 34rem; }

/* -------------------------------------------------------------- specs --- */
.spec-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.spec {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--wash-cyan);
  border: var(--hairline) solid var(--line);
}
.spec span {
  display: block; font-size: var(--fs-micro); letter-spacing: var(--tr-micro);
  text-transform: uppercase; color: var(--faint);
}
.spec b {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 600; color: var(--text);
}

/* ---------------------------------------------------- download panel --- */
.download-panel {
  padding: var(--s-5);
  border-radius: var(--r-xl);
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--line));
  box-shadow: var(--glow-cyan);
}
.download-panel::before { opacity: 1; }   /* keep the gradient hairline lit */

.dl-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.dl-ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--grad-accent); color: var(--on-accent);
  box-shadow: var(--glow-cyan);
  font-size: 1.1rem;
}
.dl-head h2 { font-size: var(--fs-h3); line-height: 1.1; }
.dl-head p { margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint); letter-spacing: var(--tr-micro); text-transform: uppercase; }

.pw-field { margin-bottom: var(--s-4); }
.pw-label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-micro); letter-spacing: var(--tr-micro);
  text-transform: uppercase; color: var(--faint);
}
.pw-row { display: flex; gap: var(--s-2); }
.pw-input {
  flex: 1; min-width: 0;
  padding: 12px var(--s-4);
  background: var(--bg-1);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--text); letter-spacing: .02em;
}
.pw-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--wash-cyan-2); outline: none; }
.pw-copy { flex: none; }
.pw-copy .i { margin: 0; }

.dl-note {
  margin-top: var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-data); color: var(--faint);
}
.dl-note .i { color: var(--good); flex: none; }

/* -------------------------------------------------------------- about --- */
.product-about { margin-top: var(--s-7); padding: var(--s-6); }
.product-about h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.product-about p { color: var(--muted); max-width: 68ch; }

/* --------------------------------------------------------- changelog --- */
/* The rows themselves are .update, styled in components.css alongside the
   landing page changelog. Only the section wrapper is defined here. */
.product-changelog { margin-top: var(--s-7); }
.product-changelog h2 { font-size: var(--fs-h3); margin-bottom: var(--s-4); }

/* ---------------------------------------------------------- not found --- */
.not-found { text-align: center; max-width: 40rem; margin-inline: auto; padding-block: var(--s-8); }
.not-found .product-title { margin-bottom: var(--s-4); }
.not-found .product-lead { margin-inline: auto; }

@media (max-width: 520px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); }
  .pw-row { flex-direction: column; }
  .pw-copy { width: 100%; }
}