/**
 * Shopvane - WooCommerce styles.
 *
 * Loaded only on pages that can actually render a product (see
 * shopvane_is_shop_context()), so a blog post never downloads shop CSS.
 */

/* =========================================================================
   Shop layout
   ========================================================================= */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--sv-border);
	border-inline-start: 3px solid var(--sv-primary);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	list-style: none;
	font-size: .93rem;
}

.woocommerce-error {
	border-inline-start-color: var(--sv-accent);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	padding: 8px 14px;
	font-size: .85rem;
}

.woocommerce-products-header__title {
	display: none; /* Shown in the theme's page title bar instead. */
}

.sv-shop .woocommerce-result-count {
	margin: 0;
	color: var(--sv-text-muted);
	font-size: .88rem;
}

.sv-shop .woocommerce-ordering {
	margin: 0;
}

.sv-shop .woocommerce-ordering select {
	width: auto;
	min-width: 200px;
	padding-block: 9px;
	font-size: .9rem;
}

.woocommerce-notices-wrapper + .woocommerce-result-count,
.sv-shop form.woocommerce-ordering {
	display: inline-block;
}

/* The bar holding the count and the sort dropdown. */
.sv-shop .products {
	clear: both;
}

.sv-shop .woocommerce-result-count,
.sv-shop .woocommerce-ordering {
	vertical-align: middle;
}

.sv-shop .woocommerce-ordering {
	float: inline-end;
	margin-bottom: 22px;
}

.sv-shop .woocommerce-result-count {
	float: inline-start;
	margin-bottom: 22px;
	line-height: 40px;
}

/* =========================================================================
   Product grid
   ========================================================================= */

ul.products {
	display: grid;
	gap: var(--sv-grid-gap, 24px);
	grid-template-columns: repeat(var(--sv-cols-mobile, 2), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	ul.products {
		grid-template-columns: repeat(var(--sv-cols-tablet, 3), minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	ul.products {
		grid-template-columns: repeat(var(--sv-cols, 4), minmax(0, 1fr));
	}
}

/* WooCommerce adds first/last/columns-N classes for its own float layout. */
ul.products::before,
ul.products::after {
	content: none;
}

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* =========================================================================
   Product card - shared
   ========================================================================= */

.sv-pcard__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: border-color var(--sv-speed) var(--sv-ease), box-shadow var(--sv-speed) var(--sv-ease), transform var(--sv-speed) var(--sv-ease);
}

.sv-pcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sv-surface);
}

.sv-pcard__frame {
	position: relative;
	display: block;
	aspect-ratio: var(--sv-card-ratio, 3 / 4);
}

.sv-pcard__img,
.sv-pcard img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* "contain" is the right default for packshots on white; "cover" for
	   lifestyle photography. The Customizer sets this per shop. */
	object-fit: var(--sv-card-fit, cover);
	transition: transform .55s var(--sv-ease), opacity .35s var(--sv-ease);
}

.sv-pcard__img--alt {
	opacity: 0;
}

.sv-pcard--swap:hover .sv-pcard__img:not(.sv-pcard__img--alt) {
	opacity: 0;
}

.sv-pcard--swap:hover .sv-pcard__img--alt {
	opacity: 1;
}

/* Hover zoom only where a pointer exists. */
@media (hover: hover) {
	.sv-card-classic .sv-pcard:hover .sv-pcard__img:not(.sv-pcard__img--alt),
	.sv-card-editorial .sv-pcard:hover .sv-pcard__img:not(.sv-pcard__img--alt),
	.sv-card-minimal .sv-pcard:hover .sv-pcard__img:not(.sv-pcard__img--alt) {
		transform: scale(1.055);
	}
}

.sv-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: var(--sv-radius-sm);
	background: var(--sv-accent);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.3;
}

.sv-badge del,
.sv-badge ins {
	background: none;
	color: inherit;
	text-decoration: none;
}

.sv-pcard__oos {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 7px 10px;
	background: rgba(22, 24, 29, .8);
	color: #fff;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
}

.sv-pcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding-top: 12px;
}

.sv-align-center .sv-pcard__body {
	text-align: center;
	align-items: center;
}

.sv-pcard__cat {
	margin-bottom: 5px;
	color: var(--sv-text-muted);
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sv-pcard__title {
	margin: 0;
	/* Two lines reserved even for a one-line name, so every card in a row is
	   the same height and the buttons line up. */
	min-height: 2.6em;
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.3;
}

.sv-pcard__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--sv-heading);
}

