.ssk-wrap {
	--ssk-page-bg: #eef2f7;
	--ssk-card-bg: #ffffff;
	--ssk-line: #e3e9f1;
	--ssk-ink: #1e2a3a;
	--ssk-muted: #8996a8;
	--ssk-blue: #2f7fe0;
	--ssk-blue-dark: #1c5fc0;
	--ssk-blue-pale: #eaf2fd;
	--ssk-up: #1fa971;
	--ssk-down: #d3453b;

	--ssk-font-display: 'Inter', 'Segoe UI', sans-serif;
	--ssk-font-body: 'Inter', 'Segoe UI', sans-serif;
	--ssk-font-mono: 'IBM Plex Mono', monospace;

	color: var(--ssk-ink);
	font-family: var(--ssk-font-body);
	margin: 0 auto;
	padding: 20px 16px 56px;
	border-radius: 16px;
}

.ssk-wrap * {
	box-sizing: border-box;
}

/* Kafelki kategorii */
.ssk-categories {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
	max-width: 980px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ssk-categories::-webkit-scrollbar {
	display: none;
}

.ssk-cat-tile {
	display: flex!important;
	align-items: center;
	gap: 15px;
	    background: #FFFFFF26!important;
	border: 1px solid #FFFFFF!important;
	border-radius: 6px!important;
	padding: 8px!important;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	flex: 0 0 calc((100% - 20px) / 3);
	scroll-snap-align: start;
}

.ssk-cat-tile:hover {
	border-color: var(--ssk-blue);
}

.ssk-cat-tile.is-active {
	border-color: var(--ssk-blue);
	box-shadow: 0 0 0 3px var(--ssk-blue-pale);
}

.ssk-cat-tile__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    padding: 14px;
    background: #F8F8F8;
    color: var(--ssk-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ssk-cat-tile__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ssk-cat-tile__icon-svg {
	width: 16px;
	height: 16px;
}

.ssk-cat-tile__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
}

.ssk-cat-tile__title {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 3%;
    font-family: 'ff-utility-web-pro', sans-serif;
}

.ssk-cat-tile__subtitle {
    font-size: 14px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 350;
    font-family: 'ff-utility-web-pro', sans-serif;
    letter-spacing: 3%;
}

/* Lista pozycji */
.ssk-list {
display: flex;
    flex-direction: column;
    margin-bottom: 4.688rem;
    margin-top: 4.125rem;
	gap: 1rem;
}

.ssk-empty-catalog {
	color: var(--ssk-muted);
	padding: 20px;
	text-align: center;
}

.ssk-row {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 1.5rem;
    border: 1px solid #FFFFFF;
    flex-wrap: wrap;
	border-radius: .5rem;
	transition: all .3s;
}

.ssk-row:hover {
	background: #FFFFFF80;
}

.ssk-cat-tile.is-active {
	background: #FFFFFF !important;
}

.ssk-cat-title:hover {
	background: #fff!important;
}

.ssk-row__media {
    flex-shrink: 0;
    width: 90px;
    height: 116px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f5;
}

.ssk-row__media img {
	width: 100%;
	height: 100%!important;
	object-fit: cover;
	display: block;
}

.ssk-row__media-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #e7e9ee, #e7e9ee 8px, #dde1e8 8px, #dde1e8 16px);
}

.ssk-row__info {
	flex: 0 0 315px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ssk-row__title {
    font-size: 1.25rem;
    font-weight: 350;
    color: #24BAE8;
    margin: 0;
    font-family: 'ddt', sans-serif;
}

.ssk-more {
    align-self: flex-start;
    background: none;
    border: none;
    color: #013563;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4%;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    font-family: 'ff-utility-web-pro', sans-serif;
}

.ssk-more:hover {
	color: var(--ssk-blue-dark);
}

.ssk-row__info-panel {
	flex-basis: 100%;
	font-size: 13px;
	color: #4a5568;
	background: #f4f7fb;
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 6px;
}

.ssk-row__info-panel p {
	margin: 0 0 6px;
}

.ssk-row__info-panel p:last-child {
	margin-bottom: 0;
}

.ssk-note {
	font-style: italic;
	color: var(--ssk-muted);
}

.ssk-row__price {
	flex: 0 0 190px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ssk-price {
    font-size: 20px;
    font-weight: 350;
    color: #24BAE8;
    font-family: 'ddt', sans-serif;
}

.ssk-price--unavailable {
	font-size: 13px;
	font-weight: 500;
	color: var(--ssk-muted);
}



.ssk-change-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}

.ssk-change {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    color: #013462;
    font-size: 14px;
    font-family: 'Geist', sans-serif;
    letter-spacing: 8%;
}

.ssk-change__icon {
	flex-shrink: 0;
	display: block;
}



.ssk-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #013462;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.03em;
    font-weight: 400;
}

