/* ==========================================================================
   Platty Checkout Steps
   Scope: the checkout steps block only. Header, footer and page title are
   owned by the theme and are not touched here.
   ========================================================================== */

.pcs {
	/* Layout tokens. Container and padding are the site standard. */
	--pcs-container: 1200px;
	--pcs-pad: 30px;
	--pcs-gap: 16px;
	--pcs-radius: 16px;
	--pcs-radius-sm: 10px;

	/* Palette. Override these to bind to the theme's own tokens. */
	--pcs-teal: #00abb3;
	--pcs-teal-dark: #009199;
	--pcs-teal-soft: #e5f7f8;
	--pcs-ink: #10333f;
	--pcs-body: #5a7079;
	--pcs-muted: #90a4ab;
	--pcs-line: #e3ebee;
	--pcs-surface: #ffffff;
	--pcs-danger: #e5484d;

	--pcs-shadow: 0 2px 14px rgba(16, 51, 63, .06);
	--pcs-ease: cubic-bezier(.4, 0, .2, 1);

	box-sizing: border-box;
	width: 100%;
	max-width: var(--pcs-container);
	margin-inline: auto;
	padding-inline: var(--pcs-pad);
	color: var(--pcs-body);
	font-family: inherit;
}

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

/* Tablet keeps 30px. Mobile drops to 20px. */
@media (max-width: 767px) {
	.pcs { --pcs-pad: 20px; --pcs-gap: 12px; }
}

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

.pcs__tabs {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--pcs-surface);
	border-radius: var(--pcs-radius);
	box-shadow: var(--pcs-shadow);
	overflow: hidden;
}

.pcs__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 66px;
	padding: 12px 16px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--pcs-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s var(--pcs-ease);
}

.pcs__tab:disabled { cursor: not-allowed; }

.pcs__tab[aria-selected="true"] {
	color: var(--pcs-teal);
	font-weight: 600;
}

/* Completed steps stay clickable so the user can jump back. */
.pcs__tab.is-done { color: var(--pcs-ink); cursor: pointer; }

.pcs__tab:focus-visible {
	outline: 2px solid var(--pcs-teal);
	outline-offset: -2px;
}

.pcs__tab-rail {
	position: absolute;
	bottom: 0;
	height: 2px;
	background: var(--pcs-teal);
	transition: transform .28s var(--pcs-ease), width .28s var(--pcs-ease);
	will-change: transform, width;
}

@media (max-width: 767px) {
	.pcs__tabs {
		grid-auto-flow: unset;
		grid-auto-columns: unset;
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pcs__tabs::-webkit-scrollbar { display: none; }

	.pcs__tab {
		flex: 0 0 auto;
		min-height: 56px;
		font-size: 14px;
		scroll-snap-align: center;
	}
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.pcs__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--pcs-gap);
	margin-top: var(--pcs-gap);
	align-items: start;
}

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

/* The panel stack is the positioning context for inactive panels. */
.pcs__panels {
	position: relative;
	display: grid;
	min-width: 0;
}

.pcs__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--pcs-gap);
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Inactive panels
   --------------------------------------------------------------------------
   Never use display:none, visibility:hidden or height:0 here.

   Stripe Elements render inside cross origin iframes that measure their own
   height from the parent box. Collapsing that box gives the iframe a height
   of zero, which silently breaks field validation and blocks submission.

   Moving the panel off canvas keeps a real, measurable box at all times.

   E nunca use opacity:0 aqui, pelo motivo vizinho mas diferente.

   Campo de cartão e botão de carteira não seguem a mesma regra. O Payment
   Element monta e funciona em caixa transparente. Apple Pay e Google Pay
   não: a exigência de visibilidade é da Apple e do Google, contra
   clickjacking, e o Stripe confere a opacidade computada antes de desenhar.
   Com opacidade zero no ancestral ele monta e desiste de desenhar, sem erro
   no console.

   O sintoma era carteira só aparecer quando a pessoa recarregava a página já
   em ?step=payment, porque aí o painel nasce ativo. Chegando pela etapa 1, o
   Stripe montava com o painel estacionado e transparente.

   Fora da tela a -200vw o painel já está invisível. A opacidade não escondia
   nada que a posição não escondesse, só custava as carteiras.
   -------------------------------------------------------------------------- */

.pcs__panel[data-pcs-inactive] {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -200vw;
	width: 100%;
	pointer-events: none;
}

/* Keep it out of the tab order while off canvas. */
.pcs__panel[data-pcs-inactive] :is(a, button, input, select, textarea) {
	visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.pcs__panel:not([data-pcs-inactive]) {
		animation: pcs-in .24s var(--pcs-ease) both;
	}
}

@keyframes pcs-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

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

.pcs-card {
	background: var(--pcs-surface);
	border-radius: var(--pcs-radius);
	box-shadow: var(--pcs-shadow);
	padding: 24px;
}

@media (max-width: 767px) { .pcs-card { padding: 18px; } }

.pcs-card__head { margin-bottom: 18px; }

.pcs-card__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--pcs-ink);
}

.pcs-card__sub {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--pcs-body);
}

/* --------------------------------------------------------------------------
   Step 1, cart items
   -------------------------------------------------------------------------- */

.pcs-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.pcs-item {
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
}

.pcs-item + .pcs-item {
	border-top: 1px solid var(--pcs-line);
	padding-top: 14px;

	/**
	 * O botão de remover é absoluto e se mede pela caixa de padding, que
	 * começa na borda, acima deste respiro. Sem publicar a medida aqui, o
	 * top: 0 dele encostaria na linha e ficaria 14px acima do conteúdo, que
	 * é o desalinhamento visível do segundo item em diante.
	 */
	--pcs-item-pad: 14px;
}

.pcs-item__media img {
	display: block;
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: var(--pcs-radius-sm);
}

.pcs-item__eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pcs-teal);
}

.pcs-item__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--pcs-ink);
}

.pcs-item__duration { margin: 8px 0 0; font-size: 14px; color: var(--pcs-teal); }

.pcs-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--pcs-body);
}

.pcs-item__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--pcs-ink);
	align-self: end;
	white-space: nowrap;
}

.pcs-item__remove {
	position: absolute;
	top: var(--pcs-item-pad, 0px);
	right: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--pcs-danger);
	cursor: pointer;
	transition: background .15s var(--pcs-ease);
}

.pcs-item__remove:hover { background: #fdecec; }

@media (max-width: 600px) {
	.pcs-item { grid-template-columns: 76px minmax(0, 1fr); }
	.pcs-item__media img { width: 76px; height: 76px; }
	.pcs-item__price { grid-column: 2; align-self: start; }
	.pcs-item__remove { position: static; justify-self: start; }
}

.pcs-empty { text-align: center; padding: 32px 0; display: grid; gap: 16px; justify-items: center; }
.pcs-empty__text { margin: 0; }

/* --------------------------------------------------------------------------
   Step 2, form grid
   -------------------------------------------------------------------------- */

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

.pcs-grid > p,
.pcs-grid > .form-row { grid-column: span 12; margin: 0; }

.pcs-col-3  { grid-column: span 3 !important; }
.pcs-col-4  { grid-column: span 4 !important; }
.pcs-col-9  { grid-column: span 9 !important; }
.pcs-col-12 { grid-column: span 12 !important; }

@media (max-width: 767px) {
	.pcs-col-3, .pcs-col-4, .pcs-col-9 { grid-column: span 12 !important; }
}

/* first and last name stay in the DOM, fed by the combined field */
.pcs-hidden-field {
	position: absolute !important;
	left: -200vw !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pcs .form-row label:not(.checkbox) {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--pcs-body);
}

.pcs .form-row :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, .select2-selection) {
	width: 100%;
	min-height: 51px;
	padding: 0 16px;
	border: 1px solid var(--pcs-line);
	border-radius: var(--pcs-radius-sm);
	background: var(--pcs-surface);
	font: inherit;
	font-size: 15px;
	color: var(--pcs-ink);
	transition: border-color .15s var(--pcs-ease), box-shadow .15s var(--pcs-ease);
}

.pcs .form-row :is(input, select):focus {
	outline: none;
	border-color: var(--pcs-teal);
	box-shadow: 0 0 0 3px var(--pcs-teal-soft);
}

/* Icon slot on the left of a field. */
.pcs-field--icon :is(input, select) { padding-left: 46px; }

.pcs-field--icon { position: relative; }

.pcs-field--icon::before {
	content: "";
	position: absolute;
	left: 16px;
	bottom: 14px;
	width: 24px;
	height: 24px;
	background: currentColor;
	color: var(--pcs-teal);
	pointer-events: none;
	-webkit-mask: var(--pcs-icon) center / contain no-repeat;
	mask: var(--pcs-icon) center / contain no-repeat;
}


/* Field level errors */
.pcs .form-row.pcs-invalid :is(input, select) {
	border-color: var(--pcs-danger);
	box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}

.pcs-error {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: var(--pcs-danger);
}

/* --------------------------------------------------------------------------
   Step 3, payment
   -------------------------------------------------------------------------- */

.pcs-methods { display: flex; flex-wrap: wrap; gap: 10px; }

.pcs-method {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--pcs-line);
	border-radius: 999px;
	background: var(--pcs-surface);
	font: inherit;
	font-size: 14px;
	color: var(--pcs-ink);
	cursor: pointer;
	transition: border-color .15s var(--pcs-ease), background .15s var(--pcs-ease);
}

.pcs-method[aria-checked="true"] {
	background: var(--pcs-teal);
	border-color: var(--pcs-teal);
	color: #fff;
}

.pcs-method:focus-visible { outline: 2px solid var(--pcs-teal); outline-offset: 2px; }

/* The wallet the browser reports as available leads the row. */
.pcs-method.is-primary { order: -1; }

.pcs-confirmed {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--pcs-teal);
}

/*
 * Woo prints .place-order inside the payment box. JS relocates it into
 * step 4. Until that runs, park it off canvas rather than collapsing it,
 * for the same iframe height reason as the panels.
 */
.pcs-card--payment .place-order {
	position: absolute;
	left: -200vw;
	width: 100%;
}

.pcs .woocommerce-checkout-payment ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Step 4, review
   -------------------------------------------------------------------------- */

.pcs-review__heading {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 600;
	color: var(--pcs-ink);
}

.pcs-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.pcs-review__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--pcs-ink); }

.pcs-edit {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: var(--pcs-ink);
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
}

.pcs-edit:focus-visible { outline: 2px solid var(--pcs-teal); outline-offset: 2px; }

.pcs-review__list { margin: 0; display: grid; gap: 8px; }

.pcs-review__list div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}

.pcs-review__list dt { color: var(--pcs-body); }
.pcs-review__list dd { margin: 0; color: var(--pcs-ink); text-align: right; }

.pcs-review__payment { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pcs-card--note { background: var(--pcs-teal-soft); box-shadow: none; }
.pcs-note__title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--pcs-ink); }
.pcs-note__text { margin: 0; font-size: 14px; }

.pcs-place-order .place-order { position: static; }

.pcs-place-order button#place_order {
	position: absolute;
	left: -200vw;
	width: 1px;
	height: 1px;
}

.pcs-place-order .woocommerce-terms-and-conditions-wrapper { margin: 0 0 4px; }

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

.pcs-summary { position: sticky; top: 20px; }

@media (max-width: 1023px) { .pcs-summary { position: static; } }

.pcs-summary__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 600;
	color: var(--pcs-ink);
}

.pcs-promo {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 8px 0 14px;
	border: 1px solid var(--pcs-line);
	border-radius: var(--pcs-radius-sm);
	min-height: 43px;
}

.pcs-promo__icon { display: grid; place-items: center; color: var(--pcs-teal); flex: 0 0 auto; }

.pcs-promo__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--pcs-ink);
}

.pcs-promo__input:focus { outline: none; }

.pcs-promo__apply {
	flex: 0 0 auto;
	border: 0;
	border-radius: 7px;
	background: var(--pcs-teal);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	cursor: pointer;
}

.pcs-promo__msg { margin: 8px 0 0; font-size: 13px; }
.pcs-promo__msg.is-error { color: var(--pcs-danger); }
.pcs-promo__msg.is-ok { color: var(--pcs-teal); }

.pcs-summary__lines { margin: 20px 0 0; display: grid; gap: 12px; }

.pcs-summary__row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.pcs-summary__row dt { color: var(--pcs-body); margin: 0; }
.pcs-summary__row dd { margin: 0; color: var(--pcs-ink); }
.pcs-summary__row--discount dd { color: var(--pcs-danger); }

.pcs-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--pcs-line);
	font-size: 18px;
	color: var(--pcs-ink);
}

.pcs-summary__total strong { font-size: 22px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pcs-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pcs-gap);
}

@media (max-width: 600px) {
	.pcs-actions { grid-template-columns: minmax(0, 1fr); }
	.pcs-actions > :first-child { order: 2; }
}

.pcs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s var(--pcs-ease), border-color .18s var(--pcs-ease), transform .1s var(--pcs-ease);
}

.pcs-btn:active { transform: translateY(1px); }
.pcs-btn:focus-visible { outline: 2px solid var(--pcs-teal); outline-offset: 3px; }

