/* Wyszukiwarka kafle / lista pod makietą 3D - tylko szablon "Home iframe + wyszukiwarka".
   Motyw ma html { font-size: 62.5% } -> 1rem = 10px. Wszystkie selektory z prefiksem .us
   Motyw ukrywa globalnie ::before/::after (display:none) - każdy pseudo-element tutaj ma jawne display. */

.us {
	--us-navy: #1a173b;
	--us-gold: #d09b73;
	--us-grey: #f5f5f5;
	--us-muted: #767676;
	--us-line: #e3e2ea;
	--us-available: #3f8f6b;
	--us-reserved: #b9803f;
	--us-sold: #8a8a8a;
	--us-promo: #c0263b; /* kolor promocji - do potwierdzenia z klientem */
	padding: 8rem 0 10rem;
	background: #fff;
	color: var(--us-navy);
	font-size: 1.6rem;
	line-height: 1.45;
}

.us *, .us *::before, .us *::after { box-sizing: border-box; }
.us [hidden] { display: none !important; }
.us-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nagłówek ---------- */
.us-head { text-align: center; margin-bottom: 4rem; }
.us-head h1, .us-head h2 { font-size: 5.2rem; line-height: 1.25; margin: 0 0 1.2rem; }
.us-lead { font-size: 1.9rem; font-weight: 500; margin: 0; }

/* ---------- przyciski ---------- */
.us-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
	min-height: 4.4rem; padding: 1rem 1.8rem;
	font: 500 1.4rem/1.2 "Satoshi", sans-serif; letter-spacing: .112rem; text-transform: uppercase;
	color: var(--us-gold); background: var(--us-navy); border: 1px solid var(--us-navy);
	cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s;
}
.us-btn-outline { color: var(--us-navy); background: transparent; }
.us-btn-outline:hover, .us-btn-outline:focus-visible { background: var(--us-navy); color: var(--us-gold); }
.us-btn-sm { min-height: 3.6rem; padding: .6rem 1.2rem; font-size: 1.2rem; }
.us-link {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: 500 1.5rem/1.4 "Satoshi", sans-serif; color: var(--us-navy);
	text-decoration: underline; text-underline-offset: .3rem; text-decoration-color: var(--us-gold);
}
.us-link:hover { color: var(--us-gold); }
.us button:focus-visible, .us a:focus-visible, .us input:focus-visible, .us select:focus-visible {
	outline: 2px solid var(--us-gold) !important; outline-offset: 2px; /* motyw zeruje outline z !important */
}

/* ---------- filtry ---------- */
.us-filters {
	display: grid; gap: 2.4rem 3.2rem;
	grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	padding: 3.2rem; background: var(--us-navy); color: #fff;
}
.us-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.us-field legend {
	padding: 0; margin-bottom: 1.2rem;
	font-size: 1.4rem; font-weight: 700; letter-spacing: .1rem; text-transform: uppercase; color: var(--us-gold);
}
.us-chips { display: flex; flex-wrap: wrap; gap: .8rem; }
/* Motyw ma globalne input[type=checkbox] { display:none } + kwadrat na span:before - tu je neutralizujemy,
   checkbox zostaje w DOM (niewidoczny), żeby działała klawiatura i czytniki ekranu. */
