/* Example kitchen page. Uses the site tokens only. The finish picker brings its own
   styles (/assets/css/finish-picker.css). Two columns as the visualiser: the picture
   on the left stays on screen, the picker on the right. On a phone the picture sits
   under the header at a modest height while the visitor chooses. */
.ek-head { margin-block: var(--space-4) var(--space-5); max-width: 48rem; }
.ek-head h1 { margin: 0 0 var(--space-3); }

.ek-layout { display: grid; gap: var(--space-5); align-items: start; }

/* Phone and tablet: the figure is its own grid item so it can stick while the picker
   scrolls under it; the rest of the left column follows the picker. */
@media (max-width: 63.99rem) {
  .ek-view { display: contents; }
  .ek-figure {
    position: sticky; top: var(--header-h, 72px); z-index: 5;
    margin-inline: calc(var(--gutter, 1.25rem) * -1); padding: var(--space-2) var(--gutter, 1.25rem);
    background: var(--c-bg, #fff);
    box-shadow: 0 6px 12px -8px rgba(15, 21, 19, .25);
  }
  .ek-figure .ek-stage { max-height: 34vh; margin-inline: auto; }
  .ek-controls { order: 1; }
  .ek-swatches { order: 2; }
  .ek-note { order: 3; }
  .ek-try { order: 4; }
}
@media (min-width: 64rem) {
  .ek-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); }
  .ek-view { position: sticky; top: calc(var(--header-h, 72px) + var(--space-4)); }
}

.ek-figure { margin: 0; }
.ek-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-grey-100);
  box-shadow: var(--shadow);
}
.ek-layer, .ek-layer img { display: block; width: 100%; height: 100%; }
.ek-layer img { object-fit: cover; }
.ek-layer--top, .ek-layer--worktop { position: absolute; inset: 0; }
.ek-label { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; }

.ek-choice {
  margin-top: var(--space-2); color: var(--c-ink); font-weight: 600; font-size: 0.95rem; line-height: 1.35;
}
/* On a phone the toggles already name each choice; keep the sticky picture short
   and leave the line for screen readers. */
@media (max-width: 63.99rem) {
  .ek-choice {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

.ek-note { margin: var(--space-3) 0 0; color: var(--c-ink-2); font-size: 0.95rem; }

.ek-swatches { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.ek-swatches:not(:has(.ek-swatch:not([hidden]))) { margin: 0; }
.ek-swatch {
  display: flex; gap: var(--space-3); align-items: center; margin: 0;
  padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-bg);
}
.ek-swatch[hidden] { display: none; }
.ek-swatch img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius); flex: none; }
.ek-swatch figcaption { display: grid; gap: var(--space-1); color: var(--c-ink-2); font-size: 0.95rem; }
.ek-swatch strong { color: var(--c-ink); }

.ek-try { margin: var(--space-4) 0 0; }
.ek-try .btn { box-shadow: var(--glow); }
.ek-try .btn:hover, .ek-try .btn:focus-visible { box-shadow: var(--glow-strong); }
.ek-try .btn:focus-visible { outline: 3px solid var(--c-teal-deep); outline-offset: 3px; }
@media (max-width: 63.99rem) {
  .ek-try .btn { width: 100%; justify-content: center; }
}

.ek-form { display: grid; gap: var(--space-4); }
.ek-actions { margin: 0; }
.ek-actions [hidden] { display: none; }