/*
|-------------
|Design tokens
|-------------
*/
:root {
	--wms-accent: #111827;
	--wms-accent-ink: #ffffff;
	--wms-ink: #111827;
	--wms-muted: #6b7280;
	--wms-line: #e5e7eb;
	--wms-surface: #ffffff;
	--wms-soft: #f4f4f5;
	--wms-sale: #dc2626;
	--wms-radius: 16px;
	--wms-radius-sm: 10px;
	--wms-shadow-rest: 0 1px 2px rgba( 17, 24, 39, .05 ), 0 6px 18px -8px rgba( 17, 24, 39, .16 );
	--wms-shadow: 0 2px 4px rgba( 17, 24, 39, .05 ), 0 16px 32px -12px rgba( 17, 24, 39, .26 );

	/* Card type scale: phones (2 narrow columns) first, larger screens below. */
	--wms-fs-cat: 10px;
	--wms-fs-title: 13.5px;
	--wms-fs-text: 12px;
	--wms-fs-price: 14.5px;
	--wms-fs-btn: 13px;
	--wms-card-pad: 10px;
	--wms-ease: cubic-bezier( .2, .8, .2, 1 );
	--wms-bar-h: 62px;
	--wms-cols: 4;
}

@media ( min-width: 768px ) {
	:root {
		--wms-fs-cat: 11px;
		--wms-fs-title: 15px;
		--wms-fs-text: 13px;
		--wms-fs-price: 16px;
		--wms-fs-btn: 14px;
		--wms-card-pad: 14px;
	}
}

/*
|------------
|Catalog grid
|------------
*/
/*
 * Columns and gaps are !important on purpose: themes such as Astra set them with
 * selectors like `.woocommerce.mobile-columns-1 ul.products:not(.elementor-grid)`.
 * Phones get 2 columns; only screens 345px and narrower drop to 1.
 */
.wms-active ul.products {
	display: grid !important;
	grid-template-columns: minmax( 0, 1fr ) !important;
	gap: 18px 14px !important;
	width: 100% !important;
	max-width: 100%;
	margin: 0 0 2rem !important;
	padding: 0 !important;
	list-style: none;
}

@media ( min-width: 346px ) {
	.wms-active ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

/* Theme clearfix pseudo-elements would otherwise become grid cells. */
.wms-active ul.products::before,
.wms-active ul.products::after {
	content: none !important;
	display: none !important;
}

.wms-active ul.products li.product {
	display: flex;
	min-width: 0;
	width: auto !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
	background: none;
	border: 0;
	box-shadow: none;
}

@media ( min-width: 768px ) {
	.wms-active ul.products {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
		gap: 26px 22px !important;
	}
}

@media ( min-width: 1024px ) {
	.wms-active ul.products {
		grid-template-columns: repeat( var( --wms-cols ), minmax( 0, 1fr ) ) !important;
		gap: 32px 26px !important;
	}
}

/*
|------------
|Product card
|------------
*/
.wms-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var( --wms-surface );
	border: 1px solid rgba( 17, 24, 39, .06 );
	border-radius: var( --wms-radius );
	box-shadow: var( --wms-shadow-rest );
	overflow: hidden;
	transition: transform .25s var( --wms-ease ), box-shadow .25s var( --wms-ease );
}

.wms-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --wms-shadow );
}

.wms-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var( --wms-soft );
	overflow: hidden;
}

.wms-card__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	transition: transform .5s var( --wms-ease );
}

.wms-card:hover .wms-card__media img {
	transform: scale( 1.05 );
}

.wms-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wms-badge {
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	color: #fff;
	background: var( --wms-ink );
	border-radius: 999px;
}

.wms-badge--sale {
	background: var( --wms-sale );
}

.wms-badge--out {
	color: var( --wms-ink );
	background: rgba( 255, 255, 255, .92 );
}

.wms-badge--hot {
	background: var( --wms-accent );
	color: var( --wms-accent-ink );
}

.wms-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
	padding: var( --wms-card-pad ) var( --wms-card-pad ) calc( var( --wms-card-pad ) + 2px );
}

.wms-card__cat {
	overflow: hidden;
	font-size: var( --wms-fs-cat );
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --wms-muted );
}

