/* SINELORO ATELIER 2.4 — PREMIUM UX */

:root {
  --sl-ease:cubic-bezier(.22,1,.36,1);
}

/* Cards */
.sl-dog-card,
.sl-litter-card,
.sl-related-card {
  transition:
    transform .35s var(--sl-ease),
    box-shadow .35s var(--sl-ease);
}

.sl-dog-card:hover,
.sl-litter-card:hover,
.sl-related-card:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 48px rgba(22,45,31,.13);
}

.sl-dog-photo img,
.sl-litter-photo img,
.sl-related-image img {
  object-position:center 35%;
}

/* Editorial images */
.sl-editorial-article .entry-content img {
  display:block;
  max-width:100%;
  height:auto;
}

.sl-editorial-article figcaption {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
}

.sl-editorial-article .wp-block-gallery {
  gap:14px;
}

.sl-editorial-article .wp-block-gallery figure {
  overflow:hidden;
  border-radius:5px;
}

/* Gallery */
.sl-gallery {
  gap:14px;
}

.sl-gallery a {
  position:relative;
  border-radius:5px;
  cursor:zoom-in;
}

.sl-gallery a:after {
  content:"＋";
  position:absolute;
  bottom:13px;
  right:13px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:rgba(247,244,238,.92);
  color:var(--forest);
  border-radius:50%;
  font-size:20px;
  opacity:0;
  transform:translateY(5px);
  transition:.2s;
}

.sl-gallery a:hover:after,
.sl-gallery a:focus-visible:after {
  opacity:1;
  transform:translateY(0);
}

/* New lightbox */
.sl24-lightbox[hidden] {
  display:none!important;
}

.sl24-lightbox {
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(12,22,17,.97);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:65px 70px 35px;
  color:white;
}

.sl24-lightbox img {
  display:block;
  max-width:100%;
  max-height:calc(100dvh - 155px);
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 18px 65px #0005;
}

.sl24-lightbox button {
  border:1px solid #ffffff65;
  background:#ffffff12;
  color:white;
  transition:background .2s;
}

.sl24-lightbox button:hover {
  background:#ffffff35;
}

.sl24-close {
  position:absolute;
  top:22px;
  right:24px;
  width:48px;
  height:48px;
  font-size:26px;
}

.sl24-prev,
.sl24-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:58px;
  font-size:29px;
}

.sl24-prev {left:15px}
.sl24-next {right:15px}

.sl24-caption {
  text-align:center;
  margin-top:17px;
  font-size:13px;
  line-height:1.5;
  color:#e6e8e2;
}

.sl24-counter {
  position:absolute;
  top:33px;
  left:30px;
  font-size:12px;
  letter-spacing:.15em;
  color:#d8c6a7;
}

/* Back to top */
.sl24-top {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:950;
  width:48px;
  height:48px;
  border:1px solid var(--gold);
  border-radius:50%;
  background:var(--forest);
  color:white;
  font-size:22px;
  box-shadow:0 8px 25px #0002;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:.25s;
}

.sl24-top.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Mobile navigation */
@media(max-width:1150px) {
  .sl-nav {
    box-shadow:0 20px 35px #14271c20;
  }

  .sl-nav .menu>li>a {
    font-size:14px;
  }

  .sl-nav .sub-menu {
    padding-left:18px;
    border-left:2px solid var(--gold);
    margin:0 0 12px 8px;
  }

  .sl-nav .sl-submenu-toggle {
    border-radius:4px;
    font-size:21px;
  }
}

@media(max-width:650px) {
  .sl24-lightbox {
    padding:65px 12px 75px;
  }

  .sl24-lightbox img {
    max-height:calc(100dvh - 175px);
  }

  .sl24-prev,
  .sl24-next {
    top:auto;
    bottom:15px;
    transform:none;
    width:52px;
    height:45px;
  }

  .sl24-prev {left:18px}
  .sl24-next {right:18px}

  .sl24-close {
    top:12px;
    right:12px;
  }

  .sl24-counter {
    top:26px;
    left:18px;
  }

  .sl24-caption {
    margin-top:12px;
    padding-inline:12px;
  }

  .sl24-top {
    right:15px;
    bottom:15px;
    width:44px;
    height:44px;
  }

  .sl-dog-card:hover,
  .sl-litter-card:hover,
  .sl-related-card:hover {
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .sl-dog-card,
  .sl-litter-card,
  .sl-related-card,
  .sl24-top {
    transition:none!important;
  }
}