/*
 * WooCommerce: cart, checkout and account pages, notices, forms, tables and buttons.
 * Restyles WooCommerce's default look to match the theme. Loaded after WooCommerce's own styles and plugins.css, only when WooCommerce is active.
 */

/* Page text. Scoped to the page content so the site header keeps its own colours on store pages. */

body.woocommerce .main {
	color: var(--text);
}

body.woocommerce .main a:not(.button) {
	color: var(--accent);
}

body.woocommerce .main a:not(.button):hover,
body.woocommerce .main a:not(.button):focus {
	color: var(--accent-hover);
	text-decoration: none;
}

/* Headings inside the page card use the account section style. */
.woocommerce .post-content h2,
.woocommerce .post-content h3 {
	margin: 40px 0 20px;
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.woocommerce .post-content > h2:first-child,
.woocommerce .post-content > h3:first-child {
	margin-top: 0;
}

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

.woocommerce del,
.woocommerce del .woocommerce-Price-amount {
	opacity: 0.5;
	font-weight: 400;
}

/* Buttons: WooCommerce's purple becomes the theme button. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.wc-block-components-button:not(.is-link) {
	display: inline-block;
	padding: 14px 26px;
	margin: 0;
	border: 0;
	border-radius: var(--card-radius);
	background-color: var(--accent);
	background-image: none;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--accent-hover);
	background-image: none;
	color: #fff;
	text-decoration: none;
	outline: none;
}

.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce input.button:disabled,
.wc-block-components-button:not(.is-link):disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Notices (cart updates, errors, info) */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.wc-block-components-notice-banner {
	position: relative;
	margin: 0 0 24px;
	padding: 16px 20px 16px 50px;
	border: 0;
	border-radius: var(--card-radius);
	background-color: #f2f7fe;
	box-shadow: inset 0 0 0 1px #d6e4fa;
	color: var(--ink-soft);
	list-style: none;
}

.woocommerce-message {
	background-color: #eefaf2;
	box-shadow: inset 0 0 0 1px #c9ecd6;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background-color: #fdf2f2;
	box-shadow: inset 0 0 0 1px #f5c9c9;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--accent);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin: -6px 0 -6px 20px;
}

.woocommerce-error li {
	margin: 0;
}

/* Notice prompts: icon, message and action button in one row. Loaded after the rules above, so these win. */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 24px;
	padding: 22px 26px;
	border: 1px solid #dce6fb;
	border-radius: var(--card-radius);
	background-color: #f3f7ff;
	color: var(--ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* The WooCommerce icon font is not loaded here, so the icon comes from Font Awesome.
   WooCommerce positions its icon absolutely and adds a clearing pseudo-element; both are reset so the icon sits in the row. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	position: static;
	top: auto;
	left: auto;
	display: block;
	flex: none;
	margin-right: 14px;
	font-family: 'Font Awesome 5 Free';
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	color: var(--accent);
	content: "\f05a";
}

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

.woocommerce-message {
	border-color: #cdeed8;
	background-color: #f0faf4;
}

.woocommerce-message::before {
	color: #1f7a3c;
	content: "\f058";
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-color: #f5cccc;
	background-color: #fdf4f4;
}

.woocommerce-error::before {
	color: #a11f1f;
	content: "\f06a";
}

/* The action button sits at the right and keeps its size. */
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-error .button {
	flex: none;
	float: none;
	margin: 0 0 0 auto;
	padding: 11px 20px;
	font-size: 0.875rem;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.woocommerce-info,
	.woocommerce-message,
	.woocommerce-error,
	.wc-block-components-notice-banner {
		flex-wrap: wrap;
		padding: 20px;
	}

	.woocommerce .woocommerce-info .button,
	.woocommerce .woocommerce-message .button,
	.woocommerce .woocommerce-error .button {
		width: 100%;
		margin: 4px 0 0;
		text-align: center;
	}
}

/* Forms */

.woocommerce form .form-row label,
.wc-block-components-text-input label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row select,
.woocommerce .select2-container--default .select2-selection--single,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-address-form select,
.wc-block-components-combobox input {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #d4d4d4;
	border-radius: var(--card-radius);
	background-color: #fff;
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.woocommerce form .form-row textarea {
	min-height: 120px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(43, 114, 230, 0.15);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 14px;
	line-height: 44px;
	color: var(--ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
}

.woocommerce form .form-row .input-checkbox,
.woocommerce-page form .form-row .input-checkbox {
	accent-color: var(--accent);
}

/* Form polish: field spacing, placeholders, and select boxes that match the text fields. */

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

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
}

.woocommerce form .form-row .required {
	color: #c0392b;
	border: 0;
	text-decoration: none;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.wc-block-components-text-input input::placeholder {
	color: #9aa3af;
	opacity: 1;
}

.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover {
	border-color: #b8bfc9;
}

.woocommerce form .form-row input.input-text[readonly] {
	background-color: #f7f8fa;
	color: var(--text);
}

.woocommerce .select2-container {
	width: 100% !important;
}

.woocommerce .select2-container--default .select2-selection--single {
	height: 46px;
	padding: 0;
	border: 1px solid #d4d4d4;
	border-radius: var(--card-radius);
	background-color: #fff;
}

.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(43, 114, 230, 0.15);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	color: var(--ink);
	font-size: 16px;
	line-height: 44px;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #9aa3af;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 12px;
	width: 18px;
	height: 44px;
}

.woocommerce .select2-dropdown {
	border: 1px solid #d4d4d4;
	border-radius: var(--card-radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.woocommerce .select2-container--default .select2-results__option {
	padding: 10px 14px;
	color: var(--ink-soft);
}

.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--accent);
	color: #fff;
}

.woocommerce .select2-search--dropdown .select2-search__field {
	border: 1px solid #d4d4d4;
	border-radius: var(--card-radius);
	padding: 8px 12px;
}

/* Checkout payment box and coupon form: cards that match the account pages. */

.woocommerce-form-coupon {
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	background-color: #fff;
}

#payment {
	border-radius: var(--card-radius);
	background-color: var(--bg-soft);
}

#payment ul.payment_methods {
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
	list-style: none;
}