.wms-active .wms-card__title {
	display: -webkit-box;
	margin: 0 !important;
	padding: 0 !important;
	font-size: var( --wms-fs-title ) !important;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wms-card__title a {
	color: var( --wms-ink );
	text-decoration: none;
}

.wms-card__title a::after {
	/* Whole card is clickable via the title link. */
	content: "";
	position: absolute;
	inset: 0;
}

.wms-card {
	position: relative;
}

.wms-card__rating .star-rating {
	margin: 0 !important;
	font-size: 12px;
}

.wms-card__excerpt {
	display: -webkit-box;
	margin: 0 !important;
	font-size: var( --wms-fs-text );
	line-height: 1.5;
	color: var( --wms-muted );
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wms-card__footer {
	position: relative;
	z-index: 1; /* Above the stretched title link. */
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

.wms-active .wms-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	margin: 0 !important;
	font-size: var( --wms-fs-price ) !important;
	font-weight: 700;
	line-height: 1.3 !important;
	color: var( --wms-ink ) !important;
}

.wms-card__price del {
	font-size: .82em;
	font-weight: 400;
	color: var( --wms-muted );
	opacity: 1;
}

.wms-card__price ins {
	text-decoration: none;
	background: none;
}

.wms-active .wms-card .wms-btn,
.wms-active .wms-card .button {
	display: block !important;
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 11px 10px !important;
	overflow: hidden;
	font-size: var( --wms-fs-btn ) !important;
	font-weight: 600;
	line-height: 1.2 !important;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap !important;
	color: var( --wms-accent-ink ) !important;
	background: var( --wms-accent ) !important;
	border: 0 !important;
	border-radius: var( --wms-radius-sm ) !important;
	box-shadow: none !important;
	text-decoration: none;
	transition: filter .2s, transform .1s;
}

.wms-active .wms-card .button:hover {
	filter: brightness( 1.15 );
}

.wms-active .wms-card .button:active {
	transform: scale( .98 );
}

.wms-active .wms-card .button.loading {
	opacity: .65;
	pointer-events: none;
}

.wms-active .wms-card .added_to_cart {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: var( --wms-ink );
	text-decoration: underline;
	padding: 0 !important;
}

/*
|-----------------
|Product carousels
|-----------------
*/

/*
 * A carousel is a band between catalog rows. Its colour comes from the row's setting as
 * --band-accent (with a matching --band-accent-ink, picked on the server for contrast);
 * the background variant (tint, dark, plain) is derived from that one colour.
 */
.wms-carousel {
	--band-accent: var( --wms-accent );
	--band-accent-ink: #fff;
	--band-ink: var( --wms-ink );
	--band-muted: var( --wms-muted );
	--band-line: rgba( 17, 24, 39, .1 );

	position: relative;
	isolation: isolate;
	margin: 6px 0 34px;
	padding: 18px 16px 14px;
	overflow: hidden;
	color: var( --band-ink );
	border-radius: 22px;
}

.wms-carousel--bg-tint {
	background: linear-gradient( 135deg, color-mix( in srgb, var( --band-accent ) 6%, #fff ) 0%, color-mix( in srgb, var( --band-accent ) 20%, #fff ) 100% );
}

.wms-carousel--bg-dark {
	--band-ink: #fff;
	--band-muted: rgba( 255, 255, 255, .72 );
	--band-line: rgba( 255, 255, 255, .18 );

	background:
		radial-gradient( 120% 90% at 85% 0%, color-mix( in srgb, var( --band-accent ) 34%, #0b1020 ) 0%, transparent 65% ),
		linear-gradient( 160deg, #0b1020 0%, #111a33 100% );
}

.wms-carousel--bg-plain {
	padding-right: 0;
	padding-left: 0;
	background: none;
}

/* Browsers without color-mix() get a neutral band in the same spirit. */
@supports not ( color: color-mix( in srgb, red 50%, white ) ) {
	.wms-carousel--bg-tint {
		background: #f4f6fa;
	}

	.wms-carousel--bg-dark {
		background: linear-gradient( 160deg, #0b1020 0%, #1e1b4b 100% );
	}
}

/* Slowly drifting glow in the band's colour; decoration only, transform-animated. */
.wms-carousel::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -100px;
	z-index: -1;
	width: 360px;
	height: 360px;
	background: radial-gradient( circle, color-mix( in srgb, var( --band-accent ) 45%, transparent ) 0%, transparent 68% );
	opacity: .55;
	pointer-events: none;
	animation: wms-drift 14s ease-in-out infinite alternate;
}

.wms-carousel--bg-plain::before {
	content: none;
}

@keyframes wms-drift {
	to {
		transform: translate( -55vw, 120px ) scale( 1.25 );
	}
}

.wms-carousel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.wms-carousel__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var( --band-accent-ink );
	background: var( --band-accent );
	border-radius: 12px;
	box-shadow: 0 10px 20px -10px var( --band-accent );
}

.wms-carousel__heading {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wms-carousel__eyebrow {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --band-accent );
}

.wms-carousel--bg-tint .wms-carousel__eyebrow,
.wms-carousel--bg-plain .wms-carousel__eyebrow {
	/* Keep light accents (gold, lime) readable on light bands. */
	color: color-mix( in srgb, var( --band-accent ) 75%, #111827 );
}

.wms-active .wms-carousel__title {
	margin: 0 !important;
	overflow: hidden;
	font-size: clamp( 1.2rem, 4vw, 1.8rem ) !important;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var( --band-ink ) !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wms-carousel__nav {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
	margin-left: auto;
}

.wms-carousel.is-static .wms-carousel__nav,
.wms-carousel.is-static .wms-carousel__pager > * {
	visibility: hidden;
}

.wms-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 !important;
	color: var( --band-ink ) !important;
	background: rgba( 255, 255, 255, .78 ) !important;
	border: 1px solid var( --band-line ) !important;
	border-radius: 999px !important;
	box-shadow: 0 6px 14px -8px rgba( 17, 24, 39, .4 ) !important;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	transition: background-color .2s, color .2s, transform .15s;
}

.wms-carousel--bg-dark .wms-carousel__arrow {
	background: rgba( 255, 255, 255, .1 ) !important;
}

.wms-carousel__arrow:hover {
	color: var( --band-accent-ink ) !important;
	background: var( --band-accent ) !important;
	border-color: transparent !important;
}

.wms-carousel__arrow:active {
	transform: scale( .92 );
}

.wms-carousel__stage {
	position: relative;
}

.wms-carousel__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 12px;
	margin-top: 6px;
}

.wms-carousel--sale .wms-card__price ins {
	color: color-mix( in srgb, var( --band-accent ) 85%, #111827 );
}

/*
|-------------
|Layout: ring
|-------------
*/

/*
 * Every card sits in the same grid cell, so the stage is always as tall as the tallest
 * card, whichever card is in front. Cards move only by transform: position values
 * (data-wms-pos, set by JS) map to the --x/--s/--r/--o/--z/--f variables below.
 */
.wms-carousel--ring {
	--ring-w: min( 60vw, 236px );
	--ring-x1: 66%;
	--ring-x2: 122%;
}

.wms-carousel--ring .wms-carousel__stage {
	perspective: 1300px;
}

/* Spotlight behind the front card. */
.wms-carousel--ring .wms-carousel__stage::before {
	content: "";
	position: absolute;
	top: 6%;
	left: 50%;
	z-index: 0;
	width: calc( var( --ring-w ) * 1.9 );
	height: 80%;
	background: radial-gradient( closest-side, color-mix( in srgb, var( --band-accent ) 38%, transparent ), transparent );
	transform: translateX( -50% );
	pointer-events: none;
}

/* Floor shadow under the front card. */
.wms-carousel--ring .wms-carousel__loop {
	position: relative;
}

.wms-carousel--ring .wms-carousel__loop::after {
	content: "";
	position: absolute;
	bottom: 14px;
	left: 50%;
	width: calc( var( --ring-w ) * .9 );
	height: 26px;
	background: radial-gradient( closest-side, rgba( 2, 6, 23, .38 ), transparent );
	transform: translateX( -50% );
	pointer-events: none;
}

.wms-active .wms-carousel--ring ul.products {
	display: grid !important;
	grid-template-columns: minmax( 0, 1fr ) !important;
	place-items: center;
	gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 12px 0 30px !important;
	overflow: visible;
	transform-style: preserve-3d;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* Defaults stay at low specificity so the position rules below can override them. */
.wms-carousel--ring li.product {
	--x: 0;
	--tz: -380px;
	--s: .6;
	--r: 0deg;
	--o: 0;
	--z: 0;
	--f: brightness( .9 ) saturate( .85 );

	visibility: hidden;
	transition: transform .8s var( --wms-ease ), opacity .6s ease, visibility 0s linear .8s;
	cursor: pointer;
}

.wms-active .wms-carousel--ring ul.products li.product {
	position: relative;
	z-index: var( --z );
	grid-area: 1 / 1 !important;
	width: var( --ring-w ) !important;
	max-width: 100%;
	opacity: var( --o );
	transform: translateX( var( --x ) ) translateZ( var( --tz ) ) scale( var( --s ) ) rotateY( var( --r ) );
	will-change: transform;
}

.wms-carousel--ring li.product .wms-card {
	filter: var( --f );
	transition: box-shadow .6s ease, filter .6s ease, transform .25s var( --wms-ease );
}

.wms-carousel--bg-dark.wms-carousel--ring li.product {
	--f: brightness( .72 ) saturate( .8 );
}

/* Positions. The :not(.is-ready) selectors draw the same first frame before JS runs. */
.wms-carousel--ring li.product[data-wms-pos="0"],
.wms-carousel--ring:not( .is-ready ) li.product:first-child {
	--x: 0;
	--tz: 0px;
	--s: 1;
	--r: 0deg;
	--o: 1;
	--z: 5;
	--f: none;

	visibility: visible;
	transition-delay: 0s;
	cursor: auto;
}

.wms-carousel--ring li.product[data-wms-pos="1"],
.wms-carousel--ring:not( .is-ready ) li.product:nth-child( 2 ) {
	--x: var( --ring-x1 );
	--tz: -160px;
	--s: .92;
	--r: -26deg;
	--o: .95;
	--z: 4;

	visibility: visible;
	transition-delay: 0s;
}

.wms-carousel--ring li.product[data-wms-pos="-1"],
.wms-carousel--ring:not( .is-ready ) li.product:last-child:not( :nth-child( 2 ) ) {
	--x: calc( var( --ring-x1 ) * -1 );
	--tz: -160px;
	--s: .92;
	--r: 26deg;
	--o: .95;
	--z: 4;

	visibility: visible;
	transition-delay: 0s;
}

.wms-carousel--ring li.product[data-wms-pos="2"],
.wms-carousel--ring.wms-carousel--depth-2:not( .is-ready ) li.product:nth-child( 3 ):not( :last-child ) {
	--x: var( --ring-x2 );
	--tz: -300px;
	--s: .82;
	--r: -38deg;
	--o: .6;
	--z: 3;

	visibility: visible;
	transition-delay: 0s;
}

.wms-carousel--ring li.product[data-wms-pos="-2"],
.wms-carousel--ring.wms-carousel--depth-2:not( .is-ready ) li.product:nth-last-child( 2 ):nth-child( n + 4 ) {
	--x: calc( var( --ring-x2 ) * -1 );
	--tz: -300px;
	--s: .82;
	--r: 38deg;
	--o: .6;
	--z: 3;

	visibility: visible;
	transition-delay: 0s;
}

.wms-carousel--ring li.product[data-wms-pos="far-right"] {
	--x: 150%;
}

.wms-carousel--ring li.product[data-wms-pos="far-left"] {
	--x: -150%;
}

/* The front card is lit in the band colour. */
.wms-carousel--ring li.product[data-wms-pos="0"] .wms-card,
.wms-carousel--ring:not( .is-ready ) li.product:first-child .wms-card {
	box-shadow: 0 0 0 2px var( --band-accent ), 0 30px 50px -24px var( --band-accent ), 0 12px 26px -14px rgba( 2, 6, 23, .45 );
}

.wms-carousel--ring li.product:not( [data-wms-pos="0"] ) .wms-card:hover {
	transform: none;
}

/* Equal-height cards: title and description keep their space on every card. */
.wms-active .wms-carousel--ring .wms-card__title {
	min-height: calc( 2em * 1.35 );
}

.wms-carousel--ring .wms-card__excerpt {
	min-height: 3em;
	visibility: hidden;
	opacity: 0;
	transition: opacity .4s ease;
}

.wms-carousel--ring li.product[data-wms-pos="0"] .wms-card__excerpt,
.wms-carousel--ring:not( .is-ready ) li.product:first-child .wms-card__excerpt {
	visibility: visible;
	opacity: 1;
}

/* Dots: fixed size, the active one grows by transform (no layout shift). */
.wms-carousel__dots {
	display: flex;
	gap: 8px;
}

.wms-carousel__dots i {
	display: block;
	width: 7px;
	height: 7px;
	background: var( --band-line );
	border-radius: 999px;
	transition: transform .3s var( --wms-ease ), background-color .3s;
}

.wms-carousel--bg-dark .wms-carousel__dots i {
	background: rgba( 255, 255, 255, .28 );
}

.wms-carousel__dots i.is-active {
	background: var( --band-accent );
	transform: scale( 1.6 );
}

@media ( max-width: 599px ) {
	.wms-carousel--ring {
		--ring-x1: 62%;
	}

	/* Phones show one card on each side. */
	.wms-carousel--ring.wms-carousel--depth-2:not( .is-ready ) li.product:nth-child( 3 ):not( :last-child ),
	.wms-carousel--ring.wms-carousel--depth-2:not( .is-ready ) li.product:nth-last-child( 2 ):nth-child( n + 4 ) {
		--o: 0;

		visibility: hidden;
	}
}

@media ( min-width: 768px ) {
	.wms-carousel--ring {
		--ring-w: 250px;
		--ring-x1: 74%;
		--ring-x2: 136%;
	}
}

@media ( min-width: 1200px ) {
	.wms-carousel--ring {
		--ring-w: 272px;
	}
}

/*
|--------------
|Layout: slide
|--------------
*/

/*
 * The track reuses the catalog's ul.products. --wms-visible is how many cards fit in view;
 * a fraction shows part of the next card so shoppers can tell it scrolls.
 */
.wms-active .wms-carousel--slide ul.products {
	--wms-visible: 2.15;
	--wms-gap: 12px;
	--fade: 36px;

	display: grid !important;
	grid-auto-flow: column !important;
	grid-template-columns: none !important;
	grid-auto-columns: calc( ( 100% - ( var( --wms-visible ) - 1 ) * var( --wms-gap ) ) / var( --wms-visible ) ) !important;
	gap: var( --wms-gap ) !important;
	width: calc( 100% + 12px ) !important;
	max-width: none;
	margin: 0 -6px !important;
	padding: 6px 6px 14px !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 6px;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - var( --fade ) ), transparent );
	mask-image: linear-gradient( to right, #000 calc( 100% - var( --fade ) ), transparent );
}

.wms-active .wms-carousel--slide:not( .is-start ):not( .is-end ) ul.products {
	-webkit-mask-image: linear-gradient( to right, transparent, #000 var( --fade ), #000 calc( 100% - var( --fade ) ), transparent );
	mask-image: linear-gradient( to right, transparent, #000 var( --fade ), #000 calc( 100% - var( --fade ) ), transparent );
}

.wms-active .wms-carousel--slide.is-end:not( .is-start ) ul.products {
	-webkit-mask-image: linear-gradient( to right, transparent, #000 var( --fade ) );
	mask-image: linear-gradient( to right, transparent, #000 var( --fade ) );
}

.wms-active .wms-carousel--slide.is-static ul.products {
	-webkit-mask-image: none;
	mask-image: none;
}

.wms-active .wms-carousel--slide ul.products::-webkit-scrollbar {
	display: none;
}

.wms-active .wms-carousel--slide ul.products li.product {
	scroll-snap-align: start;
}

.wms-carousel--slide .wms-card__excerpt {
	display: none;
}

.wms-carousel--slide .wms-carousel__nav {
	display: none;
}

.wms-carousel__progress {
	position: relative;
	display: block;
	width: 160px;
	height: 4px;
	overflow: hidden;
	background: var( --band-line );
	border-radius: 999px;
}

/* Width is fixed; JS moves and scales the thumb with a transform (no layout shift). */
.wms-carousel__progress span {
	position: absolute;
	inset: 0;
	background: var( --band-accent );
	border-radius: inherit;
	transform: scaleX( .3 );
	transform-origin: left center;
	transition: transform .15s linear;
}

/* Shared card tweaks inside bands. */
.wms-carousel .wms-card {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, .06 ), 0 10px 24px -14px rgba( 15, 23, 42, .45 );
}

.wms-carousel .wms-card__body {
	gap: 4px;
}

.wms-active .wms-carousel .wms-card .button {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}

@media ( max-width: 345px ) {
	.wms-carousel {
		padding: 14px 12px 12px;
		border-radius: 18px;
	}

	.wms-active .wms-carousel--slide ul.products {
		--wms-visible: 1.3;
	}

	.wms-carousel__icon {
		width: 34px;
		height: 34px;
	}

	.wms-carousel__arrow {
		width: 34px;
		height: 34px;
	}
}

@media ( min-width: 768px ) {
	.wms-carousel {
		margin: 10px 0 44px;
		padding: 26px 26px 18px;
		border-radius: 26px;
	}

	.wms-carousel--bg-plain {
		padding-right: 0;
		padding-left: 0;
	}

	.wms-carousel--slide .wms-carousel__nav {
		display: flex;
	}

	.wms-carousel__icon {
		width: 48px;
		height: 48px;
		border-radius: 14px;
	}

	.wms-carousel__arrow {
		width: 44px;
		height: 44px;
	}

	.wms-active .wms-carousel--slide ul.products {
		--wms-visible: 3.25;
		--wms-gap: 18px;
		--fade: 56px;
	}
}

@media ( min-width: 1024px ) {
	.wms-active .wms-carousel--slide ul.products {
		--wms-visible: calc( var( --wms-cols ) + .5 );
		--wms-gap: 20px;
	}
}

/*
|---------------------
|Archive toolbar & nav
|---------------------
*/
.wms-active .woocommerce-products-header__title {
	margin-bottom: .5rem;
	font-size: clamp( 1.6rem, 4vw, 2.4rem );
	font-weight: 700;
	letter-spacing: -.02em;
}

.wms-active .woocommerce-result-count {
	margin: 0 0 1rem;
	font-size: 14px;
	color: var( --wms-muted );
}

.wms-active .woocommerce-ordering select {
	min-height: 40px;
	padding: 0 2.25rem 0 .9rem;
	font-size: 14px;
	color: var( --wms-ink );
	background-color: var( --wms-surface );
	border: 1px solid var( --wms-line );
	border-radius: 999px;
}

.wms-active .woocommerce-pagination ul.page-numbers {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	border: 0 !important;
}

.wms-active .woocommerce-pagination ul.page-numbers li {
	border: 0 !important;
	float: none;
}

.wms-active .woocommerce-pagination .page-numbers a,
.wms-active .woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	font-weight: 600;
	color: var( --wms-ink );
	background: var( --wms-surface );
	border: 1px solid var( --wms-line );
	border-radius: 999px;
}

.wms-active .woocommerce-pagination .page-numbers .current {
	color: var( --wms-accent-ink );
	background: var( --wms-accent );
	border-color: var( --wms-accent );
}

/*
|--------------
|Single product
|--------------
*/
.wms-active.single-product .woocommerce-product-gallery img {
	border-radius: var( --wms-radius );
}

.wms-active.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px !important;
}

.wms-active.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 64px !important;
	float: none !important;
}

.wms-active.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var( --wms-radius-sm );
	opacity: .6;
	transition: opacity .2s;
}

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

.wms-active.single-product .product .product_title {
	margin-bottom: .5rem;
	font-size: clamp( 1.5rem, 4vw, 2.25rem );
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var( --wms-ink );
}

.wms-active.single-product .summary .price {
	margin: 0 0 1rem;
	font-size: 1.6rem !important;
	font-weight: 700;
	color: var( --wms-ink ) !important;
}

.wms-active.single-product .summary .price del {
	font-size: 1.1rem;
	font-weight: 400;
	color: var( --wms-muted );
}

.wms-active.single-product .summary .price ins {
	text-decoration: none;
}

.wms-active.single-product .woocommerce-product-details__short-description {
	margin-bottom: 1.25rem;
	line-height: 1.65;
	color: var( --wms-muted );
}

.wms-active.single-product .summary .stock {
	display: inline-block;
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	background: var( --wms-soft );
}

.wms-active.single-product form.cart:not( .variations_form ),
.wms-active.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 1.5rem;
}

.wms-active.single-product form.cart .quantity {
	float: none !important;
	margin: 0 !important;
}

.wms-active.single-product form.cart .qty {
	width: 76px;
	height: 50px;
	padding: 0 8px;
	font-size: 16px;
	text-align: center;
	border: 1px solid var( --wms-line );
	border-radius: var( --wms-radius-sm );
}

.wms-active.single-product .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 50px;
	float: none !important;
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600;
	color: var( --wms-accent-ink ) !important;
	background: var( --wms-accent ) !important;
	border: 0 !important;
	border-radius: var( --wms-radius-sm ) !important;
	transition: filter .2s;
}

.wms-active.single-product .single_add_to_cart_button:hover {
	filter: brightness( 1.15 );
}

.wms-active.single-product table.variations {
	width: 100%;
	margin-bottom: 1rem;
	border: 0;
}

.wms-active.single-product table.variations th,
.wms-active.single-product table.variations td {
	display: block;
	padding: 0 0 6px;
	text-align: left;
	border: 0;
	background: none;
}

.wms-active.single-product table.variations select {
	width: 100%;
	min-height: 46px;
	padding: 0 12px;
	border: 1px solid var( --wms-line );
	border-radius: var( --wms-radius-sm );
	background-color: var( --wms-surface );
}

.wms-active.single-product .product_meta {
	display: grid;
	gap: 4px;
	padding-top: 1rem;
	font-size: 13px;
	color: var( --wms-muted );
	border-top: 1px solid var( --wms-line );
}

.wms-active.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 6px;
	margin: 2rem 0 1rem !important;
	padding: 0 !important;
	overflow-x: auto;
	border: 0 !important;
	scrollbar-width: none;
}

.wms-active.single-product .woocommerce-tabs ul.tabs::before,
.wms-active.single-product .woocommerce-tabs ul.tabs li::before,
.wms-active.single-product .woocommerce-tabs ul.tabs li::after {
	content: none !important;
	display: none !important;
}

.wms-active.single-product .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.wms-active.single-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 9px 16px !important;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var( --wms-muted ) !important;
	background: var( --wms-soft );
	border-radius: 999px;
}

.wms-active.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var( --wms-accent-ink ) !important;
	background: var( --wms-accent );
}

.wms-active.single-product .woocommerce-Tabs-panel {
	line-height: 1.7;
}

.wms-active.single-product .related > h2,
.wms-active.single-product .upsells > h2 {
	margin: 2.5rem 0 1rem;
	font-size: 1.35rem;
	font-weight: 700;
}

/*
|-----------------
|Mobile bottom bar
|-----------------
*/
.wms-bar,
.wms-drawer {
	display: none;
}

@media ( max-width: 767px ) {
	body.wms-has-bar {
		padding-bottom: calc( var( --wms-bar-h ) + env( safe-area-inset-bottom ) ) !important;
	}

	.wms-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9990;
		display: grid;
		grid-template-columns: repeat( var( --wms-bar-items, 4 ), minmax( 0, 1fr ) );
		box-sizing: border-box;
		width: 100%;
		max-width: 100vw;
		margin: 0;
		padding: 0 4px env( safe-area-inset-bottom );
		overflow: hidden;
		background: rgba( 255, 255, 255, .94 );
		border-top: 1px solid var( --wms-line );
		-webkit-backdrop-filter: saturate( 180% ) blur( 14px );
		backdrop-filter: saturate( 180% ) blur( 14px );
	}

	.wms-drawer {
		display: block;
	}

	/* Keep Astra's fixed-bottom elements above the bar instead of under it. */
	body.wms-has-bar #ast-scroll-top {
		bottom: calc( var( --wms-bar-h ) + env( safe-area-inset-bottom ) + 14px ) !important;
	}

	body.wms-has-bar .ast-sticky-add-to-cart.bottom {
		bottom: calc( var( --wms-bar-h ) + env( safe-area-inset-bottom ) ) !important;
	}
}

