/* =========================================================================
   ProductNova — Catalog browser panel
   Three columns on desktop, one accordion on mobile, from the same markup.
   Panes are nested inside their parent <li> so the mobile version needs no
   separate menu; on desktop they are lifted out into columns 2 and 3 with
   absolute positioning.
   ========================================================================= */

.pn-catalog {
	--pn-cat-col: 33.3333%;
	--pn-cat-row-height: 48px;
}

.pn-cat__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pn-catalog__title {
	margin: 0;
	padding: 18px 24px 14px;
	font-family: var(--font-heading);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--color-primary-light);
}

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

.pn-cat__item {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.pn-cat__link {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--pn-cat-row-height);
	padding: 6px 8px 6px 24px;
	color: var(--color-dark);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.pn-cat__label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pn-cat__media {
	flex: 0 0 40px;
	width: 40px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--color-primary);
}
.pn-cat__media:empty { display: none; }
.pn-cat__media img { width: 100%; height: 100%; object-fit: contain; }
.pn-cat__media .pn-icon { width: 24px; height: 24px; }

.pn-cat__expand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: var(--pn-cat-row-height);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-muted);
	cursor: pointer;
}
.pn-cat__chevron { width: 9px; height: 15px; }

.pn-cat__link:hover,
.pn-cat__link:focus-visible {
	background: var(--color-background);
	color: var(--color-primary);
}

.pn-cat__item.is-open > .pn-cat__link,
.pn-cat__item.is-open > .pn-cat__expand {
	background: var(--color-background);
	color: var(--color-primary);
	font-weight: 600;
}

.pn-cat__item--leaf .pn-cat__link { padding-left: 24px; }
.pn-cat__item--leaf .pn-cat__link:hover { text-decoration: underline; }

.pn-cat__link--more {
	font-weight: 600;
	color: var(--color-secondary-dark);
}

.pn-cat__link:focus-visible,
.pn-cat__expand:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
}

/* ---------- desktop: three columns ---------- */

