:root {
  --yana-loader-surface: #f5f6f8;
  --yana-loader-panel: #ffffff;
  --yana-loader-ink: #111827;
  --yana-loader-muted: #687386;
  --yana-loader-line: #e2e7ee;
  --yana-loader-shimmer: #f8fafc;
  --yana-loader-accent: #c6a43a;
}

html.yana-page-loading,
html.yana-page-loading body {
  overflow: hidden !important;
}

.yana-page-loader-host {
  position: relative !important;
}

body > .yana-page-loader-host {
  min-height: calc(var(--app-viewport-height, 100vh) - 66px) !important;
}

html.mobile-view body > .yana-page-loader-host {
  min-height: calc(var(--app-viewport-height, 100vh) - 66px - var(--mobile-bottom-nav, 76px) - env(safe-area-inset-bottom, 0px)) !important;
}

.yana-page-loader {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: clamp(24px, 5vw, 64px) clamp(18px, 4vw, 42px);
  overflow: hidden;
  box-sizing: border-box;
  background: var(--yana-loader-surface);
  color: var(--yana-loader-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.yana-page-loader.customer-shell-loader {
  position: absolute;
  min-height: 100%;
}

.yana-page-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.yana-page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.yana-page-loader-inner {
  width: min(100%, 980px);
  display: grid;
  justify-items: center;
  gap: 18px;
}

.yana-page-loader-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: var(--yana-loader-ink);
}

.yana-page-loader-icon svg {
  display: block;
  width: 64px;
  height: 64px;
  overflow: visible;
}

.yana-page-loader-title {
  margin: 0;
  color: var(--yana-loader-muted);
  font: 800 14px/1.4 Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
}

.yana-loader-skeleton {
  width: 100%;
  min-height: 220px;
}

.yana-sk-block,
.yana-sk-line,
.yana-sk-media,
.yana-sk-control,
.yana-sk-avatar {
  position: relative;
  overflow: hidden;
  background: var(--yana-loader-line);
}

.yana-sk-block::after,
.yana-sk-line::after,
.yana-sk-media::after,
.yana-sk-control::after,
.yana-sk-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 15%, var(--yana-loader-shimmer) 48%, transparent 82%);
  transform: translateX(-105%);
  animation: yanaLoaderShimmer 1.35s ease-in-out infinite;
}

.yana-sk-line {
  height: 11px;
  border-radius: 4px;
}

.yana-sk-line.short { width: 58%; }
.yana-sk-line.tiny { width: 38%; }

.yana-sk-shop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.yana-sk-product {
  display: grid;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--yana-loader-line);
  border-radius: 8px;
  background: var(--yana-loader-panel);
}

.yana-sk-product .yana-sk-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}

.yana-sk-book {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 20px;
}

.yana-sk-services,
.yana-sk-form,
.yana-sk-account,
.yana-sk-history,
.yana-sk-cart {
  display: grid;
  gap: 13px;
}

.yana-sk-service,
.yana-sk-field,
.yana-sk-history-card,
.yana-sk-cart-row {
  min-height: 64px;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 10px;
  border: 1px solid var(--yana-loader-line);
  border-radius: 7px;
  background: var(--yana-loader-panel);
}

.yana-sk-controls {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 12px;
}

.yana-sk-control {
  min-height: 58px;
  border-radius: 7px;
}

.yana-sk-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.yana-sk-gallery .yana-sk-media {
  aspect-ratio: 1 / .78;
  border-radius: 7px;
}

.yana-sk-cart-row {
  grid-template-columns: 72px 1fr 96px;
  align-items: center;
}

.yana-sk-cart-row .yana-sk-media {
  width: 58px;
  height: 58px;
  border-radius: 7px;
}

.yana-sk-cart-copy {
  display: grid;
  gap: 10px;
}

.yana-sk-cart-total {
  width: min(100%, 340px);
  min-height: 64px;
  justify-self: end;
  border-radius: 7px;
}

