/* ============================================
   Drewnianysklep v3 — Info pages (Kontakt, FAQ, Regulamin, etc.)
   ============================================ */

.ds-info-page {
  max-width: var(--ds-max);
  margin: 0 auto;
  padding: 32px 32px 80px;
}

/* ─── Header ─────────────────────────────────────────────────── */
.ds-info-head {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ds-line);
  max-width: 720px;
}
.ds-info-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 14px 0 12px;
  text-wrap: balance;
}
.ds-info-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ds-ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* ─── Content (default page.php) ─────────────────────────────── */
/* v0.14.7: max-width zwiekszony z 720 -> 920px zeby galerie/columny dla landing SEO
   strony (pudelka-drewniane, etc.) mialy wiecej miejsca. Tekstowe paragrafy nadal
   ograniczone do 64ch via reading constraint (ponizej). */
.ds-info-content {
  max-width: 920px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ds-ink);
}
/* Reading constraint: paragrafy tekstowe wezsze (lepsza czytelnosc) */
.ds-info-content > p,
.ds-info-content > ul,
.ds-info-content > ol {
  max-width: 64ch;
}
/* Bloki ktore powinny brac pelna szerokosc kontenera */
.ds-info-content > .wp-block-gallery,
.ds-info-content > .wp-block-columns,
.ds-info-content > .wp-block-cover,
.ds-info-content > .wp-block-image.alignwide,
.ds-info-content > figure.wp-block-image {
  max-width: 100%;
}
.ds-info-content > * { margin: 0 0 20px; }
.ds-info-content > h2 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  margin: 36px 0 16px;
  color: var(--ds-ink);
}
.ds-info-content > h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin: 28px 0 12px;
  color: var(--ds-ink);
}
.ds-info-content > h4 {
  font-weight: 700;
  font-size: 17px;
  margin: 22px 0 8px;
  color: var(--ds-ink);
}
.ds-info-content > p { color: var(--ds-ink-soft); }
.ds-info-content > ul,
.ds-info-content > ol {
  padding-left: 22px;
  color: var(--ds-ink-soft);
}
.ds-info-content > ul li,
.ds-info-content > ol li { margin-bottom: 8px; }
.ds-info-content a {
  color: var(--ds-olive-deep);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
.ds-info-content a:hover { color: var(--ds-ink); }
.ds-info-content a[href^="tel:"],
.ds-info-content a[href^="mailto:"] {
  white-space: nowrap;
}
.ds-tel-nowrap { white-space: nowrap; }

/* W wąskich kolumnach Gutenberg wymuś numer pod etykietą jako blok —
   zamiast brzydkiego łamania "Telefon" / "stacjonarny: +48 683 466 438". */
.wp-block-column .ds-tel-nowrap,
.wp-block-columns .ds-tel-nowrap {
  display: block;
  font-weight: 700;
  margin-top: 2px;
}
/* IBAN też owinięty w nowrap przez JS — w wąskich kolumnach jako blok */
.wp-block-column code,
.wp-block-columns code {
  display: inline-block;
  word-break: break-all;
  font-size: 12px;
}
.ds-info-content blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--ds-olive);
  background: var(--ds-paper);
  border-radius: var(--ds-radius-sm);
  font-style: italic;
  color: var(--ds-ink);
}
.ds-info-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.ds-info-content th,
.ds-info-content td {
  padding: 10px 14px;
  border: 1px solid var(--ds-line);
  text-align: left;
}
.ds-info-content th { background: var(--ds-cream); font-weight: 700; }

/* ─── JAK ROBIMY ─────────────────────────────────────────────── */
.ds-jakrobimy-intro {
  max-width: 720px;
  margin: 0 auto 56px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ds-ink-soft);
  text-align: center;
}
.ds-jakrobimy-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 72px;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ds-jakrobimy-step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 36px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  position: relative;
}
.ds-jakrobimy-step::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 100%;
  width: 1px;
  height: 28px;
  background: var(--ds-line);
}
.ds-jakrobimy-step:last-child::before { display: none; }
.ds-jakrobimy-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--ds-olive) 0%, var(--ds-olive-deep) 100%);
  color: var(--ds-paper);
  border-radius: 50%;
  font-family: var(--ds-font-display);
  font-size: 24px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(110, 110, 67, 0.25);
}
.ds-jakrobimy-step-name {
  font-family: var(--ds-font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 0 0 12px;
}
.ds-jakrobimy-step-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ds-ink);
  margin: 0 0 14px;
}
.ds-jakrobimy-step-long {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ds-ink-soft);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
}

.ds-jakrobimy-materials {
  margin: 72px 0;
  padding: 48px 0;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
}
.ds-jakrobimy-materials h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  text-align: center;
  margin: 0 0 36px;
  color: var(--ds-ink);
}
.ds-jakrobimy-materials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.ds-jakrobimy-material {
  background: var(--ds-bg, #faf9f6);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  padding: 24px 28px;
}
.ds-jakrobimy-material h3 {
  font-family: var(--ds-font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ds-olive-deep);
}
.ds-jakrobimy-material p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ds-ink-soft);
  margin: 0;
}

.ds-jakrobimy-pracownia {
  margin: 56px auto;
  max-width: 800px;
  text-align: center;
}
.ds-jakrobimy-pracownia h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ds-ink);
}
.ds-jakrobimy-pracownia p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ds-ink-soft);
  margin: 0;
}

.ds-jakrobimy-cta {
  margin-top: 72px;
  padding: 56px 32px;
  background: linear-gradient(135deg, var(--ds-cream) 0%, var(--ds-paper) 100%);
  border-radius: var(--ds-radius);
  text-align: center;
}
.ds-jakrobimy-cta h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--ds-ink);
}
.ds-jakrobimy-cta p {
  font-size: 16px;
  color: var(--ds-ink-soft);
  margin: 0 0 28px;
}
.ds-jakrobimy-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── KONTAKT ────────────────────────────────────────────────── */
.ds-kontakt-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.ds-kontakt-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 100px;
}
.ds-kontakt-block {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 18px 20px;
}
.ds-kontakt-block h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--ds-ink);
}

.ds-kontakt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-kontakt-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.ds-kontakt-list a {
  color: var(--ds-ink);
  text-decoration: none;
  font-weight: 600;
}
.ds-kontakt-list a:hover { color: var(--ds-olive-deep); }
.ds-kontakt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-cream);
  color: var(--ds-olive-deep);
  flex-shrink: 0;
}

.ds-kontakt-addr {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
}
.ds-kontakt-addr strong { color: var(--ds-ink); display: block; margin-bottom: 4px; }
.ds-kontakt-addr small { font-size: 12px; color: var(--ds-ink-muted); }
.ds-kontakt-brand {
  font-family: var(--ds-font-display);
  font-weight: 600 !important;
  font-size: 18px;
  color: var(--ds-olive-deep) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em;
}