@media ( max-width: 360px ) {
	:root {
		--wms-bar-h: 56px;
	}

	.wms-bar .wms-bar__item {
		font-size: 9.5px !important;
	}

	.wms-bar .wms-icon {
		width: 20px;
		height: 20px;
	}
}

.wms-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	box-sizing: border-box;
	min-width: 0;
	height: var( --wms-bar-h );
	margin: 0;
	padding: 0 2px;
	font-size: 10.5px !important;
	font-weight: 600;
	line-height: 1.1;
	color: var( --wms-muted ) !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}

.wms-bar__item > span:last-child {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wms-bar__item.is-active,
.wms-bar__item[aria-expanded="true"] {
	color: var( --wms-accent ) !important;
}

.wms-bar__item:active .wms-icon {
	transform: scale( .9 );
}

.wms-icon {
	display: block;
	width: 24px;
	height: 24px;
	transition: transform .15s;
}

.wms-bar__icon {
	position: relative;
	display: block;
}

.wms-bar .wms-cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: var( --wms-accent-ink );
	background: var( --wms-accent );
	border: 2px solid #fff;
	border-radius: 999px;
	box-sizing: content-box;
}

.wms-bar .wms-cart-count.is-empty {
	display: none;
}

.wms-cart-count.is-bump {
	animation: wms-bump .45s var( --wms-ease );
}

