/**
 * BD Woo Products — collection layouts (grid / carousel / shop).
 *
 * Only the surrounding layout is styled here. The individual product card keeps
 * its own design from bd-woo-product-card.css and is never overridden.
 */

.bd-woo-collection {
	--bd-cols: 4;
	--bd-gap: 24px;
	--bd-accent: #ec4899;

	box-sizing: border-box;
	width: 100%;
}

.bd-woo-collection *,
.bd-woo-collection *::before,
.bd-woo-collection *::after {
	box-sizing: border-box;
}

/* ----------------------------------------------------------------------------
   Section header
---------------------------------------------------------------------------- */
.bd-woo-collection__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.bd-woo-collection__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bd-accent);
}

.bd-woo-collection__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--bd-accent);
}

.bd-woo-collection__title {
	margin: 8px 0 0;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.05;
	color: #0f1117;
}

.bd-woo-collection__subtitle {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: #6b7280;
	max-width: 60ch;
}

/* ----------------------------------------------------------------------------
   Grid
---------------------------------------------------------------------------- */
.bd-woo-grid {
	display: grid;
	grid-template-columns: repeat(var(--bd-cols), minmax(0, 1fr));
	gap: var(--bd-gap);
	align-items: stretch;
}

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

/* ----------------------------------------------------------------------------
   Carousel
---------------------------------------------------------------------------- */
.bd-woo-carousel {
	position: relative;
}

.bd-woo-carousel__viewport {
	overflow: hidden;
	/*
	 * Vertical breathing room so the card hover-lift, floating product image
	 * and the category glow are not clipped at the top/bottom. The matching
	 * negative margins keep the surrounding layout spacing unchanged, and
	 * horizontal clipping (for off-screen slides) is preserved.
	 */
	padding-top: 20px;
	padding-bottom: 28px;
	margin-top: -20px;
	margin-bottom: -28px;
	/* Allow vertical page scroll while we handle horizontal swipe in JS. */
	touch-action: pan-y;
}

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

.bd-woo-slide {
	flex: 0 0 calc((100% - (var(--bd-gap) * (var(--bd-cols) - 1))) / var(--bd-cols));
	max-width: calc((100% - (var(--bd-gap) * (var(--bd-cols) - 1))) / var(--bd-cols));
}

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

/* Arrows live in the header row, right aligned. */
.bd-woo-carousel__nav {
	display: inline-flex;
	gap: 10px;
	flex: 0 0 auto;
}

.bd-woo-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	font-size: 18px;
	line-height: 1;
	color: #0f1117;
	background: #ffffff;
	border: 1px solid rgba(15, 17, 23, 0.12);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.bd-woo-carousel__arrow:hover:not([disabled]) {
	color: #ffffff;
	background: var(--bd-accent);
	border-color: var(--bd-accent);
	transform: translateY(-1px);
}

.bd-woo-carousel__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

.bd-woo-carousel__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.bd-woo-carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(15, 17, 23, 0.18);
	cursor: pointer;
	transition: background-color 0.25s ease, width 0.25s ease;
}

.bd-woo-carousel__dot.is-active {
	width: 22px;
	background: var(--bd-accent);
}

/* ----------------------------------------------------------------------------
   Shop layout
---------------------------------------------------------------------------- */
.bd-woo-shop {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.bd-woo-shop--no-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

.bd-woo-shop__sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.bd-woo-filter__title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0f1117;
}

.bd-woo-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Modern custom checkbox (used on desktop sidebar + mobile drawer). */
.bd-woo-check {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #4b5563;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.bd-woo-check input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.bd-woo-check span {
	position: relative;
	padding: 4px 10px 4px 32px;
	border-radius: 6px;
	line-height: 1.4;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.bd-woo-check span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 7px;
	border: 2px solid rgba(15, 17, 23, 0.18);
	background: #ffffff;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bd-woo-check span::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: translate(0, -65%) rotate(45deg);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bd-woo-check:hover span {
	color: #0f1117;
}

