/** Shopify CDN: Minification failed

Line 10:0 Unexpected "<"
Line 118:2 Unexpected "<"

**/


/* CSS from section stylesheet tags */
<style>
    .color-slider-section {
      position: relative;
      padding: 40px 20px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
    }

    .color-slider-inner {
      max-width: 100%;
      margin: 0 auto;
    }

    /* 主产品图：海报图，2:1比例 */
    .color-slider-image-wrapper {
      position: relative;
      width: 100%;
      height: auto; /* 自适应高度 */
      overflow: hidden;
    }
    .color-slider-image-wrapper img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      cursor: pointer;
      transition: opacity 0.3s ease;  /* 增加淡入淡出过渡 */
      opacity: 1;
    }

    /* overlay：用于放置滑块和色块选择 */
    .color-slider-overlay {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      background-color: #fcfaf6;
      padding: 6px 0;
      border-radius: 4px;
    }

    /* 彩色横条（滑块背景） */
    .color-slider-wrapper {
      position: relative;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 10px;
    }

    .color-slider-handle {
      position: absolute;
      top: -6px;
      left: 0;
      width: 20px;
      height: 20px;
      background: #000;
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 4px rgba(0,0,0,0.3);
      transform: translateX(-50%);
      z-index: 9999;
    }

    /* 色块小圆球 */
    .color-swatches {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .color-swatch {
      width: 32px;
      height: ;
      border-radius: 50%;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid transparent;
    }
    .color-swatch img {
      width: 100%;
      height: auto;
      display: block;
    }
    .color-swatch.active {
      border-color: #000;
    }

    /* 手机端适配 */
    @media screen and (max-width: 767px) {
      .color-slider-image-wrapper {
        height: auto;
        max-height: 500px;
      }
      .color-slider-image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
    }
  </style>