/* ==========================================================================
   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;
}

/* ==========================================================================
   As abas como estao no Figma (frames 3635:4814 e seguintes).

   Estavam como um cartao de largura total com quatro colunas iguais e um
   trilho embaixo. O desenho pede outra coisa: pares compactos, alinhados a
   esquerda, cada um com o numero num quadrado e o rotulo numa pastilha ao
   lado. A etapa atual e a unica com cor.
   ========================================================================== */

.pcs__sub {
	margin: -8px 0 24px;
	color: var(--pcs-muted);
	font-size: 16px;
}

.pcs__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	margin-bottom: 28px;
}

.pcs__tab {
	gap: 0;
	min-height: 0;
	padding: 0;
	background: none;
	overflow: hidden;
	border-radius: 10px;
}

.pcs__tab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 10px 8px;
	border-radius: 10px 0 0 10px;
	background: #eceef4;
	color: #9aa0b8;
	font-size: 14px;
	font-weight: 600;
}

.pcs__tab-label {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 0 10px 10px 0;
	background: #eceef4;
	color: #9aa0b8;
	font-size: 15px;
}

.pcs__tab[aria-selected="true"] .pcs__tab-num {
	background: #3b44b5;
	color: #fff;
}

.pcs__tab[aria-selected="true"] .pcs__tab-label {
	background: #fff;
	color: #12143a;
	font-weight: 600;
}

/* Etapa ja concluida: da para voltar, e a cor precisa dizer isso. */
.pcs__tab.is-done .pcs__tab-num { background: #d7dbe8; color: #3b44b5; }
.pcs__tab.is-done .pcs__tab-label { background: #f5f6fa; color: #12143a; }

/* O trilho era a marca da etapa atual no desenho antigo. Agora a cor do par
   diz isso, e o trilho so somaria ruido. */
.pcs__tab-rail { display: none; }

/* --------------------------------------------------- imposto no resumo */

/* A linha do imposto e a unica destacada do resumo: e a que muda quando a
   pessoa troca de pais, e a que ela procura. */
.pcs-summary__row--imposto {
	background: #eef0fb;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 -14px;
}

.pcs-summary__nota {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--pcs-muted);
	font-size: 13.5px;
	line-height: 1.45;
}

.pcs-summary__nota-icone { flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 700px) {
	.pcs__tab-label { padding: 10px 12px; font-size: 14px; }
}

/* ==========================================================================
   Os campos de cobranca como estao no Figma (3639:10634).

   O campo do desenho e UMA LINHA de 35: o texto ("Full Name *") fica SOBRE um
   traco de 1px, e nao ha rotulo separado acima dele.

   Uma versao anterior deste arquivo trouxe o rotulo de volta, em 13px cinza,
   com o argumento de que placeholder some ao digitar e a pessoa perde a
   referencia. O argumento e bom, mas nao e o que o desenho pede — e a duvida
   que ele resolve tem outra resposta neste mesmo checkout: o passo 4 mostra os
   oito campos com rotulo E valor, lado a lado, antes de pagar.

   O <label> continua no HTML, fora da tela, porque leitor de tela precisa dele.
   ========================================================================== */

.pcs.pcs .pcs-grid .form-row > label,
.pcs.pcs .pcs-grid .form-row > label.required_field {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.pcs .pcs-grid .form-row abbr.required,
.pcs .pcs-grid .form-row .required { color: #e07a5f; text-decoration: none; border: 0; }

/* Linha, e nao caixa. */
.pcs .pcs-grid .form-row :is(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, .select2-selection) {
	min-height: 40px;
	border: 0 !important;
	border-bottom: 1px solid #d8dbe6 !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding-left: 0 !important;
	padding-right: 24px !important;
	box-shadow: none !important;
}

.pcs .pcs-grid .form-row :is(input, select):focus {
	border-bottom-color: #3b44b5 !important;
	box-shadow: none !important;
}

/* Com rotulo visivel, o icone a esquerda vira ruido: ele repetia em desenho o
   que a palavra ja diz. */
.pcs .pcs-grid .form-row.pcs-field--icon::before { display: none; }

/* `.pcs.pcs.pcs` de proposito: mais adiante neste mesmo arquivo ha uma regra
   `.pcs.pcs …` empurrando o texto 52px para a direita, para caber o icone. O
   icone saiu; o recuo tem de sair junto, e para isso e preciso ganhar dela. */
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon input.input-text,
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="text"],
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="tel"],
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon input[type="email"],
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon select,
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon .select2-selection__rendered,
.pcs.pcs.pcs .pcs-grid .form-row.pcs-field--icon .select2-container .select2-selection--single {
	padding-left: 0 !important;
	padding-right: 24px !important;
}

/* A seta do select, agora que nao ha caixa para segura-la. */
.pcs .pcs-grid .form-row select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a90a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 2px center !important;
}

/* ==========================================================================
   PIXEL PERFECT — Checkout 01..04 (Figma 3635:4814 e seguintes)

   Medido item a item contra o desenho, e nao ajustado a olho. Cada numero
   aqui saiu do `absoluteBoundingBox` do no correspondente.
   ========================================================================== */

/* -- a caixa da pagina: 152 de cada lado em 1440, ou seja, 1136 de conteudo */
.pcs.pcs {
	max-width: 1136px;
	margin-left: auto;
	margin-right: auto;
}

/* -- titulo e subtitulo */
.pcs-page-title,
.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title {
	color: #000 !important;
	font-size: 54px !important;
	font-weight: 600 !important;
	line-height: 59px !important;
}

.pcs__sub {
	margin: 12px 0 32px;
	color: #4C4C4C;
	font-size: 18px !important;
	font-weight: 400;
	line-height: 27px;
}

/* -- as etapas: dois chips de 49 de altura, com 7 entre eles e 14 entre as
      etapas. Os dois chips sao ARREDONDADOS DOS QUATRO CANTOS: no desenho sao
      duas pecas separadas, e nao uma pilula partida ao meio. */
.pcs .pcs__tabs { gap: 14px; margin-bottom: 32px; }