.ssk-live-tag__icon {
	flex-shrink: 0;
	display: block;
}

.ssk-row__qty {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.ssk-qty-add {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ssk-stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--ssk-line);
	border-radius: 8px;
	overflow: hidden;
	background: #f7f9fc;
}

.ssk-step {
    width: 58px !important;
    height: 58px;
    background: transparent;
    border: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: #013462 !important;
    border: none !important;
}

.ssk-step:hover {
	background: var(--ssk-line);
}

.ssk-qty-display {
    min-width: 115px;
    text-align: center;
    font-size: 14px;
    color: #013462;
    letter-spacing: 4%;
    text-transform: uppercase;
    font-family: 'ff-utility-web-pro', sans-serif;
}

.ssk-add {
    text-transform: uppercase;
    transition: opacity 0.15s ease;
    height: 58px !important;
    border: none !important;
    background: linear-gradient(267.46deg, #002C6A 0.62%, #5AE1FF 103.71%);
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'ff-utility-web-pro', sans-serif;
    letter-spacing: 4%;
    padding: 0 52px !important;
}

.ssk-add:hover {
	opacity: 0.9;
}

.ssk-add:disabled {
	background: #c3cbd6;
	cursor: not-allowed;
}

.ssk-min-qty {
    font-size: 12px;
    color: #013462;
    text-transform: uppercase;
    letter-spacing: 12%;
    font-weight: 400;
    font-family: 'ddt';
}

/* Podsumowanie */
.ssk-summary {
    background: #FFFFFF80;
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 2rem;
}

.ssk-summary__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 99px;
}

.ssk-summary__title {
font-size: 36px;
    font-weight: 350;
    text-transform: uppercase;
    color: #002146;
    font-family: 'ddt', sans-serif;
}

.ssk-summary__count {
font-size: 12px;
    color: #013462;
    text-transform: uppercase;
    letter-spacing: 12%;
    font-family: 'ff-utility-web-pro', sans-serif;
}

.ssk-summary__count b {
    color: #00B6F1;
    font-weight: inherit !important;
}

.ssk-summary__empty {
	color: var(--ssk-muted);
	font-size: 13.5px;
	margin: 0;
}

.ssk-collapse-toggle:hover {
	background: transparent!important;
}

.ssk-summary__list {
    list-style: none;
    margin: 0 0 98px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ssk-summary__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ssk-line);
}

.ssk-summary__list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ssk-summary__item-remove {
    background: none !important;
    border: none !important;
    color: #24BAE8 !important;
    line-height: 1;
    padding: 0 !important;
    flex-shrink: 0;
    width: 36px !important;
    height: 12px !important;
}

.ssk-summary__item-remove:hover {
	color: var(--ssk-down);
}

.ssk-summary__item-name {
    color: #24BAE8;
    font-weight: 350;
    flex: 0 0 130px;
    font-size: 20px;
    font-family: 'ddt', sans-serif;
}

.ssk-summary__item-qty {
    flex: 0 0 70px;
    color: #013462;
    font-size: 20px;
    font-weight: 350;
    font-family: 'ddt', sans-serif;
}

.ssk-summary__item-unit-price {
    flex: 0 0 140px;
    color: #013462;
    font-size: 20px;
    margin-left: auto;
    font-weight: 350;
    font-family: 'ddt', sans-serif;
}

.ssk-summary__item-value {
    flex: 0 0 auto;
    font-weight: 350;
    color: #24BAE8;
    font-family: 'ddt', sans-serif;
    font-size: 20px;
}

.ssk-summary__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 6px;
}

.ssk-summary__totals {
	display: flex;
	gap: 28px;
}

.ssk-summary__total-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ssk-summary__total-label {
    font-size: 20px;
    color: #24BAE8;
    font-family: 'ddt', sans-serif;
    font-weight: 300;
}

.ssk-summary__weight,
.ssk-summary__value {
    font-size: 28px;
    font-weight: 300;
    color: #013462;
    font-family: 'ddt', sans-serif;
}

