.revtol-native-section { display: block; }
[data-native-anchor] { position: fixed; top: 1px; left: 1px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#revtol-native-app { min-height: 100dvh; }
[hidden] { display: none !important; }
@media screen and (min-width: 781px) {
  body.configuring { display: block; }
  #revtol-native-app { height: calc(100dvh - var(--configuration-preview-bar, 0px)); min-height: 0; display: flex; flex-direction: column; }
  #revtol-native-app > .header, #revtol-native-app > .steps, #revtol-native-app > .build-bar, #revtol-native-app > .local-ribbon { flex-shrink: 0; }
  #revtol-native-app > .workspace { flex: 1; min-height: 0; width: 100%; margin: 0 auto; padding-bottom: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) 414px; }
  #revtol-native-app > .build-bar, #revtol-native-app > .local-ribbon { position: relative; inset: auto; }
}
@media screen and (min-width: 1600px) { #revtol-native-app > .workspace { grid-template-columns: minmax(0, 1fr) 465px; } }
@media screen and (min-width: 781px) and (max-width: 1100px) { #revtol-native-app > .workspace { grid-template-columns: minmax(0, 1fr) 370px; } }
@media screen and (min-width: 781px) and (max-height: 740px) { #revtol-native-app > .header { height: 64px; } #revtol-native-app > .steps { height: 58px; } }
@media screen and (max-width: 780px) { #revtol-native-app:has(> .local-ribbon[hidden]) > .build-bar { bottom: var(--configuration-preview-bar, 0px); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }

@media screen and (max-width: 780px) { #revtol-native-app { padding-bottom: var(--configuration-preview-bar, 0px); } }

/* The viewer lets pointer gestures pass through its heading for customers.
   Shopify's inspector needs that heading to receive pointer events. */
[data-native-editor] .stage-heading { pointer-events: auto; }