/* ==========================================================================
   KNB Body Shop - theme.css
   Only functional rules and styling for markup that has no source equivalent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll / on-load reveals (ported from the source motion variants)
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s cubic-bezier(0.25, 0.4, 0.25, 1),
		transform 0.7s cubic-bezier(0.25, 0.4, 0.25, 1);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }
[data-delay="8"] { transition-delay: 0.8s; }
[data-delay="9"] { transition-delay: 0.9s; }

/* Customizer preview: never hide content while editing. */
body.is-customizer [data-reveal],
body.is-customizer [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Hero entrance animation
   -------------------------------------------------------------------------- */
:root {
	--theme-ease-smooth: cubic-bezier(0.25, 0.4, 0.25, 1);
}

@keyframes themeHeroFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes themeHeroRise {
	from { opacity: 0; transform: translateY(var(--theme-rise, 14px)); }
	to { opacity: 1; transform: none; }
}

.hero-bg { animation: themeHeroFade 1.1s var(--theme-ease-smooth) both; }
.hero-eyebrow { --theme-rise: 12px; animation: themeHeroRise 0.7s var(--theme-ease-smooth) 0.25s both; }
.hero-title { --theme-rise: 22px; animation: themeHeroRise 0.9s var(--theme-ease-smooth) 0.35s both; }
.hero-text { --theme-rise: 14px; animation: themeHeroRise 0.7s var(--theme-ease-smooth) 0.55s both; }
.hero-cta { --theme-rise: 14px; animation: themeHeroRise 0.65s var(--theme-ease-smooth) 0.75s both; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	.hero-bg,
	.hero-eyebrow,
	.hero-title,
	.hero-text,
	.hero-cta {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Side cart drawer + overlay visibility (functional)
   -------------------------------------------------------------------------- */
#theme-cart-drawer,
#theme-cart-overlay {
	display: none;
}

body.cart-open #theme-cart-drawer {
	display: flex;
}

body.cart-open #theme-cart-overlay {
	display: block;
}

body.cart-open {
	overflow: hidden;
}

#theme-cart-drawer.is-updating > * {
	opacity: 0.6;
	pointer-events: none;
}

.theme-cart-count:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Contact modal (functional)
   -------------------------------------------------------------------------- */
#theme-contact-dialog[hidden] {
	display: none;
}

body.theme-modal-open {
	overflow: hidden;
}

/* The compiled animation utilities ship without a fill mode, so the closing
   dialog snaps back to fully visible for the gap between the end of the exit
   animation and the moment the wrapper is hidden. Restore the intended mode. */
#theme-contact-dialog [class*="animate-in"],
#theme-contact-dialog [class*="animate-out"] {
	animation-fill-mode: both;
}

/* --------------------------------------------------------------------------
   Icon sizing: the wrapper carries the source width/height classes.
   -------------------------------------------------------------------------- */
svg.theme-icon-svg {
	width: 100%;
	height: 100%;
	display: block;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Product cards (the source card is one link with an overlay hit area)
   -------------------------------------------------------------------------- */
.theme-product-card-wrap {
	display: flex;
	flex-direction: column;
}

.theme-product-card {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
}

/* The overlay link stays BELOW the media. The media gains a stacking context
   from its hover transform, so leaving the link on top would paint it over
   the card's buttons and swallow their clicks. */
.theme-product-card > .theme-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: auto;
}

.theme-product-card *:not(.theme-card-link) {
	pointer-events: none;
}

/* Controls inside the card re-enable pointer events and sit above the overlay
   link; the element + class selector outranks the universal rule above. */
.theme-product-card a.theme-card-plus {
	pointer-events: auto;
	z-index: 3;
	transition: opacity 0.3s linear, transform 0.25s ease-out;
}

.theme-product-card a.theme-card-plus:hover {
	transform: scale(1.08);
}

.theme-product-card a.theme-card-plus:active {
	transform: scale(0.92);
}

/* A fixed ratio gives every card image the same height whatever the size of
   the uploaded file. */
.theme-product-card__media {
	position: relative;
	z-index: 2;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.theme-product-card:hover .theme-product-card__media {
	transform: translateY(-4px);
}

.theme-product-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.25, 0.4, 0.25, 1);
}

