/* Strona sklepu Pro+ — `vistitio.pl/sklep/{adres}`. Makieta v78 „Pro Sklep.dc.html” (`L` w `renderVals`:
   desktop pad 24/48/64, gap 24, baner 4:1 r20, logo 112 r24, h1 38; mobile pad 12/16/32, gap 18,
   baner 2:1 r16, logo 80, h1 28). Lista ofert to wspólny katalog (`oferty.czesci.katalog`, pasek v76). */

.psklep {
  max-width: 1200px; /* makieta */
  margin: 0 auto;
  padding: 24px 48px 64px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6);
  background: var(--v-n-0);
  color: var(--v-primary);
}

/* ---------- Baner i logo ---------- */
.psklep__gora { position: relative; }

.psklep__baner {
  position: relative;
  aspect-ratio: 4 / 1;
  border-radius: 20px;
  background: var(--v-secondary-soft);
  overflow: hidden;
}

/* Pole obrazu. Na komputerze całe, na telefonie dwa razy szersze od ramki i wyśrodkowane — widać
   środkowe pole 2:1 banera 4:1 z tym samym kadrem w pionie (makieta: `left:-50%;width:200%`). */
.psklep__baner-pole {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.psklep__baner-pole img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--psklep-kadr, 50%);
}

.psklep__logo {
  position: absolute;
  left: 32px;
  bottom: -52px; /* makieta */
  width: 112px;
  height: 112px;
  border-radius: 24px;
  border: 4px solid var(--v-n-0);
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
  display: grid;
  place-items: center;
  overflow: hidden;
  font: 600 36px/1 var(--v-font-display);
  letter-spacing: -.02em;
  box-shadow: 0 2px 8px rgba(30, 43, 69, .12);
}

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

/* ---------- Nagłówek ---------- */
.psklep__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 32px;
  padding-top: 56px;
}

.psklep__info {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.psklep__nazwa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.psklep__tytul {
  margin: 0;
  font: 600 38px/1.05 var(--v-font-display);
  letter-spacing: var(--v-ls-display);
}

.psklep__plakietka {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--v-n-100);
  color: var(--v-primary);
  font-size: 11.5px;
  font-weight: 700;
}

.psklep__fakty {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 14px;
  color: var(--v-n-700);
}

.psklep__fakt { white-space: nowrap; }

.psklep__fakt--ocena {
  font-weight: 800;
  color: var(--v-primary);
  text-decoration: none;
}

.psklep__fakt--ocena span { font-weight: 600; color: var(--v-n-700); }

/* Odznaki pod linijką faktów: odstęp od faktów i opisu jak między wierszami nagłówka (`gap` 10) + 6. */
.psklep__odznaki { flex: 1 1 100%; margin: 6px 0 0; } /* cały rząd pod nagłówkiem (11.10) */

.psklep__opis {
  margin: 0;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--v-n-700);
  text-wrap: pretty;
}

/* Zniżka za zestaw (`Cennik\Zestaw`) — zielony chip z makiety. */
.psklep__znizka {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font-size: 13px;
  font-weight: 800;
}

.psklep__obserwuj {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.psklep__forma { display: contents; }

/* Przycisk z makiety: 48 wys., wyściółka 24, promień 12, 15/700; obserwowany — biały z granatową obwódką. */
.v-btn.psklep__btn {
  height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

.v-btn.psklep__btn--on,
.v-btn.psklep__btn--on:hover {
  background: var(--v-n-0);
  color: var(--v-primary);
  border: 1.5px solid var(--v-primary);
}

.psklep__obserwujacy {
  font-size: 13px;
  color: var(--v-n-600);
}

/* ---------- Kategorie i lista ---------- */
.psklep__kategorie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
}

/* Chip kategorii sklepu: 40 wys., promień 20, 14/700, obwódka 1,5 (makieta). */
.psklep__kategorie .v-chip {
  height: 40px;
  border-radius: 20px;
  font-size: 14px;
}

/* Wspólny katalog stoi tu w kolumnie strony, bez własnego kontenera i wyściółki listy. */
.psklep .kat {
  max-width: none;
  margin: 0;
  padding: 0;
}

.psklep .vfl-glowa__tytul { font-size: 26px; }

/* ---------- Bez ofert ---------- */
.psklep__pusto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-s-3);
  padding: 36px;
  border-radius: 20px;
  background: var(--v-n-50);
}

.psklep__pusto-tytul {
  margin: 0;
  font: 600 22px/1.2 var(--v-font-display);
  letter-spacing: -.02em;
}

.psklep__pusto-opis {
  margin: 0;
  max-width: 520px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--v-n-700);
  text-wrap: pretty;
}

.psklep__pusto .v-btn.psklep__btn { padding: 0 22px; } /* makieta */

/* ---------- O sklepie ---------- */
.psklep__o {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: var(--v-s-2);
}

.psklep__o-tytul {
  margin: 0;
  font: 600 24px/1.2 var(--v-font-display);
  letter-spacing: -.02em;
}

.psklep__karty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v-s-3);
}

.psklep__karta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--v-n-100);
}

.psklep__karta-tytul { font-size: 13px; font-weight: 800; }

.psklep__karta-tekst {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v-n-700);
  text-wrap: pretty;
}

.psklep__karta-link {
  display: flex;
  align-items: center;
  min-height: 28px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--v-primary);
}

.psklep__karta-link:hover { color: var(--v-secondary-text); }

.psklep__karta-nota { font-size: 12.5px; color: var(--v-n-600); }

/* ---------- Telefon (makieta `mode: m`) ---------- */
@media (max-width: 760px) {
  /* Strona sklepu na telefonie stoi na bieli od krawędzi do krawędzi (makieta), a powłoka daje na
     telefonie szare tło i rynnę 18 px — `:has` bije wstawkę powłoki mocniejszym selektorem. */
  .powloka:has(.psklep) { background: var(--v-n-0); }
  .powloka__tresc:has(> .psklep) { padding-left: 0; padding-right: 0; padding-top: 0; }

  .psklep {
    padding: 12px 16px 32px;
    gap: 18px;
  }

  .psklep__baner {
    aspect-ratio: 2 / 1;
    border-radius: 16px;
  }

  .psklep__baner-pole {
    left: -50%; /* makieta */
    width: 200%;
  }

  .psklep__logo {
    left: 16px;
    bottom: -36px; /* makieta */
    width: 80px;
    height: 80px;
    font-size: 26px;
  }

  .psklep__glowa { padding-top: 40px; }

  .psklep__tytul { font-size: 28px; }

  .psklep__obserwuj {
    flex: 1 1 100%;
    align-items: stretch;
  }

  .psklep__obserwuj .v-btn.psklep__btn { width: 100%; }

  .psklep .vfl-glowa__tytul { font-size: 22px; }

  .psklep__pusto { padding: var(--v-s-6); }

  .psklep__karty { grid-template-columns: minmax(0, 1fr); }
}