/* ============================================================
   MINIMAN SHOWROOM — layout for the 3D SPA shell (showroom.html)
   ============================================================ */
html, body.sr-body { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #08080a; }
.sr-body { color: var(--bone); font-family: var(--font-body); }

/* ---------- loading ---------- */
.sr-loading {
  position: fixed; inset: 0; z-index: 500; background: #08080a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  transition: opacity .6s var(--ease-out);
}
.sr-loading.is-done { opacity: 0; pointer-events: none; }
.sr-loading__mark { font-family: var(--font-display); font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: .04em; color: var(--bone); }
.sr-loading__track { width: min(260px, 60vw); height: 3px; background: rgba(255, 255, 255, .12); border-radius: 999px; overflow: hidden; }
.sr-loading__bar { height: 100%; width: 5%; background: var(--glow); transition: width .5s var(--ease-out); }
.sr-loading__hint { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: rgba(239, 236, 228, .5); text-transform: uppercase; }

/* ---------- 3D stage ---------- */
.sr-stage { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity .8s var(--ease-out); }
.sr-stage.is-ready { opacity: 1; }
.sr-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; -webkit-tap-highlight-color: transparent; }
.sr-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 60%, transparent 45%, rgba(8, 8, 10, .75) 100%);
}

/* ---------- nav ---------- */
.sr-nav {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left)) max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
}
.sr-nav__brand img { height: 40px; width: auto; display: block; }
.sr-nav__links { display: flex; gap: 4px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 5px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sr-nav__links button {
  font-family: var(--font-body); font-weight: 500; font-size: .9rem; color: var(--bone);
  background: transparent; border: 0; border-radius: 999px; padding: .55rem 1.15rem; cursor: pointer; transition: background .3s, color .3s;
}
.sr-nav__links button:hover { color: var(--glow); }
.sr-nav__links button.is-active { background: var(--glow); color: #0b0b0d; }
.sr-nav__exit { display: none; }
@media (min-width: 700px) { .sr-nav__exit { display: inline-flex; padding: .65rem 1.1rem; font-size: .82rem; } }
.sr-nav__cart {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06); color: var(--bone); cursor: pointer; backdrop-filter: blur(10px);
}
.sr-nav__cart svg { width: 19px; height: 19px; }
.sr-nav__cart:hover { color: var(--glow); border-color: rgba(231, 205, 128, .4); }
.sr-nav__cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--glow); color: #0b0b0d; font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-body);
}

/* ---------- overlay (product / cart / checkout / about / contact) ---------- */
body.sr-locked { overflow: hidden; }
.sr-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.5rem, 5vh, 5rem) clamp(1rem, 4vw, 2rem);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s;
}
.sr-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }
.sr-overlay__backdrop { position: absolute; inset: 0; background: rgba(6, 6, 8, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sr-overlay__panel {
  position: relative; z-index: 1; width: min(1100px, 100%); max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  background: #101014; border: 1px solid rgba(231, 205, 128, .18); border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3.25rem); box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  transform: translateY(18px) scale(.98); transition: transform .35s var(--ease-out);
}
.sr-overlay.is-open .sr-overlay__panel { transform: translateY(0) scale(1); }
.sr-overlay__close {
  position: sticky; top: 0; float: right; margin-left: 1rem; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: var(--bone);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.sr-overlay__close svg { width: 16px; height: 16px; }
.sr-overlay__close:hover { color: var(--glow); border-color: rgba(231, 205, 128, .4); }
.sr-overlay__body { color: var(--bone); clear: both; }
.sr-overlay__body h1, .sr-overlay__body h2 { color: var(--bone); }
.sr-overlay__body .eyebrow { color: var(--glow); }
.sr-overlay__body .lead { color: rgba(239, 236, 228, .78); }
.sr-overlay__body a { color: var(--glow); }
.sr-overlay__body section.section { padding-top: 2.5rem; }

.sr-panel-cart .cart-layout, .sr-panel-checkout { max-width: 640px; margin: 0 auto; }
.sr-panel-checkout .card-form { margin-top: 1.5rem; }

/* ---------- zones ---------- */
/* pointer-events is inherited: none here lets clicks pass through to the
   canvas everywhere by default; only .sr-zone__inner opts back in below.
   Without this the <main> wrapper's own box (full viewport height, its
   own stacking context) intercepts every click itself, even where none
   of its .sr-zone children have any visible content. */
.sr-zones { position: relative; z-index: 10; height: 100dvh; pointer-events: none; }
.sr-zone {
  position: fixed; inset: 0; display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 1rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vh, 5.5rem);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s var(--ease-out) .05s;
}
/* legibility scrim: copy sits over a busy 3D scene on every device */
.sr-zone::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 8, 10, .82) 0%, rgba(8, 8, 10, .5) 55%, transparent 100%);
}
/* pointer-events stay OFF on the full-viewport zone box itself — only its
   actual content box (bottom-left, not the whole screen) should catch
   clicks. Without this, the zone's inset:0 div sits above the canvas at
   every pixel and silently swallows all hover/click events meant for the
   3D scene (the holographic product cards), even over empty space where
   nothing is visibly there. */
