.box-contents { grid-template-columns: minmax(0,1fr); gap: 30px; }
.box-contents .flavour-list { display: block; order: -1; min-width: 0; }
.flavour-list h2 { font: 400 17px/1.4 'Space Grotesk',sans-serif; margin: 0 0 14px; }
.flavour-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  padding: 4px 3px 12px;
  border-bottom: 1px solid var(--rule);
}
.flavour-track a {
  flex: 1 0 112px;
  max-width: 160px;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 12px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  border-bottom: 3px solid transparent;
}
.flavour-track a img { width: 80px; height: 80px; object-fit: contain; flex: none; }
.flavour-track a[aria-current="true"] { background: #dfe3d9; border-bottom-color: var(--ink); text-decoration: none; }
.flavour-track a:hover { background: #dfe3d9; text-decoration: underline; }
.flavour-track a:focus-visible { outline-offset: -2px; }
.object-index { min-width: 0; }
.object-index .model-slot { height: 460px; cursor: grab; }
.object-index .model-slot:active { cursor: grabbing; }
.preview-controls { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.preview-controls[hidden] { display: none; }
@media(max-width:700px) {
  .object-index .model-slot { height: 330px; margin-inline: -12px; width: calc(100% + 24px); }
  .preview-controls { grid-row: 5; }
  .box-contents { gap: 20px; }
  .box-contents .flavour-list { margin-top: 8px; }
  .flavour-list h2 { font-size: 16px; }
  .box-contents .flavour-track a { flex: 0 0 112px; font-size: 13px; line-height: 1.35; min-height: 146px; }
}