/*
Theme Name:   Woodmart Child
Description:  Woodmart Child Theme
Author:       XTemos
Author URI:   http://xtemos.com
Template:     woodmart
Version:      1.0.0
Text Domain:  woodmart
*/


/* =========================================================
   MONITORY EDU — TOP BAR
   ========================================================= */

.monitoryedu-topbar-items {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    white-space: nowrap;

    color: #FFFFFF;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

.monitoryedu-topbar-items span,
.monitoryedu-topbar-items a {
    display: flex;
    align-items: center;
    gap: 7px;

    color: inherit;
    text-decoration: none;
}

.monitoryedu-topbar-items img {
    display: block;

    width: 14px;
    height: 14px;
    flex: 0 0 14px;

    object-fit: contain;
}

.monitoryedu-topbar-right {
    justify-content: flex-end;
    width: 100%;
}


/* =========================================================
   HEADER — GŁÓWNE MENU
   Subtelny underline na hover / active
   ========================================================= */

.wd-header-main-nav .wd-nav.wd-style-underline > li > a .nav-link-text::after {
    height: 1px !important;
    background-color: #B8C0CC !important;
    top: calc(100% + 17px) !important;
}



/* =========================================================
   HEADER / HERO — PANEL „PRZEGLĄDAJ KATEGORIE”
   Pojedynczy wiersz kategorii
   ========================================================= */

.monitoryedu-cat-item {
    height: 64px !important;
}

.monitoryedu-cat-item > .woodmart-nav-link {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;

    column-gap: 12px;
    row-gap: 0;

    align-content: center;

    height: 64px !important;
    min-height: 64px !important;

    padding: 0 16px !important;

    position: relative;
    overflow: visible;

    box-sizing: border-box;
}


/* =========================================================
   PANEL KATEGORII — IKONA
   ========================================================= */

.monitoryedu-cat-item > .woodmart-nav-link > .wd-nav-img {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;

    margin: 0 !important;

    object-fit: contain;

    align-self: center;
    justify-self: center;

    transform: scale(1.75);
    transform-origin: center;
}


/* =========================================================
   PANEL KATEGORII — NAZWA KATEGORII
   ========================================================= */

.monitoryedu-cat-item > .woodmart-nav-link > .nav-link-text {
    grid-column: 2;
    grid-row: 1;

    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}


/* =========================================================
   PANEL KATEGORII — OPIS KATEGORII
   WoodMart menu-label wykorzystujemy jako drugą linię
   ========================================================= */

.monitoryedu-cat-item > .woodmart-nav-link > .menu-label {
    grid-column: 2;
    grid-row: 2;

    position: static !important;
    inset: auto !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: #667085 !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 12px !important;
    line-height: 17px !important;
    font-weight: 400 !important;
    text-transform: none !important;
}


/* Usunięcie standardowych ozdobników etykiety WoodMart */

.monitoryedu-cat-item > .woodmart-nav-link > .menu-label::before,
.monitoryedu-cat-item > .woodmart-nav-link > .menu-label::after {
    display: none !important;
}


/* =========================================================
   PANEL KATEGORII — STOPKA
   „Zobacz wszystkie kategorie”
   ========================================================= */

.monitoryedu-cat-footer {
    height: 52px !important;
}

.monitoryedu-cat-footer > .woodmart-nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;

    height: 52px !important;
    min-height: 52px !important;

    padding: 0 16px !important;

    color: #1268E8 !important;

    font-size: 13px;
    line-height: 18px;
    font-weight: 600;

    box-sizing: border-box;
}


/* Strzałka w stopce panelu kategorii */

.monitoryedu-cat-footer > .woodmart-nav-link::after {
    content: "→";

    font-size: 16px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.monitoryedu-cat-footer > .woodmart-nav-link:hover::after {
    transform: translateX(3px);
}


/* =========================================================
   HOMEPAGE — HERO
   Desktop: format 25:12 / render 1000 × 480
   ========================================================= */

.monitoryedu-hero {
    margin-top: 0 !important;
}

.monitoryedu-hero .wd-slide-container {
    padding-block: 0 !important;
}

.monitoryedu-hero .wd-slide-inner {
    max-width: 1000px !important;
}


/* =========================================================
   HOMEPAGE — LINK „ZOBACZ WSZYSTKIE”
   Używany przy nagłówkach sekcji
   ========================================================= */

.monitoryedu-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #1268E8;

    font-size: 13px;
    line-height: 18px;
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;
}

.monitoryedu-section-link:hover {
    color: #2478F0;
}

.monitoryedu-section-link span {
    transition: transform 0.2s ease;
}

.monitoryedu-section-link:hover span {
    transform: translateX(3px);
}


/* =========================================================
   HOMEPAGE — POLECANY MODEL
   i3CONNECT Elm 2 75"
   Prawa część — treść i parametry produktu
   ========================================================= */

.monitoryedu-featured-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    max-width: 620px;
}


/* Badge „Polecamy model”
   --------------------------------------------------------- */

.monitoryedu-featured-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 12px;
    margin-bottom: 12px;

    background: rgba(18, 104, 232, 0.10);
    border-radius: 999px;

    color: #1268E8;

    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
}


/* Nazwa polecanego produktu
   --------------------------------------------------------- */

.monitoryedu-featured-title {
    margin: 0 0 12px;

    color: #0B1F3A;

    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
}


/* Druga linia tytułu — np. „Stworzony dla edukacji”
   --------------------------------------------------------- */

.monitoryedu-featured-title span {
    display: block;

    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
}


/* Krótki opis produktu
   --------------------------------------------------------- */

.monitoryedu-featured-description {
    max-width: 600px;

    margin: 0 0 20px;

    color: #667085;

    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}


/* Cztery najważniejsze parametry — jeden rząd
   --------------------------------------------------------- */

.monitoryedu-featured-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    gap: 24px;

    margin-bottom: 20px;
}


/* Pojedynczy parametr
   --------------------------------------------------------- */

.monitoryedu-featured-feature {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;

    column-gap: 10px;
    row-gap: 1px;

    min-width: 0;
    align-items: center;
}


/* Ikona parametru — generowana wyłącznie przez CSS
   WoodMart nie może nadpisać fill/stroke inline SVG
   --------------------------------------------------------- */

.monitoryedu-featured-feature::before {
    content: "";

    grid-column: 1;
    grid-row: 1 / 3;

    display: block;

    width: 30px;
    height: 30px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}


/* 1. Przekątna — monitor */
.monitoryedu-featured-feature:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/g%3E%3C/svg%3E");
}


/* 2. Google EDLA — tarcza z potwierdzeniem */
.monitoryedu-featured-feature:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.6-2.8 8.1-7 10-4.2-1.9-7-5.4-7-10V6l7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/g%3E%3C/svg%3E");
}


/* 3. RAM — układ scalony */
.monitoryedu-featured-feature:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3'/%3E%3C/g%3E%3C/svg%3E");
}


/* 4. Wi-Fi 6 — łączność */
.monitoryedu-featured-feature:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9a10 10 0 0 1 14 0M8.5 12.5a5 5 0 0 1 7 0'/%3E%3C/g%3E%3Ccircle cx='12' cy='17' r='1.2' fill='%231268E8'/%3E%3C/svg%3E");
}


/* Główna wartość parametru
   --------------------------------------------------------- */

.monitoryedu-featured-feature strong {
    grid-column: 2;
    grid-row: 1;

    color: #172033;

    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}


/* Opis parametru
   --------------------------------------------------------- */

.monitoryedu-featured-feature span {
    grid-column: 2;
    grid-row: 2;

    color: #667085;

    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
}


/* CTA „Zobacz szczegóły”
   --------------------------------------------------------- */

.monitoryedu-featured-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 18px;

    background: #1268E8;
    border-radius: 6px;

    color: #FFFFFF !important;

    font-size: 12px;
    line-height: 16px;
    font-weight: 700;

    text-decoration: none !important;

    transition: background-color 0.2s ease;
}

.monitoryedu-featured-button:hover {
    background: #2478F0;
}


/* =========================================================
   HOMEPAGE — POLECANY MODEL
   Lewa część z monitorem i dekoracyjnymi łukami
   ========================================================= */

.monitoryedu-featured-visual {
    position: relative;
    isolation: isolate;

    /*
     * Łuki mogą wychodzić poza lewą kolumnę.
     * Przycinanie wykonywane jest przez cały jasnoniebieski panel.
     */
    overflow: visible;
}


/* Mocniejszy zewnętrzny łuk
   --------------------------------------------------------- */

.monitoryedu-featured-visual::before {
    content: "";
    position: absolute;

    width: 760px;
    height: 900px;

    left: -230px;
    top: -560px;

    border: 3px solid rgba(18, 104, 232, 0.75);
    border-radius: 50%;

    z-index: -2;
}


/* Delikatniejszy równoległy łuk
   --------------------------------------------------------- */

.monitoryedu-featured-visual::after {
    content: "";
    position: absolute;

    width: 820px;
    height: 970px;

    left: -260px;
    top: -595px;

    border: 2px solid rgba(18, 104, 232, 0.18);
    border-radius: 50%;

    background: transparent;

    z-index: -1;
}


/* Obraz monitora zawsze nad dekoracją
   --------------------------------------------------------- */

