/* ===========================================================================
   houseShop - the parts the presentation site never needed: a search bar,
   result cards, the auction panel and the account screens.

   Everything below rests on the tokens of tokens.css, so the shop looks like
   the same house as the offer pages: deep neutral ground, brass accent used
   sparingly, serif for names and sans for data.
   =========================================================================== */

/* ------------------------------------------------------------------ layout */

.hs-narrow { max-width: 46rem; }

.hs-h1 {
  font-family: var(--f-tytul);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.1;
  margin-top: 0.35rem;
}

.hs-section-head,
.hs-results-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.hs-split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  /* minmax(0, ...): a bare 1fr grows to its longest unbreakable word, and an
     e-mail address in the side card is longer than a 320 px screen. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .hs-split { grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); align-items: start; }
  .hs-split__side { position: sticky; top: 6rem; display: grid; gap: 1.25rem; }
}

.hs-tables {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 55rem) {
  .hs-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.hs-prose p { color: var(--atrament-2); margin-bottom: 1rem; max-width: 62ch; }
.hs-prose h2 { font-family: var(--f-tytul); font-weight: 400; margin: 2rem 0 0.5rem; }
.hs-prose code { font-size: 0.9em; color: var(--mosiadz-jasny); }

/* -------------------------------------------------------------------- hero */

.hs-hero {
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198, 160, 99, 0.10), transparent 60%),
    var(--tlo);
}

.hs-hero__title {
  font-family: var(--f-tytul);
  font-weight: 300;
  font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem);
  line-height: 1.05;
  margin: 0.5rem 0 1rem;
  max-width: 22ch;
}

.hs-hero__lead { color: var(--atrament-2); font-size: var(--t-md); }

/* -------------------------------------------------------------- search bar */

.hs-search {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--tlo-3);
  border: 1px solid var(--linia);
  border-radius: 4px;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.hs-searchbar-band {
  /* clears the sticky header, which floats above the page */
  padding: clamp(5rem, 6vw, 6.5rem) 0 0;
  background: var(--tlo-2);
  border-bottom: 1px solid var(--linia-slaba);
}

.hs-searchbar-band .hs-search { margin-top: 0; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.hs-search__row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .hs-search__row {
    grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(12rem, 2.4fr) auto;
    align-items: end;
  }
  .hs-search__row--numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 75rem) {
  .hs-search__row--numbers { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.hs-search__go { white-space: nowrap; }

/* ------------------------------------------------------------------ fields */

.hs-field { display: grid; gap: 0.35rem; min-width: 0; }

.hs-field__label {
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atrament-3);
}

.hs-field input,
.hs-field select,
.hs-field textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--tlo);
  color: var(--atrament);
  border: 1px solid var(--linia-mocna);
  border-radius: 3px;
  font-size: var(--t-sm);
}

.hs-field textarea { resize: vertical; }

.hs-field input:focus-visible,
.hs-field select:focus-visible,
.hs-field textarea:focus-visible {
  outline: 2px solid var(--mosiadz);
  outline-offset: 1px;
}

.hs-field--inline { grid-template-columns: auto auto; align-items: center; gap: 0.5rem; }
.hs-field--wide { grid-column: 1 / -1; }

@media (min-width: 48rem) {
  .hs-field--wide { grid-column: auto; }
  .hs-form .hs-field--wide { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------- cards */

.hs-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.hs-card {
  display: flex;
  flex-direction: column;
  background: var(--tlo-3);
  border: 1px solid var(--linia-slaba);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}

.hs-card:hover { border-color: var(--linia-mocna); transform: translateY(-2px); }

.hs-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hs-card__media img { width: 100%; height: 100%; object-fit: cover; }

.hs-card__body { display: grid; gap: 0.6rem; padding: 1.1rem 1.2rem 1.3rem; }

.hs-card__title {
  font-family: var(--f-tytul);
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: 1.15;
}

.hs-card__title a { color: inherit; text-decoration: none; }
.hs-card__title a:hover { color: var(--mosiadz-jasny); }

.hs-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
.hs-card__price small { color: var(--atrament-3); font-size: var(--t-maly); }

.hs-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.5rem 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linia-slaba);
}

