/*
 * Peak Oxygen — /set-up-oxygen-concentrator/ (Release B refresh, Jered 2026-10-14: "using what we did on the full
 * product pages, we can give this page a full refresh"). Loaded after landing.css and reuses
 * its tokens and the pp-/po- blocks (steps, tips, FAQ, call to action). Everything here is namespaced `ps-`.
 * Shape: intro with three quick facts → safety callouts → tab row (in-home · portable · CPAP adapter) → per machine:
 * numbered steps with the page's five setup photos, tubing and connectors, troubleshooting, tips → FAQ → call to action.
 * The tabs are plain buttons enhanced by the inline script on the page; without JavaScript every panel shows.
 */

/* ---------- Headings inside a panel (the theme styles bare h3/h4, hence the !important) ---------- */
.ps-h3 { font-family: inherit !important; font-style: normal !important; font-weight: 700 !important; font-size: 1.15rem !important; line-height: 1.3 !important; margin: 0 0 6px !important; color: var(--po-ink); text-transform: none !important; letter-spacing: 0 !important; }
.ps-h3--section { font-size: 1.25rem !important; margin: 34px 0 14px !important; }
.ps-lead { margin: 0 0 14px; font-size: .98rem; line-height: 1.55; max-width: 70ch; }
.ps-lead:last-child { margin-bottom: 0; }
.pp .ps-lead { color: var(--po-ink); }

/* ---------- Intro: three quick facts ---------- */
.ps-intro .pp-head { margin-bottom: 20px; }
.ps-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ps-facts li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: #fff; border: 1px solid var(--po-line); border-radius: 12px; padding: 14px 16px; }
.ps-facts svg { width: 28px; height: 28px; color: #6b7a86; margin-top: 2px; }
.ps-facts div { display: grid; gap: 2px; }
.ps-facts b { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--po-ink); }
.ps-facts span { font-size: .92rem; line-height: 1.45; color: var(--po-ink); font-weight: 500; }
.ps-facts a { color: var(--po-ink); font-weight: 700; white-space: nowrap; }

/* ---------- Safety callouts ---------- */
.ps-safety .pp-head { margin-bottom: 14px; }
.ps-safety__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ps-callout { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--po-line); border-left: 4px solid #6b7a86; border-radius: 12px; padding: 16px 18px; }
.ps-callout > svg { width: 32px; height: 32px; color: #6b7a86; margin-top: 1px; }
.ps-callout p { margin: 0; font-size: .95rem; line-height: 1.5; }

/* ---------- Tab row ---------- */
.ps-guide .pp-head { margin-bottom: 16px; }
.ps-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--po-line); margin: 0 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ps-tabs::-webkit-scrollbar { display: none; }
.ps-tab { appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px 12px; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--po-muted); cursor: pointer; white-space: nowrap; border-radius: 0; line-height: 1.2; }
.ps-tab svg { width: 22px; height: 22px; color: #8a97a1; flex: 0 0 22px; }
.ps-tab:hover { color: var(--po-ink); }
.ps-tab:focus-visible { outline: 2px solid #2f7d8f; outline-offset: -2px; border-radius: 6px; }
.ps-tab[aria-selected="true"] { color: var(--po-ink); font-weight: 700; border-bottom-color: #2f7d8f; }
.ps-tab[aria-selected="true"] svg { color: #2f7d8f; }
/* Without the script every panel is readable and the tab row is a plain list of what is below. */
.ps-tabs:not(.is-js) .ps-tab { cursor: default; }
.ps-panel[hidden] { display: none; }
.ps-panel { scroll-margin-top: 90px; }
.ps-panel + .ps-panel { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--po-line); }
.ps-tabs.is-js ~ .ps-panel + .ps-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.ps-panel__head { margin-bottom: 4px; }
.ps-panel__head .pp-h2 { font-size: 1.35rem !important; }

/* ---------- Steps with a photo ---------- */
.ps-steps { gap: 12px; }
.ps-steps .pp-step p a { color: var(--po-ink); }
.ps-steps .pp-step p a.po-link { font-size: inherit; font-weight: 600; white-space: normal; }
.ps-step--photo { grid-template-columns: 40px 1fr 84px; }
.ps-step__img { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--po-line); border-radius: 10px; background: #fff; display: block; align-self: start; }

/* ---------- Extension tubing and connectors ---------- */
.ps-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ps-part { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--po-line); border-radius: 12px; padding: 14px; }
.ps-part img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--po-line); border-radius: 10px; background: #fff; display: block; }
.ps-part__h { font-family: inherit !important; font-style: normal !important; font-weight: 700 !important; font-size: 1.02rem !important; line-height: 1.3 !important; margin: 0 0 4px !important; color: var(--po-ink); }
.ps-part p { margin: 0; font-size: .93rem; line-height: 1.5; }

/* ---------- Troubleshooting ---------- */
.ps-trouble { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ps-trouble li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 12px 14px; background: #f6f9fb; border-radius: 10px; }
.ps-trouble svg { width: 24px; height: 24px; color: #6b7a86; margin-top: 1px; }
.ps-trouble p { margin: 0; font-size: .93rem; line-height: 1.5; }
.ps-trouble b { font-weight: 700; }
.ps-trouble a { color: var(--po-ink); font-weight: 700; white-space: nowrap; }

/* ---------- FAQ and call to action ---------- */
.ps-faq .pp-faq__item summary, .ps-faq .pp-faq__item { background: transparent; }
.ps-cta .po-sameday { margin-top: 8px; font-size: .95rem; }

/* Phones: the three tabs share the row (the row scrolled sideways at 390px and clipped "In-home"). */
@media (max-width: 47.99em) {
  .ps-tabs { gap: 0; overflow: visible; }
  .ps-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 4px 12px; font-size: .9rem; gap: 6px; }
  .ps-tab svg { width: 18px; height: 18px; flex-basis: 18px; }
}

/* ---------- Tablet and desktop ---------- */
@media (min-width: 48em) {
  .ps-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ps-safety__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ps-tabs { gap: 8px; margin-bottom: 28px; }
  .ps-tab { padding: 12px 20px 14px; font-size: 1.05rem; }
  .ps-panel__head .pp-h2 { font-size: 1.6rem !important; }
  .ps-h3--section { font-size: 1.35rem !important; margin-top: 40px !important; }
  .ps-steps { max-width: 820px; }
  .ps-step--photo { grid-template-columns: 40px 1fr 120px; }
  .ps-step__img { width: 120px; height: 120px; }
  .ps-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ps-part { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .ps-part img { width: 100%; height: 150px; }
  .ps-trouble { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .ps-guide .pp-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .ps-guide .pp-tips__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Product photo on each tab (Jered 2026-10-21 04:23: "add the product images to this menu"). */
.ps-tab { flex-direction: column; gap: 8px; }
.ps-tab__img { display: flex; align-items: center; justify-content: center; width: 104px; height: 76px; background: #fff; border: 1.5px solid var(--po-line); border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ps-tab__img img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.ps-tab:hover .ps-tab__img { border-color: #9cc9d3; }
.ps-tab[aria-selected="true"] .ps-tab__img { border-color: #2f7d8f; box-shadow: 0 0 0 2px rgba(47,125,143,.18); }
@media (max-width: 47.99em) { .ps-tab { gap: 6px; } .ps-tab__img { width: 100%; max-width: 96px; height: 64px; } }
@media (min-width: 48em) { .ps-tab__img { width: 128px; height: 92px; } }
#ps-tab-cpap .ps-tab__img img { transform: scale(1.5); } #ps-tab-inhome .ps-tab__img img { transform: scale(1.12); } /* fill the box like the portable photo */