/*
 * Bourbon Merchant product catalogue.
 * Scoped to the WooCommerce shop and product-taxonomy templates.
 * Uses the homepage type tokens (--bm-fs-*) from sections.css. No motion.
 */

/* The hero starts directly under the header (overrides .bm-main page padding). */
.bm-shop-main.bm-main {
	padding-block: 0;
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--charcoal);
}

.bm-shop-main > * {
	margin-block: 0;
}

/* ---------- Page heading ---------- */

.bm-shop-hero {
	padding-block: clamp(24px, 3.5vw, 44px) clamp(28px, 4vw, 48px);
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--ivory);
}

.bm-shop-hero .wc-block-breadcrumbs,
.bm-shop-hero .woocommerce-breadcrumb {
	margin: 0 0 clamp(16px, 2.5vw, 28px);
	color: var(--wp--preset--color--stone);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bm-shop-hero .woocommerce-breadcrumb a {
	color: var(--wp--preset--color--stone);
	text-decoration: none;
}

.bm-shop-hero .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--gold);
}

.bm-shop-hero__content > * {
	margin-block: 0;
}

.bm-shop-title {
	max-width: 760px;
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: var(--bm-fs-h1);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

.bm-shop-title em {
	color: var(--wp--preset--color--gold);
	font-weight: 400;
}

.bm-shop-intro,
.bm-shop-hero .wp-block-term-description {
	max-width: 620px;
	margin: 12px 0 0 !important;
	color: var(--wp--preset--color--stone);
	font-size: var(--bm-fs-text);
	line-height: 1.7;
}

.bm-shop-hero .wp-block-term-description p {
	margin: 0;
}

.bm-shop-hero--taxonomy .bm-shop-title {
	font-size: var(--bm-fs-h1);
}

.bm-shop-hero--taxonomy .wp-block-term-description:empty {
	display: none;
}

/* ---------- Collection strip ---------- */

.bm-shop-collections {
	border-bottom: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--ivory);
}