.pcs-btn--primary { background: var(--pcs-teal); color: #fff; }
.pcs-btn--primary:hover { background: var(--pcs-teal-dark); }

.pcs-btn--ghost {
	background: var(--pcs-surface);
	border-color: var(--pcs-line);
	color: var(--pcs-ink);
}

.pcs-btn--ghost:hover { border-color: var(--pcs-teal); color: var(--pcs-teal); }

.pcs-btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

.pcs-btn__icon { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.pcs-notice {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--pcs-radius-sm);
	font-size: 14px;
}

.pcs-notice--warn { background: #fff6e6; color: #7a5200; }
.pcs-notice--error { background: #fdecec; color: #a3282c; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   v0.2.0 overrides
   --------------------------------------------------------------------------
   These sit last on purpose. CartFlows Modern Checkout ships its own field
   styles at a higher specificity than ours, which was overriding the icon
   padding and leaving the glyph sitting on top of the placeholder text.
   ========================================================================== */

/* The design uses placeholders, not labels. Keep labels for screen readers. */
.pcs .pcs-grid .form-row > label,
.pcs .pcs-grid .form-row > label.required_field {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Beat CartFlows on padding so the icon never overlaps the text. */
.pcs .pcs-grid .form-row.pcs-field--icon input.input-text,
.pcs .pcs-grid .form-row.pcs-field--icon input[type="text"],
.pcs .pcs-grid .form-row.pcs-field--icon input[type="tel"],
.pcs .pcs-grid .form-row.pcs-field--icon input[type="email"],
.pcs .pcs-grid .form-row.pcs-field--icon select,
.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection__rendered {
	padding-left: 46px !important;
	padding-right: 14px !important;
}

/* Labels are gone, so the icon centres on the field itself. */
.pcs .pcs-grid .form-row.pcs-field--icon::before {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.pcs .pcs-grid .form-row {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* select2 has to match the native control height. */
.pcs .pcs-grid .select2-container .select2-selection--single {
	height: 51px !important;
	border: 1px solid var(--pcs-line) !important;
	border-radius: var(--pcs-radius-sm) !important;
	display: flex;
	align-items: center;
}

.pcs .pcs-grid .select2-container .select2-selection__rendered {
	line-height: 1.2 !important;
	color: var(--pcs-ink);
}

.pcs .pcs-grid .select2-container .select2-selection__arrow { height: 49px !important; }

/* Three across needs more room than a twelfth each once icons are in. */
@media (max-width: 1200px) and (min-width: 768px) {
	.pcs-col-4 { grid-column: span 6 !important; }
	.pcs-col-3 { grid-column: span 4 !important; }
	.pcs-col-9 { grid-column: span 8 !important; }
}

/* --------------------------------------------------------------------------
   Suppress CartFlows chrome that duplicates our own blocks
   -------------------------------------------------------------------------- */

.wcf-collapsed-order-review-section,
.wcf-custom-coupon-field,
.wcf-payment-option-heading,
.wcf-order-review-toggle {
	display: none !important;
}

/* Woo's own validation colours fight the design. Normalise them. */
.pcs .form-row.woocommerce-validated :is(input, select, .select2-selection) {
	border-color: var(--pcs-line) !important;
}

.pcs .form-row.woocommerce-invalid :is(input, select, .select2-selection) {
	border-color: var(--pcs-danger) !important;
}

/* --------------------------------------------------------------------------
   Relocated Stripe express checkout wallets
   -------------------------------------------------------------------------- */

.pcs-methods__wallets:empty { display: none; }

.pcs-methods__wallets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	width: 100%;
	margin-bottom: 12px;
}

.pcs-methods__wallets .StripeElement { min-width: 0; }

/* The separator belongs to the old single page layout. */
#wc-stripe-express-checkout-button-separator { display: none !important; }

/* Item data printed by Woo inside the cart card. */
.pcs-item__meta dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	font-size: 13px;
}

.pcs-item__meta dl.variation dt { font-weight: 600; color: var(--pcs-ink); margin: 0; }
.pcs-item__meta dl.variation dd { margin: 0; color: var(--pcs-body); }
.pcs-item__meta dl.variation dd p { margin: 0; }

/* --------------------------------------------------------------------------
   Icons (v0.2.1)
   Sizes come from CSS so the SVG files stay free of hardcoded dimensions.
   -------------------------------------------------------------------------- */

.pcs-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	display: block;
}

.pcs-icon--promo { width: 20px; height: 20px; }

.pcs-promo__icon { display: grid; place-items: center; color: var(--pcs-teal); flex: 0 0 auto; }

/* Session date and time inside the cart card get their own glyphs. */
.pcs-item__meta dl.variation dt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcs-item__meta dl.variation dt::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--pcs-teal);
	-webkit-mask: var(--pcs-meta-icon) center / contain no-repeat;
	mask: var(--pcs-meta-icon) center / contain no-repeat;
	--pcs-meta-icon: var(--pcs-icon-calendar);
}

.pcs-item__meta dl.variation dt.variation-Sessiontime::before { --pcs-meta-icon: var(--pcs-icon-clock); }

/* ==========================================================================
   v0.2.2 — ajustes da etapa 1
   ========================================================================== */

/* 1. Alinhamento com o título.
   O container do Elementor / CartFlows já aplica o recuo lateral da página.
   O nosso padding somava em cima dele e empurrava o bloco pra dentro. Zerado
   por padrão. Se algum dia o wrapper pai perder o padding, é só redefinir
   --pcs-pad no tema. */
.pcs {
	--pcs-pad: 0px;
	padding-inline: var(--pcs-pad);
}

@media (max-width: 767px) {
	.pcs { --pcs-pad: 0px; }
}

/* 2. Título do produto não corre até a borda do card. */
.pcs .pcs-item__title {
	max-width: 80%;
	text-wrap: balance;
}

@media (max-width: 767px) {
	.pcs .pcs-item__title { max-width: 100%; }
}

/* 3. Cada par vira uma linha: data em cima, horário embaixo. */
.pcs .pcs-item__meta dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 6px 8px;
	margin: 0;
}

.pcs .pcs-item__meta dl.variation dt {
	grid-column: 1;
	white-space: nowrap;
}

.pcs .pcs-item__meta dl.variation dd {
	grid-column: 2;
	margin: 0;
}

@media (max-width: 600px) {
	.pcs .pcs-item__meta dl.variation { grid-template-columns: minmax(0, 1fr); }
	.pcs .pcs-item__meta dl.variation dt,
	.pcs .pcs-item__meta dl.variation dd { grid-column: 1; }
	.pcs .pcs-item__meta dl.variation dd { margin-bottom: 4px; }
}

/* 4. Continue shopping é um <a>, então o tema pintava o fundo dele.
   Forçado branco, inclusive nos estados. */
.pcs a.pcs-btn--ghost,
.pcs button.pcs-btn--ghost,
.pcs a.pcs-btn--ghost:hover,
.pcs a.pcs-btn--ghost:focus,
.pcs a.pcs-btn--ghost:visited {
	background: #fff !important;
	background-color: #fff !important;
}

/* 5. O input do cupom herdava a borda de campo do CartFlows e desenhava
   uma segunda caixa dentro da nossa. */
.pcs .pcs-promo__input,
.pcs .pcs-promo input.pcs-promo__input,
.pcs .pcs-promo input[type="text"] {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* 6. Arredondamento só em cima e nas laterais, mais a linha base apagada
   atrás das tabs inativas. */
.pcs__tabs {
	border-radius: var(--pcs-radius) var(--pcs-radius) 0 0;
	box-shadow: var(--pcs-shadow), inset 0 -2px 0 var(--pcs-line);
}

.pcs__tab-rail {
	z-index: 1;
	height: 2px;
}

/* ==========================================================================
   v0.2.2 — ajustes de revisão da etapa 1
   ========================================================================== */

/* 1. Alinhar o bloco com o título acima.
   O container do tema já entrega os 1200px, então o padding lateral próprio
   estava empurrando o conteúdo para dentro. Agora ele só existe quando a
   viewport é menor que o container e faz falta como respiro de tela. */
.pcs {
	max-width: var(--pcs-container);
	padding-inline: 0;
}

/**
 * Sem respiro lateral próprio.
 *
 * O CartFlows já dá padding lateral no .woocommerce, e a seção do Elementor
 * dá o dela por fora. O que existia aqui, 30px no tablet e 20px no celular,
 * somava em cima disso e virava padding duplo: num aparelho de 390px o .pcs
 * chegava com 310px e entregava 270px ao card.
 *
 * Zero aqui não quer dizer conteúdo colado na borda. Quer dizer que quem
 * manda no respiro é a página, num lugar só, onde dá para ajustar sem tocar
 * no plugin.
 */
@media (max-width: 1259px) { .pcs { padding-inline: 0; } }

/* 6. Tabs: arredondamento só nos lados e no topo, mais a linha de base. */
.pcs__tabs {
	border-radius: var(--pcs-radius) var(--pcs-radius) 0 0;
	border-bottom: 1px solid var(--pcs-line);
}

/* A trilha teal se sobrepõe à linha apagada, então some 1px para cobri-la. */
.pcs__tab-rail { bottom: -1px; height: 2px; }

/* 7. Foto ocupando toda a altura do card. */
.pcs-item { align-items: stretch; }

.pcs-item__media {
	height: 100%;
	min-height: 104px;
	border-radius: var(--pcs-radius-sm);
	overflow: hidden;
}

.pcs-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* 2. Título do produto limitado a 70% da coluna. */
.pcs-item__title { max-width: 80%; }

@media (max-width: 900px) { .pcs-item__title { max-width: 100%; } }

/* 3 e 8. Session date numa linha, Session time na seguinte, fonte 16px. */
.pcs-item__meta dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 8px;
	align-items: center;
	margin: 0;
}

.pcs-item__meta dl.variation dt,
.pcs-item__meta dl.variation dd {
	font-size: 16px;
	line-height: 1.4;
}

.pcs-item__meta dl.variation dd { justify-self: start; }

/* 4. Continue shopping com fundo branco sólido. */
.pcs .pcs-actions .pcs-btn--ghost,
.pcs .pcs-actions a.pcs-btn--ghost:link,
.pcs .pcs-actions a.pcs-btn--ghost:visited {
	background-color: #fff !important;
	color: var(--pcs-ink);
}

.pcs .pcs-actions .pcs-btn--ghost:hover {
	background-color: #fff !important;
	border-color: var(--pcs-teal);
	color: var(--pcs-teal);
}

/* 5. Tirar a borda interna do campo de cupom.
   O input herdava a borda de campo do tema dentro da pílula do promo. */
.pcs .pcs-promo__input,
.pcs .pcs-promo input[type="text"] {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	min-height: 0 !important;
	padding: 0 !important;
	height: auto !important;
}

.pcs .pcs-promo__input:focus { outline: none !important; box-shadow: none !important; }

/* v0.2.3 — eyebrow de categoria e linha de formato do curso */

.pcs-item__eyebrow {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pcs-teal);
}

.pcs-item__duration {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--pcs-teal);
}

.pcs-item__meta { margin-top: 10px; }

/* ==========================================================================
   v0.2.4 — tipografia e trilha das tabs
   ========================================================================== */

/* Cor de tinta real do design. Substitui o valor que eu tinha estimado. */
.pcs {
	--pcs-ink: #233454;
	--pcs-ink-75: rgba(35, 52, 84, .75);
	--pcs-line-soft: rgba(35, 52, 84, .2);
	--pcs-rail: 2px;
}

/* --------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------
   A trilha teal estava sendo cortada pelo overflow do container, então
   aparecia com metade da espessura. Agora as duas linhas são pseudo
   elementos dentro da caixa, na mesma altura, e a teal cobre a apagada.
   -------------------------------------------------------------------------- */

.pcs__tabs { border-bottom: 0; }

.pcs__tabs::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--pcs-rail);
	background: var(--pcs-line-soft);
	pointer-events: none;
}

.pcs__tab-rail {
	bottom: 0;
	height: var(--pcs-rail);
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Card do produto
   -------------------------------------------------------------------------- */

/* Foto em 180px. */
.pcs-item { grid-template-columns: 180px minmax(0, 1fr) auto; }
.pcs-item__media { min-height: 180px; }

@media (max-width: 900px) {
	.pcs-item { grid-template-columns: 130px minmax(0, 1fr) auto; }
	.pcs-item__media { min-height: 130px; }
}

@media (max-width: 600px) {
	.pcs-item { grid-template-columns: 110px minmax(0, 1fr); }
	.pcs-item__media { min-height: 110px; }
}

/* Categoria. */
.pcs-item__eyebrow {
	font-size: 14px;
	font-weight: 500;
}

/* Título. */
.pcs-item__title {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--pcs-ink);
}

/* Formato do curso. */
.pcs-item__duration {
	font-size: 18px;
	font-weight: 400;
	color: var(--pcs-ink-75);
}

/* --------------------------------------------------------------------------
   Session date e Session time
   --------------------------------------------------------------------------
   Estavam desalinhados porque o <p> que o Woo coloca dentro do <dd> trazia
   a própria altura de linha. Alinhando pela linha de base e forçando o
   parágrafo a herdar, rótulo e valor assentam no mesmo eixo.
   -------------------------------------------------------------------------- */

.pcs-item__meta dl.variation { align-items: baseline; }