.sv-pcard__title a:hover {
	color: var(--sv-primary);
}

.sv-pcard__rating {
	margin-top: 5px;
}

.sv-pcard__excerpt {
	margin: 6px 0 0;
	color: var(--sv-text-muted);
	font-size: .85rem;
}

.sv-pcard__price {
	margin-top: 8px;
	color: var(--sv-heading);
	font-size: 1.02rem;
	font-weight: 700;
}

.sv-pcard__price del {
	margin-inline-end: 7px;
	color: var(--sv-text-light);
	font-size: .86em;
	font-weight: 400;
}

.sv-pcard__price ins {
	background: none;
	color: var(--sv-accent);
	text-decoration: none;
}

.sv-pcard__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	/* Pushed to the bottom so a short product name never lifts the buttons. */
	margin-top: auto;
	padding-top: 12px;
	width: 100%;
}

.sv-align-center .sv-pcard__actions {
	justify-content: center;
}

.sv-pcard__actions > * {
	flex: 1 1 auto;
	min-width: 0;
}

.sv-pcard__cart,
.sv-pcard .button {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sv-pcard .added_to_cart {
	display: none; /* The count in the header already confirms the add. */
}

.sv-pcard .button.loading {
	opacity: .65;
	pointer-events: none;
}

/* Quick actions layered on the image (companion plugin). */
.sv-pcard__quick {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity var(--sv-speed) var(--sv-ease), transform var(--sv-speed) var(--sv-ease);
}

@media (hover: none) {
	/* No hover on a touch screen, so these have to be visible all the time. */
	.sv-pcard__quick {
		opacity: 1;
		transform: none;
	}
}

.sv-pcard:hover .sv-pcard__quick,
.sv-pcard:focus-within .sv-pcard__quick {
	opacity: 1;
	transform: none;
}

/* =========================================================================
   Card style: classic
   ========================================================================= */

.sv-card-classic .sv-pcard__inner {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	background: var(--sv-body-bg);
}

.sv-card-classic .sv-pcard:hover .sv-pcard__inner {
	border-color: var(--sv-border-strong);
	box-shadow: var(--sv-shadow);
	transform: translateY(-2px);
}

.sv-card-classic .sv-pcard__body {
	padding: 14px 14px 16px;
}

.sv-card-classic .sv-pcard__media {
	padding: 10px;
	background: var(--sv-body-bg);
}

.sv-card-classic .sv-pcard__frame {
	overflow: hidden;
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
}

/* =========================================================================
   Card style: editorial
   Borderless, uppercase, button revealed on hover. The look beauty and
   fashion brands use - a bordered box makes the same photography read as a
   cheap catalogue.
   ========================================================================= */

.sv-card-editorial .sv-pcard__inner {
	background: transparent;
}

.sv-card-editorial .sv-pcard__media {
	border-radius: 0;
	background: var(--sv-surface);
}

.sv-card-editorial .sv-pcard__title {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.45;
	text-transform: uppercase;
	min-height: 2.9em;
}

.sv-card-editorial .sv-pcard__price {
	font-size: .88rem;
	font-weight: 600;
}

.sv-card-editorial .sv-badge {
	border-radius: 0;
	background: var(--sv-ink);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sv-card-editorial .sv-pcard__actions .sv-btn,
.sv-card-editorial .sv-pcard__actions .button {
	border-radius: 0;
	border: 1px solid var(--sv-ink);
	background: transparent;
	color: var(--sv-ink);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sv-card-editorial .sv-pcard__actions .sv-btn:hover,
.sv-card-editorial .sv-pcard__actions .button:hover {
	background: var(--sv-ink);
	color: #fff;
	transform: none;
}

/* Reveal on hover, but only where hovering is possible. */
@media (hover: hover) and (min-width: 992px) {
	.sv-card-editorial .sv-pcard__actions {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity var(--sv-speed) var(--sv-ease), transform var(--sv-speed) var(--sv-ease);
	}

	.sv-card-editorial .sv-pcard:hover .sv-pcard__actions,
	.sv-card-editorial .sv-pcard:focus-within .sv-pcard__actions {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   Card style: minimal
   ========================================================================= */

.sv-card-minimal .sv-pcard__media {
	border-radius: var(--sv-radius);
}

.sv-card-minimal .sv-pcard__title {
	font-size: .92rem;
	font-weight: 500;
}

.sv-card-minimal .sv-pcard__actions {
	padding-top: 10px;
}

/* =========================================================================
   Card style: overlay
   ========================================================================= */

.sv-card-overlay .sv-pcard__inner {
	position: relative;
	border-radius: var(--sv-radius);
	overflow: hidden;
}

.sv-card-overlay .sv-pcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .1) 55%, transparent 80%);
}

.sv-card-overlay .sv-pcard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px;
	color: #fff;
}

.sv-card-overlay .sv-pcard__title a,
.sv-card-overlay .sv-pcard__price,
.sv-card-overlay .sv-pcard__cat {
	color: #fff;
}

.sv-card-overlay .sv-pcard__price del {
	color: rgba(255, 255, 255, .65);
}

.sv-card-overlay .sv-pcard__price ins {
	color: #fff;
}

.sv-card-overlay .sv-pcard__actions .sv-btn,
.sv-card-overlay .sv-pcard__actions .button {
	background: #fff;
	color: var(--sv-ink);
	border-color: #fff;
}

/* =========================================================================
   Star ratings
   ========================================================================= */

.star-rating {
	position: relative;
	display: block;
	overflow: hidden;
	width: 5.4em;
	height: 1.1em;
	font-size: .72rem;
	line-height: 1.1;
	font-family: star; /* WooCommerce's own star font. */
	color: #f5a623;
}

.star-rating::before {
	content: "\73\73\73\73\73";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	color: var(--sv-border-strong);
}

.star-rating span {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	overflow: hidden;
	padding-top: 1.2em;
}

.star-rating span::before {
	content: "\53\53\53\53\53";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.woocommerce-review-link {
	color: var(--sv-text-muted);
	font-size: .85rem;
}

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

.single-product div.product {
	display: grid;
	gap: clamp(24px, 4vw, 52px);
	align-items: start;
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}

	.sv-single-wide div.product {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}

	.sv-single-sticky div.product .entry-summary {
		position: sticky;
		top: 100px;
	}
}

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	min-width: 0;
}