.monitoryedu-featured-visual img {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HOMEPAGE — POLECANY MODEL
   Główny jasnoniebieski panel
   Przycięcie dekoracyjnych łuków do granic sekcji
   ========================================================= */

.monitoryedu-featured-panel {
    position: relative;
    overflow: hidden !important;
}

/* =========================================================
   HOMEPAGE — CO OTRZYMUJESZ W STANDARDZIE
   Cztery najważniejsze elementy obsługi
   ========================================================= */

.monitoryedu-standard {
    width: 100%;
    padding: 56px 0;
}

.monitoryedu-standard-heading {
    margin-bottom: 32px;
}

.monitoryedu-standard-heading h2 {
    margin: 0 0 6px;

    color: #0B1F3A;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
}

.monitoryedu-standard-heading p {
    margin: 0;

    color: #667085;
    font-size: 14px;
    line-height: 22px;
}

.monitoryedu-standard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.monitoryedu-standard-item {
    min-height: 112px;
    padding: 4px 28px;

    border-left: 1px solid #E4E9F0;
}

.monitoryedu-standard-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.monitoryedu-standard-item strong {
    display: block;
    margin-bottom: 8px;

    color: #0B1F3A;
    font-size: 15px;
    line-height: 21px;
    font-weight: 700;
}

.monitoryedu-standard-item span {
    display: block;

    color: #667085;
    font-size: 13px;
    line-height: 20px;
}


/* =========================================================
   HOMEPAGE — DLACZEGO MONITORY EDU?
   Panel zgodny z makietą: intro + 4 przewagi
   ========================================================= */

.monitoryedu-why {
    display: grid;
    grid-template-columns: 27% 73%;
    align-items: center;

    width: 100%;
    padding: 28px 34px;

    background: #F1F6FD;
    border-radius: 12px;
}


/* Lewa część — nagłówek, opis, CTA
   --------------------------------------------------------- */

.monitoryedu-why-intro {
    padding-right: 34px;
}

.monitoryedu-why-intro h2 {
    margin: 0 0 8px;

    color: #0B1F3A;

    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
}

.monitoryedu-why-intro p {
    max-width: 300px;
    margin: 0 0 14px;

    color: #667085;

    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.monitoryedu-why-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    padding: 0 12px;

    background: #1268E8;
    border-radius: 4px;

    color: #FFFFFF !important;

    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;

    transition: background-color 0.2s ease;
}

.monitoryedu-why-button:hover {
    background: #2478F0;
}


/* Prawa część — 4 przewagi
   --------------------------------------------------------- */

.monitoryedu-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
}


/* Pojedyncza przewaga
   --------------------------------------------------------- */

.monitoryedu-why-item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 118px;
    padding: 4px 22px;

    text-align: center;
}

.monitoryedu-why-item + .monitoryedu-why-item {
    border-left: 1px solid #D8E1EE;
}


/* Ikona przewagi
   --------------------------------------------------------- */

.monitoryedu-why-icon {
    display: block;

    width: 38px;
    height: 38px;
    margin-bottom: 8px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
}


/* 1. Sprawdzone rozwiązania */
.monitoryedu-why-item:nth-child(1) .monitoryedu-why-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.2 4.5L19 7.2l-3.5 3.4.8 4.8L12 13.2l-4.3 2.2.8-4.8L5 7.2l4.8-.7L12 2Z'/%3E%3Cpath d='M5 18l-2 3M19 18l2 3M8 18h8'/%3E%3C/g%3E%3C/svg%3E");
}


/* 2. Pełne wdrożenie */
.monitoryedu-why-item:nth-child(2) .monitoryedu-why-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 5V3h8v2M8 10h8M8 14h5'/%3E%3C/g%3E%3C/svg%3E");
}


/* 3. Wsparcie techniczne */
.monitoryedu-why-item:nth-child(3) .monitoryedu-why-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 13h2v5H4zM18 13h2v5h-2zM18 18c0 2-2 3-4 3h-2'/%3E%3C/g%3E%3C/svg%3E");
}


/* 4. Polska obsługa */
.monitoryedu-why-item:nth-child(4) .monitoryedu-why-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 16 0v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M4 12v5a2 2 0 0 0 2 2h2M8 18h8'/%3E%3Cpath d='M9 9h.01M15 9h.01M9 14c1.8 1.5 4.2 1.5 6 0'/%3E%3C/g%3E%3C/svg%3E");
}


/* Główne hasło przewagi
   --------------------------------------------------------- */

.monitoryedu-why-item strong {
    display: block;

    margin-bottom: 2px;

    color: #0B1F3A;

    font-size: 15px;
    line-height: 19px;
    font-weight: 700;
}


/* Krótki opis przewagi
   --------------------------------------------------------- */

.monitoryedu-why-item span:not(.monitoryedu-why-icon) {
    display: block;

    max-width: 150px;

    color: #667085;

    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
}

/* =========================================================
   HOMEPAGE — REALIZACJE
   Cztery neutralne karty — treści do podmiany przed publikacją
   ========================================================= */

.monitoryedu-projects {
    width: 100%;
    padding: 52px 0 12px;
}


/* Nagłówek sekcji
   --------------------------------------------------------- */

.monitoryedu-projects-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 22px;
}

.monitoryedu-projects-head h2 {
    margin: 0;

    color: #0B1F3A;

    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
}


/* Link „Zobacz wszystkie realizacje”
   --------------------------------------------------------- */

.monitoryedu-projects-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #1268E8 !important;

    font-size: 12px;
    line-height: 18px;
    font-weight: 600;

    text-decoration: none !important;
    white-space: nowrap;
}

.monitoryedu-projects-link:hover {
    color: #2478F0 !important;
}


/* Siatka 4 kart
   --------------------------------------------------------- */

.monitoryedu-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* Pojedyncza karta realizacji
   --------------------------------------------------------- */

.monitoryedu-project-card {
    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid #E4E9F0;
    border-radius: 8px;
}


/* Neutralny placeholder zdjęcia
   --------------------------------------------------------- */

.monitoryedu-project-image {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 16 / 9;

    background:
        linear-gradient(135deg, rgba(18, 104, 232, 0.035), rgba(18, 104, 232, 0.085)),
        #F5F7FA;

    color: #98A2B3;

    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
}


/* Treść karty
   --------------------------------------------------------- */

.monitoryedu-project-body {
    padding: 14px 16px 16px;
}

.monitoryedu-project-body strong {
    display: block;

    margin-bottom: 4px;

    color: #0B1F3A;

    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.monitoryedu-project-body span {
    display: block;

    color: #667085;

    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

/* =========================================================
   HOMEPAGE — USŁUGI I WSPARCIE
   Cztery karty usług
   ========================================================= */

.monitoryedu-services {
    width: 100%;
    padding: 42px 0 12px;
}


/* Nagłówek sekcji
   --------------------------------------------------------- */

.monitoryedu-services-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
    margin-bottom: 20px;
}

.monitoryedu-services-head h2 {
    margin: 0;

    color: #0B1F3A;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
}

.monitoryedu-services-link {
    color: #1268E8 !important;

    font-size: 12px;
    line-height: 18px;
    font-weight: 600;

    text-decoration: none !important;
}


/* Siatka kart
   --------------------------------------------------------- */

.monitoryedu-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* Karta usługi
   --------------------------------------------------------- */

.monitoryedu-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 215px;
    padding: 24px 22px 20px;

    background: #FFFFFF;
    border: 1px solid #E4E9F0;
    border-radius: 8px;

    text-align: center;
}

.monitoryedu-service-card h3 {
    margin: 0 0 8px;

    color: #0B1F3A;
    font-size: 15px;
    line-height: 21px;
    font-weight: 700;
}

.monitoryedu-service-card p {
    max-width: 220px;
    margin: 0 0 14px;

    color: #667085;
    font-size: 12px;
    line-height: 18px;
}

.monitoryedu-service-card > a {
    margin-top: auto;

    color: #1268E8 !important;

    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
}


/* Ikony usług
   --------------------------------------------------------- */

.monitoryedu-service-icon {
    display: block;

    width: 44px;
    height: 44px;

    margin-bottom: 12px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
}


/* Montaż i instalacja */

.monitoryedu-service-icon.icon-install {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6l4 4'/%3E%3Cpath d='M4 20l6-6'/%3E%3Cpath d='M7 4l13 13'/%3E%3Cpath d='M15 3l6 6'/%3E%3C/svg%3E");
}


/* Konfiguracja i integracja */

.monitoryedu-service-icon.icon-config {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21h-4v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1A1.7 1.7 0 0 0 4.6 15 1.7 1.7 0 0 0 3 14H3v-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1L7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6V3h4v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1H21v4h-.1a1.7 1.7 0 0 0-1.5 1Z'/%3E%3C/svg%3E");
}


/* Szkolenia i wdrożenia */

.monitoryedu-service-icon.icon-training {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M8 10l3 2 5-4'/%3E%3C/svg%3E");
}


/* Opieka posprzedażowa */

.monitoryedu-service-icon.icon-support {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 13h3v6H4z'/%3E%3Cpath d='M17 13h3v6h-3z'/%3E%3Cpath d='M17 19c0 1.5-1.5 2-3 2h-2'/%3E%3C/svg%3E");
}

/* =========================================================
   HOMEPAGE — KOŃCOWY CTA
   „Nie wiesz, który monitor wybrać?”
   ========================================================= */

