/*!
 * Kirtsy Calibrations: WooCommerce styling.
 *
 * Loaded only on store pages. Shop, product and My Account pages are styled dark to match the
 * site. Cart and checkout sit on a light panel: payment forms are easier to read and trust
 * on a light background, and WooCommerce's own block styles are written for one.
 */

/* ==========================================================================
   Shared: notices, buttons, forms
   ========================================================================== */

.woocommerce-notices-wrapper {
	margin: 0 0 24px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-error {
	position: relative;
	margin: 0 0 22px;
	padding: 16px 20px 16px 52px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--boost);
	border-radius: var(--radius);
	background: var(--steel-2);
	color: var(--billet);
	list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 16px;
	left: 18px;
	color: var(--boost-2);
}

.woocommerce-message {
	border-left-color: var(--ok);
}

.woocommerce-message::before {
	color: var(--ok);
}

.woocommerce-error {
	border-left-color: var(--err);
}

.woocommerce-error::before {
	color: var(--err);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--boost-2);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin: 0 14px 0 0;
}

@media (max-width: 560px) {
	/* WooCommerce floats the button to the right of the message. On a phone that leaves the words a sliver to wrap in
	   ("Confirm email address" beside a long sentence), so the button goes under the text instead. */
	.woocommerce-message,
	.woocommerce-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.woocommerce-message .button,
	.woocommerce-info .button {
		order: 1;
		float: none;
		margin: 14px 0 0;
	}

	/* WooCommerce's float-clearing box would become an item of this column. */
	.woocommerce-message::after,
	.woocommerce-info::after {
		content: none;
		display: none;
	}
}

.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),
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--redline);
	border-radius: var(--radius);
	background: var(--redline);
	color: #fff;
	font-family: var(--f-display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover {
	border-color: var(--redline-2);
	background: var(--redline-2);
	color: #fff;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* A red button that has to wait ("Add to cart" on a product with options, until one is chosen). WooCommerce marks it with a
   class instead of the disabled attribute and paints it purple at half strength, which is off-brand and hard to read.
   Grey fill and light text keep it clearly switched off and readable (8.7:1). */
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover {
	border-color: var(--line);
	background: var(--steel-2);
	color: var(--billet-dim);
	opacity: 1;
	cursor: not-allowed;
}

/* Secondary buttons: "Apply coupon", "Update cart", "View", and the like. */
.woocommerce .coupon button.button,
.woocommerce button[name='update_cart'],
.woocommerce a.button.wc-forward:not(.checkout-button),
.woocommerce-MyAccount-content .button:not(.alt),
.woocommerce a.button.view,
.woocommerce a.button.download {
	border-color: var(--edge);
	background: transparent;
	color: var(--billet);
}

.woocommerce .coupon button.button:hover,
.woocommerce button[name='update_cart']:hover,
.woocommerce a.button.wc-forward:not(.checkout-button):hover,
.woocommerce-MyAccount-content .button:not(.alt):hover,
.woocommerce a.button.view:hover,
.woocommerce a.button.download:hover {
	border-color: var(--boost-2);
	background: transparent;
	color: #fff;
}

.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 6px;
	color: var(--billet);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row .required {
	color: var(--err);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.woocommerce-page .woocommerce-ordering select,
.woocommerce form .form-row .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	background: var(--void);
	color: var(--billet);
	font: inherit;
	font-size: 1rem;
	line-height: 1.3;
	box-shadow: none;
}

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

/* The browser's own placeholder grey is 4.3:1 on these fields; WCAG asks for 4.5:1. */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--billet-faint);
	opacity: 1;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity .qty:focus {
	border-color: var(--boost-2);
	outline: 3px solid var(--boost-2);
	outline-offset: 1px;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--err);
	border-width: 2px;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--edge);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--billet);
	line-height: 1.3;
}

.select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
	color: var(--billet-faint);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

.select2-dropdown {
	border: 1px solid var(--edge);
	background: var(--steel);
	color: var(--billet);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--edge);
	background: var(--void);
	color: var(--billet);
}

/* The entry that is currently chosen. WooCommerce gives it a light grey background (#ddd), which is made for dark text, and this list uses
   light text: without this rule the chosen entry is close to unreadable whenever the pointer or the arrow keys are on another row. */
