/* Product pages: only what the store's own stylesheet (extracted to /products/_store.css)
   does not already cover. Store tokens only; no new colours, fonts or effects. */

/* Width-matched stand-in for Barlow while the web font downloads, so the 4-line shipping
   strip wraps the same before and after the swap (the swap otherwise pushed the page down:
   CLS 0.18 on a phone). size-adjust = measured Barlow/Arial width per weight. */
@font-face{font-family:'Barlow Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');font-weight:400;size-adjust:92.8%}
@font-face{font-family:'Barlow Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');font-weight:500;size-adjust:93.5%}
@font-face{font-family:'Barlow Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Roboto Bold');font-weight:600;size-adjust:89.6%}
@font-face{font-family:'Barlow Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Roboto Bold');font-weight:700;size-adjust:90.2%}
:root{--font-body:'Barlow','Barlow Fallback',sans-serif}
.pp-main{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:28px 22px 88px}
.pp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 18px;padding:0;font-size:.82rem;color:var(--ink-dim)}
.pp-crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.pp-crumbs li+li::before{content:"/";opacity:.55}
.pp-crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.pp-crumbs a:hover{color:var(--ink);border-bottom-color:var(--hairline)}
.pp-crumbs [aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch}

/* the store's product pop-up card, laid out in the page instead of a veil */
.co-modal.pm-modal.pp-card{width:100%;max-width:none;max-height:none;overflow:visible;margin:0}
/* reserve the photo box before the image arrives (no layout shift); contain on the deep
   panel is how the store's own pop-up shows mixed-ratio photos */
.pp-card .pm-media{aspect-ratio:3/2;width:100%;min-height:0}
@media(min-width:721px){.pp-card .pm-media{position:sticky;top:calc(var(--header-h,0px) + 18px)}}
.pp-card .pm-media img{width:100%;height:100%;min-height:0;max-height:none;object-fit:contain}
.pp-card h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.12;margin:6px 0 12px;text-wrap:balance}
/* buy box first on a landing page; the long description follows it */
.pp-card .pp-desc-h{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:1rem;line-height:1.25;margin:26px 0 10px;padding-top:20px;border-top:1px solid var(--hairline)}
.pp-card .pp-desc{font-size:.98rem;max-width:62ch;white-space:pre-line;margin:0}
.pp-family{font-size:.88rem;color:var(--ink-dim);margin:-4px 0 14px}
.pp-family a{color:var(--beam)}
.pp-card .co-actions a.btn{text-decoration:none;display:inline-flex;align-items:center}

/* models in this family */
.pp-models{margin-top:34px}
.pp-models h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:1.2rem;line-height:1.25;margin:0 0 12px}
.pp-models ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pp-models a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 16px;
  background:var(--panel);border:1px solid var(--hairline);border-radius:10px;color:var(--ink);text-decoration:none;
  transition:border-color .2s ease-out}
.pp-models a:hover{border-color:var(--beam)}
.pp-models a[aria-current]{border-color:var(--beam)}
.pp-models b{font-weight:600}
.pp-models span{white-space:nowrap;color:var(--ink-dim);font-size:.9rem}
.pp-models span.out{color:var(--ink-dim);text-decoration:line-through}

/* all-products index */
.pp-index h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;margin:0 0 22px}
.pp-index .pp-index-h{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:1.2rem;line-height:1.25;margin:34px 0 14px}
.pp-index h1+.pp-index-h{margin-top:0}
.pp-index .card a.pp-cardlink{color:inherit;text-decoration:none}
.pp-index .card a.pp-cardlink:hover h3{color:var(--beam)}

.pp a:focus-visible,.pp button:focus-visible,.pp select:focus-visible,.pp input:focus-visible{outline:2px solid var(--beam);outline-offset:2px}
@media(max-width:720px){.pp-main{padding:18px 16px 72px}}