.monitoryedu-contact-cta {
    display: grid;
    grid-template-columns: 38% 40% 22%;
    align-items: center;

    width: 100%;
    min-height: 126px;

    padding: 24px 32px;

    background: linear-gradient(
        105deg,
        #061C3A 0%,
        #082A59 55%,
        #0754C9 100%
    );

    border-radius: 10px;

    color: #FFFFFF;
}


/* Lewa część — nagłówek i opis
   --------------------------------------------------------- */

.monitoryedu-contact-cta-intro {
    padding-right: 30px;
}

.monitoryedu-contact-cta-intro h2 {
    margin: 0 0 8px;

    color: #FFFFFF;

    font-size: 22px;
    line-height: 27px;
    font-weight: 700;
}

.monitoryedu-contact-cta-intro p {
    max-width: 340px;
    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;
    line-height: 17px;
}


/* Środkowa część — 3 korzyści
   --------------------------------------------------------- */

.monitoryedu-contact-cta-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: center;
}

.monitoryedu-contact-cta-benefit {
    display: flex;
    align-items: center;

    gap: 10px;
    padding: 0 12px;
}

.monitoryedu-contact-cta-benefit strong {
    color: #FFFFFF;

    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
}


/* Ikony CTA
   --------------------------------------------------------- */

.monitoryedu-contact-cta-icon {
    display: block;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
}


/* Profesjonalne doradztwo */

.monitoryedu-contact-cta-icon.icon-advice {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2'/%3E%3C/g%3E%3C/svg%3E");
}


/* Indywidualne wyceny */

.monitoryedu-contact-cta-icon.icon-quote {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h5M8 16h7'/%3E%3C/g%3E%3C/svg%3E");
}


/* Dofinansowania i dotacje */

.monitoryedu-contact-cta-icon.icon-funding {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M16 7H9.5a2.5 2.5 0 0 0 0 5H14a2.5 2.5 0 0 1 0 5H7'/%3E%3Cpath d='M4 4l16 16' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}


/* Prawa część — przycisk
   --------------------------------------------------------- */

.monitoryedu-contact-cta-action {
    display: flex;
    justify-content: flex-end;
}

.monitoryedu-contact-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 20px;

    background: #1268E8;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;

    color: #FFFFFF !important;

    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;

    white-space: nowrap;

    transition: background-color 0.2s ease;
}

.monitoryedu-contact-cta-button:hover {
    background: #2478F0;
}

/* =========================================================
   HOMEPAGE — PODTYTUŁY GŁÓWNYCH SEKCJI
   ========================================================= */

.monitoryedu-section-subtitle {
    margin: 4px 0 0;

    color: #667085;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

/* =========================================================
   FOOTER — MARKA + KONTAKT
   Pierwsze dwie kolumny stopki
   ========================================================= */


/* Marka
   --------------------------------------------------------- */

.monitoryedu-footer-brand-logo {
    display: inline-block;
    margin-bottom: 16px;
}

.monitoryedu-footer-brand-logo img {
    display: block;

    width: 210px;
    max-width: 100%;
    height: auto;

    /*
     * Tymczasowo rozjaśniamy obecne logo,
     * ponieważ jego granat znika na tle stopki.
     */
    filter: brightness(0) invert(1);
}

.monitoryedu-footer-brand-description {
    max-width: 285px;
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}


/* Kontakt
   --------------------------------------------------------- */

.monitoryedu-footer-contact h3 {
    margin: 0 0 20px;

    color: #FFFFFF;

    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}

.monitoryedu-footer-company {
    display: flex;
    flex-direction: column;

    margin-bottom: 14px;
}

.monitoryedu-footer-company strong {
    color: #FFFFFF;

    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.monitoryedu-footer-company span {
    color: rgba(255,255,255,.65);

    font-size: 12px;
    line-height: 18px;
}

.monitoryedu-footer-contact-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.monitoryedu-footer-contact-row {
    display: flex;
    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.78) !important;

    font-size: 13px;
    line-height: 19px;

    text-decoration: none !important;
}

.monitoryedu-footer-contact-row:hover {
    color: #FFFFFF !important;
}

.monitoryedu-footer-contact-icon {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}


/* Telefon */

.footer-phone .monitoryedu-footer-contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}


/* E-mail */

.footer-email .monitoryedu-footer-contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}


/* Godziny */

.footer-hours .monitoryedu-footer-contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}


/* WWW */

.footer-web .monitoryedu-footer-contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.2 2.5 3.3 5.5 3.3 9S14.2 18.5 12 21M12 3C9.8 5.5 8.7 8.5 8.7 12S9.8 18.5 12 21'/%3E%3C/svg%3E");
}
.widget-title {
    margin-bottom: 4px !important;
}

.monitoryedu-prefooter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    width: 100%;
    min-height: 78px;
    padding: 14px 24px;
    background: #f6f8fb;
    border-radius: 4px;
}

.monitoryedu-prefooter__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0 24px;
}

.monitoryedu-prefooter__item:first-child {
    padding-left: 0;
}

.monitoryedu-prefooter__item:last-child {
    padding-right: 0;
}

.monitoryedu-prefooter__item + .monitoryedu-prefooter__item {
    border-left: 1px solid #dfe4eb;
}

.monitoryedu-prefooter__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: #071f47;
}

.monitoryedu-prefooter__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.monitoryedu-prefooter__item > div {
    min-width: 0;
    line-height: 1.25;
}

.monitoryedu-prefooter__item strong {
    display: block;
    margin-bottom: 3px;
    color: #071f47;
    font-size: 14px;
    font-weight: 600;
}