.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[data-selected='true'] {
	background: var(--line);
	color: var(--billet);
}

/* The row the pointer or the arrow keys are on. This rule comes after the one above, so it wins when a row is both. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--redline);
	color: #fff;
}

.woocommerce form .form-row input[type='checkbox'],
.woocommerce form .form-row input[type='radio'] {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	accent-color: var(--redline);
	vertical-align: middle;
}

.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	font-weight: 400 !important;
}

/* ==========================================================================
   Shop and category pages
   ========================================================================== */

.woocommerce .woocommerce-result-count {
	float: none;
	margin: 0 0 18px;
	color: var(--billet-dim);
	font-size: 0.92rem;
}

.woocommerce .woocommerce-ordering {
	float: none;
	margin: 0 0 24px;
}

.woocommerce-page .woocommerce-ordering select {
	width: auto;
	min-width: 220px;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/* WooCommerce puts the "woocommerce" class on <body> itself on shop pages, so no "body ..." prefix.
   The doubled .product class outranks WooCommerce's own column widths. */
.woocommerce ul.products[class*='columns-'] li.product.product,
.woocommerce-page ul.products[class*='columns-'] li.product.product {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 22px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: linear-gradient(180deg, var(--steel-2), var(--steel));
	text-align: left;
	transition: border-color 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--boost);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin: 0 0 18px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0 22px;
	color: var(--billet);
	font-family: var(--f-display);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.15;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* The star rating sits in the same 22px margin as the title and price, not against the card's edge. */
.woocommerce ul.products li.product .star-rating {
	margin: 10px 22px 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 10px 0 0;
	padding: 0 22px;
	color: var(--billet);
	font-size: 1.05rem;
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin: 18px 22px 0;
}

.woocommerce ul.products li.product .added_to_cart {
	margin: 12px 22px 0;
	color: var(--boost-2);
}

/* WooCommerce moves the badge to the top-right corner of a shop card and pulls it half a character outside, where the card's edge clips
   it. Keep it where the product page puts it: inside the top-left corner. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	top: 14px;
	right: auto;
	left: 14px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--radius);
	background: var(--redline);
	color: #fff;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* The struck-through regular price. WooCommerce fades it to half strength in its own shop-grid and product-page rules,
   which leaves it at 3.9:1 on the dark cards; keep it full strength in the dim grey instead (6.4:1). */
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--billet-faint);
	opacity: 1;
}

.woocommerce .price ins {
	background: none;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination {
	margin: 0 0 40px;
	text-align: left;
}

.woocommerce nav.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	float: none;
	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: 46px;
	min-height: 46px;
	padding: 8px 14px;
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	background: transparent;
	color: var(--billet);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--boost-2);
	background: transparent;
	color: #fff;
}

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

.term-description,
.woocommerce-products-header__description {
	max-width: var(--measure);
	margin: 0 0 28px;
	color: var(--billet-dim);
}

