/* =========================================
   1. Layout
========================================= */

.woocommerce .woocommerce-result-count {
	margin: 0 !important;
}

.woocommerce .woocommerce-ordering {
	margin: 0 !important;
}

.woocommerce .products {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce[data-vi-shop-view="list"] .products {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.woocommerce[data-vi-shop-view="grid"] .products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media only screen and (min-width:576px) {
	.woocommerce .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (min-width: 1025px) {
	.woocommerce .products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
}

.vi-shop.is-loading [data-vi-shop-products] {
	position: relative;
}

.vi-shop.is-loading [data-vi-shop-products]::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .55);
	border-radius: 16px;
}

.vi-shop.is-loading .woocommerce .products {
	opacity: .35;
}

.vi-shop__pagination {
	margin-top: 2rem;
}

.vi-shop__pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.vi-shop__pagination .page-numbers li {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}

.vi-shop__pagination .page-numbers li span,
.vi-shop__pagination .page-numbers li a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
	border-color: #f2f2f2;
}

.vi-shop__pagination .page-numbers li span.current,
.vi-shop__pagination .page-numbers li a:hover {
	border-color: var(--vi-accent-color);
}

/* =========================================
   2. Header
========================================= */

.vi-shop-header {
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

.vi-shop-header__inner {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: space-between;
}

@media only screen and (min-width:1025px) {
	.vi-shop-header__inner {
		flex-direction: column;
		justify-content: unset;
	}
}

.vi-shop-header__page-title {
	color: #1D1D1F;
}

.vi-shop-header__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.vi-shop-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1 0 0;
	width: 100%;
}

.vi-shop-header__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 0;
	background: #fff;
	padding: 0;
	cursor: pointer;
}

.vi-shop-header__view-btn.is-active svg rect,
.vi-shop-header__view-btn.is-active svg line {
	stroke: var(--vi-accent-color);
}

.vi-shop-header__view-btn svg {
	width: 100%;
	height: 100%;
	display: block;
}

.vi-shop-header__view-btn+.vi-shop-header__view-btn {
	margin-left: 8px;
}

.vi-shop-header__total {
	white-space: nowrap;
	flex: 0 0 auto;
	width: auto;
}

.vi-shop-header__clear-filters {
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 24px;
	border: 0;
	background: transparent;
	color: #6d6d6d;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	width: auto;
}

/* =========================================
   3. Dropdowns
========================================= */

.vi-shop-dd {
	position: relative;
}

.vi-shop-dd__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.vi-shop-dd__btn:disabled {
	opacity: .6;
	cursor: default;
}

.vi-shop-dd__label {
	color: #8d8d8d;
	white-space: nowrap;
}

.vi-shop-dd__value {
	font-weight: 500;
	white-space: nowrap;
}

.vi-shop-dd__chev {
	width: 10px;
	height: 10px;
	display: inline-flex;
	border: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg' fill='%233e3e3e'%3E%3Cpath d='M64 88a3.988 3.988 0 0 1-2.828-1.172l-40-40c-1.563-1.563-1.563-4.094 0-5.656s4.094-1.563 5.656 0L64 78.344l37.172-37.172c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656l-40 40A3.988 3.988 0 0 1 64 88z'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	transition: transform .15s ease;
}

.vi-shop-dd__btn[aria-expanded="true"] .vi-shop-dd__chev {
	transform: rotate(-180deg);
}

.vi-shop-dd__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 260px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #e9e9e9;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	padding: 8px;
	z-index: 60;
	display: none;
}

.vi-shop-dd .vi-price-filter__menu,
.vi-shop-dd .vi-size-filter__menu,
.vi-shop-dd .vi-color-filter__menu,
.vi-shop-dd .vi-firmness-filter__menu,
.vi-shop-dd .vi-type-filter__menu {
	display: none;
}

.vi-shop-dd.active .vi-shop-dd__menu,
.vi-shop-dd.open .vi-shop-dd__menu,
.vi-shop-dd.active .vi-price-filter__menu,
.vi-shop-dd.open .vi-price-filter__menu,
.vi-shop-dd.active .vi-size-filter__menu,
.vi-shop-dd.open .vi-size-filter__menu,
.vi-shop-dd.active .vi-color-filter__menu,
.vi-shop-dd.open .vi-color-filter__menu,
.vi-shop-dd.active .vi-firmness-filter__menu,
.vi-shop-dd.open .vi-firmness-filter__menu,
.vi-shop-dd.active .vi-type-filter__menu,
.vi-shop-dd.open .vi-type-filter__menu {
	display: block;
}

