/*
 * StepFox — WooCommerce brand skin
 * ---------------------------------------------------------------------------
 * Everything here targets markup produced by WooCommerce's own PHP templates
 * (the cart / checkout / my-account shortcodes and the order endpoints). That
 * markup carries no block attributes, so it is out of reach of stepfox-looks —
 * which is the only reason this file exists. Anything that CAN be expressed as
 * a block attribute belongs in templates/, not here.
 *
 * Loaded only on WooCommerce pages, after Woo's own stylesheets.
 */

:root {
	--sf-primary: #ff2c00;
	--sf-primary-2: #ff7043;
	--sf-ink: #0a0c30;
	--sf-ink-soft: #5b5b6b;
	--sf-line: #e6e6ec;
	--sf-surface: #ffffff;
	--sf-surface-2: #f7f7fa;
	--sf-radius: 14px;
	--sf-radius-sm: 8px;
	--sf-shadow: 0 2px 6px rgba(10, 12, 48, .05), 0 12px 32px rgba(10, 12, 48, .06);
	--sf-shadow-lift: 0 8px 18px rgba(255, 44, 0, .22), 0 16px 40px rgba(10, 12, 48, .10);
	--sf-grad: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-primary-2) 100%);
}

/* The theme ships no global reset, so Woo's containers default to
   content-box and every `width: 100%` below would overflow its padding.
   Scoped to WooCommerce's own output. */
.woocommerce,
.woocommerce *,
.woocommerce *::before,
.woocommerce *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   1. Notices
   ========================================================================== */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.wc-block-components-notice-banner {
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
	padding: 16px 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sf-ink);
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-left: 4px solid var(--sf-primary);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

/* Woo draws these as a white glyph on a coloured round chip, and sets the chip
   colour from per-state rules that outrank a bare `> svg`. Keep the chip and
   recolour it per state — flattening it here just leaves a solid square with
   the glyph invisible inside it. */
.wc-block-components-notice-banner > svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 3px;
	fill: #fff;
	border-radius: 50%;
}

.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--sf-primary);
}

.wc-block-components-notice-banner.is-success {
	border-left-color: #12a150;
}

.wc-block-components-notice-banner.is-success > svg {
	background-color: #12a150;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: #d92d20;
}

.wc-block-components-notice-banner.is-error > svg {
	background-color: #d92d20;
}

.wc-block-components-notice-banner__content {
	font-size: 15px;
}

.wc-block-components-notice-banner__content a:not(.button) {
	color: var(--sf-primary);
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-notice-banner__content a:not(.button):hover {
	text-decoration: underline;
}

/* Legacy notice classes, in case a plugin prints them directly. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	margin: 0 0 28px;
	padding: 16px 22px;
	list-style: none;
	color: var(--sf-ink);
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-top: 1px solid var(--sf-line);
	border-left: 4px solid var(--sf-primary);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

.woocommerce-message {
	border-left-color: #12a150;
}

.woocommerce-error {
	border-left-color: #d92d20;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	display: none;
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.woocommerce-button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page a.woocommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	margin: 0;
	padding: 14px 26px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	color: var(--sf-ink);
	background: var(--sf-surface);
	background-image: none;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
	box-shadow: none;
	transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.woocommerce-button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce-page a.woocommerce-button:hover {
	color: #fff;
	background: var(--sf-ink);
	border-color: var(--sf-ink);
}

/* Primary / call-to-action. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.checkout-button,
.woocommerce button#place_order,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
	color: #fff;
	background-color: var(--sf-primary);
	background-image: var(--sf-grad);
	border-color: transparent;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce button#place_order:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
	color: #fff;
	background-color: var(--sf-primary);
	background-image: var(--sf-grad);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--sf-shadow-lift);
}

.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button[disabled]:hover {
	color: var(--sf-ink);
	background: var(--sf-surface);
	border-color: var(--sf-line);
	transform: none;
}

/* Row-level action buttons (order table, downloads) sit tighter. */
.woocommerce .woocommerce-orders-table__cell-order-actions .button,
.woocommerce .woocommerce-MyAccount-downloads-file {
	padding: 9px 16px;
	font-size: 11px;
	letter-spacing: .8px;
}

.woocommerce .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-left: 8px;
}

/* ==========================================================================
   3. Forms
   ========================================================================== */

.woocommerce form .form-row {
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block;
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .3px;
	color: var(--sf-ink);
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--sf-ink-soft);
}

.woocommerce form .form-row .required,
.woocommerce .required {
	color: var(--sf-primary);
	border: 0;
	text-decoration: none;
}

