/** Shopify CDN: Minification failed

Line 20:18 Unexpected "{"
Line 20:27 Expected ":"
Line 27:18 Unexpected "{"
Line 27:27 Expected ":"
Line 53:18 Unexpected "{"
Line 53:27 Expected ":"
Line 63:18 Unexpected "{"
Line 63:27 Expected ":"
Line 64:18 Unexpected "{"
Line 64:27 Expected ":"
... and 26 more hidden warnings

**/
/* =========================================
   DYE BAND - DESKTOP
   ========================================= */

#shopify-section-{{ section.id }} .cn-band {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
}

#shopify-section-{{ section.id }} .cn-band-col {
  flex: 1 1 0;
  min-width: 0;
  width: 0;

  margin: 0;
  padding: 12px 8px;

  border: 0;
  border-radius: 0;

  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  transition:
    flex-grow 0.7s cubic-bezier(.22,.61,.36,1);

  will-change: flex-grow;
}

#shopify-section-{{ section.id }}
.cn-band-col[aria-pressed="true"] {
  flex-grow: 2;
}


/* =========================================
   TEXT
   ========================================= */

#shopify-section-{{ section.id }} .cn-band-hex,
#shopify-section-{{ section.id }} .cn-band-label {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 1.4;
}

#shopify-section-{{ section.id }} .cn-band-hex {
  font-size: 13px;
  color: #fff;
}

#shopify-section-{{ section.id }} .cn-band-label {
  font-size: 14px;
  color: #fff;
}


/* Dark text */

#shopify-section-{{ section.id }}
.cn-band-col[data-light="true"] .cn-band-hex,

#shopify-section-{{ section.id }}
.cn-band-col[data-light="true"] .cn-band-label {
  color: #241F1C;
}


/* =========================================
   MOBILE - EXACTLY 4 + 4
   ========================================= */

@media screen and (max-width: 768px) {

  #shopify-section-{{ section.id }} .cn-band {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    overflow: hidden;

    gap: 0;
  }

  #shopify-section-{{ section.id }} .cn-band-col {
    width: 100%;
    min-width: 0;

    /*
      IMPORTANT:
      Remove desktop flex behavior on mobile
    */
    flex: none;

    padding: 11px 4px;

    transition:
      transform 0.25s ease,
      filter 0.25s ease;

    box-sizing: border-box;
  }

  /*
    Keep selected color visually highlighted
    without changing the grid structure.
  */

  #shopify-section-{{ section.id }}
  .cn-band-col[aria-pressed="true"] {
    flex: none;
    transform: scale(1.03);
    z-index: 2;
  }

  #shopify-section-{{ section.id }} .cn-band-hex {
    font-size: 11px;
  }

  #shopify-section-{{ section.id }} .cn-band-label {
    font-size: 12px;
  }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media screen and (max-width: 480px) {

  #shopify-section-{{ section.id }} .cn-band-col {
    padding: 9px 3px;
  }

  #shopify-section-{{ section.id }} .cn-band-hex {
    font-size: 10px;
  }

  #shopify-section-{{ section.id }} .cn-band-label {
    font-size: 11px;
  }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  #shopify-section-{{ section.id }} .cn-band-col {
    transition: none;
  }
}