.vi-shop-dd__item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 0;
	background: transparent;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #1D1D1F;
	text-align: left;
}

.vi-shop-dd__item:hover {
	background: #f4efe8;
}

.vi-shop-dd__item.is-active {
	background: #f4efe8;
}

.vi-shop-dd__tick {
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0;
	position: relative;
}

.vi-shop-dd__item.is-active .vi-shop-dd__tick {
	opacity: 1;
}

.vi-shop-dd__tick::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, .7);
	border-bottom: 2px solid rgba(0, 0, 0, .7);
	transform: rotate(45deg);
}

/* =========================================
   4. Cards
========================================= */

.vi-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	position: relative;
}

.vi-card__media {
	border-radius: 12px;
	overflow: hidden;
	background: #f7f7f7;
	aspect-ratio: 4 / 3;
}

.vi-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .2s linear;
}

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

.vi-wishlist-btn {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	border: none;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 5;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.vi-wishlist-btn::before {
	content: '';
	width: 1.1rem;
	height: 1.1rem;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 455.52'%3E%3Cpath fill='%23ffffff' d='M256,455.52c-7.29,0-14.32-2.64-19.79-7.44-20.68-18.09-40.62-35.08-58.22-50.07l-.09-.08c-51.58-43.96-96.12-81.92-127.12-119.31C16.14,236.81,0,197.17,0,153.87S14.43,72.99,40.62,44.58C67.12,15.83,103.49,0,143.03,0c29.55,0,56.62,9.34,80.45,27.77,12.02,9.3,22.92,20.68,32.52,33.96,9.61-13.28,20.5-24.66,32.53-33.96C312.35,9.34,339.42,0,368.97,0c39.54,0,75.91,15.83,102.41,44.58,26.19,28.41,40.61,67.22,40.61,109.29s-16.13,82.94-50.78,124.74c-30.99,37.4-75.53,75.36-127.11,119.31-17.62,15.02-37.6,32.04-58.33,50.17-5.48,4.79-12.51,7.43-19.79,7.43ZM143.03,29.99c-31.07,0-59.6,12.4-80.37,34.91-21.07,22.86-32.68,54.45-32.68,88.96,0,36.42,13.53,68.99,43.88,105.61,29.33,35.39,72.96,72.57,123.48,115.62l.09.08c17.66,15.05,37.68,32.11,58.52,50.33,20.96-18.25,41.01-35.34,58.71-50.42,50.51-43.05,94.14-80.22,123.47-115.62,30.34-36.62,43.88-69.19,43.88-105.61,0-34.52-11.61-66.11-32.68-88.96-20.76-22.51-49.3-34.91-80.36-34.91-22.76,0-43.65,7.24-62.1,21.5-16.44,12.72-27.89,28.8-34.61,40.05-3.45,5.79-9.53,9.24-16.26,9.24s-12.81-3.45-16.26-9.24c-6.71-11.25-18.16-27.33-34.61-40.05-18.45-14.26-39.34-21.5-62.1-21.5h0Z'/%3E%3C/svg%3E");
}

.vi-wishlist-btn:hover {
	transform: translateY(-1px);
}

.vi-wishlist-btn:focus-visible {
	outline: 2px solid var(--vi-accent-color);
	outline-offset: 2px;
}

.vi-wishlist-btn.is-active {
	background: transparent;
	border: none;
}

.vi-wishlist-btn.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 455.52'%3E%3Cpath fill='%23cc9742' d='M256,455.52c-7.29,0-14.32-2.64-19.79-7.44-20.68-18.09-40.62-35.08-58.22-50.07l-.09-.08c-51.58-43.96-96.12-81.92-127.12-119.31C16.14,236.81,0,197.17,0,153.87S14.43,72.99,40.62,44.58C67.12,15.83,103.49,0,143.03,0c29.55,0,56.62,9.34,80.45,27.77,12.02,9.3,22.92,20.68,32.52,33.96,9.61-13.28,20.5-24.66,32.53-33.96C312.35,9.34,339.42,0,368.97,0c39.54,0,75.91,15.83,102.41,44.58,26.19,28.41,40.61,67.22,40.61,109.29s-16.13,82.94-50.78,124.74c-30.99,37.4-75.53,75.36-127.11,119.31-17.62,15.02-37.6,32.04-58.33,50.17-5.48,4.79-12.51,7.43-19.79,7.43ZM143.03,29.99c-31.07,0-59.6,12.4-80.37,34.91-21.07,22.86-32.68,54.45-32.68,88.96,0,36.42,13.53,68.99,43.88,105.61,29.33,35.39,72.96,72.57,123.48,115.62l.09.08c17.66,15.05,37.68,32.11,58.52,50.33,20.96-18.25,41.01-35.34,58.71-50.42,50.51-43.05,94.14-80.22,123.47-115.62,30.34-36.62,43.88-69.19,43.88-105.61,0-34.52-11.61-66.11-32.68-88.96-20.76-22.51-49.3-34.91-80.36-34.91-22.76,0-43.65,7.24-62.1,21.5-16.44,12.72-27.89,28.8-34.61,40.05-3.45,5.79-9.53,9.24-16.26,9.24s-12.81-3.45-16.26-9.24c-6.71-11.25-18.16-27.33-34.61-40.05-18.45-14.26-39.34-21.5-62.1-21.5h0Z'/%3E%3C/svg%3E");
}

