/* This dock belongs to the guide, rather than the photographed shop UI. */
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 8px;
  background: #173e48;
  color: #edf7fa;
  padding: 4px;
  gap: 4px;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul)::before {
  content: "Guide controls";
  display: grid;
  align-content: center;
  flex: 0 0 58px;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #edf7fa;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) > ul { gap: 4px; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) > ul > li { flex: 1 1 auto; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button {
  border: 0;
  border-radius: 4px;
  color: #edf7fa;
  background: transparent;
  font-size: 13px;
  letter-spacing: .015em;
  text-transform: none;
  padding: 5px 8px;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button > span:first-child { color: inherit; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button[aria-current="true"] {
  background: #fff;
  color: #173e48;
}
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button:hover:not(:disabled) { background: #315661; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button[aria-current="true"]:hover { background: #fff; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button:disabled { color: #8aabb4; }
@media(min-width:640px) and (max-width:1100px) {
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) li:not(:has([aria-current="true"])) { display: none; }
}
@media(max-width:639px) {
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul) button { font-size: 12px; }
  [aria-labelledby="how-eterna-works-title"] figure > div:last-child:has(> ul)::before { flex-basis: 48px; padding-left: 4px; font-size: 10px; }
}