.woocommerce .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woocommerce .input-text {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sf-ink);
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce textarea {
	min-height: 120px;
	resize: vertical;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="url"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="search"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce .input-text:focus {
	outline: none;
	border-color: var(--sf-primary);
	box-shadow: 0 0 0 3px rgba(255, 44, 0, .12);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: #a3a3b2;
	opacity: 1;
}

.woocommerce form .form-row .input-checkbox,
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	width: auto;
	margin: 0 8px 0 0;
	padding: 0;
	accent-color: var(--sf-primary);
}

.woocommerce .password-input,
.woocommerce .woocommerce-password-strength {
	width: 100%;
}

.woocommerce .woocommerce-password-strength {
	margin-top: 8px;
	padding: 8px 12px;
	font-size: 13px;
	border-radius: var(--sf-radius-sm);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: calc(50% - 9px);
}

/* select2 renders at <body> level, so it cannot be scoped to .woocommerce. */
.select2-container--default .select2-selection--single {
	height: auto;
	padding: 12px 15px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--sf-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--sf-primary);
	box-shadow: 0 0 0 3px rgba(255, 44, 0, .12);
}

.select2-dropdown {
	border-color: var(--sf-line);
	border-radius: var(--sf-radius-sm);
	overflow: hidden;
	box-shadow: var(--sf-shadow);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 10px 12px;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--sf-primary);
	color: #fff;
}

/* ==========================================================================
   4. Shared table shell
   ========================================================================== */

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 28px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--sf-radius);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	padding: 15px 20px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-align: left;
	text-transform: uppercase;
	color: var(--sf-ink-soft);
	background: var(--sf-surface-2);
	border: 0;
}

.woocommerce table.shop_table td {
	padding: 18px 20px;
	font-size: 15px;
	color: var(--sf-ink);
	vertical-align: middle;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--sf-line);
}

.woocommerce table.shop_table thead th {
	border-bottom: 1px solid var(--sf-line);
}

.woocommerce table.shop_table thead tr:first-child th:first-child {
	border-top-left-radius: var(--sf-radius);
}

.woocommerce table.shop_table thead tr:first-child th:last-child {
	border-top-right-radius: var(--sf-radius);
}

.woocommerce table.shop_table tbody th {
	background: transparent;
	border-top: 1px solid var(--sf-line);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sf-ink);
}

.woocommerce table.shop_table tbody tr:first-child td,
.woocommerce table.shop_table tbody tr:first-child th {
	border-top: 0;
}

.woocommerce table.shop_table thead + tbody tr:first-child td,
.woocommerce table.shop_table thead + tbody tr:first-child th {
	border-top: 1px solid var(--sf-line);
}

.woocommerce table.shop_table a {
	color: var(--sf-ink);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.shop_table a:hover {
	color: var(--sf-primary);
}

.woocommerce table.shop_table a.button {
	color: var(--sf-ink);
}

.woocommerce table.shop_table a.button:hover,
.woocommerce table.shop_table a.button.alt {
	color: #fff;
}

.woocommerce table.shop_table img {
	width: 62px;
	height: auto;
	border-radius: var(--sf-radius-sm);
	box-shadow: 0 2px 8px rgba(10, 12, 48, .14);
}

.woocommerce .amount,
.woocommerce .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--sf-ink);
}

/* ==========================================================================
   5. Cart
   ========================================================================== */

.woocommerce-cart .woocommerce-cart-form {
	margin: 0 0 34px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
	overflow: hidden;
}

.woocommerce-cart .woocommerce-cart-form table.cart {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce table.cart td.product-remove {
	width: 62px;
	padding-right: 0;
	text-align: center;
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--sf-ink-soft) !important;
	background: var(--sf-surface-2);
	border-radius: 50%;
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}

.woocommerce a.remove:hover {
	color: #fff !important;
	background: var(--sf-primary);
}

.woocommerce table.cart td.product-thumbnail {
	width: 90px;
}

.woocommerce table.cart td.product-name a {
	font-size: 16px;
	font-weight: 600;
}

.woocommerce table.cart td.product-name .variation {
	margin-top: 6px;
	font-size: 13px;
	color: var(--sf-ink-soft);
}

.woocommerce .quantity .qty {
	width: 84px;
	padding: 10px 6px;
	text-align: center;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
}

.woocommerce table.cart td.actions {
	padding: 18px 20px;
	background: var(--sf-surface-2);
	border-top: 1px solid var(--sf-line);
}