.pcs-item__meta dl.variation dt,
.pcs-item__meta dl.variation dd,
.pcs-item__meta dl.variation dd p {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.pcs-item__meta dl.variation dt { font-weight: 600; color: var(--pcs-ink); }
.pcs-item__meta dl.variation dd { color: var(--pcs-ink-75); }

/* O ícone acompanha a linha de base do rótulo em vez do centro da célula. */
.pcs-item__meta dl.variation dt::before {
	align-self: center;
	position: relative;
	top: 2px;
}

/* ==========================================================================
   v0.2.5 — campo de cupom e lixeira
   ========================================================================== */

.pcs { --pcs-danger: #ff4540; }

/* Pílula do promo code totalmente arredondada. */
.pcs .pcs-promo {
	border-radius: 999px;
	padding: 13px 16px;
	border: 1px solid rgba(35, 52, 84, .08);
	min-height: 0;
	gap: 10px;
}

.pcs .pcs-promo__apply {
	border-radius: 999px;
	padding: 8px 18px;
}

/* Lixeira: 30px de viewBox, então o botão acompanha. */
.pcs-icon--trash { width: 26px; height: 26px; }

.pcs .pcs-item__remove {
	width: 38px;
	height: 38px;
	color: var(--pcs-danger);
}

.pcs .pcs-item__remove:hover { background: rgba(255, 69, 64, .08); }

/* ==========================================================================
   v0.2.6
   ========================================================================== */

.pcs { --pcs-line-soft: rgba(35, 52, 84, .4); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.pcs .pcs__tab {
	font-size: 16px;
	font-weight: 700;
	color: rgba(35, 52, 84, .4);
}

.pcs .pcs__tab.is-done { color: var(--pcs-ink); }
.pcs .pcs__tab[aria-selected="true"] { color: var(--pcs-teal); font-weight: 700; }

/* --------------------------------------------------------------------------
   Card do produto
   --------------------------------------------------------------------------
   O CartFlows aplica font-size 18px e weight 600 em qualquer h3 dentro do
   formulário, com uma cadeia de seletores bem longa. Estes precisam de
   especificidade alta para ganhar dela.
   -------------------------------------------------------------------------- */

.pcs .pcs-items .pcs-item .pcs-item__body h3.pcs-item__title {
	font-size: 22px !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--pcs-ink) !important;
	max-width: 80%;
}

@media (max-width: 900px) {
	.pcs .pcs-items .pcs-item .pcs-item__body h3.pcs-item__title { max-width: 100%; }
}

.pcs .pcs-item__duration {
	font-size: 17px;
	font-weight: 600;
	color: var(--pcs-ink-75);
}

/* --------------------------------------------------------------------------
   Session date e Session time
   --------------------------------------------------------------------------
   Causa real do desalinhamento: o <dt> era um inline-flex e o primeiro item
   dele era o ícone, um bloco sem texto. Numa grid alinhada por linha de base,
   o navegador tirava a base do <dt> da borda do ícone e não do texto, então o
   valor ficava sempre alguns pixels abaixo.

   Agora o ícone é posicionado por cima do <dt>, que volta a ser um bloco de
   texto puro. Rótulo e valor têm exatamente a mesma métrica e o alinhamento
   passa a ser por topo, que é determinístico.
   -------------------------------------------------------------------------- */

.pcs .pcs-item__meta dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 10px;
	align-items: start;
	margin: 0;
}

.pcs .pcs-item__meta dl.variation dt,
.pcs .pcs-item__meta dl.variation dd,
.pcs .pcs-item__meta dl.variation dd p {
	display: block;
	font-size: 16px;
	line-height: 24px;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.pcs .pcs-item__meta dl.variation dt {
	position: relative;
	padding-left: 26px;
	font-weight: 600;
	color: var(--pcs-ink);
	white-space: nowrap;
}

.pcs .pcs-item__meta dl.variation dd {
	color: var(--pcs-ink-75);
	justify-self: start;
}

.pcs .pcs-item__meta dl.variation dt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	transform: none;
	align-self: auto;
	background: var(--pcs-teal);
	-webkit-mask: var(--pcs-meta-icon) center / contain no-repeat;
	mask: var(--pcs-meta-icon) center / contain no-repeat;
	--pcs-meta-icon: var(--pcs-icon-calendar);
}

.pcs .pcs-item__meta dl.variation dt.variation-Sessiontime::before { --pcs-meta-icon: var(--pcs-icon-clock); }

/* --------------------------------------------------------------------------
   Promo code
   -------------------------------------------------------------------------- */

.pcs .pcs-promo { padding: 9px 16px; }

/* ==========================================================================
   v0.2.7 — valores finais da etapa 1
   ========================================================================== */

/* Linha apagada das etapas volta para 20%.
   O texto das etapas não alcançadas segue em 40%, são coisas separadas. */
.pcs { --pcs-line-soft: rgba(35, 52, 84, .2); }

.pcs .pcs-item__meta { margin-top: 30px; }

.pcs .pcs-item__meta dl.variation { gap: 2px 6px; }

.pcs .pcs-item__meta dl.variation dt { padding-left: 29px; }

.pcs .pcs-item__meta dl.variation dt::before {
	top: 1px;
	width: 20px;
	height: 20px;
}

/* v0.2.8 — linha inferior das tabs em #23345400 (alfa zero) */
.pcs { --pcs-line-soft: rgba(35, 52, 84, 0); }

/* v0.2.9 — linha inferior das tabs de volta para 20% */
.pcs { --pcs-line-soft: rgba(35, 52, 84, .2); }

/* ==========================================================================
   v0.2.10 — centralização da lixeira
   --------------------------------------------------------------------------
   O SVG está centrado no próprio viewBox. O que saía do eixo era o botão: o
   tema aplica padding em <button> e eu não estava zerando, então o ícone
   centralizava na caixa de conteúdo e não na caixa visível, que é onde o
   fundo de hover é desenhado.
   ========================================================================== */

.pcs .pcs-item__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	padding: 0 !important;
	margin: 0;
	line-height: 0;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.pcs .pcs-item__remove .pcs-icon--trash {
	display: block;
	margin: 0;
	flex: 0 0 auto;
}

/* ==========================================================================
   v0.2.11 — campos da etapa 2
   ========================================================================== */

.pcs .pcs-grid { gap: 10px; }

.pcs-col-6 { grid-column: span 6 !important; }

@media (max-width: 767px) { .pcs-col-6 { grid-column: span 12 !important; } }

/* --------------------------------------------------------------------------
   Forma do campo
   --------------------------------------------------------------------------
   Altura vem do padding e não de um valor fixo, então input, select nativo e
   select2 assentam exatamente na mesma linha sem precisar de acerto manual.
   -------------------------------------------------------------------------- */

.pcs .pcs-grid .form-row :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select),
.pcs .pcs-grid .select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 13px 16px !important;
	border: 1px solid rgba(35, 52, 84, .08) !important;
	border-radius: 100px !important;
	background-color: #fff;
	font-size: 16px !important;
	line-height: 22px !important;
	color: var(--pcs-ink);
	margin: 0;
}

/* Selects precisam de folga para a seta não encostar no texto. */
.pcs .pcs-grid .form-row select,
.pcs .pcs-grid .select2-container .select2-selection--single {
	padding-right: 40px !important;
}

/* O select2 é um span, então precisa virar flex para centrar o rótulo. */
.pcs .pcs-grid .select2-container .select2-selection--single {
	display: flex !important;
	align-items: center;
}

.pcs .pcs-grid .select2-container .select2-selection__rendered {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 22px !important;
	font-size: 16px !important;
	color: var(--pcs-ink);
}

.pcs .pcs-grid .select2-container .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 12px !important;
	display: flex;
	align-items: center;
}

.pcs .pcs-grid .form-row :is(input, select)::placeholder { color: rgba(35, 52, 84, .4); }

.pcs .pcs-grid .form-row :is(input, select):focus,
.pcs .pcs-grid .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--pcs-teal) !important;
	box-shadow: 0 0 0 3px rgba(0, 171, 179, .12) !important;
}

/* --------------------------------------------------------------------------
   Ícone
   --------------------------------------------------------------------------
   z-index é o que faltava: o select2 se posiciona e, vindo depois no DOM,
   pintava por cima do pseudo elemento. Por isso o ícone aparecia nos inputs
   e sumia no país e no estado.
   -------------------------------------------------------------------------- */

.pcs .pcs-grid .form-row.pcs-field--icon::before {
	position: absolute;
	left: 16px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	z-index: 2;
	pointer-events: none;
}

.pcs .pcs-grid .form-row.pcs-field--icon :is(input, select),
.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection--single {
	padding-left: 48px !important;
}

/* A linha do campo não pode esticar o filho, senão o eixo vertical foge. */
.pcs .pcs-grid .form-row {
	position: relative;
	display: block;
	margin: 0;
}

.pcs .pcs-grid .form-row .woocommerce-input-wrapper { display: block; width: 100%; }

/* ==========================================================================
   v0.2.12
   ========================================================================== */

/* O CartFlows aplica margem inferior em toda form-row. Zerando na mesma
   especificidade, senão a grid ganha um respiro extra que não é o gap. */
.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form .pcs-grid .form-row,
.pcs .pcs-grid .form-row {
	margin: 0 0 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Ícone
   --------------------------------------------------------------------------
   Ancorado por cima e não por 50%. A altura do controle é sempre a mesma
   (13px + 22px + 13px + 2px de borda = 50px), então 14px centra sempre.
   Com 50% qualquer coisa que apareça abaixo do campo, como a mensagem de
   erro, empurrava o ícone para baixo. Era essa a diferença do estado.
   -------------------------------------------------------------------------- */

.pcs .pcs-grid .form-row.pcs-field--icon::before {
	left: 24px;
	top: 14px;
	bottom: auto;
	transform: none;
	width: 22px;
	height: 22px;
	z-index: 2;
}

.pcs .pcs-grid .form-row.pcs-field--icon :is(input, select),
.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection--single,
.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection__rendered {
	padding-left: 49px !important;
}

/* --------------------------------------------------------------------------
   Selects
   --------------------------------------------------------------------------
   O tema centraliza o texto de select. Forçando à esquerda nos dois eixos,
   porque text-align sozinho não move o rótulo do select nativo em todos os
   navegadores, quem faz isso é text-align-last.
   -------------------------------------------------------------------------- */

.pcs .pcs-grid .form-row select,
.pcs .pcs-grid .select2-container .select2-selection--single,
.pcs .pcs-grid .select2-container .select2-selection__rendered {
	text-align: left !important;
	text-align-last: left !important;
	direction: ltr;
}

.pcs .pcs-grid .form-row select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23233454' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 18px 18px;
	padding-right: 46px !important;
}

/* ==========================================================================
   v0.2.13
   ========================================================================== */

/* Respiro entre ícone e texto.
   O ícone começa em 24px e tem 22px, então termina em 46px. Com o texto em
   49px sobravam 3px. Levando para 58px o intervalo real vira 12px. */
.pcs .pcs-grid .form-row.pcs-field--icon :is(input, select),
.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection--single,
.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection__rendered {
	padding-left: 58px !important;
}

/* --------------------------------------------------------------------------
   Alinhamento do país e do estado
   --------------------------------------------------------------------------
   A regra anterior era só de classe e perdia para a do CartFlows, que também
   usa !important. Entre duas declarações !important quem decide é a
   especificidade, e seletor de id ganha de qualquer cadeia de classes.
   -------------------------------------------------------------------------- */

.pcs #billing_country,
.pcs #billing_state,
.pcs #pcs_phone_cc,
.pcs .pcs-grid .form-row select,
.pcs .pcs-grid .select2-container .select2-selection--single,
.pcs .pcs-grid .select2-container .select2-selection__rendered {
	text-align: left !important;
	text-align-last: left !important;
	text-indent: 0 !important;
	direction: ltr !important;
}

/* ==========================================================================
   v0.2.14 — correção do padding duplicado e da especificidade
   --------------------------------------------------------------------------
   Duas causas distintas:

   1. No select2 eu estava aplicando o recuo na caixa (.select2-selection--single)
      E no span interno (.select2-selection__rendered). Os dois somavam 116px,
      o que empurrava o texto para o meio e parecia centralização.

   2. Nos inputs o recuo não chegava porque a regra do CartFlows tem 5 classes
      e a minha tinha 4. Entre duas declarações !important quem decide é a
      especificidade, então a dela ganhava. O prefixo .pcs.pcs repete a classe
      de propósito para subir a contagem sem inventar marcação nova.
   ========================================================================== */

/* --- inputs e selects nativos: recuo apenas aqui --- */
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input.input-text,
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="text"],
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="tel"],
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="email"],
.pcs.pcs .pcs-grid .form-row.pcs-field--icon select {
	padding-left: 58px !important;
}

/* --- select2: o recuo mora na caixa --- */
.pcs.pcs .pcs-grid .form-row.pcs-field--icon .select2-container .select2-selection--single {
	padding-left: 58px !important;
	padding-right: 40px !important;
}

/* --- select2: o span interno não recua nada, só alinha --- */
.pcs.pcs .pcs-grid .select2-container .select2-selection__rendered,
#select2-billing_country-container,
#select2-billing_state-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	text-align-last: left !important;
	line-height: 22px !important;
	width: 100%;
}

/* ==========================================================================
   v0.2.15
   ========================================================================== */

/* 1. Ícone um pouco mais para dentro. Sai de 24 para 18, e o texto acompanha
   de 58 para 52, mantendo os mesmos 12px de respiro entre os dois. */

.pcs .pcs-grid .form-row.pcs-field--icon::before { left: 18px; }

.pcs.pcs .pcs-grid .form-row.pcs-field--icon input.input-text,
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="text"],
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="tel"],
.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="email"],
.pcs.pcs .pcs-grid .form-row.pcs-field--icon select,
.pcs.pcs .pcs-grid .form-row.pcs-field--icon .select2-container .select2-selection--single {
	padding-left: 52px !important;
}

/* --------------------------------------------------------------------------
   2. O retângulo azul
   --------------------------------------------------------------------------
   O select2 monta a lista suspensa no final do <body>, fora do .pcs, então
   nenhuma regra nossa alcançava ela e ela ficava com o visual cru da
   biblioteca, cujo item destacado é azul #5897fb.

   Quando ela abre e o campo dono sai de cena, seja por troca de etapa ou por
   recálculo do Woo, a lista fica órfã e o navegador a posiciona no canto
   superior esquerdo. É o quadrado que você viu.

   Duas defesas: estilo próprio para ela nunca aparecer crua, e fechamento
   forçado sempre que a etapa muda.
   -------------------------------------------------------------------------- */

body.pcs-active .select2-container--open .select2-dropdown {
	border: 1px solid rgba(35, 52, 84, .08);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(35, 52, 84, .12);
	background: #fff;
}

body.pcs-active .select2-dropdown .select2-search__field {
	border: 1px solid rgba(35, 52, 84, .08);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 15px;
}

