:root{
  --brown-dark:#3b2a1a;
  --brown-main:#6f4e37;
  --brown-light:#c4a484;
  --panel-border:#8a5a3c;
}

/* =========================
   STATIC BUTTON STYLE
   ========================= */
.btn-static,
.btn-static:hover,
.btn-static:focus,
.btn-static:active,
.btn-static.active,
.btn-static[aria-expanded="true"]{
  background-color: transparent !important;
  color: #6c757d !important;
  border-color: #ced4da !important;
  box-shadow: none !important;
}

/* =========================
   COLOR SWATCHES (deduped)
   ========================= */
.color-swatch-wrap{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  text-align: center;
  margin: 5px;
}

.color-swatch{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-swatch:hover{
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.color-swatch.selected{
  border: 3px solid #8a5532;
  box-shadow: 0 0 0 3px rgba(138,85,50,.35);
}

.color-swatch-label{
  font-size: 11px;
  margin-top: 4px;
  word-break: break-word;
}

/* =========================
   VIEWER LAYOUT (FIXED, no height conflict)
   - wrapper does NOT force 70vh (that caused tall gray area)
   - model height is controlled by #mesh_viewer
   ========================= */
.viewer-wrapper{
  position: relative;
  width: 100%;
  background: #f0f0f0;
  overflow: visible; /* allows mobile toolbar below model */
}

/* model-viewer sizing (single source of truth) */
#mesh_viewer{
  display: block;
  width: 100%;
  height: 800px;          /* desktop */
  background: #f0f0f0;
}

/* mobile model height (set your final value here) */
@media (max-width: 1200px){
  #mesh_viewer{
    height: 400px;        /* <-- choose: 350 / 400 / 500 etc. */
  }

  .saved-models-row .saved-setup-card{
    flex: 0 0 180px;
  }
}

/* If you ever target the tag directly */
.viewer-wrapper model-viewer{
  width: 100%;
  display: block;
}

/* =========================
   TOP VIEW BUTTONS (deduped)
   ========================= */
.viewer-controls-top{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  gap: 8px;
}