@media (max-width: 900px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Single product
   ========================================================================== */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.woocommerce div.product::before,
.woocommerce div.product::after {
	display: none;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce div.product div.images img {
	border: 1px solid var(--line);
	border-radius: 6px;
}

.woocommerce div.product .product_title {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.02;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin: 0 0 18px;
	color: var(--billet);
	font-size: 1.5rem;
	font-weight: 600;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 24px;
	color: var(--billet-dim);
	line-height: 1.7;
}

/* Stock labels. WooCommerce's own colours are made for a white page (its red is 2.5:1 on black). */
.woocommerce div.product p.stock.in-stock {
	color: var(--ok);
}

.woocommerce div.product p.stock.out-of-stock {
	color: var(--redline-text);
}

.woocommerce div.product p.stock.available-on-backorder {
	color: var(--warn);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin: 0 0 22px;
}

/* WooCommerce clears floats here with two empty pseudo-elements. In a flex row each one is an item of its own, and the gap beside
   the first one pushed the quantity box 12px in from the title and the price above it. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
	display: none;
}

.woocommerce div.product form.cart .quantity {
	float: none;
	margin: 0;
}

.woocommerce .quantity .qty {
	width: 88px;
	padding: 11px 8px;
	text-align: center;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin: 0 0 12px;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0 0 8px;
	text-align: left;
}

.woocommerce div.product form.cart .variations label {
	color: var(--billet);
	font-weight: 600;
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
	max-width: 420px;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	background: var(--void);
	color: var(--billet);
}

.woocommerce div.product .product_meta {
	padding: 18px 0 0;
	border-top: 1px solid var(--line);
	color: var(--billet-dim);
	font-size: 0.9rem;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin: 0 0 6px;
}

.woocommerce div.product .product_meta a {
	color: var(--boost-2);
}

.kc-legal-note {
	margin: 18px 0 22px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--warn);
	border-radius: var(--radius);
	background: #1d1a11;
	color: var(--billet-dim);
	font-size: 0.88rem;
	line-height: 1.55;
}

.kc-legal-note a {
	color: var(--boost-2);
}

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 8px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--line);
	overflow: visible;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--steel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 22px;
	color: var(--billet-dim);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-color: var(--redline);
	background: var(--steel-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: #fff;
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var(--measure);
	margin: 0 0 20px;
	color: var(--billet);
	line-height: 1.7;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	margin: 0 0 14px;
	font-size: 1.5rem;
}

.woocommerce div.product section.related,
.woocommerce div.product section.upsells {
	grid-column: 1 / -1;
	margin-top: 24px;
}

.woocommerce div.product section.related > h2,
.woocommerce div.product section.upsells > h2 {
	margin: 0 0 22px;
	font-size: 1.7rem;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-color: var(--line);
	background: transparent;
	color: var(--billet);
}

/* Browsers centre a table heading unless told otherwise, which pushed "Size" away from the left edge of its section. */
.woocommerce table.shop_attributes th {
	padding-left: 0;
	text-align: left;
}

.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes td p {
	font-style: normal;
}

.woocommerce .star-rating {
	color: var(--warn);
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* WooCommerce greys the author, "verified owner" and date to #767676, which is 4.3:1 on this page. */
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
	color: var(--billet-faint);
}

/* Review form (the product "Reviews" tab). */
.woocommerce #review_form #respond {
	max-width: 640px;
}

.woocommerce #review_form #respond p {
	margin: 0 0 16px;
}

.woocommerce #review_form #respond label {
	display: block;
	margin: 0 0 6px;
	color: var(--billet);
	font-size: 0.92rem;
	font-weight: 600;
}

.woocommerce #review_form #respond input[type='text'],
.woocommerce #review_form #respond input[type='email'],
.woocommerce #review_form #respond textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	background: var(--void);
	color: var(--billet);
	font: inherit;
	font-size: 1rem;
	box-shadow: none;
}

.woocommerce #review_form #respond textarea {
	min-height: 140px;
}

.woocommerce #review_form #respond input[type='text']:focus,
.woocommerce #review_form #respond input[type='email']:focus,
.woocommerce #review_form #respond textarea:focus {
	border-color: var(--boost-2);
	outline: 3px solid var(--boost-2);
	outline-offset: 1px;
}

.woocommerce #review_form #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.woocommerce #review_form #respond .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.woocommerce #review_form #respond .comment-form-cookies-consent input {
	margin-top: 5px;
}

.woocommerce p.stars a {
	color: var(--warn);
}