.ds-kontakt-tel {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.ds-kontakt-tel-label {
  font-size: 10.5px;
  color: var(--ds-ink-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ds-kontakt-tel a {
  font-weight: 700;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}
.ds-kontakt-tel a:hover { color: var(--ds-olive-deep); }

.ds-kontakt-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.ds-kontakt-hours li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-kontakt-hours li:last-child { border-bottom: 0; }
.ds-kontakt-hours li > span:first-child { color: var(--ds-ink-soft); }
.ds-kontakt-hours li > span:last-child { font-weight: 700; color: var(--ds-ink); }
.ds-kontakt-hours-note {
  font-size: 12px;
  font-style: italic;
  color: var(--ds-ink-muted);
  padding-left: 14px !important;
  border-bottom: 0 !important;
}
.ds-kontakt-hours-note > span:first-child { color: var(--ds-ink-muted) !important; }
.ds-kontakt-hours-note > span:last-child { font-weight: 600 !important; color: var(--ds-ink-muted) !important; }

.ds-kontakt-bank {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-kontakt-bank li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-kontakt-bank li:last-child { border-bottom: 0; }
.ds-kontakt-bank-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  margin-bottom: 4px;
}
.ds-kontakt-bank-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.ds-kontakt-bank-iban {
  flex: 1;
  display: block;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ds-ink);
  background: var(--ds-cream);
  padding: 7px 8px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-line);
  white-space: nowrap;
  overflow-x: auto;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  user-select: all;
  min-width: 0;
  scrollbar-width: thin;
}
.ds-kontakt-bank-iban::-webkit-scrollbar { height: 4px; }
.ds-kontakt-bank-iban::-webkit-scrollbar-thumb { background: var(--ds-line); border-radius: 999px; }

/* Copy button — przy IBAN, mailu, itp. */
.ds-copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: auto;
  min-height: 36px;
  padding: 0;
  flex-shrink: 0;
  background: var(--ds-cream);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.ds-copy-btn:hover {
  background: var(--ds-olive);
  border-color: var(--ds-olive);
  color: var(--ds-paper);
  transform: translateY(-1px);
}
.ds-copy-btn:focus-visible {
  outline: 2px solid var(--ds-olive);
  outline-offset: 2px;
}
.ds-copy-btn .ds-copy-icon,
.ds-copy-btn .ds-copy-check {
  display: block;
  transition: opacity .15s, transform .15s;
}
.ds-copy-btn .ds-copy-check {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.5);
}
.ds-copy-btn.is-copied {
  background: var(--ds-success);
  border-color: var(--ds-success);
  color: var(--ds-paper);
}
.ds-copy-btn.is-copied .ds-copy-icon { opacity: 0; transform: scale(0.5); }
.ds-copy-btn.is-copied .ds-copy-check { opacity: 1; transform: scale(1); }
.ds-copy-btn.is-error {
  background: var(--ds-error);
  border-color: var(--ds-error);
  color: var(--ds-paper);
  animation: ds-copy-shake 0.4s;
}
@keyframes ds-copy-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* FAQ callout (na page-kontakt.php przed formularzem) */
.ds-kontakt-faq-callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  margin: 0 0 20px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  text-decoration: none;
  color: var(--ds-ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ds-kontakt-faq-callout:hover {
  border-color: var(--ds-olive);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-card);
}
.ds-kontakt-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ds-cream);
  color: var(--ds-olive-deep);
  flex-shrink: 0;
}
.ds-kontakt-faq-callout:hover .ds-kontakt-faq-icon {
  background: var(--ds-olive);
  color: var(--ds-paper);
}
.ds-kontakt-faq-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.ds-kontakt-faq-text strong {
  font-size: 15px;
  color: var(--ds-ink);
  margin-bottom: 2px;
}
.ds-kontakt-faq-text small {
  font-size: 12.5px;
  color: var(--ds-ink-muted);
}
.ds-kontakt-faq-arrow {
  color: var(--ds-olive-deep);
  display: flex;
  align-items: center;
}

.ds-kontakt-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-kontakt-social a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: var(--ds-cream);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.ds-kontakt-social a:hover {
  background: var(--ds-olive);
  color: var(--ds-paper);
  border-color: var(--ds-olive);
}

/* ─── Formularz ──────────────────────────────────────────────── */
.ds-kontakt-main { min-width: 0; }
.ds-kontakt-form-wrap {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 28px;
  margin-top: 20px;
}
.ds-kontakt-form-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--ds-ink);
}
.ds-kontakt-form-sub {
  font-size: 14px;
  color: var(--ds-ink-soft);
  margin: 0 0 18px;
}

.ds-kontakt-form .form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
}
.ds-kontakt-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 6px;
}
.ds-kontakt-form .required { color: var(--ds-error); }
.ds-kontakt-form .optional { font-size: 11px; font-weight: 500; color: var(--ds-ink-muted); }
.ds-kontakt-form input[type="text"],
.ds-kontakt-form input[type="email"],
.ds-kontakt-form input[type="tel"],
.ds-kontakt-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-cream);
  font-family: inherit;
  font-size: 14px;
  color: var(--ds-ink);
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.ds-kontakt-form input:focus,
.ds-kontakt-form textarea:focus {
  outline: 0;
  border-color: var(--ds-olive);
  background: var(--ds-paper);
}
.ds-kontakt-form textarea {
  min-height: 130px;
  resize: vertical;
}
.ds-kontakt-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ds-kontakt-form-note {
  font-size: 12px;
  color: var(--ds-ink-muted);
  margin: 14px 0 0;
}
.ds-kontakt-form-note a { color: var(--ds-olive-deep); font-weight: 600; }

