/* Solar panels category page — pp- prefix. Loads after styles.css and leans on its
   tokens and shared patterns (.wrap, .button, .text-link, .icon-disc, .section,
   .section-heading, .system-cards, .process-strip, .faq, .contact-section). */

/* Hero: mist information panel + install photography, mirroring the homepage split. */
.pp-hero{display:grid;grid-template-columns:41% 1fr;margin:0 26px;max-width:1600px;min-height:560px}
.pp-hero-panel{background:var(--mist);border-radius:var(--radius);padding:47px clamp(26px,3.45vw,53px) 35px}
.pp-hero-panel h1{font-size:clamp(34px,3vw,46px);letter-spacing:-.04em;line-height:1.1}
.pp-hero-copy{font-size:clamp(17px,1.42vw,21px);line-height:1.45;margin-top:16px;color:var(--muted);max-width:36ch}
.pp-hero-panel .button{margin-top:23px;min-height:54px;min-width:192px}
.pp-jump{margin-top:30px}
.pp-jump a{display:flex;align-items:center;gap:16px;padding:8px 0;min-height:64px;border-top:1px solid #adc2be;text-decoration:none;font-size:16px;font-weight:500;transition:color .2s}
.pp-jump a:hover{color:var(--focus)}
.pp-jump a:focus-visible{outline-offset:1px}
.pp-thumb{width:46px;height:46px;border-radius:50%;background:var(--paper);display:grid;place-items:center;flex-shrink:0}
.pp-thumb img{width:26px;height:32px;object-fit:contain}
.pp-watt{margin-left:auto;font-size:13px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-jump .row-arrow{margin-left:14px;width:20px;height:20px;transition:transform .2s var(--ease)}
.pp-jump a:hover .row-arrow{transform:translateX(3px)}
.pp-hero-photo{position:relative;min-width:0;border-radius:var(--radius);overflow:hidden}
.pp-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}

/* Comparison table: white sheet, ruled rows, tabular numerals — the quote-sheet ethos. */
.pp-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);scrollbar-width:thin}
.pp-table-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.pp-compare table{width:100%;min-width:760px;border-collapse:collapse;font-size:14px;line-height:1.5}
.pp-compare th,.pp-compare td{padding:15px 22px;text-align:left;vertical-align:top}
.pp-compare thead th,.pp-compare thead td{padding-top:22px;padding-bottom:16px}
.pp-compare tbody th,.pp-compare tbody td{border-top:1px solid var(--line)}
.pp-compare thead a{text-decoration:none;font-weight:500;font-size:15px;letter-spacing:-.01em}
.pp-compare thead a:hover{text-decoration:underline}
.pp-compare thead a span{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-bottom:2px}
.pp-compare tbody th{font-weight:400;color:var(--muted);font-size:13px;white-space:nowrap}
.pp-compare td{font-variant-numeric:tabular-nums}
.pp-compare thead td:first-child,.pp-compare tbody th{position:sticky;left:0;background:#fff;border-right:1px solid var(--line)}
.pp-check{width:16px;height:16px;color:var(--focus);vertical-align:-2px;margin-right:8px}
.pp-table-note{margin-top:14px}

/* Product detail sections: ruled article rhythm, mist product plinth, white spec sheet. */
.pp-products .section-heading{margin-bottom:0}
.pp-product{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:start;padding-block:clamp(48px,6vw,84px)}
.pp-product+.pp-product{border-top:1px solid var(--line)}
.pp-products .section-heading+.pp-product{padding-top:clamp(34px,4vw,52px)}
.pp-product-figure{margin:0;background:var(--mist);border-radius:var(--radius);display:grid;place-items:center;padding:clamp(30px,4vw,54px);position:sticky;top:101px}
.pp-product-figure img{max-width:100%;height:auto;max-height:400px;object-fit:contain}
.pp-product--flip{grid-template-columns:1.15fr .85fr}
.pp-product--flip .pp-product-figure{order:2}
.pp-product h3{font-size:clamp(26px,2.2vw,33px);letter-spacing:-.03em}
.pp-tagline{font-size:19px;line-height:1.5;margin-top:10px}
.pp-product-body p{color:var(--muted);margin-top:16px;line-height:1.75;max-width:52ch}
.pp-specs{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 26px 12px;margin-top:26px}
.pp-specs-title{font-size:13px;color:var(--muted);padding:14px 0 10px}
.pp-specs dl{margin:0}
.pp-specs dl>div{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding:11px 0;font-size:14px}
.pp-specs dt{color:var(--muted)}
.pp-specs dd{margin:0;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.pp-faqs{margin-top:28px}
.pp-faqs details{border-top:1px solid var(--line)}
.pp-faqs details:last-child{border-bottom:1px solid var(--line)}
.pp-faqs summary{font-size:15px;min-height:56px}
.pp-faqs details>p{font-size:14px}

@media(min-width:1652px){.pp-hero{margin-inline:auto}}

@media(max-width:1200px){
.pp-hero{grid-template-columns:45% 1fr;min-height:520px;margin-inline:18px}
.pp-hero-panel{padding:40px 25px 24px}
.pp-hero-panel h1{font-size:36px}
.pp-hero-copy{font-size:18px}
.pp-jump a{font-size:15px;gap:13px}
.pp-product{gap:44px}
.pp-product h3{font-size:27px}
}

@media(max-width:900px){
.pp-hero{grid-template-columns:48% 1fr;min-height:500px}
.pp-hero-panel h1{font-size:31px}
.pp-hero-copy{font-size:17px}
.pp-thumb{width:38px;height:38px}
.pp-thumb img{width:22px;height:27px}
.pp-jump a{min-height:58px;font-size:14px}
.pp-watt{font-size:12px}
.pp-product{grid-template-columns:1fr;gap:30px}
.pp-product--flip{grid-template-columns:1fr}
.pp-product--flip .pp-product-figure{order:0}
.pp-product-figure{position:static;padding:30px}
.pp-product-figure img{max-height:300px}
}

@media(max-width:650px){
.pp-hero{display:flex;flex-direction:column;margin-inline:12px;min-height:0}
.pp-hero-panel{padding:30px 26px 25px;border-radius:12px 12px 0 0}
.pp-hero-panel h1{font-size:clamp(32px,8vw,42px)}
.pp-hero-panel .button{min-height:48px}
.pp-jump{margin-top:26px}
.pp-jump a{min-height:56px;font-size:14px;gap:12px}
.pp-hero-photo{height:250px;border-radius:0 0 12px 12px;flex:none}
.pp-compare table{min-width:640px;font-size:13px}
.pp-compare th,.pp-compare td{padding:12px 14px}
.pp-compare tbody th{font-size:12px}
.pp-product{padding-block:40px}
.pp-product h3{font-size:24px}
.pp-tagline{font-size:17px}
.pp-product-body p{font-size:15px}
.pp-product-figure{padding:24px}
.pp-product-figure img{max-height:250px}
.pp-specs{padding:6px 20px 10px}
.pp-specs dl>div{font-size:13px;gap:12px}
.pp-faqs summary{font-size:14px}
}