/* Custom Lanyards — style grid + live pricing */

#ly-price {
  position: relative;
}

.dp-gallery__grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.ly-styles .dp-cell__photo {
  min-height: 172px;
  padding: 28px 18px 18px;
}

.ly-styles .dp-cell__photo img {
  max-width: 100%;
  max-height: 134px;
}

.ly-styles figcaption {
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 12px 16px;
}

.ly-styles figcaption strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #1d2429;
}

.ly-styles figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: #8a9199;
}

.ly-styles .dp-cell.is-price-active,
.ly-styles .dp-cell:focus-within {
  border-color: #204e75;
}

.ly-styles .dp-cell:focus-visible {
  outline: 2px solid #204e75;
  outline-offset: 2px;
}

.ly-styles .dp-overlay__btn {
  padding: 9px 14px;
  font-size: 11.5px;
}

.ly-styles .dp-overlay:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.ly-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 12.5px;
  color: #6a747d;
}

.ly-note svg {
  flex: none;
  color: #7eb12c;
}

.dp-price__head h2 span {
  font-size: 15px;
  font-weight: 700;
  color: #8a9199;
}

.dp-page--lanyards .dp-price__panel--ent {
  width: 240px;
}

.ly-types .dp-cell__photo {
  min-height: 180px;
}

.ly-types .dp-cell__photo img {
  max-height: 156px;
  max-width: 100%;
}

.ly-types figcaption {
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

.ly-types figcaption strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #1d2429;
}

.ly-types figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 400;
  color: #8a9199;
}

.ly-attach .dp-fast__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ly-attach .dp-cell__photo {
  min-height: 150px;
  padding: 12px 16px 18px;
}

.ly-attach .dp-cell__photo img {
  max-width: 100%;
  max-height: 150px;
}

.ly-attach figcaption {
  padding-top: 14px;
  text-align: center;
}

.ly-hq {
  text-align: center;
}

.ly-hq .dp-eyebrow {
  justify-content: center;
}

.ly-hq h2,
.ly-ask h2 {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 700;
  color: #204e75;
}

.ly-hq .dp-rule,
.ly-ask .dp-rule {
  margin: 14px auto 0;
}

.ly-hq > p,
.ly-ask > p {
  margin: 16px auto 0;
  max-width: 940px;
  font-size: 14px;
  line-height: 1.7;
  color: #55606a;
}

.ly-hq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
  text-align: center;
}

.ly-hq__card {
  padding: 26px 30px;
  border: 1px solid #dfe4e8;
  background: #fff;
}

.ly-hq__card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #204e75;
}

.ly-hq__card p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #55606a;
}

.ly-ask {
  text-align: center;
}

.ly-ask .dp-eyebrow {
  justify-content: center;
}

.ly-ask > p {
  max-width: 900px;
}

@media (max-width: 1100px) {
  .dp-gallery__grid--5,
  .ly-hq__grid,
  .ly-attach .dp-fast__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dp-page--lanyards .dp-price__panel--ent {
    width: auto;
  }
}

@media (max-width: 800px) {
  .dp-gallery__grid--5,
  .ly-hq__grid,
  .ly-attach .dp-fast__grid {
    grid-template-columns: 1fr;
  }
}