/* Trinetrix Product Showcase
   ------------------------------------------------------------------ */

.tps-showcase {
	--tps-cols: 4;
	--tps-cols-t: 3;
	--tps-cols-s: 2;
	--tps-gap: 20px;
	--tps-gap-m: 14px;
	--tps-card-w: calc(66.6667% - 9.33px);
	--tps-card-wd: calc(25% - 15px);
	--tps-radius: 16px;
	--tps-ratio: 1 / 1;
	--tps-pad: 0%;

	--tps-card-bg: #ffffff;
	--tps-media-bg: #f6f6f4;
	--tps-line: #ececea;
	--tps-ink: #16181d;
	--tps-muted: #8b9098;
	--tps-star: #f5901f;
	--tps-star-empty: #dfe1e4;
	--tps-strike: #a4a9b0;
	--tps-strike-line: #e0503c;
	--tps-btn-bg: #3b1637;
	--tps-btn-color: #ffffff;

	display: block;
	position: relative;
	margin: 0 0 32px;
	color: var(--tps-ink);
	font-family: inherit;
	box-sizing: border-box;
}

.tps-showcase *,
.tps-showcase *::before,
.tps-showcase *::after {
	box-sizing: inherit;
}

/* Section header
   ------------------------------------------------------------------ */

.tps-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.tps-head__title {
	margin: 0;
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--tps-ink);
}

.tps-head__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--tps-ink);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: opacity 0.18s ease;
}

.tps-head__link:hover {
	opacity: 0.6;
}

.tps-head__link svg {
	width: 15px;
	height: 15px;
}

/* Track
   ------------------------------------------------------------------ */

.tps-viewport {
	position: relative;
}

.tps-track {
	display: grid;
	grid-template-columns: repeat(var(--tps-cols), minmax(0, 1fr));
	gap: var(--tps-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card
   ------------------------------------------------------------------ */

.tps-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--tps-card-bg);
	border: 1px solid var(--tps-line);
	border-radius: var(--tps-radius);
	padding: 10px 10px 18px;
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.tps-card:hover {
	box-shadow: 0 10px 26px rgba(16, 18, 24, 0.08);
	transform: translateY(-2px);
}

.tps-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: calc(var(--tps-radius) - 4px);
	background: var(--tps-media-bg);
	aspect-ratio: var(--tps-ratio);
	margin-bottom: 16px;
	text-decoration: none;
}

.tps-card__media img,
.tps-card__img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	object-fit: cover;
	object-position: center;
	padding: var(--tps-pad, 0%) !important;
	margin: 0 !important;
	display: block !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none;
	transition: opacity 0.3s ease, transform 0.45s ease;
	will-change: transform;
}

/* Letterbox mode, for packshots that need air around them. */
.tps--fit-contain .tps-card__media img,
.tps--fit-contain .tps-card__img {
	object-fit: contain;
}

.tps-card__img--hover {
	opacity: 0;
}

.tps-card:hover .tps-card__img--hover {
	opacity: 1;
}

.tps-card:hover .tps-card__img {
	transform: scale(1.04);
}

.tps-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--tps-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

/* Card text
   ------------------------------------------------------------------ */

.tps-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 6px;
	flex: 1 1 auto;
}

.tps-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--tps-ink);
}

.tps-card__title a {
	color: inherit;
	text-decoration: none;
}

.tps-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tps-card__sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 400;
	color: var(--tps-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tps-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tps-card__rating {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 2px;
}

.tps-card__reviews {
	font-size: 13px;
	font-weight: 600;
	color: var(--tps-ink);
}

/* Stars */

.tps-stars {
	position: relative;
	display: inline-block;
	width: 85px;
	height: 15px;
	flex: 0 0 auto;
}

.tps-stars i {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: block;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-1%20-1%2022%2022'%3E%3Cpath%20d='M10%200l2.9%206.05%206.6.92-4.8%204.7%201.15%206.6L10%2015.15%204.15%2018.27%205.3%2011.67.5%206.97l6.6-.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-1%20-1%2022%2022'%3E%3Cpath%20d='M10%200l2.9%206.05%206.6.92-4.8%204.7%201.15%206.6L10%2015.15%204.15%2018.27%205.3%2011.67.5%206.97l6.6-.92z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 17px 15px;
	mask-size: 17px 15px;
}

.tps-stars__bg {
	width: 100%;
	background-color: var(--tps-star-empty);
}

.tps-stars__fg {
	background-color: var(--tps-star);
	overflow: hidden;
}

/* Price */

.tps-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.tps-card__price .tps-price__now {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tps-ink);
}

