/* ==========================================================================
   TheSheetVault — file page
   Picture on the left, name + price + one button on the right.
   On phones: name → picture → price and button.
   ========================================================================== */

.back-link { margin-top: 1rem; }
.sample-note { margin: 0.25rem 0 0; }

.product {
  display: grid; gap: 1.5rem;
  grid-template-areas: "head" "media" "buy";
  padding-top: 1.25rem; padding-bottom: var(--section-y);
}
.product-head { grid-area: head; }
.product-media { grid-area: media; min-width: 0; }
.buy { grid-area: buy; }
@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "media head" "media buy";
    column-gap: clamp(2rem, 1rem + 3vw, 4rem); row-gap: 1.25rem;
    align-items: start;
  }
}

.product-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem); letter-spacing: -0.03em; line-height: 1.08; }
.product-video { margin-top: 0.75rem; color: var(--text-2); }
.product-video a { color: var(--accent-hi); text-underline-offset: 3px; text-decoration-color: var(--accent-line); }

/* Picture */
.stage { position: relative; aspect-ratio: 16 / 10; padding: 6% 6% 0; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: radial-gradient(110% 90% at 50% 0%, var(--surface-3), var(--surface) 70%); overflow: hidden; }
.stage .media-img { border-radius: var(--r-md); object-fit: contain; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding: 4px; margin-inline: -4px; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: none; width: 92px; aspect-ratio: 16 / 10; padding: 4px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; }
.thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumb:focus-visible { border-radius: 10px; }

/* Buy box */
.buy { display: grid; gap: 1rem; align-content: start; }
.buy-summary { font-size: var(--fs-lg); color: var(--text-2); max-width: 46ch; }
.price-lg .price-now { font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); letter-spacing: -0.03em; }
.price-lg .price-was { font-size: 1rem; }
.buy-btn { width: 100%; max-width: 420px; }
.buy-btn:disabled { opacity: 0.7; cursor: progress; }
.buy-email { display: grid; gap: 6px; max-width: 420px; }
.buy-email label { font-weight: 600; font-size: var(--fs-sm); }
.buy-email input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: 1.0625rem; }
.buy-email input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(61 220 132 / 0.18); }
.buy-email-hint { font-size: var(--fs-sm); color: var(--text-3); }
.buy-note { color: var(--text-2); font-size: var(--fs-sm); }

.promo { max-width: 420px; }
.promo summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; color: var(--accent-hi); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.promo summary::-webkit-details-marker { display: none; }
.promo-form { display: grid; gap: 8px; padding-top: 4px; }
.promo-form label { font-size: var(--fs-sm); font-weight: 600; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--bg); color: var(--text); font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; }
.promo-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(61 220 132 / 0.18); }
.promo-row .btn { border-radius: var(--r-md); }
.promo-row .btn:focus-visible { border-radius: var(--r-md); }

/* What's included */
.included { display: grid; gap: 10px; }
.included li { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); }
.included-name { font-weight: 600; overflow-wrap: anywhere; }
.included-detail { font-size: var(--fs-sm); color: var(--text-2); }
.works-with { margin-top: 1rem; color: var(--text-2); }
.works-with:empty { display: none; }

/* Video */
.player-btn, .player-frame, .player-empty { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-xl); border: 1px solid var(--line-2); overflow: hidden; }
.player-btn { padding: 0; cursor: pointer; background: radial-gradient(90% 120% at 50% 30%, #173129, #0a1411); }
.player-btn:focus-visible { border-radius: var(--r-xl); }
.player-poster { position: absolute; inset: 12% 18% 12%; width: auto; height: auto; opacity: 0.25; }
.player-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 72px; height: 52px; border-radius: 14px; background: #f1f3f2; }
.player-play svg { width: 24px; height: 24px; fill: var(--bg); }
.player-frame { border: 0; background: #000; }
.player-empty { display: grid; place-items: center; padding: 1.5rem; text-align: center; border-style: dashed; border-color: var(--line-3); background: var(--surface); color: var(--text-2); }
.watch-btn { margin-top: 1rem; }

/* Not found */
.not-found { display: grid; justify-items: start; gap: 1rem; padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.not-found h1 { font-size: var(--fs-h1); max-width: 18ch; }
.not-found p { color: var(--text-2); font-size: var(--fs-lg); }
@media (max-width: 899px) { .stage { aspect-ratio: 2 / 1; padding: 4% 10% 0; } }
.player-empty { aspect-ratio: auto; padding: 2rem 1.5rem; }