.hs-card__facts dt {
  font-size: var(--t-mikro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--atrament-4);
}

.hs-card__facts dd { font-size: var(--t-sm); color: var(--atrament); }

.hs-card__actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }

.hs-watch {
  font-size: var(--t-maly);
  color: var(--atrament-3);
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
}

.hs-watch:hover { color: var(--mosiadz-jasny); border-bottom-color: var(--mosiadz); }
.hs-watch--on { color: var(--mosiadz); }

/* ------------------------------------------------------------------- chips */

.hs-chip {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atrament-2);
  background: var(--tlo-krycie);
  border: 1px solid var(--linia-mocna);
  border-radius: 999px;
}

.hs-card__media .hs-chip { position: absolute; top: 0.8rem; left: 0.8rem; }

.hs-chip--live { color: #0A0A0B; background: var(--mosiadz); border-color: var(--mosiadz); }
.hs-chip--done { color: var(--atrament-4); }

/* ----------------------------------------------------------------- auction */

.hs-auction {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1.5rem;
  background: var(--tlo-3);
  border: 1px solid var(--linia);
  border-radius: 4px;
}

.hs-auction__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.hs-auction__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linia-slaba);
}

.hs-auction__price {
  font-family: var(--f-tytul);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  color: var(--mosiadz-jasny);
  line-height: 1.1;
}

.hs-auction__clock {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  color: var(--atrament);
}

.hs-auction__meta { display: grid; gap: 0.55rem; }
.hs-auction__meta > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.hs-auction__meta dt { color: var(--atrament-3); }
.hs-auction__meta dd { color: var(--atrament); text-align: right; }

.hs-auction__note {
  font-size: var(--t-maly);
  color: var(--atrament-3);
  padding: 0.5rem 0.7rem;
  background: var(--mosiadz-mgla);
  border-left: 2px solid var(--mosiadz);
}

.hs-auction__lead {
  font-size: var(--t-sm);
  color: var(--mosiadz-jasny);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--mosiadz-ciemny);
  border-radius: 3px;
}

.hs-bid { display: grid; gap: 0.75rem; }
.hs-bid__hint { font-size: var(--t-maly); }

.hs-rules summary { cursor: pointer; font-size: var(--t-maly); color: var(--atrament-3); }
.hs-rules ul { margin-top: 0.6rem; display: grid; gap: 0.4rem; padding-left: 1rem; }
.hs-rules li { font-size: var(--t-maly); color: var(--atrament-3); list-style: disc; }

.hs-history ol { margin-top: 0.6rem; display: grid; gap: 0.4rem; }

.hs-history li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-size: var(--t-maly);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linia-slaba);
}

.hs-history li > span:first-child { color: var(--atrament); font-variant-numeric: tabular-nums; }
.hs-history li time { margin-left: auto; }
.hs-history--mine > span:first-child { color: var(--mosiadz-jasny); }

/* ------------------------------------------------------------ auction list */

.hs-auction-list { display: grid; gap: 1.25rem; margin-top: 2rem; }

.hs-auction-row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  padding: 1rem;
  background: var(--tlo-3);
  border: 1px solid var(--linia-slaba);
  border-radius: 4px;
}

@media (min-width: 55rem) {
  .hs-auction-row { grid-template-columns: 16rem minmax(0, 1fr) 15rem; align-items: center; }
}

.hs-auction-row__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.hs-auction-row__media img { width: 100%; height: 100%; object-fit: cover; }
.hs-auction-row__body h2 { font-family: var(--f-tytul); font-weight: 400; font-size: var(--t-lg); }
.hs-auction-row__body h2 a { color: inherit; text-decoration: none; }
.hs-auction-row__body h2 a:hover { color: var(--mosiadz-jasny); }
.hs-auction-row__figures { display: grid; gap: 0.35rem; }

/* ----------------------------------------------------------------- gallery */

.hs-gallery {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-top: 1.5rem;
}

.hs-gallery__tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.hs-gallery__tile figcaption { margin-top: 0.5rem; font-size: var(--t-maly); }

/* -------------------------------------------------------------------- film */

