/* ==========================================================================
   Bory Home — karta produktowa modelu
   Wartości z prototypu (#start karty produktowej).
   ========================================================================== */

/* --- Układ nagłówka karty ------------------------------------------------- */

.bh-model-hero { padding: 28px var(--bh-pad-x) 88px; }
.bh-model-hero__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  /* Rzuty są osobnym polem siatki (nie częścią kolumny galerii), żeby na
     telefonie mogły stanąć między nagłówkiem z ceną a formularzem. Na
     desktopie układ jest ten sam co dotąd: zdjęcia nad rzutami, panel obok. */
  grid-template-areas:
    "gallery panel"
    "plans   panel";
  grid-template-rows: auto 1fr;
  gap: 40px;
  align-items: start;
  max-width: var(--bh-max);
  margin-inline: auto;
}
.bh-model-gallery { grid-area: gallery; min-width: 0; }
.bh-model-hero__plans { grid-area: plans; min-width: 0; }
.bh-model-panel { grid-area: panel; }
/* Pole rzutów istnieje zawsze; puste (model bez rzutów) nie zostawia odstępu. */
.bh-model-hero__plans:empty { display: none; }

/* --- Galeria -------------------------------------------------------------- */

.bh-model-gallery__main {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #EEF1F3;
  cursor: zoom-in;
  margin: 0 0 12px;
}
.bh-model-gallery__main img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.bh-model-gallery__badge {
  position: absolute;
  top: 14px; left: 14px;
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 9px 11px;
  border-radius: var(--bh-pill);
}

.bh-model-gallery__counter {
  position: absolute;
  bottom: 14px; right: 14px;
  font: 600 12px/1 var(--bh-font);
  color: #fff;
  background: rgba(12, 26, 34, .62);
  padding: 9px 12px;
  border-radius: var(--bh-pill);
}

.bh-model-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  border-radius: 50%;
  background: rgba(12, 26, 34, .55);
  color: #fff;
  font: 400 21px/1 var(--bh-font);
  transition: background var(--bh-t-base);
}
.bh-model-gallery__nav:hover { background: var(--bh-ink); }
.bh-model-gallery__nav--prev { left: 14px; }
.bh-model-gallery__nav--next { right: 14px; }

/* Prototyp daje jedną kolumnę na zdjęcie — miniatury zawsze w jednym rzędzie. */
.bh-model-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(var(--bh-thumb-cols, 4), 1fr);
  gap: 10px;
  margin: 0 0 34px;
}
.bh-model-gallery__thumb {
  /* W projekcie proporcja 4:3 dotyczy samego kadru, a ramka dokłada się
     na zewnątrz — stąd content-box zamiast globalnego border-box. */
  box-sizing: content-box;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid var(--bh-border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  opacity: .72;
  background: none;
  transition: border-color .25s, opacity .25s;
}
.bh-model-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bh-model-gallery__thumb[aria-pressed="true"] { border-color: var(--bh-accent); opacity: 1; }

/* --- Rzuty kondygnacji ---------------------------------------------------- */

.bh-model-plans {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 24px;
  overflow: hidden;
}
.bh-model-plans__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--bh-rule);
}
.bh-model-plans__title {
  font: 700 12px/1 var(--bh-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bh-ink);
}
.bh-model-plans__meta { font: 600 12px/1 var(--bh-font); color: var(--bh-text-4); }

.bh-model-plans__tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: var(--bh-surface-alt);
  border-radius: 12px;
  padding: 4px;
  margin: 20px 24px 0;
  width: fit-content;
}
.bh-model-plans__tab {
  font: 700 12px/1 var(--bh-font);
  padding: 11px 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bh-text-2);
  cursor: pointer;
  transition: all .22s;
}
.bh-model-plans__tab[aria-selected="true"] {
  background: var(--bh-surface);
  color: var(--bh-ink);
  box-shadow: 0 2px 6px rgba(12, 26, 34, .08);
}

.bh-model-plans__panel { background: var(--bh-surface); padding: 20px 30px 26px; text-align: center; }
.bh-model-plans__panel img { max-width: 100%; max-height: 520px; height: auto; margin: 0 auto 12px; }
.bh-model-plans__caption { font: 600 12px/1 var(--bh-font); color: var(--bh-text-4); }

.bh-model-plans__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
}
.bh-model-plans__note { font: 400 12.5px/1.5 var(--bh-font); color: var(--bh-text-2); }
.bh-model-plans__link {
  flex: none;
  font: 600 12px/1 var(--bh-font);
  color: var(--bh-text-3);
  border-bottom: 1px solid var(--bh-border-strong);
  padding: 0 0 3px;
  transition: color .2s, border-color .2s;
}
.bh-model-plans__link:hover { color: var(--bh-ink); border-color: var(--bh-accent); }

/* --- Panel sprzedażowy ---------------------------------------------------- */

/* Panel jest wyższy niż typowe okno (ok. 1400 px przy 900 px ekranu), więc
   przyklejony górą chował przycisk wysyłki pod dolną krawędzią, dopóki nie
   skończyła się lewa kolumna. `model.js` mierzy panel i gdy nie mieści się
   w oknie, ustawia `top` tak, by przyklejony był dolną krawędzią — czyli
   z widocznym przyciskiem; gdy się mieści, zostaje 96 px. */
.bh-model-panel { position: sticky; top: var(--bh-panel-top, 96px); }
.bh-model-panel__card {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 26px;
  padding: 28px 26px 26px;
  box-shadow: 0 26px 52px -40px rgba(12, 26, 34, .4);
}
.bh-model-panel__collection {
  font: 600 11px/1 var(--bh-font);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--bh-text-4);
  margin: 0 0 12px;
}
.bh-model-panel__title {
  font: 800 34px/1.05 var(--bh-font);
  letter-spacing: -.032em;
  margin: 0 0 8px;
}
/* W Bory One po tytule nie ma zajawki, więc odstęp przejmuje sam tytuł. */
.bh-model-panel__title--one { margin: 0 0 18px; }
.bh-model-panel__tagline { font: 400 14.5px/1.5 var(--bh-font); color: var(--bh-text-2); margin: 0 0 18px; }

.bh-model-panel__metrics { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 18px; }
.bh-model-panel__metric {
  font: 600 11.5px/1 var(--bh-font);
  color: var(--bh-text-3);
  background: var(--bh-surface-alt);
  padding: 9px 11px;
  border-radius: var(--bh-pill);
}

.bh-model-price { background: var(--bh-accent-bg); border-radius: 18px; padding: 8px; margin: 0 0 18px; }
.bh-model-price__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(255, 255, 255, .72);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 12px;
}
.bh-model-price__tab {
  flex: 1;
  /* Etykiety standardów mają w każdym języku inną długość („Deweloperski",
     „Developer standard"). Zakładka zawija napis na dwa wiersze, ale nie łamie
     go w środku słowa; dopiero gdy same słowa nie mieszczą się w rzędzie,
     przełącznik schodzi do drugiego wiersza (`flex-wrap` wyżej). */
  overflow-wrap: normal;
  text-align: center;
  font: 700 11.5px/1 var(--bh-font);
  padding: 11px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bh-text-2);
  cursor: pointer;
  transition: all .25s;
}
.bh-model-price__tab[aria-selected="true"] { background: var(--bh-ink); color: #fff; }

.bh-model-price__body { padding: 0 10px 10px; }
.bh-model-price__value { font: 800 30px/1.05 var(--bh-font); letter-spacing: -.03em; margin: 0 0 6px; }
.bh-model-price__tag { font: 600 12px/1.3 var(--bh-font); color: var(--bh-text-2); margin: 0 0 10px; }
.bh-model-price__note { font: 400 12.5px/1.55 var(--bh-font); color: var(--bh-text-3); }

.bh-model-panel__included {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--bh-rule);
  margin: 0 0 22px;
}
/* Lista przełącza się z zakładką ceny — grupa standardu ma trzymać ten sam
   odstęp co pojedyncze wiersze wokół niej. `[hidden]` wygrywa (base.css). */
