/**
 * Homepage fabric chips: swatch cards inside the existing swiper strip.
 *
 * The strip keeps its swiper (drag-scroll, masks, bounce hint): only the
 * slide content changes from a text pill to a small material card. Overrides
 * the legacy pill styles from style.css (loaded before this file).
 */

.chips-eyebrow {
  margin: 0 0 12px;
  font-family: "Parkinsans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #49505e;
  text-align: center;
}

/* Tighten the gap between the two catalog axes: the legacy 80px bottom
   margin plus the eyebrow spacing read as a dead band between fabrics and
   categories. ~48px total keeps them distinct but related. */
.wrapper-materials-chips {
  margin-bottom: 30px;
}

/* Categories twin: opens the second catalog axis under the hero. */
.chips-eyebrow--categories {
  margin: 0 0 18px;
}

/* Slide: kill the legacy pill look (its selector chain is 5 classes deep,
   so mirror it) — the card styles itself. */
.wrapper-materials-chips .views-element-container .view-materials .view-content .chips-item {
  width: auto;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.wrapper-materials-chips .views-element-container .view-materials .view-content .chips-item:hover {
  background: none;
  border-color: transparent;
}

.wrapper-materials-chips .views-element-container .view-materials .view-content .chips-item:hover a {
  color: #1551c1;
}

.chips-card__link {
  display: block;
  width: 106px;
  text-decoration: none;
  text-align: center;
  /* Let the swiper own the pointer: without this the browser starts a native
     link/image drag and the strip never scrolls with the mouse. */
  -webkit-user-drag: none;
  user-select: none;
}

.chips-card__img,
.chips-card__name {
  -webkit-user-drag: none;
}

.chips-card__img {
  display: block;
  width: 106px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  background: #eef1f6;
  border: 1px solid #e2e8f2;
  box-shadow: 0 3px 10px rgba(0, 47, 133, 0.08);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.chips-card__link:hover .chips-card__img {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 47, 133, 0.16);
}

.chips-card__img--empty {
  border-style: dashed;
}

.chips-card__name {
  display: block;
  margin-top: 7px;
  font-family: "GeneralSans-Variable", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #16233f;
}

.chips-card__link:hover .chips-card__name {
  color: #1551c1;
}

/* Closing slide: same footprint, invites to the full fabric index. */
.chips-card__all {
  display: block;
  width: 106px;
  text-decoration: none;
}

.chips-card__allbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 76px;
  border-radius: 12px;
  background: #eef3fc;
  border: 1.5px dashed #9db8e8;
  color: #1551c1;
  font-family: "GeneralSans-Variable", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: background 0.15s ease-out;
}

.chips-card__all:hover .chips-card__allbox {
  background: #e2ebfa;
}

@media (max-width: 640px) {
  .chips-card__link,
  .chips-card__all {
    width: 92px;
  }

  .chips-card__img,
  .chips-card__allbox {
    width: 92px;
    height: 64px;
  }

  .chips-card__name {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chips-card__img {
    transition: none;
  }

  .chips-card__link:hover .chips-card__img {
    transform: none;
  }
}