.bd-woo-check:hover span::before {
	border-color: var(--bd-accent);
}

.bd-woo-check input:checked + span {
	color: #0f1117;
	font-weight: 600;
}

.bd-woo-check input:checked + span::before {
	background: var(--bd-accent);
	border-color: var(--bd-accent);
}

.bd-woo-check input:checked + span::after {
	opacity: 1;
}

.bd-woo-check input:focus-visible + span::before {
	outline: 2px solid var(--bd-accent);
	outline-offset: 2px;
}

/* Hierarchical category tree (parent → child → grandchild …). */
.bd-woo-cattree {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-woo-cattree__row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bd-woo-cattree__row .bd-woo-check {
	flex: 1 1 auto;
	min-width: 0;
}

.bd-woo-cat-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	color: #9ca3af;
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.bd-woo-cat-toggle:hover,
.bd-woo-cat-toggle:focus-visible {
	color: var(--bd-accent);
	background: var(--bd-accent-soft);
}

.bd-woo-cat-toggle svg {
	transition: transform 0.2s ease;
}

.bd-woo-cattree__item.is-open > .bd-woo-cattree__row > .bd-woo-cat-toggle svg {
	transform: rotate(90deg);
}

/* Alignment placeholder for leaf nodes (no toggle). */
.bd-woo-cattree__spacer {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.bd-woo-subcats {
	list-style: none;
	margin: 10px 0 2px;
	margin-left: 10px;
	padding-left: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-left: 1px solid rgba(15, 17, 23, 0.08);
}

.bd-woo-subcats[hidden] {
	display: none;
}

/* Priority categories auto-colour by their own per-slug accent (same source as
   the BD Category Filter widget chips): hover paints the text/box in that
   colour, and the selected state fills the pill with it. The accent is set
   inline per <li> in PHP (--bd-cat-accent), falling back to the component
   accent. The manual "Priority categories" style controls, when set, override
   these via Elementor's higher-specificity wrapper selectors. */
.bd-woo-cattree__item.is-priority {
	--bd-cat-accent: var(--bd-accent);
}

.bd-woo-cattree__item.is-priority > .bd-woo-cattree__row .bd-woo-check:hover span {
	color: var(--bd-cat-accent);
}

.bd-woo-cattree__item.is-priority > .bd-woo-cattree__row .bd-woo-check:hover span::before {
	border-color: var(--bd-cat-accent);
}

.bd-woo-cattree__item.is-priority > .bd-woo-cattree__row .bd-woo-check input:checked + span {
	background-color: var(--bd-cat-accent);
	color: #fff;
}

.bd-woo-cattree__item.is-priority > .bd-woo-cattree__row .bd-woo-check input:checked + span::before {
	background: #fff;
	border-color: #fff;
}

.bd-woo-cattree__item.is-priority > .bd-woo-cattree__row .bd-woo-check input:checked + span::after {
	border-color: var(--bd-cat-accent);
}

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

.bd-woo-clear {
	align-self: flex-start;
	margin-top: 4px;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 600;
	color: #0f1117;
	background: transparent;
	border: 1px solid rgba(15, 17, 23, 0.2);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.bd-woo-clear:hover {
	border-color: var(--bd-accent);
	color: var(--bd-accent);
}

/* Sidebar inner spacing (desktop + drawer both use the scroll wrapper). */
.bd-woo-sidebar-scroll {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Drawer-only chrome: hidden on desktop, revealed in the mobile media query. */
.bd-woo-filter-toggle,
.bd-woo-shop__overlay,
.bd-woo-sidebar-head,
.bd-woo-sidebar-close,
.bd-woo-apply {
	display: none;
}

/* Body scroll lock while the mobile filter drawer is open. */
.bd-woo-locked {
	overflow: hidden !important;
}

/* Toolbar */
.bd-woo-shop__search {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.bd-woo-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 12px 18px;
	font-size: 15px;
	color: #0f1117;
	background-color: #ffffff;
	border: 1px solid rgba(15, 17, 23, 0.18);
	border-radius: 10px;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.bd-woo-search__input::placeholder {
	color: #9ca3af;
}

.bd-woo-search__input:focus,
.bd-woo-search__input:focus-visible {
	outline: none;
	border-color: var(--bd-accent);
	box-shadow: 0 0 0 3px rgba(15, 17, 23, 0.06);
}

.bd-woo-search__btn {
	flex: 0 0 auto;
	padding: 12px 26px;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background: var(--bd-accent);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.1s ease;
}

.bd-woo-search__btn:hover {
	opacity: 0.92;
}

.bd-woo-search__btn:active {
	transform: translateY(1px);
}

.bd-woo-search__btn:focus-visible {
	outline: 2px solid var(--bd-accent);
	outline-offset: 2px;
}

/* Category chips (one-click category navigation above the grid). */
.bd-woo-shop__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.bd-woo-chip {
	/* Each chip carries its own category colour (set inline in PHP from the
	   category slug, same source as the BD Category Filter widget), falling back
	   to the component accent for the "All" chip. Hover + active use it. */
	--bd-cat-accent: var(--bd-accent);
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #0f1117;
	background-color: #ffffff;
	border: 1px solid rgba(15, 17, 23, 0.18);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Hover shows the same filled look as the active/selected state, in the
   category's own slug colour (white text on the accent fill). */
.bd-woo-chip:hover,
.bd-woo-chip.is-active {
	color: #ffffff;
	background-color: var(--bd-cat-accent);
	border-color: var(--bd-cat-accent);
}

.bd-woo-chip:focus-visible {
	outline: 2px solid var(--bd-cat-accent);
	outline-offset: 2px;
}

.bd-woo-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.bd-woo-count {
	font-size: 15px;
	color: #4b5563;
}

.bd-woo-sort {
	padding: 9px 34px 9px 14px;
	font-size: 14px;
	color: #0f1117;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230f1117' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid rgba(15, 17, 23, 0.18);
	border-radius: 10px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.bd-woo-sort:focus-visible {
	outline: 2px solid var(--bd-accent);
	outline-offset: 1px;
}

/* States */
.bd-woo-shop__grid.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.bd-woo-shop__empty {
	padding: 40px 0;
	font-size: 16px;
	color: #6b7280;
	text-align: center;
}

.bd-woo-shop__more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.bd-woo-loadmore {
	padding: 14px 38px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background: #0f1117;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.bd-woo-loadmore:hover {
	background: var(--bd-accent);
	transform: translateY(-1px);
}

.bd-woo-loadmore.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.bd-woo-collection .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

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

/*
 * Column auto-capping for shortcode collections (.bd-woo-collection--auto).
 * The !important is required to beat the inline --bd-cols the shortcode sets.
 * The Elementor widget never gets the --auto class, so its own per-device
 * column controls are left fully in charge.
 */
@media (max-width: 1024px) {
	.bd-woo-collection--auto {
		--bd-cols: 3 !important;
	}
}

@media (max-width: 768px) {
	.bd-woo-collection--auto {
		--bd-cols: 2 !important;
	}
}

@media (max-width: 460px) {
	.bd-woo-collection--auto {
		--bd-cols: 1 !important;
	}
}

/*
 * Phones: one product card per row/slide everywhere (grid, shop AND carousel),
 * regardless of the columns chosen in the widget. The !important beats both the
 * Elementor per-device column value and the shortcode --auto rules; the doubled
 * class keeps specificity at/above the --auto selectors so this always wins.
 */
@media (max-width: 600px) {
	.bd-woo-collection,
	.bd-woo-collection.bd-woo-collection--auto {
		--bd-cols: 1 !important;
	}

	/*
	 * Carousel exception: keep ONE main card but let the next one "peek" at the
	 * right edge so it's obvious the carousel can be swiped. Grid/shop stay full
	 * width (1 column) from the rule above; only carousel slides are narrowed.
	 */
	.bd-woo-collection--carousel .bd-woo-slide {
		flex-basis: 87%;
		max-width: 87%;
	}
}

@media (max-width: 1024px) {
	.bd-woo-shop {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 28px;
	}
	.bd-woo-collection__header {
		margin-bottom: 20px;
	}
}

@media (max-width: 900px) {
	.bd-woo-shop {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Modern "Filters" trigger in the toolbar. */
	.bd-woo-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		order: 1;
		padding: 11px 18px;
		font-size: 14px;
		font-weight: 600;
		color: #0f1117;
		background: #ffffff;
		border: 1.5px solid rgba(15, 17, 23, 0.16);
		border-radius: 999px;
		cursor: pointer;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.bd-woo-filter-toggle:hover {
		border-color: var(--bd-accent);
	}

	.bd-woo-filter-toggle__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		font-size: 11px;
		font-weight: 700;
		color: #ffffff;
		background: var(--bd-accent);
		border-radius: 999px;
		line-height: 1;
	}

	/* Toolbar: Filters left, Sort right, count on its own line. */
	.bd-woo-shop__toolbar {
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		margin-bottom: 18px;
	}
	.bd-woo-sort-wrap {
		order: 2;
		margin-left: auto;
	}
	.bd-woo-count {
		order: 3;
		flex: 1 0 100%;
		font-size: 14px;
	}

	/* Sidebar becomes a slide-in drawer. */
	.bd-woo-shop__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000000;
		display: flex;
		flex-direction: column;
		width: min(360px, 86vw);
		height: 100%;
		margin: 0;
		padding: 0;
		gap: 0;
		background: #ffffff;
		border: 0;
		box-shadow: 24px 0 60px rgba(8, 10, 16, 0.25);
		transform: translateX(-100%);
		transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
		overflow: hidden;
	}

	.bd-woo-shop.is-filters-open .bd-woo-shop__sidebar {
		transform: translateX(0);
	}

	.bd-woo-shop__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 999999;
		background: rgba(8, 10, 16, 0.5);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0.35s ease;
	}

	.bd-woo-shop.is-filters-open .bd-woo-shop__overlay {
		opacity: 1;
		visibility: visible;
	}

	.bd-woo-sidebar-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		padding: 18px 20px;
		border-bottom: 1px solid rgba(15, 17, 23, 0.08);
	}

	.bd-woo-sidebar-title {
		font-size: 17px;
		font-weight: 800;
		color: #0f1117;
	}

	.bd-woo-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		padding: 0;
		color: #0f1117;
		background: rgba(15, 17, 23, 0.05);
		border: none;
		border-radius: 999px;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.bd-woo-sidebar-close:hover {
		background: var(--bd-accent);
		color: #ffffff;
	}

	.bd-woo-sidebar-scroll {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 22px 20px;
	}

	.bd-woo-sidebar-foot {
		display: flex;
		flex: 0 0 auto;
		gap: 12px;
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(15, 17, 23, 0.08);
	}

	.bd-woo-clear {
		flex: 1 1 0;
		align-self: stretch;
		margin: 0;
		text-align: center;
		justify-content: center;
	}

	.bd-woo-apply {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 1 1 0;
		padding: 12px 18px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: #ffffff;
		background: #0f1117;
		border: none;
		border-radius: 999px;
		cursor: pointer;
		transition: background-color 0.25s ease;
	}

	.bd-woo-apply:hover {
		background: var(--bd-accent);
	}
}

@media (max-width: 782px) {
	.bd-woo-collection__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.bd-woo-carousel__nav {
		align-self: flex-end;
		margin-top: -4px;
	}
}

@media (max-width: 600px) {
	.bd-woo-collection {
		--bd-gap: 16px;
	}
	.bd-woo-shop__toolbar {
		row-gap: 10px;
	}
	.bd-woo-count {
		font-size: 13.5px;
	}
	.bd-woo-carousel__arrow {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}
	.bd-woo-loadmore {
		width: 100%;
	}
}