@media (min-width: 1440px) {
  .clp-shop-color { width: 100%; max-width: 1128px; }

  .clp-shop-color .header { font: bold 24px Roboto, Arial, sans-serif; line-height: 32px; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0px; }

  .clp-shop-color .subheader { font: 18px Roboto, Arial, sans-serif; line-height: 1.25; text-align: center; margin: 0 auto 32px; }

  .clp-shop-color .divider { width: 100px; height: 4px; background: #ED1C24; margin: 12px auto 32px auto; }

  .clp-shop-color .divider:has(+ .subheader) { margin: 12px auto 16px; }

  .clp-shop-color .color-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 12px; width: 100%; }

  .clp-shop-color .color-card { width: 216px; height: 106px; position: relative; }

  .clp-shop-color .color-card > a { color: #000000; text-decoration: none; }

  .clp-shop-color .color-img-container:after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); display: block; width: 100%; height: 72px; position: absolute; top: 0; content: ''; }

  .clp-shop-color .color-img { width: 216px !important; height: 72px !important; display: block; }

  .clp-shop-color .color-header { background: #FFFFFF; padding: 8px 0px; box-sizing: border-box; }

  .clp-shop-color .color-header > h3 { font: 14px Roboto, Arial, sans-serif; line-height: 18px; text-align: center; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .clp-shop-color .more-colors { display: none; }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .clp-shop-color { width: 100%; max-width: 832px; margin: auto; }

  .clp-shop-color .header { font: bold 24px Roboto, Arial, sans-serif; line-height: 32px; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0px; }

  .clp-shop-color .subheader { font: 18px Roboto, Arial, sans-serif; line-height: 1.25; text-align: center; margin: 0 auto 32px; }

  .clp-shop-color .divider { width: 100px; height: 4px; background: #ED1C24; margin: 12px auto 32px auto; }

  .clp-shop-color .divider:has(+ .subheader) { margin: 12px auto 16px; }

  .clp-shop-color .color-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 12px; width: 100%; }

  .clp-shop-color .color-card { width: 157px; height: 86px; position: relative; }

  .clp-shop-color .color-card > a { color: #000000; text-decoration: none; }

  .clp-shop-color .color-img-container:after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); display: block; width: 100%; height: 52px; position: absolute; top: 0; content: ''; }

  .clp-shop-color .color-img { width: 157px !important; height: 52px !important; display: block; }

  .clp-shop-color .color-header { background: #FFFFFF; padding: 8px 0px; box-sizing: border-box; }

  .clp-shop-color .color-header > h3 { font: 14px Roboto, Arial, sans-serif; line-height: 18px; text-align: center; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .clp-shop-color .more-colors { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .clp-shop-color { width: 100%; max-width: 832px; margin: auto; }

  .clp-shop-color .header { font: bold 24px Roboto, Arial, sans-serif; line-height: 32px; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0px; }

  .clp-shop-color .subheader { font: 18px Roboto, Arial, sans-serif; line-height: 1.25; text-align: center; margin: 0 auto 32px; }

  .clp-shop-color .divider { width: 100px; height: 4px; background: #ED1C24; margin: 12px auto 32px auto; }

  .clp-shop-color .divider:has(+ .subheader) { margin: 12px auto 16px; }

  .clp-shop-color .color-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 12px; width: 100%; }

  .clp-shop-color .color-card { width: 100%; min-width: 144px; max-width: 157px; height: 86px; position: relative; }

  .clp-shop-color .color-card > a { color: #000000; text-decoration: none; }

  .clp-shop-color .color-img-container:after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); display: block; width: 100%; height: 52px; position: absolute; top: 0; content: ''; }

  .clp-shop-color .color-img { width: 100% !important; min-width: 144px !important; max-width: 157px !important; height: 52px !important; display: block; }

  .clp-shop-color .color-header { background: #FFFFFF; padding: 8px 0px; box-sizing: border-box; }

  .clp-shop-color .color-header > h3 { font: 14px Roboto, Arial, sans-serif; line-height: 18px; text-align: center; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .clp-shop-color .more-colors { display: none; }
}

@media (max-width: 767px) {
  .clp-shop-color { width: 100%; min-width: 280px; max-width: calc(100% - 40px); margin: auto; box-sizing: border-box; }

  .clp-shop-color .header { font: bold 20px Roboto, Arial, sans-serif; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; text-align: left; margin: 0px; }

  .clp-shop-color .subheader { font: 16px Roboto, Arial, sans-serif; line-height: 1.25; text-align: left; margin: 0 0 32px; }

  .clp-shop-color .divider { width: 100px; height: 4px; background: #ED1C24; margin: 12px 0px 32px 0px; }

  .clp-shop-color .divider:has(+ .subheader) { margin: 12px 0 16px; }

  .clp-shop-color .color-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 12px; grid-row-gap: 20px; width: 100%; }

  .clp-shop-color .color-card { min-width: 85px; max-width: 100%; height: 106px; position: relative; }

  .clp-shop-color .color-card > a { color: #000000; text-decoration: none; }

  .clp-shop-color .color-img-container:after { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); display: block; width: 100%; height: 72px; position: absolute; top: 0; content: ''; }

  .clp-shop-color .color-img { min-width: 85px !important; width: 100% !important; height: 72px !important; display: block; object-fit: cover; }

  .clp-shop-color .color-header { background: #FFFFFF; padding: 8px 0px; box-sizing: border-box; }

  .clp-shop-color .color-header > h3 { font: 14px Roboto, Arial, sans-serif; line-height: 18px; text-align: center; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .clp-shop-color .color-grid div.color-card:nth-child(n + 7) { display: none; }

  .clp-shop-color .more-colors { min-width: 280px; max-width: 500px; width: 100%; height: 48px; color: #000000 !important; background: #FFFFFF; border: 1px solid #000000; font-family: Roboto; font-weight: bold; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin: 20px auto 0px auto; display: block; }

  .clp-shop-color .more-colors:focus { outline: none; }

  .clp-shop-color .more-colors:hover { background: #ED1C24 !important; color: #FFFFFF !important; border: none !important; }

  .clp-shop-color .show { display: block !important; }
}