/*
 * Shop catalog: listing layout (sidebar, toolbar, active filters, grid/list,
 * pager, category intro), product tiles + labels, product carousels.
 * Numbers from notes/design-shop.md 5.1-5.7, 6.2, T.1-T.2, I.9 and the live
 * computed styles (notes/ref/shop-computed-styles/shop-*.json, cat-desktop.json).
 * Breakpoints: desktop >= 1025, tablet 768-1024 (grid 1 column, carousels 2 per view
 * and the compact list item at <= 768, as live Woodmart), mobile <= 767 (text sizes),
 * labels closer together at <= 576.
 */

/* Listing layout --------------------------------------------------------- */

.lvt-shop {
	padding-top: 80px;
}

.lvt-shop__layout {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 30px;
	align-items: start;
}

.lvt-shop-sidebar {
	grid-column: span 3;
	min-width: 0;
}

.lvt-shop__content {
	grid-column: span 9;
	min-width: 0;
}

/* Sidebar widgets -------------------------------------------------------- */

.lvt-shop-sidebar__head {
	display: none;
}

.lvt-widget {
	margin: 0 0 30px;
	padding: 0 0 30px;
	border-bottom: 1px solid rgba(0, 0, 0, .106);
	font-size: 16px;
	line-height: 22.4px;
}