.bh-model-panel__included > [data-bh-price-panel] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bh-model-panel__row {
  display: flex;
  gap: 10px;
  font: 400 13.5px/1.45 var(--bh-font);
  color: var(--bh-text-3);
}
.bh-model-panel__row span { flex: none; }

/* --- Formularz zgłoszeniowy ----------------------------------------------- */

.bh-lead__title { font: 800 19px/1.2 var(--bh-font); letter-spacing: -.024em; margin: 0 0 6px; }
.bh-lead__desc { font: 400 13px/1.55 var(--bh-font); color: var(--bh-text-2); margin: 0 0 18px; }

.bh-lead__fields { display: grid; gap: 13px; }
/* Telefon dostaje odrobinę więcej miejsca niż e-mail: w polu siedzi jeszcze
   flaga z kierunkowym, a przykładowy numer ma się mieścić w całości.
   Adres e-mail zmieści się w węższej kolumnie bez straty. */
.bh-lead__pair { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.bh-lead__label { display: block; }
/* Pole telefonu ma etykietę w osobnym `<label>` obok komponentu (lista krajów
   nie może siedzieć w etykiecie), więc reguła obejmuje oba układy. */
.bh-lead__label > span,
.bh-lead__label > label > span {
  display: block;
  font: 600 11.5px/1 var(--bh-font);
  color: var(--bh-text-4);
  margin: 0 0 7px;
}
.bh-lead__input {
  width: 100%;
  font: 400 14px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-surface-alt);
  border: 1px solid var(--bh-border);
  border-radius: 12px;
  padding: 14px;
  transition: border-color var(--bh-t-base), background var(--bh-t-base);
}
/* Tylko `background-color` — skrót `background` zerowałby daszek listy
   rozwijanej (obrazek, rozmiar, brak powtarzania) i po kliknięciu pola
   ikona kafelkowała się na całej szerokości. */
.bh-lead__input:focus { border-color: var(--bh-accent); background-color: var(--bh-surface); outline: none; }

/* Natywna strzałka listy rozwijanej rysuje się inaczej w każdej przeglądarce
   i odstaje od reszty pól. Zastępujemy ją tym samym daszkiem, co w nawigacji.
   `appearance: none` zdejmuje też natywne wypełnienie, więc dopełnienie
   z prawej musi zrobić miejsce na ikonę. */
.bh-lead__select {
  appearance: none;
  /* Pole tekstowe ma wymuszoną przez przeglądarkę minimalną wysokość treści
     (17,5 px przy foncie 14 px); lista rozwijana po zdjęciu `appearance`
     kurczy się do interlinii, więc wyrównujemy ją tą samą wartością. */
  line-height: 1.25;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B7A84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
/* Dopóki nic nie wybrano, „Wybierz…" jest podpowiedzią, nie wartością. */
.bh-lead__select:has(option[value=""]:checked) { color: var(--bh-text-4); }
.bh-lead__select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230C1A22' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); }
.bh-lead__select option { color: var(--bh-ink); }

.bh-lead__question { font: 600 12px/1 var(--bh-font); color: var(--bh-text-4); margin: 16px 0 10px; }
/* Formularz Bory One oddycha odrobinę szerzej niż w kolekcji Standard. */
.bh-lead--one .bh-lead__desc { margin-bottom: 20px; }
.bh-lead--one .bh-lead__question { margin-top: 18px; }
.bh-lead__options { display: grid; gap: 8px; }
.bh-lead__option {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 13px 15px;
  background: var(--bh-surface);
  border: 1.5px solid var(--bh-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.bh-lead__option:hover { border-color: var(--bh-accent); }
.bh-lead__option[aria-checked="true"] { background: var(--bh-accent-bg); border-color: var(--bh-accent); }
/* Znacznik wyboru jest w projekcie pustym kółkiem — wypełnia się dopiero
   po zaznaczeniu, tak jak zwykły radiobutton. */
.bh-lead__dot {
  box-sizing: content-box;
  width: 18px; height: 18px;
  border: 1.5px solid #CBD5DA;
  border-radius: 50%;
  background: var(--bh-surface);
  flex: none;
  transition: border-color var(--bh-t-base), box-shadow var(--bh-t-base);
}
.bh-lead__option[aria-checked="true"] .bh-lead__dot {
  border-color: var(--bh-accent);
  box-shadow: inset 0 0 0 4px var(--bh-accent);
}
.bh-lead__option-text { flex: 1; min-width: 0; }
.bh-lead__option-title { display: block; font: 700 13px/1.2 var(--bh-font); margin: 0 0 4px; }
.bh-lead__option-desc { display: block; font: 400 11.5px/1.3 var(--bh-font); color: var(--bh-text-4); }

/* Zgoda stoi w ramce jak opcje standardu, nie jako szary drobny druk pod
   polami: w projekcie ginęła (11,5 px, kolor drugorzędny, kratka 18 px) i klienci
   dochodzili do wyszarzonego przycisku, nie widząc, czego brakuje. Ramka
   zmienia się razem ze stanem: żółta po zaznaczeniu, czerwona po odrzuconej
   wysyłce (`aria-invalid` nadaje wtyczka wysyłki ofert). */
.bh-lead__consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 0;
  padding: 13px 15px;
  font: 400 12.5px/1.5 var(--bh-font);
  color: var(--bh-text-3);
  background: var(--bh-surface-alt);
  border: 1.5px solid var(--bh-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.bh-lead__consent:hover { border-color: var(--bh-accent); }
.bh-lead__consent:has(input:checked) { background: var(--bh-accent-bg); border-color: var(--bh-accent); }
.bh-lead__consent:has(input[aria-invalid="true"]) { background: var(--bh-error-bg); border-color: var(--bh-error); }
.bh-lead__consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.bh-lead__consent-mark {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 0;
  border: 1.5px solid var(--bh-text-2);
  border-radius: 6px;
  background: var(--bh-surface);
  transition: background var(--bh-t-base), border-color var(--bh-t-base);
}
.bh-lead__consent input[aria-invalid="true"] + .bh-lead__consent-mark { border-color: var(--bh-error); }
.bh-lead__consent input:checked + .bh-lead__consent-mark {
  background: var(--bh-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1A22' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--bh-accent-strong);
}
.bh-lead__consent input:focus-visible + .bh-lead__consent-mark { outline: 2px solid var(--bh-ink); outline-offset: 2px; }

.bh-lead__submit { width: 100%; margin: 14px 0 0; padding: 18px; }
.bh-lead__hint { font: 400 11.5px/1.4 var(--bh-font); color: var(--bh-error); margin: 8px 0 0; }
/* Pole terminu jest jedynym nieobowiązkowym — mówi to wprost, żeby nikt nie
   szukał „właściwej" odpowiedzi przed wysłaniem. */
.bh-lead__optional { font: 400 11px/1 var(--bh-font); color: var(--bh-text-4); text-transform: none; letter-spacing: 0; }
.bh-lead__optional::before { content: "· "; }
/* Cel przycisków „Odbierz ofertę" z dalszych sekcji — formularz ma stanąć pod
   przyklejonym nagłówkiem, nie za nim. */
.bh-lead { scroll-margin-top: calc(var(--bh-header-h) + 16px); }

/* --- „Co dostajesz" ------------------------------------------------------- */

.bh-promises { gap: 16px; }
.bh-promise {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  padding: 24px 24px 22px;
}
.bh-promise .bh-icon { margin: 0 0 18px; }
.bh-promise__title { font: 800 16px/1.25 var(--bh-font); letter-spacing: -.018em; margin: 0 0 8px; }
.bh-promise__desc { font: 400 13px/1.55 var(--bh-font); color: var(--bh-text-2); }

/* --- Dane techniczne ------------------------------------------------------ */

.bh-specs__tabs {
  display: flex;
  gap: 4px;
  background: var(--bh-surface-alt);
  border-radius: 12px;
  padding: 4px;
  margin: 0 auto 30px;
  width: fit-content;
}
.bh-specs__tab {
  font: 700 12.5px/1 var(--bh-font);
  padding: 12px 22px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--bh-text-2);
  cursor: pointer;
  transition: all .22s;
}
.bh-specs__tab[aria-selected="true"] { background: var(--bh-ink); color: #fff; }

/* Liczba kolumn równa liczbie grup — prototyp rozciąga karty na całą
   szerokość, więc dwie grupy zajmują po połowie, a nie po jednej trzeciej. */
.bh-specs__groups {
  display: grid;
  grid-template-columns: repeat(var(--bh-specs-cols, 3), minmax(0, 1fr));
  gap: 20px;
}
.bh-specs__group {
  background: var(--bh-surface-alt);
  border-radius: 24px;
  padding: 30px 30px 24px;
}
.bh-specs__heading {
  font: 800 14px/1.2 var(--bh-font);
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.bh-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bh-rule);
}
.bh-specs__row dt { font: 400 13px/1.4 var(--bh-font); color: var(--bh-text-2); }
.bh-specs__row dd { margin: 0; font: 600 13px/1.4 var(--bh-font); color: var(--bh-ink); flex: none; }

/* --- Wnętrza -------------------------------------------------------------- */

.bh-interiors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.bh-interior {
  position: relative;
  margin: 0;
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bh-ink);
}
.bh-interior img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--bh-t-slow); }
.bh-interior:hover img { transform: scale(1.03); }
.bh-interior__no {
  position: absolute;
  top: 12px; left: 12px;
  font: 700 10.5px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 6px 8px;
  border-radius: 6px;
}
.bh-interior__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  font: 600 11.5px/1.35 var(--bh-font);
  color: #fff;
  background: linear-gradient(180deg, rgba(12, 26, 34, 0) 0%, rgba(12, 26, 34, .82) 100%);
}