@media (max-width: 860px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ==========================================================================
   Tables (cart, orders, downloads) and My Account
   ========================================================================== */

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--line);
	border-collapse: separate;
	border-radius: var(--radius);
	border-spacing: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid var(--line);
	color: var(--billet);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	background: var(--steel-2);
	color: var(--billet-dim);
	font-family: var(--f-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

/* Pay, View and Cancel share one table cell; give them room so their borders do not touch. */
.woocommerce td.woocommerce-orders-table__cell-order-actions a.button {
	margin: 0 6px 6px 0;
}

@media (max-width: 768px) {
	/* WooCommerce's phone layout hides the order number (it is a row header, not a normal cell), which leaves every order
	   without a name. Show it as the first line of the order, like the other lines. */
	.woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number {
		display: block;
		font-weight: 400;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell-order-number::before {
		content: attr(data-title) ': ';
		float: left;
		font-weight: 700;
	}
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.woocommerce-account:not(.logged-in) .woocommerce,
.woocommerce-account .woocommerce:has(> .woocommerce-form-login),
.woocommerce-account .woocommerce:has(> .u-columns) {
	display: block;
}

.woocommerce-account .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

/* WooCommerce clears floats with two empty pseudo-elements on this container. In a grid each one becomes a cell of its own:
   the first took the menu's place, which pushed the menu into the wide column and the page content into the narrow one. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--steel);
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--line-soft);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 18px;
	border-left: 3px solid transparent;
	color: var(--billet-dim);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--steel-2);
	color: #fff;
}

.woocommerce-MyAccount-navigation .is-active a {
	border-left-color: var(--redline);
	background: var(--steel-2);
	color: #fff;
}

.woocommerce-MyAccount-content {
	min-width: 0;
	color: var(--billet);
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--boost-2);
}

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

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 480px;
	padding: 26px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--redline);
	border-radius: var(--radius);
	background: var(--steel);
}

.woocommerce .u-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

/* WooCommerce's clearfix pseudo-elements would each become an empty grid cell. */
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
	content: none;
	display: none;
}

/* The show-password eye icon ships dark; flip it for the dark account forms. */
.woocommerce-account .show-password-input {
	filter: invert(1) brightness(0.85);
}

/* WooCommerce draws the eye button 22px wide; WCAG 2.2 wants at least 24px and 44px is easier to tap. */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	right: 0;
}

.woocommerce form .password-input input,
.woocommerce-page form .password-input input {
	padding-right: 48px;
}

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

.woocommerce .u-columns > div > h2 {
	margin: 0 0 16px;
	font-size: 1.6rem;
}

.woocommerce-Address {
	margin: 0 0 24px;
}

.woocommerce-Address-title h3,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	margin: 0 0 12px;
	font-size: 1.5rem;
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.woocommerce .u-columns {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Cart, checkout, order received: light panel
   ========================================================================== */

body.woocommerce-cart .page-body .entry-content,
body.woocommerce-checkout .page-body .entry-content {
	max-width: none;
	padding: clamp(18px, 3.4vw, 40px);
	border-radius: 6px;
	background: #f4f5f6;
	color: #15191d;
	color-scheme: light;
}

body.woocommerce-cart .kc-prose > *,
body.woocommerce-checkout .kc-prose > * {
	max-width: none;
}

body.woocommerce-cart .entry-content p,
body.woocommerce-cart .entry-content li,
body.woocommerce-checkout .entry-content p,
body.woocommerce-checkout .entry-content li {
	color: #15191d;
}

body.woocommerce-cart .entry-content a:not(.button):not(.wc-block-components-button):not(.wp-block-button__link):not(.wp-element-button),
body.woocommerce-checkout .entry-content a:not(.button):not(.wc-block-components-button):not(.wp-block-button__link):not(.wp-element-button) {
	color: #0b5cad;
}

body.woocommerce-cart .entry-content h2,
body.woocommerce-cart .entry-content h3,
body.woocommerce-checkout .entry-content h2,
body.woocommerce-checkout .entry-content h3 {
	color: #15191d;
}

body.woocommerce-cart .entry-content .woocommerce form .form-row label,
body.woocommerce-checkout .entry-content .woocommerce form .form-row label,
body.woocommerce-checkout .entry-content .woocommerce-form__label-for-checkbox {
	color: #15191d;
}

body.woocommerce-cart .entry-content .woocommerce form .form-row input.input-text,
body.woocommerce-cart .entry-content .woocommerce form .form-row textarea,
body.woocommerce-cart .entry-content .woocommerce form .form-row select,
body.woocommerce-cart .entry-content .woocommerce .quantity .qty,
body.woocommerce-checkout .entry-content .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .entry-content .woocommerce form .form-row textarea,
body.woocommerce-checkout .entry-content .woocommerce form .form-row select,
body.woocommerce-checkout .entry-content .select2-container .select2-selection--single {
	border-color: #7a838b;
	background: #fff;
	color: #15191d;
}

body.woocommerce-cart .entry-content .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-checkout .entry-content .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #15191d;
}

body.woocommerce-cart .entry-content .woocommerce table.shop_table,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table {
	border-color: #c9ced2;
	background: #fff;
}

body.woocommerce-cart .entry-content .woocommerce table.shop_table th,
body.woocommerce-cart .entry-content .woocommerce table.shop_table td,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table th,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table td {
	border-top-color: #dde1e4;
	color: #15191d;
}

body.woocommerce-cart .entry-content .woocommerce table.shop_table thead th,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table thead th {
	background: #e8ebed;
	color: #3c434a;
}

body.woocommerce-cart .entry-content .woocommerce table.shop_table td a:not(.button),
body.woocommerce-checkout .entry-content .woocommerce table.shop_table td a:not(.button) {
	color: #0b5cad;
}

body.woocommerce-cart .entry-content .woocommerce-message,
body.woocommerce-cart .entry-content .woocommerce-info,
body.woocommerce-cart .entry-content .woocommerce-error,
body.woocommerce-checkout .entry-content .woocommerce-message,
body.woocommerce-checkout .entry-content .woocommerce-info,
body.woocommerce-checkout .entry-content .woocommerce-error {
	border-color: #c9ced2;
	background: #fff;
	color: #15191d;
}

body.woocommerce-checkout .entry-content #payment,
body.woocommerce-checkout .entry-content #payment div.payment_box {
	border-radius: var(--radius);
	background: #e8ebed;
	color: #15191d;
}