.vi-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding-top: 16px;
}

.vi-card__title {
	color: #3E3E3E;
}

.vi-card .vi-card__title a {
	text-decoration: none;
}

.vi-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
}

.vi-price__current.is-sale {
	color: #DD1616;
}

.vi-price__regular {
	color: #9f9f9f;
}

.vi-card__excerpt {
	font-size: 14px;
}

.vi-card__features {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vi-card__feature {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vi-card__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.vi-card__icon--thickness {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 267.74 320' fill='%233e3e3e'%3E%3Cpath d='M267.74,10.67c0,5.89-3.53,10.67-7.87,10.67H7.87c-4.35,0-7.87-4.78-7.87-10.67S3.53,0,7.87,0h251.99c4.35,0,7.87,4.78,7.87,10.67ZM259.86,298.67H7.87c-4.35,0-7.87,4.78-7.87,10.67s3.53,10.67,7.87,10.67h251.99c4.35,0,7.87-4.78,7.87-10.67s-3.53-10.67-7.87-10.67ZM98.75,216.45c-4.17-4.17-10.93-4.17-15.1,0s-4.17,10.93,0,15.1l42.67,42.67c4.16,4.17,10.91,4.18,15.08.02,0,0,.01-.01.02-.02l42.67-42.67c4.17-4.17,4.17-10.93,0-15.1s-10.93-4.17-15.1,0l-24.45,24.47V79.08l24.45,24.47c4.17,4.17,10.93,4.17,15.1,0s4.17-10.93,0-15.1l-42.67-42.67c-4.16-4.17-10.91-4.18-15.08-.02,0,0-.01.01-.02.02l-42.67,42.67c-4.17,4.17-4.17,10.93,0,15.1s10.93,4.17,15.1,0l24.45-24.47v161.83l-24.45-24.47Z'/%3E%3C/svg%3E");
}

.vi-card__icon--layers {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 443.63' fill='%233e3e3e'%3E%3Cpath d='M499.81,102.82L263.92,1.63c-5.06-2.17-10.79-2.17-15.85,0L12.18,102.82C4.79,105.99,0,113.27,0,121.32c.01,8.05,4.82,15.31,12.22,18.47l235.89,100.52c2.49,1.06,5.17,1.61,7.88,1.61,2.68,0,5.37-.54,7.87-1.61l235.89-100.52c7.41-3.15,12.22-10.42,12.22-18.47,0-8.05-4.78-15.32-12.18-18.49h0ZM256,199.96L71.25,121.23l184.75-79.26,184.75,79.26-184.75,78.73ZM510.37,314.41c-4.38-10.21-16.22-14.93-26.4-10.55l-227.97,97.79L28.03,303.86c-10.22-4.4-22.02.35-26.4,10.55-4.38,10.2.34,22.02,10.55,26.4l235.89,101.2c5.06,2.17,10.79,2.17,15.86,0l235.89-101.2c10.2-4.38,14.92-16.2,10.55-26.4Z'/%3E%3Cpath d='M510.39,213.93c-4.36-10.21-16.17-14.96-26.38-10.61l-228.01,97.16L28,203.32c-10.22-4.36-22.03.4-26.38,10.61-4.36,10.22.39,22.03,10.61,26.38l235.89,100.52c5.04,2.14,10.73,2.14,15.76,0l235.89-100.52c10.21-4.35,14.96-16.16,10.61-26.38h0Z'/%3E%3C/svg%3E");
}

.vi-card__icon--firmness {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 510.01 446.05' fill='%233e3e3e'%3E%3Cpath d='M490,446.05H20C8.96,446.05,0,437.1,0,426.05s8.95-20,20-20h470c11.05,0,20,8.95,20,20s-8.95,20-20,20Z'/%3E%3Cpath d='M255,318.55c-91.89,0-178.48-17.68-243.82-49.79-9.91-4.87-14-16.86-9.13-26.77,4.87-9.91,16.86-14,26.77-9.13,124.72,61.29,327.64,61.29,452.36,0,9.92-4.87,21.9-.79,26.77,9.13,4.87,9.91.79,21.9-9.13,26.77-65.34,32.11-151.93,49.79-243.82,49.79Z'/%3E%3Cpath d='M252.9,198.87c-78.23,0-155.74-38.65-245.91-115.96-8.39-7.19-9.35-19.82-2.16-28.2,7.19-8.38,19.82-9.35,28.2-2.16,165.41,141.83,273.35,141.79,444.2-.2,8.5-7.06,21.1-5.9,28.17,2.6,7.06,8.5,5.9,21.1-2.6,28.16-92.86,77.17-171.73,115.77-249.89,115.77Z'/%3E%3Cpath d='M239.03,79.23l-34.7-47.94C194.89,18.24,204.21,0,220.31,0h69.39c16.1,0,25.42,18.24,15.98,31.29l-34.7,47.94c-7.87,10.88-24.08,10.88-31.96,0Z'/%3E%3C/svg%3E");
	background-size: 16px;
}

.vi-firmness {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-wrap: wrap;
}

.vi-firmness__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vi-firmness__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 1px solid #cc9742;
	background: transparent;
	display: inline-block;
}

.vi-firmness__dot.is-filled {
	background: #cc9742;
}

.vi-card .vi-card__btn {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	border-radius: 50px;
	background: #f4efe8;
	color: #6D4A26;
	font-weight: 600;
	text-decoration: none;
	border: 0;
}

.vi-card .vi-card__btn:hover {
	background: var(--vi-accent-color);
	color: var(--vi-white-color);
}

@media only screen and (min-width: 1025px) {
	.vi-card {
		border: 1px solid #e5e5e5;
		border-radius: 16px;
		padding: 20px;
	}

	.vi-wishlist-btn {
		top: 25px;
		left: 25px;
	}

	.vi-card__price {
		gap: 10px;
	}

	.vi-card .vi-card__btn {
		height: 56px;
	}
}

/* =========================================
   5. Filters
========================================= */

.vi-price-filter__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 280px;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	padding: 12px 14px 16px;
	z-index: 60;
}

