* {
  box-sizing:border-box
}

html, body {
  margin:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  background:#070809;
  scroll-behavior:smooth
}

body {
  height:109vh;
  min-height:109vh
}

body.catalog-open {
  height:105.5vh;
  min-height:105.5vh;
  overflow-x:hidden;
  overflow-y:auto
}

body.product-page {
  height:336vh;
  min-height:336vh
}

body.info-open {
  height:100vh;
  min-height:100vh;
  overflow:hidden
}

.scene {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:109vh;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(ellipse at center, #111315 0%, #090a0b 56%, #050506 100%);
  transition:background .7s ease
}

.scene.catalog-mode {
  background:#030303
}

body.product-page .scene {
  height:336vh;
  overflow:visible
}

.frame {
  position:absolute;
  z-index:0;
  inset:clamp(14px, 2.4vw, 38px);
  border:1px solid rgba(255, 255, 255, .13);
  border-top:0;
  background:none;
  opacity:.62
}

.frame:before, .frame:after {
  display:none
}

.ascii {
  position:absolute;
  z-index:0;
  top:47.6%;
  left:50%;
  width:max-content;
  height:auto;
  margin:0;
  white-space:pre;
  font:500 clamp(6.8px, .86vw, 13.8px)/.82 "Courier New", monospace;
  letter-spacing:0;
  pointer-events:none;
  user-select:none
}

.shadow {
  display:none
}

.shadow.left, .shadow.right {
  display:none
}

.main {
  color:#f8fbff;
  opacity:.46;
  filter:contrast(.98) brightness(.96);
  text-shadow:0 0 2px rgba(255, 255, 255, .52), 0 0 9px rgba(157, 244, 255, .22), 0 0 18px rgba(157, 244, 255, .1);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, rgba(0, 0, 0, .84) 62%, transparent 91%);
  mask-image:radial-gradient(ellipse at center, #000 20%, rgba(0, 0, 0, .84) 62%, transparent 91%);
  transform:translate(-50%, -50%) scale(1.18, 1.43);
  transition:opacity .55s ease, filter .55s ease, text-shadow .55s ease
}

.scene.collapsing .main {
  opacity:.28
}

.scene.bg-gone .main {
  opacity:0;
  filter:contrast(.9) brightness(.55);
  text-shadow:none
}

.scan {
  display:none
}

.vignette {
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 10%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .92) 100%)
}

.ambient {
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  overflow:hidden
}

.ambient span {
  position:absolute;
  color:rgba(220, 250, 255, .58);
  font:500 clamp(10px, 1.05vw, 17px)/1 "Courier New", monospace;
  text-shadow:0 0 8px rgba(157, 244, 255, .34);
  opacity:0;
  transform:translateY(6px);
  animation:ambientSymbol 2.8s ease-out forwards
}

@keyframes ambientSymbol {
  0% {
  opacity:0;
  transform:translateY(8px)
}

18% {
  opacity:.72
}

100% {
  opacity:0;
  transform:translateY(-18px)
}

}

.code-wrap {
  position:absolute;
  z-index:3;
  top:clamp(17px, 2.4vw, 38px);
  left:clamp(17px, 2.4vw, 38px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}

.code {
  color:rgba(255, 255, 255, .48);
  font:500 clamp(7px, .54vw, 10px)/1 "Courier New", monospace;
  letter-spacing:.28em;
  transition:opacity .35s ease, color .35s ease
}

.actions {
  position:absolute;
  z-index:1;
  top:51.7vh;
  left:50%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:4%;
  row-gap:12%;
  width:50.8%;
  transform:translate(-50%, -50%);
  transition:opacity .45s ease, transform .55s ease
}

.scene.catalog-mode .actions, .scene.info-mode .actions {
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -58%)
}

button {
  position:relative;
  display:flex;
  min-width:0;
  aspect-ratio:2.55/1;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:4%;
  border:1px solid rgba(255, 255, 255, .4);
  background:linear-gradient(135deg, rgba(9, 9, 9, .84), rgba(0, 0, 0, .64));
  box-shadow:inset 0 0 28px rgba(255, 255, 255, .025), 0 10px 34px rgba(0, 0, 0, .35);
  backdrop-filter:blur(5px);
  color:#c5c5c5;
  cursor:pointer;
  transition:.35s
}