.lvt-widget:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.lvt-widget__title {
	margin: 0 0 10px;
	color: #333333;
	font-family: var(--lvt-font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.01px;
	text-transform: uppercase;
}

.lvt-widget__title--status {
	margin-bottom: 20px;
}

.lvt-widget__title--toggle {
	margin: 0;
}

.lvt-widget__toggle {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 22px 0 0;
	border: 0;
	background: none;
	color: var(--lvt-c-secondary);
	font-family: var(--lvt-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: -0.01px;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.lvt-widget__arrow {
	position: absolute;
	top: -4px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #333333;
	transition: background-color .25s ease;
}

.lvt-widget__arrow .lvt-cicon {
	width: 10px;
	height: 6px;
	transition: transform .25s ease;
}

/* Live: a thin 10px icon-font chevron (anti-aliased grey), not a bold stroke. */
.lvt-widget__arrow .lvt-cicon path {
	stroke-width: .8;
}

.lvt-widget--filter.is-open .lvt-widget__arrow {
	background: #F1F1F1;
}

.lvt-widget--filter.is-open .lvt-widget__arrow .lvt-cicon {
	transform: rotate(180deg);
}

.lvt-widget__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Categories */
.lvt-cat-list {
	margin-bottom: -8px;
	padding-right: 4px;
}

.lvt-cat-list__item {
	position: relative;
	display: flex;
	align-items: flex-start;
}

.lvt-cat-list__item > a {
	display: block;
	flex: 1 1 auto;
	padding: 8px 40px 8px 0;
	color: #767676;
}

.lvt-cat-list__item > a:hover {
	color: #333333;
}

.lvt-cat-list__item.is-current > a {
	color: #333333;
	font-weight: 600;
}

.lvt-count {
	position: absolute;
	top: 8px;
	right: 0;
	min-width: 30px;
	height: 20px;
	padding: 0 5px;
	border: 1px solid rgba(0, 0, 0, .106);
	border-radius: 35px;
	color: #767676;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.lvt-cat-list__item.is-current .lvt-count,
.lvt-filter-list__item.is-active .lvt-count,
.lvt-cat-list__item:hover .lvt-count,
.lvt-filter-list__item:hover .lvt-count {
	border-color: var(--lvt-c-primary);
	background: var(--lvt-c-primary);
	color: #FFFFFF;
}

/* Property filters */
.lvt-filter-list {
	margin-top: 20px;
}

.lvt-filter-list[hidden] {
	display: none;
}

.lvt-filter-list__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 5px;
}

.lvt-filter-list__item:last-child {
	margin-bottom: 0;
}

.lvt-filter-list__item > a {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	padding: 5px 40px 5px 0;
	color: #767676;
}

.lvt-filter-list__item > a:hover {
	color: #333333;
}

.lvt-filter-list__item.is-active > a {
	color: #333333;
	font-weight: 600;
}

.lvt-filter-list__item .lvt-count {
	top: 50%;
	right: 4px;
	margin-top: -10px;
}

/* On sale */
.lvt-status-list__item > a {
	display: flex;
	align-items: center;
	color: #767676;
}

.lvt-status-list__item > a:hover {
	color: #333333;
}

.lvt-status-list__box {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid rgba(0, 0, 0, .106);
	color: #FFFFFF;
	transition: background-color .2s ease, border-color .2s ease;
}

.lvt-status-list__box .lvt-icon {
	width: 10px;
	height: 10px;
}

.lvt-status-list__item.is-active > a {
	color: #333333;
	font-weight: 600;
}

.lvt-status-list__item.is-active .lvt-status-list__box {
	border-color: var(--lvt-c-primary);
	background: var(--lvt-c-primary);
}

/* Toolbar ---------------------------------------------------------------- */

.lvt-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 42px;
	margin: 0 0 30px;
}

.lvt-shop-toolbar__title {
	margin: 0;
	color: var(--lvt-c-secondary);
	font-family: var(--lvt-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: .2px;
}

.lvt-shop-toolbar__tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px 30px;
}

.lvt-shop-toolbar__filters {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #333333;
	font-family: var(--lvt-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	cursor: pointer;
}

.lvt-shop-toolbar__filters .lvt-cicon--filter {
	width: 18px;
	height: 18px;
}

.lvt-shop-toolbar__filters .lvt-cicon--lines {
	width: 17px;
	height: 13px;
	margin-right: -2px;
}

.lvt-per-page {
	display: flex;
	align-items: center;
	color: #767676;
	font-size: 16px;
	line-height: 24px;
}

.lvt-per-page__label {
	color: #333333;
}

.lvt-per-page__label::after {
	content: ":";
	margin-left: 4px;
}

.lvt-per-page__link {
	display: block;
	padding: 0 7px;
	color: #767676;
}

.lvt-per-page__link:hover,
.lvt-per-page__link.is-current {
	color: var(--lvt-c-primary);
}

.lvt-per-page__link.is-current {
	font-weight: 600;
}

.lvt-per-page__sep {
	display: block;
	width: 5.4px;
	text-align: center;
}

.lvt-view-switch {
	display: flex;
	align-items: center;
	gap: 14.4px;
}

.lvt-view-switch__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 29px;
	color: #BBBBBB;
}

/* Live: the other view's icon turns grey (#666) on hover, the current one stays brown. */
.lvt-view-switch__link:hover {
	color: #666666;
}

.lvt-view-switch__link.is-current {
	color: var(--lvt-c-primary);
	cursor: default;
}

.lvt-ordering {
	position: relative;
	margin: 0;
}

.lvt-ordering .lvt-ordering__select {
	display: block;
	width: 200px;
	max-width: 200px;
	height: 42px;
	padding: 0 13px;
	border: 1px solid #BEBEBE;
	border-radius: 5px;
	color: var(--lvt-c-text);
	font-size: 14px;
	line-height: 14px;
	cursor: pointer;
	background-position: right 10px center;
}

.lvt-ordering__icon {
	display: none;
}

/* Active filters --------------------------------------------------------- */

.lvt-shop-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 15px;
	margin: -15px 0 15px;
	font-size: 15.2px;
}

.lvt-shop-chips__item {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	color: #333333;
	font-size: 1em;
	font-weight: 600;
	line-height: 2em;
}

.lvt-shop-chips__item--clear {
	padding: 1px 15px 1px 0;
	border-right: 1px solid rgba(0, 0, 0, .106);
	line-height: 1em;
}

.lvt-shop-chips__item .lvt-cicon {
	flex: none;
	width: .85em;
	height: .85em;
	margin: 0 .075em;
}

.lvt-shop-chips__item:hover {
	color: var(--lvt-c-primary);
}

/* Products grid ---------------------------------------------------------- */

.lvt-products--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.lvt-shop-empty .lvt-notice {
	margin: 0;
}

.lvt-shop-toolbar--empty {
	min-height: 0;
}

.lvt-shop-empty .lvt-notice:not(:last-child) {
	margin-bottom: 30px;
}

/* Search form under "no products" on search results (as live) */
.lvt-shop-search {
	position: relative;
	display: flex;
}

.lvt-shop-search .lvt-shop-search__input {
	flex: 1 1 auto;
	width: 100%;
	height: 46px;
	padding: 0 76px 0 15px;
	border: 1px solid var(--lvt-c-form-border, rgba(12, 12, 12, .1));
	border-radius: 5px;
	background: transparent;
	color: var(--lvt-c-secondary);
	font-size: 14px;
}

.lvt-shop-search__clear {
	position: absolute;
	top: 50%;
	right: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 24px;
	margin-top: -12px;
	padding: 0 10px 0 0;
	border: 0;
	background: none;
	color: var(--lvt-c-secondary);
	cursor: pointer;
}

.lvt-shop-search__clear[hidden] {
	display: none;
}

.lvt-shop-search__clear .lvt-cicon {
	width: 12px;
	height: 12px;
}

.lvt-shop-search__submit {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: var(--lvt-c-primary);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color .3s ease;
}

.lvt-shop-search__submit:hover {
	background: var(--lvt-c-primary-dark);
}

.lvt-shop-search__submit svg {
	width: 20px;
	height: 20px;
}

/* Tile (design-shop 5.1) -------------------------------------------------- */

.lvt-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	color: var(--lvt-c-text);
	font-size: 16px;
	line-height: 22.4px;
	text-align: center;
}

