[data-sig="ridgecap-picker"] {
  padding: var(--section) 0;
  h2 { max-width: 800px; margin-bottom: 40px; }
  .picker-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; }
  .roof-view { position: relative; aspect-ratio: 2.7; overflow: hidden; background: var(--sky); }
  .roof-view > img { position: absolute; width: 120%; max-width: none; height: auto; left: -10%; top: -50%; }
  .roof-view > img:not(:first-child) { opacity: 0; clip-path: polygon(2.7% 45.9%,35.9% 27.6%,44.3% 27.6%,46.8% 26.2%,58.9% 26.2%,66.2% 30.4%,69.2% 29.2%,97.3% 44.2%,96% 45.4%,59% 46%,27% 47%,3.2% 46%); }
  .roof-view > img[data-slot-img=roof_wood] { opacity: 1; }
  .picker-controls { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 0 64px; }
  .picker-controls > p:first-child { margin: 0; grid-row: span 3; }
  .swatches { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .swatches button { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: left; min-height: 112px; min-width: 0; background: transparent; border: 1px solid var(--line); padding: 12px; color: var(--ink); }
  .swatches button > span:first-child { display: block; width: 100%; height: 28px; flex-shrink: 0; background: var(--swatch); box-shadow: inset 0 0 0 1px #172c3240; }
  .swatches [data-slot] { line-height: 1.3; overflow-wrap: anywhere; }
  .swatches [aria-pressed=true] { border: 2px solid var(--accent-ink); padding: 11px; background: var(--sky); }
  .selection { font-weight: 600; }
  @media(max-width:700px) {
    h2 { margin-bottom: 32px; }
    .roof-view { aspect-ratio: 1.6; }
    .roof-view > img { width: 190%; left: -45%; top: -35%; }
    .picker-controls { display: block; }
    .swatches { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 24px; }
    .swatches button { font-size: 16px; min-height: 100px; }
  }
}