button:before {
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255, 255, 255, .07)
}

button img {
  display:block;
  width:75%;
  height:57%;
  object-fit:contain;
  opacity:.78;
  transition:.35s
}

button span {
  margin-top:3%;
  font:clamp(8px, .82vw, 11px) "Courier New", monospace;
  letter-spacing:.43em;
  text-indent:.43em
}

button:hover, button:focus-visible, button.selected {
  transform:translateY(-5px);
  border-color:rgba(255, 255, 255, .92);
  color:#fff;
  outline:0
}

button:hover img, button:focus-visible img, button.selected img {
  opacity:1;
  transform:scale(1.04)
}

button[data-id="convulsive"] img {
  width:75%;
  height:57%;
  object-fit:contain;
  object-position:center top;
  clip-path:inset(0 0 22% 0);
  transform:translateY(12%) scale(1.18)
}

button[data-id="convulsive"]:hover img, button[data-id="convulsive"]:focus-visible img, button[data-id="convulsive"].selected img {
  opacity:1;
  transform:translateY(12%) scale(1.23)
}

.info-button {
  width:max-content;
  min-width:74px;
  min-height:20px;
  padding:0 10px;
  border-color:rgba(255, 255, 255, .24);
  background:rgba(0, 0, 0, .32);
  box-shadow:none;
  backdrop-filter:none;
  aspect-ratio:auto;
  margin:0
}

.info-button span {
  margin-top:0;
  font-size:clamp(6px, .5vw, 8px);
  letter-spacing:.28em;
  text-indent:.28em
}

.info-button:before {
  inset:3px
}

.top-product-back {
  display:none;
  min-width:116px;
  min-height:24px;
  padding:0 14px
}

.top-product-back span {
  font-size:clamp(7px, .58vw, 9px);
  letter-spacing:.24em;
  text-indent:.24em
}

.top-product-back:before {
  inset:3px
}

body.catalog-open .top-product-back, body.product-page .top-product-back, body.info-open .top-product-back {
  display:flex
}

.language-wrap {
  position:absolute;
  z-index:5;
  top:clamp(17px, 2.4vw, 38px);
  right:clamp(17px, 2.4vw, 38px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px
}

.language-button {
  width:max-content;
  min-width:96px;
  min-height:20px;
  padding:0 10px;
  border-color:rgba(255, 255, 255, .24);
  background:rgba(0, 0, 0, .32);
  box-shadow:none;
  backdrop-filter:none;
  aspect-ratio:auto;
  margin:0;
  color:rgba(255, 255, 255, .68)
}

.language-button span {
  margin-top:0;
  font-size:clamp(6px, .5vw, 8px);
  letter-spacing:.24em;
  text-indent:.24em
}

.language-button:before {
  inset:3px
}

.lang-menu {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:96px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .24s ease, transform .24s ease
}

.language-wrap.open .lang-menu {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}

.lang-option {
  min-height:20px;
  aspect-ratio:auto;
  padding:0 9px;
  border-color:rgba(255, 255, 255, .2);
  background:rgba(0, 0, 0, .34);
  box-shadow:none;
  backdrop-filter:none;
  color:rgba(255, 255, 255, .52);
  font:500 clamp(6px, .5vw, 8px)/1 "Courier New", monospace;
  letter-spacing:.2em;
  text-indent:.2em;
  text-transform:uppercase
}

.lang-option:before {
  inset:3px
}

.lang-option.active {
  border-color:rgba(255, 255, 255, .54);
  color:rgba(255, 255, 255, .9)
}

.info-screen {
  position:absolute;
  z-index:4;
  top:50%;
  left:50%;
  width:min(760px, 76vw);
  transform:translate(-50%, -44%) translateY(14px);
  opacity:0;
  pointer-events:none;
  color:rgba(255, 255, 255, .76);
  font-family:"Courier New", monospace;
  transition:opacity .55s ease, transform .55s ease
}

.info-screen.visible {
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, -44%) translateY(0)
}

.info-terminal {
  position:relative;
  min-height:360px;
  padding:38px 42px 34px;
  border:1px solid rgba(255, 255, 255, .16);
  background:linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .18));
  box-shadow:inset 0 0 42px rgba(255, 255, 255, .02), 0 0 46px rgba(255, 255, 255, .025)
}