/* As wide as the film can be while the whole frame still fits the window
   under the header and the price bar (13rem covers both, with air): the jump
   from the hero lands on a film that needs no more scrolling. On a laptop that
   is narrower than the page, so the frame stands centred. A fixed allowance,
   not the measured bars: the header shrinks as the page scrolls, and a frame
   following it would change size under a playing film. --film-ar comes from
   the first film's width and height. */
.hs-film-blok {
  --film-h: calc(100svh - 13rem);
  width: min(100%, max(18rem, calc(var(--film-h) * var(--film-ar, 16 / 9))));
  margin-inline: auto;
}

.hs-film { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.hs-film__frame { margin: 0; }
.hs-film__stage { position: relative; }

/* width/height attributes carry the film's own ratio; a portrait film is held
   to the screen height instead of growing past it. */
.hs-film__stage video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 85vh;
  background: #000;
  border: 1px solid var(--linia-slaba);
  border-radius: 3px;
}

/* The brass play mark of the walkthrough, over the poster. It exists only with
   JavaScript; without it the native controls are the whole player. */
.hs-film__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-4);
  padding: 0;
  border: 0;
  border-radius: 3px;
  /* A pool of shade behind the mark: a poster can be a white wall in daylight. */
  background:
    radial-gradient(closest-side, rgba(10,10,11,.5), rgba(10,10,11,0)) center / min(34rem, 80%) min(18rem, 60%) no-repeat,
    linear-gradient(to top, rgba(10,10,11,.6), rgba(10,10,11,.08) 65%);
  color: var(--atrament);
  font: inherit;
  text-shadow: 0 1px 10px rgba(10,10,11,.55);
  cursor: pointer;
}

.hs-film__start[hidden] { display: none; }
.hs-film__start:focus-visible { outline: 1px solid var(--mosiadz); outline-offset: -6px; }
.hs-film__start:hover .zwiedzanie__kolo,
.hs-film__start:focus-visible .zwiedzanie__kolo { background: var(--mosiadz-mgla); transform: scale(1.06); }

.hs-film__frame figcaption { margin-top: 0.75rem; font-size: var(--t-maly); }

@media (max-width: 40rem) {
  .hs-film__start .zwiedzanie__kolo { width: 64px; height: 64px; }
}

/* "Watch the film" beside the price in the hero: the player's brass mark,
   small, on the same dark plate as the menu button - the hero photograph can
   be grass and a white wall right there. On a wide screen it closes the row
   on the right. */
.hs-film-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: 0.3rem 1.1rem 0.3rem 0.3rem;
  border: 1px solid rgba(239, 235, 227, 0.42);
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(10px);
  color: var(--atrament);
  text-decoration: none;
  transition: border-color var(--d-2) var(--e-soft);
}

.hs-film-cta .etykieta { color: var(--atrament); }
.hs-film-cta:hover,
.hs-film-cta:focus-visible { border-color: var(--mosiadz); }

.hs-film-cta .zwiedzanie__kolo { width: 40px; height: 40px; }

.hs-film-cta .zwiedzanie__kolo::after {
  margin-inline-start: 3px;
  border-block-width: 6px;
  border-inline-start-width: 10px;
}

.hs-film-cta:hover .zwiedzanie__kolo,
.hs-film-cta:focus-visible .zwiedzanie__kolo { background: var(--mosiadz-mgla); transform: scale(1.06); }

@media (width >= 48rem) {
  .hs-film-cta { margin-inline-start: auto; }
}

/* --------------------------------------------------------------------- map */

.hs-map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.5rem;
  background: var(--tlo-3);
  border: 1px solid var(--linia-slaba);
  border-radius: 4px;
}

/* ------------------------------------------------------------------- forms */

.hs-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: end;
}

.hs-form--stack { grid-template-columns: 1fr; max-width: 26rem; }
.hs-form button { justify-self: start; }

.hs-flash {
  padding: 0.7rem 1rem;
  margin: 1rem 0;
  font-size: var(--t-sm);
  border-left: 2px solid var(--mosiadz);
  background: var(--mosiadz-mgla);
  color: var(--atrament);
}

.hs-flash--bad { border-left-color: #B4553F; background: rgba(180, 85, 63, 0.12); }

/* ------------------------------------------------------------------ tables */

.hs-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }

.hs-table td {
  padding: 0.8rem 0.6rem;
  border-bottom: 1px solid var(--linia-slaba);
  font-size: var(--t-sm);
  vertical-align: top;
}

.hs-table td:first-child { display: grid; gap: 0.2rem; }
.hs-table a { color: var(--atrament); }
.hs-table a:hover { color: var(--mosiadz-jasny); }

.hs-notifications { display: grid; gap: 0.6rem; margin-top: 1.25rem; }

.hs-notifications li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linia-slaba);
  font-size: var(--t-sm);
  color: var(--atrament-2);
}

.hs-notifications li time { margin-left: auto; }
.hs-notifications--new { color: var(--atrament); }
.hs-notifications--new::before { content: "•"; color: var(--mosiadz); }

/* ------------------------------------------------------------------- steps */

.hs-steps__list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: 2rem;
}

.hs-steps__list--stack { grid-template-columns: 1fr; }
.hs-steps__list h2,
.hs-steps__list h3 { font-family: var(--f-tytul); font-weight: 400; font-size: var(--t-lg); margin: 0.5rem 0; }

/* ------------------------------------------------------------- side cards */

.hs-sidecard {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem 1.35rem;
  background: var(--tlo-3);
  border: 1px solid var(--linia-slaba);
  border-radius: 4px;
}

.hs-sidecard .btn { justify-self: start; margin-top: 0.6rem; }
.hs-agent__name { font-family: var(--f-tytul); font-size: var(--t-lg); }

/* ------------------------------------------------------------------ pager */

.hs-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* -------------------------------------------------------- header & footer */

.hs-langs { display: inline-flex; gap: 0.4rem; margin: 0 0.5rem; }

.hs-langs a {
  font-size: var(--t-mikro);
  letter-spacing: 0.08em;
  color: var(--atrament-4);
  padding: 0.1rem 0.25rem;
}

.hs-langs a:hover { color: var(--atrament-2); }
.hs-langs__on { color: var(--mosiadz); border-bottom: 1px solid var(--mosiadz); }

.stopka { border-top: 1px solid var(--linia); margin-top: clamp(3rem, 8vw, 6rem); padding: 3rem 0 1.5rem; }

.hs-footer {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.hs-footer__brand { font-family: var(--f-tytul); letter-spacing: 0.12em; }
.hs-footer__links { display: grid; gap: 0.4rem; align-content: start; }
.hs-footer__contact { display: grid; gap: 0.4rem; align-content: start; }
.hs-footer a { color: var(--atrament-3); text-decoration: none; font-size: var(--t-sm); }
.hs-footer a:hover { color: var(--mosiadz-jasny); }
.hs-footer__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linia-slaba); }

/* --------------------------------------------------------------- sortings */

.hs-sort { display: flex; align-items: end; gap: 1rem; }

/* ===========================================================================
   FRONT PAGE — the presentation index, now driven by live data.
   The layout classes (.hero, .manifest, .oferta-karta, .zwiedzanie) come from
   style.css; what follows is only what the shop adds on top of them.
   =========================================================================== */

/* The search panel lives inside the photograph, under the headline. */
.hero .hs-search {
  max-width: 62rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: color-mix(in srgb, var(--tlo-3) 88%, transparent);
  backdrop-filter: blur(6px);
  border-color: var(--linia-mocna);
}

@supports not (backdrop-filter: blur(6px)) {
  .hero .hs-search { background: var(--tlo-3); }
}

/* Room for the search panel: the hero no longer needs a full screen of photo. */
.hero:has(.hs-search) { min-height: min(100svh, 54rem); }
.hero:has(.hs-search) .hero__tytul { max-width: 20ch; }

@media (max-width: 48rem) {
  .hero:has(.hs-search) { min-height: auto; padding-block-end: var(--s-8); }
  .hero .hs-search { backdrop-filter: none; background: var(--tlo-3); }

  /* On a phone the opening screen keeps the three fields people actually start
     with; price, area, rooms and floor wait on the results page, where the same
     bar shows them in full. */
  .hero .hs-search__row--numbers { display: none; }
}

/* Price line inside a portfolio card: figure, then the live auction detail. */
.hs-karta__cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-block-start: var(--s-5);
}

