/* =====================================================================
   Desktop polish v1 (Web Designer, Oct 24 2026) · design/desktop-polish-spec.md
   Mobile-first. Tokens from tokens.css only. Tap targets ≥44px, body ≥16px, fine print ≥14px.
   ===================================================================== */

/* ---------- shared components (P1 pages: contact, financing, 404, events) ---------- */
.ob-dp-page .site-main{padding-top:24px;padding-bottom:48px}
@media (min-width:1024px){.ob-dp-page .site-main{padding-top:40px;padding-bottom:72px}}
.ob-dp-lede{font-size:18px!important;line-height:1.55;color:var(--ob-slate-700);max-width:68ch!important;margin:0 0 24px}
.ob-dp-h2{font:600 22px/1.3 var(--ob-font);color:var(--ob-navy-900);margin:0 0 16px}
.ob-dp-fine{font-size:14px!important;line-height:1.5;color:var(--ob-slate-500);margin:8px 0 24px}
.ob-dp-eyebrow{font:600 14px/1.4 var(--ob-font)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--ob-blue-600);margin:0 0 8px}
.ob-dp-ic{width:24px;height:24px;flex:none}
.ob-dp-card{background:var(--ob-bg);border:1px solid var(--ob-border);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(49,61,77,.06),0 8px 24px rgba(49,61,77,.06)}
.ob-dp-card p{margin:0 0 16px}
.ob-dp-btns{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0!important}
.ob-dp-card .ob-dp-btns .ob-dp-btn{flex:1 1 220px}
.ob-dp-nw{white-space:nowrap}
.ob-dp-btn,a.button.ob-dp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:10px;background:var(--ob-navy-900);border:2px solid var(--ob-navy-900);color:#fff!important;font:600 16px/1.2 var(--ob-font);text-decoration:none!important;text-align:center;box-sizing:border-box;transition:background .15s,border-color .15s}
.ob-dp-btn:hover,.ob-dp-btn:focus-visible{background:var(--ob-navy-950);border-color:var(--ob-navy-950)}
.ob-dp-btn--ghost,a.button.ob-dp-btn--ghost{background:#fff;color:var(--ob-navy-900)!important}
.ob-dp-btn--ghost:hover,.ob-dp-btn--ghost:focus-visible{background:var(--ob-blue-50);border-color:var(--ob-navy-900)}
@media (max-width:575px){.ob-dp-btns .ob-dp-btn{width:100%}}

/* contact methods (shared by Contact, Financing, 404) */
.ob-dp-methods{list-style:none;margin:0 0 16px!important;padding:0!important;display:grid;gap:8px}
.ob-dp-methods li{margin:0!important;display:block;width:100%}
.ob-dp-method{display:flex;width:100%;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border:1px solid var(--ob-border);border-radius:12px;background:var(--ob-bg-tint);color:var(--ob-navy-900)!important;text-decoration:none!important;box-sizing:border-box;transition:border-color .15s,background .15s}
.ob-dp-method .ob-dp-ic{color:var(--ob-blue-600)}
.ob-dp-method:hover,.ob-dp-method:focus-visible{border-color:var(--ob-blue-600);background:var(--ob-blue-50)}
.ob-dp-method__t{display:flex;flex-direction:column;min-width:0}
.ob-dp-method__l{font:500 14px/1.3 var(--ob-font);color:var(--ob-slate-500)}
.ob-dp-method__v{font:600 18px/1.3 var(--ob-font);color:var(--ob-navy-900);overflow-wrap:anywhere}
.ob-dp-method:hover .ob-dp-method__v{text-decoration:underline;text-underline-offset:3px}
.ob-dp-meta{display:flex;align-items:center;gap:10px;margin:0 0 8px!important;font-size:16px;color:var(--ob-slate-700)}
.ob-dp-meta .ob-dp-ic{width:20px;height:20px;color:var(--ob-slate-500)}

/* two-column shell */
.ob-dp-2col{display:grid;gap:24px;margin:0 0 40px}
@media (min-width:1024px){
 .ob-dp-2col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
 .ob-dp-2col--fin{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
}
@media (max-width:1023px){.ob-dp-2col.is-quote .ob-dp-card--quote{order:-1}}
.ob-dp-2col.is-quote .ob-dp-card--quote{border-color:var(--ob-blue-600);box-shadow:0 0 0 3px var(--ob-sky-tint),0 8px 24px rgba(49,61,77,.06)}
.ob-dp-ticks{list-style:none;margin:0 0 20px!important;padding:0!important}
.ob-dp-ticks li{position:relative;padding-left:28px;margin:0 0 8px!important}
.ob-dp-ticks li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:7px;border:solid var(--ob-success);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.ob-dp-links ul{list-style:none;margin:0!important;padding:0!important;display:grid;gap:8px}
@media (min-width:768px){.ob-dp-links ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.ob-dp-links ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ob-dp-links li{margin:0!important}
.ob-dp-links a,.ob-dp-more a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--ob-border);border-radius:10px;color:var(--ob-navy-900)!important;font-weight:600;text-decoration:none!important}
.ob-dp-links a:hover,.ob-dp-more a:hover,.ob-dp-links a:focus-visible,.ob-dp-more a:focus-visible{border-color:var(--ob-blue-600);color:var(--ob-blue-700)!important}
.ob-dp-links .ob-dp-ic,.ob-dp-more .ob-dp-ic{width:20px;height:20px;color:var(--ob-blue-600)}
.ob-dp-more{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0!important}
.ob-dp-more a{flex:1 1 220px}

/* financing steps */
.ob-dp-steps{counter-reset:s;list-style:none;margin:0!important;padding:0!important;display:grid;gap:12px}
@media (min-width:768px){.ob-dp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ob-dp-steps li{counter-increment:s;position:relative;margin:0!important;padding:56px 16px 16px;border:1px solid var(--ob-border);border-radius:12px;background:var(--ob-bg-tint);line-height:1.5}
.ob-dp-steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--ob-navy-900);color:#fff;font:700 16px/32px var(--ob-font);text-align:center}
.ob-dp-steps strong{display:block;color:var(--ob-navy-900)}
/* 1024–1199: the left column is too narrow for 3-up; switch to rows with the number on the left */
@media (min-width:1024px) and (max-width:1199px){.ob-dp-steps{grid-template-columns:1fr}.ob-dp-steps li{padding:16px 16px 16px 64px;min-height:64px}.ob-dp-steps li::before{top:16px}}

/* ---------- DV-011: 404 ---------- */
.ob-dp-404{display:grid;gap:32px;padding:24px 0 48px}
@media (min-width:1024px){.ob-dp-404{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;padding:48px 0 80px;align-items:start}.ob-dp-404__side{position:sticky;top:96px}}
.ob-dp-404__h1{font:600 var(--fs-h1)/1.15 var(--ob-font);color:var(--ob-navy-900);margin:0 0 12px}
.ob-dp-search{margin:0 0 40px}
.ob-dp-search__l{display:block;font:600 16px/1.4 var(--ob-font);color:var(--ob-navy-900);margin:0 0 8px}
.ob-dp-search__row{display:flex;gap:8px}
.ob-dp-search input[type=search]{flex:1 1 auto;min-width:0;min-height:48px;padding:0 16px;border:1.5px solid var(--ob-border-strong);border-radius:10px;font:400 16px/1.2 var(--ob-font);color:var(--ob-navy-900);background:#fff;box-sizing:border-box}
.ob-dp-search input[type=search]:focus{outline:none;border-color:var(--ob-blue-600);box-shadow:0 0 0 3px var(--ob-sky-tint)}
.ob-dp-cats{list-style:none;margin:0!important;padding:0!important;display:grid;gap:12px}
@media (min-width:600px){.ob-dp-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.ob-dp-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ob-dp-cats li{margin:0!important}
.ob-dp-cats a{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:88px;height:100%;padding:16px 48px 16px 16px;border:1px solid var(--ob-border);border-radius:12px;background:var(--ob-bg-tint);text-decoration:none!important;box-sizing:border-box;transition:border-color .15s,background .15s}
.ob-dp-cats a:hover,.ob-dp-cats a:focus-visible{border-color:var(--ob-blue-600);background:var(--ob-blue-50)}
.ob-dp-cats__t{font:600 17px/1.3 var(--ob-font);color:var(--ob-navy-900)}
.ob-dp-cats__s{font:400 15px/1.4 var(--ob-font);color:var(--ob-slate-500);margin-top:4px}
.ob-dp-cats .ob-dp-ic{position:absolute;right:16px;top:50%;margin-top:-10px;width:20px;height:20px;color:var(--ob-blue-600)}
.ob-dp-404 .ob-dp-btns .ob-dp-btn{width:100%}

/* ---------- DV-010: Events "See It Live" gallery ---------- */
.ob-dp-gal-intro{margin:0 0 16px}
.ob-dp-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 40px}
.ob-dp-gal__item{margin:0!important;display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-dp-gal__item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--ob-bg-tint)}
.ob-dp-gal__item figcaption{font:500 14px/1.4 var(--ob-font);color:var(--ob-slate-500)}
.ob-dp-gal__item.is-feature{grid-column:1/-1}
.ob-dp-gal__video{grid-column:auto}
@media (min-width:768px){
 .ob-dp-gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
 .ob-dp-gal__item.is-feature{grid-column:span 2;grid-row:span 2}
 .ob-dp-gal__item.is-feature img{height:100%;aspect-ratio:auto;min-height:0;flex:1 1 auto}
 .ob-dp-gal__video{grid-column:auto}
}
.ob-dp-vid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;aspect-ratio:4/3;min-height:44px;padding:16px;border:0;border-radius:12px;background:var(--ob-navy-900);color:#fff;font-family:var(--ob-font);cursor:pointer;text-align:center;box-sizing:border-box;transition:background .15s}
.ob-dp-vid:hover,.ob-dp-vid:focus-visible{background:var(--ob-navy-950)}
.ob-dp-vid:focus-visible{outline:3px solid var(--ob-sky-400);outline-offset:2px}
.ob-dp-vid__play{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ob-navy-900)}
.ob-dp-vid__play .ob-dp-ic{width:26px;height:26px;margin-left:3px}
.ob-dp-vid__t{font:600 17px/1.3 var(--ob-font)}
.ob-dp-vid__s{font:400 14px/1.4 var(--ob-font);color:var(--ob-blue-200)}
.ob-dp-vid,.ob-dp-vid span{white-space:normal!important}.ob-dp-vid__t,.ob-dp-vid__s{display:block;max-width:100%}
@media (max-width:767px){.ob-dp-vid{padding:8px}.ob-dp-vid__s{display:none!important}.ob-dp-vid__t{font-size:16px}}
.ob-dp-dlg{width:min(960px,92vw);padding:0;border:0;border-radius:12px;background:#000;overflow:visible}
.ob-dp-dlg::backdrop{background:rgba(31,39,51,.8)}
.ob-dp-dlg__frame{aspect-ratio:16/9}
.ob-dp-dlg__frame iframe{display:block;width:100%;height:100%;border:0;border-radius:12px}
.ob-dp-dlg form{position:absolute;top:-52px;right:0;margin:0}
.ob-dp-dlg__x{width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ob-navy-900);font:600 24px/44px var(--ob-font);cursor:pointer;padding:0}

