/** Shopify CDN: Minification failed

Line 23:16 Expected identifier but found whitespace
Line 23:18 Unexpected "{"
Line 23:27 Expected ":"
Line 23:53 Expected ":"
Line 24:19 Expected identifier but found whitespace
Line 24:21 Unexpected "{"
Line 24:30 Expected ":"
Line 24:59 Expected ":"

**/
/* ===== Homepage Icons Section ===== */
.homepage-icons-section {
  padding-top: var(--padding-top, 36px);    /* Dynamic padding from settings */
  padding-bottom: var(--padding-bottom, 36px); /* Dynamic padding from settings */
  background: transparent; /* Light background color from image */
  text-align: center;
}

/* Set CSS variables for padding from Liquid settings */
.homepage-icons-section-wrapper {
  --padding-top: {{ section.settings.padding_top }}px;
  --padding-bottom: {{ section.settings.padding_bottom }}px;
}

.page-width {
  max-width: 1300px; /* Adjust as per your theme's page width */
  margin: 0 auto;
  padding: 0 20px;
}

.homepage-icons-wrapper {
  position: relative;
  width: 100%;
  padding: 0; /* Reset padding */
  box-sizing: border-box;
}

.homepage-icons-grid {
  display: flex; /* Flexbox for grid layout */
  flex-wrap: nowrap; /* Prevent wrapping on mobile for slider behavior */
  gap: 30px; /* Spacing between icons */
  justify-content: space-around; /* Distribute items evenly */
  align-items: flex-start; /* Align content to top */
  overflow-x: hidden; /* Hide scrollbar on desktop, controlled by JS for mobile */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; /* For smooth snapping on mobile */
  padding-bottom: 0; /* Default, will be adjusted for mobile slider */
}

/* Individual Icon Block */
.homepage-icon-block {
  flex: 1 1 25%; /* 4 items per row, equal width */
  max-width: 25%; /* Ensure it doesn't grow beyond 25% */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 10px; /* Internal padding */
  box-sizing: border-box;
  scroll-snap-align: start; /* For mobile slider */
}

.homepage-icon-image {
  object-fit: contain;
  margin-bottom: 15px;
}

.homepage-icon-heading {
  font-size: 24px;
  font-weight: 700;
  color: #45322f;
  margin: 0 0 8px;
  line-height: 1.2;
}

.homepage-icon-subtext {
  font-size: 17px;
  color: #494949;
  margin: 0;
  line-height: 1.5;
}

/* ===== Slider Arrows (Hidden by default for desktop/tablet) ===== */
.icons-slider-button--prev,
.icons-slider-button--next {
  display: none !important; /* Hide on desktop/tablet */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: #fff;
  border-radius: 50%;
  width: 40px; /* Smaller buttons for icons */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.2s ease;
  z-index: 5;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.homepage-icons-wrapper:hover .slider-button:not(:disabled) {
  opacity: 1; /* Show on hover for mobile, but display is already none */
}

.icons-slider-button--prev {
  left: -20px; /* Position slightly outside */
}

.icons-slider-button--next {
  right: -20px; /* Position slightly outside */
}

.icons-slider-button--prev img,
.icons-slider-button--next img {
  width: 16px;
  height: 16px;
  filter: brightness(0);
}

.icons-slider-button:active {
  transform: translateY(-50%) scale(0.95);
}

.icons-slider-button:disabled {
  opacity: 0 !important;
  cursor: default;
}

/* ===== Pagination Dots (Hidden by default for desktop/tablet) ===== */
.icons-slider-pagination {
  text-align: center;
  margin-top: 20px;
  display: none !important; /* Hide on desktop/tablet */
}

.icons-slider-pagination .pagination-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e6e6e6;
  margin: 0 5px;
  transition: background 200ms ease, transform 160ms ease;
  border: none;
  cursor: pointer;
}

.icons-slider-pagination .pagination-dot.active {
  background: #111;
  transform: scale(1.15);
}

/* =========================
   ✅ RESPONSIVE DESIGN
   ========================= */

/* Tablet (up to 1024px) - All 4 icons visible, same as desktop */
@media (max-width: 1024px) {
  .homepage-icons-grid {
    gap: 20px; /* Slightly less gap */
  }
  .homepage-icon-block {
    flex: 1 1 25%;
    max-width: 25%;
  }
  /* Ensure slider elements remain hidden */
  .icons-slider-button--prev,
  .icons-slider-button--next,
  .icons-slider-pagination {
    display: none !important;
  }
}

/* Mobile (up to 768px) - 2 icons visible, slider enabled */
@media (max-width: 768px) {
  .homepage-icons-grid {
    flex-wrap: nowrap; /* Important for horizontal scrolling */
    overflow-x: scroll; /* Enable scrolling for slider */
    justify-content: flex-start; /* Align items to start for consistent scrolling */
    padding-bottom: 20px; /* Space for pagination dots below */
    gap: 15px; /* Adjust gap for mobile */
  }

  .homepage-icon-block {
    flex: 0 0 calc(50% - 7.5px); /* 2 items per view with 15px gap */
    min-width: calc(50% - 7.5px); /* Set min-width to ensure 2 items */
    max-width: none; /* Remove max-width constraint */
    padding: 10px 5px;
  }

  .homepage-icon-image {
    margin-bottom: 10px;
  }

  .homepage-icon-heading {
    font-size: 18px;
  }

  .homepage-icon-subtext {
    font-size: 13px;
  }

  /* Show slider buttons and pagination on mobile */
  .icons-slider-button--prev,
  .icons-slider-button--next,
  .icons-slider-pagination {
    display: flex !important; /* Show flex for buttons, block for pagination */
  }
  .icons-slider-pagination {
    display: block !important;
  }
}

/* Small mobile (up to 480px) */
@media (max-width: 480px) {
  .page-width {
    padding: 0 10px;
  }
  .homepage-icons-grid {
    gap: 10px;
  }
  .homepage-icon-block {
    flex: 0 0 calc(50% - 5px); /* Adjusted for 10px gap */
    min-width: calc(50% - 5px);
  }
  .icons-slider-button--prev {
    left: -10px;
  }
  .icons-slider-button--next {
    right: -10px;
  }
}