.colorways-page .color-tabs { margin-bottom:72px; }
.colorway-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; height:44px; margin-bottom:14px; }
.colorway-meta { position:absolute; left:0; top:-36px; height:36px; display:flex; align-items:center; gap:12px; }
.colorway-sequence { display:flex; flex:none; }
.colorway-sequence button { display:flex; align-items:center; justify-content:center; width:44px; height:36px; min-height:36px; padding:0; opacity:.55; }
.colorway-sequence button:hover,.colorway-sequence button:focus-visible { opacity:1; }
.colorway-sequence svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.colorway-choice { position:relative; display:flex; align-items:center; gap:8px; min-width:0; flex:1; height:44px; }
.colorway-title { display:flex; align-items:baseline; flex:none; white-space:nowrap; line-height:1.2; }
#colorway-name { font-size:var(--colorway-name-size,22px); }
#colorway-variation { font-size:12px; opacity:.5; white-space:nowrap; }
.colorway-choice>svg { width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2; }
.colorway-choice #colorway-picker { position:absolute; inset:0; width:100%; height:44px; min-height:44px; margin:0; opacity:0; padding:0; font-size:16px; cursor:pointer; }
.colorway-choice.is-keyboard-focus .colorway-title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.colorway-count { display:flex; flex:none; align-items:center; justify-content:flex-end; font-size:12px; }
.colorway-count button { min-width:44px; width:44px; padding-inline:0; opacity:.45; }
.colorway-heading.is-compact { gap:8px; }
.colorway-heading.is-compact .colorway-count button { min-width:36px; width:36px; }
.colorway-count button[aria-pressed="true"] { opacity:1; }
#colorway-swatches { display:grid; grid-template-columns:repeat(var(--count,4),minmax(0,1fr)); gap:6px; }
.colorway-card { min-width:0; }
.colorway-keep { display:flex; align-items:flex-end; justify-content:center; width:100%; height:220px; padding:16px 0; border:1px solid #8885; }
.colorway-keep svg { width:12px; height:12px; opacity:.35; }
.colorway-keep[aria-pressed="true"] svg { opacity:1; }
.colorway-card input { display:block; width:100%; text-align:center; font-size:12px; padding:8px 0; min-width:0; letter-spacing:0; }
.colorway-controls { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:center; gap:16px; width:min(100%,400px); margin:16px auto 28px; font-size:13px; }
.colorway-history,.colorway-rearrange { display:flex; align-items:center; gap:4px; }
.colorway-rearrange { justify-content:flex-end; }
#colorway-sample { min-height:260px; padding:32px; border:1px solid #8884; }
#colorway-accents { display:flex; gap:10px; }
#colorway-accents span { display:block; width:34px; height:34px; border-radius:50%; background:currentColor; }
#colorway-sample #preview-text { font-size:36px; line-height:1.15; margin:28px 0; }
#colorway-sample small { font-size:13px; }
.colorway-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:600px) {
  .colorway-heading { margin-inline:8px; }
  .colorway-heading .colorway-count { margin-inline:0; }
  .colorway-keep { height:150px; }
  .colorway-card input { font-size:10px; }
  #colorway-swatches { gap:4px; }
  #colorway-sample { padding:24px 16px; }
  #colorway-sample #preview-text { font-size:28px; }
  .colorway-controls { font-size:12px; }
}

.colorway-keep[aria-pressed="true"] { outline:1px solid var(--ink)!important; outline-offset:1px; }

.colorway-role { display:block; min-height:22px; font-size:11px; opacity:.65; white-space:nowrap; }
@media(max-width:600px) { .colorway-role { font-size:9px; } }

.colorway-controls button { min-width:44px; min-height:44px; }
.colorway-controls>button { min-width:64px; width:64px; }
.colorway-rearrange button { padding-inline:0; }
.color-tool #colorway-back svg,.color-tool #colorway-forward svg { width:14px; height:14px; }

/* Click through original and curated alternatives in the existing meta row. */
.colorway-version{display:flex;align-items:center;gap:6px;height:36px;min-height:36px;min-width:44px;margin:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;}
.colorway-version>svg{width:10px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;opacity:.5;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--variation-turn,0deg));transition:transform 400ms cubic-bezier(.37,0,.63,1);}
.colorway-version.is-keyboard-focus #colorway-variation{text-decoration:underline;text-underline-offset:4px;}
#colorway-custom{font-size:12px;opacity:.5;white-space:nowrap;}
.colorway-meta{right:0;}
@media(max-width:360px){.colorway-meta{gap:8px;}.colorway-version{gap:4px;}}

/* Reserve the release control's space, even when there are no local keeps. */
.colorway-controls{grid-template-columns:minmax(140px,1fr) 64px minmax(92px,1fr);}
.color-tool #colorway-unlock-all svg{width:14px;height:14px;}
#colorway-unlock-all{opacity:.55;transition:opacity 160ms ease,visibility 160ms;}
#colorway-unlock-all:hover,#colorway-unlock-all:focus-visible{opacity:1;}
#colorway-unlock-all:disabled{opacity:0;visibility:hidden;pointer-events:none;}
@media(max-width:360px){
  .colorway-controls{grid-template-columns:140px 44px minmax(92px,1fr);gap:6px;}
  .colorway-controls>#colorway-random{width:44px;min-width:44px;}
}
@media(prefers-reduced-motion:reduce){#colorway-unlock-all{transition:none;}}

@media(prefers-reduced-motion:reduce){.colorway-version>svg{transition:none;}}