/* Back-to-top button (ck-to-top.js). Palette: petrol + champagne. */
.ck-to-top {
  --ck-top-p: 0;
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 840;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #123E44 calc(100% - 3px), transparent calc(100% - 2px)),
    conic-gradient(#C8A86E calc(var(--ck-top-p) * 360deg), rgba(200, 168, 110, .25) 0);
  box-shadow: 0 14px 30px rgba(11, 43, 48, .28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s, background .2s ease;
}
.ck-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
.ck-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #E9D5A8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}
.ck-to-top:hover svg { transform: translateY(-3px); }
.ck-to-top:focus-visible { outline: 3px solid #86692F; outline-offset: 3px; }
@media (max-width: 640px) {
  .ck-to-top { right: 14px; width: 48px; height: 48px; }
}
/* Phones and tablets: the floating cart sits in the bottom-right corner, so
   the arrow stacks just above it while the cart button is shown. */
@media (max-width: 900px) {
  body:has(.ck-floating-cart:not([hidden])) .ck-to-top { right: 12px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 60px); }
}