/** Shopify CDN: Minification failed

Line 16:10 Unexpected "{"
Line 16:19 Expected ":"
Line 17:14 Expected identifier but found whitespace
Line 17:16 Unexpected "{"
Line 17:25 Expected ":"
Line 17:51 Expected ":"
Line 18:17 Expected identifier but found whitespace
Line 18:19 Unexpected "{"
Line 18:28 Expected ":"
Line 18:57 Expected ":"
... and 10 more hidden warnings

**/
.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

@media screen and (max-width: 749px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round }}px;
  }
}

.shop-by-color-container {
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

.shop-by-color-container.page-width-custom {
  max-width: var(--max-w);
}

.shop-by-color-container.full-width {
  max-width: 100%;
  padding: 0 2rem;
}

@media screen and (max-width: 749px) {
  .shop-by-color-container {
    padding: 0 1rem !important;
  }
}

.shop-by-color-section .section-header {
  margin-bottom: 20px;
}
.shop-by-color-section .text-left { text-align: left; }
.shop-by-color-section .text-center { text-align: center; }
.shop-by-color-section .text-right { text-align: right; }

.shop-by-color-section .section-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #111;
  margin: 0;
  letter-spacing: -0.01em;
}

.color-cards-container {
  width: 100%;
}

.color-cards-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}

.color-cards-slider::-webkit-scrollbar {
  display: none;
}

.color-card-item {
  /* Mobile: Fixed width so horizontal scroll works smoothly */
  flex: 0 0 160px;
  scroll-snap-align: start;
}

@media screen and (min-width: 750px) {
  .color-card-item {
    /* Desktop: Evenly spread across columns based on customizer setting */
    flex: 0 0 calc((100% - (12px * (var(--desktop-columns) - 1))) / var(--desktop-columns));
  }
}

.color-card-link {
  display: block;
  position: relative;
  text-decoration: none;
  height: var(--card-height);
  background-color: #f4f4f4;
  border-radius: 4px;
  overflow: hidden;
}

@media screen and (max-width: 749px) {
  .color-card-link {
    height: 220px;
  }
}

.color-card-image-wrapper {
  width: 100%;
  height: 100%;
}

.color-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.color-card-link:hover .color-card-img {
  transform: scale(1.03);
}

.color-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.color-card-title {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}