/*
 * SWAM Premium — Dashboard V2 stylesheet (r3 visual correction)
 *
 * r3 changes vs r2:
 *  - status pill in IMAGE top-right corner (overlay), not in head section
 *  - meta block: chip with state + `Wygasa:` + `Pozostało:` (always 2 lines)
 *  - `Pokaż szczegóły` as small right-aligned link (not full-width select)
 *  - CTA fioletowe wypełnienie (#4B3153), biały tekst, kompaktowe
 *  - nav below tiles (poziome/gridowe), nie wysoka pionowa lista
 *  - kompaktowe paddingi i mniejsze zdjęcia żeby hero + tile mieściły się
 *    bez scrollowania na ~1080p
 *
 * Scoped to one of:
 *   .syn-account-panel--dashv2  (outer shell)
 *   .syn-account-view--dashv2   (dashboard view)
 *   .syn-studio-catalog--dashv2 (studio catalog)
 *
 * Theme variants: data-theme="cream|plum" (cream default).
 * Legacy widoki (bez `--dashv2` modifier) są nieruszone.
 *
 * @since 4.2.74 (r3 visual correction)
 */

/* ============================================================
 * 0. Theme tokens — cream (default) / plum (legacy compat)
 * ============================================================ */

.syn-account-view--dashv2[data-theme="cream"],
.syn-studio-catalog--dashv2[data-theme="cream"],
.syn-account-panel--dashv2[data-theme="cream"] {
	--swam-dashv2-accent:        #4B3153;
	--swam-dashv2-accent-strong: #3F2746;
	--swam-dashv2-accent-deep:   #251A2B;
	--swam-dashv2-ink:           #24152A;
	--swam-dashv2-text:          #5C5062;
	--swam-dashv2-text-soft:     #6A5D72;
	--swam-dashv2-surface:       #ffffff;
	--swam-dashv2-glow:          #ffffff;
	--swam-dashv2-line:          rgba(107, 63, 115, 0.12);
	--swam-dashv2-line-strong:   rgba(107, 63, 115, 0.20);
	--swam-dashv2-shadow:        0 10px 24px rgba(31, 27, 36, 0.05);
	--swam-dashv2-shadow-strong: 0 16px 34px rgba(31, 27, 36, 0.08);
	--swam-dashv2-shadow-btn:    0 8px 18px rgba(75, 49, 83, 0.20);
	--swam-dashv2-active-ink:    #198754;
	--swam-dashv2-active-bg:     #EEF9F3;
	--swam-dashv2-active-line:   rgba(25, 135, 84, 0.20);
	--swam-dashv2-locked-ink:    #6F6275;
	--swam-dashv2-locked-bg:     #F1ECEF;
	--swam-dashv2-locked-line:   rgba(75, 49, 83, 0.18);
	--swam-dashv2-warn-ink:      #6F6275;
	--swam-dashv2-warn-bg:       #F3EEF5;
	--swam-dashv2-warn-line:     rgba(75, 49, 83, 0.16);
	--swam-dashv2-radius-lg:     18px;
	--swam-dashv2-radius-md:     12px;
	--swam-dashv2-radius-sm:     8px;
	--swam-dashv2-trans:         200ms cubic-bezier(.2, .72, .2, 1);
}

.syn-account-view--dashv2[data-theme="plum"],
.syn-studio-catalog--dashv2[data-theme="plum"],
.syn-account-panel--dashv2[data-theme="plum"] {
	--swam-dashv2-accent:        #6b3f73;
	--swam-dashv2-accent-strong: #5a3362;
	--swam-dashv2-accent-deep:   #432348;
	--swam-dashv2-ink:           #24152A;
	--swam-dashv2-text:          #5C5062;
	--swam-dashv2-text-soft:     #6A5D72;
	--swam-dashv2-surface:       #ffffff;
	--swam-dashv2-glow:          #ffffff;
	--swam-dashv2-line:          rgba(107, 63, 115, 0.18);
	--swam-dashv2-line-strong:   rgba(107, 63, 115, 0.28);
	--swam-dashv2-shadow:        0 12px 28px rgba(57, 29, 61, 0.12), 0 3px 8px rgba(57, 29, 61, 0.06);
	--swam-dashv2-shadow-strong: 0 18px 38px rgba(57, 29, 61, 0.18), 0 6px 16px rgba(57, 29, 61, 0.09);
	--swam-dashv2-shadow-btn:    0 8px 18px rgba(75, 49, 83, 0.26);
	--swam-dashv2-active-ink:    #198754;
	--swam-dashv2-active-bg:     #EEF9F3;
	--swam-dashv2-active-line:   rgba(25, 135, 84, 0.20);
	--swam-dashv2-locked-ink:    #6b3f73;
	--swam-dashv2-locked-bg:     rgba(107, 63, 115, 0.08);
	--swam-dashv2-locked-line:   rgba(107, 63, 115, 0.18);
	--swam-dashv2-warn-ink:      #6b3f73;
	--swam-dashv2-warn-bg:       rgba(107, 63, 115, 0.08);
	--swam-dashv2-warn-line:     rgba(107, 63, 115, 0.18);
	--swam-dashv2-radius-lg:     18px;
	--swam-dashv2-radius-md:     12px;
	--swam-dashv2-radius-sm:     8px;
	--swam-dashv2-trans:         200ms cubic-bezier(.2, .72, .2, 1);
}

/* ============================================================
 * 1. Base reset for V2 surfaces — minimal, scoped
 * ============================================================ */

