@charset "UTF-8";

/*
Theme Name: _s

WooCommerce styles override
*/

/* Design tokens — colours
 *
 * Source of truth: design/tokens.json (extracted from design/index.html :root).
 * These SCSS variables exist only to feed sass/base/_root.scss. Components must
 * consume the custom property (var(--primary-color)), never the $variable.
--------------------------------------------- */

/* Underscores base-layer variables
 *
 * Consumed by sass/base/ and sass/components/ inherited from _s. Remapped onto
 * the design palette so the base layer no longer ships its own colour scheme.
--------------------------------------------- */

/* Design tokens — typography
 *
 * Source of truth: design/tokens.json. Components consume var(--body-font) etc.,
 * never these $variables directly.
--------------------------------------------- */

/* Design tokens — structure, spacing, radii, shadows, motion
 *
 * Source of truth: design/tokens.json. Components consume var(--space-lg) etc.
--------------------------------------------- */

/**
 * Shop tables
 */
table.shop_table_responsive thead {
	display: none;
}

table.shop_table_responsive tbody th {
	display: none;
}

table.shop_table_responsive tr td {
	display: block;
	text-align: right;
	clear: both;
}

table.shop_table_responsive tr td::before {
	content: attr(data-title) ": ";
	float: left;
}

table.shop_table_responsive tr td.product-remove a {
	text-align: left;
}

table.shop_table_responsive tr td.product-remove::before {
	display: none;
}

table.shop_table_responsive tr td.actions::before,
table.shop_table_responsive tr td.download-actions::before {
	display: none;
}

table.shop_table_responsive tr td.download-actions .button {
	display: block;
	text-align: center;
}

@media screen and (min-width: 48em) {

	table.shop_table_responsive thead {
		display: table-header-group;
	}

	table.shop_table_responsive tbody th {
		display: table-cell;
	}

	table.shop_table_responsive tr th,
	table.shop_table_responsive tr td {
		text-align: left;
	}

	table.shop_table_responsive tr td {
		display: table-cell;
	}

	table.shop_table_responsive tr td::before {
		display: none;
	}
}

/* Empty cart — woocommerce/cart/cart-empty.php. Not overridden; the
 * template prints just a notice div and a bare <p>, with nothing wrapping
 * them to treat as a single empty state, so they sat flush against the
 * top-left of the page instead of reading as an intentional "empty" screen.
--------------------------------------------- */
.wc-empty-cart-message {
	margin: var(--space-xl) auto;
	max-width: 28rem;
	text-align: center;
}

.return-to-shop {
	margin: 0;
	text-align: center;
}

/* Cart + cart totals — woocommerce/cart/cart.php, cart-totals.php.
 *
 * Neither template is overridden (both carry substantial real markup, not
 * just hooks); every selector below targets WooCommerce's own default
 * class names, same idiom as plugins/woocommerce/_single-product.scss.
--------------------------------------------- */
table.shop_table {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-collapse: collapse;
	border-radius: var(--border-radius-md);
	margin-top: var(--space-lg);
	overflow: hidden;
	width: 100%;
}

table.shop_table th,
table.shop_table td {
	padding: var(--space-md);
}

table.shop_table th {
	background: var(--surface-alt-color);
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-base-sm);
	font-weight: 600;
}

table.shop_table td {
	border-top: 1px solid var(--border-color);
	color: var(--text-color);
	vertical-align: middle;
}

.woocommerce-cart-form__contents .product-remove {
	text-align: center;
	width: 3rem;
}

.woocommerce-cart-form__contents .product-remove a.remove {
	background: var(--surface-alt-color);
	border-radius: var(--border-radius-pill);
	color: var(--secondary-color-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	height: 2rem;
	line-height: 1;
	text-decoration: none;
	transition: background var(--transition) ease, color var(--transition) ease;
	width: 2rem;
}

.woocommerce-cart-form__contents .product-remove a.remove:hover,
.woocommerce-cart-form__contents .product-remove a.remove:focus-visible {
	background: var(--secondary-color-dark);
	color: var(--surface-color);
}

.woocommerce-cart-form__contents .product-thumbnail {
	width: 5.5rem;
}

.woocommerce-cart-form__contents .product-thumbnail img {
	border-radius: var(--border-radius-sm);
	display: block;
	width: 4.5rem;
}

.woocommerce-cart-form__contents .product-name {
	font-weight: 600;
}

.woocommerce-cart-form__contents .product-name a {
	color: var(--heading-color);
}

.woocommerce-cart-form__contents .product-name a:hover,
.woocommerce-cart-form__contents .product-name a:focus-visible {
	color: var(--primary-color-dark);
}

.woocommerce-cart-form__contents .product-name .wc-item-meta {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	font-weight: 400;
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
}

.woocommerce-cart-form__contents .product-price,
.woocommerce-cart-form__contents .product-subtotal {
	color: var(--heading-color);
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce-cart-form__contents .product-quantity .quantity {
	align-items: stretch;
	display: inline-flex;
}

.woocommerce-cart-form__contents .product-quantity input.qty {
	background: var(--surface-alt-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	height: 2.75rem;
	padding: var(--space-sm);
	text-align: center;
	width: 3.75rem;
}

.woocommerce-cart-form__contents tr.actions td.actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	padding-top: var(--space-lg);
}

@media screen and (max-width: 47.99em) {

	.woocommerce-cart-form__contents tr.actions td.actions {
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-cart-form__contents tr.actions td.actions::before {
		display: none;
	}
}

.woocommerce-cart-form__contents .coupon {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-right: auto;
}

.woocommerce-cart-form__contents .coupon .input-text {
	background: var(--surface-alt-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	height: 2.75rem;
	padding: 0 var(--space-md);
}

.cart-collaterals {
	display: grid;
	gap: var(--space-2xl);
	margin-top: var(--space-2xl);
}

@media screen and (min-width: 48em) {

	.cart-collaterals {
		grid-template-columns: 1fr minmax(18rem, 22rem);
	}
}

.cart-collaterals .cross-sells {
	grid-row: 1;
}

.cart-collaterals .cross-sells > h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-bottom: var(--space-lg);
}

.cart-collaterals .cart_totals {
	align-self: start;
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	grid-row: 1;
	padding: var(--space-xl);
}

.cart-collaterals .cart_totals > h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-bottom: var(--space-md);
}

.cart-collaterals .cart_totals table.shop_table {
	background: transparent;
	border: 0;
	margin-top: 0;
}

.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
	border-top: 1px solid var(--border-color);
	padding: var(--space-sm) 0;
}

.cart-collaterals .cart_totals table.shop_table th {
	background: transparent;
	font-weight: 600;
}

.cart-collaterals .cart_totals table.shop_table tr:first-child th,
.cart-collaterals .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}

