/* The global loading overlay. Paired with assets/js/loading.js.

   Deliberately a VEIL rather than a blackout: the page underneath stays
   readable through it, so a shopper who was mid-scroll keeps their place and
   the shop never appears to have gone away. */
.sh-loading{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  /* Pointer events are captured on purpose: a second click on a category while
     the first is still resolving is how two hydrations end up racing, and the
     later one repainting under the earlier one is what made the grid look
     "broken". One navigation at a time. */
}
.sh-loading[hidden]{display:none !important}

.sh-loading__box{display:flex; flex-direction:column; align-items:center; gap:14px}

/* The ring. One element, one border, one rotation - no library and nothing to
   load, so the spinner cannot itself be waiting on a network request. */
.sh-loading__ring{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(11,31,71,.14);
  border-top-color:var(--sh-navy,#0b1f47);
  animation:sh-loading-spin .72s linear infinite;
}
@keyframes sh-loading-spin{to{transform:rotate(360deg)}}

.sh-loading__text{
  margin:0; font-size:13px; font-weight:600; letter-spacing:.2px;
  color:var(--sh-navy,#0b1f47);
}

/* A shopper who has asked for less motion gets a pulse instead of a spin. The
   wait still needs to be visible - removing the indicator entirely would put
   them back in front of the blank screen this exists to prevent. */
@media (prefers-reduced-motion:reduce){
  .sh-loading__ring{
    animation:sh-loading-pulse 1.4s ease-in-out infinite;
    border-top-color:rgba(11,31,71,.14);
    background:var(--sh-navy,#0b1f47);
  }
  @keyframes sh-loading-pulse{0%,100%{opacity:.25}50%{opacity:.9}}
}

@media (prefers-color-scheme:dark){
  .sh-loading{background:rgba(16,18,24,.72)}
  .sh-loading__ring{border-color:rgba(255,255,255,.16); border-top-color:#fff}
  .sh-loading__text{color:#fff}
}