.syn-account-view--dashv2,
.syn-studio-catalog--dashv2,
.syn-account-panel--dashv2 {
	color: var(--swam-dashv2-ink);
}

.syn-account-view--dashv2 *,
.syn-studio-catalog--dashv2 *,
.syn-account-panel--dashv2 * {
	box-sizing: border-box;
}

/* ============================================================
 * 2. Business tile (Studio + Library cards on dashboard) — r3 compact
 * ============================================================ */

.syn-business-tile--dashv2 {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--swam-dashv2-surface);
	border: 1px solid var(--swam-dashv2-line);
	border-radius: var(--swam-dashv2-radius-lg);
	box-shadow: var(--swam-dashv2-shadow);
	transition:
		transform var(--swam-dashv2-trans),
		box-shadow var(--swam-dashv2-trans),
		border-color var(--swam-dashv2-trans);
}

.syn-business-tile--dashv2:hover {
	transform: translateY(-3px);
	box-shadow: var(--swam-dashv2-shadow-strong);
	border-color: var(--swam-dashv2-line-strong);
}

.syn-business-tile--dashv2[data-access-state="active"] {
	border-color: var(--swam-dashv2-active-line);
}

.syn-business-tile--dashv2[data-access-state="expires-soon"] {
	border-color: var(--swam-dashv2-warn-line);
}

.syn-business-tile--dashv2[data-access-state="locked"] .syn-business-tile__visual img {
	filter: saturate(0.85) contrast(0.98);
}

/* Visual (image) — square media in equal-width cards. */
.syn-business-tile--dashv2 .syn-business-tile__visual {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ffffff;
	border-bottom: 1px solid var(--swam-dashv2-line);
	border-radius: var(--swam-dashv2-radius-lg) var(--swam-dashv2-radius-lg) 0 0;
}

.syn-business-tile--dashv2 .syn-business-tile__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 420ms cubic-bezier(.2, .72, .2, 1), filter var(--swam-dashv2-trans);
}

.syn-business-tile--dashv2:hover .syn-business-tile__visual img {
	transform: scale(1.03);
}

/* Status jako overlay wewnątrz zdjęcia.
 * Cel: status ma być czytelny, ale nie może wychodzić poza kartę
 * ani ucinać się na górnej/prawej krawędzi. */
.syn-business-tile--dashv2 .syn-business-tile__status-pill {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	bottom: auto;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 28px);
	min-height: 28px;
	margin: 0;
	padding: 5px 11px 5px 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transform: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
	backdrop-filter: blur(4px);
}

.syn-business-tile--dashv2 .syn-business-tile__pill-icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 999px;
}

.syn-business-tile--dashv2 .syn-business-tile__pill-icon svg {
	display: block;
	width: 12px;
	height: 12px;
}

.syn-business-tile--dashv2 .syn-business-tile__status-pill[data-state="active"] {
	color: var(--swam-dashv2-active-ink);
}
.syn-business-tile--dashv2 .syn-business-tile__status-pill[data-state="active"] .syn-business-tile__pill-icon {
	background: var(--swam-dashv2-active-ink);
	color: #ffffff;
}

.syn-business-tile--dashv2 .syn-business-tile__status-pill[data-state="locked"] {
	color: var(--swam-dashv2-locked-ink);
}
.syn-business-tile--dashv2 .syn-business-tile__status-pill[data-state="locked"] .syn-business-tile__pill-icon {
	background: var(--swam-dashv2-locked-ink);
	color: #ffffff;
}

.syn-business-tile--dashv2 .syn-business-tile__status-pill[data-state="expires-soon"] {
	color: var(--swam-dashv2-warn-ink);
}
.syn-business-tile--dashv2 .syn-business-tile__status-pill[data-state="expires-soon"] .syn-business-tile__pill-icon {
	background: var(--swam-dashv2-warn-ink);
	color: #ffffff;
}

/* Head: eyebrow + title + subtitle. r3: kompaktowe padding 16/12 (było 20/0). */
.syn-business-tile--dashv2 .syn-business-tile__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px 0;
}

