.template {
  visibility: visible !important;
}

/* Only sales admin renders this preview wrapper. Termly mounts its banner
   outside the wrapper, so scope the rule through their shared body. */
body:has(#webshopContentWrapper) #termly-code-snippet-support {
  display: none !important;
}

.template>div:last-child,
.webshopMainContent+div.Preview_row__3Fkye.row,
.webshopMainContent+div.Preview_row__3Fkye.row+div,
.webshopMainContent+div.Preview_row__3Fkye.row+div+div,
.webshopMainContent>div>div.Preview_row__3Fkye.row:first-child,
.webshopMainContent>div>div.Preview_row__3Fkye.row:first-child+div,
.webshopMainContent>div>div.Preview_row__3Fkye.row:first-child+div+div {
  display: none !important;
}

/* ------------------------------------------------------------------
   Desktop dropdown: level 2+ fly-outs
   The crawled stylesheet only positions the first level
   (`.menuself.dropdown.menuhorizontal > ul > li:hover > ul` -> left:0; top:100%).
   Deeper lists only get `position:absolute; top:0` with `left:auto`, so they
   render on top of the list they belong to. Push them out to the side.
   ------------------------------------------------------------------ */
.menu.menuself.dropdown.menuhorizontal ul ul li:hover>ul,
.menu.menuself.dropdown.menuhorizontal ul ul li.hover>ul {
  left: 100%;
  right: auto;
  top: 0;
}

/* Set by script.js when the fly-out would run off the right edge. */
.menu.menuself.dropdown.menuhorizontal ul ul li:hover>ul.gd-flyout-left,
.menu.menuself.dropdown.menuhorizontal ul ul li.hover>ul.gd-flyout-left {
  left: auto;
  right: 100%;
}

/* ------------------------------------------------------------------
   Mobile navigation
   The crawled header already ships the mobile markup (#wsb-mobile-header,
   #MobileHeader_burgerMenuIcon, #mm, #mm-overlay) and the stylesheet that
   goes with it, but everything is hidden by `.mm { display: none }` until the
   source site's own bootstrap flags the page as a mobile view. script.js adds
   `gd-mobile-nav` on <html> at page load and on viewport changes and the rules
   below take over from there.
   ------------------------------------------------------------------ */
html.gd-mobile-nav,
html.gd-mobile-nav body {
  overflow-x: hidden;
  min-width: 0 !important;
  width: 100% !important;
}
.mobileViewLoaded .gd-footer-row.row{ display: block !important; }
/* Discard the source desktop canvas sizing when rendering the mobile crawl. */
html.gd-mobile-nav body {
  zoom: 1 !important;
}

html.gd-mobile-nav .template {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Hide the crawled desktop header and collapse the space it reserved. */
html.gd-mobile-nav .template [class*="mobileHide"] {
  display: none !important;
}

html.gd-mobile-nav .template>.row,
html.gd-mobile-nav .template .hasChildren,
html.gd-mobile-nav .template [class*="Preview_block"],
html.gd-mobile-nav .template [class*="Preview_componentWrapper"],
html.gd-mobile-nav .template [class*="Preview_column"] {
  height: auto !important;
  min-height: 0 !important;
}

/* Reveal the mobile header, burger icon and slide-in menu. */
html.gd-mobile-nav #wsb-mobile-header {
  display: block !important;
}

html.gd-mobile-nav #MobileHeader_burgerMenuIcon {
  display: flex !important;
}

html.gd-mobile-nav #mm {
  display: block !important;
}

/* Sizing fallback: the base `.mobileMenu_overlay` rule declares no height, so
   the strip next to the open panel is only tappable thanks to the
   `div[data-mobile-pin] #mm-overlay` rule. Keep it working if that wrapper
   attribute ever drops out of the crawl. */
html.gd-mobile-nav #mm-overlay.on {
  height: 100vh;
  bottom: 0;
}

/* The footer uses the source mobile editor's node order and .extra wrappers.
   Scope its mobile classes to #Footer so the source's row-hiding rules cannot
   hide webshop content. Keep desktop wrappers intact for switching back. */
#Footer .gd-footer-content {
  display: none;
}

html.gd-mobile-nav .gd-footer-row,
html.gd-mobile-nav .gd-footer-row > [data-kind="SECTION"],
html.gd-mobile-nav #Footer {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

#Footer.gd-footer-mobile > .hasChildren {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
}

#Footer.gd-footer-mobile > .hasChildren > .col {
  display: none !important;
}

#Footer.gd-footer-mobile .gd-footer-content {
  display: block;
  overflow: auto;
  position: relative;
  width: 100%;
}

/* Mirror the reference's 18px component gutters. Its .mobileV rules handle
   centering, natural image sizes and the map's maximum width. */
#Footer.gd-footer-mobile .gd-footer-content > .extra > [data-kind="Component"] {
  padding-left: 18px;
  padding-right: 18px;
  min-height: 0 !important;
  height: auto !important;
}

#Footer.gd-footer-mobile .code-component-container {
  width: 100%;
}