.viewer-controls-top .view-btn{
  background: rgba(255,255,255,0.85);
  border: 1px solid #ccc;
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.viewer-controls-top .view-btn:hover{
  background: #f0f0f0;
}

/* =========================
   RIGHT TOOL BUTTONS (desktop overlay)
   ========================= */
.viewer-tools-right{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-icon-btn{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid #ccc;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.tool-icon-btn:hover{ background: #f0f0f0; }

.tool-icon{
  font-size: 20px;
  line-height: 1;
  color: var(--brown-main);
}

.tool-label{
  font-size: 10px;
  margin-top: 4px;
  letter-spacing: .3px;
  font-weight: 700;
  color: var(--brown-dark);
}

/* =========================
   MOBILE TOOLBAR (below model)
   Use: <div class="mobile-toolbar d-lg-none">...</div>
   ========================= */
.mobile-toolbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: .25rem;
}

@media (max-width: 420px){
  .mobile-toolbar .btn{
    padding-left: .35rem;
    padding-right: .35rem;
  }
}

/* =========================
   PANELS (side-panel)
   ========================= */
.side-panel{
  position: fixed;
  top: 1.5vh;
  bottom: 1.5vh;

  width: calc(100% - 24px);
  right: calc(-1 * (100% - 24px));

  background: #fff;
  color: #111;

  border: 2px solid var(--panel-border);
  border-radius: 16px;
  /* the shadow only while open: a closed panel waits just past the right
     edge of the screen and its shadow painted a dark band down that edge */
  box-shadow: none;

  transition: right .35s ease-in-out, box-shadow .35s ease-in-out;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--gz-z-sheet, 100100);   /* GP r5: shared scale in modeling/gz_layers.php */
}

.side-panel.active{ right: 12px; box-shadow: -10px 0 24px rgba(0,0,0,.25); }

@media (min-width: 992px){
  .side-panel{
    width: 475px;
    right: -475px;
  }
  .side-panel.active{ right: 18px; }
}

.panel-header{
  background: linear-gradient(90deg, var(--brown-main), var(--brown-dark));
  color: #fff;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-body{
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

.panel-footer{
  padding: 14px 16px;
  border-top: 1px solid #eee;
  background: #fff;
}

.panel-close-top{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.panel-close-top:hover{ background: rgba(255,255,255,.12); }

.panel-close-bottom{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--brown-main);
  color: var(--brown-dark);
  font-weight: 700;
  cursor: pointer;
}

.panel-close-bottom:hover{
  background: var(--brown-light);
  border-color: var(--brown-dark);
  color: #2b1c12;
}

/* =========================
   OPTION CARDS (generic)
   ========================= */
.option-card{
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.option-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,.1);
}

.option-card.selected{
  outline: 2px solid #8a5532;
  box-shadow: 0 0 0 0.25rem rgba(138,85,50,.25);
}

.option-card img{
  max-height: 100px;
  object-fit: contain;
}

/* =========================
   SIDE OPTIONS GRID
   ========================= */
.side-option-wrap{
  width: 16.66%;
  padding: 4px;
}

@media (max-width: 768px){
  .side-option-wrap{
    width: 33.33%;
  }
}

.side-option-card{
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.side-option-card .side-option-img{
  max-height: none !important;
  width: 100%;
  height: 90px;
  padding: 6px;
  object-fit: contain;
}

/* Side additions */
.side-addition-toggle,
.side-addition-card{
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.side-addition-toggle .card-body,
.side-addition-card .card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.side-addition-card small,
.side-addition-toggle small{ font-size: 0.9rem; }

.side-addition-toggle span{
  font-size: 2rem;
  line-height: 1;
}

.viewer-bottom-panel{
  background: #f0f0f0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* =========================
   FURNITURE
   ========================= */
.furniture-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 150px;
  overflow: hidden;
}

.furniture-img-wrapper{
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.furniture-img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.furniture-label{
  padding: 6px 0 4px;
  text-align: center;
}
/* =====================================================================
   GP r9 (Oct 2026, Matt's Samsung S26 ~390-412 px): every button row fills
   the width - equal grid columns instead of wrapping pills, one height,
   one gap, one font size per row. Phones and tablets (single column).
   ===================================================================== */
[hidden]{ display:none !important; }
@media (max-width: 991.98px){
  .gz-size-pick, .gz-opts, .viewer-bottom-panel{ --gp-gap:8px; --gp-h:44px; }
  /* size groups (2 m x, 3 m x, 4 m x, 6 m x): one row, equal columns */
  html body .gz-size-pick .gz-sg-row{ display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--gp-gap); margin-bottom:var(--gp-gap); }
  html body .gz-size-pick .gz-sg-btn{ width:100%; min-width:0; min-height:var(--gp-h); padding:0 4px; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; border-radius:999px; }
  /* sizes of a group: 3 per row on a 12 column grid; the last row is always full
     (2 left over = two halves, 1 left over = the last four as 2 + 2, a group of 4 = 2 x 2) */
  html body .gz-opts .gz-sg-subs:not([hidden]){ display:grid !important; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gp-gap); align-items:stretch; }
  html body .gz-opts .gz-sg-subs > .gz-size-badge{ grid-column:span 4; display:flex !important; align-items:center; justify-content:center; min-width:0; min-height:var(--gp-h);
    padding:0 4px !important; font-size:.875rem !important; line-height:1.1; text-align:center; white-space:nowrap; border-radius:999px !important; box-sizing:border-box; }
  html body .gz-opts .gz-sg-subs > .gz-size-badge:nth-child(3n+1 of .gz-size-badge):nth-last-child(2 of .gz-size-badge),
  html body .gz-opts .gz-sg-subs > .gz-size-badge:nth-child(3n+2 of .gz-size-badge):nth-last-child(1 of .gz-size-badge){ grid-column:span 6; }
  html body .gz-opts .gz-sg-subs:has(> .gz-size-badge:nth-child(3n+1 of .gz-size-badge):nth-last-child(1 of .gz-size-badge)) > .gz-size-badge:nth-last-child(-n+4 of .gz-size-badge){ grid-column:span 6; }
  html body .gz-opts .gz-sg-subs > .gz-size-badge:nth-child(1 of .gz-size-badge):nth-last-child(1 of .gz-size-badge){ grid-column:1 / -1; }
  html body .gz-opts .gz-sg-subs > .gz-por-legend{ grid-column:1 / -1; margin-top:-2px; }
  /* floor / house options: 2 equal columns, one height */
  html body:not(.gz-terrace):not(.gz-carport) .gz-opts .row.g-2.gz-gazebo-only{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gp-gap); margin:0 !important; }
  html body .gz-opts .row.g-2.gz-gazebo-only > [class*="col-"]{ width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; margin:0 !important; min-width:0; }
  html body .gz-opts .row.g-2.gz-gazebo-only .option-card{ height:52px !important; min-height:52px; padding:4px 10px 4px 4px !important; gap:8px; box-sizing:border-box; }
  html body .gz-opts .row.g-2.gz-gazebo-only .option-card > div:first-child{ flex:0 0 44px; width:44px; height:44px !important; }
  html body .gz-opts .row.g-2.gz-gazebo-only .option-card > div:first-child img{ width:44px; height:44px; object-fit:cover; }
  html body .gz-opts .row.g-2.gz-gazebo-only .option-card > div:last-child{ flex:1 1 auto; min-width:0; text-align:left; }
  html body .gz-opts .row.g-2.gz-gazebo-only .option-card small{ display:block; font-size:.875rem !important; line-height:1.15; overflow-wrap:anywhere; }
  /* "Latest pergola setups" filters: the same full-row grid */
  html body .viewer-bottom-panel .d-flex.flex-wrap:has(> .gz-filter-badge){ display:grid !important; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gp-gap); }
  html body .viewer-bottom-panel .gz-filter-badge{ grid-column:span 4; display:flex !important; align-items:center; justify-content:center; text-align:center; min-width:0; min-height:var(--gp-h);
    margin:0 !important; padding:4px 6px !important; font-size:.875rem !important; line-height:1.15; border-radius:999px !important; box-sizing:border-box; }
  html body .viewer-bottom-panel .gz-filter-badge:nth-child(3n+1 of .gz-filter-badge):nth-last-child(2 of .gz-filter-badge),
  html body .viewer-bottom-panel .gz-filter-badge:nth-child(3n+2 of .gz-filter-badge):nth-last-child(1 of .gz-filter-badge){ grid-column:span 6; }
  html body .viewer-bottom-panel .d-flex.flex-wrap:has(> .gz-filter-badge:nth-child(3n+1 of .gz-filter-badge):nth-last-child(1 of .gz-filter-badge)) > .gz-filter-badge:nth-last-child(-n+4 of .gz-filter-badge){ grid-column:span 6; }
  html body .viewer-bottom-panel .gz-filter-badge[data-filter="sort"]{ grid-column:1 / -1 !important; }
}
/* the Online chat button never covers the constructor on phones: a small round icon (the label stays for screen
   readers), it slides away while the visitor scrolls down / works in a panel or modal and comes back on scroll up;
   the page ends with room for it */