/* --- Lightbox ------------------------------------------------------------- */

.bh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: rgba(12, 26, 34, .94);
  animation: bh-fade .2s ease;
}
.bh-lightbox[hidden] { display: none; }
.bh-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--bh-gutter);
  color: #fff;
  font: 600 13px/1 var(--bh-font);
}
.bh-lightbox__close {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.bh-lightbox__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 var(--bh-gutter);
  min-height: 0;
}
.bh-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.bh-lightbox__nav {
  width: 48px; height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.bh-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.bh-lightbox__thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 18px var(--bh-gutter) 24px;
}
.bh-lightbox__thumb {
  width: 96px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: .6;
}
.bh-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bh-lightbox__thumb[aria-pressed="true"] { border-color: var(--bh-accent); opacity: 1; }

/* --- Breakpointy ---------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Jedna kolumna. Kolejność: zdjęcia, nagłówek z ceną, rzuty, formularz —
     panel i jego karta „znikają" (`display: contents`), a ich dzieci stają
     się polami siatki; każde dostaje kartę z powrotem w mobile.css. */
  .bh-model-hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-template-rows: none;
    gap: 28px;
  }
  .bh-model-gallery,
  .bh-model-hero__plans,
  .bh-model-panel { grid-area: auto; }
  .bh-model-panel { position: static; }
  .bh-model-panel,
  .bh-model-panel__card { display: contents; }
  .bh-model-gallery { order: 1; }
  .bh-model-panel__head { order: 2; }
  .bh-model-hero__plans { order: 3; }
  .bh-model-panel .bh-lead { order: 4; }
  .bh-model-panel__head,
  .bh-model-panel .bh-lead {
    background: var(--bh-surface);
    border: 1px solid var(--bh-border);
    border-radius: 26px;
    padding: 28px 26px 26px;
    box-shadow: 0 26px 52px -40px rgba(12, 26, 34, .4);
  }
  /* Lista „w cenie" kończyła kartę kreską i odstępem pod formularz. */
  .bh-model-panel__included { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .bh-offer-cta { margin-top: 32px; }
  .bh-specs__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-interiors, .bh-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .bh-model-hero { padding-bottom: 56px; }
  .bh-model-panel__title { font-size: 28px; }

  /* Ciaśniej, żeby trzy standardy zmieściły się w jednym rzędzie także na
     320 px. Gdy w którymś języku i tak się nie zmieszczą, przełącznik zejdzie
     do drugiego wiersza — to lepsze niż złamane w środku słowo. */
  .bh-model-price__tab { font-size: 11px; padding-inline: 4px; }

  .bh-model-gallery__thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .bh-lead__pair { grid-template-columns: 1fr; }
  .bh-specs__groups { grid-template-columns: 1fr; }
  .bh-interiors, .bh-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-model-plans__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Standardy wykończeń -------------------------------------------------- */

.bh-scopes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bh-scope {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 28px;
  padding: 32px 30px 30px;
}
/* Wyróżniony standard: żółte tło karty i żółta plakietka z numerem. */
.bh-scope--featured {
  background: var(--bh-accent-bg);
  border-color: var(--bh-accent);
}
.bh-scope__head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.bh-scope__num {
  font: 500 12px/1 var(--bh-font);
  letter-spacing: .09em;
  color: var(--bh-text-4);
  background: var(--bh-surface-alt);
  border-radius: 10px;
  padding: 10px 11px;
}
.bh-scope--featured .bh-scope__num { background: var(--bh-accent); }
.bh-scope__badge {
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 6px 10px;
  border-radius: var(--bh-pill);
}
.bh-scope__title { font: 800 20px/1.2 var(--bh-font); letter-spacing: -.02em; margin: 0 0 10px; }
.bh-scope__desc { font: 400 13.5px/1.6 var(--bh-font); color: var(--bh-text-2); margin: 0 0 18px; }
/* Cytat siada przy dolnej krawędzi karty — karty w rzędzie mają równą
   wysokość, a `margin-top: auto` zbiera całą nadwyżkę miejsca. Sztywny
   margines rozpychałby kartę o najdłuższej liście. */
.bh-scope__quote {
  margin: auto 0 0;
  font: 600 13px/1.5 var(--bh-font);
  color: var(--bh-ink);
}
/* Odstępy zmierzone na prototypie: lista ma własne dopełnienie u dołu
   i margines, a cytat dokłada jeszcze swój. */
.bh-scope .bh-checklist--tight { gap: 10px; padding: 0 0 18px; margin: 0 0 16px; }

@media (max-width: 1000px) { .bh-scopes { grid-template-columns: 1fr; } }

/* --- Formularz: znaczniki zaufania i przypis ------------------------------ */

.bh-lead__trust {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  font: 600 11px/1 var(--bh-font);
  color: var(--bh-text-4);
}
/* Prototyp nie stawia kropek przed znacznikami zaufania — z nimi wiersz
   nie mieści się w kolumnie i łamie się na trzy linie. */
.bh-lead__trust li { display: flex; align-items: center; }
.bh-lead__foot {
  margin: 16px 0 0;
  font: 400 11px/1.5 var(--bh-font);
  color: var(--bh-text-4);
}
/* Tylko w Bory One przypis ma dolny margines. Formularz nie ma dopełnienia,
   więc margines przenika przez niego i powiększa panel sprzedażowy o 16 px —
   dokładnie tak liczy się wysokość panelu w prototypie. */
.bh-lead--one .bh-lead__foot { margin-bottom: 16px; }

/* --- Pas z wezwaniem do formularza ---------------------------------------- */

/* Ciemna belka jak pod „Smart Value": stoi po zakresie standardów i pod
   pytaniami — tam, gdzie klient jest gotów zapytać o ofertę, a formularz
   został 10–20 ekranów wyżej. */
.bh-offer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
  background: var(--bh-ink);
  border-radius: 24px;
  padding: 30px 34px;
  margin: 40px 0 0;
}
.bh-offer-cta__text { font: 400 16.5px/1.6 var(--bh-font); color: #fff; max-width: 60ch; margin: 0; }
.bh-offer-cta__btn { flex: none; padding: 17px 24px; }
.bh-offer-cta__btn span { font-weight: 400; }

/* Przycisk do formularza w sekcji kontaktu na karcie. */
.bh-contact__cta { margin: 22px auto 0; }
.bh-contact__cta span { font-weight: 400; }

/* --- Pasek z ceną i przyciskiem (tylko telefon) --------------------------- */

.bh-model-bar {
  --bh-model-bar-h: 72px;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: var(--bh-model-bar-h);
  padding: 10px var(--bh-pad-x) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--bh-border);
  box-shadow: 0 -14px 34px -24px rgba(12, 26, 34, .35);
  transform: translateY(100%);
  transition: transform .28s ease;
}
.bh-model-bar.is-visible { transform: none; }
.bh-model-bar__price { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bh-model-bar__value { font: 800 19px/1 var(--bh-font); letter-spacing: -.03em; color: var(--bh-ink); }
.bh-model-bar__tag { font: 600 10.5px/1.2 var(--bh-font); color: var(--bh-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-model-bar__cta { flex: none; }
.bh-model-bar__cta span { font-weight: 400; }
/* Pasek jest w HTML-u ukryty; skrypt zdejmuje `hidden`, gdy klient minął cenę
   i nie widzi formularza. Na desktopie (panel przyklejony) nie pokazuje się
   nigdy — `display` zostaje `none` niezależnie od skryptu. */
@media (max-width: 1100px) {
  .bh-model-bar:not([hidden]) { display: flex; }
  /* Dymek asystentki („Masz pytanie?") ucieka nad pasek, żeby nie zasłaniał
     przycisku. Klasa `.bha` należy do wtyczki asystenta. */
  body.bh-has-bar .bha { bottom: calc(var(--bh-model-bar-h, 72px) + env(safe-area-inset-bottom) + 12px); }
}

/* Aktywna zakładka ceny ma w projekcie żółty tekst na granacie. */
.bh-model-price__tab[aria-selected="true"] { color: var(--bh-accent); }
.bh-model-price__tab { color: #5B6B75; }

/* --- Dodatki -------------------------------------------------------------- */

.bh-addons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.bh-addon {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 20px;
  padding: 22px 22px 20px;
  transition: border-color .25s;
}
.bh-addon:hover { border-color: var(--bh-accent); }
.bh-addon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bh-surface-alt);
  color: var(--bh-ink);
  margin: 0 0 16px;
}
.bh-addon__title { font: 700 15px/1.2 var(--bh-font); margin: 0 0 7px; }
.bh-addon__desc { font: 400 12.5px/1.55 var(--bh-font); color: var(--bh-text-2); }

@media (max-width: 1100px) { .bh-addons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .bh-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Kolekcja: karty modeli ----------------------------------------------- */

/* Liczba kolumn odpowiada liczbie modeli w kolekcji: 5 dla Standard, 4 dla
   Bory One. Wartość wstrzykuje szablon. */
/* Kolekcja Standard ma pięć kart z odstępem 16 px, seria Bory One cztery
   z odstępem 18 px — obie wartości wchodzą z szablonu. */
.bh-collection {
  display: grid;
  grid-template-columns: repeat(var(--bh-collection-cols, 5), minmax(0, 1fr));
  gap: var(--bh-collection-gap, 16px);
  margin: 0 0 26px;
}
.bh-collcard {
  display: flex;
  flex-direction: column;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.bh-collcard:hover {
  transform: translateY(-5px);
  border-color: var(--bh-accent);
  box-shadow: var(--bh-shadow-card-hover);
}
.bh-collcard--current { background: var(--bh-ink); border-color: var(--bh-ink); }

.bh-collcard__media { position: relative; aspect-ratio: 4 / 3; background: #EEF1F3; overflow: hidden; }
.bh-collcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bh-collcard__area {
  position: absolute;
  top: 12px; right: 12px;
  font: 800 12.5px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 9px 11px;
  border-radius: 9px;
}
.bh-collcard__here {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12, 26, 34, .72);
  padding: 9px 10px;
  border-radius: var(--bh-pill);
}

.bh-collcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px 22px;
}
.bh-collcard__name {
  font: 800 18.5px/1.15 var(--bh-font);
  letter-spacing: -.024em;
  margin: 0 0 12px;
  color: var(--bh-ink);
}
.bh-collcard--current .bh-collcard__name { color: #fff; }

.bh-collcard__rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.bh-collcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 400 12.5px/1.3 var(--bh-font);
  color: #8FA0AC;
}
.bh-collcard__row span:last-child { font-weight: 600; color: var(--bh-ink); }
.bh-collcard--current .bh-collcard__row span:last-child { color: #fff; }

.bh-collcard__cta {
  display: block;
  text-align: center;
  font: 700 13px/1 var(--bh-font);
  color: var(--bh-ink);
  border: 1px solid var(--bh-border-strong);
  padding: 14px;
  border-radius: var(--bh-pill);
  transition: border-color .25s, background .25s;
}
/* Podświetlenie należy się tylko odnośnikom — karta aktualnie oglądanego
   modelu renderuje się jako <span> i nie jest klikalna. */
a.bh-collcard__cta:hover,
a.bh-collcard__cta:focus-visible { border-color: var(--bh-accent); background: var(--bh-accent); color: var(--bh-ink); }
/* Karta aktualnie oglądanego modelu nie dostaje przycisku — w projekcie jest
   to cichy podpis oddzielony kreską. */
.bh-collcard__cta--current {
  text-align: left;
  border: 0;
  border-top: 1px solid var(--bh-ink-border);
  border-radius: 0;
  background: none;
  padding: 15px 0 0;
  cursor: default;
}

/* --- Kolekcja: wykres metraży --------------------------------------------- */

.bh-areachart {
  background: var(--bh-surface-alt);
  border-radius: 24px;
  padding: 28px 30px 30px;
}
.bh-areachart__head { margin: 0 0 20px; }
.bh-areachart__title { font: 700 15px/1.2 var(--bh-font); letter-spacing: -.015em; }
.bh-areachart__sub { font: 400 12.5px/1.4 var(--bh-font); color: var(--bh-text-4); margin-top: 4px; }

.bh-areachart__rows { display: flex; flex-direction: column; gap: 12px; }
.bh-areachart__row {
  display: grid;
  grid-template-columns: 132px 1fr 64px;
  align-items: center;
  gap: 16px;
}
.bh-areachart__label,
.bh-areachart__value { font: 500 13px/1.3 var(--bh-font); color: var(--bh-text-2); }
.bh-areachart__value { text-align: right; }
.bh-areachart__track { height: 10px; border-radius: var(--bh-pill); background: #EAEEF0; overflow: hidden; }
.bh-areachart__fill { height: 100%; border-radius: var(--bh-pill); background: var(--bh-muted); }

/* Oglądany model wyróżniony żółtym słupkiem. */
.bh-areachart__row--current .bh-areachart__fill { background: var(--bh-accent); }
.bh-areachart__row--current .bh-areachart__label,
.bh-areachart__row--current .bh-areachart__value { color: var(--bh-ink); font-weight: 700; }

@media (max-width: 1100px) { .bh-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .bh-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-areachart__row { grid-template-columns: 96px 1fr 56px; gap: 10px; }
  .bh-areachart { padding: 22px; }
}

/* ==========================================================================
   Dostrojenie do prototypu karty produktowej
   Karta ma własną skalę nagłówków i kilka komponentów różni się od strony
   głównej — te reguły domykają różnice wychwycone w porównaniu.
   ========================================================================== */

/* Nagłówki sekcji na karcie są o stopień mniejsze niż na stronie głównej. */
.single-bh_model .bh-h2 { font-size: 40px; line-height: 1.06; letter-spacing: -.032em; }
.single-bh_model .bh-section-bar .bh-h2 { font-size: 40px; }
/* Sekcja kontaktu jest współdzielona ze stroną główną i zachowuje jej skalę. */
.single-bh_model #kontakt .bh-h2 { font-size: 46px; line-height: 1.05; letter-spacing: -.032em; }
.single-bh_model #kontakt .bh-lead { font-size: 16.5px; line-height: 1.576; }
.single-bh_model #detale .bh-h2 { font-size: 36px; line-height: 1.06; }
.single-bh_model .bh-lead { font-size: 15px; line-height: 1.6; }
.single-bh_model .bh-section-bar .bh-lead { font-size: 15px; }

@media (max-width: 1100px) {
  .single-bh_model .bh-h2,
  .single-bh_model .bh-section-bar .bh-h2,
  .single-bh_model #detale .bh-h2 { font-size: 34px; }
}
@media (max-width: 720px) {
  .single-bh_model .bh-h2,
  .single-bh_model .bh-section-bar .bh-h2,
  .single-bh_model #detale .bh-h2 { font-size: 27px; }
}

/* Zakładki rzutów i danych — nieaktywna ma własny odcień szarości. */
.bh-model-plans__tab,
.bh-specs__tab { color: #7A8992; }
.bh-model-plans__meta { font: 600 12px/1 var(--bh-font); color: var(--bh-text-4); }

/* Zakładki danych technicznych: aktywna jest biała, nie granatowa. */
.bh-specs__tab { font-size: 13px; padding: 13px 18px; border-radius: 10px; }
.bh-specs__tab[aria-selected="true"] {
  background: var(--bh-surface);
  color: var(--bh-ink);
  box-shadow: 0 2px 8px -2px rgba(12, 26, 34, .18);
}

/* Dane techniczne */
.bh-specs__heading { font: 800 20px/1.2 var(--bh-font); letter-spacing: -.022em; }
.bh-specs__row dt,
.bh-specs__row dd { font-size: 13.5px; line-height: 1.4; }

/* „Co dostajesz" */
.bh-promise__title { font: 700 16px/1.2 var(--bh-font); }

/* Wnętrza — podpis pod zdjęciem, karta na białym tle. */
.bh-interior { background: var(--bh-surface); }
.bh-interior__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #EEF1F3; }
.bh-interior__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.bh-interior__no { padding: 8px 9px; border-radius: 7px; }
.bh-interior__caption {
  position: static;
  padding: 16px 18px 18px;
  background: none;
  font: 600 13.5px/1.4 var(--bh-font);
  color: var(--bh-ink);
}

/* Standardy na karcie */
.bh-scope__num { font: 800 13px/1 var(--bh-font); letter-spacing: 0; color: var(--bh-ink); }
.bh-scope__title { font: 800 21px/1.18 var(--bh-font); letter-spacing: -.024em; }
.bh-scope__quote { font-size: 13.5px; }
.bh-scope__badge {
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .09em;
  color: #fff;
  background: var(--bh-ink);
  padding: 8px 10px;
}
.bh-scope .bh-checklist { font-size: 13px; }
.bh-scope .bh-checklist__row { line-height: 1.5; }

/* Karty kolekcji */
.bh-collcard__row { color: var(--bh-text-2); }
.bh-collcard__cta--current { font: 600 12.5px/1 var(--bh-font); color: #8FA0AC; }

/* Formularz */
.bh-lead__title { color: var(--bh-ink); }
.bh-lead__label > span { letter-spacing: .02em; color: var(--bh-text-3); }
.bh-lead__question { font-size: 11.5px; color: var(--bh-text-3); }
.bh-lead__option-title { font-size: 13.5px; color: var(--bh-ink); }
.bh-lead__option-desc { color: var(--bh-text-2); }
.bh-lead__consent a { font-weight: 600; }
.bh-lead__submit { font-size: 15px; }
.bh-lead__submit[disabled] { color: var(--bh-text-4); }
.bh-lead__submit span { font-weight: 400; }
.bh-lead__trust { font-size: 11.5px; line-height: 1; color: var(--bh-text-3); }
.bh-lead__foot { font-size: 11.5px; }

/* Sekcje karty produktowej mają 88 px odstępu pionowego, nie 96 jak strona główna. */
.single-bh_model .bh-section { padding-top: 88px; padding-bottom: 88px; }

/* Wizualizacje wnętrz układają się w trzech kolumnach, nie czterech. */
.bh-interiors { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) { .bh-interiors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .bh-interiors { grid-template-columns: 1fr; } }

/* Sekcja kontaktu jest współdzielona ze stroną główną — zachowuje jej odstępy. */
.single-bh_model #kontakt { padding-top: 96px; padding-bottom: 96px; }

/* Nagłówek sekcji danych technicznych ma zakładki po prawej i węższy odstęp. */
.bh-specs__bar { gap: 32px; margin-bottom: 30px; flex-wrap: wrap; }
.bh-specs__bar .bh-specs__tabs { margin: 0; }

/* --- Dostrojenie odstępów wg prototypu ------------------------------------ */

/* Lead w nagłówkach sekcji karty jest szerszy niż na stronie głównej. */
/* Szerokości nagłówków i leadów są w projekcie dobierane sekcja po sekcji —
   jednostka `ch` liczy się od stopnia pisma elementu, więc te same wartości
   co w prototypie dają ten sam podział na wiersze. */
.single-bh_model .bh-section-bar .bh-section-head .bh-h2 { max-width: 18ch; }
/* Nagłówek danych technicznych jest mniejszy i w projekcie nieograniczony. */
.single-bh_model #detale .bh-section-bar .bh-section-head .bh-h2 { max-width: none; }
.single-bh_model .bh-section-bar > .bh-lead { max-width: 44ch; }
.single-bh_model #wcenie .bh-section-bar > .bh-lead    { max-width: 34ch; }
.single-bh_model #standardy .bh-section-bar > .bh-lead { max-width: 30ch; }
.single-bh_model #dodatki .bh-section-bar > .bh-lead   { max-width: 36ch; }
.single-bh_model #kolekcja .bh-section-bar > .bh-lead  { max-width: 38ch; }

/* Karta standardu */
.bh-scope { border-radius: 24px; padding: 28px 26px 26px; }

/* Wykres metraży: białe tło, nagłówek w jednym wierszu z podtytułem. */
.bh-areachart {
  background: var(--bh-surface);
  border-radius: 24px;
  padding: 28px 30px 26px;
}
.bh-areachart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.bh-areachart__sub { margin-top: 0; }

/* ==========================================================================
   Karta produktowa — kolekcja Bory One
   ========================================================================== */

/* --- Panel: opis pod ceną i pozycja negatywna ----------------------------- */

.bh-model-panel__desc { font: 400 14px/1.6 var(--bh-font); color: var(--bh-text-2); margin: 0 0 18px; }
.bh-model-panel__row--off { color: var(--bh-text-4); }

.bh-lead__badge {
  /* Blok zamiast inline-block: inline-block dokłada nad plakietką odstęp
     wiersza, przez co panel jest o 1,5 px wyższy niż w projekcie. */
  display: block;
  width: fit-content;
  margin: 0 0 10px;
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 7px 9px;
  border-radius: 7px;
}

/* --- Zakładka „Technologia" w karcie lokalu ------------------------------- */

.bh-techgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
}
.bh-tech {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 20px;
  padding: 24px 22px 22px;
}
.bh-tech__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--bh-accent-bg);
  color: var(--bh-ink);
  margin: 0 0 18px;
}
.bh-tech__title { font: 700 15.5px/1.2 var(--bh-font); letter-spacing: -.015em; margin: 0 0 7px; }
.bh-tech__desc  { font: 400 13px/1.5 var(--bh-font); color: var(--bh-text-2); }

/* Panel rzutu Bory One ma własny nagłówek i stopkę wewnątrz zakładki. */
.bh-model-plans__panel .bh-model-plans__head { margin: -20px -30px 0; }
.bh-model-plans__panel .bh-model-plans__foot { margin: 0 -30px -26px; }
/* Odstęp nad rzutem daje dopełnienie panelu — figura go nie dubluje. */
.bh-model-plans__figure { padding: 0; }

/* --- Smart Value ---------------------------------------------------------- */

.bh-smart {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 48px;
  align-items: start;
  margin: 0 0 26px;
}
.bh-smart__intro .bh-eyebrow { display: block; margin: 0 0 16px; }
.bh-smart__title { margin: 0 0 18px; max-width: 16ch; }
.bh-smart__lead  { margin: 0 0 24px; }
.bh-smart__value { border-top: 2px solid var(--bh-accent); padding: 18px 0 0; }
.bh-smart__amount { font: 800 30px/1 var(--bh-font); letter-spacing: -.03em; margin: 0 0 8px; }
.bh-smart__note { font: 400 13.5px/1.55 var(--bh-font); color: var(--bh-text-2); max-width: 34ch; }

.bh-smart__items { display: grid; gap: 14px; }
.bh-smart__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  padding: 24px 24px 22px;
  transition: border-color .25s, transform .25s;
}
.bh-smart__item:hover { border-color: var(--bh-accent); transform: translateY(-3px); }
.bh-smart__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--bh-accent-bg);
  color: var(--bh-ink);
}
/* Kolumna tekstu wypełnia resztę karty — bez tego zwęża się do treści
   i opisy łamią się wcześniej niż w projekcie. */
.bh-smart__body { flex: 1; min-width: 0; }
.bh-smart__head { display: flex; align-items: center; gap: 12px; margin: 0 0 7px; flex-wrap: wrap; }
.bh-smart__name { font: 700 16.5px/1.2 var(--bh-font); letter-spacing: -.018em; }
.bh-smart__badge {
  flex: none;
  font: 700 10.5px/1 var(--bh-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 7px 9px;
  border-radius: 7px;
}
.bh-smart__desc { font: 400 13.5px/1.55 var(--bh-font); color: var(--bh-text-2); }

.bh-smart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  background: var(--bh-ink);
  border-radius: 24px;
  padding: 30px 34px;
  flex-wrap: wrap;
}
.bh-smart__summary { font: 400 16.5px/1.6 var(--bh-font); color: #fff; max-width: 66ch; }
.bh-smart__foot .bh-underlink {
  flex: none;
  font: 700 14px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 17px 24px;
  border-radius: var(--bh-pill);
  border-bottom: 0;
}

@media (max-width: 1000px) {
  .bh-smart { grid-template-columns: 1fr; gap: 28px; }
  .bh-techgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Zakres w prostym języku ---------------------------------------------- */

.bh-scopegroup__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.bh-scopegroup__title { font: 800 24px/1.15 var(--bh-font); letter-spacing: -.026em; }
.bh-scopegroup__sub {
  font: 600 12px/1 var(--bh-font);
  color: var(--bh-text-3);
  background: var(--bh-surface);
  padding: 9px 12px;
  border-radius: var(--bh-pill);
}
.bh-scopegroup__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 44px;
}
.bh-scopegroup:last-child .bh-scopegroup__steps { margin-bottom: 0; }
/* Prototyp konsekwentnie daje drugiej grupie dwie kolumny — karty są tam
   szersze, więc opisy mieszczą się w mniejszej liczbie wierszy. */
.bh-scopegroup--wide .bh-scopegroup__steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bh-scopestep {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  padding: 24px 24px 22px;
}
.bh-scopestep__head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.bh-scopestep__no {
  font: 800 13px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-surface-alt);
  padding: 9px 10px;
  border-radius: 9px;
}
.bh-scopestep__title { font: 700 16px/1.25 var(--bh-font); letter-spacing: -.015em; }
.bh-scopestep__lines { display: flex; flex-direction: column; gap: 9px; }
.bh-scopestep__line {
  display: flex;
  gap: 10px;
  font: 400 13px/1.55 var(--bh-font);
  color: var(--bh-text-2);
}
.bh-scopestep__dot {
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bh-accent);
  margin: 8px 0 0;
}

