/* Deepaksanth's Custom Taxonomy — frontend styles */

/* Single product "Perfect for" occasion tags */
.dct-product-occasions {
	margin: 16px 0;
}
.dct-product-occasions .dct-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}
.dct-occasion-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.dct-occasion-tags li a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 30px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dct-occasion-tags li a:hover {
	border-color: #999;
	background: #f7f7f7;
}
.dct-occasion-icon img {
	width: 20px;
	height: 20px;
	object-fit: cover;
	border-radius: 50%;
}

/* Occasion Grid (shortcode + Elementor widget) */
.dct-occasions-grid {
	display: grid;
	grid-template-columns: repeat( var( --dct-columns, 4 ), 1fr );
	gap: 20px;
}
/* No hardcoded mobile column-count override here — the Elementor "CT Grid"
 * widget's own responsive "Columns" control sets --dct-columns per
 * breakpoint; a static override here would silently defeat that. Non-
 * Elementor shortcode usage keeps whatever column count it was given via
 * the scoped inline <style> block rendered alongside the markup. */
.dct-occasion-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.dct-occasion-card-image {
	width: 100%;
	max-width: 140px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.dct-occasion-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.dct-occasion-card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #f0f0f0;
}
.dct-occasion-card-name {
	font-weight: 600;
}
.dct-occasion-card-count {
	font-weight: 400;
	opacity: 0.6;
	margin-left: 4px;
}
.dct-occasion-card:hover .dct-occasion-card-name {
	text-decoration: underline;
}

/* Occasion Carousel (Elementor widget) */
.dct-carousel-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
.dct-carousel-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	flex: 1 1 auto;
	padding: 4px 2px 10px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox: hide the native scrollbar — arrows/dots/swipe are the intended navigation. */
	-ms-overflow-style: none; /* old Edge / IE */
}
.dct-carousel-track::-webkit-scrollbar {
	display: none; /* Chrome, Safari, newer Edge */
	height: 0;
}
.dct-carousel-slide {
	flex: 0 0 calc( ( 100% - ( var( --dct-slides-show, 4 ) - 1 ) * 20px ) / var( --dct-slides-show, 4 ) );
	scroll-snap-align: start;
	min-width: 0;
}
/* No hardcoded mobile slide-count override here — the Elementor "CT Carousel"
 * widget's own responsive "Slides To Show" control sets --dct-slides-show per
 * breakpoint; a static override here would silently defeat that (this was the
 * bug where Mobile stayed stuck at 2 slides even after setting it to 1). Non-
 * Elementor shortcode usage keeps whatever slide count it was given via the
 * scoped inline <style> block rendered alongside the markup, capped to a
 * maximum of 2 automatically under 767px for readability. */
.dct-carousel-arrow {
	display: none; /* Hidden by default; the widget/shortcode turns this on via CSS (see below) — keeps Elementor's live preview instant. */
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	z-index: 1;
}
.dct-carousel-wrap.dct-show-arrows .dct-carousel-arrow {
	display: flex;
}
.dct-carousel-arrow:hover {
	background: #f5f5f5;
	border-color: #999;
}
.dct-carousel-dots {
	display: none; /* Hidden by default; the widget/shortcode turns this on via CSS (see below) — keeps Elementor's live preview instant. */
	position: absolute;
	left: 0;
	right: 0;
	bottom: -18px;
	justify-content: center;
	gap: 8px;
}
.dct-carousel-wrap.dct-show-dots .dct-carousel-dots {
	display: flex;
}
.dct-carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #ddd;
	cursor: pointer;
}
.dct-carousel-dot.is-active {
	background: #333;
}

/* Product Grid shortcode */
.dct-products-grid {
	display: grid;
	grid-template-columns: repeat( var( --dct-columns, 4 ), 1fr );
	gap: 24px;
}
@media ( max-width: 767px ) {
	.dct-products-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}
.dct-product-card a {
	text-decoration: none;
	color: inherit;
	display: block;
}
.dct-product-card img {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}
.dct-product-card h3 {
	font-size: 15px;
	margin: 4px 0;
}

.dct-empty {
	opacity: 0.7;
}