/* Photo grid customizer - theme integration styles (not app styles). */

.meowgic-photo-grid-customizer {
  display: block;
  width: 100%;
}

.meowgic-photo-grid-customizer meowgic-photo-grid-customizer-block {
  display: block;
  width: 100%;
}

.meowgic-pgc-notice {
  display: block;
  margin: 8px 0 0;
  color: #b00020;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.meowgic-pgc-notice[hidden] {
  display: none;
}

/* Normal (unbound) products keep the untouched native buy flow. */
html.meowgic-pgc-unbound .meowgic-photo-grid-customizer {
  display: none;
}

/* Customer service / back-to-top style floating widgets. */
.meowgic-pgc-widget-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  body {
    padding-bottom: var(--meowgic-pgc-bar-h, 0px);
  }

  .meowgic-photo-grid-customizer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    width: 100%;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  }

  .meowgic-photo-grid-customizer meowgic-photo-grid-customizer-block {
    width: 100%;
  }

  .meowgic-photo-grid-customizer .meowgic-pgc-notice {
    margin-top: 6px;
    font-size: 12px;
  }

  /* The product info column sets `margin: 15px 0` on every direct child, which
     would lift the fixed entry bar and expose a 15px strip underneath it. Only
     this one child is reset; the bar keeps bottom: 0, its safe-area padding and
     the page bottom reservation. */
  .product-detail__info.product-detail__col > .meowgic-photo-grid-customizer {
    margin: 0;
  }

  html.meowgic-pgc-modal-open .meowgic-photo-grid-customizer {
    visibility: hidden;
  }
}

/* Receiver errors are injected next to the app's own Add to cart button so
   they stay visible while the app window is open (the entry bar is hidden on
   mobile and sits behind the overlay on desktop). */
.meowgic-pgc-app-error {
  display: block;
  max-width: calc(100vw - 24px);
}

.meowgic-pgc-app-error[hidden] {
  display: none;
}