.ds-kontakt-msg {
  padding: 14px 18px;
  border-radius: var(--ds-radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
  border: 1px solid;
}
.ds-kontakt-msg.is-ok { background: rgba(111, 127, 83, 0.1); border-color: var(--ds-success); color: var(--ds-success); }
.ds-kontakt-msg.is-err { background: rgba(185, 77, 58, 0.08); border-color: var(--ds-error); color: var(--ds-error); }

/* ─── B2B Pro register form ──────────────────────────────────── */
.ds-pro-register {
  max-width: 760px;
  margin: 0 auto;
}
.ds-pro-form fieldset {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 22px 24px;
  margin: 0 0 18px;
}
.ds-pro-form fieldset legend {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ds-ink);
  padding: 0 8px;
  margin-left: -8px;
}
.ds-pro-form .form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
}
.ds-pro-form .form-row:last-child { margin-bottom: 0; }
.ds-pro-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 6px;
}
.ds-pro-form .required { color: var(--ds-error); }
.ds-pro-form .optional { font-size: 11px; font-weight: 500; color: var(--ds-ink-muted); }
.ds-pro-form input[type="text"],
.ds-pro-form input[type="email"],
.ds-pro-form input[type="tel"],
.ds-pro-form input[type="url"],
.ds-pro-form input[type="password"],
.ds-pro-form select,
.ds-pro-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-cream);
  font-family: inherit;
  font-size: 14px;
  color: var(--ds-ink);
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.ds-pro-form input:focus,
.ds-pro-form select:focus,
.ds-pro-form textarea:focus {
  outline: 0;
  border-color: var(--ds-olive);
  background: var(--ds-paper);
}
.ds-pro-form textarea { min-height: 90px; resize: vertical; }
.ds-pro-form small {
  font-size: 12px;
  color: var(--ds-ink-muted);
  margin-top: 4px;
}
.ds-pro-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ds-pro-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 18px;
  font-size: 13px;
  color: var(--ds-ink-soft);
  line-height: 1.5;
}
.ds-pro-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ds-olive);
  flex-shrink: 0;
}
.ds-pro-consent a { color: var(--ds-olive-deep); font-weight: 700; }
.ds-pro-note {
  font-size: 12px;
  color: var(--ds-ink-muted);
  margin: 14px 0 0;
}
.ds-pro-already-verified,
.ds-pro-already-pending {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 24px;
  text-align: center;
  font-size: 15px;
  color: var(--ds-ink);
  max-width: 560px;
  margin: 0 auto;
}
.ds-pro-already-verified { border-color: var(--ds-success); }

.ds-pro-form-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 18px;
  color: var(--ds-ink);
}
.ds-pro-required-note {
  font-size: 12px;
  color: var(--ds-ink-muted);
  margin: 14px 0 8px;
  font-style: italic;
}

@media (max-width: 600px) {
  .ds-pro-row-2 { grid-template-columns: 1fr; }
  .ds-pro-form fieldset { padding: 16px 18px; }
}

/* ─── FAQ (collapsible) ──────────────────────────────────────── */
.ds-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin-bottom: 48px;
}
.ds-faq-item {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  transition: border-color .15s;
}
.ds-faq-item[open] {
  border-color: var(--ds-olive-light);
}
.ds-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--ds-ink);
  list-style: none;
  transition: background .15s;
}
.ds-faq-q::-webkit-details-marker { display: none; }
.ds-faq-q:hover { background: var(--ds-cream); }
.ds-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-cream);
  color: var(--ds-olive-deep);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s, background .15s;
}
.ds-faq-item[open] .ds-faq-icon {
  background: var(--ds-olive);
  color: var(--ds-paper);
  transform: rotate(45deg);
}
.ds-faq-a {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ds-ink-soft);
}
.ds-faq-a > p { margin: 0 0 12px; }
.ds-faq-a > p:last-child { margin: 0; }
.ds-faq-a a { color: var(--ds-olive-deep); font-weight: 600; }
.ds-faq-a ul,
.ds-faq-a ol { padding-left: 22px; margin: 8px 0; }

.ds-faq-cta {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 32px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.ds-faq-cta h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--ds-ink);
}
.ds-faq-cta p { color: var(--ds-ink-soft); margin: 0 0 20px; }

/* ─── KONTAKT MAPA ───────────────────────────────────────────── */
.ds-kontakt-map {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ds-line);
}
.ds-kontakt-map-head {
  margin-bottom: 20px;
}
.ds-kontakt-map-head h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ds-ink);
}
.ds-kontakt-map-head p {
  margin: 0;
  color: var(--ds-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.ds-kontakt-map-frame {
  position: relative;
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-line);
  background: var(--ds-cream);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 280px;
}
.ds-kontakt-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.ds-kontakt-map-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: linear-gradient(135deg, var(--ds-cream) 0%, var(--ds-paper) 100%);
  border: 0;
  color: var(--ds-ink);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background .2s;
}
.ds-kontakt-map-placeholder:hover {
  background: linear-gradient(135deg, var(--ds-paper) 0%, var(--ds-cream) 100%);
}
.ds-kontakt-map-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--ds-olive);
  color: var(--ds-paper);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(110, 110, 67, 0.25);
}
.ds-kontakt-map-placeholder-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 460px;
}
.ds-kontakt-map-placeholder-body strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-kontakt-map-placeholder-body small {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-ink-soft);
}
.ds-kontakt-map-fallback-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-olive-deep);
  text-decoration: underline;
  font-weight: 600;
}
.ds-kontakt-map-actions {
  margin: 14px 0 0;
  text-align: right;
}

/* ─── COOKIES POLICY (page-polityka-cookies.php) ─────────────── */
.ds-cookies-table-wrap {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ds-line);
}
.ds-cookies-section-title {
  font-family: var(--ds-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ds-ink);
}
.ds-cookies-section-sub {
  margin: 0 0 32px;
  color: var(--ds-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.ds-cookies-cat {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 24px 28px;
  margin-bottom: 20px;
}
.ds-cookies-cat-head h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--ds-font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--ds-ink);
}
.ds-cookies-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--ds-olive);
  color: var(--ds-paper);
  font-family: var(--ds-font-body, var(--ds-font-display));
}
.ds-cookies-cat-badge-opt {
  background: var(--ds-cream);
  color: var(--ds-ink-soft);
  border: 1px solid var(--ds-line);
}
.ds-cookies-cat-head p {
  margin: 0 0 18px;
  color: var(--ds-ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}
.ds-cookies-table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--ds-line);
}
.ds-cookies-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--ds-bg, #faf9f6);
}
.ds-cookies-table thead th {
  text-align: left;
  background: var(--ds-cream);
  color: var(--ds-ink);
  font-weight: 700;
  padding: 10px 14px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ds-line);
}
.ds-cookies-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-line);
  vertical-align: top;
  line-height: 1.55;
}
.ds-cookies-table tbody tr:last-child td {
  border-bottom: 0;
}
.ds-cookies-table code {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12.5px;
  color: var(--ds-olive-deep);
  white-space: nowrap;
}