.info-terminal:before {
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(255, 255, 255, .06);
  pointer-events:none
}

.info-back {
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  margin:0 0 28px;
  padding:0 14px;
  border:1px solid rgba(255, 255, 255, .24);
  background:rgba(0, 0, 0, .36);
  color:rgba(255, 255, 255, .68);
  font:500 clamp(7px, .6vw, 9px)/1 "Courier New", monospace;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .28s ease, color .28s ease, background .28s ease, transform .28s ease
}

.info-back:hover, .info-back:focus-visible {
  border-color:rgba(255, 255, 255, .72);
  color:#fff;
  background:rgba(255, 255, 255, .05);
  transform:translateY(-1px);
  outline:0
}

.info-title {
  min-height:clamp(44px, 5vw, 76px);
  margin:0 0 22px;
  color:rgba(255, 255, 255, .9);
  font:500 clamp(42px, 5.8vw, 82px)/.9 "Courier New", monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(255, 255, 255, .16)
}

.info-kicker {
  min-height:18px;
  margin:0 0 28px;
  color:rgba(255, 255, 255, .64);
  font:500 clamp(10px, .9vw, 14px)/1 "Courier New", monospace;
  letter-spacing:.34em;
  text-transform:uppercase
}

.info-copy {
  min-height:58px;
  max-width:660px;
  margin:0 0 24px;
  color:rgba(255, 255, 255, .66);
  font:500 clamp(11px, .92vw, 14px)/1.75 "Courier New", monospace;
  letter-spacing:.05em
}

.info-lines {
  display:grid;
  gap:10px;
  margin-top:22px;
  color:rgba(255, 255, 255, .5);
  font:500 clamp(9px, .76vw, 12px)/1.5 "Courier New", monospace;
  letter-spacing:.14em;
  text-transform:uppercase
}

.info-line {
  min-height:18px
}

.info-choice {
  width:max-content;
  min-height:18px;
  aspect-ratio:auto;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  color:rgba(255, 255, 255, .5);
  font:inherit;
  letter-spacing:inherit;
  text-indent:0;
  text-align:left
}

.info-choice:before {
  display:none
}

.info-choice:hover, .info-choice:focus-visible, .info-line.active .info-choice {
  color:rgba(255, 255, 255, .9);
  text-shadow:0 0 10px rgba(255, 255, 255, .16);
  transform:none;
  outline:0
}

.info-pointer {
  width:10px;
  opacity:0;
  color:rgba(255, 255, 255, .82);
  transition:opacity .18s ease
}

.info-line.active .info-pointer {
  opacity:1
}

.info-answer {
  min-height:0;
  margin:0 0 0 18px;
  color:rgba(255, 255, 255, .56);
  font:500 clamp(9px, .74vw, 12px)/1.6 "Courier New", monospace;
  letter-spacing:.12em;
  text-transform:none;
  transition:margin .25s ease
}

.info-answer:not(:empty) {
  margin-top:7px;
  margin-bottom:4px
}

.typing:after {
  content:"_";
  display:inline-block;
  margin-left:4px;
  animation:caretBlink .8s steps(1) infinite
}

@keyframes caretBlink {
  50% {
  opacity:0
}

}

body.info-open .site-footer {
  opacity:0;
  pointer-events:none
}

.scene.info-mode .ascii {
  opacity:.08;
  filter:contrast(.75) brightness(.55)
}

.catalog {
  position:absolute;
  z-index:2;
  top:18vh;
  left:50%;
  width:min(980px, 82vw);
  max-height:none;
  overflow:visible;
  transform:translateX(-50%) translateY(16px);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease, transform .55s ease
}

.catalog.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0)
}

.back-button {
  position:relative;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  margin:0 0 16px;
  padding:0 16px;
  border:1px solid rgba(255, 255, 255, .24);
  background:rgba(0, 0, 0, .36);
  color:rgba(255, 255, 255, .68);
  font:500 clamp(8px, .68vw, 10px)/1 "Courier New", monospace;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .28s ease, color .28s ease, background .28s ease, transform .28s ease
}

.back-button:hover, .back-button:focus-visible {
  border-color:rgba(255, 255, 255, .72);
  color:#fff;
  background:rgba(255, 255, 255, .05);
  transform:translateY(-1px);
  outline:0
}

