.lookbook-dot {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 5;
  pointer-events: auto;
  left: var(--dot-position-left);
  top: var(--dot-position-top);
  cursor: pointer;

  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }
}

.lookbook-dot__icon {
  position: relative;
  width: var(--dot-size-mobile);
  height: var(--dot-size-mobile);
  background-color: var(--dot-inner-color);
  color: var(--dot-inner-color);
  border-radius: var(--style-border-radius-50);
}

@media screen and (min-width: 750px) {
  .lookbook-dot__icon {
    width: var(--dot-size-desktop);
    height: var(--dot-size-desktop);
  }
}

.lookbook-dot.dot-number .lookbook-dot__icon {
  background-color: transparent;
  color: var(--dot-inner-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lookbook-dot__icon::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  z-index: -1;
  border-radius: var(--style-border-radius-50);
  opacity: 0.5;
  background-color: var(--dot-outer-color);
}

@media screen and (min-width: 750px) {
  .lookbook-dot__icon::before {
    top: -7px;
    left: -7px;
    width: 26px;
    height: 26px;
  }
}

.lookbook-dot__icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: var(--style-border-radius-50);
  opacity: 0.3;
  background-color: var(--dot-outer-color);
  animation: dot-zoom-animation 1.8s var(--ease-out-cubic) infinite;
}

.lookbook-dot.is-active .lookbook-dot__icon {
  transform: scale(1);
  transition: transform 0.3s ease;
  color: var(--dot-outer-color);
  background-color: var(--dot-outer-color);
}

.lookbook-dot.is-active .lookbook-dot__icon::before {
  opacity: 0.8;
  background: radial-gradient(circle, var(--dot-outer-color) 0%, var(--dot-inner-color) 50%, var(--dot-inner-color) 100%);
  animation: active-pulse 2s var(--ease-out-cubic) infinite;
}

.lookbook-dot.is-active .lookbook-dot__icon::after {
  opacity: 0.6;
  background-color: var(--dot-inner-color);
  animation: active-zoom 1.5s var(--ease-out-cubic) infinite;
}

@keyframes active-pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes active-zoom {
  0% {
    transform: scale3d(2.5, 2.5, 1);
    opacity: 0.6;
  }
  50% {
    transform: scale3d(3.5, 3.5, 1);
    opacity: 0.4;
  }
  100% {
    transform: scale3d(2.5, 2.5, 1);
    opacity: 0.6;
  }
}

@keyframes dot-zoom-animation {
  0% {
    transform: scale3d(2, 2, 1);
  }
  50% {
    transform: scale3d(3, 3, 1);
  }
  100% {
    transform: scale3d(2, 2, 1);
  }
}

.lookbook-popup {
  position: fixed;
  width: 100%;
  max-width: 100%;
  right: 0;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 0 1.2rem 0 rgba(var(--color-foreground-rgb) / var(--opacity-10));
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}

.lookbook-popup .card--block-button {
  display: none;
}

.lookbook-popup.sm-column-1,
.lookbook-popup.sm-column-2 {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .lookbook-popup.md-column-1 {
    width: 40%;
  }
  .lookbook-popup.md-column-2 {
    width: 60%;
  }
  .lookbook-popup.md-column-3,
  .lookbook-popup.md-column-4 {
    width: 80%;
  }
}

@media (min-width: 1025px) {
  .lookbook-popup.column-1 {
    width: 40%;
  }
  .lookbook-popup.column-2 {
    width: 60%;
  }
  .lookbook-popup.column-3 {
    width: 70%;
  }
  .lookbook-popup.column-4 {
    width: 90%;
  }
}

@media (min-width: 1400px) {
  .lookbook-popup.column-1 {
    width: 20%;
  }
  .lookbook-popup.column-2 {
    width: 40%;
  }
  .lookbook-popup.column-3 {
    width: 50%;
  }
  .lookbook-popup.column-4 {
    width: 60%;
  }
}

.openLookbookPopup .lookbook-popup {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  overflow: visible;
}

.lookbook-section-list.style-on-image .lookbook-dot__content {
  display: none;
}

.lookbook-section-list.style-popup .lookbook-dot__content {
  /* position: relative; */
  position: fixed;
  left: 3.5rem;
  max-width: 25rem;
  width: max-content;
  transform-origin: left center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

@media (min-width: 1025px) {
  .lookbook-section-list.style-popup .lookbook-dot.is-active .lookbook-dot__content {
    opacity: 1;
    visibility: visible;
    animation: 0.3s ease 0s 1 normal none running scaleLeftToRight;
  }
}

@media screen and (max-width: 1024px) {
  .lookbook-dot__content {
    display: none;
  }
}

.lookbook-section-list.style-popup .lookbook-dot .product-image,
.lookbook-section-list.style-popup .lookbook-dot .card--block-variant {
  display: none;
}

@keyframes scaleLeftToRight {
  0% {
    opacity: 0;
    transform: translateX(-3rem) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
}

.option-horizontal .product-card-lookbook {
  display: flex;
  padding: 8px 14px;
  max-width: 450px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 4px 1px rgba(32,33,36,.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lookbook-dot.is-active .option-horizontal .product-card-lookbook {
  opacity: 1;
  visibility: visible;
}

.option-horizontal .product-card-lookbook::before {
  content: "";
  display: inline-block;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
}

.option-horizontal .product-card-lookbook .product-image {
  max-width: 70px;
}

.option-horizontal .card--block-variant,
.option-horizontal .card--block-button {
  display: none;
}

.lookbook-close {
  display: flex;
  width: 24px;
  height: 24px;
  color: var(--color, #000000);
}

.lookbook-popup-title {
  display: flex;
  padding: 12px 40px;
  border-bottom: 1px solid #dfdfdf;
  position: relative;
  text-align: center;
}

.lookbook-popup-title .title {
  margin-bottom: 0;
}

.lookbook-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.lookbook-close svg {
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .lookbook-close:hover svg {
    transform: rotate(90deg);
  }
}

.lookbook-popup-content {
  padding: 20px;
}

.lookBook__imgPopup {
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #000;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.lookBook__imgPopup.show-one-product {
  max-height: 165px;
}

.lookBook__imgPopup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.lookBook__imgPopup .lookbook-close {
  top: 15px;
  right: 15px;
}

.lookBook__imgPopup .lookBook__imgPopup-wrapper {
  padding: 15px 30px;
}

.lookBook__imgPopup .product-card-lookbook {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.lookBook__imgPopup .product-card-lookbook .product-image {
  max-width: 70px;
}


@media (min-width: 1400px) {
  .template-index .lookbook--editorial-layout {
    li:has(.lookbook-item-all) {
      margin-inline-end: -100px;
      z-index: 999;
    }
    --lookbook-item-odd-width: 80%;
    --lookbook-item-even-width: 20%;
  }
}

@media (max-width: 750px) {
  .lookbook--editorial-layout li:has(.lookbook-item__image) {
    order: 1;
  }
  .lookbook--editorial-layout li:has(.lookbook--grid-layout) {
    order: 2;
  }
}


.lookbook--editorial-layout .lookbook-item__image,
.lookbook--editorial-layout .lookbook-item__image .image-block {
  height: var(--size-style-height);
}