/**
 * Dobry Kartacz — system stylów sekcji (front).
 *
 * TU mieszka wygląd. HTML sekcji (edytowany w panelu) używa tych klas,
 * więc zmiana koloru/fontu/odstępu = jedna zmiana tutaj, cała strona się aktualizuje.
 *
 * --- Zmienne marki (docelowo dopasujemy do dobrykartacz.pl) ---
 */
:root {
    --dk-color-brand:      #fb471f;  /* pomarańcz marki — wyciągnięty z dobrykartacz.pl */
    --dk-color-brand-dark: #ca270b;
    --dk-color-dark:       #1f1e1e;  /* ciemne tło nagłówka/stopki */
    --dk-color-text:       #1f1e1e;
    --dk-color-muted:      #5c6660;
    --dk-color-bg:         #ffffff;
    --dk-color-bg-alt:     #f6f4ef;
    --dk-color-white:      #ffffff;

    --dk-font-head: "Rubik", "Segoe UI", system-ui, sans-serif;
    --dk-font-body: "Rubik", "Open Sans", "Segoe UI", system-ui, sans-serif;

    /* dodatkowe kolory (ujednolicenie 2026-07) */
    --dk-color-dark-2:    #181818;  /* drugi ciemny (tła sekcji/tekst komponentów) */
    --dk-color-green:     #119e00;  /* akcje zakupowe */
    --dk-color-green-dark:#007d00;  /* hover zielonego */
    --dk-color-error:     #E02B20;  /* błędy / usuwanie */

    --dk-radius:      10px;         /* boxy / karty */
    --dk-radius-btn:  9px;          /* przyciski (ujednolicone) */
    --dk-ls-btn:      2px;          /* letter-spacing przycisków */
    --dk-fs-btn:      20px;         /* rozmiar czcionki dużych przycisków */
    --dk-shadow:     0 8px 30px rgba(0, 0, 0, .08);
    --dk-section-y:  clamp(48px, 8vw, 110px);
    /* skala odstępów pionowych sekcji (do stosowania w nowych sekcjach) */
    --dk-space-s: 40px;
    --dk-space-m: 64px;
    --dk-space-l: 90px;
    --dk-maxw:       1080px;   /* szerokość kontenera Divi na dobrykartacz.pl */
    --dk-container-x: 24px;
}

/* Wspólny kontener — Divi .container: width 80%, max-width 1080px */
.dk-container {
    width: 80%;
    max-width: var(--dk-maxw);
    margin: 0 auto;
}
@media (max-width: 980px) { .dk-container { width: 90%; } }

/* ====================================================================
 *  GLOBALNA TYPOGRAFIA SEKCJI (spójna na wszystkich stronach)
 *  Dokładnie wg ustawień Divi. Nagłówki treści i akapity dziedziczą stąd;
 *  komponenty (blurby, karty, kroki) mają własne rozmiary (nadpisują niżej).
 * ================================================================== */
.dk-section h1, .dk-section h2, .dk-section h3, .dk-section h4 { font-family: var(--dk-font-head); }
.dk-section p { font-family: var(--dk-font-body); }
@media (min-width: 1025px) {
    .dk-section h1 { font-size: 57px; font-weight: 700; }
    .dk-section h2 { font-size: 48px; font-weight: 700; }
    .dk-section h3 { font-size: 39px; font-weight: 500; }
    .dk-section h4 { font-size: 33px; font-weight: 500; }
    .dk-section p  { font-size: 19px; font-weight: 300; }
}
@media (max-width: 1024px) and (min-width: 768px) {
    .dk-section h1 { font-size: 51px; font-weight: 700; }
    .dk-section h2 { font-size: 42px; font-weight: 700; }
    .dk-section h3 { font-size: 35px; font-weight: 500; }
    .dk-section h4 { font-size: 29px; font-weight: 500; }
    .dk-section p  { font-size: 17px; font-weight: 300; }
}
@media (max-width: 767px) {
    .dk-section h1 { font-size: 34px; font-weight: 700; }
    .dk-section h2 { font-size: 31px; font-weight: 700; }
    .dk-section h3 { font-size: 27px; font-weight: 500; }
    .dk-section h4 { font-size: 24px; font-weight: 500; }
    .dk-section p  { font-size: 17px; font-weight: 300; }
}

/* Wspólny wrapper każdej sekcji */
.dk-section {
    box-sizing: border-box;
}
.dk-section * {
    box-sizing: border-box;
}

/* ====================================================================
 *  Sekcja: Nagłówek / Nawigacja   (slug: naglowek)
 * ================================================================== */
.dk-header {
    font-family: var(--dk-font-body);
}

/* Pasek promocyjny (pomarańczowy) */
.dk-topbar {
    display: block;
    background: var(--dk-color-brand);
    color: var(--dk-color-white);
    text-align: center;
    padding: 10px 16px 13px;   /* oryginał: row padding 10/0/13 */
    font-family: var(--dk-font-head);
    font-weight: 500;          /* oryginał: Rubik 500 */
    font-size: 19px;           /* oryginał: 19px (telefon 17px) */
    line-height: 1.5em;
    text-transform: uppercase;
    text-decoration: none;
}
@media (max-width: 767px) { .dk-topbar { font-size: 17px; } }
.dk-topbar:hover { color: var(--dk-color-white); }
.dk-topbar__arrows { white-space: nowrap; }