.single-product div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	border-radius: var(--sv-radius);
}

.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.single-product .flex-control-thumbs img {
	border-radius: var(--sv-radius-sm);
	cursor: pointer;
	opacity: .65;
	transition: opacity var(--sv-speed) var(--sv-ease);
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
	opacity: 1;
}

.single-product .product_title {
	margin-bottom: 12px;
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
}

.single-product .entry-summary .price {
	display: block;
	margin-bottom: 16px;
	color: var(--sv-heading);
	font-size: 1.5rem;
	font-weight: 700;
}

.single-product .entry-summary .price del {
	margin-inline-end: 10px;
	color: var(--sv-text-light);
	font-size: .7em;
	font-weight: 400;
}

.single-product .entry-summary .price ins {
	background: none;
	color: var(--sv-accent);
	text-decoration: none;
}

.woocommerce-product-details__short-description {
	margin-bottom: 20px;
	color: var(--sv-text-muted);
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 22px;
}

.single-product form.cart.variations_form {
	display: block;
}

.single-product form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-btn-radius);
	overflow: hidden;
}

.single-product form.cart .quantity input.qty {
	width: 68px;
	padding: 12px 6px;
	border: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
}

.sv-buynow--single {
	flex: 1 1 160px;
}

.variations_form .variations {
	width: 100%;
	margin-bottom: 14px;
	border: 0;
}

.variations_form .variations th,
.variations_form .variations td {
	padding: 6px 0;
	border: 0;
	background: none;
	text-align: start;
	vertical-align: middle;
}

.variations_form .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: .84rem;
}

.product_meta {
	padding-top: 16px;
	border-top: 1px solid var(--sv-border);
	color: var(--sv-text-muted);
	font-size: .87rem;
}

.product_meta > span {
	display: block;
	margin-bottom: 5px;
}

/* Tabs */
.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 20px;
}

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

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
	color: var(--sv-text-muted);
	font-weight: 600;
	font-size: .93rem;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--sv-primary);
	color: var(--sv-primary);
}

.woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.woocommerce-Tabs-panel {
	max-width: 80ch;
}

