/* ===================================================================
   Single Product — Szkolenie
   =================================================================== */

/* Dedicated print-only sheet (functions/print_sheet.php) — must stay
   hidden on screen. Lives here (loaded unconditionally) rather than in
   print.css, since that stylesheet is enqueued with media="print" and
   never applies on screen at all. */
.print-sheet {
    display: none;
}

/* ── Layout ─────────────────────────────────────────────────────── */

.sp-hero,
.sp-tabs,
.sp-related {
    width: 100%;
}

.sp-main {
    overflow-x: hidden;
}

.sp-page-content-bg {
    background: var(--wp--preset--color--neutral-50)
}

.sp-page-content {
    padding-top: 48px;
    padding-bottom: 80px;
}

.sp-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 1024px) {
    .sp-layout {
        grid-template-columns: 1fr;
    }

    .sp-sidebar {
        order: -1;
    }
}

/* ── Hero ───────────────────────────────────────────────────────── */

.sp-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--black);
}

.sp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sp-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.sp-hero__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 484px;
    max-height: 100%;
    background-image: url('../img/premium-hero-gradient.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 100%;
    pointer-events: none;
}

.sp-hero .container {
    position: relative;
    z-index: 1;
    padding-top: 24px;
    padding-bottom: 48px;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sp-hero__breadcrumb {
    padding: 16px 0 16px;
    overflow-x: auto;
    margin-bottom: 16px;
    scrollbar-width: none;
}

.sp-hero__breadcrumb::-webkit-scrollbar {
    display: none;
}

.sp-hero__breadcrumb .hl-bc-text {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Collapsed: chowamy tylko kategorie/podkategorie (inner),
   domek + Szkolenia (first-mid) + tytuł (page) zostają */
.sp-hero__breadcrumb .hl-bc-text.is-collapsed .hl-bc-item--first-mid {
    display: inline-flex;
    gap: 4px;
}

.sp-hero__breadcrumb .hl-bc-text.is-collapsed .hl-bc-item--inner {
    display: none;
}

.sp-hero__breadcrumb .hl-bc-text.is-collapsed .hl-bc-item--page {
    display: inline-flex;
}

.sp-hero__breadcrumb .hl-bc-text.is-collapsed .hl-bc-ellipsis {
    display: inline;
}

.sp-hero__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.sp-hero__content {
    flex: 1;
    min-width: 0;
}

.sp-hero__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sp-tag--glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--wp--preset--color--neutral-300);
    background: rgba(255, 255, 255, .1);
    color: var(--wp--preset--color--white);
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    text-decoration: none;
    backdrop-filter: blur(2px);
}

.sp-tag__dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sp-tag--hot .sp-tag__dot {
    background: var(--wp--preset--color--pink);
}

.sp-tag--new .sp-tag__dot {
    background: #8b5cf6;
}

.sp-hero__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--wp--preset--color--white);
    margin: 0 0 16px;
    max-width: 640px;
}

.sp-hero__excerpt {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: #e4e4ea;
    max-width: 640px;
    margin: 0 0 24px;
}

@media (max-width: 768px) {
    .sp-hero__title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .sp-hero {
        min-height: 294px;
    }

    .sp-hero__excerpt {
        display: none;
    }

    .sp-hero__cta-wrap--mobile {
        display: block;
        width: 100%;
    }

    .sp-hero__inner {
        flex-direction: column;
    }

    .sp-hero__content {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
}

.sp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.sp-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wp--preset--color--white);
    font-size: 14px;
}

.sp-hero__meta-item svg {
    flex-shrink: 0;
}

.sp-hero__cycle-link {
    color: var(--wp--preset--color--white);
    text-decoration: underline;
}

.sp-hero__cta-wrap--mobile {
    display: none;
}

@media (max-width:991px) {
    .sp-hero__cta-wrap--mobile {
        display: block;
    }
}

.sp-hero__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px;
}

.sp-hero__price-netto {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sp-hero__price-netto strong {
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    color: var(--wp--preset--color--white);
}

.sp-hero__price-netto del {
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
}

.sp-hero__price-netto span {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.65);
    line-height: 20px;
}

.sp-hero__price-brutto {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    line-height: 16px;
}

.sp-hero__price-brutto del {
    margin-right: 4px;
    text-decoration: line-through;
}

/* ── Buttons ────────────────────────────────────────────────────── */

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid;
    transition: background .2s, color .2s;
}

.sp-btn--hero {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
    background: transparent;
    white-space: nowrap;
}

.sp-btn--hero:hover {
    background: rgba(255, 255, 255, .15);
}

.sp-btn--dark {
    border-color: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--dark);
    background: transparent;
}

.sp-btn--dark:hover {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
}

.sp-btn--full {
    width: 100%;
}


/* ── Tabs ───────────────────────────────────────────────────────── */

.sp-tabs {
    position: sticky;
    top: var(--nav-height, 70px);
    z-index: 100;
    background: var(--wp--preset--color--white);
    border-top: 1px solid #e4e4ea;
    border-bottom: 1px solid #e4e4ea;
    transition: top 0.35s ease;
}

.sp-tabs__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
}

.sp-tabs__list {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}

.sp-tabs__list::-webkit-scrollbar {
    display: none;
}

.sp-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--dark);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: border-color .15s, font-weight .15s;
}

.sp-tab:hover {
    color: var(--wp--preset--color--black);
}

.sp-tab svg {
    max-width: 20px;
    height: auto;
    color: var(--wp--preset--color--neutral-300);
    transition: color .15s;
}

.sp-tab:hover svg,
.sp-tab.is-active svg {
    color: var(--wp--preset--color--black);
}

.sp-tab.is-active {
    border-bottom-color: var(--wp--preset--color--yellow);
    color: var(--wp--preset--color--black);
    font-weight: 400;
}

.sp-tabs__dl {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Panels ─────────────────────────────────────────────────────── */

.sp-panel {
    display: block;
}

.sp-panel--hidden {
    display: none;
}

/* ── Panel cards (tab content sections) ─────────────────────────── */

.sp-panel-card {
    background: var(--wp--preset--color--white);
    border: 1px solid #e4e4ea;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.sp-panel-card:last-child {
    margin-bottom: 0;
}

.sp-panel-card__title {
    font-size: 24px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1;
}

.sp-panel-card__lead {
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.5;
}

/* ── Wysiwyg content ────────────────────────────────────────────── */

.sp-wysiwyg {
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 1.6;
}

.sp-wysiwyg p {
    margin: 0 0 16px;
}

.sp-wysiwyg p:last-child {
    margin-bottom: 0;
}

.sp-wysiwyg ul,
.sp-wysiwyg ol {
    padding-left: 0;
    margin: 0 0 16px;
    list-style: none;
}

.sp-wysiwyg ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
}

.sp-wysiwyg ul li:last-child {
    margin-bottom: 0;
}

.sp-wysiwyg ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-color: var(--wp--preset--color--purple-500);
    mask-image: url('../images/check-circle.svg');
    mask-repeat: no-repeat;
    mask-size: 16px 16px;
    -webkit-mask-image: url('../images/check-circle.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
}

.sp-wysiwyg h2,
.sp-wysiwyg h3 {
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0 0 12px;
}

.sp-wysiwyg a {
    color: var(--wp--preset--color--purple-500);
    text-decoration: underline;
}

.sp-wysiwyg a:hover {
    text-decoration: none;
}

/* ── Media / Video / Gallery ─────────────────────────────────────── */

.sp-media {
    padding: 40px 0;
}

.sp-media__video {
    position: relative;
    margin-bottom: 12px;
}

.sp-media__video-link {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9;
    max-width: 640px;
}

.sp-media__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-media__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(26, 26, 37, .5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--white);
    transition: background .2s;
}

.sp-media__video-link:hover .sp-media__play-btn {
    background: rgba(26, 26, 37, .8);
}

.sp-media__caption {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--dark);
}

.sp-media__gallery {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 640px;
}

.sp-media__gallery::-webkit-scrollbar {
    display: none;
}

.sp-media__gal-item {
    flex-shrink: 0;
    width: 142px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .15s;
}

.sp-media__gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-media__gal-item--active {
    border-color: var(--wp--preset--color--yellow);
}

.sp-stepper {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    max-width: 640px;
}

.sp-stepper__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wp--preset--color--neutral-200);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s;
}

.sp-stepper__dot--active {
    background: var(--wp--preset--color--black);
    transform: scale(1.3);
}

/* ── Checklist (Dla kogo) ───────────────────────────────────────── */

.sp-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 1.5;
}

.sp-checklist__item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--wp--preset--color--purple-500);
    width: 16px;
    height: 16px;
}

.sp-info-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #faf8ff;
    border: 1px solid var(--wp--preset--color--purple-100);
    border-radius: 4px;
    padding: 16px;
    color: var(--wp--preset--color--purple-500);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.sp-info-box svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Cele i korzyści ────────────────────────────────────────────── */

.sp-goals__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .sp-goals__grid {
        grid-template-columns: 1fr;
    }
}

.sp-goal-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid #f3f4f6;
    border-radius: 4px;
    background: linear-gradient(140deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--neutral-100) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.sp-goal-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: rgba(139, 92, 246, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--purple-500);
    flex-shrink: 0;
}

.sp-goal-card__icon svg {
    width: 24px;
    height: 24px;
}

.sp-goal-card__title {
    font-size: 16px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.5;
}

.sp-goal-card__desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--neutral-300);
    margin: 0;
    line-height: 1.5;
}

/* ── Program accordion ──────────────────────────────────────────── */

.sp-program-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-program-item {
    background: var(--wp--preset--color--white);
    border: 1px solid #e4e4ea;
    border-radius: 16px;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}

.sp-program-item:hover {
    background: #faf8ff;
    border-color: var(--wp--preset--color--purple-100);
}

.sp-program-item.is-open {
    background: var(--wp--preset--color--white);
    border-color: #e4e4ea;
}

.sp-program-item__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--wp--preset--color--black);
}

.sp-program-item:hover .sp-program-item__title,
.sp-program-item.is-open .sp-program-item__title {
    text-decoration: underline;
}

.sp-program-item__num {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(139, 92, 246, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
}

.sp-program-item__title {
    flex: 1;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.33;
}

.sp-program-item__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform .25s;
    color: var(--wp--preset--color--dark);
}

.sp-program-item__chevron svg {
    width: 20px;
    height: 20px;
}

.sp-program-item.is-open .sp-program-item__chevron {
    transform: rotate(180deg);
}

.sp-program-item__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 24px;
    overflow: hidden;
    max-height: 0;
    border-top: 0px solid var(--wp--preset--color--purple-100);
    transition: max-height 0.35s ease, padding 0.35s ease, border-top-width 0.35s ease;
}

.sp-program-item.is-open .sp-program-item__body {
    max-height: 2000px;
    padding: 16px 24px 24px;
    border-top-width: 1px;
}

.sp-program-item__desc {
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 1.5;
}

.sp-program-item__trainers {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.sp-program-item__cta {
    align-self: flex-start;
}

.sp-program-trainer {
    display: flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.sp-program-trainer__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sp-program-trainer__avatar--placeholder {
    background: #e4e4ea;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-program-trainer__name {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0 0 2px;
}

.sp-program-trainer__role {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--dark);
    margin: 0;
}

/* ── Program: day tabs switcher (views 2 & 3) ──────────────────── */

.sp-prog-days-nav {
    display: flex;
    align-self: flex-start;
    margin-top: 8px;
}

.sp-prog-day-tab {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--neutral-200);
    color: var(--wp--preset--color--dark);
    cursor: pointer;
    position: relative;
    margin-right: -1px;
    z-index: 1;
    transition: background 0.15s, color 0.15s;
}

.sp-prog-day-tab:first-child {
    border-radius: 4px 0 0 4px;
}

.sp-prog-day-tab:last-child {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    .sp-prog-days-nav {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sp-prog-day-tab {
        flex: 1 1 calc(50% - 3px);
        margin-right: 0;
        border-radius: 4px !important;
    }
}

.sp-prog-day-tab.is-active {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--dark);
    z-index: 2;
}

.sp-prog-day {
    display: block;
}

.sp-prog-day--hidden {
    display: none;
}

/* ── Program: schedule rows (view 2) ───────────────────────────── */

.sp-prog-schedule {
    border: 1px solid #ececf0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 24px;
}

.sp-prog-schedule__header {
    background: #1a1a24;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: var(--wp--preset--color--white, #fff);
    font-size: 14px;
    font-weight: 600;
}

.sp-prog-schedule__row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 16px;
    background: var(--wp--preset--color--white);
    border-bottom: 1px solid #ececf0;
}

.sp-prog-schedule__row:last-child {
    border-bottom: none;
}

.sp-prog-schedule__time {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--wp--preset--color--black);
    white-space: normal;
    flex: 0 0 180px;
}

.sp-prog-schedule__row--break .sp-prog-schedule__time {
    font-weight: 400;
    color: var(--wp--preset--color--neutral-300);
}