.hs-karta__cena .cena { font-size: var(--t-lg); }
.hs-karta__cena small { font-size: var(--t-maly); }

/* Auction badge over the card photograph. */
.oferta-karta__media .hs-chip {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  z-index: 2;
}

.oferta-karta__media picture { display: contents; }
.oferta-karta__media img { width: 100%; height: 100%; object-fit: cover; }

/* The walkthrough preview tile carries a plain <img>, not a <picture>. */
.zwiedzanie__podglad img { width: 100%; height: 100%; object-fit: cover; }

/* Advisor portrait on the front page: the shop has no LQIP to paint under it. */
.agent__portret--foto img { width: 100%; height: 100%; object-fit: cover; }

/* Section headers on the front page mix the presentation eyebrow with a CTA. */
.sekcja > .powloka > .hs-section-head { align-items: end; }
.sekcja > .powloka > .hs-section-head .btn { white-space: nowrap; }

/* The scroll cue sits bottom-right, exactly where the search panel now ends. */
.hero:has(.hs-search) .hero__zjazd { display: none; }

/* Narrow number fields in the search bar (rooms, floor). */
.hs-field--narrow input { min-width: 0; }

/* A plot card is meant to run full width. In style.css that rule is a plain
   class, so :nth-child(even) outranks it whenever the plot lands on an even
   position - unlayered, it wins again. */
.portfolio .oferta-karta--pelna { grid-template-columns: 1fr; }
.portfolio .oferta-karta--pelna .oferta-karta__media { order: 1; aspect-ratio: var(--ar-hero); }
.portfolio .oferta-karta--pelna .oferta-karta__opis { order: 2; max-width: 62ch; }

/* --------------------------------------------------------- contrast fixes */

/* WCAG 1.4.11 wants 3:1 for the edges of a control. --linia-mocna sits at
   about 1.6:1 on this ground, so form fields and outline buttons get their
   own, stronger line. */
.hs-field input,
.hs-field select,
.hs-field textarea { border-color: rgba(239, 235, 227, 0.42); }

.hs-field input::placeholder,
.hs-field textarea::placeholder { color: var(--atrament-4); }

.btn:not(.btn--pelny):not(.btn--mosiadz) { border-color: rgba(239, 235, 227, 0.42); }

/* The card ordinal uses mix-blend-mode and disappears over mid grey; a plate
   behind it keeps it readable on any photograph. */
.oferta-karta__numer {
  mix-blend-mode: normal;
  padding: 0.15rem 0.45rem;
  background: rgba(10, 10, 11, 0.55);
  border-radius: 2px;
  color: var(--atrament);
}

/* ===========================================================================
   HEADER — the logo mark beside the name, and the navigation on a phone.
   style.css lays the header out for a three-link brochure; the shop carries
   four links, four languages and the account, so everything below a laptop
   gets a menu button and a panel instead of a row that cannot fit.
   =========================================================================== */

/* ------------------------------------------------------------------- brand */

/* style.css stacks the name over the tagline and styles every span under
   .marka; here the mark stands to the left of that stack. */
.marka {
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.marka__znak {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--mosiadz);
}

