/* Konfiguracja wyglądu. Nadpisz te zmienne w CSS motywu. */
.pxra {
	--pxra-accent: #aa8453;
	--pxra-text: #000;
	--pxra-muted: #888;
	--pxra-card-bg: #faf9f5;
	--pxra-border: #faf9f5;
	--pxra-radius: 0px;
	--pxra-gap: 20px;
	--pxra-card-height: 270px;
	--pxra-summary-width: 280px;
	--pxra-columns: 4;
	--pxra-slides: 3;
	color: var(--pxra-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	min-width: 0;
}

.pxra,
.pxra * {
	box-sizing: border-box;
}
.pxra__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px 0;
	min-width: 0;
}
.pxra .pxra__summary-link {
	display: flex;
	align-items: center;
	gap: inherit;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.pxra .pxra__google {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
}
.pxra__summary-label {
	font-size: 20px;
	line-height: 1.35;
}
.pxra__score {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--pxra-accent);
	font-size: 23px;
	line-height: 1.2;
}
.pxra__stars {
	position: relative;
	display: inline-block;
	color: var(--pxra-border);
	white-space: nowrap;
}
.pxra__stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--pxra-accent);
}
.pxra__body {
	position: relative;
	min-width: 0;
	container: pxra-body / inline-size;
}
.pxra--feed > .pxra__summary {
	margin-bottom: var(--pxra-gap);
}
.pxra--feed .pxra__track {
	display: grid;
	grid-template-columns: repeat(var(--pxra-columns), minmax(0, 1fr));
	gap: var(--pxra-gap);
}
.pxra--carousel.pxra--summary {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: center;
}
.pxra--carousel.pxra--summary > .pxra__summary {
	flex: 0 1 var(--pxra-summary-width);
}
.pxra--carousel.pxra--summary > .pxra__body {
	flex: 1 1 540px;
}
.pxra--carousel .pxra__track {
	--pxra-visible: min(var(--pxra-slides), var(--pxra-items));
	display: flex;
	gap: var(--pxra-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.pxra--carousel .pxra__card {
	flex: 0 0
		calc(
			(100% - (var(--pxra-visible) - 1) * var(--pxra-gap)) / var(--pxra-visible)
		);
	scroll-snap-align: start;
}
.pxra .pxra__card {
	height: var(--pxra-card-height);
	min-width: 0;
	margin: 0;
	padding: 18px;
	background: var(--pxra-card-bg);
	border: 1px solid var(--pxra-border);
	border-radius: var(--pxra-radius);
	display: flex;
	flex-direction: column;
}
.pxra__card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.pxra__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pxra-accent);
	color: #fff;
	font-size: 23px;
}
.pxra .pxra__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pxra__identity {
	flex: 1;
	min-width: 0;
}
.pxra__author {
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.pxra__date {
	color: var(--pxra-muted);
	font-size: 12px;
	margin-top: 3px;
}
.pxra .pxra__source {
	flex: 0 0 auto;
	max-width: 90px;
	align-self: flex-start;
	font-size: 12px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.pxra .pxra__source--google {
	width: 16px;
	height: 16px;
	font-size: 0;
	background: url("google.svg") center / contain no-repeat;
}
.pxra .pxra__source--google a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
}
.pxra__recommendation {
	margin: 8px 0 12px;
	color: var(--pxra-accent);
	font-weight: 600;
}
.pxra__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pxra-gap);
	margin-top: var(--pxra-gap);
	grid-column: 1 / -1;
}
.pxra .pxra__pagination .page-numbers,
.pxra .pxra__load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--pxra-border);
	border-radius: var(--pxra-radius);
	background: transparent;
	color: var(--pxra-text);
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
}
.pxra .pxra__pagination .current {
	border-color: var(--pxra-accent);
	background: var(--pxra-accent);
	color: #fff;
}
.pxra__feed-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: var(--pxra-gap);
}
.pxra .pxra__load-more {
	cursor: pointer;
}
.pxra .pxra__load-more:disabled {
	opacity: 0.6;
	cursor: wait;
}
.pxra .pxra__status,
.pxra .pxra__empty {
	margin: 0;
	color: var(--pxra-muted);
	text-align: center;
}
.pxra .pxra__status {
	font-size: 14px;
}
.pxra__feed-controls[data-state="error"] .pxra__status {
	color: #9b2424;
}
.pxra__sentinel {
	width: 100%;
	height: 1px;
}
.pxra__rating {
	color: var(--pxra-accent);
	font-size: 22px;
	letter-spacing: 1px;
	margin: 8px 0 12px;
	line-height: 1;
	flex-shrink: 0;
}
.pxra__content {
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--pxra-accent) transparent;
	overflow-wrap: anywhere;
	padding-right: 6px;
	overscroll-behavior-y: contain;
}
.pxra .pxra__content p {
	margin: 0 0 10px;
	font: inherit;
	color: inherit;
}
.pxra .pxra__content p:last-child {
	margin-bottom: 0;
}
.pxra .pxra__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--pxra-border);
	border-radius: 50%;
	background: #fff;
	color: var(--pxra-text);
	font: 26px/1 sans-serif;
	cursor: pointer;
	box-shadow: 0 2px 6px #00000012;
	z-index: 1;
}
.pxra__arrow--prev {
	left: -18px;
}
.pxra__arrow--next {
	right: -18px;
}
.pxra .pxra__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}
.pxra :focus-visible {
	outline: 2px solid var(--pxra-accent);
	outline-offset: 3px;
}
.pxra [hidden] {
	display: none !important;
}

@media (max-width: 1100px) {
	.pxra {
		--pxra-columns: 3;
		--pxra-slides: 2;
		--pxra-summary-width: 240px;
	}
}
@media (max-width: 800px) {
	.pxra {
		--pxra-columns: 2;
	}
	.pxra--carousel.pxra--summary {
		gap: 16px;
	}
}

/* Also adapt to narrow builder columns inside a wide browser window. */
@container pxra-body (max-width: 740px) {
	.pxra__track {
		--pxra-columns: 2;
		--pxra-slides: 2;
	}
}
@container pxra-body (max-width: 440px) {
	.pxra__track {
		--pxra-columns: 1;
		--pxra-slides: 1;
	}
}
@media (max-width: 540px) {
	.pxra {
		--pxra-columns: 1;
		--pxra-slides: 1;
	}
	.pxra__arrow--prev {
		left: -10px;
	}
	.pxra__arrow--next {
		right: -10px;
	}
}