.ssk-submit-open {
    font-family: var(--ssk-font-display);
    text-transform: uppercase;
    letter-spacing: 4% !important;
    background: linear-gradient(262deg, #002C6A, #5AE1FF);
    flex: 1 1 220px;
    max-width: 519px;
    height: 72px;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    border: none !important;
}

.ssk-submit-open:hover {
	opacity: 0.92;
}

.ssk-collapse-toggle {
    align-items: center;
    justify-content: center;
    background: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    margin-top: 52px !important;
    width: 100% !important;
    border: none !important;
    border-top: 1px solid #C5DCE3 !important;
    padding-top: 32px !important;
    display: flex !important;
    flex-direction: column;
}

.ssk-collapse-toggle__label {
	    font-size: 13px;
    font-family: 'ff-utility-web-pro', sans-serif;
    color: #013563;
    letter-spacing: 4%;
    font-weight: 500;
    text-transform: uppercase;
}

.ssk-collapse-toggle:hover {
	color: var(--ssk-blue);
}

.ssk-collapse-toggle__arrow {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.ssk-summary.is-collapsed .ssk-collapse-toggle__arrow {
	transform: rotate(180deg);
}

.ssk-summary.is-collapsed .ssk-summary__list,
.ssk-summary.is-collapsed .ssk-summary__footer {
	display: none;
}

/* Modal kontaktowy */
.ssk-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ssk-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 40, 0.5);
}

.ssk-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 14px;
	padding: 28px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(20, 28, 40, 0.25);
}

.ssk-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: var(--ssk-muted);
	cursor: pointer;
}

.ssk-modal__dialog h3 {
	margin: 0 0 4px;
	font-size: 17px;
	color: var(--ssk-ink);
}

.ssk-modal__lead {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--ssk-muted);
}

.ssk-contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ssk-contact input,
.ssk-contact textarea {
	width: 100%;
	padding: 11px 12px;
	border-radius: 8px;
	border: 1px solid var(--ssk-line);
	background: #f7f9fc;
	color: var(--ssk-ink);
	font-family: var(--ssk-font-body);
	font-size: 14px;
}

.ssk-contact input::placeholder,
.ssk-contact textarea::placeholder {
	color: var(--ssk-muted);
}

.ssk-contact textarea {
	min-height: 70px;
	resize: vertical;
}

.ssk-submit {
	font-family: var(--ssk-font-display);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: linear-gradient(90deg, #33a1e8, var(--ssk-blue-dark));
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 13px 24px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 4px;
}

.ssk-submit:hover {
	opacity: 0.92;
}

.ssk-submit:disabled {
	background: #c3cbd6;
	cursor: not-allowed;
}

.ssk-status {
	margin: 8px 0 0;
	font-size: 13px;
}

.ssk-status.is-success {
	color: var(--ssk-up);
}

.ssk-status.is-error {
	color: var(--ssk-down);
}

/* Lekki wariant kontenera do osadzenia samej ceny na podstronie pojedynczego surowca */
.ssk-single-price {
	max-width: none;
	padding: 0;
	border-radius: 0;
	background: transparent;
	display: inline-block;
}

.ssk-single-price__inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Karuzela "Głównych klas" — swiper z asymetrycznym bleedem do krawędzi ekranu.
   UWAGA: --ssk-klasy-container zakłada, że kontener Twojej strony ma ok. 1200px.
   Jeśli Twój motyw ma inną szerokość kontenera, zmień tę wartość, żeby lewa/prawa
   krawędź slidera równała się dokładnie z resztą treści na stronie. */
.ssk-klasy {
	max-width: none;
	padding: 0;
	--ssk-klasy-container: 1200px;
	--ssk-klasy-inset: max(calc((100vw - var(--ssk-klasy-container)) / 2), 24px);
}

.ssk-klasy__bleed {
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	padding-left: var(--ssk-klasy-inset);
	padding-right: 24px;
	transition: padding 0.3s ease;
}

/* Na ostatniej stronie slidera odwracamy strony: lewo bleeduje do krawędzi, prawo równa się z kontenerem. */
.ssk-klasy.is-at-end .ssk-klasy__bleed {
	padding-left: 24px;
	padding-right: var(--ssk-klasy-inset);
}

.ssk-klasy__viewport {
	overflow: hidden;
}

.ssk-klasy__track {
	display: flex;
	transition: transform 0.35s ease;
}

.ssk-klasa-card {
	flex: 0 0 33.333%;
	box-sizing: border-box;
	padding: 0 28px;
	border-left: 1px solid var(--ssk-line);
}

.ssk-klasa-card:first-child {
	border-left: none;
	padding-left: 0;
}

.ssk-klasa-card__media {
	width: 150px;
	height: 150px;
	border-radius: 6px;
	overflow: hidden;
	background: #eef1f5;
	margin-bottom: 18px;
}

.ssk-klasa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ssk-klasa-card__media-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #e7e9ee, #e7e9ee 8px, #dde1e8 8px, #dde1e8 16px);
}

.ssk-klasa-card__title {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--ssk-ink);
	line-height: 1.4;
}