.syn-business-tile--dashv2 .syn-business-tile__eyebrow {
	color: var(--swam-dashv2-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.syn-business-tile--dashv2 .syn-business-tile__title {
	margin: 0;
	color: var(--swam-dashv2-ink);
	font-size: clamp(1.25rem, 1.6vw, 1.55rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.005em;
}

.syn-business-tile--dashv2 .syn-business-tile__subtitle {
	margin: 0;
	color: var(--swam-dashv2-text);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Body — r3: kompaktowe padding, mniej gap, flex column */
.syn-business-tile--dashv2 .syn-business-tile__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 18px 18px;
	flex: 1 1 auto;
}

.syn-business-tile--dashv2 .syn-business-tile__description {
	margin: 0;
	color: var(--swam-dashv2-text);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* r3/r4: meta block ZAWSZE renderowany — chip statusu + linie `Aktywne kursy:` /
 * `Wygasa:` / `Pozostało:`. r4: `<details>` NIE jest już dzieckiem tego grida
 * (przeniesione do `.syn-business-tile__detailbar`), więc grid opisuje wyłącznie
 * chip + meta-items i nie ma ryzyka nachodzenia rozwiniętego boxa. */
.syn-business-tile--dashv2 .syn-business-tile__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 18px;
	row-gap: 5px;
	align-items: center;
	padding: 12px 16px;
	border-radius: var(--swam-dashv2-radius-sm);
	background: #ffffff;
	border: 1px solid rgba(75, 49, 83, 0.12);
}

/* Chip zajmuje pierwszą kolumnę i wszystkie wiersze meta-items. */
.syn-business-tile--dashv2 .syn-business-tile__meta-chip {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

/* r4: kropka statusu powiększona 8px → 12px — wyraźniejsza w meta chip. */
.syn-business-tile--dashv2 .syn-business-tile__meta-dot {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	border-radius: 999px;
	background: currentColor;
}

.syn-business-tile--dashv2 .syn-business-tile__meta-chip[data-state="active"] {
	color: var(--swam-dashv2-active-ink);
	background: var(--swam-dashv2-active-bg);
}

.syn-business-tile--dashv2 .syn-business-tile__meta-chip[data-state="locked"] {
	color: var(--swam-dashv2-locked-ink);
	background: var(--swam-dashv2-locked-bg);
}

.syn-business-tile--dashv2 .syn-business-tile__meta-chip[data-state="expires-soon"] {
	color: var(--swam-dashv2-warn-ink);
	background: var(--swam-dashv2-warn-bg);
}

/* Meta items — kolejne linie w drugiej kolumnie grida (Aktywne kursy /
 * Wygasa / Pozostało). r4: bez nazwanych grid-area — naturalny flow.
 * r5: powiększone i ciemniejsze dla czytelności. */
.syn-business-tile--dashv2 .syn-business-tile__meta-item {
	grid-column: 2;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--swam-dashv2-text);
}

.syn-business-tile--dashv2 .syn-business-tile__meta-label {
	color: var(--swam-dashv2-text-soft);
	font-size: 12px;
	letter-spacing: 0.02em;
	font-weight: 600;
}

.syn-business-tile--dashv2 .syn-business-tile__meta-value {
	color: var(--swam-dashv2-ink);
	font-weight: 700;
	font-size: 13px;
}

/* r4/r5: `Pokaż szczegóły` — pasek `detailbar` jako osobny block element
 * pod meta. r5: toggle to lekki tekstowy link (bez liliowego tła, bez
 * wyglądu selecta), odsunięty od krawędzi; box biały z czytelnym tekstem. */
.syn-business-tile--dashv2 .syn-business-tile__detailbar {
	display: block;
	margin-top: 8px;
}

.syn-business-tile--dashv2 .syn-business-tile__details {
	margin: 0;
	display: block;
}

/* r5: toggle — mały tekstowy link, przezroczyste tło, padding od krawędzi.
 * Nigdy jasnofioletowego/liliowego tła ani obramowania selecta. */
.syn-business-tile--dashv2 .syn-business-tile__details-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: -moz-fit-content;
	width: fit-content;
	padding: 6px 4px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--swam-dashv2-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	list-style: none;
	white-space: nowrap;
}

/* Toggle wyrównany do prawej w obrębie paska detailbar. */
.syn-business-tile--dashv2 .syn-business-tile__details > summary {
	display: flex;
	justify-content: flex-end;
}

.syn-business-tile--dashv2 .syn-business-tile__details-toggle::-webkit-details-marker {
	display: none;
}

.syn-business-tile--dashv2 .syn-business-tile__details-toggle::after {
	content: "▾";
	font-size: 11px;
	line-height: 1;
	transition: transform 160ms ease;
}

.syn-business-tile--dashv2 .syn-business-tile__details[open] .syn-business-tile__details-toggle::after {
	transform: rotate(180deg);
}

.syn-business-tile--dashv2 .syn-business-tile__details-toggle-hide {
	display: none;
}

.syn-business-tile--dashv2 .syn-business-tile__details[open] .syn-business-tile__details-toggle-show {
	display: none;
}

.syn-business-tile--dashv2 .syn-business-tile__details[open] .syn-business-tile__details-toggle-hide {
	display: inline;
}

.syn-business-tile--dashv2 .syn-business-tile__details:hover .syn-business-tile__details-toggle {
	color: var(--swam-dashv2-accent-strong);
	text-decoration: underline;
}

/* Details-box: r5 — biały box, normalny block flow, pełna szerokość paska,
 * line-height 1.5, czytelny tekst (13px), padding-left 16px, bez absolute
 * positioning ani negative margins. */
.syn-business-tile--dashv2 .syn-business-tile__details-box {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border-radius: var(--swam-dashv2-radius-sm);
	border: 1px solid var(--swam-dashv2-line);
	background: #ffffff;
}

.syn-business-tile--dashv2 .syn-business-tile__details-box strong {
	display: block;
	margin-bottom: 5px;
	color: var(--swam-dashv2-ink);
	font-size: 13px;
	line-height: 1.5;
}

.syn-business-tile--dashv2 .syn-business-tile__details-box p {
	margin: 0;
	color: var(--swam-dashv2-text);
	font-size: 13px;
	line-height: 1.5;
}

/* CTA — r3/r4: wypełnienie śliwką #4B3153, biały tekst, kompaktowe.
 * r4: kolory PRZYPIĘTE do konkretnych hexów (#4B3153 / hover #3F2746)
 * niezależnie od theme variant — dotyczy `Zobacz wszystkie kursy`,
 * `Kup dostęp`, `Wejdź do Studio`, `Wejdź do Library`. Wypełnienie,
 * NIE outline. */
.syn-business-tile--dashv2 .syn-business-tile__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
}

.syn-business-tile--dashv2 .syn-btn--dashv2-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	min-height: 46px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid #4B3153;
	background: #4B3153;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--swam-dashv2-shadow-btn);
	transition: background var(--swam-dashv2-trans), border-color var(--swam-dashv2-trans), transform var(--swam-dashv2-trans);
}