body.pcs-active .select2-dropdown .select2-results__option {
	padding: 9px 14px;
	font-size: 15px;
	color: var(--pcs-ink, #233454);
}

body.pcs-active .select2-dropdown .select2-results__option--highlighted[aria-selected],
body.pcs-active .select2-dropdown .select2-results__option--highlighted {
	background-color: rgba(0, 171, 179, .1) !important;
	color: #00abb3 !important;
}

body.pcs-active .select2-dropdown .select2-results__option[aria-selected="true"] {
	background-color: rgba(0, 171, 179, .06);
	color: #00abb3;
}

/* Rede de segurança: lista sem container aberto não deve ocupar espaço. */
body.pcs-active .select2-container:not(.select2-container--open) .select2-dropdown { display: none; }

/* v0.2.16 — o seletor de código de país agora usa selectWoo como os demais */

/* Sem campo de busca, a lista não precisa do espaço reservado para ele. */
body.pcs-active .select2-container--open .select2-search--hidden { display: none; }

/* Cinco opções, então a lista não precisa de rolagem nem altura máxima alta. */
body.pcs-active #select2-pcs_phone_cc-results { max-height: none; }

/* Some a seta nativa, que o selectWoo desenha a própria. */
.pcs.pcs .pcs-grid .form-row.pcs-field--globe select.select2-hidden-accessible {
	background-image: none;
}

/* ==========================================================================
   v0.2.17 — largura travada no seletor de código
   --------------------------------------------------------------------------
   Duas travas, porque uma sozinha não bastava:

   1. O selectWoo escreve largura em linha no container. Forçando 100% ele
      passa a obedecer a coluna da grid em vez do próprio conteúdo.
   2. Item de grid nasce com min-width auto, ou seja, o conteúdo consegue
      empurrar a célula. min-width zero remove essa permissão.
   ========================================================================== */

.pcs.pcs .pcs-grid .form-row { min-width: 0; }

.pcs.pcs .pcs-grid .form-row .select2-container {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.pcs.pcs .pcs-grid .form-row .select2-selection--single {
	width: 100% !important;
	max-width: 100% !important;
}

.pcs.pcs .pcs-grid .select2-container .select2-selection__rendered {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A lista do código de país precisa ser larga o bastante para o nome inteiro,
   mesmo com o campo estreito. */
body.pcs-active .select2-container--open .select2-dropdown[id*="pcs_phone_cc"],
body.pcs-active .select2-dropdown:has(#select2-pcs_phone_cc-results) {
	min-width: 220px;
}

/* v0.2.18 — placeholder de país e estado com o mesmo tom dos demais campos */

.pcs.pcs .pcs-grid .select2-container .select2-selection__placeholder {
	color: rgba(35, 52, 84, .4) !important;
	font-size: 16px;
	line-height: 22px;
}

/* Sem valor escolhido o select nativo também mostra o placeholder apagado. */
.pcs.pcs .pcs-grid .form-row select:invalid,
.pcs.pcs .pcs-grid .form-row select option[value=""] {
	color: rgba(35, 52, 84, .4);
}

/* ==========================================================================
   v0.2.19 — largura do selectWoo em todas as camadas
   --------------------------------------------------------------------------
   O selectWoo empilha três elementos: .select2-container, dentro dele
   .selection e dentro dela .select2-selection--single. Bastava um deles ficar
   com largura de conteúdo para o campo encolher. Agora os três são 100%.
   ========================================================================== */

.pcs.pcs .pcs-grid .form-row .select2,
.pcs.pcs .pcs-grid .form-row .select2-container,
.pcs.pcs .pcs-grid .form-row .select2-container .selection,
.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection,
.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection--single {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	display: block;
}

.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection--single {
	display: flex !important;
	align-items: center;
}

.pcs.pcs .pcs-grid .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
	min-width: 0;
}

/* ==========================================================================
   v0.2.21
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tamanho de texto igual em todos os campos
   --------------------------------------------------------------------------
   O CartFlows define 14px nos inputs com especificidade maior que a minha
   anterior, então só o país e o estado, que passam pelo selectWoo, chegavam
   nos 16px. Daí a diferença que você viu entre eles e o resto.
   -------------------------------------------------------------------------- */

.pcs.pcs .pcs-grid .form-row input.input-text,
.pcs.pcs .pcs-grid .form-row input[type="text"],
.pcs.pcs .pcs-grid .form-row input[type="tel"],
.pcs.pcs .pcs-grid .form-row input[type="email"],
.pcs.pcs .pcs-grid .form-row input[type="number"],
.pcs.pcs .pcs-grid .form-row select,
.pcs.pcs .pcs-grid .form-row textarea,
.pcs.pcs .pcs-grid .select2-container .select2-selection__rendered,
.pcs.pcs .pcs-grid .select2-container .select2-selection__placeholder {
	font-size: 16px !important;
	line-height: 22px !important;
}

.pcs.pcs .pcs-grid .form-row input::placeholder,
.pcs.pcs .pcs-grid .form-row textarea::placeholder {
	font-size: 16px !important;
	line-height: 22px !important;
	color: rgba(35, 52, 84, .4) !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Última trava de largura
   --------------------------------------------------------------------------
   Inclui o select nativo que o selectWoo esconde. Ele fica fora da tela mas
   continua no fluxo em alguns temas, e aí participa do cálculo da célula.
   -------------------------------------------------------------------------- */

.pcs.pcs .pcs-grid .form-row select.select2-hidden-accessible {
	width: 1px !important;
	max-width: 1px !important;
	position: absolute !important;
	left: -10000px !important;
}

.pcs.pcs .pcs-grid .form-row > .woocommerce-input-wrapper,
.pcs.pcs .pcs-grid .form-row > .woocommerce-input-wrapper > .select2 {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	float: none !important;
}

/* ==========================================================================
   v0.2.22 — a largura que sobrava
   --------------------------------------------------------------------------
   A causa não era o campo nem a grid interna: o CartFlows aplica o próprio
   layout de duas colunas em form.checkout, e o nosso formulário herdava essa
   restrição. Por isso a barra de etapas, que é irmã do form e não filha dele,
   ia até a borda, e só o conteúdo de baixo parava antes.
   ========================================================================== */

.pcs.pcs .pcs__form,
.wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce form.checkout.pcs__form {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	grid-template-columns: none !important;
	column-gap: 0 !important;
}

.pcs.pcs .pcs__layout {
	width: 100% !important;
	max-width: none !important;
}

.pcs.pcs .pcs__aside,
.pcs.pcs .pcs__panels {
	min-width: 0;
	max-width: none !important;
	float: none !important;
}

/* A lista de países fica alta, então ganha rolagem própria e busca visível. */
body.pcs-active .select2-container--open .select2-results__options { max-height: 280px; }

body.pcs-active .select2-dropdown .select2-search--dropdown { padding: 10px; }

/* ==========================================================================
   v0.2.23 — altura e rolagem da lista de países
   --------------------------------------------------------------------------
   Na versão anterior eu defini max-height mas esqueci o overflow. Sem ele o
   conteúdo simplesmente transborda e a altura máxima não tem efeito visível.
   Agora os dois andam juntos, com !important porque a regra do CartFlows para
   listas tem especificidade maior.
   ========================================================================== */

body.pcs-active .select2-container .select2-results > .select2-results__options,
body.pcs-active .select2-container .select2-results__options,
body.pcs-active .select2-dropdown .select2-results__options {
	max-height: 260px !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
}

/* A busca fica fixa no topo enquanto a lista rola. */
body.pcs-active .select2-dropdown .select2-search--dropdown {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #fff;
	padding: 10px;
	border-bottom: 1px solid rgba(35, 52, 84, .08);
}

body.pcs-active .select2-dropdown .select2-search__field:focus {
	outline: none;
	border-color: var(--pcs-teal, #00abb3);
	box-shadow: 0 0 0 3px rgba(0, 171, 179, .12);
}

/* Barra de rolagem discreta, no tom da interface. */
body.pcs-active .select2-results__options {
	scrollbar-width: thin;
	scrollbar-color: rgba(35, 52, 84, .25) transparent;
}

body.pcs-active .select2-results__options::-webkit-scrollbar { width: 8px; }
body.pcs-active .select2-results__options::-webkit-scrollbar-track { background: transparent; }

body.pcs-active .select2-results__options::-webkit-scrollbar-thumb {
	background: rgba(35, 52, 84, .25);
	border-radius: 999px;
	border: 2px solid #fff;
}

/* ==========================================================================
   v0.3.3 — etapa 3, fileira de formas de pagamento
   ========================================================================== */

.pcs .pcs-methods {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.pcs .pcs-method {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	border: 1px solid rgba(35, 52, 84, .08);
	background: #fff;
	font-size: 15px;
	font-weight: 500;
	color: var(--pcs-ink);
	cursor: pointer;
	transition: background .18s var(--pcs-ease), border-color .18s var(--pcs-ease), color .18s var(--pcs-ease);
}

.pcs .pcs-method:hover { border-color: var(--pcs-teal); }

.pcs .pcs-method[aria-checked="true"] {
	background: var(--pcs-teal);
	border-color: var(--pcs-teal);
	color: #fff;
}

.pcs .pcs-method:focus-visible { outline: 2px solid var(--pcs-teal); outline-offset: 2px; }

/* O gateway vem primeiro, as wallets ocupam o resto da fileira. */
.pcs .pcs-method--gateway { order: 0; }
.pcs .pcs-methods__wallets { order: 1; }

.pcs .pcs-methods__wallets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
}

.pcs .pcs-methods__wallets:empty { display: none; }

/* Cada wallet vem no próprio container, então damos largura mínima para
   nenhuma ficar espremida e todas alinharem com a altura da pílula. */
.pcs .pcs-methods__wallets > div { min-width: 150px; }

/* --------------------------------------------------------------------------
   Caixa do gateway
   --------------------------------------------------------------------------
   Ela já está dentro de um card nosso, então perde a moldura própria. O
   rótulo "Payment options" também sai: a pílula acima já diz o que é.
   -------------------------------------------------------------------------- */

.pcs .woocommerce-checkout-payment,
.pcs .wc_payment_methods,
.pcs .wc_payment_method,
.pcs .payment_box.payment_method_stripe {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	list-style: none !important;
}

.pcs .payment_box.payment_method_stripe::before { display: none !important; }

.pcs .wc_payment_method > label { display: none !important; }

.pcs .wc-stripe-payment-method-instruction {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pcs-ink-75);
	background: rgba(35, 52, 84, .04);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0 0 16px;
}

.pcs .woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0 !important;
	font-size: 14px;
	color: var(--pcs-ink-75);
}

.pcs .pcs-confirmed {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--pcs-teal);
}

.pcs .pcs-card--payment { margin-top: var(--pcs-gap); }

/* v0.3.4 */

/* O atributo hidden precisa vencer as regras de display das classes acima,
   senão o aviso de wallet confirmada aparece solto na tela. */
.pcs [hidden],
.pcs .pcs-confirmed[hidden],
.pcs .pcs-methods__wallets[hidden] { display: none !important; }

/* A fileira do Stripe já vem dentro do nosso slot, então o separador e o
   espaçamento que ela traz do layout de página única saem. */
.pcs .pcs-methods__wallets #wc-stripe-express-checkout-element {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 !important;
	clear: none !important;
	width: auto;
}

.pcs .pcs-methods__wallets #wc-stripe-express-checkout-element > div { min-width: 150px; }

.pcs #wc-stripe-express-checkout-button-separator { display: none !important; }

/* ==========================================================================
   v0.3.5 — fileira de pagamento numa linha só e cantos arredondados
   ========================================================================== */

.pcs .pcs-methods {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

/* A pílula não estica nem encolhe abaixo do texto dela. */
.pcs .pcs-method--gateway {
	flex: 0 0 auto;
	white-space: nowrap;
	min-height: 48px;
	height: 48px;
}

/* As wallets dividem o espaço que sobra. */
.pcs .pcs-methods__wallets {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	margin: 0;
}

.pcs .pcs-methods__wallets #wc-stripe-express-checkout-element {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 !important;
	width: 100%;
	clear: none !important;
}

/* --------------------------------------------------------------------------
   Arredondamento
   --------------------------------------------------------------------------
   O botão de cada carteira vive dentro de um iframe do Stripe, de outra
   origem, então nenhuma regra nossa entra lá. O que dá para fazer é recortar
   por fora: arredonda o container e esconde o que passa do contorno.
   -------------------------------------------------------------------------- */

.pcs .pcs-methods__wallets .StripeElement {
	flex: 1 1 0;
	min-width: 92px;
	border-radius: 999px;
	overflow: hidden;
	background: transparent;
}


/* Abaixo disso quatro numa linha não cabem sem espremer o texto. */
@media (max-width: 1023px) {

	.pcs .pcs-methods,
	.pcs .pcs-methods__wallets #wc-stripe-express-checkout-element {
		flex-wrap: wrap;
	}

	.pcs .pcs-methods__wallets { flex: 1 1 100%; }
	.pcs .pcs-methods__wallets .StripeElement { flex: 1 1 120px; }
}

/* ==========================================================================
   v0.3.6 — recorte externo das carteiras
   --------------------------------------------------------------------------
   Rede de segurança. O caminho principal agora é a Appearance API do Stripe,
   que arredonda o botão na origem. Isto aqui recorta por fora, para o caso do
   filtro não pegar na versão do gateway instalada.
   ========================================================================== */

.pcs .pcs-methods__wallets .StripeElement,
.pcs .pcs-methods__wallets > div > div[id^="wc-stripe-express-checkout-element-"] {
	border-radius: 999px !important;
	overflow: hidden !important;
	isolation: isolate;
}


/* ==========================================================================
   v0.3.7 — geometria devolvida ao Stripe
   --------------------------------------------------------------------------
   O elemento de carteira tem três camadas com medidas amarradas entre si:

     .StripeElement            48px, que é a altura do botão
       .__PrivateStripeElement margem -4px na vertical
         iframe                56px de altura, margem -4px, largura +8px

   Os 8px extras existem porque o Stripe desenha o botão com folga interna e
   depois puxa a moldura para fora com margem negativa. Forçar altura ou zerar
   margem aí corta o botão. Então mexemos só no que é nosso: o recorte externo
   e a largura da célula na fileira.
   ========================================================================== */

.pcs .pcs-methods__wallets .StripeElement {
	flex: 1 1 0;
	min-width: 92px;
	border-radius: 999px;
	overflow: hidden;
	background: transparent;
	height: auto;
}

