/**
 * Category nav — preview layout for .roots-nav and wc-category-grid.
 */

/* Sticky ancestors must not clip (block themes often use overflow: hidden) */
.wp-site-blocks:has(.roots-bar-main),
main:has(.roots-bar-main),
.roots-bar-main,
.roots-bar-main.wp-block-group {
	overflow: visible !important;
}

/* —— Nav shell: sticky on all breakpoints (including desktop) —— */
.roots-bar-main > .roots-nav,
.roots-bar-main > .wp-block-wc-category-grid-category-grid,
.roots-bar-main > .wcg-category-grid {
	position: sticky;
	top: 0;
	z-index: 30;
	width: 100%;
	box-sizing: border-box;
	margin: 0 calc(-1 * var(--roots-space-16, 16px)) var(--roots-space-16, 16px);
	padding: var(--roots-space-16, 16px) var(--roots-space-16, 16px);
	background: rgba(232, 231, 223, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.roots-bar-main .wcg-category-grid__inner {
	width: 100%;
	max-width: var(--roots-content-max, 1200px);
	margin-inline: auto;
	padding: 0;
	border: none;
	box-sizing: border-box;
}

/* Mobile: 3×2 chip grid */
.roots-bar-main .roots-nav__chips,
.roots-bar-main .wcg-category-grid__list {
	display: grid;
	grid-template-columns: repeat(3, var(--roots-chip-width, 105px));
	justify-content: center;
	align-items: center;
	gap: var(--roots-space-8, 8px);
	list-style: none;
	margin: 0;
	padding: var(--roots-space-4, 4px) 0;
	width: 100%;
	min-height: calc(var(--roots-chip-height, 30px) + var(--roots-space-8, 8px));
}

.roots-bar-main .wcg-category-grid__item {
	margin: 0;
	padding: 0;
}

.roots-bar-main .roots-chip,
.roots-bar-main .wcg-category-grid__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--roots-chip-width, 105px);
	height: var(--roots-chip-height, 30px);
	margin: 0;
	padding: 0 var(--roots-space-8, 8px);
	border: none;
	border-radius: var(--roots-radius-md, 7px);
	font: var(--roots-font-chip, 800 16px/1 "Noto Sans Hebrew", sans-serif);
	color: var(--roots-text-primary, #110202);
	text-decoration: none;
	box-sizing: border-box;
	box-shadow: none;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.roots-bar-main .roots-chip:hover,
.roots-bar-main .wcg-category-grid__button:hover,
.roots-bar-main .wcg-category-grid__button:focus-visible {
	transform: translateY(-1px);
	opacity: 1;
}

.roots-bar-main .wcg-category-grid__button.is-active {
	box-shadow: none;
}

/* Built-in preview nav wins — hide duplicate Gutenberg grid */
.roots-bar-main:has(#roots-menu .roots-nav) > .wp-block-wc-category-grid-category-grid,
.roots-bar-main:has(#roots-menu .roots-nav) > .wcg-category-grid {
	display: none !important;
}

/* Scroll targets sit below sticky nav */
.roots-bar-main:has(.wcg-category-grid, .roots-nav) .roots-section__bar,
.roots-bar-main:has(.wcg-category-grid, .roots-nav) .roots-footer {
	scroll-margin-top: var(--roots-scroll-offset, 68px);
}

/* Desktop: horizontal pills + preview spacing (warm bar, roomier padding) */
@media (min-width: 1024px) {
	.roots-bar-main > .roots-nav,
	.roots-bar-main > .wp-block-wc-category-grid-category-grid,
	.roots-bar-main > .wcg-category-grid {
		position: sticky;
		top: 0;
		margin: 0 0 var(--roots-space-24, 24px);
		padding: var(--roots-space-24, 24px) var(--roots-space-32, 32px);
		background: rgba(242, 238, 227, 0.96);
	}

	.roots-bar-main .roots-nav__chips,
	.roots-bar-main .wcg-category-grid__list {
		display: flex !important;
		flex-wrap: wrap;
		grid-template-columns: unset !important;
		justify-content: center;
		align-items: center;
		gap: var(--roots-space-12, 12px);
		min-height: 52px;
		padding: var(--roots-space-8, 8px) 0;
	}

	.roots-bar-main .roots-chip,
	.roots-bar-main .wcg-category-grid__button {
		width: auto !important;
		height: auto !important;
		min-height: 36px;
		padding: 8px 20px !important;
		border-radius: var(--roots-radius-pill, 999px) !important;
	}

	.roots-bar-main:has(.wcg-category-grid, .roots-nav) .roots-section__bar,
	.roots-bar-main:has(.wcg-category-grid, .roots-nav) .roots-footer {
		scroll-margin-top: 96px;
	}

	/* Match preview .roots-menu__inner horizontal padding when grid sits above menu */
	.roots-bar-main > .wcg-category-grid + #roots-menu .roots-menu__inner,
	.roots-bar-main > .wcg-category-grid + .roots-menu .roots-menu__inner {
		padding-inline: var(--roots-space-32, 32px);
	}
}