.ssk-klasa-card__subtitle {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 14px;
	color: var(--ssk-ink);
	line-height: 1.4;
}

.ssk-klasa-card__text {
	font-size: 13.5px;
	color: var(--ssk-muted);
	line-height: 1.7;
}

.ssk-klasa-card__text p {
	margin: 0 0 14px;
}

.ssk-klasa-card__text p:last-child {
	margin-bottom: 0;
}

.ssk-klasy__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 32px;
	padding: 0 24px;
}

.ssk-klasy__arrow {
	background: none;
	border: none;
	color: var(--ssk-blue);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.ssk-klasy__arrow:hover {
	opacity: 0.7;
}

.ssk-klasy__arrow:disabled {
	opacity: 0.25;
	cursor: default;
}

.ssk-klasy__progress {
	width: 160px;
	max-width: 30vw;
	height: 2px;
	background: var(--ssk-line);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

.ssk-klasy__progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background: var(--ssk-blue);
	transition: width 0.3s ease;
}

.ssk-klasy__counter {
	font-family: var(--ssk-font-mono, monospace);
	font-size: 12px;
	color: var(--ssk-muted);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.ssk-klasa-card {
		flex: 0 0 50%;
	}

	.ssk-cat-tile {
		flex-basis: calc(50% - 5px);
	}
}

@media (max-width: 480px) {
	.ssk-klasa-card {
		flex: 0 0 100%;
	}
}

/* Lista "Akceptowane rodzaje" */
.ssk-accepted {
	max-width: none;
	padding: 0;
}

.ssk-accepted__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ssk-accepted__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ssk-ink);
}

.ssk-accepted__check {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ssk-blue);
}

@media (max-width: 600px) {
	.ssk-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.ssk-row__price {
		flex: 1 1 auto;
	}

	.ssk-row__qty {
		align-items: flex-start;
		width: 100%;
	}

	.ssk-summary__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.ssk-submit-open {
		max-width: none;
	}
}

@media (max-width: 420px) {
	.ssk-cat-tile {
		flex-basis: 78%;
	}
}

/* ====== Dopisane automatycznie: nowe elementy sekcji podstrony surowca ====== */
/* (celowo NIE modyfikuję niczego powyżej — tylko dopisuję nowe klasy) */

.ssk-price-box__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ssk-muted, #8996a8);
	margin-bottom: 2px;
}

.ssk-price-box__updated {
	display: block;
	font-size: 11.5px;
	color: var(--ssk-muted, #8996a8);
	margin-top: 4px;
}

/* Sekcja "Jak wygląda skup" — 4 kroki w rzędzie */
.ssk-steps {
	max-width: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ssk-steps__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ssk-steps__number {
	font-size: 32px;
	font-weight: 700;
	color: var(--ssk-blue, #2f7fe0);
	line-height: 1;
}

.ssk-steps__title {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	color: var(--ssk-ink, #1e2a3a);
}

.ssk-steps__text {
	font-size: 13px;
	color: var(--ssk-muted, #8996a8);
	margin: 0;
}

@media (max-width: 700px) {
	.ssk-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.ssk-steps {
		grid-template-columns: 1fr;
	}
}

/* Podtytuł nad listą "Akceptowane rodzaje" */
.ssk-accepted__subtitle {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--ssk-ink, #1e2a3a);
}

/* Kotwica sekcji "Szybka sprzedaż" — offset dla ewentualnego sticky nagłówka przy skoku z linku #ssk-quick-sale */
#ssk-quick-sale {
	scroll-margin-top: 100px;
}

/* ====== Mega menu "Skup" ====== */
.ssk-mega-menu {
    position: fixed;
    top: 90px!important;
    left: 0;
    width: 100%;
    z-index: 999999;
    display: none;
    font-family: var(--ssk-font-body);
    max-width: 999px;
    left: 52%;
    transform: translateX(-50%);
    border-radius: 16px;
}

.ssk-mega-menu.is-open {
	display: block;
}

.ssk-mega-menu__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 28, 40, 0.15);
	z-index: 0;
}

.ssk-mega-menu__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    max-height: 100%;
    overflow: auto;
    border-radius: 1rem;
}

.ssk-mega-menu__mobile-head {
	display: none;
}

.ssk-mega-menu__columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 999px;
    margin: 0 auto;
}

.ssk-mega-menu__col {
	padding: 28px 24px;
}

.ssk-mega-menu__col--categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(229.9deg, rgba(235, 250, 255, 0.82) -1.01%, rgba(255, 255, 254, 0.82) 90.38%);
    backdrop-filter: blur(27.200000762939453px);
    padding: 24px !important;
}