.us input[type=checkbox] { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.us-chip { position: relative; cursor: pointer; }
.us .us-chip input[type=checkbox] + span {
	display: inline-flex; align-items: center; min-height: 4rem; min-width: 4rem; justify-content: center;
	margin: 0; padding: .6rem 1.4rem; border: 1px solid rgba(255, 255, 255, .35);
	font-size: 1.5rem; font-weight: 500; color: #fff;
	transition: background-color .2s, border-color .2s, color .2s;
}
.us .us-chip input[type=checkbox] + span::before, .us .us-chip input[type=checkbox] + span::after { content: none; }
.us-chip:hover span { border-color: var(--us-gold); }
.us .us-chip input[type=checkbox]:checked + span { background: var(--us-gold); border-color: var(--us-gold); color: var(--us-navy); font-weight: 700; }
.us input[type=checkbox]:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.us-range { display: flex; align-items: center; gap: 1rem; }
.us-range label { flex: 1; min-width: 0; }
.us-range input {
	width: 100%; height: 4.4rem; padding: 0 1.2rem;
	font: 1.6rem "Satoshi", sans-serif; color: #fff;
	background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0;
	-moz-appearance: textfield;
}
.us-range input::placeholder { color: rgba(255, 255, 255, .6); }
.us-range input:focus { border-color: var(--us-gold); }
.us-range input:focus-visible { outline: 2px solid var(--us-gold) !important; outline-offset: 2px; }
.us-range input::-webkit-outer-spin-button, .us-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.us-filters-foot {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
	padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, .15);
}
.us-filters .us-link { color: #fff; }
.us-filters .us-link:hover { color: var(--us-gold); }

/* ---------- pasek wyników ---------- */
.us-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem;
	margin: 3.2rem 0 2.4rem;
}
.us-count { margin: 0; font-size: 1.7rem; font-weight: 500; }
.us-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.us-sort { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.5rem; }
.us-sort select {
	height: 4.4rem; padding: 0 3.6rem 0 1.2rem; border: 1px solid var(--us-line); border-radius: 0;
	font: 1.5rem "Satoshi", sans-serif; color: var(--us-navy); background: #fff; cursor: pointer;
}
.us-views { display: inline-flex; border: 1px solid var(--us-navy); }
.us-views button {
	display: inline-flex; align-items: center; gap: .8rem; height: 4.2rem; padding: 0 1.6rem;
	border: 0; background: #fff; color: var(--us-navy); cursor: pointer;
	font: 500 1.4rem "Satoshi", sans-serif; letter-spacing: .08rem; text-transform: uppercase;
}
.us-views button[aria-pressed="true"] { background: var(--us-navy); color: var(--us-gold); }

/* ---------- kafle ---------- */
.us-grid {
	display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
}
.us-card {
	display: flex; flex-direction: column; margin: 0; background: #fff;
	border: 1px solid var(--us-line); border-radius: .8rem; overflow: hidden;
	transition: box-shadow .25s, transform .25s, border-color .25s;
}
.us-card:not(.is-disabled) { cursor: pointer; }
.us-card:not(.is-disabled):hover { border-color: var(--us-gold); box-shadow: 0 1.2rem 3rem rgba(26, 23, 59, .12); transform: translateY(-2px); }
.us-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--us-grey); overflow: hidden; }
.us .us-card-media img { position: absolute; inset: 1.6rem; width: calc(100% - 3.2rem); height: calc(100% - 3.2rem); max-width: none; object-fit: contain; display: block; transition: transform .35s; }
.us-card:not(.is-disabled):hover .us-card-media img { transform: scale(1.03); }
.us-card.is-disabled .us-card-media img { opacity: .45; filter: grayscale(1); }
.us-card-badges { position: absolute; top: 1.8rem; left: 1.2rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem; max-width: calc(100% - 7rem); }
.us-card-body { display: flex; flex-direction: column; flex: 1; padding: 2rem; }
.us-card-type { margin: 0 0 .4rem; font-size: 1.3rem; letter-spacing: .1rem; text-transform: uppercase; color: var(--us-muted); }
.us-card-title { margin: 0 0 1.6rem; font-size: 2.8rem; line-height: 1.15; }
.us-card-stats { display: flex; gap: 2rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.us-card-stats li { display: flex; flex-direction: column; }
.us-card-stats span { font-size: 1.3rem; color: var(--us-muted); }
.us-card-stats strong { font-size: 1.8rem; }
.us-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin-bottom: 1.6rem; }
.us-card-price strong { font-size: 2.2rem; }
.us-card-price > span { font-size: 1.4rem; color: var(--us-muted); }
.us-card-foot { margin-top: auto; }
.us-card-foot .us-btn { width: 100%; }
.us-card-na { margin: auto 0 0; padding: 1.4rem 0 .2rem; font-size: 1.6rem; font-weight: 700; color: var(--us-muted); border-top: 1px solid var(--us-line); }
/* Zarezerwowane - cały kafel wyszarzony. */
.us-card.is-disabled .us-card-body { color: var(--us-muted); }
.us-card.is-disabled .us-card-title { color: var(--us-muted); }
.us-card.is-disabled .us-status { background: var(--us-sold); }