body.woocommerce-checkout .entry-content #payment div.payment_box::before {
	border-bottom-color: #e8ebed;
}

body.woocommerce-checkout .entry-content #payment ul.payment_methods {
	border-bottom-color: #c9ced2;
}

body.woocommerce-checkout .entry-content .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .entry-content .woocommerce-terms-and-conditions-wrapper p {
	font-size: 0.9rem;
}

body.woocommerce-cart .entry-content .cart_totals h2,
body.woocommerce-checkout .entry-content #order_review_heading,
body.woocommerce-checkout .entry-content h3 {
	margin: 0 0 14px;
	font-size: 1.5rem;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals {
	float: none;
	width: 100%;
}

.woocommerce-cart table.cart img {
	width: 72px;
	height: auto;
	border-radius: var(--radius);
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	float: none;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 200px;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #7a838b;
	border-radius: var(--radius);
	background: #fff;
	color: #15191d;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 1rem;
	font-size: 1.25rem;
}

/* Product names in the cart and checkout summaries are ordinary text, not page headings. */
body.woocommerce-cart .entry-content .wc-block-components-product-name,
body.woocommerce-checkout .entry-content .wc-block-components-product-name {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.35;
	text-transform: none;
}

/* Required-field stars and error text use the dark-theme pink elsewhere; on the light panel they need a darker red. */
body.woocommerce-cart .entry-content .required,
body.woocommerce-checkout .entry-content .required,
body.woocommerce-checkout .entry-content abbr.required {
	color: #b3261e;
	text-decoration: none;
}

/* Cart rows on a phone. WooCommerce's own phone layout puts every row on a grid that is at least 320px wide, and 345px when a
   "Save $x" badge sits under the price. The light panel leaves 314px on a 390px phone and 284px on a 360px one, so the price
   column ran past the panel's edge. Let the product column shrink and keep the price at the right-hand edge; on very narrow
   phones the price moves under the product details instead. */
body.woocommerce-cart .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 64px minmax(0, 1fr) auto;
	column-gap: 12px;
}

body.woocommerce-cart .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	padding-right: 0;
}

body.woocommerce-cart .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
}

body.woocommerce-cart .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3;
}

@media (max-width: 359px) {
	body.woocommerce-cart .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	body.woocommerce-cart .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
		margin-top: 8px;
		text-align: left;
	}

	body.woocommerce-cart .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-start;
	}
}

/* The cart's "Proceed to checkout" bar sticks to the bottom of the screen on phones and tablets: lift the chat button above it. */
@media (max-width: 781px) {
	body.woocommerce-cart .kc-chat {
		bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
	}
}

/* Quantity badge on the checkout summary thumbnail: dark pill, white number. */
body.woocommerce-checkout .entry-content .wc-block-components-order-summary-item__quantity {
	border-color: #15191d;
	background: #15191d;
	box-shadow: 0 0 0 2px #f4f5f6;
	color: #fff;
}

body.woocommerce-checkout .entry-content .wc-block-components-order-summary-item__quantity span {
	color: #fff;
}

/* WooCommerce fades the +/- quantity buttons to 60%, which drops their symbols below 4.5:1 on this panel. */
body.woocommerce-cart .entry-content .wc-block-components-quantity-selector__button:not(:disabled),
body.woocommerce-checkout .entry-content .wc-block-components-quantity-selector__button:not(:disabled) {
	opacity: 1;
	color: #15191d;
}

