/*
 * Coal City storefront stability layer.
 * Keeps viewport geometry and section order stable while dialogs, drawers,
 * filters, and live campaign data update the React-rendered page.
 */

html {
  scroll-behavior: auto !important;
  scrollbar-gutter: stable;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

.store-shell {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* The campaign is visually above the catalogue without moving React-owned DOM. */
.campaign-block {
  order: 10;
}

.collection {
  order: 20;
}

.store-footer {
  order: 30;
}

#new,
#campaign,
#collection,
#footer {
  scroll-margin-top: 118px;
}

/* Prevent the page width from changing when Radix locks the body scrollbar. */
body[data-scroll-locked],
body.cc-modal-handoff,
body.cc-checkout-open {
  overscroll-behavior: none;
}

html body[data-scroll-locked] {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

body.cc-modal-handoff,
body.cc-checkout-open {
  overflow: hidden !important;
}

.product-dialog {
  overscroll-behavior: contain !important;
}

.dialog-product-copy,
.cc-store-gallery-thumbs,
.cart-body,
.cc-checkout-shell {
  overscroll-behavior: contain;
}

@media (max-width: 820px) {
  #new,
  #campaign,
  #collection,
  #footer {
    scroll-margin-top: 72px;
  }

  .product-dialog {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 760px) {
  body.cc-checkout-open {
    position: fixed;
    inset: 0;
    top: calc(-1 * var(--cc-checkout-scroll-y, 0px));
    width: 100%;
    height: 100%;
  }

  .cc-checkout-overlay {
    overscroll-behavior: none;
  }

  .cc-checkout-shell {
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}
.store-shell a[href="/admin"],
.store-shell a[href="/admin/"] {
  display: none !important;
}