/**
 * Partner panel.
 *
 * Written to sit inside whatever theme the shop already has, so it styles only
 * its own elements and inherits type and colour where it can. Every colour is a
 * custom property with a fallback: a shop that wants the panel to match its
 * brand overrides three variables rather than rewriting the file.
 *
 * Layout is mobile-first. The panel lives inside My Account, which on a phone
 * is a single narrow column, and dietitians check their earnings on phones.
 */

.hvln-pp-panel {
	--hvln-pp-accent: #815b46;
	--hvln-pp-ink: #404040;
	--hvln-pp-muted: #848484;
	--hvln-pp-line: #e3e3e3;
	--hvln-pp-soft: #f2f2f2;
	--hvln-pp-surface: #fff;
	--hvln-pp-accent-ink: color-mix(in srgb, var(--hvln-pp-accent) 88%, #000);
	--hvln-pp-accent-soft: color-mix(in srgb, var(--hvln-pp-accent) 10%, #fff);
	--hvln-pp-accent-line: color-mix(in srgb, var(--hvln-pp-accent) 35%, #fff);
	/* Overridden per shop from the settings screen; these are the fallbacks for
	   a panel rendered before those ever get emitted. */
	--hvln-pp-button: var(--hvln-pp-accent);
	--hvln-pp-danger: #b81c23;

	color: var(--hvln-pp-ink);
	display: flex;
	flex-direction: column;
	font-size: 14px;
	gap: 22px;
}

/* wc_price() wraps every amount in its own span, and themes routinely give
   that span a size of its own — which is why the panel's headline figures came
   out at the theme's 16px however large the box around them was. The amounts
   here are the panel's own typography, so the span inherits it. */
/* The double class is deliberate: themes style .woocommerce-Price-amount.amount,
   which ties on specificity with a single-class rule and wins on source order
   because the theme's stylesheet loads after this one. */
.hvln-pp-panel .woocommerce-Price-amount,
.hvln-pp-panel .woocommerce-Price-amount.amount {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

/* Head ------------------------------------------------------------------- */

.hvln-pp-head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.hvln-pp-head__title {
	font-size: 24px;
	line-height: 34px;
	font-weight: 600;
	margin: 0;
}

.hvln-pp-head__sub {
	color: var(--hvln-pp-muted);
	font-size: 14px;
	line-height: 20px;
	/* The heading's line box already sits tight against its descender; two
	   pixels left the two lines touching. */
	margin-top: 6px;
}

.hvln-pp-code {
	align-items: center;
	background: var(--hvln-pp-surface);
	border: 1px solid var(--hvln-pp-line);
	display: inline-flex;
	gap: 10px;
	padding: 8px 14px;
}

.hvln-pp-code__label {
	color: var(--hvln-pp-muted);
	font-size: 12px;
}

.hvln-pp-code__value {
	color: var(--hvln-pp-accent);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
}

.hvln-pp-code__value--large {
	display: block;
	font-size: 22px;
	margin: 4px 0 8px;
}

/* Cards ------------------------------------------------------------------ */

.hvln-pp-cards {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 480px) {
	.hvln-pp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.hvln-pp-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hvln-pp-card {
	background: var(--hvln-pp-surface);
	border: 1px solid var(--hvln-pp-line);
	padding: 18px 20px;
}

.hvln-pp-card__label {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-card__value {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin-top: 6px;
}

.hvln-pp-card__value--accent {
	color: var(--hvln-pp-accent);
}

.hvln-pp-card__note {
	color: var(--hvln-pp-muted);
	font-size: 12px;
	margin-top: 4px;
}

.hvln-pp-card__note--pending {
	color: var(--hvln-pp-accent);
	font-weight: 600;
}

/* Boxes ------------------------------------------------------------------ */

.hvln-pp-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.hvln-pp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hvln-pp-box--wide {
		grid-column: span 2;
	}

	.hvln-pp-box--full {
		grid-column: 1 / -1;
	}
}

.hvln-pp-grid--settle {
	gap: 16px;
}

.hvln-pp-box {
	background: var(--hvln-pp-surface);
	border: 1px solid var(--hvln-pp-line);
	padding: 22px 24px;
}

.hvln-pp-box--highlight {
	border-left: 4px solid var(--hvln-pp-accent);
}

.hvln-pp-box__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.hvln-pp-box__title {
	font-size: 16px;
	font-weight: 600;
}

/* Only when the title is the box's own heading rather than one half of a head
   row, which brings its own spacing. Without this the first line of a card
   started immediately under its title. */
.hvln-pp-box > .hvln-pp-box__title {
	display: block;
	margin-bottom: 14px;
}

/* Except where the box already spaces its children with a gap, which would
   otherwise add to this margin rather than replace it. */
.hvln-pp-payout-box > .hvln-pp-box__title,
.hvln-pp-issue > .hvln-pp-box__title {
	margin-bottom: 0;
}

.hvln-pp-box__title--lead {
	font-size: 18px;
	margin-bottom: 20px;
}

.hvln-pp-box__note {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-box__foot {
	border-top: 1px solid var(--hvln-pp-line);
	color: var(--hvln-pp-muted);
	font-size: 12px;
	line-height: 18px;
	margin: 14px 0 0;
	padding-top: 12px;
	text-wrap: pretty;
}

.hvln-pp-link {
	font-size: 14px;
	font-weight: 600;
}

.hvln-pp-list {
	font-size: 13px;
	line-height: 20px;
	margin: 0;
	padding-left: 1.1em;
}

.hvln-pp-list li + li {
	margin-top: 6px;
}

/* Screen-reader only ------------------------------------------------------ */

/* The panel cannot assume the theme defines .screen-reader-text, so it carries
   its own. Clip rather than display:none, which would take the text out of the
   accessibility tree along with the layout. */
.hvln-pp-sr {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Balance card ------------------------------------------------------------ */

.hvln-pp-balance {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 28px;
}

.hvln-pp-balance__head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
}

.hvln-pp-balance__label {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-balance__value {
	color: var(--hvln-pp-accent);
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 46px;
	margin-top: 4px;
}

.hvln-pp-balance__note {
	color: var(--hvln-pp-muted);
	font-size: 13px;
	margin-top: 4px;
}

.hvln-pp-balance__rule {
	background: var(--hvln-pp-line);
	height: 1px;
}

.hvln-pp-balance__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	/* auto-fit rather than a fixed three: the vouchers figure is not drawn on a
	   shop without store credit, and two figures should share the row rather
	   than leave a gap where the third would have been. */
	.hvln-pp-balance__grid {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}
}

.hvln-pp-figure__label {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-figure__value {
	font-size: 20px;
	font-weight: 600;
	margin-top: 2px;
}

.hvln-pp-figure__note {
	color: var(--hvln-pp-muted);
	font-size: 12px;
	margin-top: 2px;
}

.hvln-pp-figure__note--pending {
	color: var(--hvln-pp-accent);
	font-weight: 600;
}

/* Two buttons, and only two: solid and outline. Both take their colour from
   one token, so a shop that recolours the panel recolours every control at
   once and none of them can drift.

   Scoped to the panel so they beat the theme's own a.button, which repaints
   the fill white and leaves a dark frame. The border is stated rather than
   zeroed for the same reason: a theme's frame shows straight through
   border: 0. */
.hvln-pp-panel .hvln-pp-button {
	background: var(--hvln-pp-button);
	border: 1px solid var(--hvln-pp-button);
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	flex-shrink: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	padding: 13px 30px;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}

.hvln-pp-panel .hvln-pp-button:hover,
.hvln-pp-panel .hvln-pp-button:focus {
	background: var(--hvln-pp-surface);
	border-color: var(--hvln-pp-button);
	color: var(--hvln-pp-button);
}

.hvln-pp-panel .hvln-pp-button--outline {
	background: var(--hvln-pp-surface);
	color: var(--hvln-pp-button);
}

.hvln-pp-panel .hvln-pp-button--outline:hover,
.hvln-pp-panel .hvln-pp-button--outline:focus {
	background: var(--hvln-pp-button);
	color: #fff;
}

/* Giving money back is the same outline button in the one colour that is not
   the shop's own: it is the only control in the panel that undoes something. */
.hvln-pp-panel .hvln-pp-button--danger {
	background: var(--hvln-pp-surface);
	border-color: var(--hvln-pp-danger);
	color: var(--hvln-pp-danger);
}

.hvln-pp-panel .hvln-pp-button--danger:hover,
.hvln-pp-panel .hvln-pp-button--danger:focus {
	background: var(--hvln-pp-danger);
	border-color: var(--hvln-pp-danger);
	color: #fff;
}

.hvln-pp-panel .hvln-pp-button--block {
	display: block;
	flex: 1;
	font-size: 13px;
	padding: 9px 0;
	width: auto;
}

.hvln-pp-payout-box {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px;
}

.hvln-pp-payout-box .hvln-pp-box__foot {
	border: 0;
	margin: 0;
	padding: 0;
}

.hvln-pp-payout__lead {
	font-size: 13px;
	line-height: 20px;
	margin: 0;
	text-wrap: pretty;
}

/* Separated by a rule of its own, so the box has one divider above the billing
   details rather than a spacer element that reads as a second line. */
.hvln-pp-invoice {
	border-top: 1px solid var(--hvln-pp-line);
	padding-top: 12px;
}

.hvln-pp-invoice__label {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-invoice__body {
	font-size: 13px;
	font-style: normal;
	line-height: 20px;
	margin: 3px 0 0;
}

/* Payout banner ---------------------------------------------------------- */

.hvln-pp-payout {
	background: var(--hvln-pp-soft);
	padding: 18px 24px;
}

.hvln-pp-payout__headline {
	font-size: 16px;
	font-weight: 600;
}

.hvln-pp-payout__note {
	color: var(--hvln-pp-muted);
	font-size: 13px;
	line-height: 19px;
	margin-top: 2px;
	text-wrap: pretty;
}

.hvln-pp-notice {
	border-left: 4px solid var(--hvln-pp-accent);
	background: var(--hvln-pp-accent-soft);
	font-size: 13px;
	line-height: 21px;
	padding: 18px 24px;
	text-wrap: pretty;
}

/* Terms ------------------------------------------------------------------ */

.hvln-pp-terms {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

/* The theme's line-height is set for paragraphs and made these rows tall
   enough to read as separate blocks rather than as a list. */
.hvln-pp-terms__row {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	line-height: 1.3;
}

.hvln-pp-terms dt {
	color: var(--hvln-pp-muted);
	font-size: 14px;
}

.hvln-pp-terms dd {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

/* A value that is words rather than a figure. Eighteen pixels is the size of a
   number somebody scans for; the same size on "cen regularnych" reads as a
   second heading. */
/* Qualified with the list: a bare class loses to `.hvln-pp-terms dd`, which is
   two classes' worth of specificity, and the rule silently did nothing. */
.hvln-pp-terms dd.hvln-pp-terms__text {
	font-size: 14px;
}

.hvln-pp-terms__accent {
	color: var(--hvln-pp-accent);
}

/* Chart ------------------------------------------------------------------ */

.hvln-pp-chart {
	display: flex;
	gap: 12px;
	height: 168px;
	margin-top: 8px;
}

.hvln-pp-chart__col {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	min-width: 0;
}

/* The column is focusable so the amount is reachable without a mouse; the
   outline is drawn on the bar because the column is mostly empty space. */
.hvln-pp-chart__col:focus {
	outline: none;
}

.hvln-pp-chart__track {
	align-items: flex-end;
	display: flex;
	flex: 1;
	min-height: 0;
}

.hvln-pp-chart__bar {
	background: color-mix(in srgb, var(--hvln-pp-accent) 30%, #fff);
	min-height: 2px;
	position: relative;
	transition: background .12s ease-out;
	width: 100%;
}

.hvln-pp-chart__col.is-current .hvln-pp-chart__bar {
	background: var(--hvln-pp-accent);
}

.hvln-pp-chart__col:hover .hvln-pp-chart__bar,
.hvln-pp-chart__col:focus .hvln-pp-chart__bar {
	background: var(--hvln-pp-accent);
}

.hvln-pp-chart__col:focus-visible .hvln-pp-chart__bar {
	outline: 2px solid var(--hvln-pp-accent-ink);
	outline-offset: 2px;
}

/* The amount, shown over the bar it belongs to. It is in the markup rather
   than in a title attribute so it is styled, instant, and readable on touch —
   a native tooltip is none of those, and on a phone it never appears at all. */
.hvln-pp-chart__tip {
	background: var(--hvln-pp-ink);
	bottom: 100%;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	left: 50%;
	line-height: 16px;
	margin-bottom: 7px;
	opacity: 0;
	padding: 4px 8px;
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, 3px);
	transition: opacity .12s ease-out, transform .12s ease-out;
	white-space: nowrap;
	z-index: 2;
}

.hvln-pp-chart__col:hover .hvln-pp-chart__tip,
.hvln-pp-chart__col:focus .hvln-pp-chart__tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.hvln-pp-chart__bar,
	.hvln-pp-chart__tip {
		transition: none;
	}
}

.hvln-pp-chart__label {
	color: var(--hvln-pp-muted);
	font-size: 11px;
	text-align: center;
}

/* Statistics --------------------------------------------------------------- */

.hvln-pp-card__value--stat {
	font-size: 26px;
	line-height: 36px;
	margin-top: 2px;
}

.hvln-pp-change {
	align-items: center;
	display: flex;
	font-size: 12px;
	gap: 5px;
	margin-top: 3px;
}

.hvln-pp-change__value {
	font-weight: 600;
}

.hvln-pp-change__against {
	color: var(--hvln-pp-muted);
}

/* Green up, red down, and never the accent: this is the one place in the panel
   where colour carries meaning rather than brand, so it must not be mistaken
   for the shop's own highlight. */
.hvln-pp-change.is-up .hvln-pp-change__value {
	color: #0f7b3d;
}

.hvln-pp-change.is-down .hvln-pp-change__value {
	color: var(--hvln-pp-danger);
}

/* Drawn as a triangle rather than shipped as an icon: two of these per card,
   four cards, and an SVG each would be more bytes than the page. */
.hvln-pp-change__arrow {
	border: 5px solid transparent;
	display: inline-block;
	height: 0;
	width: 0;
}

.hvln-pp-change.is-up .hvln-pp-change__arrow {
	border-bottom-color: #0f7b3d;
	margin-bottom: 5px;
}

.hvln-pp-change.is-down .hvln-pp-change__arrow {
	border-top-color: var(--hvln-pp-danger);
	margin-top: 5px;
}

.hvln-pp-facts {
	align-items: stretch;
	display: flex;
	gap: 22px;
}

.hvln-pp-facts__rule {
	background: var(--hvln-pp-line);
	width: 1px;
}

.hvln-pp-fact {
	text-align: right;
}

.hvln-pp-fact__label {
	color: var(--hvln-pp-muted);
	font-size: 12px;
}

.hvln-pp-fact__value {
	font-size: 17px;
	font-weight: 600;
}

.hvln-pp-fact__value--accent {
	color: var(--hvln-pp-accent);
}

.hvln-pp-chart--tall {
	height: 230px;
}

.hvln-pp-box__note--lead {
	display: block;
	margin: 2px 0 12px;
}

@media (min-width: 900px) {
	.hvln-pp-grid--halves {
		grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	}
}

.hvln-pp-grid--halves {
	gap: 16px;
}

.hvln-pp-bar + .hvln-pp-bar {
	margin-top: 14px;
}

.hvln-pp-bar__head {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.hvln-pp-bar__name {
	line-height: 19px;
}

.hvln-pp-bar__value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.hvln-pp-bar__track {
	background: var(--hvln-pp-soft);
	height: 12px;
	margin-top: 7px;
}

.hvln-pp-bar__fill {
	background: var(--hvln-pp-accent);
	height: 12px;
}

.hvln-pp-bar__note {
	color: var(--hvln-pp-muted);
	font-size: 12px;
	margin-top: 4px;
}

.hvln-pp-pairs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hvln-pp-pair {
	align-items: baseline;
	border-bottom: 1px solid var(--hvln-pp-soft);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 11px 0;
}

.hvln-pp-pair:last-child {
	border-bottom: 0;
}

.hvln-pp-pair__names {
	line-height: 20px;
}

.hvln-pp-pair__plus {
	color: var(--hvln-pp-accent);
	font-weight: 600;
	padding: 0 2px;
}

.hvln-pp-pair__count {
	color: var(--hvln-pp-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* The two optional modules ------------------------------------------------- */

.hvln-pp-box__lead {
	color: var(--hvln-pp-muted);
	font-size: 13px;
	line-height: 1.55;
	margin: 0 0 14px;
}

.hvln-pp-suggest {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A name and its reason, stacked rather than side by side: the reason is a
   sentence and would otherwise be squeezed into whatever the name left over. */
.hvln-pp-suggest__row {
	border-bottom: 1px solid var(--hvln-pp-soft);
	padding: 11px 0;
}

.hvln-pp-suggest__row:last-child {
	border-bottom: 0;
}

.hvln-pp-suggest__name {
	display: block;
	font-weight: 600;
	line-height: 20px;
}

.hvln-pp-suggest__why {
	color: var(--hvln-pp-muted);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

.hvln-pp-standing {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

/* Library ------------------------------------------------------------------ */

.hvln-pp-search {
	align-items: center;
	border: 1px solid var(--hvln-pp-muted);
	display: flex;
	gap: 10px;
	min-width: 260px;
	padding: 5px 18px;
}

.hvln-pp-search__input {
	background: transparent;
	border: 0;
	color: inherit;
	flex: 1;
	font-family: inherit;
	font-size: 14px;
	min-width: 0;
	padding: 4px 0;
}

.hvln-pp-search__input:focus {
	outline: none;
}

.hvln-pp-search:focus-within {
	border-color: var(--hvln-pp-accent);
}

/* A magnifier drawn from a circle and a line: two elements the panel already
   loads, against an SVG it would otherwise have to ship. */
.hvln-pp-search__go {
	background: transparent;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
	height: 22px;
	padding: 0;
	position: relative;
	width: 22px;
}

.hvln-pp-search__go::before {
	border: 2px solid var(--hvln-pp-muted);
	border-radius: 50%;
	content: "";
	height: 12px;
	left: 1px;
	position: absolute;
	top: 2px;
	width: 12px;
}

.hvln-pp-search__go::after {
	background: var(--hvln-pp-muted);
	content: "";
	height: 2px;
	position: absolute;
	right: 1px;
	top: 15px;
	transform: rotate(45deg);
	width: 8px;
}

.hvln-pp-search__go:hover::before {
	border-color: var(--hvln-pp-accent);
}

.hvln-pp-search__go:hover::after {
	background: var(--hvln-pp-accent);
}

.hvln-pp-tiles {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.hvln-pp-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.hvln-pp-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hvln-pp-tile {
	background: var(--hvln-pp-surface);
	border: 1px solid var(--hvln-pp-line);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hvln-pp-tile__cover {
	align-items: center;
	background: linear-gradient(150deg, var(--hvln-pp-accent-soft) 0%, var(--hvln-pp-accent-line) 100%);
	display: flex;
	height: 168px;
	justify-content: center;
	position: relative;
}

.hvln-pp-tile__cover img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.hvln-pp-tag {
	background: var(--hvln-pp-surface);
	color: var(--hvln-pp-ink);
	font-size: 11px;
	font-weight: 600;
	left: 12px;
	padding: 4px 10px;
	position: absolute;
	top: 12px;
}

.hvln-pp-tile__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 10px;
	padding: 16px 18px;
}

.hvln-pp-tile__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
	text-wrap: pretty;
}

.hvln-pp-tile__note {
	color: var(--hvln-pp-muted);
	font-size: 12px;
}

/* Badania z produktu: kafelek bez okładki, bo to lista odnośników, a nie
   paczka plików. Zdjęcie produktu nad linkiem do publikacji sugerowałoby, że
   jest co pobrać. */
.hvln-pp-tile--links {
	border-left: 3px solid var(--hvln-pp-accent-line);
}

.hvln-pp-tag--inline {
	align-self: flex-start;
	background: var(--hvln-pp-soft);
	color: var(--hvln-pp-muted);
	left: auto;
	position: static;
	top: auto;
}

.hvln-pp-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hvln-pp-links__item {
	border-top: 1px solid var(--hvln-pp-soft);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 10px;
}

.hvln-pp-links__go {
	color: var(--hvln-pp-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	text-wrap: pretty;
}

.hvln-pp-links__go:hover,
.hvln-pp-links__go:focus {
	color: var(--hvln-pp-accent);
	text-decoration: underline;
}

/* Domena pod nazwą: partner wysyła to dalej i chce wiedzieć, gdzie odnośnik
   prowadzi, zanim w niego kliknie. */
.hvln-pp-links__host {
	color: var(--hvln-pp-muted);
	font-size: 11px;
}

.hvln-pp-tile__foot {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

/* The square secondary control from the artboard: opens the pack rather than
   downloading it, so it is a button and not a second link. */
.hvln-pp-panel .hvln-pp-tile__more {
	background: transparent;
	border: 1px solid var(--hvln-pp-line);
	cursor: pointer;
	flex: 0 0 40px;
	position: relative;
	width: 40px;
}

.hvln-pp-panel .hvln-pp-tile__more::before,
.hvln-pp-panel .hvln-pp-tile__more::after {
	border: 1.5px solid var(--hvln-pp-muted);
	content: "";
	height: 9px;
	position: absolute;
	width: 9px;
}

.hvln-pp-panel .hvln-pp-tile__more::before {
	left: 11px;
	top: 12px;
}

.hvln-pp-panel .hvln-pp-tile__more::after {
	background: var(--hvln-pp-surface);
	left: 17px;
	top: 18px;
}

.hvln-pp-panel .hvln-pp-tile__more:hover::before,
.hvln-pp-panel .hvln-pp-tile__more:hover::after {
	border-color: var(--hvln-pp-accent);
}

/* The whole cover is the way in, so it is a real button covering it rather
   than a click handler on a picture. */
.hvln-pp-tile__cover:has( .hvln-pp-tile__open:not( [hidden] ) ) {
	cursor: pointer;
}

.hvln-pp-tile__open {
	background: transparent;
	border: 0;
	cursor: pointer;
	inset: 0;
	padding: 0;
	position: absolute;
}

.hvln-pp-tile__open:focus-visible {
	outline: 2px solid var(--hvln-pp-accent);
	outline-offset: -2px;
}

/* Gallery ------------------------------------------------------------------ */

.hvln-pp-lb {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	z-index: 99999;
}

.hvln-pp-lb__backdrop {
	background: rgba(0, 0, 0, .62);
	inset: 0;
	position: absolute;
}

.hvln-pp-lb__panel {
	background: #fff;
	color: #404040;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 100%;
	max-width: 880px;
	padding: 18px 20px 20px;
	position: relative;
	width: 100%;
}

.hvln-pp-lb__head {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.hvln-pp-lb__title {
	font-size: 16px;
	font-weight: 600;
}

.hvln-pp-lb__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
	height: 28px;
	position: relative;
	width: 28px;
}

.hvln-pp-lb__close::before,
.hvln-pp-lb__close::after {
	background: #404040;
	content: "";
	height: 2px;
	left: 5px;
	position: absolute;
	top: 13px;
	width: 18px;
}

.hvln-pp-lb__close::before {
	transform: rotate(45deg);
}

.hvln-pp-lb__close::after {
	transform: rotate(-45deg);
}

.hvln-pp-lb__stage {
	align-items: center;
	background: #f2f2f2;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	min-height: 0;
	padding: 8px;
}

/* A fixed stage: pictures in a pack are rarely the same shape, and a frame
   that resized to each one would move the buttons under the cursor between
   one photograph and the next. */
.hvln-pp-lb__view {
	align-items: center;
	display: flex;
	flex: 1;
	height: 54vh;
	justify-content: center;
	min-height: 0;
	min-width: 0;
}

.hvln-pp-lb__view img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.hvln-pp-lb__format {
	color: #848484;
	font-size: 22px;
	font-weight: 600;
	padding: 60px 0;
}

.hvln-pp-lb__nav {
	background: #fff;
	border: 1px solid #e3e3e3;
	cursor: pointer;
	flex-shrink: 0;
	height: 40px;
	position: relative;
	width: 40px;
}

.hvln-pp-lb__nav::before {
	border-bottom: 2px solid #404040;
	border-right: 2px solid #404040;
	content: "";
	height: 9px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 9px;
}

.hvln-pp-lb__nav--prev::before {
	transform: translate(-30%, -50%) rotate(135deg);
}

.hvln-pp-lb__nav--next::before {
	transform: translate(-70%, -50%) rotate(-45deg);
}

.hvln-pp-lb__nav:hover {
	border-color: var(--hvln-pp-button, #815b46);
}

.hvln-pp-lb__meta {
	color: #848484;
	font-size: 13px;
}

.hvln-pp-lb__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hvln-pp-lb__thumb {
	background: #f2f2f2;
	border: 1px solid #e3e3e3;
	cursor: pointer;
	height: 54px;
	padding: 0;
	width: 54px;
}

.hvln-pp-lb__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.hvln-pp-lb__thumb.is-current {
	border-color: var(--hvln-pp-button, #815b46);
	box-shadow: inset 0 0 0 1px var(--hvln-pp-button, #815b46);
}

.hvln-pp-lb__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hvln-pp-lb__get,
.hvln-pp-lb__zip {
	border: 1px solid var(--hvln-pp-button, #815b46);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 24px;
	text-decoration: none;
}

.hvln-pp-lb__get {
	background: var(--hvln-pp-button, #815b46);
	color: #fff;
}

.hvln-pp-lb__get:hover,
.hvln-pp-lb__get:focus {
	background: #fff;
	color: var(--hvln-pp-button, #815b46);
}

.hvln-pp-lb__zip {
	background: #fff;
	color: var(--hvln-pp-button, #815b46);
}

.hvln-pp-lb__zip:hover,
.hvln-pp-lb__zip:focus {
	background: var(--hvln-pp-button, #815b46);
	color: #fff;
}

/* The page behind the overlay must not scroll under it. */
body.hvln-pp-lb-open {
	overflow: hidden;
}

.hvln-pp-files {
	border-top: 1px solid var(--hvln-pp-line);
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.hvln-pp-file {
	align-items: center;
	border-bottom: 1px solid var(--hvln-pp-soft);
	display: flex;
	gap: 10px;
	padding: 8px 0;
}

.hvln-pp-file:last-child {
	border-bottom: 0;
}

.hvln-pp-file__thumb {
	background: var(--hvln-pp-soft);
	flex: 0 0 40px;
	height: 40px;
	object-fit: cover;
	width: 40px;
}

.hvln-pp-file__thumb--none {
	align-items: center;
	color: var(--hvln-pp-muted);
	display: flex;
	font-size: 10px;
	font-weight: 600;
	justify-content: center;
}

.hvln-pp-file__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hvln-pp-file__name {
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hvln-pp-file__note {
	color: var(--hvln-pp-muted);
	font-size: 11px;
}

.hvln-pp-file__get {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	margin-left: auto;
}

/* Table ------------------------------------------------------------------ */

.hvln-pp-table {
	border-collapse: collapse;
	width: 100%;
}

.hvln-pp-table th {
	border-bottom: 1px solid var(--hvln-pp-line);
	color: var(--hvln-pp-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	padding: 10px 0;
	text-align: left;
	text-transform: uppercase;
}

.hvln-pp-table td {
	border-bottom: 1px solid var(--hvln-pp-soft);
	font-size: 14px;
	padding: 14px 0;
}

/* `.hvln-pp-table th` sets text-align: left and outscores a bare class on
   specificity, so the two right-hand headers - prowizja and status - sat on the
   left while their own cells sat on the right. The markup had said "right"
   since the first version; the stylesheet quietly overruled it. Named with the
   element here so the two rules cannot argue again. */
.hvln-pp-table__right,
.hvln-pp-table th.hvln-pp-table__right,
.hvln-pp-table td.hvln-pp-table__right {
	text-align: right;
}

.hvln-pp-row__muted {
	color: var(--hvln-pp-muted);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

/* Rozliczenie cofnięte zostaje na liście — przekreślona kwota mówi, co się
   stało, a zniknięcie wiersza kazałoby dietetyczce zgadywać, czy dobrze
   pamięta. */
.hvln-pp-row--reversed td {
	color: var(--hvln-pp-muted);
}

.hvln-pp-row--reversed .hvln-pp-row__amount .woocommerce-Price-amount {
	text-decoration: line-through;
}

.hvln-pp-row__amount {
	font-weight: 600;
}

.hvln-pp-row.is-reversal .hvln-pp-row__amount {
	color: var(--hvln-pp-muted);
}

.hvln-pp-row__detail td {
	border-bottom: 1px solid var(--hvln-pp-soft);
	color: var(--hvln-pp-muted);
	font-size: 13px;
	padding-top: 0;
}

.hvln-pp-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	white-space: nowrap;
}

.hvln-pp-badge--pending {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--hvln-pp-accent-line);
	color: var(--hvln-pp-accent);
}

.hvln-pp-badge--available {
	background: var(--hvln-pp-accent-soft);
	color: var(--hvln-pp-accent);
}

.hvln-pp-badge--void {
	background: var(--hvln-pp-soft);
	color: var(--hvln-pp-muted);
}

.hvln-pp-empty {
	color: var(--hvln-pp-muted);
	font-size: 14px;
	margin: 8px 0;
}

/* On a phone the table becomes a stack of labelled rows. A four-column table
   squeezed into 360px is unreadable, and this is the width most dietitians
   will actually open the panel at. */

@media (max-width: 600px) {
	.hvln-pp-table thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.hvln-pp-table,
	.hvln-pp-table tbody,
	.hvln-pp-table tr,
	.hvln-pp-table td {
		display: block;
		width: 100%;
	}

	.hvln-pp-table tr {
		border-bottom: 1px solid var(--hvln-pp-line);
		padding: 10px 0;
	}

	.hvln-pp-table td,
	.hvln-pp-table td.hvln-pp-table__right {
		border: 0;
		padding: 2px 0;
		/* The stack has no columns to align against, so the right-hand cells
		   come back to the left with everything else. Spelled out with the
		   class because the desktop rule now names the element too. */
		text-align: left;
	}

	.hvln-pp-row__amount {
		font-size: 16px;
	}
}

/* Filters ---------------------------------------------------------------- */

.hvln-pp-filters {
	align-items: flex-end;
	background: var(--hvln-pp-surface);
	border: 1px solid var(--hvln-pp-line);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 12px;
	padding: 16px 20px;
}

.hvln-pp-filters__field {
	display: flex;
	flex: 1 1 140px;
	flex-direction: column;
	gap: 4px;
}

.hvln-pp-filters__field span {
	color: var(--hvln-pp-muted);
	font-size: 12px;
}

.hvln-pp-filters__field input,
.hvln-pp-filters__field select {
	border: 1px solid var(--hvln-pp-line);
	padding: 8px 10px;
	width: 100%;
}

.hvln-pp-filters__actions {
	align-items: center;
	display: flex;
	gap: 12px;
}

/* Pager ------------------------------------------------------------------ */

.hvln-pp-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 16px;
}

.hvln-pp-pager .page-numbers {
	border: 1px solid var(--hvln-pp-line);
	display: inline-block;
	font-size: 14px;
	padding: 6px 12px;
}

.hvln-pp-pager .page-numbers.current {
	background: var(--hvln-pp-ink);
	border-color: var(--hvln-pp-ink);
	color: #fff;
}

/* Steps and rules --------------------------------------------------------- */

.hvln-pp-steps {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.hvln-pp-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

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

.hvln-pp-steps__number {
	align-items: center;
	background: var(--hvln-pp-accent);
	color: #fff;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.hvln-pp-steps__title {
	font-size: 15px;
	font-weight: 600;
}

.hvln-pp-steps__body {
	color: var(--hvln-pp-muted);
	font-size: 13px;
	line-height: 20px;
	text-wrap: pretty;
}

/* Krok czwarty prowadzi do Rozliczeń, bo tam jest odpowiedź na „jak to
   dostanę". Na własnym wierszu, żeby nie wyglądał jak podlinkowane słowo w
   środku zdania. */
.hvln-pp-steps__link {
	color: var(--hvln-pp-accent);
	display: block;
	font-weight: 600;
	margin-top: 6px;
	text-decoration: none;
}

.hvln-pp-steps__link:hover,
.hvln-pp-steps__link:focus {
	text-decoration: underline;
}

.hvln-pp-rules {
	color: var(--hvln-pp-ink);
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: 10px;
	line-height: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hvln-pp-rules li {
	display: flex;
	gap: 10px;
}

/* The number is a real element rather than a list marker: the artboard puts it
   in the accent colour and bold, which a ::marker cannot be styled into
   reliably across browsers. */
.hvln-pp-rules__number {
	color: var(--hvln-pp-accent);
	flex-shrink: 0;
	font-weight: 600;
}

.hvln-pp-rules strong {
	font-weight: 600;
}



/* Chips ------------------------------------------------------------------- */

.hvln-pp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hvln-pp-panel .hvln-pp-chip {
	background: transparent;
	border: 1px solid var(--hvln-pp-line);
	cursor: pointer;
	color: var(--hvln-pp-ink);
	font-size: 13px;
	line-height: 1.3;
	padding: 6px 16px;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}

.hvln-pp-panel .hvln-pp-chip:hover {
	border-color: var(--hvln-pp-accent);
	color: var(--hvln-pp-accent);
}

.hvln-pp-panel .hvln-pp-chip.is-active {
	background: var(--hvln-pp-accent);
	border-color: var(--hvln-pp-accent);
	color: #fff;
}

/* Code, copyable ---------------------------------------------------------- */

.hvln-pp-codebox {
	align-items: center;
	background: var(--hvln-pp-soft);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 13px 16px;
}

.hvln-pp-codebox .hvln-pp-code__value--large {
	margin: 0;
}

.hvln-pp-codebox__value {
	color: var(--hvln-pp-accent);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .06em;
}

.hvln-pp-linkbox {
	margin-top: 18px;
}

.hvln-pp-linkbox__label {
	color: var(--hvln-pp-muted);
	font-size: 11px;
	letter-spacing: .06em;
	margin-bottom: 7px;
	text-transform: uppercase;
}

/* An address is longer than a code and must not push the copy button off the
   card. It wraps at any character rather than at spaces, because a URL has
   none, and keeps the smaller of the two type sizes. */
.hvln-pp-codebox--link {
	align-items: flex-start;
	padding: 11px 14px;
}

.hvln-pp-linkbox__value {
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: break-all;
}

/* Turning a balance into a code ------------------------------------------- */

.hvln-pp-issue {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 26px 28px 28px;
}

.hvln-pp-issue__form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
}

.hvln-pp-issue__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.hvln-pp-issue__label {
	font-size: 15px;
	font-weight: 600;
}

.hvln-pp-issue__balance {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-issue__balance strong {
	color: var(--hvln-pp-ink);
	font-weight: 600;
}

.hvln-pp-issue__row {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hvln-pp-issue__row .hvln-pp-chip {
	padding: 0 18px;
}

/* The amount is the one control on this page that spends money, so it is the
   size of the number it holds rather than the size of a form field. */
.hvln-pp-amount {
	align-items: baseline;
	border: 1px solid var(--hvln-pp-muted);
	display: flex;
	flex: 1 1 220px;
	gap: 8px;
	justify-content: space-between;
	padding: 13px 20px;
}

.hvln-pp-amount__input {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 22px;
	font-weight: 600;
	min-width: 0;
	padding: 0;
	width: 100%;
}

.hvln-pp-amount__input:focus {
	outline: none;
}

.hvln-pp-amount:focus-within {
	border-color: var(--hvln-pp-accent);
}

.hvln-pp-amount__suffix {
	color: var(--hvln-pp-muted);
	font-size: 14px;
}

.hvln-pp-issue__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.hvln-pp-issue__hint {
	color: var(--hvln-pp-muted);
	font-size: 13px;
	line-height: 19px;
	max-width: 300px;
	text-wrap: pretty;
}

.hvln-pp-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hvln-pp-cancel {
	margin: 14px 0 0;
}

.hvln-pp-notice--warn {
	border-left-color: var(--hvln-pp-danger);
}

.hvln-pp-row__code {
	font-weight: 600;
	letter-spacing: .04em;
}

/* The copy control is the artboard's glyph, drawn as a mask so it takes its
   colour from the text around it and turns accent on hover without a second
   copy of the SVG. */
.hvln-pp-copy {
	background: transparent;
	border: 0;
	color: var(--hvln-pp-muted);
	cursor: pointer;
	flex-shrink: 0;
	height: 16px;
	padding: 0;
	transition: color .2s;
	width: 16px;
}

.hvln-pp-copy::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 100%;
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27square%27%3E%3Crect%20x%3D%279%27%20y%3D%279%27%20width%3D%2712%27%20height%3D%2712%27%2F%3E%3Cpath%20d%3D%27M5%2015V5a2%202%200%200%201%202-2h10%27%2F%3E%3C%2Fsvg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 100%;
}

.hvln-pp-copy:hover,
.hvln-pp-copy:focus-visible {
	color: var(--hvln-pp-accent);
}

/* Copied: the glyph becomes a tick for a moment. A word would reflow the row
   it sits in, which is exactly the wrong feedback for "nothing changed except
   your clipboard". */
.hvln-pp-copy.is-done {
	color: var(--hvln-pp-accent);
}

.hvln-pp-copy.is-done::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27square%27%3E%3Cpath%20d%3D%27m4%2012%205%205L20%206%27%2F%3E%3C%2Fsvg%3E");
}

/* Expandable rows --------------------------------------------------------- */

.hvln-pp-toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	height: 24px;
	padding: 0;
	position: relative;
	width: 24px;
}

.hvln-pp-toggle::before {
	border-bottom: 1.6px solid var(--hvln-pp-muted);
	border-right: 1.6px solid var(--hvln-pp-muted);
	content: "";
	height: 7px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform .2s;
	width: 7px;
}

.hvln-pp-toggle[aria-expanded="true"]::before {
	transform: translate(-50%, -30%) rotate(-135deg);
}

.hvln-pp-toggle:hover::before {
	border-color: var(--hvln-pp-accent);
}

/* The expanded row explains the commission; it never restates the customer's
   order value. "Podstawa" is the definition of what was counted, not an
   amount — a dietitian is not shown what her patient paid. */
.hvln-pp-detail {
	padding: 16px 0 18px;
}

.hvln-pp-detail__title {
	color: var(--hvln-pp-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.hvln-pp-detail__list {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: 6px;
	margin: 0;
	max-width: 480px;
}

.hvln-pp-detail__row {
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.hvln-pp-detail__row dt {
	color: var(--hvln-pp-muted);
	flex-shrink: 0;
}

.hvln-pp-detail__row dd {
	margin: 0;
	text-align: right;
}

.hvln-pp-detail__row--total {
	border-top: 1px solid var(--hvln-pp-line);
	font-weight: 600;
	margin-top: 3px;
	padding-top: 9px;
}

.hvln-pp-detail__row--total dd {
	color: var(--hvln-pp-accent);
}

.hvln-pp-detail__foot {
	color: var(--hvln-pp-muted);
	display: flex;
	font-size: 12px;
	gap: 16px;
	justify-content: space-between;
	margin-top: 6px;
	max-width: 480px;
}

/* While a filter is loading the list dims rather than disappearing: a table
   that empties and refills reads as "you have nothing", which is the one thing
   it must never say by accident. */
[data-hvln-pp-region][aria-busy="true"] {
	opacity: .55;
	transition: opacity .12s ease-out;
}

[data-hvln-pp-region][aria-busy="true"] .hvln-pp-chips,
[data-hvln-pp-region][aria-busy="true"] .hvln-pp-pager {
	pointer-events: none;
}

/* Table footer ------------------------------------------------------------ */

.hvln-pp-tablefoot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 0 4px;
}

.hvln-pp-tablefoot .hvln-pp-pager {
	margin: 0;
}

/* A box that is really a signpost ----------------------------------------- */

.hvln-pp-box--link {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
}

.hvln-pp-box--link .hvln-pp-box__note {
	margin: 4px 0 0;
}


/* Payout terms ------------------------------------------------------------ */

.hvln-pp-payout__lead {
	font-size: 13px;
	line-height: 20px;
	margin: 12px 0 0;
	text-wrap: pretty;
}

.hvln-pp-terms--compact {
	font-size: 13px;
	gap: 7px;
	margin-top: 12px;
}

.hvln-pp-terms--compact dt {
	font-size: 13px;
}

.hvln-pp-terms--compact dd {
	font-size: 13px;
	font-weight: 600;
}

.hvln-pp-invoice {
	border-top: 1px solid var(--hvln-pp-line);
	margin-top: 14px;
	padding-top: 12px;
}

/* Separated by a rule of its own, so the box has one divider above the billing
   details rather than a spacer element that reads as a second line. */
.hvln-pp-invoice {
	border-top: 1px solid var(--hvln-pp-line);
	padding-top: 12px;
}

.hvln-pp-invoice__label {
	color: var(--hvln-pp-muted);
	font-size: 13px;
}

.hvln-pp-invoice__body {
	font-size: 13px;
	font-style: normal;
	line-height: 20px;
	margin: 3px 0 0;
}

/* Formularz zgłoszeniowy ------------------------------------------------- */

/* Stoi na stronie sklepu, nie w panelu, więc nie dziedziczy jego tokenów —
   bierze je z tych samych zmiennych, ale deklaruje własne wartości domyślne na
   wypadek, gdyby motyw nie dopuścił inline'owej palety. */
.hvln-pp-apply {
	--hvln-pp-apply-accent: var(--hvln-pp-accent, #815b46);
	--hvln-pp-apply-line: var(--hvln-pp-line, #e2ded9);
	--hvln-pp-apply-muted: var(--hvln-pp-muted, #6f6862);
	--hvln-pp-apply-danger: var(--hvln-pp-danger, #b81c23);
	margin: 0 auto;
	max-width: 640px;
}

.hvln-pp-apply__intro h2,
.hvln-pp-apply__done h2 {
	margin: 0 0 8px;
}

.hvln-pp-apply__lead {
	color: var(--hvln-pp-apply-muted);
	font-size: 14px;
}

.hvln-pp-apply__done {
	border-left: 3px solid var(--hvln-pp-apply-accent);
	padding: 4px 0 4px 18px;
}

.hvln-pp-apply__alert {
	background: #fdf2f2;
	border-left: 3px solid var(--hvln-pp-apply-danger);
	padding: 12px 16px;
}

.hvln-pp-apply__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 22px;
}

.hvln-pp-apply__row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.hvln-pp-apply__row .hvln-pp-apply__field {
	flex: 1 1 240px;
	min-width: 0;
}

.hvln-pp-apply__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hvln-pp-apply__field label {
	font-size: 14px;
	font-weight: 600;
}

.hvln-pp-apply__field input,
.hvln-pp-apply__field select,
.hvln-pp-apply__field textarea {
	border: 1px solid var(--hvln-pp-apply-line);
	border-radius: 0;
	font: inherit;
	padding: 10px 12px;
	width: 100%;
}

.hvln-pp-apply__field.has-error input,
.hvln-pp-apply__field.has-error select,
.hvln-pp-apply__field.has-error textarea {
	border-color: var(--hvln-pp-apply-danger);
}

.hvln-pp-apply__error {
	color: var(--hvln-pp-apply-danger);
	font-size: 13px;
}

.hvln-pp-apply__consent label {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	font-size: 14px;
}

.hvln-pp-apply__consent input {
	margin-top: 3px;
}

.hvln-pp-apply__legal,
.hvln-pp-apply__required {
	color: var(--hvln-pp-apply-muted);
	font-size: 13px;
	margin: 0;
}

/* Pułapka na boty. Ukryta wizualnie i wyjęta z kolejności tabulacji, ale nie
   przez display:none — część botów pomija pola, których przeglądarka nie
   renderuje, a o to właśnie chodzi, żeby ją wypełniły. */
.hvln-pp-apply__trap {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* Formularz pod własnym adresem nie ma szablonu motywu, więc dostaje własny
   kontener — inaczej na motywie, który otwiera wrapper w swoich templatkach,
   przykleiłby się do krawędzi okna. */
.hvln-pp-apply-page {
	display: block;
	padding: 48px 24px 72px;
}

/* A download sits among the filter chips but is not one: it does not change
   what the list shows, it takes the list away. Outlined rather than filled so
   it reads as a different kind of thing without shouting. */
.hvln-pp-chip--file {
	border-style: dashed;
	margin-left: auto;
}

.hvln-pp-head .hvln-pp-button {
	flex-shrink: 0;
}