@media (min-width: 1025px) {

	.primary-nav > ul > li.has-catalog { position: static; }

	/* Caret on the trigger, since the item has no real sub-menu of its own. */
	.primary-nav > ul > li.has-catalog > a::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-left: 2px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform var(--transition-fast);
	}
	.primary-nav > ul > li.has-catalog:hover > a::after,
	.primary-nav > ul > li.has-catalog:focus-within > a::after {
		transform: rotate(225deg) translateY(-2px);
	}

	.primary-nav .pn-catalog {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		border-top: 1px solid var(--color-border);
		box-shadow: var(--shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	}

	.primary-nav > ul > li.has-catalog:hover > .pn-catalog,
	.primary-nav > ul > li.has-catalog:focus-within > .pn-catalog,
	.primary-nav > ul > li.has-catalog.is-open > .pn-catalog {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.pn-catalog__grid {
		position: relative;
		min-height: 440px;
		padding: 0;
	}

	.pn-catalog__col--1 {
		width: var(--pn-cat-col);
		max-height: 70vh;
		overflow-y: auto;
		padding-bottom: 20px;
	}

	/* Column 2 sits beside column 1; column 3 is nested inside column 2, so its
	   offset is relative to that pane rather than the grid.

	   Scrolling is deliberately only on column 1 and column 3. An absolutely
	   positioned element is clipped by a scrolling ancestor only when that
	   ancestor also contains its containing block — column 1 does not contain
	   the grid, so column 2 escapes it, but column 2 IS column 3's containing
	   block, so putting overflow there would cut column 3 off entirely. */
	.pn-cat__pane {
		position: absolute;
		top: 0;
		bottom: 0;
		background: #fff;
		border-left: 1px solid var(--color-border);
		padding-bottom: 20px;
	}

	.pn-cat__pane--2 {
		left: var(--pn-cat-col);
		width: var(--pn-cat-col);
		overflow: visible;
	}

	.pn-cat__pane--3 {
		left: 100%;
		width: 100%;
		max-height: 70vh;
		overflow-y: auto;
	}

	/* The pane is a grid child, so it must not be laid out inline. */
	.pn-catalog__col--1 > .pn-cat__list > .pn-cat__item { display: flex; }
}

/* ---------- mobile & tablet: accordion ---------- */

@media (max-width: 1024px) {

	.pn-catalog { border-top: 1px solid var(--color-border); }
	.pn-catalog__grid { padding: 0; }

	.pn-cat__pane {
		flex: 1 0 100%;
		border-left: 2px solid var(--color-border);
		margin: 0 0 6px 24px;
	}

	.pn-cat__pane .pn-catalog__title { padding: 12px 16px 8px; }
	.pn-cat__pane .pn-cat__link { padding-left: 16px; }

	.pn-cat__expand .pn-cat__chevron {
		transform: rotate(90deg);
		transition: transform var(--transition-fast);
	}
	.pn-cat__item.is-open > .pn-cat__expand .pn-cat__chevron {
		transform: rotate(-90deg);
	}

	/* The header dropdown is hidden below the mobile breakpoint; the panel
	   lives in the off-canvas menu instead. */
	.primary-nav .pn-catalog { display: none; }
	.mobile-nav .pn-catalog { display: block; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.pn-catalog,
	.pn-cat__link,
	.pn-cat__chevron,
	.primary-nav > ul > li.has-catalog > a::after {
		transition: none;
	}
}

/* =========================================================================
   Catalog drill-down: sub-category grid and the purchase block
   ========================================================================= */

.subcategory-section {
	margin-bottom: var(--gap-lg);
}

.subcategory-section .section-header {
	margin-bottom: var(--gap-md);
}

.subcategory-section .section-header h2 {
	margin: 0 0 4px;
	font-size: 1.35rem;
}

/* ---------- purchase block ---------- */

.product-purchase {
	margin: var(--gap-md) 0;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.product-purchase__stock {
	margin: 0 0 12px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--color-success);
}

.product-purchase__stock--out {
	color: var(--color-danger);
}

/* WooCommerce's add-to-cart markup, brought in line with the theme's buttons
   rather than restyled from scratch. */
.product-purchase form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.product-purchase .quantity input[type="number"] {
	width: 84px;
	padding: 12px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font: inherit;
}

.product-purchase button[type="submit"] {
	padding: 13px 26px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-secondary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.product-purchase button[type="submit"]:hover {
	background: var(--color-secondary-dark);
}

.product-purchase button[type="submit"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Variable products stack their dropdowns above the button. */
.product-purchase table.variations {
	width: 100%;
	margin: 0 0 12px;
	border-collapse: collapse;
}

.product-purchase table.variations td {
	padding: 4px 0;
}

.product-purchase table.variations select {
	width: 100%;
	padding: 11px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font: inherit;
}

.product-purchase__alt {
	margin: 14px 0 0;
	font-size: .88rem;
	color: var(--color-muted);
}

.product-purchase__alt .btn-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--color-primary);
	text-decoration: underline;
	cursor: pointer;
}

/* Editor-only hint where a product section has no content yet. */
.product-features__empty {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-muted);
	font-size: .9rem;
}

/* =========================================================================
   [product_filter] — filterable product grid
   ========================================================================= */

.pn-filter__heading {
	margin: 0 0 var(--gap-md);
}

.pn-filter__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--gap-lg);
	align-items: start;
}

.pn-filter__sidebar {
	position: sticky;
	top: 90px;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.pn-filter__sidebar-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}

.pn-filter__sidebar-head h3 {
	margin: 0;
	font-size: 1rem;
}

.pn-filter__reset {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .82rem;
	color: var(--color-primary);
	text-decoration: underline;
	cursor: pointer;
}

.pn-filter__field {
	display: block;
	margin-bottom: 14px;
}

.pn-filter__field > span {
	display: block;
	margin-bottom: 5px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--color-muted);
}

.pn-filter__field select,
.pn-filter__field input[type="search"] {
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	font: inherit;
	font-size: .92rem;
}

.pn-filter__field select:focus-visible,
.pn-filter__field input:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -1px;
}

.pn-filter__count {
	margin: 0 0 var(--gap-sm);
	font-size: .88rem;
	color: var(--color-muted);
}

/* Hidden cards must not leave gaps in the grid. */
.pn-filter__item[hidden] {
	display: none;
}

.pn-filter__none,
.pn-filter__empty {
	padding: 28px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-muted);
	text-align: center;
}

@media (max-width: 900px) {
	.pn-filter__layout {
		grid-template-columns: 1fr;
	}

	.pn-filter__sidebar {
		position: static;
	}
}

/* Secondary group heading at the foot of column one. */
.pn-catalog__title--group {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}