.sr-zone.is-active { opacity: 1; visibility: visible; }
.sr-zone.is-active .sr-zone__inner { pointer-events: auto; }
/* Bounded + scrollable: on a short viewport the content can be taller than
   the space between the nav and the bottom padding. Without this it simply
   overflows past the top of the viewport (behind the nav, clipped, unreadable)
   since a fixed flex-end box has nothing stopping it growing upward. */
.sr-zone__inner {
  max-width: 56ch; max-height: 100%; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(231, 205, 128, .4) transparent;
}
.sr-zone__inner--wide { max-width: min(1100px, 92vw); }
.sr-zone h1, .sr-zone h2 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); color: var(--bone); margin: .3rem 0 .9rem; }
.sr-zone h1 .hl { color: var(--glow); }
.sr-zone .lead { color: rgba(239, 236, 228, .78); max-width: 46ch; }
.sr-zone .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.sr-zone .hero__cta button.btn { font: inherit; }

.sr-about__stats { display: flex; gap: clamp(1.4rem, 4vw, 3rem); margin: 1.4rem 0; flex-wrap: wrap; }
.sr-about__stats b { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--glow); line-height: 1; }
.sr-about__stats span { font-size: .82rem; color: rgba(239, 236, 228, .6); }

.sr-shop__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1.4rem; }
.sr-shop__pills button {
  font-family: var(--font-body); font-weight: 500; font-size: .8rem; color: rgba(239, 236, 228, .78);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
  padding: .45rem 1rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.sr-shop__pills button:hover { color: var(--glow); border-color: rgba(231, 205, 128, .4); }
.sr-shop__pills button.is-active { background: var(--glow); color: #0b0b0d; border-color: var(--glow); }

.sr-contact__row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 1rem; }
.sr-contact__addr { font-style: normal; color: rgba(239, 236, 228, .55); font-size: .88rem; }

/* camera-travel state: dim the active zone's own copy slightly while flying */
.sr-stage.is-traveling ~ .sr-zones .sr-zone.is-active { opacity: 0; }

@media (max-width: 700px) {
  /* mobile nav: brand + cart on top, a "story-progress" tab strip underneath */
  :root { --nav-h: 108px; }
  .sr-nav {
    height: auto; flex-wrap: wrap; align-content: flex-start; row-gap: 2px;
    padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    background: linear-gradient(to bottom, rgba(8, 8, 10, .85) 0%, rgba(8, 8, 10, .55) 60%, transparent 100%);
  }
  .sr-nav__brand { display: block; order: 1; }
  .sr-nav__brand img { height: 30px; }
  .sr-nav__cart { order: 2; margin-left: auto; width: 40px; height: 40px; flex: none; }
  .sr-nav__links {
    order: 3; flex: 0 0 100%; min-width: 0; margin: 0; padding: 0; gap: 0; background: none; border: 0; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .sr-nav__links::-webkit-scrollbar { display: none; }
  .sr-nav__links button {
    flex: 1 0 auto; position: relative; border-radius: 0; background: none !important; color: rgba(239, 236, 228, .5);
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    padding: .95rem .35rem .8rem; min-height: 44px; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .sr-nav__links button.is-active { color: var(--glow); }
  .sr-nav__links button::after {
    content: ''; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; border-radius: 2px;
    background: var(--glow); transform: scaleX(0); transition: transform .35s var(--ease-out);
  }
  .sr-nav__links button.is-active::after { transform: scaleX(1); }
  .sr-about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .sr-about__stats b { font-size: 1.7rem; }
  .sr-about__stats span { font-size: .72rem; }
  .sr-overlay { padding: max(.75rem, env(safe-area-inset-top)) .5rem max(.75rem, env(safe-area-inset-bottom)); }
  .sr-overlay__panel { max-height: calc(100dvh - 1.5rem); border-radius: 16px; }
  .sr-zone { align-items: flex-end; text-align: left; padding-inline: 1.25rem; }
  .sr-zone__inner { max-width: 90vw; }
  .sr-zone .lead { max-width: 40ch; }
  .sr-zone .hero__cta, .sr-contact__row { justify-content: flex-start; }
}
/* short landscape (phones on their side, small laptops): compact copy so it never covers the scene */
@media (max-height: 520px) {
  .sr-zone { padding-bottom: max(1rem, env(safe-area-inset-bottom)); padding-top: calc(var(--nav-h) + .25rem); }
  .sr-zone h1, .sr-zone h2 { font-size: clamp(1.7rem, 9vh, 2.6rem); margin: .1rem 0 .4rem; }
  .sr-zone .lead { font-size: .85rem; max-width: 52ch; }
  .sr-zone .hero__cta { margin-top: .75rem; gap: .6rem; }
  .sr-about__stats { margin: .6rem 0; }
  .sr-shop__pills { margin-bottom: .6rem; }
  .sr-overlay__panel { max-height: calc(100dvh - 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .sr-stage, .sr-zone, .sr-loading { transition: none; }
}

/* swipe hint (touch only, shown briefly once) */
.sr-swipehint {
  position: fixed; z-index: 30; left: 50%; bottom: max(1.1rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: .5rem 1rem; border-radius: 999px; background: rgba(8, 8, 10, .7); border: 1px solid rgba(231, 205, 128, .3);
  color: var(--glow); font: 600 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none; opacity: 0; animation: sr-hint 4s ease .8s both;
}
@keyframes sr-hint { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sr-swipehint { animation: none; display: none; } }

/* ---------- full-shop grid: image tiles with a bottom-left label, numbered corner, gold edge on hover ---------- */
.sr-zone--shop .btn { margin-top: .2rem; }
.sr-shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: .5rem; }
.sr-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.18; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); color: var(--bone); font: inherit;
  background: radial-gradient(85% 70% at 50% 42%, #2b2b31 0%, #15151a 62%, #0d0d10 100%);
  transition: border-color .3s, transform .35s var(--ease-out), box-shadow .35s;
  -webkit-tap-highlight-color: transparent;
}
.sr-tile > img, .sr-tile > .media-stack { position: absolute; left: 6%; top: 8%; width: 88%; height: 54%; object-fit: contain; transition: transform .5s var(--ease-out); }
.sr-tile > .media-stack img { width: 100%; height: 100%; object-fit: contain; }
.sr-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 6, 8, .92) 0%, rgba(6, 6, 8, .35) 42%, transparent 65%); pointer-events: none; }
.sr-tile__num { position: absolute; z-index: 2; top: .8rem; right: .9rem; font: 600 .68rem/1 var(--font-mono); letter-spacing: .1em; color: var(--glow); }
.sr-tile__label { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .9rem; display: flex; flex-direction: column; gap: .15rem; }
.sr-tile__label small { font: 600 .62rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(239, 236, 228, .55); }
.sr-tile__label b { font: 700 1.05rem/1.2 var(--font-display, var(--font-body)); color: var(--bone); }
.sr-tile__label b i { font-style: normal; color: var(--glow); display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease-out); }
.sr-tile__label em { font-style: normal; font-size: .82rem; color: var(--glow); }
.sr-tile:hover, .sr-tile:focus-visible { border-color: var(--glow); box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(231, 205, 128, .25); transform: translateY(-3px); outline: none; }
.sr-tile:hover > img, .sr-tile:focus-visible > img { transform: scale(1.06); }
.sr-tile:hover .sr-tile__label b i, .sr-tile:focus-visible .sr-tile__label b i { opacity: 1; transform: none; }
.sr-backbtn {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .5rem 1rem .5rem .8rem; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--bone); font: 600 .78rem var(--font-body);
}
.sr-backbtn:hover { color: var(--glow); border-color: rgba(231, 205, 128, .4); }
@media (max-width: 700px) { .sr-shopgrid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } .sr-tile__label b { font-size: .9rem; } .sr-tile__label b i { display: none; } }

/* ---------- phone intro copy: 6 words + faded "Show more" ---------- */
.sr-lead .sr-lead__ell, .sr-lead .sr-lead__more { display: none; }
@media (max-width: 700px) {
  .sr-lead .sr-lead__ell { display: inline; }
  .sr-lead .sr-lead__more {
    display: inline; padding: 0 .1rem; margin: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .9em; color: var(--glow); opacity: .55; text-decoration: underline; text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
  }
  .sr-lead .sr-lead__more:active { opacity: .9; }
  .sr-lead:not(.is-open) .sr-lead__rest { display: none; }
  .sr-lead.is-open .sr-lead__ell { display: none; }
}