.cart-collaterals .cart_totals table.shop_table tr.order-total th,
.cart-collaterals .cart_totals table.shop_table tr.order-total td {
	color: var(--heading-color);
	font-size: var(--font-size-lg);
	font-weight: 700;
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout {
	margin-top: var(--space-lg);
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	justify-content: center;
	text-align: center;
	width: 100%;
}

/**
 * Products
 */

/* Product loop — shop archive, category/tag archives, related products,
 * upsells, [products] shortcode. All of these render through WooCommerce's
 * own content-product.php (no override exists in this theme — see
 * woocommerce/archive-product.php's docblock), which only prints hooks;
 * every class below is one of WooCommerce's own default class names, not
 * something invented here. Same "grid of cards" idiom as .why__grid /
 * .value-cards elsewhere in the theme (surface/border/radius/shadow card,
 * repeat(auto-fit, minmax(17rem, 1fr)) grid) — not a new design style.
--------------------------------------------- */
ul.products {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin: var(--space-3xl) 0 0;
	padding: 0;
	width: 100%;
}

ul.products.columns-1 {
	grid-template-columns: repeat(1, 1fr);
}

ul.products.columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

ul.products.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

ul.products.columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

ul.products.columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

ul.products.columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

@media screen and (max-width: 64em) {

	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 48em) {

	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 30em) {

	ul.products.columns-2,
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 {
		grid-template-columns: 1fr;
	}
}

ul.products li.product {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: box-shadow var(--transition) ease;
}

ul.products li.product:hover,
ul.products li.product:focus-within {
	box-shadow: var(--shadow-primary);
}

ul.products li.product img {
	aspect-ratio: 1;
	display: block;
	object-fit: contain;
	width: 100%;
}

ul.products .woocommerce-loop-product__link {
	color: inherit;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none;
}

ul.products .woocommerce-loop-product__title {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0;
	padding: var(--space-lg) var(--space-lg) 0;
}

ul.products .star-rating {
	color: var(--star-color);
	font-size: var(--font-size-sm);
	margin: var(--space-2xs) var(--space-lg) 0;
}

ul.products .price {
	color: var(--muted-color);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-md);
	font-weight: 600;
	margin-top: auto;
	padding: var(--space-xs) var(--space-lg) var(--space-lg);
}

ul.products .price ins {
	color: var(--heading-color);
	text-decoration: none;
}

ul.products .price del {
	opacity: 0.6;
}

ul.products .onsale {
	background: var(--secondary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	left: var(--space-md);
	padding: 0.3125rem var(--space-sm);
	position: absolute;
	top: var(--space-md);
	z-index: 1;
}

ul.products .button {
	background: var(--primary-color);
	border: 0;
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-base-sm);
	font-weight: 600;
	margin: 0 var(--space-lg) var(--space-lg);
	padding: var(--space-sm) var(--space-lg);
	text-align: center;
	text-decoration: none;
	transition: background var(--transition) ease, transform var(--transition) ease;
}

ul.products .button:hover,
ul.products .button:focus-visible {
	background: var(--primary-color-dark);
	transform: translateY(-0.125rem);
}

ul.products .button.loading {
	opacity: 0.6;
}

/* WooCommerce Blocks product grid (Products block etc.) — separate markup
 * from the classic ul.products loop above (.wc-block-grid__product-image
 * instead of an <img> inside li.product), so it needs its own cap: without
 * one, a tall product photo can stretch a grid card far past its
 * neighbours since this markup has no aspect-ratio box like the classic
 * loop's img rule does.
--------------------------------------------- */
.wc-block-grid__product-image img {
	max-height: 12rem;
}

/* Result count + sort — woocommerce_before_shop_loop, no shared wrapper
 * markup exists to make these a flex row without a template override, so
 * they're floated instead: a lighter-touch technique than adding PHP just
 * to lay out two paragraphs.
--------------------------------------------- */
.woocommerce-result-count {
	color: var(--muted-color);
	float: left;
	font-size: var(--font-size-base-sm);
	margin: 0;
}

.woocommerce-ordering {
	float: right;
}