/* Pasek info (telefon + social) */
.dk-infobar {
    background: var(--dk-color-dark);
    color: var(--dk-color-white);
}
.dk-infobar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 13px;      /* oryginał: row padding 10/0/13 */
    gap: 16px;
}
.dk-infobar__phone { font-family: var(--dk-font-body); font-weight: 300; font-size: 19px; color: #ececec; }
.dk-infobar__phone a { color: #ececec; text-decoration: none; }
.dk-infobar__phone a:hover { color: var(--dk-color-brand); }

.dk-social { display: flex; align-items: center; gap: 10px; }
.dk-social__label { font-family: var(--dk-font-body); font-weight: 300; font-size: 19px; color: #ececec; }
.dk-social__link {
    width: 24px; height: 24px;           /* oryginał: 24×24 */
    display: inline-flex; align-items: center; justify-content: center;
    background: #ececec;                 /* tło ikony jasnoszare */
    border-radius: 3px;                  /* Divi social: zaokrąglony kwadrat */
    color: #1f1e1e;                      /* glif ciemny */
    font-size: 12px;
    text-decoration: none;
    transition: background-color .3s ease;
}
.dk-social__link:hover { background: var(--dk-color-brand); }   /* hover: #fb471f */

/* Główny pasek nawigacji — tło #181818 (oryginał) */
.dk-navbar {
    background: #181818;
}
.dk-navbar__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 18px 0;           /* odstęp logo góra/dół */
    min-height: 150px;
    box-sizing: border-box;
}
.dk-logo { display: inline-flex; flex: 0 0 auto; }
.dk-logo img { width: 190px; max-width: 100%; height: auto; display: block; }  /* logo z odstępem góra/dół */

.dk-menu { display: flex; align-items: center; gap: 30px; }
.dk-menu__link {
    color: var(--dk-color-white);
    text-decoration: none;
    font-family: var(--dk-font-head);
    font-weight: 500;          /* oryginał: Rubik 500 */
    font-size: 19px;           /* oryginał: 19px */
    transition: color .3s ease;
}
.dk-menu__link:hover,
.dk-menu__link--active { color: var(--dk-color-brand); }

.dk-header-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}
.dk-header-icons__link {
    position: relative;
    color: var(--dk-color-brand);
    font-size: 28px;           /* oryginał: ikony 28px #fb471f */
    line-height: 1;
    text-decoration: none;
    transition: opacity .15s ease;
}
.dk-header-icons__link:hover { opacity: .8; }
/* Ikona koszyka z fontu wtyczki side-cart (dokładnie oryginał: xoo shopping-bag1) */
@font-face {
    font-family: 'Woo-Side-Cart';
    src: url('../fonts/Woo-Side-Cart.woff') format('woff'),
         url('../fonts/Woo-Side-Cart.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.dk-cart-ico::before {
    font-family: 'Woo-Side-Cart' !important;
    content: "\e90e";
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Licznik koszyka — koło 18px, biała cyfra (oryginał xoo) */
.dk-cart-badge {
    position: absolute;
    top: -4px; right: -7px;
    min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 4px; box-sizing: border-box;
    border-radius: 50%;
    background: #181818;       /* kolor tła menu */
    color: #fff;
    font-size: 13px; font-weight: 600; text-align: center;
}

/* ---- Mobilny nagłówek (odwzorowany 1:1 z kodu strony) ---- */
.dkz-mobile-wrap { display: none; position: relative; }   /* domyślnie ukryty; pokazywany < 981px */

.dkz-mheader {
    background: #181818;
    padding: 15px 20px;        /* marginesy prawo/lewo na mobile */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
}
.dkz-mheader__logo img {
    display: block;
    height: auto;
    width: 120px;
    max-width: 100%;
}
.dkz-mheader__icons { display: flex; align-items: center; gap: 26px; }   /* większy odstęp między ikonami */

.dkz-account-link {
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.dkz-account-link i { font-size: 28px; color: #fb471f; }

.dkz-cart-demo {
    position: relative;
    color: #fb471f;            /* pomarańczowy koszyk, jak na stronie */
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
}
.dkz-cart-demo__count {
    position: absolute;
    top: -4px; right: -7px;
    min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 4px; box-sizing: border-box;
    border-radius: 50%;
    background: #181818;       /* kolor tła menu */
    color: #fff;               /* biała ilość */
    font-size: 13px; font-weight: 600; text-align: center;
}

.dkz-hamburger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 34px; height: 28px;
}
.dkz-hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
}
.dkz-hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.dkz-hamburger.is-open span:nth-child(2) { opacity: 0; }
.dkz-hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.dkz-mmenu {
    display: none;
    background: #fff;
    color: #181818;
    padding: 20px 30px 25px;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
}
.dkz-mmenu.is-open { display: block; }
.dkz-mmenu__list { list-style: none !important; margin: 0; padding: 0; }
.dkz-mmenu__list li { list-style: none !important; margin: 0; padding: 0; background: none; }
.dkz-mmenu__list li::before { content: none !important; display: none !important; }
.dkz-mmenu__list li::marker { content: "" !important; }
.dkz-mmenu__list li + li { border-top: 1px solid #eaeaea; }
.dkz-mmenu__list a {
    display: block;
    padding: 14px 4px;
    color: #181818;
    text-decoration: none;
    font-family: var(--dk-font-head);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: color .2s ease;
}
.dkz-mmenu__list a:hover,
.dkz-mmenu__list a:focus,
.dkz-mmenu__list a.is-active { color: #fb471f; }

/* ---- Mobilny infobar (section_2) — telefon + social, widoczny ≤980 ---- */
.dk-infobar-mobile { display: none; background: #1f1e1e; color: #ececec; }
.dk-infobar-mobile__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; gap: 12px;
}
.dk-infobar-mobile__phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--dk-font-body); font-weight: 300; font-size: 17px; color: #fff;
}
.dk-infobar-mobile__phone i {
    background: #fff; color: #1f1e1e; width: 24px; height: 24px;
    border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.dk-infobar-mobile__phone a { color: #fff; text-decoration: none; }

/* ---- Przełączanie desktop / mobile: breakpoint 981px (jak oryginał) ---- */
@media (max-width: 980px) {
    .dk-infobar,
    .dk-navbar { display: none; }          /* na mobile chowamy desktopowy pasek info i menu */
    .dk-infobar-mobile { display: block; } /* pokazujemy mobilny pasek info (telefon+social) */
    .dkz-mobile-wrap { display: block; }   /* pokazujemy mobilny nagłówek z hamburgerem */
}

/* ====================================================================
 *  Sekcja: Strona tekstowa / „prose" (regulamin, polityki itp.)
 *  Wartości 1:1 z Divi (et-core-unified-...236492.min.css).
 * ================================================================== */
.dk-content { background: #fff; }
.dk-content .dk-container { padding-top: 40px; padding-bottom: 35px; }   /* oryginał: section pt 82 / pb 35 (separator to osobny obraz) */
.dk-content .dk-sep { margin-top: -1px; }                                /* czarny top łączy się z nagłówkiem */

.dk-prose {
    color: #181818;
    font-family: var(--dk-font-body);
    font-weight: 300;
    font-size: 19px;
    line-height: 1.5em;
}
/* nagłówki treści dziedziczą rozmiar/wagę z globalnej skali .dk-section */
.dk-prose h1 { font-family: var(--dk-font-head); text-transform: uppercase; color: #181818; line-height: 1.15em; margin: 0 0 .5em; }
.dk-prose h2 { font-family: var(--dk-font-head); color: #181818; text-align: left; line-height: 1.2em; margin: 1em 0 .35em; }
.dk-prose h3 { font-family: var(--dk-font-head); color: var(--dk-color-brand); line-height: 1.25em; margin: .9em 0 .3em; }
.dk-prose p { margin: 0 0 1em; }
.dk-prose p:last-child { margin-bottom: 0; }
.dk-prose strong, .dk-prose b { font-weight: 600; }
.dk-prose ul, .dk-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.dk-prose li { margin-bottom: .45em; }
.dk-prose table { border-collapse: collapse; border: 1px solid #eee; margin: 0 0 1em; width: 100%; }
.dk-prose th { color: #555; font-weight: 700; padding: 9px 24px; text-align: left; background: #f6f4ef; }
.dk-prose td { border-top: 1px solid #eee; padding: 6px 24px; }
.dk-prose ul ul, .dk-prose ol ol { margin: .45em 0; }
.dk-prose a { color: var(--dk-color-brand); text-decoration: underline; }
.dk-prose a:hover { color: var(--dk-color-brand-dark); }

/* Pasek metod płatności — inny obraz na desktop / tablet / telefon */
.dk-pay-methods { text-align: center; margin: 28px 0 0; }
.dk-pay-methods img { max-width: 100%; height: auto; display: none; }
.dk-pay-methods .dk-pay--desktop { display: inline-block; }         /* ≥981px */
@media (max-width: 980px) {
    .dk-pay-methods .dk-pay--desktop { display: none; }
    .dk-pay-methods .dk-pay--tablet { display: inline-block; }      /* 481–980px */
}
@media (max-width: 480px) {
    .dk-pay-methods .dk-pay--tablet { display: none; }
    .dk-pay-methods .dk-pay--phone { display: inline-block; }       /* ≤480px */
}

/* responsywność nagłówków treści = globalna skala .dk-section */

/* ====================================================================
 *  Strona Kontakt (tytuł + FAQ + dane + formularz CF7)
 *  Wartości 1:1 z Divi (et-core-unified-...235616.min.css) + dkz-form-styles.
 * ================================================================== */

/* Czarny pasek tytułu „Kontakt" (jak „Sklep") */
.dk-titlebar { background: #181818; padding: 3px 0 5px; }
.dk-titlebar__h {
    font-family: var(--dk-font-head);   /* rozmiar/waga z globalnej skali (h1) */
    text-transform: uppercase; text-align: center; color: #fff; line-height: 1.15em; margin: 0;
}

/* ---- FAQ (szare tło #f2f2f2) ---- */
.dk-faq { background: #f2f2f2; padding-bottom: 50px; }
.dk-faq .dk-sep { margin-top: -1px; }
.dk-faq__title {
    font-family: var(--dk-font-head); color: #181818;   /* rozmiar/waga z globalnej skali (h2) */
    text-transform: uppercase; text-align: center; line-height: 1.2em; margin: 36px 0 30px;
}
.dk-faq__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }
.dk-faq__img img { width: 100%; height: auto; display: block; }
@media (max-width: 980px) { .dk-faq__grid { grid-template-columns: 1fr; } .dk-faq__img { max-width: 360px; margin: 0 auto; } }

/* Accordion (rozwijane pytania) */
.dk-accordion { border-top: 3px solid #181818; }   /* linia nad pierwszym pytaniem */
.dk-acc__item { border-bottom: 3px solid #181818; }
.dk-acc__title {
    font-family: var(--dk-font-head); font-weight: 500; font-size: 27px; color: #181818;
    margin: 0; padding: 14px 0; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    transition: color .2s ease;
}
/* Ikona: pomarańczowe kółko z białym + / − */
.dk-acc__title::after {
    content: "\f067";                       /* + (FA plus) */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    background: #fb471f; color: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    transition: background-color .2s ease;
}
.dk-acc__item.is-open .dk-acc__title { color: #fb471f; }
.dk-acc__item.is-open .dk-acc__title::after { content: "\f068"; }   /* − (FA minus) */
/* Płynne wysuwanie odpowiedzi */
.dk-acc__content {
    overflow: hidden; max-height: 0; padding: 0;
    transition: max-height .35s ease, padding .3s ease;
    font-family: var(--dk-font-body); font-weight: 300; font-size: 19px;
    color: #181818; line-height: 1.5em;
}
.dk-acc__item.is-open .dk-acc__content { max-height: 400px; padding: 0 0 16px; }
.dk-acc__content p { margin: 0; }
@media (max-width: 767px) { .dk-acc__title { font-size: 21px; } }

/* ---- Sekcja kontaktowa (dane + formularz) ---- */
.dk-contact { background: #fff; padding-bottom: 70px; }
.dk-contact .dk-sep { margin-top: -1px; }
.dk-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 980px) { .dk-contact__grid { grid-template-columns: 1fr; gap: 36px; } }
.dk-contact__h {
    font-family: var(--dk-font-head); color: #181818;   /* rozmiar/waga z globalnej skali (h2) */
    text-align: left; line-height: 1.2em; margin: 30px 0 10px;
}
.dk-contact__lead { font-family: var(--dk-font-head); font-weight: 700; font-size: 22px; color: #181818; margin: 0 0 12px; line-height: 1.3em; }
.dk-contact__text { font-family: var(--dk-font-body); font-weight: 300; font-size: 19px; color: #181818; line-height: 1.5em; margin: 0 0 24px; }

.dk-info { display: flex; gap: 16px; align-items: center; margin: 18px 0; }
.dk-info__icon {
    width: 55px; height: 55px; flex: 0 0 auto; background: #fb471f; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px;
}
.dk-info__title { font-family: var(--dk-font-head); font-weight: 600; font-size: 27px; color: #181818; margin: 0; line-height: 1.1em; }
.dk-info__text { font-family: var(--dk-font-body); font-weight: 300; font-size: 18px; color: #181818; margin: 2px 0 0; }
.dk-info__social { display: flex; gap: 12px; margin-top: 6px; }
.dk-info__social a {
    width: 55px; height: 55px; display: inline-flex; align-items: center; justify-content: center;
    background: #fb471f; border-radius: 8px; color: #fff; font-size: 22px; text-decoration: none;
    transition: background-color .3s ease;
}
.dk-info__social a:hover { background: #ca270b; color: #fff; }
/* Blok „Social Media" — bez ikony-kwadratu po lewej (jak oryginał) */
.dk-social-block { margin: 22px 0; }
.dk-social-block .dk-info__title { margin-bottom: 4px; }

/* ---- Formularz CF7 (odwzorowanie stylu dkz-form-styles) ---- */
.dk-form { }   /* bez ramki wokół całości */
/* margines u góry — wyrównanie formularza do kolumny po lewej, tylko na komputerach */
@media (min-width: 981px) { .dk-contact__form { margin-top: 70px; } }
.dk-form .form-row { display: flex; gap: 16px; }
@media (max-width: 600px) { .dk-form .form-row { flex-direction: column; gap: 0; } }
.dk-form .form-group { flex: 1; margin-bottom: 10px; }
.dk-form label { display: block; font-family: var(--dk-font-head); font-weight: 500; font-size: 16px; color: #181818; margin: 0 0 4px; }

/* Kompaktowy układ dla żywego formularza CF7, który owija pola w <p> i wstawia <br> */
.dk-form form p,
.dk-form .wpcf7-form p { margin: 0 0 10px; line-height: 1.3; }
.dk-form form br { line-height: 0.9; }
.dk-form .wpcf7-form label { margin: 0 0 4px; }
.dk-form input[type="text"],
.dk-form input[type="tel"],
.dk-form input[type="email"],
.dk-form textarea {
    width: 100%; box-sizing: border-box; font-family: var(--dk-font-body); font-size: 16px; color: #181818;
    border: 2px solid #181818; border-radius: 5px; background: transparent; padding: 10px 12px;
    transition: border-color .3s ease;
}
.dk-form input:hover, .dk-form textarea:hover,
.dk-form input:focus, .dk-form textarea:focus { border-color: #fb471f; outline: none; }
.dk-form textarea { min-height: 120px; resize: vertical; }
.dk-form input[type="file"] { display: block; font-family: var(--dk-font-body); font-size: 14px; color: #181818; }
.dk-form input[type="file"]::file-selector-button {
    background: #fb471f; color: #fff; border: none; border-radius: var(--dk-radius-btn, 9px); padding: 12px 26px;
    margin-right: 14px; cursor: pointer;
    font-family: var(--dk-font-head); font-weight: 300; font-size: 15px;
    text-transform: uppercase; letter-spacing: 1.5px;
    transition: background-color .3s ease;
}
.dk-form input[type="file"]::file-selector-button:hover { background: #ca270b; }
.dk-form .acceptance { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 12px; font-family: var(--dk-font-body); font-size: 14px; color: #181818; line-height: 1.4em; }
.dk-form .acceptance input[type="checkbox"] {
    width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto;
    accent-color: #fb471f;     /* checkbox w kolorze marki (nie domyślny niebieski) */
    cursor: pointer;
}
.dk-form__submit,
.dk-form .wpcf7-submit,
.dk-form input[type="submit"] {
    background: #fb471f; color: #fff; border: none; border-radius: var(--dk-radius-btn); padding: 12px 30px;   /* wspólny styl przycisku (kolor pomarańczowy = formularz kontaktowy) */
    margin-top: 6px;
    font-family: var(--dk-font-head); font-weight: 300; font-size: 19px; text-transform: uppercase;
    letter-spacing: 2px; cursor: pointer; transition: background-color .3s ease;
}
.dk-form__submit:hover,
.dk-form .wpcf7-submit:hover,
.dk-form input[type="submit"]:hover { background: #ca270b; }

/* Komunikaty CF7 (walidacja + odpowiedź) */
.dk-form .wpcf7-not-valid-tip {
    font-family: var(--dk-font-body); color: #E02B20; font-size: 14px; margin-top: 4px; display: block;
}
.dk-form input.wpcf7-not-valid,
.dk-form textarea.wpcf7-not-valid { border-color: #E02B20 !important; }
.dk-form .wpcf7-response-output,
.dk-contact .wpcf7-response-output {
    font-family: var(--dk-font-body); color: #1f1e1e;
    border: 2px solid; border-radius: 9px; overflow: hidden;
    margin: 20px 0 0; padding: 12px 18px; line-height: 1.4em;
}
/* Stany: sukces = zielony, błąd/niezaakceptowane = czerwony, spam = pomarańczowy */
.wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: #f56e28; }
.dk-form .wpcf7-spinner { margin: 12px 0 0 12px; }
.dk-form__msg--ok { border-color: #46b450 !important; }   /* podgląd: przykład komunikatu sukcesu */

/* ====================================================================
 *  Strona „O nas"
 * ================================================================== */
.dk-about__h2 { font-family: var(--dk-font-head); color: #181818; line-height: 1.2em; margin: 0 0 16px; }   /* rozmiar/waga z globalnej skali (h2) */
.dk-about__text { font-family: var(--dk-font-body); font-weight: 300; font-size: 19px; color: #181818; line-height: 1.6em; margin: 0; }

/* Kilka słów o nas — 2 kolumny (logo + tekst) */
.dk-about__intro { background: #fff; padding: 50px 0; }
.dk-about__intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.dk-about__intro-grid img { max-width: 315px; width: 100%; height: auto; display: block; margin: 0 auto; }   /* logo, wyśrodkowane */
/* czarny separator pod paskiem tytułu (łączy się z czarnym tłem tytułu) */
.dk-section--onas > .dk-sep { margin-top: -1px; }
@media (max-width: 980px) { .dk-about__intro-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Separator/spacer graficzny */
.dk-about__spacer { display: block; width: 100%; }
.dk-about__spacer img { width: 100%; height: auto; display: block; }

/* Co nas wyróżnia — szare tło, 3 boxy z ikoną u góry */
.dk-about__features { background: #f2f2f2; padding: 40px 0 54px; }
.dk-about__features .dk-about__h2 { text-align: center; text-transform: uppercase; margin-bottom: 34px; }
.dk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 767px) { .dk-features { grid-template-columns: 1fr; } }
.dk-feature { text-align: center; }
.dk-feature img { width: 90px; height: auto; margin: 0 auto 16px; display: block; }   /* mniejsze ikony */
.dk-feature h3 { font-family: var(--dk-font-head); font-weight: 500; font-size: 27px; color: #1f1e1e; margin: 0 0 8px; text-wrap: balance; }
.dk-feature p {
    font-family: var(--dk-font-body); font-weight: 300; font-size: 19px; color: #181818; line-height: 1.5em;
    margin: 0 auto; max-width: 320px; text-wrap: balance;   /* 19px jak reszta stron; równe, wyśrodkowane linie */
}

/* Jak działamy — czarne tło, obraz + kroki (ikona z lewej) */
.dk-about__how { background: #181818; color: #fff; padding: 0 0 54px; }
.dk-about__how .dk-sep { margin-top: -1px; }   /* separator u góry łączy się z sekcją wyżej */
.dk-about__how .dk-about__h2 { color: #fff; text-align: center; text-transform: uppercase; margin: 40px 0 30px; }
.dk-how { display: grid; grid-template-columns: 2fr 3fr; gap: 44px; align-items: center; }
@media (max-width: 980px) { .dk-how { grid-template-columns: 1fr; gap: 28px; } }
.dk-how__img img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
.dk-step { display: flex; gap: 18px; align-items: center; margin-bottom: 28px; }
.dk-step:last-child { margin-bottom: 0; }
/* Font ikon Divi (ETmodules) — dokładne ikony jak w oryginale */
@font-face {
    font-family: 'ETmodules';
    src: url('../fonts/ETmodules.woff') format('woff'),
         url('../fonts/ETmodules.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: block;
}
.dk-step__icon {
    width: 56px; flex: 0 0 auto; background: none; border-radius: 0;   /* oryginał: sama pomarańczowa ikona, bez kwadratu */
    color: var(--dk-color-brand); font-size: 50px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    font-family: 'ETmodules' !important; font-weight: 400; font-style: normal;
}
.dk-step__body h3 { font-family: var(--dk-font-head); font-weight: 500; font-size: 27px; color: #fff; margin: 0 0 4px; }
.dk-step__body p { font-family: var(--dk-font-body); font-weight: 300; font-size: 19px; color: #fff; line-height: 1.5em; margin: 0; }

/* ====================================================================
 *  Sekcja: Stopka   (slug: stopka)
 *  Odwzorowana 1:1 z Divi Theme Builder (et-core-unified-...css).
 * ================================================================== */
.dk-footer {
    background: transparent;   /* separator to czarny obraz na przezroczystym tle — tło stopki dajemy na __main/__copyright */
    color: #fff;
    font-family: var(--dk-font-body);
}

/* Separator (rozdarta krawędź) — wspólna klasa, pełna szerokość */
.dk-sep { display: block; width: 100%; height: auto; margin: 0; }
/* Separator stopki: czarny dół łączy się z czarną stopką */
.dk-footer .dk-sep { margin-bottom: -1px; }
/* Separator nad sklepem: czarny top łączy się z czarnym nagłówkiem powyżej */
.dk-section--sklep > .dk-sep { margin-top: -1px; margin-bottom: -1px; }

/* Górna część: 4 kolumny (czarne tło) */
.dk-footer__main { background: #181818; padding: 40px 0 44px; }
.dk-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* oryginał: 4 kolumny po 22%, gutter 4% */
    column-gap: 4%;
    row-gap: 30px;
    align-items: start;
}
.dk-footer__logo img { display: block; max-width: 165px; width: 100%; height: auto; margin-top: 20px; }  /* desktop: +10% (150→165) */
.dk-footer__coltitle {
    font-family: var(--dk-font-head);
    font-weight: 600;
    font-size: 33px;            /* oryginał: 33px #fb471f */
    color: var(--dk-color-brand);
    margin: 0 0 11px;
    padding: 0;
    line-height: 1.15;
}
/* Divi dodaje listom lewy padding (1em) i kropki — zerujemy, żeby linki były dosunięte do lewej krawędzi */
.dk-footer__menu { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.dk-footer__menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; text-indent: 0 !important; }
.dk-footer__menu li::before { content: none !important; display: none !important; }
.dk-footer__menu li::marker { content: "" !important; }
.dk-footer__menu a {
    font-family: var(--dk-font-body);
    font-size: 19px;           /* oryginał: 19px, line-height 2 */
    line-height: 2;
    color: #fff;
    text-decoration: none;
    transition: color .3s ease;
}
.dk-footer__menu a:hover,
.dk-footer__menu a.is-active { color: var(--dk-color-brand); }

/* Środek: pasek płatności + opis + social (na całą szerokość, wyśrodkowane) */
.dk-footer__wide { text-align: center; padding-top: 24px; }
.dk-footer__pay { display: block; max-width: 100%; height: auto; margin: 0 auto 17px; }
.dk-footer__desc {
    color: #fff;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto 17px;
}
.dk-footer__social { display: flex; justify-content: center; gap: 12px; }
.dk-footer__social a {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ececec;                 /* oryginał: ikony social na jasnoszarym */
    border-radius: 3px;
    color: #181818;
    font-size: 18px;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}
.dk-footer__social a:hover {
    background: var(--dk-color-brand);   /* hover: #fb471f */
    color: #fff;
}

/* Dolny pasek: copyright, górna kreska 3px #fb471f */
.dk-footer__copyright {
    background: #181818;
    border-top: 3px solid var(--dk-color-brand);
    padding: 13px 0 25px;      /* oryginał: row padding-top 13, section padding-bottom 25 */
    text-align: center;
}
.dk-footer__copyright p {
    color: var(--dk-color-brand);
    font-weight: 300;
    font-size: 19px;
    margin: 0;
}

@media (max-width: 980px) {
    .dk-footer__cols { grid-template-columns: repeat(2, 1fr); column-gap: 6%; row-gap: 40px; }
}
@media (max-width: 767px) {
    .dk-footer__cols { grid-template-columns: 1fr; text-align: center; }
    .dk-footer__logo img { max-width: 145px; margin-left: auto; margin-right: auto; }  /* logo na mobile */
    /* na telefonie menu wyśrodkowane (oryginał: et_pb_text_align_center-phone) */
    .dk-footer__col { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   STRONA GŁÓWNA — sekcje .dkh-* (hero, cechy, produkty, realizacje,
   opinie, jak-dzialamy, kontakt-glowna). Tła sekcji z CDN dobrykartacz.pl.
   ═══════════════════════════════════════════════════════════════ */
.dkh{ font-family:'Rubik',Helvetica,Arial,Lucida,sans-serif; }
.dkh img{ max-width:100%; }

/* Przycisk (bg #fb471f, radius 8, ls 2px, Rubik 300 UPPERCASE, hover #ca270b) */
.dkh-btn{ display:inline-block; color:#fff; text-decoration:none; background:#fb471f; border:0; border-radius:var(--dk-radius-btn);
    letter-spacing:2px; font-family:'Rubik',Helvetica,Arial,Lucida,sans-serif; font-weight:300; text-transform:uppercase;
    font-size:20px; line-height:1.7em; padding:.3em 25px; transition:background-color .3s ease; cursor:pointer; }
.dkh-btn:hover{ background:#ca270b; }
/* Wariant ZIELONY = ścieżka zakupowa (sprawdź produkty / dodaj / przejdź / kup) */
.dkh-btn--green{ background:var(--dk-color-green); }
.dkh-btn--green:hover{ background:var(--dk-color-green-dark); }
.dkh-btn:active, .dkh-btn--green:active{ filter:brightness(.93); }

/* Widoczny focus dla interaktywnych elementów marki (dostępność) */
.dkh-btn:focus-visible, .dk-form__submit:focus-visible, .dk-form .wpcf7-submit:focus-visible, .dpq-product-button:focus-visible,
.dk-pp__addtocart:focus-visible, .dkz-sc__btn:focus-visible, .dkc-step:focus-visible,
.dk-menu__link:focus-visible, .dk-footer__menu a:focus-visible {
    outline: 2px solid var(--dk-color-brand); outline-offset: 2px;
}

/* HERO */
.dkh-hero{ background:#1f1e1e url('https://dobrykartacz.pl/wp-content/uploads/2025/11/tlo-1.webp') left center/auto no-repeat; padding:70px 0 90px; }
.dkh-hero__inner{ display:flex; gap:40px; align-items:center; }
.dkh-hero__col{ flex:1 1 0; min-width:0; }
.dkh-hero__text{ color:#ececec; font-weight:300; font-size:19px; line-height:1.5em; padding-right:30px; }
.dkh-hero__text h1{ font-weight:700; text-transform:uppercase; font-size:57px; color:#fff; line-height:1.15em; margin:0 0 .18em; }
.dkh-hero__text p{ margin:0 0 1em; line-height:1.5em; }
/* prefiks .dk-section podnosi specyficzność, by wygrać z „.dk-section p" (font-size/weight) */
.dk-section .dkh-hero__sub{ font-weight:700; font-size:33px; line-height:1.2em; color:#fb471f; margin:.1em 0 .3em; }
.dk-section .dkh-hero__sub strong{ font-weight:900; }
.dkh-hero__text strong{ font-weight:700; }
.dkh-hero__img img{ display:block; width:100%; height:auto; }
@media (max-width:980px){
    .dkh-hero{ padding:40px 0 55px; background-image:url('https://dobrykartacz.pl/wp-content/uploads/2025/11/tlotablet.webp'); background-position:center; background-size:cover; }
    .dkh-hero__inner{ flex-direction:column-reverse; gap:24px; }
    .dkh-hero__text{ padding-right:0; }
    .dkh-hero__text h1{ font-size:51px; }
    .dk-section .dkh-hero__sub{ font-size:29px; }
    .dkh-hero__img img{ max-width:520px; margin:0 auto; }
}
@media (max-width:767px){
    .dkh-hero{ background-position:center bottom 64%; }
    .dkh-hero__text h1{ font-size:34px; }
    .dk-section .dkh-hero__sub{ font-size:24px; }
}

/* Ornament (zdobienie2 / separatro3) */
.dkh-band{ line-height:0; background:#1f1e1e; }
.dkh-band img{ display:block; width:100%; height:auto; }
.dkh-band--light{ background:transparent; }
/* Ornament na dole hero-z-menu — przezroczyste tło (leży na zdjęciu hero), spięty ze zdjęciem */
.dkh-band--onhero{ background:transparent !important; margin-top:-1px; }

/* CECHY (3 ikony, dark) */
.dkh-features{ background:#181818; padding:22px 0 40px; }
.dkh-features__grid{ display:flex; gap:30px; }
.dkh-feature{ flex:1 1 0; text-align:center; color:#ececec; font-weight:300; font-size:19px; line-height:1.5em; }
.dkh-feature__img{ width:80px; max-width:80px; margin:0 auto 8px; }
.dkh-feature__img img{ display:block; width:100%; height:auto; }
.dkh-feature h3{ font-weight:600; font-size:39px; color:#fff; line-height:1.2em; margin:0 0 .3em; }
.dkh-feature p{ margin:0; line-height:1.5em; }
@media (max-width:980px){ .dkh-feature h3{ font-size:35px; } }
@media (max-width:767px){ .dkh-features__grid{ flex-direction:column; gap:30px; } .dkh-feature h3{ font-size:27px; } }

/* PRODUKTY */
.dkh-produkty{ background:#fff url('https://dobrykartacz.pl/wp-content/uploads/2025/01/separator.png') left top/contain no-repeat; padding:64px 0 0; }
.dkh-produkty__head{ text-align:center; }
.dkh-produkty__ikona{ width:16%; margin:0 auto 6px; }
.dkh-produkty__ikona img{ display:block; width:100%; height:auto; }
.dkh-produkty__head h2{ font-weight:700; text-transform:uppercase; font-size:48px; color:#181818; margin:0; }
.dkh-produkty__row{ display:flex; gap:40px; align-items:center; padding:2px 0 20px; }
.dkh-produkty__img{ flex:1 1 0; }
.dkh-produkty__img img{ display:block; width:100%; height:auto; }
.dkh-produkty__list{ flex:1 1 0; }
.dkh-pblurb{ color:#1f1e1e; font-weight:300; font-size:19px; line-height:1.5em; margin-bottom:1em; }
.dkh-pblurb:last-of-type{ margin-bottom:21px; }
.dkh-pblurb h3{ font-weight:600; font-size:39px; color:#181818; line-height:1.2em; margin:0 0 .15em; }
.dkh-pblurb p{ margin:0; line-height:1.5em; }
@media (max-width:980px){
    .dkh-produkty{ padding:50px 0 15px; }
    .dkh-produkty__ikona{ width:28%; }
    .dkh-produkty__head h2{ font-size:42px; }
    .dkh-pblurb h3{ font-size:35px; }
}
@media (max-width:767px){
    .dkh-produkty{ padding:40px 0 24px; }
    .dkh-produkty__ikona{ width:53%; }
    .dkh-produkty__head h2{ font-size:31px; }
    .dkh-produkty__row{ flex-direction:column; gap:20px; }
    .dkh-pblurb h3{ font-size:27px; }
    .dkh-pblurb{ font-size:17px; }
}

/* REALIZACJE (galeria pełna szerokość, separatory nachodzą na zdjęcia) */
.dkh-gallery{ position:relative; }
.dkh-gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; line-height:0; }
.dkh-gcell{ min-width:0; }
.dkh-gcell img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.dkh-gallery__sep{ position:relative; z-index:2; display:block; width:100%; height:auto; pointer-events:none; }
.dkh-gallery__sep--top{ margin-bottom:-3.7%; }
.dkh-gallery__sep--bottom{ margin-top:-6.6%; }
@media (max-width:980px){ .dkh-gallery__grid{ grid-template-columns:repeat(2,1fr); } }

/* OPINIE (dark) */
.dkh-opinie{ background:#181818; padding:21px 0 29px; }
.dkh-opinie__row{ display:flex; gap:40px; align-items:center; }
.dkh-opinie__img{ flex:0 0 40%; max-width:40%; }
.dkh-opinie__img img{ display:block; width:76.5%; height:auto; margin:0 auto; }
.dkh-opinie__body{ flex:1 1 0; min-width:0; }
.dkh-opinie__body h2{ font-weight:700; text-transform:uppercase; font-size:48px; color:#fff; text-align:left; margin:0 0 .3em; }
@media (max-width:980px){ .dkh-opinie__body h2{ font-size:42px; } .dkh-opinie__img img{ width:34%; } }
@media (max-width:767px){
    .dkh-opinie__row{ flex-direction:column; }
    .dkh-opinie__img{ flex:none; max-width:100%; }
    .dkh-opinie__img img{ width:80%; }
    .dkh-opinie__body h2{ font-size:31px; }
}

/* JAK DZIAŁAMY (#f2f2f2) */
.dkh-how{ background:#f2f2f2 url('https://dobrykartacz.pl/wp-content/uploads/2025/01/pobrany-plik.png') center top/contain no-repeat; padding:90px 0 0; }
.dkh-how__title{ text-align:center; }
.dkh-how__title h1{ font-weight:700; text-transform:uppercase; font-size:57px; color:#181818; line-height:1.15em; margin:0; }
.dkh-how__row{ display:flex; gap:40px; align-items:center; padding:18px 0 17px; }
.dkh-how__steps{ flex:0 0 60%; max-width:60%; }
.dkh-how__img{ flex:1 1 0; padding-top:40px; }
.dkh-how__img img{ display:block; width:100%; max-width:500px; height:auto; }
.dkh-step{ display:flex; gap:22px; align-items:flex-start; color:#181818; font-weight:300; font-size:19px; line-height:1.5em; margin-bottom:1.3em; }
.dkh-step__icon{ flex:0 0 auto; font-family:'ETmodules'; color:#fb471f; font-size:50px; line-height:1; }
.dkh-step:first-child .dkh-step__icon{ font-size:54px; }
.dkh-step__body h3{ font-weight:600; font-size:39px; color:#181818; line-height:1.2em; text-align:left; margin:0; }
.dkh-step__body p{ margin:-0.25em 0 0; line-height:1.5em; }
@media (max-width:980px){
    .dkh-how__title h1{ font-size:51px; }
    .dkh-step__body h3{ font-size:35px; }
    .dkh-how__img{ padding-top:10px; }
}
@media (max-width:767px){
    .dkh-how__row{ flex-direction:column; }
    .dkh-how__steps{ flex:none; max-width:100%; }
    .dkh-how__title h1{ font-size:34px; }
    .dkh-step__body h3{ font-size:27px; }
    .dkh-step, .dkh-how{ font-size:17px; }
    .dkh-how__img img{ margin:0 auto; }
}

/* KONTAKT (strona główna, tło spacer2 — szary separator u góry) */
.dkh-kontakt{ background:#fff url('https://dobrykartacz.pl/wp-content/uploads/2025/02/spacer2.png') center top/contain no-repeat; padding:90px 0 50px; }
/* O nas: separator nad KONTAKT ma być CZARNY (łączy się z ciemną sekcją „Jak działamy" wyżej).
   Strona główna zostaje szara. Slug obsłużony w obu wariantach zapisu (o-nas / onas). */
.dk-section--o-nas .dkh-kontakt,
.dk-section--onas .dkh-kontakt{ background-image:url('https://dobrykartacz.pl/wp-content/uploads/2025/01/separator.png'); }
/* Separator bloku KONTAKT dajemy WYŁĄCZNIE przez tło CSS (wyżej). Chowamy ewentualny
   wklejony w HTML <img class="dk-sep">, żeby nie dublować separatora — dotyczy treści z
   panelu, która może jeszcze mieć starą wstawkę (kontakt / o-nas). */
.dkh-kontakt > .dk-sep{ display:none; }
.dkh-kontakt__row{ display:flex; gap:40px; align-items:flex-start; }
.dkh-kontakt__left{ flex:1 1 0; color:#1f1e1e; font-weight:300; font-size:19px; line-height:1.5em; padding-right:30px; }
.dkh-kontakt__left h2{ font-weight:700; font-size:48px; color:#181818; text-align:left; margin:0 0 .3em; }
.dkh-kontakt__left p{ margin:0 0 1em; line-height:1.5em; }
.dkh-kontakt__left .strong2{ font-weight:700; display:inline-block; margin-bottom:.4em; }
.dkh-kontakt__right{ flex:1 1 0; min-width:0; }
.dkh-cblurb{ display:flex; gap:16px; align-items:center; margin-top:1.1em; }
.dkh-cblurb__icon{ flex:0 0 55px; width:55px; height:55px; background:#fb471f; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; }
.dkh-cblurb__body h3{ font-weight:500; font-size:27px; color:#1f1e1e; line-height:1; margin:0 0 .1em; }
.dkh-cblurb__body p{ margin:0; font-weight:300; font-size:18px; line-height:1.2em; color:#181818; }
@media (max-width:980px){ .dkh-kontakt__left h2{ font-size:42px; } .dkh-cblurb__body h3{ font-size:27px; } }
@media (max-width:767px){ .dkh-kontakt__row{ flex-direction:column; } .dkh-kontakt__left h2{ font-size:31px; } .dkh-kontakt__left{ font-size:17px; } }

/* ── Nagłówek z przezroczystym paskiem menu — [dk_sekcja id="naglowek-przezroczysty"] ──
   Górne paski (pomarańczowy promo + ciemny info/telefon) ZOSTAJĄ kolorowe.
   Przezroczysty jest TYLKO pasek nawigacji (logo/menu/ikony) + mobilny nagłówek,
   żeby prześwitywało przez niego zdjęcie hero (nakładany na sekcję ze zdjęciem). */
.dk-section--naglowek-przezroczysty .dk-navbar,
.dk-section--naglowek-przezroczysty .dkz-mheader {
    background: transparent !important;
}
/* Delikatny ciemny separator/cień pod paskiem menu (oddziela od treści, poprawia czytelność) */
.dk-section--naglowek-przezroczysty .dk-navbar {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

/* ====================================================================
 *  Sekcja: MENU + HERO razem — [dk_sekcja id="hero-z-menu"]
 *  Zdjęcie hero jest tłem CAŁEJ sekcji; menu (navbar) i treść hero są
 *  na nim przezroczyste, więc obraz jest ciągły pod menu. Nic się nie nakłada.
 * ================================================================== */
.dkh-heromenu {
    background: #1f1e1e url('https://dobrykartacz.pl/wp-content/uploads/2025/11/tlo-1.webp') center center/cover no-repeat;
}
/* navbar i mobilny nagłówek — przezroczyste (widać tło sekcji) */
.dkh-heromenu .dk-navbar,
.dkh-heromenu .dkz-mheader {
    background: transparent !important;
}
/* hero bez własnego tła — pokazuje tło sekcji (jedno, ciągłe zdjęcie) */
.dkh-heromenu .dkh-hero {
    background: transparent !important;
}
@media (max-width: 767px) {
    .dkh-heromenu { background-image: url('https://dobrykartacz.pl/wp-content/uploads/2025/11/tlotablet.webp'); }
}

/* ── Social media w sekcji Kontakt (strona główna / kontakt / o nas) ── */
.dk-contact__social{ margin-top:26px; }
.dk-contact__social-title{ font-family:var(--dk-font-head,'Rubik',sans-serif); font-weight:700; font-size:27px; color:#1f1e1e; line-height:1; margin:0 0 .55em; }
.dk-contact__social-links{ display:flex; flex-wrap:wrap; gap:14px; }
.dk-contact__social-link{
    width:55px; height:55px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--dk-color-brand,#fb471f); color:#fff; font-size:26px; text-decoration:none;
    transition:background-color .2s ease, color .2s ease;
}
.dk-contact__social-link:hover{ background:#ca270b; color:#fff; }