/**
 * BD Category Section + BD Category Products styles.
 *
 * A dark, glass-card "category-wise section" design. Each card's accent comes
 * from its own product category (via inline --bd-cat-* custom properties set in
 * PHP), so tiered categories colour themselves automatically. The section
 * eyebrow/icon use the section-level --bd-accent.
 */

.bd-cat-section,
.bd-cat-archive {
	--bd-accent: #ec4899;
	--bd-cols: 2;
	--bd-gap: 24px;
	box-sizing: border-box;
	color: #fff;
}

.bd-cat-section *,
.bd-cat-archive * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Section layout */

.bd-cat-section__inner {
	--bd-header-width: 33%;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

@media (min-width: 1025px) {
	.bd-cat-section__inner {
		flex-direction: row;
	}

	.bd-cat-section--media-left .bd-cat-section__inner {
		flex-direction: row-reverse;
	}

	.bd-cat-section__header {
		flex: 0 0 var(--bd-header-width);
		width: var(--bd-header-width);
		padding-top: 4px;
	}

	.bd-cat-section__products {
		flex: 1 1 auto;
		min-width: 0;
	}
}

.bd-cat-section__products {
	width: 100%;
}

/* ---------------------------------------------------------------- Header (shared) */

.bd-cat-section__eyebrow-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	color: var(--bd-accent);
}

.bd-cat-section__icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	color: var(--bd-accent);
}

.bd-cat-section__icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.bd-cat-section__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--bd-accent);
}

.bd-cat-section__title {
	margin: 0 0 16px;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
	white-space: pre-line;
}

.bd-cat-section__desc {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.6;
	color: #9ca3af;
}

/* ---------------------------------------------------------------- View-all button */