.monitoryedu-prefooter__item div span {
    display: block;
    color: #687386;
    font-size: 12px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .monitoryedu-prefooter {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 0;
    }

    .monitoryedu-prefooter__item:nth-child(3) {
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .monitoryedu-prefooter {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .monitoryedu-prefooter__item {
        padding: 14px 0;
        border-left: 0 !important;
        border-bottom: 1px solid #dfe4eb;
    }

    .monitoryedu-prefooter__item:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   SINGLE PRODUCT — PRAWA KOLUMNA / BUY BOX
   Dopasowanie do mockupu Monitory EDU
   ========================================================= */


/* Cena brutto bezpośrednio przy cenie głównej
   --------------------------------------------------------- */

.single-product .wd-single-price .price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 16px !important;
}

.single-product .wd-single-price .price > .woocommerce-Price-amount:first-child::after {
    content: "brutto";
    margin-left: 5px;
    color: #667085;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    vertical-align: baseline;
}

.single-product .wd-single-price .woocommerce-price-suffix {
    color: #667085;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
}

.single-product .wd-single-price .price::after {
    content: none;
}


/* =========================================================
   SINGLE PRODUCT — 4 GŁÓWNE PARAMETRY
   Każdy atrybut jest osobnym widgetem WoodMart
   w osobnym kontenerze.
   Docelowy układ: wartość u góry, podpis pod spodem.
   ========================================================= */

/* Kontener nadrzędny z 4 atrybutami */
.single-product [data-id="5c759e2"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100% !important;
    margin-bottom: 18px !important;

    border: 1px solid #E4E9F0 !important;
    border-radius: 4px !important;

    overflow: hidden !important;
}

/* Kolejność zgodna z mockupem:
   1. Przekątna
   2. EDLA
   3. RAM
   4. Audio
*/
.single-product [data-id="731224c"] { order: 1; }
.single-product [data-id="822e30f"] { order: 2; }
.single-product [data-id="1c7a708"] { order: 3; }
.single-product [data-id="7bd5036"] { order: 4; }

/* Każdy z 4 kontenerów */
.single-product [data-id="5c759e2"] > .e-con {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border-right: 1px solid #E4E9F0 !important;
}

.single-product [data-id="5c759e2"] > .e-con:last-child {
    border-right: 0 !important;
}

/* Po zmianie kolejności usuń border z faktycznie ostatniego kafla */
.single-product [data-id="7bd5036"] {
    border-right: 0 !important;
}

.single-product [data-id="1c7a708"] {
    border-right: 1px solid #E4E9F0 !important;
}

/* Widget atrybutu */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Reset tabeli WoodMart */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights table.shop_attributes,
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights tbody {
    display: block !important;

    width: 100% !important;
    margin: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

/* Jeden kafel: wartość + podpis jako wyśrodkowana grupa */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border: 0 !important;
    background: #FFFFFF !important;
}

/* Reset komórek tabeli */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights td,
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights th {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    text-align: center !important;
}

/* Wartość na górze */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights td {
    order: 1 !important;
}

/* Podpis pod wartością */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights th {
    order: 2 !important;
}

/* Wartości: 75" / Tak / 8 GB / 65 W */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights .wd-term,
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights .wd-term-name {
    display: inline-block !important;

    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #1268E8 !important;

    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
}

/* Podpisy */
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights .wd-attr-label,
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights .wd-attr-name {
    display: inline-block !important;

    visibility: visible !important;
    opacity: 1 !important;

    white-space: nowrap !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #172033 !important;

    font-size: 11px !important;
    line-height: 15px !important;
    font-weight: 500 !important;
}


/* Mobile */
@media (max-width: 767px) {
    .single-product [data-id="5c759e2"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .single-product [data-id="5c759e2"] > .e-con {
        border-right: 1px solid #E4E9F0 !important;
    }

    .single-product [data-id="822e30f"],
    .single-product [data-id="7bd5036"] {
        border-right: 0 !important;
    }

    .single-product [data-id="731224c"],
    .single-product [data-id="822e30f"] {
        border-bottom: 1px solid #E4E9F0 !important;
    }
}


/* =========================================================
   SINGLE PRODUCT — ILOŚĆ + DODAJ DO KOSZYKA
   ========================================================= */

.single-product .wd-single-add-cart form.cart {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;

    width: 100% !important;
    margin: 0 0 10px !important;
}

.single-product .wd-single-add-cart .quantity {
    display: grid !important;
    grid-template-columns: 26px 30px 26px !important;

    width: 82px !important;
    min-width: 82px !important;
    height: 42px !important;

    margin: 0 !important;
    border: 1px solid #E4E9F0 !important;
}

.single-product .wd-single-add-cart .quantity .minus,
.single-product .wd-single-add-cart .quantity .plus,
.single-product .wd-single-add-cart .quantity .qty {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    text-align: center !important;
}

.single-product .wd-single-add-cart .quantity .qty {
    border-inline: 1px solid #E4E9F0 !important;
}

.single-product .wd-single-add-cart .single_add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 42px !important;

    margin: 0 !important;

    background: #1268E8 !important;
    border-radius: 2px !important;

    color: #FFFFFF !important;

    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.single-product .wd-single-add-cart .single_add_to_cart_button:hover {
    background: #2478F0 !important;
}


/* Separator z presetu nie jest potrzebny
   --------------------------------------------------------- */

.single-product .wd-single-add-cart + .elementor-widget-divider {
    display: none !important;
}


/* =========================================================
   SINGLE PRODUCT — PORÓWNAJ
   Preset ma drugi pusty kontener obok; CSS go usuwa
   i rozciąga Porównaj na pełną szerokość.
   ========================================================= */

.single-product [data-id="a7537fe"] > .e-con-inner {
    display: block !important;
    width: 100% !important;
}

.single-product [data-id="badaa89"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
}

.single-product [data-id="8c1f071"] {
    display: none !important;
}

.single-product .wd-single-compare-btn,
.single-product .wd-single-compare-btn.elementor-widget__width-auto {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    --container-widget-width: 100% !important;
}

.single-product .wd-single-compare-btn .elementor-widget-container,
.single-product .wd-single-compare-btn .wd-compare-btn,
.single-product .wd-single-compare-btn .wd-compare-btn a {
    width: 100% !important;
    max-width: none !important;
}

.single-product .wd-single-compare-btn .wd-compare-btn a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;
    padding: 0 16px !important;

    border: 1px solid #1268E8 !important;
    border-radius: 2px !important;

    color: #1268E8 !important;

    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;

    text-decoration: none !important;
}

.single-product .wd-single-compare-btn .wd-action-icon {
    margin-right: 8px !important;
}

.single-product .wd-single-compare-btn .wd-compare-btn a:hover {
    background: rgba(18, 104, 232, 0.04) !important;
}


/* =========================================================
   SINGLE PRODUCT — BLOK 2 × 2 POD PRZYCISKAMI
   ========================================================= */

.monitoryedu-product-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;

    margin-top: 16px;

    background: #F8FAFD;
    border: 1px solid #E4E9F0;
    border-radius: 4px;

    overflow: hidden;
}

.monitoryedu-product-benefit {
    position: relative;

    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;

    column-gap: 12px;

    min-height: 92px;
    padding: 15px 18px;

    border-right: 1px solid #E4E9F0;
    border-bottom: 1px solid #E4E9F0;
}

.monitoryedu-product-benefit:nth-child(2n) {
    border-right: 0;
}

.monitoryedu-product-benefit:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.monitoryedu-product-benefit::before {
    content: "";

    display: block;

    width: 30px;
    height: 30px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
}

.monitoryedu-product-benefit.benefit-school::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230B1F3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M15 2v5h4M9 12h6M9 16h6'/%3E%3C/g%3E%3C/svg%3E");
}

.monitoryedu-product-benefit.benefit-payment::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230B1F3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 9h18M7 15h4'/%3E%3C/g%3E%3C/svg%3E");
}

.monitoryedu-product-benefit.benefit-install::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230B1F3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5 5L3 18l3 3 6.7-6.7a4 4 0 0 0 5-5l-2.4 2.4-3-3z'/%3E%3C/g%3E%3C/svg%3E");
}

.monitoryedu-product-benefit.benefit-warranty::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230B1F3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.6-2.8 8.1-7 10-4.2-1.9-7-5.4-7-10V6l7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/g%3E%3C/svg%3E");
}

.monitoryedu-product-benefit > div {
    min-width: 0;
}

.monitoryedu-product-benefit strong {
    display: block;

    margin-bottom: 3px;

    color: #172033;

    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
}

.monitoryedu-product-benefit span {
    display: block;

    color: #667085;

    font-size: 11px;
    line-height: 15px;
    font-weight: 400;
}


/* =========================================================
   SINGLE PRODUCT — RESPONSYWNOŚĆ BUY BOX
   ========================================================= */

@media (max-width: 767px) {

    .single-product .monitoryedu-product-highlights table.shop_attributes > tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .single-product .monitoryedu-product-highlights table.shop_attributes > tbody > tr:nth-child(2n) {
        border-right: 0 !important;
    }

    .single-product .monitoryedu-product-highlights table.shop_attributes > tbody > tr:nth-child(-n + 2) {
        border-bottom: 1px solid #E4E9F0 !important;
    }

    .monitoryedu-product-benefits {
        grid-template-columns: 1fr;
    }

    .monitoryedu-product-benefit {
        border-right: 0 !important;
        border-bottom: 1px solid #E4E9F0 !important;
    }

    .monitoryedu-product-benefit:last-child {
        border-bottom: 0 !important;
    }
}

/* =========================================================
   SINGLE PRODUCT — FINAL POLISH DESKTOP
   2026-08-15
   Oparte na aktualnym DOM karty produktu i mockupie Monitory EDU.
   ========================================================= */


/* ---------------------------------------------------------
   1. BUY BOX — długie wartości w 4 kaflach
   --------------------------------------------------------- */

.single-product [data-id="5c759e2"] .monitoryedu-product-highlights tr {
    height: auto !important;
    min-height: 82px !important;
}

.single-product [data-id="5c759e2"] .monitoryedu-product-highlights .wd-term,
.single-product [data-id="5c759e2"] .monitoryedu-product-highlights .wd-term-name {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    text-wrap: balance;
}

/* Dłuższe wartości Promethean — mniejsza typografia zamiast overflow */
.single-product [data-id="5c759e2"]
.woocommerce-product-attributes-item--attribute_pa_edla .wd-term-name,
.single-product [data-id="5c759e2"]
.woocommerce-product-attributes-item--attribute_pa_glosniki .wd-term-name {
    font-size: 14px !important;
    line-height: 18px !important;
}



/* ---------------------------------------------------------
   2. GŁÓWNE NAGŁÓWKI DOLNEJ CZĘŚCI — niebieski akcent
   Opis / Dokumenty / Specyfikacja techniczna
   --------------------------------------------------------- */

.single-product [data-id="139e50b"] .woodmart-title-container::after,
.single-product [data-id="1f9734b"] .woodmart-title-container::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 8px;
    background: #1268E8;
    border-radius: 999px;
}


/* ---------------------------------------------------------
   3. OPIS — checkmarki zamiast domyślnych kropek
   --------------------------------------------------------- */

