:root {
  --active-mint: #55d6b8;
  --account-mint: #aeeaf4;
}

.info-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;
}

.info-poster--we-are {
  background: #ffffdc;
}

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

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

.info-poster--utility .info-logo {
  width: 32%;
  height: 15.2%;
}

.we-are-figure {
  position: absolute;
  top: 2%;
  left: 61%;
  width: 18%;
  height: auto;
}

.we-are-copy,
.we-are-contact {
  position: absolute;
  z-index: 2;
  font-size: 1.08cqw;
  line-height: 1.45;
}

.we-are-copy {
  top: 32.5%;
  left: 61.6%;
  width: 20%;
}

.we-are-contact {
  top: 51.5%;
  left: 58%;
  width: 26%;
}

.we-are-copy p,
.we-are-contact p {
  margin: 0 0 1.9cqw;
}

.we-are-contact span {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.we-are-contact a {
  color: inherit;
  text-decoration: none;
}

.construction-copy {
  position: absolute;
  top: 49%;
  left: 50%;
  margin: 0;
  font-size: 3.2cqw;
  transform: translate(-50%, -50%);
}

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

.info-menu--top { top: 4.45%; }
.info-menu--bottom { bottom: 4.55%; }

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

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

.mypage-shell,
.cart-shell,
.checkout-shell {
  position: absolute;
  z-index: 2;
  inset: 22% 7.5% 7% 3.15%;
  font-size: 1cqw;
}

.mypage-shell > h1,
.cart-shell > h1,
.checkout-shell > h1 {
  margin: 0 0 2cqw;
  font-size: 1.45cqw;
  font-weight: 500;
}

.account-auth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4cqw;
  width: 52.4cqw;
}

.account-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 22cqw;
  padding: 2cqw;
  background: #f5f5f5;
}

.account-card--login { background: var(--account-mint); }

.account-card h2 {
  margin: -3.7cqw 0 2.7cqw -2cqw;
  font-size: 1cqw;
  font-weight: 400;
}

.account-card label,
.profile-form label,
.checkout-form label {
  display: grid;
  gap: 0.5cqw;
  margin-bottom: 1.2cqw;
}

.account-card input,
.profile-form input,
.checkout-form input {
  width: 100%;
  padding: 0.35cqw 0;
  border: 0;
  border-bottom: 0.07cqw solid #555;
  border-radius: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}

.account-card p {
  margin: 0 0 1.05cqw;
  font-size: 0.67cqw;
  line-height: 1.25;
}

.account-card button,
.account-tabs button,
.profile-form button,
.cart-shell button,
.checkout-shell button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.account-card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.account-card-actions button,
.signup-submit,
.profile-save {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.signup-submit {
  align-self: flex-end;
  margin-top: auto;
}

.account-status {
  display: block;
  min-height: 1.2em;
  margin-top: 0.65cqw;
  font-size: 0.68cqw;
}

.account-status.is-error,
.account-error { color: #b60000; }

.account-loading,
.account-error {
  position: absolute;
  top: 47%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.account-dashboard {
  display: grid;
  grid-template-columns: 5.2cqw 44.8cqw;
  gap: 2.4cqw;
  width: 52.4cqw;
}

.account-tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1cqw;
}

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

.account-panel {
  min-height: 27.5cqw;
  padding: 1.8cqw;
  background: var(--account-mint);
}

.profile-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.2cqw;
}

.profile-form > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.field-with-action {
  display: flex;
  align-items: flex-end;
}

.field-with-action input { flex: 1; }
.field-with-action button {
  margin-left: 0.55cqw;
  white-space: nowrap;
}

.profile-save {
  align-self: flex-end;
  margin-top: auto;
}

.orders-list {
  max-height: 24cqw;
  overflow: auto;
  background: #f7f7f7;
}

.order-row {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 2fr 0.9fr 1.1fr;
  gap: 1cqw;
  padding: 1.3cqw 0.8cqw;
  border-bottom: 0.07cqw solid #777;
}

.order-row span { min-width: 0; }
.order-row b,
.order-row small { display: block; }
.order-row b { margin-bottom: 0.75cqw; font-weight: 400; }
.order-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-empty { padding: 6cqw 1cqw; text-align: center; }

.cart-shell {
  top: 13%;
  transition: opacity 300ms ease;
}

.cart-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 43cqw;
  height: 43cqw;
  overflow: visible;
  outline: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: top 900ms cubic-bezier(0.76, 0, 0.24, 1), left 900ms cubic-bezier(0.76, 0, 0.24, 1), transform 900ms cubic-bezier(0.76, 0, 0.24, 1);
}