.theme-product-card:hover .theme-product-card__media img {
	transform: scale(1.04);
}

/* The media keeps its fixed 3/4 ratio: the flex line must never stretch it,
   otherwise two cards of the same row render their images at different
   sizes. The text block absorbs the leftover row height instead. */
.theme-product-card > .theme-card-link + .theme-product-card__media {
	flex: 0 0 auto;
}

.theme-product-card__info {
	flex: 1 1 auto;
	min-height: 0;
}

.theme-card-title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.theme-card-title-row .title,
.theme-product-card__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The source animates the sold out badge in from the left. */
@keyframes theme-sold-out-in {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}

.theme-product-card .theme-sold-out-badge {
	animation: theme-sold-out-in 0.4s ease-out both;
}

/* --------------------------------------------------------------------------
   Shop by ritual tiles
   -------------------------------------------------------------------------- */
.theme-ritual-tile {
	display: block;
	padding: 0;
	cursor: pointer;
}

.theme-ritual-img {
	transition: transform 0.7s cubic-bezier(0.25, 0.4, 0.25, 1);
}

.theme-ritual-tile:hover .theme-ritual-img {
	transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Quantity control + add-to-cart area (markup has no source equivalent)
   -------------------------------------------------------------------------- */
.theme-quantity-wrapper {
	display: inline-flex;
	align-items: center;
	border: 1px solid hsl(var(--border));
}

.theme-quantity-wrapper .theme-qty-minus,
.theme-quantity-wrapper .theme-qty-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.theme-quantity-wrapper .theme-qty-minus:hover,
.theme-quantity-wrapper .theme-qty-plus:hover {
	background-color: hsl(var(--secondary));
}

.theme-quantity-wrapper .theme-qty-input {
	width: 4.5rem;
	min-width: 2.75rem;
	padding: 0.5rem 1rem;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: inherit;
	background: transparent;
	border: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.theme-quantity-wrapper .theme-qty-input::-webkit-outer-spin-button,
.theme-quantity-wrapper .theme-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product .theme-add-to-cart-area {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
}

.single-product .theme-add-to-cart-area .theme-quantity-wrapper {
	flex: 0 0 auto;
}

.single-product .theme-add-to-cart-area .single_add_to_cart_button {
	flex: 1 1 100%;
	min-width: 160px;
}

/* Disabled add-to-cart buttons (simple out of stock / variable unselected) */
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
	cursor: not-allowed !important;
	opacity: 0.4 !important;
	pointer-events: none !important;
}

.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
	opacity: 0.4 !important;
}

/* Loading lock on AJAX add-to-cart buttons */
.ajax_add_to_cart.theme-btn-loading {
	opacity: 0.6 !important;
	pointer-events: none !important;
	cursor: wait !important;
}

.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after {
	display: none !important;
}

/* Hide "View cart" injected by WooCommerce after AJAX add-to-cart */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Variable product attribute UI
   -------------------------------------------------------------------------- */
.theme-attr-select-hidden {
	display: none !important;
}

.theme-variations-hidden {
	display: none !important;
}

.single-product .variations.shop_attributes tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td {
	display: block;
	width: 100%;
}

.single-product .variations tbody td.label {
	padding-bottom: 0.25rem;
}

.single-product .variations tbody td.value {
	padding-top: 0;
}

.single-product .woocommerce-variation-price {
	margin-bottom: 1rem;
	font-size: 1.25rem;
	font-family: var(--font-body);
}

.single-product .woocommerce-variation-availability {
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-family: var(--font-body);
	color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------------
   Price filter - dual overlapping range inputs (Section 31.4)
   -------------------------------------------------------------------------- */
.price-range-wrapper {
	position: relative;
	height: 1.25rem;
}

.price-range-wrapper .range-track-bg,
.price-range-wrapper .range-track-fill {
	position: absolute;
	height: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 9999px;
	pointer-events: none;
}

.price-range-wrapper .range-track-bg {
	left: 0;
	right: 0;
	background-color: hsl(var(--secondary));
}

.price-range-wrapper .range-track-fill {
	background-color: hsl(var(--primary));
}

.price-range-wrapper .range-input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.price-range-wrapper .range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	height: 1.25rem;
	width: 1.25rem;
	border-radius: 9999px;
	border: 2px solid hsl(var(--primary));
	background-color: hsl(var(--background));
	cursor: pointer;
}

