/* ================================================================
   Podgląd bloków strony klienta — pv-section-* / pv-svc-* itp.
   ================================================================ */

/* Wyłącza auto-stylowanie pól przez ciemny motyw przeglądarki (Safari/Chrome). */
html,
.sb-device-screen,
#publicScreen {
  color-scheme: light;
}

/* Kolor tekstu nagłówka (imię/nazwa, tagline, bio, meta) — wspólny dla podglądu
   i strony publicznej, mobile i desktop. Token --pv-hero-text liczony jest z
   właściwego koloru tła (góra gradientu), więc nazwa jest zawsze widoczna i
   identyczna na każdym ekranie. */
.pv-name { color: var(--pv-hero-text, inherit); text-shadow: var(--pv-hero-shadow, none); }
.pv-tagline,
.pv-bio,
.pv-meta { color: var(--pv-hero-muted, var(--pv-muted)); }
.pv-tagline--lead { color: var(--pv-hero-text, inherit); }

.pv-detail-overlay,
.pv-booking-sheet,
.pv-commerce-sheet {
  color-scheme: light;
}

/* ── Base section ── */
.pv-section {
  padding: 1.4rem 0.9rem 1rem;
}

.pv-section + .pv-section {
  border-top: 1px solid rgba(0,0,0,0.06);
}

[data-surface="dark"] .pv-section + .pv-section {
  border-top-color: rgba(255,255,255,0.07);
}

.pv-section-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  line-height: 1.25;
  /* Ten sam kolor co nazwa (z koloru tła) — spójnie mobile i desktop. */
  color: var(--pv-hero-text, inherit);
  text-shadow: var(--pv-hero-shadow, none);
}

/* Desktop typography — public page only (not dashboard phone preview) */
@media (min-width: 1024px) {
  #publicScreen .pv-section-title {
    font-size: 1.48rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
    color: var(--pv-hero-text, inherit);
    text-shadow: var(--pv-hero-shadow, none);
  }

  #publicScreen .pv-section-sub {
    font-size: 1.05rem;
    color: var(--pv-hero-muted, var(--pv-muted));
    line-height: 1.55;
  }

  #publicScreen .pv-name {
    font-size: 1.78rem;
    color: var(--pv-hero-text, inherit);
    text-shadow: var(--pv-hero-shadow, none);
  }

  #publicScreen .pv-tagline {
    font-size: 1.26rem;
    color: var(--pv-hero-muted, var(--pv-muted));
  }

  #publicScreen .pv-svc-name {
    font-size: 1.12rem;
    color: inherit;
  }

  #publicScreen .pv-svc-img {
    height: 188px;
  }

  #publicScreen .pv-svc-desc {
    font-size: 0.9rem;
  }

  #publicScreen .pv-svc-price-main {
    font-size: 1.55rem;
  }

  #publicScreen .pv-svc-price-old {
    font-size: 1.1rem;
  }

  #publicScreen .pv-svc-price-period {
    font-size: 0.88rem;
  }

  #publicScreen .pv-svc-badge {
    font-size: 0.8rem;
    padding: 0.42rem 0.78rem;
  }

  #publicScreen .pv-svc-badges--detail .pv-svc-badge {
    font-size: 0.84rem;
    padding: 0.45rem 0.82rem;
  }

  #publicScreen .pv-svc-desc {
    font-size: 0.86rem;
    color: var(--pv-card-muted, var(--pv-muted));
  }

  #publicScreen .pv-svc-cta-btn {
    font-size: 0.9rem !important;
    min-height: 46px !important;
  }

  /* Wyrównane przyciski w kartach obok siebie (usługi + cennik) */
  #publicScreen .pv-svc-list,
  #publicScreen .pv-price-list {
    align-items: stretch;
  }

  #publicScreen .pv-scroll.pv-layout-showcase {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
  }

  #publicScreen .pv-hero--portrait {
    padding: 1rem 1.25rem 0.95rem;
  }

  #publicScreen .pv-portrait-wrap {
    width: 108px;
    height: 108px;
    max-width: 108px;
    max-height: none;
    margin: 0 auto 0.55rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: auto;
  }

  #publicScreen .pv-portrait-wrap::before {
    display: none;
  }

  #publicScreen .pv-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
    -webkit-mask-image: none;
    mask-image: none;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--pv-accent, #6366f1) 22%, transparent),
      0 8px 28px rgba(15, 23, 42, 0.14);
  }

  #publicScreen .pv-hero--portrait > :not(.pv-portrait-wrap) {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  #publicScreen .pv-svc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #publicScreen .pv-svc-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #publicScreen .pv-svc-cta-row {
    margin-top: auto;
    padding-top: 0.65rem;
  }

  #publicScreen .pv-price-card {
    display: flex;
    flex-direction: column;
  }

  #publicScreen .pv-price-card > .pv-btn,
  #publicScreen .pv-price-card > a.pv-btn {
    margin-top: auto;
  }

  #publicScreen .pv-section--pricing {
    padding-bottom: 2rem;
    margin-bottom: 0.75rem;
  }

  #publicScreen .pv-price-num {
    font-size: 1.6rem;
  }

  #publicScreen .pv-price-compare {
    font-size: 2rem;
  }

  #publicScreen .pv-detail-price-block .pv-detail-price-big {
    font-size: 2.1rem;
  }

  #publicScreen .pv-detail-price-block .pv-detail-price-compare {
    font-size: 1.45rem;
  }

  #publicScreen .pv-price-unit {
    font-size: 0.76rem;
    padding-bottom: 0.2em;
  }

  #publicScreen .pv-section--form {
    padding-top: 1.25rem;
    margin-top: 0.5rem;
  }

  #publicScreen .pv-bio {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--pv-muted);
  }

  #publicScreen .pv-meta {
    font-size: 1.05rem;
    color: var(--pv-muted);
  }

  #publicScreen .pv-meta i {
    font-size: 0.95rem;
  }

  #publicScreen .pv-soc {
    width: 54px;
    height: 54px;
    font-size: 1.22rem;
  }

  #publicScreen .pv-rich-text {
    font-size: 1.08rem;
    line-height: 1.8;
    color: inherit;
  }

  #publicScreen .pv-rich-text h2 {
    font-size: 1.28rem;
    letter-spacing: -0.02em;
  }

  #publicScreen .pv-rich-text h3 {
    font-size: 1.1rem;
  }

  #publicScreen .pv-rich-text p,
  #publicScreen .pv-rich-text li {
    font-size: 1.08rem;
  }

  #publicScreen .pv-section--rich-text .pv-section-title {
    font-size: 1.48rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-section-title {
    font-size: 1rem;
    letter-spacing: 0.07em;
    color: var(--pv-card-muted, var(--pv-muted));
    margin-bottom: 0.65rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-desc,
  #publicScreen .pv-detail-overlay .pv-detail-body--rich .pv-detail-desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--pv-card-muted, var(--pv-muted));
  }

  #publicScreen .pv-detail-overlay .pv-detail-name {
    font-size: 1.58rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-price-big {
    font-size: 1.68rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-chip {
    font-size: 0.82rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-trust-row {
    font-size: 0.96rem;
    gap: 0.55rem 0.9rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-ready-text strong {
    font-size: 1.12rem;
  }

  #publicScreen .pv-detail-overlay .pv-detail-ready-text span {
    font-size: 0.98rem;
    color: var(--pv-card-muted, var(--pv-muted));
  }

  #publicScreen .pv-detail-overlay .pv-booking-label {
    font-size: 0.82rem;
    color: var(--pv-card-muted, var(--pv-muted));
  }

  #publicScreen .pv-detail-section--portfolio .pv-detail-portfolio-desktop .pv-portfolio-grid--natural {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    max-width: 100%;
  }

  #publicScreen .pv-detail-section--portfolio .pv-detail-portfolio-desktop .pv-portfolio-cell img {
    max-height: 128px;
  }
}

/* Dashboard phone preview — mobile scale on wide monitors (matches real phone) */
@media (min-width: 1024px) {
  .sb-device-screen .pv-name {
    font-size: 1.26rem;
  }

  .sb-device-screen .pv-tagline {
    font-size: 0.88rem;
  }

  .sb-device-screen .pv-bio {
    font-size: 0.84rem;
  }

  .sb-device-screen .pv-meta {
    font-size: 0.78rem;
  }

  .sb-device-screen .pv-soc {
    width: 46px;
    height: 46px;
    font-size: 1.12rem;
  }

  .sb-device-screen .pv-section-title {
    font-size: 1rem;
    color: var(--pv-hero-text, inherit);
  }

  .sb-device-screen .pv-section-sub {
    font-size: 0.78rem;
  }

  .sb-device-screen .pv-rich-text {
    font-size: 0.8rem;
  }

  .sb-device-screen .pv-hero--left .pv-name {
    font-size: 1.1rem;
  }
}

.pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  min-height: 44px;
  border: none;
  color: var(--pv-on-accent, #fff);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, opacity 0.12s;
}

.pv-btn--tap:active {
  transform: scale(0.97);
  opacity: 0.92;
}

.pv-btn--link {
  box-sizing: border-box;
}

/* ── Services — Stan Store style ── */
.pv-svc-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pv-svc-card {
  --pv-svc-accent: var(--pv-accent, #6366f1);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pv-card-bg, #fff);
  color: var(--pv-card-text, inherit);
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.08));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--pv-card-shadow, none);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .pv-svc-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pv-svc-accent) 34%, var(--pv-card-border, rgba(0,0,0,0.08)));
    box-shadow:
      0 14px 34px color-mix(in srgb, var(--pv-svc-accent) 16%, rgba(15, 23, 42, 0.14)),
      0 0 0 1px color-mix(in srgb, var(--pv-svc-accent) 14%, transparent);
  }

  .pv-svc-card:hover .pv-svc-cta-arrow {
    transform: translateX(3px);
  }
}

.pv-scroll.pv-modules-elevated .pv-svc-card,
.pv-scroll.pv-modules-elevated .pv-testi-card,
.pv-scroll.pv-modules-elevated .pv-price-card,
.pv-scroll.pv-modules-elevated .pv-faq-item,
.pv-scroll.pv-modules-elevated .pv-stat-item,
.pv-scroll.pv-modules-elevated .pv-avail-card {
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
}

.pv-scroll.pv-modules-plain .pv-svc-card,
.pv-scroll.pv-modules-plain .pv-testi-card,
.pv-scroll.pv-modules-plain .pv-price-card,
.pv-scroll.pv-modules-plain .pv-faq-item,
.pv-scroll.pv-modules-plain .pv-stat-item,
.pv-scroll.pv-modules-plain .pv-avail-card {
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  box-shadow: none;
}