.sp-prog-schedule__content {
    flex: 1;
    min-width: 0;
}

.sp-prog-schedule__title {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #2e2e38;
    margin: 0;
    letter-spacing: -0.08px;
}

.sp-prog-schedule__desc {
    font-size: 12px;
    font-weight: 300;
    line-height: 17.4px;
    color: #747480;
    margin: 4px 0 0;
    letter-spacing: -0.08px;
}

/* ── Galeria tab ────────────────────────────────────────────────── */

/* Featured video (left 60%) + list (right) */
.sp-gallery-video {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 8px;
}

.sp-gallery-video__main {
    flex: 0 0 calc(60% - 12px);
    min-width: 0;
}

/* Solo: no list → main video takes full width */
.sp-gallery-video--solo .sp-gallery-video__main {
    flex: none;
    width: 100%;
}

.sp-gallery-video__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}


/* Video thumbnail card (click-to-play) */
.sp-gallery-video-card {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wp--preset--color--black);
    cursor: pointer;
}

.sp-gallery-video-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.sp-gallery-video-card:hover .sp-gallery-video-card__thumb {
    transform: scale(1.03);
}

.sp-gallery-video-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 53%;
    background: linear-gradient(to top, rgba(26, 26, 37, 0.92) 0%, rgba(26, 26, 37, 0.55) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 24px 24px 40px;
    gap: 8px;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

.sp-gallery-video-card__dur {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--white);
}

.sp-gallery-video-card__bottom {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-gallery-video-card__title {
    flex: 1;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--wp--preset--color--white);
    margin: 0;
}

.sp-gallery-video-card__play {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(26, 26, 37, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inline iframe embed (hidden until play) */
.sp-gallery-embed--hidden {
    display: none;
}

.sp-gallery-video-card.is-playing .sp-gallery-embed--hidden {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.sp-gallery-video-card.is-playing .sp-gallery-video-card__overlay,
.sp-gallery-video-card.is-playing .sp-gallery-video-card__thumb {
    display: none;
}

.sp-gallery-embed--hidden iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* List item cards */
.sp-gallery-vitem {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid #e4e4ea;
    border-radius: 16px;
    background: var(--wp--preset--color--white);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    transition: box-shadow .2s;
}

.sp-gallery-vitem:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.sp-gallery-vitem__thumb {
    flex-shrink: 0;
    width: 108px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.sp-gallery-vitem__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-gallery-vitem__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}

.sp-gallery-vitem__title {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--wp--preset--color--black);
    margin: 0;
}

.sp-gallery-vitem__dur {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-300);
    margin: 0;
}

/* Video thumbnail list — plain scrollable column */
.sp-gallery-vid-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 100%;
    height: 100%;
}

@media (max-width:1430px) {
    .sp-gallery-video {
        flex-direction: column;
    }

    .sp-desc-video-text .sp-gallery-video-card__play path,
    .sp-desc-video-two .sp-gallery-video-card__play path {
        stroke: var(--wp--preset--color--purple-500);
    }
}

/* Hide "Eksploruj" label on desktop */
@media (min-width: 769px) {
    .sp-gallery-vid-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .sp-gallery-video {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .sp-gallery-video__main {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .sp-gallery-video__list {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .sp-gallery-vid-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--wp--preset--color--neutral-300);
        margin: 12px 0 8px;
    }

    /* Thumbnail list on mobile: horizontal scroll row */
    .sp-gallery-vid-list {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        gap: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .sp-gallery-vid-list::-webkit-scrollbar {
        display: none;
    }

    .sp-gallery-vitem {
        flex: 0 0 142px;
        display: block;
        border: 2px solid transparent;
        border-radius: 6px;
        padding: 0;
    }

    .sp-gallery-vitem.is-active {
        border-color: var(--wp--preset--color--yellow);
    }

    .sp-gallery-vitem__info {
        display: none;
    }

    .sp-gallery-vitem__thumb {
        width: 100%;
        border-radius: 4px;
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .sp-gallery-vitem__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* "Galeria z poprzednich edycji" heading */
.sp-gallery-photos__title {
    font-size: 24px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1;
}

.sp-gallery-grid-wrap {
    position: relative;
    max-width: 100%;
}

/* Photo gallery: desktop grid / mobile swiper toggle */
.sp-gallery-grid--desktop {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sp-gallery-grid--mobile {
    display: none;
    width: 100%;
    overflow: hidden;
}

.sp-gallery-grid-swiper {
    width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    .sp-gallery-grid--desktop {
        display: none;
    }

    .sp-gallery-grid--mobile {
        display: block;
    }
}

/* Mobile: pagination below slider */
@media (max-width: 768px) {
    .sp-gal-pagination {
        position: static !important;
        margin-top: 16px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 14px;
    }

    .sp-gal-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: var(--wp--preset--color--neutral-200);
        opacity: 1;
        margin: 0 !important;
        border-radius: 50%;
        transition: width .2s, height .2s, background .2s;
    }

    .sp-gal-pagination .swiper-pagination-bullet-active {
        width: 12px;
        height: 12px;
        background: var(--wp--preset--color--dark);
    }
}

.sp-gallery-grid__item {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 4px;
}

.sp-gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.sp-gallery-grid__item:hover img {
    transform: scale(1.03);
}

/* ── FAQ tab ────────────────────────────────────────────────────── */

.sp-faq {
    display: flex;
    flex-direction: column;
}

.sp-faq__item {
    border-bottom: 1px solid var(--wp--preset--color--purple-100);
}

.sp-faq__item:last-child {
    border-bottom: none;
}

.sp-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    cursor: pointer;
    line-height: 1.33;
}

.sp-faq__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform .25s;
    color: var(--wp--preset--color--black);
}

.sp-faq__icon svg {
    width: 24px;
    height: 24px;
}

.sp-faq__q[aria-expanded="true"] .sp-faq__icon {
    transform: rotate(180deg);
}

.sp-faq__a {
    overflow: hidden;
    max-height: 0;
    padding-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--dark);
    line-height: 1.6;
    transition: max-height 0.35s ease, padding-bottom 0.35s ease;
}

.sp-faq__a.is-open {
    max-height: 1200px;
    padding-bottom: 24px;
}

/* ── Trenerzy tab ───────────────────────────────────────────────── */

.sp-trainer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .sp-trainer-grid {
        grid-template-columns: 1fr;
    }
}

.sp-trainer-card {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: var(--wp--preset--color--white);
    border: 1px solid #e4e4ea;
    border-radius: 16px;
    box-shadow: 0 3px 1.5px rgba(0, 0, 0, .12);
    cursor: pointer;
}

.sp-trainer-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sp-trainer-card__avatar--placeholder {
    background: #e4e4ea;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-trainer-card__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
}

.sp-trainer-card__name {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.43;
}

.sp-trainer-card__role {
    font-size: 12px;
    font-weight: 700;
    color: var(--wp--preset--color--purple-500);
    margin: 0;
    line-height: 1;
}

/* Mobile sticky CTA — hidden by default (desktop), shown fixed at bottom on mobile */
.sp-mobile-cta {
    display: none;
}

@media (max-width: 768px) {
    .sp-mobile-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 300;
        background: var(--wp--preset--color--white);
        padding: 12px 20px max(12px, env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, .10);
    }
}

.sp-trainer-card__bio {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.43;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.sp-trainer-card__modules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-trainer-card__mod-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--wp--preset--color--purple);
    background: rgba(139, 92, 246, .05);
    border: 1px solid #e0d7f6;
    border-radius: 4px;
    padding: 4px 6px;
    line-height: 1;
}

/* ── Harmonogram (wysiwyg) ──────────────────────────────────────── */

.sp-program-content {
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 1.6;
}

.sp-program-content h2,
.sp-program-content h3 {
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0 0 12px;
}

.sp-program-content ul,
.sp-program-content ol {
    padding-left: 24px;
    margin: 0 0 16px;
}

/* ── Editions (sidebar) ─────────────────────────────────────────── */

.sp-editions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 16px;
}

.sp-edition {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e4e4ea;
    margin-bottom: 24px;
}

.sp-edition__header {
    background: var(--wp--preset--color--black);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-edition__label {
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--neutral-100);
    white-space: nowrap;
}

.sp-edition__date {
    font-size: 32px;
    font-weight: 400;
    color: var(--wp--preset--color--white);
    white-space: nowrap;
}

.sp-edition__date-prefix {
    font-size: 20px;
    font-weight: 300;
}

.sp-edition__body {
    background: var(--wp--preset--color--white);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-edition__package {
    border: 1px solid #e4e4ea;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.sp-edition__pkg-price {
    text-align: right;
    flex-shrink: 0;
}

.sp-edition__pkg-name {
    font-size: 16px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.5;
}

.sp-edition__pkg-modul {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--neutral-300);
    margin: 0;
}

.sp-edition__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--wp--preset--color--black);
}

.sp-edition__price-netto {
    font-size: 16px;
    font-weight: 400;
}

.sp-edition__price-label {
    font-size: 14px;
    font-weight: 300;
}

.sp-edition__price-brutto {
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: var(--Primary-Neutrals-500, #1A1A25);
    margin: 0;
}

/* ── Edition header extras (tags, notice, harmonogram) ──────────── */

.sp-edition__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-edition__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--wp--preset--color--yellow);
    color: var(--wp--preset--color--black);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 229, 0, .1);
}

.sp-edition__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.sp-edition__notice {
    font-size: 16px;
    font-weight: 300;
    color: var(--wp--preset--color--yellow);
}

.sp-edition__harmonogram-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
    text-decoration: none;
    white-space: nowrap;
}

.sp-edition__harmonogram-link:hover {
    text-decoration: underline;
    color: var(--wp--preset--color--white);
}

/* ── Package selector (szkolenie modułowe) ──────────────────────── */

.sp-pakiety__label {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--neutral-300);
    margin: 0;
    letter-spacing: .03em;
}

.sp-pakiet-card {
    border: 1px solid #e4e4ea;
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s, background .15s;
}

.sp-pakiet-card:hover {
    border-color: var(--wp--preset--color--black);
}

.sp-pakiet-card--active {
    border-color: var(--wp--preset--color--black);
    background: #faf8ff;
}

.sp-pakiet-card__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.sp-pakiet-card__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sp-pakiet-card__name {
    font-size: 16px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
}

.sp-pakiet-card__badge {
    display: inline-flex;
    align-items: center;
    background: rgba(139, 92, 246, .05);
    border: 1px solid #e0d7f6;
    color: var(--wp--preset--color--purple);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1;
}

.sp-pakiet-card__price {
    text-align: right;
    flex-shrink: 0;
}

.sp-pakiet-card__netto {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--wp--preset--color--black);
    justify-content: flex-end;
}

.sp-pakiet-card__netto span:first-child {
    font-size: 16px;
    font-weight: 400;
}

.sp-pakiet-card__netto-label {
    font-size: 14px;
    font-weight: 300;
}

.sp-pakiet-card__brutto {
    font-size: 12px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 16px;
}

.sp-pakiet-card__opis {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--neutral-300);
    margin: 0;
    line-height: 20px;
}

.sp-pakiet-card--display {
    cursor: default;
}

.sp-pakiet-card--display:hover {
    border-color: #e4e4ea;
    background: var(--wp--preset--color--white);
}

.sp-pakiet-card__name--wrap {
    white-space: normal;
    word-break: break-word;
}

.sp-pakiet-card__netto-del {
    font-size: 14px;
    font-weight: 300;
    color: #999;
    text-decoration: line-through;
}

.sp-pakiet-card__brutto del {
    margin-right: 4px;
    text-decoration: line-through;
}

/* ── Package alt row (lub + single module link) ─────────────────── */

.sp-pakiety__alt {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-pakiety__separator {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--wp--preset--color--neutral-300);
    font-size: 14px;
    font-weight: 300;
}

.sp-pakiety__separator::before,
.sp-pakiety__separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e4e4ea;
}

.sp-pakiety__moduly-wrap {
    display: flex;
    justify-content: center;
}

.sp-pakiet-card__date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--wp--preset--color--neutral-300);
    margin-top: 2px;
}

.sp-pakiet-card__date svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

.sp-pakiety__cta-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.sp-pakiety__moduly-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--purple);
    text-decoration: none;
    padding: 11px 16px;
}

.sp-pakiety__moduly-link:hover {
    text-decoration: underline;
    color: var(--wp--preset--color--purple);
}

.sp-financing {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #f3f4f6;
    border-radius: 4px;
    background: linear-gradient(165deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--neutral-100) 100%);
    font-size: 14px;
    color: var(--wp--preset--color--black);
}

.sp-financing__icon {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: rgba(139, 92, 246, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--purple-500);
    flex-shrink: 0;
}

.sp-financing p {
    margin: 0 0 4px;
    font-weight: 300;
}

.sp-financing a {
    font-weight: 400;
    color: var(--wp--preset--color--black);
    text-decoration: underline;
}

/* ── Sidebar boxes ───────────────────────────────────────────────── */

