/* Reference 3D experience
   Uses the same saved artwork and approved glass language as the AR entry:
   - pageBackgroundUrl remains the exact background artwork
   - the GLB remains full-screen and interactive
   - the product name remains dynamic
   - rotate/zoom guidance is real UI, not baked into the artwork
   Only applies after the AR route explicitly enters 3D. */

html.ar-route-3d,
html.ar-route-3d body {
  background:var(--page-surface,#17100b)!important;
}
html.ar-route-3d .viewer-shell {
  background:transparent!important;
}

/* Do not create a second 3D-only backdrop. Reuse the exact same artwork layers
   already populated from pageBackgroundUrl on the screen before 3D. This keeps
   image, crop, focal point, and fallback treatment identical across both views. */
html.ar-route-3d #modelStage,
html.ar-route-3d #modelStage.lite-viewer-active {
  isolation:isolate;
  background:transparent!important;
}
html.ar-route-3d #modelStage::before,
html.ar-route-3d #modelStage::after {
  content:none!important;
  display:none!important;
}

/* The existing entry artwork sits behind the transparent WebGL renderer. */
html.ar-route-3d .ar-entry-design,
html.ar-route-3d .ar-entry-wash {
  display:block!important;
  pointer-events:none!important;
}
html.ar-route-3d .ar-entry-design {
  transition:none!important;
}
html.ar-route-3d .ar-entry-design-main {
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
html.ar-route-3d #arEntryDesignMain {
  opacity:1!important;
}
html.ar-route-3d .ar-entry-design-blur {
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:transparent!important;
  filter:blur(30px) saturate(1.12) brightness(.92)!important;
  transform:scale(1.1)!important;
}
html.ar-route-3d:not(.design-fits-viewport):not(.design-standard-mobile) #arEntryDesignBlur {
  opacity:.86!important;
}
html.ar-route-3d.design-fits-viewport #arEntryDesignBlur,
html.ar-route-3d.design-standard-mobile #arEntryDesignBlur {
  opacity:0!important;
}
html.ar-route-3d.design-standard-mobile .ar-entry-design-main {
  background-size:cover!important;
  background-position:center top!important;
}
html.ar-route-3d .ar-entry-wash {
  background:linear-gradient(180deg,rgba(0,0,0,.008) 0%,rgba(0,0,0,.012) 58%,rgba(0,0,0,.045) 100%)!important;
  opacity:1!important;
}

/* Keep the 3D product exactly in its original full-screen interactive stage.
   Reference styling is UI/background only; it never moves, crops, or resizes
   the renderer and never changes the camera behavior. */
html.ar-route-3d model-viewer,
html.ar-route-3d .lite-3d-canvas {
  z-index:2!important;
  background:transparent!important;
}

/* Dynamic product identity floats over the same uploaded artwork. */
html.ar-route-3d .ar-entry-3d-caption {
  position:fixed!important;
  z-index:2150!important;
  top:18.2svh!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  transform:none!important;
  box-sizing:border-box;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  margin:0!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#f3eadc!important;
  text-align:center!important;
  direction:ltr!important;
  pointer-events:none!important;
}

html.ar-route-3d .ar-entry-3d-caption .dish-title {
  display:block!important;
  width:100%!important;
  max-width:min(84vw,780px)!important;
  margin:0!important;
  padding:0!important;
  color:#f8f1e7!important;
  font-family:"Product Serif",Georgia,"Times New Roman",serif!important;
  font-size:clamp(29px,4.5vw,44px)!important;
  font-weight:700!important;
  line-height:1.02!important;
  letter-spacing:-.018em!important;
  text-align:center!important;
  text-shadow:0 1px 5px rgba(0,0,0,.12)!important;
  text-wrap:balance;
  overflow-wrap:anywhere;
  unicode-bidi:plaintext;
}

/* Same approved glass recipe as the entry card: identical border family,
   dynamic card hue, blur strength, saturation/brightness, shadows and sheen. */
.ar-entry-3d-gesture-pill {
  isolation:isolate;
  position:relative;
  overflow:hidden;
  width:min(68vw,640px);
  min-width:min(250px,calc(100vw - 22px));
  min-height:50px;
  margin-top:14px;
  padding:7px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid rgba(157,124,88,.58);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,248,236,.018) 0%,rgba(255,248,236,.004) 28%,rgba(0,0,0,.018) 100%),
    var(--ar-card-fill,rgba(31,23,17,.72));
  box-shadow:
    0 11px 28px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,248,236,.055),
    inset 0 -1px 0 rgba(0,0,0,.13);
  color:#f3eadc;
  -webkit-backdrop-filter:blur(5px) saturate(.88) brightness(.78);
  backdrop-filter:blur(5px) saturate(.88) brightness(.78);
}
.ar-entry-3d-gesture-pill::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0) 30%);
}
.ar-entry-3d-gesture-pill > * {
  position:relative;
  z-index:1;
}