/* Related and upsells */
.related.products,
.upsells.products,
.cross-sells {
	grid-column: 1 / -1;
	margin-top: 20px;
	padding-top: 34px;
	border-top: 1px solid var(--sv-border);
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	margin-bottom: 22px;
	font-size: 1.3rem;
}

/* Reviews */
.woocommerce-Reviews .commentlist {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.woocommerce-Reviews .comment_container {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--sv-border);
}

.woocommerce-Reviews .comment_container img {
	flex: 0 0 auto;
	border-radius: 50%;
}

.woocommerce-Reviews .meta {
	margin-bottom: 6px;
	font-size: .88rem;
}

/* =========================================================================
   Sticky add to cart (mobile)
   ========================================================================= */

.sv-stickycart {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 130;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--sv-body-bg);
	border-top: 1px solid var(--sv-border);
	box-shadow: 0 -4px 18px rgba(16, 24, 40, .1);
	transform: translateY(100%);
	transition: transform .28s var(--sv-ease);
}

.sv-stickycart[hidden] {
	display: none;
}

.sv-stickycart.is-visible {
	transform: translateY(0);
}

@media (min-width: 992px) {
	.sv-stickycart {
		display: none;
	}
}

.sv-stickycart__info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sv-stickycart__info img {
	width: 42px;
	height: 42px;
	border-radius: var(--sv-radius-sm);
	object-fit: cover;
}

.sv-stickycart__title {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sv-stickycart__price {
	display: block;
	font-size: .85rem;
	color: var(--sv-text-muted);
}

.sv-stickycart__price del {
	margin-inline-end: 5px;
	opacity: .7;
}

.sv-stickycart__price ins {
	background: none;
	text-decoration: none;
	color: var(--sv-accent);
}

.sv-stickycart__btn {
	flex: 0 0 auto;
}

.sv-stickycart__oos {
	color: var(--sv-text-muted);
	font-size: .85rem;
	font-weight: 600;
}

/* When the sticky cart shows, the bottom bar would sit on top of it. */
.sv-has-mobile-bar .sv-stickycart.is-visible ~ .sv-mobilebar,
.sv-has-mobile-bar .sv-stickycart.is-visible + .sv-mobilebar {
	display: none;
}

/* =========================================================================
   Cart and checkout
   ========================================================================= */

.woocommerce-cart-form table.shop_table,
.woocommerce-checkout table.shop_table {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--sv-surface);
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-inline: 0;
	border-top: 0;
	border-bottom: 1px solid var(--sv-border);
}

.woocommerce table.cart img {
	width: 64px;
	border-radius: var(--sv-radius-sm);
}

.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
	padding: 22px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius);
	background: var(--sv-surface);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	margin-top: 0;
	font-size: 1.15rem;
}

.woocommerce-cart .cart-collaterals {
	max-width: 460px;
	margin-inline-start: auto;
	margin-top: 28px;
}

.woocommerce .coupon {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.woocommerce .coupon input {
	max-width: 220px;
}

/* Two column checkout on wide screens. WooCommerce's classic checkout puts
   #customer_details and #order_review as siblings, so the grid has to be
   declared on the form itself - flexing only inside #customer_details leaves
   the order summary full width underneath. */
@media (min-width: 992px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}

	form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 6px;
}

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

.woocommerce-checkout #payment {
	border-radius: var(--sv-radius);
	background: var(--sv-body-bg);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 14px;
	border-bottom: 1px solid var(--sv-border);
	list-style: none;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 14px;
}

.woocommerce-checkout #place_order {
	width: 100%;
	padding-block: 15px;
	font-size: 1rem;
}

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

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--sv-radius-sm);
	color: var(--sv-text);
	font-weight: 500;
}

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

@media (min-width: 768px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 34px;
		align-items: start;
	}
}

/* Widgets that WooCommerce provides */
.widget_price_filter .price_slider_wrapper .ui-slider {
	height: 4px;
	background: var(--sv-border);
	border-radius: 2px;
}

.widget_price_filter .ui-slider .ui-slider-range {
	background: var(--sv-primary);
}

.widget_price_filter .ui-slider .ui-slider-handle {
	width: 15px;
	height: 15px;
	margin-inline-start: -7px;
	border-radius: 50%;
	background: var(--sv-primary);
	cursor: grab;
}

.woocommerce-widget-layered-nav-list {
	list-style: none;
}

