/* Footer — hairline edge, About/Home dark variants, home snap-dock behaviour.
   Companion code: inc/home.php (ck-footer-overlay script sets --ck-footer-h).
   Loaded everywhere (variants are body-class scoped). */

/* Footer: solid edge along its top, matching the header edge, plus the header's
   scrolled lift (.ckh--shadow-scroll.is-scrolled) mirrored upward so the footer
   reads as sitting above the content the same way the header sits over it. */
.elementor-location-footer {
  border-top: var(--ck-edge);
  /* box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); */
}

/* Single design: no edge over the footer. The page already ends on a rule — the
   STYLED WITH carousel closes with its own 2px progress bar — so the hairline
   lands right under it and the two read as one thick, lopsided double line.
   Specificity (0,2,1) beats the base rule above; no !important needed. */
body.single-product .elementor-location-footer {
  border-top: none;
}

/* Content width: the outer container stays full-bleed (the dark home/about
   variants must paint edge to edge); the inner one is capped to the same 1600px
   boxed width every other component uses (shop 621, home 675, product 2281). */
.elementor-location-footer > .e-con > .e-con {
  max-width: 1600px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   About page: inverted footer (black background, gray text).
   Keyed to the slug body class (page-about).
--------------------------------------------------------------------------- */
/* Footer background (cover both the location wrapper and inner containers) */
body.page-about .elementor-location-footer,
body.page-about .elementor-location-footer .e-con {
  background-color: #000000 !important;
  background-image: none !important;
}

/* Footer text + links → light gray */
body.page-about .elementor-location-footer,
body.page-about .elementor-location-footer a,
body.page-about .elementor-location-footer *:not(img):not(svg) {
  color: #fafafa !important;
}

/* The footer is a scroll-snap END point (all widths). Each collection-grid tile
   is a START snap point (zero-height markers); the footer snapping to the bottom
   edge is what lets the scroll settle past the last tile and dock the short
   footer at the viewport bottom. No position:fixed pin — that was the source of
   the desktop trap and the mobile frozen-tile jitter. */
body.home .elementor-location-footer {
  position: relative;
  scroll-snap-align: end;
  scroll-snap-stop: always;
}

/* Mobile home: the footer docks OVER the pinned last tile (curtain reveal).
   The ck-footer-overlay script (inc/home.php) pins the last tile's card
   (position:sticky, inline) and adds a footer-height spacer inside its item
   for the sticky travel; this negative margin pulls the footer up to overlap
   exactly that spacer zone — page height and both snap points (last tile
   marker / footer end) are unchanged, so the dock stays a binary mandatory-
   snap choice. z-index lifts the footer above the tile's label layers.
   --ck-footer-h is set by the script; without JS it falls back to 0 = off. */
@media (max-width: 1023px) {
  body.home .elementor-location-footer {
    margin-top: calc(-1 * var(--ck-footer-h, 0px));
    z-index: 10;
  }
}