@keyframes wms-bump {
	40% { transform: scale( 1.45 ); }
}

/*
|-----------
|Cart drawer
|-----------
*/
.wms-drawer {
	position: fixed;
	inset: 0;
	z-index: 9995;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .3s;
}

.wms-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.wms-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 17, 24, 39, .45 );
	opacity: 0;
	transition: opacity .3s;
}

.wms-drawer.is-open .wms-drawer__overlay {
	opacity: 1;
}

.wms-drawer__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	max-height: 85vh;
	max-height: 85dvh; /* Excludes the mobile browser toolbar where supported. */
	padding-bottom: env( safe-area-inset-bottom );
	background: var( --wms-surface );
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 40px rgba( 0, 0, 0, .15 );
	transform: translateY( 100% );
	transition: transform .35s var( --wms-ease );
}

.wms-drawer.is-open .wms-drawer__panel {
	transform: translateY( 0 );
}

.wms-drawer__grip {
	width: 40px;
	height: 4px;
	margin: 8px auto 0;
	background: var( --wms-line );
	border-radius: 999px;
}

.wms-drawer__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var( --wms-line );
}

.wms-drawer__head h2 {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 700;
	color: var( --wms-ink );
}

.wms-drawer__head .wms-cart-count {
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
	color: var( --wms-muted );
	background: var( --wms-soft );
	border-radius: 999px;
}

