/* Catalog /puppies/: additions on top of site/assets/css/styles.css
   (.card .puppy .photo .grid3 .chip .memo .field .input .select …). */

.catalog-chips {
  margin-bottom: 20px;
}

/* region names can be long («Санкт-Петербург и Ленинградская область») */
.catalog-chips .chip {
  max-width: 100%;
  white-space: normal;
}

.catalog-chip__n {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.chip.catalog-chip--on,
.chip.catalog-chip--on:hover {
  background: var(--bronze);
  color: var(--on-bronze);
}

.catalog-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-card__nophoto {
  padding: 12px;
  font-size: 13px;
  color: var(--meta);
  text-align: center;
}

.catalog-card__kennel {
  font-size: 14px;
  line-height: 1.4;
  color: var(--body);
}

.catalog-card__badge {
  align-self: flex-start;
}

.catalog-card__avail {
  font-size: 14px;
  font-weight: 600;
  color: var(--ok-ink);
}

.catalog-card__avail--none,
.catalog-card__noprice {
  font-size: 14px;
  font-weight: 500;
  color: var(--meta);
}

.catalog-block {
  margin-top: 48px;
}

.section.catalog-after {
  padding-top: 0;
}

.catalog-more {
  margin-top: 16px;
}

.catalog-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
}

.catalog-empty__title {
  font-size: 17px;
  font-weight: 700;
}

.catalog-empty__text {
  max-width: 70ch;
  font-size: 15px;
  color: var(--body);
}

.catalog-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}

.catalog-subscribe {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

.catalog-subscribe__title {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.catalog-subscribe__text {
  font-size: 15px;
  color: var(--body);
}

/* {% consent_checkbox %} markup (apps/legal); legal.css is not loaded here. */
.catalog-subscribe .consent-check__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
  cursor: pointer;
}

.catalog-subscribe .consent-check__label input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--bronze);
}

.catalog-subscribe .btn {
  align-self: flex-start;
}

.catalog-subscribe .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 860px) {
  .catalog-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .catalog-subscribe {
    padding: 18px 16px;
  }

  .catalog-subscribe .btn {
    align-self: stretch;
  }
}