/* The Glass range explains the system before asking visitors to choose a kit.
   All overrides are scoped here; package pages keep their existing layouts. */
/* Keep Safiery's shared page width, type scale, spacing and buttons. */
.q-glass-overview .q-hero h1 { max-width: 16ch; text-wrap: balance; }
.q-glass-overview .q-section h2 { text-wrap: balance; }
.q-glass-overview .q-glass-benefits { display: flex; flex-wrap: wrap; gap: 12px 22px; list-style: none; padding: 0; margin: 24px 0 0; }
.q-glass-benefits li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.q-glass-benefits li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--quasar-bright); }
.q-glass-overview #platforms .q-card { display: flex; flex-direction: column; align-items: flex-start; }
.q-glass-overview #platforms .q-card .btn { margin-top: auto; }
.q-glass-overview #platforms .q-card .q-notes { margin-top: 18px; }
.q-glass-overview .q-glass-platform-key { color: var(--text); font-weight: 600; }
.q-glass-inline-details { width: 100%; border-top: 1px solid var(--line); margin: 4px 0 24px; }
.q-glass-inline-details summary, .q-glass-visual-details > summary { min-height: 48px; padding-block: 14px; cursor: pointer; font-size: 15px; color: var(--brand-ink); font-weight: 600; }
.q-glass-inline-details li { margin: 9px 0; font-size: 15px; }
.q-glass-inline-details p { font-size: 15px; }
.q-glass-overview .q-glass-visual-details { border-bottom: 1px solid var(--line); padding: 6px 0; margin-top: 16px; }
.q-glass-overview .q-glass-visual-details .q-wide-visual { margin: 12px 0; }
.q-glass-overview .q-glass-visual-details .q-wide-visual img { max-height: 520px; }

/* Give the animated diagram a readable stage; chapters remain available on demand. */
.q-glass-overview .q-range-demo { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.q-glass-overview .q-glass-film-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
.q-glass-overview .q-glass-film-heading .pdp-story-head { margin: 0; }
.q-glass-overview .q-glass-film-heading h2 { max-width: 22ch; }
.q-glass-overview .q-glass-film-heading .pdp-journey-intro { max-width: 60ch; margin: 0; font-size: 17px; }
.q-glass-overview .q-range-demo .pdp-journey-player { position: static; max-width: none; width: 100%; margin: 0; padding: 24px; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 18px; }
.q-glass-overview .q-range-demo .pdp-journey-stage { width: min(100%, 680px); height: auto; aspect-ratio: 5 / 4; margin-inline: auto; }
.q-glass-overview .pdp-journey-caption { min-height: 66px; padding-top: 16px; }
.q-glass-overview .pdp-journey-caption > span { font-size: 15px; }
.q-glass-overview .pdp-journey-caption b { font-size: 12px; }
.q-glass-overview .pdp-journey-controls { gap: 16px; max-width: 700px; margin: 10px auto 16px; }
.q-glass-overview .pdp-journey-controls button { background: var(--surface-soft); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; min-height: 44px; font-size: 14px; text-decoration: none; }
.q-glass-overview .pdp-journey-controls input { display: block; flex: 1; min-width: 0; height: 44px; accent-color: var(--brand); }
.q-glass-overview .pdp-journey-controls > span { display: block; flex: none; font: 12px var(--mono); color: var(--text-dim); }
.q-glass-overview .q-range-demo .pdp-journey-note { font-size: 12px; margin: 0; }
.q-glass-film-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.q-glass-overview .q-glass-film-footer .pdp-journey-requirements { max-width: 78ch; font-size: 14px; margin: 0; padding: 0; border: 0; }
.q-glass-film-footer .btn { flex-shrink: 0; }
.q-glass-overview .q-glass-steps .pdp-journey-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding: 12px 24px 18px; }
.q-glass-overview .q-glass-steps .pdp-journey-stages li { min-width: 0; }
.q-glass-overview .q-glass-steps .pdp-journey-stages button { min-height: 100%; }