.syn-business-tile--dashv2 .syn-btn--dashv2-primary:hover,
.syn-business-tile--dashv2 .syn-btn--dashv2-primary:focus-visible {
	background: #3F2746;
	border-color: #3F2746;
	color: #ffffff;
	transform: translateY(-1px);
}

.syn-business-tile--dashv2 .syn-btn--dashv2-primary:active {
	transform: translateY(0);
}

.syn-business-tile--dashv2 .syn-business-tile__secondary {
	color: var(--swam-dashv2-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 2px 0;
}

.syn-business-tile--dashv2 .syn-business-tile__secondary:hover {
	color: var(--swam-dashv2-accent-strong);
	text-decoration: underline;
}

/* Focus-visible — a11y */
.syn-business-tile--dashv2 a:focus-visible,
.syn-business-tile--dashv2 summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(75, 49, 83, 0.20);
	border-radius: 8px;
}

/* ============================================================
 * 3. Dashboard layout — Studio + Library obok siebie na desktop
 * ============================================================ */

.syn-account-panel--dashv2 .syn-account-view--dashv2 .syn-account-grid--business,
.syn-account-panel--dashv2 .syn-account-view--dashv2 .syn-business-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(280px, 390px));
	justify-content: center;
	gap: 40px;
	align-items: stretch;
	width: 100%;
	max-width: 860px;
	margin: 4px auto 0;
}

@media (max-width: 991px) {
	.syn-account-panel--dashv2 .syn-account-view--dashv2 .syn-account-grid--business,
	.syn-account-panel--dashv2 .syn-account-view--dashv2 .syn-business-tiles {
		grid-template-columns: 1fr;
		gap: 16px;
		max-width: 430px;
	}
}

.syn-account-view--dashv2 .syn-business-tile--dashv2 {
	height: 100%;
}

/* ============================================================
 * 4. Studio catalog V2
 *    - 4.2.78: refreshed catalog page layout (1180px container,
 *      centered header with summary chips in top-right, balanced
 *      grid that starts cards from the left, fixed-height card
 *      media, equal-height cards). Aspect-ratio 9/16 was replaced
 *      by a controlled height (210px) so cards stop looking like
 *      portrait windows. All edits at the source — no !important.
 * ============================================================ */

/* Container — 1180px max, centered, comfortable vertical padding. */
.syn-studio-catalog--dashv2 {
	width: min(100%, 1180px);
	max-width: 1180px;
	margin: 0 auto;
	padding: 54px 24px 70px;
	box-sizing: border-box;
}

/* Header — title centered, summary chips absolute top-right. */
.syn-studio-catalog--dashv2 .syn-studio-catalog__header {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 38px;
	padding: 0;
	text-align: center;
	overflow: visible;
}

.syn-studio-catalog--dashv2 .syn-studio-catalog__summary {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	z-index: 2;
}

.syn-studio-catalog--dashv2 .syn-studio-catalog__summary-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.syn-studio-catalog--dashv2 .syn-studio-catalog__heading {
	display: block;
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.syn-studio-catalog--dashv2 .syn-studio-catalog__title {
	display: block;
	margin: 0 auto 14px;
	padding: 0;
	color: var(--swam-dashv2-ink, #1f1426);
	font-size: clamp(34px, 3.4vw, 46px);
	line-height: 1.08;
	font-weight: 850;
	letter-spacing: -0.04em;
	text-align: center;
}

.syn-studio-catalog--dashv2 .syn-studio-catalog__intro {
	display: block;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
	color: var(--swam-dashv2-text, #5C5062);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	white-space: normal;
}

/* Grid — cards start from the left (justify: start), auto-fill so a
 * single card sits flush-left and 2/3/6 cards line up cleanly. */
.syn-studio-catalog--dashv2 .syn-studio-catalog__grid,
.syn-studio-catalog--dashv2 .syn-card-grid--dashv2 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 380px));
	justify-content: start;
	align-items: stretch;
	gap: 30px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.syn-studio-catalog--dashv2 .syn-studio-course--dashv2 {
	width: 100%;
	max-width: 380px;
	min-height: 0;
	height: 100%;
}

.syn-studio-course--dashv2 .syn-studio-course__shell {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 455px;
	background: var(--swam-dashv2-surface);
	border: 1px solid var(--swam-dashv2-line);
	border-radius: var(--swam-dashv2-radius-lg);
	overflow: hidden;
	box-shadow: var(--swam-dashv2-shadow);
	transition:
		transform var(--swam-dashv2-trans),
		box-shadow var(--swam-dashv2-trans),
		border-color var(--swam-dashv2-trans);
}

.syn-studio-course--dashv2:hover .syn-studio-course__shell {
	transform: translateY(-3px);
	box-shadow: var(--swam-dashv2-shadow-strong);
	border-color: var(--swam-dashv2-line-strong);
}

/* 4.2.78: card media was forced to 9 / 16 (portrait window). Replaced
 * at the source with a controlled height — no aspect-ratio override,
 * no !important needed because this IS the source rule. */
.syn-studio-course--dashv2 .syn-studio-course__media-wrap--dashv2 {
	position: relative;
	height: 210px;
	min-height: 210px;
	max-height: 210px;
	overflow: hidden;
	background: var(--swam-dashv2-glow);
}

.syn-studio-course--dashv2 .syn-studio-course__media-wrap--dashv2 .syn-studio-course__media {
	width: 100%;
	height: 210px;
	min-height: 210px;
	max-height: 210px;
}

.syn-studio-course--dashv2 .syn-studio-course__media-wrap--dashv2 .syn-studio-course__media img {
	display: block;
	width: 100%;
	height: 210px;
	min-height: 210px;
	max-height: 210px;
	object-fit: cover;
	object-position: center;
	transition: transform 420ms cubic-bezier(.2, .72, .2, 1);
}

.syn-studio-course--dashv2:hover .syn-studio-course__media img {
	transform: scale(1.03);
}

.syn-studio-course--dashv2[data-access-state="locked"] .syn-studio-course__media img {
	filter: saturate(0.85) contrast(0.98);
}

.syn-studio-course--dashv2 .syn-studio-course__status-pill {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 28px;
	padding: 5px 10px 5px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	width: auto;
	max-width: max-content;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
	backdrop-filter: blur(4px);
}

.syn-studio-course--dashv2 .syn-studio-course__pill-icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 999px;
}