#payment ul.payment_methods li {
	margin: 0 0 8px;
}

#payment div.payment_box {
	margin: 0 0 8px;
	padding: 16px 18px;
	border-radius: var(--card-radius);
	background-color: #fff;
	color: var(--text);
}

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

#payment .place-order {
	padding: 20px;
}

/* Tables (cart, order details, purchase history) */

.woocommerce table.shop_table {
	margin: 0 0 30px;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: #fff;
	color: var(--ink-soft);
	font-size: 15px;
}

.woocommerce table.shop_table th {
	padding: 14px 18px;
	background-color: var(--bg-soft);
	color: #7b8491;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--line);
}

.woocommerce table.shop_table td {
	padding: 16px 18px;
	border-top: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	border-top: 1px solid var(--line);
}

.woocommerce table.shop_table td a:not(.button) {
	color: var(--ink);
	font-weight: 600;
}

.woocommerce table.shop_table td a:not(.button):hover {
	color: var(--accent);
}

.woocommerce table.shop_table .product-remove a.remove {
	color: #7b8491 !important;
	background-color: transparent !important;
	border-radius: var(--card-radius);
}

.woocommerce table.shop_table .product-remove a.remove:hover {
	color: #fff !important;
	background-color: var(--ink-soft) !important;
}

.woocommerce td.actions .coupon input.input-text {
	width: auto;
}

/* Cart and checkout totals */

.woocommerce .cart_totals,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .order_details {
	float: none;
	width: 100%;
	margin: 0 0 30px;
}

.woocommerce .cart_totals h2,
.woocommerce .order_details > h2 {
	margin-top: 0;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	color: var(--ink);
	font-size: 1.05rem;
}