.ssk-mega-cat {
	display: flex;
	align-items: center;
	gap: 15px!important;
	background: none!important;
	border: none!important;
	border-radius: 6px!important;
	padding: 8px!important;
	text-align: left;
	cursor: pointer;
	width: 100%;
	    display: flex !important;
	transition: all .3s!important;
}

.ssk-mega-cat:hover,
.ssk-mega-cat.is-active {
	background: #FFFFFF!important;
}

.ssk-mega-cat__icon {
width: 52px;
    height: 52px;
    border-radius: 6px;
    background: #F8F8F8;
    color: var(--ssk-blue, #2f7fe0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.ssk-mega-cat__icon img {
    width: 24px;
    height: 24px;
}

.ssk-mega-cat__icon svg {
	width: 18px;
	height: 18px;
}

.ssk-mega-cat__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
}

.ssk-mega-cat__title {
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    font-family: "ff-utility-web-pro", sans-serif;
}


button.ssk-mega-item {
display: flex !important;
    color: #00000061 !important;
    font-size: 1rem !important;
    font-weight: 350 !important;
    font-family: 'ff-utility-web-pro', sans-serif !important;
    letter-spacing: 3% !important;
    border: none !important;
    background: none !important;
}

button.ssk-mega-item.is-active,
button.ssk-mega-item:hover {
	color: #000000!important;
	background: transparent!important;
}

.ssk-mega-cat__subtitle {

    font-size: 14px;
    color: #000000;
    font-weight: 350;
    font-family: "ff-utility-web-pro", sans-serif;
    letter-spacing: 3%;
}

.ssk-mega-menu__col.ssk-mega-menu__col--detail {
	    background: linear-gradient(229.9deg, rgba(235, 250, 255, 0.78) -1.01%, rgba(255, 255, 254, 0.78) 90.38%) !important;
    padding: 24px !important;
    backdrop-filter: blur(27.200000762939453px);
}

.ssk-mega-cat__chevron {
	display: none!important;
}

.ssk-mega-menu__col--items {
    display: flex;
    flex-direction: column;
    background: #FFFFFFF5 !important;
    backdrop-filter: blur(20.100000381469727px);
}

.ssk-mega-items {
	display: none;
	flex-direction: column;
	gap: 2px;
}

.ssk-mega-items.is-active {
	display: flex;
}

.ssk-mega-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: none;
	border: none;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--ssk-muted, #8996a8);
	text-align: left;
	cursor: pointer;
	border-radius: 6px;
	width: 100%;
}

.ssk-mega-item:hover {
	background: #f7f9fc;
}

.ssk-mega-item.is-active {
	color: var(--ssk-ink, #1e2a3a);
	font-weight: 700;
	background: #f7f9fc;
}

.ssk-mega-item__chevron {
	color: var(--ssk-blue, #2f7fe0);
	font-size: 14px;
	flex-shrink: 0;
}

.ssk-mega-detail {
	display: none;
}

.ssk-mega-detail.is-active {
	display: block;
}

.ssk-mega-detail__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #eef1f5;
	margin-bottom: 16px;
}

.ssk-mega-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ssk-mega-detail__media-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #e7e9ee, #e7e9ee 8px, #dde1e8 8px, #dde1e8 16px);
}

.ssk-mega-detail__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--ssk-ink, #1e2a3a);
}

.ssk-mega-detail__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--ssk-muted, #8996a8);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ssk-line, #e3e9f1);
	margin-bottom: 14px;
}