.sp-sidebar-box {
    background: var(--wp--preset--color--white);
    border: 1px solid #e4e4ea;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 16px;
}

.sp-sidebar-box__label {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--dark);
    margin: 0;
}

/* Toggle button — looks like label on desktop */
.sp-sidebar-box__toggle,
.sp-closed__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--dark);
    text-align: left;
}

.sp-sidebar-box__chevron {
    display: none;
    flex-shrink: 0;
    transition: transform .25s;
}

/* Desktop: body always visible */
.sp-sidebar-box__body {
    display: contents;
}

/* Mobile: collapsible */
@media (max-width: 768px) {
    .sp-sidebar-box {
        gap: 0;
        padding: 0;
    }

    .sp-sidebar-box__toggle,
    .sp-closed__toggle {
        cursor: pointer;
        padding: 16px 24px;
    }

    .sp-sidebar-box__chevron {
        display: block;
        color: var(--wp--preset--color--dark);
    }

    [aria-expanded="true"] .sp-sidebar-box__chevron,
    .sp-sidebar-box__toggle[aria-expanded="true"] .sp-sidebar-box__chevron,
    .sp-closed__toggle[aria-expanded="true"] .sp-sidebar-box__chevron {
        transform: rotate(180deg);
    }

    .sp-sidebar-box__body {
        display: none;
        padding: 0 24px 16px;
    }

    .sp-sidebar-box__body.is-open {
        display: block;
    }

    .sp-closed {
        padding: 16px 24px !important;
        gap: 0;
    }

    .sp-closed__toggle {
        width: 100%;
        padding: 0;
        gap: 12px;
    }

    .sp-closed .sp-sidebar-box__body {
        padding: 0;
    }
}

/* ── Sidebar materials ───────────────────────────────────────────── */

.sp-sidebar-materials {
    margin-top: 8px;
}

@media (min-width: 769px) {
    .sp-sidebar-materials {
        display: none;
    }
}

.sp-sidebar-materials__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-sidebar-materials__list a,
.sp-sidebar-materials__list button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    border-radius: 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background .15s;
}

.sp-sidebar-materials__list a:hover,
.sp-sidebar-materials__list button:hover {
    background: var(--wp--preset--color--neutral-100);
}

.sp-sidebar-materials__list svg {
    flex-shrink: 0;
    color: var(--wp--preset--color--dark);
}

/* ── Zamknięte szkolenie (card) ─────────────────────────────────── */

.sp-closed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid #ded0f1;
    border-radius: 16px;
    background: linear-gradient(162deg, var(--wp--preset--color--white) 34%, rgb(231, 212, 255) 100%);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .12);
    margin-bottom: 16px;
    overflow: hidden;
}

.sp-closed__top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-closed__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(139, 92, 246, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--purple-500);
    padding: 14px;
    box-sizing: border-box;
}

.sp-closed__text {
    flex: 1;
    font-size: 16px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.5;
}

.sp-closed__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* ── Related courses ────────────────────────────────────────────── */

.sp-related {
    background: var(--wp--preset--color--white);
    padding: 80px 0;
}

.sp-related__header {
    margin-bottom: 40px;
}

.sp-related__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wp--preset--color--purple-500);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
}

.sp-related__eyebrow svg {
    flex-shrink: 0;
}

.sp-related__title {
    font-size: 40px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
}

.sp-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .sp-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sp-related__grid {
        grid-template-columns: 1fr;
    }

    .sp-related__title {
        font-size: 28px;
    }
}

/* ── Sidebar sticky ─────────────────────────────────────────────── */

@media (min-width: 1025px) {
    .sp-sidebar {
        position: sticky;
        top: calc(var(--nav-height, 70px) + 60px);
    }
}

/* ── Empty state ────────────────────────────────────────────────── */

.sp-empty {
    padding: 40px 0;
    color: var(--wp--preset--color--neutral-300);
    font-size: 16px;
    font-weight: 300;
}

/* ── Related card ───────────────────────────────────────────────── */

.sp-rel-card {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wp--preset--color--white);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
    text-decoration: none;
    transition: box-shadow .2s;
}

.sp-rel-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}

.sp-rel-card__img {
    position: relative;
    aspect-ratio: 416 / 224;
    overflow: hidden;
    margin: 16px 16px 0;
    border-radius: 4px;
}

.sp-rel-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-rel-card__img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.sp-rel-card__cat {
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: 14px;
}

.sp-rel-card__body {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.sp-rel-card__badges {
    display: flex;
    gap: 8px;
    min-height: 22px;
}

.sp-rel-card__title {
    font-size: 20px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
    line-height: 1.2;
}

.sp-rel-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--neutral-300);
    max-width: 400px;
    height: auto;
}

.sp-rel-card__price {
    font-size: 20px;
    font-weight: 400;
    color: var(--wp--preset--color--dark);
    line-height: 1.4;
}

/* ── Primary button (yellow filled) ────────────────────────────── */

.sp-btn--primary {
    background: var(--wp--preset--color--yellow);
    border-color: var(--wp--preset--color--yellow);
    color: var(--wp--preset--color--black);
}

.sp-btn--primary:hover {
    background: #f0d800;
    border-color: #f0d800;
}

/* ── Tabs dropdown (materials) ──────────────────────────────────── */

.sp-tabs__dl-wrap {
    position: relative;
    flex-shrink: 0;
    z-index: 500;
}

.sp-tabs__dl-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--neutral-100);
    border-radius: 4px;
    z-index: 500;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.sp-tabs__dl-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sp-tabs__dl-menu a,
.sp-tabs__dl-menu button {
    display: block;
    width: 100%;
    padding: 8px;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    border-radius: 2px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}

.sp-tabs__dl-menu a:hover,
.sp-tabs__dl-menu button:hover {
    background: var(--wp--preset--color--neutral-100);
}

.sp-tabs__dl-chevron {
    transition: transform .2s;
}

.sp-tabs__dl[aria-expanded="true"] .sp-tabs__dl-chevron {
    transform: rotate(180deg);
}

/* ── Szczegóły szkolenia (sidebar accordion body) ───────────────── */

.sp-szczegoly {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-szczegoly__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.sp-szczegoly__icon {
    color: var(--wp--preset--color--neutral-300);
    flex-shrink: 0;
    margin-top: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: flex-start;
}

.sp-szczegoly__icon svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sp-szczegoly__content {
    flex: 1;
    min-width: 0;
}

.sp-szczegoly__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--neutral-300);
    margin: 0 0 8px;
    line-height: 1.43;
}

.sp-szczegoly__value {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0;
}

.sp-szczegoly__edition-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.sp-szczegoly__edition-row:first-of-type {
    margin-top: 0;
}

.sp-szczegoly__date+.sp-szczegoly__edition-row {
    margin-top: 12px;
}

.sp-szczegoly__edition-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
}

.sp-szczegoly__date {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--dark);
    margin: 0;
    width: 100%;
}

.sp-szczegoly__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
}

.sp-szczegoly__tag--gray {
    background: rgba(197, 197, 205, .05);
    color: var(--wp--preset--color--dark);
    border: 1px solid #e4e4ea;
}

.sp-szczegoly__tag--green {
    background: rgba(87, 233, 149, .05);
    color: #12a571;
    border: 1px solid #e1f3ed;
}

/* ── Contact persons (sidebar accordion body) ───────────────────── */

.sp-contacts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-contact-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sp-contact-person__info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sp-contact-person__info > div {
    min-width: 0;
}

.sp-contact-person__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sp-contact-person__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--purple-100);
}

.sp-contact-person__name {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    margin: 0 0 2px;
    overflow-wrap: break-word;
}

.sp-contact-person__role {
    font-size: 12px;
    font-weight: 300;
    color: var(--wp--preset--color--neutral-300);
    margin: 0;
}

.sp-contact-person__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sp-contact-person__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wp--preset--color--purple-500);
    color: var(--wp--preset--color--white);
    text-decoration: none;
    transition: background .15s;
}

.sp-contact-person__btn:hover {
    background: #350a72;
}

/* ── Related card meta row ──────────────────────────────────────── */

.sp-rel-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sp-rel-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--neutral-300);
}

/* ── Reviews ────────────────────────────────────────────────── */

.sp-rv-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 24px;
}

.sp-rv-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.sp-rv-score__avg {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: var(--wp--preset--color--black);
}

.sp-rv-score__max {
    font-size: 14px;
    color: var(--wp--preset--color--neutral-300);
    font-weight: 300;
}

.sp-rv-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-rv-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-rv-bar-label {
    font-size: 12px;
    color: var(--wp--preset--color--dark);
    width: 8px;
    flex-shrink: 0;
    text-align: right;
}

.sp-rv-bar-track {
    flex: 1;
    height: 8px;
    background: #e5e5eb;
    border-radius: 4px;
    overflow: hidden;
}

.sp-rv-bar-fill {
    height: 100%;
    background: #fbdd01;
    border-radius: 4px;
}

.sp-rv-bar-count {
    font-size: 12px;
    color: var(--wp--preset--color--neutral-300);
    width: 20px;
    flex-shrink: 0;
    text-align: right;
}

.sp-rv-recommend {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
}

.sp-rv-recommend__pct {
    font-size: 40px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    line-height: 1;
}

.sp-rv-recommend__label {
    font-size: 12px;
    color: var(--wp--preset--color--neutral-300);
    font-weight: 300;
    max-width: 80px;
    margin-top: 4px;
}

.sp-rv-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.sp-rv-card {
    border: 1px solid #f3f4f6;
    border-radius: 4px;
    padding: 20px 24px;
}

.sp-rv-card--hidden {
    display: none;
}

.sp-rv-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 16px;
}

.sp-rv-card__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    margin: 0 0 4px;
}

.sp-rv-card__role {
    font-size: 12px;
    color: var(--wp--preset--color--neutral-300);
    font-weight: 300;
    margin: 0;
}

.sp-rv-stars {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.sp-rv-card__text {
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--dark);
    margin: 0;
}

/* Premium reviews — dark notched testimonial cards (on wzór Figma "Co o nas
   mówią" 992-40396), swapped in only for is_premium courses. */

.sp-rv-list--premium {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.sp-rv-list--premium .swiper-wrapper {
    align-items: stretch;
}

.sp-rv-list--premium .swiper-slide {
    height: auto;
    display: flex;
}

.sp-rv-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.sp-rv-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--wp--preset--color--neutral-300);
    background: transparent;
    color: var(--wp--preset--color--dark);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sp-rv-nav-btn:hover {
    background: var(--wp--preset--color--dark);
    border-color: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-rv-nav-btn {
    border-color: rgba(255, 255, 255, .3);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-rv-nav-btn:hover {
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
}

.sp-rv-nav-btn.swiper-button-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

.sp-rv-card--premium {
    position: relative;
    width: 100%;
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-image: url('../img/premium-testimonial-bg.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 4px;
    box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .25);
}

.sp-rv-card--premium .sp-rv-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sp-rv-card--premium .sp-rv-card__quote {
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 1;
    color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-rv-stars--premium {
    margin-top: 12px;
    flex-shrink: 0;
}

.sp-rv-card--premium .sp-rv-card__text {
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 32px;
    color: var(--wp--preset--color--white);
}

.sp-rv-card--premium .sp-rv-card__name {
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
}

.sp-rv-card--premium .sp-rv-card__role {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    color: #C5C5CD;
}

.sp-rv-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.sp-rv-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 48px;
    border: 1px solid var(--wp--preset--color--dark);
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--dark);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sp-rv-more-btn:hover {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
}

/* ── CF7 modal forms (coordinator + brochure) ───────────────────── */

:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:is(#sp-coord-contact-modal, #sp-brochure-modal) .cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    :is(#sp-coord-contact-modal, #sp-brochure-modal) .cf7-row {
        grid-template-columns: 1fr;
    }
}

:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-response-output {
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    margin: 0 !important;
    border-width: 1px;
    border-style: solid;
}

:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-mail-sent-ok {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0 !important;
}

:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-validation-errors,
:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-spam-blocked,
:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-mail-sent-ng,
:is(#sp-coord-contact-modal, #sp-brochure-modal) .wpcf7-aborted {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca !important;
}

/* ── Video popup modal ──────────────────────────────────────── */

#sp-video-modal {
    align-items: center;
}

#sp-video-modal .aob-modal-inner {
    max-width: 900px;
    width: 90vw;
    padding: 0;
    background: #000;
    overflow: hidden;
    border-radius: 4px;
}

#sp-video-modal .aob-modal-close {
    position: absolute;
    top: -52px;
    right: 0;
    color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

#sp-video-modal .aob-modal-close:hover {
    color: var(--wp--preset--color--white);
    background: rgba(255, 255, 255, .15);
}

.sp-video-modal__embed {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.sp-video-modal__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Gallery lightbox ───────────────────────────────────────── */

.sp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.sp-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sp-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    cursor: zoom-out;
}

.sp-lightbox__img-wrap {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 1200px);
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    opacity: 1;
    transition: opacity .15s;
}

.sp-lightbox__img.is-loading {
    opacity: 0;
}

