.cake-picture { min-width:0; }
.cake-photo-picker {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px;
  max-width:620px;
  margin:24px auto 0;
}
.cake-photo-picker button {
  width:100%;
  height:auto;
  min-height:44px;
  aspect-ratio:1;
  padding:3px;
  border-radius:50%;
  opacity:.65;
}
.cake-photo-picker button[aria-pressed=true],
.cake-photo-picker button:hover { opacity:1; }
.cake-photo-picker button:focus-visible { outline:2px solid #4c5933;outline-offset:3px; }
.cake-photo-picker img { display:block;width:100%;height:100%;object-fit:contain; }
@media (max-width:1100px) {
  .cake-photo-picker { grid-template-columns:repeat(4,minmax(0,1fr));max-width:320px;gap:10px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .cake-photo-picker button { transition:none; }
}

.cake-photo-stage { position:relative; }
.cake-nav {
 position:absolute;top:50%;transform:translateY(-50%);z-index:2;
 width:48px;height:48px;padding:0;border-radius:50%;
 display:grid;place-items:center;cursor:pointer;
 color:#343d28;background:#f7f4edee;border:1px solid #737d5870;
 box-shadow:0 3px 14px #26231f12;
 transition:background .2s ease,box-shadow .2s ease;
}
.cake-nav[hidden] { display:none; }
.cake-nav-left { left:8px; }
.cake-nav-right { right:8px; }
.cake-nav svg { display:block;pointer-events:none; }
.cake-nav:hover { background:#ecefdc;box-shadow:0 4px 16px #26231f22; }
.cake-nav:active { background:#dce2c8; }
.cake-nav:focus-visible { outline:3px solid #4c5933;outline-offset:3px; }
.cake-status { font-size:13px;line-height:1.6;margin-top:12px; }
.cake-status:empty { display:none; }
@media(max-width:700px) {
 .cake-nav { width:44px;height:44px; }
 .cake-nav-left { left:5px; }
 .cake-nav-right { right:5px; }
}
@media(prefers-reduced-motion:reduce) { .cake-nav { transition:none; } }