/**
 * Grimages UI – Astroid only (astroid_template_one): loaded with that template, it goes with it.
 * The rest of the plugin's CSS reads the gri-* layout classes, which the plugin adds to Astroid's
 * markup (GrimagesUi::addLayoutClasses); here, what only Astroid renders.
 */

/* Astroid's own header parts and footer: replaced by the plugin's header and footer */
.gri-v2 #astroid-sticky-header,
.gri-v2 .astroid-mobilemenu,
.gri-v2 .astroid-offcanvas,
.gri-v2 .astroid-footer-section { display: none !important; }

/* ---------- Back to top: the design-system BackToTop on Astroid's button (initBackToTop) ---------- */
/* Astroid styles the button by its id (yellow square, 4px radius !important) and fades it in itself */
.gri-v2 #astroid-backtotop.gri-totop { right: var(--space-5); bottom: var(--space-5); width: 44px; height: 44px; margin: 0; padding: 0 !important; border: 1px solid var(--line); border-radius: 50% !important; background: var(--surface) !important; box-shadow: var(--shadow-raised); color: var(--violet-700); }
.gri-v2 #astroid-backtotop.gri-totop:hover { box-shadow: var(--shadow-pop); }
/* jQuery fades it in with display: block: centre the chevron then */
.gri-v2 #astroid-backtotop.gri-totop[style*="display: block"] { display: grid !important; }
@media (max-width: 991.98px) {
  /* Above the MobileBar */
  .gri-v2 #astroid-backtotop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  body.gri-v2 #astroid-backtotop.gri-totop { right: var(--space-4); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.gri-v2.view-product #astroid-backtotop.gri-totop { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.gri-v2.gri-checkout #astroid-backtotop.gri-totop { bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
}