@media (min-width: 769px) {
	/* This cell carries the row's colspan. Turning it into a flex container
	   takes it out of the table layout, which drops the colspan and collapses
	   the coupon row into the first column — so float the children instead. */
	.woocommerce table.cart td.actions::after {
		content: "";
		display: block;
		clear: both;
	}

	.woocommerce table.cart td.actions .coupon {
		display: flex;
		gap: 10px;
		align-items: center;
		float: left;
		padding: 0;
	}

	.woocommerce table.cart td.actions .coupon .input-text {
		width: 230px;
		margin: 0;
		padding: 12px 15px;
	}

	.woocommerce table.cart td.actions > .button {
		float: right;
		margin: 0;
	}
}

.woocommerce .cart-collaterals {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 430px;
	padding: 26px 28px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

.woocommerce .cart-collaterals .cart_totals h2 {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.2;
}

.woocommerce .cart-collaterals .cart_totals table {
	margin: 0;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
	padding: 13px 0;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sf-ink-soft);
	background: transparent;
	border: 0;
	border-bottom: 1px dashed var(--sf-line);
	border-radius: 0;
}

.woocommerce .cart-collaterals .cart_totals table th {
	font-weight: 600;
	color: var(--sf-ink);
}

.woocommerce .cart-collaterals .cart_totals table td {
	text-align: right;
}

.woocommerce .cart-collaterals .cart_totals tr.order-total th,
.woocommerce .cart-collaterals .cart_totals tr.order-total td {
	padding-top: 16px;
	font-size: 20px;
	font-weight: 700;
	color: var(--sf-ink);
	border-bottom: 0;
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	padding: 20px 0 0;
	margin: 0;
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	padding: 17px 24px;
	margin: 0;
	font-size: 14px;
}

.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
	margin: 0 0 22px;
}

.woocommerce .return-to-shop {
	margin: 0;
}

/* ==========================================================================
   6. Checkout
   ========================================================================== */

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
	max-width: 100%;
}

.woocommerce-checkout form.checkout_coupon {
	padding: 24px 26px;
	margin: 0 0 28px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

.woocommerce-checkout form.login {
	padding: 24px 26px;
	margin: 0 0 28px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

.woocommerce-checkout #customer_details.col2-set {
	display: block;
	width: 100%;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	padding: 0;
}

.woocommerce-checkout #customer_details .col-2 {
	margin-top: 34px;
}

.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 20px;
	font-size: 24px;
	line-height: 1.2;
}

.woocommerce-checkout #order_review {
	padding: 0;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
	overflow: hidden;
}

.woocommerce-checkout #order_review table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 15px 24px;
}

.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table th.product-total,
.woocommerce-checkout #order_review table.shop_table tfoot td {
	text-align: right;
}

.woocommerce-checkout #order_review table.shop_table tfoot th {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sf-ink);
	background: transparent;
	border-top: 1px solid var(--sf-line);
}

.woocommerce-checkout #order_review table.shop_table tfoot td {
	border-top: 1px solid var(--sf-line);
}

.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td {
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 19px;
	font-weight: 700;
	color: var(--sf-ink);
}

.woocommerce-checkout #payment {
	padding: 24px;
	background: var(--sf-surface-2);
	border-top: 1px solid var(--sf-line);
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0 0 18px;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 0;
	margin: 0 0 10px;
	list-style: none;
	font-size: 15px;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 16px 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sf-ink-soft);
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
}

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

.woocommerce-checkout #payment div.form-row {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 16px;
	font-size: 14px;
}

.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	padding: 17px 24px;
	font-size: 14px;
}

@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
		/* Row 1 is sized by the "Your order" heading alone. Without this, the
		   auto rows split the height of the two-row-spanning billing column
		   between them and the heading floats far above its card. */
		grid-template-rows: auto 1fr;
		column-gap: 44px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > * {
		grid-column: 1;
		min-width: 0;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 130px;
	}
}

/* ==========================================================================
   7. My account
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce > * {
	flex: 1 1 100%;
	min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 268px;
	max-width: 268px;
	padding: 12px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--sf-ink);
	text-decoration: none;
	border-radius: 10px;
	transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--sf-primary);
	background: var(--sf-surface-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: #fff;
	background-image: var(--sf-grad);
	box-shadow: 0 6px 16px rgba(255, 44, 0, .26);
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	float: none;
	padding: 34px 36px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content > :last-child {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--sf-ink-soft);
}

.woocommerce-account .woocommerce-MyAccount-content p strong {
	color: var(--sf-ink);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.2;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: var(--sf-primary);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover {
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 26px 0 0;
	padding: 24px 26px;
	background: var(--sf-surface-2);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding: 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sf-ink);
}

/* Woo clearfixes .col2-set with ::before / ::after. In a block container
   those are invisible, but in a grid they become real grid items and push
   the actual columns diagonally out of place. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after,
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::after {
	display: none;
}

/* Addresses */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	/* Billing + shipping, never more — auto-fit would open a third empty
	   track on a wide screen. */
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
}