/* DV-005 defensive: if wallet pills are ever re-enabled, never let them overflow the buy box */
.ob-pay .pay-row{flex-wrap:wrap}

/* =====================================================================
   P2 — desktop polish (≥1024 unless noted; 390 unchanged)
   ===================================================================== */

/* ---------- DV-017: home hero — HELD in v1.1.27 (Elon 9:35 PM ET); the Designer's v1.1.26.5 (design/home-hero-first/) owns the hero ---------- */

/* ---------- DV-018: home bands ---------- */
@media (min-width:1024px){
 /* trust pills: 2 rows that both end flush — 4 short facts on row 1, the 3 longer ones (each wider) on row 2 */
 .ob-home-trust ul{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
 .ob-home-trust li{grid-column:span 3}
 .ob-home-trust li:nth-child(4),.ob-home-trust li:nth-child(6),.ob-home-trust li:nth-child(7){grid-column:span 4;order:2}
 /* Financing pill styled like its siblings; the arrow + hover show it is a link */
 .ob-home .site-main .ob-home-trust li a{color:inherit!important;text-decoration:none!important;font-weight:500;min-height:0}
 .ob-home .site-main .ob-home-trust li a::after{content:"\00a0→";color:var(--ob-blue-600)}
 .ob-home-trust li:has(a){position:relative}
 .ob-home-trust li:has(a) a::before{content:"";position:absolute;inset:0;border-radius:999px}
 .ob-home-trust li:has(a):hover{border-color:var(--ob-blue-600);background:var(--ob-blue-50)}
 .ob-home .site-main .ob-home-trust li a:hover{text-decoration:underline!important;text-underline-offset:3px}

 /* "Built in the USA" band: the 6-point list runs in 2 columns so the band uses its full width */
 .ob-home .site-main .ob-home-warranty > ul{columns:2;column-gap:48px;max-width:none}
 .ob-home .site-main .ob-home-warranty > ul li{break-inside:avoid}

 /* Final CTA band: copy left, buttons right (≥1280; stacked below that) */
}
@media (min-width:1280px){
 .ob-home .site-main .ob-home-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center}
 .ob-home .site-main .ob-home-cta > h2{grid-column:1;grid-row:1}
 .ob-home .site-main .ob-home-cta > p.ob-p{grid-column:1;grid-row:2}
 .ob-home .site-main .ob-home-cta > p.ob-buttons{grid-column:2;grid-row:1/span 3;margin:0;flex-wrap:nowrap}
 .ob-home .site-main .ob-home-cta > p.policy-line{grid-column:1;grid-row:3;margin-bottom:0}
}
/* audience cards: 4-up only where the labels fit on one line */
@media (min-width:1024px) and (max-width:1279px){
 .ob-home-paths .ob-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ob-home-paths .ob-home-card img{aspect-ratio:16/9;object-fit:cover}
}
@media (min-width:1280px){
 .ob-home .site-main .ob-home-paths .ob-button a,.ob-home .site-main .ob-home-paths a.button{white-space:nowrap;padding-inline:12px}
}