.marka__napis {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* The name is live text in the display serif, the way the logo sets it. It is
   shown as typed - no forced capitals - so a mixed-case name keeps its shape.
   Where the bar is tight the name gives way before the links do: it breaks
   between its words (never inside one) and stands as two short lines beside
   the mark. */
.marka b {
  font-family: var(--f-tytul);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.1em;
  text-transform: none;
  text-wrap: balance;
}

/* A link label never breaks, whatever the width. */
.nawigacja > a { white-space: nowrap; }

/* style.css lets the spacing grow with the window up to 48 px, but the bar
   itself stops at 1440 px - on a 1920 px screen the row came out wider than on
   a laptop and squeezed the name. 34 px is what 1440 px already gets. */
.nawigacja { gap: 2.125rem; }

.menu-przycisk,
.hs-langs__label { display: none; }

/* Measured with the longest labels (German and Ukrainian, signed in): the
   links keep their wide spacing from 1440 px, the tagline stays from 1280 px,
   and from 1152 px the row still fits once the name stands on two lines.
   Below that there is no honest way to fit it - see the panel further down. */
@media (width < 90rem) {
  .nawigacja { gap: 0.9rem; }
  .hs-langs { margin-inline: 0.25rem; }
}

@media (width < 80rem) {
  .marka__napis span { display: none; }
  .marka b { font-size: 1.125rem; }
}

/* -------------------------------------------------------- phone navigation */

@media (width < 72rem) {
  .naglowek { padding-block: var(--s-4); }
  .naglowek[data-przewiniety] { padding-block: var(--s-2); }
  .naglowek .powloka { gap: var(--s-4); }

  .marka { min-height: 2.75rem; }
  .marka__znak { width: 2.125rem; height: 2.125rem; }
  .marka b { font-size: 1.0625rem; letter-spacing: 0.08em; }

  /* --- with scripts: a button and a panel -------------------------------- */

  .ma-skrypty .menu-przycisk {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.75rem;   /* 44 px: the smallest comfortable touch target */
    padding: 0 0.9rem;
    border: 1px solid rgba(239, 235, 227, 0.42);
    background: rgba(10, 10, 11, 0.4);   /* readable over any photograph */
    font-size: var(--t-mikro);
    font-weight: 500;
    letter-spacing: var(--ls-etyk);
    text-transform: uppercase;
    color: var(--atrament);
  }

  /* Three rules that fold into a cross: the middle one fades, the outer two
     meet in the centre and turn. */
  .menu-przycisk__ikona {
    position: relative;
    width: 1.125rem;
    height: 1.5px;
    background: var(--mosiadz);
    transition: background var(--d-1) var(--e-soft);
  }

  .menu-przycisk__ikona::before,
  .menu-przycisk__ikona::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 1.5px;
    background: var(--mosiadz);
    transition: transform var(--d-2) var(--e-out);
  }

  .menu-przycisk__ikona::before { transform: translateY(-5px); }
  .menu-przycisk__ikona::after { transform: translateY(5px); }

  .menu-przycisk[aria-expanded='true'] .menu-przycisk__ikona { background: transparent; }
  .menu-przycisk[aria-expanded='true'] .menu-przycisk__ikona::before { transform: rotate(45deg); }
  .menu-przycisk[aria-expanded='true'] .menu-przycisk__ikona::after { transform: rotate(-45deg); }

  /* The panel hangs under the header. `visibility` (not just opacity) keeps
     the closed links out of the tab order and away from screen readers. */
  .ma-skrypty .nawigacja {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--h-naglowek));
    max-height: calc(100dvh - var(--h-naglowek));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-2) var(--margines) var(--s-6);
    background: var(--tlo);
    border-block: 1px solid var(--linia-slaba);
    box-shadow: var(--cien-modal);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--d-2) var(--e-out),
      transform var(--d-2) var(--e-out),
      visibility 0s linear var(--d-2);
  }

  .ma-skrypty .naglowek[data-menu-otwarte] .nawigacja {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  /* An open panel needs a solid bar above it, also at the top of the page
     where the header is otherwise transparent over the photograph. */
  .ma-skrypty .naglowek[data-menu-otwarte] {
    background: var(--tlo);
    backdrop-filter: none;
  }

  /* The page behind is dimmed; a tap there closes the panel (shell.js). */
  .ma-skrypty .naglowek::after {
    content: '';
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: 100vh;
    background: var(--tlo-krycie);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--d-2) var(--e-soft), visibility 0s linear var(--d-2);
  }

  .ma-skrypty .naglowek[data-menu-otwarte]::after {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  /* One link per row, 56 px tall, a hairline between them. */
  .ma-skrypty .nawigacja > a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0;
    font-size: var(--t-sm);
    color: var(--atrament);
    border-block-end: 1px solid var(--linia-slaba);
  }

  /* A short brass rule marks the page the visitor is on. */
  .ma-skrypty .nawigacja > a[aria-current='page'] { color: var(--mosiadz-jasny); }

  .ma-skrypty .nawigacja > a[aria-current='page']::before {
    content: '';
    width: var(--s-5);
    height: 1px;
    margin-inline-end: var(--s-3);
    background: var(--mosiadz);
  }

  .ma-skrypty .hs-langs {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 4rem;
    margin: 0;
    border-block-end: 1px solid var(--linia-slaba);
  }

  .ma-skrypty .hs-langs__label {
    display: block;
    margin-inline-end: auto;
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: var(--ls-etyk);
    text-transform: uppercase;
    color: var(--atrament-3);
  }

  .ma-skrypty .hs-langs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    font-size: var(--t-sm);
    color: var(--atrament-2);
    border: 1px solid transparent;
  }

  .ma-skrypty .hs-langs a.hs-langs__on { color: var(--mosiadz); border-color: var(--mosiadz); }

  /* Sign in / my account closes the list as the one outlined button. */
  .ma-skrypty .nawigacja > .nawigacja__kluczowy {
    justify-content: center;
    margin-block-start: var(--s-5);
    border: 1px solid var(--mosiadz);
    letter-spacing: var(--ls-btn);
    color: var(--mosiadz);
  }

  @media (prefers-reduced-motion: reduce) {
    .ma-skrypty .nawigacja,
    .ma-skrypty .naglowek::after { transition: none; }
  }

  /* --- without scripts: the links wrap under the brand, in the flow ------ */

  /* style.css hides every link but the primary one below 640 px - fine for a
     three-link brochure, wrong for a shop that has to stay navigable. */
  html:not(.ma-skrypty) .naglowek { position: static; background: var(--tlo); }
  html:not(.ma-skrypty) .naglowek .powloka { flex-wrap: wrap; row-gap: var(--s-2); }
  html:not(.ma-skrypty) .nawigacja { flex-wrap: wrap; gap: 0 var(--s-4); }
  html:not(.ma-skrypty) .nawigacja a { display: inline-block; }
  html:not(.ma-skrypty) .hs-langs { margin-inline: 0; }

  /* --- room for the fixed header ----------------------------------------- */

  /* The header is 76 px here (44 px button, 16 px above and below). A text
     page opens with a plain section, the results with the search band, the
     front page with the hero - each has to start below the bar. */
  .ma-skrypty main > .sekcja:first-child { padding-block-start: calc(4.75rem + var(--s-6)); }
  .ma-skrypty .hs-searchbar-band { padding-block-start: calc(4.75rem + var(--s-4)); }
  .ma-skrypty .hero__tresc { padding-block-start: calc(4.75rem + var(--s-5)); }
}