/* Sekcja zakresu ma jasne tło, żeby białe karty się odcinały. */
#zakres { background: var(--bh-surface-alt); }

@media (max-width: 1000px) { .bh-scopegroup__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .bh-scopegroup__steps { grid-template-columns: 1fr; } }

/* --- Filozofia „One" ------------------------------------------------------ */

.bh-philosophy {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.bh-philosophy__intro .bh-eyebrow { display: block; margin: 0 0 16px; }
.bh-philosophy__title { margin: 0 0 18px; max-width: 18ch; }
.bh-philosophy__lead  { margin: 0 0 24px; }
.bh-philosophy__points { display: flex; flex-direction: column; }

.bh-philpoint {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--bh-border);
}
.bh-philpoint__no {
  font: 800 13px/1 var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-accent);
  padding: 11px 0;
  border-radius: 10px;
  text-align: center;
}
.bh-philpoint__title {
  font: 700 18px/1.25 var(--bh-font);
  letter-spacing: -.018em;
  margin: 0 0 8px;
}
.bh-philpoint__desc { font: 400 13.5px/1.6 var(--bh-font); color: var(--bh-text-2); }

.bh-philbox {
  background: var(--bh-surface-alt);
  border-radius: 20px;
  padding: 22px 24px;
  margin: 24px 0 0;
}
.bh-philbox__title { font: 700 15px/1.25 var(--bh-font); letter-spacing: -.015em; margin: 0 0 8px; }
.bh-philbox__desc  { font: 400 13px/1.55 var(--bh-font); color: var(--bh-text-2); margin: 0 0 16px; }