.cart-scene:focus-visible {
  outline: 0.12cqw solid var(--active-mint);
  outline-offset: 0.25cqw;
}

.cart-shell--open .cart-scene {
  top: -0.5cqw;
  left: 0;
  transform: none;
}

.cart-physics-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.cart-shell--open .cart-physics-layer { display: none; }

.cart-doodle {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cart-physics-item {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 40cqw;
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease 540ms, transform 720ms cubic-bezier(0.76, 0, 0.24, 1) 380ms;
}

.cart-shell:not(.cart-shell--open) .cart-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(5cqw);
}

.cart-shell--open .cart-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cart-list {
  max-height: 22cqw;
  overflow: auto;
}

.cart-list-title,
.cart-summary h2 {
  margin: 0 0 0.8cqw;
  font-size: 1.1cqw;
  font-weight: 400;
}

.cart-item-row {
  position: relative;
  display: grid;
  grid-template-columns: 5.5cqw 1fr 6.5cqw;
  gap: 1cqw;
  min-height: 7.2cqw;
  padding: 0.65cqw 0 1cqw;
  border-bottom: 0.07cqw solid #777;
}

.cart-item-row > img {
  width: 5.5cqw;
  height: 5.5cqw;
  object-fit: contain;
  background: #ffdfe8;
}

.cart-item-row h2,
.cart-item-row p {
  margin: 0 0 0.35cqw;
  font-size: 0.75cqw;
  font-weight: 400;
}

.cart-item-row > strong { font-size: 0.72cqw; font-weight: 400; }
.cart-quantity { display: flex; gap: 1cqw; margin-top: 0.7cqw; }
.cart-remove { position: absolute; right: 0; bottom: 0.6cqw; text-decoration: underline; }
.cart-empty { padding: 4cqw 0; border-bottom: 0.07cqw solid #777; }

.cart-summary {
  margin-top: 1.5cqw;
  padding: 1.8cqw;
  background: #f6f6f6;
}

.cart-summary > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55cqw;
  padding-bottom: 0.9cqw;
  border-bottom: 0.07cqw solid #777;
}

.cart-summary > p {
  display: flex;
  justify-content: space-between;
  margin: 0.8cqw 0 1.8cqw;
}

.cart-summary strong { font-size: 1.6cqw; font-weight: 400; }
.cart-checkout { float: right; color: inherit; text-decoration: underline; text-underline-offset: 0.13em; }

.checkout-shell { inset: 22% 12% 8% 5%; }

.checkout-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5cqw;
  font-size: 0.9cqw;
}

.checkout-form > div,
.checkout-form aside {
  padding: 2cqw;
  background: #f6f6f6;
}

.checkout-form aside h2 { margin: 0 0 1.4cqw; font-weight: 400; }
.checkout-form aside p { display: flex; justify-content: space-between; gap: 1cqw; }
.checkout-form aside b { font-weight: 400; white-space: nowrap; }
.checkout-total { padding-top: 1cqw; border-top: 0.07cqw solid #777; }
.checkout-total strong { font-size: 1.5cqw; font-weight: 400; }
.checkout-form aside button { float: right; text-decoration: underline; }
#checkout-status { display: block; clear: both; padding-top: 1.5cqw; font-size: 0.75cqw; }

@media (prefers-reduced-motion: reduce) {
  .cart-scene,
  .cart-panel { transition-duration: 1ms; transition-delay: 0ms; }
}