.skeleton {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  background-color: white;
}

.skeletonBanner {
  width: 100%;
  height: 270px;
  border-radius: 0px;
}

/* Task 109: Fyndiq's own banner is drawn at its natural height (InitialLandingPage), so its placeholder takes the
   banner's proportions at each breakpoint and the page does not jump when it loads. Other stores keep 270 px. */
:root[data-store="fyndiq"] .skeletonBanner {
  height: auto;
  aspect-ratio: 1536 / 540;
}

@media (min-width: 768px) {
  :root[data-store="fyndiq"] .skeletonBanner { aspect-ratio: 2048 / 640; }
}

@media (min-width: 1024px) {
  :root[data-store="fyndiq"] .skeletonBanner { aspect-ratio: 2560 / 640; }
}

@media (min-width: 1280px) {
  :root[data-store="fyndiq"] .skeletonBanner { aspect-ratio: 3840 / 640; }
}

.skeletonSteps {
  width: 100%;
  max-width: 800px;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 32px;
  margin: 0px auto;
}

.skeletonSteps > .skeletonCircle {
  max-width: 80px;
}

.skeletonCircle {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.skeletonButton {
  width: 100%;
  height: 48px;
  max-width: 488px;
  margin: 0px auto;
  border-radius: 24px;
}

.skeletonProducts {
  width: 100%;
  max-width: 832px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.skeletonBanner, .skeletonCircle, .skeletonButton {
  background: linear-gradient(90deg, #E0E0E0 25%, #C0C0C0 50%, #E0E0E0 75%);
  animation: loading 1.5s infinite linear;
}

/* Dark theme (Task 93): the values of --ui-page, --ui-surface and --ui-surface-3 in global.css,
   which has not loaded yet when this skeleton shows. Dark when the device asks for it and the header
   switch has not chosen light, or when the switch chose dark (data-theme, set before the first paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skeleton {
    background-color: #0E171A;
  }

  :root:not([data-theme="light"]) .skeletonBanner,
  :root:not([data-theme="light"]) .skeletonCircle,
  :root:not([data-theme="light"]) .skeletonButton {
    background: linear-gradient(90deg, #17262B 25%, #22343A 50%, #17262B 75%);
  }
}

:root[data-theme="dark"] .skeleton {
  background-color: #0E171A;
}

:root[data-theme="dark"] .skeletonBanner,
:root[data-theme="dark"] .skeletonCircle,
:root[data-theme="dark"] .skeletonButton {
  background: linear-gradient(90deg, #17262B 25%, #22343A 50%, #17262B 75%);
}

/* Fyndiq's store theme (Task 109): the same dark values as resources/js/resources/css/themes/fyndiq.css
   (--ui-page, --ui-surface, --ui-surface-3). Light stays grey, as for every store. */
@media (prefers-color-scheme: dark) {
  :root[data-store="fyndiq"]:not([data-theme="light"]) .skeleton {
    background-color: #121012;
  }

  :root[data-store="fyndiq"]:not([data-theme="light"]) .skeletonBanner,
  :root[data-store="fyndiq"]:not([data-theme="light"]) .skeletonCircle,
  :root[data-store="fyndiq"]:not([data-theme="light"]) .skeletonButton {
    background: linear-gradient(90deg, #1C171A 25%, #32262C 50%, #1C171A 75%);
  }
}

:root[data-store="fyndiq"][data-theme="dark"] .skeleton {
  background-color: #121012;
}

:root[data-store="fyndiq"][data-theme="dark"] .skeletonBanner,
:root[data-store="fyndiq"][data-theme="dark"] .skeletonCircle,
:root[data-store="fyndiq"][data-theme="dark"] .skeletonButton {
  background: linear-gradient(90deg, #1C171A 25%, #32262C 50%, #1C171A 75%);
}