.bh-philchips {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--bh-border);
}
.bh-philchip__title { display: block; font: 800 24px/1 var(--bh-font); letter-spacing: -.028em; margin: 0 0 6px; }
.bh-philchip__desc  { display: block; font: 400 12.5px/1.4 var(--bh-font); color: var(--bh-text-4); }

@media (max-width: 1000px) {
  .bh-philosophy { grid-template-columns: 1fr; gap: 30px; }
}

/* Podnagłówek wewnątrz grupy danych technicznych (kolekcja Bory One). */
.bh-specs__subheading {
  font: 700 12px/1 var(--bh-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bh-text-4);
  margin: 24px 0 8px;
}
.bh-specs__subheading:first-child { margin-top: 0; }

/* Lista jest elementem `dl` — bez wyzerowania jej marginesu domyślnego
   zbija się z marginesem nagłówka grupy. */
.bh-specs__list { margin: 0; }

/* Główka sekcji „Detale": ciaśniejszy nadtytuł i szersze wypełnienie
   paska zakładek — tak samo w obu kolekcjach. */
.bh-specs__bar .bh-eyebrow { margin-bottom: 14px; }
.bh-specs__bar .bh-specs__tabs { padding: 5px; }

/* Wyróżniony wiersz zakresu. */
.bh-scopestep__line strong { font-weight: 700; color: var(--bh-ink); }