.ds-cookies-faq {
  margin-top: 56px;
}
.ds-cookies-faq h2 {
  font-family: var(--ds-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--ds-ink);
}
.ds-cookies-faq-item {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-paper);
  margin-bottom: 12px;
  overflow: hidden;
}
.ds-cookies-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--ds-ink);
  font-size: 15.5px;
  position: relative;
  padding-right: 44px;
}
.ds-cookies-faq-item summary::-webkit-details-marker { display: none; }
.ds-cookies-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--ds-olive);
  transition: transform .2s;
}
.ds-cookies-faq-item[open] summary::after {
  content: '−';
  transform: translateY(-50%);
}
.ds-cookies-faq-body {
  padding: 0 20px 18px;
  color: var(--ds-ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
}
.ds-cookies-faq-body ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.ds-cookies-faq-body ul li {
  margin-bottom: 4px;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ds-kontakt-grid { grid-template-columns: 1fr; gap: 24px; }
  .ds-kontakt-aside { position: static; }
  .ds-kontakt-map { margin-top: 40px; padding-top: 28px; }
  .ds-cookies-cat { padding: 18px 18px; }
  .ds-cookies-table thead th, .ds-cookies-table tbody td { padding: 10px 12px; font-size: 13px; }
  .ds-cookies-table-wrap { margin-top: 40px; padding-top: 28px; }
  .ds-cookies-faq { margin-top: 40px; }
  .ds-jakrobimy-step { grid-template-columns: 64px 1fr; gap: 18px; padding: 22px; }
  .ds-jakrobimy-step::before { left: 54px; height: 18px; }
  .ds-jakrobimy-step-num { width: 48px; height: 48px; font-size: 18px; }
  .ds-jakrobimy-materials-grid { grid-template-columns: 1fr; }
  .ds-jakrobimy-cta { padding: 36px 18px; }
}

@media (max-width: 600px) {
  .ds-info-page { padding: 20px 16px 60px; }
  .ds-info-head { margin-bottom: 24px; padding-bottom: 16px; }
  .ds-kontakt-form-wrap { padding: 18px; }
  .ds-kontakt-row-2 { grid-template-columns: 1fr; }
  .ds-faq-q { padding: 14px 16px; font-size: 14px; }
  .ds-faq-a { padding: 0 16px 16px; font-size: 14px; }
}

/* ============================================================
   STRONA O NAS (page-o-nas.php) — v0.11.3
   ============================================================ */

.ds-onas-page {
  max-width: var(--ds-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--ds-page-pad, 24px);
}
.ds-onas-page .ds-breadcrumb { padding: 24px 0 0; font-size: 13px; }

/* ─── HERO ─────────────────────────────────────────────── */
.ds-onas-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 7vw, 96px);
}
.ds-onas-hero-content { max-width: 560px; }
.ds-onas-hero-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ds-ink);
  margin: 14px 0 18px;
  text-wrap: balance;
}
.ds-onas-hero-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ds-ink-soft);
  margin: 0 0 28px;
}
.ds-onas-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ds-onas-hero-image {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ds-cream);
  box-shadow: 0 24px 64px -32px rgba(0,0,0,.18);
}
.ds-onas-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ds-onas-hero-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-paper);
  color: var(--ds-ink);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.ds-onas-hero-badge svg { color: var(--ds-olive-deep); }

@media (max-width: 800px) {
  .ds-onas-hero { grid-template-columns: 1fr; gap: 32px; }
  .ds-onas-hero-content { max-width: none; }
}

/* ─── KPI tiles ────────────────────────────────────────── */
.ds-onas-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.ds-onas-stat {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-onas-stat-num {
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1;
  color: var(--ds-olive-deep);
  letter-spacing: -0.02em;
}
.ds-onas-stat-label {
  font-size: 12.5px;
  color: var(--ds-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
@media (max-width: 700px) {
  .ds-onas-stats { grid-template-columns: 1fr 1fr; }
  .ds-onas-stat { padding: 22px 16px; }
}
.ds-onas-stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .ds-onas-stats--3 { grid-template-columns: 1fr; }
}

/* ─── NASZA OFERTA — 6 kafelków 3x2 (v0.12.2) ─── */
.ds-onas-offer { margin-bottom: clamp(48px, 7vw, 96px); }
.ds-onas-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ds-onas-offer-card {
  display: flex;
  flex-direction: column;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ds-ink);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ds-onas-offer-card:hover {
  border-color: color-mix(in oklab, var(--ds-olive) 50%, var(--ds-line));
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -28px rgba(0,0,0,.22);
}
.ds-onas-offer-card.is-disabled {
  pointer-events: none;
  opacity: .8;
}
.ds-onas-offer-img {
  aspect-ratio: 4/3;
  background: var(--ds-cream);
  overflow: hidden;
}
.ds-onas-offer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ds-onas-offer-card:hover .ds-onas-offer-img img { transform: scale(1.05); }
.ds-onas-offer-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ds-onas-offer-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0;
  color: var(--ds-ink);
}
.ds-onas-offer-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0;
  flex: 1;
}
.ds-onas-offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-olive-deep);
  letter-spacing: 0.02em;
  margin-top: 4px;
  text-transform: uppercase;
}
.ds-onas-offer-card:hover .ds-onas-offer-cta { color: var(--ds-ink); }
@media (max-width: 900px) {
  .ds-onas-offer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ds-onas-offer-grid { grid-template-columns: 1fr; }
}

/* Najchętniej kupowane — odstęp na O nas (re-use front-page .ds-prod-grid) */
.ds-onas-best { margin-bottom: clamp(48px, 7vw, 96px); }

/* ─── STORYTELLING (4 etapy zigzag) — v0.11.9 ─── */
.ds-onas-story {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
}
.ds-onas-story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
/* Zigzag: parzyste (2, 4) mają obraz po prawej */
.ds-onas-story-row:nth-child(even) .ds-onas-story-img { order: 2; }
.ds-onas-story-row:nth-child(even) .ds-onas-story-copy { order: 1; }

.ds-onas-story-img {
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ds-cream);
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.22);
}
.ds-onas-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ds-onas-story-row:hover .ds-onas-story-img img { transform: scale(1.03); }

.ds-onas-story-copy { max-width: 480px; }
.ds-onas-story-row:nth-child(even) .ds-onas-story-copy { margin-left: auto; }

.ds-onas-story-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 12px 0 14px;
  text-wrap: balance;
}
.ds-onas-story-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ds-ink-soft);
  margin: 0;
}

@media (max-width: 800px) {
  .ds-onas-story-row,
  .ds-onas-story-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ds-onas-story-row:nth-child(even) .ds-onas-story-img { order: 0; }
  .ds-onas-story-row:nth-child(even) .ds-onas-story-copy { order: 1; margin-left: 0; }
}

/* ─── 4 zdjęcia pod storytelling — v0.12.4 ─── */
.ds-onas-after-story {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 6vw, 72px);
}
.ds-onas-after-story-item {
  margin: 0;
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ds-cream);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.18);
}
.ds-onas-after-story-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ds-onas-after-story-item:hover img { transform: scale(1.05); }
@media (max-width: 900px) {
  .ds-onas-after-story { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ─── Sections shared ──────────────────────────────────── */
.ds-onas-section-h {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.ds-onas-section-h .ds-eyebrow { justify-content: center; }
.ds-onas-section-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 14px 0 12px;
  text-wrap: balance;
}
.ds-onas-section-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0;
}

/* ─── Wartosci grid 2x2 ────────────────────────────────── */
.ds-onas-values { margin-bottom: clamp(48px, 7vw, 96px); }
.ds-onas-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ds-onas-value {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s, transform .2s;
}
.ds-onas-value:hover {
  border-color: color-mix(in oklab, var(--ds-olive) 40%, var(--ds-line));
  transform: translateY(-2px);
}
.ds-onas-value-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--ds-olive) 12%, var(--ds-paper));
  color: var(--ds-olive-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-onas-value-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0;
  color: var(--ds-ink);
}
.ds-onas-value-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0;
}
@media (max-width: 700px) {
  .ds-onas-values-grid { grid-template-columns: 1fr; }
  .ds-onas-value { padding: 24px 20px; }
}

