/**
 * WooCommerce styles, mapped onto StoryCraft's design tokens.
 * This file is only enqueued when class_exists( 'WooCommerce' ) is true —
 * see storycraft_scripts() in functions.php and inc/woocommerce.php.
 */

.woocommerce-main .woocommerce-breadcrumb {
	color: var(--sc-slate);
	font-size: var(--sc-step--1);
	margin-block-end: var(--sc-space-md);
}

.woocommerce-main .woocommerce-breadcrumb a {
	color: var(--sc-accent);
}

ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	align-items: start; /* prevent CSS Grid's default row-stretch from forcing every card to match the tallest sibling in its row (e.g. a longer title or a two-line sale price) */
	gap: var(--sc-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-main ul.products::before,
.woocommerce-main ul.products::after {
	display: none !important;
}

.woocommerce-main ul.products[class*="columns-"] li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

ul.products li.product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sc-space-3xs);
	float: none;
	width: auto;
	margin: 0;
	background: var(--sc-paper);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	padding: var(--sc-space-sm);
}

ul.products li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-3xs);
	inline-size: 100%;
	text-decoration: none;
	color: inherit;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--sc-step-0);
	margin-block: var(--sc-space-3xs) var(--sc-space-2xs);
	padding-inline: var(--sc-space-2xs) !important;
}

ul.products li.product .button {
	margin-block: var(--sc-space-2xs);
	margin-inline: var(--sc-space-2xs);
	margin-block-end: var(--sc-space-2xs);
}

ul.products li.product img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--sc-radius);
	margin-block-end: var(--sc-space-2xs);
}

ul.products li.product .price {
	color: var(--sc-accent);
	font-weight: 700;
	padding-inline: var(--sc-space-2xs);
}

.woocommerce-main .price ins {
	color: var(--sc-accent);
	text-decoration: none;
}

.woocommerce-main .price del {
	color: var(--sc-slate);
}

.woocommerce-main a.button,
.woocommerce-main button.button,
.woocommerce-main input.button,
.woocommerce-main #respond input#submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: var(--sc-ink);
	color: var(--sc-paper);
	border: 1px solid var(--sc-ink);
	border-radius: var(--sc-radius);
	padding: 0.7em 1.4em;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce .quantity,
.woocommerce-page .quantity {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius);
	overflow: hidden;
}

.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty {
	inline-size: 4rem;
	min-block-size: 2.75rem;
	padding: 0.5rem;
	border: 0;
	background: transparent;
	color: var(--sc-ink);
	font: inherit;
	font-weight: 700;
	text-align: center;
}

.woocommerce .quantity .qty:focus,
.woocommerce-page .quantity .qty:focus {
	outline: 2px solid var(--sc-accent);
	outline-offset: -2px;
}

.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce-page .quantity .qty::-webkit-inner-spin-button,
.woocommerce-page .quantity .qty::-webkit-outer-spin-button {
	opacity: 1;
}

body.woocommerce-cart .entry-content .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: stretch;
	height: auto !important;
	min-block-size: 2.75rem !important;
	background-color: var(--sc-surface) !important;
	border: 1px solid var(--sc-border) !important;
	border-radius: var(--sc-radius);
	overflow: hidden;
}

body.woocommerce-cart .entry-content .wc-block-components-quantity-selector__input {
	order: 2;
	inline-size: 3.25rem !important;
	min-block-size: 2.75rem !important;
	padding: 0.5rem 0.25rem;
	border: 0 !important;
	background: transparent !important;
	color: var(--sc-ink);
	font: inherit;
	font-weight: 700 !important;
	text-align: center;
}

body.woocommerce-cart .entry-content .wc-block-components-quantity-selector__input:focus {
	outline: 2px solid var(--sc-accent);
	outline-offset: -2px;
}

body.woocommerce-cart .entry-content .wc-block-components-quantity-selector__button {
	inline-size: 2.25rem !important;
	min-block-size: 2.75rem !important;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	color: var(--sc-ink);
	font-size: var(--sc-step-1);
	font-weight: 700 !important;
	line-height: 1;
}

.woocommerce-cart .entry-content .wc-block-components-quantity-selector__button:hover:not(:disabled),
.woocommerce-cart .entry-content .wc-block-components-quantity-selector__button:focus-visible {
	background: var(--sc-accent);
	color: var(--sc-paper);
}

.woocommerce-cart .entry-content .wc-block-components-quantity-selector__button:disabled {
	color: var(--sc-slate);
	opacity: 0.45;
}

body.woocommerce-cart .entry-content .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sc-space-2xs);
	margin-block-start: var(--sc-space-xs);
}

body.woocommerce-cart .entry-content .wc-block-cart-item__remove-link {
	color: var(--sc-slate);
}

.woocommerce-cart .entry-content .wc-block-cart-item__remove-link:hover {
	color: var(--sc-accent-2);
}

.woocommerce-main a.button:hover,
.woocommerce-main button.button:hover {
	opacity: 0.88;
}

.woocommerce-main .star-rating {
	color: var(--sc-accent-2);
}

.woocommerce-main .woocommerce-message,
.woocommerce-main .woocommerce-info {
	border-inline-start-color: var(--sc-accent);
	background: var(--sc-surface);
}

.woocommerce-main .woocommerce-error {
	border-inline-start-color: var(--sc-accent-2);
	background: var(--sc-surface);
}

.woocommerce-main table.shop_table {
	border-color: var(--sc-border);
}

.woocommerce-main table.shop_table th {
	background: var(--sc-surface);
}

@media (max-width: 600px) {
	.woocommerce-main table.shop_table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-main * {
		transition: none !important;
	}
}