.woocommerce-ordering select {
	background: var(--surface-alt-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: var(--font-size-base-sm);
	padding: var(--space-2xs) var(--space-sm);
}

/* Pagination — woocommerce_after_shop_loop. paginate_links( ['type' => 'list'] )
 * output, wrapped in WooCommerce's own <nav class="woocommerce-pagination">.
--------------------------------------------- */
.woocommerce-pagination {
	clear: both;
	margin-top: var(--space-3xl);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers {
	align-items: center;
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	color: var(--text-color);
	display: inline-flex;
	font-family: var(--heading-font);
	font-weight: 600;
	height: 2.75rem;
	justify-content: center;
	min-width: 2.75rem;
	padding-inline: var(--space-sm);
	text-decoration: none;
	transition: background var(--transition) ease, color var(--transition) ease;
}

.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:focus-visible {
	background: var(--kicker-surface-color);
	color: var(--primary-color-dark);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--surface-color);
}

.woocommerce-pagination .page-numbers.dots {
	background: transparent;
	border: 0;
}

@media screen and (max-width: 30em) {

	.woocommerce-result-count,
	.woocommerce-ordering {
		float: none;
		margin-bottom: var(--space-sm);
		width: 100%;
	}
}

/**
 * Single product
 */

/* Single product — gallery + summary, tabs, upsells.
 *
 * Same token-driven surface/grid idiom used everywhere else in the theme
 * (front-page.php's .product__grid, .why__grid, ul.products in
 * _products.scss) — not a new design style. content-single-product.php is
 * not overridden (see woocommerce/single-product.php's docblock); every
 * class targeted below is one of WooCommerce's own default class names.
 * No Related Products here — inc/woocommerce.php removes that hook.
--------------------------------------------- */
.product-breadcrumb {
	padding-top: var(--space-lg);
}

@keyframes freshdi-spin {

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

div.product {
	align-items: center;
	display: grid;
	gap: var(--space-2xl);
	grid-template-columns: 1fr;
	margin-top: var(--space-lg);
	position: relative;
}

@media screen and (min-width: 60rem) {

	div.product {
		grid-template-columns: minmax(0, 26rem) 1fr;
		gap: var(--space-4xl);
	}
}

div.product .onsale {
	background: var(--secondary-color);
	border-radius: var(--border-radius-pill);
	color: var(--surface-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-sm);
	font-weight: 600;
	left: var(--space-lg);
	letter-spacing: 0.08em;
	padding: 0.4375rem 1rem;
	position: absolute;
	top: var(--space-lg);
	z-index: 2;
}

div.product {

	/* Gallery — same elevated-card treatment as .product__visual
  (sass/components/product/_product.scss): white surface, shadow,
  gradient sheen and a drop-shadow on the image itself, replacing the
  flat grey box WooCommerce's own gallery styling gave it.
  --------------------------------------------- */
}

div.product .woocommerce-product-gallery {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow);
	padding: var(--space-2xl);
	position: relative;
}

div.product .woocommerce-product-gallery::before {
	background: var(--gradient-product-sheen);
	border-radius: var(--border-radius-lg);
	content: "";
	inset: 0;
	position: absolute;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	position: relative;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--border-radius-md);
	display: block;
	filter: var(--shadow-product-image);
	width: 100%;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	background: var(--surface-color);
	border-radius: var(--border-radius-pill);
	box-shadow: var(--shadow-sm);
	display: block;
	height: 2.5rem;
	position: absolute;
	right: var(--space-lg);
	top: var(--space-lg);
	transition: transform var(--transition) ease;
	width: 2.5rem;
	z-index: 9;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	border: 1.5px solid var(--heading-color);
	border-radius: 50%;
	content: "";
	height: 0.625rem;
	left: 0.8125rem;
	position: absolute;
	top: 0.8125rem;
	width: 0.625rem;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
	background: var(--heading-color);
	bottom: 0.75rem;
	content: "";
	height: 0.1875rem;
	position: absolute;
	right: 0.75rem;
	transform: rotate(45deg);
	width: 0.5rem;
}

div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover,
div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible {
	transform: scale(1.08);
}

div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
	padding: 0;
}

div.product .woocommerce-product-gallery .flex-control-thumbs li {
	cursor: pointer;
	list-style: none;
	width: 4.5rem;
}

div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	opacity: 0.6;
	transition: opacity var(--transition) ease, border-color var(--transition) ease;
}

div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	border-color: var(--primary-color);
	opacity: 1;
}

div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
	opacity: 1;
}

div.product {

	/* Summary column
  --------------------------------------------- */
}

div.product .summary.entry-summary .product_title {
	color: var(--heading-color);
	font-size: var(--font-size-h1);
	font-weight: 600;
	margin: 0 0 var(--space-sm);
}

div.product .summary.entry-summary .woocommerce-product-rating {
	align-items: center;
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

div.product .summary.entry-summary .woocommerce-product-rating .star-rating {
	color: var(--star-color);
	font-size: var(--font-size-base);
}

div.product .summary.entry-summary .woocommerce-product-rating .woocommerce-review-link {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
}

div.product .summary.entry-summary .price {
	color: var(--heading-color);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-price);
	font-weight: 700;
	margin-bottom: var(--space-md);
}

div.product .summary.entry-summary .price .woocommerce-Price-currencySymbol {
	font-size: 0.4em;
	position: relative;
	top: -1.2em;
}

div.product .summary.entry-summary .price del {
	color: var(--muted-color);
	font-size: var(--font-size-lg);
	opacity: 0.6;
}

div.product .summary.entry-summary .price del .woocommerce-Price-currencySymbol {
	top: 0;
}

div.product .summary.entry-summary .price ins {
	text-decoration: none;
}

div.product .summary.entry-summary .woocommerce-product-details__short-description {
	color: var(--muted-color);
	font-size: var(--font-size-md);
	margin-bottom: var(--space-lg);
}

div.product .summary.entry-summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

div.product .summary.entry-summary .product-specs {
	display: grid;
	gap: var(--space-xs) var(--space-lg);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	list-style: none;
	margin: var(--space-lg) 0;
	padding: 0;
}

div.product .summary.entry-summary .product-specs li {
	align-items: center;
	display: flex;
	font-weight: 700;
	gap: 0.6875rem;
}

div.product .summary.entry-summary .product-specs__yes {
	color: var(--success-color);
	font-weight: 800;
}

div.product .summary.entry-summary .product-specs__no {
	color: var(--secondary-color);
	font-weight: 800;
}

div.product .summary.entry-summary .stock {
	display: inline-block;
	font-weight: 700;
	margin-bottom: var(--space-lg);
}

div.product .summary.entry-summary .stock.in-stock {
	color: var(--success-color);
}

div.product .summary.entry-summary .stock.out-of-stock {
	color: var(--secondary-color-dark);
}

