/* ============================================
   HOMEPAGE STYLES
   homepage-2026.css
   ============================================ */

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* Optional: Reduce motion for users who prefer it (accessibility) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Skip Link for Keyboard Navigation */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  padding: 1rem;
  background: #000;
  color: #fff;
  text-decoration: underline;
  z-index: 10000;
}

/* ============================================
   HERO SECTION
   ============================================ */

/* #homepage-2026 .hero-section,
#homepage-2026 .hero-overlay {
  padding: 0 20px;
} */
/* Hero Typography - Mobile */
#homepage-2026 .hero-title {
  color: #fff;
}

#homepage-2026 .hero-subtitle {
  color: #fff;
}

/* Hero Typography - Desktop (≥768px) */
@media (min-width: 768px) {
}

/* ============================================
   INTRO SECTION
   ============================================ */

/* ============================================
   SHARED BUTTON STYLES
   ============================================ */

#homepage-2026 .hero-btn,
#homepage-2026 .learn-btn,
#homepage-2026 .feature-btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  color: #2f2d2d;
  text-decoration: none;
  border-radius: 50rem;
  width: fit-content;
}

#homepage-2026 .hero-btn,
#homepage-2026 .feature-btn {
  background-color: #fff;
}

#homepage-2026 .learn-btn {
  background-color: #efefef;
}

/* ============================================
   PRODUCTS & RESOURCES CAROUSEL SECTIONS
   ============================================ */

/* Product Images */
#homepage-2026 .product-image {
  /* aspect-ratio: 1 / 1; */
  overflow: hidden;
}

#homepage-2026 .product-image img {
  object-fit: cover;
  height: 100%;
}

/* collections images 501px max-height */

#homepage-2026 a.product-link {
  color: inherit;
  text-decoration: none;
}

/* Slick Carousel Dots */

#homepage-2026 .products-dots {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

#homepage-2026 .products-section .slick-dots,
#homepage-2026 .resources-section .slick-dots {
  position: static;
  display: flex !important;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#homepage-2026 .products-section .slick-dots li,
#homepage-2026 .resources-section .slick-dots li,
#homepage-2026 .feature-module-section .slick-dots li {
  margin: 0;
  width: 8px;
  height: 8px;
}

#homepage-2026 .products-section .slick-dots li button,
#homepage-2026 .resources-section .slick-dots li button,
#homepage-2026 .feature-module-section .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #d9d9d9;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

#homepage-2026 .products-section .slick-dots li button:before,
#homepage-2026 .resources-section .slick-dots li button:before,
#homepage-2026 .feature-module-section .slick-dots li button:before {
  display: none;
}

#homepage-2026 .products-section .slick-dots li.slick-active button,
#homepage-2026 .resources-section .slick-dots li.slick-active button,
#homepage-2026 .feature-module-section .slick-dots li.slick-active button {
  background-color: #2f2d2d;
}

/* Slick Carousel Slide Gaps */
#homepage-2026 .products-carousel .slick-slide {
  margin: 0 2px;
}

#homepage-2026 .products-carousel .slick-list {
  margin: 0 -2px;
}

/* ============================================
   FEATURE MODULE CAROUSEL SECTION
   ============================================ */

/* Feature Content Background */

#homepage-2026 .feature-header {
  margin-top: 25%;
}

#homepage-2026 .feature-content {
  background-color: #efefef;
  /* min-height: 400px; */
  aspect-ratio: 1/1;
}

#homepage-2026 .feature-description {
  opacity: 0.8;
}

@media (min-width: 992px) {
  #homepage-2026 .feature-content {
    aspect-ratio: unset;
  }
}

/* Feature Module Dots Positioning */
#homepage-2026 .feature-module-section .slick-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 10;
}

@media (min-width: 768px) {
  #homepage-2026 .feature-module-section .slick-dots {
    bottom: -40px;
  }
}

/* ============================================
   COLLECTIONS GRID
   ============================================ */
/* Desktop: 2 columns at 368px each, centered */
@media (min-width: 992px) {
  #homepage-2026 .collections-section .row {
    max-width: 880px; /* 368px + 368px + 144px gap */
    margin-left: auto;
    margin-right: auto;
    column-gap: 144px; /* Horizontal gap between columns */
    row-gap: 80px; /* Vertical gap between rows */
  }

  #homepage-2026 .collections-section .product-image {
    width: 100%;
    height: 501px;
    overflow: hidden;
    background: #f5f5f5;
  }

  #homepage-2026 .collections-section .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #homepage-2026 .collections-section .product-slide {
    flex: 0 0 368px;
    max-width: 368px;
  }
}