:root {
  --product-bg-image:none;
  --accent-contrast:#fff;
  --page-surface:#eee9e0;
}

html,
body { background:var(--page-surface); }

/* Loading is part of the product identity. A blurred cover layer fills spare
   screen area, while the real artwork is always shown complete with contain. */
.loading-state {
  isolation:isolate;
  overflow:hidden;
  background:var(--page-surface);
  color:#24211d;
}
.loading-state::before,
.loading-state::after {
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.loading-state::before {
  inset:-28px;
  z-index:0;
  background-color:transparent;
  background-image:var(--product-bg-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(30px) saturate(1.1) brightness(.92);
  transform:scale(1.11);
}
.loading-state::after {
  inset:0;
  z-index:1;
  background-image:var(--product-bg-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
html.has-product-design:not(.design-fits-viewport):not(.design-standard-mobile) .loading-state::before { opacity:.84; }
html.has-product-design.design-fits-viewport .loading-state::before,
html.has-product-design.design-standard-mobile .loading-state::before { opacity:0; }
html.has-product-design .loading-state::after { opacity:1; }
html.has-product-design.design-standard-mobile .loading-state::after { background-size:cover; background-position:center top; }
.loading-state > * { position:relative; z-index:3; }
.loading-state .spinner {
  width:38px;
  height:38px;
  border:1.5px solid rgba(45,40,34,.16);
  border-top-color:var(--accent);
  border-right-color:var(--accent);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.28);
  animation:product-loading-spin .86s cubic-bezier(.45,.05,.55,.95) infinite;
}
.loading-state p {
  margin:12px 0 0;
  color:#37332d;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@keyframes product-loading-spin { to { transform:rotate(360deg); } }

.viewer-shell {
  width:min(720px,100%);
  background:var(--page-surface);
  box-shadow:0 0 60px rgba(47,40,31,.06);
}
.topbar {
  min-height:58px;
  padding:10px 18px;
  border-bottom:0;
  background:color-mix(in srgb,var(--page-surface) 74%,#fff 26%);
}
.top-label {
  color:#918a7f;
  font-size:8px;
  letter-spacing:.11em;
  direction:ltr;
}
.topbar strong { margin-top:2px; color:#39352f; font-size:12px; }
.ready-pill {
  border:1px solid rgba(49,91,73,.12);
  padding:6px 9px;
  background:#edf3ef;
  color:#345b4b;
  font-size:9px;
}
.status-dot { width:6px; height:6px; box-shadow:none; }

/* Same two-layer artwork treatment behind the live product. No crop on the
   actual design; only the blurred fill uses cover. */
.model-stage {
  height:min(60svh,610px);
  min-height:390px;
  isolation:isolate;
  background:var(--page-surface);
}
.model-stage::before,
.model-stage::after {
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
}
.model-stage::before {
  inset:-24px;
  z-index:0;
  background-color:transparent;
  background-image:var(--product-bg-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(28px) saturate(1.1) brightness(.92);
  transform:scale(1.1);
}
.model-stage::after {
  inset:0;
  z-index:0;
  background-image:var(--product-bg-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
html.has-product-design:not(.design-fits-stage):not(.ar-route-preflight):not(.ar-route-ready):not(.ar-route-unsupported) .model-stage::before { opacity:.8; }
html.has-product-design.design-fits-stage:not(.ar-route-preflight):not(.ar-route-ready):not(.ar-route-unsupported) .model-stage::before { opacity:0; }
html.has-product-design:not(.ar-route-preflight):not(.ar-route-ready):not(.ar-route-unsupported) .model-stage::after { opacity:1; }
/* Product artwork is a phone-page backdrop, not artwork sized to the 3D stage.
   On portrait phones, never generate side blur just because the stage is shorter
   than the viewport. Fill the stage from the same artwork and reserve blur for
   non-phone / unusual-layout fallbacks only. */
html.has-product-design.design-standard-mobile .model-stage::before { opacity:0!important; }
html.has-product-design.design-standard-mobile .model-stage::after { background-size:cover; background-position:center top; }
.model-stage model-viewer,
.model-stage .lite-3d-canvas { position:relative; z-index:1; }

.viewer-control {
  min-height:38px;
  border:1px solid rgba(255,255,255,.72);
  padding:8px 11px;
  background:rgba(255,255,255,.88);
  color:#433e37;
  box-shadow:0 5px 18px rgba(38,33,27,.07);
  font-size:10px;
}
.gesture-hint {
  bottom:14px;
  border:0;
  padding:7px 10px;
  background:rgba(35,31,26,.72);
  color:#fff;
  box-shadow:none;
  font-size:9px;
  font-weight:650;
  direction:ltr;
}

/* Product information reads from the left; the 3D remains the hero above it. */
.dish-card {
  margin-top:0;
  border-top:1px solid rgba(218,212,202,.7);
  border-radius:0;
  padding:24px 22px max(18px,env(safe-area-inset-bottom));
  background:#fffdfa;
  box-shadow:none;
  text-align:left;
}
.dish-title-row { direction:ltr; text-align:left; }
.dish-title-row > div,
.restaurant-small,
.dish-card h1,
.description { text-align:left; unicode-bidi:plaintext; }
.restaurant-small {
  margin-bottom:5px;
  color:#8b8379;
  font-size:10px;
  font-weight:700;
}
.dish-card h1 {
  max-width:15ch;
  font-size:clamp(28px,6.8vw,40px);
  font-weight:760;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.price {
  margin-top:1px;
  border:1px solid #e8e3da;
  border-radius:999px;
  padding:7px 10px;
  background:#faf8f4;
  color:#403b34;
  font-size:11px;
  direction:ltr;
}
.description {
  max-width:58ch;
  margin-top:12px;
  color:#746d63;
  font-size:13px;
  line-height:1.72;
}
.action-stack {
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:18px;
  direction:ltr;
}
.ar-button,
.ar-entry-button {
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 82%,#000);
  border-radius:18px;
  background:var(--accent);
  color:var(--accent-contrast,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 11px 24px color-mix(in srgb,var(--accent) 18%,transparent);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
  direction:ltr;
}
.ar-button::after,
.ar-entry-button::after {
  content:"↗";
  width:31px;
  height:31px;
  flex:0 0 31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:inherit;
  font-size:13px;
  line-height:1;
}
.ar-button:hover,
.ar-entry-button:hover { filter:brightness(1.035); }
.ar-button:active,
.ar-entry-button:active {
  transform:translateY(1px) scale(.992);
  filter:brightness(.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 15px color-mix(in srgb,var(--accent) 14%,transparent);
}
.ar-button:focus-visible,
.ar-entry-button:focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);
  outline-offset:3px;
}
.share-dish-button {
  min-width:108px;
  border:1px solid #e4dfd6;
  border-radius:18px;
  background:#faf8f4;
  color:#5e574e;
  box-shadow:none;
  direction:ltr;
}
.share-dish-button:hover { background:#f5f1ea; border-color:#d6d0c6; }

/* AR entry: common modern phone ratios use the artwork as a full-bleed cover
   so the browser toolbar cannot create artificial side blur. Unusual ratios
   keep the contain + blur fallback to avoid aggressive cropping. */
html.ar-route-preflight,
html.ar-route-ready,
html.ar-route-unsupported,
html.ar-route-3d { background:var(--page-surface)!important; }
.ar-entry-design-main {
  inset:0!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.ar-entry-design-main.has-design { opacity:1; }
.ar-entry-design-blur {
  inset:-30px!important;
  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:not(.design-fits-viewport):not(.design-standard-mobile) .ar-entry-design-blur.has-design { opacity:.86; }
html.design-fits-viewport .ar-entry-design-blur.has-design,
html.design-standard-mobile .ar-entry-design-blur.has-design { opacity:0!important; }
html.design-standard-mobile .ar-entry-design-main { background-size:cover!important; background-position:center top!important; }
.ar-entry-wash {
  z-index:1800;
  background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.01) 50%,rgba(255,255,255,.045) 100%);
}
html.ar-route-preflight model-viewer,
html.ar-route-ready model-viewer,
html.ar-route-unsupported model-viewer {
  opacity:.28;
  transform:translateY(-3svh) scale(.98);
}
html.has-product-design.ar-route-preflight model-viewer,
html.has-product-design.ar-route-ready model-viewer,
html.has-product-design.ar-route-unsupported model-viewer { opacity:.4; }

html.ar-route-preflight .ar-entry-card {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
html.ar-route-preflight #loadingState {
  display:grid!important;
  top:0;
  min-height:100svh;
}
html.ar-route-ready #loadingState,
html.ar-route-unsupported #loadingState,
html.ar-route-3d #loadingState { display:none!important; }

.ar-entry-card {
  bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));
  width:min(446px,calc(100% - 24px));
  align-items:stretch;
  border:1px solid rgba(222,216,206,.86);
  border-radius:26px;
  padding:18px;
  background:rgba(255,253,250,.94);
  box-shadow:0 18px 46px rgba(39,33,26,.12);
  text-align:left;
  direction:ltr;
}
.ar-entry-restaurant {
  margin:0 0 5px;
  color:#8a8278;
  font-size:10px;
  font-weight:750;
  text-align:left;
  unicode-bidi:plaintext;
}
.ar-entry-card h1 {
  max-width:none;
  color:#211f1b;
  font-size:clamp(27px,7.3vw,37px);
  font-weight:770;
  line-height:1.04;
  letter-spacing:-.035em;
  text-align:left;
  text-shadow:none;
  unicode-bidi:plaintext;
}
.ar-entry-meta {
  width:max-content;
  margin-top:9px;
  border:1px solid #e7e1d8;
  border-radius:999px;
  padding:5px 8px;
  background:#faf7f2;
  color:#4b453d;
  font-size:10px;
  font-weight:800;
  direction:ltr;
}
.ar-entry-description {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:10px 0 0;
  color:#6f685f;
  font-size:12px;
  line-height:1.55;
  text-align:left;
  unicode-bidi:plaintext;
}
.ar-entry-copy {
  max-width:none;
  margin:11px 0 0;
  color:#7a7369;
  font-size:11.5px;
  font-weight:520;
  line-height:1.48;
  text-align:left;
}
.ar-entry-button {
  min-height:58px;
  margin-top:15px;
  padding:12px 12px 12px 14px;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  font-weight:780;
}
.ar-entry-hint {
  margin:9px 3px 0;
  max-width:none;
  color:#91897f;
  font-size:10px;
  line-height:1.45;
  text-align:left;
}
.ar-entry-spinner { display:none!important; }

/* Active 3D keeps the full artwork framing behind the canvas. The caption is
   floating text only: no pill/card/background/backdrop filter. */
html.ar-route-3d.has-product-design .model-stage {
  background:var(--page-surface)!important;
}
html.ar-route-3d.has-product-design:not(.design-fits-stage):not(.design-standard-mobile) .model-stage::before { opacity:.8; }
html.ar-route-3d.has-product-design.design-fits-stage .model-stage::before,
html.ar-route-3d.has-product-design.design-standard-mobile .model-stage::before { opacity:0; }
html.ar-route-3d.has-product-design .model-stage::after { opacity:1; }
html.ar-route-3d.has-product-design.design-standard-mobile .model-stage::after { background-size:cover; background-position:center top; }
html.ar-route-3d .ar-entry-3d-caption {
  top:max(22px,calc(env(safe-area-inset-top) + 14px));
  left:max(18px,calc(env(safe-area-inset-left) + 14px));
  right:auto;
  transform:none;
  width:auto;
  max-width:min(72vw,360px);
  padding:0!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:#fff;
  text-align:left;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.24);
}
html.ar-route-3d .ar-entry-3d-caption strong,
html.ar-route-3d .ar-entry-3d-caption span {
  text-align:left;
  unicode-bidi:plaintext;
}
html.ar-route-3d .ar-entry-3d-caption span { color:rgba(255,255,255,.86); }

.error-state {
  isolation:isolate;
  position:relative;
  overflow:hidden;
  background:var(--page-surface);
}
html.has-product-design .error-state::before,
html.has-product-design .error-state::after {
  content:"";
  position:absolute;
  pointer-events:none;
}
html.has-product-design .error-state::before {
  inset:-24px;
  z-index:-2;
  background:var(--product-bg-image) center/cover no-repeat transparent;
  filter:blur(28px) saturate(1.08) brightness(.92);
  transform:scale(1.08);
  opacity:.8;
}
html.has-product-design.design-fits-viewport .error-state::before,
html.has-product-design.design-standard-mobile .error-state::before { opacity:0; }
html.has-product-design .error-state::after {
  inset:0;
  z-index:-1;
  background:var(--product-bg-image) center/contain no-repeat;
  opacity:.62;
}
html.has-product-design.design-standard-mobile .error-state::after { background-size:cover; background-position:center top; }
.error-retry { background:var(--accent); color:var(--accent-contrast,#fff); }

/* On the oldest Lite path, keep the full contained design but drop runtime blur
   behind the WebGL canvas to protect the smooth rotation we already achieved. */
html[data-viewer-perf="lite"]:not(.design-fits-stage):not(.design-standard-mobile) .model-stage::before { filter:none; opacity:.32!important; }
html[data-viewer-perf="lite"].design-fits-stage .model-stage::before,
html[data-viewer-perf="lite"].design-standard-mobile .model-stage::before { filter:none; opacity:0!important; }

@media (max-width:700px) and (orientation:portrait) {
  /* Hard mobile fallback. Do not depend on JS/device classification here.
     The uploaded artwork is a full-page mobile template, so normal portrait
     phones must never show blurred side bands. Browser toolbar height changes
     are absorbed by a small cover crop instead. */
  html.has-product-design .loading-state::before,
  html.has-product-design .model-stage::before,
  html.has-product-design .error-state::before,
  html.has-product-design .ar-entry-design-blur.has-design {
    opacity:0!important;
  }

  html.has-product-design .loading-state::after,
  html.has-product-design .model-stage::after,
  html.has-product-design .error-state::after,
  html.has-product-design .ar-entry-design-main {
    background-size:cover!important;
    /* Preserve the top/logo area. Any vertical cover crop comes from below. */
    background-position:center top!important;
    background-repeat:no-repeat!important;
  }
}

@media (max-width:480px) {
  .topbar { min-height:54px; padding:9px 14px; }
  .model-stage { height:56svh; min-height:360px; }
  .dish-card { padding:20px 16px max(16px,env(safe-area-inset-bottom)); }
  .dish-title-row { gap:12px; }
  .description { font-size:12.5px; }
  .action-stack { grid-template-columns:minmax(0,1fr) 52px; }
  .ar-button { min-height:54px; border-radius:17px; font-size:13.5px; }
  .share-dish-button { min-width:52px; width:52px; min-height:54px; padding:0; }
  .share-dish-button span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ar-entry-card { width:calc(100% - 20px); padding:16px; border-radius:24px; }
  .ar-entry-card h1 { font-size:clamp(26px,8.6vw,35px); }
  .ar-entry-button { min-height:56px; }
}

@media (max-height:690px) {
  .ar-entry-card { bottom:max(8px,calc(env(safe-area-inset-bottom) + 6px)); padding:14px 15px; }
  .ar-entry-card h1 { font-size:clamp(24px,7.2vw,32px); }
  .ar-entry-description { -webkit-line-clamp:1; margin-top:7px; }
  .ar-entry-copy { margin-top:7px; }
  .ar-entry-button { min-height:52px; margin-top:11px; }
  .ar-entry-hint { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .loading-state::before,.loading-state::after,.ar-button,.ar-entry-button { transition:none!important; }
  .loading-state .spinner { animation-duration:1.2s; }
}