.vi-price-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid #f1f1f1;
}

.vi-price-filter__title {
	font-size: 14px;
	font-weight: 600;
	color: #1D1D1F;
}

.vi-price-filter__clear {
	border: 0;
	background: none;
	font-size: 14px;
	color: #6d6d6d;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	width: auto;
}

.vi-price-filter__clear.is-disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-price-filter__range {
	text-align: center;
	color: #3E3E3E;
}

.vi-price-filter__slider {
	position: relative;
	height: 34px;
}

.vi-price-filter__track {
	position: absolute;
	left: 6px;
	right: 6px;
	top: 50%;
	height: 3px;
	background: #d8d8d8;
	border-radius: 999px;
	transform: translateY(-50%);
}

.vi-price-filter__track-fill {
	position: absolute;
	top: 50%;
	height: 3px;
	background: #cc9742;
	border-radius: 999px;
	transform: translateY(-50%);
	left: 0;
	right: 0;
}

.vi-price-filter__input {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	height: 20px;
	margin: 0;
}

.vi-price-filter__input--min {
	z-index: 3;
}

.vi-price-filter__input--max {
	z-index: 2;
}

.vi-price-filter__input::-webkit-slider-runnable-track {
	height: 3px;
	background: transparent;
	border: 0;
}

.vi-price-filter__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #cc9742;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	pointer-events: auto;
	cursor: pointer;
	margin-top: -9px;
}

.vi-price-filter__input::-moz-range-track {
	height: 3px;
	background: transparent;
	border: 0;
}

