/* ------------------------------------------------------------------
   Checkout page, from the Figma "WooCommerce Checkout" frame (10983:9861).
   Loaded on the checkout form page only. WooCommerce's classic checkout
   styles stay loaded, so a few rules repeat their selectors to win.
   ------------------------------------------------------------------ */
.pim-checkout {
	--plum: #281745;
	--purple-20: #B9A2DF;
	--purple-8: rgba(135, 95, 200, 0.08);
	--grey-80: #415562;
	--ink: #101111;
	--font-inter: "Inter", system-ui, sans-serif;
	--font-nunito: "Nunito Sans", system-ui, sans-serif;

	padding: 72px 0 96px;
	background: #fff;
}

/* ------------------------------------------------------------ Intro */
.pim-checkout__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 36px;
}

.pim-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pim-steps__step,
.pim-steps__step a {
	display: block;
	border-radius: 999px;
	font-family: var(--font-inter);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.pim-steps__step {
	padding: 10px 16px;
	background: var(--bg-grey);
	color: var(--grey-70);
}

.pim-steps__step--done {
	padding: 0;
}

.pim-steps__step--done a {
	padding: 10px 16px;
	background: var(--purple);
	color: #fff;
}

.pim-steps__step--done a:hover {
	background: var(--purple-700);
}

.pim-steps__step--current {
	background: var(--lavender);
	color: var(--purple);
}

.pim-checkout__heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pim-checkout__title {
	font-size: 46px;
	line-height: 62px;
	letter-spacing: 0.2px;
	color: var(--black);
}

.pim-checkout__lede {
	margin: 0;
	font-size: 22px;
	line-height: 28px;
	color: var(--grey-70);
}

/* ------------------------------------------------------------ Columns */
.pim-checkout__columns {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.pim-checkout__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.pim-checkout__side {
	display: flex;
	flex: 0 0 500px;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* ------------------------------------------------------------ Cards */
.pim-checkout-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 36px;
	overflow: hidden;
	border: 1px solid var(--grey-20);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--shadow-3d);
}

.pim-checkout-card__header {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pim-checkout-card__title {
	font-size: 26px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.2px;
	color: var(--black);
}

.pim-checkout-card__title--inter {
	font-family: var(--font-inter);
	font-size: 28px;
	line-height: 36px;
	letter-spacing: 0;
}

.pim-checkout-card__lede {
	margin: 0;
	font-size: 18px;
	line-height: normal;
	color: var(--grey-70);
}

.pim-checkout-card__rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--grey-20);
}

/* ------------------------------------------------------------ Fields */
.pim-fields-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

.pim-fields-grid::before,
.pim-fields-grid::after {
	display: none;
}

.woocommerce form.pim-checkout__form .form-row,
.pim-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
}

.woocommerce form.pim-checkout__form .form-row-wide {
	grid-column: 1 / -1;
}

/* WooCommerce's address script calls .show() on the country row, so this needs !important */
.woocommerce form.pim-checkout__form .form-row.pim-hidden-row {
	display: none !important;
}

/* WooCommerce's clearfix pseudo-elements would become flex items and add a gap */
.woocommerce form.pim-checkout__form .form-row::before,
.woocommerce form.pim-checkout__form .form-row::after {
	display: none;
}

/* Hidden attribution inputs and empty shipping/notes wrappers would each add a card gap */
#customer_details > wc-order-attribution-inputs,
#customer_details > .woocommerce-shipping-fields:not(:has(.form-row)),
#customer_details > .woocommerce-additional-fields:not(:has(.form-row)) {
	display: none;
}

.woocommerce form.pim-checkout__form .form-row label,
.pim-field__label {
	margin: 0;
	font-family: var(--font-inter);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--grey-70);
}

.woocommerce form.pim-checkout__form .form-row .required {
	color: var(--grey-70);
	text-decoration: none;
}

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

.woocommerce form.pim-checkout__form .form-row input.input-text,
.pim-field__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--grey-30);
	border-radius: 12px;
	background: #fff;
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: var(--black);
	box-shadow: none;
}

.woocommerce form.pim-checkout__form .form-row input.input-text:focus,
.pim-field__input:focus {
	border-color: var(--purple);
	outline: 2px solid var(--purple);
	outline-offset: 0;
}

.pim-field__input[readonly] {
	cursor: default;
}

.woocommerce form.pim-checkout__form .form-row.woocommerce-invalid input.input-text {
	border-color: #B42318;
}

.woocommerce form.pim-checkout__form .form-row.woocommerce-invalid label {
	color: #B42318;
}

.woocommerce form.pim-checkout__form .checkout-inline-error-message {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #B42318;
}

