/*
 * Cart, checkout, order received and My Account (inc/wc-pages.php, woocommerce/ overrides).
 * Measured on the live XStore pages 12 / 15 / 16, 2026-10-01, at 1920, 1440, 1024, 768 and 375.
 *
 * XStore's page container: content 1700px max with 15px sides from 1200px, 940px from 992px,
 * 720px from 768px, full width minus 15px below. The cart and account sat in an Elementor
 * container that added 10px more on each side.
 *
 * Two live tablet bugs are not copied: at 992-1199px the cart totals ran off the right edge,
 * and at 768-991px the checkout form shrank to a 300px column. Both now use the full width.
 *
 * The checkout form itself is styled by assets/css/checkout.css (redesign 0.12.0); the order
 * received page below still uses these rules.
 */

/* ========== Page frame ========== */
.pv-flow {
	--pv-flow-pad: 15px;
	--pv-flow-extra: 0px;
	position: relative; isolation: isolate; overflow: clip;
	padding-inline: calc(var(--pv-flow-pad) + var(--pv-flow-extra));
}
@supports not (overflow: clip) { .pv-flow { overflow: hidden; } }
@media (min-width: 768px) { .pv-flow { --pv-flow-pad: calc((100% - 720px) / 2); } }
@media (min-width: 992px) { .pv-flow { --pv-flow-pad: calc((100% - 940px) / 2); } }
@media (min-width: 1200px) { .pv-flow { --pv-flow-pad: max(15px, calc((100% - 1700px) / 2)); } }

.pv-flow--checkout { padding-bottom: 50px; }
.pv-flow--account { padding-block: 40px 10px; }
@media (min-width: 768px) {
	.pv-flow--account { --pv-flow-extra: 10px; }
}