.vi-price-filter__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #cc9742;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	pointer-events: auto;
	cursor: pointer;
	margin-top: -9px;
}

.vi-price-filter__input:focus {
	outline: none;
}

.vi-size-filter__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 260px;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	padding: 10px 12px 12px;
	z-index: 60;
}

.vi-size-filter__btn-count {
	color: #8d8d8d;
	margin-left: 2px;
}

.vi-size-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f1f1f1;
}

.vi-size-filter__summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vi-size-filter__selected {
	font-size: 14px;
	color: #3E3E3E;
}

.vi-size-filter__selected-list {
	font-size: 12px;
	color: #6d6d6d;
}

.vi-size-filter__clear {
	border: 0;
	background: none;
	font-size: 14px;
	color: #6d6d6d;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	width: auto;
}

.vi-size-filter__clear.is-disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-size-filter__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vi-size-filter__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 10px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #1D1D1F;
	text-align: left;
}

.vi-size-filter__item:hover {
	background: #f4efe8;
}

.vi-size-filter__item.is-active {
	background: #f4efe8;
}

.vi-size-filter__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9f9f9f;
}

.vi-size-filter__item-count {
	font-size: 13px;
	color: #9f9f9f;
}

.vi-size-filter__tick {
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0;
	position: relative;
}

.vi-size-filter__item.is-active .vi-size-filter__tick {
	opacity: 1;
}

.vi-size-filter__tick::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, .7);
	border-bottom: 2px solid rgba(0, 0, 0, .7);
	transform: rotate(45deg);
}

.vi-color-filter__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 280px;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	padding: 10px 12px 12px;
	z-index: 60;
}

.vi-color-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f1f1f1;
}

.vi-color-filter__summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vi-color-filter__selected {
	font-size: 14px;
	color: #3E3E3E;
}

.vi-color-filter__selected-list {
	font-size: 12px;
	color: #6d6d6d;
}

.vi-color-filter__clear {
	border: 0;
	background: none;
	font-size: 14px;
	color: #6d6d6d;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	width: auto;
}

.vi-color-filter__clear.is-disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-color-filter__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 280px;
	overflow: auto;
	padding-right: 2px;
}

.vi-color-filter__item {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 10px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #1D1D1F;
	text-align: left;
}

.vi-color-filter__item:hover {
	background: #f4efe8;
}

.vi-color-filter__item.is-active {
	background: #f4efe8;
}

.vi-color-filter__item-text,
.vi-size-filter__item-text,
.vi-firmness-filter__item-text,
.vi-type-filter__item-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vi-color-filter__swatch {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .12);
}

.vi-color-filter__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9f9f9f;
}

.vi-color-filter__item-count {
	font-size: 13px;
	color: #9f9f9f;
}

.vi-color-filter__tick {
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0;
	position: relative;
}

.vi-color-filter__item.is-active .vi-color-filter__tick {
	opacity: 1;
}

.vi-color-filter__tick::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, .7);
	border-bottom: 2px solid rgba(0, 0, 0, .7);
	transform: rotate(45deg);
}

.vi-color-filter__btn-count {
	color: #8d8d8d;
	margin-left: 2px;
}

.vi-firmness-filter__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 280px;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	padding: 10px 12px 12px;
	z-index: 60;
}

.vi-firmness-filter__btn-count {
	color: #8d8d8d;
	margin-left: 2px;
}

.vi-firmness-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f1f1f1;
}

.vi-firmness-filter__summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vi-firmness-filter__selected {
	font-size: 14px;
	color: #3E3E3E;
}

.vi-firmness-filter__selected-list {
	font-size: 12px;
	color: #6d6d6d;
}

.vi-firmness-filter__clear {
	border: 0;
	background: none;
	font-size: 14px;
	color: #6d6d6d;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	width: auto;
}

.vi-firmness-filter__clear.is-disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-firmness-filter__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 280px;
	overflow: auto;
	padding-right: 2px;
}

.vi-firmness-filter__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 10px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #1D1D1F;
	text-align: left;
}

.vi-firmness-filter__item:hover {
	background: #f4efe8;
}

.vi-firmness-filter__item.is-active {
	background: #f4efe8;
}

.vi-firmness-filter__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9f9f9f;
}

.vi-firmness-filter__item-count {
	font-size: 13px;
	color: #9f9f9f;
}

.vi-firmness-filter__tick {
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0;
	position: relative;
}