/* ─── B2B Pro callout ──────────────────────────────────── */
.ds-onas-pro {
  position: relative;
  background: linear-gradient(135deg, #2a2722, #3a352e);
  color: var(--ds-paper);
  border-radius: 18px;
  padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 72px);
  margin-bottom: clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.ds-onas-pro::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, color-mix(in oklab, var(--ds-olive) 50%, transparent), transparent 70%);
  pointer-events: none;
}
.ds-onas-pro-body {
  position: relative;
  max-width: 640px;
}
.ds-onas-pro-badge {
  display: inline-block;
  background: var(--ds-olive);
  color: var(--ds-paper);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 5px 11px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ds-onas-pro-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.ds-onas-pro-text {
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0 0 28px;
}
.ds-onas-pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.ds-btn-pro-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ds-paper);
  color: var(--ds-ink);
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.ds-btn-pro-cta:hover { background: var(--ds-olive); color: var(--ds-paper); }
.ds-onas-pro-link {
  font-size: 14px;
  color: rgba(250,247,238,0.85);
  text-decoration: underline;
  text-decoration-color: rgba(250,247,238,0.3);
  text-underline-offset: 4px;
}
.ds-onas-pro-link:hover { color: var(--ds-paper); text-decoration-color: var(--ds-paper); }

/* ─── Galeria realizacji (4 obrazki - 1 duzy + 3 male) ─── */
.ds-onas-gallery { margin-bottom: clamp(48px, 7vw, 96px); }
.ds-onas-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 12px;
}
.ds-onas-gal-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ds-cream);
}
.ds-onas-gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.ds-onas-gal-item:hover img { transform: scale(1.04); }
/* Pierwszy obrazek = pełny lewy slup (2 wiersze) */
.ds-onas-gal-item-0 { grid-row: 1 / span 2; }
.ds-onas-gal-item-3 { grid-column: 2 / span 2; grid-row: 2; }
@media (max-width: 700px) {
  .ds-onas-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px 180px;
  }
  .ds-onas-gal-item-0 { grid-row: 1; grid-column: 1 / span 2; }
  .ds-onas-gal-item-3 { grid-row: 3; grid-column: 1 / span 2; }
}

/* ─── Hero manifesto (3-line credo) — v0.11.5 ─── */
.ds-onas-hero-manifesto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 22px;
  font-family: var(--ds-font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.35;
  color: var(--ds-ink);
  letter-spacing: -0.005em;
}
.ds-onas-hero-manifesto > span {
  font-style: italic;
  font-weight: 400;
  color: var(--ds-ink-soft);
}
.ds-onas-hero-manifesto > strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ds-olive-deep);
  margin-top: 4px;
}

/* ─── PRACOWNIA — sekcja + galeria 9 zdjęć (mosaic) — v0.11.5 ─── */
.ds-onas-pracownia { margin-bottom: clamp(48px, 7vw, 96px); }

.ds-onas-trak-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
}
.ds-onas-trak-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ds-cream);
  position: relative;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.18);
}
.ds-onas-trak-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ds-onas-trak-item:hover img { transform: scale(1.05); }

/* Mosaic: pierwsza kafla = duża (2x2), kafla 6 = wide (2-col), reszta standardowa */
.ds-onas-trak-item-0 { grid-column: span 2; grid-row: span 2; }
.ds-onas-trak-item-5 { grid-column: span 2; }

@media (max-width: 900px) {
  .ds-onas-trak-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
  .ds-onas-trak-item-0 { grid-column: span 2; grid-row: span 2; }
  .ds-onas-trak-item-5 { grid-column: span 1; }
}
@media (max-width: 600px) {
  .ds-onas-trak-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 8px; }
  .ds-onas-trak-item-0 { grid-column: span 2; grid-row: span 2; }
  .ds-onas-trak-item-5 { grid-column: span 2; }
}

/* ─── Galeria pełna (toggle <details>) — v0.11.6 ─── */
.ds-onas-trak-more {
  margin-top: 18px;
  border: 1px dashed var(--ds-line);
  border-radius: 14px;
  background: color-mix(in oklab, var(--ds-paper) 60%, transparent);
}
.ds-onas-trak-more-toggle {
  list-style: none;
  cursor: pointer;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ds-olive-deep);
  text-align: center;
  user-select: none;
  transition: color .15s, background .15s;
}
.ds-onas-trak-more-toggle::-webkit-details-marker { display: none; }
.ds-onas-trak-more-toggle:hover {
  color: var(--ds-ink);
  background: color-mix(in oklab, var(--ds-olive) 8%, transparent);
  border-radius: 14px;
}
.ds-onas-trak-more-toggle svg {
  transition: transform .25s ease;
}
.ds-onas-trak-more[open] .ds-onas-trak-more-toggle svg { transform: rotate(180deg); }
.ds-onas-trak-more-label-open { display: none; }
.ds-onas-trak-more[open] .ds-onas-trak-more-label-closed { display: none; }
.ds-onas-trak-more[open] .ds-onas-trak-more-label-open { display: inline; }

.ds-onas-trak-extra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px;
}
.ds-onas-trak-extra-item {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ds-cream);
  box-shadow: 0 4px 16px -12px rgba(0,0,0,.16);
}
.ds-onas-trak-extra-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ds-onas-trak-extra-item:hover img { transform: scale(1.06); }
@media (max-width: 900px) {
  .ds-onas-trak-extra-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .ds-onas-trak-extra-grid { grid-template-columns: repeat(2, 1fr); padding: 10px; gap: 6px; }
}

/* ─── Polskie materiały (2 pill cards w Pracowni) — v0.11.5 ─── */
.ds-onas-materials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
.ds-onas-material {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  transition: border-color .2s, transform .2s;
}
.ds-onas-material:hover {
  border-color: color-mix(in oklab, var(--ds-olive) 40%, var(--ds-line));
  transform: translateY(-1px);
}
.ds-onas-material-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--ds-olive) 12%, var(--ds-paper));
  color: var(--ds-olive-deep);
}
.ds-onas-material-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-onas-material-body strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.3;
}
.ds-onas-material-body span {
  font-size: 13px;
  color: var(--ds-ink-soft);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .ds-onas-materials { grid-template-columns: 1fr; }
}