/* ---------- DV-036: footer ---------- */
@media (min-width:1024px){
 .ob-ft-top{grid-template-columns:minmax(220px,1.4fr) 5fr}
 .ob-ft-nav{gap:24px}
 .ob-st-footer .ob-ft-h button{white-space:nowrap;letter-spacing:.04em;font-size:13px}
 .ob-ft-nav .ob-ft-col{min-width:0}
 /* one contact style: small label above, value below (white, 600) */
 .ob-ft-contact p{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;row-gap:0;min-height:44px;margin-top:8px!important}
 .ob-ft-contact .ob-ft-k{font-size:14px;line-height:1.3}
 .ob-st-footer .ob-ft-contact a{color:#fff!important;font-weight:600!important;text-decoration:none!important;line-height:1.4}
 .ob-st-footer .ob-ft-contact a:hover{text-decoration:underline!important;text-underline-offset:3px}
 .ob-st-footer .ob-ft-contact a b,.ob-st-footer .ob-ft-contact a strong{font-weight:inherit}
 .ob-ft-contact .ob-phone-hours,.ob-ft-contact p:last-child{color:#C9D2DD!important;font-size:14px}
}

/* 1024–1279: five single-line headings don't fit beside the brand column, so the brand block sits above the nav
   (same as the tablet footer) and the nav gets the full width */
@media (min-width:1024px) and (max-width:1279px){
 .ob-ft-top{grid-template-columns:1fr!important;row-gap:32px}
 .ob-ft-brand{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;column-gap:40px;align-items:start}
 .ob-ft-brand > :not(.ob-ft-contact){grid-column:1}
 .ob-ft-brand > .ob-ft-contact{grid-column:2;grid-row:1/span 3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;align-content:start;margin-top:0}
 .ob-ft-brand > .ob-ft-contact p:nth-child(-n+2){margin-top:0!important}
 .ob-ft-brand > .ob-ft-contact p{justify-content:flex-start}
 .ob-ft-brand > .ob-ft-contact .ob-phone-hours{grid-column:1/-1;min-height:0;white-space:nowrap;margin-bottom:8px}
}

/* ---------- DV-020: shop hub + category archives ---------- */
/* one photo treatment everywhere: white frame, whole product visible (contain) with breathing room */
@media (min-width:768px){
 body.ob-shop .ob-hcard__media,body.ob-shop ul.products[class] li.product .ob-card__media{background:#fff}
 body.ob-shop .ob-hcard__media img,body.ob-shop ul.products[class] li.product .ob-card__media img{object-fit:contain;padding:6%;box-sizing:border-box}
}
@media (min-width:768px){
 /* trust strip: an even 2 × 2 grid instead of a ragged wrap */
 .ob-shop .ob-trust--top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;align-items:start}
 .ob-shop .ob-trust--top li{flex:none}
}
@media (min-width:1024px){
 /* hub: one chip row. The in-page index stays; the duplicate category chips go; Compare stays as a text link */
 body.ob-hub-page .ob-cat-cta a:not([href*="compare-systems"]){display:none!important}
 body.ob-shop.ob-hub-page .site-main.site-main.site-main .ob-cat-cta a[href*="compare-systems"]{border:0!important;background:none!important;padding:0!important;min-height:44px;color:var(--ob-blue-600)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
 body.ob-shop.ob-hub-page .site-main.site-main.site-main .ob-cat-cta a[href*="compare-systems"]::after{content:"\00a0→"}
 body.ob-hub-page .ob-cat-cta{margin-top:4px!important}
}
/* "Shop all / Sale / Questions" tiles: same light tile style as the category cards, not a heavy navy block */
body.ob-shop .site-main.site-main.site-main .ob-hall-li a.ob-hall{background:var(--ob-bg-tint);color:var(--ob-navy-900);border:1px solid var(--ob-border)}
body.ob-shop .site-main.site-main.site-main .ob-hall-li a.ob-hall:hover{background:var(--ob-blue-50);border-color:var(--ob-blue-600);color:var(--ob-navy-900)}
body.ob-shop .ob-hall-li .ob-hall__k{color:var(--ob-blue-600)}
body.ob-shop .ob-hall-li .ob-hall__name{color:var(--ob-navy-900)}
body.ob-shop .ob-hall-li .ob-hall__meta{color:var(--ob-slate-700)}
body.ob-shop .ob-hall-li .ob-hall__meta b{color:var(--ob-navy-900)}
body.ob-shop .ob-hall-li .ob-hall__go{color:var(--ob-blue-600)}

/* ===== DV-030 package galleries: one white frame + padding for every main image, contained thumbs, no caption strips ===== */
@media (min-width:768px){
 .ob-st .pdp-gallery .main-img{background:#fff;border:1px solid var(--ob-border,#D9E2EC)}
 .ob-st .pdp-gallery .main-img img{object-fit:contain;padding:5%;box-sizing:border-box;background:#fff}
 .ob-st .pdp-gallery .thumbs button{background:#fff}
 .ob-st .pdp-gallery .thumbs button img{object-fit:contain;padding:6%;box-sizing:border-box}
 .ob-st .pdp-gallery .thumbs button span.lbl{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0;background:none}
 .ob-st .pdp-gallery .thumbs button:hover{border-color:var(--ob-blue-600,#496EA0)}
}

/* ===== DV-033 O24U landing ===== */
/* "Made in the USA" chip sits on the photo, so no card's price moves */
.ob-o24u-card{position:relative}
@media (min-width:768px){
 .ob-o24u-card .ob-o24u-badge{position:absolute;top:28px;left:28px;margin:0!important;font-size:14px;line-height:1.4;box-shadow:0 1px 2px rgba(49,61,77,.12)}
}
/* blank spec cell (see the o24u-landing.php hunk): a quiet dash */
.ob-o24u .ob-o24u-na{color:var(--ob-slate-500,#6B7785)}
@media (min-width:1024px){
 .ob-o24u-faq .ob-o24u-qa{max-width:none}
 .ob-o24u-faq .ob-o24u-qa__a > *{max-width:75ch}
 .ob-o24u-band .ob-o24u-ctas{grid-template-columns:repeat(2,minmax(232px,1fr))!important}
 .ob-o24u-band .ob-o24u-ctas .ob-o24u-btn{width:100%;justify-content:center;text-align:center}
}

/* ===== DV-035 policies + FAQ ===== */
.ob-dp-warranty .page-content .ob-table-wrap table{display:table;width:100%}
.ob-dp-warranty .page-content .ob-subhead{font-size:inherit}
.ob-dp-faq .site-main .page-content,.ob-dp-faq .site-main .page-header{max-width:880px;margin-inline:auto}
.ob-dp-faq .page-content > h2{margin:1.8em 0 .4em}
.ob-dp-qa{border-bottom:1px solid var(--ob-border,#D9E2EC)}
.ob-dp-faq .page-content > h2 + .ob-dp-qa{border-top:1px solid var(--ob-border,#D9E2EC)}
.ob-dp-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none}
.ob-dp-qa summary::-webkit-details-marker{display:none}
.ob-dp-qa summary:focus-visible{outline:2px solid var(--ob-blue-600,#496EA0);outline-offset:2px}
.ob-dp-qa__q{margin:0!important;color:#313D4D;font:600 18px/1.35 var(--ob-font,Jost,sans-serif)!important}
.ob-dp-qa__chev{flex:0 0 12px;width:12px;height:12px;border-right:2px solid #496EA0;border-bottom:2px solid #496EA0;transform:rotate(45deg) translate(-3px,-3px);transition:transform .15s}
.ob-dp-qa[open] .ob-dp-qa__chev{transform:rotate(225deg) translate(-3px,-3px)}
.ob-dp-qa__a{padding:0 0 16px;max-width:75ch}
.ob-dp-qa__a > :last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.ob-dp-qa__chev{transition:none}}

/* ===== DV-025 thank-you page (standard WooCommerce markup) ===== */
@media (min-width:1024px){
 .woocommerce-order ul.woocommerce-order-overview{display:flex;flex-wrap:wrap;gap:0;list-style:none!important;margin:0 0 32px!important;padding:16px 0!important;border:1px solid var(--ob-border,#D9E2EC);border-radius:12px;background:#F5F8FC}
 .woocommerce-order ul.woocommerce-order-overview li{flex:1 1 0;min-width:150px;margin:0!important;padding:0 20px!important;border:0!important;border-left:1px solid var(--ob-border,#D9E2EC)!important;font-size:14px;line-height:1.5;color:#484F56;text-transform:none}
 .woocommerce-order ul.woocommerce-order-overview li:first-child{border-left:0!important}
 .woocommerce-order ul.woocommerce-order-overview li strong{display:block;margin-top:2px;font-size:16px;color:#313D4D}
 .woocommerce-order ul.woocommerce-order-overview::before,.woocommerce-order ul.woocommerce-order-overview::after{display:none}
 .woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses{display:grid!important;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
 .woocommerce-order .woocommerce-columns--addresses .woocommerce-column{width:auto!important;float:none!important;max-width:none!important;display:flex;flex-direction:column}
 .woocommerce-order .woocommerce-columns--addresses .woocommerce-column address{flex:1 1 auto}
 .woocommerce-order .woocommerce-columns--addresses::before,.woocommerce-order .woocommerce-columns--addresses::after{display:none}
 .ob-thankyou ol + p{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px!important;margin-bottom:32px!important}
 .ob-thankyou ol + p .button{margin:0!important;min-height:44px;display:inline-flex;align-items:center}
}
/* v1.1.27 Developer fix (DV-010): the feature photo sized its own two grid rows from the 1200x900 source (1526px tall at
   1280). It now contributes no height, so the rows follow the 4:3 thumbnails and the feature photo fills both rows. */
@media (min-width:768px){
 .ob-dp-gal__item.is-feature img{height:0;min-height:0;flex:1 1 0;aspect-ratio:auto}
}

/* v1.1.27 acceptance fix F1 (Web Designer, Oct 24 2026): DV-014's 992–1199 content-width rule in ob-hf.css
   (body.page:not([class*=elementor-page-]) .site-main .page-content{max-width:none}, specificity 0,4,1) beats the
   policy 72ch column (.ob-legal-page …, ob-global.css:64, 0,3,0) and the FAQ 880px column (.ob-dp-faq …,
   ob-desktop-polish.css:245, 0,3,0). So at 1024, Warranty/Terms/Privacy/Shipping/Refund and /faq/ run 976px wide.
   APPEND to the end of assets/css/ob-desktop-polish.css. The selectors out-rank DV-014 at 0,5,1. */
@media (min-width:992px) and (max-width:1199px){
 body.page.ob-legal-page:not([class*=elementor-page-]) .site-main .page-content,
 body.page.ob-legal-page:not([class*=elementor-page-]) .site-main .page-header,
 body.page.ob-legal-page:not([class*=elementor-page-]) .site-main .page-header .entry-title{max-width:72ch;margin-inline:auto}
 body.page.ob-dp-faq:not([class*=elementor-page-]) .site-main .page-content,
 body.page.ob-dp-faq:not([class*=elementor-page-]) .site-main .page-header,
 body.page.ob-dp-faq:not([class*=elementor-page-]) .site-main .page-header .entry-title{max-width:880px;margin-inline:auto}
}

/* v1.1.29 QA fixes (Web Designer, Oct 24 2026). APPEND to the end of assets/css/ob-desktop-polish.css.
   Scoped: 404 contact card (QA 1), legal H1 alignment (QA 3), thank-you on mobile (QA 4), Save tag sizing (S1/S2).
   QA 2 (Events gallery at 768) is not here: it is handled by the Events page rebuild. Owner decisions untouched
   (DV-005 pills ON, Events client branding). */

/* QA 1 (P2): 404 contact card at 1024–1279 was 251px wide (8fr/4fr of an 800px container), so the email value
   (overflow-wrap:anywhere) split "sales@oxygenbar|s.com". Give the side card a fixed 320px column there, and stop
   the email value breaking inside a word on the 404 card. ≥1280 keeps 8fr/4fr (card ≥394px); <1024 stays stacked. */
@media (min-width:1024px) and (max-width:1279px){
 .ob-dp-404{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
}
.ob-dp-404__side .ob-dp-method[href^="mailto:"] .ob-dp-method__v{overflow-wrap:normal;word-break:normal;white-space:nowrap}
@media (max-width:359px){ /* tiny phones only: allow a break, but only after the @ */
 .ob-dp-404__side .ob-dp-method[href^="mailto:"] .ob-dp-method__v{white-space:normal;overflow-wrap:break-word}
}

/* QA 3 (P3): on legal pages the H1 sat 21.6px right of the body text at every desktop width (1024: H1 x=166.4,
   body x=144.8; 1280: 294.4 vs 272.8). Cause: both columns are max-width:72ch, but .page-content is 17px
   (ob-global.css:64, 72ch = 734.4px) while .page-header is 16px (72ch = 691.2px); both are centred, so the header is
   43px narrower. Fix: give the header the body's font size, so its ch matches. The H1 keeps its own px size
   (ob-site.css:11 clamp). Specificity 0,5,1 beats the 1.1.29 F1 rule. */
.ob-legal-page .site-main .page-header,
body.page.ob-legal-page:not([class*=elementor-page-]) .site-main .page-header{font-size:17px}

/* QA 4 (P3): the thank-you order summary at <1024 used WooCommerce's default ul.order_details look (uppercase 11px
   labels, dashed dividers, 40px list indent, floats). DV-025 on mobile/tablet: one tinted card, label stacked over
   value, 16px values (14px labels, i.e. fine print), tokens; order table links and buttons 44px. */
@media (max-width:1023px){
 .woocommerce-order ul.woocommerce-order-overview{display:grid;grid-template-columns:1fr;gap:0;list-style:none!important;margin:16px 0 24px!important;padding:4px 16px!important;border:1px solid var(--ob-border,#E3E8EF);border-radius:var(--r-lg,14px);background:var(--ob-bg-tint,#F5F8FC)}
 .woocommerce-order ul.woocommerce-order-overview::before,.woocommerce-order ul.woocommerce-order-overview::after{display:none}
 .woocommerce-order ul.woocommerce-order-overview li{float:none!important;margin:0!important;padding:12px 0!important;border:0!important;border-top:1px solid var(--ob-border,#E3E8EF)!important;font:500 14px/1.4 var(--ob-font);color:var(--ob-slate-500,#5D6878);text-transform:none!important;letter-spacing:0}
 .woocommerce-order ul.woocommerce-order-overview li:first-child{border-top:0!important}
 .woocommerce-order ul.woocommerce-order-overview li strong{display:block;margin-top:2px;font:600 16px/1.4 var(--ob-font);color:var(--ob-navy-900,#313D4D);text-transform:none;overflow-wrap:anywhere}
 .woocommerce-order .woocommerce-table--order-details{font-size:16px;border-radius:var(--r-lg,14px);border-collapse:separate;border-spacing:0;overflow:hidden}
 .woocommerce-order .woocommerce-table--order-details th,.woocommerce-order .woocommerce-table--order-details td{font-size:16px;line-height:1.45;padding:12px!important;vertical-align:top;color:var(--ob-slate-700,#484F56)}
 .woocommerce-order .woocommerce-table--order-details thead th,.woocommerce-order .woocommerce-table--order-details tfoot th{color:var(--ob-navy-900,#313D4D);font-weight:600}
 .woocommerce-order .woocommerce-table--order-details td.product-name a{display:inline-flex;align-items:center;min-height:44px;color:var(--ob-blue-600,#496EA0)}
 .woocommerce-order .woocommerce-table--order-details small,.woocommerce-order .woocommerce-table--order-details .shipped_via{font-size:14px;color:var(--ob-slate-500,#5D6878)}
 .woocommerce-order .woocommerce-customer-details address{font-size:16px;line-height:1.5;padding:16px;border-radius:var(--r-lg,14px)}
 .ob-thankyou ol + p{display:flex;flex-direction:column;gap:12px;margin-top:24px!important;margin-bottom:32px!important}
 .ob-thankyou ol + p .button{margin:0!important;min-height:48px;display:flex;align-items:center;justify-content:center;width:100%}
}

/* S1 (P2): the Save tag is a sales message, not fine print, so it gets 16px on mobile.
   S2 (P3): a wrapped tag started 7px in, because its margin-left:.5em stays at the start of the line. There is no whitespace
   before the tag in the markup, so margin-left:0 alone glued it to the price (tested: gap 0). It wraps at 390/768/1024, and at
   1280 for the variable wording "Save $300 on every option" (product 217). Fix: the tag deliberately drops under the price on
   every product and width, flush left, with a 6px top gap. Its place doesn't depend on price length or tag wording.
   QA P3 (v1.1.30.1, product 217 at 1280): .price-row is a nowrap flex row and both children are flex:0 1 auto, so the
   price's max-content width (both amounts plus the inline tag on one line) took the shrink space and squeezed .fin-link from
   2 lines to 3. Fix: the price takes the free space (flex:1 1 0, min-width:0), and the financing note keeps a fixed
   2-line width at ≥768 (below 768 the row is already a column). */
@media (max-width:767px){
 .ob-st .price .ob-save-tag{font-size:16px;padding:4px 12px}
}
.ob-st .price-row .price .ob-save-tag{display:table;margin:6px 0 0}
@media (min-width:768px){
 .ob-st .price-row > .price{flex:1 1 0;min-width:0}
 .ob-st .price-row > .fin-link{flex:0 0 auto;width:232px;max-width:45%}
}
/* 1024–1279: the buy column is only ~464px, so a side-by-side note is 3 lines on every package (163px wide even before
   1.1.30.1). Here the note drops to its own full-width line under the price, which is 1 line, left aligned. */
@media (min-width:1024px) and (max-width:1279px){
 .ob-st .price-row{flex-wrap:wrap;row-gap:10px}
 .ob-st .price-row > .price{flex:1 1 100%}
 .ob-st .price-row > .fin-link{flex:1 1 100%;width:auto;max-width:none;margin-left:0;justify-content:flex-start;text-align:left;column-gap:.3em}
}
/* N1 (P3, optional): hidden PhotoSwipe UI logged CLS of about 0.06 on 3 of 40 PDP loads. Guard: */
.pswp:not(.pswp--open){display:none}

/* v1.1.30.44: /resources/ (data/pages/resources.html; [ob_res_video] + [ob_res_img] in includes/resources-page.php). Mobile-first; scoped to .ob-res.
   Content is the live oxygenbars.com/resources/ page word for word (catalog/raw/live/resources-browser.html), restyled in the demo design:
   Learn header + 6-card grid (1 col phone, 2 from 768px, 3 from 1024px like live), Owner Support section, blue CTA band.
   Selectors start with body:not(.ob-st-page) .site-main so they outrank ob-site.css:10 heading margins (LESSONS 11:28 PM);
   card-title links and CTA buttons carry extra classes so they also outrank ob-site.css:13 (links) and :15-18 (buttons).
   Buttons/type reuse the site classes (.ob-eyebrow, .ob-subhead, .ob-p, .ob-buttons, a.button, .ob-btn-2). */
body:not(.ob-st-page) .site-main .ob-res{max-width:1100px;margin:0 auto}
body:not(.ob-st-page) .site-main .ob-res-sec{margin:0 0 48px;text-align:center}
body:not(.ob-st-page) .site-main .ob-res .ob-eyebrow{margin:0 0 8px}
body:not(.ob-st-page) .site-main .ob-res-sec h2,body:not(.ob-st-page) .site-main .ob-res-cta h2{margin:0 0 12px;font-size:clamp(28px,5.2vw,40px);line-height:1.15}
body:not(.ob-st-page) .site-main .ob-res-em{font-style:italic;color:var(--ob-blue-600)}
body:not(.ob-st-page) .site-main .ob-res .ob-subhead,body:not(.ob-st-page) .site-main .ob-res-sec > .ob-p{font-size:18px;line-height:1.55;max-width:68ch;margin:0 auto 28px}
/* Cards: whole grid is a role=list; each card = 16:9 media, H3 link, excerpt, "Watch and read" link (44px+ tap row). */
body:not(.ob-st-page) .site-main .ob-res-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;text-align:left}
body:not(.ob-st-page) .site-main .ob-res-card{display:flex;flex-direction:column;min-width:0;margin:0;background:#fff;border:1px solid var(--ob-blue-100);border-radius:14px;overflow:hidden}
body:not(.ob-st-page) .site-main .ob-res-card__media{position:relative;aspect-ratio:16/9;min-height:0;overflow:hidden;background:var(--ob-navy-900)}
body:not(.ob-st-page) .site-main .ob-res-card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 8px}
body:not(.ob-st-page) .site-main .ob-res-card h3.ob-res-card__title{margin:0 0 8px;font-size:19px;line-height:1.3}
body:not(.ob-st-page) .site-main .ob-res .ob-res-card h3.ob-res-card__title a:not(.button):not(.btn):not(.ob-btn){display:flex;align-items:center;min-height:44px;color:var(--ob-navy-900);text-decoration:none}
body:not(.ob-st-page) .site-main .ob-res .ob-res-card h3.ob-res-card__title a:not(.button):not(.btn):not(.ob-btn):hover{color:var(--ob-blue-700);text-decoration:underline}
body:not(.ob-st-page) .site-main .ob-res-card__excerpt{margin:0 0 4px;font-size:16px;line-height:1.5;color:#484F56}
body:not(.ob-st-page) .site-main .ob-res-card__more{margin:auto 0 0}
body:not(.ob-st-page) .site-main .ob-res-card__more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
body:not(.ob-st-page) .site-main .ob-res-card__more a::after{content:"\203A";margin-left:6px;font-size:20px;line-height:1}
body:not(.ob-st-page) .site-main .ob-res-card__more a:hover{text-decoration:underline}
/* Media: card-1 photo and the 16:9 lite video box (poster link; after a click the iframe fills the same box, no layout shift). */
body:not(.ob-st-page) .site-main .ob-res-pic{position:absolute;inset:0;display:block;margin:0}
body:not(.ob-st-page) .site-main .ob-res-pic__img{display:block;width:100%;height:100%;max-width:none;margin:0}
body:not(.ob-st-page) .site-main .ob-res-pic__img{object-fit:cover}
body:not(.ob-st-page) .site-main .ob-res-video{position:relative;width:100%;height:100%;margin:0}
body:not(.ob-st-page) .site-main .ob-res-video__btn,body:not(.ob-st-page) .site-main .ob-res-video__frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;overflow:hidden;background:var(--ob-navy-900)}
body:not(.ob-st-page) .site-main .ob-res-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
body:not(.ob-st-page) .site-main .ob-res-video__icon{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);transition:transform .15s}
body:not(.ob-st-page) .site-main .ob-res-video__btn:hover .ob-res-video__icon,body:not(.ob-st-page) .site-main .ob-res-video__btn:focus-visible .ob-res-video__icon{transform:translate(-50%,-50%) scale(1.1)}
body:not(.ob-st-page) .site-main .ob-res-video__btn:focus-visible{outline:3px solid var(--ob-blue-600);outline-offset:-3px}
body:not(.ob-st-page) .site-main .ob-res-video__cap{margin:8px 0 0;font-size:16px;line-height:1.4;color:#484F56}
/* Buttons: full width on phones, side by side (equal width) from 768px. */
body:not(.ob-st-page) .site-main .ob-res .ob-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0}
body:not(.ob-st-page) .site-main .ob-res .ob-buttons .button{margin:0;flex:1 1 100%}
/* Owner Support: tinted panel. */
body:not(.ob-st-page) .site-main .ob-res-owner{padding:36px 20px;border-radius:16px;background:var(--ob-bg-tint)}
/* Blue CTA band: white text, inverted buttons (same pattern as the home CTA, ob-home.css:38-41). */
body:not(.ob-st-page) .site-main .ob-res-cta{margin:0 0 48px;padding:40px 20px;border-radius:16px;background:var(--ob-blue-600);color:#fff;text-align:center}
body:not(.ob-st-page) .site-main .ob-res-cta h2{color:#fff}
body:not(.ob-st-page) .site-main .ob-res-cta .ob-p{max-width:60ch;margin:0 auto 24px;font-size:18px;line-height:1.55;color:#fff}
body:not(.ob-st-page) .site-main .ob-res-cta a.button:not(.ob-btn-2){background:var(--ob-navy-900);color:#fff;border-color:var(--ob-navy-900)}
body:not(.ob-st-page) .site-main .ob-res-cta a.button:not(.ob-btn-2):hover{background:var(--ob-navy-hover);border-color:var(--ob-navy-hover);color:#fff}
body:not(.ob-st-page) .site-main .ob-res-cta a.button.ob-btn-2{background:#fff;color:var(--ob-navy-900);border-color:#fff;box-shadow:none}
body:not(.ob-st-page) .site-main .ob-res-cta a.button.ob-btn-2:hover{background:var(--ob-blue-50);color:var(--ob-navy-900);border-color:var(--ob-blue-50)}
body:not(.ob-st-page) .site-main .ob-res-cta a.button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (min-width:768px){
 body:not(.ob-st-page) .site-main .ob-res-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.ob-st-page) .site-main .ob-res .ob-buttons{max-width:480px;margin:0 auto;flex-wrap:nowrap}
 body:not(.ob-st-page) .site-main .ob-res .ob-buttons .button{flex:1 1 0}
 body:not(.ob-st-page) .site-main .ob-res-sec{margin-bottom:64px}
 body:not(.ob-st-page) .site-main .ob-res-owner,body:not(.ob-st-page) .site-main .ob-res-cta{padding:56px 40px}
}
@media (min-width:1024px){
 body:not(.ob-st-page) .site-main .ob-res-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}