/**
 * Homepage back-to-top — concrete plate + up chevron (matches header menu chrome).
 */

[data-lz-back-to-top].lz-btt {
  --lz-btt-size: clamp(2.75rem, 4vw, 3.5rem);
  /*
   * Pill / circle radius — same single-source-of-truth pattern as the
   * closed-state header chrome (`--lz-header-menu-radius: 9999px`).
   * CSS auto-clamps `border-radius` to half the smaller side, so this one
   * value gives a perfect circle on the square button at every viewport,
   * and the `::before` wash inherits the same shape via the shared calc.
   * Do NOT replace with a clamp() — it would be a second source of truth
   * for "always a pill" and could drift from the chrome's behavior.
   */
  --lz-btt-radius: 9999px;
  --lz-btt-line: 0.1875rem;
  --lz-btt-ink: var(--lz-menu-chrome-fg, #fff);
  position: fixed;
  z-index: 10100;
  bottom: calc(clamp(0.65rem, 2vw, 1.25rem) + env(safe-area-inset-bottom, 0px));
  right: max(clamp(1rem, 3.5vw, 2rem), env(safe-area-inset-right, 0px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
}

[data-lz-back-to-top].lz-btt[data-lz-btt-state="hidden"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0, 10px, 0) !important;
}

[data-lz-back-to-top].lz-btt[data-lz-btt-state="visible"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

body.is-preloader-active [data-lz-back-to-top].lz-btt,
body.ladyzone-route-home:has(.lz-header__chrome.is-open) [data-lz-back-to-top].lz-btt {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lz-btt__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--lz-btt-size);
  height: var(--lz-btt-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--lz-btt-radius);
  background: transparent;
  color: var(--lz-btt-ink);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.lz-btt__link:focus-visible {
  outline: 2px solid var(--lz-accent, #ea098d);
  outline-offset: 3px;
}

/* Concrete + brand border — same tokens as .lz-header__chrome */
.lz-btt__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

/*
 * Layered plate — single source of truth across the project:
 *   ::before = concrete + brand border (background, painted first)
 *   ::after  = white wash (overlay, painted on top via natural tree order)
 * Matches `.ladyzone-footer-logo-badge` and `.ladyzone-preloader__badge`.
 * Previously the assignments were inverted (concrete on ::after, wash on
 * ::before) with no z-index, so per CSS painting order the wash ended up
 * UNDER the concrete and never reached the surface — that's why the
 * back-to-top looked darker than the menu chrome even though both
 * consume the same `--lz-ui-concrete-*` tokens.
 */
.lz-btt__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: var(--lz-ui-concrete-border, 3px solid var(--ladyzone-brand, #ea098d));
  border-radius: inherit;
  background-color: var(--lz-ui-concrete-base, #e8e4de);
  background-image: var(--lz-ui-concrete-bg);
  background-size: var(--lz-ui-concrete-bg-tile, clamp(18rem, 40vw, 48rem));
  background-repeat: repeat;
  background-position: center;
  background-clip: padding-box;
}

.lz-btt__plate::after {
  content: "";
  position: absolute;
  inset: var(--lz-ui-concrete-border-width, 3px);
  border-radius: max(0px, calc(var(--lz-btt-radius) - var(--lz-ui-concrete-border-width, 3px)));
  background: var(--lz-ui-concrete-wash, color-mix(in srgb, #fff 32%, transparent));
}

/* Up chevron (^) — half-lines meet at top center, same stroke as burger */
.lz-btt__chevron {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--lz-btt-size) * 0.55);
  height: calc(var(--lz-btt-size) * 0.55);
  transform: translateY(calc(var(--lz-btt-size) * -0.05));
  transition: transform 0.2s var(--lz-ease-out-quart);
}

.lz-btt__link:hover .lz-btt__chevron {
  transform: translateY(calc(var(--lz-btt-size) * -0.11));
}

.lz-btt__chevron--up::before,
.lz-btt__chevron--up::after {
  content: "";
  position: absolute;
  top: 29%;
  display: block;
  width: 55%;
  height: var(--lz-btt-line);
  background-color: var(--lz-btt-ink);
  transition: transform 0.2s var(--lz-ease-out-quart);
}

.lz-btt__chevron--up::before {
  left: 50%;
  transform-origin: 0% 100%;
  transform: translate3d(-0.08rem, 0.06rem, 0) rotate(48deg);
}

.lz-btt__chevron--up::after {
  right: 50%;
  transform-origin: 100% 100%;
  transform: translate3d(0.08rem, 0.06rem, 0) rotate(-48deg);
}

.lz-btt__link:hover .lz-btt__chevron--up::before {
  transform: translate3d(-0.08rem, -0.06rem, 0) rotate(48deg);
}

.lz-btt__link:hover .lz-btt__chevron--up::after {
  transform: translate3d(0.08rem, -0.06rem, 0) rotate(-48deg);
}

@media (prefers-reduced-motion: reduce) {
  .lz-btt__chevron,
  .lz-btt__chevron--up::before,
  .lz-btt__chevron--up::after {
    transition: none;
  }
}