/* WooCommerce cart and checkout blocks on the light panel */
body.woocommerce-cart .entry-content .wc-block-components-text-input label,
body.woocommerce-checkout .entry-content .wc-block-components-text-input label,
body.woocommerce-cart .entry-content .wc-block-components-form .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .entry-content .wc-block-components-form .wc-block-components-text-input.is-active label {
	color: #3c434a;
}

body.woocommerce-cart .entry-content .wc-block-components-text-input input,
body.woocommerce-checkout .entry-content .wc-block-components-text-input input,
body.woocommerce-checkout .entry-content .wc-block-components-select .wc-blocks-components-select__select,
body.woocommerce-checkout .entry-content textarea {
	background: #fff;
	color: #15191d;
}

body.woocommerce-cart .entry-content .wc-block-components-totals-wrapper,
body.woocommerce-checkout .entry-content .wc-block-components-totals-wrapper {
	border-color: #c9ced2;
}

/* Row headers in the cart, checkout and pay-for-order tables. The article text style gives every table
   header a dark fill, which would hide the dark label text on the light panel. */
body.woocommerce-cart .entry-content .woocommerce table.shop_table tbody th,
body.woocommerce-cart .entry-content .woocommerce table.shop_table tfoot th,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table tbody th,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table tfoot th {
	background: #fff;
	font-weight: 600;
}

body.woocommerce-checkout .entry-content .woocommerce table.shop_table tfoot tr:last-child th,
body.woocommerce-checkout .entry-content .woocommerce table.shop_table tfoot tr:last-child td {
	background: #f4f5f6;
	font-size: 1.05rem;
	font-weight: 700;
}

/* Sign-in, register and reset forms that appear on the light checkout panel (for example when a visitor
   follows an old payment link): same light card as the rest of the panel, readable labels and links. */
body.woocommerce-cart .entry-content .woocommerce-form-login,
body.woocommerce-cart .entry-content .woocommerce form.login,
body.woocommerce-cart .entry-content .woocommerce form.register,
body.woocommerce-cart .entry-content .woocommerce form.lost_reset_password,
body.woocommerce-checkout .entry-content .woocommerce-form-login,
body.woocommerce-checkout .entry-content .woocommerce form.login,
body.woocommerce-checkout .entry-content .woocommerce form.register,
body.woocommerce-checkout .entry-content .woocommerce form.lost_reset_password {
	border-color: #c9ced2;
	border-top-color: var(--redline);
	background: #fff;
	color: #15191d;
}

body.woocommerce-cart .entry-content .woocommerce form.login .lost_password a,
body.woocommerce-checkout .entry-content .woocommerce form.login .lost_password a {
	color: #0b5cad;
}

/* Details printed under an item name, such as "Tune order: KC-00348". */
.woocommerce ul.wc-item-meta {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.woocommerce ul.wc-item-meta li {
	margin: 0;
	padding: 0;
}

.woocommerce ul.wc-item-meta li p {
	display: inline;
	margin: 0;
}

/* "What happens next" under a paid tune order's receipt. */
.kc-thankyou-note {
	margin: 28px 0 0;
	padding: 20px 22px;
	border: 1px solid #c9ced2;
	border-left: 4px solid var(--redline);
	border-radius: var(--radius);
	background: #fff;
}

.kc-thankyou-note h2 {
	margin: 0 0 8px;
	font-size: 1.4rem;
}

.kc-thankyou-note p {
	margin: 0 0 12px;
}

.kc-thankyou-note p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.woocommerce-order-received .woocommerce-order,
.woocommerce-order-pay .woocommerce {
	color: inherit;
}

.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 36px;
	margin: 0 0 28px;
	padding: 18px 20px;
	border: 1px solid #c9ced2;
	border-radius: var(--radius);
	background: #fff;
	list-style: none;
}

/* WooCommerce's clearfix pseudo-elements would each become an empty flex item and push the first detail right. */
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
	content: none;
	display: none;
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: #3c434a;
	font-size: 0.8rem;
	text-transform: uppercase;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 4px;
	color: #15191d;
	font-size: 1.05rem;
	text-transform: none;
}

.woocommerce-store-notice,
p.demo_store {
	background: var(--redline);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce ul.products li.product {
		transition: none;
	}
}