@media (min-width: 640px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* These cards also carry Woo's .col-1 / .col-2, whose `float: left;
   width: 48%` is set at three-class specificity — match it or the cards
   collapse to half a grid track. */
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: 100%;
	padding: 24px 26px;
	background: var(--sf-surface-2);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 18px;
}

.woocommerce-account .woocommerce-Address-title .edit {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--sf-primary);
	text-decoration: none;
}

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-size: 15px;
	font-style: normal;
	line-height: 1.9;
	color: var(--sf-ink-soft);
}

/* Login (logged-out /my-account/) */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	max-width: 560px;
	margin: 0 auto;
	padding: 34px 36px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

.woocommerce-account .woocommerce > h2 {
	flex: 1 1 100%;
	margin: 0 0 6px;
	font-size: 28px;
	text-align: center;
}

.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	width: 100%;
}

@media (min-width: 760px) {
	.woocommerce-account #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 18px;
	font-size: 24px;
}

.woocommerce-account .woocommerce form.login .form-row,
.woocommerce-account .woocommerce form.register .form-row {
	width: 100%;
}

.woocommerce-account .woocommerce form.login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce form.register .woocommerce-form-register__submit {
	width: 100%;
	margin: 6px 0 0;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 14px;
	text-align: center;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--sf-primary);
	font-weight: 500;
}

.woocommerce-account .woocommerce-ResetPassword {
	max-width: 560px;
	margin: 0 auto;
	padding: 34px 36px;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	box-shadow: var(--sf-shadow);
}

/* Downloads / orders empty states */
.woocommerce-account .woocommerce-info + .woocommerce-Button,
.woocommerce-account .wc-block-components-notice-banner + .woocommerce-Button {
	margin-top: 4px;
}

/* ==========================================================================
   8. Order confirmation, view order, order details
   ========================================================================== */

.woocommerce ul.woocommerce-order-overview,
.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	background: var(--sf-surface);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	overflow: hidden;
}

.woocommerce ul.woocommerce-order-overview li,
.woocommerce ul.order_details li {
	float: none;
	width: auto;
	margin: 0;
	padding: 20px 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sf-ink-soft);
	border: 0;
	border-right: 1px solid var(--sf-line);
}

.woocommerce ul.woocommerce-order-overview li:last-child,
.woocommerce ul.order_details li:last-child {
	border-right: 0;
}

.woocommerce ul.woocommerce-order-overview li strong,
.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sf-ink);
}

.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-order-downloads__title,
.woocommerce .woocommerce-column__title {
	margin: 0 0 18px;
	font-size: 22px;
	line-height: 1.2;
}

.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce .woocommerce-customer-details .woocommerce-column {
	float: none;
	width: 100%;
	padding: 24px 26px;
	background: var(--sf-surface-2);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
}

.woocommerce .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-style: normal;
	line-height: 1.9;
	color: var(--sf-ink-soft);
	border: 0;
	border-radius: 0;
}

.woocommerce ul.woocommerce-OrderUpdates {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.woocommerce-OrderUpdates li.woocommerce-OrderUpdate {
	margin: 0 0 14px;
	padding: 20px 22px;
	background: var(--sf-surface-2);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
}

.woocommerce ul.woocommerce-OrderUpdates li .woocommerce-OrderUpdate-meta {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--sf-ink-soft);
}

/* The order-confirmation block template renders wc-block-* markup. */
.woocommerce-order-confirmation-cards .wc-block-order-confirmation-totals table,
.wc-block-order-confirmation-totals table {
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

/* ==========================================================================
   9. Small screens
   ========================================================================== */

@media (max-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
		max-width: 100%;
		position: static;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		padding: 10px 14px;
		font-size: 13px;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 100%;
		padding: 26px 22px;
	}
}

@media (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
		border-top: 1px solid var(--sf-line);
	}

	.woocommerce table.shop_table_responsive tbody tr:first-child,
	.woocommerce-page table.shop_table_responsive tbody tr:first-child {
		border-top: 0;
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		display: flex;
		gap: 16px;
		align-items: center;
		justify-content: space-between;
		padding: 12px 18px;
		text-align: right;
		border-top: 0;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		float: none;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--sf-ink-soft);
	}

	.woocommerce table.cart td.actions {
		display: block;
	}

	.woocommerce table.cart td.actions .coupon {
		display: flex;
		gap: 10px;
		margin-bottom: 12px;
	}

	.woocommerce table.cart td.actions .coupon .input-text {
		flex: 1 1 auto;
		width: auto;
		margin: 0;
	}

	.woocommerce table.cart td.actions > .button {
		width: 100%;
	}

	.woocommerce .cart-collaterals .cart_totals {
		max-width: 100%;
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		width: 100%;
	}

	.woocommerce ul.woocommerce-order-overview li,
	.woocommerce ul.order_details li {
		border-right: 0;
		border-bottom: 1px solid var(--sf-line);
	}
}

/* ==========================================================================
   9. Order received
   --------------------------------------------------------------------------
   This screen is the one shop page WooCommerce renders from blocks, not a
   shortcode. The card chrome around each section is therefore set with block
   attributes in templates/order-confirmation.html; what is left here is the
   markup those blocks generate internally, which has no attributes of its own.
   ========================================================================== */

/* WooCommerce emits the real, status-dependent <h1> here; the hero above it
   is a decorative h2. Size it as a section lead, not a second headline. */
.wc-block-order-confirmation-status h1,
.wc-block-order-confirmation-status h2 {
	margin: 0 0 8px;
	font-size: 26px;
	line-height: 1.2;
}

.wc-block-order-confirmation-status p {
	margin: 0;
	font-size: 16px;
	color: var(--sf-ink-soft);
}

/* The card is on the wrapper block, so drop Woo's box around the address. */
.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address {
	padding: 0;
	border: 0;
	border-radius: 0;
}

.wc-block-order-confirmation-status-description {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--sf-ink-soft);
}

.wc-block-order-confirmation-status-description a.button {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sf-primary);
	font-weight: 600;
}

.wc-block-order-confirmation-totals-wrapper > h2,
.wc-block-order-confirmation-totals-wrapper > h3,
.wc-block-order-confirmation-downloads-wrapper > h2,
.wc-block-order-confirmation-downloads-wrapper > h3,
.wc-block-order-confirmation-shipping-wrapper > h2,
.wc-block-order-confirmation-shipping-wrapper > h3,
.wc-block-order-confirmation-billing-wrapper > h2,
.wc-block-order-confirmation-billing-wrapper > h3,
.wc-block-order-confirmation-additional-fields-wrapper > h2,
.wc-block-order-confirmation-additional-fields-wrapper > h3 {
	margin: 18px 0 16px;
	font-size: 20px;
	line-height: 1.2;
}

/* Order # / date / total / email / payment */
.wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.wc-block-order-confirmation-summary-list-item {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.wc-block-order-confirmation-summary-list-item__key {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sf-ink-faint, #8b8c9c);
}

.wc-block-order-confirmation-summary-list-item__value {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--sf-ink);
}

/* Line items */
table.wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

table.wc-block-order-confirmation-totals__table th,
table.wc-block-order-confirmation-totals__table td {
	padding: 15px 0;
	border: 0;
	border-bottom: 1px solid var(--sf-line);
	text-align: left;
	vertical-align: top;
}

table.wc-block-order-confirmation-totals__table thead th {
	padding-top: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sf-ink-soft);
}

table.wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total,
table.wc-block-order-confirmation-totals__table th:last-child,
table.wc-block-order-confirmation-totals__table td:last-child {
	text-align: right;
	white-space: nowrap;
}

table.wc-block-order-confirmation-totals__table tfoot th,
table.wc-block-order-confirmation-totals__table tfoot td {
	font-size: 15px;
	font-weight: 600;
}

table.wc-block-order-confirmation-totals__table tfoot tr:last-child th,
table.wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--sf-ink);
}

table.wc-block-order-confirmation-totals__table tfoot tr:last-child td .amount,
table.wc-block-order-confirmation-totals__table tfoot tr:last-child td bdi {
	color: var(--sf-primary);
	font-size: 20px;
}

table.wc-block-order-confirmation-totals__table a {
	color: var(--sf-ink);
	font-weight: 600;
}

table.wc-block-order-confirmation-totals__table a:hover {
	color: var(--sf-primary);
}

/* Addresses */
.wc-block-order-confirmation-address-wrapper {
	gap: 28px;
}

.wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-shipping-address {
	font-size: 15px;
	font-style: normal;
	line-height: 1.9;
	color: var(--sf-ink-soft);
}

.wc-block-order-confirmation-downloads table {
	width: 100%;
	border-collapse: collapse;
}

.wc-block-order-confirmation-downloads table th,
.wc-block-order-confirmation-downloads table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--sf-line);
	text-align: left;
}