.pv-scroll.pv-modules-neon .pv-svc-card,
.pv-scroll.pv-modules-neon .pv-testi-card,
.pv-scroll.pv-modules-neon .pv-price-card,
.pv-scroll.pv-modules-neon .pv-faq-item,
.pv-scroll.pv-modules-neon .pv-stat-item,
.pv-scroll.pv-modules-neon .pv-avail-card {
  border: 1px solid color-mix(in srgb, var(--pv-accent, #6366f1) 45%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--pv-accent, #6366f1) 18%, rgba(0, 0, 0, 0.3));
}

.pv-scroll.pv-modules-neon .pv-svc-price-box {
  border: 1.5px solid color-mix(in srgb, var(--pv-accent, #6366f1) 80%, transparent);
  border-radius: 99px;
  padding: 0.2rem 0.8rem;
  box-shadow: 0 0 10px color-mix(in srgb, var(--pv-accent, #6366f1) 20%, transparent);
}

.pv-scroll.pv-modules-filled .pv-svc-card,
.pv-scroll.pv-modules-filled .pv-testi-card,
.pv-scroll.pv-modules-filled .pv-price-card,
.pv-scroll.pv-modules-filled .pv-faq-item,
.pv-scroll.pv-modules-filled .pv-stat-item,
.pv-scroll.pv-modules-filled .pv-avail-card {
  border: 1px solid color-mix(in srgb, var(--pv-accent, #6366f1) 16%, var(--pv-card-border, rgba(15, 23, 42, 0.1)));
  box-shadow: none;
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 8%, var(--pv-card-bg, #fff));
}

.pv-scroll.pv-modules-outline .pv-svc-card,
.pv-scroll.pv-modules-outline .pv-testi-card,
.pv-scroll.pv-modules-outline .pv-price-card,
.pv-scroll.pv-modules-outline .pv-faq-item,
.pv-scroll.pv-modules-outline .pv-stat-item,
.pv-scroll.pv-modules-outline .pv-avail-card {
  border: 2px solid var(--pv-accent, #6366f1);
  box-shadow: none;
  background: transparent;
}

[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-svc-card,
[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-testi-card,
[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-price-card,
[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-faq-item,
[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-stat-item,
[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-avail-card,
#publicScreen[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-svc-card,
#publicScreen[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-testi-card,
#publicScreen[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-price-card,
#publicScreen[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-faq-item,
#publicScreen[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-stat-item,
#publicScreen[data-surface="dark"] .pv-scroll.pv-modules-outline .pv-avail-card {
  background: var(--pv-card-bg, rgba(255, 255, 255, 0.97));
  color: var(--pv-card-text, #0f172a);
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 42%, rgba(15, 23, 42, 0.14));
}

.pv-scroll.pv-layout-classic .pv-svc-list,
.pv-scroll.pv-layout-classic .pv-price-list,
.pv-scroll.pv-layout-classic .pv-testi-list {
  gap: 0.7rem;
}

.pv-scroll.pv-layout-cards .pv-svc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (max-width: 380px) {
  .pv-scroll.pv-layout-cards .pv-svc-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pv-scroll.pv-layout-cards .pv-svc-cta-btn {
    font-size: 0.76rem !important;
  }
}

.pv-scroll.pv-layout-cards .pv-svc-card {
  border-radius: 20px;
  min-width: 0;
}

.pv-scroll.pv-layout-cards .pv-svc-img {
  height: 102px;
}

.pv-scroll.pv-layout-cards .pv-svc-body {
  padding: 0.72rem 0.72rem 0.78rem;
  min-width: 0;
}

.pv-scroll.pv-layout-cards .pv-svc-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  margin-bottom: 0.28rem;
}

.pv-scroll.pv-layout-cards .pv-svc-name {
  font-size: 0.8rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pv-scroll.pv-layout-cards .pv-svc-desc {
  -webkit-line-clamp: 3;
  font-size: 0.69rem;
}

.pv-scroll.pv-layout-cards .pv-svc-price-main {
  font-size: 1.08rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.pv-scroll.pv-layout-cards .pv-svc-cta-btn {
  min-height: 42px;
  padding: 0.55rem 0.7rem !important;
  font-size: 0.73rem !important;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.pv-scroll.pv-layout-cards .pv-testi-list,
.pv-scroll.pv-layout-cards .pv-price-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.pv-scroll.pv-layout-cards .pv-price-card {
  padding: 0.7rem;
}

.pv-scroll.pv-layout-cards .pv-price-num {
  font-size: 1.22rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-list,
.pv-scroll.pv-layout-minimal .pv-price-list,
.pv-scroll.pv-layout-minimal .pv-testi-list {
  gap: 0.45rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-card,
.pv-scroll.pv-layout-minimal .pv-price-card,
.pv-scroll.pv-layout-minimal .pv-testi-card,
.pv-scroll.pv-layout-minimal .pv-faq-item,
.pv-scroll.pv-layout-minimal .pv-stat-item,
.pv-scroll.pv-layout-minimal .pv-avail-card {
  border-radius: 12px;
}

.pv-scroll.pv-layout-minimal .pv-svc-img {
  display: none;
}

.pv-scroll.pv-layout-minimal .pv-svc-body {
  padding: 0.6rem 0.72rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-top {
  margin-bottom: 0.2rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-name {
  font-size: 0.8rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-desc {
  font-size: 0.68rem;
  -webkit-line-clamp: 1;
}

.pv-scroll.pv-layout-minimal .pv-svc-badge {
  font-size: 0.64rem;
  padding: 0.3rem 0.55rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-badges {
  margin-bottom: 0.4rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-cta-btn {
  font-size: 0.72rem !important;
  min-height: 38px;
  padding: 0.45rem 0.75rem !important;
}

.pv-scroll.pv-layout-minimal .pv-price-card {
  padding: 0.65rem;
}

.pv-scroll.pv-layout-minimal .pv-price-num {
  font-size: 1.14rem;
}

.pv-scroll.pv-layout-minimal .pv-price-features {
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.pv-scroll.pv-layout-minimal .pv-price-features li {
  font-size: 0.67rem;
}

.pv-scroll.pv-layout-minimal .pv-testi-card {
  padding: 0.65rem;
}

.pv-scroll.pv-layout-minimal .pv-testi-text {
  font-size: 0.7rem;
  line-height: 1.45;
}

.pv-svc-card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 6px rgba(15,23,42,0.06);
}

.pv-svc-media {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.pv-svc-img {
  width: 100%;
  height: 168px;
  background-size: cover;
  background-position: center;
  background-color: color-mix(in srgb, var(--pv-svc-accent) 10%, #f1f5f9);
  transition: transform 0.35s ease;
}

.pv-svc-card:active .pv-svc-img,
.pv-svc-card:hover .pv-svc-img {
  transform: scale(1.03);
}

.pv-svc-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(120% 130% at 50% 0%,
      color-mix(in srgb, var(--pv-svc-accent) 24%, transparent) 0%,
      transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--pv-svc-accent) 12%, var(--pv-card-bg, #f1f5f9)) 0%,
      color-mix(in srgb, var(--pv-svc-accent) 4%, var(--pv-card-bg, #f1f5f9)) 100%);
}

.pv-svc-img--placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 50% 115%,
      color-mix(in srgb, var(--pv-svc-accent) 16%, transparent), transparent 70%);
}

.pv-svc-img-icon {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: var(--pv-svc-accent);
  background: color-mix(in srgb, var(--pv-card-bg, #fff) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv-svc-accent) 32%, transparent);
  box-shadow:
    0 12px 28px -12px color-mix(in srgb, var(--pv-svc-accent) 65%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pv-svc-type-pill {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.62rem;
  border-radius: 99px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--pv-svc-accent) 78%, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(6px);
}

.pv-svc-type-pill i {
  font-size: 0.58rem;
  opacity: 0.95;
}

.pv-svc-rating-pill {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.34rem 0.58rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #92400e;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

.pv-svc-rating-pill i {
  font-size: 0.58rem;
  color: #f59e0b;
}

.pv-svc-media-shade {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.34) 100%);
}

/* ── Premium plakietki w stylu naffy ── */

/* BESTSELLER — wyróżniony pill w prawym górnym rogu karty */
.pv-svc-bestseller {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.42rem 0.74rem;
  border-radius: 99px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 10px 24px -8px rgba(124, 58, 237, 0.65),
    0 2px 6px rgba(15, 23, 42, 0.22);
}

.pv-svc-bestseller i {
  font-size: 0.62rem;
  color: #fcd34d;
}

/* Plakietka PROMOCJA / DARMOWY — kompaktowy chip w dolnym rogu miniatury,
   nie zasłania zdjęcia produktu (w odróżnieniu od paska na całą szerokość). */
.pv-svc-ribbon {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  right: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.32rem 0.62rem;
  border-radius: 99px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.45);
}

.pv-svc-ribbon i {
  font-size: 0.58rem;
  opacity: 0.95;
}

.pv-svc-ribbon--sale {
  background: linear-gradient(135deg, #4f6bff 0%, #3b5bdb 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.pv-svc-ribbon--free {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

/* Złote gwiazdki oceny w treści (sygnatura naffy) */
.pv-svc-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  margin-top: 0.15rem;
  color: #f59e0b;
  font-size: 0.84rem;
  line-height: 1;
}

.pv-svc-stars .fa-regular {
  color: color-mix(in srgb, #f59e0b 38%, transparent);
}

.pv-svc-stars-val {
  margin-left: 0.38rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--pv-card-muted, #64748b);
}

/* ════════════════════════════════════════════════════════════════
   Tryb „Sklep" — siatka produktów (np. odzież), wygląd e-commerce
   ════════════════════════════════════════════════════════════════ */
/* Tryb sklepu działa niezależnie od układu strony (Klasyczny/Minimal/Portret),
   dlatego nadpisuje reguły .pv-scroll.pv-layout-* .pv-svc-list (wyższa specyficzność). */
.pv-svc-list--shop {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.4rem 0.9rem !important;
  align-items: start;
}

/* W trybie sklepu układ „Minimal" nie ukrywa zdjęcia produktu */
.pv-scroll.pv-layout-minimal .pv-svc-list--shop .pv-shop-img {
  display: block;
}

.pv-shop-card {
  --pv-svc-accent: var(--pv-accent, #6366f1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  cursor: pointer;
  background: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pv-shop-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pv-svc-accent) 8%, var(--pv-card-bg, #f1f5f9));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 18px 40px -28px rgba(15, 23, 42, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pv-shop-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pv-shop-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(120% 130% at 50% 0%,
      color-mix(in srgb, var(--pv-svc-accent) 24%, transparent) 0%,
      transparent 60%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--pv-svc-accent) 12%, var(--pv-card-bg, #f1f5f9)) 0%,
      color-mix(in srgb, var(--pv-svc-accent) 4%, var(--pv-card-bg, #f1f5f9)) 100%);
}

.pv-shop-img--placeholder .pv-svc-img-icon {
  width: 64px;
  height: 64px;
  font-size: 1.55rem;
}

@media (hover: hover) and (pointer: fine) {
  .pv-shop-card:hover .pv-shop-media {
    transform: translateY(-3px);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 26px 50px -26px color-mix(in srgb, var(--pv-svc-accent) 40%, rgba(15, 23, 42, 0.45));
  }
  .pv-shop-card:hover .pv-shop-img {
    transform: scale(1.05);
  }
  .pv-shop-card:hover .pv-shop-hover {
    opacity: 1;
  }
  .pv-shop-card:hover .pv-shop-hover-btn {
    transform: translateY(0);
  }
}

/* Nakładka hover z przyciskiem „Zobacz" */
.pv-shop-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 52%);
}

.pv-shop-hover-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.62rem 1.05rem;
  border-radius: 99px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.3);
  transform: translateY(10px);
  transition: transform 0.28s ease;
}

.pv-shop-hover-btn i {
  font-size: 0.72rem;
}

/* W siatce sklepu plakietki mają mniejszy margines (mniejszy kafelek) */
.pv-shop-media .pv-svc-bestseller {
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.34rem 0.6rem;
  font-size: 0.58rem;
}

/* W siatce sklepu wstążka idzie na GÓRĘ (lewa) — dół zostaje wolny dla
   przycisku „Zobacz" pojawiającego się na hover. */
.pv-shop-media .pv-svc-ribbon {
  left: 0.6rem;
  top: 0.6rem;
  bottom: auto;
}

.pv-shop-info {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0 0.15rem;
}

.pv-shop-name {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--pv-hero-text, var(--pv-card-text, #0f172a));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-shop-info .pv-svc-price-box {
  padding: 0;
}

.pv-shop-info .pv-svc-price-row {
  gap: 0.2rem 0.4rem;
}

.pv-shop-info .pv-svc-price-main {
  font-size: 1rem;
}

.pv-shop-info .pv-svc-price-old {
  font-size: 0.82rem;
}

/* Na kafelku sklepu pokazujemy samą cenę — bez „/ okres" (czystszy wygląd,
   szczegół z okresem jest na stronie produktu). Zapobiega też brzydkiemu
   zawijaniu „/ godzina" do osobnej linii na wąskich kafelkach. */
.pv-shop-info .pv-svc-price-period {
  display: none;
}

.pv-shop-info .pv-svc-stars {
  margin-top: 0.05rem;
  font-size: 0.76rem;
}

.pv-svc-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.95rem 1rem 1.05rem;
  background: var(--pv-card-bg, #fff);
}

.pv-svc-accent-line {
  display: none;
}

.pv-svc-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.pv-svc-name {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--pv-card-text, inherit);
}

.pv-svc-price-box {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.pv-svc-price-row {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
}

.pv-svc-price-main {
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pv-price-accent, var(--pv-accent, #6366f1));
  white-space: nowrap;
}

.pv-svc-price-old {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--pv-compare-price, var(--pv-card-muted, #64748b));
  text-decoration: line-through;
  opacity: 0.88;
  white-space: nowrap;
}

.pv-svc-price-period {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pv-card-muted, #64748b);
  white-space: nowrap;
}

.pv-svc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
}

.pv-svc-badges--detail {
  margin-bottom: 0.75rem;
}

/* Etykiety usług — żywe, nasycone pastylki (jak „DARMOWY" na naffy):
   pełny kolor + biały tekst + delikatna poświata w kolorze etykiety. */
.pv-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.72rem;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  border: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}

.pv-svc-badge i {
  font-size: 0.62rem;
  opacity: 0.95;
}

.pv-svc-badge--sky {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.35);
}

.pv-svc-badge--violet {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35);
}

.pv-svc-badge--emerald {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

.pv-svc-badge--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.38);
}

.pv-svc-badge--rose {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 3px 10px rgba(244, 63, 94, 0.35);
}

.pv-svc-badge--accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pv-accent, #6366f1) 88%, #fff) 0%, color-mix(in srgb, var(--pv-accent, #6366f1) 84%, #000) 100%);
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--pv-accent, #6366f1) 38%, transparent);
}

/* Darmowy produkt — wyróżniona etykieta „DARMOWY" (jak na naffy). */
.pv-svc-badge--free {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  color: #fff;
  border-color: rgba(249, 115, 22, 0.5);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
[data-surface="dark"] .pv-svc-badge--free,
#publicScreen[data-surface="dark"] .pv-svc-badge--free {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  color: #fff;
  border-color: rgba(249, 115, 22, 0.6);
}

/* Ciemny motyw — te same żywe kolory (nasycone pastylki świecą na ciemnym tle). */
[data-surface="dark"] .pv-svc-badge--sky,
#publicScreen[data-surface="dark"] .pv-svc-badge--sky {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #fff;
  box-shadow: 0 3px 14px rgba(14, 165, 233, 0.4);
}

[data-surface="dark"] .pv-svc-badge--violet,
#publicScreen[data-surface="dark"] .pv-svc-badge--violet {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 3px 14px rgba(139, 92, 246, 0.4);
}

[data-surface="dark"] .pv-svc-badge--emerald,
#publicScreen[data-surface="dark"] .pv-svc-badge--emerald {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 3px 14px rgba(16, 185, 129, 0.4);
}

[data-surface="dark"] .pv-svc-badge--amber,
#publicScreen[data-surface="dark"] .pv-svc-badge--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 3px 14px rgba(245, 158, 11, 0.42);
}

[data-surface="dark"] .pv-svc-badge--rose,
#publicScreen[data-surface="dark"] .pv-svc-badge--rose {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  color: #fff;
  box-shadow: 0 3px 14px rgba(244, 63, 94, 0.4);
}

[data-surface="dark"] .pv-svc-badge--accent,
#publicScreen[data-surface="dark"] .pv-svc-badge--accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pv-accent, #6366f1) 88%, #fff) 0%, color-mix(in srgb, var(--pv-accent, #6366f1) 84%, #000) 100%);
  color: #fff;
  box-shadow: 0 3px 14px color-mix(in srgb, var(--pv-accent, #6366f1) 42%, transparent);
}

.pv-svc-desc {
  font-size: 0.74rem;
  color: var(--pv-card-muted, var(--pv-muted));
  line-height: 1.45;
  margin: 0 0 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-svc-cta-row {
  margin-top: auto;
  padding-top: 0.35rem;
}

.pv-svc-cta-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  padding: 0.72rem 1rem !important;
  min-height: 48px !important;
  border-radius: 14px;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 22%, rgba(15, 23, 42, 0.12));
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.pv-svc-cta-text {
  line-height: 1.2;
}

.pv-svc-cta-arrow {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* ── Showcase layout (portret + karty poziome) ── */
.pv-scroll.pv-layout-showcase {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.pv-scroll.pv-layout-showcase .pv-section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pv-scroll.pv-layout-showcase .pv-section + .pv-section {
  border-top: none;
}

.pv-hero--portrait {
  text-align: center;
  padding: 0 0 0.55rem;
  background: transparent;
  border: none;
}

.pv-hero--portrait > :not(.pv-portrait-wrap) {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pv-portrait-wrap {
  position: relative;
  width: 100%;
  max-width: none;
  height: clamp(12.5rem, 40vh, 17.5rem);
  max-height: 280px;
  margin: 0 0 -1.65rem;
  overflow: hidden;
  pointer-events: none;
}

#publicScreen .pv-portrait-wrap {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

#publicScreen .pv-hero--portrait {
  padding: 0 0 0.55rem;
}

.pv-portrait-wrap::before {
  content: '';
  position: absolute;
  inset: 6% 0 28%;
  z-index: 0;
  background: radial-gradient(
    ellipse 80% 55% at 50% 36%,
    rgba(255, 255, 255, 0.22) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.pv-portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
}

.pv-hero--portrait .pv-name--showcase,
.pv-hero--portrait .pv-tagline--showcase,
.pv-hero--portrait .pv-bio--showcase,
.pv-hero--portrait .pv-social--showcase {
  position: relative;
  z-index: 2;
}

.pv-name--showcase {
  font-family: var(--pv-heading-font, "Playfair Display", Georgia, serif);
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0.3rem;
  color: inherit;
}

.pv-tagline--showcase {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--pv-muted);
  margin: 0 0 0.25rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.pv-tagline--showcase.pv-tagline--lead {
  font-size: 0.88rem;
  font-weight: 700;
  color: inherit;
}

.pv-hero--portrait .pv-meta {
  justify-content: center;
  margin: 0.15rem auto 0.35rem;
  max-width: 22rem;
}

.pv-bio--showcase {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--pv-muted);
  margin: 0 auto 0.55rem;
  max-width: 22rem;
}

.pv-social--showcase {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.pv-soc--glass {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: rgba(15, 23, 42, 0.78);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

[data-surface="dark"] .pv-soc--glass {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.2);
}

.pv-svc-list--showcase {
  gap: 0.85rem;
}

.pv-svc-card--showcase {
  border-radius: 24px;
  padding: 0.95rem 0.95rem 0.85rem;
  background: var(--pv-card-bg, #ffffff);
  border: 1px solid var(--pv-card-border, transparent);
  box-shadow: var(--pv-card-shadow, 0 4px 24px rgba(15, 23, 42, 0.08));
}

.pv-svc-card--showcase .pv-svc-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.pv-svc-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
}

.pv-svc-thumb--placeholder i {
  opacity: 0.9;
}

.pv-svc-row-main {
  flex: 1;
  min-width: 0;
}

.pv-svc-card--showcase .pv-svc-name {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
  color: var(--pv-card-text, #0f172a);
}

.pv-svc-card--showcase .pv-svc-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--pv-card-muted, rgba(15, 23, 42, 0.55));
  margin: 0 0 0.35rem;
  -webkit-line-clamp: 3;
}

.pv-svc-rating {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.pv-svc-rating i {
  font-size: 0.72rem;
}

.pv-svc-cta-btn--showcase {
  min-height: 48px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.pv-svc-cta-btn--showcase i {
  font-size: 0.78rem;
}

[data-surface="dark"] .pv-layout-showcase .pv-name--showcase {
  color: #f8fafc;
}

[data-surface="dark"] .pv-svc-card--showcase,
#publicScreen[data-surface="dark"] .pv-svc-card--showcase {
  background: var(--pv-card-bg, rgba(255, 255, 255, 0.97));
  color: var(--pv-card-text, #0f172a);
  border-color: var(--pv-card-border, rgba(255, 255, 255, 0.14));
  box-shadow: var(--pv-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.28));
}

[data-surface="dark"] .pv-layout-showcase .pv-svc-card--showcase .pv-svc-name,
[data-surface="dark"] .pv-layout-showcase .pv-svc-card--showcase .pv-svc-desc,
#publicScreen[data-surface="dark"] .pv-layout-showcase .pv-svc-card--showcase .pv-svc-name,
#publicScreen[data-surface="dark"] .pv-layout-showcase .pv-svc-card--showcase .pv-svc-desc {
  color: rgba(15, 23, 42, 0.62);
}

[data-surface="dark"] .pv-layout-showcase .pv-svc-card--showcase .pv-svc-name,
#publicScreen[data-surface="dark"] .pv-layout-showcase .pv-svc-card--showcase .pv-svc-name {
  color: #0f172a;
}

[data-surface="dark"] .pv-layout-showcase .pv-tagline--showcase,
[data-surface="dark"] .pv-layout-showcase .pv-bio--showcase {
  color: rgba(248, 250, 252, 0.72);
}

/* ── FAQ (akordeon — dotyk) ── */
.pv-faq-list { display: flex; flex-direction: column; gap: 0.45rem; }

.pv-faq-item {
  background: var(--pv-card-bg, #fff);
  border-radius: 12px;
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.06));
  overflow: hidden;
}

.pv-faq-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pv-faq-toggle span { flex: 1; line-height: 1.35; }

.pv-faq-chevron {
  font-size: 0.65rem;
  color: var(--pv-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.pv-faq-toggle.is-open .pv-faq-chevron {
  transform: rotate(180deg);
}

.pv-faq-a {
  font-size: 0.9rem;
  color: var(--pv-muted);
  line-height: 1.6;
  margin: 0;
  padding: 0 0.8rem 0.8rem;
}

.pv-faq-a[hidden] { display: none; }

/* ── Testimonials ── */
.pv-testi-list { display: flex; flex-direction: column; gap: 0.7rem; }

.pv-testi-card {
  position: relative;
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.06));
  border-radius: 16px;
  padding: 1.05rem 1.15rem;
  box-shadow: var(--pv-card-shadow, 0 2px 8px rgba(15,23,42,0.06));
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

/* Delikatny cudzysłów w tle — nadaje karcie charakter „opinii". */
.pv-testi-card::before {
  content: "\201C";
  position: absolute;
  top: -0.35em;
  right: 0.55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--pv-testi-accent, var(--pv-accent, #6366f1));
  opacity: 0.12;
  pointer-events: none;
}

.pv-testi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15,23,42,0.1);
  border-color: color-mix(in srgb, var(--pv-testi-accent, var(--pv-accent, #6366f1)) 32%, var(--pv-card-border, rgba(0,0,0,0.08)));
}

.pv-testi-stars {
  color: #f59e0b;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.55rem;
  text-shadow: 0 1px 2px rgba(245,158,11,0.25);
}

.pv-testi-stars-off { color: color-mix(in srgb, #f59e0b 22%, transparent); text-shadow: none; }

.pv-testi-text {
  position: relative;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--pv-card-text, #0f172a);
  margin: 0 0 0.85rem;
  text-wrap: pretty;
}

.pv-testi-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--pv-card-border, rgba(0,0,0,0.06)) 70%, transparent);
}

.pv-testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0.92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pv-testi-name { font-size: 0.9rem; font-weight: 700; margin: 0; color: var(--pv-card-text, #0f172a); letter-spacing: -0.01em; }
.pv-testi-role { font-size: 0.78rem; color: var(--pv-card-muted, rgba(15,23,42,0.6)); margin: 0.05rem 0 0; }

/* ── Pricing ── */
.pv-price-billing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  flex-wrap: wrap;
}

.pv-price-billing-label {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pv-muted, #64748b);
  cursor: pointer;
  padding: 0.2rem 0.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s;
}

.pv-price-billing-label.is-active {
  color: var(--pv-card-text, #0f172a);
}

.pv-price-billing-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  background: #dcfce7;
  color: #166534;
  line-height: 1.2;
}

.pv-price-billing-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 54px;
  height: 30px;
  flex-shrink: 0;
}

.pv-price-billing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pv-price-billing-slider {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: #e2e8f0;
  cursor: pointer;
  transition: background 0.2s;
}

.pv-price-billing-slider::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s;
}

.pv-price-billing-switch input:checked + .pv-price-billing-slider {
  background: var(--pv-billing-accent, var(--pv-accent, #6366f1));
}

.pv-price-billing-switch input:checked + .pv-price-billing-slider::before {
  transform: translateX(24px);
}

.pv-price-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  z-index: 0;
}

.pv-price-card {
  background: var(--pv-card-bg, #fff);
  border: 1.5px solid var(--pv-card-border, rgba(0,0,0,0.07));
  border-radius: 14px;
  padding: 0.85rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.pv-price-card--highlight {
  box-shadow: 0 4px 16px rgba(99,102,241,0.15);
  padding-top: 1rem;
}

.pv-price-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.pv-price-type i {
  font-size: 0.58rem;
  opacity: 0.85;
}

.pv-price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  z-index: 2;
}

.pv-price-card > .pv-btn,
.pv-price-card > a.pv-btn {
  margin-top: auto;
  flex-shrink: 0;
}

.pv-price-name { font-size: 0.8rem; font-weight: 700; margin: 0 0 0.4rem; }

.pv-svc-price-period {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pv-muted, #64748b);
}

.pv-price-compare {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pv-compare-price, var(--pv-card-muted, #64748b));
  text-decoration: line-through;
  opacity: 0.85;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.pv-price-compare:empty,
.pv-price-compare[hidden] {
  display: none;
}

.pv-detail-price-compare {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pv-compare-price, var(--pv-card-muted, #64748b));
  text-decoration: line-through;
  opacity: 0.92;
}

.pv-price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.45rem;
  margin-bottom: 0.55rem;
}

.pv-price-num { font-size: 1.4rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }

.pv-price-unit {
  font-size: 0.68rem;
  color: var(--pv-muted);
  line-height: 1.2;
  padding-bottom: 0.15em;
}

.pv-price-unit .pv-price-period::before {
  content: '/ ';
  opacity: 0.7;
}

.pv-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pv-price-features li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--pv-card-muted, #64748b);
  line-height: 1.3;
}

.pv-price-features li i { font-size: 0.62rem; flex-shrink: 0; }

/* ── Portfolio / Gallery (live preview) ── */
.pv-section-portfolio .pv-section-title {
  margin-bottom: 0.75rem;
}

.pv-portfolio {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* ── Portfolio: pliki (audio / PDF / dokumenty) ── */
.pv-files {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pv-portfolio + .pv-files,
.pv-files:not(:first-child) { margin-top: 0.75rem; }

.pv-file {
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
  box-shadow: var(--pv-card-shadow, 0 4px 18px rgba(15, 23, 42, 0.06));
}

.pv-file--audio { display: flex; flex-direction: column; gap: 0.6rem; }
.pv-file-head { display: flex; align-items: center; gap: 0.6rem; }

.pv-file-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 12%, transparent);
  color: var(--pv-accent, #6366f1);
}
.pv-file-ico--pdf   { background: #fef2f2; color: #ef4444; }
.pv-file-ico--image { background: #faf5ff; color: #a855f7; }

.pv-file-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.12rem; }
.pv-file-title {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--pv-card-text, inherit);
  overflow-wrap: anywhere;
}
.pv-file-sub { font-size: 0.72rem; color: var(--pv-card-muted, var(--pv-muted)); }

.pv-file-audio { width: 100%; height: 38px; }

.pv-file--doc {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pv-file--doc:hover { transform: translateY(-1px); box-shadow: var(--pv-card-shadow, 0 8px 24px rgba(15, 23, 42, 0.1)); }
.pv-file--doc:active { transform: scale(0.99); }
.pv-file-dl {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 14%, transparent);
  color: var(--pv-accent, #6366f1);
}

.pv-file--video { display: flex; flex-direction: column; gap: 0.5rem; }
.pv-file-video { width: 100%; border-radius: 10px; background: #000; }

.pv-portfolio-featured {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 168px;
  border: none;
  border-radius: 16px;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-color: var(--pv-detail-elevated, #f1f5f9);
  overflow: hidden;
  touch-action: manipulation;
  box-shadow: var(--pv-card-shadow, 0 4px 18px rgba(15, 23, 42, 0.1));
  transition: transform 0.15s ease;
}

.pv-portfolio-featured:active,
.pv-portfolio-thumb:active,
.pv-portfolio-cell:active {
  transform: scale(0.985);
}

.pv-portfolio-featured::after,
.pv-portfolio-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.pv-portfolio-cap {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.55rem;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
  line-height: 1.3;
}

.pv-portfolio-zoom {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 0.68rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pv-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.pv-portfolio-grid--natural {
  grid-auto-rows: auto;
}

.pv-portfolio--masonry .pv-portfolio-grid {
  grid-template-columns: repeat(2, 1fr);
}

.pv-portfolio-cell {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--pv-detail-elevated, #f1f5f9);
  touch-action: manipulation;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  transition: transform 0.15s ease;
}

.pv-portfolio-cell:active {
  transform: scale(0.985);
}

.pv-portfolio-cell img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.pv-portfolio-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.pv-portfolio-cell .pv-portfolio-zoom {
  width: 26px;
  height: 26px;
  font-size: 0.58rem;
  top: 0.4rem;
  right: 0.4rem;
}

/* Legacy thumb class (fallback) */
.pv-portfolio-thumb {
  position: relative;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  background-color: var(--pv-detail-elevated, #f1f5f9);
  overflow: hidden;
  touch-action: manipulation;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.pv-portfolio-thumb .pv-portfolio-zoom {
  width: 26px;
  height: 26px;
  font-size: 0.58rem;
  top: 0.4rem;
  right: 0.4rem;
}

/* Slider layout for portfolio */
.pv-portfolio--slider {
  gap: 0.7rem;
}

.pv-portfolio-slider {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pv-portfolio-slider-track-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--pv-card-shadow, 0 6px 22px rgba(15, 23, 42, 0.14));
}

.pv-portfolio-slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.pv-portfolio-slide {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
  min-height: 176px;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-color: var(--pv-detail-elevated, #f1f5f9);
  overflow: hidden;
  touch-action: manipulation;
}

.pv-portfolio-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.52) 100%);
  pointer-events: none;
}

.pv-portfolio-slide .pv-portfolio-cap {
  bottom: 0.65rem;
}

.pv-portfolio-slider-controls {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 0.55rem;
}

.pv-portfolio-slider-nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pv-card-border, rgba(0, 0, 0, 0.14));
  background: var(--pv-card-bg, rgba(255, 255, 255, 0.92));
  color: var(--pv-card-text, #0f172a);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.pv-portfolio-slider-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.pv-portfolio-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.38rem;
}

.pv-portfolio-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  border: none;
  padding: 0;
  background: color-mix(in srgb, var(--pv-card-text, #0f172a) 24%, transparent);
  cursor: pointer;
  transition: width 0.16s, background 0.16s;
}

.pv-portfolio-slider-dot.is-active {
  width: 20px;
  background: var(--pv-accent, #6366f1);
}

/* Legacy gallery grid (fallback) */
.pv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
}

.pv-gallery-item {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: #f1f5f9;
}

/* ── Stats ── */
.pv-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.pv-stat-item {
  min-width: 0;
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.06));
  border-radius: 12px;
  padding: 0.8rem 0.55rem;
  text-align: center;
}

.pv-stat-value { font-size: 1.35rem; font-weight: 800; margin: 0 0 0.2rem; line-height: 1; }
.pv-stat-label { font-size: 0.72rem; color: var(--pv-muted); margin: 0; line-height: 1.3; }

/* ── CTA ── */
.pv-cta-block {
  padding: 1.1rem 0.9rem;
  border-radius: 16px;
  color: inherit;
}

.pv-cta-heading {
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
  line-height: 1.3;
  color: inherit;
}

.pv-cta-sub {
  font-size: 0.72rem;
  color: var(--pv-muted);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

[data-surface="dark"] .pv-cta-block--light,
[data-surface="dark"] .pv-cta-block--gradient {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}

[data-surface="dark"] .pv-cta-block--gradient {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pv-accent, #6366f1) 28%, transparent),
    rgba(255, 255, 255, 0.09)
  );
}

[data-surface="dark"] .pv-cta-block--light .pv-cta-sub,
[data-surface="dark"] .pv-cta-block--gradient .pv-cta-sub {
  color: rgba(248, 250, 252, 0.76);
}

[data-surface="dark"] .pv-cta-block--dark {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

[data-surface="dark"] .pv-cta-block--dark .pv-cta-sub {
  color: rgba(248, 250, 252, 0.76);
}

[data-surface="dark"] .pv-cta-block--colored .pv-cta-sub {
  color: rgba(248, 250, 252, 0.88);
}

.pv-btn--cta {
  padding: 0.65rem 1.25rem;
  font-size: 0.78rem;
}

/* ── Formularze (prawdziwe pola — dotyk) ── */
.pv-form-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pv-form-field label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--pv-form-label, var(--pv-muted));
  margin-bottom: 0.25rem;
}

.pv-field-req {
  color: #ef4444;
  font-weight: 700;
}

.pv-field-opt {
  font-weight: 500;
  color: var(--pv-muted);
  opacity: 0.85;
}

.pv-form-field.is-error .pv-input {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.pv-form-field.is-error label {
  color: #b91c1c;
}

.pv-field-error {
  margin: 0.28rem 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  color: #dc2626;
}

.pv-checkout-legal {
  margin: 0.85rem 0 0.55rem;
  font-size: 0.62rem;
  line-height: 1.55;
  color: var(--pv-muted);
  text-align: center;
}

.pv-checkout-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pv-checkout-legal a:hover {
  color: var(--pv-card-text, #0f172a);
}

.pv-checkout-stripe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--pv-muted);
  text-align: center;
}

.pv-checkout-stripe i {
  font-size: 0.62rem;
  opacity: 0.75;
}

.pv-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  font-size: 16px;
  font-family: inherit;
  color: var(--pv-input-text, var(--pv-card-text, #0f172a));
  background-color: var(--pv-input-bg, var(--pv-card-bg, #ffffff));
  border: 1px solid var(--pv-input-border, var(--pv-card-border, rgba(15, 23, 42, 0.12)));
  border-radius: 10px;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: light;
}

.pv-input:focus {
  outline: none;
  border-color: var(--pv-accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.pv-input::placeholder,
.pv-input--area::placeholder {
  color: rgba(15, 23, 42, 0.42);
  opacity: 1;
}

.pv-input--area {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.pv-form-success {
  font-size: 0.75rem;
  font-weight: 600;
  color: #059669;
  text-align: center;
  padding: 0.65rem;
  background: #ecfdf5;
  border-radius: 10px;
  margin: 0.25rem 0 0;
}

.pv-form-success[hidden] { display: none; }

/* Formularz kontaktowy na ciemnym tle profilu — jasna karta jak widok usługi */
[data-surface="dark"] .pv-section--form .pv-form-block,
#publicScreen[data-surface="dark"] .pv-section--form .pv-form-block {
  background: var(--pv-card-bg, rgba(255, 255, 255, 0.97));
  color: var(--pv-card-text, #0f172a);
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  border-radius: 20px;
  padding: 1rem 1.05rem;
  box-shadow: var(--pv-card-shadow, 0 8px 28px rgba(0, 0, 0, 0.22));
  color-scheme: light;
}

[data-surface="dark"] .pv-section--form .pv-form-field label,
#publicScreen[data-surface="dark"] .pv-section--form .pv-form-field label {
  color: var(--pv-card-muted, rgba(15, 23, 42, 0.62));
}

[data-surface="dark"] .pv-section--form .pv-input,
[data-surface="dark"] .pv-section--form .pv-input--area,
#publicScreen[data-surface="dark"] .pv-section--form .pv-input,
#publicScreen[data-surface="dark"] .pv-section--form .pv-input--area {
  color: var(--pv-input-text, #0f172a);
  background-color: var(--pv-input-bg, #ffffff);
  border-color: var(--pv-input-border, rgba(15, 23, 42, 0.12));
}

@media (prefers-color-scheme: dark) {
  .pv-form-field label {
    color: var(--pv-form-label, var(--pv-muted));
  }

  .pv-input,
  .pv-input--area,
  select.pv-input,
  textarea.pv-input {
    color: var(--pv-input-text, #0f172a);
    background-color: var(--pv-input-bg, #ffffff);
    border-color: var(--pv-input-border, rgba(15, 23, 42, 0.12));
  }

  .pv-detail-overlay,
  .pv-detail-overlay .pv-form-field label,
  .pv-booking-sheet .pv-form-field label,
  .pv-commerce-sheet .pv-form-field label {
    color: var(--pv-form-label, rgba(15, 23, 42, 0.62));
  }
}

.pv-section-sub {
  font-size: 0.78rem;
  color: var(--pv-hero-muted, var(--pv-muted));
  line-height: 1.5;
  margin: -0.35rem 0 0.75rem;
}

/* Rezerwacja — kalendarz i godziny */
.pv-booking-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pv-muted);
  margin: 0 0 0.45rem;
}

.pv-booking-days {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin-bottom: 0.55rem;
}

.pv-booking-day {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 52px;
  padding: 0.45rem 0.5rem;
  border: 1.5px solid var(--pv-card-border);
  border-radius: 10px;
  background: var(--pv-card-bg, #fff);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.pv-booking-day.is-selected {
  border-color: var(--pv-accent, #6366f1);
  background: rgba(99, 102, 241, 0.08);
}

.pv-booking-day-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: inherit;
}

.pv-booking-day-sub {
  font-size: 0.6rem;
  color: var(--pv-muted);
}

.pv-booking-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.pv-booking-time {
  min-height: 40px;
  min-width: 64px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--pv-card-border);
  border-radius: 8px;
  background: var(--pv-card-bg, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.pv-booking-time.is-selected {
  border-color: var(--pv-accent, #6366f1);
  background: var(--pv-accent, #6366f1);
  color: var(--pv-on-accent, #fff);
}

.pv-booking-fallback {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pv-avail-card {
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
}

.pv-avail-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--pv-card-border);
}

.pv-avail-row:last-child { border-bottom: none; }

.pv-avail-day { font-weight: 700; flex-shrink: 0; }

.pv-avail-hours { color: var(--pv-muted); text-align: right; }

.pv-avail-hint {
  font-size: 0.68rem;
  color: var(--pv-muted);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Proces */
.pv-process-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
}

.pv-process-list[data-count="1"] {
  grid-template-columns: minmax(0, 320px);
}

.pv-process-list[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.pv-process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.06));
  border-radius: 14px;
  box-shadow: var(--pv-card-shadow, 0 2px 8px rgba(15,23,42,0.06));
  padding: 0.9rem 0.85rem 0.85rem;
}

.pv-process-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.65rem;
}

.pv-process-icon {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.pv-process-title {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--pv-card-text, var(--pv-hero-text, inherit));
}

.pv-process-desc {
  font-size: 0.72rem;
  color: var(--pv-card-muted, var(--pv-hero-muted, var(--pv-muted)));
  line-height: 1.55;
  margin: 0;
}

/* Wideo */
.pv-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.pv-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.pv-video-caption {
  font-size: 0.72rem;
  color: var(--pv-muted);
  text-align: center;
  margin-top: 0.45rem;
}

.pv-testi-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pv-gallery-grid--masonry {
  grid-template-columns: repeat(2, 1fr);
}

.pv-gallery-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.25rem 0.35rem;
  font-size: 0.58rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
}

.pv-gallery-item { position: relative; }

.pv-toast {
  position: sticky;
  bottom: 0.5rem;
  margin: 0.5rem 0.9rem 0;
  padding: 0.55rem 0.75rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 20;
}

.pv-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dotyk w ramce telefonu */
.sb-phone-body,
.sb-phone-body .pv-scroll {
  pointer-events: auto;
  touch-action: pan-y;
}

.sb-device-screen .pv-scroll * {
  -webkit-user-select: none;
  user-select: none;
}

.sb-device-screen .pv-scroll a.pv-soc,
.sb-device-screen .pv-detail-overlay a.pv-soc {
  -webkit-user-select: auto;
  user-select: auto;
  pointer-events: auto;
}

.sb-device-screen .pv-input,
.sb-device-screen .pv-input--area,
.sb-device-screen textarea,
.sb-device-screen select {
  -webkit-user-select: text;
  user-select: text;
}

@media (max-width: 380px) {
  .pv-stats-row { grid-template-columns: repeat(2, 1fr); }
  .pv-stat-item { min-width: 0; flex: unset; }
  .pv-booking-fallback { grid-template-columns: 1fr; }
  .pv-svc-foot { flex-direction: column; align-items: stretch; }
  .pv-svc-foot .pv-btn { width: 100%; justify-content: center; }
  .pv-portfolio-slide {
    min-height: 158px;
  }
  .pv-portfolio-slider-controls {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 0.4rem;
  }
  .pv-portfolio-slider-nav {
    width: 32px;
    height: 32px;
  }
}

/* Override legacy pv-detail-view padding when inside new overlay */
.pv-detail-overlay .pv-detail-view {
  padding: 0;
  min-height: 100%;
}

/* ── Rich text ── */
.pv-rich-text {
  font-size: 0.76rem;
  line-height: 1.65;
  color: inherit;
}

.pv-rich-text h2 {
  font-size: 0.88rem;
  font-weight: 800;
  margin: 0.6rem 0 0.3rem;
  letter-spacing: -0.01em;
  color: var(--pv-hero-text, inherit);
}
.pv-rich-text h2:first-child { margin-top: 0; }
.pv-rich-text h3 {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.45rem 0 0.25rem;
  color: var(--pv-hero-text, inherit);
}
.pv-rich-text h3:first-child { margin-top: 0; }
.pv-rich-text p  { margin: 0 0 0.5rem; }
.pv-rich-text p:last-child { margin-bottom: 0; }
.pv-rich-text ul { padding-left: 1.1rem; margin: 0 0 0.5rem; }
.pv-rich-text li { margin-bottom: 0.25rem; }

/* ── Embed / Calendar placeholders ── */
.pv-embed-placeholder,
.pv-embed-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  background: var(--pv-card-bg, #fff);
  border: 1px dashed var(--pv-card-border, rgba(0,0,0,0.1));
  border-radius: 12px;
  text-align: center;
  color: var(--pv-muted);
  font-size: 0.72rem;
}

.pv-embed-placeholder i,
.pv-embed-preview i { font-size: 1.3rem; opacity: 0.4; }

.pv-embed-placeholder p { margin: 0; }

/* ── Divider ── */
.pv-divider { margin: 0.25rem 0; }

.pv-divider--line {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 0.75rem 0.9rem;
}

[data-surface="dark"] .pv-divider--line { background: rgba(255,255,255,0.1); }

.pv-divider--space { height: 1.25rem; }

.pv-divider--dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem 0;
}

.pv-divider--dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
}

.pv-divider--wave {
  width: 100%;
  height: 18px;
  overflow: hidden;
  color: var(--pv-muted);
}

.pv-divider--wave svg { width: 100%; height: 100%; }

/* ── Empty ── */
.pv-empty {
  font-size: 0.72rem;
  color: var(--pv-muted);
  text-align: center;
  padding: 0.75rem;
}

/* ================================================================
   Original — Podgląd szczegółów modułu na telefonie
   ================================================================ */

/* Podgląd szczegółów modułu na telefonie */

.pv-detail-hero:not(.pv-detail-hero--carousel):not(.pv-detail-hero--empty) {
  text-align: center;
  margin-bottom: 0.85rem;
}

.pv-detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.pv-detail-view h2 {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}

.pv-detail-price {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0.35rem 0 0.5rem;
}

.pv-detail-desc {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--pv-muted);
  margin-bottom: 0.65rem;
}

.pv-type-extra {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pv-type-extra li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--pv-muted);
}

.pv-type-extra li i {
  width: 1.1rem;
  color: var(--pv-accent, #6366f1);
  opacity: 0.9;
}

.pv-widget {
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.06));
  border-radius: 14px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--pv-card-shadow, 0 2px 10px rgba(15,23,42,0.06));
}

.pv-widget--calendar .pv-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.pv-cal-month {
  font-size: 0.82rem;
  font-weight: 700;
}

.pv-cal-nav {
  display: flex;
  gap: 0.35rem;
  font-size: 0.65rem;
  opacity: 0.45;
}

.pv-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--pv-muted);
  margin-bottom: 0.35rem;
}

.pv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.pv-cal-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: inherit;
  color: inherit;
  cursor: default;
  padding: 0;
}

.pv-cal-day--muted { opacity: 0.35; }
.pv-cal-day--active { font-weight: 800; }

.pv-cal-slot {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: var(--pv-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pv-widget--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pv-chip {
  padding: 0.45rem 0.7rem;
  border-radius: 99px;
  border: 1px solid var(--pv-card-border);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: default;
}

.pv-chip--custom {
  font-weight: 600;
  opacity: 0.75;
}

.pv-widget--form .pv-form-row {
  display: block;
  margin-bottom: 0.5rem;
}

.pv-widget--form .pv-form-row span:first-child {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--pv-muted);
}

.pv-form-input {
  display: block;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid;
  font-size: 0.72rem;
  background: rgba(0,0,0,0.02);
}

.pv-widget--checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pv-widget--checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.76rem;
  line-height: 1.35;
}

.pv-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  flex-shrink: 0;
}

.pv-widget--steps {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pv-step {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  opacity: 0.55;
}

.pv-step--current { opacity: 1; }

.pv-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pv-step strong {
  display: block;
  font-size: 0.76rem;
}

.pv-step span {
  font-size: 0.68rem;
  color: var(--pv-muted);
}

.pv-detail-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--pv-muted);
  margin-top: 0.65rem;
}

.pv-detail-trust i { color: #10b981; }

.pv-cta {
  width: 100%;
  padding: 0.85rem;
  border: none;
  color: #fff;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: default;
  margin-top: 0.25rem;
}

.pv-cta--rounded { border-radius: 12px; }
.pv-cta--pill { border-radius: 99px; }

.pv-detail-sticky {
  margin-top: auto;
  padding-top: 0.5rem;
}

.pv-detail-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 3rem 0.9rem 1.5rem;
}

.pv-back {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--pv-card-text, #0f172a);
  margin-bottom: 0.65rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  line-height: 1;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}

.pv-back:active {
  transform: scale(0.94);
}

[data-surface="dark"] .pv-back {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.pv-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.pv-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: rgba(0,0,0,0.05);
}

.pv-course-modules {
  display: grid;
  gap: 0.4rem;
}

.pv-course-mod {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
  font-size: 0.74rem;
}

.pv-course-mod i {
  color: var(--pv-accent);
  opacity: 0.85;
}

/* ================================================================
   Service Detail Overlay — Stan Store style
   ================================================================ */

/* Container inside phone screen */
.sb-phone-body,
.sb-device-screen {
  position: relative;
  overflow: hidden;
}

.pv-detail-overlay {
  position: absolute;
  inset: 0;
  background: var(--pv-detail-bg, #ffffff);
  color: var(--pv-card-text, #0f172a);
  z-index: 30;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

.pv-detail-overlay::-webkit-scrollbar {
  width: 4px;
}

.pv-detail-overlay::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 99px;
}

.pv-detail-overlay.is-booking-open {
  overflow: hidden;
}

.pv-detail-overlay.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Detail topbar */
.pv-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.65rem 0.9rem 0.5rem;
  background: inherit;
}

/* Detail image */
.pv-detail-img {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #f1f5f9;
  flex-shrink: 0;
}

.pv-detail-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Detail body content */
.pv-detail-body {
  padding: 1rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pv-detail-name {
  font-size: 1.32rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-price-big {
  font-size: 1.48rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  display: inline;
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-period {
  font-size: 0.88rem;
  color: var(--pv-detail-muted, #475569);
  margin-left: 0.2rem;
}

.pv-detail-desc {
  font-size: 0.94rem;
  color: var(--pv-detail-muted, #334155);
  line-height: 1.65;
  margin: 0.6rem 0 1rem;
}

/* Calendar section inside detail */
.pv-detail-cal-section {
  margin-bottom: 0.75rem;
}

.pv-detail-overlay .pv-month-cal {
  background: var(--pv-detail-elevated, #f8fafc);
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.1));
  box-shadow: none;
}

.pv-detail-overlay .pv-cal-month-label,
.pv-detail-overlay .pv-cal-day--avail {
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-overlay .pv-cal-weekdays {
  color: var(--pv-detail-muted, #475569);
}

.pv-detail-overlay .pv-cal-day--past,
.pv-detail-overlay .pv-cal-day--unavail {
  color: var(--pv-detail-compare, #94a3b8);
  opacity: 1;
}

.pv-detail-overlay .pv-form-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pv-detail-muted, #475569);
}

.pv-detail-overlay .pv-input {
  font-size: 16px;
  color: var(--pv-input-text, #0f172a);
}

.pv-detail-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.pv-detail-submit {
  margin-top: 0.25rem !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  padding: 0.85rem 1rem !important;
  min-height: 50px;
}

/* ── Month Calendar (detail view & booking block) ── */
.pv-month-cal {
  background: var(--pv-card-bg, #fff);
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.07));
  border-radius: 14px;
  padding: 0.75rem 0.7rem;
  margin-bottom: 0.65rem;
  box-shadow: var(--pv-card-shadow, 0 2px 10px rgba(15,23,42,0.06));
}

.pv-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.pv-cal-month-label {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pv-cal-nav-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--pv-card-border, rgba(0,0,0,0.1));
  border-radius: 8px;
  background: var(--pv-card-bg, #fff);
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--pv-card-text, #0f172a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.12s;
}

.pv-cal-nav-btn:hover {
  background: var(--pv-card-border, rgba(0,0,0,0.06));
}

.pv-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--pv-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.pv-cal-day {
  aspect-ratio: 1;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--pv-card-text, #0f172a);
  cursor: default;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  position: relative;
}

.pv-cal-day--empty { pointer-events: none; }

.pv-cal-day--past {
  color: var(--pv-muted);
  opacity: 0.4;
}

.pv-cal-day--exception {
  text-decoration: line-through;
  opacity: 0.35;
}

.pv-cal-day--unavail {
  color: var(--pv-muted);
  opacity: 0.35;
}

.pv-cal-day--avail {
  cursor: pointer;
  color: var(--pv-card-text, #0f172a);
  font-weight: 700;
}

.pv-cal-day--avail:hover {
  background: rgba(var(--pv-accent, #6366f1), 0.1);
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 12%, transparent);
}

.pv-cal-day--avail.is-selected {
  background: var(--pv-accent, #6366f1);
  color: var(--pv-on-accent, #fff);
  border-radius: 9px;
}

/* Time slots in detail view */
.pv-detail-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  min-height: 0;
}

.pv-detail-times:empty::before {
  content: 'Wybierz dzień, aby zobaczyć dostępne godziny';
  font-size: 0.72rem;
  color: var(--pv-muted);
  font-style: italic;
}

/* Override: phone body needs position:relative */
#pbPhoneScreen {
  position: relative;
  overflow: hidden;
}

/* ── Rich service detail (product page) ── */
.pv-detail-overlay,
.pv-booking-sheet,
.pv-commerce-sheet,
.pv-detail-overlay .pv-detail-view,
.pv-detail-overlay .pv-detail-view--rich {
  --pv-card-bg: var(--pv-detail-elevated, #ffffff);
  --pv-card-text: var(--pv-detail-text, #0f172a);
  --pv-card-muted: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
  --pv-muted: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
  --pv-card-border: var(--pv-detail-border, rgba(15, 23, 42, 0.1));
  --pv-card-shadow: none;
  --pv-compare-price: var(--pv-detail-compare, #64748b);
  --pv-input-bg: #ffffff;
  --pv-input-text: #0f172a;
  --pv-input-border: rgba(15, 23, 42, 0.12);
  --pv-form-label: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
}

.pv-detail-overlay,
.pv-booking-sheet {
  --pv-compare-price: var(--pv-detail-compare, #64748b);
  background: var(--pv-page-accent-canvas, var(--pv-detail-bg, #ffffff));
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-overlay {
  --pv-card-muted: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
}

.pv-detail-view--rich {
  background: var(--pv-page-accent-canvas, var(--pv-detail-bg, #fff));
  font-size: 1rem;
}

.pv-detail-topbar--float {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  padding: 0.7rem 0.85rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 100%);
  pointer-events: none;
}

.pv-detail-topbar--float .pv-back {
  pointer-events: auto;
  margin-bottom: 0;
}

.pv-detail-topbar--float .pv-back--detail {
  background: var(--pv-detail-hero-back-bg, rgba(15, 23, 42, 0.55));
  color: var(--pv-detail-hero-back-color, #fff);
  border: 1px solid var(--pv-detail-hero-back-border, rgba(255, 255, 255, 0.2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.pv-detail-view--no-hero .pv-detail-topbar--float {
  position: sticky;
  background: var(--pv-detail-bg, #fff);
  border-bottom: 1px solid var(--pv-card-border, rgba(0, 0, 0, 0.06));
  pointer-events: auto;
}

.pv-detail-view--no-hero .pv-detail-topbar--float .pv-back--detail {
  background: var(--pv-detail-back-bg, rgba(0, 0, 0, 0.06));
  color: var(--pv-detail-back-color, var(--pv-card-text, #0f172a));
  border: 1px solid var(--pv-detail-back-border, rgba(0, 0, 0, 0.08));
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pv-detail-hero {
  position: relative;
  width: 100%;
  height: 228px;
  flex-shrink: 0;
  background-color: #f1f5f9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.pv-detail-hero--carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    transparent 38%,
    transparent 62%,
    rgba(0, 0, 0, 0.22) 100%
  );
}

.pv-detail-hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.pv-detail-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.25s;
}

.pv-detail-hero-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 3;
}

.pv-detail-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.pv-detail-hero-dot.is-active {
  width: 20px;
  background: #fff;
}

.pv-detail-body--rich {
  padding: 1.2rem 1rem 2rem;
  margin-top: 0;
  border-radius: 20px 20px 0 0;
  background: transparent;
  position: relative;
  z-index: 4;
  box-shadow: none;
}

.pv-detail-view--no-hero .pv-detail-body--rich {
  border-radius: 0;
  box-shadow: none;
  padding-top: 0.35rem;
}

.pv-detail-overlay .pv-detail-name {
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-overlay .pv-detail-desc,
.pv-detail-overlay .pv-detail-body--rich .pv-detail-desc,
.pv-detail-overlay .pv-desc-rich p {
  color: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
}

.pv-detail-overlay .pv-desc-rich h2,
.pv-detail-overlay .pv-desc-h2 {
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-overlay .pv-desc-rich h3,
.pv-detail-overlay .pv-desc-h3,
.pv-detail-overlay .pv-desc-rich ul,
.pv-detail-overlay .pv-desc-rich ol {
  color: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
}

.pv-detail-overlay .pv-payments-blocked-note {
  color: var(--pv-detail-muted, rgba(15, 23, 42, 0.62));
  background: rgba(15, 23, 42, 0.06);
}

.pv-detail-overlay .pv-detail-price-card,
.pv-detail-overlay .pv-detail-ready-card {
  border-color: var(--pv-card-border, rgba(15, 23, 42, 0.1));
}

.pv-detail-overlay .pv-detail-price-big,
.pv-detail-overlay .pv-detail-ready-price,
.pv-detail-overlay .pv-detail-action-amount {
  color: var(--pv-price-accent, var(--pv-accent, #6366f1));
}

.pv-detail-overlay .pv-detail-price-block .pv-detail-price-big {
  color: var(--pv-price-accent, var(--pv-accent, #6366f1));
}

.pv-detail-overlay .pv-detail-price-block .pv-detail-price-compare,
.pv-detail-overlay .pv-detail-price-block .pv-detail-period {
  color: var(--pv-compare-price, #64748b);
}

.pv-detail-overlay .pv-detail-price-compare,
.pv-detail-overlay .pv-svc-price-old,
.pv-detail-overlay .pv-price-compare {
  color: var(--pv-compare-price, #64748b);
}

.pv-detail-overlay .pv-detail-chip,
.pv-detail-overlay .pv-detail-chip--type {
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.12));
  color: var(--pv-detail-text, #0f172a);
  background: var(--pv-detail-elevated, #f8fafc);
}

.pv-detail-overlay .pv-detail-chip i {
  color: #475569;
  opacity: 1;
}

/* Pusty „cover" usługi — premium placeholder zamiast gołej bieli.
   Korzysta z tokenów detalu/akcentu, więc wtapia się w motyw (jasny i ciemny). */
.pv-detail-hero--empty,
.pv-detail-hero--empty-mono {
  background:
    radial-gradient(125% 150% at 50% -10%,
      color-mix(in srgb, var(--pv-accent, #6366f1) 26%, transparent) 0%,
      transparent 58%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--pv-detail-elevated, #f1f5f9) 70%, var(--pv-detail-bg, #ffffff)) 0%,
      var(--pv-detail-bg, #ffffff) 100%) !important;
}

.pv-detail-hero--empty::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 120%,
      color-mix(in srgb, var(--pv-accent, #6366f1) 12%, transparent), transparent 70%);
}

.pv-detail-hero-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  font-size: 1.6rem;
  color: var(--pv-accent, #6366f1);
  background: color-mix(in srgb, var(--pv-detail-bg, #ffffff) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv-accent, #6366f1) 30%, transparent);
  box-shadow:
    0 10px 26px -12px color-mix(in srgb, var(--pv-accent, #6366f1) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pv-detail-hero--empty-mono i {
  color: var(--pv-accent, #6366f1);
}

.pv-detail-chips {
  margin-bottom: 0.15rem;
}

.pv-detail-chips .pv-svc-badges--detail {
  margin-bottom: 0;
}

.pv-detail-price-card {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid;
  border-radius: 14px;
  margin: 0.5rem 0 1rem;
}

.pv-detail-section {
  margin-bottom: 1.15rem;
}

.pv-detail-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pv-card-muted, #475569);
  margin: 0 0 0.5rem;
}

.pv-detail-body--rich .pv-detail-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--pv-card-muted, #334155);
  margin: 0;
}

.pv-detail-section--portfolio .pv-detail-section-title {
  margin-bottom: 0.6rem;
}

.pv-detail-portfolio-desktop {
  display: none;
}

.pv-detail-portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  align-items: start;
}

.pv-detail-section--portfolio .pv-portfolio-cell img {
  max-height: 92px;
  width: 100%;
  object-fit: cover;
}

.pv-detail-portfolio-item.is-active {
  outline: 2px solid var(--pv-accent, #6366f1);
  outline-offset: 2px;
}

.pv-detail-section--portfolio .pv-portfolio-cell {
  cursor: pointer;
}

.pv-detail-section--portfolio .pv-portfolio-cell .pv-portfolio-zoom {
  pointer-events: none;
}

@media (min-width: 769px) {
  .pv-detail-section--portfolio .pv-detail-portfolio {
    display: none;
  }

  .pv-detail-section--portfolio .pv-detail-portfolio-desktop {
    display: block;
    max-width: 100%;
  }

  .pv-detail-section--portfolio .pv-detail-portfolio-desktop .pv-portfolio-grid--natural {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .pv-detail-section--portfolio .pv-detail-portfolio-desktop .pv-portfolio-cell img {
    max-height: 118px;
  }
}

@media (min-width: 1024px) {
  .pv-portfolio-grid--natural {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Gallery lightbox (preview only) */
.pv-gallery-lightbox {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s;
}

#publicScreen .pv-gallery-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 10050;
}

.pv-gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pv-gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.pv-gallery-lightbox-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0.65rem 1.5rem;
  box-sizing: border-box;
  pointer-events: none;
}

.pv-gallery-lightbox-panel > * {
  pointer-events: auto;
}

.pv-gallery-lightbox-img {
  width: 100%;
  max-height: min(58vh, 360px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.04);
}

.pv-gallery-lightbox-caption {
  margin: 0.65rem 0 0;
  max-width: 92%;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  line-height: 1.4;
}

.pv-gallery-lightbox-counter {
  margin-top: 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.pv-gallery-lightbox-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.pv-gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.pv-gallery-lightbox-nav--next {
  right: 0.35rem;
}

.pv-gallery-lightbox-nav:not(.pv-gallery-lightbox-nav--next) {
  left: 0.35rem;
}

.pv-gallery-lightbox-nav[hidden] {
  display: none;
}

.pv-detail-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.25rem 0 0.65rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

.pv-detail-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pv-detail-trust-row i {
  color: #10b981;
}

.pv-detail-ready-card {
  display: flex;
  /* Cena wyrównana do góry — przy zawijającym się opisie nie wisi samotnie
     na środku wysokiej karty, tylko stoi w jednej linii z nagłówkiem. */
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.95rem 1.05rem;
  margin-bottom: 1rem;
  border: 2px solid;
  border-radius: 16px;
  color-scheme: light;
}

.pv-detail-ready-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 9rem;
  min-width: 9rem;
}

.pv-detail-ready-text strong {
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--pv-card-text, #0f172a);
}

.pv-detail-ready-text span {
  font-size: 0.92rem;
  color: var(--pv-card-muted, #475569);
  line-height: 1.45;
}

.pv-detail-ready-price {
  font-size: 1.12rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Strona produktu — kontener treści (lewo) + panel zakupu (prawo) ──
   Mobile: stos pionowy (jak dotychczas). Desktop (≥1024) przechodzi w 2 kolumny
   w blokach scoped do #publicScreen (patrz profile.html). */
.pv-detail-main {
  position: relative;
}
.pv-detail-buy {
  position: relative;
  z-index: 5;
  background: var(--pv-detail-bg, #fff);
  padding: 0 1.1rem;
  display: flex;
  flex-direction: column;
}
.pv-detail-extra {
  position: relative;
  z-index: 5;
  background: var(--pv-detail-bg, #fff);
  padding: 0 1.1rem 1.1rem;
}
.pv-detail-extra:empty {
  display: none;
}
/* CTA prawej kolumny — tylko desktop (mobile korzysta z przyklejonej stopki) */
.pv-detail-buy-cta {
  display: none;
}

.pv-detail-view--rich.pv-detail-view--session {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--pv-page-accent-canvas, #ffffff);
}

.pv-detail-view--rich.pv-detail-view--session .pv-detail-body--rich {
  flex: 1 1 auto;
  padding-bottom: 0.35rem;
}

/* ── Session booking: product footer + slide-up sheet ── */
.pv-detail-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pv-detail-view--rich.pv-detail-view--session .pv-detail-footer {
  margin-top: 0;
  flex-shrink: 0;
}

.pv-detail-overlay.is-booking-open .pv-detail-stack {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.pv-detail-view--session {
  padding-bottom: 0;
}

.pv-detail-view--session .pv-detail-body {
  padding-bottom: 1rem;
}

.pv-detail-footer {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 25;
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--pv-page-accent-canvas, var(--pv-detail-bg, #ffffff));
  border-top: 1px solid var(--pv-page-accent-border, rgba(15, 23, 42, 0.06));
  pointer-events: auto;
}

.pv-detail-overlay.is-booking-open .pv-detail-footer {
  display: none;
}

/* Strona publiczna (układ z .pv-detail-buy): nota „płatności niedostępne" jest
   już pokazana w treści nad CTA, więc w przyklejonej stopce ją chowamy — dzięki
   temu przycisk siedzi równo przy dolnej krawędzi, a nie wisi nad notą. */
.pv-detail-buy ~ .pv-detail-footer .pv-payments-blocked-note {
  display: none;
}

.pv-detail-footer-cta {
  width: 100%;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 0.85rem 1rem !important;
  min-height: 50px;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pv-booking-sheet[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.pv-booking-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pv-detail-bg, #ffffff);
  color: var(--pv-card-text, #0f172a);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none !important;
}

.pv-booking-sheet.is-open {
  z-index: 50;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto !important;
}

.pv-booking-sheet-head {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 40px 1fr 72px;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem 0.5rem;
  background: var(--pv-detail-bg, #ffffff);
  border-bottom: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.08));
}

.pv-booking-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--pv-detail-elevated, rgba(0, 0, 0, 0.06));
  color: var(--pv-detail-text, #0f172a);
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.pv-booking-sheet-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--pv-detail-text, #0f172a);
}

.pv-booking-progress {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}

.pv-booking-progress-seg {
  width: 14px;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--pv-detail-text, #0f172a) 18%, transparent);
  transition: background 0.2s, width 0.2s;
}

.pv-booking-progress-seg.is-active {
  width: 22px;
  background: var(--pv-accent, #6366f1);
}

.pv-booking-progress-seg.is-done {
  background: var(--pv-accent, #6366f1);
  opacity: 0.5;
}

.pv-booking-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 0.85rem 1rem 0.75rem;
}

.pv-booking-krok {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-detail-muted, #475569);
  margin: 0 0 1rem;
}

.pv-booking-date-title {
  font-size: 1.42rem;
  font-weight: 800;
  margin: 0 0 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--pv-detail-text, #0f172a);
}

.pv-booking-step[hidden] {
  display: none !important;
}

.pv-month-cal--booking {
  border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.1));
  box-shadow: none;
  padding: 0.7rem 0.65rem;
  margin: 0;
  background: var(--pv-detail-elevated, #f8fafc);
  border-radius: 14px;
}

.pv-month-cal--booking .pv-cal-head {
  margin-bottom: 0.65rem;
  gap: 0.45rem;
}

.pv-month-cal--booking .pv-cal-month-label {
  flex: 1;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--pv-detail-text, #0f172a);
}

.pv-month-cal--booking .pv-cal-nav-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--pv-detail-bg, #ffffff);
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.12));
  color: var(--pv-detail-text, #0f172a);
}

.pv-month-cal--booking .pv-cal-weekdays {
  margin-bottom: 0.45rem;
  color: var(--pv-detail-muted, #475569);
}

.pv-month-cal--booking .pv-cal-day--avail {
  color: var(--pv-detail-text, #0f172a);
  font-weight: 700;
}

.pv-month-cal--booking .pv-cal-day--past,
.pv-month-cal--booking .pv-cal-day--unavail {
  color: var(--pv-detail-compare, #94a3b8);
  opacity: 1;
}

.pv-month-cal--booking .pv-cal-day--avail:hover {
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 14%, transparent);
}

.pv-month-cal--booking .pv-cal-day--avail.is-selected {
  background: var(--pv-accent, #6366f1);
  color: var(--pv-on-accent, #ffffff);
}

.pv-booking-slot-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pv-booking-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--pv-card-border, rgba(0,0,0,0.1));
  border-radius: 14px;
  background: var(--pv-detail-elevated, var(--pv-card-bg, #fff));
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s;
}

.pv-booking-slot-time {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pv-card-text, #0f172a);
}

.pv-booking-slot-dur-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pv-detail-muted, #64748b);
}

.pv-booking-sheet .pv-booking-slot-time {
  color: var(--pv-detail-text, #0f172a);
}

.pv-booking-slot.is-selected {
  border-color: var(--pv-accent, #6366f1);
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 10%, var(--pv-detail-elevated, #f1f5f9));
}

.pv-booking-no-slots {
  margin: 0.5rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--pv-detail-elevated, rgba(15, 23, 42, 0.06));
  color: var(--pv-detail-muted, rgba(15, 23, 42, 0.65));
  font-size: 0.875rem;
  text-align: center;
}

.pv-booking-slot.is-selected .pv-booking-slot-time {
  color: var(--pv-detail-text, #0f172a);
}

.pv-booking-summary {
  display: flex;
  flex-direction: column;
  gap: 0.68rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.1rem;
  border-radius: 16px;
  background: var(--pv-detail-elevated, #f8fafc);
  border: 1.5px solid var(--pv-detail-border, rgba(15, 23, 42, 0.1));
}

.pv-booking-summary-submit {
  display: none;
  width: 100%;
  min-height: 50px;
  margin-top: 0.85rem;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pv-booking-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.88rem;
}

.pv-booking-summary-row span {
  color: var(--pv-detail-muted, #475569);
}

.pv-booking-summary-row strong {
  font-weight: 800;
  text-align: right;
  font-size: 0.96rem;
  color: var(--pv-detail-text, #0f172a);
}

.pv-booking-summary-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Zapytanie o projekt — czytelniejsze na mobile */
.pv-inquiry-sheet .pv-booking-summary {
  background: var(--pv-detail-elevated, #f8fafc);
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.1));
}

.pv-inquiry-note {
  margin: 0.15rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--pv-detail-muted, #475569);
  background: var(--pv-detail-sheet, #fff);
  border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.1));
}

.pv-inquiry-form .pv-input--area {
  min-height: 5.5rem;
  font-size: 16px; /* zapobiega zoom na iOS */
}

.pv-inquiry-sheet.is-step-summary .pv-inquiry-summary-submit {
  display: inline-flex;
  min-height: 52px;
  font-size: 0.92rem !important;
  border-radius: 14px;
}

@media (max-width: 480px) {
  .pv-inquiry-sheet .pv-booking-summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .pv-inquiry-sheet .pv-booking-summary-row strong {
    text-align: left;
    font-size: 1rem;
  }

  .pv-inquiry-sheet .pv-booking-sheet-title {
    font-size: 1.05rem;
    line-height: 1.25;
    padding-right: 2.5rem;
  }

  .pv-inquiry-form .pv-form-field label {
    font-size: 0.82rem;
  }
}

.pv-booking-sheet-foot {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 0.65rem;
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pv-detail-border, transparent);
  background: var(--pv-detail-bg, #ffffff);
}

.pv-commerce-summary-submit {
  display: inline-flex;
  width: 100%;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 0.85rem 1rem !important;
  min-height: 50px;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
}

.pv-booking-foot-back {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  border: 1.5px solid var(--pv-detail-back-border, var(--pv-card-border, rgba(0,0,0,0.12)));
  border-radius: 12px;
  background: var(--pv-detail-back-bg, var(--pv-detail-elevated, rgba(0,0,0,0.06)));
  color: var(--pv-detail-back-color, var(--pv-card-text, #0f172a));
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* Spinner „Przetwarzanie…" na przyciskach płatności (blokada podwójnego submitu). */
.pv-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: pv-btn-spin 0.6s linear infinite;
}

@keyframes pv-btn-spin {
  to { transform: rotate(360deg); }
}

.pv-booking-foot-next {
  flex: 1;
  align-self: center;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 99px;
  background: var(--pv-detail-elevated, rgba(0, 0, 0, 0.06));
  color: var(--pv-card-muted, #64748b);
  font-size: 0.88rem;
  font-weight: 800;
  font-family: inherit;
  cursor: not-allowed;
  touch-action: manipulation;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
  opacity: 0.55;
}

.pv-booking-foot-next:not(:disabled) {
  opacity: 1;
  cursor: pointer;
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.pv-booking-foot-next:not(:disabled):active {
  transform: scale(0.98);
}

@media (min-width: 1024px) {
  .pv-month-cal--booking {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .pv-month-cal--booking .pv-cal-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.32rem;
    width: 100%;
  }

  .pv-month-cal--booking .pv-cal-day {
    aspect-ratio: 1;
    width: 100%;
    max-width: 46px;
    max-height: 46px;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    font-size: 0.76rem;
    border-radius: 8px;
  }

  .pv-month-cal--booking .pv-cal-weekdays {
    margin-bottom: 0.4rem;
  }

  .pv-month-cal--booking .pv-cal-weekdays > * {
    font-size: 0.58rem;
  }

  .pv-month-cal--booking .pv-cal-nav-btn {
    width: 32px;
    height: 32px;
    font-size: 0.64rem;
  }

  .pv-month-cal--booking .pv-cal-month-label {
    font-size: 0.9rem;
  }

  .pv-booking-sheet-body {
    padding-bottom: 1rem;
  }

  .pv-booking-sheet-foot {
    position: sticky;
    bottom: 0;
  }
}

@media (max-width: 768px) {
  #publicScreen .pv-detail-overlay.is-open,
  #publicScreen .pv-detail-overlay.is-booking-open {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  #publicScreen .pv-detail-overlay.is-open .pv-detail-view,
  #publicScreen .pv-detail-overlay.is-open .pv-detail-view--rich,
  #publicScreen .pv-detail-overlay.is-open .pv-booking-sheet,
  #publicScreen .pv-detail-overlay.is-open .pv-commerce-sheet,
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet,
  #publicScreen .pv-detail-overlay.is-booking-open .pv-commerce-sheet {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .pv-detail-overlay.is-booking-open .pv-detail-stack {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .pv-detail-overlay.is-booking-open .pv-booking-sheet,
  .pv-detail-overlay.is-booking-open .pv-commerce-sheet {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    border-radius: 0;
  }

  .pv-booking-sheet-body {
    padding-bottom: 1rem;
  }

  .pv-booking-sheet.is-step-summary .pv-booking-sheet-body,
  .pv-commerce-sheet .pv-booking-sheet-body {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .pv-booking-sheet.is-step-summary .pv-booking-summary-submit {
    display: inline-flex;
    margin-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .pv-booking-sheet.is-step-summary .pv-booking-sheet-foot {
    display: none;
  }

  .pv-booking-sheet:not(.is-step-summary) .pv-booking-sheet-foot {
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding: 0.65rem 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.08);
  }

  .pv-booking-sheet:not(.is-step-summary) .pv-booking-sheet-body {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Panel usługi / rezerwacji — kolory z tokenów --pv-detail-* (adaptują się do motywu) */
.pv-detail-overlay .pv-booking-close,
.pv-detail-overlay .pv-booking-foot-back,
.pv-detail-overlay .pv-cal-nav-btn,
.pv-booking-sheet .pv-booking-close,
.pv-booking-sheet .pv-booking-foot-back,
.pv-booking-sheet .pv-cal-nav-btn {
  background: var(--pv-detail-elevated, #f8fafc);
  color: var(--pv-detail-text, #0f172a);
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.12));
}

.pv-detail-overlay .pv-booking-foot-next:not(:disabled),
.pv-booking-sheet .pv-booking-foot-next:not(:disabled) {
  background: var(--pv-accent, #6366f1);
  color: var(--pv-on-accent, #ffffff);
  border-color: var(--pv-accent, #6366f1);
}

.pv-detail-overlay .pv-booking-foot-next:disabled,
.pv-booking-sheet .pv-booking-foot-next:disabled {
  background: var(--pv-detail-elevated, #f1f5f9);
  color: var(--pv-detail-compare, #64748b);
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.08));
  opacity: 0.7;
}

.pv-layout-classic .pv-hero:not(.pv-hero--left) .pv-tagline,
.pv-layout-classic .pv-hero:not(.pv-hero--left) .pv-bio {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 36rem;
}

.pv-layout-classic .pv-hero:not(.pv-hero--left) .pv-meta {
  justify-content: center;
}

/* Public page (dashy.pl) — same dark-surface tokens as phone preview */
#publicScreen[data-surface="dark"] .pv-layout-classic .pv-hero {
  border-bottom-color: rgba(248, 250, 252, 0.14);
}

#publicScreen[data-surface="dark"] .pv-layout-cards .pv-hero {
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 24%, rgba(15, 23, 42, 0.55));
  border-color: rgba(255, 255, 255, 0.16);
}

#publicScreen[data-surface="dark"] .pv-svc-card,
#publicScreen[data-surface="dark"] .pv-stat-item,
#publicScreen[data-surface="dark"] .pv-testi-card,
#publicScreen[data-surface="dark"] .pv-price-card,
#publicScreen[data-surface="dark"] .pv-faq-item,
#publicScreen[data-surface="dark"] .pv-process-step,
#publicScreen[data-surface="dark"] .pv-layout-classic .pv-card,
#publicScreen[data-surface="dark"] .pv-layout-cards .pv-card {
  background: var(--pv-card-bg);
  color: var(--pv-card-text);
  border: 1px solid var(--pv-card-border);
  box-shadow: var(--pv-card-shadow);
}

#publicScreen[data-surface="dark"] .pv-svc-name {
  color: inherit;
}

#publicScreen[data-surface="dark"] .pv-section-title {
  color: var(--pv-hero-text, inherit);
}

#publicScreen[data-surface="dark"] .pv-section-sub {
  color: var(--pv-hero-muted, inherit);
}

#publicScreen[data-surface="dark"] .pv-svc-card {
  border-color: color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 18%, rgba(15, 23, 42, 0.08));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 8%, transparent);
}

#publicScreen[data-surface="dark"] .pv-svc-img--placeholder {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 34%, transparent) 0%, transparent 45%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
}

#publicScreen[data-surface="dark"] .pv-svc-desc,
#publicScreen[data-surface="dark"] .pv-stat-label,
#publicScreen[data-surface="dark"] .pv-card-body span,
#publicScreen[data-surface="dark"] .pv-testi-text,
#publicScreen[data-surface="dark"] .pv-svc-desc.pv-desc-rich p,
#publicScreen[data-surface="dark"] .pv-svc-desc.pv-desc-rich h3 {
  color: var(--pv-card-muted);
}

#publicScreen[data-surface="dark"] .pv-svc-desc.pv-desc-rich h2 {
  color: var(--pv-card-text);
}

#publicScreen[data-surface="dark"] .pv-testi-name {
  color: var(--pv-card-text);
}

#publicScreen[data-surface="dark"] .pv-testi-role {
  color: var(--pv-card-muted);
}

#publicScreen[data-surface="dark"] .pv-layout-classic.pv-modules-outline .pv-card,
#publicScreen[data-surface="dark"] .pv-layout-cards.pv-modules-outline .pv-card {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 55%, rgba(248, 250, 252, 0.35));
  box-shadow: none;
}

#publicScreen[data-surface="dark"] .pv-layout-classic .pv-card-body strong,
#publicScreen[data-surface="dark"] .pv-layout-cards .pv-card-body strong {
  color: inherit;
}

#publicScreen[data-surface="dark"] .pv-layout-minimal.pv-modules-elevated .pv-card,
#publicScreen[data-surface="dark"] .pv-layout-minimal.pv-modules-filled .pv-card {
  color: #fff;
}

#publicScreen[data-surface="dark"] .pv-soc {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 6px 18px rgba(0, 0, 0, 0.25);
}

#publicScreen[data-surface="dark"] .pv-soc--glass {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f8fafc;
}

#publicScreen[data-surface="dark"] .pv-back {
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
}

/* ── Service detail PRO layout ── */
.pv-detail-view--pro {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--pv-detail-bg, #fff);
}

.pv-detail-sheet {
  flex: 1 1 auto;
  margin-top: -1.35rem;
  position: relative;
  z-index: 5;
  border-radius: 22px 22px 0 0;
  background: var(--pv-detail-bg, #fff);
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.08);
}

.pv-detail-view--no-hero .pv-detail-sheet {
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}

.pv-detail-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--pv-card-border, rgba(15, 23, 42, 0.12));
  margin: 0.55rem auto 0.15rem;
}

.pv-detail-view--no-hero .pv-detail-sheet-handle {
  display: none;
}

.pv-detail-view--pro .pv-detail-body--rich {
  padding: 0.65rem 1.1rem 1.25rem;
}

.pv-detail-view--pro .pv-detail-name {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
}

.pv-detail-pricing {
  margin-bottom: 0.65rem;
}

.pv-detail-billing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.pv-detail-billing-opt {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pv-card-muted, #64748b);
  cursor: pointer;
  padding: 0.25rem 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pv-detail-billing-opt.is-active {
  color: var(--pv-card-text, #0f172a);
}

.pv-detail-billing-badge {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.12rem 0.38rem;
  border-radius: 99px;
  background: #dcfce7;
  color: #166534;
}

.pv-detail-billing-switch {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
}

.pv-detail-billing-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pv-detail-billing-slider {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--pv-detail-elevated, #e2e8f0);
  cursor: pointer;
  transition: background 0.2s;
}

.pv-detail-billing-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
  transition: transform 0.2s;
}

.pv-detail-billing-switch input:checked + .pv-detail-billing-slider {
  background: var(--pv-billing-accent, var(--pv-accent, #6366f1));
}

.pv-detail-billing-switch input:checked + .pv-detail-billing-slider::before {
  transform: translateX(18px);
}

.pv-detail-price-block {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.35rem 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--pv-detail-text, #0f172a);
}

.pv-detail-price-block .pv-detail-price-compare {
  font-size: 1.15rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.pv-detail-price-block .pv-detail-price-big {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pv-detail-price-block .pv-detail-period {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pv-card-muted, #64748b);
}

.pv-detail-section--about {
  padding: 0.35rem 0 0.35rem;
  margin-top: 0.55rem;
  margin-bottom: 0.7rem;
}

.pv-detail-view--pro .pv-detail-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 0.7rem 0 0;
}

.pv-detail-view--pro .pv-detail-trust-row--solo {
  margin: 0.15rem 0 0.55rem;
}

.pv-detail-view--pro .pv-detail-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pv-card-text, #334155);
  padding: 0.42rem 0.68rem;
  border-radius: 99px;
  background: var(--pv-page-accent-bg-soft, #f8fafc);
  border: 1px solid var(--pv-page-accent-border, rgba(15, 23, 42, 0.1));
}

.pv-detail-view--pro .pv-detail-trust-row i {
  color: var(--pv-accent, #6366f1);
  font-size: 0.72rem;
}

.pv-detail-cta-wrap {
  margin-top: 0.25rem;
}

.pv-detail-view--commerce .pv-detail-submit--inline {
  display: none;
}

.pv-detail-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  background: var(--pv-page-accent-canvas, var(--pv-detail-bg, #fff));
  border-top: 1px solid var(--pv-page-accent-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 -4px 24px color-mix(in srgb, var(--pv-page-accent-glow, #e2e8f0) 10%, transparent);
}

.pv-detail-action-price {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
}

.pv-detail-action-price .pv-detail-price-compare {
  font-size: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.pv-detail-action-amount {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pv-price-accent, var(--pv-accent, #6366f1));
  letter-spacing: -0.02em;
}

.pv-detail-action-period {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pv-card-muted, #64748b);
}

.pv-detail-action-cta {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.72rem 1.1rem !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.pv-detail-view--pro .pv-detail-form {
  background: var(--pv-detail-elevated, #f8fafc);
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  border-radius: 16px;
  padding: 1rem;
}

.pv-detail-view--pro .pv-detail-ready-card {
  border-color: var(--pv-detail-border, rgba(15, 23, 42, 0.1));
  background: var(--pv-detail-elevated, #f8fafc);
  box-shadow: none;
  margin-top: 0;
}

.pv-detail-view--session .pv-detail-sheet {
  margin-top: -1rem;
}

/* ================================================================
   Service detail — Panel klienta po zakupie
   Wspólne dla podglądu w panelu i strony publicznej (dashy.pl/slug).
   ================================================================ */
.pv-detail-panel {
  /* Odstęp od paska płatności nad sekcją — żeby „Twój panel klienta"
     nie był przyklejony do „Płatność szyfrowana…". */
  margin: 1.15rem 0 1.15rem;
}

.pv-panel-card {
  position: relative;
  border-radius: 18px;
  padding: 1.05rem 1.05rem 1.1rem;
  background: var(--pv-detail-elevated, #f8fafc);
  border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.08));
  box-shadow: none;
  color: var(--pv-detail-text, #0f172a);
  overflow: hidden;
}

.pv-panel-head {
  position: relative;
  z-index: 1;
  margin-bottom: 0.85rem;
}

.pv-panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 99px;
  color: var(--pv-on-accent, #fff);
  background: var(--pv-accent, #6366f1);
  border: none;
  margin-bottom: 0.6rem;
}

.pv-panel-badge i {
  font-size: 0.62rem;
}

.pv-panel-title {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--pv-page-accent-text, #0f172a);
}

.pv-panel-sub {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--pv-page-accent-muted, #64748b);
  margin: 0;
}

.pv-panel-feats {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pv-panel-feat {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  background: var(--pv-detail-sheet, #fff);
  border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.06));
}

.pv-panel-feat-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--pv-on-accent, #fff);
  background: var(--pv-accent, #6366f1);
  box-shadow: none;
}

.pv-panel-feat-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.pv-panel-feat-text strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--pv-page-accent-text, #0f172a);
  line-height: 1.2;
}

.pv-panel-feat-text span {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--pv-page-accent-muted, #64748b);
}

/* Wybór metody płatności */
.pv-payment-methods {
  margin: 0.65rem 0 0.5rem;
}

.pv-payment-methods-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pv-card-muted, #64748b);
  margin: 0 0 0.45rem;
  letter-spacing: 0.02em;
}

.pv-payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.pv-payment-method {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.6rem 0.65rem;
  border-radius: 12px;
  border: 1.5px solid var(--pv-card-border, rgba(15, 23, 42, 0.12));
  background: var(--pv-detail-elevated, #f8fafc);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.pv-payment-method input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pv-payment-method.is-active {
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent);
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 12%, var(--pv-detail-elevated, #fff));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pv-accent, #6366f1) 18%, transparent);
}

/* Metoda wyłączona przez sprzedawcę — wyszarzona i niewybieralna */
.pv-payment-method.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
  background: var(--pv-detail-elevated, #f1f5f9);
}

.pv-payment-method.is-locked .pv-payment-method-ic {
  filter: grayscale(1);
}

.pv-payment-method-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: #fff;
  background: #635bff;
}

.pv-payment-method-ic--cash {
  background: #059669;
}

.pv-payment-method-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pv-payment-method-text strong {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--pv-detail-text, #0f172a);
  line-height: 1.2;
}

.pv-payment-method-text span {
  font-size: 0.66rem;
  color: var(--pv-card-muted, #64748b);
  line-height: 1.35;
}

@media (max-width: 420px) {
  .pv-payment-methods-grid {
    grid-template-columns: 1fr;
  }
}

/* Pasek zaufania płatności — Stripe */
.pv-detail-secure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--pv-detail-elevated, #f1f5f9);
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.1));
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pv-detail-text, #334155);
}

.pv-detail-secure-ic {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #ffffff;
  background: #10b981;
}

.pv-detail-secure-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.pv-detail-secure-brand {
  flex-shrink: 0;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  color: #635bff;
}

.pv-detail-secure--cash .pv-detail-secure-ic--cash {
  background: #059669;
}

.pv-detail-secure--free .pv-detail-secure-ic--free {
  background: #f97316;
}

.pv-detail-secure--mixed .pv-detail-secure-ic {
  background: #6366f1;
}

@media (min-width: 1024px) {
  #publicScreen .pv-panel-title {
    font-size: 1.26rem;
  }

  #publicScreen .pv-panel-sub {
    font-size: 0.94rem;
  }

  #publicScreen .pv-panel-feat-text strong {
    font-size: 0.96rem;
  }

  #publicScreen .pv-panel-feat-text span {
    font-size: 0.85rem;
  }

  #publicScreen .pv-detail-secure {
    font-size: 0.88rem;
  }
}

/* ── Desktop: service detail as centered card on page background ── */
@media (min-width: 1024px) {
  #publicScreen .pv-detail-overlay {
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.26s ease, visibility 0.26s;
    background: var(--pv-page-fill, var(--pv-page-bg, #faf6f0));
  }

  #publicScreen .pv-detail-overlay.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1.25rem, 2.5vh, 2.25rem) clamp(1rem, 3vw, 2rem) clamp(2.25rem, 5vh, 3.25rem);
    overflow-x: hidden;
    overflow-y: auto;
  }

  #publicScreen .pv-detail-overlay.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      ellipse 52% 62% at 50% 38%,
      transparent 0%,
      color-mix(in srgb, var(--pv-page-accent-glow, #94a3b8) 10%, transparent) 100%
    );
  }

  #publicScreen .pv-detail-overlay.is-open > .pv-detail-stack,
  #publicScreen .pv-detail-overlay.is-open > .pv-detail-view {
    position: relative;
    z-index: 1;
    width: min(920px, calc(100vw - 2rem));
    max-width: 920px;
    flex-shrink: 0;
    margin: 0 auto 1.75rem;
    min-height: auto;
    max-height: none;
    border-radius: 28px;
    overflow: hidden;
    background: var(--pv-page-accent-canvas, #fff);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--pv-page-accent-glow, #cbd5e1) 16%, transparent),
      0 28px 72px rgba(15, 23, 42, 0.14),
      0 10px 28px color-mix(in srgb, var(--pv-page-accent-glow, #94a3b8) 12%, transparent);
  }

  #publicScreen .pv-detail-overlay.is-booking-open > .pv-detail-stack {
    min-height: min(860px, calc(100dvh - 4.5rem));
    max-height: min(860px, calc(100dvh - 4.5rem));
    overflow: hidden;
    margin-bottom: 1.75rem;
  }

  #publicScreen .pv-detail-overlay.is-open .pv-detail-view,
  #publicScreen .pv-detail-overlay.is-open .pv-detail-view--rich,
  #publicScreen .pv-detail-overlay.is-open .pv-booking-sheet,
  #publicScreen .pv-detail-overlay.is-open .pv-commerce-sheet {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
  }

  #publicScreen .pv-detail-hero {
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 320px;
  }

  #publicScreen .pv-detail-hero--empty {
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }

  #publicScreen .pv-detail-hero-slide {
    background-size: cover;
    background-position: center;
  }

  #publicScreen .pv-detail-body--rich {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }

  #publicScreen .pv-detail-footer {
    border-radius: 0 0 28px 28px;
    padding: 0.9rem 1.35rem 1.35rem;
    box-shadow: 0 -10px 28px color-mix(in srgb, var(--pv-page-accent-glow, #cbd5e1) 8%, transparent);
  }

  #publicScreen .pv-detail-footer-cta {
    padding: 0.9rem 1.15rem !important;
    min-height: 52px;
  }

  #publicScreen .pv-detail-section--portfolio .pv-detail-portfolio-desktop .pv-portfolio-cell img {
    max-height: 132px;
    width: 100%;
    object-fit: cover;
  }
}

/* ── Stopka prawna profilu publicznego ── */
.pv-public-foot {
  margin-top: 1.75rem;
  padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.pv-public-foot-legal {
  margin: 0 auto;
  max-width: 22rem;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.52);
}

@media (max-width: 480px) {
  .pv-public-foot-legal {
    max-width: 16.5rem;
    font-size: 0.58rem;
    line-height: 1.5;
  }
}

@media (max-width: 1023px) {
  .pv-public-foot-powered--desktop-only,
  .pv-public-foot-signup--desktop-only {
    display: none;
  }
}

.pv-public-foot-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pv-public-foot-legal a:hover {
  color: rgba(15, 23, 42, 0.78);
}

.pv-public-foot-seller {
  margin: 0 auto 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.66rem;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.62);
}

.pv-public-foot-seller-name {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pv-public-foot-seller-nip {
  font-weight: 500;
  color: rgba(15, 23, 42, 0.5);
}

.pv-public-foot-stripe {
  margin: 0.85rem auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.45);
}

.pv-public-foot-stripe i {
  font-size: 0.58rem;
  opacity: 0.85;
}

.pv-public-foot-stripe strong {
  font-weight: 700;
}

.pv-public-foot-signup {
  margin: 0.95rem auto 0;
}

.pv-public-foot-signup-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, #4338ca, #6366f1, #7c3aed);
  box-shadow: 0 6px 18px -8px rgba(79, 70, 229, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pv-public-foot-signup-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(79, 70, 229, 0.5);
}

.pv-public-foot-powered {
  margin: 1rem auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.42);
}

.pv-public-foot-powered-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, 0.72);
  text-decoration: none;
}

.pv-public-foot-powered-brand img {
  display: block;
  border-radius: 4px;
}

.pv-public-foot-powered-brand:hover {
  color: #0f172a;
}

[data-surface="dark"] .pv-public-foot-legal,
#publicScreen[data-surface="dark"] .pv-public-foot-legal {
  color: rgba(248, 250, 252, 0.55);
}

[data-surface="dark"] .pv-public-foot-legal a:hover,
#publicScreen[data-surface="dark"] .pv-public-foot-legal a:hover {
  color: rgba(248, 250, 252, 0.88);
}

[data-surface="dark"] .pv-public-foot-seller,
#publicScreen[data-surface="dark"] .pv-public-foot-seller {
  color: rgba(248, 250, 252, 0.66);
}

[data-surface="dark"] .pv-public-foot-seller-nip,
#publicScreen[data-surface="dark"] .pv-public-foot-seller-nip {
  color: rgba(248, 250, 252, 0.5);
}

[data-surface="dark"] .pv-public-foot-stripe,
#publicScreen[data-surface="dark"] .pv-public-foot-stripe,
[data-surface="dark"] .pv-public-foot-powered,
#publicScreen[data-surface="dark"] .pv-public-foot-powered {
  color: rgba(248, 250, 252, 0.45);
}

[data-surface="dark"] .pv-public-foot-powered-brand,
#publicScreen[data-surface="dark"] .pv-public-foot-powered-brand {
  color: rgba(248, 250, 252, 0.78);
}

[data-surface="dark"] .pv-public-foot-powered-brand:hover,
#publicScreen[data-surface="dark"] .pv-public-foot-powered-brand:hover {
  color: #f8fafc;
}

/* ── Plan darmowy: kompaktowy chip „Powered by Dashy” (mobile, public) ── */
.pv-scroll--branded {
  padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .pv-scroll--branded {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

.pv-dashy-chip {
  position: fixed;
  left: 50%;
  bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 22;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  width: auto;
  max-width: min(calc(100vw - 2.75rem), 13.5rem);
  padding: 0.28rem 0.28rem 0.28rem 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.pv-dashy-chip.is-dismissed {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .pv-dashy-chip {
    display: none !important;
  }
}

.pv-dashy-chip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.12rem 0.2rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.62);
  text-decoration: none;
  white-space: nowrap;
}

.pv-dashy-chip-link strong {
  font-weight: 800;
  color: rgba(15, 23, 42, 0.88);
}

.pv-dashy-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-dashy-chip-link img {
  flex-shrink: 0;
  display: block;
  border-radius: 4px;
}

.pv-dashy-chip-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.45);
  font-size: 0.58rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pv-dashy-chip-close:hover {
  background: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.72);
}

[data-surface="dark"] .pv-dashy-chip,
#publicScreen[data-surface="dark"] .pv-dashy-chip {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

[data-surface="dark"] .pv-dashy-chip-link,
#publicScreen[data-surface="dark"] .pv-dashy-chip-link {
  color: rgba(248, 250, 252, 0.62);
}

[data-surface="dark"] .pv-dashy-chip-link strong,
#publicScreen[data-surface="dark"] .pv-dashy-chip-link strong {
  color: rgba(248, 250, 252, 0.92);
}

[data-surface="dark"] .pv-dashy-chip-close,
#publicScreen[data-surface="dark"] .pv-dashy-chip-close {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.55);
}

.pv-detail-active .pv-dashy-chip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Opisy usług (nagłówki, listy) ── */
.pv-desc-rich {
  display: flow-root;
}

.pv-desc-rich p {
  margin: 0 0 0.55rem;
  line-height: 1.6;
  color: var(--pv-card-muted, inherit);
}

.pv-desc-rich p:last-child {
  margin-bottom: 0;
}

.pv-desc-h2,
.pv-desc-rich h2 {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0.55rem 0 0.25rem;
  letter-spacing: -0.01em;
  color: var(--pv-card-text, var(--pv-text, #0f172a));
}

.pv-desc-h2:first-child,
.pv-desc-rich h2:first-child {
  margin-top: 0;
}

.pv-desc-h3,
.pv-desc-rich h3 {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0.4rem 0 0.2rem;
  color: var(--pv-card-muted, var(--pv-muted, #64748b));
}

.pv-desc-ul,
.pv-desc-ol,
.pv-desc-rich ul,
.pv-desc-rich ol {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.15rem;
  line-height: 1.55;
  color: var(--pv-card-muted, var(--pv-muted, #64748b));
}

.pv-desc-ul li,
.pv-desc-ol li,
.pv-desc-rich li {
  margin: 0.2rem 0;
}

/* Zdjęcia w opisie usługi (blok „Zdjęcie”) */
.pv-desc-rich figure.pv-desc-figure {
  margin: 0.75rem 0;
}
.pv-desc-rich figure.pv-desc-figure:first-child {
  margin-top: 0;
}
.pv-desc-rich figure.pv-desc-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}
.pv-desc-rich figure.pv-desc-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--pv-card-muted, var(--pv-muted, #64748b));
  text-align: center;
}
/* W skróconym opisie na karcie nie pokazujemy zdjęć — tylko tekst */
.pv-svc-desc.pv-desc-rich figure.pv-desc-figure {
  display: none;
}

.pv-svc-desc.pv-desc-rich {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--pv-card-muted, inherit);
}

.pv-svc-desc.pv-desc-rich h2 {
  color: var(--pv-card-text, inherit);
}

.pv-detail-desc.pv-desc-rich {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* ── Opis usługi: panel premium + zwijanie ── */
.pv-detail-section-title--about {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pv-detail-section-ic {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 8px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 14%, transparent);
  color: var(--pv-accent, #6366f1);
  font-size: 0.7rem;
}

.pv-detail-desc-card {
  position: relative;
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.09));
  border-radius: 16px;
  background: var(--pv-card-bg, #fff);
  padding: 1rem 1.1rem;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 30px -22px rgba(15, 23, 42, 0.22);
}

.pv-detail-desc-shell {
  position: relative;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.pv-detail-desc-shell.is-clamped {
  max-height: 12.5rem;
}

.pv-detail-desc-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  background: linear-gradient(to bottom, transparent, var(--pv-card-bg, #fff) 88%);
}

.pv-detail-desc-shell.is-clamped .pv-detail-desc-fade {
  opacity: 1;
}

.pv-detail-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: 0.85rem;
  padding: 0.52rem 0.95rem;
  border-radius: 99px;
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.12));
  background: var(--pv-page-accent-bg-soft, #f8fafc);
  color: var(--pv-card-text, #0f172a);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease;
}

.pv-detail-desc-toggle:hover {
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 42%, var(--pv-card-border, rgba(15, 23, 42, 0.12)));
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 7%, var(--pv-page-accent-bg-soft, #f8fafc));
}

.pv-detail-desc-toggle:active {
  transform: scale(0.97);
}

.pv-detail-desc-toggle i {
  font-size: 0.68rem;
  color: var(--pv-accent, #6366f1);
  transition: transform 0.22s ease;
}

.pv-detail-desc-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* ── Blokada sprzedaży bez Stripe ── */
.pv-payments-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.65rem 0.75rem 0;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #92400e;
}

.pv-payments-banner-ic {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  font-size: 0.82rem;
}

.pv-payments-banner-body strong {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.pv-payments-banner-body p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  opacity: 0.92;
}

.pv-payments-banner-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pv-payments-blocked-note,
.pv-svc-payments-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.45;
  background: rgba(148, 163, 184, 0.12);
  color: var(--pv-muted, #64748b);
}

.pv-payments-blocked-note i,
.pv-svc-payments-hint i {
  margin-top: 0.1rem;
  opacity: 0.85;
}

.pv-cta--blocked,
.pv-svc-cta-btn.pv-cta--blocked,
.pv-detail-footer-cta.pv-cta--blocked,
.pv-detail-action-cta.pv-cta--blocked {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: grayscale(0.15);
}

.pv-svc-card--payments-blocked .pv-svc-cta-btn {
  pointer-events: auto;
}

/* ── Dark surface tokens for builder phone preview ─────────────────────── */
/* Mirror the #publicScreen[data-surface="dark"] rules so the design        */
/* builder phone preview matches the published page on dark backgrounds.    */

[data-surface="dark"] .pv-layout-classic .pv-hero {
  border-bottom-color: rgba(248, 250, 252, 0.14);
}

[data-surface="dark"] .pv-layout-cards .pv-hero {
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 24%, rgba(15, 23, 42, 0.55));
  border-color: rgba(255, 255, 255, 0.16);
}

[data-surface="dark"] .pv-svc-card,
[data-surface="dark"] .pv-stat-item,
[data-surface="dark"] .pv-testi-card,
[data-surface="dark"] .pv-price-card,
[data-surface="dark"] .pv-faq-item,
[data-surface="dark"] .pv-process-step,
[data-surface="dark"] .pv-layout-classic .pv-card,
[data-surface="dark"] .pv-layout-cards .pv-card {
  background: var(--pv-card-bg);
  color: var(--pv-card-text);
  border: 1px solid var(--pv-card-border);
  box-shadow: var(--pv-card-shadow);
}

[data-surface="dark"] .pv-svc-name {
  color: inherit;
}

[data-surface="dark"] .pv-section-title {
  color: var(--pv-hero-text, inherit);
}

[data-surface="dark"] .pv-section-sub {
  color: var(--pv-hero-muted, inherit);
}

[data-surface="dark"] .pv-svc-card {
  border-color: color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 18%, rgba(15, 23, 42, 0.08));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 8%, transparent);
}

[data-surface="dark"] .pv-svc-img--placeholder {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 34%, transparent) 0%, transparent 45%),
    linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
}

[data-surface="dark"] .pv-svc-desc,
[data-surface="dark"] .pv-stat-label,
[data-surface="dark"] .pv-card-body span,
[data-surface="dark"] .pv-testi-text,
[data-surface="dark"] .pv-svc-desc.pv-desc-rich p,
[data-surface="dark"] .pv-svc-desc.pv-desc-rich h3 {
  color: var(--pv-card-muted);
}

[data-surface="dark"] .pv-svc-desc.pv-desc-rich h2 {
  color: var(--pv-card-text);
}

[data-surface="dark"] .pv-testi-name {
  color: var(--pv-card-text);
}

[data-surface="dark"] .pv-testi-role {
  color: var(--pv-card-muted);
}

[data-surface="dark"] .pv-layout-classic.pv-modules-outline .pv-card,
[data-surface="dark"] .pv-layout-cards.pv-modules-outline .pv-card {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 55%, rgba(248, 250, 252, 0.35));
  box-shadow: none;
}

[data-surface="dark"] .pv-layout-classic .pv-card-body strong,
[data-surface="dark"] .pv-layout-cards .pv-card-body strong {
  color: inherit;
}

[data-surface="dark"] .pv-layout-minimal.pv-modules-elevated .pv-card,
[data-surface="dark"] .pv-layout-minimal.pv-modules-filled .pv-card {
  color: #fff;
}

[data-surface="dark"] .pv-soc {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ── Karty (card_surface) ──────────────────────────────────────────────── */
/* Wszystkie powierzchnie kart sterowane są tokenami --pv-card-* (ustawia je  */
/* cardSurfaceTokens w JS) oraz stylem kart (.pv-modules-elevated/filled/      */
/* outline). Brak nadpisań !important — dzięki temu „Styl kart" działa, a kolory*/
/* dla trybu białego i „w kolorze tła" pochodzą wprost z wybranego motywu.     */

/* Widok szczegółów usługi adaptuje się przez tokeny --pv-detail-* / --pv-page-accent-*
   ustawiane w detailSurface(page). Płaskie powierzchnie, bez gradientów i poświat. */

/* ── „Może Cię też zainteresować" — inne produkty sprzedawcy (grid sklepowy) ── */
.pv-detail-section--more {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.1));
}

.pv-more-title {
  margin-bottom: 1rem;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--pv-detail-text, #0f172a);
}

.pv-more-grid {
  /* Mobile / wąski podgląd: karuzela z szerokimi kartami zamiast ściśniętej
     siatki 2-kolumnowej. FLEX (nie grid) — procentowy flex-basis rozwiązuje się
     względem szerokości kontenera także w przewijanej karuzeli, podczas gdy
     grid-auto-columns: minmax(min, %) spadał do wartości min (karty za wąskie).
     Desktop (≥760) wraca do siatki 3-kolumnowej. */
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -0.2rem;
  padding: 0.2rem 0.2rem 0.5rem;
}
.pv-more-grid::-webkit-scrollbar { display: none; }

.pv-more-card {
  --pv-svc-accent: var(--pv-accent, #6366f1);
  scroll-snap-align: start;
  flex: 0 0 min(82%, 264px);
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.1));
  border-radius: 20px;
  overflow: hidden;
  background: var(--pv-detail-elevated, #fff);
  color: var(--pv-detail-text, #0f172a);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pv-more-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--pv-svc-accent) 34%, var(--pv-detail-border, rgba(15, 23, 42, 0.1)));
    box-shadow:
      0 18px 38px color-mix(in srgb, var(--pv-svc-accent) 16%, rgba(15, 23, 42, 0.16)),
      0 0 0 1px color-mix(in srgb, var(--pv-svc-accent) 12%, transparent);
  }
  .pv-more-card:hover .pv-more-img { transform: scale(1.06); }
  .pv-more-card:hover .pv-more-cta i { transform: translateX(3px); }
}

.pv-more-card:active { transform: scale(0.985); }

.pv-more-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: block;
  background: color-mix(in srgb, var(--pv-svc-accent) 9%, #f1f5f9);
}

.pv-more-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.pv-more-img--ph {
  background: color-mix(in srgb, var(--pv-svc-accent) 8%, var(--pv-detail-elevated, #f1f5f9));
}

.pv-more-ph-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  color: var(--pv-svc-accent);
  opacity: 0.85;
}

.pv-more-shade {
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.3) 100%);
}

.pv-more-type {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.58rem;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--pv-svc-accent) 80%, #0f172a);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(6px);
}

.pv-more-type i { font-size: 0.54rem; opacity: 0.95; }

.pv-more-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

.pv-more-name {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--pv-detail-text, #0f172a);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.5em;
}

.pv-more-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.pv-more-price {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--pv-detail-text, #0f172a);
}

.pv-more-price--muted {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--pv-detail-muted, #475569);
}

.pv-more-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--pv-svc-accent, #6366f1);
}

.pv-more-cta i {
  font-size: 0.66rem;
  transition: transform 0.18s ease;
}

/* Siatka 3-kolumnowa tylko na REALNEJ stronie (#publicScreen) przy szerokim
   ekranie. Media query bazuje na szerokości OKNA przeglądarki — w podglądzie
   kreatora okno jest szerokie (~2000px), więc bez scope `#publicScreen`
   siatka wciskała się w ~318px mocka telefonu i karty robiły się ~90px.
   Mock (.sb-device-screen) ZAWSZE używa bazowej karuzeli flex (niżej). */
@media (min-width: 760px) {
  #publicScreen .pv-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  #publicScreen .pv-more-card { flex: none; }
  #publicScreen .pv-more-title { font-size: 1.3rem; }
}

/* Podgląd telefonu w kreatorze — wymuszona karuzela (mock to telefon,
   niezależnie od szerokości okna przeglądarki). */
.sb-device-screen .pv-more-grid {
  display: flex;
  overflow-x: auto;
  margin: 0 -0.2rem;
  padding: 0.2rem 0.2rem 0.5rem;
}
.sb-device-screen .pv-more-card {
  flex: 0 0 min(82%, 240px);
}

/* ════════════════════════════════════════════════════════════════
   Premium polish (2026-07) — karty usług, tryb sklepu i detal usługi.
   Warstwa nadpisań na końcu pliku (wygrywa kaskadą, zero zmian wyżej).
   Cel: poziom wizualny powyżej naffy — miękkie, warstwowe cienie w tonie
   akcentu, spójna typografia cen, żywe hover/pressed, wejścia na scroll.
   ════════════════════════════════════════════════════════════════ */

/* — Typografia cen: tabelaryczne cyfry + ciaśniejszy tracking — */
.pv-svc-price-main,
.pv-svc-price-old,
.pv-shop-info .pv-svc-price-main,
.pv-detail-price-big,
.pv-detail-action-amount,
.pv-detail-ready-price,
.pv-price-num {
  font-variant-numeric: tabular-nums;
}

/* ── TRYB LISTY — karta usługi jak z drogiego sklepu ── */
.pv-svc-card {
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 34px -24px rgba(15, 23, 42, 0.22);
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s ease;
}

.pv-svc-img {
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pv-svc-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--pv-svc-accent) 38%, var(--pv-card-border, rgba(0, 0, 0, 0.08)));
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 22px 48px -22px color-mix(in srgb, var(--pv-svc-accent) 34%, rgba(15, 23, 42, 0.3)),
      0 0 0 1px color-mix(in srgb, var(--pv-svc-accent) 16%, transparent);
  }
  .pv-svc-card:hover .pv-svc-img {
    transform: scale(1.06);
  }
}

/* Karta BESTSELLER — pierścień w kolorze akcentu strony (spójny z motywem
   sprzedawcy zamiast sztywnego fioletu) + delikatna poświata. */
.pv-svc-card--bestseller {
  border-color: color-mix(in srgb, var(--pv-svc-accent) 42%, var(--pv-card-border, rgba(0, 0, 0, 0.08)));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 42px -24px color-mix(in srgb, var(--pv-svc-accent) 45%, rgba(15, 23, 42, 0.25));
}

/* Plakietka BESTSELLER dziedziczy akcent strony (nie gryzie się z motywem). */
.pv-svc-bestseller {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 82%, #0f172a) 0%,
    var(--pv-svc-accent, var(--pv-accent, #6366f1)) 100%);
  color: var(--pv-on-accent, #fff);
  box-shadow:
    0 10px 24px -8px color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 65%, transparent),
    0 2px 6px rgba(15, 23, 42, 0.22);
}

/* Nazwa + opis — pewniejsza hierarchia, bez sierot */
.pv-svc-name {
  text-wrap: balance;
}

.pv-svc-desc {
  text-wrap: pretty;
}

/* CTA karty — unosi się i łapie poświatę akcentu */
.pv-svc-cta-btn {
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, opacity 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .pv-svc-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 60%, transparent);
  }
}

.pv-svc-cta-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ── TRYB SKLEPU — kafelek z pierścieniem i głębszym hoverem ── */
.pv-shop-media {
  border-radius: 20px;
}

/* Hairline na zdjęciu (nad obrazkiem) — daje „wykończenie" jak w drogich
   sklepach; nie łapie kliknięć. */
.pv-shop-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

[data-surface="dark"] .pv-shop-media::after,
#publicScreen[data-surface="dark"] .pv-shop-media::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.pv-shop-card:active .pv-shop-media {
  transform: scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  .pv-shop-card:hover .pv-shop-media {
    transform: translateY(-4px);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.06),
      0 30px 56px -26px color-mix(in srgb, var(--pv-svc-accent) 44%, rgba(15, 23, 42, 0.45));
  }
  .pv-shop-card:hover .pv-shop-name {
    color: var(--pv-svc-accent);
  }
}

.pv-shop-name {
  transition: color 0.2s ease;
  text-wrap: balance;
}

.pv-shop-hover-btn {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
}

.pv-shop-info .pv-svc-price-main {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── DETAL USŁUGI — dopieszczenie ── */

/* Chipsy meta — równe pill'e, ikona w akcencie */
.pv-detail-chip i {
  color: var(--pv-accent, #6366f1) !important;
}

/* Wiersz zaufania — ikony w akcencie zamiast szarości */
.pv-detail-trust-row i {
  color: color-mix(in srgb, var(--pv-accent, #6366f1) 78%, var(--pv-detail-muted, #475569));
}

/* Karta „Gotowe do rezerwacji/zakupu" — delikatny gradient akcentu */
.pv-detail-ready-card,
.pv-detail-overlay .pv-detail-ready-card {
  border-width: 1px;
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 26%, var(--pv-card-border, rgba(15, 23, 42, 0.1)));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--pv-accent, #6366f1) 6%, transparent) 0%,
      transparent 85%);
}

/* W prawym panelu zakupu (desktop, strona publiczna) karta jest nagłówkiem
   bez ramki — tam gradient zbędny. */
@media (min-width: 1024px) {
  #publicScreen .pv-detail-overlay.is-open .pv-detail-buy .pv-detail-ready-card {
    background: none;
  }
}

/* Przyciski CTA detalu — życie na hover/press (kolory zostają inline z motywu) */
.pv-detail-footer-cta,
.pv-detail-buy-cta,
.pv-detail-submit {
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, opacity 0.15s !important;
}

@media (hover: hover) and (pointer: fine) {
  .pv-detail-footer-cta:hover,
  .pv-detail-buy-cta:hover,
  .pv-detail-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent);
  }
}

.pv-detail-footer-cta:active,
.pv-detail-buy-cta:active,
.pv-detail-submit:active {
  transform: translateY(0) scale(0.98);
}

/* Przycisk „wstecz" — hover z życiem */
@media (hover: hover) and (pointer: fine) {
  .pv-back:hover {
    transform: scale(1.06);
  }
}

/* Panel zakupu na desktopie strony publicznej — przykleja się przy scrollu
   (klient zawsze widzi cenę i CTA — łatwe kupowanie jak w sklepie). */
@media (min-width: 1024px) {
  #publicScreen .pv-detail-overlay.is-open .pv-detail-buy {
    position: sticky;
    top: clamp(1rem, 2.5vh, 1.75rem);
  }
}

/* ── Wejścia na scroll (tylko strona publiczna — patrz bindScrollReveal) ── */
#publicScreen .pv-reveal {
  opacity: 0;
}

#publicScreen .pv-reveal.pv-reveal-in {
  opacity: 1;
  animation: pvRevealIn 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--pv-reveal-delay, 0ms);
}

@keyframes pvRevealIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #publicScreen .pv-reveal {
    opacity: 1;
  }
  #publicScreen .pv-reveal.pv-reveal-in {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   Premium typografia + rytm (2026-07) — poziom „nowoczesny gabinet".
   Warstwa nadpisań na końcu pliku: większa obecność nagłówków (font
   nagłówkowy z motywu przez --pv-heading-font/-weight/-tracking),
   spokojniejsze separatory, oddech w sekcjach, dopracowane przyciski
   i focus. Mobile-first — bazowe wartości = telefon.
   ════════════════════════════════════════════════════════════════ */

/* — Nagłówki dziedziczą font nagłówkowy motywu (serif dla Klinika/Atelier) — */
.pv-name,
.pv-name--showcase,
.pv-section-title,
.pv-cta-heading,
.pv-detail-name,
.pv-price-num,
.pv-stat-value {
  font-family: var(--pv-heading-font, inherit);
  font-weight: var(--pv-heading-weight, 800);
  letter-spacing: var(--pv-heading-tracking, -0.02em);
}

/* — Skala typograficzna: telefon — */
.pv-name {
  font-size: 1.5rem;
  line-height: 1.18;
  text-wrap: balance;
}

.pv-name--showcase {
  font-size: 1.9rem;
  margin: 0.4rem 0 0.35rem;
}

.pv-tagline {
  font-size: 0.95rem;
  line-height: 1.5;
}

.pv-tagline--showcase {
  font-size: 0.9rem;
}

.pv-bio {
  font-size: 0.9rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.pv-meta {
  font-size: 0.8rem;
}

.pv-section-title {
  font-size: 1.28rem;
  line-height: 1.22;
  text-wrap: balance;
}

.pv-section-sub {
  font-size: 0.88rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* — Sekcje: więcej powietrza, subtelniejszy szew — */
.pv-section {
  padding: 1.9rem 1.1rem 1.45rem;
}

.pv-section + .pv-section {
  border-top-color: rgba(15, 23, 42, 0.05);
}

[data-surface="dark"] .pv-section + .pv-section {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* — Przyciski: pewniejsze, większe, z życiem — */
.pv-btn {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 48px;
  padding: 0.65rem 1.3rem;
}

@media (hover: hover) and (pointer: fine) {
  .pv-btn:hover {
    transform: translateY(-1px);
  }
}

.pv-btn:focus-visible,
.pv-soc:focus-visible,
.pv-faq-toggle:focus-visible {
  outline: 2px solid var(--pv-accent, #6366f1);
  outline-offset: 2px;
}

.pv-btn--cta {
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
}

/* — Karty usług — */
.pv-svc-name {
  font-size: 1.06rem;
}

.pv-svc-desc {
  font-size: 0.84rem;
  line-height: 1.55;
}

.pv-svc-price-main {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/* — Cennik: numer jak w drogim gabinecie — */
.pv-price-card {
  border-radius: 18px;
  padding: 1.15rem 1rem;
}

.pv-price-name {
  font-size: 0.95rem;
}

.pv-price-num {
  font-size: 1.5rem;
}

.pv-price-features {
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.pv-price-features li {
  font-size: 0.8rem;
  line-height: 1.45;
}

.pv-price-type {
  letter-spacing: 0.09em;
  font-size: 0.64rem;
}

/* — Statystyki — */
.pv-stat-item {
  border-radius: 16px;
  padding: 1rem 0.7rem;
}

.pv-stat-value {
  font-size: 1.65rem;
}

.pv-stat-label {
  font-size: 0.78rem;
}

/* — Wezwanie do akcji — */
.pv-cta-block {
  border-radius: 22px;
  padding: 1.6rem 1.25rem;
}

.pv-cta-heading {
  font-size: 1.3rem;
  line-height: 1.2;
  text-wrap: balance;
}

.pv-cta-sub {
  font-size: 0.88rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* — Opinie — */
.pv-testi-text {
  font-size: 0.84rem;
  line-height: 1.6;
}

.pv-testi-name {
  font-size: 0.82rem;
}

.pv-testi-role {
  font-size: 0.74rem;
}

/* — FAQ — */
.pv-faq-toggle {
  font-size: 0.86rem;
}

/* — Formularz: czytelne etykiety, focus w akcencie — */
.pv-form-field label {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
}

.pv-input {
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pv-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pv-accent, #6366f1) 16%, transparent);
}

/* — Etykiety uppercase: szerszy, edytorski tracking — */
.pv-booking-label,
.pv-detail-section-title {
  letter-spacing: 0.09em;
}

/* — Desktop: skala „strona kliniki premium" (tylko strona publiczna) — */
@media (min-width: 1024px) {
  #publicScreen .pv-name {
    font-size: 2.4rem;
    line-height: 1.12;
  }

  #publicScreen .pv-layout-showcase .pv-name--showcase {
    font-size: 2.5rem;
  }

  #publicScreen .pv-tagline {
    font-size: 1.18rem;
  }

  #publicScreen .pv-bio {
    font-size: 1.06rem;
    line-height: 1.75;
    max-width: 46rem;
  }

  #publicScreen .pv-section-title {
    font-size: 1.8rem;
    margin-bottom: 1.05rem;
  }

  #publicScreen .pv-section-sub {
    font-size: 1.02rem;
    margin: -0.5rem 0 1.2rem;
  }

  #publicScreen .pv-section {
    padding: 2.9rem 1.25rem 2.1rem;
  }

  #publicScreen .pv-btn {
    font-size: 0.95rem;
    min-height: 48px;
  }

  #publicScreen .pv-price-num {
    font-size: 1.6rem;
  }

  #publicScreen .pv-stat-value {
    font-size: 2rem;
  }

  #publicScreen .pv-cta-heading {
    font-size: 1.85rem;
  }

  #publicScreen .pv-cta-sub {
    font-size: 1.08rem;
  }

  #publicScreen .pv-svc-name {
    font-size: 1.14rem;
  }

  #publicScreen .pv-svc-desc {
    font-size: 0.9rem;
  }

  #publicScreen .pv-testi-text {
    font-size: 0.95rem;
  }

  #publicScreen .pv-faq-toggle {
    font-size: 0.96rem;
  }

  #publicScreen .pv-detail-name {
    font-size: 1.8rem;
  }
}

/* Podgląd telefonu w kreatorze (każda szerokość ekranu) — ekranik ma
   ~318px, czyli ~85% realnego telefonu; skala typografii proporcjonalnie
   mniejsza, żeby proporcje wyglądały jak na prawdziwym mobile. */
.sb-device-screen .pv-name {
  font-size: 1.28rem;
}

.sb-device-screen .pv-name--showcase {
  font-size: 1.6rem;
}

.sb-device-screen .pv-hero--left .pv-name {
  font-size: 1.12rem;
}

.sb-device-screen .pv-tagline {
  font-size: 0.82rem;
}

.sb-device-screen .pv-bio {
  font-size: 0.78rem;
}

.sb-device-screen .pv-meta {
  font-size: 0.72rem;
}

.sb-device-screen .pv-section-title {
  font-size: 1.08rem;
}

.sb-device-screen .pv-section-sub {
  font-size: 0.76rem;
}

.sb-device-screen .pv-svc-name {
  font-size: 0.92rem;
}

.sb-device-screen .pv-svc-desc {
  font-size: 0.74rem;
}

.sb-device-screen .pv-svc-price-main {
  font-size: 1.15rem;
}

.sb-device-screen .pv-price-num {
  font-size: 1.35rem;
}

.sb-device-screen .pv-stat-value {
  font-size: 1.4rem;
}

.sb-device-screen .pv-cta-heading {
  font-size: 1.1rem;
}

.sb-device-screen .pv-cta-sub {
  font-size: 0.76rem;
}

.sb-device-screen .pv-btn {
  font-size: 0.78rem;
  min-height: 42px;
}

.sb-device-screen .pv-section {
  padding: 1.5rem 0.9rem 1.15rem;
}

/* Podgląd telefonu (mock ~318px) — przyciski CTA są tu wizualnie za duże
   względem mocka. Zmniejszamy TYLKO w podglądzie; realny telefon
   (#publicScreen) zachowuje pełne cele dotykowe 48/50px. */
.sb-device-screen .pv-svc-cta-btn {
  font-size: 0.72rem !important;
  min-height: 38px !important;
  padding: 0.5rem 0.8rem !important;
  border-radius: 11px;
}

.sb-device-screen .pv-detail-footer-cta {
  font-size: 0.76rem !important;
  min-height: 40px;
  padding: 0.6rem 0.9rem !important;
}

.sb-device-screen .pv-more-cta {
  font-size: 0.7rem;
}

.sb-device-screen .pv-more-name {
  font-size: 0.86rem;
}

.sb-device-screen .pv-more-price {
  font-size: 0.92rem;
}

/* ── Zgoda prawna + informacja o zwrotach przy checkout (2026-07) ── */
.pv-checkout-refund {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 7%, var(--pv-detail-elevated, #f8fafc));
  border: 1px solid color-mix(in srgb, var(--pv-accent, #6366f1) 18%, rgba(15, 23, 42, 0.07));
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--pv-detail-muted, rgba(15, 23, 42, 0.65));
}

.pv-checkout-refund i {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--pv-accent, #6366f1);
}

.pv-refund-pct {
  font-weight: 800;
  color: var(--pv-detail-text, #0f172a);
  white-space: nowrap;
}

.pv-refund-pct--keep {
  color: var(--pv-price-accent, var(--pv-accent, #6366f1));
}

.pv-checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.7rem 0 0.75rem;
  cursor: pointer;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--pv-detail-muted, rgba(15, 23, 42, 0.65));
  -webkit-tap-highlight-color: transparent;
}

.pv-checkout-consent a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pv-checkout-consent-box {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin: 0.1rem 0 0;
  accent-color: var(--pv-accent, #6366f1);
  cursor: pointer;
}

.pv-consent-req {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  opacity: 0.75;
  margin-top: 0.15rem;
}

.pv-checkout-consent.is-error {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(220, 38, 38, 0.35);
}

.pv-checkout-consent.is-error .pv-checkout-consent-box {
  accent-color: #dc2626;
}

.pv-checkout-consent.is-error .pv-consent-req {
  color: #dc2626;
  opacity: 1;
  font-weight: 700;
}

.pv-checkout-consent:focus-within {
  outline: none;
}

.pv-checkout-consent-box:focus-visible {
  outline: 2px solid var(--pv-accent, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Stopka publiczna — wyróżniony podział zwrotu przy anulacji */
.pv-public-foot-refund {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.55rem auto 0;
  max-width: 34rem;
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--pv-muted, rgba(15, 23, 42, 0.6));
}

.pv-public-foot-refund i {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--pv-accent, #6366f1);
}

.pv-public-foot-refund .pv-refund-pct {
  color: inherit;
  font-weight: 800;
}

/* ════════════════════════════════════════════════════════════════
   Warstwa „wow" (2026-07 v2) — ambientowa poświata hero w akcencie
   motywu, edytorskie kickery nad tytułami sekcji, pasek zaufania
   pod hero, dopracowany stan pustej strony. Wszystko automatyczne,
   sterowane tokenami motywu — zero konfiguracji w kreatorze.
   ════════════════════════════════════════════════════════════════ */

/* — Ambient: miękka poświata akcentu za hero (nie dotyka treści) — */
.pv-hero {
  position: relative;
  isolation: isolate;
}

.pv-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(140%, 640px);
  height: 130%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    55% 60% at 50% 30%,
    color-mix(in srgb, var(--pv-accent, #6366f1) 14%, transparent) 0%,
    transparent 72%
  );
}

/* Portret (showcase) ma pełnowymiarowe zdjęcie — poświata zbędna. */
.pv-hero--portrait::before {
  content: none;
}

/* — Kicker sekcji: mała edytorska etykieta z kreską — */
.pv-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pv-accent, #6366f1) 70%, var(--pv-hero-text, #0f172a));
}

.pv-kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

/* — Pasek zaufania pod hero — */
.pv-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.1rem;
  padding: 0 1.25rem 1.05rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pv-hero-muted, var(--pv-muted));
}

.pv-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.pv-trust-strip i {
  font-size: 0.72rem;
  color: var(--pv-accent, #6366f1);
}

/* — Pusta strona: zaprojektowany stan zamiast pustki — */
.pv-section--empty {
  padding-top: 1rem;
}

.pv-empty-card {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.1rem 1.5rem 2.2rem;
  border-radius: 24px;
  text-align: center;
  background: var(--pv-card-bg, rgba(255, 255, 255, 0.97));
  color: var(--pv-card-text, #0f172a);
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 22px 48px -28px color-mix(in srgb, var(--pv-accent, #6366f1) 35%, rgba(15, 23, 42, 0.25));
}

.pv-empty-ico {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 0.9rem;
  border-radius: 22px;
  font-size: 1.35rem;
  color: var(--pv-accent, #6366f1);
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 12%, var(--pv-card-bg, #fff));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pv-accent, #6366f1) 26%, transparent);
}

.pv-empty-title {
  margin: 0 0 0.45rem;
  font-size: 1.35rem;
  font-family: var(--pv-heading-font, inherit);
  font-weight: var(--pv-heading-weight, 800);
  letter-spacing: var(--pv-heading-tracking, -0.02em);
  text-wrap: balance;
}

.pv-empty-sub {
  margin: 0 auto;
  max-width: 24rem;
  font-size: 0.9rem;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--pv-card-muted, var(--pv-muted));
}

.pv-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.pv-empty-actions .pv-btn {
  min-width: 44%;
}

/* — Desktop — */
@media (min-width: 1024px) {
  #publicScreen .pv-kicker {
    font-size: 0.74rem;
    margin-bottom: 0.6rem;
  }

  #publicScreen .pv-trust-strip {
    font-size: 0.84rem;
    gap: 0.5rem 1.5rem;
    padding-bottom: 1.4rem;
  }

  #publicScreen .pv-empty-card {
    max-width: 34rem;
    padding: 2.75rem 2.25rem;
  }

  #publicScreen .pv-empty-title {
    font-size: 1.8rem;
  }

  #publicScreen .pv-empty-sub {
    font-size: 1.02rem;
  }
}

/* Podgląd telefonu w kreatorze — skala jak mobile */
.sb-device-screen .pv-kicker {
  font-size: 0.6rem;
}

.sb-device-screen .pv-trust-strip {
  font-size: 0.62rem;
  gap: 0.35rem 0.7rem;
}

/* Linki jako przyciski (np. akcje pustej strony) — bez podkreślenia */
a.pv-btn,
.pv-empty-actions .pv-btn {
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   Kalendarz rezerwacji — premium look (2026-07 v2).
   Mobile: dostępne dni wyraźnie tintowane akcentem, wybrany dzień
   z pierścieniem. Desktop: większa, przestronna karta kalendarza.
   ════════════════════════════════════════════════════════════════ */

.pv-cal-grid {
  gap: 4px;
}

.pv-cal-day--avail {
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pv-accent, #6366f1) 16%, transparent);
  border-radius: 10px;
}

.pv-cal-day--avail:hover {
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 18%, transparent);
}

.pv-cal-day--avail.is-selected {
  background: var(--pv-accent, #6366f1);
  color: var(--pv-on-accent, #fff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--pv-accent, #6366f1) 22%, transparent),
    0 6px 16px -6px color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent);
  font-weight: 800;
}

.pv-cal-day--avail:active {
  transform: scale(0.94);
}

.pv-cal-day {
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}

/* Desktop — kalendarz jako duża, przestronna karta */
@media (min-width: 1024px) {
  /* Krok 1 (wybór dnia) szerszy niż formularze (560px) */
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-step[data-pv-booking-step="1"] {
    max-width: 700px;
  }

  #publicScreen .pv-booking-sheet [data-pv-booking-cal-wrap] > div,
  #publicScreen .pv-booking-sheet .pv-booking-cal {
    background: var(--pv-detail-elevated, #fff);
    border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.08));
    border-radius: 22px;
    padding: 1.5rem 1.6rem 1.6rem;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 20px 48px -30px color-mix(in srgb, var(--pv-accent, #6366f1) 40%, rgba(15, 23, 42, 0.3));
  }

  #publicScreen .pv-booking-sheet .pv-cal-head {
    margin-bottom: 1.1rem;
  }

  #publicScreen .pv-booking-sheet .pv-cal-month-label {
    font-size: 1.18rem;
    letter-spacing: -0.015em;
  }

  #publicScreen .pv-booking-sheet .pv-cal-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 0.85rem;
  }

  #publicScreen .pv-booking-sheet .pv-cal-weekdays {
    font-size: 0.72rem;
    gap: 6px;
    margin-bottom: 0.6rem;
  }

  #publicScreen .pv-booking-sheet .pv-cal-grid {
    gap: 6px;
  }

  #publicScreen .pv-booking-sheet .pv-cal-day {
    font-size: 0.98rem;
    border-radius: 12px;
  }

  #publicScreen .pv-booking-sheet .pv-cal-day--avail {
    border-radius: 12px;
  }

  /* Krok 2 — godziny jako większa siatka kafelków */
  #publicScreen .pv-booking-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
  }

  #publicScreen .pv-booking-slot {
    min-height: 58px;
    border-radius: 14px;
  }

  #publicScreen .pv-booking-slot-time {
    font-size: 1.02rem;
  }

  #publicScreen .pv-booking-krok {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.9rem;
  }

  #publicScreen .pv-booking-date-title {
    font-size: 1.15rem;
  }
}

/* Stopka — wejście do panelu klienta (dostępne z całej strony, nie
   tylko przez pływający chip na górze) */
.pv-public-foot-panel {
  margin: 0 0 0.9rem;
  text-align: center;
}

.pv-public-foot-panel a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--pv-hero-text, #0f172a);
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pv-accent, #6366f1) 24%, transparent);
  transition: background 0.15s ease, transform 0.15s ease;
}

.pv-public-foot-panel a i {
  color: var(--pv-accent, #6366f1);
}

.pv-public-foot-panel a:hover {
  background: color-mix(in srgb, var(--pv-accent, #6366f1) 16%, transparent);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   Rezerwacja na desktopie — proporcje (2026-07 v3).
   Panel węższy (840px, inline w profile.html), kafelki godzin duże,
   krok 3 (podsumowanie) w 2 kolumnach — mieści się bez scrollowania.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* — Krok 2: godziny jako duże, dotykalne karty — */
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-slot {
    min-height: 72px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-slot-time {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-slot-dur-label {
    font-size: 0.76rem;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-date-title {
    font-size: 1.3rem;
    font-family: var(--pv-heading-font, inherit);
    font-weight: var(--pv-heading-weight, 800);
    letter-spacing: var(--pv-heading-tracking, -0.02em);
    margin-bottom: 1rem;
  }

  /* — Krok 3: podsumowanie jako 4 kompaktowe kafle w siatce — */
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.1rem;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary .pv-booking-summary-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: var(--pv-detail-elevated, #f8fafc);
    border: 1px solid var(--pv-detail-border, rgba(15, 23, 42, 0.07));
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary .pv-booking-summary-row span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pv-detail-muted, rgba(15, 23, 42, 0.55));
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary .pv-booking-summary-row strong {
    font-size: 1.02rem;
    letter-spacing: -0.01em;
  }

  /* — Krok 3: formularz kontaktowy w 2 kolumnach — */
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    align-items: start;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary-form > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary-form > .pv-form-field {
    grid-column: auto;
    margin: 0;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary-form .pv-checkout-refund,
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-summary-form .pv-checkout-consent {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* — Stopka arkusza: akcja wyrównana do szerokości treści — */
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet-foot {
    justify-content: center;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet-foot > * {
    flex: 0 0 auto;
  }

  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet-foot [data-pv-booking-next],
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet-foot .pv-booking-foot-cta,
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet-foot button[type="submit"],
  #publicScreen .pv-detail-overlay.is-booking-open .pv-booking-sheet-foot > .pv-btn {
    flex: 0 1 560px;
    min-height: 52px;
  }
}

/* Chip „Panel klienta" chowa się, gdy otwarty jest detal usługi lub
   rezerwacja — nie nachodzi na treść; wejście do panelu zostaje w stopce. */
body:has(.pv-detail-overlay.is-open) .pv-client-entry {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* ════════════════════════════════════════════════════════════════
   Redesign 2026-07: ocena „★ 5.0" (naffy), premium tryb Minimal
   oraz styl kart „Przezroczysty" (outline). Warstwa nadpisująca —
   celowo na końcu pliku.
   ════════════════════════════════════════════════════════════════ */

/* — Ocena w stylu naffy: jedna gwiazdka + pogrubiona wartość — */
.pv-svc-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0;
  color: var(--pv-card-text, #0f172a);
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
}

.pv-svc-stars i {
  font-size: 0.76rem;
  color: inherit;
}

.pv-svc-stars-val {
  margin-left: 0;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--pv-card-text, #0f172a);
}

/* Kafelki sklepu leżą wprost na tle strony — ocena w kolorze tekstu strony */
.pv-shop-info .pv-svc-stars,
.pv-shop-info .pv-svc-stars-val {
  color: var(--pv-hero-text, var(--pv-card-text, #0f172a));
}

/* — Karta klasyczna: nazwa u góry, pod nią cena po lewej i ocena po prawej — */
.pv-svc-card .pv-svc-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem 0.6rem;
}

.pv-svc-card .pv-svc-top .pv-svc-name {
  grid-column: 1 / -1;
}

.pv-svc-card .pv-svc-top .pv-svc-stars {
  justify-self: end;
}

.pv-scroll.pv-layout-cards .pv-svc-top {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ── Tryb Minimal — kompaktowa karta jak na naffy ── */
.pv-scroll.pv-layout-minimal .pv-svc-list {
  gap: 0.8rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-card--min {
  border-radius: 24px;
  padding: 1.05rem 1.05rem 1rem;
  overflow: visible;
}

.pv-svc-min-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

.pv-svc-min-flags .pv-svc-bestseller,
.pv-svc-min-flags .pv-svc-ribbon {
  position: static;
}

.pv-svc-min-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.pv-svc-min-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  color: var(--pv-on-accent, #fff);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 82%, #ffffff) 0%,
    var(--pv-svc-accent, var(--pv-accent, #6366f1)) 100%);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--pv-svc-accent, var(--pv-accent, #6366f1)) 75%, transparent);
}

.pv-svc-min-id {
  min-width: 0;
}

.pv-scroll.pv-layout-minimal .pv-svc-card--min .pv-svc-name {
  font-size: 1.02rem;
  line-height: 1.25;
}

.pv-svc-min-sub {
  margin: 0.18rem 0 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pv-card-muted, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-svc-min-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.85rem 0 0.9rem;
}

.pv-svc-card--min .pv-svc-price-box {
  padding: 0;
}

.pv-svc-card--min .pv-svc-price-main {
  font-size: 1.42rem;
}

/* Jak na naffy: najpierw aktualna cena, po niej przekreślona „przed" */
.pv-svc-card--min .pv-svc-price-old {
  font-size: 1rem;
  order: 2;
}

.pv-svc-card--min .pv-svc-stars {
  font-size: 0.88rem;
}

.pv-svc-card--min .pv-svc-stars-val {
  font-size: 0.92rem;
}

.pv-svc-card--min .pv-svc-badges {
  margin: 0 0 0.75rem;
}

.pv-scroll.pv-layout-minimal .pv-svc-card--min .pv-svc-cta-btn {
  font-size: 0.82rem !important;
  min-height: 48px;
  padding: 0.7rem 1rem !important;
}

/* ── Tło kart „Przezroczyste" — samo obramowanie, tło strony prześwituje.
   Kolory tekstu/obrysu liczy JS (cardSurfaceTokens) z jasności tła strony,
   więc działa tak samo na jasnych i ciemnych motywach. ── */
[data-card-surface="transparent"] .pv-scroll .pv-svc-card,
[data-card-surface="transparent"] .pv-scroll .pv-testi-card,
[data-card-surface="transparent"] .pv-scroll .pv-price-card,
[data-card-surface="transparent"] .pv-scroll .pv-faq-item,
[data-card-surface="transparent"] .pv-scroll .pv-stat-item,
[data-card-surface="transparent"] .pv-scroll .pv-avail-card {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--pv-accent, #6366f1) 30%, var(--pv-card-border, rgba(15, 23, 42, 0.14)));
  box-shadow: none;
}

[data-card-surface="transparent"] .pv-scroll .pv-svc-body {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  [data-card-surface="transparent"] .pv-scroll .pv-svc-card:hover {
    background: color-mix(in srgb, var(--pv-accent, #6366f1) 5%, transparent);
    border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent);
    box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--pv-accent, #6366f1) 45%, transparent);
  }
}

/* Na ciemnym tle cena w rozjaśnionym akcencie, przekreślenie stonowane. */
[data-surface="dark"][data-card-surface="transparent"] .pv-svc-card,
[data-surface="dark"][data-card-surface="transparent"] .pv-price-card {
  --pv-price-accent: color-mix(in srgb, var(--pv-accent, #6366f1) 55%, #ffffff);
  --pv-compare-price: rgba(248, 250, 252, 0.6);
}

/* ── Minimal na desktopie: karty zwarte jak na telefonie.
   Karta ma padding, więc musi liczyć wymiar z border-box (bez tego
   height:100% + padding wystaje poza wiersz grida i karty nachodzą). ── */
.pv-svc-card--min {
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  #publicScreen .pv-layout-minimal .pv-svc-list {
    align-items: start;
    gap: 1.1rem;
  }

  #publicScreen .pv-layout-minimal .pv-svc-card--min {
    height: auto;
    padding: 1.35rem 1.35rem 1.2rem;
  }

  #publicScreen .pv-layout-minimal .pv-svc-card--min .pv-svc-cta-row {
    margin-top: 0.4rem;
    padding-top: 0;
  }

  #publicScreen .pv-layout-minimal .pv-svc-card--min .pv-svc-name {
    font-size: 1.14rem;
  }

  #publicScreen .pv-svc-card--min .pv-svc-min-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 1.2rem;
  }

  #publicScreen .pv-svc-card--min .pv-svc-min-sub {
    font-size: 0.85rem;
  }

  #publicScreen .pv-svc-card--min .pv-svc-min-meta {
    margin: 1rem 0 1.05rem;
  }
}

/* ── Ramka telefonu w kreatorze ma ~318px szerokości (prawdziwy telefon
   ~390px) — zmniejszamy typografię karty Minimal proporcjonalnie, żeby
   podgląd wyglądał jak strona na żywo, bez zawijania ceny. ── */
.sb-device-screen .pv-layout-minimal .pv-svc-card--min {
  padding: 0.9rem 0.9rem 0.85rem;
  border-radius: 20px;
}

.sb-device-screen .pv-svc-min-head {
  gap: 0.62rem;
}

.sb-device-screen .pv-svc-min-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 0.9rem;
}

.sb-device-screen .pv-layout-minimal .pv-svc-card--min .pv-svc-name {
  font-size: 0.88rem;
}

.sb-device-screen .pv-svc-min-sub {
  font-size: 0.68rem;
}

.sb-device-screen .pv-svc-card--min .pv-svc-min-meta {
  margin: 0.7rem 0 0.75rem;
}

.sb-device-screen .pv-svc-card--min .pv-svc-price-main {
  font-size: 1.15rem;
}

.sb-device-screen .pv-svc-card--min .pv-svc-price-old {
  font-size: 0.84rem;
}

.sb-device-screen .pv-svc-card--min .pv-svc-stars {
  font-size: 0.76rem;
}

.sb-device-screen .pv-svc-card--min .pv-svc-stars-val {
  font-size: 0.8rem;
}

.sb-device-screen .pv-layout-minimal .pv-svc-card--min .pv-svc-cta-btn {
  font-size: 0.74rem !important;
  min-height: 42px;
  padding: 0.55rem 0.9rem !important;
}

/* ════════════════════════════════════════════════════════════════
   Poprawki 2026-07-09: siatka sklepu (kolory ceny na tle strony,
   hover w ramce kreatora), strzałka powrotu na ciemnym tle,
   ukryty scrollbar detalu. Warstwa nadpisująca — na końcu pliku.
   ════════════════════════════════════════════════════════════════ */

/* Kafelek sklepu leży wprost na tle strony — cena i przekreślenie
   czytają się z jasności strony, nie z powierzchni kart (np. białe
   karty + ciemne tło dawały ciemne, niewidoczne przekreślenie). */
.pv-shop-info .pv-svc-price-main {
  color: var(--pv-page-price-accent, var(--pv-price-accent, var(--pv-accent, #6366f1)));
}

.pv-shop-info .pv-svc-price-old {
  color: var(--pv-hero-muted, var(--pv-compare-price, #64748b));
}

/* Ramka telefonu w kreatorze reaguje na mysz, ale telefon nie ma hovera —
   nakładka „Zobacz/Zakup" zasłaniała mały kafelek. W podglądzie ją chowamy. */
.sb-device-screen .pv-shop-hover {
  display: none !important;
}

/* Strzałka powrotu w detalu usługi na ciemnym motywie: generyczna reguła
   [data-surface="dark"] .pv-back rozmywała chip i gubiła kolor ikony.
   Nad zdjęciem hero zawsze ciemny chip z białą strzałką, bez hero —
   tokeny arkusza detalu. */
[data-surface="dark"] .pv-detail-topbar--float .pv-back--detail,
#publicScreen[data-surface="dark"] .pv-detail-topbar--float .pv-back--detail {
  background: var(--pv-detail-hero-back-bg, rgba(15, 23, 42, 0.52));
  color: var(--pv-detail-hero-back-color, #ffffff);
  border: 1px solid var(--pv-detail-hero-back-border, rgba(255, 255, 255, 0.22));
}

[data-surface="dark"] .pv-detail-view--no-hero .pv-detail-topbar--float .pv-back--detail,
#publicScreen[data-surface="dark"] .pv-detail-view--no-hero .pv-detail-topbar--float .pv-back--detail {
  background: var(--pv-detail-back-bg, rgba(255, 255, 255, 0.12));
  color: var(--pv-detail-back-color, #f8fafc);
  border-color: var(--pv-detail-back-border, rgba(255, 255, 255, 0.2));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Detal usługi przewija się wewnątrz nakładki — pasek przewijania po
   prawej psuł wygląd w każdym motywie. Scroll działa dalej, pasek znika. */
.pv-detail-overlay {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pv-detail-overlay::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Warstwa: hero — miasto/telefon jako eleganckie chipsy + social w kolorach
   marek (Instagram/TikTok/Facebook/X). Selektory celowo mocniejsze niż
   bazowe reguły (inline <style> w profile.html i builder.css w panelu).
   ═══════════════════════════════════════════════════════════════════════ */

#publicScreen .pv-hero .pv-meta,
.sb-device-screen .pv-hero .pv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  /* auto: hero portrait ogranicza szerokość kontenera — trzymaj go w osi */
  margin: 0.6rem auto 0.25rem;
}

#publicScreen .pv-hero .pv-meta .pv-meta-item,
.sb-device-screen .pv-hero .pv-meta .pv-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.44rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pv-card-bg, #fff) 78%, transparent);
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  color: var(--pv-hero-text, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#publicScreen .pv-hero .pv-meta .pv-meta-ico,
.sb-device-screen .pv-hero .pv-meta .pv-meta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pv-accent, #6366f1);
  font-size: 0.72rem;
}

/* Mobile: kompaktowy chip — nagłówek „Miasto/Telefon" ukryty. */
#publicScreen .pv-hero .pv-meta .pv-meta-label,
.sb-device-screen .pv-hero .pv-meta .pv-meta-label {
  display: none;
}

#publicScreen .pv-hero .pv-meta .pv-meta-cc,
.sb-device-screen .pv-hero .pv-meta .pv-meta-cc {
  opacity: 0.6;
  font-weight: 600;
  margin-right: 0.1em;
}

#publicScreen .pv-hero .pv-meta .pv-meta-item--tel,
.sb-device-screen .pv-hero .pv-meta .pv-meta-item--tel {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  #publicScreen .pv-hero .pv-meta .pv-meta-item--tel:hover,
  .sb-device-screen .pv-hero .pv-meta .pv-meta-item--tel:hover {
    border-color: color-mix(in srgb, var(--pv-accent, #6366f1) 45%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--pv-accent, #6366f1) 18%, transparent);
  }
}

#publicScreen[data-surface="dark"] .pv-hero .pv-meta .pv-meta-item,
.sb-device-screen[data-surface="dark"] .pv-hero .pv-meta .pv-meta-item {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Desktop — publiczna strona: pełna sekcja kontaktu. Kafelki z ikoną
   w akcentowej „bańce", nagłówkiem MIASTO/TELEFON i wyraźną wartością. */
@media (min-width: 760px) {
  #publicScreen .pv-hero .pv-meta {
    gap: 0.7rem;
    margin: 1.05rem auto 0.3rem;
    max-width: none;
    justify-content: center;
  }

  /* Hero z lewej — sekcja kontaktu trzyma lewą oś jak reszta treści. */
  #publicScreen .pv-hero--left .pv-meta {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
  }

  #publicScreen .pv-hero .pv-meta .pv-meta-item {
    gap: 0.7rem;
    padding: 0.62rem 1.15rem 0.62rem 0.72rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pv-card-bg, #fff) 88%, transparent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px -14px rgba(15, 23, 42, 0.18);
    text-align: left;
  }

  #publicScreen .pv-hero .pv-meta .pv-meta-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pv-accent, #6366f1) 14%, transparent);
    font-size: 0.92rem;
    flex-shrink: 0;
  }

  #publicScreen .pv-hero .pv-meta .pv-meta-txt {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  #publicScreen .pv-hero .pv-meta .pv-meta-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.55;
  }

  #publicScreen .pv-hero .pv-meta .pv-meta-value {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  #publicScreen[data-surface="dark"] .pv-hero .pv-meta .pv-meta-item {
    background: rgba(255, 255, 255, 0.07);
  }

  #publicScreen[data-surface="dark"] .pv-hero .pv-meta .pv-meta-ico {
    background: color-mix(in srgb, var(--pv-accent, #6366f1) 22%, transparent);
  }
}

/* ── Social: firmowe kolory, biała ikona, poświata marki ── */
#publicScreen .pv-hero .pv-social .pv-soc,
.sb-device-screen .pv-hero .pv-social .pv-soc {
  border: none;
  color: #fff;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  #publicScreen .pv-hero .pv-social .pv-soc:hover,
  .sb-device-screen .pv-hero .pv-social .pv-soc:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}

#publicScreen .pv-hero .pv-social .pv-soc--instagram,
.sb-device-screen .pv-hero .pv-social .pv-soc--instagram {
  background: radial-gradient(circle at 32% 110%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 92%);
  box-shadow: 0 4px 14px rgba(214, 36, 159, 0.35);
}

#publicScreen .pv-hero .pv-social .pv-soc--tiktok,
.sb-device-screen .pv-hero .pv-social .pv-soc--tiktok {
  background: #0b0b0f;
  box-shadow:
    0 4px 14px rgba(105, 201, 208, 0.3),
    0 2px 8px rgba(238, 29, 82, 0.22);
}

#publicScreen .pv-hero .pv-social .pv-soc--facebook,
.sb-device-screen .pv-hero .pv-social .pv-soc--facebook {
  background: linear-gradient(135deg, #1877f2 0%, #0c5fce 100%);
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35);
}

#publicScreen .pv-hero .pv-social .pv-soc--x,
.sb-device-screen .pv-hero .pv-social .pv-soc--x {
  background: #0f1419;
  box-shadow: 0 4px 14px rgba(15, 20, 25, 0.3);
}

#publicScreen .pv-hero .pv-social .pv-soc--discord,
.sb-device-screen .pv-hero .pv-social .pv-soc--discord {
  background: #5865f2;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.4);
}

/* ── Tryb „kolor strony": wszystkie ikony w akcencie zamiast kolorów marek ── */
#publicScreen .pv-hero .pv-social--accent .pv-soc,
.sb-device-screen .pv-hero .pv-social--accent .pv-soc {
  background: linear-gradient(145deg,
    var(--pv-accent, #6366f1),
    color-mix(in srgb, var(--pv-accent, #6366f1) 80%, #000)) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pv-accent, #6366f1) 38%, transparent) !important;
  border: none !important;
  color: #fff;
}

/* ── Wszystkie ikony social zawsze w jednym rzędzie: kurczą się równo,
      pozostając okrągłe (aspect-ratio zamiast sztywnej wysokości). ── */
.pv-social {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
}

.pv-social .pv-soc {
  min-width: 0;
  height: auto !important;
  aspect-ratio: 1 / 1;
  flex-shrink: 1;
}

/* Ciemny motyw — czarne kafelki (TikTok/X) dostają obrys, żeby nie zlewały
   się z tłem; poświaty marek zostają. */
#publicScreen[data-surface="dark"] .pv-hero .pv-social .pv-soc--tiktok,
.sb-device-screen[data-surface="dark"] .pv-hero .pv-social .pv-soc--tiktok,
#publicScreen[data-surface="dark"] .pv-hero .pv-social .pv-soc--x,
.sb-device-screen[data-surface="dark"] .pv-hero .pv-social .pv-soc--x {
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ── BESTSELLER w tonie wybranym przy etykiecie ──
   Pill w rogu karty dostaje kolor DOKŁADNIE taki, jaki sprzedawca wybrał
   w edytorze (wcześniej zawsze przejmował akcent strony — mylące). */
.pv-svc-bestseller--sky {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(14, 165, 233, 0.6), 0 2px 6px rgba(15, 23, 42, 0.22);
}

.pv-svc-bestseller--violet {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(139, 92, 246, 0.6), 0 2px 6px rgba(15, 23, 42, 0.22);
}

.pv-svc-bestseller--emerald {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.6), 0 2px 6px rgba(15, 23, 42, 0.22);
}

.pv-svc-bestseller--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(245, 158, 11, 0.6), 0 2px 6px rgba(15, 23, 42, 0.22);
}

.pv-svc-bestseller--rose {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(244, 63, 94, 0.6), 0 2px 6px rgba(15, 23, 42, 0.22);
}

.pv-svc-bestseller--accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pv-accent, #6366f1) 88%, #fff) 0%, color-mix(in srgb, var(--pv-accent, #6366f1) 84%, #000) 100%);
  color: #fff;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--pv-accent, #6366f1) 60%, transparent), 0 2px 6px rgba(15, 23, 42, 0.22);
}

/* ═══════════════════════════════════════════════════════════════
   Opis produktu/usługi — premium typografia (warstwa nadpisująca).
   Detal oferty: pełny, żywy opis zamiast szarego bloku. Obejmuje
   stronę publiczną, podgląd w panelu i podgląd w kreatorze usługi.
   ═══════════════════════════════════════════════════════════════ */

.pv-detail-desc.pv-desc-rich,
.pb-svc-preview-desc.pv-desc-rich {
  font-size: 0.95rem;
  line-height: 1.75;
}

.pv-detail-desc.pv-desc-rich p,
.pb-svc-preview-desc.pv-desc-rich p {
  margin: 0 0 0.85rem;
  color: color-mix(in srgb, var(--pv-card-text, #0f172a) 86%, transparent);
}

.pv-detail-desc.pv-desc-rich p:last-child,
.pb-svc-preview-desc.pv-desc-rich p:last-child {
  margin-bottom: 0;
}

.pv-detail-desc.pv-desc-rich strong,
.pb-svc-preview-desc.pv-desc-rich strong {
  font-weight: 750;
  color: var(--pv-card-text, #0f172a);
}

/* Nagłówki — wyraźne, z akcentową belką zamiast szarej drobnicy */
.pv-detail-desc.pv-desc-rich h2,
.pb-svc-preview-desc.pv-desc-rich h2 {
  position: relative;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 1.4rem 0 0.55rem;
  padding-left: 0.85rem;
  color: var(--pv-card-text, #0f172a);
}

.pv-detail-desc.pv-desc-rich h2::before,
.pb-svc-preview-desc.pv-desc-rich h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg,
    var(--pv-accent, #6366f1),
    color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent));
}

/* Nagłówek wyśrodkowany/do prawej — belka zniknęłaby z osi, chowamy ją */
.pv-detail-desc.pv-desc-rich h2[style*="center"],
.pv-detail-desc.pv-desc-rich h2[style*="right"],
.pb-svc-preview-desc.pv-desc-rich h2[style*="center"],
.pb-svc-preview-desc.pv-desc-rich h2[style*="right"] {
  padding-left: 0;
}

.pv-detail-desc.pv-desc-rich h2[style*="center"]::before,
.pv-detail-desc.pv-desc-rich h2[style*="right"]::before,
.pb-svc-preview-desc.pv-desc-rich h2[style*="center"]::before,
.pb-svc-preview-desc.pv-desc-rich h2[style*="right"]::before {
  display: none;
}

.pv-detail-desc.pv-desc-rich h2:first-child,
.pb-svc-preview-desc.pv-desc-rich h2:first-child {
  margin-top: 0;
}

.pv-detail-desc.pv-desc-rich h3,
.pb-svc-preview-desc.pv-desc-rich h3 {
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
  margin: 1.1rem 0 0.4rem;
  color: color-mix(in srgb, var(--pv-card-text, #0f172a) 92%, transparent);
}

.pv-detail-desc.pv-desc-rich h3:first-child,
.pb-svc-preview-desc.pv-desc-rich h3:first-child {
  margin-top: 0;
}

/* Listy — akcentowe znaczniki, czytelne odstępy */
.pv-detail-desc.pv-desc-rich ul,
.pv-detail-desc.pv-desc-rich ol,
.pb-svc-preview-desc.pv-desc-rich ul,
.pb-svc-preview-desc.pv-desc-rich ol {
  margin: 0.5rem 0 0.95rem;
  padding-left: 1.45rem;
  color: color-mix(in srgb, var(--pv-card-text, #0f172a) 86%, transparent);
}

.pv-detail-desc.pv-desc-rich li,
.pb-svc-preview-desc.pv-desc-rich li {
  margin: 0.32rem 0;
  padding-left: 0.15rem;
}

.pv-detail-desc.pv-desc-rich li::marker,
.pb-svc-preview-desc.pv-desc-rich li::marker {
  color: var(--pv-accent, #6366f1);
  font-weight: 700;
}

/* Linki w opisie */
.pv-detail-desc.pv-desc-rich a,
.pb-svc-preview-desc.pv-desc-rich a {
  color: var(--pv-accent, #6366f1);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--pv-accent, #6366f1) 45%, transparent);
  transition: text-decoration-color 0.15s ease;
}

.pv-detail-desc.pv-desc-rich a:hover,
.pb-svc-preview-desc.pv-desc-rich a:hover {
  text-decoration-color: var(--pv-accent, #6366f1);
}

/* Zdjęcia w opisie — pełniejsza oprawa */
.pv-detail-desc.pv-desc-rich figure.pv-desc-figure,
.pb-svc-preview-desc.pv-desc-rich figure.pv-desc-figure {
  margin: 1.15rem 0;
}

.pv-detail-desc.pv-desc-rich figure.pv-desc-figure img,
.pb-svc-preview-desc.pv-desc-rich figure.pv-desc-figure img {
  border-radius: 18px;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    0 18px 40px -20px rgba(15, 23, 42, 0.3);
}

/* Skrót opisu na karcie usługi — odrobinę więcej kontrastu */
.pv-svc-desc.pv-desc-rich,
.pv-svc-desc.pv-desc-rich p {
  color: color-mix(in srgb, var(--pv-card-text, #0f172a) 72%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   Detal usługi: sklepowa karuzela zdjęć u góry + sekcja „Galeria".
   Slajdy przesuwają się w poziomie (swipe/strzałki/kropki/licznik).
   ═══════════════════════════════════════════════════════════════ */

.pv-detail-hero--carousel .pv-detail-hero-track {
  display: flex;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.pv-detail-hero--carousel .pv-detail-hero-track .pv-detail-hero-slide {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Strzałki — szklane pastylki jak w sklepach; tylko desktop (mobile = swipe) */
.pv-detail-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.22);
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pv-detail-hero-nav--prev { left: 14px; }
.pv-detail-hero-nav--next { right: 14px; }

.pv-detail-hero-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.07);
}

.pv-detail-hero-nav:active {
  transform: translateY(-50%) scale(0.96);
}

@media (min-width: 760px) {
  .pv-detail-hero-nav { display: inline-flex; }
}

/* Licznik 2/5 — ciemna szklana pigułka w rogu */
.pv-detail-hero-count {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Kropki — delikatny cień, płynne przejście aktywnej */
.pv-detail-hero-dot {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: width 0.22s ease, background 0.18s ease;
}

/* ── Sekcja „Galeria" na detalu — karty zdjęć z oprawą ── */
.pv-detail-section--portfolio .pv-portfolio-cell {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--pv-card-border, rgba(15, 23, 42, 0.08));
  background: var(--pv-card-bg, #fff);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 12px 26px -20px rgba(15, 23, 42, 0.28);
}

.pv-detail-section--portfolio .pv-portfolio-cell img {
  display: block;
  transition: transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pv-detail-section--portfolio .pv-portfolio-cell:hover img {
    transform: scale(1.05);
  }
}

@media (min-width: 769px) {
  .pv-detail-section--portfolio .pv-detail-portfolio-desktop .pv-portfolio-cell img {
    max-height: 140px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Blok tekstowy strony — premium typografia (spójna z opisem oferty):
   akcentowa belka przy nagłówkach, akcentowe markery list, zdjęcia.
   ═══════════════════════════════════════════════════════════════ */

.pv-rich-text p {
  color: color-mix(in srgb, var(--pv-hero-text, currentColor) 86%, transparent);
}

.pv-rich-text strong {
  font-weight: 750;
  color: var(--pv-hero-text, inherit);
}

.pv-rich-text h2 {
  position: relative;
  padding-left: 0.7rem;
}

.pv-rich-text h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg,
    var(--pv-accent, #6366f1),
    color-mix(in srgb, var(--pv-accent, #6366f1) 55%, transparent));
}

.pv-rich-text h2[style*="center"],
.pv-rich-text h2[style*="right"] {
  padding-left: 0;
}

.pv-rich-text h2[style*="center"]::before,
.pv-rich-text h2[style*="right"]::before {
  display: none;
}

.pv-rich-text ol {
  padding-left: 1.1rem;
  margin: 0 0 0.5rem;
}

.pv-rich-text li {
  padding-left: 0.1rem;
}

.pv-rich-text li::marker {
  color: var(--pv-accent, #6366f1);
  font-weight: 700;
}

.pv-rich-text a {
  color: var(--pv-accent, #6366f1);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2.5px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--pv-accent, #6366f1) 45%, transparent);
}

.pv-rich-text a:hover {
  text-decoration-color: var(--pv-accent, #6366f1);
}

/* Zdjęcia wstawione w blok tekstowy */
.pv-rich-text figure.pv-desc-figure {
  margin: 0.9rem 0;
}

.pv-rich-text figure.pv-desc-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    0 18px 40px -20px rgba(15, 23, 42, 0.3);
}

.pv-rich-text figure.pv-desc-figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.8em;
  line-height: 1.45;
  color: color-mix(in srgb, var(--pv-hero-text, currentColor) 62%, transparent);
  text-align: center;
}


/* ═══════════════════════════════════════════
   Blok „Jak to działa" — oś czasu (v2)
   ═══════════════════════════════════════════ */
.pv-process-flow {
  display: flex;
  flex-direction: column;
}

.pv-process-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.1rem;
}

.pv-process-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pv-process-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(145deg,
    var(--pv-process-accent, var(--pv-accent, #6366f1)),
    color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 78%, #000));
  color: var(--pv-on-accent, #fff);
  box-shadow:
    0 3px 10px color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 38%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.pv-process-track {
  flex: 1;
  width: 2px;
  min-height: 22px;
  margin: 6px 0;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 45%, transparent),
    color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 12%, transparent));
}

.pv-process-card {
  min-width: 0;
  padding: 0.35rem 0 1.6rem;
}

.pv-process-row.is-last .pv-process-card {
  padding-bottom: 0;
}

.pv-process-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.pv-process-chip {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem;
  color: var(--pv-process-accent, var(--pv-accent, #6366f1));
  background: color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 24%, transparent);
}

.pv-process-flow .pv-process-title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--pv-hero-text, inherit);
}

.pv-process-flow .pv-process-desc {
  font-size: 0.98rem;
  line-height: 1.62;
  margin: 0 0 0 calc(38px + 0.6rem);
  color: var(--pv-hero-muted, var(--pv-muted, #64748b));
}

[data-surface="dark"] .pv-process-track {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 55%, transparent),
    color-mix(in srgb, var(--pv-process-accent, var(--pv-accent, #6366f1)) 18%, transparent));
}