/* Camadas internas voltam a ser regidas pelo próprio Stripe. */
.pcs .pcs-methods__wallets .StripeElement > .__PrivateStripeElement,
.pcs .pcs-methods__wallets .StripeElement iframe {
	height: auto;
	border-radius: 0;
}

/* A pílula do cartão acompanha a altura que o Stripe usa nos botões. */
.pcs .pcs-method--gateway {
	height: 48px;
	min-height: 48px;
}

/* ==========================================================================
   v0.3.9
   ========================================================================== */

/* Pílula mais enxuta, para sobrar espaço na fileira. */
.pcs .pcs-method--gateway { padding: 0 16px; }
.pcs .pcs-methods__wallets .StripeElement { min-width: 100px; }

/* --------------------------------------------------------------------------
   Padding do card de pagamento
   --------------------------------------------------------------------------
   O respiro estava certo na esquerda e faltando na direita. A causa é a
   caixa do gateway, que herda largura e margem do layout de página única e
   estoura o lado direito do card. Travamos largura e margens dos filhos na
   caixa de conteúdo e devolvemos o padding simétrico ao card.
   -------------------------------------------------------------------------- */

.pcs .pcs-card--payment {
	padding: 24px !important;
	box-sizing: border-box;
	overflow: visible;
}

.pcs .pcs-card--payment #payment,
.pcs .pcs-card--payment .woocommerce-checkout-payment,
.pcs .pcs-card--payment .wc_payment_methods,
.pcs .pcs-card--payment .wc_payment_method,
.pcs .pcs-card--payment .payment_box,
.pcs .pcs-card--payment .wc-upe-form,
.pcs .pcs-card--payment fieldset {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

/* O elemento do Stripe usa largura maior que o pai mais margem negativa para
   compensar. Isso é intencional e simétrico, então preservamos. */
.pcs .pcs-card--payment .wc-stripe-upe-element {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.pcs .pcs-card--payment .wc-stripe-payment-method-instruction {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* ==========================================================================
   v0.4.0 — etapa 4
   ========================================================================== */

/* O ícone de editar traz o próprio círculo, então o botão é só a moldura. */
.pcs .pcs-edit {
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 0;
	background: none !important;
	color: var(--pcs-ink);
	line-height: 0;
	border-radius: 50%;
	transition: color .18s var(--pcs-ease), transform .1s var(--pcs-ease);
}

.pcs .pcs-edit:hover { color: var(--pcs-teal); background: none !important; }
.pcs .pcs-edit:active { transform: scale(.94); }

.pcs .pcs-icon--edit { width: 36px; height: 36px; }

/* Card sem título mantém o botão alinhado à direita. */
.pcs .pcs-review__head--bare {
	justify-content: flex-end;
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Campos da revisão
   --------------------------------------------------------------------------
   Mesma forma dos campos da etapa 2, só que somente leitura. Repetir a
   aparência ajuda a pessoa a reconhecer o que ela preencheu.
   -------------------------------------------------------------------------- */

.pcs .pcs-review__fields { display: grid; gap: 10px; }

.pcs .pcs-review__field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border: 1px solid rgba(35, 52, 84, .08);
	border-radius: 100px;
	background: #fff;
	font-size: 16px;
	line-height: 22px;
	color: var(--pcs-ink);
}

.pcs .pcs-review__field[hidden] { display: none !important; }

.pcs .pcs-review__field .pcs-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--pcs-teal);
}

.pcs .pcs-review__field span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   v0.4.1 — títulos de bloco em 24px
   --------------------------------------------------------------------------
   Um valor só para todos os títulos que abrem um bloco dentro das etapas:
   Billing details, Payment method, Payment information, Review your purchase,
   Order summary, Billing details e Payment method da revisão, e o Important.
   ========================================================================== */

.pcs .pcs-card__title,
.pcs .pcs-summary__title,
.pcs .pcs-review__heading,
.pcs .pcs-review__title,
.pcs .pcs-note__title {
	font-size: 24px !important;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pcs-ink);
	margin: 0;
}

/* O cabeçalho da revisão ganha o mesmo respiro dos demais blocos. */
.pcs .pcs-review__heading { margin-bottom: 10px; }

/* Com o título maior, o botão de editar precisa de mais folga ao lado. */
.pcs .pcs-review__head { gap: 16px; margin-bottom: 16px; }

/* ==========================================================================
   v0.4.2 — peso e respiro dos títulos de bloco
   ========================================================================== */

.pcs .pcs-card__title,
.pcs .pcs-summary__title,
.pcs .pcs-review__heading,
.pcs .pcs-review__title,
.pcs .pcs-note__title {
	font-weight: 500 !important;
}

/* Mais ar entre o título do resumo e o campo de cupom. */
.pcs .pcs-summary__title { margin: 0 0 24px; }

/* ==========================================================================
   v0.4.3 — padding uniforme nos cards da etapa 4
   --------------------------------------------------------------------------
   O botão de editar tem 36px e o título 31px de altura de linha. Como os dois
   dividem a mesma linha, quem manda na altura é o botão, e o título acaba
   deslocado para baixo. Somado à margem do cabeçalho, o topo passava a
   impressão de ter mais respiro que as laterais.

   A correção prende o botão sem deixar ele esticar a linha: ele sai do fluxo
   vertical e é centrado contra o título.
   ========================================================================== */

.pcs .pcs-card--review,
.pcs .pcs-card--note {
	padding: 24px !important;
}

.pcs .pcs-review__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
	margin: 0 0 16px !important;
}

.pcs .pcs-review__title {
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* O botão não participa do cálculo de altura da linha. */
.pcs .pcs-review__head .pcs-edit {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	margin: 0;
}

.pcs .pcs-review__head .pcs-edit:active { transform: translateY(-50%) scale(.94); }

/* Sem título, o cabeçalho é só a faixa onde o botão flutua. */
.pcs .pcs-review__head--bare {
	min-height: 36px;
	margin: 0 0 16px !important;
}

.pcs .pcs-note__text { margin: 8px 0 0; }

/* ==========================================================================
   v0.4.4 — faixa vazia acima do produto na etapa 4
   --------------------------------------------------------------------------
   O card do produto não tem título, mas o cabeçalho continuava reservando
   36px de altura mais 16px de margem só para acomodar o botão de editar. Nos
   outros cards esse espaço é ocupado pelo título; nesse ficava vazio.

   Agora o cabeçalho sem título deixa de ocupar altura e o botão é preso ao
   canto do próprio card.
   ========================================================================== */

.pcs .pcs-card--review { position: relative; }

.pcs .pcs-review__head--bare {
	position: static;
	height: 0;
	min-height: 0;
	margin: 0 !important;
}

.pcs .pcs-review__head--bare .pcs-edit {
	top: 24px;
	right: 24px;
	transform: none;
}

.pcs .pcs-review__head--bare .pcs-edit:active { transform: scale(.94); }

/* O conteúdo abre espaço para o botão só na primeira linha. */
.pcs .pcs-card--review .pcs-item__body { padding-right: 48px; }

@media (max-width: 600px) {
	.pcs .pcs-card--review .pcs-item__body { padding-right: 0; }
	.pcs .pcs-review__head--bare .pcs-edit { top: 18px; right: 18px; }
}

/* ==========================================================================
   v0.4.5
   ========================================================================== */

/* 2. Fonte dos títulos de bloco.
   O fallback existe porque a Rethink Sans é carregada pelo tema. Se um dia ela
   sair, o texto cai numa sem serifa em vez de na serifada do navegador. */
.pcs .pcs-card__title,
.pcs .pcs-summary__title,
.pcs .pcs-review__heading,
.pcs .pcs-review__title,
.pcs .pcs-note__title {
	font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* 1. Review your purchase alinhado com o conteúdo dos cards abaixo.
   Substituído em v0.5.2: o título passou a acompanhar a borda do card, não o
   conteúdo dele. As duas regras abaixo continuam aqui só como histórico. */
.pcs .pcs-review__heading {
	padding-left: 24px;
	margin: 0 0 14px;
}

@media (max-width: 767px) { .pcs .pcs-review__heading { padding-left: 18px; } }

/* --------------------------------------------------------------------------
   3. Important com o mesmo desenho dos cards acima
   -------------------------------------------------------------------------- */

.pcs .pcs-card--note {
	background: #fff !important;
	box-shadow: var(--pcs-shadow) !important;
	border-radius: var(--pcs-radius);
	padding: 24px !important;
}

.pcs .pcs-card--note .pcs-note__title { margin: 0 0 8px !important; }

.pcs .pcs-card--note .pcs-note__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pcs-ink-75);
}

/* O texto de consentimento sai do card e vira nota solta antes dos botões. */
.pcs .pcs-place-order { margin-top: var(--pcs-gap); }

.pcs .pcs-place-order .woocommerce-privacy-policy-text p {
	margin: 0 0 4px;
	padding: 0 24px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pcs-ink-75);
}

@media (max-width: 767px) {
	.pcs .pcs-place-order .woocommerce-privacy-policy-text p { padding: 0 18px; }
}

/* ==========================================================================
   v0.4.6 — tipografia dos botões
   --------------------------------------------------------------------------
   Vale para os botões de navegação das quatro etapas: Continue shopping,
   Back to previous, Next step e Finish purchase.
   ========================================================================== */

.pcs .pcs-btn,
.pcs .pcs-actions a.pcs-btn,
.pcs .pcs-actions button.pcs-btn {
	font-family: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.2;
}

/* Com o texto maior o botão precisa de mais altura e folga lateral. */
.pcs .pcs-btn {
	min-height: 60px;
	padding: 0 28px;
}

@media (max-width: 600px) {
	.pcs .pcs-btn {
		min-height: 56px;
		font-size: 18px !important;
	}
}

/* ==========================================================================
   v0.4.7 — texto de política de privacidade oculto
   --------------------------------------------------------------------------
   O elemento continua no DOM porque vive dentro do bloco .place-order, junto
   com o nonce e o botão real de submit. Removê-lo do HTML quebraria o proxy
   do Finish purchase.
   ========================================================================== */

.pcs .woocommerce-privacy-policy-text,
.pcs .pcs-place-order .woocommerce-privacy-policy-text,
.pcs .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
	display: none !important;
}

.pcs .pcs-place-order { margin-top: 0; }

/* ==========================================================================
   v0.4.8
   --------------------------------------------------------------------------
   1. O botão de editar do card do produto não recebia clique. Ele fica no
      cabeçalho, que vem antes do produto no DOM. Os dois são elementos
      posicionados e nenhum tinha z-index, então quem pintava por cima era o
      que vem depois: o produto. Ele cobria o botão e engolia o clique.

   2. O título quebrava em quatro linhas na etapa 4 e três na etapa 1, porque
      o corpo do produto na revisão tinha 48px de recuo à direita. O limite de
      70% de largura já mantém o título longe do botão, então o recuo sai e as
      duas etapas voltam a ter a mesma medida.
   ========================================================================== */

.pcs .pcs-edit {
	position: relative;
	z-index: 3;
}

.pcs .pcs-review__head .pcs-edit,
.pcs .pcs-review__head--bare .pcs-edit {
	position: absolute;
	z-index: 3;
}

.pcs .pcs-card--review .pcs-item__body { padding-right: 0; }

@media (max-width: 600px) {
	.pcs .pcs-card--review .pcs-item__body { padding-right: 0; }
}

/* ==========================================================================
   v0.4.9 — espaço entre os cards da etapa 3
   --------------------------------------------------------------------------
   O painel já separa os filhos com o gap padrão. O margin-top que eu tinha
   posto no card de pagamento somava a esse gap e dobrava a distância entre
   Payment method e Payment information.
   ========================================================================== */

.pcs .pcs-card--payment { margin-top: 0 !important; }

/* ==========================================================================
   v0.5.0 — espaço antes dos botões da etapa 4
   --------------------------------------------------------------------------
   Entre o card Important e os botões existe o bloco .place-order do Woo. Ele
   hoje não mostra nada, porque o texto de privacidade está oculto e o botão
   real de submit fica fora da tela, mas continua sendo um filho do painel.

   Como o painel separa os filhos por gap, um bloco invisível no meio consome
   dois gaps em vez de um, e é isso que afastava os botões.

   A margem negativa cancela o gap excedente. Ela só se aplica quando o bloco
   está mesmo vazio: se algum dia o checkbox de termos for ativado, o bloco
   passa a ter conteúdo real e volta ao espaçamento normal.
   ========================================================================== */

.pcs .pcs-place-order {
	margin: 0 !important;
	padding: 0 !important;
}

.pcs .pcs-place-order:not(:has(input[type="checkbox"])) {
	margin-bottom: calc(-1 * var(--pcs-gap)) !important;
}

.pcs .pcs-place-order .form-row.place-order {
	margin: 0 !important;
	padding: 0 !important;
}

.pcs .pcs-place-order .woocommerce-terms-and-conditions-wrapper { margin: 0 !important; }

/* ==========================================================================
   v0.5.2 — Review your purchase: borda esquerda e nível do Order summary
   --------------------------------------------------------------------------
   1. Alinhamento horizontal.

   Até a v0.4.5 o título recebia 24px de recuo para casar com o texto de
   dentro dos cards. Agora ele acompanha a borda externa do card, que é a
   mesma linha da coluna inteira. Zerado aqui, e não editado lá em cima, para
   a regra antiga continuar visível como histórico.

   2. Alinhamento vertical.

   As duas colunas começam na mesma altura, mas o Order summary é um título
   dentro de um card e nasce 24px mais baixo, empurrado pelo padding do card
   do resumo. O Review your purchase é um título solto, sem card, então
   encostava no topo e ficava desalinhado do vizinho da direita.

   O padding do card do resumo é 24px, então essa seria a margem para as duas
   linhas de base coincidirem exatamente. Só que isso empurra o título para
   perto do primeiro card e abre um vão grande contra a barra de etapas.

   Calibrado no navegador para 12px na v0.5.4: metade do caminho até o nível
   do Order summary, com o texto respirando igual dos dois lados. A diferença
   que sobra contra o título da direita não é perceptível.

   Só vale no layout de duas colunas. Abaixo de 1024px o resumo desce para
   baixo dos painéis e não há nada à direita para nivelar.
   ========================================================================== */

