/*
 * Bookstore Mega Menu.
 *
 * Every visual value is a CSS variable. The public ones (--mega-*) are set
 * from Appearance > Customize > Mega Menu; when unset they fall back to the
 * theme's own tokens (--pbd-*), then to neutral defaults, so the menu
 * inherits the site's typography and colours out of the box.
 *
 * Layout: >= 1024px tabbed panel (tabs left, columns + optional promo right).
 * Below that, or with .bsmm--inline (mobile drawer), tabs become an accordion.
 */

.bsmm {
	--_bg: var(--mega-bg, var(--pbd-surface, #fff));
	--_tab-bg: var(--mega-tab-bg, var(--pbd-tint, #f6f4f0));
	--_tab-color: var(--mega-tab-color, var(--pbd-ink, #1f1f1f));
	--_tab-active-bg: var(--mega-tab-active-bg, var(--pbd-surface, #fff));
	--_tab-active-color: var(--mega-tab-active-color, var(--pbd-brand, #7c1d2b));
	--_heading: var(--mega-heading-color, var(--pbd-brand, #7c1d2b));
	--_link: var(--mega-link-color, var(--pbd-ink-soft, #3d3d3d));
	--_hover: var(--mega-link-hover, var(--pbd-brand, #7c1d2b));
	--_line: var(--pbd-line, #e5e0d8);
	--_radius: var(--mega-radius, var(--pbd-radius-lg, 14px));
	--_width: var(--mega-width, 1100px);
	--_pad: var(--mega-padding, 24px);
	--_gap: var(--mega-gap, 32px);
	--_tab-size: var(--mega-tab-size, 0.9375rem);
	--_heading-size: var(--mega-heading-size, 0.8125rem);
	--_link-size: var(--mega-link-size, 0.9375rem);
	--_tab-w: 250px;
	--_promo-w: 240px;

	position: relative;
	font-family: inherit;
}

.bsmm *,
.bsmm *::before,
.bsmm *::after {
	box-sizing: border-box;
}

.bsmm [hidden] {
	display: none !important;
}

.bsmm__icon {
	flex: none;
}

/* ---- Trigger (used when the theme does not supply its own button style) ---- */

.bsmm__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--pbd-radius, 10px);
	background: var(--pbd-brand, #7c1d2b);
	color: var(--pbd-on-brand, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.bsmm__trigger.pbd-catmenu__toggle {
	/* The theme's own toggle styles apply; keep only what it lacks. */
	font-family: inherit;
}

.bsmm__chevron {
	transition: transform 0.18s ease;
}

.bsmm__trigger[aria-expanded="true"] .bsmm__chevron {
	transform: rotate(180deg);
}

/* ---- Panel ---- */

.bsmm__panel {
	background: var(--_bg);
	color: var(--_link);
}

.bsmm__sheet-head {
	display: none;
}

.bsmm__body {
	display: block;
}

.bsmm__item {
	border-bottom: 1px solid var(--_line);
}

.bsmm__item:last-child {
	border-bottom: 0;
}

.bsmm__tab {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 0;
	background: transparent;
	color: var(--_tab-color);
	font: inherit;
	font-size: var(--_tab-size);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.bsmm__tab-label {
	flex: 1;
	min-width: 0;
}

.bsmm__tab-chevron {
	color: inherit;
	opacity: 0.6;
	transition: transform 0.18s ease;
}

.bsmm__tab[aria-expanded="true"] {
	color: var(--_tab-active-color);
}

.bsmm__tab[aria-expanded="true"] .bsmm__tab-chevron {
	transform: rotate(180deg);
}

.bsmm__tab:focus-visible,
.bsmm__link:focus-visible,
.bsmm__cta:focus-visible,
.bsmm__viewall:focus-visible,
.bsmm__promo-btn:focus-visible,
.bsmm__close:focus-visible,
.bsmm__trigger:focus-visible {
	outline: 2px solid var(--pbd-focus, #1a5fd0);
	outline-offset: -2px;
}

.bsmm__pane {
	padding: 4px 14px 18px;
}

/* ---- Columns ---- */

.bsmm__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px var(--_gap);
}

.bsmm__heading {
	margin: 0 0 8px;
	color: var(--_heading);
	font-size: var(--_heading-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

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

.bsmm__list--nested {
	margin: 2px 0 4px 12px;
	padding-left: 10px;
	border-left: 1px solid var(--_line);
}

.bsmm__link {
	display: block;
	padding: 6px 8px;
	margin-inline: -8px;
	border-radius: var(--pbd-radius-sm, 6px);
	color: var(--_link);
	font-size: var(--_link-size);
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bsmm__link:hover {
	background: var(--_tab-bg);
	color: var(--_hover);
}

.bsmm__link.is-current {
	color: var(--_hover);
	font-weight: 700;
}

.bsmm__viewall,
.bsmm__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--_hover);
	font-size: var(--_link-size);
	font-weight: 700;
	text-decoration: none;
}

.bsmm__viewall {
	margin-top: 8px;
}

.bsmm__viewall:hover,
.bsmm__cta:hover {
	text-decoration: underline;
}

.bsmm__cta {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--_line);
	width: 100%;
}

/* ---- Promo ---- */

.bsmm__promo {
	display: flex;
	align-items: flex-end;
	min-height: 200px;
	margin-top: 20px;
	border-radius: calc(var(--_radius) - 4px);
	background: var(--pbd-brand-soft, #f6e7e9) var(--bsmm-promo-img, none) center / cover no-repeat;
	overflow: hidden;
}

.bsmm__promo-body {
	width: 100%;
	padding: 16px;
}

.bsmm__promo.has-image .bsmm__promo-body {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	padding-top: 56px;
	color: #fff;
}

.bsmm__promo-label {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pbd-accent-soft, #fbf1dd);
	color: var(--pbd-accent, #8a5a12);
	font-size: 0.75rem;
	font-weight: 700;
}

.bsmm__promo-title {
	margin: 0 0 4px;
	color: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

.bsmm__promo-text {
	margin: 0 0 12px;
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0.9;
}

.bsmm__promo-btn {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--pbd-radius, 10px);
	background: var(--pbd-brand, #7c1d2b);
	color: var(--pbd-on-brand, #fff);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.bsmm__promo-btn:hover {
	background: var(--pbd-brand-dark, #5f1420);
	color: var(--pbd-on-brand, #fff);
}

/* ---- Dropdown mode below desktop: full-width sheet ---- */

@media (max-width: 1023px) {
	.bsmm:not(.bsmm--inline) .bsmm__panel {
		position: fixed;
		inset: 0;
		z-index: var(--pbd-z-drawer, 1000);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.bsmm:not(.bsmm--inline) .bsmm__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 8px 8px 16px;
		border-bottom: 1px solid var(--_line);
	}

	.bsmm__sheet-title {
		font-weight: 700;
	}

	.bsmm__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.bsmm:not(.bsmm--inline) .bsmm__body {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bsmm__cols {
		grid-template-columns: 1fr;
	}

	.bsmm__link {
		padding-block: 10px; /* comfortable touch target */
	}
}

/* Inline (drawer): a plain accordion, no chrome. */
.bsmm--inline .bsmm__tab {
	padding-inline: 0;
}

.bsmm--inline .bsmm__pane {
	padding-inline: 0;
}

.bsmm--inline .bsmm__cols {
	grid-template-columns: 1fr;
}

.bsmm--inline .bsmm__link {
	padding-block: 10px;
}

/* ---- Desktop tabbed panel ---- */

@media (min-width: 1024px) {
	.bsmm:not(.bsmm--inline) .bsmm__panel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		width: min(var(--_width), calc(100vw - 2 * var(--pbd-gutter, 16px)));
		max-height: calc(100vh - var(--pbd-header-h, 140px) - 24px);
		margin-top: 6px;
		overflow: auto;
		border: 1px solid var(--_line);
		border-radius: var(--_radius);
		box-shadow: var(--pbd-shadow, 0 10px 30px rgba(0, 0, 0, 0.12));
		animation: bsmm-in 0.16s ease-out;
	}

	.bsmm:not(.bsmm--inline) .bsmm__body {
		display: grid;
		grid-template-columns: var(--_tab-w) minmax(0, 1fr);
		/* N tab rows sized to their content + one flexible row the pane spans,
		   so a tall pane never stretches the tab buttons. */
		grid-template-rows: repeat(var(--bsmm-n, 1), min-content) 1fr;
		align-items: start;
		padding-block: 8px;
		background: linear-gradient(to right, var(--_tab-bg) var(--_tab-w), transparent 0);
		min-height: 100%;
	}

	.bsmm:not(.bsmm--inline) .bsmm__item {
		display: contents;
	}

	.bsmm:not(.bsmm--inline) .bsmm__tab {
		grid-column: 1;
		padding: 12px 18px;
		border-radius: 0;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.bsmm:not(.bsmm--inline) .bsmm__tab:hover {
		background: color-mix(in srgb, var(--_tab-active-bg) 55%, transparent);
	}

	.bsmm:not(.bsmm--inline) .bsmm__tab[aria-expanded="true"] {
		background: var(--_tab-active-bg);
		box-shadow: inset 3px 0 0 var(--_tab-active-color);
		color: var(--_tab-active-color);
	}

	.bsmm:not(.bsmm--inline) .bsmm__tab-chevron {
		transform: rotate(-90deg);
	}

	.bsmm:not(.bsmm--inline) .bsmm__tab[aria-expanded="true"] .bsmm__tab-chevron {
		transform: rotate(-90deg);
		opacity: 1;
	}

	.bsmm:not(.bsmm--inline) .bsmm__pane {
		grid-column: 2;
		grid-row: 1 / -1;
		display: flex;
		align-items: flex-start;
		gap: var(--_gap);
		padding: var(--_pad);
		background: var(--_bg);
		align-self: stretch;
	}

	.bsmm:not(.bsmm--inline) .bsmm__main {
		flex: 1;
		min-width: 0;
	}

	.bsmm:not(.bsmm--inline) .bsmm__promo {
		flex: none;
		width: var(--_promo-w);
		align-self: stretch;
		margin-top: 0;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.bsmm {
		--_tab-w: 210px;
		--_promo-w: 200px;
		--_gap: var(--mega-gap, 22px);
	}

	.bsmm__cols {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

@keyframes bsmm-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsmm__panel {
		animation: none !important;
	}

	.bsmm *,
	.bsmm *::before {
		transition: none !important;
	}
}