/* --- Dostrojenie karty Bory One wg prototypu ------------------------------ */

/* W Bory One rzuty mają inną budowę niż w kolekcji Standard: pasek zakładek
   stoi samodzielnie nad kartą, a nie w jej wnętrzu. Zasięg `.single-bh_model`
   jest konieczny — inaczej reguły kolekcji Standard wygrywają na swoistości. */
.bh-model-plans--one {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.single-bh_model .bh-model-plans--one .bh-model-plans__tabs {
  justify-content: flex-start;
  gap: 10px;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 22px;
  width: auto;
}
.single-bh_model .bh-model-plans--one .bh-model-plans__tab {
  font-size: 14.5px;
  line-height: 1;
  color: #5B6B75;
  padding: 16px 22px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--bh-surface-alt);
  box-shadow: none;
}
.single-bh_model .bh-model-plans--one .bh-model-plans__tab[aria-selected="true"] {
  color: var(--bh-ink);
  background: var(--bh-accent-bg);
  border-color: var(--bh-accent);
  box-shadow: none;
}
.single-bh_model .bh-model-plans--one .bh-model-plans__panel {
  padding: 0;
  border: 1px solid var(--bh-border);
  border-radius: 24px;
  overflow: hidden;
}
.single-bh_model .bh-model-plans--one .bh-model-plans__panel .bh-model-plans__head { margin: 0; padding: 18px 24px; }
.single-bh_model .bh-model-plans--one .bh-model-plans__panel .bh-model-plans__foot { margin: 0; padding: 16px 24px; }
/* Stopka zakładki technologii siedzi wewnątrz szarego panelu, więc dostaje
   kreskę u góry zamiast wypełnienia po bokach. */