.lvt-tile__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 430 / 287;
	background: #EDEDED;
}

.lvt-tile__image {
	display: block;
	width: 100%;
	height: 100%;
}

.lvt-tile__img,
.lvt-tile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lvt-tile__actions {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(25px);
	transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
	pointer-events: none;
}

.lvt-tile:hover .lvt-tile__actions,
.lvt-tile:focus-within .lvt-tile__actions {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.lvt-tile__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 57px;
	height: 45px;
	background: #FFFFFF;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
	color: #333333;
}

.lvt-tile__btn:hover {
	color: #333333;
}

.lvt-tile__btn-icon {
	width: 20px;
	height: 20px;
}

.lvt-tile__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	padding: 0 10px;
	background: rgba(0, 0, 0, .9);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 34px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity .3s ease, visibility .3s ease;
	pointer-events: none;
}

.lvt-tile__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: rgba(0, 0, 0, .9);
}

.lvt-tile__btn:hover .lvt-tile__tip {
	opacity: 1;
	visibility: visible;
}

.lvt-tile__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lvt-tile__cat {
	color: #A5A5A5;
	font-size: 16px;
	line-height: 22.4px;
}

.lvt-tile__cat a {
	color: #A5A5A5;
}

.lvt-tile__cat a:hover {
	color: #333333;
}