.price-range-wrapper .range-input::-moz-range-thumb {
	pointer-events: auto;
	height: 1.25rem;
	width: 1.25rem;
	border-radius: 9999px;
	border: 2px solid hsl(var(--primary));
	background-color: hsl(var(--background));
	cursor: pointer;
}

.price-range-wrapper .range-input--max { z-index: 3; }
.price-range-wrapper .range-input--min { z-index: 4; }

.theme-price-panel {
	transition: height 0.3s var(--theme-ease-smooth), opacity 0.3s var(--theme-ease-smooth);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Single product responsive layout
   -------------------------------------------------------------------------- */
.single-product .theme-product-layout,
.single-product .theme-product-gallery,
.single-product .theme-product-info {
	min-width: 0;
	max-width: 100%;
}

.single-product .theme-product-thumbnails {
	flex-wrap: wrap;
	max-width: 100%;
}

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* --------------------------------------------------------------------------
   WooCommerce notices (scoped visibility)
   -------------------------------------------------------------------------- */
.single-product .woocommerce-message,
.single-product .woocommerce-info {
	display: none;
}

#theme-cart-drawer .woocommerce-message {
	display: none;
}

.shop-page-notice.woocommerce-message,
.woocommerce-archive .woocommerce-message,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border: 1px solid hsl(var(--border));
	border-radius: 0.5rem;
	background-color: hsl(var(--card));
	color: hsl(var(--foreground));
	font-family: var(--font-body);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.woocommerce-error {
	border-color: hsl(var(--destructive));
}

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
	color: hsl(var(--primary));
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   WordPress helpers
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: hsl(var(--background));
	clip: auto !important;
	clip-path: none;
	color: hsl(var(--foreground));
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.75rem 1rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   Checkout (native WooCommerce Checkout Block)
   -------------------------------------------------------------------------- */
body.woocommerce-checkout .site-main {
	padding-top: var(--header-height, 80px);
	padding-bottom: 4rem;
}

body.woocommerce-checkout .entry-content {
	max-width: 100%;
}

body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	min-width: 0;
	width: 100%;
	max-width: none;
}

body.woocommerce-checkout .wc-block-checkout {
	font-family: var(--font-body);
	color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-components-sidebar-layout {
	display: block;
}

@media (min-width: 768px) {
	body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		align-items: start;
	}
}

body.woocommerce-checkout .wc-block-components-notice-banner {
	grid-column: 1 / -1;
	border-radius: 0.5rem;
	border: 1px solid hsl(var(--border));
	background-color: hsl(var(--card));
	color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
	background-color: hsl(var(--muted));
	border-radius: var(--radius);
	padding: 2rem;
}

/* Checkout fields follow the design's input styling. WooCommerce Blocks keeps
   its own internal padding and floating-label layout, so only the surface,
   the type and the focus ring are forced here. */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-textarea textarea,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout input[type="search"],
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	color: hsl(var(--foreground)) !important;
	background-color: hsl(var(--background)) !important;
	border: 1px solid hsl(var(--border)) !important;
	border-radius: 0.375rem !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
body.woocommerce-checkout input[type="text"]:focus,
body.woocommerce-checkout input[type="email"]:focus,
body.woocommerce-checkout input[type="tel"]:focus,
body.woocommerce-checkout input[type="number"]:focus,
body.woocommerce-checkout input[type="search"]:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout input[type="text"]:focus-visible,
body.woocommerce-checkout input[type="email"]:focus-visible,
body.woocommerce-checkout input[type="tel"]:focus-visible,
body.woocommerce-checkout input[type="number"]:focus-visible,
body.woocommerce-checkout input[type="search"]:focus-visible,
body.woocommerce-checkout select:focus-visible,
body.woocommerce-checkout textarea:focus-visible {
	outline: none !important;
	border-color: hsl(var(--border)) !important;
	box-shadow: 0 0 0 1px hsl(var(--primary)) !important;
}