div.product .summary.entry-summary form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

div.product .summary.entry-summary form.cart .quantity {
	margin: 0;
}

div.product .summary.entry-summary form.cart input.qty {
	background: var(--surface-alt-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	height: 3.25rem;
	padding: var(--space-sm);
	text-align: center;
	transition: border-color var(--transition) ease;
	width: 4.5rem;
	appearance: textfield;
	-moz-appearance: textfield;
}

div.product .summary.entry-summary form.cart input.qty::-webkit-inner-spin-button,
div.product .summary.entry-summary form.cart input.qty::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
	opacity: 0.5;
}

div.product .summary.entry-summary form.cart input.qty:focus-visible {
	border-color: var(--primary-color);
	outline: none;
}

div.product .summary.entry-summary form.cart .single_add_to_cart_button {
	background: var(--primary-color);
	border: 0;
	border-radius: var(--border-radius-pill);
	box-shadow: var(--shadow-primary);
	color: var(--surface-color);
	cursor: pointer;
	font-family: var(--heading-font);
	font-size: 1.02rem;
	font-weight: 600;
	padding: var(--space-md) var(--space-xl);
	transition: background var(--transition) ease, transform var(--transition) ease;
}

div.product .summary.entry-summary form.cart .single_add_to_cart_button:hover,
div.product .summary.entry-summary form.cart .single_add_to_cart_button:focus-visible {
	background: var(--primary-color-dark);
	transform: translateY(-0.125rem);
}

div.product .summary.entry-summary form.cart .single_add_to_cart_button.loading {
	color: transparent;
	pointer-events: none;
	position: relative;
}

div.product .summary.entry-summary form.cart .single_add_to_cart_button.loading::after {
	animation: freshdi-spin 0.6s linear infinite;
	border: 2px solid var(--surface-color);
	border-radius: 50%;
	border-top-color: transparent;
	content: "";
	height: 1.25rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.25rem;
}

div.product .summary.entry-summary form.cart .added_to_cart {
	color: var(--primary-color-dark);
	font-size: var(--font-size-base-sm);
	font-weight: 600;
}

div.product .summary.entry-summary .product_meta {
	border-top: 1px solid var(--border-color);
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	padding-top: var(--space-md);
}

div.product .summary.entry-summary .product_meta > span {
	display: block;
	margin-bottom: var(--space-2xs);
}

div.product .summary.entry-summary .product_meta a {
	color: var(--primary-color-dark);
}

/* Tabs, upsells — woocommerce_after_single_product_summary
--------------------------------------------- */
.woocommerce-tabs {
	grid-column: 1/-1;
	margin-top: var(--space-3xl);
}

.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xl);
	list-style: none;
	margin: 0 0 var(--space-xl);
	padding: 0;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	color: var(--muted-color);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-base);
	font-weight: 600;
	padding: var(--space-sm) 0;
	text-decoration: none;
	transition: color var(--transition) ease;
}

.woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--heading-color);
}

.woocommerce-tabs ul.tabs li.active a {
	border-bottom: 2px solid var(--primary-color);
	color: var(--heading-color);
	margin-bottom: -1px;
}

.woocommerce-tabs .panel {
	color: var(--muted-color);
	font-size: var(--font-size-md);
	padding: 0;
}

.woocommerce-tabs .panel h2:first-of-type {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: var(--space-md);
}

.woocommerce-tabs .panel p {
	margin-bottom: var(--space-md);
}

.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol {
	margin: 0 0 var(--space-md) var(--space-lg);
}

.woocommerce-tabs .panel li {
	margin-bottom: var(--space-2xs);
}

.woocommerce-tabs .panel table {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-tabs .panel table th,
.woocommerce-tabs .panel table td {
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-sm) var(--space-md);
	text-align: left;
}

.woocommerce-tabs .panel table th {
	color: var(--heading-color);
	font-family: var(--heading-font);
}

.upsells.products {
	grid-column: 1/-1;
	margin-top: var(--space-3xl);
	padding-top: var(--space-3xl);
	border-top: 1px solid var(--border-color);
}

.upsells.products > h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-bottom: var(--space-lg);
}

.stock:empty::before {
	display: none;
}

/**
 * Checkout
 */

/* Checkout — woocommerce/checkout/form-checkout.php, form-billing.php,
 * form-shipping.php, review-order.php, payment.php, terms.php.
 *
 * None of these are overridden (all carry real markup, not just hooks);
 * every selector below targets WooCommerce's own default class and ID
 * names, same idiom as _tables.scss (cart) and _single-product.scss.
--------------------------------------------- */
.woocommerce-checkout {
	margin-top: var(--space-lg);
}

.woocommerce-checkout h3 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin: 0 0 var(--space-lg);
}

.woocommerce-checkout #order_review_heading {
	margin-top: var(--space-2xl);
}

/* Billing / shipping columns
--------------------------------------------- */
.col2-set {
	display: grid;
	gap: var(--space-2xl);
}

@media screen and (min-width: 48em) {

	.col2-set {
		grid-template-columns: 1fr 1fr;
	}
}

