/* ==========================================================================
   SAKANA — Mix & Match
   ========================================================================== */

.mix { display: grid; gap: var(--section); padding-inline: var(--g); }
.mix__h { font-family: var(--f-serif); font-weight: 400; font-size: 22px; margin-block-end: 12px; }

/* Board ------------------------------------------------------------------------- */

.mix__board { background: var(--cream); padding: 16px; align-self: start; }
.slots { display: grid; gap: 10px; }
.slot { position: relative; background: var(--paper); border: 1px solid var(--line); min-inline-size: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.slot.is-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.slot.has-error { border-color: var(--accent); }
.slot__num { font-family: var(--f-latin); font-style: italic; font-size: 15px; color: var(--accent); }

.slot.is-empty { border-style: dashed; }
.slot__pick {
  inline-size: 100%; min-block-size: 88px; padding: 12px 16px; border: 0; background: none;
  display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--soft);
  transition: color var(--t-fast);
}
@media (hover: hover) { .slot__pick:hover { color: var(--accent); } }
.slot__plus { font-size: 26px; font-weight: 300; line-height: 1; }

.slot.is-filled { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px; }
.slot.is-filled > .slot__num { position: absolute; inset-block-start: 4px; inset-inline-start: 8px; z-index: 1; background: rgba(251, 248, 243, 0.9); padding: 0 5px; }
.slot__img { aspect-ratio: 3 / 4; }
.slot__info { display: grid; gap: 4px; align-content: start; min-inline-size: 0; }
.slot__title { font-family: var(--f-serif); font-size: 17px; line-height: 1.25; }
@media (hover: hover) { .slot__title:hover { color: var(--accent); } }
.slot__meta { font-size: 13px; color: var(--soft); }
.slot__variant { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-block: 4px; }
.slot__variant .select { min-block-size: 40px; padding-block: 6px; inline-size: auto; min-inline-size: 120px; font-weight: 400; }
.slot__variant .select[aria-invalid="true"] { border-color: var(--accent); }
.slot__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.slot__error { font-size: 13px; color: var(--accent); }
.slot__error:empty { display: none; }
.slot__actions { display: flex; gap: 16px; }
.slot__actions .text-link { min-block-size: 36px; font-size: 13px; }

.mix__summary { display: grid; gap: 10px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.mix__total { font-family: var(--f-serif); font-size: 26px; font-variant-numeric: tabular-nums; }
.mix__summary .sum-row { align-items: center; }
.mix__clear { justify-self: center; }

@media (min-width: 720px) {
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot.is-empty .slot__pick { min-block-size: 100%; aspect-ratio: 3 / 4; flex-direction: column; justify-content: center; }
  .slot.is-filled { grid-template-columns: 1fr; padding: 10px 10px 12px; }
  .slot__img { aspect-ratio: 1; }
}
@media (min-width: 1100px) {
  .mix { grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
  .mix__board { position: sticky; inset-block-start: calc(var(--header-h-compact) + 16px); }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Picker ------------------------------------------------------------------------ */

.mix__tabs { margin-block-end: 16px; }
.mix-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 720px) { .mix-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } }
.mix-item { display: grid; gap: 4px; align-content: start; }
.mix-item__img { aspect-ratio: 1; margin-block-end: 4px; }
.mix-item__title { font-family: var(--f-serif); font-size: 15px; line-height: 1.25; }
.mix-item__price { font-size: 13px; color: var(--soft); }
.mix-item .btn { margin-block-start: 6px; }
.mix-item.is-sold .mix-item__img img { opacity: 0.5; filter: saturate(0.3); }
.mix-item.is-chosen .mix-item__img { outline: 2px solid var(--accent); outline-offset: 2px; }

.mix__board:focus { outline: none; }

/* Phone/tablet: compact look summary while the board is out of view */
.mixbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom));
  background: var(--cream); border-block-start: 1px solid var(--line);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.mixbar[hidden] { display: none; }
body[data-page="mix"] { padding-block-end: 64px; }
body:has(.mixbar:not([hidden])) .toast, body:has(.mixbar:not([hidden])) .added-host { inset-block-end: 76px; }
@media (min-width: 1100px) { body[data-page="mix"] { padding-block-end: 0; } }