.cat-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
	border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 0.875rem;
    padding: 1.05rem 2.9rem;
    min-width: 210px;
	background-color: var(--color-beige-dark);
	color: var(--color-charcoal);
	border: 2px solid transparent;
	transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out, border-color 0.2s ease-out;
	cursor: pointer;
    font-style: italic;
	position: relative;
}
.cat-filter.blog-tab {
	min-width: 180px;
	padding: 0.95rem 1.2rem;
}
.cocktail-filters #taxonomy-filter .cat-filter {
	background-color: transparent;
	font-style: normal;
	border: 4px solid transparent;
	padding: 0.6rem 2.6rem;
}

/* Default: beige bg, charcoal text */
.cocktail-filters #category-filter .cat-filter {
	background-color: var(--color-beige-dark);
	color: var(--color-charcoal);
}

/* Subtle fade on the right edge of the carousels to blend with cream bg */
.taxonomy-carousel-wrapper,
.category-carousel-wrapper {
	position: relative;
}

.taxonomy-carousel-wrapper::after,
.category-carousel-wrapper::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 72px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, var(--color-cream) 70%);
}

@media (min-width: 1024px) {
	.taxonomy-carousel-wrapper::after,
	.category-carousel-wrapper::after {
		width: 120px;
	}
}

@media (max-width: 767.98px) {
	.taxonomy-carousel-wrapper::after {
		width: 56px;
	}
}
@media (min-width: 768px) {
	.cat-filter {
		border-radius: 10px;
		font-size: 1.1rem;
	}
	#taxonomy-filter .cat-filter {
		font-size: 1.75rem;
	}
}

.cat-filter:hover {
	filter: brightness(0.95);
}

.cat-filter.active,
input[type="radio"]:checked + .cat-filter {
	color: var(--color-forest);
	border-color: var(--color-forest);
}

@media (min-width: 768px) {
	#taxonomy-filter .cat-filter.active,
	#taxonomy-filter input[type="radio"]:checked + .cat-filter {
		border: 4px solid;
	}
}
@media (max-width: 767.98px) {
	#taxonomy-filter .cat-filter.active,
	#taxonomy-filter input[type="radio"]:checked + .cat-filter {
		border: 3px solid;
	}
}

.cat-filter__label {
	position: relative;
	z-index: 1;
}

.cat-filter__arrow {
	position: absolute;
	left: 50%;
	bottom: -30px;
	width: 20px;
	height: 14px;
	background: url('../images/vector-4-3.svg') no-repeat center center/contain;
	opacity: 0;
	transform: translate(-50%, -8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#taxonomy-filter .cat-filter.active .cat-filter__arrow,
#taxonomy-filter input[type="radio"]:checked + .cat-filter .cat-filter__arrow {
	opacity: 1;
	transform: translate(-50%, 0);
}

#category-filter .cat-filter.active,
#category-filter input[type="radio"]:checked + .cat-filter {
	background-color: var(--color-forest);
	color: var(--color-white);
	font-style: italic;
	padding: 1.15rem 3.7rem;
}

/* Blog category filter - same styles as product category filter */
#blog-category-filter .cat-filter.active,
#blog-category-filter input[type="radio"]:checked + .cat-filter {
	background-color: var(--color-forest);
	color: var(--color-white);
	font-style: italic;
	padding: 0.95rem 1.2rem;
}

@media (max-width: 767.98px) {
	.cat-filter.blog-tab {
		min-width: 110px;
		padding: 0.35rem 0.6rem;
		font-size: 0.85rem;
	}
	#blog-category-filter .cat-filter.active,
	#blog-category-filter input[type="radio"]:checked + .cat-filter {
		padding: 0.35rem 0.6rem;
		font-size: 0.85rem;
		min-width: 110px;
	}
}

/* Blog category carousel - custom gradient */
#blog-category-filter::after {
	background: linear-gradient(to right, transparent, var(--color-cream));
}

.category-carousel-wrapper .carousel {
	scroll-behavior: smooth;
}

.category-carousel-wrapper .carousel-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.taxonomy-carousel-wrapper,
.category-carousel-wrapper {
	position: relative;
	overflow: hidden;
}

.taxonomy-carousel-wrapper::after,
.category-carousel-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(
		to right,
		transparent,
		color-mix(in srgb, var(--color-cream) 92%, transparent)
	);
}


.category-carousel-wrapper .carousel-control {
	min-width: 36px;
}

.category-carousel-wrapper .category-carousel-arrow {
	position: static;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 2px solid var(--color-forest);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.category-carousel-wrapper .category-carousel-arrow[data-direction="prev"] {
	background-image: url('../images/arrow-left-forest.svg');
}

.category-carousel-wrapper .category-carousel-arrow[data-direction="next"] {
	background-image: url('../images/arrow-right-forest.svg');
}

.no-scrollbar {
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

@media (max-width: 768px) {
	.cat-filter {
		font-size: 0.62rem;
		padding: 0.5rem 0.7rem;
		min-width: 98px;
		border-radius: 5px;
	}
	#taxonomy-filter .cat-filter {
		font-size: 0.95rem;
        padding: 0.18rem 0.75rem !important;
	}
}

/* Hide category (term) carousel on mobile; show taxonomy only */
@media (max-width: 767.98px) {
	#category-filter .cat-filter.active,
	#category-filter input[type="radio"]:checked + .cat-filter {
		padding: 0.7rem 1.0rem;
	}
	.cat-filter__arrow {
		display: none;
	}
}

/* ==========================================================================
   Collection products: mobile excerpt toggle
   ========================================================================== */

/* Ensure excerpt uses line clamp on mobile by default, but can expand */
.product-excerpt {
	position: relative;
}

/* Pagination hover smoothing */
.cocktail_paginate nav {
	flex-wrap: wrap;
}

.products_paginate a {
	transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}

.products_paginate a .pagination-arrow {
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.products_paginate a:hover .pagination-arrow,
.products_paginate a:focus-visible .pagination-arrow {
	transform: translateY(-1px);
	opacity: 0.9;
}

@media (max-width: 767.98px) {
	.product-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-excerpt.is-expanded {
		-webkit-line-clamp: initial;
		max-height: none;
	}

	.excerpt-toggle-arrow {
		transform-origin: center;
	}
}

@media (min-width: 768px) {
	/* Extra safety: never show the toggle on desktop/tablet */
	.excerpt-toggle {
		display: none !important;
	}
}

/* =====================================================================
   Product card hover art
   ---------------------------------------------------------------------
   Each card's hover backdrop is that expression's village scene (see
   delmaguey_village_art_url() in inc/helpers.php), handed over as the
   --dm-card-art custom property.

   background-image is applied only on hover/focus rather than up front:
   a browser fetches the background of an opacity:0 element just the same,
   so setting it inline would pull all ~20 scenes (~900KB gzipped) on page
   load for an effect most visitors never trigger. Bound this way nothing
   is fetched until a card is actually hovered, and the browser caches it
   from then on. The opacity fade stays on the element itself so the
   transition still runs.
   ===================================================================== */

.group:hover .dm-card-art,
.group:focus-within .dm-card-art {
	background-image: var(--dm-card-art);
}