/* Two lines at most, the rest cut off without "..." (as live). */
.lvt-tile__title {
	display: block;
	max-height: 44.8px;
	margin: -3.2px 0;
	overflow: hidden;
	color: #333333;
	font-family: var(--lvt-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 22.4px;
	letter-spacing: -0.01px;
}

.lvt-tile__title a {
	color: #333333;
}

.lvt-tile__price {
	margin: 0 0 -3.2px;
	color: var(--lvt-c-primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 22.4px;
}

.lvt-tile__price sup,
.lvt-list-item__price sup,
.lvt-search-item__price sup {
	font-size: 70%;
	line-height: 0;
}

/* Labels (errata #8) ----------------------------------------------------- */

.lvt-badges {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 100%; /* live child theme: labels never shrink ("We recommend" stays one 13px line) */
	pointer-events: none;
}

.lvt-badges--tile {
	top: 6px;
	left: 7px;
	align-items: flex-start;
}

.lvt-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 8px 8px 8px 9px;
	border-radius: 0 3px 3px 0;
	background: #3E3E3E;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	line-height: 13px;
	letter-spacing: .13px;
	text-align: center;
	white-space: nowrap;
}

.lvt-badge[hidden] {
	display: none;
}

/*
 * Live: status labels (sale, sold out, hot, new, in stock) are 50px wide at
 * least and keep 5px more space under them than the attribute labels
 * (We recommend, A/B): 15px vs 10px on wide screens, 10px vs 5px <= 576px.
 */
.lvt-badge:not(.lvt-badge--recommend):not(.lvt-badge--grade) {
	min-width: 50px;
}

.lvt-badge:not(.lvt-badge--recommend):not(.lvt-badge--grade):not(:last-child) {
	margin-bottom: 5px;
}

.lvt-badge__icon {
	flex: none;
	width: 13px;
	height: 13px;
}

.lvt-badge--sale {
	justify-content: center;
	background: #BF2D24;
}

.lvt-badge--soldout {
	background: #FFFFFF;
	color: #242424;
}

.lvt-badge--hot {
	background: #2080D9;
}

.lvt-badge--new,
.lvt-badge--recommend {
	background: #27A323;
}

.lvt-badge--instock {
	background: #3E3E3E;
}

.lvt-badge--grade {
	justify-content: center;
	min-width: 50px;
	background: #9C7475;
	font-weight: 400;
}

/* Pager ------------------------------------------------------------------ */

.lvt-shop-pager {
	margin-top: 30px;
	text-align: center;
}

.lvt-shop-pager__list {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvt-shop-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 5px;
	color: #242424;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	transition: all .2s ease;
}

.lvt-shop-pager__link:hover {
	color: var(--lvt-c-primary);
}

.lvt-shop-pager__link.is-current {
	background: var(--lvt-c-primary);
	color: #FFFFFF;
}

.lvt-shop-pager__link .lvt-cicon {
	width: 8px;
	height: 14px;
}

/* List view (?shop_view=list) --------------------------------------------- */

.lvt-list-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .106);
}

.lvt-list-item:first-child {
	padding-top: 0;
}