.single-product [data-id="f68a97d"] ul {
    list-style: none !important;
    --li-pl: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.single-product [data-id="f68a97d"] ul > li {
    position: relative;
    padding-left: 26px !important;
}

.single-product [data-id="f68a97d"] ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%231268E8' stroke-width='1.4'/%3E%3Cpath d='m4.8 8.1 2 2 4.4-4.5' fill='none' stroke='%231268E8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   4. SPECYFIKACJA 2×2 — dedykowane ikony kart
   --------------------------------------------------------- */

.single-product [data-id="616a890"] .wd-el-title {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.single-product [data-id="616a890"] .wd-el-title .img-wrapper {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}

.single-product [data-id="616a890"] .wd-el-title .img-wrapper img {
    display: none !important;
}

/* Ekran */
.single-product [data-id="bcda0f0"] .wd-el-title .img-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* System i dotyk */
.single-product [data-id="a8ebac6"] .wd-el-title .img-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 11V5.8a1.5 1.5 0 0 1 3 0V10'/%3E%3Cpath d='M11.5 9V4.8a1.5 1.5 0 0 1 3 0V10'/%3E%3Cpath d='M14.5 9V6a1.5 1.5 0 0 1 3 0v5'/%3E%3Cpath d='M8.5 9.5 7 8a1.55 1.55 0 0 0-2.2 2.2l4.6 6.2A5 5 0 0 0 13.4 19H15a5 5 0 0 0 5-5v-3a1.5 1.5 0 0 0-3 0'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Łączność i audio */
.single-product [data-id="1c0b347"] .wd-el-title .img-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5a12 12 0 0 1 17 0M6.8 11.8a7.4 7.4 0 0 1 10.4 0M10 15a2.9 2.9 0 0 1 4 0'/%3E%3C/g%3E%3Ccircle cx='12' cy='18.4' r='1.2' fill='%231268E8'/%3E%3C/svg%3E") !important;
}

/* Montaż i wyposażenie */
.single-product [data-id="e7f02e9"] .wd-el-title .img-wrapper {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%231268E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 8h8v8H8zM2 8h2M2 16h2M20 8h2M20 16h2'/%3E%3C/g%3E%3C/svg%3E") !important;
}


/* ---------------------------------------------------------
   5. DOKUMENTY — kompletna sekcja renderowana tylko z dokumentem
   --------------------------------------------------------- */

.single-product [data-id="827c449"] {
    margin: 26px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.single-product .monitoryedu-product-documents-section {
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid #E4E9F0;
    border-radius: 8px;
}

.single-product .monitoryedu-product-documents-heading {
    margin: 0 0 12px;
    color: #172033;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}

.single-product .monitoryedu-product-documents-heading::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 8px;
    background: #1268E8;
    border-radius: 999px;
}

.single-product .monitoryedu-product-documents-section .monitoryedu-product-documents {
    display: block !important;
    width: 100% !important;
}

.single-product .monitoryedu-product-documents-section .monitoryedu-product-document-link {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    color: #172033 !important;
}

.single-product .monitoryedu-product-documents-section .monitoryedu-product-document-link:hover {
    color: #1268E8 !important;
}

.single-product .monitoryedu-product-documents-section .monitoryedu-product-document-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid #FFB8B8 !important;
    border-radius: 4px !important;
    color: #E5484D !important;
    background: #FFF7F7 !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

.single-product .monitoryedu-product-documents-section .monitoryedu-product-document-link::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    justify-self: end;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230B1F3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M8 11l4 4 4-4M5 20h14'/%3E%3C/g%3E%3C/svg%3E");
}

.single-product .monitoryedu-product-documents-section .monitoryedu-product-document-meta {
    display: block !important;
    margin-top: 2px !important;
    margin-left: 46px !important;
    color: #667085 !important;
    font-size: 11px !important;
    line-height: 16px !important;
}


/* ---------------------------------------------------------
   6. BREADCRUMB — usuń nawigację poprzedni / siatka / następny
   Nie występuje w zaakceptowanym mockupie.
   --------------------------------------------------------- */

.single-product [data-id="de3a9cc"] {
    display: none !important;
}


/* ---------------------------------------------------------
   7. Drobna spójność tabel specyfikacji
   --------------------------------------------------------- */

.single-product [data-id="616a890"] .shop_attributes tr {
    gap: 12px !important;
}

.single-product [data-id="616a890"] .shop_attributes td {
    min-width: 0 !important;
}

.single-product [data-id="616a890"] .shop_attributes .wd-term-name {
    overflow-wrap: anywhere;
}


/* ============================================================
   MONITORY EDU — poprawki CSS dla widoku mobilnego
   Wygenerowano na podstawie audytu strony produktu:
   https://monitoryedu.pl/produkt/i3connect-aspen-4-65-monitor-interaktywny-qled/
   (motyw: Woodmart / WooCommerce)

   Jak wdrożyć:
   - WordPress: Wygląd → Dostosuj → Dodatkowe CSS (Additional CSS),
     LUB wklej do pliku CSS dziecka motywu (child theme) w functions.php
     przez wp_enqueue_style().
   - UWAGA: poprawka nr 1 (kafelek "Audio") działa na WSZYSTKICH
     szerokościach ekranu — ten błąd występował też na desktopie,
     nie tylko na mobile. Poprawki 2–5 dotyczą tylko widoku
     mobilnego/tabletowego i są spięte w media queries, więc nie
     ruszają desktopu.
   - WAŻNE: sprawdziłem na żywo na Twojej stronie, że poprawka
     nr 6 (strona główna, w tym hero na górze) w POPRZEDNIEJ
     wersji pliku w ogóle się nie wgrała / nie zadziałała — hero
     miał regułę motywu po ID (#slider-381), która ma wyższą
     specyficzność niż mój selektor klasowy i wygrywała mimo
     !important. W tej wersji poprawka celuje w ten sam selektor
     po ID, więc na pewno wygra — przetestowałem to bezpośrednio
     wstrzykując CAŁY ten plik na żywą stronę i sprawdzając
     obliczone style w DevTools, nie tylko na oko. Prosiłbym o
     wgranie CAŁEGO pliku na nowo (a nie tylko dopisanie sekcji 6
     do tego, co już masz), żeby mieć pewność, że nie zostały
     stare, częściowe wersje reguł.
   ============================================================ */


/* ------------------------------------------------------------
   1) BŁĄD: kafelek "Audio" w pasku statystyk produktu (widget
      Elementor "monitoryedu-product-highlights") nachodzi na
      etykietę pod spodem / tekst łamie się w połowie wyrazu
      ("Dol" / "by") / przecinek wisi samotnie w osobnej linii.
      Zweryfikowana w DevTools przyczyna (pełny łańcuch):
        a) .wd-term-name (wartość atrybutu "Głośniki") ma
           white-space: nowrap, więc długi tekst
           "2 × 20 W + subwoofer 40 W, Dolby" wyjeżdża poza
           148px-ową kolumnę zamiast się zawinąć;
        b) etykieta th ma jednocześnie widoczny tekst "Głośniki"
           ORAZ wygenerowaną zawartość th::after { content:"Audio" } —
           obie się sklejają w "GłośnikiAudio";
        c) kontener wartości (td) ma display:flex; flex-wrap:nowrap,
           a każdy fragment wartości (span.wd-term / .wd-term-name /
           .wd-term-sep) jest osobnym blokiem — flex bez zawijania
           ściska te bloki i przy okazji łamie słowa w środku
           ("Dolby" → "Dol"/"by"), a przecinek-separator ląduje
           na osobnej linii.
      PIERWSZA WERSJA tej poprawki (samo white-space:normal na
      .wd-term-name) naprawiała tylko wyjeżdżanie poza kafelek,
      ale NIE naprawiała łamania w środku wyrazu — stąd nadal
      "bałagan". Druga wersja naprawiała to poprawnie, ALE była
      zamknięta w @media (max-width:767px), więc nie działała na
      desktopie.

      WAŻNE odkrycie: ten konkretny widget (kafelki "highlights"
      nad opisem: Przekątna / EDLA / RAM / Audio) ma sztywną,
      wąską kolumnę (~140–150px) i układ flex/nowrap NA KAŻDEJ
      szerokości ekranu, nie tylko na mobile — sprawdziłem to
      bezpośrednio w DevTools także przy szerokości okna >1500px.
      To nie jest błąd "responsywności", tylko stały błąd układu
      tego komponentu, widoczny zarówno na telefonie, jak i na
      desktopie. Dlatego poniższa poprawka NIE jest już zamknięta
      w media query z max-width — działa zawsze.
   ------------------------------------------------------------ */
.monitoryedu-product-highlights
  .woocommerce-product-attributes-item--attribute_pa_glosniki
  td.woocommerce-product-attributes-item__value {
  display: block !important;
}

.monitoryedu-product-highlights
  .woocommerce-product-attributes-item--attribute_pa_glosniki
  td.woocommerce-product-attributes-item__value .wd-term,
.monitoryedu-product-highlights
  .woocommerce-product-attributes-item--attribute_pa_glosniki
  td.woocommerce-product-attributes-item__value .wd-term-name,
.monitoryedu-product-highlights
  .woocommerce-product-attributes-item--attribute_pa_glosniki
  td.woocommerce-product-attributes-item__value .wd-term-sep {
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}

.monitoryedu-product-highlights
  .woocommerce-product-attributes-item--attribute_pa_glosniki
  .wd-attr-name {
   /* zostaje tylko generowane th::after: "Audio" */
}


/* ------------------------------------------------------------
   2) BŁĄD: brakujące logo w mobilnym headerze — motyw pokazuje
      domyślną ikonę/tekst "woodmart." (wood-logo-dark.svg)
      zamiast prawdziwego logo "MONITORY EDU".
      Naprawa: ukrywamy placeholder motywu i wstawiamy właściwe
      logo jako tło (ten sam plik, który jest już poprawnie
      używany w stopce: logo_monitoryedu2.png).
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .whb-column.whb-hidden-lg .wd-logo.wd-main-logo img[src*="wood-logo-dark"] {
    display: none;
  }

  .whb-column.whb-hidden-lg .wd-logo.wd-main-logo {
    display: inline-flex;
    align-items: center;
    width: 140px;
    height: 32px;
    background-image: url("https://monitoryedu.pl/wp-content/uploads/2026/08/logo_monitoryedu2.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: contain;
  }
}


/* ------------------------------------------------------------
   3) BŁĄD: pływający przycisk zgody na cookies (cookieadmin)
      nachodzi na dolny pasek nawigacji mobilnej (Sklep / Lista
      życzeń / Koszyk / Moje konto), zasłaniając zakładkę "Sklep".
      Potwierdzone współrzędnymi: przycisk cookies y:491–541,
      dolny pasek nawigacji y:501–556 — nakładają się.
      Naprawa: podnosimy przycisk cookies ponad wysokość paska.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .cookieadmin_re_consent {
    bottom: 66px !important; /* wysokość dolnego paska (~56px) + margines */
    z-index: 400;            /* niżej niż wysuwane menu/koszyk (500), ale widoczne */
  }
}