.wms-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	padding: 0 !important;
	color: var( --wms-ink ) !important;
	background: var( --wms-soft ) !important;
	border: 0 !important;
	border-radius: 999px !important;
}

.wms-drawer__close .wms-icon {
	width: 18px;
	height: 18px;
}

.wms-drawer__body,
.wms-drawer__body > .widget_shopping_cart_content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0; /* Lets the flex child shrink so the item list can scroll. */
}

.wms-drawer__body {
	padding: 0 16px 16px;
}

/* Only the item list scrolls; subtotal and buttons stay pinned. */
.wms-drawer .woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 -16px !important;
	padding: 0 16px !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	list-style: none;
}

.wms-drawer .woocommerce-mini-cart-item {
	position: relative;
	min-height: 64px;
	margin: 0 !important;
	padding: 14px 32px 14px 76px !important;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid var( --wms-line );
	list-style: none;
}

.wms-drawer .woocommerce-mini-cart-item > a:not( .remove ) {
	display: block;
	overflow-wrap: anywhere;
	font-weight: 600;
	color: var( --wms-ink );
	text-decoration: none;
}

.wms-drawer .woocommerce-mini-cart-item img {
	position: absolute;
	top: 14px;
	left: 0;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	object-fit: cover;
	background: var( --wms-soft );
	border-radius: var( --wms-radius-sm );
	float: none !important;
}