/* Zakładka „Technologia" ma w projekcie własną obudowę: szary panel bez
   ramki, a w środku białe kafle. Panel rzutów jest odwrotnie — biały
   z ramką — i wyśrodkowuje treść, więc oba ustawienia trzeba tu cofnąć.
   Zasięg musi dorównać regule panelu rzutów, inaczej ta wygrywa. */
.single-bh_model .bh-model-plans--one .bh-model-plans__panel--tech {
  background: var(--bh-surface-alt);
  border: 0;
  border-radius: 24px;
  padding: 26px;
  text-align: start;
}
.single-bh_model .bh-model-plans--one .bh-model-plans__panel--tech .bh-model-plans__foot {
  margin: 0;
  padding: 18px 4px 0;
  border-top: 1px solid var(--bh-border);
}
/* Przypis i odnośnik w tej zakładce są o pół stopnia większe niż w stopce
   rzutów — to osobny blok w projekcie, nie ta sama stopka. */
.bh-model-plans__panel--tech .bh-model-plans__note { font-size: 13px; }
.bh-model-plans__panel--tech .bh-model-plans__link { font-size: 13px; }
.single-bh_model .bh-model-plans--one .bh-model-plans__figure { padding: 30px 30px 26px; }
.single-bh_model .bh-model-plans--one .bh-model-plans__figure img { margin: 0 auto; max-height: none; }

.single-bh_model .bh-model-panel--one .bh-model-price__tab { font-size: 12px; }

.bh-specs__subheading { font-size: 11.5px; letter-spacing: .1em; }

.single-bh_model .bh-smart__lead { font-size: 16px; line-height: 1.625; }

.single-bh_model .bh-philosophy__title { font-size: 38px; line-height: 1.06; letter-spacing: -.032em; }
.single-bh_model .bh-philosophy__lead  { font-size: 15.5px; line-height: 1.68; }
.bh-philpoint__desc { font-size: 14px; }
.bh-philbox__title  { font: 700 14px/1.3 var(--bh-font); letter-spacing: 0; }
/* Podlinkowanie w kaflu filozofii jest cieńsze i niżej niż domyślne. */
.bh-philbox .bh-underlink { font-size: 13px; border-bottom-width: 1.5px; padding-bottom: 4px; }

/* Podtytuł grupy w zakresie jest przygaszony, nie granatowy. */
.bh-scopegroup__sub { color: var(--bh-text-3); }

@media (max-width: 1100px) { .single-bh_model .bh-philosophy__title { font-size: 34px; } }
@media (max-width: 720px)  { .single-bh_model .bh-philosophy__title { font-size: 27px; } }

/* Rekomendowany standard w zakresie — plakietka zamiast neutralnego podpisu. */
.bh-scopegroup__sub--accent { color: var(--bh-ink); background: var(--bh-accent); }

/* Zakładki rzutów Bory One mają lekko ujemny tracking. */
.single-bh_model .bh-model-plans--one .bh-model-plans__tab { letter-spacing: -.01em; }

/* --- Dane techniczne: grupy opisowe --------------------------------------- */

.bh-specs__prose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 40px;
  max-width: 1100px;
}
.bh-specs__block-title {
  font: 800 21px/1.2 var(--bh-font);
  letter-spacing: -.024em;
  margin: 0 0 12px;
}
.bh-specs__paragraph {
  font: 400 14.5px/1.7 var(--bh-font);
  color: var(--bh-text-2);
  margin: 0 0 12px;
}
.bh-specs__paragraph:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .bh-specs__prose { grid-template-columns: 1fr; } }

/* Nagłówek sekcji zakresu jest ułożony pionowo, nie dwukolumnowo. */
/* Prototyp podaje 64ch, ale jednostka `ch` liczy się od stopnia pisma
   elementu: tam dziedziczy 16 px, u nas 14,5 px. Wpisujemy wynik w pikselach,
   żeby wiersze łamały się tak samo. */
.bh-scopehead { max-width: 750px; margin: 0 0 40px; }
.bh-scopehead .bh-eyebrow { display: block; margin: 0 0 16px; }
.bh-scopehead .bh-h2 { margin: 0 0 16px; }
.single-bh_model .bh-scopehead .bh-lead { font-size: 15.5px; line-height: 1.65; }

/* Karty danych technicznych w kolekcji Bory One są większe. */

/* --- Pas zdjęć z budowy ---------------------------------------------------- */

/* Pełna szerokość, bez wewnętrznego marginesu — środkowy kadr jest szerszy. */
.bh-photoband {
  display: grid;
  gap: 8px;
  height: 560px;
  background: var(--bh-ink);
}
.bh-photoband--2 { grid-template-columns: 1fr 1fr; }
.bh-photoband--3 { grid-template-columns: 1fr 1.35fr 1fr; }
.bh-photoband__cell { overflow: hidden; }
.bh-photoband__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .bh-photoband { grid-template-columns: 1fr; height: auto; }
  .bh-photoband__cell { height: 260px; }
}

/* ==========================================================================
   Karta produktowa — formularz jako ciemna karta akcji (24 IX 2026)
   ========================================================================== */

/* Formularz stał w tej samej białej karcie co cena, oddzielony od niej
   cienką kreską, z tytułem mniejszym niż cena i nazwa domu — oko nie miało
   powodu, żeby się na nim zatrzymać. Teraz jest granatową kartą w dolnej
   części panelu, w tym samym języku co belki „Odbierz ofertę" z dalszych
   sekcji: białe pola, żółty przycisk. Na telefonie (≤1100 px, panel
   rozpada się na karty) to osobna granatowa karta między rzutem a resztą
   strony. Zmieniają się tylko kolory, odstępy i układ opcji — pola,
   atrybuty i skrypty (`model.js`, wtyczka wysyłki) zostają bez zmian. */
.bh-model-panel .bh-lead {
  --bh-lead-line: rgba(255, 255, 255, .14);
  --bh-lead-fill: rgba(255, 255, 255, .05);
  --bh-lead-error: #FF9B87;
  margin: 0 -12px -12px;
  padding: 24px 20px 20px;
  color: #fff;
  background: var(--bh-ink);
  border-radius: 22px;
}
/* Kreska nad formularzem była jedynym separatorem — teraz robi to kolor. */
.bh-model-panel__card .bh-model-panel__included { border-bottom: 0; padding-bottom: 0; margin-bottom: 24px; }