.bm-shop-collections__track {
	gap: 0 !important;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bm-shop-collections__track::-webkit-scrollbar {
	display: none;
}

.bm-shop-collection-link {
	flex: 0 0 auto;
	margin: 0;
}

.bm-shop-collection-link a {
	display: block;
	padding: 16px 14px 13px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--charcoal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.bm-shop-collection-link:first-child a {
	padding-left: 0;
}

.bm-shop-collection-link a:hover,
.bm-shop-collection-link a:focus-visible,
.bm-shop-collection-link a[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--amber-deep);
}

/* ---------- Layout ---------- */

.bm-shop-catalogue {
	padding-block: clamp(24px, 3.5vw, 44px) clamp(56px, 7vw, 96px);
}

.bm-shop-query,
.bm-shop-layout,
.bm-shop-results,
.bm-shop-products {
	margin-block: 0;
}

.bm-shop-layout {
	align-items: flex-start !important;
	gap: clamp(28px, 3vw, 48px);
}

.bm-shop-sidebar {
	flex: 0 0 232px !important;
	min-width: 0;
}

.bm-shop-results {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* ---------- Filters ---------- */

.bm-shop-filters {
	width: 100%;
	gap: 0;
	font-size: var(--bm-fs-text);
}

/* Keep the whole filter panel (and its price inputs) inside the 232px rail. */
@media (min-width: 783px) {
	.bm-shop-filters,
	.bm-shop-filters .wc-block-product-filters__overlay,
	.bm-shop-filters .wc-block-product-filters__overlay-wrapper,
	.bm-shop-filters .wc-block-product-filters__overlay-dialog,
	.bm-shop-filters .wc-block-product-filters__overlay-content,
	.bm-shop-filter-group {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}

/* Price: slider full width, min and max inputs side by side underneath. */
.bm-shop-filter-group .wc-block-product-filter-price-slider__content {
	grid-template-areas:
		"price-slider price-slider"
		"left-input right-input";
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 10px;
}

.bm-shop-filter-group .wc-block-product-filter-price-slider__range {
	width: 100%;
	min-width: 0;
}

.bm-shop-filter-group .wc-block-product-filter-price-slider__content .text input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

/* Browser default fieldset border drew a box around each list. */
.bm-shop-filters fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.bm-shop-filters .wc-block-product-filters__overlay-content {
	gap: 0;
}

.bm-shop-filters .wp-block-woocommerce-product-filter-active:not([hidden]) {
	padding-bottom: 16px;
}

.bm-shop-filters .wc-block-product-filter-removable-chips {
	gap: 6px;
}

.bm-shop-filters .wc-block-product-filter-removable-chips__item,
.bm-shop-filters .wc-block-product-filter-clear-button .wp-block-button__link,
.bm-shop-filters .wc-block-product-filter-clear-button {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
}

.bm-shop-filter-group {
	margin: 0 !important;
	padding-block: 18px;
	border-top: 1px solid var(--wp--preset--color--stone);
}

.bm-shop-filter-group:first-child,
.bm-shop-filters .wp-block-woocommerce-product-filter-active + .bm-shop-filter-group {
	padding-top: 0;
	border-top: 0;
}

.bm-shop-filter-title {
	margin: 0 0 12px !important;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__item {
	margin: 0;
}

/* Sub-categories are indented under their parent. */
.bm-shop-filter-group .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":1'] {
	padding-left: 18px;
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__item[data-wp-context*='"depth":2'] {
	padding-left: 36px;
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: var(--bm-fs-text);
	line-height: 1.3;
	cursor: pointer;
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__input-wrapper {
	flex: 0 0 auto;
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__input {
	width: 16px;
	height: 16px;
	border-color: var(--wp--preset--color--taupe);
	border-radius: 0;
	accent-color: var(--wp--preset--color--charcoal);
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__count {
	color: var(--wp--preset--color--taupe);
}

.bm-shop-filter-group .wc-block-product-filter-checkbox-list__show-more {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--amber-deep);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.bm-shop-filter-group input,
.bm-shop-filter-group button {
	font-family: var(--wp--preset--font-family--manrope);
}

.bm-shop-filter-group .wc-block-product-filter-price-slider__content {
	--range-color: var(--wp--preset--color--gold);
}

.bm-shop-filter-group .wc-block-product-filter-price-slider__content input[type="text"] {
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
	background: transparent;
	font-size: var(--bm-fs-text);
}

/* Mobile drawer (WooCommerce switches to it at 782px and below).
 * The open button is styled only inside that range: above it WooCommerce
 * hides the button, and a display value here would show it on desktop. */
@media (max-width: 782px) {
	.bm-shop-filters .wc-block-product-filters__open-overlay {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 0 16px;
		border: 1px solid var(--wp--preset--color--charcoal);
		color: var(--wp--preset--color--charcoal);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.bm-shop-filters .wc-block-product-filters__open-overlay span {
		padding: 0;
	}
}

.bm-shop-filters .wc-block-product-filters__overlay,
.bm-shop-filters .wc-block-product-filters__overlay-dialog {
	transition: none !important;
}

.bm-shop-filters .wc-block-product-filters__overlay-dialog {
	--wc-product-filters-overlay-background-color: var(--wp--preset--color--ivory);
	--wc-product-filters-overlay-text-color: var(--wp--preset--color--charcoal);
	width: min(100%, 380px);
}

.bm-shop-filters .wc-block-product-filters__overlay-header {
	padding: 12px 12px 4px;
}

.bm-shop-filters .wc-block-product-filters__close-overlay {
	width: 44px;
	height: 44px;
	justify-content: center;
}

.bm-shop-filters .wc-block-product-filters__overlay-footer {
	padding: 12px 16px 16px;
}

.bm-shop-filters .wc-block-product-filters__apply {
	min-height: 48px;
	border-radius: 0;
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--ivory);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Toolbar ---------- */

.bm-shop-toolbar {
	min-height: 44px;
	margin: 0 0 20px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--stone);
	gap: 12px;
}

.bm-shop-toolbar > * {
	margin: 0 !important;
}

.bm-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--taupe);
	font-size: var(--bm-fs-text);
}

.bm-shop-toolbar .woocommerce-ordering {
	margin: 0;
}

.bm-shop-toolbar .orderby {
	min-height: 40px;
	padding: 6px 32px 6px 12px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--charcoal);
	font: 600 12px/1.2 var(--wp--preset--font-family--manrope);
	letter-spacing: 0.04em;
}

/* ---------- Product grid ---------- */

.bm-shop-products.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 20px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-shop-products > .wc-block-product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

.bm-shop-product-card {
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--ivory);
}

.bm-shop-product-card:hover {
	border-color: var(--wp--preset--color--taupe);
}

/* Every image sits in the same white 4:5 frame, whole bottle visible. */
.bm-shop-product-card .bm-product-card__media,
.bm-shop-product-card .bm-product-card__media a {
	background: #fff;
}

.bm-shop-product-card .bm-product-card__media img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 5 !important;
	padding: 14px;
	object-fit: contain !important;
	box-sizing: border-box;
}

.bm-shop-product-card .bm-product-card__body {
	padding: 14px 14px 0;
	border-top: 1px solid var(--wp--preset--color--stone);
}

.bm-shop-product-card .bm-product-card__brand {
	font-size: 11px;
}

.bm-shop-product-card .bm-product-card__brand:empty {
	display: none;
}

/* Long product names stay on two lines so cards align. */
.bm-shop-product-card .bm-product-card__title {
	margin-top: 6px !important;
	font-size: 17px;
	line-height: 1.25;
}

.bm-shop-product-card .bm-product-card__title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.bm-shop-product-card .bm-product-card__footer.wp-block-group {
	gap: 10px;
	padding: 10px 14px 14px;
}

.bm-shop-product-card .bm-product-card__price .wc-block-components-product-price {
	font-size: 15px;
	font-weight: 700;
}

.bm-shop-product-card .bm-product-card__price del {
	color: var(--wp--preset--color--taupe);
	font-weight: 400;
}

.bm-shop-product-card .bm-product-card__button .wp-block-button__link.wc-block-components-product-button__button {
	min-height: 40px;
	padding: 8px 10px;
	font-size: 11px;
}

/* ---------- Pagination & empty state ---------- */

.bm-shop-pagination {
	gap: 6px;
	margin-top: clamp(32px, 5vw, 56px) !important;
}

.bm-shop-pagination a,
.bm-shop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--stone);
	color: var(--wp--preset--color--charcoal);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.bm-shop-pagination .page-numbers.dots {
	border-color: transparent;
}

.bm-shop-pagination .current,
.bm-shop-pagination a:hover {
	border-color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--ivory);
}

