/* OutDo V8 · Products pages (products.html, finishes.html, product/<slug>.html). Loaded only on these pages, after site.css.
   Ported from the approved Products prototype (Phase 4.2 functionality, 4.3 footer, 4.4 CTA gradient). Only the pr- page
   styles come across: tokens, buttons, header, menus, footer, enquiry form and call bar are the real V8 ones from site.css.
   Small text uses darker coral and grey than site.css so it meets WCAG AA (4.5:1) on white, cream and sand (D16, these pages only). */

.prp{--pr-coral-txt:#b5453b;--pr-faint-txt:#646c7d}
.prp .more{color:var(--pr-coral-txt)}
.prp .pr-sec h2 em{color:var(--coral-2)}   /* large heading accent on cream/sand: 3.4–3.7:1 (V8 coral is 2.6–2.9:1 there) */
.prp main{min-height:70vh}

/* development build notice (removed by the production build) */
.pr-devnote{display:flex;gap:8px;align-items:flex-start;max-width:62em;margin:0 0 16px;padding:9px 13px;border:1.5px dashed var(--coral);border-radius:12px;background:#fff;color:var(--navy);font:600 13px/1.45 var(--font)}
.pr-devnote b{color:var(--pr-coral-txt)}
.pr-hero .pr-devnote{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(246,168,159,.6)}
.pr-hero .pr-devnote b{color:var(--coral-lt)}

/* framed product images: the image is placed so its measured content box fills the frame (never cropped) */
.fr{position:relative;display:block;overflow:hidden;background:#fff}
.fr img{position:absolute;max-width:none;height:auto}
.fr.noimg{display:grid;place-items:center;color:var(--pr-faint-txt);font-size:.85rem}

/* ---------- hero (products hub, finishes) ---------- */
.pr-hero{position:relative;isolation:isolate;color:#fff;padding:140px 0 76px;background:radial-gradient(60% 90% at 0% 100%,rgba(237,110,99,.18),transparent 60%),var(--navy-3)}
.pr-hero .pill{background:rgba(237,110,99,.16);color:var(--coral-lt);border:1px solid rgba(246,168,159,.4);font-weight:700}
.pr-hero h1{color:#fff;font-size:clamp(2.3rem,1.1rem + 3vw,3.9rem);line-height:1.04;letter-spacing:-.035em;margin:20px 0 18px;max-width:13em}
.pr-hero h1 em{color:var(--coral-lt)}
.pr-hero .sub{max-width:34em;color:rgba(255,255,255,.86);font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.6;font-weight:500}
.pr-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.pr-hero .hero-grid>div{min-width:0}
.pr-search{position:relative;max-width:560px;margin-top:28px}
.pr-hero .pr-search{max-width:540px;margin-top:30px}
.pr-search input{width:100%;min-height:56px;border-radius:999px;border:0;padding:0 22px 0 52px;font:500 16px var(--font);color:var(--ink);background:#fff;box-shadow:var(--shadow)}
.pr-search svg{position:absolute;left:20px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--slate);stroke-width:2}
.pr-search input:focus{outline:none;box-shadow:0 0 0 4px rgba(237,110,99,.35)}
.pr-hcard{position:relative;display:block;background:#fff;border-radius:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.65);overflow:hidden;transition:transform .35s var(--ease)}
.pr-hcard:hover{transform:translateY(-4px)}
.pr-hcard .fr{aspect-ratio:4/3}
.pr-hcard .pr-hcap{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border-top:1px solid var(--line);padding:14px 20px 16px}
.pr-hcard .pr-hct{display:block;min-width:0}
.pr-hcard .pr-hcap b{display:block;color:var(--navy);font-size:1rem;line-height:1.25}
.pr-hcard .pr-hser{display:block;color:var(--pr-coral-txt);font:700 11px/1.3 var(--font);letter-spacing:.08em;margin-bottom:3px}
.pr-hcard .pr-hcap i{font-style:normal;color:var(--pr-coral-txt);font-weight:700;white-space:nowrap}
.pr-quick{display:none}

/* ---------- sections ---------- */
.pr-sec{padding:clamp(56px,7vw,96px) 0}
.pr-sec.sand{background:var(--sand)}
.pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.pr-head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.pr-head p{color:var(--slate);margin-top:8px;max-width:44em}

/* family tiles */
.pr-fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pr-fam{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.pr-fam:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pr-fam:focus-visible{outline-offset:4px}
.pr-fam .fr{aspect-ratio:16/11;border-bottom:1px solid var(--line)}
.pr-fam .tx{padding:18px 22px 20px;display:flex;flex-direction:column;flex:1}
.pr-fam h3{font-size:1.22rem}
.pr-fam p{color:var(--slate);font-size:.92rem;margin-top:4px}
.pr-fam .n{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:.88rem;color:var(--pr-faint-txt);font-weight:600}

/* series chips */
.pr-series{display:flex;flex-wrap:wrap;gap:10px}
.pr-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font:700 13.5px/1 var(--font);color:var(--navy);letter-spacing:.02em;transition:border-color .2s,background .2s}
.pr-chip:hover{border-color:var(--coral)}
.pr-chip small{color:var(--pr-faint-txt);font-weight:600}

.pr-band{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.pr-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.pr-card h3{font-size:1.25rem}
.pr-card p{color:var(--slate);margin:8px 0 16px}
.pr-swrow{display:flex;gap:6px;margin:6px 0 16px;flex-wrap:wrap}
.pr-swrow i{width:30px;height:30px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pr-nojs{margin-top:28px;columns:2 260px;column-gap:28px;font-size:.92rem}
.pr-nojs h3{font-size:1rem;margin:14px 0 6px;break-after:avoid}
.pr-nojs ul{margin:0;padding-left:18px}
.pr-nojs a{color:var(--navy);text-decoration:underline}

/* ---------- listing ---------- */
.pr-top{padding:118px 0 0;background:var(--cream)}
.pr-crumbs{font-size:.86rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pr-crumbs a{color:var(--pr-coral-txt);font-weight:600}
.pr-crumbs span[aria-hidden]{color:var(--pr-faint-txt)}
.pr-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:14px 0 6px}
.pr-title h1{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.pr-title .count{color:var(--pr-faint-txt);font-weight:700}
.pr-lead{color:var(--slate);font-size:1.1rem}
.pr-tabwrap{position:relative;margin:0 calc(-1*var(--gut))}
.pr-tabs{display:flex;gap:8px;overflow-x:auto;padding:18px var(--gut) 4px;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none}
.pr-tabs::-webkit-scrollbar{display:none}
.pr-tabs a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:700 14px/1 var(--font);color:var(--navy);white-space:nowrap;scroll-snap-align:start}
.pr-tabs a:hover{border-color:var(--coral)}
.pr-tabs a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pr-tabwrap::before,.pr-tabwrap::after{content:"";position:absolute;top:18px;bottom:4px;width:44px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.pr-tabwrap::before{left:0;background:linear-gradient(90deg,var(--cream) 30%,rgba(250,250,247,0))}
.pr-tabwrap::after{right:0;background:linear-gradient(270deg,var(--cream) 30%,rgba(250,250,247,0))}
.pr-tabwrap.more-l::before,.pr-tabwrap.more-r::after{opacity:1}
.pr-tabwrap .hint{position:absolute;right:calc(var(--gut) - 6px);top:40px;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:#fff;box-shadow:var(--shadow);color:var(--navy);font-size:18px;display:none}
.pr-tabwrap.more-r .hint{display:grid;place-items:center}
.pr-list{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;padding:28px 0 90px}
.pr-filters{position:sticky;top:96px;align-self:start}
.pr-fgroup{border-top:1px solid var(--line);padding:18px 0}
.pr-fgroup:first-child{border-top:0;padding-top:0}
.pr-fgroup h2{font:700 13px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:12px;display:flex;justify-content:space-between;gap:10px}
.pr-fgroup .reset-g{border:0;background:none;color:var(--pr-coral-txt);font:600 12px/1 var(--font);text-transform:none;letter-spacing:0;padding:0;cursor:pointer}
.pr-opt{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:6px 12px;border-radius:10px;border:0;background:none;text-align:left;font:500 14.5px/1.3 var(--font);color:var(--ink)}
.pr-opt:hover{background:var(--sand)}
.pr-opt .bx{width:20px;height:20px;border-radius:6px;border:1.6px solid var(--pr-faint-txt);flex:none;display:grid;place-items:center;margin-right:10px}
.pr-opt[aria-pressed="true"]{background:var(--coral-soft);font-weight:700}
.pr-opt[aria-pressed="true"] .bx{background:var(--coral);border-color:var(--coral)}
.pr-opt[aria-pressed="true"] .bx::after{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.pr-opt .l{display:flex;align-items:center;flex:1}
.pr-opt .c{color:var(--pr-faint-txt);font-size:.82rem;font-weight:700}
.pr-opt.unk .l{color:var(--slate);font-style:italic}
.pr-opt.zero{opacity:.45}
.pr-filters .pr-reset{width:100%;margin-top:6px}
.pr-tool{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.pr-tool .pr-search{margin:0;flex:1;min-width:220px;max-width:none}
.pr-tool .pr-search input{min-height:50px;box-shadow:none;border:1.5px solid var(--line)}
.pr-tool .pr-search input:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(237,110,99,.15)}
.pr-sort{display:flex;align-items:center;gap:8px;font:600 13.5px/1 var(--font);color:var(--slate)}
.pr-sort select{min-height:50px;border-radius:999px;border:1.5px solid var(--line);background:#fff;padding:0 38px 0 16px;font:600 14px/1 var(--font);color:var(--navy);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.pr-sort select:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(237,110,99,.15)}
.pr-fbtn{display:none}
.pr-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:18px}
.pr-active[hidden]{display:none}
.pr-active .lbl{font:700 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-right:4px}
.pr-active button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--navy);color:#fff;font:700 13px/1 var(--font)}
.pr-active button::after{content:"✕";font-size:11px;opacity:.8}
.pr-active .reset{margin-left:auto;background:none;color:var(--pr-coral-txt);border:1.5px solid rgba(237,110,99,.4)}
.pr-active .reset::after{content:none}
.pr-active .reset:hover{background:var(--coral-soft)}
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pr-moreb{display:flex;justify-content:center;margin-top:30px}
.pr-empty{grid-column:1/-1;background:#fff;border:1.5px dashed var(--line);border-radius:18px;padding:48px 24px;text-align:center;color:var(--slate)}
.pr-empty h3{margin-bottom:8px}
.pr-empty .acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}

/* product cards */
.pr-prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:box-shadow .25s,transform .25s var(--ease)}
.pr-prod:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pr-prod .ph{position:relative;display:block;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line)}
.pr-prod .ph .fr{position:absolute;inset:0}
.pr-prod .ph img{transition:transform .5s var(--ease)}
.pr-prod .ph:hover img{transform:scale(1.03)}
.pr-prod .tx{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.pr-ser{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1.2 var(--font);letter-spacing:.08em;color:var(--pr-coral-txt);text-transform:uppercase}
.pr-ser::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral)}
.pr-prod h3{font-size:1.06rem;line-height:1.3;margin:7px 0 10px;min-height:2.6em}
.pr-prod h3 a:hover{color:var(--pr-coral-txt)}
.pr-meta{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;margin-bottom:14px}
.pr-meta span{font-size:.78rem;font-weight:600;color:var(--navy);background:var(--sand);border-radius:999px;padding:4px 10px}
.pr-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.pr-acts .btn{min-height:42px;padding:0 10px;font-size:13.5px}

/* ---------- product detail ---------- */
.pr-det{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"gal info";gap:clamp(28px,4vw,60px);padding:18px 0 34px;align-items:start}
.pr-gal{grid-area:gal;min-width:0}
.pr-info{grid-area:info;min-width:0;position:sticky;top:96px}
.pr-gal .main{position:relative;aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.pr-gal .main .fr{position:absolute;inset:0}
.pr-gal .main .zoom{position:absolute;inset:0;border:0;background:none;cursor:zoom-in}
.pr-gal .nav2{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:var(--shadow);font-size:20px;color:var(--navy);z-index:2}
.pr-gal .prev{left:12px}
.pr-gal .next{right:12px}
.pr-gal .count{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(18,29,52,.72);color:#fff;font:600 12px/1 var(--font);padding:7px 10px;border-radius:999px}
.pr-gal .thumbs{display:flex;gap:10px;margin-top:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:3px}
.pr-gal .thumbs button{flex:none;position:relative;width:88px;height:70px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:0;overflow:hidden;scroll-snap-align:start;transition:border-color .2s,box-shadow .2s}
.pr-gal .thumbs button .fr{position:absolute;inset:0}
.pr-gal .thumbs button:hover{border-color:var(--coral-lt)}
.pr-gal .thumbs button[aria-current="true"]{border:2px solid var(--coral);box-shadow:0 0 0 4px rgba(237,110,99,.16)}
.pr-info .pr-ser{font-size:12px}
.pr-info h1{font-size:clamp(2rem,3.1vw,2.8rem);line-height:1.08;margin:10px 0 8px}
.pr-fam-line{color:var(--slate);font-weight:600}
.pr-fam-line a{color:var(--pr-coral-txt)}
.pr-facts{margin:22px 0 24px;border-top:1px solid var(--line)}
.pr-facts div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.pr-facts dt{color:var(--slate);font-weight:600}
.pr-facts dd{margin:0;color:var(--ink);font-weight:600}
.pr-facts dd a{color:var(--pr-coral-txt)}
.pr-ctabox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 18px 40px -34px rgba(27,36,54,.5)}
.pr-ctas{display:flex;flex-wrap:wrap;gap:10px}
.pr-ctas .btn{flex:1 1 180px}
.pr-b2b{margin-top:12px;font-size:.88rem;color:var(--slate)}
.pr-descsec{padding:44px 0 56px}
.pr-descsec h2{font-size:1.35rem;margin-bottom:12px}
.pr-desc{max-width:64ch;color:var(--ink);font-size:1.06rem;line-height:1.8}
.pr-relsec h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.pr-relsec .grp{margin-top:6px}
.pr-relsec .grp+.grp{margin-top:34px}
.pr-relsec .grp>h3{font:700 12.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.pr-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

/* tablets only (601–820 px): a compact quote bar once the main buttons have scrolled away.
   Phones keep the one V8 call bar, whose main button asks for a quote on product pages. */
.pr-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);box-shadow:0 -10px 30px -18px rgba(0,0,0,.4);padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));align-items:center;gap:12px;transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
.pr-sticky.show{transform:none;visibility:visible}
.pr-sticky .nm{flex:1;min-width:0;font:700 14px/1.25 var(--font);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-sticky .btn{min-height:46px;padding:0 20px;flex:none}

/* ---------- series ---------- */
.pr-sergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pr-sercard{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;transition:box-shadow .25s,transform .25s var(--ease)}
.pr-sercard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pr-sercard h3{font-size:1.08rem;letter-spacing:.02em}
.pr-sercard p{color:var(--slate);font-size:.88rem;margin-top:6px}
.pr-sercard .n{margin-top:12px;color:var(--pr-coral-txt);font-weight:700;font-size:.88rem}
.pr-jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pr-jump a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font:700 13.5px/1 var(--font);color:var(--navy)}
.pr-jump a:hover{border-color:var(--coral)}
.pr-jump a small{color:var(--pr-faint-txt)}
.pr-fhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;scroll-margin-top:96px;padding-top:6px;border-top:1px solid var(--line);margin:40px 0 14px}
.pr-fhead:first-child{border-top:0;margin-top:10px}
.pr-fhead h2{font-size:1.4rem}
.pr-fhead h2 small{color:var(--pr-faint-txt);font-size:1rem}

/* ---------- finishes ---------- */
.pr-notice{display:flex;gap:12px;align-items:flex-start;background:var(--coral-soft);border:1px solid rgba(237,110,99,.35);border-radius:14px;padding:14px 16px;font-size:.9rem;color:var(--ink);margin-bottom:8px}
.pr-notice b{color:var(--navy)}
.pr-ftabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 26px}
.pr-ftabs button{min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:700 14.5px/1 var(--font);color:var(--navy)}
.pr-ftabs button:hover{border-color:var(--coral)}
.pr-ftabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.pr-ftabs button small{font-weight:600;opacity:.7;margin-left:4px}
.pr-ftabs[hidden]{display:none}
.pr-fpanel>h2{font-size:1.3rem;margin:26px 0 4px}
.pr-swg{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.pr-swg:first-of-type{border-top:0}
.pr-swg h3{margin:12px 0 0;font:700 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.pr-swg h3 small{display:block;margin-top:6px;color:var(--pr-faint-txt);font-weight:600;letter-spacing:.04em}
.pr-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:0;padding:0}
.pr-sw li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.pr-sw li:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pr-sw .c{height:92px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06)}
.pr-sw .t{padding:11px 13px 13px;font-size:.86rem;line-height:1.35}
.pr-sw b{display:block;color:var(--navy);font:800 .98rem/1.2 var(--font);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pr-sw span{display:block;margin-top:3px;font-size:.84rem;color:var(--slate)}
.pr-sw em{display:block;font-style:normal;margin-top:2px;font-size:.76rem;color:var(--pr-faint-txt);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ---------- closing CTA band (Phase 4.4 gradient) ---------- */
.pr-final{color:#fff;padding:clamp(56px,7vw,90px) 0;background:linear-gradient(90deg,#1d2c4c 0%,#213458 25%,#27385e 50%,#343b5f 55%,#403f5f 60%,#584661 70%,#6f4d61 80%,#865363 90%,#985864 100%)}
.pr-final .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.pr-final h2{color:#fff;font-size:clamp(1.9rem,3.8vw,3rem)}
.pr-final h2 em{color:var(--coral-lt)}
.pr-final p{color:rgba(255,255,255,.8);margin-top:10px;max-width:34em}
.pr-final .b{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- lightbox ---------- */
.pr-lb{position:fixed;inset:0;z-index:140;background:rgba(18,29,52,.94);display:grid;place-items:center;padding:20px}
.pr-lb[hidden]{display:none}
.pr-lb img{max-width:min(1100px,94vw);max-height:84vh;background:#fff;border-radius:12px;object-fit:contain}
.pr-lb button{position:fixed;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:24px}
.pr-lb .x{top:16px;right:16px}
.pr-lb .p{left:16px;top:50%}
.pr-lb .n{right:16px;top:50%}
.pr-lb .c{position:fixed;bottom:18px;left:0;right:0;text-align:center;color:#ddd;font-size:.85rem}

/* ---------- filter sheet (phones and tablets) ---------- */
.pr-sheet{position:fixed;inset:0;z-index:110;background:rgba(18,29,52,.55);display:flex;align-items:flex-end}
.pr-sheet[hidden]{display:none}
.pr-sheet .in{background:#fff;width:100%;max-height:86vh;border-radius:24px 24px 0 0;display:flex;flex-direction:column;animation:pr-up .3s var(--ease)}
@keyframes pr-up{from{transform:translateY(40px);opacity:0}}
.pr-sheet .hd{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.pr-sheet .hd h2{font-size:1.15rem}
.pr-sheet .hd button{width:44px;height:44px;border-radius:50%;border:0;background:var(--sand)}
.pr-sheet .bd{overflow-y:auto;padding:12px 20px}
.pr-sheet .ft{padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pr-fams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-list{grid-template-columns:minmax(0,1fr)}
  .pr-filters{display:none}
  .pr-fbtn{display:inline-flex}
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-info{position:static}
}
@media (max-width:900px){
  .pr-hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .pr-hcard{display:none}
  .pr-quick{display:flex;gap:8px;overflow-x:auto;margin:22px calc(-1*var(--gut)) 0;padding:2px var(--gut) 4px;scrollbar-width:none}
  .pr-quick::-webkit-scrollbar{display:none}
  .pr-quick a{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font:700 13.5px/1 var(--font);white-space:nowrap}
  .pr-quick a:hover{background:rgba(255,255,255,.2)}
}
@media (max-width:820px){
  .pr-band{grid-template-columns:1fr}
  .pr-det{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "gal" "info";gap:18px}
  .pr-dhead{grid-area:head}
  .pr-info .pr-ser,.pr-info h1,.pr-info .pr-fam-line{display:none}
  .pr-swg{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .pr-swg h3{margin:0}
}
@media (min-width:821px){.pr-dhead{display:none}}
@media (min-width:601px) and (max-width:820px){
  .pr-sticky{display:flex}
  body.has-sticky{padding-bottom:72px}
  body.sticky-on .wa-fab{bottom:calc(22px + 72px)}
  body.sticky-on .totop{bottom:calc(86px + 72px)}
}
@media (max-width:600px){
  .pr-hero{padding:100px 0 34px}
  .pr-hero h1{font-size:clamp(2rem,9vw,2.5rem);margin:14px 0 12px}
  .pr-hero .sub{font-size:.98rem}
  .pr-hero .pr-search{margin-top:20px}
  .pr-hero .pr-search input{min-height:52px}
  .pr-sec{padding:44px 0}
  .pr-fams{gap:12px}
  .pr-fam .fr{aspect-ratio:4/3}
  .pr-fam .tx{padding:12px 14px 14px}
  .pr-fam h3{font-size:1rem}
  .pr-fam p{display:none}
  .pr-top{padding-top:84px}
  .pr-title{margin:10px 0 2px}
  .pr-title h1{font-size:1.85rem}
  .pr-tool .pr-search{flex:1 1 100%}
  .pr-sort{flex:1}
  .pr-sort select{width:100%;min-height:46px}
  .pr-sort .t{display:none}
  .pr-fbtn{min-height:46px}
  .pr-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .pr-rel{grid-template-columns:minmax(0,1fr)}
  .pr-prod .ph{aspect-ratio:16/11}
  .pr-prod h3{min-height:0;margin:6px 0 8px}
  .pr-meta{margin-bottom:12px;min-height:0}
  .pr-prod .tx{padding:14px 16px 16px}
  .pr-list{padding:18px 0 60px}
  .pr-active{padding:8px 10px}
  .pr-active .reset{margin-left:0}
  .pr-dhead h1{font-size:1.75rem;line-height:1.12;margin:6px 0 4px}
  .pr-facts div{grid-template-columns:120px 1fr}
  .pr-gal .thumbs button{width:72px;height:58px}
  .pr-ctabox{padding:14px}
  .pr-descsec{padding:30px 0 40px}
  .pr-sw{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pr-sw .c{height:72px}
  .pr-ftabs{flex-wrap:nowrap;overflow-x:auto;margin:22px calc(-1*var(--gut)) 0;padding:2px var(--gut);scrollbar-width:none}
  .pr-ftabs button{flex:none;min-height:44px;padding:0 16px;font-size:14px}
  .pr-final{background:linear-gradient(172deg,#1d2c4c 0%,#213458 30%,#27385e 52%,#343b5f 60%,#403f5f 66%,#584661 76%,#6f4d61 85%,#865363 94%,#985864 100%)}
  .pr-devnote{font-size:12.5px}
}
@media (max-width:360px){
  .pr-acts{grid-template-columns:1fr}
}