/**
 * HalOk — layout stability, skeletons, and smooth loading
 */

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Header position is locked in halok-header.css (fixed 72px). */

/* Avoid font-swap layout jumps */
body {
  text-rendering: optimizeLegibility;
}

/* ── Products catalogue skeleton ── */
body.page-id-17 .halok-products-grid.is-loading {
  min-height: 720px;
}

body.page-id-17 .halok-product-card-skeleton {
  overflow: hidden;
  border: 1px solid rgba(26, 48, 38, 0.12);
  background: #fff;
}

body.page-id-17 .halok-product-card-skeleton .halok-skeleton-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    110deg,
    #e8e4dc 8%,
    #f3f0ea 18%,
    #e8e4dc 33%
  );
  background-size: 200% 100%;
  animation: halok-shimmer 1.4s ease-in-out infinite;
}

body.page-id-17 .halok-product-card-skeleton .halok-skeleton-body {
  padding: 22px;
}

body.page-id-17 .halok-skeleton-line {
  display: block;
  height: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: linear-gradient(
    110deg,
    #ece8e0 8%,
    #f7f4ef 18%,
    #ece8e0 33%
  );
  background-size: 200% 100%;
  animation: halok-shimmer 1.4s ease-in-out infinite;
}

body.page-id-17 .halok-skeleton-line--short {
  width: 42%;
}

body.page-id-17 .halok-skeleton-line--title {
  height: 22px;
  width: 78%;
  margin: 16px 0;
}

body.page-id-17 .halok-skeleton-line--text {
  height: 10px;
}

@keyframes halok-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Stable image boxes — no reflow when photos arrive */
body.page-id-17 .halok-product-image img,
.halok-product-hero__media img,
.halok-product-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* ── No layout shift from scroll-reveal animations ── */
.halok-home-enhancement,
.halok-about-redesign .ha-section {
  opacity: 1;
  transform: none;
}

.halok-js-motion .halok-home-enhancement:not(.is-visible),
.halok-js-motion .halok-about-redesign .ha-section:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.halok-js-motion .halok-home-enhancement.is-visible,
.halok-js-motion .halok-about-redesign .ha-section.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance without pushing layout */
.elementor-page-13 .elementor-element-9fb1c59 > * {
  animation: none;
  opacity: 1;
  transform: none;
}

.halok-js-motion .elementor-page-13 .elementor-element-9fb1c59 > * {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-17 .halok-skeleton-media,
  body.page-id-17 .halok-skeleton-line,
  .halok-js-motion .halok-home-enhancement,
  .halok-js-motion .halok-about-redesign .ha-section,
  .halok-js-motion .elementor-page-13 .elementor-element-9fb1c59 > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}