.catalog-title {
  margin:0 0 18px;
  color:rgba(255, 255, 255, .76);
  font:500 clamp(10px, .9vw, 13px)/1 "Courier New", monospace;
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase
}

.category-list {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px
}

.category {
  position:relative;
  min-height:48px;
  border:1px solid rgba(255, 255, 255, .28);
  background:rgba(0, 0, 0, .42);
  color:#d6d6d6;
  font:500 clamp(9px, .78vw, 12px)/1 "Courier New", monospace;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .28s ease, color .28s ease, background .28s ease, transform .28s ease
}

.category:hover, .category.active {
  border-color:rgba(255, 255, 255, .82);
  color:#fff;
  background:rgba(255, 255, 255, .06);
  transform:translateY(-2px)
}

.product-panel {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-8px);
  transition:max-height .55s ease, opacity .38s ease, transform .45s ease
}

.product-panel.visible {
  max-height:calc(82vh - 128px);
  opacity:1;
  transform:translateY(0);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:2px
}

.product-card {
  min-height:300px;
  aspect-ratio:3/4.35;
  border:1px solid rgba(255, 255, 255, .2);
  background:linear-gradient(135deg, rgba(10, 10, 10, .62), rgba(0, 0, 0, .42));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255, 255, 255, .72);
  font:500 clamp(10px, .82vw, 13px)/1 "Courier New", monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  animation:cardIn .42s ease both
}

.product-empty {
  grid-column:1 / -1;
  display:flex;
  min-height:clamp(90px, 12vw, 140px);
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255, 255, 255, .18);
  color:rgba(255, 255, 255, .48);
  font:500 clamp(9px, .74vw, 12px)/1.6 "Courier New", monospace;
  letter-spacing:.32em;
  text-indent:.32em
}

.product-card:nth-child(2) {
  animation-delay:.05s
}

.product-card:nth-child(3) {
  animation-delay:.1s
}

.product-detail {
  position:absolute;
  inset:44px -9vw auto -9.5vw;
  display:grid;
  grid-template-columns:minmax(430px, 1.25fr) minmax(280px, .75fr);
  gap:56px;
  min-height:auto;
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  transition:opacity .45s ease, transform .52s ease
}

.catalog.product-open .product-detail {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}

.catalog.product-open .category-list, .catalog.product-open .product-panel, .catalog.product-open .catalog-title, .catalog.product-open>.back-button {
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .28s ease, transform .32s ease
}

.detail-card {
  align-self:start;
  min-height:0;
  aspect-ratio:auto;
  border:1px solid rgba(255, 255, 255, .34);
  outline:1px solid rgba(255, 255, 255, .08);
  outline-offset:-7px;
  background:linear-gradient(135deg, rgba(14, 14, 14, .82), rgba(0, 0, 0, .58));
  display:block;
  padding:12px;
  color:rgba(255, 255, 255, .78);
  font:500 clamp(12px, 1vw, 16px)/1 "Courier New", monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  animation:detailCardIn .58s cubic-bezier(.18, .7, .18, 1) both
}

.detail-main {
  width:100%;
  border:1px solid rgba(255, 255, 255, .18);
  background:linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12));
  overflow:visible;
  padding:10px
}

.detail-photo {
  min-height:67vh;
  margin-bottom:14px;
  border:1px solid rgba(255, 255, 255, .14);
  background:rgba(255, 255, 255, .035);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(255, 255, 255, .46);
  font:500 clamp(11px, .9vw, 14px)/1 "Courier New", monospace;
  letter-spacing:.12em;
  text-transform:uppercase
}

.detail-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.detail-strip {
  display:none
}

.detail-thumb {
  display:none
}

.detail-info {
  padding-top:6px;
  color:rgba(255, 255, 255, .78);
  font-family:"Courier New", monospace;
  animation:detailInfoIn .5s ease .12s both
}

.detail-back {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  margin:0 0 22px;
  padding:0 16px;
  border:1px solid rgba(255, 255, 255, .24);
  background:rgba(0, 0, 0, .36);
  color:rgba(255, 255, 255, .68);
  font:500 clamp(8px, .68vw, 10px)/1 "Courier New", monospace;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .28s ease, color .28s ease, background .28s ease, transform .28s ease
}