/* ------------------------------------------------------------
   4) BŁĄD: karuzela "Ostatnio oglądane produkty" zostawia dużą
      pustą przestrzeń (ok. 200 px) pod widoczną kartą produktu,
      zanim zacznie się kolejna sekcja ("Dostawa sprzętu…").
      Prawdopodobna przyczyna: w DOM-ie znaleziono klony kolejnych
      slajdów (klasa wd-slide-next) wystające poza szerokość
      widoku, co sugeruje, że skrypt karuzeli nie przelicza
      poprawnie wysokości toru na wąskim ekranie. Poniższa reguła
      to bezpieczna naprawa kosmetyczna (nie usuwa przyczyny w JS,
      ale eliminuje pustą przestrzeń w warstwie wizualnej).
      Jeśli po wdrożeniu przerwa nadal występuje, konieczne będzie
      wymuszenie odświeżenia karuzeli po załadowaniu strony
      (np. wywołanie metody "refresh"/"resize" biblioteki, z
      której korzysta motyw Woodmart, po evencie window.load).
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .wd-carousel-container.wd-products-element {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .wd-carousel-container.wd-products-element .wd-carousel-item.wd-slide-next {
    display: none !important;
  }
}


/* ------------------------------------------------------------
   5) BŁĄD: sklonowany, przyklejony (sticky) nagłówek mobilny
      potrafi pojawić się przypięty do góry ekranu w momencie,
      gdy użytkownik jest blisko końca strony, nachodząc na
      akordeon stopki (Kategorie / Usługi / Pomoc).
      To zachowanie sterowane jest przez JS (pokaż/ukryj przy
      przewijaniu), więc pełna naprawa wymaga poprawki w skrypcie
      motywu. Poniższa reguła CSS ogranicza szkody: nie pozwala
      klonowi nagłówka nachodzić na stopkę i wyłącza jego
      klikalność, gdy stopka jest w warstwie pod spodem.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  footer.site-footer,
  .footer-widgets-wrapper,
  .wd-footer {
    position: relative;
    z-index: 392; /* wyżej niż klon nagłówka (391) */
  }
}
/* Zalecenie dodatkowe (poza CSS): w skrypcie odpowiedzialnym za
   klasę "whb-hide-on-scroll" dodać warunek, który chowa klon
   nagłówka, gdy użytkownik znajduje się w obrębie stopki
   (np. IntersectionObserver na elemencie <footer>). */


/* ------------------------------------------------------------
   6) STRONA GŁÓWNA (monitoryedu.pl/) — na wyraźną prośbę
      sprawdziłem też stronę główną na mobile, bo wcześniej tego
      nie zrobiłem (błąd z mojej strony). Znalazłem poważniejsze
      problemy niż na stronie produktu: prawie każda autorska
      sekcja strony głównej (klasy "monitoryedu-*", czyli
      komponenty budowane ręcznie przez dewelopera strony, nie
      przez sam motyw Woodmart) używa CSS Grid ze SZTYWNĄ liczbą
      kolumn (3–4), która NIE ZWĘŻA SIĘ do 1–2 kolumn na wąskim
      ekranie — nie ma dla nich żadnej reguły @media w oryginalnym
      CSS. Efekt: obcięte wyrazy ("Realizacj[a] 01", "Szybka
      łącz[ność]"), nagłówki łamiące się pojedynczymi słowami w
      pionie, nieczytelne, stłoczone kolumny 60–90px szerokości.
      Wszystkie poniższe poprawki przetestowałem na żywo na
      stronie głównej (max-width:390px) — działają.
   ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* Hero na górze strony: WAŻNA POPRAWKA (v2). Pierwsza wersja
     tej reguły (sam selektor klasowy .monitoryedu-hero .wd-slide)
     w ogóle nie działała, bo w motywie istnieje osobna reguła
     dla TEGO KONKRETNEGO slidera po ID:
       #slider-381 .wd-slide { min-height: 750px; }  (@media max-width:768px)
     Selektor po ID ma wyższą specyficzność niż mój selektor
     klasowy, więc mimo !important moja reguła przegrywała
     (specyficzność ID bije specyficzność klas, gdy obie strony
     są w tej samej kategorii ważności — a druga strona wcale nie
     musiała mieć !important, bo o kolejności decyduje najpierw
     specyficzność selektora, nie tylko obecność !important).
     Co ważniejsze: ta reguła w motywie ustawia na mobile (750px)
     WIĘKSZĄ wysokość niż na tablecie (500px) i desktopie (436px)
     — to odwrócona logika, najpewniej pomyłka przy ustawianiu
     responsywnej wysokości slajdu w Elementorze. Efekt: ogromna
     pusta przestrzeń NAD bannerem + treść (osobny obrazek
     "s3.png" 341×480, wyrównany do dołu: --wd-align-items:
     flex-end) "pływająca" nisko w za wysokim pudełku, a tło
     (zdjęcie sali) rozciągnięte na całą wysokość 750px — stąd
     wrażenie, że baner jest "rozjechany".
     Poniżej nadpisuję REALNIE WYGRYWAJĄCY selektor z motywu
     (po ID, więc na pewno wygra) ORAZ zostawiam selektor klasowy
     jako zabezpieczenie na wypadek, gdyby ID slidera się kiedyś
     zmieniło (np. po edycji strony w Elementorze). Przetestowane
     na żywo — wynik: brak pustej przestrzeni, tło i treść
     dopasowane, baner wygląda spójnie. */
  #slider-381 .wd-slide,
  .monitoryedu-hero .wd-slide.wd-carousel-item {
    min-height: 480px !important;
  }

  /* Sekcja "Dlaczego Monitory EDU?": kolumna z tekstem wstępnym
     (ok. 86px) i siatka 4 ikon (ok. 58px/kolumna) obok siebie —
     zamieniamy na układ jednokolumnowy, tekst nad siatką. */
  .monitoryedu-why {
    grid-template-columns: 1fr !important;
  }
  .monitoryedu-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sekcja "Co otrzymujesz w standardzie?": 4 kolumny po ~89px
     → obcięte słowa ("Dokumentacj[a]", "Zweryfik[owana]"). */
  .monitoryedu-standard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sekcja "Realizacje": karty ~74px szerokości, obcięte teksty
     ("Realizacj 01" zamiast "Realizacja 01"). */
  .monitoryedu-projects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sekcja "Usługi i wsparcie": 4 karty po ~74px — stłoczone. */
  .monitoryedu-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Baner "Nie wiesz, który monitor wybrać?": 3 kolumny
     (tekst/lista korzyści/przycisk) obok siebie — nagłówek
     łamał się pojedynczymi słowami w pionie. Całość na jedną
     kolumnę, a wewnętrzna lista korzyści (Profesjonalne
     doradztwo / Indywidualne wyceny / Dofinansowania i dotacje)
     też była 3-kolumnowym gridem — również prostujemy. */
  .monitoryedu-contact-cta {
    grid-template-columns: 1fr !important;
  }
  .monitoryedu-contact-cta-benefits {
    grid-template-columns: 1fr !important;
  }

  /* Panel polecanego produktu ("Polecany model"): rząd 4 ikon
     (Przekątna/EDLA/RAM/Wi-Fi) po ~62px — tekst się obcinał
     ("Szybka łącz" zamiast "Szybka łączność"). */
  .monitoryedu-featured-features {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Dodatkowa uwaga (nie CSS): w sekcji "Realizacje" treść kart
   ("Zdjęcie i opis uzupełnimy przed publikacją.") to najwyraźniej
   wciąż placeholder/lorem — po naprawieniu układu tekst jest już
   czytelny, ale warto podmienić go na prawdziwe opisy realizacji. */


/* ------------------------------------------------------------
   UWAGA — problemy spoza zakresu CSS (wymagają zmiany w panelu
   WordPress / ustawieniach motywu, a nie tylko stylów):

   a) Menu hamburgera na mobile (zakładka "MENU" w wysuwanym
      panelu) pokazuje angielskie, demonstracyjne pozycje
      (HOME, SHOP, BLOG, PORTFOLIO, ABOUT US, CONTACT US)
      zamiast prawdziwego menu strony (Strona główna, Monitory
      interaktywne, Monitory profesjonalne, Akcesoria, Systemy
      konferencyjne, Usługi, Realizacje, Kontakt).
      To nie jest problem stylów — w WordPressie w
      Wygląd → Menu → Lokalizacje motywu do lokalizacji
      "Mobile Menu" / "Off-canvas menu" przypięte jest złe menu
      (najprawdopodobniej domyślne demo motywu Woodmart).
      Zakładka "KATEGORIE" w tym samym panelu działa poprawnie.

   b) Ten sam problem może dotyczyć innych podstron — wszystkie
      powyższe elementy (header, stopka, cookie bar, karuzela
      "ostatnio oglądane") są komponentami globalnymi motywu,
      więc poprawki w tym pliku powinny naprawić je na całej
      witrynie, nie tylko na stronie tego produktu.
   ------------------------------------------------------------ */

/* =========================================================
   MONITORY EDU — STRONY INFORMACYJNE I USŁUGOWE
   2026-09-06 — wspólny system wizualny
   ========================================================= */

.medu-page {
    --medu-navy: #0B1F3A;
    --medu-text: #172033;
    --medu-muted: #667085;
    --medu-blue: #1268E8;
    --medu-blue-hover: #2478F0;
    --medu-soft: #F1F6FD;
    --medu-border: #E4E9F0;
    --medu-white: #FFFFFF;
    color: var(--medu-text);
    width: 100%;
}

.medu-page * {
    box-sizing: border-box;
}

.medu-page__inner {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}

.medu-page__hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 64px;
    background: linear-gradient(135deg, #F8FBFF 0%, #EEF5FF 62%, #E7F1FF 100%);
    border-bottom: 1px solid var(--medu-border);
}

.medu-page__hero::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    right: -170px;
    top: -220px;
    border: 2px solid rgba(18, 104, 232, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(18, 104, 232, .035), 0 0 0 86px rgba(18, 104, 232, .025);
}

.medu-page__hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 64px;
    align-items: center;
}