.syn-studio-course--dashv2 .syn-studio-course__pill-icon svg {
	width: 10px;
	height: 10px;
}

.syn-studio-course--dashv2 .syn-studio-course__status-pill[data-state="active"] {
	color: var(--swam-dashv2-active-ink);
}
.syn-studio-course--dashv2 .syn-studio-course__status-pill[data-state="active"] .syn-studio-course__pill-icon {
	background: var(--swam-dashv2-active-ink);
	color: #ffffff;
}

.syn-studio-course--dashv2 .syn-studio-course__status-pill[data-state="locked"] {
	color: var(--swam-dashv2-locked-ink);
}
.syn-studio-course--dashv2 .syn-studio-course__status-pill[data-state="locked"] .syn-studio-course__pill-icon {
	background: var(--swam-dashv2-locked-ink);
	color: #ffffff;
}

.syn-studio-course--dashv2 .syn-studio-course__status-pill[data-state="expires-soon"] {
	color: var(--swam-dashv2-warn-ink);
}
.syn-studio-course--dashv2 .syn-studio-course__status-pill[data-state="expires-soon"] .syn-studio-course__pill-icon {
	background: var(--swam-dashv2-warn-ink);
	color: #ffffff;
}

.syn-studio-course--dashv2 .syn-studio-course__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
	flex: 1 1 auto;
	min-height: 0;
}