/* ---------- ulubione ---------- */
.us-fav {
	display: inline-grid; place-items: center; flex: none; width: 4rem; height: 4rem; padding: 0;
	border: 1px solid var(--us-line); border-radius: 50%; background: #fff; color: var(--us-navy); cursor: pointer;
	transition: color .2s, border-color .2s, transform .2s;
}
.us-fav:hover { border-color: var(--us-gold); color: var(--us-gold); }
.us-fav:active { transform: scale(.9); }
.us-heart { display: block; width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.us-fav.is-active { border-color: var(--us-gold); color: var(--us-gold); }
.us-fav.is-active .us-heart { fill: currentColor; }
.us-fav-card { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 1; box-shadow: 0 2px 8px rgba(26, 23, 59, .12); }
.us-fav-row { width: 3.6rem; height: 3.6rem; margin-right: .8rem; vertical-align: middle; }
.us-modal-title { display: flex; align-items: flex-start; gap: 1.6rem; margin: 0 0 2.4rem; }
.us-modal-body .us-modal-title h3 { margin: 0; }
.us-modal-title .us-fav { margin-top: .4rem; }

.us-fav-link {
	display: inline-flex; align-items: center; gap: .8rem; height: 4.4rem; padding: 0 1.6rem;
	border: 1px solid var(--us-navy); color: var(--us-navy); text-decoration: none;
	font: 500 1.4rem "Satoshi", sans-serif; letter-spacing: .08rem; text-transform: uppercase;
}
.us-fav-link:hover { background: var(--us-navy); color: var(--us-gold); }
.us-fav-link:not(.is-empty) .us-heart { fill: var(--us-gold); stroke: var(--us-gold); }
.us-fav-badge {
	display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; border-radius: 1.1rem;
	background: var(--us-gold); color: var(--us-navy); font-size: 1.2rem; font-weight: 700; letter-spacing: 0;
}
.us-fav-link.is-empty .us-fav-badge { background: var(--us-line); }
/* Zakładka "Ulubione" w prawym panelu motywu (.fixed-panel jest poza .us - selektory bez prefiksu .us). */
.fixed-panel .us-panel-fav { color: #1a173b; text-decoration: none; }
.fixed-panel .us-panel-fav .left { position: relative; }
.fixed-panel .us-panel-fav svg { display: block; width: 4.2rem; height: 4.2rem; padding: .7rem; fill: none; stroke: #1a173b; stroke-width: 1.5; }
.fixed-panel .us-panel-fav:not(.is-empty) svg { fill: #1a173b; }
.fixed-panel .us-panel-fav .right p { margin: 0; color: #1a173b; }
.us-panel-fav-badge {
	position: absolute; top: -.2rem; right: -.4rem;
	display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .4rem; border-radius: .9rem;
	background: #1a173b; color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.us-panel-fav.is-empty .us-panel-fav-badge { display: none; }
@media (max-width: 767px) {
	.fixed-panel .us-panel-fav svg { width: 32px; height: 32px; padding: 5px; }
}

/* ---------- statusy ---------- */
.us-status {
	display: inline-block; padding: .4rem 1rem; border-radius: 2rem;
	font-size: 1.2rem; font-weight: 700; letter-spacing: .08rem; text-transform: uppercase; color: #fff;
}
.us-status-available { background: var(--us-available); }
.us-status-reserved { background: var(--us-reserved); }
.us-status-sold, .us-status-unavailable { background: var(--us-sold); }

/* ---------- promocje ---------- */
.us-promo-badge {
	display: inline-block; padding: .4rem 1rem; border-radius: 2rem; vertical-align: middle;
	font-size: 1.2rem; font-weight: 700; line-height: 1.45; letter-spacing: .08rem; text-transform: uppercase; color: #fff; background: var(--us-promo);
}
.us-table tbody th .us-promo-badge { margin-left: .8rem; font-size: 1.1rem; padding: .2rem .8rem; }
.us-old { display: block; font-size: .7em; font-weight: 500; color: var(--us-muted); }
.us-new { color: var(--us-promo); }
.us-card-price.is-promo { align-items: flex-end; }
.us-card-price > span .us-old { font-size: 1.2rem; }
.us-table td.is-promo .us-old { font-size: 1.3rem; }
.us-table td.is-promo .us-new { font-weight: 700; }
.us-price-old { font-size: 1.6rem; color: var(--us-muted); }
.us-prices.is-promo .us-price, .us-prices.is-promo .us-price-sm { color: var(--us-promo); }
.us-modal-type .us-promo-badge { margin-left: .8rem; letter-spacing: .08rem; }
.us .us-chip-promo input[type=checkbox] + span { border-color: var(--us-promo); }
.us .us-chip-promo input[type=checkbox]:checked + span { background: var(--us-promo); border-color: var(--us-promo); color: #fff; }

/* ---------- lista ---------- */
.us-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.us-table { width: 100%; border-collapse: collapse; font-size: 1.6rem; }
.us-table th, .us-table td { padding: 1.4rem 1.2rem; text-align: left; border-bottom: 1px solid var(--us-line); white-space: nowrap; }
.us-table thead th { font-size: 1.3rem; font-weight: 700; letter-spacing: .08rem; text-transform: uppercase; color: var(--us-muted); border-bottom-color: var(--us-navy); }
.us-table thead button {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.us-table thead button::after { content: "↕"; display: inline; margin-left: .4rem; opacity: .4; }
.us-table th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; color: var(--us-gold); }
.us-table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--us-gold); }
.us-table tbody th { font-weight: 700; }
.us-table tbody tr:not(.is-disabled) { cursor: pointer; }
.us-table tbody tr:not(.is-disabled):hover { background: var(--us-grey); }
.us-table tbody tr.is-disabled { color: var(--us-muted); }
.us-table .us-act { text-align: right; }
.us-favourites { padding-top: 4rem; }

/* ---------- stany ---------- */
.us-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.4rem; padding: 6rem 1.6rem; text-align: center; font-size: 1.7rem; color: var(--us-muted); background: var(--us-grey); }
.us-state.is-error { color: #b3261e; }
.us-spinner { width: 2rem; height: 2rem; border: 2px solid var(--us-line); border-top-color: var(--us-gold); border-radius: 50%; animation: us-spin .8s linear infinite; }
@keyframes us-spin { to { transform: rotate(360deg); } }
.us-more { margin-top: 3.2rem; text-align: center; }

/* ---------- modal ---------- */
html.us-lock { overflow: hidden; }
.us-modal {
	width: min(120rem, calc(100% - 3.2rem)); max-width: none; max-height: calc(100% - 3.2rem);
	margin: auto; padding: 0; border: 0; border-radius: .8rem; color: var(--us-navy); background: #fff;
	font-size: 1.6rem; overflow: hidden;
}
.us-modal::backdrop { background: rgba(26, 23, 59, .7); }
.us-modal-inner { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; height: calc(100vh - 3.2rem); max-height: 90rem; }
.us-modal-close {
	position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;
	display: grid; place-items: center; width: 4.4rem; height: 4.4rem;
	border: 0; border-radius: 50%; background: #fff; color: var(--us-navy); cursor: pointer;
	box-shadow: 0 2px 8px rgba(26, 23, 59, .15);
}
.us-modal-media { display: flex; flex-direction: column; gap: 1.6rem; min-height: 0; padding: 3.2rem; background: var(--us-grey); }
.us-tabs { display: inline-flex; align-self: flex-start; border: 1px solid var(--us-navy); }
.us-tabs button {
	height: 4rem; padding: 0 1.6rem; border: 0; background: #fff; color: var(--us-navy); cursor: pointer;
	font: 500 1.3rem "Satoshi", sans-serif; letter-spacing: .08rem; text-transform: uppercase;
}
.us-tabs button[aria-selected="true"] { background: var(--us-navy); color: var(--us-gold); }
.us-modal-img { position: relative; flex: 1; min-height: 0; }
.us .us-modal-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; }
.us-modal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; }

/* Na desktopie przewija się tylko kolumna z danymi - grafika i przycisk zamknięcia zostają na miejscu. */
.us-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4rem 3.2rem 3.2rem; }
.us-modal-type { margin: 0 0 .4rem; font-size: 1.3rem; letter-spacing: .1rem; text-transform: uppercase; color: var(--us-muted); }
.us-modal-body h3 { margin: 0 0 2.4rem; font-size: 4rem; line-height: 1.15; color: var(--us-gold); }
.us-stats, .us-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.6rem; margin: 0; }
.us-stats div, .us-extras div { min-width: 0; }
.us-stats dt, .us-extras dt, .us-label { margin: 0 0 .4rem; font-size: 1.4rem; color: var(--us-muted); }
.us-stats dd { margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.us-extras dd { margin: 0; font-size: 1.6rem; font-weight: 700; }
.us-modal-row { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--us-line); }
.us-modal-row p { margin: 0; }
.us-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.us-price { font-size: 3.2rem; font-weight: 700; line-height: 1.1; }
.us-price-sm { font-size: 2rem; font-weight: 700; }
.us-history-toggle, .us-history { grid-column: 1 / -1; justify-self: start; }
.us-history { width: 100%; font-size: 1.5rem; color: var(--us-muted); }
.us-history-table { width: 100%; border-collapse: collapse; color: var(--us-navy); }
.us-history-table th, .us-history-table td { padding: .8rem .4rem; text-align: left; border-bottom: 1px solid var(--us-line); }
.us-history-table th { font-size: 1.3rem; color: var(--us-muted); font-weight: 700; }
.us-modal-form { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--us-line); }
.us-form-title { margin: 0 0 1.6rem; font-size: 2rem; font-weight: 700; }
.us-cf { padding: 2.4rem; }
.us-form-sent { padding: 2.4rem; border-radius: .8rem; background: var(--us-grey); }
.us-form-sent p:not(.us-form-title) { margin: 0; }

