/**
 * Shop styling: product loop, single product, cart and checkout.
 *
 * Loaded only on WooCommerce pages by inc/assets.php. Everything is scoped to
 * .hbc-shop so it cannot leak into Elementor-built content pages, and the
 * product-loop rules also cover Elementor Pro's product widgets, which reuse
 * WooCommerce's own loop markup.
 */

/* ---------------------------------------------------------------------------
 * Shop header
 * ------------------------------------------------------------------------- */
.hbc-shop .woocommerce-products-header {
	text-align: center;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 2vw, 1.5rem);
}

.hbc-shop .woocommerce-products-header__title {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	color: var(--hbc-color-primary, #d6117a);
	margin-bottom: 0.5rem;
}

.hbc-shop .term-description {
	max-width: 46rem;
	margin-inline: auto;
	color: var(--hbc-color-text, #4a4a55);
}

/* The result count and sort dropdown sit on one tidy line. */
.hbc-shop .woocommerce-result-count,
.hbc-shop .woocommerce-ordering {
	margin-bottom: 1.75rem;
	font-size: 0.9rem;
}

.hbc-shop .woocommerce-ordering select,
.hbc-shop select.orderby {
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-pill);
	padding: 0.6rem 2.4rem 0.6rem 1.1rem;
	background-color: #fff;
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color var(--hbc-transition);
}

.hbc-shop .woocommerce-ordering select:hover { border-color: var(--hbc-color-primary, #d6117a); }

/* ---------------------------------------------------------------------------
 * Product loop — the piece that carries the whole shop's feel.
 * ------------------------------------------------------------------------- */
.hbc ul.products,
.hbc .elementor-products-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbc ul.products::before,
.hbc ul.products::after { content: none; }

.hbc ul.products li.product,
.hbc .elementor-products-grid ul.products li.product {
	display: flex;
	flex-direction: column;
	position: relative;
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 1.1rem;
	background: #fff;
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-lg);
	overflow: hidden;
	text-align: center;
	transition: transform var(--hbc-transition), box-shadow var(--hbc-transition), border-color var(--hbc-transition);
}

.hbc ul.products li.product:hover,
.hbc .elementor-products-grid ul.products li.product:hover {
	transform: translateY(-6px);
	box-shadow: var(--hbc-shadow-lg);
	border-color: transparent;
}

/* Uniform image crop regardless of the source photo's ratio. */
.hbc ul.products li.product img,
.hbc .elementor-products-grid ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1rem;
	border-radius: 0;
	transition: transform 700ms var(--hbc-ease);
}

.hbc ul.products li.product:hover img { transform: scale(1.05); }

.hbc ul.products li.product a.woocommerce-LoopProduct-link { overflow: hidden; display: block; }

.hbc ul.products li.product .woocommerce-loop-product__title,
.hbc .elementor-products-grid ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem !important;
	font-weight: 500;
	line-height: 1.4;
	padding: 0 1rem 0.35rem !important;
	color: var(--hbc-color-text, #4a4a55);
}

.hbc ul.products li.product .price {
	display: block;
	padding-inline: 1rem;
	margin-bottom: 0.9rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--hbc-color-primary, #d6117a);
}

.hbc ul.products li.product .star-rating { margin: 0 auto 0.6rem; font-size: 0.8rem; }

/* Push the button to a common baseline so cards line up. */
.hbc ul.products li.product .button,
.hbc ul.products li.product .added_to_cart {
	margin-top: auto;
	margin-inline: 1rem;
	border-radius: var(--hbc-radius-pill);
	padding: 0.7rem 1.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	background: var(--hbc-color-primary, #d6117a);
	color: #fff;
	transition: background var(--hbc-transition), transform var(--hbc-transition);
}

.hbc ul.products li.product .button:hover,
.hbc ul.products li.product .added_to_cart:hover {
	background: var(--hbc-color-accent, #a80d5e);
	transform: translateY(-1px);
}

/*
 * Two columns on a phone, not one.
 *
 * auto-fill with a 240px floor drops to a single column below ~520px, which
 * turns sixteen bouquets into a very long scroll and makes each card a
 * full-bleed photo with no sense of the range. A 150px floor gives two columns
 * on a 360px screen, so the type and the button come down to match.
 */
@media (max-width: 640px) {
	.hbc ul.products,
	.hbc .elementor-products-grid ul.products {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 0.75rem;
	}

	.hbc ul.products li.product {
		padding-bottom: 0.85rem;
		border-radius: var(--hbc-radius-md);
	}

	.hbc ul.products li.product img { margin-bottom: 0.7rem; }

	.hbc ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.85rem !important;
		padding: 0 0.6rem 0.3rem !important;
	}

	.hbc ul.products li.product .price {
		font-size: 0.95rem;
		padding-inline: 0.6rem;
		margin-bottom: 0.7rem;
	}

	.hbc ul.products li.product .button,
	.hbc ul.products li.product .added_to_cart {
		margin-inline: 0.55rem;
		padding: 0.6rem 0.7rem;
		font-size: 0.78rem;
	}

	/* A lift on hover is meaningless without a cursor, and on a touch screen it
	   fires on tap and makes the card jump under the finger. */
	.hbc ul.products li.product:hover {
		transform: none;
		box-shadow: var(--hbc-shadow-sm);
	}

	.hbc ul.products li.product:hover img { transform: none; }
}

/* Sale badge */
.hbc .onsale,
.hbc .elementor-products-grid .onsale {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.32rem 0.75rem;
	border-radius: var(--hbc-radius-pill);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.5;
	background: var(--hbc-color-primary, #d6117a);
	color: #fff;
	box-shadow: var(--hbc-shadow-sm);
}

.hbc ul.products del,
.hbc-shop del { opacity: 0.5; font-weight: 400; margin-inline-end: 0.3rem; }
.hbc ul.products ins,
.hbc-shop ins { text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------------------
 * Single product
 * ------------------------------------------------------------------------- */
.hbc-shop .single-product div.product {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

.hbc-shop .woocommerce-product-gallery img { border-radius: var(--hbc-radius-lg); }

.hbc-shop .woocommerce-product-gallery__wrapper { border-radius: var(--hbc-radius-lg); overflow: hidden; }

.hbc-shop .flex-control-thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; padding: 0; }
.hbc-shop .flex-control-thumbs li { width: auto !important; margin: 0; }
.hbc-shop .flex-control-thumbs img {
	width: 78px;
	height: 78px;
	object-fit: cover;
	border-radius: var(--hbc-radius-md);
	opacity: 0.65;
	border: 2px solid transparent;
	transition: opacity var(--hbc-transition), border-color var(--hbc-transition);
}
.hbc-shop .flex-control-thumbs img:hover,
.hbc-shop .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--hbc-color-primary, #d6117a);
}

.hbc-shop .product_title {
	font-size: clamp(1.6rem, 3.2vw, 2.35rem);
	color: var(--hbc-color-primary, #d6117a);
	margin-bottom: 0.6rem;
}

.hbc-shop .summary p.price,
.hbc-shop .summary span.price {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--hbc-color-primary, #d6117a);
	margin-bottom: 1rem;
}

.hbc-shop .woocommerce-product-details__short-description {
	color: var(--hbc-color-text, #4a4a55);
	line-height: 1.8;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--hbc-hairline);
	margin-bottom: 1.25rem;
}

.hbc-shop .single_add_to_cart_button {
	border-radius: var(--hbc-radius-pill) !important;
	padding: 0.95rem 2.2rem !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	background: var(--hbc-color-primary, #d6117a) !important;
	color: #fff !important;
	transition: background var(--hbc-transition), transform var(--hbc-transition);
}

.hbc-shop .single_add_to_cart_button:hover {
	background: var(--hbc-color-accent, #a80d5e) !important;
	transform: translateY(-1px);
}

.hbc-shop .quantity .qty {
	min-width: 4.75rem;
	height: 100%;
	padding: 0.85rem 0.5rem;
	text-align: center;
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-pill);
}

.hbc-shop .variations select {
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-pill);
	padding: 0.7rem 1.1rem;
	background-color: #fff;
	min-width: 12rem;
}

.hbc-shop .variations label { font-weight: 600; }

.hbc-shop .product_meta {
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 75%, #fff);
	padding-top: 1.1rem;
	border-top: 1px solid var(--hbc-hairline);
	margin-top: 1.25rem;
}

/* Tabs */
.hbc-shop .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--hbc-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.hbc-shop .woocommerce-tabs ul.tabs::before { content: none; }

.hbc-shop .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.hbc-shop .woocommerce-tabs ul.tabs li::before,
.hbc-shop .woocommerce-tabs ul.tabs li::after { content: none; }

.hbc-shop .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.85rem 1.25rem;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--hbc-color-text, #4a4a55);
	border-bottom: 2px solid transparent;
	transition: color var(--hbc-transition), border-color var(--hbc-transition);
}

.hbc-shop .woocommerce-tabs ul.tabs li.active a,
.hbc-shop .woocommerce-tabs ul.tabs li a:hover {
	color: var(--hbc-color-primary, #d6117a);
	border-bottom-color: var(--hbc-color-primary, #d6117a);
}

.hbc-shop .woocommerce-Tabs-panel { line-height: 1.85; }

/* Related products heading */
.hbc-shop .related > h2,
.hbc-shop .upsells > h2 {
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	color: var(--hbc-color-primary, #d6117a);
	text-align: center;
	margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------------------
 * Cart, checkout and notices
 * ------------------------------------------------------------------------- */
.hbc-shop .woocommerce-cart-form,
.hbc-shop .woocommerce-checkout-review-order { overflow-x: auto; }

.hbc-shop table.shop_table {
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.hbc-shop table.shop_table th {
	background: var(--hbc-tint);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.hbc-shop .cart_totals h2,
.hbc-shop #order_review_heading { font-size: 1.3rem; color: var(--hbc-color-primary, #d6117a); }

@media (min-width: 992px) {
	.hbc-shop .woocommerce-checkout #order_review { position: sticky; top: 2rem; }
}

.hbc-shop .woocommerce-message,
.hbc-shop .woocommerce-info,
.hbc-shop .woocommerce-error {
	border-radius: var(--hbc-radius-md);
	border-top: 0;
	border-left: 3px solid var(--hbc-color-primary, #d6117a);
	background: var(--hbc-tint);
	box-shadow: var(--hbc-shadow-xs);
}

.hbc-shop .woocommerce-message::before,
.hbc-shop .woocommerce-info::before { color: var(--hbc-color-primary, #d6117a); }

.hbc-shop .woocommerce-message .button,
.hbc-shop .woocommerce-info .button { border-radius: var(--hbc-radius-pill); }

/* Breadcrumb */
.hbc-shop .woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 70%, #fff);
	margin-bottom: 1.25rem;
}

.hbc-shop .woocommerce-breadcrumb a { color: inherit; }
.hbc-shop .woocommerce-breadcrumb a:hover { color: var(--hbc-color-primary, #d6117a); }

/* Pagination */
.hbc-shop .woocommerce-pagination ul.page-numbers {
	border: 0;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 2.5rem;
}

.hbc-shop .woocommerce-pagination ul.page-numbers li { border: 0; }

.hbc-shop .woocommerce-pagination .page-numbers {
	min-width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--hbc-radius-pill);
	border: 1px solid var(--hbc-hairline);
	transition: background var(--hbc-transition), color var(--hbc-transition);
}

.hbc-shop .woocommerce-pagination .page-numbers.current,
.hbc-shop .woocommerce-pagination .page-numbers:hover {
	background: var(--hbc-color-primary, #d6117a);
	border-color: var(--hbc-color-primary, #d6117a);
	color: #fff;
}

/*
 * Cart and Checkout are block pages, not the classic shortcode tables, so the
 * .shop_table rules above never reach them. They only need the page's vertical
 * rhythm — without it the block sits straight under the header.
 */
.hbc .wp-block-woocommerce-cart,
.hbc .wp-block-woocommerce-checkout {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------------------
 * Wide shop layout with filter sidebar (see inc/shop-layout.php).
 * ------------------------------------------------------------------------- */

/* Width comes from the site shell (see components.css); the shop only owns the
   split between filters and grid. */
.nm-shop {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
	padding-block: 0.5rem 4rem;
}

.nm-shop__main { min-width: 0; }

/*
 * The column scrolls with the page and nothing else.
 *
 * It used to be sticky with its own overflow, which put a second scrollbar
 * inside the first: the wheel had to be over the right strip of pixels for the
 * page to move, and the last filters were reachable only by scrolling a box
 * most people never noticed. Letting the column run its natural height and
 * collapsing the groups that are not in use solves the length instead.
 */
.nm-shop__filters {
	min-width: 0;
	font-size: 0.9rem;
}

.nm-shop__panel { min-width: 0; }

/* The live search sits above the filters and, on the shop, stands in for the
   header field that hides below 1400px. */
.nm-shop__search { margin-bottom: 1.25rem; }
.nm-shop__search .nm-search__input { font-size: 16px; }

/* The sheet furniture only exists below the breakpoint. */
.nm-shop__head,
.nm-shop__foot,
.nm-shop__backdrop,
.nm-shop__close,
.nm-shop__toggle { display: none; }

/* --------------------------------------------------------- filter groups */

/*
 * One quiet panel per filter group, sharing a single hairline rule and a common
 * row rhythm so the whole column scans as one control rather than a stack of
 * boxes.
 */
.nm-filter {
	padding: 0 0 1.1rem;
	margin: 0 0 1.1rem;
	border-bottom: 1px solid var(--hbc-hairline);
}

.nm-filter:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.nm-filter__title {
	/* Spacing lives on the heading so a group that never becomes a button — the
	   price slider — keeps the same rhythm as the ones that do. */
	margin: 0 0 0.6rem;
	font-family: inherit;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hbc-color-text, #4a4a55);
}

/* JavaScript turns the title into this button; the plain heading above is what
   shows if it never runs, so the filters are never trapped shut. */
/*
 * Why these selectors carry an ancestor.
 *
 * The Elementor kit styles every bare <button> on the site — `.elementor-kit-N
 * button { padding: 16px 34px }` — at specificity (0,1,1), which outranks a
 * plain class. Every control drawn below is a bare button, so each rule names
 * its owning block as an ancestor to reach (0,2,0) and win honestly, rather
 * than reaching for !important or targeting the kit's generated class.
 *
 * Do not "simplify" these selectors. Dropping the ancestor puts 34px of side
 * padding back on a 32px-wide chevron button, which crushes the icon inside it
 * to zero width — the button turns into an empty pink blob.
 */
.nm-filter .nm-filter__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.35rem 0;
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	color: inherit;
	opacity: 0.75;
	background: none;
	border: 0;
	cursor: pointer;
	transition: opacity var(--hbc-transition), color var(--hbc-transition);
}

.nm-filter .nm-filter__button:hover { opacity: 1; color: var(--hbc-color-primary, #d6117a); }
.nm-filter .nm-filter__button:focus-visible { outline: 2px solid var(--hbc-color-primary, #d6117a); outline-offset: 2px; }

.nm-filter__chevron {
	flex: 0 0 auto;
	transition: transform var(--hbc-transition);
}

.nm-filter.is-collapsed .nm-filter__title { margin-bottom: 0; }
.nm-filter.is-collapsed .nm-filter__chevron { transform: rotate(-90deg); }

/* ------------------------------------------------------------- filter rows */

.nm-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Every row is the same height and baseline, whatever widget produced it.
 *
 * WooCommerce nests <ul class="children"> *inside* the parent <li>, so a plain
 * flex row turns the sublist into a sibling column of the link and squeezes the
 * label to one character per line. Wrapping, plus a full-width basis on the
 * sublist, puts the children back underneath where they belong.
 */
.nm-filter li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.55rem;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

.nm-filter li > ul.children {
	flex: 1 0 100%;
	width: 100%;
}

.nm-filter li > a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.42rem 0.55rem;
	margin-inline: -0.55rem;
	border-radius: var(--hbc-radius-sm);
	color: var(--hbc-color-text, #4a4a55);
	text-decoration: none;
	overflow-wrap: break-word;
	transition: background var(--hbc-transition), color var(--hbc-transition);
}

.nm-filter li > a:hover {
	background: var(--hbc-tint);
	color: var(--hbc-color-primary, #d6117a);
}

/* Layered-nav rows get a checkbox affordance, so they read as filters rather
   than as a list of links. */
.woocommerce-widget-layered-nav .nm-filter li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid color-mix(in srgb, var(--hbc-color-text, #4a4a55) 30%, transparent);
	border-radius: 4px;
	transition: background var(--hbc-transition), border-color var(--hbc-transition);
}

.nm-filter li > a:hover::before {
	border-color: var(--hbc-color-primary, #d6117a);
}

.nm-filter li.chosen > a {
	color: var(--hbc-color-primary, #d6117a);
	font-weight: 600;
}

.nm-filter li.chosen > a::before {
	background: var(--hbc-color-primary, #d6117a);
	border-color: var(--hbc-color-primary, #d6117a);
	box-shadow: inset 0 0 0 2px #fff;
}

/* The count sits hard right on every row, so the column has a clean edge. */
.nm-filter li .count {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 55%, #fff);
	background: none;
	padding: 0;
	border-radius: 0;
}

.nm-filter ul.children {
	padding-left: 1.35rem;
	margin: 0.1rem 0 0.3rem;
}

/* --------------------------------------------------------- category tree */

/*
 * Two targets on one row, and they must not be confusable: the name goes to the
 * category — with everything filed under it — and the chevron only opens the
 * branch. Hence a row that is a flex pair rather than a link with a decoration
 * inside it, and a chevron with a tap target of its own.
 */
.nm-cats .nm-cats__item {
	display: block;
	font-size: inherit;
}

.nm-cats__row {
	display: flex;
	align-items: stretch;
	gap: 0.15rem;
	border-radius: var(--hbc-radius-sm);
	transition: background var(--hbc-transition);
}

.nm-cats__row:hover { background: var(--hbc-tint); }

.nm-cats__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.55rem;
	border-radius: var(--hbc-radius-sm);
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--hbc-color-text, #4a4a55);
	text-decoration: none;
	transition: color var(--hbc-transition);
}

.nm-cats__link:hover { color: var(--hbc-color-primary, #d6117a); }

.nm-cats__name { overflow-wrap: break-word; }

.nm-cats__count {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.72rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 50%, #fff);
}

.nm-cats .nm-cats__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--hbc-radius-sm);
	background: none;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 60%, #fff);
	cursor: pointer;
	transition: background var(--hbc-transition), color var(--hbc-transition);
}

.nm-cats .nm-cats__toggle:hover {
	background: var(--hbc-tint-strong);
	color: var(--hbc-color-primary, #d6117a);
}

.nm-cats .nm-cats__toggle:focus-visible {
	outline: 2px solid var(--hbc-color-primary, #d6117a);
	outline-offset: -2px;
}

.nm-cats .nm-cats__toggle svg {
	/* flex-shrink would let a wide parent padding grind the icon to 0. */
	flex: 0 0 auto;
	transition: transform var(--hbc-transition);
}
.nm-cats__item.is-open > .nm-cats__row .nm-cats__toggle svg { transform: rotate(180deg); }

/* The current category keeps its branch open and says so. */
.nm-cats__item.current-cat > .nm-cats__row {
	background: var(--hbc-tint-strong);
}

.nm-cats__item.current-cat > .nm-cats__row .nm-cats__link {
	color: var(--hbc-color-primary, #d6117a);
	font-weight: 700;
}

/* A hairline guide keeps a long list of children tied to its parent. */
.nm-cats__children {
	margin: 0.1rem 0 0.35rem;
	padding-left: 0.85rem;
	border-left: 1px solid var(--hbc-hairline);
	margin-left: 0.55rem;
}

.nm-cats__children .nm-cats__link { font-size: 0.85rem; padding-block: 0.42rem; }

/* --------------------------------------------------------------- picks */

/*
 * Featured products: a thumbnail is the fastest thing to recognise in a
 * sidebar, so the image carries the row and the name confirms it.
 */
.nm-picks {
	display: grid;
	gap: 0.15rem;
}

.nm-picks .nm-picks__item { display: block; }

.nm-picks__link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.4rem;
	margin-inline: -0.4rem;
	border-radius: var(--hbc-radius-sm);
	color: var(--hbc-color-text, #4a4a55);
	text-decoration: none;
	transition: background var(--hbc-transition);
}

.nm-picks__link:hover { background: var(--hbc-tint); }

.nm-picks__media {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: var(--hbc-radius-sm);
	background: var(--hbc-tint);
}

.nm-picks__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--hbc-transition);
}

.nm-picks__link:hover .nm-picks__media img { transform: scale(1.06); }

.nm-picks__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.nm-picks__name {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	/* Two lines, then ellipsis: a long florist name must not push the price out
	   of the row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nm-picks__link:hover .nm-picks__name { color: var(--hbc-color-primary, #d6117a); }

.nm-picks__price {
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 70%, #fff);
}

.nm-picks__price del { display: none; }
.nm-picks__price ins { text-decoration: none; font-weight: 600; }

/* --------------------------------------------------------- price slider */

.nm-filter .price_slider_wrapper { padding-top: 0.2rem; }

.nm-filter .ui-slider {
	position: relative;
	height: 3px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 14%, transparent);
	margin: 0.55rem 0.5rem 1.15rem 0.5rem;
	border: 0;
}

.nm-filter .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	border-radius: 3px;
	background: var(--hbc-color-primary, #d6117a);
}

.nm-filter .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--hbc-color-primary, #d6117a);
	box-shadow: 0 1px 4px rgba(35, 31, 38, 0.18);
	cursor: grab;
	touch-action: none;
	transition: transform var(--hbc-transition);
}

.nm-filter .ui-slider .ui-slider-handle:hover,
.nm-filter .ui-slider .ui-slider-handle:focus-visible {
	transform: translateY(-50%) scale(1.12);
}

.nm-filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.nm-filter .price_slider_amount .price_label {
	order: 1;
	width: 100%;
	font-size: 0.83rem;
	font-variant-numeric: tabular-nums;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 80%, #fff);
}

.nm-filter .price_slider_amount .price_label span {
	font-weight: 600;
	color: var(--hbc-color-text, #4a4a55);
}

.nm-filter .price_slider_amount .button {
	order: 2;
	width: 100%;
	border-radius: var(--hbc-radius-pill);
	background: var(--hbc-color-primary, #d6117a);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.6rem 1.1rem;
	border: 0;
	cursor: pointer;
	transition: background var(--hbc-transition);
}

.nm-filter .price_slider_amount .button:hover { background: var(--hbc-color-accent, #a80d5e); }

.nm-filter .woocommerce-widget-layered-nav-list__item--chosen a { font-weight: 600; }

/* ---------------------------------------------------------------------------
 * Below 1024px the column becomes a filter sheet.
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.nm-shop {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 0 3rem;
	}

	/*
	 * The button rides the top of the viewport while the customer scrolls the
	 * grid, so filtering never means scrolling back up. z-index stays under the
	 * sheet's own layer.
	 */
	.nm-shop .nm-shop__toggle {
		position: sticky;
		top: 0.5rem;
		z-index: 20;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 1.1rem;
		padding: 0.7rem 1.25rem;
		border: 1px solid var(--hbc-hairline);
		border-radius: var(--hbc-radius-pill);
		background: #fff;
		box-shadow: var(--hbc-shadow-sm);
		font-family: inherit;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--hbc-color-text, #4a4a55);
		cursor: pointer;
	}

	.nm-shop .nm-shop__toggle:hover,
	.nm-shop .nm-shop__toggle[aria-expanded="true"] {
		border-color: var(--hbc-color-primary, #d6117a);
		color: var(--hbc-color-primary, #d6117a);
	}

	.nm-shop__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.3rem;
		height: 1.3rem;
		padding: 0 0.35rem;
		border-radius: var(--hbc-radius-pill);
		background: var(--hbc-color-primary, #d6117a);
		color: #fff;
		font-size: 0.72rem;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.nm-shop__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(35, 31, 38, 0.45);
		animation: nm-fade var(--hbc-duration) var(--hbc-ease);
	}

	.nm-shop__backdrop[hidden] { display: none; }

	/*
	 * A full-height sheet rather than a centred dialog: on a phone the filter
	 * list is the screen, and a sheet keeps the close button and the "Ver
	 * productos" button pinned where a thumb reaches them.
	 */
	.nm-shop__filters {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1001;
		width: min(400px, 92vw);
		background: #fff;
		box-shadow: var(--hbc-shadow-lg);
		transform: translateX(-102%);
		/*
		 * visibility keeps the closed panel out of the tab order, but it must
		 * not be transitioned *into* view: while it interpolates, the panel is
		 * still hidden and a hidden element cannot take focus, so opening the
		 * sheet left the focus ring behind on the toggle. Zero delay on the way
		 * in, full delay on the way out so it stays visible while it slides
		 * away.
		 */
		visibility: hidden;
		transition: transform 280ms var(--hbc-ease), visibility 0s linear 280ms;
	}

	.nm-shop__filters.is-open {
		transform: none;
		visibility: visible;
		transition: transform 280ms var(--hbc-ease), visibility 0s linear 0s;
	}

	/*
	 * The kit puts `transition: all` on buttons and links. When the sheet flips
	 * its own visibility, that `all` animates the *inherited* visibility on
	 * every control inside it, so for the length of the transition each one
	 * still computes as hidden — and a hidden element cannot take focus, which
	 * is what kept the focus ring on the toggle after the sheet had opened.
	 * Naming the properties that may animate takes visibility off that list;
	 * nothing in here needs to fade itself in.
	 */
	.nm-shop .nm-shop__filters * {
		transition-property: color, background-color, border-color, box-shadow, opacity, transform;
	}

	/* Header and footer pinned, only the middle scrolls. */
	.nm-shop__panel {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* Dodges the iOS toolbars, which 100vh does not. */
		height: 100dvh;
	}

	.nm-shop__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex: 0 0 auto;
		padding: 1rem 1.1rem;
		border-bottom: 1px solid var(--hbc-hairline);
	}

	.nm-shop__head-title {
		margin: 0;
		font-size: 1.05rem;
		font-weight: 700;
		color: var(--hbc-color-text, #4a4a55);
	}

	.nm-shop .nm-shop__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		/* Without this the kit's 34px side padding turns the circle into a
		   70px-wide ellipse. */
		padding: 0;
		flex: 0 0 auto;
		border: 1px solid var(--hbc-hairline);
		border-radius: 50%;
		background: #fff;
		color: var(--hbc-color-text, #4a4a55);
		cursor: pointer;
	}

	/* Same reason as the chevron: never let padding grind an icon to nothing. */
	.nm-shop .nm-shop__toggle svg,
	.nm-shop .nm-shop__close svg { flex: 0 0 auto; }

	.nm-shop .nm-shop__close:hover {
		border-color: var(--hbc-color-primary, #d6117a);
		color: var(--hbc-color-primary, #d6117a);
	}

	.nm-shop__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: 1.1rem;
	}

	.nm-shop__foot {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		flex: 0 0 auto;
		padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--hbc-hairline);
		background: #fff;
	}

	.nm-shop .nm-shop__apply {
		flex: 1 1 auto;
		padding: 0.85rem 1.25rem;
		border: 0;
		border-radius: var(--hbc-radius-pill);
		background: var(--hbc-color-primary, #d6117a);
		color: #fff;
		font-family: inherit;
		font-size: 0.95rem;
		font-weight: 700;
		cursor: pointer;
		transition: background var(--hbc-transition);
	}

	.nm-shop .nm-shop__apply:hover { background: var(--hbc-color-accent, #a80d5e); }

	.nm-shop__reset {
		flex: 0 0 auto;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--hbc-color-text, #4a4a55);
		text-decoration: underline;
	}

	/* Fingers, not cursors. */
	.nm-cats__link,
	.nm-filter li > a { padding-block: 0.6rem; }

	.nm-cats .nm-cats__toggle { width: 2.6rem; }

	body.nm-shop-locked { overflow: hidden; }
}

@keyframes nm-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* A wide phone in landscape gets the sheet edge-to-edge rather than a strip. */
@media (max-width: 560px) {
	.nm-shop__filters { width: 100%; }
}