/* Below 360 px the word "Menu" no longer fits beside the name; the button
   keeps its accessible name, only the letters step out of sight. */
@media (width < 22.5rem) {
  .menu-przycisk__napis {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ma-skrypty .menu-przycisk { justify-content: center; min-width: 2.75rem; padding: 0; }
}

/* ===========================================================================
   PHONE — what does not fit a 375 px screen as style.css leaves it.
   =========================================================================== */

/* iOS zooms the whole page into any field set below 16 px, and never zooms
   back out. Below a laptop the fields are therefore exactly 16 px. */
@media (width < 64rem) {
  .hs-field input,
  .hs-field select,
  .hs-field textarea { font-size: 1rem; }
}

/* Under the auction panel the advisor card needs air on one column too. */
.hs-split__side { display: grid; gap: 1.25rem; }

/* "POWIERZCHNIA" is wider than a 4.5rem column: it ran into the next label. */
.hs-card__facts { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

/* An e-mail address has no place to break; on the narrowest phones it may
   break anywhere rather than run off the card. */
.hs-sidecard a,
.hs-footer__contact a { overflow-wrap: anywhere; }

/* A two-line button label needs leading; .btn sets line-height 1. */
.hs-auction__signin .btn { display: flex; line-height: 1.3; text-align: center; }

/* -------------------------------------------------------------- search bar */

.hs-search__more { display: none; }

@media (width < 48rem) {
  /* Kind and deal share a row and the from-to pairs sit side by side: half
     the height of eleven stacked fields, and a range reads as a range. */
  .hs-search__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .hs-search__go { grid-column: 1 / -1; }

  /* With scripts the number fields fold behind "more filters", so the first
     results are on the first screen. Without scripts they simply stay. */
  .ma-skrypty .hs-search__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: 0;
    font-size: var(--t-mikro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atrament-2);
  }

  .hs-search__more::after {
    content: '+';
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1;
    color: var(--mosiadz);
  }

  .hs-search__more[aria-expanded='true']::after { content: '\2212'; }

  .ma-skrypty .hs-search__row--numbers:not([data-open]) { display: none; }

  /* The front page keeps its three fields; the rest waits on the results. */
  .ma-skrypty .hero .hs-search__more { display: none; }

  /* --- the front page: the search panel belongs on the first screen ------ */

  .hero:has(.hs-search) .hero__tresc { padding-block-end: var(--s-2); }
  .hero:has(.hs-search) .hero__tytul { margin-block: var(--s-5) var(--s-4); }
  .hero:has(.hs-search) .hero__lead { font-size: var(--t-baza); line-height: 1.6; }
  .hero:has(.hs-search) .hero__akcje { gap: var(--s-3); margin-block-start: var(--s-5); }
  .hero:has(.hs-search) .hero__akcje .btn { flex: 1 1 auto; }
  .hero .hs-search { margin-top: var(--s-5); }

  /* --- results: sorting ---------------------------------------------------
     Label above the select; beside it the select was squeezed to "Najn". */
  .hs-sort { flex: 1 1 100%; }
  .hs-sort .hs-field--inline { flex: 1 1 auto; grid-template-columns: 1fr; }
  .hs-sort .btn { padding-inline: var(--s-5); }

  /* --- touch targets: 44 px for everything a thumb has to hit ------------ */

  .hs-footer__links,
  .hs-footer__contact { gap: 0; }

  .hs-footer a,
  .hs-sidecard a,
  .hs-watch { display: inline-flex; align-items: center; min-height: 2.75rem; }

  .hs-rules summary { padding-block: 0.6rem; }
}

/* Sections breathe 72 px above and below on a phone - 144 px of black between
   two blocks. 56 px keeps the rhythm and saves a thumb-scroll per page. */
@media (width < 40rem) {
  :root { --sekcja-y: 3.5rem; }

  /* "My bids" is a five-column table and a phone has room for two. Each bid
     becomes a short block: the offer on its own line, the figures under it. */
  .hs-table,
  .hs-table tbody { display: block; }

  .hs-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--linia-slaba);
  }

  .hs-table td { padding: 0; border-bottom: 0; }
  .hs-table td:first-child { flex: 1 1 100%; }
}