html.ar-route-3d .ar-entry-3d-caption .ar-entry-3d-gesture-item {
  min-width:0;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  color:#f8f1e7;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(12.5px,1.8vw,17px);
  font-weight:520;
  line-height:1;
  letter-spacing:-.012em;
  text-shadow:0 1px 4px rgba(0,0,0,.09);
}

.ar-entry-3d-gesture-item svg {
  width:22px;
  height:22px;
  flex:0 0 auto;
  fill:none;
  color:color-mix(in srgb,var(--ar-icon-color,#b7a082) 20%,#c4a36f 80%);
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.90;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.10));
}

.ar-entry-3d-gesture-divider {
  width:1px;
  height:52%;
  min-height:24px;
  background:linear-gradient(180deg,transparent,rgba(157,124,88,.58) 18%,rgba(157,124,88,.58) 82%,transparent);
}

@media (max-width:700px) and (orientation:portrait) {
  /* Match the exact mobile crop used by the entry screen: preserve the top/logo
     area and allow any cover crop to come from below. */
  html.ar-route-3d #arEntryDesignBlur {
    opacity:0!important;
  }
  html.ar-route-3d .ar-entry-design-main {
    background-size:cover!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
}

@media (max-width:600px) {
  /* Match the supplied phone screenshot more closely:
     - product title sits below the baked restaurant lockup instead of over it
     - rotate/zoom glass is shorter and more compact
     - live dish render sits a little lower while keeping the same scale/camera */
  html.ar-route-3d .ar-entry-3d-caption {
    top:24.2svh!important;
    padding-inline:12px!important;
  }
  html.ar-route-3d .ar-entry-3d-caption .dish-title {
    max-width:88vw!important;
    font-size:clamp(23px,5.9vw,28px)!important;
  }
  .ar-entry-3d-gesture-pill {
    width:68vw;
    max-width:640px;
    min-width:min(246px,calc(100vw - 22px));
    height:38px;
    min-height:38px;
    margin-top:9px;
    padding:0 10px;
    gap:7px;
  }
  .ar-entry-3d-gesture-item {
    gap:6px;
    font-size:clamp(11px,2.9vw,12.5px);
    line-height:1;
  }
  .ar-entry-3d-gesture-item svg {
    width:18px;
    height:18px;
  }
  .ar-entry-3d-gesture-divider {
    height:56%;
    min-height:20px;
  }

  html.ar-route-3d model-viewer,
  html.ar-route-3d .lite-3d-canvas {
    transform:translateY(4svh)!important;
  }
}

@media (max-width:360px) {
  .ar-entry-3d-gesture-pill {
    width:70vw;
    min-width:min(238px,calc(100vw - 18px));
    height:36px;
    min-height:36px;
    padding-inline:8px;
    gap:5px;
  }
  .ar-entry-3d-gesture-item {
    gap:4px;
    font-size:10.75px;
  }
  .ar-entry-3d-gesture-item svg {
    width:17px;
    height:17px;
  }
}

@media (max-height:650px) {
  html.ar-route-3d .ar-entry-3d-caption {
    top:20.5svh!important;
  }
  .ar-entry-3d-gesture-pill {
    margin-top:8px;
    height:36px;
    min-height:36px;
  }
  html.ar-route-3d model-viewer,
  html.ar-route-3d .lite-3d-canvas {
    transform:translateY(3svh)!important;
  }
}

@media (orientation:landscape) and (max-height:560px) {
  html.ar-route-3d model-viewer,
  html.ar-route-3d .lite-3d-canvas {
    transform:none!important;
  }
  html.ar-route-3d .ar-entry-3d-caption {
    top:max(14px,calc(env(safe-area-inset-top) + 8px))!important;
  }
  html.ar-route-3d .ar-entry-3d-caption .dish-title {
    font-size:clamp(24px,5.2vh,32px)!important;
  }
  .ar-entry-3d-gesture-pill {
    width:min(58vw,520px);
    min-height:42px;
    margin-top:7px;
  }
}

@media (prefers-reduced-transparency:reduce) {
  .ar-entry-3d-gesture-pill {
    background:var(--ar-card-color,#1f1711);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}