.col2-set .form-row-first,
.col2-set .form-row-last {
	width: auto;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields,
.woocommerce-EditAccountForm {
	display: grid;
	gap: 0 var(--space-lg);
	grid-template-columns: 1fr;
}

@media screen and (min-width: 36em) {

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields,
	.woocommerce-EditAccountForm {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
.woocommerce-additional-fields .form-row-wide,
.woocommerce-EditAccountForm .form-row-wide {
	grid-column: 1/-1;
}

.woocommerce-EditAccountForm {

	/* Defaults every direct-child row to full width — except the
   * first/last name pair, which should sit side by side on the 2-column
   * template above, same as the identically-classed rows in the address
   * forms (.woocommerce-address-fields__field-wrapper).
   */
}

.woocommerce-EditAccountForm > fieldset,
.woocommerce-EditAccountForm > p {
	grid-column: 1/-1;
}

.woocommerce-EditAccountForm > p.form-row-first,
.woocommerce-EditAccountForm > p.form-row-last {
	grid-column: auto;
}

/* Form fields — woocommerce_form_field() output
--------------------------------------------- */
.form-row {
	margin-bottom: var(--space-lg);
}

.form-row label {
	color: var(--heading-color);
	display: block;
	font-size: var(--font-size-base-sm);
	font-weight: 600;
	margin-bottom: var(--space-2xs);
}

.form-row label .required {
	color: var(--secondary-color-dark);
	text-decoration: none;
}

.form-row label .optional {
	color: var(--muted-color);
	font-weight: 400;
}

.form-row .woocommerce-input-wrapper {
	display: block;
}

.form-row .input-text,
.form-row select,
.form-row textarea {
	background: var(--surface-alt-color);
	border: 1.5px solid var(--border-color);
	border-radius: var(--border-radius-md);
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: var(--font-size-base);
	padding: var(--space-sm) var(--space-md);
	transition: border-color var(--transition) ease;
	width: 100%;
}

.form-row .input-text:focus,
.form-row select:focus,
.form-row textarea:focus {
	border-color: var(--primary-color);
	outline: none;
}

.form-row textarea {
	min-height: 6rem;
}

.form-row .description {
	color: var(--muted-color);
	display: block;
	font-size: var(--font-size-base-sm);
	margin-top: var(--space-2xs);
}

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

.form-row.woocommerce-invalid .input-text {
	border-color: var(--secondary-color-dark);
}

.woocommerce-account-fields,
.woocommerce-terms-and-conditions-wrapper {
	margin-top: var(--space-lg);
}

.woocommerce-form__label-for-checkbox.checkbox,
label.checkbox {
	align-items: center;
	color: var(--text-color);
	display: flex;
	font-size: var(--font-size-base-sm);
	font-weight: 400;
	gap: var(--space-xs);
}

.woocommerce-form__label-for-checkbox.checkbox .input-checkbox,
label.checkbox .input-checkbox {
	flex-shrink: 0;
	height: 1.125rem;
	width: 1.125rem;
}

/* Order review table — inherits table.shop_table styling from
 * _tables.scss; only checkout-specific column tweaks here.
--------------------------------------------- */
.woocommerce-checkout-review-order-table .product-name .product-quantity {
	color: var(--muted-color);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table .product-total {
	font-weight: 600;
	text-align: right;
}

/* Payment methods
--------------------------------------------- */
#payment {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	margin-top: var(--space-xl);
	padding: var(--space-xl);
}

#payment .wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
}

#payment .wc_payment_methods .wc_payment_method {
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-md) 0;
}

#payment .wc_payment_methods .wc_payment_method:first-child {
	padding-top: 0;
}

#payment .wc_payment_methods .wc_payment_method:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

#payment .wc_payment_methods label {
	align-items: center;
	color: var(--heading-color);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: var(--space-sm);
}

#payment .wc_payment_methods label img {
	height: 1.25rem;
	margin-left: var(--space-2xs);
}

#payment .wc_payment_methods .input-radio {
	flex-shrink: 0;
	height: 1.125rem;
	width: 1.125rem;
}

#payment .wc_payment_methods .payment_box {
	background: var(--surface-color);
	border-radius: var(--border-radius-sm);
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
	margin-top: var(--space-sm);
	padding: var(--space-md);
}

#payment .wc_payment_methods .payment_box p:last-child {
	margin-bottom: 0;
}

#payment .form-row.place-order {
	margin-bottom: 0;
}

#payment .form-row.place-order .button,
#payment .form-row.place-order button {
	width: 100%;
}

/* Order received / thank-you — woocommerce/checkout/thankyou.php,
 * order-received.php, order/order-details.php, order-details-customer.php.
--------------------------------------------- */
.woocommerce-order {
	margin-top: var(--space-lg);
}

.woocommerce-order-overview {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
	list-style: none;
	margin: var(--space-xl) 0;
	padding: var(--space-lg) var(--space-xl);
}

.woocommerce-order-overview li {
	color: var(--muted-color);
	font-size: var(--font-size-base-sm);
}

.woocommerce-order-overview li strong {
	color: var(--heading-color);
	display: block;
	font-family: var(--heading-font);
	font-size: var(--font-size-base);
	margin-top: var(--space-3xs);
}

.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: var(--space-2xl);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-bottom: var(--space-md);
}

.woocommerce-customer-details address {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	color: var(--text-color);
	font-style: normal;
	line-height: var(--line-height-body);
	padding: var(--space-lg);
}

.woocommerce-customer-details address p {
	margin: var(--space-xs) 0 0;
}

/**
 * General WooCommerce components
 */

/**
 * Header cart
 */
.site-header-cart {
	position: relative;
	margin: 0;
	padding: 0;
}

.site-header-cart .cart-contents {
	text-decoration: none;
}

.site-header-cart .widget_shopping_cart {
	display: none;
}

.site-header-cart .product_list_widget {
	margin: 0;
	padding: 0;
}

/**
 * Star rating
 */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1.618em;
	line-height: 1.618;
	width: 5.3em;
	font-family: star;
	font-weight: 400;
}

.star-rating::before {
	content: "SSSSS";
	opacity: 0.25;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "SSSSS";
	top: 0;
	position: absolute;
	left: 0;
	color: #1489bd;
}

p.stars a {
	position: relative;
	height: 1em;
	width: 1em;
	text-indent: -999em;
	display: inline-block;
	text-decoration: none;
	margin-right: 1px;
	font-weight: 400;
}

p.stars a::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-family: star;
	content: "S";
	color: #182230;
	text-indent: 0;
	opacity: 0.25;
}

p.stars a:hover ~ a::before {
	content: "S";
	color: #182230;
	opacity: 0.25;
}

