.material-lightbox.material-lightbox--carousel {
  --carousel-slide: 76%;
  --carousel-side: calc((100% - var(--carousel-slide)) / 2);
  --carousel-gap: 0.45rem;
  --carousel-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.material-lightbox.material-lightbox--carousel .material-lightbox-inner {
  width: var(--lightbox-frame-width, min(960px, calc(100vw - 2rem), calc((100vh - 9rem) * 1.5)));
}

.material-lightbox-stage {
  --carousel-slide: 76%;
  --carousel-side: calc((100% - var(--carousel-slide)) / 2);
  --carousel-gap: 0.45rem;
  --carousel-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.material-lightbox-viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.material-lightbox-stage.has-multiple .material-lightbox-viewport {
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.material-lightbox-stage.has-multiple .material-lightbox-viewport.is-dragging {
  cursor: grabbing;
}

.material-lightbox-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 0;
  will-change: transform;
}

.material-lightbox-stage.has-multiple .material-lightbox-track {
  gap: var(--carousel-gap);
}

.material-lightbox.material-lightbox--carousel .material-lightbox-stage,
.material-lightbox-stage.has-multiple,
.material-lightbox-viewport,
.material-lightbox-track {
  background: transparent;
}

.material-lightbox-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
  background: transparent;
}

.material-lightbox-stage.has-multiple .material-lightbox-slide {
  flex-basis: var(--carousel-slide);
  cursor: pointer;
}

.material-lightbox-stage.has-multiple .material-lightbox-slide.is-active {
  cursor: default;
  z-index: 1;
}

.material-lightbox-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

.material-lightbox-stage.has-multiple .material-lightbox-slide.is-active img {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.material-lightbox-stage.has-multiple .material-lightbox-slide:not(.is-active) img {
  filter: blur(1.1px) saturate(0.86) brightness(0.52);
  opacity: 0.92;
}

@media (hover: hover) and (pointer: fine) {
  .material-lightbox-stage.has-multiple .material-lightbox-slide:not(.is-active):hover img {
    filter: blur(0.4px) saturate(0.94) brightness(0.72);
    opacity: 1;
  }
}

.material-lightbox-stage:has(.material-lightbox-viewport) > .material-lightbox-house,
.material-lightbox-house[hidden] {
  display: none !important;
}

.material-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 12;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(20, 14, 10, 0.58);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  transform: translateY(-50%);
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out-expo, var(--carousel-ease)), opacity 0.3s;
}

.material-lightbox-stage.has-multiple .material-lightbox-nav {
  display: flex;
}

.material-lightbox-nav svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.material-lightbox-prev { left: 0.85rem; }
.material-lightbox-next { right: 0.85rem; }

.material-lightbox-stage.has-multiple .material-lightbox-prev {
  left: calc(var(--carousel-side) + 0.7rem);
}

.material-lightbox-stage.has-multiple .material-lightbox-next {
  right: calc(var(--carousel-side) + 0.7rem);
}

.material-lightbox-nav:hover {
  background: rgba(20, 14, 10, 0.82);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-50%) scale(1.06);
}

.material-lightbox-nav:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}

.material-lightbox-dots {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  z-index: 11;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.28rem 0.42rem;
  border-radius: 999px;
  background: rgba(20, 14, 10, 0.38);
  transform: translateX(-50%);
}

.material-lightbox-stage.has-multiple .material-lightbox-dots {
  display: flex;
}

.material-lightbox-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo, var(--carousel-ease)), background 0.3s, width 0.3s;
}

.material-lightbox-dot.is-active {
  width: 18px;
  border-radius: 999px;
  background: #fff;
}

.material-lightbox-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

.material-lightbox-counter {
  display: none;
}

.material-lightbox-texture {
  z-index: 4;
}

.material-lightbox-stage.has-multiple .material-lightbox-texture {
  left: calc(var(--carousel-side) + clamp(1rem, 2.5vw, 1.75rem));
}

.material-lightbox-house {
  transition: opacity 0.28s var(--ease-out-expo, var(--carousel-ease));
}

.material-lightbox-house.is-switching {
  opacity: 0;
}

/* Stacked brick lightbox: simple full image, no carousel track */
.material-lightbox--stacked:not(.material-lightbox--carousel) .material-lightbox-viewport {
  display: none !important;
}

.material-lightbox--stacked:not(.material-lightbox--carousel) .material-lightbox-house {
  display: block !important;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.material-lightbox--stacked:not(.material-lightbox--carousel) .material-lightbox-dots {
  display: none !important;
}

.material-lightbox--stacked:not(.material-lightbox--carousel) .material-lightbox-stage.has-multiple .material-lightbox-prev {
  left: 0.85rem;
}

.material-lightbox--stacked:not(.material-lightbox--carousel) .material-lightbox-stage.has-multiple .material-lightbox-next {
  right: 0.85rem;
}

.material-lightbox-edge-peek[hidden] {
  display: none !important;
}

.material-lightbox--stacked {
  --edge-peek-width: clamp(96px, 12vw, 156px);
}

.material-lightbox-stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: 100%;
}

.material-lightbox-stage-row.has-edge-peeks {
  grid-template-columns: var(--edge-peek-width) minmax(0, var(--lightbox-frame-width)) var(--edge-peek-width);
  column-gap: clamp(0.45rem, 1vw, 0.75rem);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  align-items: stretch;
}