.bm-shop-empty {
	min-height: 240px;
	padding: 40px 20px;
	border: 1px solid var(--wp--preset--color--stone);
	text-align: center;
}

.bm-shop-empty h2 {
	margin: 0;
	font-size: var(--bm-fs-h3);
}

.bm-shop-empty p {
	margin: 8px 0 0;
	color: var(--wp--preset--color--taupe);
	font-size: var(--bm-fs-text);
}

/* No motion: WooCommerce waits for animationend before updating the button text, so shorten instead of removing. */
.bm-shop-main .wc-block-components-product-button__button span,
.bm-shop-main .wc-block-components-skeleton__element {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
}

.bm-shop-main :where(a, button, input, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

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

@media (max-width: 1279px) {
	.bm-shop-products.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1023px) {
	.bm-shop-sidebar {
		flex-basis: 200px !important;
	}

	.bm-shop-products.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

/* Matches WooCommerce's filter drawer breakpoint (782px). */
@media (max-width: 782px) {
	.bm-shop-layout.wp-block-columns {
		flex-direction: column;
		flex-wrap: nowrap !important;
		gap: 0;
	}

	.bm-shop-layout.wp-block-columns > .wp-block-column.bm-shop-sidebar,
	.bm-shop-layout.wp-block-columns > .wp-block-column.bm-shop-results {
		flex: 0 0 auto !important;
		width: 100%;
	}

	/*
	 * Filters button and sort select share one row: the toolbar is pulled up
	 * over the (button-only) sidebar and lets clicks through its empty area.
	 * No z-index here, so the fixed filter drawer is not trapped under the header.
	 */
	.bm-shop-layout.wp-block-columns > .wp-block-column.bm-shop-sidebar {
		width: auto;
		margin-bottom: -44px !important;
		align-self: flex-start;
	}

	.bm-shop-toolbar {
		justify-content: flex-end !important;
		pointer-events: none;
	}

	.bm-shop-toolbar > * {
		pointer-events: auto;
	}

	.bm-shop-toolbar .orderby {
		min-height: 44px;
	}

	.bm-shop-toolbar .woocommerce-result-count {
		display: none;
	}

	.bm-shop-products.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 680px) {
	.bm-shop-products.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}
}

@media (max-width: 599px) {
	.bm-shop-collection-link a {
		padding: 14px 12px 11px;
	}

	.bm-shop-toolbar .orderby {
		max-width: 52vw;
	}

	.bm-shop-product-card .bm-product-card__media img {
		padding: 10px;
	}

	.bm-shop-product-card .bm-product-card__body {
		padding: 10px 10px 0;
	}

	.bm-shop-product-card .bm-product-card__footer.wp-block-group {
		gap: 8px;
		padding: 8px 10px 10px;
	}

	.bm-shop-product-card .bm-product-card__brand {
		font-size: 10px;
	}

	.bm-shop-product-card .bm-product-card__title {
		font-size: 15px;
	}

	.bm-shop-product-card .bm-product-card__price .wc-block-components-product-price {
		font-size: 14px;
	}

	.bm-shop-product-card .bm-product-card__button .wp-block-button__link.wc-block-components-product-button__button {
		min-height: 40px;
		padding-inline: 6px;
		font-size: 10px;
		letter-spacing: 0.06em;
	}

	.bm-shop-pagination .wp-block-query-pagination-previous,
	.bm-shop-pagination .wp-block-query-pagination-next {
		font-size: 0;
	}

	.bm-shop-pagination .wp-block-query-pagination-previous::before {
		content: "←";
		font-size: 16px;
	}

	.bm-shop-pagination .wp-block-query-pagination-next::before {
		content: "→";
		font-size: 16px;
	}
}

@media (max-width: 339px) {
	.bm-shop-products.wc-block-product-template {
		grid-template-columns: 1fr !important;
	}
}