.pv-flow .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pv-flow .woocommerce { color: #1a1a1a; }
.pv-flow .woocommerce a { color: #222; }
.pv-flow .required { color: #c00; text-decoration: none; border: 0; }

/* ========== Steps: 1 Shopping cart > 2 Checkout > 3 Order status ========== */
.pv-steps {
	display: flex; overflow-x: auto; margin-bottom: 20px; padding: 3vw 15px;
}
.pv-steps::-webkit-scrollbar { height: 4px; }
.pv-steps::-webkit-scrollbar-track { background: #e1e1e1; }
.pv-steps::-webkit-scrollbar-thumb { background: #888; }
.pv-steps__list { display: flex; margin: 0 0 0 -.3em; padding: 0; list-style: none; font: 400 24px/1.4286 var(--pv-font-body); text-transform: capitalize; white-space: nowrap; }
.pv-steps__step { display: flex; align-items: center; margin: 0 .3em; color: #888; }
.pv-steps__link { display: flex; align-items: center; color: inherit !important; text-decoration: none; transition: color .2s ease-out; }
a.pv-steps__link:hover { color: #222 !important; }
.pv-steps__step.is-active { color: #222; }
/* A circle 1.44x the step text (34.5px at 24px), its number at .8 of the text size. */
.pv-steps__num {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: 1.8em; height: 1.8em; margin-right: 7px; border: 1px solid currentColor; border-radius: 50%;
	font-size: .8em; line-height: 1;
}
.pv-steps__step.is-active .pv-steps__num { border-color: #222; background: #222; color: #fff; }
.pv-steps__sep { display: flex; margin-left: .45em; color: #888; }
.pv-steps__sep .pv-icon { width: .75em; height: .75em; transform: rotate(-90deg); }
@media (max-width: 767px) {
	.pv-steps__list { font-size: 14px; }
}

/* ========== Notices (WooCommerce's stylesheet is off) ========== */
.pv-flow .woocommerce-message,
.pv-flow .woocommerce-error,
.pv-flow .woocommerce-notices-wrapper .woocommerce-info,
.pv-flow .woocommerce-NoticeGroup .woocommerce-info {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
	margin: 0 0 20px; padding: 14px 18px; list-style: none;
	border-left: 4px solid var(--pv-brand); background: var(--pv-surface-alt); color: #1a1a1a;
}
.pv-flow .woocommerce-error { display: block; border-left-color: #b42318; }
.pv-flow .woocommerce-error li + li { margin-top: 6px; }
.pv-flow .woocommerce-message .button,
.pv-flow .woocommerce-info .button { order: 2; padding: 8px 16px; border-radius: 6px; background: var(--pv-brand); color: #fff !important; text-decoration: none; }

/* Buttons shared by these pages: XStore's black ".btn black". */
.pv-btn-black,
.pv-flow .woocommerce-button.button,
.pv-flow .woocommerce-Button.button,
.pv-flow .woocommerce-orders-table .button,
.pv-flow .woocommerce-MyAccount-content .button,
.pv-flow .woocommerce-form-login__submit,
.pv-flow .woocommerce-form-register__submit,
.pv-flow .woocommerce-form-track-order .button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
	padding: 10.5px 30.8px; border: 1px solid #000; border-radius: 0; background: #000; color: #fff !important;
	font: 500 11.9px/1 var(--pv-font-body); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.pv-btn-black:hover,
.pv-flow .woocommerce-button.button:hover,
.pv-flow .woocommerce-Button.button:hover,
.pv-flow .woocommerce-orders-table .button:hover,
.pv-flow .woocommerce-MyAccount-content .button:hover,
.pv-flow .woocommerce-form-login__submit:hover,
.pv-flow .woocommerce-form-register__submit:hover { background: #fff; color: #000 !important; }

/* Plain WooCommerce form fields (account forms, login, shipping calculator), XStore's defaults. */
.pv-flow .form-row { margin: 0 0 15px; }
.pv-flow .form-row label { display: block; margin-bottom: 5px; color: #222; font-size: 16px; }
.pv-flow .form-row label.checkbox,
.pv-flow .form-row label.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; }
/* The ".woocommerce form .form-row" selectors outrank main.css's generic WooCommerce field rule. */
.pv-flow input.input-text,
.pv-flow select,
.pv-flow textarea,
.pv-flow .woocommerce form .form-row input.input-text,
.pv-flow .woocommerce form .form-row select,
.pv-flow .woocommerce form .form-row textarea {
	box-sizing: border-box; width: 100%; padding: 0 1.22em; border: 1px solid #e1e1e1; border-radius: 0;
	background: #fff; color: #222; font: 400 1.14rem/2rem var(--pv-font-body);
}
.pv-flow select,
.pv-flow .woocommerce form .form-row select {
	padding-right: 2.9em; appearance: none; -webkit-appearance: none; color: #888;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.1em center;
}
.pv-flow textarea,
.pv-flow .woocommerce form .form-row textarea { height: auto; padding: 1.22em; line-height: 1.5; }
.pv-flow input[type="checkbox"], .pv-flow input[type="radio"] { width: auto; height: auto; margin: 0; accent-color: #222; }


/* ========== Shared by the previous cart and checkout (cart-legacy.css has the rest) ========== */
.pv-review-item .variation {
	display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; gap: 7px 0;
	margin: 7px 0 0; font-size: 15.2px; line-height: 1.6;
}
.pv-review-item .variation dt { margin: 0 5px 0 0; color: #222; font-weight: 400; }
.pv-review-item .variation dd { margin: 0 5px 0 0; color: #888; }
.pv-review-item .variation p { margin: 0; }
.pv-flow .coupon-error-notice { margin: 6px 0 0; color: #b42318; font-size: 14px; line-height: 1.4; }
.pv-flow #coupon_code.has-error { border-color: #b42318; }
.pv-flow .includes_tax { font-size: 11.9px; line-height: 1; text-transform: uppercase; color: #222; }
.pv-flow .woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
.pv-flow .woocommerce-shipping-methods li { display: inline-flex; margin: 0 0 3px; line-height: 28.73px; }
.pv-flow .woocommerce-shipping-methods label { display: inline-block; margin: 0 0 5px; }

/* ========== Checkout ========== */
/* The checkout form has its own stylesheet since 0.12.0: assets/css/checkout.css. */
@media (max-width: 767px) {
	/* design-tokens.css pads these by the 15px gutter with !important on phones; the cart
	   and order pages already provide the gutter, as on live. */
	.pv-flow #order_review, .pv-flow .cart-collaterals, .pv-flow .col2-set { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ========== Order received ========== */
.pv-flow .woocommerce-order { text-align: left; }
.pv-flow .woocommerce-thankyou-order-received { margin: 0 0 20.02px; font-size: 16px; line-height: 1.6; text-align: center; text-transform: uppercase; }
/* The summary box shrinks to its text and sits centred (display: table centres with auto margins). */
.pv-flow .woocommerce-order-overview {
	display: table; margin: 0 auto 28.8px; padding: 14.4px 38.88px; border: 1px dashed #e1e1e1;
	list-style: none; text-align: center; color: #222;
}
.pv-flow .woocommerce-order-overview li { margin: 0 0 3px; font-size: 15.96px; line-height: 28.7px; }
.pv-flow .woocommerce-order-overview li strong { font-weight: 400; color: #888; }
/* Centred at 80% on the order-received page only; "View order" in My Account runs full width. */
.pv-flow--checkout .woocommerce-order-details,
.pv-flow--checkout .woocommerce-customer-details,
.pv-flow--checkout .woocommerce-order > p:not(.woocommerce-notice) { max-width: 80%; margin-inline: auto; }
.pv-flow .woocommerce-order-details__title,
.pv-flow .woocommerce-column__title { margin: 0; font-size: 24px; line-height: 1.2; }
.pv-flow .woocommerce-table--order-details,
.pv-flow .woocommerce-table--customer-details { width: 100%; margin: 0 0 31.92px; border-collapse: collapse; font-size: 15.96px; line-height: 1.6; color: #222; }
.pv-flow .woocommerce-table--order-details th,
.pv-flow .woocommerce-table--order-details td { padding: 15.96px 11.33px 11.33px 0; border-bottom: 1px solid #e1e1e1; text-align: left; vertical-align: top; font-weight: 400; }
.pv-flow .woocommerce-table--order-details thead th { font-size: 12px; text-transform: uppercase; }
.pv-flow .woocommerce-table--order-details .product-total,
.pv-flow .woocommerce-table--order-details tfoot td { padding-right: 0; text-align: right; }
.pv-flow .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: #888; }
.pv-flow .wc-item-meta li { display: flex; gap: 5px; }
.pv-flow .wc-item-meta p { margin: 0; color: #222; }
.pv-flow .wc-item-meta-label { font-weight: 400; }
.pv-flow .woocommerce-customer-details address { padding: 15px 0; font-style: normal; line-height: 1.7; }
.pv-flow .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 767px) {
	.pv-flow--checkout .woocommerce-order-details,
	.pv-flow--checkout .woocommerce-customer-details,
	.pv-flow--checkout .woocommerce-order > p:not(.woocommerce-notice) { max-width: none; }
	.pv-flow .woocommerce-columns--addresses { grid-template-columns: 1fr; }
	.pv-flow .woocommerce-order-overview { padding: 14.4px 20px; }
}

/* ========== My Account ========== */
.pv-flow--account > .woocommerce { display: flex; align-items: flex-start; }
.pv-account__side { flex: 0 0 calc(25% - 30px); box-sizing: border-box; max-width: calc(25% - 30px); margin-right: 30px; border-right: 1px solid #e1e1e1; }
.pv-flow--account .woocommerce-MyAccount-content { flex: 1 1 0; min-width: 0; }
.pv-account__user { display: flex; flex-direction: column; margin-bottom: 30px; }
.pv-account__avatar { display: block; width: 86px; height: 86px; margin-bottom: 15px; border-radius: 50%; }
.pv-account__name { font-size: 15.96px; line-height: 22.8px; color: #222; }
.pv-account__email { font-size: 16px; line-height: 1.4286; color: #444; overflow-wrap: anywhere; }
.pv-flow--account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.pv-flow--account .woocommerce-MyAccount-navigation li { margin: 0 0 5px; }
.pv-flow--account .woocommerce-MyAccount-navigation a {
	display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; width: 100%; padding: 7px 0;
	font-size: 18px; line-height: 1.8; color: #000 !important; text-decoration: none;
}
.pv-flow--account .woocommerce-MyAccount-navigation a:hover,
.pv-flow--account .woocommerce-MyAccount-navigation .is-active a { color: var(--pv-brand) !important; }

.pv-account__title { margin: 0 0 9.8px; font-size: 24px; line-height: 1.2; }
.pv-flow--account .woocommerce-MyAccount-content > p { margin: 0 0 20.02px; font-size: 16px; line-height: 1.6; color: #1a1a1a; }
.pv-account__buttons { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pv-account__buttons .pv-btn-black { flex: 1 1 0; min-width: 180px; height: 45px; padding: 14px 30.8px; font-size: 14px; }
.pv-account__also { margin-top: 60px; }
.pv-account__also .pv-account__title { margin-bottom: 20px; }

/* Orders and other account tables */
.pv-flow--account table.shop_table { width: 100%; margin: 0 0 40px; border-collapse: collapse; }
.pv-flow--account .woocommerce-orders-table th { padding: 16px 11.36px 11.36px 0; border-bottom: 1px solid #e1e1e1; font-size: 16px; line-height: 1.1; font-weight: 400; color: #222; text-align: left; text-transform: uppercase; }
.pv-flow--account .woocommerce-orders-table td,
.pv-flow--account .woocommerce-orders-table tbody th { padding: 12.6px 8.95px 8.95px; border-bottom: 1px solid #f2f2f2; font-size: 12.6px; line-height: 1.43; color: #222; text-align: left; text-transform: uppercase; vertical-align: middle; }
.pv-flow--account .woocommerce-orders-table tbody th { padding-left: 0; font-size: 16px; text-transform: none; }
.pv-flow--account .woocommerce-orders-table__header-order-actions,
.pv-flow--account .woocommerce-orders-table__cell-order-actions { text-align: right !important; }
.pv-flow--account .woocommerce-orders-table .button { margin: 3px 0 3px 4px; }
.pv-flow--account .woocommerce-pagination { display: flex; gap: 10px; }
.pv-flow--account mark { background: none; color: #222; font-weight: 500; }

/* Addresses and account details */
.pv-flow--account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pv-flow--account .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.pv-flow--account .woocommerce-Address-title h2 { margin: 0; font-size: 22px; }
.pv-flow--account .woocommerce-Address-title .edit { color: #222 !important; text-decoration: underline; }
.pv-flow--account address { margin-top: 10px; font-style: normal; line-height: 1.7; }
.pv-flow--account .woocommerce-address-fields__field-wrapper,
.pv-flow--account .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.pv-flow--account .woocommerce-address-fields__field-wrapper .form-row,
.pv-flow--account .woocommerce-EditAccountForm > * { grid-column: 1 / -1; }
.pv-flow--account .woocommerce-address-fields__field-wrapper .form-row-first,
.pv-flow--account .woocommerce-EditAccountForm .form-row-first { grid-column: 1; }
.pv-flow--account .woocommerce-address-fields__field-wrapper .form-row-last,
.pv-flow--account .woocommerce-EditAccountForm .form-row-last { grid-column: 2; }
/* State dropdown (select2) sized like the other fields. */
.pv-flow--account .select2-container .select2-selection--single { height: 2.643rem; border: 1px solid #e1e1e1; border-radius: 0; }
.pv-flow--account .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 1.22em; line-height: calc(2.643rem - 2px); color: #222; }
.pv-flow--account .select2-container .select2-selection--single .select2-selection__arrow { height: calc(2.643rem - 2px); right: 6px; }
.pv-flow--account fieldset { margin: 20px 0; padding: 20px; border: 1px solid #e1e1e1; }
.pv-flow--account legend { padding: 0 8px; font-family: "Marcellus", Georgia, serif; font-size: 18px; color: #000; }
.pv-flow--account .woocommerce-form-row em { display: block; margin-top: 5px; font-size: 13px; color: #888; }
.pv-flow--account .password-input { position: relative; display: block; }
.pv-flow--account .show-password-input { position: absolute; top: 50%; right: 10px; width: 24px; height: 24px; transform: translateY(-50%); border: 0; background: none; cursor: pointer; }
.pv-flow--account .show-password-input::before { content: "\1F441"; font-size: 14px; opacity: .6; }

/* Help Center */
.pv-help__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 15px 0 25px; padding: 0; list-style: none; }
.pv-help__item { display: block; height: 100%; box-sizing: border-box; padding: 20px; border: 1px solid #e1e1e1; text-decoration: none; transition: border-color .2s ease; }
.pv-help__item:hover { border-color: #222; }
.pv-help__name { display: block; margin-bottom: 6px; font: 400 20px/1.3 "Lora", Georgia, serif; color: #000; }
.pv-help__text { display: block; font-size: 15px; line-height: 1.6; color: #555; }
.pv-help__contact { margin: 0 0 8px; }
.pv-help__contact a { color: #222 !important; }

/* Logged out: login and register side by side */
.pv-flow--account #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; width: 100%; }
.pv-flow--account > .woocommerce:has(> #customer_login),
.pv-flow--account > .woocommerce:has(> .woocommerce-form-login),
.pv-flow--account > .woocommerce:has(> .woocommerce-ResetPassword) { display: block; }
.pv-flow--account #customer_login h2,
.pv-flow--account .woocommerce > h2 { margin: 0 0 20px; font-size: 1.714rem; }
.pv-flow--account .woocommerce-form-login .lost_password { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.pv-flow--account .woocommerce-form-login .lost_password a { color: #222 !important; text-decoration: underline; }
.pv-flow--account .woocommerce-form-login__submit,
.pv-flow--account .woocommerce-form-register__submit { min-width: 140px; height: 2.643rem; }
.pv-flow--account .woocommerce-form-login__submit { display: flex; margin-top: 15px; }
.pv-flow--account .woocommerce-ResetPassword { max-width: 560px; }

@media (max-width: 767px) {
	.pv-flow--account > .woocommerce { display: block; }
	.pv-account__side { max-width: none; margin: 0 0 20px; border-right: 0; }
	.pv-account__user { align-items: center; text-align: center; }
	.pv-account__who { align-self: stretch; }
	.pv-account__title { font-size: 22px; }
	.pv-account__buttons { flex-direction: column; }
	.pv-account__buttons .pv-btn-black { flex: none; width: 100%; height: 42px; }
	.pv-flow--account #customer_login { grid-template-columns: 1fr; gap: 30px; }
	.pv-flow--account .woocommerce-Addresses,
	.pv-flow--account .woocommerce-address-fields__field-wrapper,
	.pv-flow--account .woocommerce-EditAccountForm { grid-template-columns: 1fr; }
	.pv-flow--account .woocommerce-address-fields__field-wrapper .form-row-first,
	.pv-flow--account .woocommerce-address-fields__field-wrapper .form-row-last,
	.pv-flow--account .woocommerce-EditAccountForm .form-row-first,
	.pv-flow--account .woocommerce-EditAccountForm .form-row-last { grid-column: 1; }
	.pv-help__list { grid-template-columns: 1fr; }
	/* Orders table: one block per order */
	.pv-flow--account .woocommerce-orders-table thead { display: none; }
	.pv-flow--account .woocommerce-orders-table, .pv-flow--account .woocommerce-orders-table tbody,
	.pv-flow--account .woocommerce-orders-table tr { display: block; }
	.pv-flow--account .woocommerce-orders-table tr { padding: 10px 0; border-bottom: 1px solid #e1e1e1; }
	.pv-flow--account .woocommerce-orders-table td,
	.pv-flow--account .woocommerce-orders-table tbody th { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border: 0; text-align: right; }
	.pv-flow--account .woocommerce-orders-table td::before,
	.pv-flow--account .woocommerce-orders-table tbody th::before { content: attr(data-title); color: #888; text-align: left; }
	.pv-flow--account .woocommerce-orders-table__cell-order-actions { flex-wrap: wrap; justify-content: flex-end; }
	.pv-flow--account .woocommerce-orders-table__cell-order-actions::before { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.pv-flow--account > .woocommerce { display: block; }
	.pv-account__side { max-width: none; margin: 0 0 20px; border-right: 0; }
}