/**
 * «Localiza tu pedido».
 *
 * The approved mock-up, on the theme's tokens with the same values as
 * fallbacks. Summary first (status, estimate, progress, facts), detail below in
 * two columns — history | products and help — that stack on phones. Every row
 * either spans the card or takes an equal share of it, so edges line up.
 */

.pstr {
	--pstr-brand-900: var(--ps-color-brand-900, #0c1727);
	--pstr-brand-700: var(--ps-color-brand-700, #162a46);
	--pstr-brand-600: var(--ps-color-brand-600, #1c3557);
	--pstr-brand-500: var(--ps-color-brand-500, #254674);
	--pstr-brand-100: var(--ps-color-brand-100, #e2e9f3);
	--pstr-brand-50: var(--ps-color-brand-50, #f2f5fa);
	--pstr-brand-border: var(--ps-color-brand-border, #cdd7e4);
	--pstr-ink: var(--ps-color-ink-strong, #0f0c0d);
	--pstr-text: var(--ps-color-text, #211d1f);
	--pstr-muted: var(--ps-color-text-muted, #70676b);
	--pstr-faint: #a39a9e;
	--pstr-border: var(--ps-color-border, #e3dcde);
	--pstr-line: #ece6e8;
	--pstr-surface: var(--ps-color-surface, #ffffff);
	--pstr-subtle: var(--ps-color-surface-subtle, #f8f6f6);
	--pstr-success: var(--ps-color-success, #18794e);
	--pstr-success-soft: #e8f4ee;
	--pstr-info: var(--ps-color-info, #2563a8);
	--pstr-info-soft: #e9f1fa;
	--pstr-warning: var(--ps-color-warning, #a15c00);
	--pstr-warning-soft: #fdf3e4;
	--pstr-danger: var(--ps-color-danger, #c33232);
	--pstr-radius: var(--ps-radius-md, 8px);
	--pstr-radius-lg: var(--ps-radius-lg, 12px);
	--pstr-tone: var(--pstr-info);
	--pstr-tone-soft: var(--pstr-info-soft);

	box-sizing: border-box;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	color: var(--pstr-text);
	font-family: var(--ps-font-sans, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: 16px;
	line-height: 1.5;
}

.pstr *,
.pstr *::before,
.pstr *::after {
	box-sizing: border-box;
}

.pstr [hidden] {
	display: none !important;
}

.pstr p,
.pstr h2,
.pstr h3,
.pstr ol,
.pstr ul {
	margin: 0;
}

.pstr svg {
	flex: 0 0 auto;
}

/* No focus ring, as on the shop's forms; focus shows by border or fill. */
.pstr.pstr :is(a, button, input, [tabindex]):is(:focus, :focus-visible) {
	outline: none;
}

[data-tone="info"] { --pstr-tone: var(--pstr-info); --pstr-tone-soft: var(--pstr-info-soft); }
[data-tone="brand"] { --pstr-tone: var(--pstr-brand-600); --pstr-tone-soft: var(--pstr-brand-100); }
[data-tone="success"] { --pstr-tone: var(--pstr-success); --pstr-tone-soft: var(--pstr-success-soft); }
[data-tone="warning"] { --pstr-tone: var(--pstr-warning); --pstr-tone-soft: var(--pstr-warning-soft); }

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

.pstr-card {
	overflow: hidden;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-surface);
}

/* ---------------------------------------------------------- the header -- */

.pstr-found {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 18px;
	color: var(--pstr-muted);
	font-size: 15px;
}

.pstr-found b {
	color: var(--pstr-text);
}

.pstr-found__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	min-width: 0;
}

.pstr-overview {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pstr-mini {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--pstr-border);
	border-radius: 999px;
	background: var(--pstr-surface);
	color: var(--pstr-text);
	font-size: 13px;
	font-weight: 600;
}

.pstr-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--pstr-info);
}

.pstr-dot--brand { background: var(--pstr-brand-600); }
.pstr-dot--success { background: var(--pstr-success); }
.pstr-dot--warning { background: var(--pstr-warning); }

.pstr-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pstr-brand-600);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.pstr-link-btn svg {
	width: 18px;
	height: 18px;
}

/* --------------------------------------------------------------- tabs -- */

.pstr-tabs {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	border-bottom: 1px solid var(--pstr-border);
	background: var(--pstr-subtle);
}

.pstr-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 16px 22px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--pstr-muted);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pstr-tab + .pstr-tab {
	border-left: 1px solid var(--pstr-border);
}

.pstr-tab[aria-selected="true"] {
	background: var(--pstr-surface);
	color: var(--pstr-text);
}

.pstr-tab[aria-selected="true"]::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	background: var(--pstr-brand-700);
	content: '';
}

.pstr-tab__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius);
	background: #fff;
	object-fit: cover;
}

.pstr-tab__copy {
	display: grid;
	min-width: 0;
}

.pstr-tab__title {
	font-size: 15px;
	font-weight: 750;
}

.pstr-tab__state {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	color: var(--pstr-muted);
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------ summary -- */

.pstr-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 24px 32px;
	padding: 32px 32px 8px;
}

.pstr-status {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-width: 0;
}

.pstr-status__icon {
	display: grid;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	place-items: center;
	border-radius: 16px;
	background: var(--pstr-tone-soft);
	color: var(--pstr-tone);
}

.pstr-status__icon svg {
	width: 28px;
	height: 28px;
}

.pstr-status__eyebrow {
	margin-bottom: 4px !important;
	color: var(--pstr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pstr .pstr-status__title {
	margin-bottom: 6px;
	color: var(--pstr-ink);
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 850;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.pstr-status__text {
	max-width: 54ch;
	color: var(--pstr-text);
	font-size: 16px;
}

.pstr-status__when {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 8px !important;
	color: var(--pstr-muted);
	font-size: 14px;
}

.pstr-fresh {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pstr-fresh::before {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--pstr-success);
	content: '';
}

.pstr-eta {
	min-width: 220px;
	padding: 16px 18px;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-subtle);
}

.pstr-eta__label {
	margin-bottom: 4px !important;
	color: var(--pstr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pstr-eta__value {
	color: var(--pstr-ink);
	font-size: 18px;
	font-weight: 800;
}

.pstr-eta__note {
	margin-top: 4px !important;
	color: var(--pstr-muted);
	font-size: 13px;
}

/* ----------------------------------------------------------- progress -- */

.pstr-progress {
	padding: 26px 32px 30px;
}

.pstr-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: 0;
	list-style: none;
}

.pstr-step {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 10px;
	margin: 0;
	text-align: center;
}

.pstr-step::before {
	position: absolute;
	top: 15px;
	right: 50%;
	left: -50%;
	height: 3px;
	background: var(--pstr-line);
	content: '';
}

.pstr-step:first-child::before {
	display: none;
}

.pstr-step.is-done::before,
.pstr-step.is-now::before {
	background: var(--pstr-tone);
}

.pstr-step__mark {
	position: relative;
	z-index: 1;
	display: grid;
	width: 33px;
	height: 33px;
	place-items: center;
	border: 2px solid var(--pstr-line);
	border-radius: 999px;
	background: var(--pstr-surface);
	color: var(--pstr-faint);
}

.pstr-step__mark svg {
	width: 16px;
	height: 16px;
}

.pstr-step.is-done .pstr-step__mark {
	border-color: var(--pstr-tone);
	background: var(--pstr-tone);
	color: #fff;
}

.pstr-step.is-now .pstr-step__mark {
	border-color: var(--pstr-tone);
	box-shadow: 0 0 0 5px var(--pstr-tone-soft);
	color: var(--pstr-tone);
}

.pstr-step__label {
	color: var(--pstr-faint);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.pstr-step.is-done .pstr-step__label,
.pstr-step.is-now .pstr-step__label {
	color: var(--pstr-text);
}

.pstr-step.is-now .pstr-step__label {
	font-weight: 800;
}

.pstr-progress__caption {
	display: none;
}

/* ------------------------------------------------------------ actions -- */

.pstr-alert,
.pstr-cta {
	margin: 0 32px 26px !important;
}

.pstr-alert {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #f1d7ad;
	border-radius: var(--pstr-radius);
	background: var(--pstr-warning-soft);
	color: #6d3f00;
	font-size: 15px;
}

.pstr-alert > svg {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.pstr-alert__body {
	display: grid;
	flex: 1;
	justify-items: start;
	gap: 12px;
	min-width: 0;
}

.pstr-cta {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid #bfe0cd;
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-success-soft);
}

.pstr-cta__icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 12px;
	background: var(--pstr-surface);
	color: var(--pstr-success);
}

.pstr-cta__icon svg {
	width: 22px;
	height: 22px;
}

.pstr-cta__title {
	color: var(--pstr-ink);
	font-size: 16px;
	font-weight: 800;
}

.pstr-cta__text {
	margin-top: 2px !important;
	font-size: 14px;
}

/* After delivery: help with the delivery, the return a quiet link beside. */
.pstr-cta--help {
	border-color: #cfdcec;
	background: var(--pstr-info-soft);
}

.pstr-cta--help .pstr-cta__icon {
	color: var(--pstr-info);
}

.pstr-cta__actions {
	display: grid;
	justify-items: center;
	gap: 6px;
}

.pstr-cta__link {
	color: var(--pstr-brand-600);
	font-size: 13px;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------- facts -- */

.pstr-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--pstr-border);
	border-bottom: 1px solid var(--pstr-border);
	background: var(--pstr-subtle);
}

.pstr-fact {
	display: grid;
	align-content: start;
	gap: 4px;
	min-width: 0;
	padding: 18px 24px;
}

.pstr-fact + .pstr-fact {
	border-left: 1px solid var(--pstr-border);
}

.pstr-fact__label {
	color: var(--pstr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pstr-fact__value {
	color: var(--pstr-ink);
	font-size: 16px;
	font-weight: 750;
	overflow-wrap: anywhere;
}

.pstr-fact__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--pstr-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* The tracking number, linked to the carrier: one line, never broken. */
.pstr-fact__sub--number {
	flex-wrap: nowrap;
}

/* A route with a stop breaks between stops, never inside one. */
.pstr-route > span {
	white-space: nowrap;
}

/* On wider screens the copy button sits in the fact's top-right corner, level
   with its label; the number keeps the full width of the line below. */
@media (min-width: 641px) {
	.pstr-fact {
		position: relative;
	}

	.pstr-fact:has(.pstr-copy) .pstr-fact__label {
		padding-right: 36px;
	}

	.pstr-fact__sub--number .pstr-copy {
		position: absolute;
		top: 14px;
		right: 24px;
	}
}

.pstr-num {
	min-width: 0;
	overflow: hidden;
	color: var(--pstr-text);
	font-weight: 600;
	letter-spacing: .02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pstr-num--link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--pstr-brand-600);
	font-weight: 700;
	text-decoration: none;
}

.pstr-num--link span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pstr-num--link svg {
	width: 13px;
	height: 13px;
}

.pstr-num--link:hover span {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pstr-fact__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: max-content;
	color: var(--pstr-brand-600);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.pstr-fact__link svg {
	width: 13px;
	height: 13px;
}

.pstr-fact__link:hover {
	text-decoration: underline;
}

.pstr-carrier {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Carriers' own logos, as AST stores them: one square white frame for all,
   the image fitted whole inside it, never cropped or stretched. */
.pstr-logo {
	display: grid;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 3px;
	place-items: center;
	overflow: hidden;
	border: 1px solid var(--pstr-border);
	border-radius: 6px;
	background: #fff;
}

.pstr-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pstr-badge {
	display: inline-grid;
	flex: 0 0 auto;
	height: 22px;
	padding: 0 7px;
	place-items: center;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .02em;
	white-space: nowrap;
}

.pstr-copy {
	display: inline-grid;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	place-items: center;
	border: 1px solid var(--pstr-border);
	border-radius: 6px;
	background: var(--pstr-surface);
	color: var(--pstr-muted);
	cursor: pointer;
}

.pstr-copy svg {
	width: 14px;
	height: 14px;
}

.pstr-copy.is-done {
	border-color: var(--pstr-success);
	color: var(--pstr-success);
}

/* ------------------------------------------------------------- detail -- */

.pstr-detail {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.pstr-detail > * {
	min-width: 0;
	padding: 28px 32px 32px;
}

.pstr-detail > .pstr-side {
	border-left: 1px solid var(--pstr-border);
}

@media (min-width: 861px) {
	.pstr-side__inner {
		position: sticky;
		top: 96px;
	}
}

.pstr .pstr-section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	color: var(--pstr-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.pstr-section-title small {
	color: var(--pstr-muted);
	font-size: 13px;
	font-weight: 600;
}

/* history */
.pstr-day + .pstr-day {
	margin-top: 22px;
}

.pstr-day__label {
	margin-bottom: 10px !important;
	color: var(--pstr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pstr-events {
	padding: 0;
	list-style: none;
}

.pstr-event {
	display: grid;
	grid-template-columns: 52px 22px minmax(0, 1fr);
	align-items: start;
	margin: 0;
}

.pstr-event__time {
	padding-top: 1px;
	color: var(--pstr-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.pstr-event__rail {
	position: relative;
	align-self: stretch;
}

.pstr-event__rail::before {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--pstr-brand-border);
	border-radius: 999px;
	background: var(--pstr-surface);
	content: '';
}

.pstr-event__rail::after {
	position: absolute;
	top: 20px;
	bottom: -6px;
	left: 10px;
	width: 2px;
	background: var(--pstr-line);
	content: '';
}

.pstr-events .pstr-event:last-child .pstr-event__rail::after {
	display: none;
}

.pstr-event__body {
	padding: 0 0 16px 8px;
}

.pstr-event__text {
	color: var(--pstr-text);
	font-size: 15px;
	line-height: 1.45;
}

.pstr-event__place {
	margin-top: 2px !important;
	color: var(--pstr-muted);
	font-size: 13px;
}

.pstr-event.is-latest .pstr-event__rail::before {
	border-color: var(--pstr-tone);
	background: var(--pstr-tone);
	box-shadow: 0 0 0 4px var(--pstr-tone-soft);
}

.pstr-event.is-latest .pstr-event__text {
	color: var(--pstr-ink);
	font-weight: 700;
}

.pstr-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	margin: 8px 0 0;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius);
	background: var(--pstr-surface);
	color: var(--pstr-brand-600);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pstr-more svg {
	width: 18px;
	height: 18px;
	transition: transform .2s;
}

.pstr-more[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.pstr-empty {
	color: var(--pstr-muted);
	font-size: 15px;
}

/* delivery address */
.pstr-address-block {
	margin-bottom: 28px;
}

.pstr-address {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-surface);
}

.pstr-address__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--pstr-radius);
	background: var(--pstr-subtle);
	color: var(--pstr-ink);
}

.pstr-address__icon svg {
	width: 18px;
	height: 18px;
}

.pstr-address address {
	margin: 0;
	font-size: 15px;
	font-style: normal;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.pstr-address__note {
	margin: 12px 0 10px !important;
	color: var(--pstr-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* The email that opens the full address: field and button on one line. */
.pstr-unlock .pstr-field {
	gap: 6px;
}

.pstr-unlock__row {
	display: flex;
	gap: 8px;
}

.pstr-unlock__row input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	font-size: 15px;
}

.pstr-unlock__row .pstr-btn {
	flex: 0 0 auto;
	padding: 0 16px;
	font-size: 14px;
}

/* The jump to the address clears the sticky header. */
#pstr-direccion {
	scroll-margin-top: 120px;
}

/* products */
.pstr-products {
	display: grid;
	gap: 12px;
	margin-bottom: 28px !important;
	padding: 0;
	list-style: none;
}

.pstr-product {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-surface);
}

.pstr-product__thumb {
	position: relative;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
}

/* The pair count on the photo's top-right corner. A grid cell centred both
   ways, with the line box collapsed to the glyph, so the digit sits in the
   exact middle of the circle whatever the font's own spacing. */
.pstr-qty {
	position: absolute;
	top: -7px;
	right: -7px;
	z-index: 1;
	display: grid;
	box-sizing: border-box;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	place-items: center;
	border: 2px solid var(--pstr-surface);
	border-radius: 999px;
	background: var(--pstr-brand-700);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
}

/* The digit in its own block, trimmed to the glyph itself (cap height to
   baseline): the grid then centres the number, not the room the font keeps
   for descenders. text-box only trims block containers, hence the span. */
.pstr-qty > span {
	display: block;
	text-box: trim-both cap alphabetic;
}

/* Optical correction for «1», measured: Inter's 1 stands a little below cap
   height and its flag pulls the ink right. Other digits need none. */
.pstr-qty--one > span {
	translate: -0.35px -0.4px;
}

/* Browsers without text-box: the same correction by hand, measured on Inter. */
@supports not (text-box: trim-both cap alphabetic) {
	.pstr-qty > span {
		padding-top: 1px;
	}
}

.pstr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pstr-product img {
	display: block;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius);
	background: #fff;
	object-fit: cover;
}

.pstr-product__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.pstr-product__name {
	color: var(--pstr-ink);
	font-size: 15px;
	font-weight: 750;
	line-height: 1.35;
}

.pstr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pstr-chip {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pstr-subtle);
	color: var(--pstr-text);
	font-size: 12px;
}

.pstr-chip b {
	font-weight: 700;
}

.pstr-chip--qty {
	background: var(--pstr-brand-50);
	color: var(--pstr-brand-700);
	font-weight: 700;
}

/* help */
.pstr-help {
	padding: 20px;
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-brand-50);
}

.pstr .pstr-help h3 {
	margin-bottom: 4px;
	color: var(--pstr-ink);
	font-size: 16px;
	font-weight: 800;
}

.pstr-help p {
	margin-bottom: 14px !important;
	color: var(--pstr-muted);
	font-size: 14px;
}

.pstr-help__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

/* ------------------------------------------------------------ buttons -- */

.pstr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--pstr-brand-600);
	border-radius: var(--pstr-radius);
	background: var(--pstr-brand-600);
	color: #fff !important;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .16s, border-color .16s;
}

.pstr-btn:hover {
	border-color: var(--pstr-brand-700);
	background: var(--pstr-brand-700);
}

.pstr-btn svg {
	width: 18px;
	height: 18px;
}

.pstr-btn--ghost {
	border-color: var(--pstr-brand-border);
	background: var(--pstr-surface);
	color: var(--pstr-brand-700) !important;
}

.pstr-btn--ghost:hover {
	border-color: var(--pstr-brand-500);
	background: var(--pstr-surface);
}

.pstr-btn--warning {
	min-height: 40px;
	border-color: var(--pstr-warning);
	background: var(--pstr-warning);
	font-size: 14px;
}

.pstr-btn--warning:hover {
	border-color: #874d00;
	background: #874d00;
}

.pstr-note {
	margin: 14px 4px 0 !important;
	color: var(--pstr-muted);
	font-size: 14px;
}

.pstr-note a {
	color: var(--pstr-brand-600);
	font-weight: 700;
}

/* ------------------------------------------------------------- search -- */

.pstr-search {
	max-width: 760px;
}

.pstr-seg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin: 28px 32px 0;
	padding: 5px;
	border-radius: 10px;
	background: var(--pstr-subtle);
}

.pstr-seg button {
	min-height: 42px;
	margin: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--pstr-muted);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.pstr-seg button[aria-selected="true"] {
	background: var(--pstr-surface);
	color: var(--pstr-ink);
	box-shadow: 0 1px 2px rgb(15 12 13 / 8%);
}

.pstr-alert-line {
	margin: 20px 32px 0 !important;
	padding: 12px 14px;
	border-radius: var(--pstr-radius);
	background: var(--pstr-brand-50);
	color: var(--pstr-brand-700);
	font-size: 15px;
	font-weight: 600;
}

.pstr-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding: 24px 32px 0;
}

.pstr-field {
	display: grid;
	align-content: start;
	gap: 8px;
	min-width: 0;
}

.pstr-field--full {
	grid-column: 1 / -1;
}

.pstr-field label {
	color: var(--pstr-text);
	font-size: 14px;
	font-weight: 750;
}

.pstr-field input {
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius);
	background: var(--pstr-surface);
	box-shadow: none;
	color: var(--pstr-text);
	font: inherit;
	font-size: 16px;
}

.pstr-field input:focus {
	border-color: var(--pstr-brand-600);
}

.pstr-field.is-invalid input {
	border-color: var(--pstr-danger);
	background: #fff5f5;
}

.pstr-field small,
.pstr-hint {
	color: var(--pstr-muted);
	font-size: 13px;
}

.pstr-error {
	color: var(--pstr-danger);
	font-size: 13px;
	font-weight: 700;
}

.pstr-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: 28px;
	padding: 22px 32px 28px;
	border-top: 1px solid var(--pstr-border);
}

.pstr-form-actions p {
	max-width: 42ch;
	color: var(--pstr-muted);
	font-size: 14px;
}

.pstr-form-actions .pstr-btn {
	min-width: 220px;
	min-height: 52px;
}

/* --------------------------------------------------------------- tablets -- */

@media (max-width: 860px) {
	.pstr-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.pstr-detail > .pstr-side {
		border-top: 1px solid var(--pstr-border);
		border-left: 0;
	}

	.pstr-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pstr-fact:nth-child(3) {
		border-left: 0;
	}

	.pstr-fact:nth-child(n+3) {
		border-top: 1px solid var(--pstr-border);
	}
}

/* --------------------------------------------------------------- phones -- */

@media (max-width: 640px) {
	.pstr-found {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-bottom: 14px;
		font-size: 14px;
	}

	.pstr-found__copy {
		flex-direction: column;
		align-items: flex-start;
	}

	.pstr-link-btn {
		justify-content: center;
		min-height: 46px;
		border: 1px solid var(--pstr-border);
		border-radius: var(--pstr-radius);
		background: var(--pstr-surface);
	}

	.pstr-tab {
		gap: 10px;
		padding: 12px 14px;
	}

	.pstr-tab__thumb {
		width: 36px;
		height: 36px;
	}

	.pstr-tab__title {
		font-size: 14px;
	}

	/* Icon beside eyebrow and title; the sentence and the date run full width. */
	.pstr-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 22px 18px 0;
	}

	.pstr-status {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		align-items: center;
		gap: 2px 14px;
	}

	.pstr-status > div:last-child {
		display: contents;
	}

	.pstr-status__icon {
		grid-row: 1 / span 2;
		width: 46px;
		height: 46px;
		border-radius: 13px;
	}

	.pstr-status__icon svg {
		width: 24px;
		height: 24px;
	}

	.pstr-status__eyebrow {
		grid-column: 2;
		align-self: end;
		margin: 0 !important;
		font-size: 11px;
	}

	.pstr .pstr-status__title {
		grid-column: 2;
		align-self: start;
		margin: 0;
		font-size: 25px;
	}

	.pstr-status__text {
		grid-column: 1 / -1;
		margin-top: 12px !important;
		font-size: 15px;
	}

	.pstr-status__when {
		grid-column: 1 / -1;
		flex-direction: column;
		gap: 2px;
		margin-top: 4px !important;
		font-size: 13px;
	}

	.pstr-eta {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 12px;
		min-width: 0;
		padding: 12px 14px;
	}

	.pstr-eta__label {
		grid-column: 1;
		margin: 0 !important;
	}

	.pstr-eta__note {
		grid-column: 1;
		margin: 2px 0 0 !important;
		font-size: 12px;
	}

	.pstr-eta__value {
		grid-column: 2;
		grid-row: 1 / span 2;
		font-size: 16px;
		text-align: right;
	}

	/* Markers only, and one caption: where it is, which step, what next. */
	.pstr-progress {
		padding: 22px 18px;
	}

	.pstr-step__label {
		display: none;
	}

	.pstr-step__mark {
		width: 30px;
		height: 30px;
	}

	.pstr-step__mark svg {
		width: 15px;
		height: 15px;
	}

	.pstr-step::before {
		top: 14px;
	}

	.pstr-progress__caption {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 1px 12px;
		margin-top: 16px !important;
		padding: 10px 14px;
		border-radius: var(--pstr-radius);
		background: var(--pstr-tone-soft);
		font-size: 13px;
		white-space: nowrap;
	}

	.pstr-progress__now {
		grid-column: 1;
		grid-row: 1;
		color: var(--pstr-tone);
		font-size: 15px;
		font-weight: 800;
	}

	.pstr-progress__count {
		grid-column: 1;
		grid-row: 2;
		color: var(--pstr-muted);
		font-weight: 600;
	}

	.pstr-progress__next {
		grid-column: 2;
		grid-row: 1 / span 2;
		color: var(--pstr-muted);
		line-height: 1.35;
		text-align: right;
	}

	.pstr-progress__next b {
		display: block;
		color: var(--pstr-text);
		font-weight: 700;
	}

	.pstr-alert,
	.pstr-cta {
		margin: 0 18px 22px !important;
		font-size: 14px;
	}

	/* Icon beside the text, the button across the whole notice below them. */
	.pstr-alert {
		display: grid;
		grid-template-columns: 20px minmax(0, 1fr);
		gap: 12px;
	}

	.pstr-alert__body {
		display: contents;
	}

	.pstr-alert .pstr-btn {
		grid-column: 1 / -1;
		width: 100%;
		white-space: nowrap;
	}

	.pstr-cta {
		grid-template-columns: 42px minmax(0, 1fr);
		padding: 14px;
	}

	.pstr-cta .pstr-btn,
	.pstr-cta__actions {
		grid-column: 1 / -1;
		width: 100%;
	}

	/* Facts as rows: label left, value right, the rest underneath. */
	.pstr-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.pstr-fact {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2px 12px;
		padding: 14px 18px;
	}

	.pstr-fact + .pstr-fact,
	.pstr-fact:nth-child(n+3) {
		border-top: 1px solid var(--pstr-border);
		border-left: 0;
	}

	.pstr-fact__label {
		grid-column: 1;
		font-size: 11px;
	}

	.pstr-fact__value {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		font-size: 15px;
		text-align: right;
	}

	.pstr-fact__sub {
		grid-column: 1 / -1;
		justify-content: space-between;
	}

	/* A value too long to share the row with its label goes under it. */
	.pstr-fact--stack .pstr-fact__value {
		grid-column: 1 / -1;
		grid-row: auto;
		justify-self: start;
		margin-top: 2px;
		text-align: left;
	}

	.pstr-fact__sub--number {
		flex-wrap: nowrap;
		margin-top: 8px;
		padding: 6px 6px 6px 12px;
		border: 1px solid var(--pstr-border);
		border-radius: var(--pstr-radius);
		background: var(--pstr-surface);
	}



	.pstr-fact__link {
		grid-column: 1 / -1;
		margin-top: 4px;
	}

	.pstr-detail > * {
		padding: 22px 18px 24px;
	}

	.pstr .pstr-section-title {
		margin-bottom: 14px;
		font-size: 17px;
	}

	.pstr-event {
		grid-template-columns: 46px 22px minmax(0, 1fr);
	}

	.pstr-event__time {
		font-size: 13px;
	}

	.pstr-event__text {
		font-size: 14px;
	}

	.pstr-product {
		align-items: flex-start;
	}

	.pstr-product__thumb,
	.pstr-product img {
		width: 60px;
		height: 60px;
	}

	.pstr-product__name {
		font-size: 14px;
	}

	.pstr-help {
		padding: 18px;
	}

	.pstr-seg {
		margin: 18px 18px 0;
	}

	.pstr-seg button {
		font-size: 14px;
	}

	.pstr-alert-line {
		margin: 16px 18px 0 !important;
	}

	.pstr-form {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 18px 0;
	}

	.pstr-form-actions {
		flex-direction: column-reverse;
		align-items: stretch;
		padding: 20px 18px 22px;
		text-align: center;
	}

	.pstr-form-actions .pstr-btn {
		width: 100%;
		min-width: 0;
	}
}

/* ============================================================ blocks ==
   The result as separate blocks on the page's own ground — the status with
   its facts, the history, and beside it products, address and help — instead
   of one tall card. Quieter labels, no box inside a box. Phones further down.
   ======================================================================== */

.pstr-board {
	display: grid;
	gap: 16px;
}

.pstr-panel:not([hidden]) {
	display: grid;
	gap: 16px;
}

.pstr-block {
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--pstr-border);
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-surface);
}

/* Header: the order line, states as words. */
.pstr-found__date--short {
	display: none;
}

/* Parcel tabs: a segmented switch above the blocks. */
.pstr-board > .pstr-tabs {
	gap: 6px;
	padding: 5px;
	border: 0;
	border-radius: var(--pstr-radius-lg);
	background: var(--pstr-line);
}

.pstr-board .pstr-tab {
	padding: 10px 14px;
	border-radius: 10px;
}

.pstr-board .pstr-tab + .pstr-tab {
	border-left: 0;
}

.pstr-board .pstr-tab[aria-selected="true"] {
	box-shadow: 0 1px 3px rgba(15, 12, 13, .08);
}

.pstr-board .pstr-tab[aria-selected="true"]::after {
	display: none;
}

/* Estimate: a soft band in the state's colour. */
.pstr-eta {
	border: 0;
	background: var(--pstr-tone-soft);
}

.pstr-eta__label {
	color: var(--pstr-tone);
	font-size: 13px;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}

.pstr-eta__value {
	color: var(--pstr-tone);
}

/* Facts: plain labels, the numbers as links without a box. */
.pstr-facts {
	border-bottom: 0;
	background: transparent;
}

.pstr-fact + .pstr-fact {
	border-left-color: var(--pstr-line);
}

.pstr-facts {
	border-top-color: var(--pstr-line);
}

.pstr-fact__label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Detail: history beside a column of small blocks. */
.pstr-detail {
	gap: 16px;
	align-items: start;
}

.pstr-detail > * {
	padding: 0;
}

.pstr-detail > .pstr-side {
	border: 0;
}

.pstr-detail > .pstr-history {
	padding: 26px 28px 28px;
}

.pstr-side__inner {
	display: grid;
	gap: 16px;
}

.pstr-side .pstr-block {
	padding: 20px 22px;
}

.pstr-side .pstr-section-title {
	margin-bottom: 14px;
	font-size: 16px;
}

.pstr-products {
	margin-bottom: 0 !important;
}

.pstr-side .pstr-product {
	padding: 0;
	border: 0;
}

/* Size and reference as one quiet line, wrapping like text. */
.pstr-chips {
	display: block;
	line-height: 1.5;
}

.pstr-chip {
	display: inline;
	padding: 0;
	background: none;
	color: var(--pstr-muted);
	font-size: 13px;
}

.pstr-chip b {
	font-weight: 500;
}

.pstr-chip + .pstr-chip::before {
	margin: 0 6px;
	content: '·';
}

.pstr-address-block {
	margin-bottom: 0;
}

.pstr-address {
	padding: 0;
	border: 0;
}

/* Help: one line, one button. */
.pstr-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
}

.pstr .pstr-help h3 {
	margin: 0;
	font-size: 15px;
}

.pstr-help p {
	margin: 2px 0 0 !important;
	font-size: 13px;
}

.pstr-help p a {
	color: var(--pstr-brand-600);
	font-weight: 600;
}

.pstr-help__wa {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	white-space: nowrap;
}

.pstr-event__meta {
	display: none;
}

/* The company an event comes from, before its place. */
.pstr-by {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--pstr-text);
	font-weight: 600;
	vertical-align: -3px;
}

.pstr-by img {
	display: block;
	width: 16px;
	height: 16px;
	padding: 1px;
	border: 1px solid var(--pstr-border);
	border-radius: 4px;
	background: #fff;
	object-fit: contain;
}

.pstr-sep {
	margin: 0 6px;
}

/* A sub-line of words runs as text; only the number line is a row. */
.pstr-fact__sub:not(.pstr-fact__sub--number) {
	display: block;
}

.pstr-unlock__short,
.pstr-short {
	display: none;
}

.pstr-chip {
	white-space: nowrap;
}

.pstr-note {
	margin-top: 0 !important;
}

/* «Mi cuenta» → the order: below the order details, the status block only. */
.pstr-account {
	max-width: none;
	margin-top: 40px;
}

.pstr .pstr-account__title {
	margin: 0 0 16px;
	color: var(--pstr-ink);
	font-size: 22px;
	font-weight: 800;
}

.pstr-account__more {
	justify-self: start;
	width: auto;
	margin-top: 16px;
}

.pstr-account__more svg {
	rotate: -90deg;
}

/* ------------------------------------------------------- blocks, phones -- */

@media (max-width: 640px) {
	.pstr-board,
	.pstr-panel:not([hidden]) {
		gap: 12px;
	}

	/* Order line left, a round search button right. */
	.pstr-found {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	.pstr-found__copy {
		gap: 2px;
	}

	.pstr-found__date {
		display: none;
	}

	.pstr-found__date--short {
		display: inline;
	}

	.pstr-overview {
		gap: 0;
	}

	.pstr .pstr-mini {
		gap: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--pstr-muted);
		font-size: 14px;
		font-weight: 500;
	}

	.pstr-mini .pstr-dot {
		display: none;
	}

	.pstr-mini + .pstr-mini::before {
		margin: 0 6px;
		content: '·';
	}

	.pstr-link-btn {
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		min-height: 0;
		padding: 0;
		border-radius: 999px;
	}

	.pstr-link-btn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pstr-board > .pstr-tabs {
		padding: 4px;
		border-radius: 12px;
	}

	.pstr-board .pstr-tab {
		gap: 8px;
		padding: 6px 8px;
		border-radius: 9px;
	}

	.pstr-tab__thumb {
		width: 32px;
		height: 32px;
	}

	.pstr-tab__title {
		font-size: 13px;
	}

	.pstr-tab__state {
		font-size: 12px;
	}

	/* Status: title with «Actualizado…» under it, then the sentence. */
	.pstr-summary {
		gap: 14px;
		padding: 20px 18px 0;
	}

	.pstr-status {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 0 12px;
	}

	.pstr-status__icon {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}

	.pstr-status__icon svg {
		width: 22px;
		height: 22px;
	}

	.pstr-status__eyebrow {
		display: none;
	}

	.pstr .pstr-status__title {
		grid-row: 1;
		align-self: end;
		font-size: 24px;
	}

	.pstr-status__when {
		grid-row: 2;
		grid-column: 2;
		align-self: start;
		margin-top: 2px !important;
		font-size: 12.5px;
	}

	.pstr-status__when > span:not(.pstr-fresh) {
		display: none;
	}

	.pstr-status__text {
		grid-row: 3;
		margin-top: 12px !important;
		font-size: 14.5px;
	}

	.pstr-eta {
		border-radius: var(--pstr-radius);
	}

	.pstr-eta__label {
		font-size: 13px;
	}

	.pstr-eta__note {
		color: var(--pstr-tone);
		opacity: .8;
	}

	.pstr-eta__value {
		font-size: 18px;
	}

	/* Progress: five thin bars and one line under them. */
	.pstr-progress {
		padding: 18px 18px 20px;
	}

	.pstr-steps {
		gap: 4px;
	}

	.pstr-step::before {
		display: none;
	}

	.pstr-step__mark {
		width: 100%;
		height: 5px;
		border: 0;
		border-radius: 3px;
		background: var(--pstr-line);
	}

	.pstr-step__mark svg {
		display: none;
	}

	.pstr-step.is-done .pstr-step__mark {
		background: var(--pstr-tone);
	}

	.pstr-step.is-now .pstr-step__mark {
		box-shadow: none;
		background: linear-gradient(90deg, var(--pstr-tone) 50%, var(--pstr-line) 50%);
	}

	.pstr-progress__caption {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 2px 10px;
		margin-top: 10px !important;
		padding: 0;
		background: none;
		font-size: 12.5px;
		white-space: normal;
	}

	.pstr-progress__caption > span {
		white-space: nowrap;
	}

	.pstr-progress__now {
		color: var(--pstr-ink);
		font-size: 12.5px;
		font-weight: 700;
	}

	.pstr-progress__count {
		margin-right: auto;
		font-weight: 500;
	}

	.pstr-progress__count::before {
		margin-right: 4px;
		content: '·';
	}

	.pstr-progress__next {
		text-align: right;
	}

	.pstr-progress__next b::before {
		content: ': ';
	}

	.pstr-progress__next b {
		display: inline;
		color: var(--pstr-muted);
		font-weight: 500;
	}

	/* Facts: carriers as rows, route and days side by side. */
	.pstr-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: 1px solid var(--pstr-line);
	}

	.pstr-fact {
		padding: 13px 18px;
	}

	.pstr-fact:nth-child(-n+2) {
		grid-column: 1 / -1;
	}

	.pstr-fact + .pstr-fact,
	.pstr-fact:nth-child(n+3) {
		border-top-color: var(--pstr-line);
	}

	.pstr-fact:nth-child(4) {
		border-left: 1px solid var(--pstr-line);
	}

	.pstr-fact__label {
		font-size: 12.5px;
	}

	.pstr-fact:nth-child(n+3) {
		grid-template-columns: minmax(0, 1fr);
		padding: 13px 16px;
	}

	.pstr-fact:nth-child(n+3) .pstr-fact__value {
		font-size: 14.5px;
	}

	.pstr-fact:nth-child(n+3) .pstr-fact__value {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		text-align: left;
	}

	.pstr-fact__sub--number {
		margin-top: 4px;
		padding: 0;
		border: 0;
		background: none;
	}

	.pstr-fact__sub--number .pstr-num {
		font-size: 12.5px;
	}

	/* History: the day in each event, no day headings. */
	.pstr-detail > .pstr-history {
		padding: 18px 18px 20px;
	}

	.pstr .pstr-section-title {
		font-size: 16px;
	}

	.pstr-day__label {
		display: none;
	}

	.pstr-day + .pstr-day {
		margin-top: 0;
	}

	.pstr-event {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.pstr-event__time,
	.pstr-event__place {
		display: none;
	}

	.pstr-event__meta {
		display: block;
		margin-top: 2px !important;
		color: var(--pstr-muted);
		font-size: 12px;
	}

	.pstr-side .pstr-block {
		padding: 18px;
	}

	.pstr-side .pstr-product__thumb,
	.pstr-side .pstr-product img {
		width: 56px;
		height: 56px;
	}

	.pstr-help {
		padding: 14px 16px;
	}

	/* Size and reference each on its own line: a reference never breaks. */
	.pstr-chip {
		display: block;
	}

	.pstr-chip + .pstr-chip::before {
		display: none;
	}

	/* The return notice: words and the button, no icon. */
	.pstr-cta {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin: 0 18px 20px !important;
		padding: 14px 16px;
	}

	.pstr-cta__icon {
		display: none;
	}

	.pstr-cta__title {
		font-size: 15px;
	}

	.pstr-cta__text {
		font-size: 13.5px;
	}

	.pstr-unlock__long,
	.pstr-long {
		display: none;
	}

	.pstr-unlock__short,
	.pstr-short {
		display: inline;
	}

	.pstr .pstr-help h3 {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pstr * {
		transition: none !important;
	}
}