.vi-firmness-filter__item.is-active .vi-firmness-filter__tick {
	opacity: 1;
}

.vi-firmness-filter__tick::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, .7);
	border-bottom: 2px solid rgba(0, 0, 0, .7);
	transform: rotate(45deg);
}

.vi-type-filter__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 280px;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
	padding: 10px 12px 12px;
	z-index: 60;
}

.vi-type-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 10px;
	margin-bottom: 8px;
	border-bottom: 1px solid #f1f1f1;
}

.vi-type-filter__summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vi-type-filter__selected {
	font-size: 14px;
	color: #3E3E3E;
}

.vi-type-filter__selected-list {
	font-size: 12px;
	color: #6d6d6d;
}

.vi-type-filter__clear {
	border: 0;
	background: none;
	font-size: 14px;
	color: #6d6d6d;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	width: auto;
}

.vi-type-filter__clear.is-disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-type-filter__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 280px;
	overflow: auto;
	padding-right: 2px;
}

.vi-type-filter__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 10px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	color: #1D1D1F;
	text-align: left;
}

.vi-type-filter__item:hover {
	background: #f4efe8;
}

.vi-type-filter__item.is-active {
	background: #f4efe8;
}

.vi-type-filter__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9f9f9f;
}

.vi-type-filter__item-count {
	font-size: 13px;
	color: #9f9f9f;
}

.vi-type-filter__tick {
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0;
	position: relative;
}

.vi-type-filter__item.is-active .vi-type-filter__tick {
	opacity: 1;
}

.vi-type-filter__tick::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, .7);
	border-bottom: 2px solid rgba(0, 0, 0, .7);
	transform: rotate(45deg);
}

.vi-type-filter__btn-count {
	color: #8d8d8d;
	margin-left: 2px;
}

/* =========================================
   6. Mobile
========================================= */

@media (max-width: 1024px) {
	.vi-shop {
		padding-bottom: 100px;
	}

	.vi-shop-header__actions>.vi-shop-dd,
	.vi-shop-header__actions>.vi-shop-header__clear-filters {
		display: none !important;
	}

	.vi-shop-header__total {
		display: none;
	}
}

.vi-shop-header__mobile {
	position: absolute;
}

.vi-mobile-bar {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	overflow: hidden;
	z-index: 90;
}

.vi-mobile-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: 0;
	background: transparent;
	font-size: 14px;
	color: #1D1D1F;
	cursor: pointer;
}

.vi-mobile-bar__btn+.vi-mobile-bar__btn {
	border-left: 1px solid #efefef;
}

.vi-mobile-bar__icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='M4 7l3-3 3 3'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='M14 17l3 3 3-3'/%3E%3C/svg%3E");
}

.vi-mobile-bar__icon--filter {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M6 12h12'/%3E%3Cpath d='M10 19h4'/%3E%3Ccircle cx='8' cy='5' r='2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E");
}

.vi-mobile-bar__count {
	color: #8B8B8B;
	font-size: 12px;
	font-weight: 500;
}

.vi-mobile-drawer {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 100;
}

.vi-mobile-drawer[hidden] {
	display: none;
}

.vi-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
}

.vi-mobile-drawer__sheet {
	position: relative;
	width: 100%;
	max-height: 82vh;
	background: #fff;
	border-radius: 20px 20px 0 0;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease;
}

.vi-mobile-panel {
	display: none;
	flex-direction: column;
	height: 100%;
}

.vi-mobile-panel.is-active {
	display: flex;
}

.vi-mobile-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f1f1f1;
	gap: 12px;
	position: relative;
}

.vi-mobile-panel__title {
	font-weight: 500;
	font-size: 16px;
	color: #1D1D1F;
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: center;
}

.vi-mobile-panel__close,
.vi-mobile-panel__back,
.vi-mobile-panel__spacer {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	font-size: 20px;
	color: #1D1D1F;
	padding: 0;
	position: absolute;
	left: 10px;
	z-index: 2;
}

.vi-mobile-panel__close,
.vi-mobile-panel__back {
	cursor: pointer;
}

.vi-mobile-panel__close svg,
.vi-mobile-panel__back svg {
	width: auto;
}

.vi-mobile-panel__close svg {
	height: 14px;
}

.vi-mobile-panel__back svg {
	height: 16px;
}

