/** Shopify CDN: Minification failed

Line 256:4 Unexpected "<"

**/
/* Omni product pages (single zone, multi-zone, accessory). Built from the approved pdp2 mockup, scoped under .pd. */.pd{color:var(--ink);font:17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.pd a{color:var(--blue)}
.pd h1,.pd h2,.pd h3{font-family:var(--f-head);letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink)}
.pd p{margin:0}
.pd ul,.pd ol{margin:0;padding:0}
.pd button{font:inherit;color:inherit;cursor:pointer}
.pd :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.pd .crumb a{color:var(--ink-subtle);text-decoration:none}
@media (hover:hover) and (pointer:fine){.pd .crumb a:hover{text-decoration:underline}}
.pd .main-img img{transition:opacity .15s}
.pd .opt-h{font-size:15px;font-weight:600;margin:4px 0 8px}
.pd .opts{display:flex;flex-wrap:wrap;gap:8px}
.pd .opt{border:1.5px solid var(--line-strong);background:#fff;border-radius:10px;padding:9px 14px;font-weight:600;font-size:15.5px;line-height:1.25;text-align:center}
.pd .opt small{display:block;font-weight:400;font-size:13px;color:var(--ink-subtle)}
.pd .opt[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue);background:var(--blue-soft)}
.pd .opt[disabled]{opacity:.45;text-decoration:line-through}
.pd .size[disabled]{opacity:.45}
.pd .sizes--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pd .sizes--n2,.pd .sizes--n1{grid-template-columns:repeat(2,minmax(0,1fr))}
.pd .msg{border-radius:10px;padding:10px 12px;font-size:15px;background:#fdecec;color:#7f1d1d}
.pd .msg[hidden]{display:none}
.pd .btn[disabled]{opacity:.55;cursor:not-allowed}
.pd .soldout{font-size:15px;color:var(--warn);font-weight:600}
.pd .more{margin-top:24px}
.pd .more summary{cursor:pointer;font-weight:700;font-family:var(--f-head);font-size:19px}
.pd .rte{margin-top:14px;color:var(--ink-muted);max-width:75ch}
.pd .rte img{max-width:100%;height:auto}
.pd .rte h1,.pd .rte h2,.pd .rte h3{font-size:20px;margin:18px 0 6px}
.pd .rte p{margin:0 0 12px}
.pd .rte ul{padding-left:20px;margin:0 0 12px}
.pd .uitem select{font:inherit;font-size:13px;margin-top:3px;padding:2px 4px;border:1px solid var(--line-strong);border-radius:6px;background:#fff}

.pd .lenmeter strong.over{color:#c2410c}
.pd .acc-specs{margin-top:20px}
@media (max-width:560px){.pd .sizes--n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd{
  --ink:#121214; --ink-muted:#363845; --ink-subtle:#565866;
  --line:#e1e3ea; --line-strong:#cfd2dc; --surface:#ffffff; --sunk:#f4f5f8;
  --blue:#212edd; --blue-dark:#1823b8; --blue-soft:#eef0fd; --teal:#086f73; --teal-soft:#e6f3f2;
  --navy:#1c2a5e; --sun:#fff8e1; --star:#00b67a; --warn:#b45309;
  --f-head:"Space Grotesk",system-ui,sans-serif; --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
.pd .wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pd .ck{width:20px;height:20px;flex:none;stroke:var(--teal);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pd .crumb{font-size:14px;color:var(--ink-subtle);padding-block:16px 12px}
.pd .top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:start;padding-bottom:40px}
@media (max-width:960px){.pd .top{grid-template-columns:1fr;gap:24px}}
.pd .gallery{position:sticky;top:16px;display:flex;flex-direction:column;gap:10px}
@media (max-width:960px){.pd .gallery{position:static}}
.pd .main-img{border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:1;background:#fff;position:relative}
.pd .main-img img{width:100%;height:100%;object-fit:contain}
.pd .main-img .badge{position:absolute;left:14px;top:14px;background:var(--teal);color:#fff;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px}
.pd .thumbs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.pd .thumbs button{border:1.5px solid var(--line);border-radius:8px;padding:0;overflow:hidden;aspect-ratio:1;background:#fff}
.pd .thumbs button[aria-current="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.pd .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pd .buy{display:flex;flex-direction:column;gap:18px}
.pd .eyebrow{font-size:14px;font-weight:600;color:var(--teal);letter-spacing:.02em}
.pd .buy h1{font-size:clamp(28px,3vw,36px);line-height:1.15;margin-top:4px}
.pd .rating{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-muted);flex-wrap:wrap}
.pd .stars{display:inline-flex;gap:2px}
.pd .stars i{width:20px;height:20px;background:var(--star);display:grid;place-items:center}
.pd .stars svg{width:14px;height:14px;fill:#fff}
.pd .rating a{color:var(--ink-muted)}
.pd .price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pd .price{font-family:var(--f-head);font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pd .price-note{font-size:15px;color:var(--ink-muted)}
.pd .price-note b{color:var(--teal)}
.pd .pick-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pd .pick-h h2{font-size:18px}
.pd .pick-h a{font-size:15px}
.pd .sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:560px){.pd .sizes{grid-template-columns:repeat(2,minmax(0,1fr))}.pd .size:last-child{grid-column:1/-1}}
.pd .size{border:1.5px solid var(--line-strong);background:#fff;border-radius:10px;padding:10px 8px;text-align:center;line-height:1.25}
.pd .size b{display:block;font-family:var(--f-head);font-size:18px}
.pd .size small{display:block;font-size:13px;color:var(--ink-subtle)}
@media (hover:hover) and (pointer:fine){.pd .size:hover{border-color:var(--ink-subtle)}}
.pd .size[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue);background:var(--blue-soft)}
.pd .fit{background:var(--sunk);border-radius:10px;padding:12px 14px;font-size:15.5px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start}
.pd .fit .ck{margin-top:3px}
.pd .cta{display:flex;flex-direction:column;gap:10px}
.pd .btn{display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:10px;font-weight:700;font-size:18px;padding:17px 22px;text-decoration:none;transition:background .15s}
.pd .btn--buy{background:var(--blue);color:#fff}
@media (hover:hover) and (pointer:fine){.pd .btn--buy:hover{background:var(--blue-dark)}}
.pd .btn--buy svg{width:20px;height:20px}
.pd .ship-line{display:flex;gap:10px;font-size:15.5px;color:var(--ink-muted);align-items:flex-start}
.pd .ship-line svg{width:22px;height:22px;flex:none;stroke:var(--ink-muted);fill:none;stroke-width:1.8;margin-top:1px}





.pd .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.pd .answers{grid-template-columns:1fr}}
.pd .ans{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;gap:12px}
.pd .ans svg{width:28px;height:28px;flex:none;stroke:var(--teal);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pd .ans b{display:block;font-size:15.5px;line-height:1.3}
.pd .ans span{font-size:14px;color:var(--ink-subtle);line-height:1.4;display:block;margin-top:2px}
.pd .trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px;color:var(--ink-muted);border-top:1px solid var(--line);padding-top:14px}
.pd .trust span{display:inline-flex;gap:6px;align-items:center}
.pd .trust .ck{width:17px;height:17px}
.pd .jump{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-block:1px solid var(--line)}
.pd .jump .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.pd .jump a{white-space:nowrap;text-decoration:none;color:var(--ink-muted);font-weight:600;font-size:15px;padding:8px 14px;border-radius:999px}
@media (hover:hover) and (pointer:fine){.pd .jump a:hover{background:var(--sunk);color:var(--ink)}}
.pd .jump a.on{background:var(--ink);color:#fff}
.pd .sec{padding-block:56px;scroll-margin-top:64px}
.pd .sec--sunk{background:var(--sunk)}
.pd .sec h2{font-size:clamp(26px,2.6vw,32px);line-height:1.15}
.pd .sec .lead{font-size:18px;color:var(--ink-muted);margin-top:8px;max-width:64ch}
.pd .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:28px;align-items:start}
@media (max-width:900px){.pd .two{grid-template-columns:1fr}}
.pd .list{list-style:none;display:flex;flex-direction:column;gap:12px}
.pd .list li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.pd .list .ck{margin-top:4px}
.pd .panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.pd .panel h3{font-size:20px;margin-bottom:4px}
.pd .panel .sub{font-size:15.5px;color:var(--ink-subtle);margin-bottom:14px}
.pd .box-img{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:20px}
.pd .box-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}











.pd .btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong)}
@media (hover:hover) and (pointer:fine){.pd .btn--ghost:hover{background:var(--sunk)}}
.pd .tbl{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pd .tbl table{border-collapse:collapse;width:100%;min-width:620px;font-size:16px;font-variant-numeric:tabular-nums}
.pd .tbl th,.pd .tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.pd .tbl tr:last-child td{border-bottom:0}
.pd .tbl thead th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle);background:#fafbfc}
.pd .tbl tr.sel td{background:var(--blue-soft);font-weight:600}
.pd .tbl tr.sel td:first-child{box-shadow:inset 4px 0 0 var(--blue)}
.pd .tbl td .pick{background:none;border:0;padding:0;color:var(--blue);text-decoration:underline;font-weight:600}
.pd .tip{margin-top:16px;display:flex;gap:10px;font-size:16px;color:var(--ink-muted);background:var(--sun);border-radius:10px;padding:12px 14px}
.pd .tip b{color:var(--ink)}
.pd .steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
@media (max-width:900px){.pd .steps{grid-template-columns:1fr}}
.pd .steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:6px}
.pd .steps li::before{content:"Step " counter(s);font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.04em;text-transform:uppercase}
.pd .steps b{font-family:var(--f-head);font-size:18px}
.pd .steps span{font-size:15.5px;color:var(--ink-muted)}
.pd .tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pd .tools span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:15px}
.pd .quote{border-left:4px solid var(--star);padding:4px 0 4px 16px;font-size:17px;color:var(--ink-muted)}
.pd .quote cite{display:block;font-style:normal;font-size:14.5px;color:var(--ink-subtle);margin-top:4px}
.pd .honest{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.pd .honest h3{font-size:19px}
.pd .honest p{font-size:16px;color:var(--ink-muted)}
.pd .specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:24px}
@media (max-width:800px){.pd .specs{grid-template-columns:1fr}}
.pd .specs div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.pd .specs dt{color:var(--ink-subtle)}
.pd .specs dd{margin:0;font-weight:600;text-align:right}
.pd .docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px}
@media (max-width:800px){.pd .docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd .docs a{border:1px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15.5px;display:flex;gap:10px;align-items:center;background:#fff}
@media (hover:hover) and (pointer:fine){.pd .docs a:hover{border-color:var(--ink-subtle)}}
.pd .docs svg{width:26px;height:26px;flex:none;stroke:#c2410c;fill:none;stroke-width:1.7}
.pd .docs small{display:block;font-weight:400;color:var(--ink-subtle);font-size:13px}
.pd .warr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
@media (max-width:800px){.pd .warr{grid-template-columns:1fr}}
.pd .warr div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.pd .warr b{display:block;font-family:var(--f-head);font-size:34px;line-height:1.1;color:var(--teal)}
.pd .warr span{font-size:16px;color:var(--ink-muted)}
.pd .shipgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
@media (max-width:900px){.pd .shipgrid{grid-template-columns:1fr}}
.pd .shipgrid .panel{display:flex;flex-direction:column;gap:10px}
.pd .shipgrid .panel p{font-size:16px;color:var(--ink-muted)}
.pd .timeline{display:flex;gap:0;margin-top:4px}
.pd .timeline div{flex:1;border-top:4px solid var(--teal);padding-top:8px;font-size:14.5px;color:var(--ink-subtle)}
.pd .timeline div+div{border-top-color:#7fb7b5;margin-left:4px}
.pd .timeline b{display:block;color:var(--ink);font-size:16px}
.pd .alert{background:#fdecec;color:#7f1d1d;border-radius:10px;padding:12px 14px;font-size:15.5px}
.pd .alert b{color:#7f1d1d}





.pd .faqwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;margin-top:20px}
@media (max-width:900px){.pd .faqwrap{grid-template-columns:1fr}}
.pd .faq details{border-bottom:1px solid var(--line);padding:16px 0}
.pd .faq summary{font-weight:600;font-size:17.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.pd .faq summary::-webkit-details-marker{display:none}
.pd .faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--ink-subtle)}
.pd .faq details[open] summary::after{content:"–"}
.pd .faq details p{margin-top:10px;color:var(--ink-muted);max-width:70ch}
.pd .side{background:var(--blue-soft);border-radius:14px;padding:22px;align-self:start;display:flex;flex-direction:column;gap:8px;position:sticky;top:76px}
.pd .side h3{font-size:19px}
.pd .side p{font-size:16px;color:var(--ink-muted)}
.pd .side .tel{font-family:var(--f-head);font-size:24px;font-weight:700;color:var(--blue);user-select:all}
.pd .final{background:var(--navy);color:#fff;padding-block:48px}
.pd .final .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.pd .final h2{color:#fff;font-size:clamp(24px,2.6vw,30px)}
.pd .final p{color:#cfd6f2;margin-top:6px}
.pd .final .btn--buy{background:#fff;color:var(--navy)}
@media (hover:hover) and (pointer:fine){.pd .final .btn--buy:hover{background:#e6e9fb}}
@media (max-width:760px){.pd .final .wrap{grid-template-columns:1fr}}
.pd .bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line-strong);box-shadow:0 -6px 20px rgba(18,18,20,.08);transform:translateY(110%);transition:transform .2s;padding-bottom:env(safe-area-inset-bottom,0px)}
.pd .bar.show{transform:none}
.pd .bar .wrap{display:flex;align-items:center;gap:16px;padding-block:10px}
.pd .bar img{width:48px;height:48px;object-fit:contain;border-radius:6px;border:1px solid var(--line)}
.pd .bar .t{min-width:0;flex:1;line-height:1.25}
.pd .bar .t b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd .bar .t span{font-size:14px;color:var(--ink-subtle)}
.pd .bar .p{font-family:var(--f-head);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.pd .bar .btn{padding:12px 20px;font-size:16px}
@media (max-width:560px){.pd .bar img,.pd .bar .t span{display:none}.pd .bar .p{font-size:19px}}
.pd .upsell{border:1.5px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;background:#fff}
.pd .upsell .pick-h{align-items:center}
.pd .upsell .pick-h h2{font-size:17px}
.pd .upsell__all{border:1.5px solid var(--blue);background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:13.5px;border-radius:999px;padding:5px 12px;white-space:nowrap}

.pd .upsell__list{display:flex;flex-direction:column}
.pd .uitem{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.pd .uitem:first-child{border-top:0}
.pd .uitem input{width:20px;height:20px;accent-color:var(--blue);margin:0}
.pd .uitem img{width:44px;height:44px;object-fit:contain;background:var(--sunk);border-radius:6px}
.pd .uitem b{display:block;font-size:15px;line-height:1.25}
.pd .uitem small{display:block;font-size:13px;color:var(--ink-subtle);line-height:1.3}
.pd .uitem .p{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.pd .uitem.is-on{background:linear-gradient(90deg,var(--blue-soft),transparent)}
.pd .share{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:16px}
.pd .share h3{font-size:20px}
.pd .share > p{font-size:16px;color:var(--ink-muted);max-width:70ch}














.pd .btu-note{font-size:14.5px;color:var(--ink-muted);background:var(--teal-soft);border-radius:10px;padding:10px 12px}
.pd .btu-note b{color:var(--ink)}
.pd </style>

<div class="mockbar"><div class="wrap" style="display:flex;gap:12px;align-items:center;flex-wrap:wrap"><span>Draft mockups,.pd not live &middot; real prices and photos</span><span class="tabs"><a href="#single" data-tab="single">Single zone</a><a href="#multi" data-tab="multi">Multi-zone</a><a href="#acc" data-tab="acc">Accessory</a></span></div></div>

.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pd .mz-what{display:flex;gap:8px;flex-wrap:wrap}
.pd .mz-what span{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:var(--teal);font-weight:600;font-size:14px;padding:5px 11px;border-radius:999px}
.pd .rooms{display:flex;flex-direction:column;gap:8px}
.pd .room{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:#fff}
.pd .room__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pd .room__top b{font-family:var(--f-head);font-size:17px}
.pd .room__top span{font-size:14px;color:var(--ink-subtle)}
.pd .room__top em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.pd .lens{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.pd .len{border:1.5px solid var(--line-strong);background:#fff;border-radius:8px;padding:7px 2px;text-align:center;line-height:1.15}
.pd .len b{display:block;font-size:15px}
.pd .len small{display:block;font-size:11.5px;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
.pd .len[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 0 0 1px var(--teal)}
.pd .len--long small{color:#212edd}
@media (max-width:560px){.pd .lens{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pd .lenmeter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-muted)}
.pd .lenmeter i{display:block;height:8px;border-radius:8px;background:var(--sunk);overflow:hidden}
.pd .lenmeter i b{display:block;height:100%;background:var(--teal);border-radius:8px;transition:width .2s}
.pd .lenmeter.over i b{background:#c2410c}
.pd .lenmeter strong{font-variant-numeric:tabular-nums;color:var(--ink)}
.pd .howlong{font-size:14.5px;color:var(--ink-muted);background:var(--sun);border-radius:10px;padding:10px 12px}
.pd .howlong b{color:var(--ink)}
.pd .coupler{font-size:14px;color:#212edd;margin:0}
.pd .sum{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:15.5px}
.pd .sum div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.pd .sum div span{color:var(--ink-muted)}
.pd .sum .tot{border-top:2px solid var(--ink);padding-top:8px;margin-top:2px;font-weight:700;font-size:18px}
.pd .sum .tot span{color:var(--ink)}
.pd .plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
@media (max-width:800px){.pd .plan{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd .plan div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px}
.pd .plan div b{font-family:var(--f-head);font-size:22px}
.pd .plan div span{font-size:15px;color:var(--ink-muted)}
.pd .plan div small{font-size:13.5px;color:var(--teal);font-weight:600}
.pd .limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
@media (max-width:800px){.pd .limits{grid-template-columns:1fr}}
.pd .limits div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.pd .limits b{display:block;font-family:var(--f-head);font-size:26px;color:var(--teal)}
.pd .limits span{font-size:15px;color:var(--ink-muted)}






.pd .qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:10px;overflow:hidden}
.pd .qty button{background:#fff;border:0;width:44px;height:52px;font-size:20px}
.pd .qty span{min-width:40px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.pd .ctarow{display:flex;gap:10px;align-items:stretch}
.pd .ctarow .btn{flex:1}
.pd .vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media (max-width:760px){.pd .vs{grid-template-columns:1fr}}
.pd .vs div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
.pd .vs div.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.pd .vs h3{font-size:19px}
.pd .vs p{font-size:15.5px;color:var(--ink-muted)}
.pd .vs .tag{align-self:flex-start;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.pd .pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (max-width:800px){.pd .pair{grid-template-columns:1fr}}
.pd .pair a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink)}
.pd .pair img{width:64px;height:64px;object-fit:contain;background:var(--sunk);border-radius:8px}
.pd .pair b{display:block;font-size:15.5px}
.pd .pair small{font-size:14px;color:var(--ink-subtle)}
@media (max-width:560px){.pd .room__top{flex-direction:column;align-items:flex-start;gap:2px}}.pd .price-row{align-items:center}
.pd .price-note{line-height:1.45}
.pd a.tel,.pd a.tel small{text-decoration:none}
@media (hover:hover) and (pointer:fine){.pd a.tel:hover{text-decoration:underline}}

/* ===== Declutter (product pages): more air, fewer boxes ===== */.pd .buy{gap:24px}
.pd .top{padding-bottom:48px}
.pd .sec{padding-block:72px}
.pd .sec .lead{margin-top:10px}
.pd .two{margin-top:32px;gap:48px}
.pd .rating{font-size:14.5px}
.pd .mz-what span{font-size:13.5px;padding:4px 10px}
.pd .btu-note{font-size:14px;padding:10px 12px}

/* line set picker: one calm row per room */












.pd .lenmeter{font-size:13.5px}
.pd .sum{border:0;background:var(--sunk);padding:14px 16px}

/* add-ons: folded by default */.pd .upsell{gap:10px;padding:16px}
.pd .upsell__picked{font-size:14.5px;color:var(--ink-subtle);margin:0}
.pd .upsell__picked.is-on{color:var(--ink)}
.pd .upsell__picked b{color:var(--teal)}
.pd .upsell__tot{font-weight:700;color:var(--ink);white-space:nowrap}
.pd .upsell__more{align-self:flex-start;border:0;background:none;padding:0;color:var(--blue);font-weight:600;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}

/* call: one line under the button */.pd .callline{font-size:14.5px;color:var(--ink-subtle);margin:0}
.pd .callline a{font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.pd .callline span{white-space:nowrap}

/* feature boxes and trust row: strip under the buy box */.pd .pd-why{border-top:1px solid var(--line);padding:28px 0 8px;display:grid;gap:18px}
.pd .answers--strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.pd .answers--strip .ans{border:0;padding:0}
.pd .pd-why .trust{border-top:0;padding-top:0;justify-content:center}

/* "Will it fit your home?": every room on one row */.pd .plan{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.pd .plan--many div{padding:14px}
.pd .plan--many div b{font-size:18px}
.pd .plan--many div span{font-size:13.5px}
@media (max-width:900px){.pd .plan,.pd .plan--many{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd .two{align-items:center}
.pd .timeline--3 div:nth-child(1){border-top-color:var(--navy)}
.pd .timeline--3 div:nth-child(2){border-top-color:var(--teal)}
.pd .timeline--3 div:nth-child(3){border-top-color:#7fb7b5}
.pd .timeline--3{display:grid;gap:10px}
.pd .timeline--3 div{border-top:0;border-left:4px solid var(--teal);margin-left:0!important;padding:2px 0 2px 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pd .timeline--3 div:nth-child(1){border-left-color:var(--navy)}
.pd .timeline--3 div:nth-child(2){border-left-color:var(--teal)}
.pd .timeline--3 div:nth-child(3){border-left-color:#7fb7b5}
.pd .timeline--3 b{display:inline;min-width:112px}
/* add-ons picked: bigger text and a row of thumbnails */.pd .upsell__picked{font-size:15.5px}
.pd .upsell__picked.is-on{display:grid;gap:10px}
.pd .pk-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px}
.pd .pk-head b{color:var(--teal)}
.pd .upsell__tot{font-size:17px}
.pd .pk-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pd .pk{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.pd .pk__img{flex:none;width:44px;height:44px;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.pd .pk__img img{width:40px;height:40px;object-fit:contain}
.pd .pk__t{display:grid;font-size:14px;line-height:1.25;color:var(--ink)}
.pd .pk__t small{font-size:12px;color:var(--ink-subtle)}
.pd .pk__t b{font-size:13.5px}
.pd .pk{position:relative;padding-right:30px}
.pd .pk__x{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:0;background:#fde8e7;color:#d92d20;font-size:16px;line-height:22px;padding:0;display:grid;place-items:center}
@media (hover:hover) and (pointer:fine){.pd .pk__x:hover{background:#d92d20;color:#fff}}
.pd .pk-head__r{display:flex;align-items:baseline;gap:12px}
.pd .pk-clear{border:0;background:none;padding:0;color:#d92d20;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.pd .pk-row{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.pd .pk-row{grid-template-columns:1fr}}
/* line set picker: light tint of the selection green so it stands out */



/* added tiles: roomier, line set cover tile full width with its color choice */.pd .pk{padding:10px 40px 10px 10px;gap:12px}
.pd .pk__x{right:10px}
.pd .pk__t{gap:2px}
.pd .pk__n{font-size:14.5px;font-weight:600;white-space:nowrap}
.pd .pk--cov{grid-column:1/-1}
.pd .pk--cov .pk__t{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pd .pk__sel{font:inherit;font-size:14px;padding:5px 26px 5px 10px;border:1.5px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink)}


/* added tiles: cover on its own row, the rest three across */.pd .pk-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.pd .pk:not(.pk--cov){padding:8px 32px 8px 8px;gap:8px}
.pd .pk:not(.pk--cov) .pk__img{width:38px;height:38px}
.pd .pk:not(.pk--cov) .pk__img img{width:34px;height:34px}
.pd .pk:not(.pk--cov) .pk__x{right:6px}
@media (max-width:480px){.pd .pk-row{grid-template-columns:1fr}}
.pd .answers--strip .ans span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd .answers--strip .ans p{min-width:0}
.pd .answers--strip .ans{align-items:center;gap:14px}
.pd .answers--strip .ans svg{width:36px;height:36px;stroke-width:1.6}
.pd .callline--sep{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px}
.pd .callline--sep svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linejoin:round}
.pd .callline__h{color:var(--ink-subtle);white-space:nowrap}
.pd .cta .ship-line{justify-content:center;text-align:center;align-items:center}
.pd .callline--sep{justify-content:center;text-align:center}
.pd .cta .ship-line{display:block;text-align:center}
.pd .cta .ship-line svg{display:inline-block;vertical-align:-5px;margin-right:6px}
.pd .room__top > span{color:var(--ink)}
.pd .room__top b{color:var(--ink)}
.pd .room__top span span{color:var(--ink-muted)}



/* single zone: indoor unit choice (18K cassette) */#pd-indoor{margin-top:22px}
.pd .indoors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.pd .indoor{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:10px;background:#fff;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pd .indoor[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue);background:var(--blue-soft)}
.pd .indoor__img{display:grid;place-items:center;flex:0 0 76px;height:48px;border-radius:8px;background:#f4f6f9}
.pd .indoor__img img{max-width:68px;max-height:40px;width:auto;height:auto}
.pd .indoor__t b{display:block;font-family:var(--f-head);font-size:16px;line-height:1.25}
.pd .indoor__t small{display:block;margin-top:2px;font-size:13.5px;color:var(--ink-subtle)}
.pd .indoor__t em{display:block;margin-top:4px;font-style:normal;font-weight:700;font-size:15px}
.pd .indoor__note{margin:10px 0 0;font-size:14.5px;line-height:21px;color:var(--ink-muted)}
@media (max-width:560px){.pd .indoors{grid-template-columns:1fr}}
/* phones/tablets: one column that can't grow past the screen */@media (max-width:960px){.pd .top{grid-template-columns:minmax(0,1fr)}.pd .top>*{min-width:0}}
/* readability: line set prices and room bar labels at 13px+ */.pd button.len small{font-size:13px}



/* phones: the call line wraps after the number instead of running off the screen */@media (max-width:560px){.pd .callline--sep>span{white-space:normal;min-width:0}.pd .callline--sep .callline__h{display:block;margin-top:2px}}

/* brand line is part of the H1 for search; it keeps its small blue look */.pd h1.pd-h1{margin:0}
.pd h1.pd-h1 .eyebrow{display:block;margin:0 0 4px;font:600 14px/22.4px var(--f-body);letter-spacing:.02em;color:var(--teal)}
.pd h1.pd-h1 .pd-h1__t{display:block}

/* desktop: thumbnails in a column on the left of the main photo */@media (min-width:961px){.pd .top .gallery{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:12px}.pd .top .gallery .main-img{grid-column:2;grid-row:1}.pd .top .gallery .thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 32px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.pd .top .gallery .thumbs button{width:76px;flex:none}}

/* thumbnails: show the whole photo, no cropping */.pd .thumbs img{object-fit:contain;padding:3px}
/* accessories are optional: warm tint + Optional tag */.pd .upsell{background:#e6f3f2;border:1.5px solid #086f73}
.pd .upsell__opt{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 9px;border-radius:999px;background:#fff;color:#086f73;border:1px solid #9fcdc9;font:700 12.5px/1.4 var(--font-body);letter-spacing:.02em}

/* selected thumbnail: draw the thick border inside, so the scrolling column cannot clip one side */.pd .thumbs button[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--blue)}

/* buy column: fewer, clearer blocks with more air between them */.pd .buy{gap:30px}
.pd .step1{display:flex;flex-direction:column;gap:12px}
.pd .step1 .pick-h{align-items:baseline}
.pd .howlong-btn{border:0;background:none;padding:0;color:var(--blue);font:600 14.5px/1.3 var(--font-body);white-space:nowrap;cursor:pointer}
.pd .howlong-btn::after{content:" +"}
.pd .howlong-btn[aria-expanded="true"]::after{content:" \2212"}
@media (hover:hover) and (pointer:fine){.pd .howlong-btn:hover{text-decoration:underline}}
.pd .howlong[hidden]{display:none}



/* order summary: small second line under shipping and tax */.pd .sum div{align-items:baseline}
.pd .sum div span small{display:block;font-size:13.5px;color:var(--ink-subtle);margin-top:1px}

/* accessories title row: title, Optional tag and button on one center line */.pd .upsell .pick-h{align-items:center}.pd .upsell .pick-h h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;line-height:1.3}.pd .upsell .upsell__opt{margin-left:0;vertical-align:baseline}

/* accessories box: light green background, everything inside in dark green */.pd .upsell{--blue:#086f73;--blue-soft:#d3ebe8;--teal:#086f73;--sunk:#f5faf9}.pd .upsell .upsell__all{background:#086f73;border-color:#086f73;color:#fff}@media (hover:hover) and (pointer:fine){.pd .upsell .upsell__all:hover{background:#065a5d}}.pd .upsell .pk{border-color:#9fcdc9}

/* picked accessory photos fill their square (no white frame) */.pd .upsell .pk__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.14)}

/* order summary in groups: system, accessories, shipping and tax, total */.pd .sum{gap:0;padding:6px 18px 16px}
.pd .sum .sum-g{display:block;padding:12px 0;border-bottom:1px solid var(--line-strong)}
.pd .sum .sum-h{display:flex;justify-content:space-between;margin:0 0 6px;font:700 12.5px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle)}
.pd .sum .sum-g--acc .sum-h span:last-child{color:var(--ink);letter-spacing:0;font-size:14px}
.pd .sum .sum-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
.pd .sum .sum-r span{color:var(--ink);font-size:15.5px}
.pd .sum .sum-r b{font-weight:600;font-size:15.5px;color:var(--ink)}
.pd .sum .sum-r small{display:block;font-size:13.5px;color:var(--ink-subtle);margin-top:1px}
.pd .sum .sum-g--acc .sum-r span,.pd .sum .sum-g--acc .sum-r b{font-size:14.5px;color:var(--ink-muted);font-weight:400}

.pd .sum .tot{border-top:0;margin-top:0;padding-top:14px}

/* summary group titles all the same, darker; their amounts on the right in plain dark text */.pd .sum .sum-h{color:var(--ink);font-size:13px}
.pd .sum .sum-h span:last-child{color:var(--ink);letter-spacing:0;font-size:15px;text-transform:none;font-weight:700}
.pd .sum .sum-note{margin:0;font-size:13.5px;color:var(--ink-subtle)}
.pd .sum .sum-g + .sum-g{border-top:0}

/* step 2 title sits above the green box, like step 1 above the rooms */.pd .step2{display:flex;flex-direction:column;gap:12px;--blue:#086f73;--blue-soft:#d3ebe8;--teal:#086f73}
.pd .step2 > .pick-h{align-items:center}
.pd .step2 > .pick-h h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;line-height:1.3;font-size:18px}
.pd .step2 .upsell__opt{margin-left:0}
.pd .step2 .upsell__all{background:#086f73;border-color:#086f73;color:#fff}
@media (hover:hover) and (pointer:fine){.pd .step2 .upsell__all:hover{background:#065a5d}}

/* line between step 1 and step 2 */.pd .step2{border-top:1px solid var(--line-strong,#d5d7e0);padding-top:26px}

/* summary titles use the same font and weight as the step titles */.pd .sum .sum-h,.pd .sum .sum-h span:last-child{font:700 18px/1.3 var(--font-display);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.pd .sum .sum-h{margin-bottom:4px}

/* line between the price and step 1 */.pd .step1,.pd #pd-options:not(:empty){border-top:1px solid var(--line-strong,#d5d7e0);padding-top:26px}


/* single zone: line above step 2 too; accessories amount same size as the other summary amounts */.pd #pd-indoor:not(:empty){border-top:1px solid var(--line-strong,#d5d7e0);padding-top:26px}
.pd .sum .sum-g--acc .sum-h span:last-child{font:700 18px/1.3 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
/* features strip under the product: more air */.pd .pd-why{padding:44px 0 28px;gap:30px;margin-top:16px}
.pd .answers--strip{gap:28px 20px}

/* top of the buy column: title, indoor units and price sit closer together */.pd .buy > .pd-units{margin-top:-14px}
.pd .buy > .price-row{margin-top:-10px}
.pd .pd-units{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#f7f8fb}
.pd .pd-units p{margin:0}
.pd .pd-units__l{display:block;font-size:13.5px;color:var(--ink-subtle);margin-bottom:2px}
.pd .pd-units__v{display:block;font:700 21px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.pd .pd-units__sq{padding:7px 14px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font:600 15px/1.3 var(--font-body)}
.pd .rating--foot{justify-content:center;margin-top:-14px}

/* line set buttons: a little more room between the length and its price */.pd .len{padding:11px 2px}
.pd .len small{margin-top:8px}

/* reviews line sits right above Add to cart (under the total on multi-zone) */.pd .rating--buy{justify-content:center;margin:-16px 0 -14px}

/* room size sentence sits right under the size buttons */.pd #pd-options + .fit{margin-top:-16px}

/* Build your own link inside the indoor units box; more room around the reviews line */.pd .pd-units__mix{flex-basis:100%;font-size:14.5px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pd .rating--buy{margin:-8px 0 -6px}

/* room size sentence: smaller so it fits one line, and less space under it */.pd #pd-options + .fit{font-size:14px;padding:10px 14px;align-items:center}
.pd #pd-options + .fit .ck{margin-top:0}
.pd #pd-options + .fit + #pd-indoor,.pd #pd-options + .fit + .step2{margin-top:-10px}

/* equal space above and below every separator line in the buy column: 26px both sides */.pd .buy{gap:26px}
.pd .step1,.pd .step2,.pd #pd-options:not(:empty),.pd #pd-indoor:not(:empty){padding-top:26px}
.pd #pd-options + .fit + #pd-indoor,.pd #pd-options + .fit + .step2{margin-top:0}
.pd #pd-options + .fit{margin-top:-12px}
.pd .buy > .pd-units{margin-top:-10px}
.pd .buy > .price-row{margin-top:-6px}
.pd .rating--buy{margin:-4px 0 -2px}
.pd .callline--sep{margin-top:0;padding-top:26px}
.pd .buy > .price-row{margin-top:0}

/* summary: all main amounts the same font, weight and size (16px) */.pd .sum .sum-h span:last-child,.pd .sum .sum-g--acc .sum-h span:last-child,.pd .sum .sum-g:first-child .sum-r b{font:700 16px/1.3 var(--font-display);letter-spacing:0;color:var(--ink)}

/* shipping times inside the total box (multi-zone); reviews right under Add to cart */.pd .sum .sum-ship{margin:6px 0 0;font-size:13.5px;color:var(--ink-subtle)}
.pd .rating--buy{margin:-10px 0 0}

/* Add to cart lifts a little on hover, like the other buttons */.pd .btn--buy{transition:background .15s,translate .18s ease,box-shadow .18s ease}
@media (hover:hover) and (pointer:fine){.pd .btn--buy:not([disabled]):hover{translate:0 -3px;box-shadow:0 8px 18px rgba(20,25,70,.18)}}
@media (prefers-reduced-motion:reduce){@media (hover:hover) and (pointer:fine){.pd .btn--buy:not([disabled]):hover{translate:none}}}

/* indoor units box: room size pill plus a gray 230V pill */.pd .pd-units__tags{display:flex;flex-wrap:wrap;gap:8px}
.pd .pd-units__v230{padding:7px 14px;border-radius:999px;background:#e9ebf1;color:var(--ink-muted);font:600 15px/1.3 var(--font-body)}

/* shipping line in the total box links to the shipping page */.pd .sum .sum-ship a{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.pd .sum .sum-ship a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}}

/* indoor unit card pictures on a white background so the white units stand out */.pd .indoors .indoor__img,.pd .indoor .indoor__img{background:#fff;border:1px solid var(--line)}

/* accessories note: darker text so it reads clearly on the green */.pd .upsell .upsell__picked{color:var(--ink)}

/* sticky bar: line set lengths with a Change button, shown on phones too */.pd .bar .bar-ls{border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--ink-subtle);cursor:pointer;text-align:left}
.pd .bar .bar-ls u{color:var(--blue);font-weight:600;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.pd .bar .bar-ls:hover u{color:var(--blue-dark)}}
@media (max-width:560px){.pd .bar .t .bar-ls,.pd .bar .t .bar-ls span{display:inline}.pd .bar .t .bar-ls{font-size:13px}}
.pd .main-img img{object-fit:contain}

/* section menu: active pill in dark green */.pd .jump a.on{background:#086f73;color:#fff}

/* features strip: same content, cleaner layout. Columns with thin dividers, trust points as light pills on their own row */.pd .pd-why{padding:40px 0;gap:28px}
@media (min-width:961px){
.pd .answers--strip{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:0}
.pd .answers--strip .ans{padding:2px 24px;border-left:1px solid var(--line)}
.pd .answers--strip .ans:first-child{border-left:0;padding-left:0}
}
.pd .answers--strip .ans b{font-size:15.5px}
.pd .answers--strip .ans span{margin-top:3px}
.pd .pd-why .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pd .pd-why .trust > span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--sunk);font-size:14px;color:var(--ink-muted)}
.pd .answers--strip .ans span{white-space:normal;overflow:visible;text-overflow:clip}
.pd .answers--strip .ans{align-items:flex-start}
.pd .answers--strip .ans svg{margin-top:2px}

/* section menu: soft light blue active pill on every product page */.pd .jump a.on{background:#eef0fd;color:#212edd;box-shadow:inset 0 0 0 1px #c9cff8}

/* section intros use the full width, so short ones stay on one line */.pd .lead,.pd .sec .lead{max-width:none}

/* how far one indoor unit's air reaches: floor plan (tablet/desktop) or 3 cards (phones) */.pd .af{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.pd .af h3{font:700 22px/1.25 var(--font-display);margin:0}
.pd .af-lead{margin:6px 0 0;font-size:16.5px;color:var(--ink-muted)}
.pd .af-plan{display:block;width:100%;height:auto;margin-top:20px}
.pd .af-n{font:700 20px var(--font-body);text-anchor:middle}.pd .af-p{font:700 26px var(--font-display);text-anchor:middle}
.pd .af-s{font:500 14px var(--font-body);text-anchor:middle}.pd .af-u{font:700 13px var(--font-body);text-anchor:middle;dominant-baseline:middle}
.pd .af-cards{display:none}
.pd .af-legend{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px}
.pd .af-legend>b{font:700 15px var(--font-display)}.pd .af-legend span{display:inline-flex;align-items:center;gap:7px}
.pd .af-legend i{width:16px;height:16px;border-radius:4px;display:inline-block}.pd .af-legend i.af-none{background:#f4f5f8;border:1px solid #d5d7e0}
.pd .af-legend p{flex-basis:100%;margin:0;color:var(--ink-subtle);font-size:13.5px}.pd .af-legend p strong{color:var(--ink-muted)}
.pd .af-tip{margin:16px 0 0;padding:13px 16px;border-radius:12px;background:var(--blue-soft);font-size:15.5px}
@media (max-width:640px){
.pd .af{padding:20px 16px}
.pd .af-plan{display:none}
.pd .af-cards{display:grid;gap:12px;margin-top:16px}
.pd .af-card{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px}
.pd .af-card svg{grid-row:1/4;width:96px;height:auto;border-radius:4px}
.pd .af-card b{font:700 22px/1 var(--font-display);color:#212edd}.pd .af-card span{font-weight:700;font-size:15px}.pd .af-card small{color:var(--ink-subtle);font-size:13.5px}
.pd .af-legend span{display:none}.pd .af-legend>b{display:none}
}

/* floor plan on desktop: text, legend and tip on the left, smaller plan on the right, all in one screen */@media (min-width:961px){
.pd .af{display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:36px;align-items:start}
.pd .af>h3,.pd .af-lead,.pd .af-legend,.pd .af-tip{grid-column:1}
.pd .af-plan{grid-column:2;grid-row:1/span 5;margin-top:0;max-height:440px;width:auto;max-width:100%;justify-self:center}
.pd .af-legend{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}
.pd .af-legend p{margin-top:6px}
}

/* Will it fit: bigger Room 1 / Room 2 labels */.pd .plan div small{font-size:16px;font-weight:700}

/* desktop: tip box sits right under the floor plan */@media (min-width:961px){
.pd .af>h3{grid-row:1}.pd .af-lead{grid-row:2}.pd .af-legend{grid-row:3}
.pd .af-plan{grid-row:1/span 3}
.pd .af-tip{grid-column:2;grid-row:4;margin-top:16px}
}

/* floor plan box v2: text column left; plan + tip right, same width; tip bottom lines up with the end of the left text; plan top lines up with the title */.pd .af-l,.pd .af-r{min-width:0}
@media (min-width:961px){
.pd .af{display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:40px;align-items:stretch}
.pd .af-r{display:flex;flex-direction:column;gap:16px}
.pd .af-r .af-plan{max-height:none;width:100%;margin:4px 0 0;justify-self:auto}
.pd .af-r .af-tip{margin-top:auto}
}
@media (max-width:960px){.pd .af-r .af-plan{margin-top:16px}}
@media (max-width:640px){
.pd .af{display:flex;flex-direction:column}
.pd .af-l,.pd .af-r{display:contents}
.pd .af h3{order:1}.pd .af-lead{order:2}.pd .af-cards{order:3}.pd .af-legend{order:4}.pd .af-tip{order:5}
}

@media (min-width:961px){.pd .af-l{display:flex;flex-direction:column}.pd .af-l .af-legend{margin-top:auto}}
@media (min-width:961px){.pd .af-l .af-legend{flex-wrap:nowrap;flex-direction:column;align-items:flex-start}.pd .af-l .af-legend p{flex-basis:auto;width:100%}}

/* compact left column: legend right under the intro, tight rows; plan sized by script to match the column height */@media (min-width:961px){
.pd .af-l .af-legend{margin-top:18px;gap:6px}
.pd .af{grid-template-columns:290px auto;justify-content:start}
.pd .af-r{align-self:start}
}

/* tip under the plan: one line, same width as the plan, link underlined on hover only */@media (min-width:961px){.pd .af-r .af-tip{white-space:nowrap;font-size:14px;padding:11px 14px;overflow:hidden;text-overflow:ellipsis}}
.pd .af-tip a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.pd .af-tip a:hover{text-decoration:underline;text-underline-offset:3px}}

/* install steps: small drawing on the left of each step */.pd .steps li{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:18px;row-gap:4px;align-items:start}
.pd .steps li::before{grid-column:2;grid-row:1}
.pd .steps li .step-art{grid-column:1;grid-row:1/4;width:120px;height:80px;align-self:center}
.pd .steps li b{grid-column:2;grid-row:2}
.pd .steps li span{grid-column:2;grid-row:3}
@media (max-width:560px){.pd .steps li{grid-template-columns:84px minmax(0,1fr);column-gap:12px}.pd .steps li .step-art{width:84px;height:56px}}

/* multi-zone install: steps in a 2x2 grid, the questions box full width under them */:is(#pd-install,#install) .two{display:block}
:is(#pd-install,#install) .two>div:first-child{display:flex;flex-direction:column;gap:16px}
:is(#pd-install,#install) .steps--2x2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
:is(#pd-install,#install) .honest{margin-top:20px}
@media (max-width:760px){:is(#pd-install,#install) .steps--2x2{grid-template-columns:1fr}}
@media (min-width:761px){:is(#pd-install,#install) .steps--2x2{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}}

.pd .nowrap{white-space:nowrap}

/* If you change your mind: two clear cases */.pd .panel--mind .mind{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pd .panel--mind .mind:first-of-type{border-top:0;padding-top:0}
.pd .panel--mind .mind p{margin:0}
.pd .panel--mind .mind__h{margin-bottom:4px!important;font-size:15px;color:var(--ink)}
.pd .panel--mind .mind__list{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.pd .panel--mind .mind__ok{margin-top:14px!important;padding:10px 12px;border-radius:10px;background:var(--sunk);font-size:15px}

/* desktop: the sticky buy bar becomes a small floating card bottom-right, not a full-width strip */@media (min-width:961px){
.pd .bar{left:auto;right:24px;bottom:24px;width:auto;max-width:520px;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(20,25,70,.16);transform:translateY(140%)}
.pd .bar.show{transform:none}
.pd .bar .wrap{max-width:none;padding:10px 10px 10px 14px;gap:14px}
.pd .bar img{width:40px;height:40px}
.pd .bar .t b{font-size:14.5px;max-width:250px}
.pd .bar .t span,.pd .bar .t .bar-ls{font-size:13px}
.pd .bar .p{font-size:19px}
.pd .bar .btn{padding:10px 16px;font-size:15px}
}
@media (min-width:961px){.pd .bar .t b{max-width:310px}}

/* bold lead-in titles sit on their own line, text starts underneath */.pd .panel p>b:first-child,.pd .honest p>b:first-child,.pd .notice p>b:first-child{display:block;margin-bottom:2px}
.pd p.alert>b:first-child,.pd p.btu-note>b:first-child,.pd .af-tip>b:first-child{display:block;margin-bottom:2px}
@media (min-width:961px){.pd .af-r .af-tip>b:first-child{display:inline;margin:0}}

/* shipping panels: last block of each box ends on the same line */#shipping .panel{display:flex;flex-direction:column}
#shipping .panel>:last-child{margin-top:auto}

/* Add to cart buttons never move on hover */@media (hover:hover) and (pointer:fine){.pd .btn--buy:not([disabled]):hover{translate:none;box-shadow:none}}
/* Ready to order band: lighter button text */.pd .final [data-review]{font-weight:600;font-size:16px}

/* yellow tips: lighter title weight */.pd p.tip b{font-weight:600}
.pd p.tip{background:#fffcef}

/* Features (What's built in): open icon list, 3 columns */.pd .feat{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px}
.pd .feat li{display:flex;gap:14px;align-items:flex-start}
.pd .feat svg{flex:none;width:26px;height:26px;margin-top:1px;fill:none;stroke:#212edd;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pd[data-mode="single"] .feat svg{stroke:#086f73}
.pd .feat p{margin:0;font-size:15px;line-height:1.45;color:var(--ink-muted)}
.pd .feat b{display:block;margin-bottom:2px;font:700 16px/1.3 var(--font-display);color:var(--ink)}
@media (max-width:960px){.pd .feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pd .feat{grid-template-columns:1fr;gap:18px}}

/* features strip under the price: one line for every title and every gray line */@media (min-width:1240px){.pd .answers--strip .ans b,.pd .answers--strip .ans span{white-space:nowrap}}

/* Features: bigger title and text; every description runs exactly 2 lines on desktop */.pd .feat b{font-size:18px;margin-bottom:4px}
.pd .feat p{font-size:16px;line-height:1.5}
.pd .feat svg{width:28px;height:28px}
@media (min-width:961px) and (max-width:1239px){.pd .feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (hover:hover) and (pointer:fine){.pd .jump a.on:hover{text-decoration:none}}

/* size buttons: no gray line under them anymore, keep 26px above the next separator */.pd #pd-options + #pd-indoor,.pd #pd-options + .step2{margin-top:0}

/* thumbnail column: stops at the bottom of the main photo, arrows when there are more */.pd .th-arr{display:none}
@media (min-width:961px){
.pd .top .gallery .thumbs-wrap{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.pd .top .gallery .thumbs-wrap .thumbs{max-height:none;scrollbar-width:none}
.pd .top .gallery .thumbs-wrap .thumbs::-webkit-scrollbar{display:none}
.pd .thumbs-wrap.has-arrows .th-arr{display:flex;align-items:center;justify-content:center;width:76px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
@media (hover:hover) and (pointer:fine){.pd .thumbs-wrap .th-arr:hover:not([disabled]){border-color:#212edd;color:#212edd}}
.pd .thumbs-wrap .th-arr[disabled]{opacity:.35;cursor:default}
.pd .thumbs-wrap .th-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
}

/* single zone: install accessories in blue (multi-zone is the opposite: blue picks, green accessories) */.pd[data-mode="single"] .step2,.pd[data-mode="single"] .upsell{--blue:#212edd;--blue-soft:#d9ddfb;--teal:#212edd;--sunk:#f6f7fe}
.pd[data-mode="single"] .upsell{background:#eef0fd;border-color:#212edd}
.pd[data-mode="single"] .upsell__opt{color:#212edd;border-color:#b9c0f6}
.pd[data-mode="single"] .upsell .pk{border-color:#b9c0f6}
.pd[data-mode="single"] .step2 .upsell__all,.pd[data-mode="single"] .upsell .upsell__all{background:#212edd;border-color:#212edd}
@media (hover:hover) and (pointer:fine){.pd[data-mode="single"] .step2 .upsell__all:hover,.pd[data-mode="single"] .upsell .upsell__all:hover{background:#1823b8}}
/* size buttons: room size bigger, voltage under it, more padding */.pd .size{padding:14px 8px}
.pd .size small{font-size:15px;color:var(--ink-muted);margin-top:2px}
.pd .size small + small{font-size:13px;color:var(--ink-subtle);margin-top:1px}

/* 6 install steps: 2 rows of 3 on wide screens (1-2, 3-4, 5-6 down each column) */@media (min-width:1100px){:is(#pd-install,#install) .steps--3x2{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);grid-auto-flow:column}}
@media (min-width:761px) and (max-width:1099px){:is(#pd-install,#install) .steps--3x2{grid-template-rows:repeat(3,auto)}}

/* 6 steps in 3 columns: picture beside the text, a bit smaller so each description fits 2 lines */@media (min-width:1100px){
:is(#pd-install,#install) .steps--3x2 li{grid-template-columns:88px minmax(0,1fr);column-gap:14px;padding:16px}
:is(#pd-install,#install) .steps--3x2 li .step-art{width:88px;height:59px}
}
/* single zone: step pictures in green, like the step numbers */.pd[data-mode="single"] .step-art [stroke="#212edd"]{stroke:#086f73}
.pd[data-mode="single"] .step-art [fill="#212edd"]{fill:#086f73}
.pd[data-mode="single"] .step-art [fill="#eef0fd"]{fill:#e6f3f2}

/* specs: size switch on single zone, line set limits title on multi-zone */.pd .spec-sizes{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.pd .spec-size{min-width:64px;padding:9px 16px;border:1.5px solid var(--line-strong);border-radius:999px;background:#fff;font:700 16px/1 var(--font-display);color:var(--ink);cursor:pointer}
@media (hover:hover) and (pointer:fine){.pd .spec-size:hover{border-color:var(--ink-subtle)}}
.pd .spec-size[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 1px var(--blue)}
.pd .limits-h{margin:32px 0 0;font:700 20px/1.3 var(--font-display)}

/* single zone: Ready to order band in dark green */.pd[data-mode="single"] .final{background:#06474a}
.pd[data-mode="single"] .final p{color:#cfe5e2}
.pd[data-mode="single"] .final .btn--buy{color:#06474a}
@media (hover:hover) and (pointer:fine){.pd[data-mode="single"] .final .btn--buy:hover{background:#e6f3f2}}

/* warranty boxes: one line each */.pd .warr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* manuals and PDFs: all boxes on one row on wide screens, one line of text each */.pd .docs a{text-decoration:none}@media (hover:hover) and (pointer:fine){.pd .docs a:hover{text-decoration:none}}
.pd .docs span{white-space:nowrap;min-width:0}
@media (min-width:1100px){.pd .docs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
@media (min-width:801px) and (max-width:1099px){.pd .docs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.pd .docs{grid-template-columns:1fr}}

/* warranty boxes: more space between the number and the line under it */.pd .warr b{margin-bottom:8px}

/* outdoor unit size comparison */.pd .tbl tr.sel td{background:var(--blue-soft)}
.pd .tbl td small{font-size:12.5px;color:var(--ink-subtle);margin-left:4px}

/* multi-zone specs: note when another outdoor unit size is shown */.pd .spec-note{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:var(--blue-soft);font-size:15.5px}

/* multi-zone specs: a line between the parts, same space above and below it */.pd .limits-h{margin-top:40px;padding-top:40px;border-top:1px solid var(--line-strong)}

/* no extra line right under the spec rows (they already end with a line) */.pd .specs + .limits-h{border-top:0;padding-top:0;margin-top:48px}

/* line set page */.pd .sizes--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
#ls-chart table{min-width:560px}
#ls-chart td.on{font-weight:700;color:var(--blue)}
.pd .ls-tips{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pd .ls-tips li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:16px;color:var(--ink-muted)}
.pd .ls-tips b{display:block;color:var(--ink);margin-bottom:4px}
@media (max-width:860px){.pd .ls-tips{grid-template-columns:1fr}}

/* line set picks: 3 sizes and 4 lengths, each on one row, also on phones */.pd .sizes.ls-u{grid-template-columns:repeat(3,minmax(0,1fr))}
.pd .sizes.ls-l{grid-template-columns:repeat(4,minmax(0,1fr))}
.pd .ls-picks .size:last-child{grid-column:auto}
@media (max-width:560px){.pd .ls-picks .size{padding:10px 4px}.pd .ls-picks .size b{font-size:15px}.pd .ls-picks .size small{font-size:12.5px}.pd .ls-picks .pick-h{flex-wrap:wrap;row-gap:2px}}

/* usually ordered with it: titles on 2 lines, lighter, no underline on hover */.pd .pair a{text-decoration:none}@media (hover:hover) and (pointer:fine){.pd .pair a:hover{text-decoration:none}}
.pd .pair b{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){.pd .pair a:hover b{color:var(--blue)}}

/* accessory option boxes */.pd .sizes.acc-o{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.pd .sizes.acc-o .size:last-child{grid-column:auto}
.pd .sizes.acc-o .size{padding:14px 8px}
.pd .acc-note{margin:10px 0 0;font-size:15px;color:var(--ink-muted)}
@media (max-width:560px){.pd .sizes.acc-o{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}}

/* usually ordered with it: never underlined, full name in 2 lines */.pd .pair a *{text-decoration:none}@media (hover:hover) and (pointer:fine){.pd .pair a:hover *{text-decoration:none}}
.pd .pair b{font-size:14.5px;line-height:1.4}

/* card links (add-ons, manuals): blue on hover, never underlined */html main .pd .pair a:focus-visible,html main .pd .docs a:focus-visible{text-decoration:none}@media (hover:hover) and (pointer:fine){html main .pd .pair a:hover,html main .pd .docs a:hover{text-decoration:none}}
@media (hover:hover) and (pointer:fine){html main .pd .docs a:hover span{color:var(--blue)}}

/* line set lengths: 6 boxes (16 to 75 ft) */.pd .sizes.ls-l{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:560px){.pd .sizes.ls-l{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pd .acc-note b{color:var(--ink)}

/* line set page: specs and "Usually ordered with it" share a white background, so only one gap between them */.pd #ls-spec + .sec{padding-top:0}

/* accessory buy box: a line between each step and before Add to cart, 26px above and below each line */.pd[data-mode="acc"] #pd-options > div + div{margin-top:26px!important;padding-top:26px;border-top:1px solid var(--line-strong,#d5d7e0)}
.pd[data-mode="acc"] #pd-options:not(:empty){padding-bottom:26px;border-bottom:1px solid var(--line-strong,#d5d7e0)}
.pd[data-mode="acc"] #pd-options .sizes{margin-top:14px!important}
.pd[data-mode="acc"] #pd-options .acc-note{margin-top:14px}

/* accessory pages (line set layout for all) */.pd .acc-chart table{min-width:520px}
.pd .acc-chart td.on{font-weight:700;color:var(--blue)}
.pd .acc-chart td small{display:none}
.pd .acc-spec + .sec{padding-top:0}

@media (max-width:560px){.pd .sizes.acc-o{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr))}}

/* phones: bigger invisible tap area on small text links, nothing moves on screen */@media (max-width:767px){.oc-pc__title a,.pd .pick-h a,.pd .trust a,.pd .upsell__more,.pd .rating--buy a,.pd .howlong-btn,.pd .sum-ship a{display:inline-block;padding-block:10px;margin-block:-10px}}

/* phones: price charts keep each cell on one line (the table scrolls sideways in its box); spec rows put the label above the value */@media (max-width:560px){
.pd #ls-chart th,.pd #ls-chart td,.pd .acc-chart th,.pd .acc-chart td{white-space:nowrap}
.pd .specs div{flex-direction:column;align-items:flex-start;gap:2px;padding:11px 0}
.pd .specs dt{font-size:14px;color:var(--ink-subtle)}
.pd .specs dd{text-align:left;margin:0}
}
@media (max-width:560px){.pd .tbl th,.pd .tbl td{white-space:nowrap}}

/* phones: the legend hides its color swatches, but the size inside the note must stay visible */.pd .af-legend p span{display:inline!important}

/* #reviews links land below the sticky header, same offset as the review button */#reviews{scroll-margin-top:130px}

/* eyebrow sits above the h1 (not inside it), same look as before */.pd .pd-eyebrow{display:block;margin:0 0 4px;font:600 14px/22.4px var(--f-body);letter-spacing:.02em;color:var(--teal)}

/* text buttons: underline only on hover, like every other link */.pd .upsell__more,#pd-bar u,.bar u{text-decoration:none}
@media (hover:hover) and (pointer:fine){.pd .upsell__more:hover,#pd-bar button:hover u,.bar button:hover u{text-decoration:underline;text-underline-offset:3px}}

/* phone tap areas: "See XK systems" links in the outdoor size table */@media (max-width:767px){.pd .tbl td a[href*="-btu-multi-zone"]{display:inline-block;padding-block:12px;margin-block:-12px}}

/* 48K/55K whip note in the add-on list */.pd .uwarn{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--ink-muted,#4b5060)}

/* phone tables: wrap the text so every column fits on screen, no hidden right edge */@media (max-width:560px){.pd .tbl th,.pd .tbl td{white-space:normal;padding-inline:8px}.pd .tbl table{min-width:0!important;width:100%;table-layout:auto}.pd .tbl{overflow-x:visible}}

/* "Will it fit your home?" room cards: a lone last card (Room 3, Room 5) spans the full row */@media (max-width:767px){.pd .plan > :last-child:nth-child(odd){grid-column:1/-1}}

/* phone size buttons: an even count stays 2 x 2; only a lone last button spans the row */@media (max-width:560px){.pd .sizes:not(.ls-picks):not(.acc-o) .size:last-child{grid-column:auto}.pd .sizes:not(.ls-picks):not(.acc-o) .size:last-child:nth-child(odd){grid-column:1/-1}}
/* color picker (DIY Select): its own step with space before "1. Pick your room size" */.pd #pd-options > div + div{margin-top:22px}