body.woocommerce-checkout .wc-block-components-text-input input::placeholder,
body.woocommerce-checkout .wc-block-components-textarea textarea::placeholder,
body.woocommerce-checkout textarea::placeholder,
body.woocommerce-checkout input::placeholder {
	color: hsl(var(--muted-foreground)) !important;
	opacity: 1 !important;
}

body.woocommerce-checkout .wc-block-checkout h2,
body.woocommerce-checkout .wc-block-checkout h3,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: hsl(var(--foreground));
	color: hsl(var(--background));
	border-radius: 9999px;
	padding: 1rem 2rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	width: 100%;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: hsl(var(--primary));
}

body.woocommerce-checkout .wc-block-components-button {
	border-radius: 0.375rem;
	font-family: var(--font-body);
}

body.woocommerce-checkout .wc-block-cart-items {
	border-color: hsl(var(--border));
}

body.woocommerce-checkout .wc-block-cart-item__total,
body.woocommerce-checkout .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-product-price {
	font-family: var(--font-body);
	color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description,
body.woocommerce-checkout .wc-block-components-totals-item__label {
	color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------------------
   Cart / My Account width + alignment parity
   -------------------------------------------------------------------------- */
body.theme-cart-page .site-main,
body.theme-account-page .site-main,
body.theme-thankyou-page .site-main {
	padding-top: var(--header-height, 80px);
	padding-bottom: 4rem;
}

body.theme-cart-page .entry-content,
body.theme-account-page .entry-content,
body.theme-thankyou-page .entry-content {
	max-width: 100%;
}

body.theme-cart-page .wc-block-cart,
body.theme-account-page .woocommerce {
	min-width: 0;
	max-width: 100%;
}

body.theme-thankyou-page {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Thank you page
   -------------------------------------------------------------------------- */
body.theme-thankyou-page .woocommerce-order {
	font-family: var(--font-body);
	color: hsl(var(--foreground));
}

body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title,
body.theme-thankyou-page .woocommerce-column__title {
	font-family: var(--font-display);
	font-weight: 600;
	padding: 0 0 1rem 0;
	color: hsl(var(--foreground));
}

body.theme-thankyou-page .woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background-color: hsl(var(--card));
}

body.theme-thankyou-page .woocommerce-order-overview li {
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: hsl(var(--muted-foreground));
}

body.theme-thankyou-page .woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: hsl(var(--foreground));
}

body.theme-thankyou-page .woocommerce-order-details table,
body.theme-thankyou-page .woocommerce-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

body.theme-thankyou-page .woocommerce-order-details table th,
body.theme-thankyou-page .woocommerce-order-details table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid hsl(var(--border));
	overflow-wrap: break-word;
}

body.theme-thankyou-page .woocommerce-order-details tfoot th {
	text-align: left;
}

body.theme-thankyou-page .woocommerce-order-details tfoot td {
	text-align: right;
}

body.theme-thankyou-page .woocommerce-customer-details {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

body.theme-thankyou-page .woocommerce-customer-details address {
	max-width: 480px;
	overflow-wrap: break-word;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   Classic WooCommerce forms / tables fallback styling
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-family: var(--font-body);
	border: 1px solid hsl(var(--border));
	border-radius: 0.375rem;
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	padding: 0.75rem 1rem;
}

.woocommerce table.shop_table {
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	border-collapse: separate;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid hsl(var(--border));
	padding: 0.75rem;
	font-family: var(--font-body);
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
	background-color: hsl(var(--card));
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--font-body);
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-radius: 0.375rem;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: hsl(var(--primary) / 0.9);
}

/* Pagination tweaks for the archive grid */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border: 1px solid hsl(var(--border));
	border-radius: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	text-decoration: none;
	color: hsl(var(--foreground));
}

.woocommerce-pagination ul.page-numbers li span.current {
	background-color: hsl(var(--foreground));
	color: hsl(var(--background));
	border-color: hsl(var(--foreground));
}