/* --------------------------------------------------------------------------
   Slider Container
   -------------------------------------------------------------------------- */

.properties-slider-wrapper {
  position: relative;
  max-width: var(--container-2xl); /* 1536px -> global variable */
  margin: 0 auto;
}

.properties-slider {
  display: flex;
  gap: var(--space-2); /* 1rem -> --space-2 */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x; /* 横スワイプのみ処理し、Lenisへの垂直スクロール伝播を防ぐ */
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}

.properties-slider::-webkit-scrollbar {
  display: none;
}



/* --------------------------------------------------------------------------
   Navigation Buttons
   -------------------------------------------------------------------------- */
   
/* モバイル・タブレット (1024px未満).slider-navボタンは、非表示 */
.slider-nav {
  display: none;
}

@media (min-width: 1024px) {
  .slider-nav {
    display: block;
  }

  .slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-dropdown);
    width: 48px;
    height: 48px;
    background: var(--color-glass-black);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 20px;
    opacity: 1;
  }

  .slider-nav-btn:hover {
    background: var(--color-glass-white-hover);
    border-color: var(--color-white);
    transform: translateY(-50%) scale(1.1);
  }

  .slider-nav-btn:disabled {
    opacity: 0;
    pointer-events: none;
  }

  .slider-nav-btn--prev { left: var(--space-2); }
  .slider-nav-btn--next { right: var(--space-2); }
}