/*
 * CIRCUIT — WooCommerce front-end styling.
 *
 * Loaded by functions.php only when WooCommerce is active. Styles the shop
 * grid, product cards, single product, cart and checkout using the theme
 * tokens (var(--wp--preset--color--*) etc.) so the storefront reads as one
 * crisp, modern tech system. Motion is reduced-motion-gated at the end.
 *
 * Everything degrades gracefully: with WooCommerce absent this file is never
 * enqueued, and the brand site stands on its own.
 */

/* ----------------------------------------------------------------- *
 * Shared tokens / rhythm                                            *
 * ----------------------------------------------------------------- */
.woocommerce,
.woocommerce-page {
	--circuit-wc-radius: 14px;
}

.woocommerce a,
.woocommerce-page a {
	color: var(--wp--preset--color--primary-ink);
}

/* WooCommerce wraps shop/cart/checkout content; give it page rhythm. */
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Section headings on shop/account/etc. */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

/* ----------------------------------------------------------------- *
 * Result count + ordering bar                                       *
 * ----------------------------------------------------------------- */
.woocommerce .woocommerce-result-count {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.woocommerce .woocommerce-ordering select,
.woocommerce select {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
}

/* ----------------------------------------------------------------- *
 * Product grid (shop / archive / [products])                        *
 * ----------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	text-align: left;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--circuit-wc-radius);
	overflow: hidden;
	padding: 0 0 1.25rem;
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1), border-color 360ms ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--hairline));
	box-shadow: var(--wp--preset--shadow--raised);
}

/* Product image — clean, square-ish tech crop */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	margin: 0 0 1rem;
	border-radius: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	background: var(--wp--preset--color--warm);
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}
.woocommerce ul.products li.product > a {
	overflow: hidden;
	display: block;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
	padding: 0 1.25rem;
	margin: 0 0 0.35rem;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: 0.01em;
	font-feature-settings: "tnum" 1;
	color: var(--wp--preset--color--ink);
}
.woocommerce ul.products li.product .price {
	padding: 0 1.25rem;
	margin: 0;
}
.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--ink-soft);
	opacity: 0.8;
	font-weight: 400;
	margin-right: 0.4rem;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--secondary-ink);
}

/* On-sale flag — an electric tag */
.woocommerce span.onsale {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	border-radius: 999px;
	padding: 0.45rem 0.8rem;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	margin: 0;
}

/* Star ratings in electric blue */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--wp--preset--color--primary);
}
.woocommerce .star-rating {
	font-size: 0.85rem;
	margin: 0.4rem 1.25rem 0.5rem;
	color: var(--wp--preset--color--hairline);
}

/* ----------------------------------------------------------------- *
 * Buttons — match the theme's rounded button language               *
 * ----------------------------------------------------------------- */
.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 ul.products li.product a.button,
.woocommerce div.product form.cart .button,
.woocommerce #place_order {
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	padding: 0.9rem 1.6rem;
	box-shadow: none;
	transition: background-color 240ms ease, color 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.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,
.woocommerce ul.products li.product a.button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce #place_order:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Grid "add to cart" sits inside the card padding */
.woocommerce ul.products li.product .button {
	margin: 0.85rem 1.25rem 0;
	display: inline-block;
}

/* Quantity input */
.woocommerce .quantity .qty {
	font-family: var(--wp--preset--font-family--accent);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 0.7rem 0.5rem;
	width: 4.5rem;
}

/* ----------------------------------------------------------------- *
 * Single product                                                    *
 * ----------------------------------------------------------------- */
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	margin-bottom: 0.75rem;
}
.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: 1.25rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.5rem;
	color: var(--wp--preset--color--ink);
	margin-bottom: 1.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.7;
	margin-bottom: 1.75rem;
}
.woocommerce div.product form.cart {
	margin-bottom: 2rem;
}

/* Product image gallery frame */
.woocommerce div.product div.images img {
	border-radius: var(--circuit-wc-radius);
}
.woocommerce div.product div.images .flex-control-thumbs li {
	margin: 0.6rem 0.6rem 0 0;
}

/* Variation selects */
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 0.4rem 0.75rem 0.4rem 0;
	vertical-align: middle;
}
.woocommerce div.product form.cart .variations label {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--wp--preset--color--hairline);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 1.75rem 0 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	padding: 1rem 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

/* Related / upsell headings spacing */
.woocommerce .related,
.woocommerce .upsells {
	margin-top: var(--wp--preset--spacing--60);
}

/* ----------------------------------------------------------------- *
 * Notices                                                           *
 * ----------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	border-radius: 12px;
	border-top: none;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
	padding: 1rem 1.25rem;
}
.woocommerce-error {
	border-left-color: var(--wp--preset--color--secondary-ink);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--primary);
}
.woocommerce-error::before {
	color: var(--wp--preset--color--secondary-ink);
}

/* ----------------------------------------------------------------- *
 * Cart                                                              *
 * ----------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	border-collapse: collapse;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	padding: 1rem 1.1rem;
}
.woocommerce table.shop_table td {
	padding: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--ink);
}
.woocommerce table.shop_table img {
	border-radius: 10px;
}
.woocommerce a.remove {
	color: var(--wp--preset--color--ink) !important;
	border-radius: 999px;
	font-weight: 400;
}
.woocommerce a.remove:hover {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	padding: 1.5rem;
}
.woocommerce .cart_totals h2,
.woocommerce-cart .cart_totals h2 {
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
.woocommerce table.cart td.actions .coupon .input-text {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 0.85rem 0.9rem;
}

/* ----------------------------------------------------------------- *
 * Checkout                                                          *
 * ----------------------------------------------------------------- */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
}
.woocommerce .form-row label,
.woocommerce-checkout label {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce #order_review .input-text {
	font: inherit;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 0.8rem 0.95rem;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.woocommerce .form-row input.input-text:focus,
.woocommerce .form-row textarea:focus,
.woocommerce-checkout input.input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
.woocommerce-checkout #payment,
.woocommerce #order_review {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--warm);
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--warm);
}
.woocommerce-order {
	color: var(--wp--preset--color--ink);
}

/* ----------------------------------------------------------------- *
 * My Account                                                        *
 * ----------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	padding: 0.95rem 1.1rem;
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------------------- *
 * Responsive                                                        *
 * ----------------------------------------------------------------- */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}
@media (max-width: 480px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------- *
 * Motion — reduced-motion-gated (this block wins; placed last)      *
 * ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a img,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		transition-duration: 0.001ms !important;
	}
	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:hover a img,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover {
		transform: none !important;
	}
}
/* WC account and gallery controls meet the primary 44px touch-target gate. */
.woocommerce .show-password-input,
.woocommerce .woocommerce-product-gallery__trigger {
	box-sizing: border-box;
	min-inline-size: 44px;
	min-block-size: 44px;
}

.woocommerce input#rememberme {
	min-inline-size: 44px;
	min-block-size: 44px;
	vertical-align: middle;
}