/* ─── 4 KROKI procesu zakupu — v0.11.5 ─── */
.ds-onas-steps { margin-bottom: clamp(48px, 7vw, 96px); }
.ds-onas-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: ds-step;
}
.ds-onas-step {
  position: relative;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ds-onas-step:hover {
  border-color: color-mix(in oklab, var(--ds-olive) 40%, var(--ds-line));
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -28px rgba(0,0,0,.18);
}
/* linia łącząca między krokami (poza ostatnim) — desktop only */
.ds-onas-step::after {
  content: '';
  position: absolute;
  top: 38px;
  right: -14px;
  width: 8px;
  height: 1px;
  background: var(--ds-line);
}
.ds-onas-step:last-child::after { display: none; }

.ds-onas-step-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: color-mix(in oklab, var(--ds-olive) 22%, transparent);
  letter-spacing: -0.02em;
}
.ds-onas-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--ds-olive) 12%, var(--ds-paper));
  color: var(--ds-olive-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-onas-step-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 4px 0 0;
  color: var(--ds-ink);
  line-height: 1.25;
}
.ds-onas-step-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .ds-onas-steps-list { grid-template-columns: 1fr 1fr; }
  .ds-onas-step::after { display: none; }
}
@media (max-width: 540px) {
  .ds-onas-steps-list { grid-template-columns: 1fr; }
}

/* ============================================================
   STRONA STREFA PRO (page-strefa-pro.php) — v0.11.9
   ============================================================ */

.ds-strefa-pro-page {
  max-width: var(--ds-max, 1240px);
  margin: 0 auto;
  padding: 0 var(--ds-page-pad, 24px);
}
.ds-strefa-pro-page .ds-breadcrumb { padding: 24px 0 0; font-size: 13px; }

/* Hero — ciemna karta gradient (jak callout w O nas) */
.ds-pro-hero {
  position: relative;
  background: linear-gradient(135deg, #2a2722, #3a352e);
  color: var(--ds-paper);
  border-radius: 18px;
  padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 72px);
  margin: 32px 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
  text-align: center;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ds-pro-hero.has-bg {
  /* style="background-image: ..." z PHP - linear-gradient overlay + zdjecie z onas-trak. */
  background-size: cover !important;
  background-position: center 35% !important;
}
.ds-pro-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, color-mix(in oklab, var(--ds-olive) 50%, transparent), transparent 70%);
  pointer-events: none;
}
.ds-pro-hero > * { position: relative; }
.ds-pro-hero-badge {
  display: inline-block;
  background: var(--ds-olive);
  color: var(--ds-paper);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ds-pro-hero .ds-eyebrow { justify-content: center; color: rgba(250,247,238,.7); }
.ds-pro-hero .ds-eyebrow .ds-eyebrow-line { background: rgba(250,247,238,.4); }
.ds-pro-hero-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 14px auto 18px;
  max-width: 22ch;
  text-wrap: balance;
}
.ds-pro-hero-lead {
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0 auto 28px;
  max-width: 60ch;
}
.ds-pro-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ds-pro-hero-actions .ds-btn-ghost {
  color: rgba(250,247,238,.92);
  border-color: rgba(250,247,238,.4);
}
.ds-pro-hero-actions .ds-btn-ghost:hover {
  background: rgba(250,247,238,.12);
  border-color: rgba(250,247,238,.7);
  color: var(--ds-paper);
}

/* Section headers (jak w O nas) */
.ds-pro-section-h {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.ds-pro-section-h .ds-eyebrow { justify-content: center; }
.ds-pro-section-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 14px 0 12px;
  text-wrap: balance;
}
.ds-pro-section-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0;
}

/* Benefits 4 kafelki */
.ds-pro-benefits { margin-bottom: clamp(48px, 7vw, 96px); }
.ds-pro-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ds-pro-benefit {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ds-pro-benefit:hover {
  border-color: color-mix(in oklab, var(--ds-olive) 40%, var(--ds-line));
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -28px rgba(0,0,0,.18);
}
.ds-pro-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--ds-olive) 12%, var(--ds-paper));
  color: var(--ds-olive-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-pro-benefit-title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 4px 0 0;
  color: var(--ds-ink);
}
.ds-pro-benefit-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .ds-pro-benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .ds-pro-benefits-grid { grid-template-columns: 1fr; }
}

/* ─── Realizacje galeria ─────────────────────────── */
.ds-pro-gallery { margin: 0 0 clamp(48px, 7vw, 96px); }
.ds-pro-gallery .ds-pro-section-h { text-align: center; margin-bottom: 28px; }
.ds-pro-section-sub {
  max-width: 640px;
  margin: 12px auto 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
}
.ds-pro-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 10px;
}
.ds-pro-gallery-cell {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--ds-cream);
  transition: transform .25s, box-shadow .25s;
}
.ds-pro-gallery-cell img,
.ds-pro-gallery-cell picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s;
}
.ds-pro-gallery-cell:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.ds-pro-gallery-cell:hover img { transform: scale(1.04); }
.ds-pro-gallery-cell.is-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.ds-pro-gallery-cta {
  text-align: center;
  margin-top: 24px;
}
.ds-pro-gallery-cta .ds-link-arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-olive-deep);
  text-decoration: none;
  letter-spacing: .01em;
}
.ds-pro-gallery-cta .ds-link-arrow:hover { color: var(--ds-olive); }
@media (max-width: 900px) {
  .ds-pro-gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
}
@media (max-width: 600px) {
  .ds-pro-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .ds-pro-gallery-cell.is-feature { grid-column: span 2; grid-row: span 2; }
}

/* Register section — paper card */
.ds-pro-register-section {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 18px;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
  margin-bottom: clamp(48px, 7vw, 96px);
  scroll-margin-top: 120px;
}
.ds-pro-register-section .ds-pro-section-h { margin-bottom: 32px; }

/* FAQ — reuse .ds-faq-list z istniejącego info.css */
.ds-pro-faq { margin-bottom: clamp(48px, 7vw, 96px); }
.ds-pro-faq .ds-faq-list { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ─── Final CTA ────────────────────────────────────────── */
.ds-onas-cta {
  text-align: center;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 18px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 60px);
  margin: 0 0 clamp(48px, 7vw, 96px);
}
.ds-onas-cta.has-imgs {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(180px, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  text-align: center;
  padding: clamp(28px, 4vw, 56px);
}
.ds-onas-cta-imgs {
  display: contents;
}
.ds-onas-cta-img {
  margin: 0;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ds-cream);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.18);
}
.ds-onas-cta-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.ds-onas-cta-img:hover img { transform: scale(1.05); }
/* Drugie zdjęcie idzie na koniec gridu (po body) */
.ds-onas-cta-img-1 { order: 3; }
.ds-onas-cta-body { order: 2; }
.ds-onas-cta-img-0 { order: 1; }
@media (max-width: 800px) {
  .ds-onas-cta.has-imgs {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
  }
  .ds-onas-cta-body {
    grid-column: 1 / -1;
    order: 0;
  }
  .ds-onas-cta-img-0 { order: 1; }
  .ds-onas-cta-img-1 { order: 2; }
}
@media (max-width: 540px) {
  .ds-onas-cta.has-imgs { grid-template-columns: 1fr; }
  .ds-onas-cta-img-0,
  .ds-onas-cta-img-1 { display: none; }
}
.ds-onas-cta-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-onas-cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
  margin: 0 auto 28px;
  max-width: 56ch;
}
.ds-onas-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ============================================================
   PRO PROMO PAGE (/dla-profesjonalistow/) - drewnianysklep-v3
   Hero + 3-kroki + benefits 4 cards + CF7 form + FAQ + closing CTA
   ============================================================ */

