:root {
  --dialog-cyan: #aeedf7;
  --dialog-pink: #ffd1e8;
  --dialog-yellow: #fffdd8;
  --active-mint: #55d6b8;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  background: #c6c6c6;
  color: #000;
  font-family: Arial, "Apple SD Gothic Neo", sans-serif;
}

button,
select {
  color: inherit;
  font: inherit;
}

.shop-poster {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background: #fff;
}

.shop-logo {
  position: absolute;
  z-index: 2;
  top: 3.704%;
  left: 3.125%;
  width: 50.625%;
  height: 24.074%;
}

.shop-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.product-stage {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.product-card {
  position: absolute;
  width: var(--w);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.product-card:active {
  cursor: grabbing;
}

.product-card:focus-visible {
  outline: 0.25cqw solid #000;
  outline-offset: 0.2cqw;
}

.product-card img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  animation: product-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
}

.product-card:active img,
.product-card[data-dragging="true"] img {
  animation-play-state: paused;
}

@keyframes product-float {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--float-tilt)); }
}

.product-stage[data-view="folded"] .product-card {
  cursor: pointer;
  touch-action: manipulation;
}

.folded-track {
  position: absolute;
  top: 22%;
  left: 0;
  width: var(--track-width);
  height: 64%;
  animation: folded-track-left 42s linear infinite;
  will-change: transform;
}

.folded-track.is-paused,
.folded-track.is-paused .product-card img {
  animation-play-state: paused;
}

.product-card--folded img {
  width: 100%;
  height: 52cqh;
  object-fit: contain;
  transform-origin: 48% 14%;
  animation: folded-turn var(--bundle-duration) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes folded-track-left {
  to { transform: translate3d(calc(-1 * var(--loop-width)), 0, 0); }
}

@keyframes folded-turn {
  from { transform: rotate(calc(var(--bundle-rotate) - 3deg)); }
  to { transform: rotate(calc(var(--bundle-rotate) + 4deg)); }
}

.bundle-view {
  position: absolute;
  z-index: 20;
  bottom: 5.1%;
  left: 3.15%;
  display: flex;
  align-items: flex-end;
  gap: 0.65cqw;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.18cqw;
  white-space: nowrap;
}

.bundle-view img {
  width: 8cqw;
  height: 8cqw;
  object-fit: contain;
  transform-origin: 70% 30%;
  transition: transform 180ms ease;
}

.bundle-view span {
  padding-bottom: 0.5cqw;
}

.bundle-view:hover img,
.bundle-view:focus-visible img {
  transform: rotate(-7deg);
}

.product-dialog {
  position: absolute;
  z-index: 1000;
  top: 12%;
  left: 72.8%;
  display: flex;
  flex-direction: column;
  width: 20.85%;
  height: 72.5%;
  padding: 1.05cqw;
  background: var(--dialog-cyan);
  font-size: 1.02cqw;
}

.product-dialog[hidden] {
  display: none;
}

.product-dialog[data-color="pink"] {
  background: var(--dialog-pink);
}

.product-dialog[data-color="yellow"] {
  background: var(--dialog-yellow);
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 3.2cqw;
}

.dialog-heading h1 {
  max-width: 88%;
  margin: 0;
  font-size: 1.28cqw;
  font-weight: 500;
  line-height: 1.12;
}

.icon-button,
.gallery-arrow,
.quantity button,
.text-action {
  padding: 0;
  border: 0;
  background: transparent;
}

.icon-button,
.gallery-arrow,
.quantity button {
  cursor: pointer;
}

.icon-button {
  font-size: 1.45cqw;
  line-height: 0.75;
}

.dialog-gallery {
  display: grid;
  grid-template-columns: 1.8cqw 1fr 1.8cqw;
  align-items: center;
  flex: 0 0 33cqh;
  height: 33cqh;
  min-height: 0;
}

.dialog-gallery img {
  width: 100%;
  height: 31cqh;
  object-fit: contain;
}

.gallery-arrow {
  font-size: 2cqw;
  line-height: 1;
}

.dialog-option {
  width: 100%;
  padding: 0.25cqw 0;
  border: 0;
  border-bottom: 0.08cqw solid #000;
  border-radius: 0;
  background: transparent;
  appearance: auto;
}

.dialog-price {
  margin: 0.75cqw 0 0.5cqw;
}

.dialog-actions {
  display: flex;
  align-items: center;
  gap: 1.45cqw;
  margin-bottom: 0.85cqw;
}

.quantity {
  display: flex;
  align-items: center;
  gap: 0.95cqw;
  margin-right: auto;
}

.text-action {
  border-bottom: 0.08cqw solid currentColor;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.dialog-description {
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: auto;
  font-size: 0.76cqw;
  line-height: 1.38;
}

.shop-menu {
  position: absolute;
  z-index: 1100;
  right: 2.95%;
  display: flex;
  gap: 1.35cqw;
  font-size: 1.3cqw;
  line-height: 1;
  writing-mode: vertical-rl;
}

.shop-menu--top {
  top: 4.45%;
}

.shop-menu--bottom {
  bottom: 4.55%;
}

.shop-menu a {
  color: inherit;
  text-decoration: none;
}

.shop-menu .is-current {
  color: var(--active-mint);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .product-card img,
  .folded-track { animation: none; }
}