.medu-page__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(18, 104, 232, .10);
    color: var(--medu-blue);
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.medu-page h1,
.medu-page h2,
.medu-page h3 {
    color: var(--medu-navy);
}

.medu-page__hero h1 {
    max-width: 780px;
    margin: 0 0 18px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -.025em;
}

.medu-page__lead {
    max-width: 760px;
    margin: 0;
    color: var(--medu-muted);
    font-size: 17px;
    line-height: 1.75;
}

.medu-page__hero-card {
    position: relative;
    z-index: 1;
    padding: 24px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(18,104,232,.14);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(11,31,58,.08);
    backdrop-filter: blur(4px);
}

.medu-page__hero-card strong {
    display: block;
    margin-bottom: 12px;
    color: var(--medu-navy);
    font-size: 16px;
    line-height: 22px;
}

.medu-page__hero-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.medu-page__hero-card li {
    position: relative;
    padding: 8px 0 8px 24px;
    color: var(--medu-muted);
    font-size: 13px;
    line-height: 19px;
    border-top: 1px solid #EEF1F5;
}

.medu-page__hero-card li:first-child {
    border-top: 0;
}

.medu-page__hero-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--medu-blue);
    font-weight: 800;
}

.medu-page__section {
    padding: 64px 0;
}

.medu-page__section--soft {
    background: var(--medu-soft);
    border-block: 1px solid #E8EEF7;
}

.medu-page__section-head {
    max-width: 760px;
    margin-bottom: 30px;
}

.medu-page__section-head h2 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: -.015em;
}

.medu-page__section-head p {
    margin: 0;
    color: var(--medu-muted);
    font-size: 15px;
    line-height: 1.7;
}

.medu-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.medu-page__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.medu-page__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 26px;
    background: var(--medu-white);
    border: 1px solid var(--medu-border);
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.medu-page__card:hover {
    transform: translateY(-2px);
    border-color: #C9DAF6;
    box-shadow: 0 14px 34px rgba(11,31,58,.07);
}

.medu-page__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(18,104,232,.09);
    color: var(--medu-blue);
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
}

.medu-page__card h3 {
    margin: 0 0 9px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 720;
}

.medu-page__card p {
    margin: 0 0 14px;
    color: var(--medu-muted);
    font-size: 14px;
    line-height: 1.65;
}

.medu-page__card ul {
    margin: 2px 0 0;
    padding-left: 18px;
    color: var(--medu-muted);
    font-size: 13px;
    line-height: 1.65;
}

.medu-page__card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--medu-blue) !important;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    text-decoration: none !important;
}

.medu-page__card a:hover {
    color: var(--medu-blue-hover) !important;
}

.medu-page__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
    gap: 44px;
    align-items: start;
}

.medu-page__content h2 {
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 750;
}

.medu-page__content h3 {
    margin: 28px 0 8px;
    font-size: 19px;
    line-height: 1.3;
}

.medu-page__content p,
.medu-page__content li {
    color: var(--medu-muted);
    font-size: 15px;
    line-height: 1.75;
}

.medu-page__content p {
    margin: 0 0 16px;
}

.medu-page__content ul {
    margin: 0 0 20px;
    padding-left: 20px;
}

.medu-page__note {
    padding: 24px;
    background: #F8FAFD;
    border: 1px solid var(--medu-border);
    border-left: 4px solid var(--medu-blue);
    border-radius: 10px;
}

.medu-page__note strong {
    display: block;
    margin-bottom: 8px;
    color: var(--medu-navy);
    font-size: 15px;
}

.medu-page__note p {
    margin: 0;
    color: var(--medu-muted);
    font-size: 13px;
    line-height: 1.65;
}

.medu-page__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--medu-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.medu-page__step {
    position: relative;
    min-height: 180px;
    padding: 26px 24px;
    border-left: 1px solid var(--medu-border);
}

.medu-page__step:first-child {
    border-left: 0;
}

.medu-page__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--medu-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.medu-page__step h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
}

.medu-page__step p {
    margin: 0;
    color: var(--medu-muted);
    font-size: 13px;
    line-height: 1.6;
}

.medu-page__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 34px 38px;
    background: linear-gradient(110deg, #061C3A 0%, #082A59 58%, #0754C9 100%);
    border-radius: 14px;
    color: #fff;
}

.medu-page__cta h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 26px;
    line-height: 1.25;
}

.medu-page__cta p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.65;
}

.medu-page__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.medu-page__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 6px;
    background: var(--medu-blue);
    color: #fff !important;
    font-size: 12px;
    line-height: 16px;
    font-weight: 750;
    text-decoration: none !important;
    white-space: nowrap;
}

.medu-page__button:hover {
    background: var(--medu-blue-hover);
    color: #fff !important;
}

.medu-page__button--ghost {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.28);
}

.medu-page__button--ghost:hover {
    background: rgba(255,255,255,.14);
}

.medu-page__faq {
    display: grid;
    gap: 12px;
}

.medu-page__faq details {
    background: #fff;
    border: 1px solid var(--medu-border);
    border-radius: 10px;
    overflow: hidden;
}

.medu-page__faq summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 18px 52px 18px 20px;
    color: var(--medu-navy);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
}

.medu-page__faq summary::-webkit-details-marker {
    display: none;
}

.medu-page__faq summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--medu-blue);
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
}

.medu-page__faq details[open] summary::after {
    content: "−";
}

.medu-page__faq-answer {
    padding: 0 20px 20px;
    color: var(--medu-muted);
    font-size: 14px;
    line-height: 1.7;
}

.medu-page__faq-answer p {
    margin: 0 0 10px;
}

.medu-page__faq-answer p:last-child {
    margin-bottom: 0;
}

.medu-page__contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.medu-page__contact-card {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--medu-border);
    border-radius: 12px;
}

.medu-page__contact-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--medu-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

.medu-page__contact-card strong,
.medu-page__contact-card a {
    color: var(--medu-navy) !important;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 750;
    text-decoration: none !important;
}

.medu-page__contact-card p {
    margin: 10px 0 0;
    color: var(--medu-muted);
    font-size: 13px;
    line-height: 1.6;
}

.medu-page__shop-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--medu-border);
    border-radius: 12px;
}

.medu-page__shop-strip strong {
    display: block;
    margin-bottom: 4px;
    color: var(--medu-navy);
    font-size: 15px;
}

.medu-page__shop-strip span {
    color: var(--medu-muted);
    font-size: 13px;
    line-height: 1.55;
}

.medu-page__shop-strip a {
    flex: 0 0 auto;
    color: var(--medu-blue) !important;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none !important;
}

@media (max-width: 1024px) {
    .medu-page__hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .medu-page__hero-card {
        max-width: 640px;
    }

    .medu-page__grid,
    .medu-page__contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .medu-page__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .medu-page__step:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--medu-border);
    }

    .medu-page__step:nth-child(4) {
        border-top: 1px solid var(--medu-border);
    }

    .medu-page__split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .medu-page__inner {
        width: min(100% - 28px, 1240px);
    }

    .medu-page__hero {
        padding: 48px 0 44px;
    }

    .medu-page__hero h1 {
        font-size: 34px;
    }

    .medu-page__lead {
        font-size: 15px;
        line-height: 1.65;
    }

    .medu-page__section {
        padding: 46px 0;
    }

    .medu-page__section-head h2,
    .medu-page__content h2 {
        font-size: 25px;
    }

    .medu-page__grid,
    .medu-page__grid--2,
    .medu-page__contact-grid {
        grid-template-columns: 1fr;
    }

    .medu-page__steps {
        grid-template-columns: 1fr;
    }

    .medu-page__step,
    .medu-page__step:nth-child(3),
    .medu-page__step:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--medu-border);
    }

    .medu-page__step:first-child {
        border-top: 0;
    }

    .medu-page__cta {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .medu-page__buttons {
        justify-content: flex-start;
    }

    .medu-page__shop-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   HOMEPAGE — HERO MOBILNY 2026-09-06
   Osobna kompozycja mobile bez zmniejszania desktopowego banera.
   ========================================================= */

.monitoryedu-mobile-hero-native {
    display: none;
}

@media (min-width: 768px) {
    #slide-29812 .monitoryedu-mobile-hero-native {
        display: block !important;
    }
}