.ds-pro-promo-page {
  max-width: var(--ds-max-content, 1100px);
  margin: 0 auto;
  padding: 24px 32px 80px;
}

/* Hero */
.ds-pro-promo-hero {
  position: relative;
  margin: 0 0 48px;
  padding: 56px 32px 52px;
  background: linear-gradient(180deg, var(--ds-cream) 0%, var(--ds-paper) 100%);
  border: 1px solid var(--ds-line);
  border-radius: 18px;
  overflow: hidden;
}
.ds-pro-promo-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ds-olive) 0%, var(--ds-olive-deep) 100%);
}
.ds-pro-promo-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ds-pro-promo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-ink-soft);
  margin-bottom: 18px;
}
.ds-pro-promo-hero-badge-pro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--ds-olive-deep);
  color: #fff;
  border-radius: 4px;
}
.ds-pro-promo-hero-title {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.ds-pro-promo-hero-lead {
  font-size: clamp(15px, 1.8vw, 17.5px);
  color: var(--ds-ink-soft);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 auto 26px;
}
.ds-pro-promo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Section heads */
.ds-pro-promo-section-head {
  text-align: center;
  margin-bottom: 32px;
}
.ds-pro-promo-section-head .ds-eyebrow { justify-content: center; }
.ds-pro-promo-section-head h2 {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.15;
  margin: 12px 0 0;
  color: var(--ds-ink);
}

/* What is - card */
.ds-pro-promo-what {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 36px;
  margin: 0 0 56px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 16px;
}
.ds-pro-promo-what-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--ds-cream);
  color: var(--ds-olive-deep);
  border: 1px solid var(--ds-line);
}
.ds-pro-promo-what-body h2 {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  margin: 8px 0 14px;
  color: var(--ds-ink);
}
.ds-pro-promo-what-body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ds-ink-soft);
  margin: 0 0 12px;
  max-width: 70ch;
}
.ds-pro-promo-what-body p:last-child { margin-bottom: 0; }

/* Steps */
.ds-pro-promo-steps { margin: 0 0 64px; }
.ds-pro-promo-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ds-pro-promo-step {
  position: relative;
  padding: 32px 26px 26px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.ds-pro-promo-step:hover {
  border-color: var(--ds-olive);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-card);
}
.ds-pro-promo-step-num {
  position: absolute;
  top: -14px;
  left: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: var(--ds-olive-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
}
.ds-pro-promo-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ds-cream);
  color: var(--ds-olive-deep);
  margin-bottom: 14px;
}
.ds-pro-promo-step h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ds-ink);
}
.ds-pro-promo-step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-ink-soft);
  margin: 0;
}

/* Benefits */
.ds-pro-promo-benefits { margin: 0 0 64px; }
.ds-pro-promo-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ds-pro-promo-benefit {
  padding: 24px 22px;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-pro-promo-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ds-cream);
  color: var(--ds-olive-deep);
  border: 1px solid var(--ds-line);
  margin-bottom: 4px;
}
.ds-pro-promo-benefit strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.3;
}
.ds-pro-promo-benefit span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ds-ink-soft);
}

/* Form section */
.ds-pro-promo-form-section {
  margin: 0 0 64px;
  scroll-margin-top: 100px;
}
.ds-pro-promo-form-head {
  text-align: center;
  margin-bottom: 28px;
}
.ds-pro-promo-form-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--ds-olive);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
  margin-bottom: 12px;
}
.ds-pro-promo-form-head h2 {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-pro-promo-form-head p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ds-ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.ds-pro-promo-form-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 36px);
  background: var(--ds-paper);
  border: 2px solid var(--ds-line);
  border-radius: 16px;
}

/* CF7 form styling - dopasowanie do ds-form */
.ds-pro-promo-form-card .wpcf7-form p {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
}
.ds-pro-promo-form-card .wpcf7-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 6px;
}
.ds-pro-promo-form-card .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not(.wpcf7-acceptance) {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-cream);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ds-ink);
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.ds-pro-promo-form-card .wpcf7-form-control:not([type="submit"]):focus {
  outline: 0;
  border-color: var(--ds-olive);
  background: var(--ds-paper);
}
.ds-pro-promo-form-card .wpcf7-form-control.wpcf7-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
}
.ds-pro-promo-form-card .wpcf7-acceptance {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-ink-soft);
}
.ds-pro-promo-form-card .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.ds-pro-promo-form-card .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ds-ink-soft) !important;
  margin-bottom: 0 !important;
}
.ds-pro-promo-form-card .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ds-pro-promo-form-card .wpcf7-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px !important;
  background: var(--ds-olive) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: inherit;
  font-size: 14.5px !important;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s;
  width: 100%;
  height: 50px !important;
}
.ds-pro-promo-form-card .wpcf7-submit:hover {
  background: var(--ds-olive-deep) !important;
}
.ds-pro-promo-form-card .wpcf7-not-valid-tip {
  font-size: 12px;
  color: var(--ds-error);
  margin-top: 4px;
}
.ds-pro-promo-form-card .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

/* FAQ */
.ds-pro-promo-faq { margin: 0 0 64px; }
.ds-pro-promo-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-pro-promo-faq-item {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .18s;
}
.ds-pro-promo-faq-item[open] {
  border-color: var(--ds-olive);
}
.ds-pro-promo-faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ds-ink);
  list-style: none;
  position: relative;
  padding-right: 50px;
}
.ds-pro-promo-faq-item summary::-webkit-details-marker { display: none; }
.ds-pro-promo-faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--ds-olive-deep);
  border-bottom: 2px solid var(--ds-olive-deep);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .18s;
}
.ds-pro-promo-faq-item[open] summary::after {
  transform: translateY(-35%) rotate(-135deg);
}
.ds-pro-promo-faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ds-ink-soft);
}