.pcs .pcs-review__heading {
	padding-left: 0;
	margin: 0 0 14px;
}

@media (min-width: 1024px) {
	.pcs .pcs-review__heading { margin-top: 12px; }
}

/* ==========================================================================
   v0.5.3 – v0.5.4 — respiro abaixo do Review your purchase
   --------------------------------------------------------------------------
   O título carregava 14px de margem inferior somados aos 16px de gap do
   painel, então a distância até o primeiro card era 30px, o dobro do que
   separa um card do outro.

   A v0.5.3 zerou essa margem, mas tirou espaço só de baixo e o texto ficou
   encostado no card. A v0.5.4 reduz dos dois lados, 12px em cima e 8px
   embaixo, mantendo o texto no meio do espaço que ocupa.
   ========================================================================== */

.pcs .pcs-review__heading { margin-bottom: 8px; }

/* ==========================================================================
   v0.5.5 — cartão mascarado e ícone de troca no bloco Payment method
   --------------------------------------------------------------------------
   O bloco já era flex com space-between, então o cartão entra como segundo
   filho e vai sozinho para a direita, sem regra de posição.

   O ícone de troca traz o próprio círculo, mesma construção do ícone de
   editar, então só precisa da medida. O botão continua sendo moldura.

   letter-spacing nos asteriscos: sem ele os quatro grupos colam e viram um
   borrão. O ícone fica fora do espaçamento para não herdar o respiro.
   ========================================================================== */

.pcs .pcs-icon--swap { width: 36px; height: 36px; }

.pcs .pcs-review__card {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .08em;
	color: var(--pcs-ink);
	white-space: nowrap;
}

.pcs .pcs-review__card[hidden] { display: none; }

.pcs .pcs-review__card .pcs-icon--banknote {
	width: 24px;
	height: 24px;
	color: var(--pcs-teal);
	letter-spacing: normal;
}

/* Telefone: o nome do meio de pagamento e o cartão empilham em vez de
   espremerem um ao outro. */
@media (max-width: 600px) {

	.pcs .pcs-review__payment {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px;
	}

	.pcs .pcs-review__card {
		font-size: 15px;
		letter-spacing: .06em;
	}
}

/* ==========================================================================
   v0.5.6 — pílulas de marca no bloco Payment method
   --------------------------------------------------------------------------
   Cartão continua na pílula preenchida, que é o estado aria-checked que já
   existia. As carteiras ficam na pílula branca: Apple, Google e Link exigem
   as marcas sobre fundo claro nas próprias diretrizes, e sobre o teal elas
   perderiam contraste e sairiam da regra.

   Cursor default porque na etapa 4 a pílula é leitura, não escolha. Quem
   troca o meio de pagamento é o botão de troca no topo do card.
   ========================================================================== */

.pcs .pcs-method--brand {
	background: var(--pcs-surface);
	border-color: var(--pcs-line);
	color: var(--pcs-ink);
	gap: 6px;
	font-weight: 500;
	cursor: default;
}

.pcs .pcs-method--brand:hover { border-color: var(--pcs-line); }

.pcs .pcs-method--brand img {
	display: block;
	width: auto;
	height: 16px;
	max-width: none;
	flex: 0 0 auto;
}

/* O Link é uma marca deitada, precisa de mais altura que os glifos. */
.pcs .pcs-method--brand[data-pcs-review-brand="link"] img { height: 15px; }

.pcs .pcs-method[hidden],
.pcs .pcs-method--brand[hidden] { display: none !important; }

/* ==========================================================================
   v0.5.20 — piso de altura na carteira
   --------------------------------------------------------------------------
   Achado no navegador: desmarcando o height: 8px inline do iframe, os botões
   aparecem. Ou seja, o Stripe sempre desenhou. O que faltava era a altura.

   8px é o estado inicial do iframe, antes de ele receber a medida real. No
   carregamento que funciona ele vai para 56px, e o transition ganha a parte
   de opacity junto. No que falha, essa segunda medida nunca chega, e o frame
   fica preso no valor de partida.

   A v0.3.7 já tentava resolver com height auto, mas sem !important. Estilo
   inline vence folha de estilo, então os 8px continuavam ganhando. A regra
   existia e não fazia efeito nenhum.

   Aqui é piso, não altura fixa. min-height não disputa a medida com o
   Stripe: se ele mandar 56px, 60px ou o que for, prevalece. Só não deixa
   descer abaixo do tamanho de um botão.

   Os números saem da geometria real do caso que funciona: iframe em 56px,
   com a camada do meio em margin -4px, resultando nos 48px de buttonHeight
   que o gateway pede ao Stripe.

   Risco conhecido: se alguma carteira estiver de fato indisponível, sobra um
   espaço vazio de 48px no lugar dela. Trocar botão invisível por espaço
   vazio é um ganho, mas se aparecer buraco em produção vale rever.
   ========================================================================== */

.pcs .pcs-methods__wallets .StripeElement {
	min-height: 48px !important;
}

.pcs .pcs-methods__wallets .StripeElement > .__PrivateStripeElement,
.pcs .pcs-methods__wallets .StripeElement iframe {
	min-height: 56px !important;
}

/* ==========================================================================
   v0.5.26 — respiro entre o desconto e o link de remover cupom
   --------------------------------------------------------------------------
   O WooCommerce imprime os dois no mesmo <dd>, separados por um único espaço
   em branco no HTML, que some no colapso do flex e cola o "Remove" no valor.

   Margem em vez de gap porque o dd carrega outras coisas em outros cenários,
   como o valor de imposto, e o gap afastaria tudo. Aqui a distância é entre
   estes dois vizinhos específicos.

   Duas classes na regra porque o CartFlows troca o HTML do cupom pelo dele e
   renomeia o link para wcf-remove-coupon. A classe nativa do Woo fica na
   lista para o dia em que o CartFlows sair de cena.
   ========================================================================== */

.pcs .pcs-summary__row .woocommerce-remove-coupon,
.pcs .pcs-summary__row .wcf-remove-coupon {
	margin-left: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pcs-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s var(--pcs-ease);
}

.pcs .pcs-summary__row .woocommerce-remove-coupon:hover,
.pcs .pcs-summary__row .woocommerce-remove-coupon:focus,
.pcs .pcs-summary__row .wcf-remove-coupon:hover,
.pcs .pcs-summary__row .wcf-remove-coupon:focus {
	color: var(--pcs-danger);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   0.5.41, respiro do mobile

   MEDIÇÃO ANTES DE MEXER

   Num aparelho de 390px, a largura era consumida em cascata: 20px de cada
   lado no .pcs, 18px de cada lado no .pcs-card, 110px de coluna de foto e
   16px de gap. Sobravam 188px para o texto, com o título a 22px. Um título
   longo quebrava em uma ou duas palavras por linha.

   O AGRAVANTE

   A seção 7 deste arquivo mandou align-items: stretch com a foto em
   height: 100%, para a foto acompanhar a altura do card no desktop. No
   mobile isso anulou o quadrado de 76px e criou um laço: título quebrado
   deixa o card alto, card alto estica a foto, foto esticada não devolve
   largura nenhuma. O card virava uma faixa vertical.

   O QUE MUDA AQUI

   Abaixo de 600px a foto volta a ser miniatura quadrada, o que corta o laço,
   e a cascata de espaços encolhe. O texto passa de 188px para 226px, vinte
   por cento a mais, sem tocar em nada acima de 600px.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

	.pcs-card { padding: 16px; }

	.pcs-item {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}

	/* Miniatura quadrada. O height fixo é o que impede a foto de esticar. */
	.pcs-item__media {
		height: 88px;
		min-height: 0;
	}

	.pcs-item__media img {
		width: 88px;
		height: 88px;
	}
}

/* --------------------------------------------------------------------------
   0.5.43, o último padding do mobile

   O CartFlows dá padding lateral no wrapper .woocommerce abaixo de 768px,
   na folha dele:

     @media only screen and (max-width: 768px) {
       .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout
       .woocommerce { padding: 0 20px; }
     }

   Com o .pcs já zerado, esses 20px de cada lado eram o que ainda separava a
   seção do Elementor do nosso card. Como o respiro passou a ser decidido na
   página, aqui ele sai.

   Sem !important. O seletor do CartFlows tem três classes; o body na frente
   deixa o nosso mais específico, e aí ele vence independente da ordem em que
   as folhas forem carregadas. Se um dia o CartFlows mudar o seletor, esta
   regra simplesmente deixa de casar e o padding volta, que é uma falha
   barulhenta e fácil de achar, não um efeito silencioso.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

	body .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .woocommerce {
		padding-inline: 0;
	}
}

/* --------------------------------------------------------------------------
   0.5.44, card do produto em três blocos no mobile

   O DESENHO

     bloco 1   foto à esquerda, com categoria, título e duração à direita.
               A foto acompanha a altura desse conjunto.
     bloco 2   data e hora em faixa cheia, uma embaixo da outra.
     bloco 3   preço à esquerda, lixeira à direita.

   COMO, SEM MEXER NO HTML

   Categoria, título, duração e meta moram todos dentro de .pcs-item__body.
   Enquanto o body for uma caixa, o meta fica preso na coluna estreita do
   texto, que é o que empurrava data e hora para a direita da foto.

   display: contents dissolve a caixa sem tirar nada do DOM: os quatro filhos
   passam a ser itens da grade do .pcs-item. Aí a foto ocupa a coluna 1 nas
   três primeiras linhas, e meta, preço e lixeira se posicionam sozinhos nas
   linhas seguintes.

   Só a foto tem linha declarada. O resto usa posicionamento automático de
   propósito: categoria e duração são condicionais no template, e se um dia
   faltarem, a grade se reorganiza sem deixar linha vazia no meio.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.pcs-item {
		grid-template-columns: 88px minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 10px;
		align-items: start;
	}

	.pcs-item__body { display: contents; }

	/**
	 * Bloco 1 em duas partes: categoria em faixa cheia na primeira linha e,
	 * abaixo dela, a foto ao lado de título e duração.
	 *
	 * A foto usa grid-row: span 2 em vez de uma linha fixa. Com linha fixa
	 * ela começaria sempre na linha 2, e no dia em que o produto não tivesse
	 * categoria, que é condicional no template, sobraria uma linha vazia no
	 * topo do card. Com span ela ocupa duas linhas a partir de onde chegar.
	 *
	 * Para isso a categoria precisa ser colocada antes da foto, e no HTML a
	 * foto vem primeiro. order resolve a ordem de colocação sem tocar no
	 * HTML e sem mudar a ordem de leitura do DOM.
	 */
	.pcs-item__eyebrow  { order: 1; grid-column: 1 / -1; }
	.pcs-item__media    { order: 2; }
	.pcs-item__title    { order: 3; }
	.pcs-item__duration { order: 4; }
	.pcs-item__meta     { order: 5; }
	.pcs-item__price    { order: 6; }
	.pcs-item__remove   { order: 7; }

	.pcs-item__media {
		grid-column: 1;
		grid-row: span 2;
		align-self: stretch;
		height: auto;
		min-height: 0;
	}

	.pcs-item__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.pcs-item__eyebrow,
	.pcs-item__duration { margin: 0; }

	/**
	 * O margin de 5px do título não vinha do nosso plugin: é uma regra do
	 * CartFlows para h3 dentro do formulário, em checkout-template 1712. O
	 * seletor dele soma duas classes mais um elemento, então ganhava do
	 * nosso, e o margin: 0 que eu tinha escrito aqui nunca chegou a valer.
	 *
	 * O body na frente coloca o nosso acima na conta de especificidade. Os
	 * 5px continuam, mas agora porque nós decidimos, não por sobra de regra
	 * de terceiro.
	 */
	body .pcs h3.pcs-item__title { margin: 5px 0; }

	/**
	 * Bloco 2. Faixa cheia, agora que não divide espaço com a foto.
	 *
	 * Os 10px em cima e embaixo valem só aqui. No desktop o respiro segue
	 * nos 30px de origem: na 0.5.46 eu troquei a regra global por engano e
	 * encolhi o desktop junto.
	 */
	.pcs .pcs-item__meta {
		grid-column: 1 / -1;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/**
	 * Com a faixa inteira disponível, rótulo e valor voltam a caber lado a
	 * lado: "Date: Wed, Aug 5" numa linha, "Time: ..." na outra. Antes eram
	 * empilhados porque a coluna do texto era estreita demais.
	 */
	.pcs .pcs-item__meta dl.variation {
		grid-template-columns: auto minmax(0, 1fr);
	}

	/**
	 * A regra antiga de ≤600px não só empilhava a trilha, ela também jogava
	 * dt e dd na coluna 1. Devolver só as colunas não bastava: com os dois
	 * na mesma coluna, cada um continuava ocupando uma linha, e o bloco saía
	 * com quatro linhas em vez de duas.
	 */
	.pcs .pcs-item__meta dl.variation dt { grid-column: 1; }

	.pcs .pcs-item__meta dl.variation dd {
		grid-column: 2;
		margin-bottom: 0;
	}

	/* Bloco 3, só o preço. A lixeira subiu para o canto. */
	.pcs-item__price {
		grid-column: 1;
		justify-self: start;
		align-self: center;
	}

	/**
	 * Lixeira no alto à direita, igual ao desktop.
	 *
	 * Fora do fluxo ela não ocupa mais célula na grade, então grid-column,
	 * justify-self e align-self voltam ao automático. Sem isso a caixa de
	 * referência dela passaria a ser a área da coluna 2 em vez da caixa do
	 * card, e o right: 0 mediria a partir do lugar errado.
	 *
	 * O top sai do --pcs-item-pad, a mesma variável que o desktop usa para
	 * acompanhar o respiro do separador entre itens.
	 */
	.pcs-item__remove {
		position: absolute;
		grid-column: auto;
		justify-self: auto;
		align-self: auto;
		top: var(--pcs-item-pad, 0px);
		right: 0;
	}

	/* A categoria agora atravessa o card, então reserva espaço para não
	   passar por baixo do botão. */
	.pcs-item__eyebrow { padding-right: 36px; }

	/* Lixeira menor só no mobile. No desktop continua em 26px. */
	.pcs .pcs-item__remove .pcs-icon--trash {
		width: 22px;
		height: 22px;
	}

	/* Tipografia. */
	.pcs .pcs-items .pcs-item .pcs-item__body h3.pcs-item__title {
		font-size: 18px !important;
	}

	.pcs .pcs-item__duration { font-size: 15px; }

	.pcs .pcs-item__meta dl.variation dt,
	.pcs .pcs-item__meta dl.variation dd,
	.pcs .pcs-item__meta dl.variation dd p {
		font-size: 15px;
	}

	/**
	 * Botões mais baixos no mobile.
	 *
	 * Só a altura. O tamanho da fonte fica na regra global, porque o seletor
	 * dela inclui .pcs-actions a.pcs-btn e ganha de qualquer coisa que eu
	 * escrevesse aqui. O font-size que eu tinha posto na 0.5.48 nunca chegou
	 * a valer, e o do bloco de 600px também não vale, pelo mesmo motivo.
	 */
	.pcs .pcs-btn { min-height: 48px; }

}