/* Match the store catalogue: four equal cards, including an incomplete last row. */
.q-glass-overview .q-package-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin:24px 0 12px; color:var(--text-dim); font-size:14px; }
.q-package-toolbar a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.q-glass-overview .q-package-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:0; }
.q-glass-overview .q-package-card { grid-column:auto; padding:10px; border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.q-glass-overview .q-package-image { aspect-ratio:4/3; background:var(--tile); filter:brightness(.97); }
.q-glass-overview .q-package-image img { width:100%; height:100%; aspect-ratio:auto; padding:16px; max-height:none; object-fit:contain; }
.q-glass-overview .q-package-body { padding:16px 6px 4px; }
.q-glass-overview .q-package-body h3 { font-size:var(--type-card-title); margin:0 0 8px; line-height:1.3; }
.q-glass-overview .q-package-body > p { font-size:13px; line-height:1.55; margin-bottom:12px; }
.q-glass-overview .q-package-body .q-package-purpose { font-size:13px; font-weight:600; color:var(--quasar-bright) !important; }
.q-glass-overview .q-package-body .q-notes { font-size:13px; }
.q-package-inclusions { list-style:none; padding:0; margin:0 0 14px; width:100%; }
.q-package-inclusions li { position:relative; padding-left:14px; font-size:13px; line-height:1.6; margin:4px 0; }
.q-package-inclusions li::before { content:''; position:absolute; left:0; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--brand-ink); }
.q-glass-overview .q-package-price { min-height:72px; font-size:13px; padding-block:12px; }
.q-glass-overview .q-package-price strong { font-size:21px; }
.q-glass-overview .q-package-price small { font-size:12px; }
.q-glass-overview .q-package-body > .btn { font-size:13px; min-height:44px; padding:10px 8px; }
.q-glass-overview .q-package-details { font-size:13px; min-height:44px; }
.q-glass-overview .q-package-purchase-terms { margin-top:20px; }
.q-glass-overview .q-purchase-note { margin:20px 0; padding:18px 22px; }
.q-glass-overview .q-purchase-note strong { font-size:15px; }
.q-glass-overview .q-purchase-note p { font-size:14px; }
.q-glass-overview .q-offer { margin:20px 0 0; }
.q-glass-overview .q-guide-price { margin-top:22px; }
.q-glass-overview .q-guide-price summary { min-height:44px; font-size:15px; }
@media (hover:hover) and (pointer:fine) {
  .q-glass-overview .q-package-card:hover { border-color:var(--line-2); box-shadow:var(--shadow); }
}

/* Native details are keyboard accessible; the existing range script reveals fragment targets. */
.q-glass-overview .q-glass-detail-heading { padding-bottom: 16px; }
.q-glass-disclosure { border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); margin-bottom: 16px; }
.q-glass-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; padding: 22px 26px; min-height: 84px; }
.q-glass-disclosure > summary::-webkit-details-marker { display: none; }
.q-glass-disclosure > summary strong { display: block; color: var(--text); font-size: 18px; }
.q-glass-disclosure > summary span span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.q-glass-disclosure > summary::after { content: '+'; color: var(--brand-ink); font-size: 26px; font-weight: 400; }
.q-glass-disclosure[open] > summary::after { content: '−'; }
.q-glass-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.q-glass-disclosure-body { padding: 26px; }
.q-glass-overview .q-glass-disclosure-body h2 { font-size: var(--type-subsection-title); }
.q-glass-overview .q-table { font-size: 16px; table-layout: fixed; }
.q-glass-overview .q-table th, .q-glass-overview .q-table td { padding: 19px 22px; line-height: 1.7; overflow-wrap: anywhere; }
.q-glass-overview .q-table th:first-child { width: 24%; }
.q-glass-overview .q-table caption { padding: 20px 22px; }
.q-glass-overview .q-table-wrap { margin-bottom: 0; }
.q-glass-overview summary:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 4px; border-radius: 8px; }
@media (hover: hover) {
  .q-glass-disclosure > summary:hover, .q-glass-inline-details > summary:hover, .q-glass-visual-details > summary:hover { color: var(--text); background: var(--brand-tint); }
}
@media (max-width: 1080px) {
  .q-glass-overview .q-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-glass-overview .q-glass-steps .pdp-journey-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .q-glass-overview .q-glass-film-heading { grid-template-columns: 1fr; gap: 14px; }
  .q-glass-overview .q-glass-film-heading h2 { max-width: none; }
  .q-glass-overview .q-range-demo .pdp-journey-player { padding: 14px; }
  .q-glass-overview .q-range-demo .pdp-journey-stage { aspect-ratio: 650 / 1000; max-width: 520px; }
  .q-glass-film-footer { align-items: stretch; flex-direction: column; gap: 18px; }
  .q-glass-overview .pdp-journey-controls { gap: 10px; }
  .q-glass-overview .q-glass-steps .pdp-journey-stages { padding: 12px 18px; }
  .q-glass-disclosure > summary { padding: 18px; }
  .q-glass-disclosure-body { padding: 18px; }
  .q-glass-overview .q-table { font-size: 15px; }
  .q-glass-overview .q-table th, .q-glass-overview .q-table td { padding: 15px 12px; }
  .q-glass-overview .q-table th:first-child { width: 40%; overflow-wrap: normal; }
}
@media (max-width: 600px) {
  .q-glass-overview .q-package-grid, .q-glass-overview .q-glass-steps .pdp-journey-stages { grid-template-columns: 1fr; }
  .q-glass-overview .q-package-body { padding: 18px 10px 8px; }
  .q-glass-overview .q-package-image { max-height:240px; }
  .q-glass-overview .q-package-grid { gap:18px; }
  .q-glass-overview .q-offer { padding: 22px; }
}