.woocommerce-account-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ------------------------------------------------------------ Payment tiles */
.woocommerce-checkout .pim-checkout-card #payment {
	display: flex;
	flex-direction: column;
	gap: 24px;
	border-radius: 0;
	background: none;
}

.woocommerce-checkout .pim-checkout-card #payment ul.payment_methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout .pim-checkout-card #payment ul.payment_methods::before,
.woocommerce-checkout .pim-checkout-card #payment ul.payment_methods::after {
	display: none;
}

.woocommerce-checkout .pim-checkout-card #payment ul.payment_methods li.pim-tile {
	position: relative;
	margin: 0;
	line-height: normal;
	font-weight: 400;
}

.pim-tile__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pim-tile__label {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: start;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--grey-20);
	border-radius: 18px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pim-tile__label:hover {
	border-color: var(--purple-20);
}

.pim-tile__input:checked + .pim-tile__label {
	border-color: var(--purple-20);
	background: var(--purple-8);
}

.pim-tile__input:focus-visible + .pim-tile__label {
	outline: 3px solid var(--purple);
	outline-offset: 2px;
}

.woocommerce-checkout #payment ul.payment_methods li .pim-tile__icon,
.woocommerce-checkout #payment ul.payment_methods li .pim-tile__radio img {
	margin: 0;
	max-height: none;
	vertical-align: top;
}

.pim-tile__icon {
	width: 40.8px;
	height: 40px;
}

.pim-tile__icon--gateway img {
	max-width: 100%;
	max-height: 100%;
}

.pim-tile__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pim-tile__title {
	font-family: var(--font-inter);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: var(--black);
}

.pim-tile__subtitle {
	font-size: 14px;
	line-height: 22px;
	color: var(--grey-70);
}

.pim-tile__radio {
	display: block;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1px solid var(--grey-30);
	border-radius: 10px;
	background: #fff;
}

.pim-tile__radio img {
	display: none;
}

.pim-tile__input:checked + .pim-tile__label .pim-tile__radio {
	border: 0;
	background: none;
}

.pim-tile__input:checked + .pim-tile__label .pim-tile__radio img {
	display: block;
	width: 20px;
	height: 20px;
}

.woocommerce-checkout .pim-checkout-card #payment div.payment_box {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 16px;
	line-height: 24px;
	color: var(--grey-70);
}

.woocommerce-checkout .pim-checkout-card #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout .pim-checkout-card #payment div.payment_box p {
	margin: 0;
}

.woocommerce-checkout .pim-checkout-card #payment .woocommerce-info {
	margin: 0;
}

.pim-card-details {
	margin: 0;
	padding: 0;
	border: 0;
}

.pim-card-details__title {
	margin-bottom: 12px;
	padding: 0;
	font-family: var(--font-inter);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: var(--black);
}

.pim-card-details__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

.woocommerce-checkout .pim-checkout-card #payment div.payment_box p.pim-card-details__note {
	font-size: 14px;
	line-height: 22px;
	color: var(--grey-60);
}

/* ------------------------------------------------------------ Totals */
.pim-totals {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.pim-totals__row {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.pim-totals__row dt,
.pim-totals__row th {
	padding: 0;
	font-weight: 400;
	line-height: normal;
	text-align: left;
	color: var(--grey-70);
}

.pim-totals__row dd,
.pim-totals__row td {
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 24px;
	text-align: right;
	color: var(--black);
}

/* Sidebar summary */
.pim-totals--summary {
	gap: 14px;
	font-size: 18px;
}

.pim-totals__row--grand {
	font-size: 22px;
	line-height: 32px;
	color: var(--black);
}

.pim-totals__row--grand strong {
	font-size: 26px;
	font-weight: 600;
	line-height: 36px;
}

/* Review card: WooCommerce styles any .shop_table in checkout, so reset the table here */
.woocommerce table.pim-totals--review,
.pim-totals--review {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 20px;
}

.pim-totals--review tbody {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.woocommerce table.pim-totals--review th,
.woocommerce table.pim-totals--review td {
	padding: 0;
	border: 0;
	background: none;
}

.pim-totals--review .pim-totals__row--total td {
	font-size: 24px;
	line-height: 32px;
}

.pim-totals--review .pim-totals__row--total td small {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--grey-60);
}

/* WooCommerce's own shipping picker, only shown when there is a choice */
.pim-totals--review tr.woocommerce-shipping-totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pim-totals--review tr.woocommerce-shipping-totals th {
	color: var(--grey-70);
	font-weight: 400;
	text-align: left;
}

.pim-totals--review ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	text-align: left;
}

/* ------------------------------------------------------------ Submit */
.woocommerce form.pim-checkout__form .pim-checkout__submit {
	gap: 16px;
}

.pim-checkout__buttons {
	display: flex;
	gap: 24px;
}

.pim-checkout__buttons .btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 20px;
}

