/* INFOSTAND.BY — product page template (V17). Scoped .pp-* ; reuses .cv-crumbs, .cv-card, .cv-grid, .cv-link, .cv-btn from catalog-v17.css.
   Load AFTER infostand-design-reference.css, catalog.css, catalog-v17.css. */
.pp-main{min-height:60vh}
.pp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start;padding:clamp(14px,1.8vw,26px) var(--page-pad) clamp(44px,5vw,76px)}
.pp-gallery{position:relative;aspect-ratio:1/1;max-height:min(72vh,660px);width:100%;border-radius:14px;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.pp-gallery img{width:100%;height:100%;object-fit:contain;padding:5%;box-sizing:border-box}
.pp-info{min-width:0}
.pp-kicker{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6d7480;border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease}
a.pp-kicker:hover{color:var(--ink);border-color:#c5c9cf}
.pp-info h1{margin:12px 0 0;font-size:clamp(24px,2.6vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.045em;overflow-wrap:anywhere}
.pp-sku{margin:12px 0 0;font-size:13px;color:#7b828b}
.pp-price{margin:24px 0 0;font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.pp-price--none{font-size:15px;font-weight:500;letter-spacing:0;color:#7b828b}
.pp-keys{margin:24px 0 0;border-top:1px solid var(--line)}
.pp-row{display:grid;grid-template-columns:minmax(110px,.42fr) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid #eceef1;font-size:14.5px;line-height:1.45}
.pp-row dt{color:#7b828b}
.pp-row dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.pp-row dd a{border-bottom:1px solid #c5c9cf;transition:border-color .25s ease}
.pp-row dd a:hover{border-color:var(--ink)}
.pp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.pp-cta .dark-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:56px;padding:7px 8px 7px 22px;border:1px solid var(--navy,#06162c);border-radius:999px;background:var(--navy,#06162c);color:#fff;font-size:14px;font-weight:600;line-height:1.3;box-sizing:border-box;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.pp-cta .dark-cta span:last-child{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy,#06162c);font-size:17px;transition:transform .2s ease}
.pp-cta .dark-cta:hover{background:#0c2342;border-color:#0c2342}
.pp-cta .dark-cta:hover span:last-child{transform:translate(2px,-2px)}
.pp-cta .dark-cta:focus-visible{outline:2px solid var(--navy,#06162c);outline-offset:4px}

/* detail sections: label column + content column (same rhythm as service pages) */
.pp-sec{display:grid;grid-template-columns:minmax(150px,.3fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);padding:clamp(26px,3vw,40px) var(--page-pad);border-top:1px solid var(--line)}
.pp-sec h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.025em}
.pp-sec__body{min-width:0;max-width:880px}
.pp-sec .pp-keys{margin:0;border-top:0}
.pp-sec .pp-keys .pp-row:first-child{padding-top:0}
.pp-desc{margin:0;font-size:16px;line-height:1.65;color:#3e444c}
.pp-opts{margin:0;padding:0;list-style:none}
.pp-opts li{padding:12px 0;border-bottom:1px solid #eceef1;font-size:15px;line-height:1.5}
.pp-opts li:first-child{padding-top:0}
.pp-text{margin:0 0 14px;font-size:15px;line-height:1.6;color:#3e444c}
.pp-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,40px)}
.pp-links a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid #eceef1;border-top:1px solid #eceef1;font-size:15px;font-weight:500;transition:padding-left .25s ease}
.pp-links a:hover{padding-left:6px}
.pp-links small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:#8a9199}

/* related */
.pp-related{padding:clamp(34px,4vw,56px) var(--page-pad) clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.pp-related h2{margin:0 0 20px;font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.04em}
.pp-related .cv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* final CTA (navy block, same pattern as service pages) */
.pp-final{margin-top:0}
.pp-final__layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:34px}
.pp-final h2{margin:0;font-size:clamp(32px,4vw,64px);line-height:.98;letter-spacing:-.06em;font-weight:500}
.pp-final p{margin:0 0 22px;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:rgba(255,255,255,.68)}
.pp-final .pp-out{display:inline-flex;align-items:center;gap:36px;min-height:56px;padding:6px 8px 6px 24px;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;font-size:14px;font-weight:600;transition:border-color .28s ease}
.pp-final .pp-out:hover{border-color:#fff}
.pp-final .pp-out span:last-child{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--navy);font-size:17px}
.pp-final .pp-out:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* not found */
.pp-nf{padding:clamp(40px,6vw,96px) var(--page-pad);max-width:720px}
.pp-nf h1{margin:0;font-size:clamp(28px,3.4vw,48px);font-weight:500;letter-spacing:-.05em;line-height:1.02}
.pp-nf p{margin:14px 0 22px;color:#555d67;font-size:15px;line-height:1.55}

@media(max-width:1279px){.pp-related .cv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:999px){
  .pp-related .cv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-links{grid-template-columns:1fr;gap:0}
  .pp-links a+a{border-top:0}
  .pp-final__layout{grid-template-columns:1fr;align-items:start}
}
@media(max-width:860px){
  .pp-hero{grid-template-columns:1fr;gap:22px}
  .pp-gallery{max-height:none}
  .pp-sec{grid-template-columns:1fr;gap:14px}
}
@media(max-width:640px){
  .pp-hero{padding:12px 20px 40px}
  .pp-sec{padding:26px 20px}
  .pp-related{padding:34px 20px 48px}
  .pp-nf{padding:40px 20px}
  .pp-row{grid-template-columns:minmax(96px,.45fr) minmax(0,1fr);gap:12px;font-size:14px}
  .pp-related .cv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-cta .dark-cta{width:100%;justify-content:space-between}
  .pp-final .pp-out{width:100%;justify-content:space-between}
}