.syn-studio-course--dashv2 .syn-studio-course__title {
	margin: 0;
	padding: 0;
	color: var(--swam-dashv2-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.syn-studio-course--dashv2 .syn-studio-course__excerpt {
	margin: 0;
	padding: 0;
	color: var(--swam-dashv2-text);
	font-size: 14px;
	line-height: 1.45;
	min-height: 62px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.syn-studio-course--dashv2 .syn-studio-course__footer {
	margin-top: auto;
	padding-top: 14px;
}

.syn-studio-course--dashv2 .syn-studio-course__actions {
	margin: 0;
	padding: 0;
}

/* r5: studio-course CTA przypięte do śliwki #4B3153 (jak kafle dashboardu).
 * 4.2.78: padding/size aligned with catalog spec. */
.syn-studio-course--dashv2 .syn-btn--dashv2-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid #4B3153;
	background: #4B3153;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: var(--swam-dashv2-shadow-btn);
	transition: background var(--swam-dashv2-trans), border-color var(--swam-dashv2-trans), transform var(--swam-dashv2-trans);
}

.syn-studio-course--dashv2 .syn-btn--dashv2-primary:hover,
.syn-studio-course--dashv2 .syn-btn--dashv2-primary:focus-visible {
	background: #3F2746;
	border-color: #3F2746;
	transform: translateY(-1px);
}

/* ============================================================
 * 5. Reduced motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.syn-business-tile--dashv2,
	.syn-business-tile--dashv2 .syn-business-tile__visual img,
	.syn-business-tile--dashv2 .syn-btn--dashv2-primary,
	.syn-studio-course--dashv2 .syn-studio-course__shell,
	.syn-studio-course--dashv2 .syn-studio-course__media img,
	.syn-studio-course--dashv2 .syn-btn--dashv2-primary {
		transition: none;
	}

	.syn-business-tile--dashv2:hover,
	.syn-business-tile--dashv2 .syn-btn--dashv2-primary:hover,
	.syn-studio-course--dashv2:hover .syn-studio-course__shell,
	.syn-studio-course--dashv2 .syn-btn--dashv2-primary:hover {
		transform: none;
	}
}

/* ============================================================
 * 6. Panel V2 outer shell — hero + content + nav BELOW tiles
 * ============================================================ */

.syn-account-panel.syn-account-panel--dashv2 {
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	color: var(--swam-dashv2-ink);
}

/* Hero: prosty nagłówek konta bez kremowej karty i danych użytkownika. */
.syn-account-panel--dashv2 .syn-account-panel__hero--dashv2 {
	margin-bottom: 18px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--swam-dashv2-line);
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
}

.syn-account-panel--dashv2 .syn-account-panel__title--dashv2 {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	margin: 0;
	padding: 7px 12px;
	border: 1px solid var(--swam-dashv2-line);
	border-radius: 999px;
	background: #ffffff;
	color: var(--swam-dashv2-ink);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.syn-account-panel--dashv2 .syn-account-panel__greeting--dashv2 {
	margin: 0 0 3px;
	color: var(--swam-dashv2-text);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.4;
}

.syn-account-panel--dashv2 .syn-account-panel__email--dashv2 {
	margin: 0;
	color: var(--swam-dashv2-text-soft);
	font-size: 0.88rem;
	line-height: 1.4;
}

/* Defensive: ukryj legacy hero meta (mini-stats) gdyby filter je wstrzyknął */
.syn-account-panel--dashv2 .syn-account-panel__hero-meta,
.syn-account-panel--dashv2 .syn-mini-stat {
	display: none;
}

/* r4: shell to pojedyncza kolumna — content zawiera kafle, slot menu,
 * intro i premium_courses w jednym strumieniu block flow. */
.syn-account-panel--dashv2 .syn-account-shell--dashv2 {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.syn-account-panel--dashv2 .syn-account-content--dashv2 {
	min-width: 0;
}

/* r5: nav — pełnoszerokościowy pasek nawigacji konta. Stylowany przez
 * modyfikator `.syn-account-nav--dashv2`, więc działa NA WSZYSTKICH
 * widokach (dashboard + Studio + Dostęp + ...), nie tylko pod kaflami.
 * Większy padding/gap — wygląda jak pełny pasek, nie doklejony chip-bar. */
.syn-account-panel--dashv2 .syn-account-nav--dashv2 {
	display: block;
	width: 100%;
	max-width: 1040px;
	margin: 36px auto 0;
	padding: 10px 12px;
	background: var(--swam-dashv2-surface);
	border: 1px solid var(--swam-dashv2-line);
	border-radius: var(--swam-dashv2-radius-md);
	box-shadow: 0 12px 32px rgba(31, 27, 36, 0.05);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 100%;
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li {
	margin: 0;
}

/* r5: chipy czytelniejsze — większy padding, ciemniejszy tekst, 14px. */
.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 15px;
	border-radius: 999px;
	color: var(--swam-dashv2-ink);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
	transition: background var(--swam-dashv2-trans), color var(--swam-dashv2-trans);
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li a:hover {
	background: var(--swam-dashv2-glow);
	color: var(--swam-dashv2-ink);
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li.is-current a {
	background: #4B3153;
	color: #ffffff;
	font-weight: 700;
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li.is-current a:hover {
	background: #3F2746;
	color: #ffffff;
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__badge {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #4B3153;
	flex: 0 0 8px;
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__logout {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__logout a {
	color: var(--swam-dashv2-text);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Focus-visible — a11y */
.syn-account-panel--dashv2 a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(75, 49, 83, 0.20);
	border-radius: 8px;
}

/* ============================================================
 * 7. Mobile tweaks
 * ============================================================ */

/* 4.2.78: tablet breakpoint — Studio catalog summary chips drop into
 * the flow (no longer absolutely positioned in the top-right), grid
 * centers under the heading instead of left-aligning. */
@media (max-width: 1024px) {
	.syn-studio-catalog--dashv2 .syn-studio-catalog__summary {
		position: static;
		justify-content: center;
		margin: 14px auto 0;
	}

	.syn-studio-catalog--dashv2 .syn-studio-catalog__grid,
	.syn-studio-catalog--dashv2 .syn-card-grid--dashv2 {
		justify-content: center;
	}
}

@media (max-width: 991px) {
	.syn-account-panel--dashv2 .syn-account-nav--dashv2 {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.syn-account-panel--dashv2 .syn-account-panel__hero--dashv2 {
		padding: 0 0 12px;
		border-radius: 0;
		margin-bottom: 16px;
	}

	.syn-business-tile--dashv2 {
		border-radius: var(--swam-dashv2-radius-md);
	}

	.syn-business-tile--dashv2 .syn-business-tile__visual {
		aspect-ratio: 1 / 1;
		border-radius: var(--swam-dashv2-radius-md) var(--swam-dashv2-radius-md) 0 0;
	}

	.syn-business-tile--dashv2 .syn-business-tile__head {
		padding: 14px 16px 0;
	}

	.syn-business-tile--dashv2 .syn-business-tile__body {
		padding: 10px 16px 16px;
		gap: 10px;
	}

	/* Mobile: meta block jedno-kolumnowy, chip nad meta-items */
	.syn-business-tile--dashv2 .syn-business-tile__meta {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.syn-business-tile--dashv2 .syn-business-tile__meta-chip {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.syn-business-tile--dashv2 .syn-business-tile__meta-item {
		grid-column: 1;
	}

	.syn-business-tile--dashv2 .syn-btn--dashv2-primary {
		width: 100%;
		min-width: 0;
	}

	.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list {
		gap: 2px;
	}

	.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li a {
		padding: 7px 11px;
		font-size: 0.85rem;
	}

	.syn-studio-catalog--dashv2 {
		padding: 36px 16px 56px;
	}

	.syn-studio-catalog--dashv2 .syn-studio-catalog__title {
		font-size: 34px;
	}

	.syn-studio-catalog--dashv2 .syn-studio-catalog__grid,
	.syn-studio-catalog--dashv2 .syn-card-grid--dashv2 {
		grid-template-columns: minmax(0, 1fr);
		justify-content: center;
		gap: 16px;
	}

	.syn-studio-catalog--dashv2 .syn-studio-course--dashv2 {
		max-width: none;
	}

	.syn-studio-catalog--dashv2 .syn-studio-course--dashv2 .syn-studio-course__shell {
		min-height: 0;
	}

	/* 4.2.78: mobile keeps the 9 / 16 aspect ratio out — explicit height
	 * 220px so the card stays compact instead of going portrait. */
	.syn-studio-catalog--dashv2 .syn-studio-course--dashv2 .syn-studio-course__media-wrap--dashv2,
	.syn-studio-catalog--dashv2 .syn-studio-course--dashv2 .syn-studio-course__media,
	.syn-studio-catalog--dashv2 .syn-studio-course--dashv2 .syn-studio-course__media img {
		height: 220px;
		min-height: 220px;
		max-height: 220px;
	}
}

/* ============================================================
 * 8. r5 — główne CTA śliwkowe w widokach V2 (access / studio / panel)
 * ============================================================
 *
 * Widoki access/studio renderują główne CTA legacy klasą `.syn-btn`.
 * Gdy są renderowane wewnątrz panelu V2 (`.syn-account-panel--dashv2`),
 * mają wyglądać śliwkowo — wypełnione, nie outline. Reguła jest scoped
 * do V2, więc legacy panel (`.syn-account-panel` bez `--dashv2`) i
 * `account.css` pozostają nietknięte.
 *
 * Wyłączenia: `.syn-link` (tekstowe linki nagłówków) i `.syn-account-nav`
 * (pasek menu ma własny styling) — nie są głównymi CTA.
 */
.syn-account-panel--dashv2 .syn-btn:not(.syn-link):not(.syn-btn--ghost) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid #4B3153;
	background: #4B3153;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--swam-dashv2-shadow-btn);
	transition: background var(--swam-dashv2-trans), border-color var(--swam-dashv2-trans), transform var(--swam-dashv2-trans);
}

.syn-account-panel--dashv2 .syn-btn:not(.syn-link):not(.syn-btn--ghost):hover,
.syn-account-panel--dashv2 .syn-btn:not(.syn-link):not(.syn-btn--ghost):focus-visible {
	background: #3F2746;
	border-color: #3F2746;
	color: #ffffff;
	transform: translateY(-1px);
}

.syn-account-panel--dashv2 .syn-btn:not(.syn-link):not(.syn-btn--ghost):active {
	transform: translateY(0);
}

/* `.syn-btn--ghost` w panelu V2: secondary tekstowy link śliwkowy bez tła,
 * NIE biały outline jako główny styl. */
.syn-account-panel--dashv2 .syn-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: #4B3153;
	font-weight: 700;
	text-decoration: none;
}

.syn-account-panel--dashv2 .syn-btn--ghost:hover {
	color: #3F2746;
	text-decoration: underline;
}


/* =========================================================================
   ============  SYNAPSE dashboard/menu fix (4.3.4) — WYGLĄD  ==============
   =========================================================================
   Ten blok jest świadomie na końcu arkusza i odpowiada WYŁĄCZNIE za wygląd.
   Struktura (kolejność hero → menu → treść, kafel = visual+content, status
   jako kropka+tekst, brak badge na zdjęciu) jest już naprawiona w PHP:
   panel-v2.php + business-tiles-v2.php. Tu nie ma żadnych hacków `order`
   ani wstrzykiwania tekstu — czysta kosmetyka na realnych klasach V2.

   UWAGA: jeśli wcześniej wgrany był zewnętrzny patch CSS w motywie
   (synapse-panel.css), można go teraz USUNĄĆ — ten arkusz jest źródłem prawdy.

   Zmienne wymiarów na dole — łatwe do strojenia.
   ========================================================================= */
.syn-account-panel--dashv2 {
  --syn-brand:        #4B3153;
  --syn-brand-hover:  #3F2746;
  --syn-ink:          #1F1B24;
  --syn-muted:        #6E6675;
  --syn-ok:           #1E9E57;
  --syn-locked:       #8C8493;
  --syn-surface:      #FFFFFF;
  --syn-surface-soft: #FBF8FC;
  --syn-border:       rgba(75, 49, 83, 0.10);
  --syn-shadow:       0 12px 30px rgba(31, 27, 36, 0.06);
  --syn-shadow-menu:  0 6px 18px rgba(31, 27, 36, 0.05);

  --syn-panel-max:    1560px;
  --syn-grid-max:     1500px;
  --syn-tile-gap:     36px;
  --syn-img-w:        268px;
  --syn-img-h:        200px;
  --syn-tile-min-h:   252px;

  --syn-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Kontener panelu — szeroki, wyśrodkowany */
.syn-account-panel--dashv2 {
  max-width: var(--syn-panel-max) !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  box-sizing: border-box !important;
}

/* Poszerzenie wąskiego kontenera motywu (Elementor/WP), gdy obcina panel */
:is(.entry-content, .page-content, .post-content, .content-area, .site-content,
    .e-con-inner, .e-con, .elementor-widget-container, main, article):has(.syn-account-panel--dashv2) {
  max-width: none !important;
  width: 100% !important;
}

/* ---------- NAGŁÓWEK (tylko dashboard — hero renderuje PHP) ---------- */
.syn-account-panel--dashv2 .syn-account-panel__hero--dashv2 {
  margin: 30px auto 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}
.syn-account-panel--dashv2 .syn-account-panel__title--dashv2 {
  margin: 0 !important;
  color: var(--syn-ink) !important;
  font-family: var(--syn-font) !important;
  font-size: clamp(34px, 3.2vw, 44px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}
.syn-account-panel--dashv2 .syn-account-panel__subtitle--dashv2 {
  max-width: 760px !important;
  margin: 10px auto 0 !important;
  color: var(--syn-muted) !important;
  font-family: var(--syn-font) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* Minimalizm: ukrycie bloków pomocy/„Jak czytać ten panel” na dashboardzie */
.syn-account-panel--dashv2 :is(.syn-account-help, .syn-account-help--soft,
  .syn-dashboard-help, .syn-dashboard-guide, .syn-account-intro) {
  display: none !important;
}

/* ----------------------- MENU (pasek-pill) ----------------------- */
.syn-account-panel--dashv2 .syn-account-nav--dashv2 {
  width: 100% !important;
  max-width: var(--syn-grid-max) !important;
  margin: 12px auto 24px !important;
  padding: 0 !important;
  text-align: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: max-content !important;
  margin: 0 auto !important;
  padding: 6px !important;
  list-style: none !important;
  background: var(--syn-surface-soft) !important;     /* jasne, nie fioletowe */
  border: 1px solid var(--syn-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--syn-shadow-menu) !important;
}
.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--syn-brand) !important;
  font-family: var(--syn-font) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 150ms ease, color 150ms ease !important;
}
.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list a:hover {
  background: rgba(75, 49, 83, 0.06) !important;
  color: var(--syn-brand-hover) !important;
}
.syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list li.is-current > a {
  background: var(--syn-brand) !important;
  color: #ffffff !important;
}

/* ----------------- SIATKA KAFLI: dwa obok siebie ----------------- */
.syn-account-panel--dashv2 .syn-business-tiles--dashv2,
.syn-account-panel--dashv2 .syn-account-grid--dashv2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--syn-tile-gap) !important;
  width: 100% !important;
  max-width: var(--syn-grid-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

/* ---------------- KAFEL: szeroki, niski, poziomy ---------------- */
.syn-account-panel--dashv2 .syn-business-tile--dashv2 {
  display: grid !important;
  grid-template-columns: var(--syn-img-w) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 28px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--syn-tile-min-h) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: var(--syn-surface) !important;
  border: 1px solid var(--syn-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--syn-shadow) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Zdjęcie po lewej — mocny blok, wyśrodkowane pionowo */
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__visual {
  grid-column: 1 !important;
  align-self: center !important;
  position: relative !important;
  width: var(--syn-img-w) !important;
  height: var(--syn-img-h) !important;
  margin: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 20px !important;
  transition: transform 300ms ease !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2:hover .syn-business-tile__visual img {
  transform: scale(1.03) !important;
}

/* Treść po prawej */
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__content {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}

/* Status: kropka + tekst (bez tła/kapsułki) */
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__meta {
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__meta-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--syn-muted) !important;
  font-family: var(--syn-font) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__meta-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__meta-chip[data-state="active"] {
  color: var(--syn-ok) !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__meta-chip[data-state="locked"] {
  color: var(--syn-locked) !important;
}

/* Tytuł / opis */
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__title {
  margin: 0 !important;
  color: var(--syn-ink) !important;
  font-family: var(--syn-font) !important;
  font-size: clamp(30px, 2.1vw, 32px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__description {
  margin: 2px 0 0 0 !important;
  color: var(--syn-muted) !important;
  font-family: var(--syn-font) !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Przycisk — pigułka, uppercase */
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__cta {
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  background: var(--syn-brand) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(75, 49, 83, 0.18) !important;
  font-family: var(--syn-font) !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-btn:hover {
  background: var(--syn-brand-hover) !important;
  box-shadow: 0 10px 24px rgba(75, 49, 83, 0.26) !important;
  transform: translateY(-1px) !important;
}

/* Stany kafla */
.syn-account-panel--dashv2 .syn-business-tile--dashv2[data-access-state="locked"] .syn-business-tile__visual img {
  filter: grayscale(12%) saturate(0.92) brightness(0.97) !important;
}
.syn-account-panel--dashv2 .syn-business-tile--dashv2[data-access-state="active"] {
  box-shadow: inset 3px 0 0 0 var(--syn-ok), var(--syn-shadow) !important;
}

/* ----------------------------- RWD ----------------------------- */
@media (max-width: 1100px) {
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 {
    grid-template-columns: 225px minmax(0, 1fr) !important;
    column-gap: 22px !important;
    min-height: 222px !important;
  }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__visual {
    width: 225px !important;
    height: 176px !important;
  }
}
@media (max-width: 900px) {
  .syn-account-panel--dashv2 .syn-business-tiles--dashv2,
  .syn-account-panel--dashv2 .syn-account-grid--dashv2 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}
@media (max-width: 640px) {
  .syn-account-panel--dashv2 .syn-account-panel__title--dashv2 { font-size: 27px !important; }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    min-height: 0 !important;
    padding: 16px !important;
  }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__visual {
    grid-column: 1 !important;
    width: 100% !important;
    height: 185px !important;
  }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__content {
    grid-column: 1 !important;
  }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__title { font-size: 26px !important; }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-business-tile__cta { width: 100% !important; }
  .syn-account-panel--dashv2 .syn-business-tile--dashv2 .syn-btn { width: 100% !important; }
  .syn-account-panel--dashv2 .syn-account-nav--dashv2 { text-align: left !important; }
  .syn-account-panel--dashv2 .syn-account-nav--dashv2 .syn-account-nav__list { justify-content: flex-start !important; }
}
/* ===================  KONIEC SYNAPSE fix (4.3.4)  =================== */