/* =============================================================================
   Quasar Glass Solo (quasar-glass-solo.html)
   -----------------------------------------------------------------------------
   The page IS the Safiery product-page layout: .pdp hero, .pdp-rail and the
   .pdp-story-sec sections all come from store.css unchanged, and the
   configurator from quasar-bundle-page.css. This file only adds what the
   product template has no slot for: the film stage in the gallery, the hero
   support line, the in-the-box drawing and the closing call to action.
   ========================================================================== */

/* ---- hero -------------------------------------------------------------------- */
.solo-pdp .qb-hero-text { line-height: 1.65; margin: 0 0 14px; max-width: 56ch; }
/* Reserve the live price's height so nothing below it moves when it lands. */
.solo-price { min-height: 94px; align-items: center; }
.solo-pdp .pdp-buy { margin-bottom: 0; }
.solo-pdp .pdp-buy .btn { min-width: 270px; justify-content: center; }
.solo-support { font-size: 14px; }

/* The film takes the gallery's photo slot. .pdp-hero keeps its frame, radius and
   shadow; the white photo plate it gives an <img> is not wanted on a drawing
   that carries its own dark stage. */
.solo-film { margin: 0; }
.solo-film-stage { overflow: hidden;
  background: radial-gradient(80% 64% at 50% 62%, rgba(56,189,248,.09), transparent 72%), var(--bg); }
.solo-film-stage > picture, .solo-film-stage > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.solo-film-stage img.solo-film-poster { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain;
  background: none; border-radius: inherit; filter: none; box-shadow: none; }
.solo-film-stage.is-live > picture { display: none; }
.solo-film-stage > svg { z-index: 1; }
/* The pause control is the product films' own text button, under the stage. */
.solo-film-controls { padding-top: 10px; }
.solo-film-controls button[hidden] { display: none; }
.solo-film-caption { display: grid; gap: 5px; padding: 6px 4px 0; text-align: center; justify-items: center; }
.solo-film-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); }
.solo-film-note { font-size: 12.5px; line-height: 1.55; color: var(--text-mut); max-width: 52ch; }

/* ---- sections ---------------------------------------------------------------- */
/* The three benefits are the notes grid on its own, not below feature spreads. */
.solo-benefits .pdp-notes { margin-top: 0; padding-top: 0; border-top: 0; }

.solo-included { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 44px; align-items: center; }
.solo-included .specs-table th { color: var(--text); font-weight: 600; font-size: 15px; }
.solo-included .specs-table td { font-family: var(--body); font-size: 14.5px; }
.solo-included-media { margin: 0; justify-self: center; width: 100%; max-width: 250px; }
.solo-included-media img { width: 100%; height: auto; }
.solo-included-note { margin: 24px 0 0; color: var(--text-dim); font-size: 15px; line-height: 1.7; max-width: 72ch; }
.solo-included-note strong { color: var(--text); }

.solo-configure-intro, .solo-works-intro { margin: -10px 0 28px; max-width: 68ch; color: var(--text-dim); font-size: 15.5px; line-height: 1.72; }
/* The configurator's summary docks under BOTH sticky bars, like an anchored heading. */
.solo-configure .qb-summary { top: calc(var(--pdp-anchor-top, 150px) + 8px); }
.solo-works-setup { margin: 20px 0 0; max-width: 80ch; color: var(--text-dim); font-size: 14px; line-height: 1.7; }
.solo-works-setup strong { color: var(--text); }

/* ---- closing call to action -------------------------------------------------- */
.solo-final { border-bottom: 0; }
.solo-final-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap;
  padding: 36px 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.solo-final-panel h2 { font-size: clamp(24px, 3vw, 34px); margin: 12px 0 0; letter-spacing: -.02em; max-width: 22ch; }
.solo-final-panel p { margin: 10px 0 0; color: var(--text-dim); }
.solo-final-actions { display: grid; gap: 12px; justify-items: center; }
.solo-final-actions .btn { min-width: 270px; justify-content: center; }
.solo-text-link { color: var(--brand-ink); font-size: 14px; }

.solo-page a:focus-visible, .solo-page button:focus-visible, .solo-page summary:focus-visible {
  outline: 2px solid var(--brand-ink); outline-offset: 3px;
}

/* ---- narrow screens ------------------------------------------------------------ */
/* One column from 920px (store.css): the copy and the button come first, so the
   promise and the call to action are on screen before the first scroll. */
@media (max-width: 920px) {
  .solo-pdp .pdp-info { order: -1; }
  .solo-pdp .pdp-gallery { width: 100%; max-width: 560px; justify-self: center; }
}
/* Phones use the product pages' own mobile hero (store.css, [data-pdp] under
   700px: one reading order, title first). The only change is where the gallery
   goes: product pages put their photo under the title, but here the film follows
   the purchase controls, and the account box follows the film. */
@media (max-width: 700px) {
  [data-pdp] .solo-pdp .pdp-gallery { order: 6; margin: 8px 0 18px; }
  [data-pdp] .solo-pdp .trade-cta-box { order: 7; }
  [data-pdp] .solo-film-stage { height: auto; aspect-ratio: 1 / 1; }
  [data-pdp] .solo-pdp .pdp-buy { margin: 4px 0 10px; }
}
/* The film recomposes to its portrait layout at the same width (NARROW in
   assets/js/quasar-glass-solo-film.js). */
@media (max-width: 640px) {
  [data-pdp] .solo-film-stage { aspect-ratio: 400 / 620; }
  .solo-pdp .pdp-buy .btn, .solo-final-actions, .solo-final-actions .btn { width: 100%; min-width: 0; }
  .solo-included { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .solo-included-media { max-width: 190px; }
  .solo-final-panel { padding: 26px 20px; }
}
/* The smallest phones keep the button above the fold by dropping the badges,
   which repeat what the heading and the text already say. */
@media (max-width: 360px) {
  .solo-pdp .pdp-info .qb-badges { display: none; }
}