p.stars:hover a::before {
	content: "S";
	color: #1489bd;
	opacity: 1;
}

p.stars.selected a.active::before {
	content: "S";
	color: #1489bd;
	opacity: 1;
}

p.stars.selected a.active ~ a::before {
	content: "S";
	color: #182230;
	opacity: 0.25;
}

p.stars.selected a:not(.active)::before {
	content: "S";
	color: #1489bd;
	opacity: 1;
}

/**
 * Tabs — styled in plugins/woocommerce/_single-product.scss instead. This
 * file loads after it (see sass/woocommerce.scss's import order), so a
 * second, older .woocommerce-tabs rule here would win the cascade and
 * silently override the real one (found while polishing the single
 * product page) — removed rather than kept as dead/conflicting CSS.
 */

/**
 * Bare .button fallback fill.
 *
 * base/elements/_buttons.scss's .button only defines shape/spacing — its
 * actual background/color come from a --primary/--blue/etc. modifier class.
 * Most WooCommerce templates (cart's "Return to shop", orders' Pay/View/
 * Cancel, pagination, place order, proceed to checkout, login/register,
 * save changes, …) print class="button" with no modifier at all, so
 * without this they render as unstyled, near-invisible text links —
 * visible on the empty-cart page's "Return to shop" link. Two other Woo
 * partials (_products.scss's loop .button, _single-product.scss's
 * .single_add_to_cart_button) already hand-roll this same fill because of
 * that gap; this is the general fix everywhere else. Scoped to .woocommerce
 * — the shortcode/template wrapper every WC page renders inside — so it
 * never touches the site's own .button usage, which always sets an
 * explicit modifier.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--primary-color);
	color: var(--surface-color);
}

.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible {
	background: var(--primary-color-dark);
	color: var(--surface-color);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--secondary-color);
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus-visible {
	background: var(--secondary-color-dark);
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
	text-align: right;
}

.woocommerce-password-strength.strong {
	color: #0f834d;
}

.woocommerce-password-strength.short {
	color: #e2401c;
}

.woocommerce-password-strength.bad {
	color: #e2401c;
}

.woocommerce-password-strength.good {
	color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
	box-shadow: inset 2px 0 0 #0f834d;
}

.form-row.woocommerce-invalid input.input-text {
	box-shadow: inset 2px 0 0 #e2401c;
}

.required {
	color: var(--secondary-color-dark);
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: var(--surface-alt-color);
	border-left: 3px solid var(--success-color);
	border-radius: var(--border-radius-sm);
	clear: both;
	color: var(--text-color);
	font-size: var(--font-size-base-sm);
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) var(--space-lg);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-noreviews .button,
p.no-comments .button {
	margin-left: var(--space-md);
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	border-left-color: var(--primary-color);
}

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

.woocommerce-notice {
	background-color: var(--surface-alt-color);
	border-left: 3px solid var(--success-color);
	border-radius: var(--border-radius-sm);
	color: var(--text-color);
	display: block;
	font-size: var(--font-size-base-sm);
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) var(--space-lg);
}

.woocommerce-notice--error {
	border-left-color: var(--secondary-color-dark);
}

.woocommerce-notice--info {
	border-left-color: var(--primary-color);
}

.demo_store {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 1em;
	background-color: #3d9cd2;
	z-index: 9999;
}

@media screen and (min-width: 48em) {

	/**
   * Header cart
   */
	.site-header-cart .widget_shopping_cart {
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 999999;
		left: -999em;
		display: block;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	}

	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart.focus .widget_shopping_cart {
		left: 0;
		display: block;
	}
}

/**
 * WooCommerce widgets
 */

/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
	margin-bottom: 1.5em;
}

.widget_price_filter .price_slider_amount {
	text-align: right;
	line-height: 2.4;
}

.widget_price_filter .price_slider_amount .button {
	float: left;
}

.widget_price_filter .ui-slider {
	position: relative;
	text-align: left;
}

.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1em;
	height: 1em;
	cursor: ew-resize;
	outline: none;
	background: #1489bd;
	box-sizing: border-box;
	margin-top: -0.25em;
	opacity: 1;
}

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: -1em;
}

.widget_price_filter .ui-slider .ui-slider-handle:hover,
.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
	box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background: #1489bd;
}

.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider-horizontal {
	height: 0.5em;
}

.widget_price_filter .ui-slider-horizontal .ui-slider-range {
	height: 100%;
}

/**
 * My Account
 */

/* My Account — woocommerce/myaccount/*.php.
 *
 * None of these templates are overridden (all carry real markup, not just
 * hooks); every selector below targets WooCommerce's own default class
 * names, same idiom as the other plugins/woocommerce partials. my-account.php
 * itself is two hook outputs (woocommerce_account_navigation,
 * woocommerce_account_content) rendered into page.php's .entry-content —
 * but not directly: [woocommerce_my_account] runs its output through
 * WC_Shortcodes::shortcode_wrapper(), which wraps it in its own
 * <div class="woocommerce">. That div, not .entry-content, is the real
 * parent of the nav + content pair, so the grid below targets it by name
 * instead of assuming it's the direct child of .entry-content.
--------------------------------------------- */
.woocommerce-account {

	/* :has() guards the 2-column split: when logged out, my-account.php's
   * nav ("woocommerce_account_navigation") never prints, so form-login.php
   * is the only content inside .woocommerce. Without this guard the login/
   * register form was crushed into the 14rem nav column instead of using
   * the full width.
   */
}

.woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	gap: var(--space-2xl);
}

@media screen and (min-width: 48em) {

	.woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 14rem 1fr;
		align-items: start;
	}
}