.sp-lightbox__close,
.sp-lightbox__nav {
    position: absolute;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: var(--wp--preset--color--white);
    cursor: pointer;
    transition: background .2s;
}

.sp-lightbox__close:hover,
.sp-lightbox__nav:hover {
    background: rgba(255, 255, 255, .25);
}

.sp-lightbox__close {
    top: 16px;
    right: 16px;
}

.sp-lightbox__nav--prev {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.sp-lightbox__nav--next {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.sp-lightbox__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    font-weight: 300;
    z-index: 2;
    white-space: nowrap;
}

/* ── Opis tab — video layouts ───────────────────────────────────── */

/* Layout 2: video 100% — reuses sp-gallery-video-card, just needs aspect ratio */
#tab-opis .sp-gallery-video-card {
    aspect-ratio: 16/9;
}

/* Layout 4: 2 video 50%+50% */
.sp-desc-video-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sp-desc-video-two .sp-gallery-video-card {
    aspect-ratio: 16/9;
}

/* Below 1430px: overlay moves under thumbnail — white bg, dark text */
@media (max-width: 1430px) {
    .sp-desc-video-two .sp-gallery-video-card {
        aspect-ratio: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .sp-desc-video-two .sp-gallery-video-card__thumb {
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
        flex-shrink: 0;
        border-radius: 4px 4px 0 0;
        clip-path: inset(0 0 0 0 round 4px 4px 0 0);
    }

    .sp-desc-video-two .sp-gallery-video-card__overlay {
        position: static;
        background: var(--wp--preset--color--white);
        min-height: auto;
        border-radius: 0 0 4px 4px;
        padding: 12px 16px 16px;
        border: 1px solid #e4e4ea;
        border-top: none;
    }

    .sp-desc-video-two .sp-gallery-video-card__dur,
    .sp-desc-video-two .sp-gallery-video-card__title {
        color: var(--wp--preset--color--black);
    }

    .sp-desc-video-two .sp-gallery-video-card__play {
        background: rgba(26, 26, 37, 0.08);
    }

    /* Playing: iframe covers just the video (thumb) area */
    .sp-desc-video-two .sp-gallery-video-card.is-playing .sp-gallery-embed--hidden {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: auto;
        aspect-ratio: 16/9;
    }

    /* sp-desc-video-text: overlay below thumbnail — same treatment */
    .sp-desc-video-text .sp-gallery-video-card {
        aspect-ratio: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .sp-desc-video-text .sp-gallery-video-card__thumb {
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
        flex-shrink: 0;
        border-radius: 4px 4px 0 0;
        clip-path: inset(0 0 0 0 round 4px 4px 0 0);
    }

    .sp-desc-video-text .sp-gallery-video-card__overlay {
        position: static;
        background: var(--wp--preset--color--white);
        min-height: auto;
        border-radius: 0 0 4px 4px;
        padding: 12px 16px 16px;
        border: 1px solid #e4e4ea;
        border-top: none;
    }

    .sp-desc-video-text .sp-gallery-video-card__dur,
    .sp-desc-video-text .sp-gallery-video-card__title {
        color: var(--wp--preset--color--black);
    }

    .sp-desc-video-text .sp-gallery-video-card__play {
        background: rgba(26, 26, 37, 0.08);
    }
}

@media (max-width: 768px) {
    .sp-desc-video-two {
        grid-template-columns: 1fr;
    }
}

/* Layout 5: video + tekst */
.sp-desc-video-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

.sp-desc-video-text--reversed .sp-desc-video-text__video {
    order: 2;
}

.sp-desc-video-text--reversed .sp-desc-video-text__text {
    order: 1;
}

.sp-desc-video-text__video .sp-gallery-video-card {
    aspect-ratio: 16/9;
}

.sp-desc-video-text__text {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
}

@media (max-width: 768px) {
    .sp-desc-video-text {
        grid-template-columns: 1fr;
    }

    .sp-desc-video-text--reversed .sp-desc-video-text__video,
    .sp-desc-video-text--reversed .sp-desc-video-text__text {
        order: unset;
    }
}

/* Layout 8: obrazek + tekst */
.sp-desc-img-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
}

.sp-desc-img-text--reversed .sp-desc-img-text__img {
    order: 2;
}

.sp-desc-img-text--reversed .sp-desc-img-text__text {
    order: 1;
}

.sp-desc-img-text__img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}

.sp-desc-img-text__text {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    color: var(--wp--preset--color--dark);
}

/* Layout 9: 2 obrazki 50%+50% */
.sp-desc-img-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sp-desc-img-two img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}

/* Layout 10: 2 kolumny tekstu */
.sp-desc-text-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 768px) {

    .sp-desc-img-text,
    .sp-desc-img-two,
    .sp-desc-text-two {
        grid-template-columns: 1fr;
    }

    .sp-desc-img-text--reversed .sp-desc-img-text__img,
    .sp-desc-img-text--reversed .sp-desc-img-text__text {
        order: unset;
    }
}

/* ── Mobile styles (≤ 768px) ────────────────────────────────────── */

@media (max-width: 768px) {

    /* Tabs: hide download button from sticky nav on mobile */
    .sp-tabs__dl-wrap {
        display: none;
    }

    /* Sidebar: on phone JS moves it into #tab-opis after the first block.
       This order:0 is a fallback in case JS hasn't run yet. */
    .sp-sidebar {
        order: 0;
    }

    /* Panel cards: tighter padding */
    .sp-panel-card {
        padding: 24px 16px;
        border: 0;
    }

    /* Program tab: smaller badge + font sizes */
    .sp-program-item__head {
        gap: 12px;
        padding: 16px 20px;
    }

    .sp-program-item__num {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .sp-program-item__title {
        font-size: 16px;
    }

    .sp-program-item__body {
        padding: 0 20px;
    }

    .sp-program-item.is-open .sp-program-item__body {
        padding: 16px 20px 20px;
    }

    /* Opinie tab: card styling per Figma */
    .sp-rv-card {
        border-color: #ececf0;
        border-radius: 10px;
        padding: 20px 21px;
    }

    .sp-rv-summary {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .sp-rv-score,
    .sp-rv-recommend {
        align-self: center;
    }

    .sp-rv-bars {
        width: 100%;
    }

    .sp-page-content {
        padding-bottom: 80px;
    }
}

body.single-product main {
    line-height: 0;
}

body.single-product main * {
    line-height: 1.5;
}

/* ── Harmonogram (szkolenie modułowe) ──────────────────────────────── */

.sp-harmonogram .sp-harm-edition-nav {
    display: flex;
    align-self: flex-start;
    margin-bottom: 8px;
}

.sp-harm-edition-btn {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--neutral-200);
    color: var(--wp--preset--color--dark);
    cursor: pointer;
    position: relative;
    margin-right: -1px;
    z-index: 1;
    transition: background 0.15s, color 0.15s;
}

.sp-harm-edition-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.sp-harm-edition-btn:last-child {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
}

.sp-harm-edition-btn.is-active {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--dark);
    z-index: 2;
}

.sp-harm-edition--hidden {
    display: none;
}

/* ── Module rows ─────────────────────────────────────────────────── */

.sp-harm-list {
    display: flex;
    flex-direction: column;
}

.sp-harm-row {
    display: grid;
    grid-template-columns: 1fr 200px 180px;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #e4e4ea;
}

/* Col 1: badge + module name */
.sp-harm-row__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sp-harm-row__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    line-height: 20px;
}

.sp-harm-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-harm-row__label {
    font-size: 12px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 16px;
}

.sp-harm-row__name {
    font-size: 16px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    line-height: 24px;
}

/* Col 2: date column wrapper (stacks date + "Brak miejsc" vertically) */
.sp-harm-row__date-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Col 2: date */
.sp-harm-row__date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 20px;
    white-space: nowrap;
}

.sp-harm-row__date--past,
.sp-harm-row__date--strike {
    text-decoration: line-through;
    color: var(--wp--preset--color--neutral-300);
}

.sp-harm-check {
    flex-shrink: 0;
}

/* Col 3: status */
.sp-harm-row__status {
    display: flex;
    align-items: center;
}

.sp-harm-row__no-slots {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
    line-height: 20px;
    margin: 0;
}

/* Ostatnie miejsca badge */
.sp-harm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--wp--preset--color--yellow);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wp--preset--color--dark);
    line-height: 1;
    white-space: nowrap;
}

/* ── Footnote & info boxes ───────────────────────────────────────── */

.sp-harm-footnote {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--black);
    line-height: 20px;
    margin: 0;
}

.sp-harm-info-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #faf8ff;
    border: 1px solid var(--wp--preset--color--purple-100);
    border-radius: 4px;
    padding: 16px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--purple-500);
    line-height: 20px;
}

.sp-harm-info-box svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--wp--preset--color--purple-500);
}