/* Nagłówek: tytuł i opis z lewej, miniatura oferty z prawej. */
.bh-lead__head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.bh-lead__intro { flex: 1; min-width: 0; }
.bh-model-panel .bh-lead__title { font-size: 24px; line-height: 1.12; color: #fff; margin: 0 0 8px; }
.bh-model-panel .bh-lead__desc { font-size: 13.5px; color: var(--bh-on-dark-lead); margin: 0; }

/* Dwie kartki oferty: tylna przesunięta, przednia ze zdjęciem domu i trzema
   wierszami „tekstu". Czysta ozdoba (aria-hidden w szablonie). */
.bh-lead__doc { position: relative; flex: none; width: 70px; height: 90px; margin: 0 6px 0 0; }
.bh-lead__doc::before,
.bh-lead__doc-page {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55);
}
.bh-lead__doc::before { content: ""; background: #DCE3E7; transform: rotate(-7deg) translate(-7px, 3px); }
.bh-lead__doc-page {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 5px 0;
  transform: rotate(4deg);
}
.bh-lead__doc-page img {
  display: block;
  width: 100%;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 2px;
}
.bh-lead__doc-line { display: block; height: 4px; width: 88%; border-radius: 2px; background: #E4E9EB; }
.bh-lead__doc-line--title { width: 62%; height: 6px; background: var(--bh-ink); }
.bh-lead__doc-line--short { width: 54%; }

/* Etykiety i pola. Pola są białe — na granacie od razu widać, gdzie pisać.
   Telefon i e-mail stoją jeden pod drugim także na desktopie: w węższej
   karcie para potrzebowała 365 px z 365 dostępnych (numer z przełącznikiem
   kraju 199, adres 154), więc przy innym renderowaniu pisma ucinała podpowiedź.
   Jedna kolumna to zresztą układ, który wypełnia się najszybciej. */
.bh-model-panel .bh-lead__pair { grid-template-columns: 1fr; gap: inherit; }
.bh-model-panel .bh-lead__label > span,
.bh-model-panel .bh-lead__label > label > span,
.bh-model-panel .bh-lead__question { color: var(--bh-on-dark-lead); }
.bh-model-panel .bh-lead__optional { color: var(--bh-on-dark-2); }
.bh-model-panel .bh-lead__input { background-color: var(--bh-surface); border-color: transparent; }
.bh-model-panel .bh-lead__input:focus { border-color: var(--bh-accent-strong); box-shadow: 0 0 0 3px rgba(255, 239, 63, .38); }
/* Błędne pole: wtyczka rysuje ciemnoczerwoną obwódkę (styl inline), która na
   granacie znika — dokładamy jaśniejszą poświatę na zewnątrz pola. */
.bh-model-panel .bh-lead__input[aria-invalid="true"] { box-shadow: 0 0 0 3px rgba(255, 155, 135, .55); }

/* Standard: dwie kolumny zamiast czterech wysokich kafli jeden pod drugim —
   formularz krótszy o ok. 130 px. Nieparzysta ostatnia opcja („Jeszcze nie
   wiem" w Bory One) zajmuje cały wiersz. `:of-type` liczy tylko przyciski,
   ukryte pole z wartością na końcu listy się nie wlicza. */
.bh-model-panel .bh-lead__question { margin: 16px 0 9px; }
.bh-model-panel .bh-lead__options { grid-template-columns: repeat(2, minmax(0, 1fr)); container-type: inline-size; }
.bh-model-panel .bh-lead__option:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.bh-model-panel .bh-lead__option {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bh-lead-fill);
  border-color: var(--bh-lead-line);
}
.bh-model-panel .bh-lead__option:hover { border-color: rgba(255, 239, 63, .7); }
.bh-model-panel .bh-lead__option[aria-checked="true"] { background: rgba(255, 239, 63, .12); border-color: var(--bh-accent); }
.bh-model-panel .bh-lead__dot {
  width: 14px; height: 14px;
  margin-top: 1px;
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
}
.bh-model-panel .bh-lead__option[aria-checked="true"] .bh-lead__dot { box-shadow: inset 0 0 0 3.5px var(--bh-ink), inset 0 0 0 8px var(--bh-accent); }
.bh-model-panel .bh-lead__option-title { color: #fff; }
.bh-model-panel .bh-lead__option-desc { color: var(--bh-on-dark); }
/* Poniżej ok. 390 px ekranu kafel ma na tekst 90 px, a „Deweloperski"
   potrzebuje 92 — łamało się w środku słowa. Kropka przechodzi wtedy nad
   tytuł i tekst dostaje całą szerokość kafla. */
@container (max-width: 310px) {
  .bh-model-panel .bh-lead__option { flex-direction: column; gap: 7px; }
  .bh-model-panel .bh-lead__option-text { width: 100%; }
}

/* Zgoda: ta sama ramka co opcje, stany żółty (zaznaczona) i czerwony
   (odrzucona wysyłka) w wersji na ciemne tło. */
.bh-model-panel .bh-lead__consent {
  margin-top: 14px;
  color: var(--bh-on-dark-lead);
  background: var(--bh-lead-fill);
  border-color: var(--bh-lead-line);
}
.bh-model-panel .bh-lead__consent:hover { border-color: rgba(255, 239, 63, .7); }
.bh-model-panel .bh-lead__consent:has(input:checked) { background: rgba(255, 239, 63, .12); border-color: var(--bh-accent); }
.bh-model-panel .bh-lead__consent:has(input[aria-invalid="true"]) { background: rgba(180, 68, 47, .24); border-color: var(--bh-lead-error); }
.bh-model-panel .bh-lead__consent-mark { background: transparent; border-color: rgba(255, 255, 255, .55); }
.bh-model-panel .bh-lead__consent input:focus-visible + .bh-lead__consent-mark { outline-color: var(--bh-accent); }
.bh-model-panel .bh-lead__hint { color: var(--bh-lead-error); font-size: 12.5px; }
.bh-model-panel .bh-lead__hint[data-bho-state="info"] { color: var(--bh-on-dark-lead); }

/* Przycisk: większy i z żółtą poświatą — jedyny jasny, pełny kształt karty. */
.bh-model-panel .bh-lead__submit {
  margin-top: 14px;
  padding: 19px 18px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 18px 34px -16px rgba(255, 239, 63, .6);
  transition: transform var(--bh-t-fast), box-shadow var(--bh-t-fast), filter var(--bh-t-fast);
}
.bh-model-panel .bh-lead__submit:hover { transform: translateY(-1px); box-shadow: 0 22px 40px -16px rgba(255, 239, 63, .75); }
.bh-model-panel .bh-lead__submit span { transition: transform var(--bh-t-fast); }
.bh-model-panel .bh-lead__submit:hover span { transform: translateX(3px); }

/* Znaczniki zaufania: trzy równe kolumny z ikoną zamiast wiersza, który
   łamał się w przypadkowym miejscu. */
.bh-model-panel .bh-lead__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font: 600 11.5px/1.35 var(--bh-font);
  color: var(--bh-on-dark-lead);
  text-align: center;
}
.bh-model-panel .bh-lead__trust li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bh-model-panel .bh-lead__trust svg {
  box-sizing: content-box;
  padding: 8px;
  border-radius: 50%;
  color: var(--bh-accent);
  background: rgba(255, 239, 63, .1);
}
.bh-model-panel .bh-lead__foot { margin: 14px 0 0; color: var(--bh-on-dark-2); }
.bh-model-panel .bh-lead--one .bh-lead__desc,
.bh-model-panel .bh-lead--one .bh-lead__foot { margin-bottom: 0; }

@media (max-width: 1100px) {
  /* Osobna karta w kolumnie telefonu/tabletu — bez wysunięcia poza panel. */
  .bh-model-panel .bh-lead {
    margin: 0;
    padding: 28px 26px 26px;
    border: 0;
    border-radius: 26px;
    background: var(--bh-ink);
    box-shadow: 0 30px 60px -38px rgba(12, 26, 34, .8);
  }
}

@media (max-width: 640px) {
  /* Mniejsza miniatura, żeby tytuł zmieścił się w jednym wierszu od 360 px. */
  .bh-lead__head { gap: 12px; margin-bottom: 18px; }
  .bh-model-panel .bh-lead__title { font-size: 22px; }
  .bh-model-panel .bh-lead__desc { font-size: 13.5px; line-height: 1.5; }
  .bh-lead__doc { width: 54px; height: 70px; margin-right: 4px; }
  .bh-lead__doc-page { gap: 4px; padding: 4px 4px 0; }
  .bh-lead__doc-page img { height: 30px; }
  .bh-lead__doc-line { height: 3px; }
  .bh-lead__doc-line--title { height: 5px; }
  .bh-model-panel .bh-lead__option { padding: 10px; gap: 8px; }
  .bh-model-panel .bh-lead__trust { gap: 6px; margin-top: 16px; }
  .bh-model-panel .bh-lead__trust li { gap: 6px; }
  .bh-model-panel .bh-lead__trust svg { width: 16px; height: 16px; padding: 7px; }
}