/* Nav sidebar
--------------------------------------------- */
.woocommerce-MyAccount-navigation {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-md);
}

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

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	border-radius: var(--border-radius-sm);
	color: var(--text-color);
	display: block;
	font-weight: 600;
	padding: var(--space-sm) var(--space-md);
	text-decoration: none;
	transition: background var(--transition) ease, color var(--transition) ease;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--surface-color);
	color: var(--primary-color-dark);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--primary-color);
	color: var(--surface-color);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--secondary-color-dark);
}

/* Content panel — mirrors the nav sidebar card so dashboard, orders,
 * addresses and forms read as one account panel instead of a bare column
 * of text sitting next to a styled sidebar.
--------------------------------------------- */
.woocommerce-MyAccount-content {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-lg);
}

@media screen and (min-width: 48em) {

	.woocommerce-MyAccount-content {
		padding: var(--space-xl);
	}
}

/* Endpoint title — printed by freshdi_woocommerce_account_content_title()
 * (inc/woocommerce.php) for endpoints whose WooCommerce template ships no
 * heading of its own (Orders, Downloads, Payment methods, Addresses).
--------------------------------------------- */
.woocommerce-MyAccount-title {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin: 0 0 var(--space-lg);
}

/* Dashboard greeting (myaccount/dashboard.php) — two bare, classless <p>
 * tags with nothing to hang a selector on. The greeting is the only
 * .woocommerce-MyAccount-content paragraph that wraps the customer's name
 * in <strong>, so it's a precise, template-override-free target.
--------------------------------------------- */
.woocommerce-MyAccount-content > p:has(strong) {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
}

.woocommerce-MyAccount-content > p:has(strong) a {
	color: var(--primary-color-dark);
	font-weight: 600;
}

.woocommerce-MyAccount-content > p:has(strong) + p {
	color: var(--muted-color);
	line-height: var(--line-height-body);
	margin-top: var(--space-sm);
}

.woocommerce-MyAccount-content > p:has(strong) + p a {
	color: var(--primary-color-dark);
	font-weight: 600;
}

/* Orders table — inherits table.shop_table styling from _tables.scss.
--------------------------------------------- */
.woocommerce-orders-table__cell-order-status {
	font-weight: 600;
	text-transform: capitalize;
}

.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	color: var(--success-color);
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	color: var(--secondary-color-dark);
}

.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
	color: var(--muted-color);
}

.woocommerce-pagination {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/* Addresses (my-address.php) and single order-details address cards.
--------------------------------------------- */
.woocommerce-Address .woocommerce-Address-title {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-sm);
}

.woocommerce-Address .woocommerce-Address-title h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin: 0;
}

.woocommerce-Address .woocommerce-Address-title a.edit {
	color: var(--primary-color-dark);
	font-size: var(--font-size-base-sm);
	font-weight: 600;
}

.woocommerce-Address address {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	color: var(--text-color);
	font-style: normal;
	line-height: var(--line-height-body);
	padding: var(--space-lg);
}

/* Edit account / edit address / login / register forms — reuse .form-row
 * styling from plugins/woocommerce/_checkout.scss. The float-clear divs
 * WooCommerce's stock templates print between fields are meaningless in a
 * grid layout, so they're hidden rather than left to occupy a grid cell.
--------------------------------------------- */
.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields__field-wrapper .clear,
#customer_login .clear {
	display: none;
}

.woocommerce-address-fields__field-wrapper {
	display: grid;
	gap: 0 var(--space-lg);
	grid-template-columns: 1fr;
}

@media screen and (min-width: 36em) {

	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce-address-fields__field-wrapper .form-row-wide {
	grid-column: 1/-1;
}

.woocommerce-EditAccountForm fieldset {
	border: 0;
	margin: var(--space-lg) 0 0;
	padding: 0;
}

.woocommerce-EditAccountForm fieldset legend {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-base);
	font-weight: 600;
	margin-bottom: var(--space-md);
	padding: 0;
}

/* .col2-set (already grid-ified in _checkout.scss) handles the 2-column
 * split for both #customer_login (login/register) and .woocommerce-Addresses
 * (my-address.php).
 *
 * Logged-out visitors hit form-login.php before .woocommerce-MyAccount-content
 * exists to give them a card, so login/register get their own here. Two
 * shapes, both inside the shortcode's own .woocommerce div (see the file
 * header): registration enabled prints #customer_login.col2-set with
 * .u-column1/.u-column2 halves; disabled prints just the login heading and
 * form, with no #customer_login/.col2-set wrapper.
 */
#customer_login.col2-set .u-column1,
#customer_login.col2-set .u-column2 {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-xl);
}