.wms-drawer .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var( --wms-muted );
}

.wms-drawer .woocommerce-mini-cart-item .remove {
	position: absolute !important;
	top: 14px;
	right: 0;
	left: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 24px !important;
	height: 24px !important;
	font-size: 18px !important;
	line-height: 1 !important;
	color: var( --wms-muted ) !important;
	background: var( --wms-soft ) !important;
	border-radius: 999px;
	text-decoration: none;
}

.wms-drawer .woocommerce-mini-cart__total {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
	margin: 0 !important;
	padding: 14px 0 12px !important;
	font-size: 16px;
	color: var( --wms-ink );
	border: 0 !important;
	border-top: 1px solid var( --wms-line ) !important;
}

.wms-drawer .woocommerce-mini-cart__buttons {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
}

.wms-drawer .woocommerce-mini-cart__buttons .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0 !important;
	padding: 0 12px !important;
	font-size: 15px !important;
	font-weight: 600;
	color: var( --wms-ink ) !important;
	background: var( --wms-soft ) !important;
	border: 0 !important;
	border-radius: var( --wms-radius-sm ) !important;
	text-decoration: none;
	width: auto !important;
}

.wms-drawer .woocommerce-mini-cart__buttons .checkout {
	color: var( --wms-accent-ink ) !important;
	background: var( --wms-accent ) !important;
}

.wms-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 2.5rem 0;
	text-align: center;
	color: var( --wms-muted );
}

html.wms-lock,
html.wms-lock body {
	overflow: hidden;
}

/*
|--------------
|Reduced motion
|--------------
*/
@media ( prefers-reduced-motion: reduce ) {
	.wms-card,
	.wms-card__media img,
	.wms-drawer__panel,
	.wms-drawer__overlay,
	.wms-cart-count.is-bump,
	.wms-carousel__progress span,
	.wms-carousel__arrow,
	.wms-carousel::before,
	.wms-carousel--ring li.product,
	.wms-carousel--ring li.product .wms-card,
	.wms-carousel__dots i {
		transition: none !important;
		animation: none !important;
	}

	.wms-card:hover,
	.wms-card:hover .wms-card__media img {
		transform: none;
	}
}

.wms-drawer .woocommerce-mini-cart-item:last-child {
	border-bottom: 0;
}