/* --------------------------------------------------------------------------
   0.5.50, abas com fade e pagamentos empilhados

   1. FADE NAS ABAS

   Abaixo de 767px a fileira de abas rola na horizontal, e a aba que fica
   meio para fora aparece cortada em corte reto, que se lê como defeito.

   A máscara resolve com o próprio gradiente: a borda vira transparente e o
   corte deixa de existir. Ela é aplicada na caixa visível do rolador, não no
   conteúdo rolado, então o desbotado fica parado nas bordas enquanto as abas
   passam por baixo.

   Qual borda desbota depende da etapa, e vem do data-current que o JS já
   escreve na raiz. Primeira etapa desbota só à direita, porque não há nada à
   esquerda para revelar. Última só à esquerda, pelo motivo espelhado. As do
   meio desbotam dos dois lados.

   2. PAGAMENTOS EMPILHADOS

   A fileira era uma linha só: pílula do cartão à esquerda e carteiras
   dividindo o resto. Em tela estreita isso espreme todo mundo.

   Aqui vira coluna, cada meio de pagamento ocupando a linha inteira, e o
   cartão vai para o fim pela ordem, sem mexer no HTML.

   Não encosto em altura. O min-height das carteiras é o que mantém o iframe
   do Stripe de pé, e aquilo custou caro para achar.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.pcs__tabs {
		--pcs-fade-start: 0px;
		--pcs-fade-end: 28px;

		/**
		 * Linha de base presa à caixa visível.
		 *
		 * O ::after que desenhava essa linha é absoluto, e elemento absoluto
		 * dentro de container de rolagem rola junto com o conteúdo, com a
		 * largura resolvida para a área visível. Rolando para a direita ele
		 * andava junto e faltava linha no fim da fileira, que é a falha que
		 * aparecia na etapa 4, onde a rolagem chega ao máximo.
		 *
		 * Como fundo, com background-attachment padrão, a linha se mede pela
		 * caixa do elemento e não acompanha a rolagem. O traço teal da aba
		 * ativa continua sendo o ::before e segue rolando, que é o certo:
		 * ele precisa acompanhar a aba.
		 */
		background-image: linear-gradient(var(--pcs-line-soft), var(--pcs-line-soft));
		background-repeat: no-repeat;
		background-size: 100% var(--pcs-rail);
		background-position: left bottom;

		-webkit-mask-image: linear-gradient(to right,
			transparent 0,
			#000 var(--pcs-fade-start),
			#000 calc(100% - var(--pcs-fade-end)),
			transparent 100%);
		mask-image: linear-gradient(to right,
			transparent 0,
			#000 var(--pcs-fade-start),
			#000 calc(100% - var(--pcs-fade-end)),
			transparent 100%);
	}

	.pcs__tabs::after { display: none; }

	.pcs[data-current="billing"] .pcs__tabs,
	.pcs[data-current="payment"] .pcs__tabs {
		--pcs-fade-start: 28px;
		--pcs-fade-end: 28px;
	}

	.pcs[data-current="confirmation"] .pcs__tabs {
		--pcs-fade-start: 28px;
		--pcs-fade-end: 0px;
	}

}