.pcs .pcs__tab {
	gap: 7px;
	border-radius: 0;
	overflow: visible;
	padding: 0 !important;
	min-height: 49px;
}

.pcs .pcs__tab-num {
	min-width: 49px;
	width: 49px;
	height: 49px;
	padding: 0;
	border-radius: 10px;
	justify-content: center;
	font-size: 16px;
	font-weight: 600 !important;
}

.pcs .pcs__tab-label {
	height: 49px;
	padding: 0 24px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600 !important;
	line-height: 1;
}

/* Inativa e BRANCA, nao cinza: no desenho o unico chip colorido e o numero da
   etapa atual. O cinza que eu tinha posto fazia as tres seguintes parecerem
   desligadas, quando elas so ainda nao chegaram. */
.pcs__tab-num,
.pcs .pcs__tab-label {
	background: #FFFFFF;
	color: #4C4C4C;
}

.pcs .pcs__tab[aria-selected="true"] .pcs__tab-num { background: #3B44B5; color: #FFFFFF; }
.pcs .pcs__tab[aria-selected="true"] .pcs__tab-label { color: #000000; }
.pcs .pcs__tab.is-done .pcs__tab-num { background: #DDDDDD; color: #4C4C4C; }

/* -- as duas colunas: 671 + 40 + 425 */
.pcs .pcs__layout { gap: 40px; }
.pcs .pcs__panels { flex: 1 1 671px; min-width: 0; }
.pcs-summary { flex: 0 0 425px; width: 425px; }

/* -- os cartoes */
.pcs .pcs-card {
	border-radius: 20px;
	padding: 24px;
}

.pcs .pcs-summary {
	border-radius: 20px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pcs .pcs-summary__title {
	margin: 0;
	font-size: 24px;
	font-weight: 600 !important;
	line-height: 31px;
	color: #000;
}

/* -- o campo do cupom: caixa cinza de 52, raio 12. Era uma pilula de 63. */
.pcs .pcs-promo {
	min-height: 52px !important;
	height: 52px;
	padding: 0 16px !important;
	border-radius: 12px !important;
	background: #F5F5F7;
	border: 0;
	gap: 10px;
	align-items: center;
}

/* O input e o botao dentro dele nao podem esticar a caixa: a altura e do
   campo, e nao da soma do que ha dentro. */
.pcs .pcs-promo .pcs-promo__input,
.pcs .pcs-promo .pcs-promo__apply {
	min-height: 0 !important;
	height: auto !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.pcs .pcs-summary__lines { margin: 0; }

.pcs .pcs-summary__row { gap: 16px; }

/* -- os botoes: pilula de verdade, 48 e 46 de altura, texto 18/600, e do
      TAMANHO DO CONTEUDO. Estavam esticados a 334 por `flex: 1`. */
/* GRID de duas colunas iguais era o que estava aqui — dai os dois botoes com
   325 cada. No desenho eles tem 240 e 164: sao do tamanho do texto, lado a
   lado, e a linha sobra a direita. */
.pcs .pcs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: flex-start;
	grid-template-columns: none;
}

@media (max-width: 600px) {
	/* No telefone eles ocupam a linha, e o primario vem primeiro. */
	.pcs .pcs-actions { flex-direction: column-reverse; }

	.pcs .pcs-actions a.pcs-btn,
	.pcs .pcs-actions button.pcs-btn,
	.pcs .pcs-actions .pcs-btn { width: 100% !important; }
}

/* Tres seletores porque a regra que perde e
   `.pcs .pcs-actions button.pcs-btn { font-size: 20px !important }` — um
   !important com peso de tag. Nao adianta repetir !important: e preciso pesar
   mais. */
.pcs .pcs-actions a.pcs-btn,
.pcs .pcs-actions button.pcs-btn,
.pcs .pcs-actions .pcs-btn {
	flex: 0 0 auto !important;
	width: auto !important;
	min-height: 0 !important;
	padding: 12px 28px !important;
	gap: 12px;
	border-radius: 500px !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 22px !important;
}

.pcs .pcs-actions a.pcs-btn--ghost,
.pcs .pcs-actions button.pcs-btn--ghost,
.pcs .pcs-actions .pcs-btn--ghost {
	height: 48px !important;
	background: #FFFFFF;
	border: 1px solid #DDDDDD;
	color: #000000;
}

.pcs .pcs-actions a.pcs-btn--primary,
.pcs .pcs-actions button.pcs-btn--primary,
.pcs .pcs-actions .pcs-btn--primary {
	height: 46px !important;
	background: #3B44B5;
	border: 0;
	color: #FFFFFF;
}

.pcs .pcs-btn__icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Tipografia e cores, uma linha por no do desenho.

   Tudo `.pcs .…` porque as regras antigas usam duas classes; onde havia
   !important, aqui vai com peso de tag tambem. Os numeros sao os do Figma
   (3639:10634), nao arredondamentos.
   -------------------------------------------------------------------------- */

/* etapas: 16/600/22, e o numero da ativa em 700 */
.pcs .pcs__tab-num,
.pcs .pcs__tab-label { font-size: 16px; font-weight: 600; line-height: 22px; color: #000000; }
.pcs .pcs__tab[aria-selected="true"] .pcs__tab-num { font-weight: 700; }

/* titulos e subtitulos de cartao */
.pcs .pcs-card__title,
.pcs .pcs-summary__title,
.pcs .pcs-review__heading {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 31px !important;
	color: #000000 !important;
	margin: 0 !important;
}

.pcs .pcs-card__sub {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: #4C4C4C !important;
	margin: 8px 0 0 !important;
}

/* o cartao do formulario tem 40 de folga, e nao 24 */
.pcs .pcs__panel[data-pcs-panel="billing"] .pcs-card { padding: 40px; }

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

/* resumo: cupom, linhas, total e nota */
.pcs .pcs-promo__input::placeholder { color: #8C8C94; font-size: 16px; font-weight: 400; }
.pcs .pcs-promo__input { font-size: 16px; font-weight: 400; color: #000; }

.pcs .pcs-promo__apply {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #3B44B5 !important;
	background: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}

.pcs .pcs-summary__row {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
}

/* a linha do imposto: caixa de 47 com 16/12 de folga e raio 10 */
.pcs .pcs-summary__row--imposto {
	min-height: 47px;
	margin: 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #EEF0FB;
	font-size: 15px;
	line-height: 22px;
	align-items: center;
}

.pcs .pcs-summary__total { font-size: 20px; font-weight: 600; line-height: 30px; color: #000; }
.pcs .pcs-summary__total strong { font-size: 24px; font-weight: 600; line-height: 36px; }

.pcs .pcs-summary__nota { font-size: 14px; font-weight: 400; line-height: 21px; color: #4C4C4C; }

/* os separadores do resumo sao linhas de 1px #DDDDDD */
.pcs .pcs-summary__lines { display: flex; flex-direction: column; gap: 20px; }

/* No desenho os dois traços ficam DEPOIS do cupom e DEPOIS do imposto — não
   antes do imposto. Estava aqui, e empurrava a caixa azul de 47 para 55. */
.pcs .pcs-summary__lines > .pcs-summary__row:first-child {
	border-top: 1px solid #DDDDDD;
	padding-top: 20px;
}

.pcs .pcs-summary__total { border-top: 1px solid #DDDDDD; padding-top: 20px; margin-top: 0; }

/* "Review your entire purchase" e um titulo de coluna, nao de cartao */
.pcs .pcs-review__heading { margin-bottom: 20px !important; }

/* ==========================================================================
   PIXEL PERFECT — o card do item, o formulário, o pagamento e a revisão

   Tudo abaixo sai dos nós 3639:12155 (passo 01), 3639:12309 (02),
   3639:12441 (03) e 3639:12683 (04), lidos pela API e anotados em
   scratchpad/ck-main.json ANTES de qualquer linha de CSS. Os números não são
   arredondamentos: 22/600/29 é 22/600/29.
   ========================================================================== */

/* ------------------------------------------------- 01 · o card do curso ---

   No desenho CADA item é um cartão branco. Aqui a lista inteira estava dentro
   de um cartão só, então dois cursos apareciam grudados, sem a folga de 20
   que o desenho põe entre eles. */

.pcs .pcs-card--items {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.pcs .pcs-items {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcs .pcs-item {
	display: flex;
	gap: 20px;
	align-items: stretch;
	margin: 0;
	padding: 24px;
	border: 0;
	border-radius: 20px;
	background: #FFFFFF;
}

.pcs .pcs-item__media {
	flex: 0 0 180px;
	width: 180px;
	margin: 0;
}

/* O tema traz `.elementor img { border-radius: 0 }` e ganha da regra
   genérica — foi assim que a foto do curso saiu de canto vivo na single. */
.pcs .pcs-item__media img {
	display: block;
	width: 180px;
	height: 218px;
	object-fit: cover;
	border-radius: 12px !important;
}

.pcs .pcs-item__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.pcs .pcs-item__topo {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.pcs .pcs-item__texto {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pcs .pcs-item__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: #3B44B5;
}

.pcs .pcs-item__title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 29px;
	color: #000000;
}

.pcs .pcs-item__duration {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #4C4C4C;
}

.pcs .pcs-item__remove {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #F06C6A;
	cursor: pointer;
}

.pcs .pcs-item__remove svg { width: 24px; height: 24px; }

.pcs .pcs-item__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Folga 7/14/7/12: o ícone encosta um pouco mais na borda que o texto. */
.pcs .pcs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px 7px 12px;
	border-radius: 500px;
	background: #F5F5F7;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #000000;
}

.pcs .pcs-badge svg { flex: 0 0 18px; width: 18px; height: 18px; color: #3B44B5; }

.pcs .pcs-item__rodape {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.pcs .pcs-item__estimativa {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
}

.pcs .pcs-item__estimativa svg { flex: 0 0 20px; width: 20px; height: 20px; color: #3B44B5; }

.pcs .pcs-item__price {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 31px;
	color: #000000;
}

/* ---------------------------------------------- 02 · o formulário --------

   O campo do desenho é UMA LINHA: o texto fica sobre um traço de 1px, e não
   dentro de uma caixa. O rótulo do WooCommerce continua no HTML, fora da
   tela, porque leitor de tela precisa dele. */

.pcs .pcs-grid {
	display: flex;
	flex-wrap: wrap;
	row-gap: 30px;
	column-gap: 21px;
}

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

.pcs .pcs-grid > .pcs-col-12 { flex: 0 0 100%; }
.pcs .pcs-grid > .pcs-col-6  { flex: 0 0 calc( ( 100% - 21px ) / 2 ); }

/* A linha do telefone é a única com folga de 20, e não 21: 180 + 20 + 391
   fecha os 591 do cartão. O -1px é o que faz a conta bater. */
.pcs .pcs-grid > .pcs-col-3 { flex: 0 0 180px; margin-right: -1px; }
.pcs .pcs-grid > .pcs-col-9 { flex: 1 1 0; }

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

.pcs .pcs-grid .form-row.pcs-field--icon::before { display: none; }

.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 input.input-text,
.pcs .pcs-grid .form-row input[type="text"],
.pcs .pcs-grid .form-row input[type="tel"],
.pcs .pcs-grid .form-row input[type="email"] {
	width: 100%;
	height: 35px;
	min-height: 0;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid #DDDDDD;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: #000000;
}

.pcs .pcs-grid .form-row input::placeholder { color: #000000; opacity: 1; }

.pcs .pcs-grid .form-row input:focus {
	outline: none;
	border-bottom-color: #3B44B5;
	box-shadow: none;
}

/* Os três selects passam pelo selectWoo, então quem se vê é o .select2. */
.pcs .pcs-grid .form-row .select2-container--default .select2-selection--single {
	height: 35px;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid #DDDDDD;
	border-radius: 0;
	background: transparent;
}

.pcs .pcs-grid .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: #000000;
}

.pcs .pcs-grid .form-row .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #000000;
}

/* A seta do desenho é a CaretDown de 18px em #4C4C4C, e não o triângulo
   que o select2 desenha sozinho. */
.pcs .pcs-grid .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 4px;
	right: 0;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	background-image: url( "../icons/caret-down.svg" );
}

.pcs .pcs-grid .form-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

/* ------------------------------------------------- 03 · o pagamento ------ */

.pcs .pcs__panel[data-pcs-panel="payment"] .pcs-card { padding: 40px; gap: 24px; }
.pcs .pcs__panel[data-pcs-panel="payment"] .pcs-card--payment { gap: 28px; }

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

.pcs .pcs-method {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 14px 18px;
	border: 1px solid #DDDDDD;
	border-radius: 500px;
	background: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: #000000;
	cursor: pointer;
}

.pcs .pcs-method[aria-checked="true"] {
	border-color: #3B44B5;
	background: #3B44B5;
	color: #FFFFFF;
}

/* A frase fecha o cartão, com o cadeado exportado do desenho. */
.pcs .pcs-secure {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: #4C4C4C;
}

.pcs .pcs-secure svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }

/* ------------------------------------------------- 04 · a revisão -------- */

.pcs .pcs__panel[data-pcs-panel="confirmation"] .pcs-card--review {
	padding: 24px;
	border-radius: 20px;
	gap: 24px;
}

.pcs .pcs-review__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
}

.pcs .pcs-review__title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 31px;
	color: #000000;
}

/* O botão de editar é um círculo de 36 com o lápis do desenho dentro. */
.pcs .pcs-edit {
	flex: 0 0 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 500px;
	background: #F5F5F7;
	color: #3B44B5;
	cursor: pointer;
}

.pcs .pcs-edit svg { width: 18px; height: 18px; }

/* Oito campos, duas colunas, rótulo acima do valor. */
.pcs .pcs-review__fields {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	column-gap: 21px;
}

.pcs .pcs-review__field {
	flex: 0 0 calc( ( 100% - 21px ) / 2 );
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
}

.pcs .pcs-review__rotulo {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #8C8C94;
}

.pcs .pcs-review__valor {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
	overflow-wrap: anywhere;
}

.pcs .pcs-review__payment { display: flex; align-items: center; gap: 16px; }

.pcs .pcs-review__card {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
}

.pcs .pcs-review__card svg { width: 22px; height: 22px; color: #4C4C4C; }

.pcs .pcs-card--note { gap: 10px; }

.pcs .pcs-note__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: #000000;
}

.pcs .pcs-note__text {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #4C4C4C;
}

/* O aceite dos termos é um cartão como os outros, e não um resto de
   formulário do WooCommerce solto no fim da coluna. */
.pcs .pcs-place-order {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border-radius: 20px;
	background: #FFFFFF;
}

.pcs .pcs-place-order .woocommerce-terms-and-conditions-wrapper { margin: 0; width: 100%; }

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

.pcs .pcs-place-order .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
}

.pcs .pcs-place-order input[type="checkbox"] {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid #DDDDDD;
	border-radius: 6px;
	accent-color: #3B44B5;
}

/* ==========================================================================
   PIXEL PERFECT — segunda passada, o que a medição pegou

   Cada regra abaixo existe porque a tela foi MEDIDA depois da primeira
   passada e não bateu com o Figma. O que aparece aqui com !important é onde
   uma regra antiga já usava !important: não adianta repetir, é preciso pesar
   mais ou empatar e vir depois.
   ========================================================================== */

/* -- a coluna da esquerda tinha 666, e não 671: o <aside> ficava com 430
      porque a grade reservava 430 para ele, e o resumo de 425 nadava dentro. */
.pcs .pcs__layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	grid-template-columns: none;
}

.pcs .pcs__panels { flex: 1 1 671px; min-width: 0; }
.pcs .pcs__aside  { flex: 0 0 425px; width: 425px; }

@media ( max-width: 900px ) {
	.pcs .pcs__layout { flex-direction: column; }
	.pcs .pcs__panels,
	.pcs .pcs__aside { flex: 1 1 100%; width: 100%; }
}

/* -- o título da página começa a 152, como todo o resto. Ele mora no
      container do tema (1140 a partir de 150), não dentro do .pcs. */
.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title,
.pcs-page-title {
	max-width: 1136px;
	margin-left: auto;
	margin-right: auto;
}

/* -- o nome do curso: 22/600/29 em preto. Estava 22/500 em #12143a. */
.pcs .pcs-items .pcs-item .pcs-item__body h3.pcs-item__title {
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 29px !important;
	color: #000000 !important;
	max-width: 100%;
}

/* -- o cartão do pagamento tem 40 de folga, como o do formulário. */
.pcs .pcs-card--payment { padding: 40px !important; }

/* -- títulos de cartão na revisão: 24/600/31. Estavam 24/500. */
.pcs .pcs-review__title,
.pcs .pcs-card--note .pcs-note__title {
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 31px !important;
	color: #000000 !important;
}

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

.pcs .pcs-card--note .pcs-note__text {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: #4C4C4C !important;
	margin: 0 !important;
}

/* -- o campo da revisão era uma pílula com ícone; agora é rótulo sobre valor.

   `align-items: center` sobrou da pílula e centralizava rótulo e valor dentro
   da coluna: o rótulo saía a 296 e o valor a 278, cada um num lugar. */
.pcs .pcs-review__field {
	align-items: flex-start;
	border-radius: 0;
	font-size: 16px;
	line-height: 24px;
}

.pcs .pcs-review__field span {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/* -- o aceite dos termos é um cartão de 24 e raio 20, sem borda. */
.pcs .pcs-place-order {
	padding: 24px !important;
	border: 0 !important;
	border-radius: 20px !important;
	background: #FFFFFF !important;
}

/* ==========================================================================
   PIXEL PERFECT — terceira passada: o campo e o botão de editar

   As duas regras que faltavam perdiam para `!important` antigos, e não por
   ordem. `.pcs.pcs.pcs` porque há um `.pcs.pcs …` mais acima com !important
   no mesmo par de propriedades: repetir !important empata, não ganha.
   ========================================================================== */

/* -- o campo tem 35 de altura: 26 de texto, 8 de folga e o traço de 1px.
      Estava com 49, porque sobrou a caixa de 13/16 do desenho anterior. */
.pcs.pcs.pcs .pcs-grid .form-row input.input-text,
.pcs.pcs.pcs .pcs-grid .form-row input[type="text"],
.pcs.pcs.pcs .pcs-grid .form-row input[type="tel"],
.pcs.pcs.pcs .pcs-grid .form-row input[type="email"],
.pcs.pcs.pcs .pcs-grid .form-row input[type="number"],
.pcs.pcs.pcs .pcs-grid .form-row select {
	height: 35px !important;
	min-height: 0 !important;
	padding: 0 24px 8px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #DDDDDD !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	color: #000000 !important;
}

.pcs.pcs.pcs .pcs-grid .form-row input::placeholder {
	font-size: 16px !important;
	line-height: 26px !important;
	color: #000000 !important;
	opacity: 1;
}

.pcs.pcs.pcs .pcs-grid .form-row input:focus {
	border-bottom-color: #3B44B5 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* O mesmo para os três selects, que na tela são o select2. */
.pcs.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection--single {
	height: 35px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #DDDDDD !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

.pcs.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection__rendered,
.pcs.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection__placeholder {
	padding: 0 24px 8px 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	color: #000000 !important;
}

.pcs.pcs.pcs .pcs-grid .select2-container .select2-selection__arrow {
	top: 4px !important;
	height: 18px !important;
}

/* -- o botão de editar: círculo cinza com o lápis azul.
      Perdia para `background: none !important` da versão anterior dele. */
.pcs.pcs .pcs-edit,
.pcs.pcs .pcs-review__head .pcs-edit {
	background: #F5F5F7 !important;
	color: #3B44B5 !important;
	border-radius: 500px !important;
}

.pcs.pcs .pcs-edit:hover { background: #E8E9F5 !important; color: #3B44B5 !important; }

/* -- o select2 desenha o texto dentro do próprio container quando ele é a
      caixa medida; a fonte tinha de ser posta nos dois, senão o país saía
      16/600 em #12143a ao lado de campos 16/400 em preto. */
.pcs.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection--single,
.pcs.pcs.pcs .pcs-grid .form-row .select2-container .select2-selection--single * {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	color: #000000 !important;
}

/* Nada herda a pílula antiga: o campo da revisão é só uma coluna de texto. */
.pcs.pcs .pcs-review__field {
	font-size: 16px;
	font-weight: 400;
	color: #000000;
}

/* ==========================================================================
   As larguras menores

   O desenho só tem o quadro de 1440, então as medidas fixas que ele pede —
   425 do resumo, 180 da foto, 180 do DDI — valem ATÉ onde cabem. Abaixo
   disso elas soltam. Sem isto, o resumo de 425 furava a tela em 402 e a
   página rolava 33px para o lado.
   ========================================================================== */

@media ( max-width: 900px ) {
	.pcs .pcs__aside,
	.pcs .pcs-summary,
	.pcs .pcs__aside .pcs-summary {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100%;
	}
}

@media ( max-width: 767px ) {
	/* Campo do formulário e campo da revisão passam a ocupar a linha. */
	.pcs .pcs-grid > .pcs-col-6,
	.pcs .pcs-grid > .pcs-col-3,
	.pcs .pcs-grid > .pcs-col-9,
	.pcs .pcs-review__field {
		flex: 0 0 100%;
		margin-right: 0;
	}

	/* O DDI ao lado do telefone é o único par que continua fazendo sentido
	   lado a lado: são um campo só partido em dois. */
	.pcs .pcs-grid > .pcs-col-3 { flex: 0 0 110px; }
	.pcs .pcs-grid > .pcs-col-9 { flex: 1 1 0; }

	.pcs .pcs__panel[data-pcs-panel="billing"] .pcs-card,
	.pcs .pcs__panel[data-pcs-panel="payment"] .pcs-card { padding: 24px !important; }
}

@media ( max-width: 600px ) {
	/* A foto vira uma faixa no topo: 180 de largura ao lado de um título
	   deixaria o texto em duas palavras por linha. */
	.pcs .pcs-item { flex-direction: column; }

	.pcs .pcs-item__media { flex: 0 0 auto; width: 100%; }

	.pcs .pcs-item__media img { width: 100%; height: 200px; }

	.pcs .pcs-item__rodape { flex-wrap: wrap; row-gap: 8px; }
}

/* -- o formulario do cartao mora num iframe do Stripe, e CSS nosso nao entra
      la dentro.

   Tentado e MEDIDO: o gateway tem um campo escondido (#wc-stripe-hidden-style-input)
   de onde ele le estilos para mandar ao Elements, mas so o usa fora do
   checkout — no checkout classico ele desenha o cartao com a aparencia
   propria dele. Dar o visual do desenho aquele campo nao mudou nada na tela.

   Quem quiser o campo do cartao com a linha de 1px vai ter de passar um
   `appearance` proprio para o Stripe Elements, o que e mexer no gateway. Fica
   registrado aqui para ninguem tentar de novo pelo CSS.
   -------------------------------------------------------------------------- */

/* -- o traço sob as etapas não existe no desenho.

   Ele era o trilho da versão anterior do stepper: o `.pcs__tab-rail` já foi
   escondido, mas o sulco por baixo dele (`.pcs__tabs::after`) ficou. No Figma
   (3639:12309) o "Stepper" tem só os quatro pares de chips e nada abaixo. */
.pcs .pcs__tabs::after { display: none; }

/* -- o cartão do aceite, com a forma do desenho e o aviso que a lei pede.

   No desenho (3639:12683 › "Review — Terms acceptance") o cartão tem a caixa
   de seleção, a frase do aceite e, ABAIXO dela, uma nota menor em cinza.

   O WooCommerce imprime o aviso de dados pessoais ACIMA da caixa, e o plugin
   do catálogo o mantém visível de propósito — tirar o aviso de tratamento de
   dados da tela onde se paga não é uma decisão de layout. Então ele desce
   para o lugar da nota do desenho e ganha o tamanho dela: a forma é a do
   Figma, e o aviso continua onde tem de estar. */
.pcs.pcs .pcs-place-order { flex-direction: column; gap: 6px; }

/* O aviso e a caixa sao irmaos DENTRO do wrapper do WooCommerce — e ele, e
   nao o cartao, que precisa virar coluna para a ordem valer. */
.pcs.pcs .pcs-place-order .woocommerce-terms-and-conditions-wrapper {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pcs.pcs .pcs-place-order .woocommerce-terms-and-conditions-wrapper > .form-row,
.pcs.pcs .pcs-place-order .woocommerce-terms-and-conditions-wrapper > .validate-required { order: 1; }

.pcs.pcs .pcs-place-order .woocommerce-privacy-policy-text {
	order: 2;
	margin: 0 0 0 38px;
	padding: 0;
	border: 0;
}

.pcs.pcs .pcs-place-order .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 20px;
	color: #8C8C94;
}

/* ==========================================================================
   O fundo da página e a folga acima do título (Figma 3639:10634)

   No desenho, abaixo do cabeçalho começa um bloco "Content" de fundo
   **#F5F5F7** — e é sobre ele que ficam o título, as etapas e os cartões
   brancos. A página estava toda branca: os chips brancos das etapas
   desapareciam no fundo, e a folga acima de "Checkout" era ZERO.

   Os números, do desenho:

     cabeçalho termina em  y=181
     "Checkout" começa em  y=261   ->  80 de folga
     subtítulo em          y=332   ->  12 abaixo do título
     etapas em             y=399   ->  40 abaixo do subtítulo
     ações terminam em     y=1095, e o Content em 1195  ->  100 embaixo
   ========================================================================== */

/* O bloco cinza vai de ponta a ponta, como no desenho: o tema prendia o
   <main> em 1140 centrado, e sobrava uma faixa branca de cada lado. A coluna
   de 1136 desce para os filhos, entao o titulo continua comecando em 152 numa
   tela de 1440 — e em telas estreitas sobram os 24 de folga da borda. */
body.woocommerce-checkout main.site-main {
	max-width: none;
	width: 100%;
	background: #F5F5F7;
	padding-top: 80px;
	padding-bottom: 100px;
	padding-left: 24px;
	padding-right: 24px;
}

body.woocommerce-checkout .page-header,
body.woocommerce-checkout .page-content {
	max-width: 1136px;
	margin-left: auto;
	margin-right: auto;
}

/* O tema dá margem própria ao bloco do título; as folgas do desenho são as
   de cima, e não a soma das duas. Só a margem VERTICAL zera: a horizontal é
   `auto`, e é ela que centra a coluna de 1136 — um `margin: 0` aqui jogava o
   título para a borda de 24. */
body.woocommerce-checkout .page-header {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .page-header h1 {
	margin: 0;
}

.pcs .pcs__sub { margin-top: 12px; }

.pcs .pcs__tabs { margin-top: 40px; }

@media ( max-width: 767px ) {
	body.woocommerce-checkout main.site-main {
		padding-top: 40px;
		padding-bottom: 56px;
	}
}

/* ==========================================================================
   A página de obrigado

   Ela saía com a marcação crua do WooCommerce — tabela com borda de 1px,
   endereço numa caixa com borda, os cinco dados do pedido numa linha separada
   por barras — no fim de um fluxo inteiro desenhado. O CSS do checkout estava
   propositalmente DESLIGADO nesta página; agora ele entra.

   **Não existe frame desta tela no Figma.** O arquivo tem Checkout 01 a 04 e a
   variação de 3D Secure, e para aí. Então nada aqui é inventado: cada valor
   abaixo é o mesmo que os quatro frames já usam — chão #F5F5F7, cartão branco
   de raio 20 com 32 de folga, título 24/600/31, rótulo 14/400 em #8C8C94 sobre
   valor 16/400 em preto, linha de imposto #EEF0FB, total 20/600/30 com o valor
   em 24/600/36, botão pílula 18/600 em #3B44B5.
   ========================================================================== */

/* O chão cinza e a coluna de 1136 valem para as duas telas do checkout. */
body.woocommerce-order-received main.site-main {
	max-width: none;
	width: 100%;
	background: #F5F5F7;
	padding-top: 80px;
	padding-bottom: 100px;
	padding-left: 24px;
	padding-right: 24px;
}

body.woocommerce-order-received .page-header,
body.woocommerce-order-received .page-content {
	max-width: 1136px;
	margin-left: auto;
	margin-right: auto;
}

body.woocommerce-order-received .page-header {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

body.woocommerce-order-received h1.entry-title {
	margin: 0;
	color: #000;
	font-size: 54px;
	font-weight: 600;
	line-height: 59px;
}

.woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 12px;
}

/* "Thank you. Your order has been received." é o subtítulo da página. */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	color: #4C4C4C;
}

.woocommerce-order .woocommerce-notice--success::before { display: none; }

/* -- os cartões */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order .pcs-card--review {
	margin: 0;
	padding: 32px;
	border: 0;
	border-radius: 20px;
	background: #FFFFFF;
}

.woocommerce-order h2,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 600;
	line-height: 31px;
	color: #000000;
}

/* -- os cinco dados, no padrão da revisão do passo 4 */
.woocommerce-order .pcs-review__fields {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	column-gap: 21px;
}

.woocommerce-order .pcs-review__field {
	flex: 0 0 calc( ( 100% - 21px ) / 2 );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.woocommerce-order .pcs-review__rotulo {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #8C8C94;
}

.woocommerce-order .pcs-review__valor {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
	overflow-wrap: anywhere;
}

/* -- a tabela do pedido: sem borda, com as medidas do resumo lateral */
.woocommerce-order table.shop_table,
.woocommerce-order table.order_details {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	padding: 16px 0;
	border: 0;
	border-bottom: 1px solid #DDDDDD;
	background: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000000;
	vertical-align: middle;
}

.woocommerce-order table.shop_table thead th {
	padding-top: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #8C8C94;
	text-transform: none;
}

.woocommerce-order table.shop_table td:last-child,
.woocommerce-order table.shop_table th:last-child { text-align: right; }

.woocommerce-order table.shop_table tbody td a {
	color: #000000;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-order table.shop_table tbody td a:hover { text-decoration: underline; }

.woocommerce-order table.shop_table tfoot th {
	font-weight: 400;
	color: #000000;
}

/* O rótulo do rodapé em 600, o valor em 400 — as quatro linhas iguais.

   Nao dá para destacar SÓ o total: nesta versão do WooCommerce as linhas do
   `tfoot` saem sem classe nenhuma, e a última é "Payment method", não o total.
   Foi o que aconteceu: a forma de pagamento saiu em 24/600/36, do tamanho de
   um preço. O seletor do total fica aqui para o dia em que o núcleo voltar a
   carimbar a classe; hoje ele simplesmente não casa com nada. */
.woocommerce-order table.shop_table tfoot th { font-weight: 600; }

.woocommerce-order table.shop_table tfoot tr:last-child th,
.woocommerce-order table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
	padding-bottom: 0;
}

.woocommerce-order table.shop_table tfoot tr.order-total th,
.woocommerce-order table.shop_table tfoot tr.order-total td {
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
}

/* -- o endereço: texto, e não uma caixa com borda */
/* O tema poe uma caixa com borda em volta do endereco; no desenho endereco e
   texto. `!important` porque a regra do tema tambem tem. */
.woocommerce-order address,
.woocommerce-order .woocommerce-customer-details address {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	font-style: normal;
	color: #000000;
}

.woocommerce-order .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details--email {
	margin: 12px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	color: #4C4C4C;
}

.woocommerce-order .woocommerce-customer-details--phone::before,
.woocommerce-order .woocommerce-customer-details--email::before { display: none; }

/* -- o cartão do "o que acontece agora" */
.woocommerce-order .pcs-card--note { display: flex; flex-direction: column; gap: 10px; }

.woocommerce-order .pcs-note__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: #000000;
}

.woocommerce-order .pcs-note__text {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #4C4C4C;
}

/* -- o botão do recibo, com a pílula do desenho */
body.woocommerce-order-received .pcs-btn,
body.woocommerce-order-received a.pcs-invoice__botao,
body.woocommerce-order-received .woocommerce-order .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: auto;
	min-height: 0;
	height: 46px;
	padding: 12px 28px;
	border: 0;
	border-radius: 500px;
	background: #3B44B5;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
}

body.woocommerce-order-received .pcs-btn--ghost,
body.woocommerce-order-received .woocommerce-order .button.pcs-btn--ghost {
	height: 48px;
	border: 1px solid #DDDDDD;
	background: #FFFFFF;
	color: #000000;
}

@media ( max-width: 767px ) {
	body.woocommerce-order-received main.site-main {
		padding-top: 40px;
		padding-bottom: 56px;
	}

	body.woocommerce-order-received h1.entry-title { font-size: 36px; line-height: 42px; }

	.woocommerce-order .woocommerce-order-details,
	.woocommerce-order .woocommerce-customer-details,
	.woocommerce-order .pcs-card--review { padding: 24px; }

	.woocommerce-order .pcs-review__field { flex: 0 0 100%; }
}

/* ==========================================================================
   Revisão de telefone — checkout

   Números medidos em 402 e 320. O que NÃO está aqui, porque foi verificado e
   era falso alarme: o campo do cartão do Stripe renderiza e aceita digitação
   em 320 (medido 228x228, preenchimento passa — o screenshot pegou o iframe
   antes de carregar), e o cabeçalho não cobre o stepper (ele rola junto, o
   `fullPage` é que desenha a barra fixa no topo da tira).
   ========================================================================== */

/* -- 1. O botão REAL do WooCommerce estava visível, com 28x17.

   Ele é a máquina: o "Finish Purchase" (354x46) só repassa o clique, e o JS
   dos gateways escuta no #place_order. Ele não pode sumir com `display:none`
   — mas também não pode ficar como um alvo de 28x17 no meio da página, que é
   o que estava: um segundo "Place order", pequeno e cinza, logo abaixo do
   botão de verdade.

   `clip` mantém o elemento na árvore, focável e clicável por script. */
.pcs .pcs-place-order .place-order button#place_order,
.pcs .pcs-place-order button#place_order,
.pcs .pcs-place-order button.button.alt {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* -- 2. A caixa de seleção dos termos tinha 18px; o desenho pede 22.

   O rótulo inteiro já é clicável (medido: 49px de altura), então o alvo
   existe — mas a caixa em si é o que a pessoa mira. */
.pcs .pcs-place-order input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}

@media ( max-width: 900px ) {

	/* -- 3. Alvos de toque abaixo de 44px.

	   Onde o desenho fixa um tamanho menor, o DESENHO fica e o alvo cresce
	   por padding: é a área que precisa de 44, não o glifo. Medidos:
	   remover item 24x24, "Apply" do cupom 40x24, editar 36x36. */
	.pcs .pcs-item__remove {
		width: 44px;
		height: 44px;
		margin: -10px -10px 0 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.pcs .pcs-item__remove svg { width: 24px; height: 24px; }

	.pcs .pcs-promo__apply {
		min-height: 44px !important;
		display: inline-flex;
		align-items: center;
		padding: 0 4px !important;
	}

	.pcs.pcs .pcs-edit,
	.pcs.pcs .pcs-review__head .pcs-edit {
		width: 44px !important;
		height: 44px !important;
		flex: 0 0 44px !important;
		margin: -4px -4px 0 0;
	}

	.pcs .pcs-edit svg { width: 20px; height: 20px; }

	/* -- 4. Em uma coluna, a ordem dos campos da revisão ficava ilógica.

	   No desenho eles são PARES lado a lado — (nome, e-mail), (telefone, CEP),
	   (endereço, cidade), (país, região) — e isso está certo em 1440. Ao
	   colapsar para uma coluna, a leitura vira nome, e-mail, telefone, CEP,
	   endereço… ou seja, o CEP antes da rua.

	   `order` em vez de mexer no HTML: o desktop continua com os pares que o
	   desenho pede. */
	.pcs .pcs-review__fields { flex-direction: column; }

	.pcs .pcs-review__field { flex: 0 0 100%; }

	.pcs .pcs-review__field:nth-child(1) { order: 1; }   /* nome            */
	.pcs .pcs-review__field:nth-child(2) { order: 2; }   /* e-mail          */
	.pcs .pcs-review__field:nth-child(3) { order: 3; }   /* telefone        */
	.pcs .pcs-review__field:nth-child(5) { order: 4; }   /* endereço        */
	.pcs .pcs-review__field:nth-child(6) { order: 5; }   /* cidade          */
	.pcs .pcs-review__field:nth-child(4) { order: 6; }   /* CEP             */
	.pcs .pcs-review__field:nth-child(7) { order: 7; }   /* país            */
	.pcs .pcs-review__field:nth-child(8) { order: 8; }   /* região          */

	/* -- 5. O parágrafo de privacidade herdava o recuo de 38 do desktop e
	   sobravam cinco palavras por linha em 320. */
	.pcs.pcs .pcs-place-order .woocommerce-privacy-policy-text { margin-left: 0; }
}

@media ( max-width: 400px ) {

	/* -- 6. O par "Country Code + Phone" dividia 288px em 120 + 150, e tanto
	   o telefone quanto o e-mail saíam cortados dentro do campo. Empilhados,
	   cada um tem a linha inteira. */
	.pcs .pcs-grid > .pcs-col-3,
	.pcs .pcs-grid > .pcs-col-9 {
		flex: 0 0 100%;
		margin-right: 0;
	}

	/* -- 7. Na revisão, a pílula do método e o cartão mascarado dividiam a
	   mesma linha e a pílula quebrava em duas ("Credit / Debit" / "Card"). */
	.pcs .pcs-review__payment {
		flex-wrap: wrap;
		row-gap: 12px;
	}

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

/* -- os quatro que sobraram da primeira passada, com o peso certo.

   Medido depois de aplicar: "Apply" continuava com 24 de altura porque
   `.pcs .pcs-promo .pcs-promo__apply` (tres classes, com !important) ganha de
   `.pcs .pcs-promo__apply` (duas). Repetir !important empata; e preciso pesar
   mais. A caixa dos termos continuava com 18 pela mesma razao. */
@media ( max-width: 900px ) {
	.pcs .pcs-promo .pcs-promo__apply {
		min-height: 44px !important;
		height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
	}
}

.pcs.pcs .pcs-place-order input.woocommerce-form__input-checkbox,
.pcs.pcs .pcs-place-order input[type="checkbox"] {
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 22px !important;
}

/* ==========================================================================
   As quatro etapas em telefone: uma fileira que rola, e não uma pilha

   `.pcs__tabs` é `flex-wrap: wrap`, e os quatro pares somam ~820px: em 402 eles
   quebravam em quatro linhas e o stepper virava uma lista alta, empurrando o
   conteúdo da compra para baixo. Em fileira única, com rolagem horizontal e a
   etapa atual trazida para a vista pelo JS, ele volta a caber e a ser o que é:
   uma régua de progresso.

   Os chips continuam com as medidas do desenho — 49 de altura, raio 10, o par
   com 7 entre as peças e 14 entre as etapas.
   ========================================================================== */

@media ( max-width: 900px ) {

	.pcs .pcs__tabs {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x proximity;
		background-image: none;
		-webkit-overflow-scrolling: touch;

		/* Sangra até a borda da tela, e devolve a folga por dentro: assim o
		   primeiro chip nasce alinhado com o conteúdo e o último some na
		   borda, em vez de parar num corte seco no meio da coluna. */
		margin-left: -24px;
		margin-right: -24px;
		padding-left: 24px;
		padding-right: 24px;

		/* A tira que indica que há mais etapas de cada lado. Some no primeiro
		   e no último passo, onde não há mais nada para aquele lado. */
		-webkit-mask-image: linear-gradient( to right,
			transparent 0, #000 24px, #000 calc( 100% - 28px ), transparent 100% );
		mask-image: linear-gradient( to right,
			transparent 0, #000 24px, #000 calc( 100% - 28px ), transparent 100% );
	}

	.pcs[data-current="order"] .pcs__tabs {
		-webkit-mask-image: linear-gradient( to right,
			#000 0, #000 calc( 100% - 28px ), transparent 100% );
		mask-image: linear-gradient( to right,
			#000 0, #000 calc( 100% - 28px ), transparent 100% );
	}

	.pcs[data-current="confirmation"] .pcs__tabs {
		-webkit-mask-image: linear-gradient( to right,
			transparent 0, #000 24px, #000 100% );
		mask-image: linear-gradient( to right,
			transparent 0, #000 24px, #000 100% );
	}

	/* A barra de rolagem some: quem indica que há mais é a tira acima, e uma
	   barra cinza atravessada no meio do stepper lê como defeito. */
	.pcs .pcs__tabs::-webkit-scrollbar { display: none; }

	.pcs .pcs__tabs {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.pcs .pcs__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
		scroll-margin-left: 24px;
	}
}

/* --------------------------------------------------------------------------
   0.10.3, avisos de erro num tamanho só (relato 007 da IHTE, 14/10)

   A mensagem que o próprio WooCommerce escreve embaixo do campo, no envio
   final (p.checkout-inline-error-message), herdava do tema 24px em vermelho
   escuro, enquanto a nossa (span.pcs-error) e a do cupom têm 13px. Todas
   passam a ter o mesmo tamanho e o mesmo vermelho.
   -------------------------------------------------------------------------- */
.pcs .checkout-inline-error-message,
.pcs .woocommerce-invalid .checkout-inline-error-message {
	display: block;
	margin: 5px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: var(--pcs-danger) !important;
}