.bd-cat-section__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 24px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bd-cat-section__cta:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.bd-cat-section__cta .bd-cat-arrow {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.bd-cat-section__cta:hover .bd-cat-arrow {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------- Grid */

.bd-cat-grid {
	display: grid;
	grid-template-columns: repeat(var(--bd-cols), minmax(0, 1fr));
	gap: var(--bd-gap);
	width: 100%;
}

/* Shortcode (no per-device controls) auto-caps columns on smaller screens. */
@media (max-width: 1024px) {
	.bd-cat-grid--auto {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bd-cat-grid--auto {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------
   Glowing product slider (BD Category Section, display = slider)
---------------------------------------------------------------- */

.bd-cat-carousel {
	position: relative;
	width: 100%;
}

/* Soft ambient accent glow behind the slider. */
.bd-cat-carousel--glow::before {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	top: -8%;
	height: 55%;
	background: radial-gradient(60% 100% at 50% 0%, var(--bd-accent) 0%, transparent 70%);
	opacity: 0.08;
	filter: blur(28px);
	pointer-events: none;
	z-index: 0;
}

.bd-cat-carousel__viewport {
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* Vertical breathing room so the card hover-lift/glow is not clipped. */
	padding: 8px 2px 14px;
}

.bd-cat-carousel__track {
	display: flex;
	gap: var(--bd-gap, 24px);
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.bd-cat-slide {
	flex: 0 0 calc((100% - (var(--bd-gap, 24px) * (var(--bd-cols, 2) - 1))) / var(--bd-cols, 2));
	max-width: calc((100% - (var(--bd-gap, 24px) * (var(--bd-cols, 2) - 1))) / var(--bd-cols, 2));
}

.bd-cat-slide > .bd-woo-card-wrapper {
	height: 100%;
}

/* Glowing circular arrows. */
.bd-cat-carousel__arrow {
	position: absolute;
	top: calc(50% - 8px);
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bd-accent);
	border-radius: 9999px;
	background: rgba(10, 10, 12, 0.72);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 16px -2px var(--bd-accent);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.bd-cat-carousel__arrow--prev {
	left: 6px;
}

.bd-cat-carousel__arrow--next {
	right: 6px;
}

.bd-cat-carousel__arrow:hover {
	background: var(--bd-accent);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 28px 0 var(--bd-accent);
}

.bd-cat-carousel__arrow:disabled {
	opacity: 0.3;
	cursor: default;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.bd-cat-carousel__arrow svg {
	width: 20px;
	height: 20px;
}

/* Glowing dots. */
.bd-cat-carousel__dots {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.bd-cat-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.bd-cat-carousel__dot:hover {
	background: rgba(255, 255, 255, 0.5);
}

.bd-cat-carousel__dot.is-active {
	width: 24px;
	background: var(--bd-accent);
	box-shadow: 0 0 12px -1px var(--bd-accent);
}

/* Shortcode slider (no per-device columns) caps visible slides on small screens. */
@media (min-width: 601px) and (max-width: 1024px) {
	.bd-cat-section--auto .bd-cat-slide,
	.bd-cat-filter--auto .bd-cat-slide {
		flex-basis: calc((100% - var(--bd-gap, 24px)) / 2);
		max-width: calc((100% - var(--bd-gap, 24px)) / 2);
	}
}

@media (max-width: 600px) {
	.bd-cat-section--auto .bd-cat-slide,
	.bd-cat-filter--auto .bd-cat-slide {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bd-cat-carousel__track {
		transition: none;
	}
}

/* ----------------------------------------------------------------
   Category filter tabs (BD Category Section, display = tabs)
---------------------------------------------------------------- */

.bd-cat-filter {
	--bd-accent: #ec4899;
	--bd-cols: 4;
	--bd-gap: 24px;
	box-sizing: border-box;
	width: 100%;
}

.bd-cat-filter * {
	box-sizing: border-box;
}

.bd-cat-filter__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 36px;
}

.bd-cat-filter__tab {
	/* Each chip carries its own category colour (set inline in PHP), falling
	   back to the component accent. Hover + active use that per-chip colour. */
	--bd-tab-accent: var(--bd-accent);
	padding: 12px 22px;
	border: 1px solid rgba(120, 120, 130, 0.35);
	border-radius: 9999px;
	background: transparent;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.bd-cat-filter__tab:hover {
	border-color: var(--bd-tab-accent);
	color: var(--bd-tab-accent);
}

.bd-cat-filter__tab.is-active {
	background: var(--bd-tab-accent);
	border-color: var(--bd-tab-accent);
	color: #fff;
	box-shadow: 0 8px 22px -6px var(--bd-tab-accent);
}

.bd-cat-filter__body {
	transition: opacity 0.2s ease;
}

.bd-cat-filter__body.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

.bd-cat-filter__cta {
	margin-top: 40px;
	text-align: center;
}

/* Dark pill "View all products" button (matches the reference). */
.bd-cat-filter__viewall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: 9999px;
	background: #0f1117;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-cat-filter__viewall:hover {
	background: var(--bd-accent);
	color: #fff;
	box-shadow: 0 10px 26px -8px var(--bd-accent);
}

.bd-cat-filter__viewall .bd-cat-arrow {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.bd-cat-filter__viewall:hover .bd-cat-arrow {
	transform: translateX(3px);
}

.bd-cat-filter--empty {
	padding: 24px;
	border: 1px dashed rgba(120, 120, 130, 0.4);
	border-radius: 12px;
	color: #9ca3af;
	font-size: 14px;
	text-align: center;
}

/* ----------------------------------------------------------------
   Black card skin — the cards use the ORIGINAL BD product card design
   (bd_wpc_render_card / .bd-woo-product-card), re-coloured dark to sit on
   the section's dark background. Scoped to the category widgets so cards
   elsewhere on the site are unaffected. Each card's accent (border, glow,
   category label, button hover) still comes from its own category.
---------------------------------------------------------------- */

.bd-cat-grid > .bd-woo-card-wrapper {
	height: 100%;
}

.bd-cat-section .bd-woo-product-card,
.bd-cat-archive .bd-woo-product-card {
	/* Dark card body + pure-black pill button (accent on hover, inherited). */
	--bd-button-bg: #000000;
	background: #121215;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.bd-cat-section .bd-woo-product-media,
.bd-cat-archive .bd-woo-product-media {
	background: linear-gradient(180deg, var(--bd-accent-soft) 0%, rgba(15, 17, 23, 0) 100%), #0f1117;
}

.bd-cat-section .bd-woo-product-title a,
.bd-cat-archive .bd-woo-product-title a {
	color: #ffffff;
}

.bd-cat-section .bd-woo-product-title a:hover,
.bd-cat-archive .bd-woo-product-title a:hover {
	color: var(--bd-accent);
}

.bd-cat-section .bd-woo-product-price,
.bd-cat-archive .bd-woo-product-price {
	color: #ffffff;
}

.bd-cat-section .bd-woo-product-price del,
.bd-cat-archive .bd-woo-product-price del {
	color: #6b7280;
}

/* WooCommerce star rating stays visible on the dark card. */
.bd-cat-section .star-rating,
.bd-cat-archive .star-rating {
	color: var(--bd-accent);
}

/* Hairline border on the black button so it reads on the dark card. */
.bd-cat-section .bd-woo-product-button .button,
.bd-cat-archive .bd-woo-product-button .button {
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------- Archive (landing) */

.bd-cat-archive__head {
	margin-bottom: 32px;
}

/* Inline-flex eyebrow row follows the head's text-align (left / center). */
.bd-cat-archive__head .bd-cat-section__eyebrow-row {
	display: inline-flex;
}

.bd-cat-archive__title {
	margin: 0 0 12px;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
}

.bd-cat-archive__more {
	margin-top: 36px;
	text-align: center;
}

.bd-cat-loadmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 32px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bd-cat-loadmore:hover {
	background: var(--bd-accent);
	border-color: transparent;
}

.bd-cat-loadmore.is-loading {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

.bd-cat-section__empty,
.bd-cat-archive__empty {
	color: #9ca3af;
	font-size: 15px;
}

.bd-cat-section--empty,
.bd-cat-archive--empty {
	padding: 24px;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	color: #9ca3af;
	font-size: 14px;
}

/* ---------------------------------------------------------------- Responsive header */

@media (max-width: 1024px) {
	.bd-cat-section__title {
		font-size: 26px;
	}

	.bd-cat-archive__title {
		font-size: 28px;
	}
}