/* --------------------------------------------------------------------------
   0.5.52, tipografia e espaços do mobile

   Tudo que veio das revisões de tela pequena mora aqui, e só aqui. Das
   versões 0.5.49 a 0.5.51 eu tinha escrito estes valores nas regras globais,
   e o desktop encolheu junto. Os valores originais voltaram para o lugar
   deles; estas cópias repetem o mesmo seletor, então ganham por virem
   depois, sem precisar inventar especificidade nem !important novo.

   Os !important que aparecem abaixo não são novos: são os mesmos que as
   regras originais já carregavam, e sem eles a cópia perderia para o
   original.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* Abas das etapas. */
	.pcs .pcs__tab { font-size: 15px; }

	/* Botões Next e voltar. */
	.pcs .pcs-btn,
	.pcs .pcs-actions a.pcs-btn,
	.pcs .pcs-actions button.pcs-btn { font-size: 17px !important; }

	/* Títulos como Order summary, Billing details, Review your purchase. */
	.pcs .pcs-card__title,
	.pcs .pcs-summary__title,
	.pcs .pcs-review__heading,
	.pcs .pcs-review__title,
	.pcs .pcs-note__title { font-size: 20px !important; }

	/* Subtítulo do card, o "Fill in the following information". */
	.pcs-card__sub {
		margin: 11px 0 0;
		font-size: 14px;
	}

	/**
	 * Campos da etapa 2.
	 *
	 * O seletor abaixo é cópia literal do que define 16px lá em cima. Minha
	 * versão anterior usava input[type="text"] onde o original usa
	 * input.input-text, uma classe a menos, e perdia por especificidade. Os
	 * selects e o select2 batiam e já vinham em 15px; só os campos de texto
	 * ficavam para trás, que foi a diferença visível na tela.
	 *
	 * Copiar o seletor inteiro é chato de ler mas é o que garante empate na
	 * conta de especificidade, deixando a posição no arquivo decidir.
	 */
	.pcs.pcs .pcs-grid .form-row input.input-text,
	.pcs.pcs .pcs-grid .form-row input[type="text"],
	.pcs.pcs .pcs-grid .form-row input[type="tel"],
	.pcs.pcs .pcs-grid .form-row input[type="email"],
	.pcs.pcs .pcs-grid .form-row input[type="number"],
	.pcs.pcs .pcs-grid .form-row select,
	.pcs.pcs .pcs-grid .form-row textarea,
	.pcs.pcs .pcs-grid .select2-container .select2-selection__rendered,
	.pcs.pcs .pcs-grid .select2-container .select2-selection__placeholder { font-size: 15px !important; }

	.pcs.pcs .pcs-grid .form-row input::placeholder,
	.pcs.pcs .pcs-grid .form-row textarea::placeholder { font-size: 15px !important; }

	/* Total do resumo. */
	.pcs-summary__total strong { font-size: 19px; }

	/* Botão de editar da etapa 4. */
	.pcs .pcs-edit {
		width: 28px;
		height: 28px;
	}

	.pcs .pcs-icon--edit { width: 28px; height: 28px; }

	/* Texto do aviso Important. */
	.pcs .pcs-card--note .pcs-note__text { font-size: 14px; }

	/* Respiro acima do Review your purchase. */
	.pcs .pcs-review__heading { margin-top: 8px; }

	/* Ícone de troca do Payment method, no mesmo tamanho do de editar. */
	.pcs .pcs-icon--swap { width: 28px; height: 28px; }

	/* Nome do meio de pagamento. */
	.pcs .pcs-method { font-size: 14px; }

	/**
	 * Cartão: só os quatro últimos dígitos, encostados à direita.
	 *
	 * Os três primeiros grupos ficam no próprio trecho, então some com um
	 * display: none. Continuam no HTML, o que mantém a máscara inteira para
	 * leitor de tela.
	 *
	 * A regra de 600px mandava embrulhar e alinhar à esquerda, o que jogava
	 * o cartão para a linha de baixo. Com só quatro dígitos sobra espaço na
	 * mesma linha, então volta a ser uma linha só, com a pílula de um lado e
	 * o cartão do outro.
	 */
	.pcs .pcs-review__card-groups { display: none; }

	.pcs .pcs-review__payment {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.pcs .pcs-review__card { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   0.5.57, o que vale do tablet para baixo

   Três coisas que nasceram na revisão do celular e valem igual até 1023px,
   que é onde o layout deixa de ter duas colunas e o resumo desce para baixo
   dos painéis.

   Saíram do bloco de 767px e vieram para cá em vez de serem copiadas. Regra
   repetida em duas faixas é a mesma decisão escrita duas vezes, e uma delas
   é sempre esquecida na próxima mudança.

   O fade das abas continua em 767px de propósito: acima disso a fileira volta
   a ser grade de quatro colunas iguais, não rola, e não tem borda cortada
   para disfarçar.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	/**
	 * Rótulo dos botões centralizado de verdade.
	 *
	 * O ícone e o gap de 10px participavam da centralização, então o grupo
	 * ficava centrado e o texto saía uns 15px para o lado: à direita quando a
	 * seta vem antes, à esquerda quando vem depois. Não era defeito de uma
	 * regra, era o efeito de centralizar ícone e rótulo como um bloco só.
	 *
	 * Tirando o ícone do fluxo sobra só o rótulo para centralizar, e os dois
	 * botões alinham o texto no mesmo eixo.
	 */
	.pcs .pcs-actions .pcs-btn { position: relative; }

	.pcs .pcs-actions .pcs-btn__icon {
		position: absolute;
		right: 20px;
	}

	.pcs .pcs-actions .pcs-btn__icon--lead {
		right: auto;
		left: 20px;
	}

	/* Meios de pagamento em coluna, cada um na sua linha. */
	.pcs .pcs-methods {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	/* Carteiras primeiro, cartão por último. */
	.pcs .pcs-methods__wallets { order: 1; width: 100%; }
	.pcs .pcs-method--gateway  { order: 2; width: 100%; }

	.pcs .pcs-methods__wallets #wc-stripe-express-checkout-element {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	/* Cada carteira ocupa a linha inteira. O min-width de 150px servia para
	   elas não se espremerem lado a lado, e em coluna ele só atrapalha. */
	.pcs .pcs-methods__wallets > div,
	.pcs .pcs-methods__wallets #wc-stripe-express-checkout-element > div {
		min-width: 0;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   0.5.58, botão desabilitado

   Estado, não largura de tela: vale no desktop e no celular.
   -------------------------------------------------------------------------- */

.pcs .pcs-btn[disabled],
.pcs .pcs-btn[disabled]:hover,
.pcs .pcs-btn[disabled]:focus,
.pcs .pcs-btn[disabled]:active {
	background: var(--pcs-line);
	border-color: var(--pcs-line);
	color: var(--pcs-muted);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   0.5.74, reset do tema neutralizado sem grudar o hover

   O template da página passou a ser o padrão do Elementor, e com ele entrou
   um reset que pinta todo button de #c36 no hover e no focus.

   Na 0.5.71 eu dei ao :focus a mesma aparência do :hover. Isso apagou o
   vermelho mas criou outro defeito: depois de clicar, o foco fica no botão, e
   ele continuava parecendo com o mouse em cima ao trocar de etapa.

   A separação certa são dois grupos.

   O :focus devolve a aparência NORMAL do botão. Ele existe só para anular o
   reset, não para comunicar nada.

   O :hover e o :focus-visible carregam o realce. O :focus-visible responde a
   foco por teclado e não a clique de mouse, que é exatamente a distinção que
   faltava.
   -------------------------------------------------------------------------- */

/* Grupo 1: :focus volta ao normal. */

.pcs .pcs__tab:focus { background: none; color: var(--pcs-muted); }
.pcs .pcs__tab[aria-selected="true"]:focus { background: none; color: var(--pcs-teal); }

.pcs .pcs-btn--primary:focus { background: var(--pcs-teal); color: #fff; }
.pcs .pcs-btn--ghost:focus { background: #fff; color: var(--pcs-ink); border-color: var(--pcs-line); }
.pcs .pcs-btn[disabled]:focus { background: var(--pcs-line); color: var(--pcs-muted); }

.pcs .pcs-item__remove:focus { background: none; color: var(--pcs-danger); }
.pcs .pcs-edit:focus { background: none !important; color: var(--pcs-ink); }

.pcs .pcs-method:focus { background: var(--pcs-surface); color: var(--pcs-ink); }
.pcs .pcs-method[aria-checked="true"]:focus { background: var(--pcs-teal); color: #fff; }

.pcs .pcs-promo__apply:focus { background: var(--pcs-teal); color: #fff; }

/* Grupo 2: realce no hover e no foco por teclado. */

/**
 * As abas não têm realce próprio: entram aqui só para o reset do tema não
 * pintá-las. Ficaram de fora na 0.5.74 e o vermelho voltou no hover.
 */
.pcs .pcs__tab:hover,
.pcs .pcs__tab:focus-visible { background: none; color: var(--pcs-muted); }

.pcs .pcs__tab[aria-selected="true"]:hover,
.pcs .pcs__tab[aria-selected="true"]:focus-visible { background: none; color: var(--pcs-teal); }

.pcs .pcs-btn--primary:hover,
.pcs .pcs-btn--primary:focus-visible { background: var(--pcs-teal-dark); color: #fff; }

.pcs .pcs-btn--ghost:hover,
.pcs .pcs-btn--ghost:focus-visible { background: #fff; border-color: var(--pcs-teal); color: var(--pcs-teal); }

.pcs .pcs-btn[disabled]:hover,
.pcs .pcs-btn[disabled]:focus-visible { background: var(--pcs-line); color: var(--pcs-muted); }

.pcs .pcs-item__remove:hover,
.pcs .pcs-item__remove:focus-visible { background: rgba(255, 69, 64, .08); color: var(--pcs-danger); }

.pcs .pcs-edit:hover,
.pcs .pcs-edit:focus-visible { background: none !important; color: var(--pcs-teal); }

.pcs .pcs-method:hover,
.pcs .pcs-method:focus-visible { background: var(--pcs-surface); color: var(--pcs-ink); border-color: var(--pcs-teal); }

.pcs .pcs-method[aria-checked="true"]:hover,
.pcs .pcs-method[aria-checked="true"]:focus-visible { background: var(--pcs-teal); color: #fff; }

.pcs .pcs-promo__apply:hover,
.pcs .pcs-promo__apply:focus-visible { background: var(--pcs-teal-dark); color: #fff; }

/* --------------------------------------------------------------------------
   0.5.73, erro no card de pagamento

   O .pcs-invalid existente só desenha em campo dentro de .form-row. O card
   de pagamento não é campo, então ganha a marca aqui.
   -------------------------------------------------------------------------- */

.pcs .pcs-card--payment.pcs-invalid {
	border: 1px solid var(--pcs-danger);
	box-shadow: 0 0 0 3px rgba(229, 72, 77, .12);
}

.pcs .pcs-card--payment.pcs-invalid .pcs-error {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   0.5.84, tela de carregamento

   O WooCommerce já cobre a tela com .blockUI.blockOverlay enquanto processa.
   Esta camada é redesenhada em vez de criarmos outra, o que dispensa
   JavaScript: quem decide quando aparecer e sumir continua sendo o Woo.

   REGRA GERAL COM EXCEÇÕES, NÃO O CONTRÁRIO

   Na 0.5.81 eu fiz o oposto: só a camada filha direta de form.checkout
   ganhava a tela de espera. Isso cobria a compra no cartão e deixava de fora
   a compra por carteira, que bloqueia outro alvo. Adivinhar qual alvo é uma
   corrida sem fim, porque cada gateway escolhe o seu.

   Agora qualquer bloqueio dentro do checkout vira tela de espera, e as
   exceções são as duas que o WooCommerce faz com frequência e que ninguém
   quer ver em tela cheia: o painel de pagamento e a tabela do resumo, que
   são bloqueados ao entrar e a cada atualização de totais.

   Se um dia outro bloqueio frequente aparecer, o conserto é acrescentar uma
   linha na lista de exceções, não descobrir de novo quem merece a tela.

   O NOME DO ARQUIVO CARREGA A VERSÃO

   Nas versões 0.5.78 a 0.5.82 o ícone foi trocado três vezes mantendo o nome
   pcs-loader.svg. O CSS referencia por url(), que o navegador cacheia pelo
   endereço, então o desenho antigo continuou aparecendo em todas elas.
   Trocar o desenho daqui para frente significa trocar o nome também.
   -------------------------------------------------------------------------- */

body.pcs-active .blockUI.blockOverlay {
	position: fixed !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	background: rgba(243, 251, 252, .92) !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: wait;
}

/**
 * Centralização por transform, não por margem negativa.
 *
 * Com margem negativa o canto do ícone é posicionado a partir da metade da
 * janela, e metade de uma altura ímpar cai em meio pixel. O navegador
 * arredonda esse meio pixel a cada quadro da rotação, e o desenho parece
 * bambear em vez de girar liso.
 *
 * O translate entra dentro do próprio keyframe porque transform é uma
 * propriedade só: declarar translate fora e rotate na animação faria o
 * segundo apagar o primeiro, e o ícone giraria a partir do canto.
 */
body.pcs-active .blockUI.blockOverlay::before {
	content: "" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: 96px;
	margin: 0;
	background: url(../img/pcs-loader-v3.svg) center / contain no-repeat !important;
	animation: pcs-spin 1.1s linear infinite;
}

/* Exceções: bloqueios internos e frequentes seguem discretos. */
body.pcs-active .woocommerce-checkout-payment > .blockUI.blockOverlay,
body.pcs-active .woocommerce-checkout-review-order-table > .blockUI.blockOverlay,
body.pcs-active .pcs-summary .blockUI.blockOverlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(255, 255, 255, .6) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.pcs-active .woocommerce-checkout-payment > .blockUI.blockOverlay::before,
body.pcs-active .woocommerce-checkout-review-order-table > .blockUI.blockOverlay::before,
body.pcs-active .pcs-summary .blockUI.blockOverlay::before {
	content: none !important;
}

/* A caixa de mensagem do blockUI, quando existe, some junto. */
body.pcs-active .blockUI.blockMsg { display: none !important; }

@keyframes pcs-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/**
 * Quem pediu para o sistema não animar, não vê animação.
 *
 * Sem o giro o ícone ainda comunica espera, porque a camada continua lá.
 */
@media (prefers-reduced-motion: reduce) {
	body.pcs-active .blockUI.blockOverlay::before {
		animation: none;
		transform: translate(-50%, -50%);
	}
}

/* Duas camadas em tela cheia escureceriam o dobro e desfocariam duas vezes. */
body.pcs-active .blockUI.blockOverlay ~ .blockUI.blockOverlay {
	background: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.pcs-active .blockUI.blockOverlay ~ .blockUI.blockOverlay::before { display: none !important; }

/* No celular 96px come metade da largura útil. */
@media (max-width: 767px) {
	body.pcs-active .blockUI.blockOverlay::before {
		width: 72px;
		height: 72px;
	}
}

/* --------------------------------------------------------------------------
   0.5.79, a segunda barra de rolagem

   Diagnóstico no console: html.lenis rola a página, e o body rola mais 23px
   por conta própria, criando duas barras.

   A causa está fora do plugin. A classe lenis no html é a biblioteca de
   rolagem suave do tema, e ela deixa o body com overflow diferente de
   visible. Quando isso acontece, a margem inferior do último elemento para
   de colapsar para fora do body, e esses pixels viram conteúdo transbordando.

   Aqui o body volta a ser transparente à rolagem, e só na página do checkout:
   a classe pcs-active é adicionada pelo próprio plugin e não existe no resto
   do site, então a rolagem suave continua intacta em qualquer outra página.

   Os dois eixos vão juntos porque overflow-y: visible sozinho não vale nada:
   com o outro eixo diferente de visible, a especificação manda o navegador
   tratar este como auto, e a barra voltaria.

   Se um dia a rolagem suave do checkout fizer falta, o certo é resolver na
   origem, no tema, e apagar este bloco.
   -------------------------------------------------------------------------- */

body.pcs-active {
	overflow: visible !important;
}


/* --------------------------------------------------------------------------
   0.5.93, mensagem de campo obrigatório duplicada

   Ao tentar avançar da etapa 2 com o formulário vazio apareciam duas linhas
   por campo: "Phone is required" e "Phone is required.".

   A primeira é do CartFlows. O script do checkout moderno faz a própria
   varredura de campos obrigatórios e pendura um span.wcf-field-required-error
   dentro do .woocommerce-input-wrapper, além de marcar o input com
   .field-required. A segunda é a nossa, o span.pcs-error que o paintErrors()
   anexa à .form-row com a mensagem que voltou da validação no servidor.

   Quem manda no fluxo é a nossa validação: o botão Next step é type="button"
   e não dispara submit, então a varredura do CartFlows aqui é decorativa.
   Fica só a nossa mensagem.

   Por CSS e não por JS de propósito. O CartFlows reinsere esses spans a cada
   varredura, então remover o nó seria disputa de corrida a cada digitação.
   Regra estática vence sempre, sem depender de quem escreveu por último.

   O display: none também tira o texto da árvore de acessibilidade, então o
   leitor de tela anuncia uma vez só — a nossa, que tem role="alert".

   O !important está aqui porque o seletor do CartFlows tem três classes
   (.wcf-embed-checkout-form .woocommerce .wcf-field-required-error) e ganha
   deste em especificidade. Hoje ele não declara display, mas a linha
   sobrevive se algum dia declarar.

   O .field-required no input continua: quem pinta a borda vermelha é o nosso
   .pcs-invalid, e as duas classes convivem sem conflito.
   -------------------------------------------------------------------------- */

.pcs .wcf-field-required-error {
	display: none !important;
}


/* --------------------------------------------------------------------------
   0.5.94, tela de pagar pedido

   Esta é a página que o link "Retry payment" do email de falha abre:
   /checkout/order-pay/<id>/. Não é o checkout. O pedido já existe e a única
   tarefa é pagá-lo, então não há carrinho, cupom, billing nem quatro etapas.

   A raiz do templates/form-pay.php leva a classe pcs, e é de propósito: com
   ela, tudo que já está escopado em .pcs cai de graça aqui — o reset da
   lista de gateways, o rótulo escondido do Stripe, o separador "— OR —", a
   caixa do Payment Element, a tipografia e os cards. Este bloco é só o que
   sobrou.

   A raiz NÃO leva data-pcs. O pcs-checkout.js aborta quando não encontra
   esse atributo, e é o que queremos: o JS de lá é a máquina de quatro
   etapas e não tem o que fazer nesta tela.

   Aqui não existe painel inativo, então também não existe a armadilha da
   caixa colapsada. Os iframes das carteiras nascem visíveis e medem a
   própria altura sozinhos, sem precisar do min-height do checkout.
   -------------------------------------------------------------------------- */

.pcs-pay__head { margin-bottom: var(--pcs-gap); }

/* O template usa pcs-notice--ok quando o pedido já está pago. As variantes
   warn e error já existiam; esta faltava. */
.pcs-notice--ok { background: var(--pcs-teal-soft); color: var(--pcs-ink); }

.pcs-pay__head .pcs-review__heading { margin-bottom: 6px; }

.pcs-pay__intro {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pcs-ink-75);
}

/* Quantidade só aparece acima de 1. Pedido aceita mais de um assento; o
   card da etapa 1 nunca precisou disso porque lá a linha é sempre unitária. */
.pcs-pay .pcs-pay__qty {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--pcs-ink-75);
}

/* --------------------------------------------------------------------------
   O botão de pagar

   No checkout de quatro etapas o #place_order real fica fora da tela e quem
   aparece é o nosso [data-pcs-submit], que o clica. Aqui não há JS nosso,
   então o caminho é o inverso: o botão do núcleo continua sendo o botão, e
   só recebe a aparência do .pcs-btn--primary.

   Por isso a regra .pcs-place-order button#place_order, que o joga para
   -200vw, não pode alcançar esta tela. Ela não alcança: depende da classe
   .pcs-place-order, que só existe no checkout.
   -------------------------------------------------------------------------- */

/* O .pcs-pay__submit era declarado aqui na 0.5.94. Foi para o bloco da
   0.5.95, junto com o reset do #payment, porque as duas coisas dependem
   uma da outra e separadas viravam declaração repetida. */

.pcs-pay button#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--pcs-teal);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter .18s var(--pcs-ease);
}

/* Só o hover e o foco por teclado carregam o realce. O :focus sozinho
   devolve o normal, senão o botão fica destacado depois do clique — foi
   exatamente o que aconteceu na 0.5.74. */
.pcs-pay button#place_order:focus { filter: none; }

.pcs-pay button#place_order:hover,
.pcs-pay button#place_order:focus-visible { filter: brightness(.93); }

.pcs-pay button#place_order[aria-busy="true"],
.pcs-pay button#place_order:disabled {
	opacity: .55;
	cursor: default;
}

.pcs-pay .woocommerce-privacy-policy-text p,
.pcs-pay .woocommerce-terms-and-conditions-wrapper {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pcs-ink-75);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.pcs-pay__intro { font-size: 14px; }

	.pcs-pay button#place_order {
		min-height: 52px;
		font-size: 17px;
	}
}


/* --------------------------------------------------------------------------
   0.5.95, o cinza sobrando na tela de pagar pedido

   Sintoma: dentro do card "Payment information" restava um retângulo cinza
   envolvendo a caixa de cartão e o botão Pay for order.

   A causa é uma diferença de marcação entre as duas telas do WooCommerce,
   e não algo que a gente escreveu.

   No checkout, quem imprime o bloco é woocommerce_checkout_payment(), e ele
   sai como <div id="payment" class="woocommerce-checkout-payment">. Todo o
   nosso reset de 1988 mira essa CLASSE, então lá o cinza nunca apareceu.

   No form-pay.php o núcleo imprime <div id="payment"> e mais nada. Sem a
   classe, o reset não alcança, e a regra do CartFlows que pinta o #payment
   passa a valer.

   Aqui o mesmo reset é refeito mirando o ID, e estendido ao .form-row que
   embrulha o botão — ele fica FORA do .payment_box, então não era coberto
   por nenhuma regra anterior.

   Escopado em .pcs-pay de propósito. O checkout não pode ser afetado: lá o
   #payment é o mesmo elemento, e mexer nele por id atingiria as duas telas.

   O !important é necessário. O seletor do CartFlows é .wcf-embed-checkout-form
   #payment, que empata em especificidade com o nosso, e empate se decide por
   ordem de carregamento — coisa que não controlamos.
   -------------------------------------------------------------------------- */

.pcs-pay #payment,
.pcs-pay #payment > .form-row,
.pcs-pay #payment .wc_payment_method,
.pcs-pay #payment .payment_box,
.pcs-pay #payment fieldset {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* O bico que o CartFlows desenha apontando para a aba escolhida. No checkout
   ele já sai pela regra do .payment_box; aqui vai pelo id, mesma razão. */
.pcs-pay #payment::before,
.pcs-pay #payment::after,
.pcs-pay #payment > .form-row::before,
.pcs-pay #payment > .form-row::after {
	display: none !important;
}

/* O reset acima zera a margem de tudo, inclusive do .form-row do botão.
   Devolve só o respiro que o desenho pede, depois da caixa de cartão. */
.pcs-pay #payment > .form-row.pcs-pay__submit {
	margin-top: 18px !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}