/* Live: no line and no space under the last row (the pager follows 30px below its text). */
.lvt-list-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.lvt-list-item__media {
	position: relative;
	flex: none;
	width: 300px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.lvt-list-item__image,
.lvt-list-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lvt-list-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Live list item (1440): title 20.8/20 and category 15.2/21.28 and price 22.4/31.36 with Woodmart's -0.2em
 * boxes, 10.9 / 10.4 / 8.7px between them, 25.6px description lines, 13.2px above the button.
 */
.lvt-list-item__title {
	margin: -4.16px 0 10.86px;
	font-size: 20.8px;
	line-height: 20px;
}

.lvt-list-item__title a {
	color: #333333;
}

.lvt-list-item__cat {
	margin: 0 0 10.42px;
	font-size: 15.2px;
	line-height: 21.28px;
}

.lvt-list-item__cat a {
	color: #A5A5A5;
}

.lvt-list-item__price {
	margin: 0 0 8.74px;
	color: var(--lvt-c-primary);
	font-size: 22.4px;
	font-weight: 600;
	line-height: 31.36px;
}

/*
 * Live: the text box is at most 176px high and scrolls beyond that (long LV B-grade texts); its paragraph
 * margins stay inside it (own formatting context); 13.2px to the button.
 */
.lvt-list-item__text {
	max-height: 176px;
	margin-bottom: 13.2px;
	overflow-y: auto;
	line-height: 25.6px;
}

.lvt-list-item__text p {
	margin: 0 0 20px;
}

.lvt-list-item__text p:last-child {
	margin-bottom: 0;
}

.lvt-list-item__gap {
	display: block;
}

.lvt-list-item .lvt-list-item__btn {
	min-height: 36px;
	padding: 5px 14px;
	font-family: var(--lvt-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 14.4px;
}

/* Live list view: the grade label's letter sits at the left, like the other labels (tiles centre it). */
.lvt-list-item .lvt-badge--grade {
	justify-content: flex-start;
}

/* Category intro --------------------------------------------------------- */

.lvt-cat-header {
	margin: 0 0 25px;
}

.lvt-cat-header__banner {
	margin: 0 0 20px;
	text-align: center;
}

.lvt-cat-header__img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.lvt-cat-header__title {
	margin: 0 0 20px;
	color: var(--lvt-c-heading);
	font-size: 50px;
	line-height: 58px;
	text-align: center;
}

.lvt-cat-prose > :last-child {
	margin-bottom: 0;
}

.lvt-cat-prose h2 {
	font-size: 34px;
	line-height: 40px;
}

.lvt-cat-prose h3 {
	font-size: 26px;
	line-height: 32px;
}

.lvt-cat-more {
	margin: 20px 0 0;
	padding: 0 0 20px;
}

.lvt-cat-more__toggle {
	display: block;
	padding: 0 0 16px;
	border: 0;
	background: none;
	color: var(--lvt-c-text);
	font-family: var(--lvt-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	text-align: left;
	cursor: pointer;
}

.lvt-cat-more__toggle:hover {
	color: var(--lvt-c-primary);
}

.lvt-cat-more__body[hidden] {
	display: none;
}

/* Live: 10px under every list item of the category texts. */
.lvt-cat-prose li {
	margin-bottom: 10px;
}

/* Floating filters opener (<= 1024px, design-shop I.9) ------------------ */

.lvt-shop-float-filters {
	display: none;
}

/* Product carousel (design-shop 5.7) ------------------------------------- */

.lvt-carousel {
	--lvt-carousel-gap: 20px;
	position: relative;
}

.lvt-carousel__viewport {
	display: grid;
	grid-auto-columns: calc((100% - (var(--lvt-per-view, 4) - 1) * var(--lvt-carousel-gap)) / var(--lvt-per-view, 4));
	grid-auto-flow: column;
	gap: var(--lvt-carousel-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
}

.lvt-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.lvt-carousel__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.lvt-carousel__item {
	min-width: 0;
	scroll-snap-align: start;
}

.lvt-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	padding: 0;
	border: 0;
	background: none;
	color: #333333;
	opacity: 0;
	cursor: pointer;
	transition: opacity .25s ease, transform .25s ease, color .25s ease;
}

.lvt-carousel--dots .lvt-carousel__arrow {
	margin-top: -47px;
}

.lvt-carousel__arrow .lvt-cicon {
	width: 14px;
	height: 24px;
}

.lvt-carousel__arrow--prev {
	left: -50px;
	transform: translateX(-30px);
}

.lvt-carousel__arrow--next {
	right: -50px;
	transform: translateX(30px);
}

.lvt-carousel:hover .lvt-carousel__arrow,
.lvt-carousel:focus-within .lvt-carousel__arrow {
	opacity: 1;
	transform: none;
}

.lvt-carousel .lvt-carousel__arrow:disabled {
	opacity: 0;
	cursor: default;
}

.lvt-carousel.is-static .lvt-carousel__arrow {
	display: none;
}

.lvt-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	min-height: 24px;
	margin-top: 20px;
}

.lvt-carousel__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.lvt-carousel__dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border: 2px solid #BBBBBB;
	border-radius: 10px;
	transition: all .25s ease;
}

.lvt-carousel__dot.is-active::before,
.lvt-carousel__dot:hover::before {
	border-color: #333333;
	background: #333333;
}

/* <= 1024px: off-canvas sidebar, compact toolbar, visible tile buttons ----- */

@media (max-width: 1024px) {
	/* No carousel dots on tablets and phones (as live). */
	.lvt-carousel__dots {
		display: none;
	}

	/* Live shop listings and product pages keep 20px (not 40px) above and below the content here. */
	.lvt-catalog .lvt-main,
	.lvt-product-page .lvt-main {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.lvt-shop__layout {
		display: block;
	}

	.lvt-shop-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: var(--lvt-z-panel);
		display: flex;
		flex-direction: column;
		width: 300px;
		max-width: 100%;
		background: #FFFFFF;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform .5s var(--lvt-ease), visibility 0s linear .5s;
	}

	.lvt-shop-sidebar.is-open {
		visibility: visible;
		transform: none;
		transition: transform .5s var(--lvt-ease), visibility 0s;
	}

	.lvt-shop-sidebar__head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: flex-end;
		min-height: 65px;
		padding: 0 15px;
		border-bottom: 1px solid rgba(0, 0, 0, .105);
	}

	.lvt-shop-sidebar__close {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 0;
		border: 0;
		background: none;
		color: #333333;
		font-family: var(--lvt-font-body);
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		cursor: pointer;
	}

	.lvt-shop-sidebar__close .lvt-cicon {
		width: 12px;
		height: 12px;
	}

	.lvt-shop-sidebar__body {
		padding: 30px 0;
	}

	.lvt-shop-sidebar .lvt-widget {
		padding-right: 30px;
		padding-left: 30px;
		font-size: 14px;
		line-height: 19.6px;
	}

	.lvt-shop-sidebar .lvt-widget:last-child {
		padding-bottom: 30px;
	}

	.lvt-shop-sidebar .lvt-widget__title,
	.lvt-shop-sidebar .lvt-widget__toggle {
		font-size: 14px;
		line-height: 14px;
		color: #333333;
	}

	.lvt-shop-sidebar .lvt-widget__arrow {
		top: -5px;
	}

	.lvt-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
		margin-bottom: 20px;
	}

	.lvt-shop-toolbar__title {
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(0, 0, 0, .106);
	}

	.lvt-shop-toolbar__tools {
		justify-content: space-between;
	}

	/* Live keeps the (then empty) tools row under the title: 15px more before the "no products" notice. */
	.lvt-shop-toolbar--empty {
		padding-bottom: 15px;
	}

	.lvt-shop-toolbar__filters {
		display: inline-flex;
	}

	.lvt-per-page,
	.lvt-view-switch {
		display: none;
	}

	.lvt-tile__actions {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	.lvt-tile__btn {
		width: 35px;
		height: 35px;
	}

	.lvt-tile__btn-icon {
		width: 18px;
		height: 18px;
	}

	.lvt-tile__tip {
		display: none;
	}

	.lvt-badge {
		padding: 6px 6px 6px 7px;
		font-size: 10px;
		line-height: 10px;
		letter-spacing: .1px;
	}

	.lvt-badge__icon {
		width: 10px;
		height: 10px;
	}

	/* The attribute labels (We recommend, A/B) keep their desktop size on narrow screens (as live). */
	.lvt-badges .lvt-badge--grade,
	.lvt-badges .lvt-badge--recommend {
		padding: 8px 8px 8px 9px;
		font-size: 13px;
		line-height: 13px;
		letter-spacing: .13px;
	}

	.lvt-badges .lvt-badge--recommend .lvt-badge__icon {
		width: 13px;
		height: 13px;
	}

	.lvt-shop-float-filters {
		position: fixed;
		top: 230px;
		left: -50px;
		z-index: var(--lvt-z-float);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		padding: 0;
		border: 0;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 5px rgba(0, 0, 0, .17);
		color: #333333;
		cursor: pointer;
		transition: left .25s ease;
	}

	.lvt-shop-float-filters.is-shown {
		left: 0;
	}

	.lvt-shop-float-filters .lvt-cicon {
		width: 20px;
		height: 20px;
	}

	.lvt-carousel .lvt-carousel__arrow {
		opacity: 1;
		transform: none;
	}

	.lvt-carousel .lvt-carousel__arrow:disabled {
		opacity: .4;
	}

	.lvt-carousel__arrow--prev {
		left: -24px;
	}

	.lvt-carousel__arrow--next {
		right: -24px;
	}

	.lvt-carousel__arrow {
		width: 32px;
	}
}