/* Account page: a profile header, then the pages as one horizontal tab bar. */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.account-profile {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.account-profile__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.account-profile__name {
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.account-profile__email {
	font-size: 0.85rem;
	color: #7b8491;
	overflow-wrap: anywhere;
}

/* The tab bar: one soft strip, the current page is a white pill. Log out sits at the end. */

.woocommerce-MyAccount-navigation {
	margin-bottom: 36px;
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 5px;
	overflow-x: auto;
	scrollbar-width: none;
	border-radius: 6px;
	background-color: var(--bg-soft);
	list-style: none;
}

/* Every tab is the same fixed height, so the content inside never changes it. */
.woocommerce-MyAccount-navigation li {
	display: flex;
	height: 42px;
	margin: 0;
	border: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	box-sizing: border-box;
	height: 100%;
	gap: 8px;
	line-height: 1.2;
	padding: 0 18px;
	border-radius: 4px;
	color: #7b8491;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Icons come from Font Awesome, which the theme already loads. */
.woocommerce-MyAccount-navigation li a::before {
	font-family: 'Font Awesome 5 Free';
	font-size: 13px;
	line-height: 1;
	font-weight: 900;
	color: #9aa3af;
	transition: color 0.15s ease-in-out;
}

/* Dashboard and Log out show only their icon. The labels stay in the markup for screen readers. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	gap: 0;
	padding: 0 14px;
	font-size: 0;
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	font-size: 15px;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f015"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\f290"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "\f3c5"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f007"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus {
	background-color: rgba(255, 255, 255, 0.7);
	color: var(--ink);
	outline: none;
}

.woocommerce-MyAccount-navigation li a:hover::before,
.woocommerce-MyAccount-navigation li a:focus::before {
	color: var(--accent);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: #fff;
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.woocommerce-MyAccount-navigation li.is-active a::before {
	color: var(--accent);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-left: auto;
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: #9aa3af;
}

@media (max-width: 1100px) {
	.woocommerce-MyAccount-navigation li a {
		padding: 0 12px;
		font-size: 0.85rem;
	}

	.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a,
	.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
		padding: 0 14px;
		font-size: 0;
	}
}

@media (max-width: 767px) {
	.account-profile__name {
		font-size: 1.05rem;
	}

	/* Tabs scroll sideways on small screens instead of wrapping. */
	.woocommerce-MyAccount-navigation ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-MyAccount-navigation li a {
		padding: 0 14px;
	}
}

/* Account content: headings, address cards and forms. */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	margin: 0 0 16px;
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
}

.woocommerce-MyAccount-content p {
	margin: 0 0 16px;
	line-height: 1.6;
}

/* Dashboard greeting: the first paragraph reads as a lead line. */
.woocommerce-MyAccount-content > p:first-of-type {
	margin-bottom: 28px;
	font-size: 1.1rem;
	color: var(--ink-soft);
}

.woocommerce-MyAccount-content > p:first-of-type strong {
	color: var(--ink);
}

/* Order status as a pill. */
.woocommerce mark.order-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: var(--bg-soft);
	color: var(--ink-soft);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
}

.woocommerce mark.order-status.status-completed {
	background-color: #eefaf2;
	color: #1f7a3c;
}

.woocommerce mark.order-status.status-processing {
	background-color: #f2f7fe;
	color: #1b5fc1;
}

.woocommerce mark.order-status.status-on-hold,
.woocommerce mark.order-status.status-pending {
	background-color: #fff8e6;
	color: #8a5a00;
}

.woocommerce mark.order-status.status-cancelled,
.woocommerce mark.order-status.status-failed,
.woocommerce mark.order-status.status-refunded {
	background-color: #fdf2f2;
	color: #a11f1f;
}

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-table--order-details {
	margin-bottom: 30px;
}

/* Billing and shipping stack, one per row. Also beats the two-column .u-columns rule below. */
.woocommerce .u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

.woocommerce-Addresses::before,
.woocommerce-Addresses::after {
	display: none;
}

.woocommerce-Address {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	background-color: #fff;
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.04);
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.05rem;
}

/* Edit and Add as outline buttons. */
.woocommerce-Address-title .edit {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--accent);
	border-radius: var(--card-radius);
	background-color: transparent;
	color: var(--accent);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.woocommerce-Address-title .edit:hover,
.woocommerce-Address-title .edit:focus {
	background-color: var(--accent);
	color: #fff;
}

.woocommerce-Address address {
	color: var(--text);
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-Address p {
	margin: 0;
	color: #7b8491;
	line-height: 1.6;
}

.woocommerce-EditAccountForm fieldset {
	margin: 40px 0 0;
	padding: 0;
	border: 0;
}

.woocommerce-EditAccountForm legend {
	margin-bottom: 16px;
	padding: 0;
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ink);
}

.woocommerce-EditAccountForm p.form-row {
	margin: 0 0 20px;
}

.woocommerce-EditAccountForm .button {
	margin-top: 8px;
}

/* Logged-out account page: login and register side by side, each in a card. */

.woocommerce .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.woocommerce .u-columns::before,
.woocommerce .u-columns::after {
	display: none;
}

.woocommerce .u-columns .u-column1,
.woocommerce .u-columns .u-column2 {
	float: none;
	width: auto;
	min-width: 0;
}

.woocommerce-form-login,
.woocommerce-form-register {
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	background-color: #fff;
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

.woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 0.875rem;
}

@media (max-width: 767px) {
	.woocommerce-Addresses,
	.woocommerce .u-columns {
		grid-template-columns: 1fr;
	}

	.woocommerce-form-login,
	.woocommerce-form-register {
		padding: 24px;
	}
}

/* Checkout and cart blocks */