/* --------------------------------------------- sticky bar on an offer page */

.pasek__skrot { display: none; }

/* The title takes what the buttons leave and is cut with an ellipsis; left to
   wrap, it ran to two or three lines and doubled the height of the bar. */
.pasek__nazwa {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Never wider than the screen: what does not fit moves to a second row
   instead of pushing the whole page sideways. */
.pasek__prawa { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--s-2); }

/* Below a wide laptop the buttons go compact and the question shortens, so
   the row has room for the title, the status chip and "watch" as well. */
@media (width < 80rem) {
  .pasek__prawa { gap: var(--s-3); }
  .pasek .btn { padding: 14px 18px; }
  .pasek__pelny { display: none; }
  .pasek__skrot { display: inline; }
}

/* The walkthrough and the film have their own sections, with their own
   buttons, further down the page; on a tablet the bar is the first place they
   can be spared. */
@media (width < 56rem) {
  .pasek [data-otworz-ture],
  .pasek [data-film-play] { display: none; }
}

/* style.css gives the phone bar two equal buttons; the shop added a status
   chip beside them and the row grew to 436 px on a 375 px screen. The chip
   repeats the auction panel, so on a phone it steps aside. */
@media (width < 35rem) {
  .pasek .powloka { padding-block: var(--s-2); }
  .pasek__prawa .hs-chip { display: none; }

  .pasek .btn { min-width: 0; min-height: 2.75rem; padding-inline: 10px; }
  .pasek__prawa > form { flex: 0 1 auto; min-width: 0; }
  .pasek .hs-watch { padding-inline: var(--s-2); line-height: 1.2; text-align: center; }
}

/* ------------------------------------------------------------------- pager */

@media (width < 35rem) {
  .hs-pager { flex-wrap: wrap; gap: var(--s-3); }
  .hs-pager .etykieta { order: -1; flex: 1 1 100%; justify-content: center; }
  .hs-pager .btn { flex: 1 1 0; padding-inline: var(--s-4); }
}