/* =========================================================================
   Overriding WooCommerce's own button and badge styles
   =========================================================================
   WooCommerce ships woocommerce.css with its brand purple baked into high
   specificity selectors like ".woocommerce a.button.alt". A theme that only
   styles `button` loses every one of those, which is why an untouched shop
   shows purple Add to cart buttons on a teal site. These rules match its
   specificity and hand the colours back to the theme tokens.
   ========================================================================= */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	padding: var(--sv-btn-padding-y) var(--sv-btn-padding-x);
	border: 1px solid transparent;
	border-radius: var(--sv-btn-radius);
	background: var(--sv-primary);
	color: var(--sv-primary-contrast);
	font-weight: var(--sv-btn-weight);
	font-size: .95rem;
	line-height: 1.35;
	letter-spacing: var(--sv-btn-spacing);
	text-transform: var(--sv-btn-transform);
	transition: background-color var(--sv-speed) var(--sv-ease), color var(--sv-speed) var(--sv-ease),
		border-color var(--sv-speed) var(--sv-ease), transform var(--sv-speed) var(--sv-ease);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--sv-primary-hover);
	color: var(--sv-primary-contrast);
	transform: translateY(-1px);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
	opacity: .5;
	transform: none;
}

/* Secondary actions (Update cart, Continue shopping) read as outline buttons. */
.woocommerce .cart .button[name="update_cart"],
.woocommerce .return-to-shop .button,
.woocommerce-message .button,
.woocommerce-info .button {
	background: transparent;
	border-color: var(--sv-border-strong);
	color: var(--sv-text);
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background: var(--sv-primary);
	border-color: var(--sv-primary);
	color: var(--sv-primary-contrast);
}

/* WooCommerce's own sale flash on the single product page. The loop uses the
   theme's .sv-badge, but this one is printed by WooCommerce itself. */
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	inset-inline-end: auto;
	z-index: 3;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 5px 11px;
	border-radius: var(--sv-radius-sm);
	background: var(--sv-accent);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* =========================================================================
   Single product: add to cart row
   ========================================================================= */

.single-product form.cart .quantity {
	/* Without this the quantity box stretches to the full column width and
	   pushes Add to cart onto its own line. */
	flex: 0 0 auto;
	width: auto;
}

.single-product form.cart .quantity input.qty {
	width: 74px;
	min-width: 0;
}

.single-product div.product form.cart .button {
	float: none;
}

/* Gallery placeholder: a product with no image should still hold its shape
   rather than collapsing and leaving the summary floating beside a void. */
.single-product .woocommerce-product-gallery {
	position: relative;
}

.single-product .woocommerce-product-gallery__wrapper:empty::before,
.single-product .woocommerce-product-gallery--columns-1 .woocommerce-product-gallery__image:only-child img[src=""] {
	content: "";
	display: block;
	aspect-ratio: var(--sv-card-ratio, 3 / 4);
	border-radius: var(--sv-radius);
	background: var(--sv-surface);
}

.single-product .woocommerce-product-gallery img[src=""],
.single-product .woocommerce-product-gallery img:not([src]) {
	aspect-ratio: var(--sv-card-ratio, 3 / 4);
	width: 100%;
	background: var(--sv-surface);
	border-radius: var(--sv-radius);
}

/* WooCommerce prints the panel heading again inside each tab panel. */
.woocommerce-tabs .panel > h2:first-of-type,
.woocommerce-Tabs-panel > h2:first-of-type {
	display: none;
}

/* WooCommerce lays the single product out with floats and 48% widths. Inside
   the theme's CSS grid that leaves the gallery filling less than half its own
   column, with the rest of the column empty - which reads as a broken image. */
/* The element part matters here. WooCommerce styles these as
   ".woocommerce div.product div.images" - three classes and two elements. A
   rule written as ".woocommerce div.product .woocommerce-product-gallery" has
   three classes and only one element, so it loses and the float stays. Naming
   the div and both of its classes puts this rule ahead. */
.woocommerce div.product div.woocommerce-product-gallery.images,
.woocommerce div.product div.summary.entry-summary,
.woocommerce-page div.product div.woocommerce-product-gallery.images,
.woocommerce-page div.product div.summary.entry-summary {
	float: none;
	width: 100%;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__image {
	width: 100%;
}

/* A tiny source image should not be blown up to the full column width. */
.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
	background: var(--sv-surface);
	border-radius: var(--sv-radius);
}