/* ---------- RWD ---------- */
@media (max-width: 991px) {
	.us-modal { overflow-y: auto; overscroll-behavior: contain; }
	.us-modal-inner { grid-template-columns: 1fr; height: auto; max-height: none; }
	.us-modal-close { position: fixed; top: 2.8rem; right: 2.8rem; }
	.us-modal-media { padding: 6.4rem 1.6rem 2.4rem; }
	.us .us-modal-img img { position: static; height: auto; max-height: 60vh; }
	.us-modal-body { overflow: visible; padding: 2.4rem 1.6rem; }
}

@media (max-width: 767px) {
	.us { padding: 6rem 0 6rem; }
	.us-head h1, .us-head h2 { font-size: 3.2rem; }
	.us-lead { font-size: 1.6rem; }
	.us-filters { grid-template-columns: 1fr; padding: 2.4rem 1.6rem; }
	.us-toolbar { flex-direction: column; align-items: stretch; }
	.us-toolbar-end { justify-content: space-between; }
	.us-sort select { max-width: 60vw; }
	.us-grid { grid-template-columns: 1fr; }
	.us-modal { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
	.us-modal-close { top: 1.2rem; right: 1.2rem; }
	.us-modal-body h3 { font-size: 3.2rem; }
	.us-prices { grid-template-columns: 1fr; }
	.us-cf { padding: 2.4rem 1.6rem; }

	/* Lista jako karty wierszy - bez poziomego przewijania. */
	.us-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.us-table, .us-table tbody, .us-table tr, .us-table th, .us-table td { display: block; width: 100%; }
	.us-table tbody tr { padding: 1.2rem 0; border-bottom: 1px solid var(--us-line); }
	.us-table tbody th, .us-table tbody td { padding: .4rem 0; border: 0; white-space: normal; }
	.us-table tbody th { font-size: 2rem; }
	.us-table td[data-label] { display: flex; justify-content: space-between; gap: 1.6rem; }
	.us-table td[data-label]::before { content: attr(data-label); display: inline; color: var(--us-muted); }
	.us-table .us-act { text-align: left; padding-top: 1rem; }
	.us-table .us-act { display: flex; align-items: center; }
	.us-table .us-act .us-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.us-card, .us-spinner { transition: none; animation: none; }
}