.detail-back:hover, .detail-back:focus-visible {
  border-color:rgba(255, 255, 255, .72);
  color:#fff;
  background:rgba(255, 255, 255, .05);
  transform:translateY(-1px);
  outline:0
}

.detail-name {
  margin:0 0 18px;
  font:500 clamp(18px, 1.7vw, 26px)/1.1 "Courier New", monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#f2f2f2
}

.detail-price {
  margin:0 0 24px;
  font:500 clamp(12px, 1vw, 15px)/1 "Courier New", monospace;
  letter-spacing:.2em;
  color:rgba(255, 255, 255, .72)
}

.size-row {
  display:flex;
  gap:10px;
  margin:0 0 28px
}

.size-button {
  min-width:48px;
  min-height:34px;
  aspect-ratio:auto;
  padding:0 12px;
  border:1px solid rgba(255, 255, 255, .28);
  background:rgba(0, 0, 0, .42);
  color:rgba(255, 255, 255, .7);
  font:500 clamp(9px, .78vw, 12px)/1 "Courier New", monospace;
  letter-spacing:.1em;
  text-transform:uppercase
}

.size-button:hover, .size-button.selected {
  border-color:rgba(255, 255, 255, .8);
  color:#fff;
  background:rgba(255, 255, 255, .06);
  transform:translateY(-1px)
}

.order-button {
  width:min(260px, 100%);
  min-height:42px;
  margin:0 0 26px;
  aspect-ratio:auto;
  padding:0 18px;
  border:1px solid rgba(255, 255, 255, .36);
  background:rgba(255, 255, 255, .055);
  color:rgba(255, 255, 255, .82);
  font:500 clamp(10px, .82vw, 13px)/1 "Courier New", monospace;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .28s ease, color .28s ease, background .28s ease, transform .28s ease
}

.order-button:hover, .order-button:focus-visible {
  border-color:rgba(255, 255, 255, .86);
  color:#fff;
  background:rgba(255, 255, 255, .09);
  transform:translateY(-2px);
  outline:0
}

.detail-bio {
  max-width:440px;
  margin:0;
  color:rgba(255, 255, 255, .58);
  font:500 clamp(10px, .8vw, 13px)/1.7 "Courier New", monospace;
  letter-spacing:.04em
}

.product-card {
  cursor:pointer;
  transition:border-color .28s ease, color .28s ease, background .28s ease, transform .32s ease
}

.product-card:hover {
  border-color:rgba(255, 255, 255, .68);
  color:#fff;
  background:linear-gradient(135deg, rgba(20, 20, 20, .72), rgba(0, 0, 0, .48));
  transform:translateY(-4px)
}

@keyframes detailCardIn {
  from {
  opacity:.2;
  transform:translate(26px, 24px) scale(.82)
}

to {
  opacity:1;
  transform:translate(-20px, -18px) scale(1.03)
}

}

@keyframes detailInfoIn {
  from {
  opacity:0;
  transform:translateX(18px)
}

to {
  opacity:1;
  transform:translateX(0)
}

}

@keyframes cardIn {
  from {
  opacity:0;
  transform:translateY(12px)
}

to {
  opacity:1;
  transform:translateY(0)
}

}

.site-footer {
  position:relative;
  z-index:4;
  margin-top:107.4vh;
  padding:0 0 .35vh;
  text-align:center;
  color:rgba(255, 255, 255, .34);
  font:500 clamp(7px, .58vw, 10px)/1 "Courier New", monospace;
  letter-spacing:.2em;
  text-transform:uppercase;
  pointer-events:none
}

body.catalog-open:not(.product-page) .site-footer {
  margin-top:104vh
}

body.product-page .site-footer {
  margin-top:329vh
}

