.ar-entry-overlay {
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html.ar-route-preflight,
html.ar-route-ready,
html.ar-route-unsupported,
html.ar-route-3d {
  background: #eee8de;
  overflow: hidden;
}

html.ar-route-preflight body,
html.ar-route-ready body,
html.ar-route-unsupported body,
html.ar-route-3d body {
  min-height: 100svh;
  overflow: hidden;
  background: transparent;
}

html.ar-route-preflight .ar-entry-overlay,
html.ar-route-ready .ar-entry-overlay,
html.ar-route-unsupported .ar-entry-overlay,
html.ar-route-3d .ar-entry-overlay { display: block; }

/* Once immersive WebXR actually starts, none of the branded launch-screen
   wash/artwork should sit on top of the camera feed. The model-viewer itself
   must also regain pointer events; otherwise WebXR drag/rotate/reposition
   gestures can be swallowed by the AR-first launch-screen styling. */
html.ar-webxr-active .ar-entry-overlay { display: none !important; }
html.ar-webxr-active model-viewer {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* The custom artwork sits behind the live product model. The main artwork uses
   contain so it is never cropped or stretched; a blurred cover layer fills the
   extra screen area created by different phone aspect ratios. */
.ar-entry-design {
  position: fixed;
  inset: 0;
  z-index: 1700;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .22s ease;
}
.ar-entry-design.has-design { opacity: 1; }
.ar-entry-design-blur {
  inset: -34px;
  z-index: 1690;
  background-size: cover;
  filter: blur(28px) saturate(.94);
  transform: scale(1.04);
  opacity: 0;
}
.ar-entry-design-blur.has-design { opacity: .48; }
.ar-entry-design-main {
  background-size: contain;
  opacity: 0;
}
.ar-entry-design-main.has-design { opacity: .82; }

.ar-entry-wash {
  position: fixed;
  inset: 0;
  z-index: 1950;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(250,248,244,.62) 0%, rgba(250,248,244,.12) 34%, rgba(246,242,235,.28) 68%, rgba(239,233,223,.72) 100%),
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.24), rgba(238,231,220,.3));
}

/* On QR routes the existing rich viewer becomes the product backdrop. All old
   chrome is hidden; only the same already-loaded model remains visible. */
html.ar-route-preflight .viewer-shell,
html.ar-route-ready .viewer-shell,
html.ar-route-unsupported .viewer-shell,
html.ar-route-3d .viewer-shell {
  position: fixed;
  inset: 0;
  z-index: 1900;
  width: 100vw;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

html.ar-route-preflight .topbar,
html.ar-route-ready .topbar,
html.ar-route-unsupported .topbar,
html.ar-route-3d .topbar,
html.ar-route-preflight .dish-card,
html.ar-route-ready .dish-card,
html.ar-route-unsupported .dish-card,
html.ar-route-3d .dish-card,
html.ar-route-preflight .viewer-control,
html.ar-route-ready .viewer-control,
html.ar-route-unsupported .viewer-control,
html.ar-route-3d .viewer-control,
html.ar-route-preflight .gesture-hint,
html.ar-route-ready .gesture-hint,
html.ar-route-unsupported .gesture-hint,
html.ar-route-3d .gesture-hint { display: none !important; }

html.ar-route-preflight .product-view,
html.ar-route-ready .product-view,
html.ar-route-unsupported .product-view,
html.ar-route-3d .product-view {
  height: 100svh;
  padding: 0;
}

html.ar-route-preflight .model-stage,
html.ar-route-ready .model-stage,
html.ar-route-unsupported .model-stage,
html.ar-route-3d .model-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  background: transparent;
}

html.ar-route-preflight model-viewer,
html.ar-route-ready model-viewer,
html.ar-route-unsupported model-viewer {
  opacity: .18;
  pointer-events: none;
  transform: none;
  transition: opacity .25s ease;
}

