/* SHAPR's page: COLR's page (colr.css) with what a 560 x 475 plug-in and a
   list of controls need. Nothing here restyles a shared component. */

/* THE PLUG-IN AT ITS OWN SIZE (owner, 2026-09-18): the window is 560 x 475,
   so the picture is 560 wide — the 1120 px file is its 2x, sharp on Retina.
   Narrower screens shrink it to fit. */
.s-shapr .c-hero-shot{max-width:min(560px,92vw)}
.s-shapr .c-shot{max-width:min(420px,92vw)}

/* THE CONTROLS: a name and one line each, in two columns. */
.s-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-8);
  margin-top:var(--space-6)}
.s-ctl div{display:grid;grid-template-columns:120px 1fr;gap:var(--space-4);align-items:baseline;
  padding-top:var(--space-4);border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.s-ctl dt{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-lg);
  letter-spacing:.01em;color:var(--ink)}
.s-ctl dd{margin:0;color:var(--mut);font-size:var(--text-body)}
.s-ctl dd b{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .s-ctl{grid-template-columns:1fr}
  .s-ctl div{grid-template-columns:96px 1fr}
}

/* Hero video: a kick pedal against the drum head. The source is a tall clip,
   so on wide screens keep the beater (upper third) in frame. */
.s-shapr .c-hero .hb-video{object-position:50% 30%}
@media(max-width:760px){.s-shapr .c-hero .hb-video{object-position:50% 40%}}
@media(prefers-reduced-motion:reduce){
  .s-shapr .c-hero{background:url(/img/shapr-hero.jpg) 50% 30%/cover no-repeat}
}

/* PRESETS on SHAPR's own orange (the logo dot, #f0542c), near-black ink on top. */
.s-shapr #presets{background:#f0542c;color:#0b0b0c}
.s-shapr #presets .slabel,.s-shapr #presets h2.statement,.s-shapr #presets .lede{color:#0b0b0c}

/* PRESETS, shorter: words on the left, the picture beside them. */
.s-shapr #presets{padding-block:var(--space-7)}
.s-pre{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:center}
.s-pre .c-shot{margin:0;width:420px;max-width:100%}
.s-pre .lede{margin-bottom:0}
@media(max-width:900px){
  .s-pre{grid-template-columns:1fr;gap:var(--space-6)}
  .s-pre .c-shot{width:auto;max-width:min(420px,100%)}
}

/* Rent-to-Own, under the Buy button: the second way to pay, said plainly. */
.c-rto{margin-top:var(--space-4);color:var(--dim);font-size:var(--text-sm);line-height:1.5}
.c-rto a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}