@media (max-width: 768px) {
	.lvt-products--grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.lvt-ordering {
		width: 30px;
		height: 30px;
	}

	.lvt-ordering .lvt-ordering__select {
		position: absolute;
		inset: 0;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0;
		background: none;
		color: transparent;
		font-size: 16px;
		opacity: 0;
	}

	.lvt-ordering__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		color: #333333;
		pointer-events: none;
	}

	.lvt-ordering__icon .lvt-cicon {
		width: 20px;
		height: 18px;
	}

	/* List view = a centred tile, as live (description and pack line hidden). */
	.lvt-products--list {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.lvt-list-item {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 0;
		border-bottom: 0;
		text-align: center;
	}

	.lvt-list-item__media {
		width: 100%;
	}

	.lvt-list-item__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.lvt-list-item__title {
		align-self: stretch;
		margin: -3.2px 0;
		font-size: 16px;
		line-height: 20px;
	}

	.lvt-list-item__cat {
		align-self: stretch;
		margin: -3.04px 0;
		font-size: 15.2px;
		line-height: 21.28px;
	}

	.lvt-list-item__price {
		align-self: stretch;
		margin: -3.2px 0;
		font-size: 16px;
		line-height: 22.4px;
	}

	.lvt-list-item__text {
		display: none;
	}

	/* Live loop button: 36px, no border, 14px side padding (beats the phone button size of buttons.css). */
	.lvt-products--list .lvt-list-item .lvt-btn.lvt-list-item__btn {
		min-height: 36px;
		padding: 0 14px;
		border: 0;
		font-size: 12px;
		font-weight: 600;
		line-height: 15.6px;
	}

	.lvt-cat-header__img {
		width: 100%;
	}

	/* Carousels: 2 per view, 10px apart, arrows at the screen edge (live "sm" <= 768). */
	.lvt-carousel {
		--lvt-carousel-gap: 10px;
	}

	.lvt-carousel__viewport {
		grid-auto-columns: calc((100% - (var(--lvt-per-view-mobile, 2) - 1) * var(--lvt-carousel-gap)) / var(--lvt-per-view-mobile, 2));
	}

	.lvt-carousel .lvt-carousel__arrow {
		width: 28px;
		height: 40px;
		margin-top: -20px;
	}

	.lvt-carousel__arrow .lvt-cicon {
		width: 10px;
		height: 18px;
	}

	.lvt-carousel__arrow--prev {
		left: -22px;
	}

	.lvt-carousel__arrow--next {
		right: -22px;
	}
}