.woocommerce-account .entry-content > .woocommerce > form.woocommerce-form-login {
	background: var(--surface-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	max-width: 28rem;
	padding: var(--space-xl);
}

#customer_login h2,
.woocommerce-account .entry-content > .woocommerce > h2 {
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-size: var(--font-size-h2);
	font-weight: 600;
	margin-bottom: var(--space-lg);
}

.woocommerce-LostPassword {
	margin-top: var(--space-md);
}

/**
 * Slide Cart
 */

/**
 * WooCommerce Slide Cart.
 *
 * Trigger button lives in the footer's floating-actions panel and already
 * has its own icon-button styling (.float-actions__cart,
 * sass/components/footer/_footer.scss) — nothing to add for it here. This
 * partial is only the overlay + drawer panel it opens
 * (template-parts/slide-cart.php), toggled by js/slide-cart.js: [hidden]
 * removed, then .is-open added on the next frame so the transform/opacity
 * transitions run.
 */
.slide-cart-overlay {
	background: rgba(0, 0, 0, 0.6);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity var(--transition);
	z-index: 1000;
}

.slide-cart-overlay.is-open {
	opacity: 1;
}

.slide-cart {
	background: var(--surface-color);
	border-left: 1px solid var(--border-color);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-width: 26rem;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform var(--transition);
	width: 100%;
	z-index: 1001;
}

.slide-cart.is-open {
	transform: translateX(0);
}

.slide-cart__header {
	align-items: center;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex: none;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
}

.slide-cart__title {
	font-family: var(--heading-font);
	font-size: var(--font-size-md);
	margin: 0;
}

.slide-cart__close {
	align-items: center;
	background: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	color: var(--text-color);
	cursor: pointer;
	display: grid;
	height: 2.25rem;
	justify-content: center;
	padding: 0;
	width: 2.25rem;
}

.slide-cart__close:hover,
.slide-cart__close:focus-visible {
	border-color: var(--text-color);
}

.slide-cart__contents {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.slide-cart__items {
	flex: 1;
	list-style: none;
	margin: 0;
	overflow-y: auto;
	padding: var(--space-2xs) var(--space-lg);
}

.slide-cart__totals {
	border-top: 1px solid var(--border-color);
	flex: none;
	padding: var(--space-md) var(--space-lg);
}

.slide-cart__totals-row {
	align-items: center;
	color: var(--muted-color);
	display: flex;
	font-size: var(--font-size-base-sm);
	justify-content: space-between;
	padding: 0.375rem 0;
}

.slide-cart__totals-row--total {
	border-top: 1px solid var(--border-color);
	color: var(--text-color);
	font-size: var(--font-size-md);
	font-weight: 700;
	margin-top: 0.375rem;
	padding-top: var(--space-sm);
}

.slide-cart__coupon-remove {
	background: transparent;
	border: 0;
	color: var(--muted-color);
	cursor: pointer;
	font-size: var(--font-size-base);
	line-height: 1;
	margin-left: var(--space-2xs);
	padding: 0;
}

.slide-cart__coupon-remove:hover,
.slide-cart__coupon-remove:focus-visible {
	color: var(--text-color);
}

.slide-cart__coupon-form {
	display: flex;
	flex: none;
	gap: var(--space-2xs);
	padding: 0 var(--space-lg) var(--space-md);
}

.slide-cart__coupon-form input[type="text"] {
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	color: var(--text-color);
	flex: 1;
	font-size: var(--font-size-base-sm);
	min-width: 0;
	padding: 0.625rem 0.875rem;
}

.slide-cart__coupon-form input[type="text"]:focus-visible {
	border-color: var(--primary-color);
	outline: none;
}

.slide-cart__coupon-apply {
	background: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	color: var(--text-color);
	cursor: pointer;
	flex: none;
	font-size: var(--font-size-sm);
	font-weight: 600;
	padding: 0.625rem var(--space-sm);
}

.slide-cart__coupon-apply:hover,
.slide-cart__coupon-apply:focus-visible {
	border-color: var(--primary-color);
}

.slide-cart__coupon-apply[disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

.slide-cart__error {
	flex: none;
	margin: 0 var(--space-lg) var(--space-md);
}

.slide-cart__error[hidden] {
	display: none;
}

.slide-cart__actions {
	display: flex;
	flex: none;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.slide-cart__actions .button {
	flex: 1;
	justify-content: center;
}

.slide-cart__empty {
	align-items: center;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2xs);
	justify-content: center;
	padding: var(--space-xl);
	text-align: center;
}

.slide-cart__empty-title {
	font-family: var(--heading-font);
	font-size: var(--font-size-lg);
	margin: 0;
}

.slide-cart__empty-text {
	color: var(--muted-color);
	margin: 0 0 var(--space-2xs);
}

@media (max-width: 37.5rem) {

	.slide-cart {
		max-width: 100%;
	}
}

.slide-cart-item {
	border-bottom: 1px solid var(--border-color);
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: 4.5rem 1fr auto;
	padding: var(--space-sm) 0;
}

.slide-cart-item:last-child {
	border-bottom: 0;
}

.slide-cart-item__image img {
	border-radius: var(--border-radius-sm);
	display: block;
	height: 4.5rem;
	object-fit: cover;
	width: 4.5rem;
}

.slide-cart-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.slide-cart-item__name {
	font-size: var(--font-size-base-sm);
	font-weight: 600;
	text-decoration: none;
}

.slide-cart-item__name,
.slide-cart-item__name:visited {
	color: var(--text-color);
}

.slide-cart-item__name:hover,
.slide-cart-item__name:focus-visible {
	text-decoration: underline;
}

.slide-cart-item__price {
	color: var(--muted-color);
	font-size: var(--font-size-sm);
}

.slide-cart-item__controls {
	align-items: center;
	display: flex;
	gap: var(--space-sm);
	margin-top: 0.25rem;
}

.slide-cart-item__remove {
	background: transparent;
	border: 0;
	color: var(--muted-color);
	cursor: pointer;
	font-size: var(--font-size-xs);
	padding: 0;
	text-decoration: underline;
}

.slide-cart-item__remove:hover,
.slide-cart-item__remove:focus-visible {
	color: var(--text-color);
}

.slide-cart-item__subtotal {
	font-size: var(--font-size-base-sm);
	font-weight: 600;
	text-align: right;
}

.slide-cart-item.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.qty-stepper {
	align-items: center;
	background: var(--surface-alt-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-pill);
	display: inline-flex;
	height: 2rem;
}

.qty-stepper__btn {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--text-color);
	cursor: pointer;
	display: flex;
	font-size: var(--font-size-base);
	height: 2rem;
	justify-content: center;
	padding: 0;
	width: 2rem;
}

.qty-stepper__btn:hover,
.qty-stepper__btn:focus-visible {
	color: var(--primary-color);
}

.qty-stepper__btn[disabled] {
	cursor: not-allowed;
	opacity: 0.4;
}

.qty-stepper__input {
	-moz-appearance: textfield;
	appearance: textfield;
	background: var(--surface-alt-color);
	border: 0;
	color: var(--text-color);
	font-size: var(--font-size-sm);
	padding: 0.5rem !important;
	text-align: center;
	width: 3rem;
}

.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.qty-stepper__input:focus-visible {
	outline: none;
}

body.slide-cart-open {
	overflow: hidden;
}