.sp-harm-info-box p {
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .sp-harm-row {
        grid-template-columns: 1fr 160px 160px;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .sp-harm-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    .sp-harm-row__left {
        grid-column: 1 / -1;
    }
}

/* ── Dark mode ──────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .sp-page-content-bg {
    background-color: #1A1A25;
}

/* Decorative glow SVG — premium szkolenia only (see .sp-page-content-bg--premium,
   set in content-single-product-szkolenie.php only when $is_premium is true). */
html[data-theme="dark"] .sp-page-content-bg--premium {
    background-image: url('../img/premium-bg-dark.svg');
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    html[data-theme="dark"] .sp-page-content-bg--premium {
        background-size: 768px auto;
        background-repeat: repeat-y;
    }
}

/* Hero */
html[data-theme="dark"] .sp-hero {
    background-color: var(--wp--preset--color--black, #1A1A25);
}

html[data-theme="dark"] .sp-hero__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-hero__excerpt {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-hero__meta-item {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-hero__meta-item svg path {
    stroke: rgba(255, 255, 255, 0.5);
}

/* Breadcrumb */
html[data-theme="dark"] .hl-bc-home-label,
html[data-theme="dark"] .hl-bc-item,
html[data-theme="dark"] .hl-bc-sep,
html[data-theme="dark"] .hl-bc-ellipsis {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .hl-bc-dyn {
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .hl-bc-home-icon svg path,
html[data-theme="dark"] .hl-bc-home-icon svg {
    stroke: rgba(255, 255, 255, 0.6);
}

/* Tags / badges */
html[data-theme="dark"] .sp-tag--glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-tag--new {
    background: rgba(255, 229, 0, 0.16);
    border-color: rgba(255, 229, 0, 0.4);
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* Tabs — always rendered like light theme, in both themes (per user instruction) */

/* Page background behind panels — NOT on premium courses: there the panel
   must stay transparent so .sp-page-content-bg's glow background (see
   html[data-theme="dark"] .sp-page-content-bg) shows through, per Figma. */
html[data-theme="dark"] .sp-layout:not(.sp-layout--no-sidebar) .sp-panel,
html[data-theme="dark"] .sp-layout:not(.sp-layout--no-sidebar) .sp-sidebar {
    background-color: var(--wp--preset--color--black, #1A1A25);
}

html[data-theme="dark"] .sp-panel-card {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-panel-card__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-panel-card__body,
html[data-theme="dark"] .sp-panel-card__body p,
html[data-theme="dark"] .sp-panel-card__body li {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-panel-card__body h1,
html[data-theme="dark"] .sp-panel-card__body h2,
html[data-theme="dark"] .sp-panel-card__body h3,
html[data-theme="dark"] .sp-panel-card__body h4 {
    color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .sp-info-box {
    background: rgba(255, 229, 0, 0.1);
    border-color: rgba(255, 229, 0, 0.35);
    color: rgba(255, 255, 255, 0.75);
}

/* Goals grid */
html[data-theme="dark"] .sp-goal-card {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-goal-card__icon {
    background: rgba(255, 229, 0, 0.16);
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-goal-card__icon svg path,
html[data-theme="dark"] .sp-goal-card__icon svg {
    stroke: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-goal-card__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-goal-card__desc {
    color: rgba(255, 255, 255, 0.6);
}

/* Program / agenda */
html[data-theme="dark"] .sp-program-item {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-program-item__num {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-program-item__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-program-item__chevron svg path,
html[data-theme="dark"] .sp-program-item__chevron svg {
    stroke: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-program-item__desc {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-prog-days-nav {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-prog-day-tab {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-prog-day-tab.is-active {
    color: var(--wp--preset--color--yellow, #FFE500);
    border-bottom-color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-prog-schedule__row {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-prog-schedule__time {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-prog-schedule__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-program-trainer__name {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-program-trainer__role {
    color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .sp-program-trainer__avatar--placeholder {
    background: rgba(255, 255, 255, 0.08);
}

/* Trainer cards */
html[data-theme="dark"] .sp-trainer-card {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-trainer-card__avatar--placeholder {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sp-trainer-card__avatar--placeholder svg path,
html[data-theme="dark"] .sp-trainer-card__avatar--placeholder svg {
    stroke: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-trainer-card__name {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-trainer-card__role {
    color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .sp-trainer-card__bio {
    color: rgba(255, 255, 255, 0.6);
}

/* Gallery / video */
html[data-theme="dark"] .sp-gallery-video-card__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-gallery-video-card__dur {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-gallery-vid-label {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-gallery-vitem {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-gallery-vitem__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-gallery-vitem__dur {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-gallery-grid__item {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-gal-pagination span {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .sp-gal-pagination span.is-active {
    background: var(--wp--preset--color--white);
}

/* Harmonogram (schedule tab) */
html[data-theme="dark"] .sp-harmonogram {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-harm-edition-nav {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-harm-edition-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-harm-edition-btn.is-active {
    background: var(--wp--preset--color--yellow, #FFE500);
    border-color: var(--wp--preset--color--yellow, #FFE500);
    color: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-harm-row {
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-harm-row__num {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-harm-row__label,
html[data-theme="dark"] .sp-harm-row__name {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-harm-row__date {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-harm-row__date--strike {
    color: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .sp-harm-row__no-slots {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-harm-tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-harm-check circle,
html[data-theme="dark"] .sp-harm-check path[fill="var(--wp--preset--color--purple-500)"] {
    fill: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-harm-check path[stroke="var(--wp--preset--color--white)"] {
    stroke: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-harm-footnote {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-harm-info-box {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .sp-harm-info-box svg {
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* FAQ */
html[data-theme="dark"] .sp-faq__item {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-faq__q {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-faq__icon svg path,
html[data-theme="dark"] .sp-faq__icon svg {
    stroke: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-faq__a {
    color: rgba(255, 255, 255, 0.6);
}

/* Reviews */
html[data-theme="dark"] .sp-rv-summary {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-rv-score__avg {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-rv-score__max {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-rv-bar-row__label {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-rv-bar-row__track {
    background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-rv-bar-row__fill {
    background: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-rv-bar-row__count {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-rv-recommend {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-rv-recommend__pct {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-rv-recommend__label {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-rv-card:not(.sp-rv-card--premium) {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-rv-card__name {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-rv-card__role {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-rv-card__text {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-rv-more-btn {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
    background: transparent;
}

html[data-theme="dark"] .sp-rv-more-btn:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark, #2E2E39);
}

/* Editions / package picker (sidebar) */
html[data-theme="dark"] .sp-edition {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-edition__header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-edition__body {
    background: var(--wp--preset--color--dark, #2E2E39);
}

/* Rich text (wysiwyg) */
html[data-theme="dark"] .sp-wysiwyg {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .sp-wysiwyg h2,
html[data-theme="dark"] .sp-wysiwyg h3 {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-wysiwyg a {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-wysiwyg ul li::before {
    background-color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-edition__label {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-edition__date {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-edition__notice {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-edition__harmonogram-link {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-edition__tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-edition__package,
html[data-theme="dark"] .sp-edition__pkg-name {
    color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .sp-edition__pkg-modul {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-edition__pkg-price,
html[data-theme="dark"] .sp-edition__price {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-edition__price-netto {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-edition__price-label {
    color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .sp-edition__price-brutto {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-pakiety__label {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-pakiety__separator {
    color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .sp-pakiety__moduly-link {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-pakiet-card {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-pakiet-card--active {
    border-color: var(--wp--preset--color--yellow, #FFE500);
    background: rgba(255, 229, 0, 0.08);
}

html[data-theme="dark"] .sp-pakiet-card__name {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-pakiet-card__badge {
    background: rgba(255, 229, 0, 0.16);
    border-color: rgba(255, 229, 0, 0.4);
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-pakiet-card__price {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-pakiet-card__netto {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-pakiet-card__netto-del {
    color: rgba(255, 255, 255, 0.35);
}

html[data-theme="dark"] .sp-pakiet-card__netto-label {
    color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .sp-pakiet-card__brutto {
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-pakiet-card__date {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-pakiet-card__opis {
    color: rgba(255, 255, 255, 0.6);
}

/* Financing */
html[data-theme="dark"] .sp-financing {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sp-financing__icon svg path,
html[data-theme="dark"] .sp-financing__icon svg {
    stroke: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-financing a {
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* Sidebar boxes / accordions */
html[data-theme="dark"] .sp-sidebar-box {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-sidebar-box__toggle {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-sidebar-box__label {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-sidebar-box__chevron {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-sidebar-box__body {
    color: rgba(255, 255, 255, 0.6);
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Sidebar materials */
html[data-theme="dark"] .sp-sidebar-materials__list a,
html[data-theme="dark"] .sp-sidebar-materials__list button {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .sp-sidebar-materials__list a:hover,
html[data-theme="dark"] .sp-sidebar-materials__list button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-sidebar-materials__list svg {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-sidebar-materials__list a:hover svg,
html[data-theme="dark"] .sp-sidebar-materials__list button:hover svg {
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* Szczegóły szkolenia */
html[data-theme="dark"] .sp-szczegoly__row {
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-szczegoly__icon svg path,
html[data-theme="dark"] .sp-szczegoly__icon svg {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-szczegoly__label {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-szczegoly__value {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-szczegoly__date {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-szczegoly__tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-szczegoly__tag--green {
    background: rgba(9, 130, 87, 0.18);
    border-color: rgba(9, 130, 87, 0.45);
    color: #4ade80;
}

/* Contact persons */
html[data-theme="dark"] .sp-contact-person {
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-contact-person__avatar--placeholder {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sp-contact-person__avatar--placeholder svg path {
    stroke: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .sp-contact-person__name {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-contact-person__role {
    color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .sp-contact-person__btn {
    background: var(--wp--preset--color--yellow, #FFE500);
    color: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-contact-person__btn:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark, #2E2E39);
}

/* Closed course card */
html[data-theme="dark"] .sp-closed {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-closed__toggle {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-closed__icon {
    background: rgba(255, 229, 0, 0.16);
}

html[data-theme="dark"] .sp-closed__icon svg path,
html[data-theme="dark"] .sp-closed__icon svg {
    stroke: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-closed__text {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sp-closed__contact {
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* Related courses */
html[data-theme="dark"] .courses-related {
    background-color: var(--wp--preset--color--black, #1A1A25);
}

html[data-theme="dark"] .sec-headline {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .sec-title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sec-headline-icon svg path,
html[data-theme="dark"] .sec-headline-icon svg {
    stroke: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .cr-card {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .cr-card-title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .cr-tag {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .cr-tag--pink {
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.35);
    color: var(--wp--preset--color--pink);
}

html[data-theme="dark"] .cr-tag--purple {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #8b92f6;
}

html[data-theme="dark"] .cr-card-date,
html[data-theme="dark"] .cr-card-days,
html[data-theme="dark"] .cr-card-loc {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .cr-card-price {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .cr-pagination span {
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .cr-pagination span.is-active,
html[data-theme="dark"] .cr-pagination .is-active {
    background: var(--wp--preset--color--white);
}

/* Mobile sticky CTA bar */
html[data-theme="dark"] .sp-mobile-cta {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Primary yellow button stays consistent; ensure any outline buttons invert */
html[data-theme="dark"] .sp-btn--outline {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
    background: transparent;
}

html[data-theme="dark"] .sp-btn--outline:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark, #2E2E39);
}

/* Modal forms (coordinator / brochure / video) */
html[data-theme="dark"] .aob-modal-inner {
    background: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .aob-modal-title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .aob-modal-subtitle {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .aob-modal-close svg path,
html[data-theme="dark"] .aob-modal-close svg {
    stroke: rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .aob-modal-body input,
html[data-theme="dark"] .aob-modal-body textarea,
html[data-theme="dark"] .aob-modal-body select {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    /* color: var(--wp--preset--color--white); */
}

html[data-theme="dark"] .aob-modal-body label {
    color: rgba(255, 255, 255, 0.7);
}

/* Hardcoded inline-SVG color overrides (literal hex attrs in markup) */
html[data-theme="dark"] .sp-trainer-card__avatar--placeholder svg path[stroke="var(--wp--preset--color--purple-500)"] {
    stroke: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-rv-stars svg path[fill="#e5e5eb"] {
    fill: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-rv-stars svg path[fill="#fbdd01"] {
    fill: var(--wp--preset--color--yellow, #FFE500);
}

/* ===================================================================
   PRINT — single szkolenie/konferencja/studies
   Global chrome (header/footer) is hidden in style.css. This turns the
   page into a compact course brochure: title, then key facts (price /
   dates / financing) right underneath, then every tab's content
   flowing as one tidy document — normal visibility is JS-driven, so
   it's all forced open here.
   =================================================================== */
@media print {

    @page {
        margin: 16mm 14mm;
    }

    body {
        font-size: 12px;
        line-height: 1.4;
    }

    .sp-wysiwyg,
    .sp-program-item__desc,
    .sp-program-content,
    .sp-checklist__item,
    .sp-goal-card__desc,
    .sp-trainer-card__bio {
        font-size: 12px;
    }

    /* ── Chrome / interactive UI not useful on paper ────────────────── */
    .sp-tabs,
    .sp-tabs__dl-wrap,
    .sp-sidebar-materials,
    .sp-hero__cta-wrap,
    .sp-mobile-cta,
    .sp-related,
    .courses-related,
    .sp-btn,
    [data-modal-open],
    .sp-program-item__chevron,
    .sp-faq__icon,
    .sp-rv-more-wrap,
    .sp-sidebar-box__chevron,
    .hl-bc-ellipsis,
    .hl-bc-dyn,
    /* Videos and gallery: not useful on paper */
    .sp-media,
    .sp-gallery-video,
    .sp-gallery-video-card,
    .sp-desc-video-two,
    .sp-desc-video-text,
    #tab-galeria {
        display: none !important;
    }

    /* ── Hero: compact title block, no photo/breadcrumb/badges ───────── */
    .sp-hero__bg,
    .sp-hero__overlay,
    .sp-hero__gradient,
    .sp-hero__breadcrumb,
    .sp-hero__top {
        display: none !important;
    }

    .sp-hero {
        min-height: 0;
        background: var(--wp--preset--color--white) !important;
    }

    .sp-hero .container {
        padding: 0 0 12px;
    }

    .sp-hero__inner {
        align-items: flex-start;
    }

    .sp-hero__title {
        color: #000 !important;
        font-size: 26px;
        max-width: none;
        margin: 0 0 8px;
    }

    .sp-hero__excerpt {
        color: #000 !important;
        font-size: 12px;
        max-width: none;
        margin: 0 0 8px;
    }

    .sp-hero__meta {
        gap: 8px 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #000;
    }

    .sp-hero__meta-item,
    .sp-hero__cycle-link {
        color: #000 !important;
        font-size: 11px;
    }

    /* ── Reading order: key facts (price/dates/financing) right after the title ── */
    .sp-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .sp-sidebar {
        order: -1;
        position: static !important;
    }

    .sp-sidebar-box__body {
        display: block !important;
    }

    #sp-tabs,
    .sp-tabs {
        position: static;
    }

    /* ── Force every tab panel to print, regardless of JS active state ── */
    .sp-panel,
    .sp-panel--hidden,
    .sp-prog-day,
    .sp-prog-day--hidden,
    .sp-harm-edition,
    .sp-harm-edition--hidden {
        display: block !important;
    }

    /* Every tab starts on its own fresh page — tab buttons are hidden,
       so a page break is the only thing separating one section from
       the next. Most tabs already render their own title as the first
       thing inside (h2.sp-panel-card__title), so no extra heading is
       added here — that would just duplicate it. */
    .sp-panel {
        break-before: page;
        margin-top: 0;
    }

    .sp-panel:first-child {
        break-before: avoid;
    }

    /* Opis has no such built-in title (its content is a mix of ACF
       blocks), so it gets a print-only heading built from its own
       (editable) tab label. */
    .sp-panel[data-print-label]::before {
        content: attr(data-print-label);
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #000;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding-bottom: 6px;
        margin-bottom: 12px;
        border-bottom: 2px solid var(--wp--preset--color--purple-500, #7e33e2);
        break-after: avoid;
    }

    /* ── Expand accordions so their content is actually printed ─────── */
    .sp-program-item__body {
        max-height: none !important;
        padding: 12px 16px 16px !important;
        overflow: visible !important;
        border-top-width: 1px !important;
    }

    .sp-faq__a {
        max-height: none !important;
        padding-bottom: 16px !important;
        overflow: visible !important;
    }

    /* ── Cards: flat borders, no shadows, tighter padding ────────────── */
    .sp-panel-card,
    .sp-goal-card,
    .sp-trainer-card,
    .sp-program-item,
    .sp-edition,
    .sp-pakiet-card,
    .sp-closed,
    .sp-sidebar-box,
    .sp-szczegoly__row,
    .sp-contact-person {
        box-shadow: none !important;
        border-color: #ccc;
    }

    /* Only avoid mid-break on small, single-item cards — .sp-panel-card
       itself can hold an entire tab's worth of content (all FAQ items,
       all trainers...) and forcing that not to split just strands it
       on the next page, leaving a blank one behind. */
    .sp-goal-card,
    .sp-trainer-card,
    .sp-program-item,
    .sp-edition,
    .sp-pakiet-card,
    .sp-closed,
    .sp-sidebar-box,
    .sp-szczegoly__row,
    .sp-contact-person,
    .sp-faq__item {
        break-inside: avoid;
    }

    .sp-panel-card {
        padding: 16px;
        gap: 12px;
        margin-bottom: 12px;
    }

    .sp-panel-card__title {
        font-size: 16px;
    }

    .sp-goal-card,
    .sp-trainer-card {
        padding: 12px;
    }

    .sp-goals__grid,
    .sp-trainer-grid {
        gap: 12px;
    }

    .sp-program-list {
        gap: 8px;
    }

    .sp-program-item__head {
        padding: 12px 16px;
        gap: 12px;
    }

    /* ── Opinie: overall score up top as text, per-review rating as text, tight grid ── */
    .sp-rv-card--hidden {
        display: block !important;
    }

    .sp-rv-summary {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px;
        padding: 0 0 12px;
        margin-bottom: 12px;
        border-top: none;
        border-bottom: 2px solid #000;
    }

    .sp-rv-bars {
        display: none !important;
    }

    .sp-rv-score__avg,
    .sp-rv-score__max,
    .sp-rv-recommend__pct,
    .sp-rv-recommend__label {
        color: #000 !important;
    }

    .sp-rv-score__avg {
        font-size: 32px;
    }

    .sp-rv-stars svg {
        display: none !important;
    }

    .sp-rv-stars::after {
        content: attr(aria-label);
        font-size: 10px;
        font-weight: 700;
        color: #000;
        white-space: nowrap;
    }

    .sp-rv-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .sp-rv-card {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 0;
        break-inside: avoid;
    }

    .sp-rv-card__head {
        margin-bottom: 4px;
    }

    .sp-rv-card__name {
        font-size: 11px;
    }

    .sp-rv-card__role {
        font-size: 9px;
    }

    .sp-rv-card__text {
        font-size: 10px;
        line-height: 1.35;
        margin: 0;
    }

    /* ── Sidebar: price / edition / package cards must read clearly on paper ── */
    .sp-edition {
        border: 1px solid #000;
    }

    .sp-edition__header {
        background: var(--wp--preset--color--white) !important;
        border-bottom: 1px solid #000;
        padding: 16px;
        gap: 4px;
    }

    .sp-edition__label,
    .sp-edition__date,
    .sp-edition__notice,
    .sp-edition__harmonogram-link {
        color: #000 !important;
    }

    .sp-edition__body {
        padding: 16px;
        gap: 12px;
    }

    .sp-edition__tag {
        border: 1px solid #000;
        background: none;
        color: #000;
    }

    .sp-pakiet-card,
    .sp-pakiet-card--active {
        border: 1px solid #000 !important;
        background: var(--wp--preset--color--white) !important;
        padding: 10px;
    }

    .sp-pakiet-card__badge {
        border-color: #000;
        background: none;
        color: #000;
    }

    .sp-financing {
        border: 1px solid #000;
        background: none;
        padding: 12px;
    }

    /* Keep the KFS/BUR financing link as a real, visibly-clickable link in the PDF */
    .sp-financing a {
        color: #000 !important;
        text-decoration: underline;
    }

    .sp-financing a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9px;
        font-weight: 300;
        text-decoration: none;
        word-break: break-all;
    }

    .sp-closed {
        background: none;
        border: 1px solid #000;
    }

    /* ── Premium szkolenie: force a readable light print regardless of the
       data-theme="dark" toggle (that attribute stays on <html> when the
       browser's print dialog opens, so every html[data-theme="dark"] rule
       elsewhere in this file is still "on" unless overridden here). ── */

    /* Decorative-only layers: no value on paper */
    .sp-premium-bg {
        display: none !important;
    }

    /* Hero: premium infobar (price / promo). The countdown is a live,
       JS-driven timer — meaningless (and often stuck at 0) on a static
       PDF, so it's dropped entirely rather than styled. */
    .sp-hero--premium .sp-hero__infobar-card {
        background: none !important;
        border: 1px solid #000;
    }

    .sp-hero__countdown {
        display: none !important;
    }

    .sp-hero__infobar-note-label,
    .sp-hero__infobar-note-text,
    .sp-hero__infobar-price-netto,
    .sp-hero__infobar-price-vat,
    .sp-hero__infobar-price-brutto {
        color: #000 !important;
    }

    .sp-hero__promo {
        background: none !important;
        border: 1px solid #000;
    }

    .sp-hero__promo-title,
    .sp-hero__promo-text {
        color: #000 !important;
    }

    /* Content sections: flat cards, no dark/gradient backgrounds or shadows */
    .sp-premium-section {
        background: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc;
        padding: 16px;
        margin: 0 0 16px !important;
    }

    .sp-premium-eyebrow,
    .sp-premium-title,
    .sp-premium-lead,
    .sp-premium-intro__title,
    .sp-premium-intro__body,
    .sp-premium-highlight-card__title,
    .sp-premium-highlight-card__desc,
    .sp-premium-areas__title,
    .sp-premium-areas__desc,
    .sp-premium-learnings__title,
    .sp-premium-learnings__desc,
    .sp-premium-learnings__num,
    .sp-premium-audience-card__title,
    .sp-premium-audience-card__desc,
    .sp-premium-process__item-title,
    .sp-premium-process__item-desc {
        color: #000 !important;
    }

    /* Always print the desktop 2-column layout, never the mobile paginated
       swiper (its non-active slides are hidden via inline transforms that
       print can't reflow) or either flower decoration. */
    .sp-premium-areas__columns {
        display: flex !important;
    }

    .sp-premium-areas__mobile {
        display: none !important;
    }

    /* Same reasoning for highlights: always print the desktop grid, never
       the mobile peek swiper. */
    .sp-premium-highlights__grid {
        display: grid !important;
    }

    .sp-premium-highlights__mobile {
        display: none !important;
    }

    .sp-premium-areas__columns::before,
    .sp-premium-section--areas::before {
        display: none !important;
    }

    .sp-premium-highlight-card,
    .sp-premium-audience-card {
        background: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .sp-premium-highlight-card__icon,
    .sp-premium-audience-card__icon {
        background: none !important;
        color: #000 !important;
    }

    .sp-premium-process__dot {
        background: #000 !important;
    }

    .sp-premium-process__arrow {
        color: #000 !important;
    }

    .sp-premium-process__row--bo-right::after,
    .sp-premium-process__row--bi-right::before {
        border-color: #000 !important;
    }

    /* Always print every step, never just the first row hidden behind
       "Pokaż więcej" (mobile-only collapse), and never the mobile
       dot-connector line or the button itself. */
    .sp-premium-process__row--collapsible {
        display: flex !important;
    }

    .sp-premium-process__item-top::after,
    .sp-premium-process__more-btn {
        display: none !important;
    }

    /* Reviews: un-slide the swiper so every card prints, not just the
       ones currently scrolled into view. Swiper sets inline width/
       transform on .swiper-wrapper and each .swiper-slide via JS — rather
       than fight those (flex/width overrides can still end up skewed
       since the wrapper keeps its own inline transform box), collapse
       the wrapper out of the layout with display:contents so the slides
       become direct grid children of .sp-rv-list--premium instead. */
    .sp-rv-list--premium {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        overflow: visible !important;
        height: auto !important;
    }

    .sp-rv-list--premium .swiper-wrapper {
        display: contents !important;
    }

    .sp-rv-list--premium .swiper-slide {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .sp-rv-nav {
        display: none !important;
    }

    .sp-rv-card--premium {
        background: none !important;
        clip-path: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    .sp-rv-card--premium .sp-rv-card__quote,
    .sp-rv-card--premium .sp-rv-card__text,
    .sp-rv-card--premium .sp-rv-card__name,
    .sp-rv-card--premium .sp-rv-card__role {
        color: #000 !important;
    }

    /* Contact block (cta-3): flatten dark card, drop non-clickable icon buttons */
    .cta-3-inner {
        background: none !important;
        border: 1px solid #ccc;
        padding: 16px;
    }

    .cta-3-headline,
    .cta-3-title,
    .cta-3-desc,
    .cta-3-person__name,
    .cta-3-person__role {
        color: #000 !important;
    }

    .cta-3-person__actions {
        display: none !important;
    }
}

/* ── Trainer popup modal ─────────────────────────────────────────── */

.sp-trainer-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sp-trainer-modal[hidden] {
    display: flex;
}

.sp-trainer-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sp-trainer-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 37, 0.8);
    cursor: pointer;
}

.sp-trainer-modal__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    box-shadow: 0 0 12.5px rgba(26, 26, 37, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.sp-trainer-modal.is-open .sp-trainer-modal__card {
    transform: translateY(0);
}

.sp-trainer-modal__header {
    background: var(--wp--preset--color--black);
    border-radius: 16px 16px 0 0;
    padding: 28px 40px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    flex-shrink: 0;
}

.sp-trainer-modal__avatar-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    position: relative;
}

.sp-trainer-modal__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.sp-trainer-modal__avatar[src=""] {
    display: none;
}

.sp-trainer-modal__avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-trainer-modal__avatar-placeholder svg {
    width: 28px;
    height: 28px;
}

.sp-trainer-modal__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.sp-trainer-modal__name {
    font-size: 15px;
    font-weight: 400;
    color: var(--wp--preset--color--white);
    line-height: 20px;
    margin: 0;
}

.sp-trainer-modal__role {
    font-size: 12px;
    font-weight: 700;
    color: var(--wp--preset--color--purple);
    line-height: 16px;
    margin: 0;
}

.sp-trainer-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--wp--preset--color--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.sp-trainer-modal__close:hover {
    opacity: 1;
}

.sp-trainer-modal__body {
    background: var(--wp--preset--color--white);
    border: 1px solid #e4e4ea;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-trainer-modal__section-head {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sp-trainer-modal__section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    line-height: 20px;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.sp-trainer-modal__section-line {
    flex: 1;
    border: none;
    border-top: 1px solid #e4e4ea;
    margin: 0;
}

.sp-trainer-modal__bio {
    font-size: 14px;
    font-weight: 300;
    color: var(--wp--preset--color--dark);
    line-height: 22px;
}

.sp-trainer-modal__bio p {
    margin: 0 0 12px;
}

.sp-trainer-modal__bio p:last-child {
    margin-bottom: 0;
}

.sp-trainer-modal__bio h1,
.sp-trainer-modal__bio h2,
.sp-trainer-modal__bio h3,
.sp-trainer-modal__bio h4 {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--wp--preset--color--black);
    margin: 0 0 8px;
}

/* ── Trainer popup modal — dark mode ─────────────────────────────── */

html[data-theme="dark"] .sp-trainer-modal__card {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-trainer-modal__body {
    background: var(--wp--preset--color--dark, #2E2E39);
    border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-trainer-modal__section-title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-trainer-modal__section-line {
    border-top-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-trainer-modal__bio {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .sp-trainer-modal__bio h1,
html[data-theme="dark"] .sp-trainer-modal__bio h2,
html[data-theme="dark"] .sp-trainer-modal__bio h3,
html[data-theme="dark"] .sp-trainer-modal__bio h4 {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-trainer-modal__role {
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* ── Trainer card / program-trainer click affordance — dark mode ───── */

html[data-theme="dark"] .sp-program-trainer__avatar--placeholder svg path[stroke="var(--wp--preset--color--purple-500)"] {
    stroke: var(--wp--preset--color--yellow, #FFE500);
}

/* ===================================================================
   Premium szkolenie — layout / hero / opis
   =================================================================== */

.sp-layout--no-sidebar {
    grid-template-columns: 1fr;
}

/* ── Hero: info bar (licznik / cena / CTA), promo ───────────────────── */

.sp-hero--premium .sp-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
}

.sp-hero--premium .sp-hero__content {
    max-width: 100%;
}

.sp-hero__infobar {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
}

.sp-hero__infobar-card {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 640px;
    min-width: 0;
    background: var(--wp--preset--color--black);
    border-radius: 4px;
    padding: 16px 24px;
    flex-wrap: wrap;
}

.sp-hero__countdown {
    display: flex;
    gap: 8px;
}

.sp-hero__countdown-cell {
    background: var(--wp--preset--color--white);
    border-radius: 4px;
    min-width: 72px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sp-hero__countdown-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #1a1a24;
}

.sp-hero__countdown-label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 36, .7);
    text-transform: uppercase;
}

.sp-hero__infobar-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 160px;
    color: var(--wp--preset--color--white);
}

.sp-hero__infobar-note-label {
    font-size: 14px;
    opacity: .7;
    margin: 0;
}

.sp-hero__infobar-note-text {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.sp-hero__infobar-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--wp--preset--color--white);
    white-space: nowrap;
}

.sp-hero__infobar-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sp-hero__infobar-price-netto {
    font-size: 24px;
    font-weight: 400;
}

.sp-hero__infobar-price-vat {
    font-size: 14px;
    font-weight: 300;
}

.sp-hero__infobar-price-brutto {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: var(--wp--preset--color--neutral-200);
}

.sp-hero__infobar-cta {
    flex-shrink: 0;
    background: transparent;
    color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--white);
    padding: 11px 32px;
    white-space: nowrap;
}

.sp-hero__infobar-cta:hover {
    background: rgba(255, 255, 255, .15);
}

/* Desktop dark theme: filled yellow CTA (matches Figma "WERSJA 2" dark hero) */
html[data-theme="dark"] .sp-hero__infobar-cta {
    background: var(--wp--preset--color--yellow);
    color: var(--wp--preset--color--dark);
    border-color: var(--wp--preset--color--yellow);
}

html[data-theme="dark"] .sp-hero__infobar-cta:hover {
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
}

.sp-hero__promo {
    flex: 1 1 320px;
    max-width: 406px;
    background: #ddf1e7;
    border: 1px solid #bfe3cf;
    border-radius: 4px;
    padding: 16px;
}

.sp-hero__promo-title {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #098257;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}

.sp-hero__promo-title svg {
    flex-shrink: 0;
}

.sp-hero__promo-text {
    margin: 0;
    color: var(--wp--preset--color--dark);
    font-size: 14px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .sp-hero__infobar-card {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        flex-basis: 100%;
    }

    .sp-hero__countdown {
        width: 100%;
    }

    .sp-hero__countdown-cell {
        flex: 1;
    }

    .sp-hero__infobar-price {
        align-items: flex-end;
        width: 100%;
    }

    .sp-hero__infobar-cta,
    html[data-theme="dark"] .sp-hero__infobar-cta {
        width: 100%;
        background: transparent;
        color: var(--wp--preset--color--white);
        border: 1px solid var(--wp--preset--color--white);
    }

    .sp-hero__infobar-cta:hover,
    html[data-theme="dark"] .sp-hero__infobar-cta:hover {
        background: rgba(255, 255, 255, .15);
    }

    .sp-hero__promo {
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Figma (node 683-31477): excerpt stays visible on the premium mobile hero */
    .sp-hero--premium .sp-hero__excerpt {
        display: block;
    }

    /* Gradient/background must cover the full stacked hero height on mobile,
       not just a fixed 484px slice — the mobile hero is much taller than
       desktop once the title/tags/countdown card stack vertically. */
    .sp-hero--premium .sp-hero__gradient {
        top: 0;
        bottom: 0;
        height: auto;
        background-position: bottom center;
    }
}

/* ── Opis premium: bloki treści ──────────────────────────────────── */

/* Decorative ribbon layer — LIGHT THEME ONLY. Lives at .sp-page-content-bg
   level (not inside #tab-opis) so it survives the mobile JS that relocates
   the sidebar into #tab-opis; visible by default (Opis is the
   default-active tab), and single-szkolenie.js's activateTab() toggles
   .sp-premium-bg--hidden to match whichever tab is actually open. In dark
   theme this is hidden entirely in favor of the Figma background-image on
   .sp-page-content-bg (see the html[data-theme="dark"] rule above). */

.sp-page-content-bg {
    /* z-index (not just position) is required here so this element actually
       establishes its own stacking context — otherwise .sp-premium-bg's
       z-index below is compared against the page's root layer instead of
       being scoped locally, and ends up painting over far more than intended. */
    position: relative;
    z-index: 0;
}

.sp-page-content {
    /* Pulled into the same stacking context/step as .sp-premium-bg (see
       above) so it paints above it regardless of DOM order — a plain
       static element would otherwise always paint behind any positioned
       sibling, no matter which comes first in the markup. */
    position: relative;
    z-index: 1;
}

.sp-premium-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.sp-premium-bg--hidden {
    display: none;
}

html[data-theme="dark"] .sp-premium-bg {
    display: none;
}

/* Three ribbon instances down the tab (Figma has "Ribbon-1" @ y:205 right,
   another "Ribbon-1" copy @ y:1505 mirrored/left (assets/img/premium-ribbon-2.svg,
   a different shape — user-provided direct export), and a third @ y:3753
   right, identical to the first). top uses % of the tab's own height (not
   fixed px) so the three stay proportionally spread regardless of how long
   a given course's premium content actually is — the whole point of this
   being scoped to #tab-opis rather than fixed to the page. Percentages are
   Figma's own y ÷ its total content height (4968): 205/4968, 1505/4968,
   3753/4968. Both SVGs are direct Figma exports with the rotation already
   baked into the path data, so no CSS transform is needed — just each
   file's own intrinsic aspect ratio (viewBox padded to include the parts of
   the artwork that overflowed the originally-exported viewBox). */
.sp-premium-bg__ribbon {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

.sp-premium-bg__ribbon--1,
.sp-premium-bg__ribbon--3 {
    width: 870px;
    height: 878px;
    right: -287px;
    background-image: url('../img/premium-ribbon.svg');
}

.sp-premium-bg__ribbon--1 {
    top: -2%;
}

.sp-premium-bg__ribbon--3 {
    top: 68%;
}

.sp-premium-bg__ribbon--2 {
    width: 784px;
    height: 930px;
    top: 22%;
    left: -100px;
    background-image: url('../img/premium-ribbon-2.svg');
}

@media (max-width: 1200px) {
    .sp-premium-bg__ribbon {
        display: none;
    }
}

/* Intro ("O szkoleniu") — plain text, no card (matches Figma: no bg/border/shadow) */

.sp-premium-intro {
    position: relative;
    overflow: hidden;
    padding: 32px 0 8px;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 1024px) {
    .sp-premium-intro {
        margin-bottom: 64px;
    }
}

@media (max-width: 768px) {
    .sp-premium-intro {
        margin-bottom: 48px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 480px) {
    .sp-premium-intro {
        margin-bottom: 32px;
    }
}

.sp-premium-intro__title {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
}

html[data-theme="dark"] .sp-premium-intro__title {
    color: var(--wp--preset--color--white);
}

.sp-premium-intro__body {
    max-width: 640px;
}

html[data-theme="dark"] .sp-premium-intro__body {
    color: rgba(255, 255, 255, .75);
}

.sp-premium-section {
    background: rgba(255, 255, 255, .6);
    border-radius: 16px;
    padding: 48px;
    margin: 0 24px 80px;
    box-shadow: 0 0 25px 5px rgba(26, 26, 37, .1);
}

.sp-premium-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .sp-premium-section {
        margin: 0 16px 64px;
    }
}

@media (max-width: 768px) {
    .sp-premium-section {
        margin: 0 0 48px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .sp-page-content-bg--premium .sp-page-content {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .sp-premium-section {
        margin: 0 0 32px;
    }
}

html[data-theme="dark"] .sp-premium-section {
    background: rgba(27, 0, 62, .5);
    backdrop-filter: blur(2px);
    box-shadow: none;
}

@media (max-width: 768px) {
    html[data-theme="dark"] .sp-premium-section {
        background: none;
    }
}

.sp-premium-eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--wp--preset--color--purple-500);
}

html[data-theme="dark"] .sp-premium-eyebrow {
    color: var(--wp--preset--color--neutral-200);
}

.sp-premium-title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
}

.sp-premium-title:has(+ .sp-premium-lead) {
    margin-bottom: 12px;
}

html[data-theme="dark"] .sp-premium-title {
    color: #fff;
}

.sp-premium-lead {
    margin-bottom: 24px;
    max-width: 640px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--dark);
}

html[data-theme="dark"] .sp-premium-lead {
    color: var(--wp--preset--color--neutral-200);
}

/* Highlights ("Co wyróżnia program") — icon cards, 3 col */

.sp-premium-highlights__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .sp-premium-highlights__grid {
        grid-template-columns: 1fr;
    }
}

.sp-premium-highlight-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 25px;
    background: linear-gradient(148deg, #ffffff 0%, var(--wp--preset--color--neutral-100) 100%);
    border: 1px solid #f3f4f6;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

html[data-theme="dark"] .sp-premium-highlight-card {
    background: rgba(67, 11, 142, .1);
    border-color: #430b8e;
    backdrop-filter: blur(40px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

.sp-premium-highlight-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background: rgba(139, 92, 246, .1);
    color: var(--wp--preset--color--purple-500);
}

.sp-premium-highlight-card__icon svg {
    width: 28px;
    height: 28px;
}

html[data-theme="dark"] .sp-premium-highlight-card__icon {
    background: rgba(255, 255, 255, .1);
    color: var(--wp--preset--color--white);
}

.sp-premium-highlight-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: var(--wp--preset--color--black);
}

html[data-theme="dark"] .sp-premium-highlight-card__title {
    color: var(--wp--preset--color--white);
}

.sp-premium-highlight-card__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-300);
}

html[data-theme="dark"] .sp-premium-highlight-card__desc {
    color: rgba(255, 255, 255, .7);
}

/* Mobile (both themes): horizontal peek swiper instead of the stacked
   grid, modeled on the "MobilePremium" Figma frame — fixed-width cards
   with the next one peeking in, pagination dots below. */

.sp-premium-highlights__mobile {
    display: none;
}

@media (max-width: 768px) {
    .sp-premium-highlights__grid {
        display: none;
    }

    .sp-premium-highlights__mobile {
        display: block;
        overflow: visible;
    }

    .sp-premium-highlights__mobile .swiper-wrapper {
        align-items: stretch;
    }

    .sp-premium-highlights__mobile .swiper-slide {
        width: 280px;
        height: auto;
    }

    .sp-premium-highlights__mobile .sp-premium-highlight-card {
        height: 100%;
    }

    .sp-premium-highlights__mobile-pagination {
        position: relative;
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 24px;
    }

    .sp-premium-highlights__mobile-pagination .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: transparent;
        border: 1.5px solid rgba(26, 26, 37, .3);
        opacity: 1;
        margin: 0 !important;
    }

    .sp-premium-highlights__mobile-pagination .swiper-pagination-bullet-active {
        background: var(--wp--preset--color--black);
        border-color: var(--wp--preset--color--black);
    }

    html[data-theme="dark"] .sp-premium-highlights__mobile-pagination .swiper-pagination-bullet {
        border-color: rgba(255, 255, 255, .5);
    }

    html[data-theme="dark"] .sp-premium-highlights__mobile-pagination .swiper-pagination-bullet-active {
        background: var(--wp--preset--color--white);
        border-color: var(--wp--preset--color--white);
    }
}

/* Areas ("Kluczowe obszary") — text intro + 2-column icon checklist */

.sp-premium-areas__inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.sp-premium-areas__text {
    flex: 1 1 320px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-premium-areas__columns {
    flex: 1 1 480px;
    display: flex;
    gap: 24px;
}

.sp-premium-areas__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-premium-areas__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sp-premium-areas__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #ffeaf4;
    color: var(--wp--preset--color--pink-500);
}

.sp-premium-areas__icon svg {
    width: 16px;
    height: 16px;
}

.sp-premium-areas__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-premium-areas__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--wp--preset--color--black);
}

.sp-premium-areas__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-300);
}

@media (max-width: 900px) {
    .sp-premium-areas__inner {
        flex-direction: column;
    }

    .sp-premium-areas__text {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .sp-premium-areas__columns {
        flex-direction: column;
        gap: 24px;
    }
}

/* Dark theme (all viewports, Figma 674-24619 desktop / 683-31582 mobile):
   no icon squares, larger yellow item titles, lighter descriptions. */
html[data-theme="dark"] .sp-premium-areas__icon {
    display: none;
}

html[data-theme="dark"] .sp-premium-areas__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-premium-areas__desc {
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, .9);
}

/* Mobile swiper markup only exists for the dark-theme redesign; unused
   (and hidden) everywhere else. */
.sp-premium-areas__mobile {
    display: none;
}

/* ── Desktop: 2-column layout with a centered 4-petal "flower" graphic ── */
@media (min-width: 901px) {
    /* Figma: 449px-wide text column, 80px gap before the flower/columns group */
    html[data-theme="dark"] .sp-premium-areas__inner {
        gap: 80px;
    }

    html[data-theme="dark"] .sp-premium-areas__text {
        max-width: 449px;
    }

    html[data-theme="dark"] .sp-premium-areas__columns {
        position: relative;
        gap: 113px;
        /* Reserve enough height for the 710px flower graphic below so the
           whole card grows to contain it instead of the flower overflowing
           past the section's top/bottom edges. */
        min-height: 710px;
        align-items: center;
    }

    html[data-theme="dark"] .sp-premium-areas__columns::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 716px;
        height: 710px;
        transform: translate(-50%, -50%);
        background-image: url('../img/premium-areas-flower.svg');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 0;
    }

    html[data-theme="dark"] .sp-premium-areas__col {
        position: relative;
        z-index: 1;
        gap: 80px;
        justify-content: center;
    }
}

/* ── Mobile (both themes): paginated 3-at-a-time swiper with a softer
   flower bleeding behind it (Figma 683-31582) ── */
@media (max-width: 900px) {
    .sp-premium-section--areas {
        /* Flower now lives on the section itself (see ::before below), sized
           and positioned to bleed off the right/bottom edge — clip it here
           instead of letting it spill into neighboring sections. */
        position: relative;
        overflow: hidden;
    }

    .sp-premium-section--areas::before {
        content: '';
        position: absolute;
        top: 320px;
        right: -130px;
        width: 460px;
        height: 455px;
        background-image: url('../img/premium-areas-flower.svg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .6;
        pointer-events: none;
        z-index: 0;
    }

    .sp-premium-section--areas > * {
        position: relative;
        z-index: 1;
    }

    .sp-premium-areas__columns {
        display: none;
    }

    .sp-premium-areas__mobile {
        display: block;
        width: 100%;
    }

    .sp-premium-areas__mobile-group {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .sp-premium-areas__mobile-pagination {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 32px;
    }

    .sp-premium-areas__mobile-pagination .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(26, 26, 37, .3);
        opacity: 1;
    }

    .sp-premium-areas__mobile-pagination .swiper-pagination-bullet-active {
        background: var(--wp--preset--color--black);
    }

    html[data-theme="dark"] .sp-premium-areas__mobile-pagination .swiper-pagination-bullet {
        background: rgba(255, 255, 255, .3);
    }

    html[data-theme="dark"] .sp-premium-areas__mobile-pagination .swiper-pagination-bullet-active {
        background: var(--wp--preset--color--white);
    }
}

/* Learnings ("Czego się nauczysz") — text intro + 2-column numbered list */

.sp-premium-learnings__columns {
    display: flex;
    gap: 40px;
    width: 100%;
    margin-top: 32px;
}

.sp-premium-learnings__list {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sp-premium-learnings__item {
    display: flex;
    gap: 16px;
}

.sp-premium-learnings__num {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--wp--preset--color--pink-500);
}

html[data-theme="dark"] .sp-premium-learnings__num {
    color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-premium-learnings__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--wp--preset--color--purple-500);
}

html[data-theme="dark"] .sp-premium-learnings__title {
    color: var(--wp--preset--color--white);
}

.sp-premium-learnings__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-300);
}

html[data-theme="dark"] .sp-premium-learnings__desc {
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 640px) {
    .sp-premium-learnings__columns {
        flex-direction: column;
        gap: 24px;
    }
}

/* Audience ("Stworzony dla decydentów") — 4 icon cards */

.sp-premium-audience__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.sp-premium-audience-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
    background: #faf8ff;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    box-shadow: 0 0 12.5px rgba(26, 26, 37, .1);
}

html[data-theme="dark"] .sp-premium-audience-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 0 25px rgba(26, 26, 37, .1);
}

.sp-premium-audience-card__icon {
    display: flex;
    width: 32px;
    height: 32px;
    color: var(--wp--preset--color--pink-500);
}

html[data-theme="dark"] .sp-premium-audience-card__icon {
    color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-premium-audience-card__icon svg {
    width: 32px;
    height: 32px;
}

.sp-premium-audience-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--wp--preset--color--black);
}

html[data-theme="dark"] .sp-premium-audience-card__title {
    color: #fff;
}

.sp-premium-audience-card__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-300);
}

html[data-theme="dark"] .sp-premium-audience-card__desc {
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 900px) {
    .sp-premium-audience__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 679px) {
    .sp-premium-audience__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sp-premium-audience-card {
        padding: 16px;
    }
}

/* Process ("Po dwóch dniach z nami") — snake path of dots/arrows, modeled
   on gutenberg/items-path (dot + arrow row, right-edge bracket connecting
   consecutive rows). */

.sp-premium-process__rows {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    margin-top: 40px;
}

.sp-premium-process__row {
    display: grid;
    grid-template-columns: repeat(var(--sppp-cols, 3), 1fr);
    column-gap: 64px;
    position: relative;
}

.sp-premium-process__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sp-premium-process__item-top {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sp-premium-process__dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wp--preset--color--pink-500);
    flex-shrink: 0;
}

html[data-theme="dark"] .sp-premium-process__dot {
    background: var(--wp--preset--color--yellow, #FFE500);
}

.sp-premium-process__arrow {
    flex: 1 0 0;
    min-width: 0;
    display: block;
    align-self: center;
    color: var(--wp--preset--color--pink-500);
}

html[data-theme="dark"] .sp-premium-process__arrow {
    color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-premium-process__arrow--left {
    transform: scaleX(-1);
}

.sp-premium-process__row--bo-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    bottom: -32px;
    width: calc((100% - (var(--sppp-cols, 3) - 1) * 64px) / var(--sppp-cols, 3) - 28px);
    border: 1.5px solid var(--wp--preset--color--pink-500);
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 32px;
    pointer-events: none;
}

html[data-theme="dark"] .sp-premium-process__row--bo-right::after {
    border-color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-premium-process__row--bi-right::before {
    content: '';
    position: absolute;
    right: 0;
    top: -32px;
    height: 40px;
    width: calc((100% - (var(--sppp-cols, 3) - 1) * 64px) / var(--sppp-cols, 3) - 28px);
    border: 1.5px solid var(--wp--preset--color--pink-500);
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 32px;
    pointer-events: none;
}

html[data-theme="dark"] .sp-premium-process__row--bi-right::before {
    border-color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-premium-process__item-title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    max-width: 280px;
    color: var(--wp--preset--color--black);
}

html[data-theme="dark"] .sp-premium-process__item-title {
    color: #fff;
}

.sp-premium-process__item-desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    max-width: 280px;
    color: var(--wp--preset--color--neutral-300);
}

html[data-theme="dark"] .sp-premium-process__item-desc {
    color: rgba(255, 255, 255, .7);
}

@media (max-width: 900px) {
    .sp-premium-process__rows {
        gap: 0;
    }

    /* Rows stack top-to-bottom, always reading in natural order regardless
       of the desktop LTR/RTL snake (whose zigzag comes from PHP reversing
       the item array, not from CSS row-reverse). */
    .sp-premium-process__row {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .sp-premium-process__row--rtl {
        flex-direction: column-reverse;
    }

    /* Only the first row (3 items) shows by default; the rest wait behind
       "Pokaż więcej" — modeled on gutenberg/items-path's collapsible rows. */
    .sp-premium-process__row--collapsible {
        display: none;
    }

    .sp-premium-section--process.is-expanded .sp-premium-process__row--collapsible {
        display: flex;
    }

    .sp-premium-process__arrow,
    .sp-premium-process__row--bo-right::after,
    .sp-premium-process__row--bi-right::before {
        display: none;
    }

    /* Item: dot/connector column (left) + text column (right), modeled on
       gutenberg/items-path's mobile ".ip-item" grid. */
    .sp-premium-process__item {
        display: grid;
        grid-template-columns: 16px 1fr;
        grid-template-rows: auto auto;
        column-gap: 24px;
        row-gap: 8px;
        width: 100%;
        padding-bottom: 32px;
    }

    .sp-premium-process__item-top {
        grid-column: 1;
        grid-row: 1 / 3;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        gap: 0;
    }

    .sp-premium-process__item-top::after {
        content: '';
        flex: 1;
        width: 12px;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 64" preserveAspectRatio="none"><path d="M6.27344 0.75C6.27344 0.335786 5.93765 1.81059e-08 5.52344 0C5.10922 -1.81059e-08 4.77344 0.335786 4.77344 0.75L5.52344 0.75L6.27344 0.75ZM4.9931 63.2803C5.286 63.5732 5.76087 63.5732 6.05376 63.2803L10.8267 58.5074C11.1196 58.2145 11.1196 57.7396 10.8267 57.4467C10.5338 57.1538 10.059 57.1538 9.76608 57.4467L5.52343 61.6893L1.28079 57.4467C0.987901 57.1538 0.513028 57.1538 0.220134 57.4467C-0.0727593 57.7396 -0.0727593 58.2145 0.220134 58.5074L4.9931 63.2803ZM5.52344 0.75L4.77344 0.75L4.77343 62.75L5.52343 62.75L6.27343 62.75L6.27344 0.75L5.52344 0.75Z" fill="%23DF006E"/></svg>');
        background-size: 12px;
        background-repeat: no-repeat;
        background-position: bottom center;
        margin-top: 8px;
        margin-bottom: 0;
    }

    html[data-theme="dark"] .sp-premium-process__item-top::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 64" preserveAspectRatio="none"><path d="M6.27344 0.75C6.27344 0.335786 5.93765 1.81059e-08 5.52344 0C5.10922 -1.81059e-08 4.77344 0.335786 4.77344 0.75L5.52344 0.75L6.27344 0.75ZM4.9931 63.2803C5.286 63.5732 5.76087 63.5732 6.05376 63.2803L10.8267 58.5074C11.1196 58.2145 11.1196 57.7396 10.8267 57.4467C10.5338 57.1538 10.059 57.1538 9.76608 57.4467L5.52343 61.6893L1.28079 57.4467C0.987901 57.1538 0.513028 57.1538 0.220134 57.4467C-0.0727593 57.7396 -0.0727593 58.2145 0.220134 58.5074L4.9931 63.2803ZM5.52344 0.75L4.77344 0.75L4.77343 62.75L5.52343 62.75L6.27343 62.75L6.27344 0.75L5.52344 0.75Z" fill="%23FFE500"/></svg>');
    }

    .sp-premium-process__item-title {
        grid-column: 2;
        grid-row: 1;
        max-width: none;
    }

    .sp-premium-process__item-desc {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
    }

    /* Last item overall: no trailing connector/gap */
    .sp-premium-process__row:last-child.sp-premium-process__row--ltr .sp-premium-process__item:last-child,
    .sp-premium-process__row:last-child.sp-premium-process__row--rtl .sp-premium-process__item:first-child {
        padding-bottom: 0;
    }

    .sp-premium-process__row:last-child.sp-premium-process__row--ltr .sp-premium-process__item:last-child .sp-premium-process__item-top::after,
    .sp-premium-process__row:last-child.sp-premium-process__row--rtl .sp-premium-process__item:first-child .sp-premium-process__item-top::after {
        display: none;
    }
}

/* ── Show more (mobile only) ──────────────────────────────────────────── */

.sp-premium-process__more-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    padding: 12px 16px;
    background: none;
    border: 1px solid var(--wp--preset--color--pink-500, #DF006E);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-premium-process__more-btn {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--wp--preset--color--white);
}

.sp-premium-process__more-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sp-premium-process__more-icon svg {
    width: 20px;
    height: 20px;
}

.sp-premium-section--process.is-expanded .sp-premium-process__more-btn {
    display: none;
}

@media (max-width: 900px) {
    .sp-premium-process__more-btn {
        display: flex;
    }
}

/* Contact ("Skontaktuj się z nami") — literal copy of gutenberg/cta-3/style.css,
   reused here (instead of enqueuing the block) since this is a classic PHP
   template, not a rendered Gutenberg block. Keep in sync with that file. */

.cta-3 {
    padding: 64px 0;
}

.cta-3-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 48px;
    background: var(--wp--preset--color--black);
    border-radius: 4px;
}

.cta-3-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cta-3-headline {
    margin: 0;
    font-family: 'EYInterstate', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--yellow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-3-title {
    margin: 0;
    font-family: 'EYInterstate', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    color: var(--wp--preset--color--white);
}

.cta-3-desc {
    margin: 0;
    font-family: 'EYInterstate', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: var(--wp--preset--color--neutral-100);
}

.cta-3-person {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cta-3-person__photo {
    flex-shrink: 0;
}

.cta-3-person__img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.cta-3-person__body {
    display: flex;
    align-items: center;
    gap: 40px;
}

.cta-3-person__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}

.cta-3-person__name {
    margin: 0;
    font-family: 'EYInterstate', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--wp--preset--color--white);
}

.cta-3-person__role {
    margin: 0;
    font-family: 'EYInterstate', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-200);
}

.cta-3-person__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cta-3-person__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wp--preset--color--white);
    border: none;
    text-decoration: none;
    line-height: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cta-3-person__btn:hover {
    background: #f0f0f0;
}

@media (max-width: 767px) {
    .cta-3 {
        padding: 32px 0;
    }

    .cta-3-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
        border-radius: 4px;
    }

    .cta-3-person {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }

    .cta-3-person__photo {
        order: 1;
    }

    .cta-3-person__body {
        display: contents;
    }

    .cta-3-person__meta {
        order: 2;
        white-space: normal;
    }

    .cta-3-person__actions {
        order: 3;
        flex-basis: 100%;
    }
}

/* Premium szkolenie dark theme: keep .cta-3 transparent so the page's glow
   background shows through, overriding the global block default (see
   gutenberg/cta-3/style.css) which fills it with a solid dark grey. */
html[data-theme="dark"] .sp-layout--no-sidebar .cta-3 {
    background: transparent;
}

@media (max-width: 768px) {
    html[data-theme="dark"] .sp-layout--no-sidebar .cta-3 {
        padding-left: 24px;
        padding-right: 24px;
    }
}