.ssk-mega-detail__price {
	font-weight: 700;
	color: var(--ssk-blue, #2f7fe0);
	font-size: 15px;
}

.ssk-mega-detail__price--unavailable {
	color: var(--ssk-muted, #8996a8);
	font-weight: 500;
}

.ssk-mega-detail__rows {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 20px;
}

.ssk-mega-detail__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
}

.ssk-mega-detail__row span:first-child {
	color: var(--ssk-muted, #8996a8);
}

.ssk-mega-detail__row span:last-child {
	color: var(--ssk-ink, #1e2a3a);
	font-weight: 600;
}

.ssk-mega-detail__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(90deg, #33a1e8, var(--ssk-blue-dark, #1c5fc0));
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 13px 20px;
	border-radius: 8px;
}

.ssk-mega-detail__button:hover {
	opacity: 0.92;
}

body.ssk-mega-menu-open {
	overflow: hidden;
}

/* ===== Mobile: pełny ekran, przełączanie kolumn jak w aplikacji ===== */
@media (max-width: 980px) {
	.ssk-mega-menu.is-open {
		top: 0 !important;
	}

	.ssk-mega-menu__panel {
		position: fixed;
		inset: 0;
		max-height: none;
		display: flex;
		flex-direction: column;
	}

	.ssk-mega-menu__mobile-head {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px;
		border-bottom: 1px solid var(--ssk-line, #e3e9f1);
		flex-shrink: 0;
	}

	.ssk-mega-menu__back,
	.ssk-mega-menu__close {
		background: none;
		border: none;
		font-size: 22px;
		line-height: 1;
		color: var(--ssk-ink, #1e2a3a);
		cursor: pointer;
		padding: 4px;
	}

	.ssk-mega-menu__mobile-title {
		flex: 1;
		font-weight: 700;
		font-size: 15px;
		text-align: center;
	}

	.ssk-mega-menu__columns {
		display: flex;
		width: 300%;
		max-width: none;
		flex: 1;
		overflow: hidden;
		transition: transform 0.3s ease;
		margin: 0;
	}

	.ssk-mega-menu__columns[data-active-panel="1"] {
		transform: translateX(0);
	}

	.ssk-mega-menu__columns[data-active-panel="2"] {
		transform: translateX(-33.3333%);
	}

	.ssk-mega-menu__columns[data-active-panel="3"] {
		transform: translateX(-66.6666%);
	}

	.ssk-mega-menu__col {
		width: 33.3333%;
		flex-shrink: 0;
		overflow-y: auto;
		border-right: none !important;
		box-sizing: border-box;
	}
}

/* ====== [ssk_materialy] — katalog materiałów ====== */
.ssk-materialy-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.ssk-mat-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ssk-card-bg, #fff);
	border: 1px solid var(--ssk-line, #e3e9f1);
	border-radius: 10px;
	padding: 10px 14px;
	cursor: pointer;
	text-align: left;
	flex: 1 1 200px;
	min-width: 160px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ssk-mat-cat:hover {
	border-color: var(--ssk-blue, #2f7fe0);
}

.ssk-mat-cat.is-active {
	border-color: var(--ssk-blue, #2f7fe0);
	box-shadow: 0 0 0 3px var(--ssk-blue-pale, #eaf2fd);
}

.ssk-mat-cat__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--ssk-blue-pale, #eaf2fd);
	color: var(--ssk-blue, #2f7fe0);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ssk-mat-cat__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ssk-mat-cat__icon svg {
	width: 16px;
	height: 16px;
}

.ssk-mat-cat__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ssk-mat-cat__title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ssk-ink, #1e2a3a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ssk-mat-cat__subtitle {
	font-size: 11.5px;
	color: var(--ssk-muted, #8996a8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ssk-materialy-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.ssk-mat-filter {
	flex: 1 1 200px;
	min-width: 160px;
}

.ssk-mat-filter__select {
	width: 100%;
	appearance: none;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%238996a8"/></svg>') no-repeat right 14px center;
	border: 1px solid var(--ssk-line, #e3e9f1);
	border-radius: 8px;
	padding: 11px 32px 11px 14px;
	font-size: 13.5px;
	color: var(--ssk-ink, #1e2a3a);
	cursor: pointer;
}

.ssk-mat-filter__select:focus {
	outline: none;
	border-color: var(--ssk-blue, #2f7fe0);
}

.ssk-materialy-list {
	background: var(--ssk-card-bg, #fff);
	border: 1px solid var(--ssk-line, #e3e9f1);
	border-radius: 14px;
	padding: 6px;
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

.ssk-mat-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 10px;
	border-bottom: 1px solid var(--ssk-line, #e3e9f1);
	flex-wrap: wrap;
}

.ssk-mat-row:last-child {
	border-bottom: none;
}

.ssk-mat-row__media {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	overflow: hidden;
	background: #eef1f5;
}

.ssk-mat-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ssk-mat-row__media-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #e7e9ee, #e7e9ee 8px, #dde1e8 8px, #dde1e8 16px);
}

.ssk-mat-row__info {
	flex: 1 1 160px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ssk-mat-row__title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ssk-blue, #2f7fe0);
	text-decoration: none;
}

.ssk-mat-row__title:hover {
	text-decoration: underline;
}

.ssk-mat-row__more {
	align-self: flex-start;
	color: var(--ssk-muted, #8996a8);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.ssk-mat-row__more:hover {
	color: var(--ssk-blue, #2f7fe0);
}

.ssk-mat-row__formy {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12.5px;
}

.ssk-mat-row__formy-label {
	color: var(--ssk-muted, #8996a8);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ssk-mat-row__formy-list {
	color: var(--ssk-ink, #1e2a3a);
}

.ssk-mat-tooltip {
	position: relative;
	display: inline-block;
}

.ssk-mat-tooltip__trigger {
	background: none;
	border: none;
	color: var(--ssk-blue, #2f7fe0);
	font-weight: 700;
	cursor: pointer;
	font-size: 12.5px;
	padding: 0;
}

.ssk-mat-tooltip__panel {
	display: none;
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 8px;
	background: var(--ssk-ink, #1e2a3a);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	padding: 10px 12px;
	border-radius: 8px;
	width: 220px;
	z-index: 20;
	box-shadow: 0 8px 20px rgba(20, 28, 40, 0.2);
}

.ssk-mat-tooltip.is-open .ssk-mat-tooltip__panel {
	display: block;
}

.ssk-mat-row__action {
	flex-shrink: 0;
	margin-left: auto;
}

.ssk-mat-ask {
	font-family: var(--ssk-font-display, inherit);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: linear-gradient(90deg, #33a1e8, var(--ssk-blue-dark, #1c5fc0));
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 22px;
	cursor: pointer;
}

.ssk-mat-ask:hover {
	opacity: 0.9;
}

.ssk-materialy-show-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	background: none;
	border: none;
	padding: 10px;
	color: var(--ssk-muted, #8996a8);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
}

.ssk-materialy-show-more:hover {
	color: var(--ssk-blue, #2f7fe0);
}

.ssk-materialy-empty {
	text-align: center;
	color: var(--ssk-muted, #8996a8);
	padding: 20px;
}

/* Popup "Zapytaj o materiały" */
.ssk-materialy-modal__dialog {
	max-width: 480px;
}

.ssk-mat-inquiry-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.ssk-mat-inquiry-row {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 1fr auto;
	gap: 8px;
	align-items: center;
}

.ssk-mat-inquiry-row select,
.ssk-mat-inquiry-row input {
	width: 100%;
	padding: 9px 10px;
	border-radius: 8px;
	border: 1px solid var(--ssk-line, #e3e9f1);
	background: #f7f9fc;
	font-size: 13px;
	color: var(--ssk-ink, #1e2a3a);
}

.ssk-mat-inquiry-remove {
	background: none;
	border: none;
	color: var(--ssk-down, #d3453b);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.ssk-mat-add-row {
	display: block;
	background: none;
	border: none;
	color: var(--ssk-blue, #2f7fe0);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	padding: 6px 0 18px;
}

.ssk-mat-contact-title {
	font-size: 15px;
	margin: 0 0 4px;
	color: var(--ssk-ink, #1e2a3a);
}

.ssk-mat-contact input {
	width: 100%;
	padding: 11px 12px;
	border-radius: 8px;
	border: 1px solid var(--ssk-line, #e3e9f1);
	background: #f7f9fc;
	font-size: 14px;
	color: var(--ssk-ink, #1e2a3a);
	margin-bottom: 10px;
}

.ssk-mat-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ssk-mat-contact__grid input {
	margin-bottom: 0;
}

/* ====== RWD dla Skupu i Materiałów (poniżej 980px i 600px) ====== */
@media (max-width: 980px) {
	.ssk-row,
	.ssk-mat-row {
		gap: 12px;
	}

	.ssk-row__price {
		flex-basis: 120px;
	}
}

@media (max-width: 700px) {
	.ssk-mat-cat,
	.ssk-mat-filter {
		flex-basis: calc(50% - 5px);
	}
}

@media (max-width: 600px) {
	.ssk-mat-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.ssk-mat-row__action {
		margin-left: 0;
		width: 100%;
	}

	.ssk-mat-ask {
		width: 100%;
	}

	.ssk-mat-inquiry-row {
		grid-template-columns: 1fr;
	}

	.ssk-mat-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.ssk-mat-cat,
	.ssk-mat-filter {
		flex-basis: 100%;
	}
}

/* ====== "Ukryj jeśli puste" — działa TYLKO w połączeniu z klasą ssk-is-empty dodaną przez JS.
   Nie definiuj samodzielnie display:none dla .ssk-hide-if-empty — sama ta klasa ma być tylko
   etykietą, widoczność steruje JS w script.js. ====== */
.ssk-hide-if-empty.ssk-is-empty {
	display: none !important;
}

/* Obrazek sekcji "Jak rozpoznać" wstawiany shortcode'em [ssk_recognition_image] */
.ssk-recognition-image {
	max-width: none;
	padding: 0;
}

.ssk-recognition-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* ============================================================
   RWD dla "Skup surowców" (kategorie, lista, podsumowanie)
   od 980px w dół — dopisane pod Twój przerobiony, większy design
   (grubsze odstępy, duże przyciski 58-72px, wieksze fonty).
   Nic z reguł powyżej nie jest zmieniane — tylko override'y niżej.
   ============================================================ */

/* ---------- Tablet: 980px ---------- */
@media (max-width: 980px) {
	.ssk-cat-tile {
		flex-basis: calc(50% - 5px) !important;
	}

	.ssk-row {
		padding: 1.1rem !important;
		gap: 1.25rem !important;
	}

	.ssk-row__info {
		flex-basis: 220px;
	}

	.ssk-row__price {
		flex-basis: 150px;
	}

	.ssk-summary {
		padding: 1.5rem !important;
	}

	.ssk-summary__header {
		margin-bottom: 48px !important;
	}

	.ssk-summary__title {
		font-size: 26px !important;
	}

	.ssk-summary__list {
		margin-bottom: 48px !important;
		gap: 20px !important;
	}
}

/* ---------- Duży telefon / mały tablet: 700px ---------- */
@media (max-width: 700px) {
	.ssk-cat-tile {
		flex-basis: 78% !important;
	}

	.ssk-row__media {
		width: 72px;
		height: 92px;
	}

	.ssk-row__title {
		font-size: 1.1rem;
	}

	.ssk-price {
		font-size: 18px;
	}
}

/* ---------- Mobile: 600px ---------- */
@media (max-width: 600px) {
	.ssk-wrap {
		padding: 16px 12px 40px;
	}

	/* Kategorie — jedna widoczna naraz, z podglądem kolejnej (swipe) */
	.ssk-cat-tile {
		flex-basis: 85% !important;
	}

	/* Wiersz surowca: pełny stack, każdy blok na całą szerokość */
	.ssk-row {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem !important;
		padding: 1rem !important;
	}

	.ssk-row__media {
		width: 64px;
		height: 82px;
		align-self: flex-start;
	}

	.ssk-row__info,
	.ssk-row__price {
		flex: 1 1 auto;
		width: 100%;
	}

	.ssk-row__qty {
		align-items: stretch;
		width: 100%;
		gap: 0.75rem !important;
	}

	.ssk-qty-add {
		flex-wrap: wrap;
		gap: 10px;
	}

	.ssk-step {
		width: 44px !important;
		height: 44px !important;
	}

	.ssk-qty-display {
		min-width: 90px;
		font-size: 13px;
	}

	.ssk-add {
		flex: 1 1 auto;
		height: 48px !important;
		padding: 0 20px !important;
		font-size: 13px !important;
	}

	.ssk-min-qty {
		font-size: 11px;
	}

	/* Podsumowanie — mniejsze odstępy i fonty, pozycje listy zawijają się */
	.ssk-summary {
		padding: 1.25rem !important;
	}

	.ssk-summary__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 24px !important;
	}

	.ssk-summary__title {
		font-size: 20px !important;
	}

	.ssk-summary__list {
		margin-bottom: 24px !important;
		gap: 16px !important;
	}

	.ssk-summary__list li {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.ssk-summary__item-name {
		flex-basis: 100%;
		font-size: 16px !important;
	}

	.ssk-summary__item-qty,
	.ssk-summary__item-unit-price,
	.ssk-summary__item-value {
		flex-basis: auto;
		font-size: 13px !important;
		margin-left: 0 !important;
	}

	.ssk-summary__item-value {
		margin-left: auto !important;
	}

	.ssk-summary__footer {
		flex-direction: column;
		align-items: stretch;
	}

	.ssk-summary__totals {
		justify-content: space-between;
		width: 100%;
	}

	.ssk-summary__total-label {
		font-size: 14px !important;
	}

	.ssk-summary__weight,
	.ssk-summary__value {
		font-size: 20px !important;
	}

	.ssk-submit-open {
		max-width: none;
		height: 56px !important;
		font-size: 13px !important;
	}

	.ssk-collapse-toggle {
		margin-top: 24px !important;
		padding-top: 16px !important;
	}
}

/* ---------- Mały telefon: 480px ---------- */
@media (max-width: 480px) {
	.ssk-cat-tile {
		flex-basis: 90% !important;
	}

	.ssk-row {
		padding: 0.85rem !important;
	}

	.ssk-summary {
		padding: 1rem !important;
	}

	.ssk-summary__title {
		font-size: 18px !important;
	}

	.ssk-cat-tile__title {
		font-size: 14px !important;
	}

	.ssk-cat-tile__subtitle {
		font-size: 12px !important;
	}
}

/* Ukryj pasek "header-subpage-small" wyłącznie na podstronach pojedynczego surowca —
   WordPress sam dodaje klasę "single-ssk_surowiec" do <body> na tych stronach,
   więc nie trzeba nic ręcznie ustawiać w Elementorze. */
body.single-ssk_surowiec #header-subpage-small {
	display: none !important;
}