@media (min-width: 1025px) {
    #slide-29812 .wd-slide-container {
        --wd-align-items: center !important;
        --wd-justify-content: center !important;
    }

    #slide-29812 .wd-slide-inner {
        width: 100% !important;
        max-width: 1000px !important;
    }

    #slide-29812 .elementor-element-120f101 {
        min-height: 480px !important;
        padding: 34px 52px !important;
    }

    #slide-29812 .elementor-element-120f101 > .e-con-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
        align-items: center !important;
        gap: 18px !important;
        width: 100% !important;
        max-width: none !important;
    }

    #slide-29812 .elementor-element-meduhero,
    #slide-29812 .elementor-element-b64646f {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #slide-29812 .elementor-element-meduhero > .elementor-widget-container > div {
        padding: 0 !important;
    }

    #slide-29812 .elementor-element-b64646f {
        justify-self: end !important;
    }

    #slide-29812 .elementor-element-b64646f .wd-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    #slide-29812 .elementor-element-b64646f img {
        width: 118% !important;
        max-width: none !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: translateX(3%) !important;
    }
}

@media (max-width: 767px) {
    /* Na mobile nie renderujemy desktopowej grafiki-slajdu jako całości. */
    .monitoryedu-hero [data-id="b64646f"] {
        display: none !important;
    }

    #slider-381 .wd-slide,
    .monitoryedu-hero .wd-slide.wd-carousel-item {
        min-height: 570px !important;
        height: auto !important;
        background: #f8fbff !important;
    }

    .monitoryedu-hero .wd-slide-container,
    .monitoryedu-hero .wd-slide-inner,
    .monitoryedu-hero .e-con-inner {
        width: 100% !important;
        max-width: none !important;
        min-height: 570px !important;
        padding: 0 !important;
    }

    .monitoryedu-mobile-hero-native {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .monitoryedu-mobile-hero-card {
        position: relative;
        min-height: 570px;
        overflow: hidden;
        padding: 34px 24px 260px;
        background:
            linear-gradient(180deg, rgba(248,251,255,.98) 0%, rgba(248,251,255,.96) 47%, rgba(248,251,255,.20) 70%, rgba(248,251,255,0) 100%),
            url("https://monitoryedu.pl/wp-content/uploads/2026/08/s3.png") right bottom / auto 315px no-repeat,
            #f8fbff;
    }

    .monitoryedu-mobile-hero-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        background: linear-gradient(180deg, rgba(248,251,255,0), rgba(248,251,255,.92));
        pointer-events: none;
    }

    .monitoryedu-mobile-hero-copy {
        position: relative;
        z-index: 2;
        max-width: 340px;
    }

    .monitoryedu-mobile-hero-kicker {
        display: inline-flex;
        margin-bottom: 12px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(18,104,232,.10);
        color: #1268E8;
        font-size: 11px;
        line-height: 16px;
        font-weight: 700;
    }

    .monitoryedu-mobile-hero-copy h1 {
        margin: 0 0 14px;
        color: #0B1F3A;
        font-size: 31px;
        line-height: 1.08;
        font-weight: 750;
        letter-spacing: -.025em;
    }

    .monitoryedu-mobile-hero-copy h1 strong {
        display: block;
        color: #1268E8;
        font-weight: 750;
    }

    .monitoryedu-mobile-hero-copy p {
        margin: 0 0 18px;
        color: #475467;
        font-size: 14px;
        line-height: 1.55;
    }

    .monitoryedu-mobile-hero-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 5px;
        background: #1268E8;
        color: #fff !important;
        font-size: 11px;
        line-height: 16px;
        font-weight: 750;
        text-transform: uppercase;
        text-decoration: none !important;
    }

    .monitoryedu-mobile-hero-points {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 16px;
        color: #344054;
        font-size: 11px;
        line-height: 16px;
        font-weight: 600;
    }

    .monitoryedu-mobile-hero-points span {
        position: relative;
        padding-left: 18px;
    }

    .monitoryedu-mobile-hero-points span::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #1268E8;
        font-weight: 800;
    }

    /* Mniej pustej przestrzeni między hero i kolejną sekcją. */
    .home [data-id="b8d38ec"] {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   MONITORY EDU — VAT 0% CTA + popup
   ========================================================= */
.single-product .monitoryedu-vat-popup-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-height: 42px !important;
    margin: 12px 0 0 auto !important;
    padding: 0 18px !important;
    background: #1268E8 !important;
    border: 1px solid #1268E8 !important;
    border-radius: 5px !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: 0 5px 14px rgba(18,104,232,.18) !important;
}
.single-product .monitoryedu-vat-popup-trigger:hover {
    background: #0B5DDA !important;
    border-color: #0B5DDA !important;
    color: #FFFFFF !important;
}
.monitoryedu-vat-product {
    margin: 18px 0 22px;
    padding: 14px 16px;
    background: #F1F6FD;
    border: 1px solid #D6E5FA;
    border-left: 4px solid #1268E8;
    border-radius: 7px;
}
.monitoryedu-vat-product > span {
    display: block;
    margin-bottom: 4px;
    color: #667085;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.monitoryedu-vat-product strong {
    display: block;
    color: #0B1F3A;
    font-size: 16px;
    line-height: 22px;
    font-weight: 750;
}
.monitoryedu-vat-product small {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    line-height: 17px;
}
@media (max-width: 767px) {
    .single-product .monitoryedu-vat-popup-trigger {
        width: 100% !important;
        margin-left: 0 !important;
    }
}
/* MONITORY EDU — VAT OFFER BOX 2026-09-13 */
.single-product .monitoryedu-vat-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: #F8FBFF;
    border: 1px solid #DCE8F8;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .03);
}
.single-product .monitoryedu-vat-offer__copy {
    min-width: 0;
}
.single-product .monitoryedu-vat-offer__copy strong {
    display: block;
    margin: 0 0 4px;
    color: #0B1F3A;
    font-size: 14px;
    line-height: 19px;
    font-weight: 700;
}
.single-product .monitoryedu-vat-offer__copy span {
    display: block;
    color: #667085;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}
.single-product .monitoryedu-vat-offer__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.single-product .monitoryedu-vat-offer .monitoryedu-vat-popup-trigger {
    flex: 0 0 auto;
    margin: 0 !important;
    min-height: 40px !important;
    padding: 0 17px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(18, 104, 232, .14) !important;
}
@media (max-width: 767px) {
    .single-product .monitoryedu-vat-offer {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }
    .single-product .monitoryedu-vat-offer__action {
        justify-content: stretch;
    }
    .single-product .monitoryedu-vat-offer .monitoryedu-vat-popup-trigger {
        width: 100% !important;
    }
}

/* MONITORY EDU — GENERATED VAT 0% BOX 2026-09-21 */
.single-product .monitoryedu-vat-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 4px;
    width: 100%;
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: #F8FBFF;
    border: 1px solid #DCE8F8;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(11, 31, 58, .03);
}
.single-product .monitoryedu-vat-inline > strong {
    grid-column: 1;
    grid-row: 1;
    display: block;
    margin: 0;
    color: #0B1F3A;
    font-size: 14px;
    line-height: 19px;
    font-weight: 700;
}
.single-product .monitoryedu-vat-inline > p {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}
.single-product .monitoryedu-vat-inline > .monitoryedu-vat-popup-trigger {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    flex: 0 0 auto;
    margin: 0 !important;
    min-height: 40px !important;
    padding: 0 17px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(18, 104, 232, .14) !important;
}
@media (max-width: 767px) {
    .single-product .monitoryedu-vat-inline {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 4px;
        padding: 14px;
    }
    .single-product .monitoryedu-vat-inline > strong,
    .single-product .monitoryedu-vat-inline > p,
    .single-product .monitoryedu-vat-inline > .monitoryedu-vat-popup-trigger {
        grid-column: 1;
    }
    .single-product .monitoryedu-vat-inline > strong {
        grid-row: 1;
    }
    .single-product .monitoryedu-vat-inline > p {
        grid-row: 2;
    }
    .single-product .monitoryedu-vat-inline > .monitoryedu-vat-popup-trigger {
        grid-row: 3;
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* MONITORY EDU — compact VAT popup 2026-09-13 */
.monitoryedu-vat-popup {
    padding: 2px 0 0;
}
.monitoryedu-vat-popup h2 {
    margin: 0 0 8px !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-lead {
    margin: 0 0 12px !important;
    line-height: 1.45 !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-product {
    margin: 0 0 12px !important;
    padding: 10px 14px !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-form .row {
    margin-left: -7px !important;
    margin-right: -7px !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-form .row > [class*=\"col-\"] {
    padding-left: 7px !important;
    padding-right: 7px !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-form p {
    margin: 0 0 10px !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-form label {
    display: block;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-form input[type=\"text\"],
.monitoryedu-vat-popup .monitoryedu-vat-form input[type=\"tel\"],
.monitoryedu-vat-popup .monitoryedu-vat-form input[type=\"email\"] {
    min-height: 40px !important;
    height: 40px !important;
}
.monitoryedu-vat-popup .monitoryedu-vat-form textarea {
    min-height: 84px !important;
    height: 84px !important;
    resize: vertical;
}
.monitoryedu-vat-popup .monitoryedu-consent {
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.monitoryedu-vat-popup hr {
    margin: 10px 0 !important;
}
.monitoryedu-vat-popup hr + p {
    margin: 0 0 8px !important;
}
.monitoryedu-vat-popup hr + p + p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
}
.monitoryedu-vat-popup hr + p + p .btn {
    min-height: 38px !important;
    padding: 0 14px !important;
}
@media (max-width: 767px) {
    .monitoryedu-vat-popup h2 {
        font-size: 22px !important;
    }
    .monitoryedu-vat-popup .monitoryedu-vat-form textarea {
        min-height: 96px !important;
        height: 96px !important;
    }
}