.wc-block-components-product-name,
.wc-block-components-product-metadata {
	color: var(--ink);
}

.wc-block-components-checkout-step__heading,
.wc-block-cart__main .wc-block-components-sidebar-layout h2,
.wc-block-components-checkout-step__title {
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	color: var(--ink);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item-tax-value {
	color: var(--ink);
	font-weight: 600;
}

.wc-block-components-order-summary-item__quantity {
	background-color: var(--accent);
}

.wc-block-checkout__actions_row .wc-block-components-button,
.wc-block-cart__submit .wc-block-components-button {
	border-radius: var(--card-radius);
}

/* Cart line items: a clean row with the product, its total and a text Remove link instead of the trash icon. */

.wc-block-cart-items__row {
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}

/* Cart items: product image on the left, then the title, price and description. The total on the right stays hidden.
   Prefixed with .woocommerce so these beat WooCommerce's own cart grid rules, whichever stylesheet loads first. */
.wc-block-cart-item__total {
	display: none;
}

.woocommerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row,
.woocommerce .is-medium table.wc-block-cart-items .wc-block-cart-items__row,
.woocommerce .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.woocommerce .is-small table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 96px minmax(0, 1fr);
	column-gap: 20px;
}

.woocommerce .wc-block-cart .wc-block-cart-item__image,
.woocommerce .wc-block-cart .wc-block-cart-item__image img {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
}

.woocommerce .wc-block-cart .wc-block-cart-item__product,
.woocommerce .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.woocommerce .is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2 / -1;
}

/* The title uses the body font, so it no longer matches the bold total. */
/* Title, price, description and Remove link all share one size. */
.wc-block-components-product-name,
.woocommerce .wc-block-cart .wc-block-components-product-price,
.wc-block-components-product-metadata__description,
.wc-block-cart-item__remove-link {
	font-size: 1.05rem;
}

.wc-block-components-product-name {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-weight: 500;
	color: var(--ink);
}

.wc-block-components-product-metadata__description {
	margin-top: 6px;
	color: #7b8491;
	line-height: 1.6;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__total-price {
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink);
}

.wc-block-components-quantity-selector {
	height: 40px;
	border: 1px solid #d4d4d4;
	border-radius: var(--card-radius);
	background-color: #fff;
}

.wc-block-components-quantity-selector__input {
	color: var(--ink);
	font-weight: 500;
}

/* Remove: the trash icon is hidden and the link reads "Remove". */
.wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #7b8491;
	font-size: 0.75rem !important;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-cart-item__remove-link svg {
	display: none;
}

.wc-block-cart-item__remove-link::after {
	content: "Remove";
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus {
	background: none;
	color: #a11f1f;
}

/* Empty cart: WooCommerce's block shows a sad face here. Replace it with a cart icon and centre the message. */

.wc-block-cart__empty-cart__title.with-empty-cart-icon {
	margin: 0 0 12px;
	padding-top: 48px;
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	text-align: center;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 72px;
	height: 72px;
	margin: 0 auto 28px;
	background-color: var(--accent);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20.5' r='1.25'/%3E%3Ccircle cx='18' cy='20.5' r='1.25'/%3E%3Cpath d='M2 3h3l2.7 12.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2L21 7H6.2'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20.5' r='1.25'/%3E%3Ccircle cx='18' cy='20.5' r='1.25'/%3E%3Cpath d='M2 3h3l2.7 12.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2L21 7H6.2'/%3E%3C/svg%3E");
	mask-size: 72px;
	-webkit-mask-size: 72px;
}

.woocommerce .cart-empty,
.woocommerce .return-to-shop {
	color: var(--text);
	text-align: center;
}

.woocommerce .return-to-shop {
	margin-top: 20px;
}

/* Pagination and sorting on shop and account lists */

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	gap: 8px;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: var(--card-radius);
	background-color: #fff;
	box-shadow: inset 0 0 0 1px rgba(229, 229, 229, 0.8);
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--accent);
	color: #fff;
}

/* Small screens: stack the cart and checkout columns, keep tables scrollable. */

@media (max-width: 767px) {
	.woocommerce table.shop_table {
		font-size: 14px;
	}

	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		padding: 12px;
	}

	.woocommerce-message .button,
	.woocommerce-info .button {
		float: none;
		display: block;
		margin: 12px 0 0;
	}
}

.wc-block-checkout__actions,
.wc-block-cart__sidebar {
	margin-bottom: 0;
}

.woocommerce-MyAccount-content em {
	font-size: 15px;
}