.btn--plum {
	background: var(--plum);
	color: #fff;
}

.btn--plum:hover {
	background: #3b2263;
}

.btn--plum:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: 14px;
	line-height: 22px;
	color: var(--grey-60);
}

.woocommerce-terms-and-conditions-wrapper p {
	margin: 0;
}

.woocommerce-terms-and-conditions-wrapper a {
	text-decoration: underline;
}

/* ------------------------------------------------------------ Order summary */
.pim-order-summary {
	padding: 32px 36px;
}

.pim-order-summary__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pim-order-summary__item {
	display: flex;
	gap: 12px;
	align-items: center;
}

.pim-order-summary__thumb {
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--bg-grey);
}

.pim-order-summary__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pim-order-summary__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pim-order-summary__name {
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	color: var(--black);
}

.pim-order-summary__qty {
	font-size: 16px;
	line-height: normal;
	color: var(--grey-70);
}

/* ------------------------------------------------------------ PayItMonthly card */
.pim-checkout-finance {
	gap: 16px;
	padding: 0 0 24px;
}

.pim-checkout-finance[hidden] {
	display: none;
}

.pim-checkout-finance__head {
	padding: 26px;
	background: var(--lavender);
}

.pim-checkout-finance__head img {
	width: 189.9px;
	height: 36px;
}

.pim-checkout-finance__benefits {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
	padding: 0 26px;
	list-style: none;
}

.pim-checkout-finance__benefit {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.pim-checkout-finance__icon {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
}

/* The exported icons carry their drop shadow, so they are larger than the 42px slot */
.pim-checkout-finance__icon--shadowed img {
	position: absolute;
	top: -10%;
	left: -15%;
	width: 130%;
	height: 130%;
	max-width: none;
}

.pim-checkout-finance__icon--trusted img {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 42px;
}

.pim-checkout-finance__icon--trusted .pim-checkout-finance__mark {
	top: 9.54px;
	left: 11.73px;
	width: 19.66px;
	height: 24.18px;
}

.pim-checkout-finance__copy {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-family: var(--font-nunito);
	letter-spacing: 0.2px;
}

.pim-checkout-finance__copy strong {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ink);
}

.pim-checkout-finance__copy span {
	font-size: 16px;
	line-height: 22px;
	color: var(--grey-80);
}

.pim-checkout-finance__estimate {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin: 20px 26px 0;
	padding-top: 22px;
	border-top: 1px solid var(--grey-20);
	line-height: normal;
}

.pim-checkout-finance__estimate span {
	font-size: 18px;
	color: var(--grey-70);
}

.pim-checkout-finance__estimate strong {
	font-size: 20px;
	font-weight: 600;
	color: var(--purple);
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1279px) {
	.pim-checkout__side {
		flex-basis: 400px;
	}
}

/* One column: cards stack as Delivery, Payment, Order summary, PayItMonthly, Review
   so the Pay Now button comes last. */
@media (max-width: 1023px) {
	.pim-checkout {
		padding: 48px 0 72px;
	}

	.pim-checkout__columns {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.pim-checkout__main,
	.pim-checkout__side {
		display: contents;
	}

	.pim-checkout-card--delivery { order: 1; }
	.pim-checkout-card--payment { order: 2; }
	.pim-order-summary { order: 3; }
	.pim-checkout-finance { order: 4; }
	.pim-checkout-card--review { order: 5; }

	.pim-checkout__title {
		font-size: 36px;
		line-height: 48px;
	}

	.pim-checkout__lede {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 599px) {
	.pim-checkout__intro {
		gap: 24px;
		margin-bottom: 24px;
	}

	.pim-checkout-card,
	.pim-order-summary {
		padding: 24px 20px;
	}

	.pim-checkout-finance {
		padding: 0 0 24px;
	}

	.pim-checkout-finance__head {
		padding: 20px;
	}

	.pim-checkout-finance__benefits {
		padding: 0 20px;
	}

	.pim-checkout-finance__estimate {
		margin: 0 20px;
	}

	.pim-fields-grid,
	.pim-card-details__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.pim-checkout-card__title,
	.pim-checkout-card__title--inter {
		font-size: 24px;
		line-height: 32px;
	}

	.pim-totals--review,
	.woocommerce table.pim-totals--review {
		font-size: 18px;
	}

	.pim-checkout__buttons {
		flex-direction: column-reverse;
		gap: 12px;
	}

	.pim-checkout__buttons .btn {
		flex: none;
		width: 100%;
	}
}