.tps-card__price .tps-price__was {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--tps-strike);
}

.tps-card__price .tps-price__was::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 52%;
	height: 1.5px;
	background: var(--tps-strike-line);
	transform: rotate(-4deg);
}

.tps-card__price .tps-price__suffix {
	font-size: 12px;
	color: var(--tps-muted);
}

.tps-card__price del,
.tps-card__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Add to cart
   Selectors carry weight and !important because theme rules for loop buttons
   are usually written with far more specificity than a plugin class.
   ------------------------------------------------------------------ */

.tps-card__cart {
	margin-top: auto;
	padding-top: 14px;
	width: 100%;
}

/* Add to cart button. Kept on its own selector, separate from .added_to_cart
   below, so the two can never share a declaration block and drift onto each
   other by accident. background carries a literal fallback after the custom
   property so the button is never left with no fill if --tps-btn-bg is ever
   missing. */

.tps-showcase .tps-card__cart .tps-btn,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn {
	position: static !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 13px 14px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--tps-btn-bg, #3b1637) !important;
	background-image: none !important;
	color: var(--tps-btn-color, #ffffff) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: none !important;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.tps-showcase .tps-card__cart .tps-btn:hover,
.tps-showcase .tps-card__cart .tps-btn:focus,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn:hover,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn:focus {
	background: var(--tps-btn-bg, #3b1637) !important;
	color: var(--tps-btn-color, #ffffff) !important;
	opacity: 0.88 !important;
}

.tps-showcase .tps-card__cart .tps-btn.is-loading,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn.is-loading {
	background: var(--tps-btn-bg, #3b1637) !important;
	color: var(--tps-btn-color, #ffffff) !important;
	opacity: 0.6 !important;
	pointer-events: none;
}

.tps-showcase .tps-card__cart .tps-btn.is-added,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn.is-added {
	background: #1f7a4d !important;
	color: #ffffff !important;
}

.tps-showcase .tps-card__cart .tps-btn.is-failed,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn.is-failed {
	background: #b3261e !important;
	color: #ffffff !important;
}

.tps-showcase .tps-card__cart .tps-btn--disabled,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .tps-btn--disabled {
	background: #ececed !important;
	color: #8b9098 !important;
	cursor: not-allowed;
}

.tps-card__cart .tps-cart-error {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.35;
	color: #b3261e;
	text-align: center;
}

/* "View cart" link that can appear under the button. Fully separate rule
   from .tps-btn above so its transparent, outlined look can never leak onto
   the button itself. */

.tps-showcase .tps-card__cart .added_to_cart,
.woocommerce ul.products.tps-archive li.product .tps-card__cart .added_to_cart {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 8px 0 0 !important;
	padding: 9px 14px !important;
	background: transparent !important;
	color: var(--tps-btn-bg, #3b1637) !important;
	border: 1px solid var(--tps-line) !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	text-align: center !important;
	text-decoration: none !important;
}

/* Slider mode
   ------------------------------------------------------------------ */

.tps--slider-all .tps-track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

.tps--slider-all .tps-track::-webkit-scrollbar {
	display: none;
}

.tps--slider-all .tps-card {
	flex: 0 0 var(--tps-card-wd);
	scroll-snap-align: start;
}

/* Arrows */

.tps-arrow {
	position: absolute;
	top: 38%;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--tps-line);
	border-radius: 50%;
	background: #fff;
	color: var(--tps-ink);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(16, 18, 24, 0.1);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.tps-arrow:hover {
	transform: scale(1.06);
}

.tps-arrow[hidden] {
	display: none;
}

.tps-arrow svg {
	width: 18px;
	height: 18px;
}

.tps-arrow--prev {
	left: -18px;
}

.tps-arrow--next {
	right: -18px;
}

/* Dots */

.tps-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
}

.tps-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d6d8dc;
	cursor: pointer;
	transition: width 0.22s ease, background 0.22s ease;
}

.tps-dots button.is-active {
	width: 20px;
	border-radius: 999px;
	background: var(--tps-ink);
}

.tps--has-dots.tps--slider-all .tps-dots {
	display: flex;
}

/* Focus states
   ------------------------------------------------------------------ */

.tps-showcase a:focus-visible,
.tps-showcase button:focus-visible {
	outline: 2px solid var(--tps-ink);
	outline-offset: 3px;
	border-radius: 4px;
}


/* Shop archive takeover
   Selectors are deliberately heavy so theme loop styles do not win.
   ------------------------------------------------------------------ */

ul.products.tps-archive,
.woocommerce ul.products.tps-archive,
.woocommerce-page ul.products.tps-archive {
	display: grid !important;
	grid-template-columns: repeat(var(--tps-cols), minmax(0, 1fr)) !important;
	gap: var(--tps-gap) !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
	clear: both;
}

ul.products.tps-archive::before,
ul.products.tps-archive::after,
.woocommerce ul.products.tps-archive::before,
.woocommerce ul.products.tps-archive::after {
	content: none !important;
	display: none !important;
}

ul.products.tps-archive li.product,
.woocommerce ul.products.tps-archive li.product,
.woocommerce-page ul.products.tps-archive li.product {
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px 10px 18px !important;
	float: none !important;
	clear: none !important;
	list-style: none !important;
	text-align: left !important;
	background: var(--tps-card-bg) !important;
	border: 1px solid var(--tps-line) !important;
	border-radius: var(--tps-radius) !important;
	box-shadow: none;
	overflow: visible;
}

.woocommerce ul.products.tps-archive li.product::before,
.woocommerce ul.products.tps-archive li.product::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products.tps-archive li.product .tps-card__media {
	margin: 0 0 16px !important;
	padding: 0 !important;
	border-radius: calc(var(--tps-radius) - 4px) !important;
	background: var(--tps-media-bg) !important;
	overflow: hidden !important;
}

.woocommerce ul.products.tps-archive li.product .tps-card__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--tps-ink) !important;
	text-align: left !important;
}

.woocommerce ul.products.tps-archive li.product .tps-card__sub {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	color: var(--tps-muted) !important;
	text-align: left !important;
}

.woocommerce ul.products.tps-archive li.product .tps-card__price {
	margin-top: 6px !important;
	padding: 0 !important;
	font-size: inherit !important;
	color: var(--tps-ink) !important;
	text-align: left !important;
}

.woocommerce ul.products.tps-archive li.product .tps-card__cart {
	margin-top: auto !important;
	padding-top: 14px !important;
	width: 100% !important;
}

.woocommerce ul.products.tps-archive li.product:hover {
	box-shadow: 0 10px 26px rgba(16, 18, 24, 0.08);
}

/* Tablet
   ------------------------------------------------------------------ */

@media (max-width: 1023px) {

	.tps-track {
		grid-template-columns: repeat(var(--tps-cols-t), minmax(0, 1fr));
	}

	ul.products.tps-archive,
	.woocommerce ul.products.tps-archive {
		grid-template-columns: repeat(var(--tps-cols-t), minmax(0, 1fr)) !important;
	}

	.tps-arrow--prev {
		left: 4px;
	}

	.tps-arrow--next {
		right: 4px;
	}
}

/* Mobile: one card plus a peek of the next
   ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.tps-track {
		grid-template-columns: repeat(var(--tps-cols-s), minmax(0, 1fr));
		gap: var(--tps-gap-m);
	}

	ul.products.tps-archive,
	.woocommerce ul.products.tps-archive {
		grid-template-columns: repeat(var(--tps-cols-s), minmax(0, 1fr)) !important;
		gap: var(--tps-gap-m) !important;
	}

	.woocommerce ul.products.tps-archive li.product {
		padding: 8px 8px 16px !important;
	}

	.woocommerce ul.products.tps-archive li.product .tps-card__title {
		font-size: 15px !important;
	}

	.woocommerce ul.products.tps-archive li.product .tps-card__sub {
		font-size: 13px !important;
	}

	.tps--slider-mobile .tps-track,
	.tps--slider-all .tps-track {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: var(--tps-gap-m);
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.tps--slider-mobile .tps-track::-webkit-scrollbar,
	.tps--slider-all .tps-track::-webkit-scrollbar {
		display: none;
	}

	.tps--slider-mobile .tps-card,
	.tps--slider-all .tps-card {
		flex: 0 0 var(--tps-card-w);
		scroll-snap-align: start;
	}

	.tps--has-dots.tps--slider-mobile .tps-dots,
	.tps--has-dots.tps--slider-all .tps-dots {
		display: flex;
	}

	.tps-card {
		padding: 8px 8px 16px;
	}

	.tps-card__title {
		font-size: 16px;
	}

	.tps-card__sub {
		font-size: 13px;
	}

	.tps-card__price .tps-price__now {
		font-size: 18px;
	}

	.tps-arrow {
		display: none;
	}

	.tps-card:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Motion preference
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.tps-showcase * {
		transition: none !important;
	}

	.tps-track {
		scroll-behavior: auto;
	}
}