/* AMBER HOPE — оформление HTML-сайта.
   Основной текст редактируется в index.html.
   Фотографии щенков: images/puppies/1.jpg ... 9.jpg.
   Размеры и мобильная версия заданы здесь один раз. */

:root {
  --ah-ink: #432713;
  --ah-muted: #7A6655;
  --ah-amber: #B87936;
  --ah-amber-dark: #8C581F;
  --ah-cream: #FBF7F0;
  --ah-beige: #F0E7DB;
  --ah-border: #DFD2C2;
  --ah-white: #FFFFFF;
  --ah-content: 1152px;
}

.ah {
  --ah-space: 72px;
  --ah-body: 18px;
  --ah-h1: 60px;
  --ah-h2: 40px;
  --ah-h3: 24px;
  --ah-h4: 22px;
  --ah-h5: 20px;
  --ah-h6: 18px;
  --ah-subtitle: 30px;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--ah-space) max(24px, calc((100% - var(--ah-content))/2)) !important;
  display: block !important;
  background: var(--ah-cream) !important;
  color: var(--ah-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--ah-body) !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.ah *, .ah *::before, .ah *::after {
  box-sizing: border-box;
}

.ah [class^="ah-"], .ah [class*=" ah-"] {
  min-width: 0 !important;
}

.ah :is(h1,h2,h3,h4,h5,h6) {
  margin: 0 !important;
  color: var(--ah-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

.ah h1 {
  font: 400 var(--ah-h1)/1.15 Georgia, "Times New Roman", serif !important;
}

.ah h2 {
  font: 400 var(--ah-h2)/1.15 Georgia, "Times New Roman", serif !important;
}

.ah h3 {
  font: 600 var(--ah-h3)/1.3 Arial, Helvetica, sans-serif !important;
}

.ah h4 {
  font: 600 var(--ah-h4)/1.3 Arial, Helvetica, sans-serif !important;
}

.ah h5 {
  font: 600 var(--ah-h5)/1.3 Arial, Helvetica, sans-serif !important;
}

.ah h6 {
  font: 600 var(--ah-h6)/1.3 Arial, Helvetica, sans-serif !important;
}

.ah :is(p,li,blockquote) {
  font: 400 var(--ah-body)/1.6 Arial, Helvetica, sans-serif !important;
  color: var(--ah-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  white-space: normal !important;
}

.ah p {
  margin: 0 !important;
}

.ah p+p {
  margin-top: 1em !important;
}

.ah :is(ul,ol) {
  margin: 0 !important;
  padding-inline-start: 1.4em !important;
}

.ah a {
  color: var(--ah-amber-dark) !important;
  text-decoration: none !important;
}

.ah a:hover {
  color: var(--ah-ink) !important;
  text-decoration: underline !important;
}

.ah a:focus-visible, .ah button:focus-visible, .ah summary:focus-visible {
  outline: 2px solid var(--ah-amber-dark) !important;
  outline-offset: 4px !important;
}

.ah img {
  display: block !important;
  max-width: 100% !important;
}

.ah .ah-eyebrow, .ah .ah-eyebrow p {
  font: 400 14px/1.5 Arial, Helvetica, sans-serif !important;
  color: var(--ah-muted) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.ah .ah-subtitle, .ah .ah-subtitle p {
  font: 400 var(--ah-subtitle)/1.3 Georgia, "Times New Roman", serif !important;
  color: var(--ah-ink) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.ah :is(figcaption,.ah-caption), .ah .ah-caption p {
  font: 400 14px/1.5 Arial, Helvetica, sans-serif !important;
  color: var(--ah-muted) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}


/* Общие контейнеры. Классы могут быть на Div или Flexbox — display определяет CSS. */

.ah :is(.ah-copy,.ah-media,.ah-actions,.ah-card,.ah-card-body,.ah-parent-copy,.ah-review,.ah-step,.ah-item,.ah-faq-list,.ah-topic-list) {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ah .ah-copy {
  gap: 24px !important;
}

.ah .ah-media {
  gap: 12px !important;
}

.ah .ah-section-head {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ah .ah-grid {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ah .ah-grid.ah-grid-two {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 48px !important;
}


/* Кнопки: ah-button на кнопке / ссылке или на её виджете. Вторичная: добавить ah-secondary. */

.ah :is(a,button).ah-button, .ah .ah-button :is(a,button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: var(--ah-amber-dark) !important;
  color: var(--ah-white) !important;
  font: 600 16px/1.3 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
}

.ah .ah-button :is(span,p) {
  font: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.ah :is(a,button).ah-button:hover, .ah .ah-button :is(a,button):hover {
  background: var(--ah-ink) !important;
  color: var(--ah-white) !important;
  text-decoration: none !important;
}

.ah :is(a,button).ah-button.ah-secondary, .ah .ah-button.ah-secondary :is(a,button) {
  background: transparent !important;
  border-color: var(--ah-border) !important;
  color: var(--ah-ink) !important;
}

.ah :is(a,button).ah-button.ah-secondary:hover, .ah .ah-button.ah-secondary :is(a,button):hover {
  background: var(--ah-ink) !important;
  border-color: var(--ah-ink) !important;
  color: var(--ah-white) !important;
}

.ah .ah-actions {
  align-items: flex-start !important;
  gap: 16px !important;
}

.ah .ah-actions>.ah-button:not(a):not(button) {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* 02 Первый экран. Класс ah-hero на общем контейнере; две колонки ah-copy и ah-media. */

.ah.ah-hero {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  align-items: center !important;
  gap: 64px !important;
}

.ah.ah-hero .ah-copy h1 {
  max-width: 500px !important;
}

.ah.ah-hero .ah-media img {
  width: 100% !important;
  height: 580px !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  border-radius: 12px !important;
}


/* 03 Факты: четыре ah-stat внутри ah-stats. */

.ah.ah-stats {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 32px !important;
  padding-block: 32px !important;
  border-top: 1px solid var(--ah-border) !important;
  border-bottom: 1px solid var(--ah-border) !important;
}

.ah .ah-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ah .ah-stat :is(h2,h3,h4) {
  font: 400 22px/1.35 Arial, Helvetica, sans-serif !important;
}

.ah .ah-stat p {
  font-size: 16px !important;
}


/* 04 Щенки. Любое количество карточек; ни имен, ни статусов CSS не добавляет. */

.ah.ah-puppies .ah-card {
  gap: 20px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid var(--ah-border) !important;
}

.ah.ah-puppies .ah-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
}

.ah .ah-card-body {
  gap: 12px !important;
}

.ah .ah-card-body a {
  font-size: 16px !important;
}

.ah .ah-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  padding: 24px !important;
  border-radius: 12px !important;
  background: #EEE4D5 !important;
  color: var(--ah-muted) !important;
  text-align: center !important;
}

.ah .ah-placeholder p {
  text-align: center !important;
}


/* 05 Родители. Две карточки, каждая с фото и текстом; details — раскрывающиеся сведения. */

.ah.ah-parents, .ah.ah-breed, .ah.ah-reviews, .ah.ah-social {
  background: var(--ah-beige) !important;
}

.ah .ah-parent-card {
  display: grid !important;
  grid-template-columns: 40% minmax(0,1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ah .ah-parent-card>.ah-parent-photo {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ah .ah-parent-photo img, .ah img.ah-parent-photo {
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
}

.ah .ah-parent-copy {
  gap: 20px !important;
}

.ah .ah-parent-copy :is(h2,h3) {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.ah .ah-parent-copy .ah-details {
  margin-top: 8px !important;
}

.ah .ah-details {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ah .ah-details summary {
  color: var(--ah-ink) !important;
  font: 400 18px/1.5 Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
}

.ah .ah-details[open]>.ah-answer {
  padding-top: 16px !important;
}


/* 06 Как растут / 09 Переезд: общие ah-item и ah-step в трёх колонках. */

.ah.ah-growing, .ah.ah-process, .ah.ah-faq {
  background: var(--ah-cream) !important;
}

.ah .ah-item, .ah .ah-step {
  gap: 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--ah-border) !important;
}

/* Фотографии трёх историй о жизни помёта. */
.ah.ah-growing .ah-item {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.ah.ah-growing .ah-growing-photo {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.ah .ah-step-number, .ah .ah-step-number p {
  font: 400 32px/1.2 Georgia, "Times New Roman", serif !important;
  color: var(--ah-amber) !important;
  margin: 0 !important;
}

.ah .ah-documents, .ah .ah-documents p {
  font: 400 16px/1.6 Arial, Helvetica, sans-serif !important;
  color: var(--ah-muted) !important;
  margin: 0 !important;
}

.ah .ah-documents {
  margin-top: 32px !important;
}


/* 07 Подойдёт ли баварец / 08 Заводчик: две колонки ah-copy и ah-topic-list / ah-media. */

.ah.ah-breed, .ah.ah-breeder {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 48px !important;
}

.ah .ah-topic-list {
  gap: 0 !important;
}

.ah .ah-topic {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--ah-border) !important;
  background: transparent !important;
}

.ah .ah-topic p, .ah .ah-topic a {
  color: var(--ah-ink) !important;
  font: 400 18px/1.5 Arial, Helvetica, sans-serif !important;
}

.ah.ah-breeder .ah-media img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 12px !important;
}

.ah.ah-breeder .ah-placeholder {
  aspect-ratio: 1.15 / 1 !important;
}


/* 09 Четыре отзыва: фото и имя собаки слева, владелец и цитата справа. */

.ah .ah-review {
  gap: 20px !important;
  padding: 28px !important;
  border-radius: 12px !important;
  background: #EEE4D5 !important;
}

.ah .ah-review img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.ah .ah-review blockquote {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.ah .ah-review .ah-placeholder {
  aspect-ratio: 2 / 1 !important;
}

.ah.ah-reviews .ah-review {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 24px !important;
}
.ah.ah-reviews > .ah-grid {
  align-items: start !important;
}
.ah.ah-reviews .ah-review figure {
  margin: 0;
  min-width: 0;
}
.ah.ah-reviews .ah-review-dog-name {
  margin-top: 12px;
  text-align: center;
  font: 700 14px/1.4 Arial, sans-serif;
  color: var(--ah-ink);
  overflow-wrap: anywhere;
}
.ah.ah-reviews .ah-review-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ah.ah-reviews .ah-review-owner {
  font: 700 20px/1.3 Arial, sans-serif !important;
}
.ah.ah-reviews .ah-review-quote p {
  font: italic 400 18px/1.65 Georgia, "Times New Roman", serif !important;
}
.ah.ah-reviews .ah-review-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font: italic 400 18px/1.65 Georgia, "Times New Roman", serif;
  color: var(--ah-muted);
}
.ah.ah-reviews .ah-review-preview,
.ah.ah-reviews .ah-review blockquote {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2096%2072%27%3E%3Cpath%20fill%3D%27%23432713%27%20fill-opacity%3D%27.12%27%20d%3D%27M40%208C22%208%2010%2022%2010%2042V64H38V38H24C24%2027%2030%2020%2040%2020ZM86%208C68%208%2056%2022%2056%2042V64H84V38H70C70%2027%2076%2020%2086%2020Z%27%2F%3E%3C%2Fsvg%3E");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 64px 48px;
}
.ah.ah-reviews .ah-review-copy:has(.ah-review-details[open]) > .ah-review-preview {
  display: none;
}
.ah.ah-reviews .ah-review-details summary {
  font: 400 14px/1.5 Arial, sans-serif !important;
}
.ah.ah-reviews .ah-review-details[open] > .ah-answer {
  padding-top: 12px !important;
}
@media (max-width: 1024px) {
  .ah.ah-reviews .ah-review {
    grid-template-columns: 110px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 24px !important;
  }
}
@media (max-width: 767px) {
  .ah.ah-reviews .ah-review {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  .ah.ah-reviews .ah-review-owner {
    font-size: 18px !important;
  }
  .ah.ah-reviews .ah-review-preview,
  .ah.ah-reviews .ah-review-quote p {
    font-size: 16px !important;
  }
  .ah.ah-reviews .ah-review-preview,
  .ah.ah-reviews .ah-review blockquote {
    background-size: 48px 36px;
  }
}


/* 11 FAQ: HTML details/summary или Elementor Accordion с теми же семантическими тегами. */

.ah .ah-faq-list {
  gap: 0 !important;
  margin-top: 32px !important;
}

.ah .ah-faq-list details {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ah-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: 100% !important;
}

.ah .ah-faq-list summary {
  padding: 24px 0 !important;
  color: var(--ah-ink) !important;
  font: 400 18px/1.5 Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

.ah .ah-faq-list summary :is(h2,h3,h4,p,span) {
  font: 400 18px/1.5 Arial, Helvetica, sans-serif !important;
  color: var(--ah-ink) !important;
  margin: 0 !important;
}

.ah .ah-faq-list details[open]>.ah-answer {
  padding: 0 0 24px !important;
}

.ah .ah-answer {
  font: 400 var(--ah-body)/1.6 Arial, Helvetica, sans-serif !important;
  color: var(--ah-muted) !important;
}


/* 12 Соцсети: блок перед контактами. Ссылки — обычные a, без фиктивных URL. */

.ah .ah-social-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ah .ah-social-links>a, .ah .ah-social-links>.ah-social-link>a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  border: 1px solid var(--ah-border) !important;
  border-radius: 8px !important;
  color: var(--ah-ink) !important;
  font: 600 16px/1.3 Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
}

.ah .ah-social-links>a:hover, .ah .ah-social-links>.ah-social-link>a:hover {
  background: var(--ah-cream) !important;
}


/* 13 Контакты. Светлый заголовок исправляет низкий контраст исходного скрина. */

.ah.ah-contact {
  background: var(--ah-ink) !important;
  color: var(--ah-cream) !important;
}

.ah.ah-contact :is(h1,h2,h3,h4,h5,h6,p,a) {
  color: var(--ah-cream) !important;
}

.ah.ah-contact .ah-eyebrow, .ah.ah-contact .ah-eyebrow p {
  color: #DDC6A9 !important;
}

.ah.ah-contact .ah-copy {
  max-width: 820px !important;
}

.ah.ah-contact .ah-copy h2 {
  max-width: 600px !important;
}

.ah.ah-contact .ah-phone, .ah.ah-contact .ah-phone a {
  font: 400 32px/1.3 Arial, Helvetica, sans-serif !important;
  color: var(--ah-white) !important;
  text-decoration: none !important;
}

.ah.ah-contact :is(a,button).ah-button, .ah.ah-contact .ah-button :is(a,button) {
  background: var(--ah-amber-dark) !important;
  border-color: var(--ah-amber) !important;
  color: var(--ah-white) !important;
}

.ah.ah-contact :is(a,button).ah-button:hover, .ah.ah-contact .ah-button :is(a,button):hover {
  background: var(--ah-cream) !important;
  color: var(--ah-ink) !important;
}


/* 01 Шапка / 14 Подвал: классы для собственных контейнеров Elementor (не обязательны при Blocksy). */

.ah.ah-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-block: 24px !important;
  border-bottom: 1px solid var(--ah-border) !important;
}

.ah .ah-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ah .ah-brand img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
}

.ah .ah-brand-name, .ah .ah-brand-name p {
  font: 400 28px/1.3 Arial, Helvetica, sans-serif !important;
  letter-spacing: 2px !important;
  color: var(--ah-ink) !important;
}

.ah .ah-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 24px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ah .ah-nav a {
  font: 400 18px/1.4 Arial, Helvetica, sans-serif !important;
  color: var(--ah-ink) !important;
}

.ah.ah-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-block: 28px !important;
}

.ah.ah-footer p, .ah.ah-footer a {
  font: 400 14px/1.5 Arial, Helvetica, sans-serif !important;
  color: var(--ah-muted) !important;
}


/* Адаптация — один раз в CSS, без ручного переключения размеров каждого элемента. */

@media (max-width: 1024px) {

.ah {
  --ah-space: 48px;
  --ah-h1: 46px;
  --ah-h2: 36px;
}

.ah.ah-hero {
  gap: 32px !important;
}

.ah.ah-hero .ah-media img {
  height: 440px !important;
}

.ah .ah-grid {
  gap: 24px !important;
}

.ah .ah-grid.ah-grid-two, .ah.ah-breed, .ah.ah-breeder {
  gap: 32px !important;
}

.ah .ah-parent-card {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

.ah .ah-parent-photo img, .ah img.ah-parent-photo {
  height: 360px !important;
}

}

@media (max-width: 767px) {

.ah {
  --ah-space: 36px;
  --ah-body: 16px;
  --ah-h1: 36px;
  --ah-h2: 30px;
  --ah-h3: 22px;
  --ah-h4: 20px;
  --ah-h5: 18px;
  --ah-h6: 16px;
  --ah-subtitle: 24px;
  padding-inline: 20px !important;
}

.ah.ah-hero, .ah.ah-breed, .ah.ah-breeder, .ah .ah-section-head, .ah .ah-grid, .ah .ah-grid.ah-grid-two {
  grid-template-columns: minmax(0,1fr) !important;
  gap: 28px !important;
}

.ah.ah-hero .ah-media img {
  height: 400px !important;
}

.ah.ah-stats {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 24px !important;
  padding-block: 24px !important;
}

.ah .ah-stat :is(h2,h3,h4) {
  font-size: 20px !important;
}

.ah .ah-stat p {
  font-size: 14px !important;
}

.ah .ah-copy {
  gap: 20px !important;
}

.ah .ah-section-head {
  margin-bottom: 28px !important;
  gap: 16px !important;
}

.ah .ah-parent-card {
  grid-template-columns: 38% minmax(0,1fr) !important;
  gap: 20px !important;
}

.ah .ah-parent-photo img, .ah img.ah-parent-photo {
  height: 260px !important;
}

.ah .ah-parent-copy :is(h2,h3) {
  font-size: 20px !important;
}

.ah.ah-breeder .ah-media img {
  height: auto !important;
}

.ah .ah-review {
  padding: 24px !important;
}

.ah .ah-faq-list summary {
  font-size: 16px !important;
  padding: 20px 0 !important;
}

.ah .ah-faq-list summary :is(h2,h3,h4,p,span) {
  font-size: 16px !important;
}

.ah .ah-actions>.ah-button:not(a):not(button), .ah :is(a,button).ah-button, .ah .ah-button :is(a,button) {
  width: 100% !important;
}

.ah.ah-header {
  flex-wrap: wrap !important;
}

.ah .ah-brand img {
  width: 60px !important;
  height: 60px !important;
}

.ah .ah-brand-name, .ah .ah-brand-name p {
  font-size: 22px !important;
}

.ah .ah-nav {
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

.ah .ah-nav a {
  font-size: 16px !important;
}

.ah.ah-footer {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.ah.ah-contact .ah-phone, .ah.ah-contact .ah-phone a {
  font-size: 26px !important;
}

}

@media (max-width: 420px) {

.ah .ah-parent-card {
  grid-template-columns: minmax(0,1fr) !important;
}

.ah .ah-parent-photo img, .ah img.ah-parent-photo {
  height: 360px !important;
}

}


/* Обычная HTML-страница: доступность и аккуратное отображение фотографий. */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ah-cream); }
img { display: block; }
.ah :is(a, summary):focus-visible { outline: 3px solid var(--ah-amber); outline-offset: 5px; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 12px 20px; background: white; color: #432713; }
.skip-link:focus { top: 20px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Фото галереи и просмотр сохранённых кадров в большом окне. */
.ah.ah-social .ah-social-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.ah.ah-social .ah-social-gallery img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.ah .ah-photo-open {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 12px;
  background: transparent;
  line-height: 0;
  text-decoration: none !important;
  cursor: zoom-in;
}
.ah-editing .ah-photo-open { cursor: pointer; }
body.ah-lightbox-open { overflow: hidden; }
.ah-lightbox {
  box-sizing: border-box;
  width: min(1100px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 52px 8px 16px;
  border: 0;
  border-radius: 12px;
  background: #211a14;
  color: #fbf7f0;
  overflow: auto;
  font: 16px/1.4 Arial, sans-serif;
}
.ah-lightbox::backdrop { background: #17100bee; }
.ah-lightbox button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff44;
  border-radius: 8px;
  background: #ffffff0a;
  color: #fbf7f0;
  font: 32px/1 Arial, sans-serif;
  cursor: pointer;
}
.ah-lightbox button[hidden] { display: none; }
.ah-lightbox button:focus-visible { outline: 2px solid #b87936; outline-offset: 3px; }
.ah-lightbox-close { position: absolute; top: 8px; right: 12px; }
.ah-lightbox-stage { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.ah-lightbox-stage figure { grid-column: 2; min-width: 0; margin: 0; text-align: center; }
.ah-lightbox-stage [data-photo-step="-1"] { grid-column: 1; grid-row: 1; }
.ah-lightbox-stage [data-photo-step="1"] { grid-column: 3; grid-row: 1; }
.ah-lightbox-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 190px); margin: auto; object-fit: contain; }
.ah-lightbox figcaption { margin: 12px 0 0; font: 16px/1.4 Arial, sans-serif; overflow-wrap: anywhere; }
.ah-lightbox-position { margin: 6px 0 0; font-size: 13px; color: #cfbeaa; }
@media (max-width: 767px) {
  .ah.ah-social .ah-social-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ah-lightbox-stage { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 4px; }
  .ah-lightbox-stage button { width: 28px; height: 38px; }
  .ah-lightbox figcaption { font-size: 14px; }
}

/* Ссылки без адреса видны только владельцу в режиме редактирования. */
.ah [data-link].ah-link-empty { display: none !important; }
.ah-link-help { display: none; }
.ah.ah-policy-nav { --ah-content: 900px; padding-top: 32px !important; padding-bottom: 20px !important; }
.ah.ah-policy { --ah-content: 900px; max-width: none !important; padding-top: 24px !important; padding-bottom: 64px !important; }
.ah.ah-policy h1 { font-size: clamp(32px, 4vw, 48px) !important; overflow-wrap: anywhere; }
.ah.ah-policy h2 { font-size: 28px !important; margin-bottom: 16px !important; }
.ah.ah-policy section { margin-top: 36px; }
.ah.ah-policy p { overflow-wrap: anywhere; }
.ah.ah-policy p + p { margin-top: 1em !important; }
.ah.ah-contact .ah-actions { flex-direction: row !important; flex-wrap: wrap !important; }
@media (max-width: 767px) { .ah.ah-contact .ah-actions { flex-direction: column !important; } }

.ah.ah-social .ah-social-invite { margin-top: 32px !important; margin-bottom: 0 !important; font-size: 24px !important; line-height: 1.4 !important; }
.ah.ah-social .ah-social-invite + .ah-social-links { margin-top: 20px !important; }
@media (max-width: 767px) { .ah.ah-social .ah-social-invite { font-size: 22px !important; } }

.ah.ah-social .ah-social-note { margin-top: 16px !important; }
.ah.ah-social .ah-social-note, .ah.ah-social .ah-social-note p { font: 400 14px/1.5 Arial, sans-serif !important; color: var(--ah-muted) !important; }
body:not(.ah-editing) .ah-social-note:has(> p:only-child:empty) { display: none !important; }
@media (max-width: 767px) { .ah.ah-policy h1 { font-size: clamp(22px, 6vw, 28px) !important; } }

/* Пустые подписи к фотографиям доступны только в редакторе. */
body:not(.ah-editing) .ah.ah-growing .ah-item > [data-edit]:is(:empty, :has(> p:only-child:empty)) { display: none !important; }