.material-lightbox--stacked.has-edge-peeks .material-lightbox-inner {
  width: auto;
  max-width: min(calc(100vw - 1rem), calc(var(--lightbox-frame-width) + 2 * var(--edge-peek-width) + 1.5rem));
}

.material-lightbox--stacked.has-edge-peeks .material-lightbox-header {
  width: var(--lightbox-frame-width);
  margin-inline: auto;
}

.material-lightbox-stage-row.has-edge-peeks .material-lightbox-stage {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

.material-lightbox-edge-peek {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}

.material-lightbox-edge-peek--prev {
  grid-column: 1;
  grid-row: 1;
}

.material-lightbox-edge-peek--next {
  grid-column: 3;
  grid-row: 1;
}

.material-lightbox-edge-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: blur(2px) brightness(0.76);
  opacity: 0.9;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.material-lightbox-edge-peek--prev img {
  object-position: 72% center;
}

.material-lightbox-edge-peek--next img {
  object-position: 28% center;
}

.material-lightbox-edge-peek::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.material-lightbox-edge-peek--prev::after {
  background: linear-gradient(90deg, rgba(20, 14, 10, 0.32) 0%, transparent 76%);
}

.material-lightbox-edge-peek--next::after {
  background: linear-gradient(270deg, rgba(20, 14, 10, 0.32) 0%, transparent 76%);
}

@media (hover: hover) and (pointer: fine) {
  .material-lightbox-edge-peek:hover img {
    filter: blur(1px) brightness(0.84);
    opacity: 0.98;
  }
}

@media (max-width: 768px) {
  .material-lightbox--stacked {
    --edge-peek-width: clamp(68px, 17vw, 104px);
  }

  .material-lightbox-stage-row.has-edge-peeks {
    column-gap: 0.35rem;
  }

  .material-lightbox--stacked .material-lightbox-edge-peek {
    display: none !important;
  }

  .material-lightbox-stage-row.has-edge-peeks {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .material-lightbox--stacked.has-edge-peeks .material-lightbox-inner {
    width: var(--lightbox-frame-width, min(calc(100vw - 1.25rem), calc((100svh - 10rem) * 1.5)));
    max-width: 100%;
  }

  .material-lightbox--stacked.has-edge-peeks .material-lightbox-header {
    width: 100%;
  }

  .material-lightbox-stage-row.has-edge-peeks .material-lightbox-stage {
    grid-column: 1;
  }
}

.material-lightbox--stacked.material-lightbox--carousel .material-lightbox-inner {
  width: var(--lightbox-frame-width, min(960px, calc(100vw - 2rem), calc((100vh - 9rem) * 1.5)));
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.material-lightbox--stacked.material-lightbox--carousel .material-lightbox-header {
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.material-lightbox--stacked.material-lightbox--carousel .material-lightbox-stage {
  aspect-ratio: var(--lightbox-frame-ratio, 3 / 2);
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 9rem);
}

.material-lightbox--stacked.material-lightbox--carousel .material-lightbox-slide {
  align-items: center;
}

@media (max-width: 768px) {
  .material-lightbox.material-lightbox--carousel .material-lightbox-inner {
    width: var(--lightbox-frame-width, min(calc(100vw - 1.25rem), calc((100svh - 10rem) * 1.5)));
  }

  .material-lightbox-stage {
    --carousel-slide: 100%;
    --carousel-gap: 0;
  }

  .material-lightbox-stage.has-multiple .material-lightbox-nav {
    display: none;
  }

  .material-lightbox-stage.has-multiple .material-lightbox-dots {
    display: none;
  }

  .material-lightbox-stage.has-multiple .material-lightbox-slide:not(.is-active) img {
    filter: none;
    opacity: 0;
  }

  .material-lightbox-counter:not([hidden]) {
    display: flex;
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    z-index: 13;
    flex-direction: column;
    align-items: stretch;
    gap: 0.38rem;
    min-width: 3.4rem;
    padding: 0.42rem 0.62rem 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.85rem;
    background: rgba(20, 14, 10, 0.56);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }

  .material-lightbox-counter[hidden] {
    display: none !important;
  }

  .material-lightbox-counter-text {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 250, 242, 0.94);
    font-variant-numeric: tabular-nums;
  }

  .material-lightbox-counter-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
  }

  .material-lightbox-counter-seg {
    flex: 1 1 0;
    min-width: 0.34rem;
    max-width: 0.72rem;
    height: 0.16rem;
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.28);
    transition: max-width 0.35s var(--ease-out-expo, var(--carousel-ease)), background 0.35s ease;
  }

  .material-lightbox-counter-seg.is-active {
    max-width: 1.15rem;
    background: #fffaf2;
  }

  .material-lightbox-dots {
    bottom: 0.65rem;
  }

  .material-lightbox--stacked.material-lightbox--carousel .material-lightbox-stage {
    aspect-ratio: var(--lightbox-frame-ratio, 3 / 2);
    height: auto;
    max-height: calc(100svh - 10rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .material-lightbox-track,
  .material-lightbox-slide img,
  .material-lightbox-nav,
  .material-lightbox-dot {
    transition: none;
  }
}