html.ar-route-3d model-viewer {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ar-entry-card {
  position: fixed;
  z-index: 2100;
  left: 50%;
  bottom: max(44px, 7.5svh, calc(env(safe-area-inset-bottom) + 28px));
  transform: translateX(-50%);
  width: min(408px, calc(100% - 34px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #181713;
}

.ar-entry-card h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(31px, 8.5vw, 45px);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -.034em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(255,255,255,.72);
}

.ar-entry-copy {
  max-width: 33ch;
  margin: 19px 0 0;
  color: #565149;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.52;
  letter-spacing: -.008em;
  text-wrap: balance;
}

.ar-entry-button {
  width: 100%;
  min-height: 62px;
  margin-top: 24px;
  border: 0;
  border-radius: 20px;
  padding: 15px 22px;
  background: var(--ar-button-bg, #173f31);
  color: var(--ar-button-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(21,31,27,.18), 0 1px 0 rgba(255,255,255,.12) inset;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.012em;
  line-height: 1.15;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.ar-entry-button:active { transform: scale(.986); filter: brightness(.94); box-shadow: 0 9px 24px rgba(21,31,27,.16); }
.ar-entry-button:disabled { opacity: .7; cursor: wait; }

.ar-entry-hint {
  margin: 12px 8px 0;
  max-width: 34ch;
  color: #6a645b;
  font-size: 12.5px;
  font-weight: 480;
  line-height: 1.48;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.ar-entry-spinner {
  width: 32px;
  height: 32px;
  margin-top: 25px;
  border: 3px solid rgba(118,109,96,.2);
  border-top-color: #173f31;
  border-radius: 50%;
  animation: ar-entry-spin .8s linear infinite;
}

html.ar-route-ready .ar-entry-spinner,
html.ar-route-unsupported .ar-entry-spinner,
html.ar-route-3d .ar-entry-spinner { display: none; }

.ar-entry-3d-caption {
  position: fixed;
  z-index: 2100;
  top: max(20px, calc(env(safe-area-inset-top) + 12px));
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 30px));
  padding: 12px 16px 11px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 34px rgba(35,30,24,.09);
  backdrop-filter: blur(16px) saturate(1.06);
  color: #211f1b;
  text-align: center;
  pointer-events: none;
}
.ar-entry-3d-caption strong,
.ar-entry-3d-caption span { display: block; }
.ar-entry-3d-caption strong {
  font-size: 16px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.ar-entry-3d-caption span {
  margin-top: 5px;
  color: #686159;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

/* WebXR puts light-DOM children of model-viewer into its DOM overlay. While
   the model is still in model-viewer's provisional camera-relative placement,
   make it explicit that the table has not been locked yet. The guide disappears
   only after model-viewer reports object-placed. */
.webxr-placement-guide,
.webxr-placed-toast {
  display: none;
  position: absolute;
  z-index: 99999;
  left: 50%;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

model-viewer[ar-status="session-started"] > .webxr-placement-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  transform: translateX(-50%);
  width: min(390px, calc(100% - 30px));
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 18px;
  background: rgba(20,20,18,.74);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.webxr-scan-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff;
  border-radius: 50%;
  animation: webxr-scan-spin 1.15s linear infinite;
}

.webxr-guide-copy {
  min-width: 0;
  text-align: left;
}
.webxr-guide-copy strong,
.webxr-guide-copy span { display: block; }
.webxr-guide-copy strong {
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.webxr-guide-copy span {
  margin-top: 3px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 480;
  line-height: 1.36;
}

model-viewer[ar-tracking="not-tracking"][ar-status="session-started"] > .webxr-placement-guide {
  background: rgba(47,35,24,.82);
}

model-viewer[ar-status="object-placed"] > .webxr-placed-toast {
  display: block;
  top: max(22px, calc(env(safe-area-inset-top) + 12px));
  transform: translateX(-50%);
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 999px;
  background: rgba(20,20,18,.7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.005em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: webxr-placed-toast 2.4s ease forwards;
}

html.ar-route-3d .ar-entry-card { display: none; }
html.ar-route-3d .ar-entry-wash { opacity: .08; }
html.ar-route-3d .ar-entry-design-main.has-design { opacity: .26; }
html.ar-route-3d .ar-entry-design-blur.has-design { opacity: .2; }

@keyframes ar-entry-spin { to { transform: rotate(360deg); } }
@keyframes webxr-scan-spin { to { transform: rotate(360deg); } }
@keyframes webxr-placed-toast {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

@media (min-width: 760px) {
  .ar-entry-card { bottom: max(58px, 8svh, calc(env(safe-area-inset-bottom) + 34px)); }
  .ar-entry-card h1 { font-size: clamp(38px, 5vw, 50px); }
}

@media (max-height: 680px) {
  .ar-entry-card { bottom: max(24px, 4svh, calc(env(safe-area-inset-bottom) + 18px)); }
  .ar-entry-card h1 { font-size: clamp(28px, 8vw, 38px); }
  .ar-entry-copy { margin-top: 14px; font-size: 14px; }
  .ar-entry-button { min-height: 56px; margin-top: 18px; }
  .ar-entry-hint { margin-top: 9px; }
}

@media (max-width: 480px) {
  .ar-entry-card { width: calc(100% - 30px); }
  .ar-entry-card h1 { font-size: clamp(30px, 9vw, 41px); }
  .ar-entry-copy { font-size: 15px; }
  .ar-entry-button { min-height: 60px; font-size: 16.5px; }
}