@media(max-width:700px) {
  body {
  height:109vh;
  min-height:109vh
}

body.catalog-open:not(.product-page) {
  height:107vh;
  min-height:107vh
}

body.catalog-open.products-open:not(.product-page) {
  height:145vh;
  min-height:145vh
}

body.product-page {
  height:312vh;
  min-height:312vh
}

.ascii {
  top:47.4%;
  font-size:5.7px
}

.shadow {
  display:none
}

.frame {
  inset:14px;
  border-top:0
}

.actions {
  top:52vh;
  width:84%;
  gap:5%;
  row-gap:8%
}

button {
  min-height:64px;
  padding:7px
}

button span {
  font-size:7px;
  letter-spacing:.2em;
  text-indent:.2em
}

.info-button {
  min-height:18px;
  min-width:58px;
  padding:0 8px
}

.info-button span {
  font-size:6px;
  letter-spacing:.2em;
  text-indent:.2em
}

.top-product-back {
  min-width:92px;
  min-height:20px;
  padding:0 9px
}

.top-product-back span {
  font-size:6px;
  letter-spacing:.18em;
  text-indent:.18em
}

.language-wrap {
  top:17px;
  right:18px
}

.language-button, .lang-menu {
  min-width:82px
}

.language-button {
  min-height:18px;
  padding:0 8px
}

.language-button span, .lang-option {
  font-size:6px;
  letter-spacing:.18em;
  text-indent:.18em
}

.lang-option {
  min-height:18px
}

.info-screen {
  width:86vw;
  transform:translate(-50%, -46%) translateY(12px)
}

.info-screen.visible {
  transform:translate(-50%, -46%) translateY(0)
}

.info-terminal {
  min-height:330px;
  padding:28px 24px 26px
}

.info-title {
  font-size:34px;
  letter-spacing:.12em
}

.info-kicker {
  font-size:10px
}

.info-copy {
  font-size:11px
}

.code-wrap {
  left:18px;
  gap:7px
}

.code {
  font-size:7px;
  letter-spacing:.18em
}

.catalog {
  top:14vh;
  width:90vw;
  max-height:none
}

.back-button {
  min-height:24px;
  margin-bottom:12px;
  padding:0 12px
}

.catalog-title {
  margin-bottom:14px
}

.category-list {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px
}

.category {
  min-height:38px;
  font-size:8px;
  letter-spacing:.14em;
  text-indent:.14em;
  padding:0 6px
}

.product-panel {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:14px
}

.product-panel.visible {
  max-height:none;
  overflow:visible;
  padding-right:0
}

.product-card {
  min-height:145px;
  aspect-ratio:3/4;
  font-size:8px;
  letter-spacing:.08em
}

.site-footer {
  margin-top:107.8vh
}

body.catalog-open:not(.product-page) .site-footer {
  margin-top:104.5vh
}

body.catalog-open.products-open:not(.product-page) .site-footer {
  margin-top:139vh
}

body.product-page .site-footer {
  margin-top:304vh
}

.product-detail {
  position:absolute;
  inset:54px 0 auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:auto;
  overflow:visible
}

.detail-info {
  order:-1;
  width:100%;
  padding:0 2vw;
  min-width:0;
  text-align:left
}

.detail-name {
  font-size:17px;
  letter-spacing:.14em;
  margin-bottom:13px
}

.detail-price {
  font-size:11px;
  margin-bottom:15px
}

.size-row {
  gap:7px;
  margin-bottom:16px
}

.size-button {
  min-height:31px;
  min-width:40px
}

.order-button {
  width:min(260px, 100%);
  min-height:37px;
  margin-bottom:16px;
  padding:0 12px
}

.detail-bio {
  font-size:10px;
  line-height:1.55;
  max-width:none
}

.detail-card {
  min-height:0;
  width:100%;
  justify-self:stretch;
  animation:detailCardMobileIn .5s cubic-bezier(.18, .7, .18, 1) both;
  padding:9px
}

.detail-main {
  min-height:0;
  padding:8px
}

.detail-photo {
  min-height:54vh;
  margin-bottom:10px
}

.detail-photo img {
  object-fit:cover
}

@keyframes detailCardMobileIn {
  from {
  opacity:.2;
  transform:translateY(16px) scale(.94)
}

to {
  opacity:1;
  transform:translateY(0) scale(1)
}

}

}

/* Respect unavailable controls even when component styles set display. */
[hidden] { display: none !important; }

/* Keep both brand controls centered even while the catalog API is unavailable. */
.brand-status {
  position: absolute;
  top: 69vh;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .08em;
}
.scene.catalog-mode .brand-status,
.scene.info-mode .brand-status { display: none; }

.product-card { position:relative; overflow:hidden; }
.product-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.product-caption { position:relative; z-index:1; padding:12px; text-align:center; line-height:1.5; }
.product-cover + .product-caption { align-self:flex-end; width:100%; background:rgba(0,0,0,.72); }