/* Portrait Plug · product pages (canvas by style). Loads after site.css and reuses its tokens. */
.crumbs{font:700 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:28px}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--volt)}
.crumbs span{margin:0 8px;color:var(--line2)}

.pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:24px 72px;align-items:start}
.pdp-media{position:sticky;top:96px}
.pdp-main{margin:0;background:var(--bone);border-radius:20px;overflow:hidden;aspect-ratio:1/1}
.pdp-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px}
.thumbs button{padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ink2);cursor:pointer;aspect-ratio:1/1}
.thumbs button[aria-pressed="true"]{border-color:var(--volt)}
.thumbs img{width:100%;height:100%;object-fit:cover}

.pdp-info h1{font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin:10px 0 14px}
.pdp-info .lead{margin:0 0 18px;color:var(--muted2)}
.pdp-price{display:flex;align-items:baseline;gap:14px;margin:6px 0 4px}
.pdp-price b{font-family:var(--display);font-size:46px;line-height:1;color:var(--volt)}
.pdp-price span{font:700 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pdp-info .sizes{margin:16px 0 18px}
.pdp-info .btn.volt{width:100%;justify-content:center}
.pdp-points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.pdp-points li{font:700 13px/1.45 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding-left:22px;position:relative}
.pdp-points li::before{content:"";position:absolute;left:0;top:5px;width:10px;height:10px;background:var(--volt);border-radius:2px}
.specs{margin:28px 0 0;border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.specs dt{font:700 12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:0}
.specs a{color:var(--volt)}

.ba-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.ba-pairs.one{grid-template-columns:minmax(0,640px)}
.more-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.more-styles a{display:block;text-decoration:none;background:var(--ink2);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.more-styles a:hover{border-color:var(--volt)}
.more-styles img{aspect-ratio:1/1;object-fit:cover;width:100%}
.more-styles span{display:flex;justify-content:space-between;padding:12px 14px;font:700 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.more-styles span i{font-style:normal;color:var(--volt)}

.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:36px 0 80px}
.shop-grid a{text-decoration:none;background:var(--ink2);border:2px solid var(--line);border-radius:18px;overflow:hidden;display:block}
.shop-grid a:hover{border-color:var(--volt)}
.shop-grid img{aspect-ratio:1/1;object-fit:cover;width:100%}
.shop-grid div{padding:14px 16px 18px}
.shop-grid b{display:block;font-family:var(--display);font-size:20px;line-height:1.1}
.shop-grid span{display:block;margin-top:6px;font:700 13px/1.3 var(--mono);color:var(--volt);letter-spacing:.06em}

@media (max-width:1000px){
  .pdp{grid-template-columns:1fr;padding-top:12px}
  .pdp-media{position:static}
  .more-styles,.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ba-pairs{grid-template-columns:1fr}
}
@media (max-width:560px){
  .specs div{grid-template-columns:1fr;gap:4px}
  .shop-grid{grid-template-columns:1fr}
}