@media (max-width: 767px) {
	.lvt-shop-float-filters {
		top: 253px;
	}

	.lvt-shop-toolbar__filters {
		font-size: 14px;
		line-height: 14px;
	}

	.lvt-tile__title {
		max-height: 39.2px;
		margin: -2.8px 0;
		font-size: 14px;
		line-height: 19.6px;
	}

	.lvt-tile__price {
		margin-bottom: -2.8px;
		font-size: 14px;
		line-height: 19.6px;
	}

	.lvt-shop-chips {
		font-size: 13.3px;
	}

	.lvt-shop-chips__item--clear {
		padding-top: .5px;
		padding-bottom: .5px;
	}

	.lvt-list-item__title {
		margin: -2.8px 0;
		font-size: 14px;
	}

	.lvt-list-item__cat {
		margin: -2.66px 0;
		font-size: 13.3px;
		line-height: 18.62px;
	}

	.lvt-list-item__price {
		margin: -2.8px 0;
		font-size: 14px;
		line-height: 19.6px;
	}

	.lvt-cat-header__title {
		font-size: 34px;
		line-height: 58px;
	}

	.lvt-cat-more__toggle {
		font-size: 14px;
		line-height: 14px;
	}

}

/* <= 576px: labels closer together, status labels 40px wide at least (live Woodmart). */
@media (max-width: 576px) {
	.lvt-badges {
		gap: 5px;
	}

	.lvt-badge:not(.lvt-badge--recommend):not(.lvt-badge--grade) {
		min-width: 40px;
	}
}