.yana-sk-account {
  width: min(100%, 760px);
  margin: 0 auto;
}

.yana-sk-account-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.yana-sk-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.yana-sk-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.yana-loader-cart-body {
  transform-origin: 31px 35px;
  animation: yanaLoaderCartGlide 1.25s ease-in-out infinite;
}

.yana-loader-cart-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: yanaLoaderWheel 720ms linear infinite;
}

.yana-loader-calendar-hand {
  transform-origin: 47px 44px;
  animation: yanaLoaderClock 1.6s ease-in-out infinite;
}

.yana-loader-calendar-page {
  transform-origin: 31px 23px;
  animation: yanaLoaderPageFlip 1.6s ease-in-out infinite;
}

.yana-loader-gallery-tile {
  transform-box: fill-box;
  transform-origin: center;
  animation: yanaLoaderTile 1.4s ease-in-out infinite;
}

.yana-loader-gallery-tile:nth-child(2) { animation-delay: 140ms; }
.yana-loader-gallery-tile:nth-child(3) { animation-delay: 280ms; }

.yana-loader-bag-item {
  animation: yanaLoaderBagDrop 1.35s ease-in-out infinite;
}

.yana-loader-profile-ring {
  transform-origin: 32px 32px;
  animation: yanaLoaderProfileRing 1.7s linear infinite;
}

.yana-loader-history-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: yanaLoaderHistoryCheck 1.45s ease-in-out infinite;
}

body.dark-mode {
  --yana-loader-surface: #151515;
  --yana-loader-panel: #202020;
  --yana-loader-ink: #f8fafc;
  --yana-loader-muted: #c5cbd3;
  --yana-loader-line: #30343a;
  --yana-loader-shimmer: #454a52;
}

@keyframes yanaLoaderShimmer {
  0% { transform: translateX(-105%); }
  60%, 100% { transform: translateX(105%); }
}

@keyframes yanaLoaderCartGlide {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(4px); }
}

@keyframes yanaLoaderWheel {
  to { transform: rotate(360deg); }
}

@keyframes yanaLoaderClock {
  0%, 15% { transform: rotate(-18deg); }
  65%, 100% { transform: rotate(72deg); }
}

@keyframes yanaLoaderPageFlip {
  0%, 28%, 100% { transform: scaleY(1); opacity: 1; }
  48% { transform: scaleY(.28); opacity: .55; }
}

@keyframes yanaLoaderTile {
  0%, 100% { transform: scale(.92); opacity: .48; }
  45% { transform: scale(1); opacity: 1; }
}

@keyframes yanaLoaderBagDrop {
  0%, 14% { transform: translateY(-9px); opacity: 0; }
  48%, 76% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}

@keyframes yanaLoaderProfileRing {
  to { transform: rotate(360deg); }
}

@keyframes yanaLoaderHistoryCheck {
  0%, 20% { stroke-dashoffset: 24; }
  58%, 100% { stroke-dashoffset: 0; }
}

@media (max-width: 720px) {
  .yana-page-loader {
    min-height: 360px;
    place-items: start center;
    padding: 30px 16px 110px;
  }

  .yana-page-loader-inner { gap: 14px; }
  .yana-page-loader-icon { width: 58px; height: 58px; }
  .yana-page-loader-icon svg { width: 54px; height: 54px; }
  .yana-sk-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .yana-sk-product:nth-child(n+5) { display: none; }
  .yana-sk-book { grid-template-columns: 1fr; gap: 12px; }
  .yana-sk-services .yana-sk-service:nth-child(n+3) { display: none; }
  .yana-sk-controls { grid-template-columns: 1fr 1fr; }
  .yana-sk-controls .yana-sk-control:first-child { grid-column: 1 / -1; }
  .yana-sk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .yana-sk-cart-row { grid-template-columns: 60px 1fr; }
  .yana-sk-cart-row > .yana-sk-line:last-child { display: none; }
  .yana-sk-account-fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .yana-page-loader,
  .yana-page-loader *,
  .yana-page-loader *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}