.vi-mobile-panel__clear {
	border: 0;
	background: transparent;
	font-size: 14px;
	color: #1D1D1F;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	position: absolute;
	right: 16px;
	display: inline-flex;
	width: auto;
}

.vi-mobile-panel__clear.is-disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-mobile-panel__clear:disabled {
	opacity: .4;
	text-decoration: none;
	cursor: default;
}

.vi-mobile-panel__list {
	flex: 1 1 auto;
	overflow: auto;
}

.vi-mobile-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 0;
	background: transparent;
	padding: 14px 18px;
	text-align: left;
	font-size: 14px;
	color: #1D1D1F;
	border-bottom: 1px solid #f3f3f3;
	cursor: pointer;
}

.vi-mobile-row__chev {
	width: 10px;
	height: 10px;
	border-right: 2px solid #1D1D1F;
	border-bottom: 2px solid #1D1D1F;
	transform: rotate(-45deg);
}

.vi-mobile-panel__apply {
	margin: 14px 16px 18px;
	border: 0;
	border-radius: 999px;
	background: #1D1D1F;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 14px 18px;
	cursor: pointer;
	width: calc(100% - 32px);
	display: block;
}

.vi-mobile-option {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	padding: 12px 18px;
	text-align: left;
	font-size: 14px;
	color: #1D1D1F;
	border-bottom: 1px solid #f3f3f3;
	cursor: pointer;
}

.vi-mobile-option.is-active {
	background: #f4efe8;
}

.vi-mobile-option__box {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1.6px solid rgba(0, 0, 0, .7);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vi-mobile-option.is-active .vi-mobile-option__box {
	background: #1D1D1F;
	border-color: #1D1D1F;
}

.vi-mobile-option.is-active .vi-mobile-option__box::after {
	content: '';
	width: 6px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	position: relative;
	top: -2px;
}

.vi-mobile-option__count {
	position: relative;
	color: #9f9f9f;
	font-size: 12px;
	top: 1px;
}

.vi-mobile-option__tick {
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0;
	position: relative;
	margin-left: auto;
}

.vi-mobile-option.is-active .vi-mobile-option__tick {
	opacity: 1;
}

.vi-mobile-option__tick::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border-right: 2px solid rgba(0, 0, 0, .7);
	border-bottom: 2px solid rgba(0, 0, 0, .7);
	transform: rotate(45deg);
}

.vi-mobile-option--color .vi-mobile-option__swatch {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .12);
}

.vi-mobile-price {
	padding: 16px 18px 10px;
}

.vi-mobile-price__label {
	font-size: 14px;
	font-weight: 700;
	color: #1D1D1F;
	margin-bottom: 8px;
}

.vi-mobile-price__range {
	font-size: 14px;
	color: #1D1D1F;
	margin-bottom: 8px;
	text-align: center;
}

.vi-mobile-price__slider {
	position: relative;
	height: 34px;
}

.vi-mobile-price__track {
	position: absolute;
	left: 6px;
	right: 6px;
	top: 50%;
	height: 6px;
	background: #d8d8d8;
	border-radius: 999px;
	transform: translateY(-50%);
}

.vi-mobile-price__track-fill {
	position: absolute;
	top: 50%;
	height: 6px;
	background: #1D1D1F;
	border-radius: 999px;
	transform: translateY(-50%);
	left: 0;
	right: 0;
}

.vi-mobile-price__input {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	height: 20px;
	margin: 0;
}

.vi-mobile-price__input--min {
	z-index: 3;
}

.vi-mobile-price__input--max {
	z-index: 2;
}

.vi-mobile-price__input::-webkit-slider-runnable-track {
	height: 3px;
	background: transparent;
	border: 0;
}

.vi-mobile-price__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #1D1D1F;
	background: #fff;
	pointer-events: auto;
	cursor: pointer;
	margin-top: -8px;
}

.vi-mobile-price__input::-moz-range-track {
	height: 3px;
	background: transparent;
	border: 0;
}

.vi-mobile-price__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #1D1D1F;
	background: #fff;
	pointer-events: auto;
	cursor: pointer;
	margin-top: -8px;
}

.vi-mobile-price__input:focus {
	outline: none;
}

body.vi-shop-mobile-open {
	overflow: hidden;
}

body.vi-shop-mobile-open .vi-mobile-bar {
	opacity: 0;
	pointer-events: none;
}

@media (min-width: 1025px) {
	.vi-shop-header__mobile {
		display: none;
	}
}