/* Closing CTA */
.ds-pro-promo-closing {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 32px 36px;
  background: var(--ds-ink);
  color: var(--ds-paper);
  border-radius: 16px;
}
.ds-pro-promo-closing-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}
.ds-pro-promo-closing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--ds-olive);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 4px;
}
.ds-pro-promo-closing-body h2 {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  margin: 0 0 6px;
  color: #fff;
}
.ds-pro-promo-closing-body p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .75);
  margin: 0;
  max-width: 60ch;
}
.ds-pro-promo-closing .ds-btn {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .ds-pro-promo-page { padding: 16px 20px 60px; }
  .ds-pro-promo-hero { padding: 40px 22px 36px; }
  .ds-pro-promo-what { grid-template-columns: 1fr; gap: 18px; padding: 24px; text-align: left; }
  .ds-pro-promo-what-icon { width: 64px; height: 64px; }
  .ds-pro-promo-steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .ds-pro-promo-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ds-pro-promo-closing { grid-template-columns: 1fr; gap: 18px; padding: 24px; text-align: center; }
  .ds-pro-promo-closing-body { grid-template-columns: 1fr; justify-items: center; gap: 8px; text-align: center; }
}
@media (max-width: 480px) {
  .ds-pro-promo-hero { padding: 32px 18px 28px; border-radius: 14px; }
  .ds-pro-promo-hero-actions .ds-btn { width: 100%; justify-content: center; }
  .ds-pro-promo-benefits-grid { grid-template-columns: 1fr; }
}

/* ============================================
   v0.14.7: WP Gutenberg blocks restyle
   Stosuje sie do .ds-info-content - wszystkie strony info renderowane
   przez page.php (regulamin, polityka, /pudelka-drewniane/, etc.).
   Stare strony SEO maja wp-block-gallery/image/columns/heading/button/quote.
   ============================================ */

/* ─── Headings (override default wp-block-heading) ─── */
.ds-info-content h1.wp-block-heading {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 48px 0 18px;
  text-wrap: balance;
}
.ds-info-content h2.wp-block-heading {
  font-family: var(--ds-font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 40px 0 14px;
  text-wrap: balance;
}
.ds-info-content h3.wp-block-heading {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  color: var(--ds-ink);
  margin: 32px 0 10px;
}
.ds-info-content h4.wp-block-heading,
.ds-info-content h5.wp-block-heading,
.ds-info-content h6.wp-block-heading {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ds-ink);
  margin: 24px 0 8px;
}

/* ─── Image block ─── */
.ds-info-content .wp-block-image {
  margin: 28px 0;
}
.ds-info-content .wp-block-image img {
  border-radius: 14px;
  max-width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 16px 32px -22px rgba(42, 39, 34, .25);
}
.ds-info-content .wp-block-image figcaption {
  font-size: 13px;
  color: var(--ds-ink-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}
.ds-info-content .wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ─── Gallery block ─── */
.ds-info-content .wp-block-gallery {
  margin: 32px 0;
  display: grid;
  gap: 14px;
}
.ds-info-content .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.ds-info-content .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.ds-info-content .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.ds-info-content .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.ds-info-content .wp-block-gallery .wp-block-image,
.ds-info-content .wp-block-gallery figure {
  margin: 0;
}
.ds-info-content .wp-block-gallery img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  transition: transform .35s;
}
.ds-info-content .wp-block-gallery a:hover img,
.ds-info-content .wp-block-gallery figure:hover img {
  transform: scale(1.03);
}
@media (max-width: 700px) {
  .ds-info-content .wp-block-gallery.columns-3,
  .ds-info-content .wp-block-gallery.columns-4,
  .ds-info-content .wp-block-gallery.columns-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .ds-info-content .wp-block-gallery.columns-2,
  .ds-info-content .wp-block-gallery.columns-3,
  .ds-info-content .wp-block-gallery.columns-4,
  .ds-info-content .wp-block-gallery.columns-5 {
    grid-template-columns: 1fr;
  }
}

/* ─── Columns block ─── */
.ds-info-content .wp-block-columns {
  margin: 32px 0;
  gap: 32px;
  display: flex;
  flex-wrap: wrap;
}
.ds-info-content .wp-block-columns .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 700px) {
  .ds-info-content .wp-block-columns {
    flex-direction: column;
    gap: 22px;
  }
}

/* ─── Button block ─── */
.ds-info-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 32px;
}
.ds-info-content .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 14.5px;
  background: var(--ds-olive-deep);
  color: var(--ds-paper);
  border: 1px solid var(--ds-olive-deep);
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, transform .15s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(42, 39, 34, .3);
}
.ds-info-content .wp-block-button .wp-block-button__link:hover {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  transform: translateY(-1px);
}
.ds-info-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ds-olive-deep);
  border-color: var(--ds-olive);
  box-shadow: none;
}
.ds-info-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ds-cream);
  color: var(--ds-ink);
  border-color: var(--ds-olive-deep);
}

/* ─── Quote block ─── */
.ds-info-content .wp-block-quote,
.ds-info-content blockquote {
  position: relative;
  margin: 32px 0;
  padding: 24px 28px 24px 56px;
  background: var(--ds-cream);
  border-left: 4px solid var(--ds-olive);
  border-radius: 0 14px 14px 0;
  font-style: italic;
  color: var(--ds-ink);
}
.ds-info-content .wp-block-quote::before,
.ds-info-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: 8px;
  left: 18px;
  font-family: var(--ds-font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--ds-olive);
  opacity: .4;
}
.ds-info-content .wp-block-quote cite,
.ds-info-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--ds-ink-soft);
}

/* ─── Separator block ─── */
.ds-info-content .wp-block-separator,
.ds-info-content hr {
  border: 0;
  height: 1px;
  background: var(--ds-line);
  margin: 40px auto;
  max-width: 200px;
}
.ds-info-content .wp-block-separator.is-style-wide {
  max-width: 100%;
}
.ds-info-content .wp-block-separator.is-style-dots {
  background: transparent;
  height: auto;
  text-align: center;
  font-size: 24px;
  letter-spacing: 8px;
  color: var(--ds-olive);
}
.ds-info-content .wp-block-separator.is-style-dots::before {
  content: '\00b7\00b7\00b7';
}

/* ─── Table block ─── */
.ds-info-content .wp-block-table,
.ds-info-content figure.wp-block-table {
  margin: 32px 0;
  overflow-x: auto;
}
.ds-info-content .wp-block-table table,
.ds-info-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  overflow: hidden;
}
.ds-info-content .wp-block-table th,
.ds-info-content table th {
  background: var(--ds-cream);
  padding: 12px 16px;
  font-weight: 700;
  text-align: left;
  color: var(--ds-ink);
  border-bottom: 1px solid var(--ds-line);
}
.ds-info-content .wp-block-table td,
.ds-info-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-ink-soft);
}
.ds-info-content .wp-block-table tr:last-child td,
.ds-info-content table tr:last-child td {
  border-bottom: 0;
}

/* ─── Embed (YouTube/Vimeo) ─── */
.ds-info-content .wp-block-embed {
  margin: 32px 0;
}
.ds-info-content .wp-block-embed iframe {
  border-radius: 14px;
  max-width: 100%;
}

/* ─── Cover block ─── */
.ds-info-content .wp-block-cover {
  border-radius: 14px;
  margin: 32px 0;
  overflow: hidden;
}