@media (max-width: 767.98px){
  html body #gzc-root .gzc-launch{ right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); width:52px; height:52px; padding:0 !important; gap:0; justify-content:center; border-radius:50%;
    transition:transform .25s ease, opacity .25s ease; }
  html body #gzc-root .gzc-launch-ic{ width:40px; height:40px; }
  html body #gzc-root .gzc-launch-tx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  html body.gz-chat-tuck #gzc-root .gzc-launch,
  html body.gz-aim-open #gzc-root .gzc-launch, html body.gzv-open #gzc-root .gzc-launch, html body.gz-lb-open #gzc-root .gzc-launch,
  html body:has(.side-panel.active) #gzc-root .gzc-launch{ transform:translateY(calc(100% + 28px)); opacity:0; pointer-events:none; }
  html body .gz-toast{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  html body .config-layout{ padding-bottom:16px; }
  html body footer, html body .footer{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (prefers-reduced-motion: reduce){ html body #gzc-root .gzc-launch{ transition:none; } }

/* GP r9: the chosen size stays dark after a tap (the generic .option-card.selected rule made it light with white text) */
html body .gz-opts .gz-size-badge.active, html body .gz-opts .gz-size-badge.active.selected{ background:#6b4a36 !important; color:#fff !important; border-color:#6b4a36 !important; outline:none !important; box-shadow:0 2px 6px rgba(107,74,54,.22) !important; }
/* GP r9: the AI button's status pill ("about 2 min" / "45 %") and "New image made" sit above the button on phones:
   the button must not clip them (its label keeps its own ellipsis) */
html body .mobile-toolbar .gz-ai-btn{ overflow:visible !important; }
/* GP r9 (Matt): phones / tablets - the 3D view is as tall as the screen allows while the tool bar AND the size
   row (2 m x / 3 m x / 4 m x / 6 m x) stay on the first screen without scrolling. svh = the small dynamic
   viewport (browser bars shown, i.e. the first load); unlike dvh it does not resize the 3D view while the
   address bar slides away. --gz-mv-fixed = everything above the view + tool bar + size row (+ 8 px), measured
   by gz_r8_view.js on load / rotate (default 345 px). Desktop (>= 992 px) unchanged. */
@media (max-width: 991.98px){
  html body #mesh_viewer{ height:clamp(260px, calc(100vh - var(--gz-mv-fixed, 345px)), 400px); }
  @supports (height: 100svh){ html body #mesh_viewer{ height:clamp(260px, calc(100svh - var(--gz-mv-fixed, 345px)), 400px); } }
}
/* GP r9: the AI button is the last one on the phone tool bar: its pills grow to the left, never past the screen edge */
html body .mobile-toolbar .gz-ai-btn .gz-ai-newlbl, html body .mobile-toolbar .gz-ai-btn .gz-ai-stat{ left:auto !important; right:2px; transform:translateY(-3px) !important; }

/* =====================================================================
   GP r10 (Oct 2026, Matt's phone, overrides the r9 view height rule): phones / tablets (< 992 px).
   - the 3D view is as tall as the first screen allows with the Realistic / Sketch / Blueprint bar UNDER
     it (no longer over the model's base) and the tool row (Roof / Color / Walls / Furn. / Voice / AI)
     ending at the bottom edge of the screen; the size row may be below the fold.
     Height = 100svh (screen with the browser bars shown = first load) - --gz-mv-fixed (everything above
     the view + style bar + tool row, measured by gz_r8_view.js), clamped to 300..760 px.
   - size groups: every group in one row of equal columns at 360-430 px, smaller type, nothing clipped
     (the hexagon group is an icon + its side length, gz_hex_group_btn_inner()).
   - the chosen size of a group: a light pill with a brown border, brown text and a check mark.
   Desktop (>= 992 px) unchanged.
   ===================================================================== */
@media (max-width: 991.98px){
  html body .viewer-wrapper{ display:flex; flex-direction:column; }
  html body .viewer-wrapper > #mesh_viewer{ order:1; flex:none; }
  html body .viewer-wrapper > .gz-style-bar{ order:2; position:relative !important; left:auto; right:auto; top:auto; bottom:auto !important;
    margin:6px 0 0; max-width:none; box-shadow:none; z-index:2; }
  html body .viewer-wrapper > .mobile-toolbar{ order:3; }
  html body #mesh_viewer{ height:clamp(300px, calc(100vh - var(--gz-mv-fixed, 300px)), 760px); }
  @supports (height: 100svh){ html body #mesh_viewer{ height:clamp(300px, calc(100svh - var(--gz-mv-fixed, 300px)), 760px); } }
  html body .gz-size-pick .gz-sg-btn{ padding:0 2px; font-size:clamp(.8125rem, 3.6vw, 1rem); letter-spacing:-.01em; overflow:hidden; white-space:nowrap; }
  html body .gz-size-pick .gz-sg-btn .gz-por-mark{ margin-left:1px; }
  html body .gz-size-pick .gz-sg-btn .gz-hex-ico{ width:1.15em; height:1.15em; margin-right:2px; }
  /* one size in a group (the hexagon): the whole row */
  html body .gz-opts .gz-sg-subs:has(> .gz-size-badge:nth-child(1 of .gz-size-badge):nth-last-child(1 of .gz-size-badge)) > .gz-size-badge:nth-last-child(1 of .gz-size-badge){ grid-column:1 / -1; }
}
html body .gz-opts .gz-size-badge.active, html body .gz-opts .gz-size-badge.active.selected{ background:#f6ebdf !important; color:#4a3022 !important;
  border-color:#8a5a3b !important; box-shadow:0 0 0 1px #8a5a3b inset !important; outline:none !important; }
html body .gz-opts .gz-size-badge.active::before{ content:"\2713"; margin-right:5px; font-weight:800; color:#8a5a3b; }
html body .gz-opts .gz-size-badge.active .gz-por-mark{ color:#b0652e !important; }

/* GP r10b (Matt): "Latest pergola setups" - cards only (no filters), on the same side edges as the 3D view
   (the panel already lines up with it; its padding pushed the cards in), an "Open this design" button on
   every card; the whole card still opens the design (estore_modeling_script.php bindSavedCards) */
html body .viewer-bottom-panel.gz-ls-panel{ padding-left:0 !important; padding-right:0 !important; box-shadow:none !important; background:transparent !important; }
html body .gz-ls-panel .saved-setup-card{ height:100%; display:flex; flex-direction:column; border:1px solid #e6d5c8; border-radius:12px; overflow:hidden; background:#fff; }
html body .gz-ls-panel .saved-setup-card:hover{ border-color:#c9a88f; box-shadow:0 2px 8px rgba(107,74,54,.14); }
html body .gz-ls-panel .gz-ls-body{ padding:8px; display:flex; flex-direction:column; gap:6px; text-align:center; flex:1 1 auto; justify-content:flex-end; }
html body .gz-ls-panel .gz-ls-info{ display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.2; }
html body .gz-ls-panel .gz-ls-size{ font-size:.85rem; font-weight:800; color:#4a3022; }
html body .gz-ls-panel .gz-ls-price{ font-size:.78rem; font-weight:600; color:#8a5a3b; }
html body .gz-ls-panel .gz-ls-open{ width:100%; min-height:40px; padding:0 6px; border:1.5px solid #6b4a36; border-radius:999px; background:#fff; color:#6b4a36; font-weight:800; font-size:.82rem; line-height:1.1; cursor:pointer; }
html body .gz-ls-panel .gz-ls-open:hover, html body .gz-ls-panel .gz-ls-open:focus-visible{ background:#6b4a36; color:#fff; outline:none; }

/* 28 Oct 2026 (Matt): hexagon group button - outline icon + the whole "2.1 m" label at every width
   (before: no icon style on desktop = a big filled hexagon pushed the label out of the pill) */
html body .gz-size-pick .gz-sg-btn[data-gz-w="hex"]{ display:inline-flex; align-items:center; justify-content:center; gap:0; overflow:visible; }
html body .gz-size-pick .gz-sg-btn .gz-hex-ico{ width:1.25em; height:1.25em; flex:none; margin-right:5px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linejoin:miter; stroke-miterlimit:4; }
html body .gz-size-pick .gz-sg-btn .gz-hex-len{ white-space:nowrap; flex:none; }
@media (max-width: 991.98px){
  html body .gz-size-pick .gz-sg-btn[data-gz-w="hex"]{ display:flex; padding:0 2px; letter-spacing:-.02em; }
  html body .gz-size-pick .gz-sg-btn[data-gz-w="hex"] .gz-hex-ico{ width:1.05em; height:1.05em; margin-right:2px; }
}

/* =====================================================================
   GP r3 (28 Oct 2026, Matt's phone): the 3D view is taller than wide on phones (portrait), even if the tool
   row then sits below the first screen: min(80 % of the small viewport height, 1.5 x the screen width,
   900 px), never lower than the r10 height. svh = the screen with the browser bars shown, so the view does
   not jump while the address bar slides away (vh fallback first). An open bottom sheet still shrinks the
   view (gz_walls_sheet.js, !important). Desktop (>= 992 px) unchanged.
   ===================================================================== */
@media (max-width: 991.98px){
  html body #mesh_viewer{ height:max(clamp(300px, calc(100vh - var(--gz-mv-fixed, 300px)), 760px), min(80vh, 150vw, 900px)); }
  @supports (height: 100svh){ html body #mesh_viewer{ height:max(clamp(300px, calc(100svh - var(--gz-mv-fixed, 300px)), 760px), min(80svh, 150vw, 900px)); } }
}

/* =====================================================================
   GP r4 (28 Oct 2026, Matt): the phone 3D view about 50 px lower than r3 (585 -> ~535 px at 390 x 844),
   still taller than wide. Same formula as r3 minus 50 px in both parts; the open bottom sheet still
   shrinks the view (gz_walls_sheet.js, !important). Desktop (>= 992 px) unchanged.
   ===================================================================== */
@media (max-width: 991.98px){
  html body #mesh_viewer{ height:max(clamp(300px, calc(100vh - var(--gz-mv-fixed, 300px) - 50px), 710px), min(calc(80vh - 50px), calc(150vw - 50px), 850px)); }
  @supports (height: 100svh){ html body #mesh_viewer{ height:max(clamp(300px, calc(100svh - var(--gz-mv-fixed, 300px) - 50px), 710px), min(calc(80svh - 50px), calc(150vw - 50px), 850px)); } }
}