/* Mamavation Buying Guide — Structural CSS only.
   Branding (colors, fonts, link styles, hover) lives in the theme. */

/* ============================================================
   Same-document View Transitions.
   The JS uses document.startViewTransition() when swapping content.
   Naming the products region isolates the animation to that area so
   filter nav and other chrome stay still during the crossfade.
   ============================================================ */

.mvn-bg-products-region {
	view-transition-name: mvn-bg-products;
}

::view-transition-old(mvn-bg-products),
::view-transition-new(mvn-bg-products) {
	animation-duration: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
	.mvn-bg-products-region {
		view-transition-name: none;
	}
}

/* ============================================================
   Base layout
   ============================================================ */

.mvn-buying-guide {
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Space between the page editor's native content and the buying guide below it. */
.mvn-bg-page-content {
	margin-bottom: 2rem;
}

/* Filter group composition — vertical stack between the category and rating navs. */
.mvn-bg-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mvn-buying-guide ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ----- Filter labels ----- */

/* Eyebrow treatment above each filter nav group. Matches the brand eyebrow on cards. */
.mvn-bg-filter-label {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #666;
}

/* ----- Category nav ----- */

.mvn-bg-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mvn-bg-category {
	flex: 0 0 auto;
}

/* Strip default browser styling on <details>/<summary> */
.mvn-bg-category details {
	position: relative;
}

.mvn-bg-category summary {
	list-style: none;
	cursor: pointer;
}

.mvn-bg-category summary::-webkit-details-marker {
	display: none;
}

/* Structural pill shape for filter anchors + summaries.
   Colors, background, hover treatment come from the theme. */
.mvn-buying-guide .mvn-bg-category__link,
.mvn-buying-guide .mvn-bg-category__summary,
.mvn-buying-guide .mvn-bg-rating__link {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	font-size: 0.75em;
	text-decoration: none;
	border-radius: 4px;
}

/* Default filter state — gray pill. Overrides the theme's default pink
   .button styling, scoped to the buying guide only. */
.mvn-buying-guide .button {
	background-color: #e7e7e7;
	color: #000;
}

/* Active filter — reverts to the theme's pink treatment.
   aria-current="true" is the source of truth. */
.mvn-buying-guide .button[aria-current="true"] {
	background-color: #ec008c;
	color: #fff;
}

.mvn-buying-guide .mvn-bg-subcategory__link[aria-current="true"] {
	font-weight: 700;
}

/* ----- Rating nav ----- */


/* ----- Results bar (summary + pagination) ----- */

.mvn-bg-results-bar {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mvn-buying-guide .mvn-bg-result-summary {
	margin: 0;
	font-size: 0.875rem;
	color: #666;
}

.mvn-bg-ratings {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ----- Subcategories (inside <details>) ----- */

.mvn-bg-subcategories {
	display: flex;
	flex-direction: column;
	padding: 1rem 1.25rem;
	background: #fff;
}

.mvn-bg-subcategory__link {
	display: block;
	padding: 0.5rem 0;
	text-decoration: underline;
}

.mvn-bg-subcategory__link.is-active {
	font-weight: 700;
}

/* ----- Product output (grouped) ----- */

.mvn-bg-products-region {
	/* transition name declared above.
	   Groups stack via gap so .mvn-bg-group stays layout-agnostic. */
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.mvn-bg-group__heading {
	margin: 0 0 1rem;
}

.mvn-bg-group__products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.mvn-bg-products__empty {
	text-align: center;
}

/* ----- Pagination ----- */

/* Border sits above the buttons; parent flex gap controls the space above the border. */
.mvn-bg-pagination {
	padding: 0.75rem 0 0;
	border-top: 1px solid #e0e0e0;
}

.mvn-bg-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.mvn-bg-pagination__link {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	background: #e7e7e7;
	color: #000;
}

.mvn-bg-pagination__link--current {
	background: #ec008c;
	color: #fff;
}

.mvn-bg-pagination__ellipsis {
	display: inline-block;
	padding: 0.375rem 0.25rem;
	color: #666;
}

/* ----- Product card ----- */

.mvn-bg-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #f3f3f3;
	overflow: hidden;
}

.mvn-bg-product__image-wrap {
	background: #fff;
	padding: 1rem;
	display: block;
	position: relative;
}

.mvn-bg-product__image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.mvn-bg-product__image--placeholder {
	color: #bbb;
	width: 100%;
	height: auto;
}

.mvn-bg-product__header {
	padding: 1rem 1rem 0.5rem;
}

.mvn-bg-product__content {
	flex: 1;
	padding: 0.5rem 1rem 1rem;
}

.mvn-bg-product__brand {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #666;
}

.mvn-bg-product__title {
	margin: 0;
	font-size: 1.1rem;
}

/* Footer — only rendered when a discount banner exists. Sticks to card bottom. */
.mvn-bg-product__footer {
	margin-top: auto;
}

.mvn-bg-product__retailers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mvn-bg-product__retailer {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	background: #fff;
	color: #000;
	border: 1px solid #d0d0d0;
}

.mvn-bg-product__retailer:hover,
.mvn-bg-product__retailer:focus-visible {
	background: #ec008c;
	color: #fff;
	border-color: #ec008c;
}

/* Discount banner — a full-width <button> inside the footer.
   Doubled class name raises specificity above common theme selectors.
   !important is a deliberate brand-lock, scoped to this banner only. */
.mvn-buying-guide button.mvn-bg-product__discount.mvn-bg-product__discount,
.mvn-buying-guide button.mvn-bg-product__discount.mvn-bg-product__discount:hover,
.mvn-buying-guide button.mvn-bg-product__discount.mvn-bg-product__discount:focus,
.mvn-buying-guide button.mvn-bg-product__discount.mvn-bg-product__discount:focus-visible,
.mvn-buying-guide button.mvn-bg-product__discount.mvn-bg-product__discount:active {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	position: relative;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.0625rem;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.625rem 0.75rem !important;
	font: inherit;
	line-height: 1.15;
	text-align: center;
	background: #ec008c !important;
	background-image: none !important;
	color: #fff !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	transition: none !important;
	cursor: pointer;
	overflow: hidden;
}

/* Kill any theme hover/fill pseudo-element overlays on the banner. */
.mvn-buying-guide button.mvn-bg-product__discount::before,
.mvn-buying-guide button.mvn-bg-product__discount::after,
.mvn-buying-guide button.mvn-bg-product__discount:hover::before,
.mvn-buying-guide button.mvn-bg-product__discount:hover::after,
.mvn-buying-guide button.mvn-bg-product__discount:focus::before,
.mvn-buying-guide button.mvn-bg-product__discount:focus::after {
	content: none !important;
	display: none !important;
	background: none !important;
	opacity: 0 !important;
}

/* Children inherit white, overriding any theme rules on strong/span. */
.mvn-buying-guide .mvn-bg-product__discount-prefix,
.mvn-buying-guide .mvn-bg-product__discount-code,
.mvn-buying-guide .mvn-bg-product__discount-text,
.mvn-buying-guide .mvn-bg-product__discount-confirm {
	color: #fff !important;
}

/* Keyboard focus indicator only — no hover/active paint shift. */
.mvn-buying-guide button.mvn-bg-product__discount:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* "Copied!" overlay — sits on top of the code/text while the class is applied. */
.mvn-bg-product__discount-confirm {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.mvn-bg-product__discount.is-copied .mvn-bg-product__discount-confirm {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mvn-bg-product__discount-confirm {
		transition: none;
	}
}

.mvn-bg-product__discount-action {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
}

.mvn-bg-product__discount-prefix {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.mvn-bg-product__discount-code {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mvn-bg-product__discount-text {
	font-size: 0.8125rem;
}

/* ============================================================
   Mobile (< 768px) — vertical stack, accordion with subcategories
   Hide the desktop flat link, show the details accordion.
   ============================================================ */

@media (max-width: 767.98px) {
	.mvn-bg-categories {
		flex-direction: column;
		gap: 0.25rem;
	}

	.mvn-bg-category,
	.mvn-bg-category__mobile {
		width: 100%;
	}

	/* Hide the flat link only on categories that have an accordion —
	   categories without children still need the flat link as their only UI.
	   Selector specificity must beat `.mvn-buying-guide .mvn-bg-category__link`. */
	.mvn-buying-guide .mvn-bg-category--has-children .mvn-bg-category__link--desktop {
		display: none;
	}

	.mvn-bg-category__summary {
		text-align: left;
		padding: 0.5rem 1rem;
	}

	/* Disclosure arrow */
	.mvn-bg-category--has-children summary::after {
		content: "";
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		margin-left: 0.5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
		vertical-align: middle;
	}

	.mvn-bg-category--has-children details[open] summary::after {
		transform: rotate(-135deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.mvn-bg-category--has-children summary::after {
			transition: none;
		}
	}
}

/* ============================================================
   Desktop (>= 768px) — flat horizontal links only, no accordion
   Hide the mobile details/accordion.
   ============================================================ */

@media (min-width: 768px) {
	.mvn-bg-category__mobile {
		display: none;
	}
}

/* ============================================================
   Filters toggle (mobile-only collapse)
   Rendered <details open> server-side. JS collapses on mobile as
   a progressive enhancement; desktop hides the summary entirely
   so filters are always visible.
   ============================================================ */

.mvn-bg-filters-toggle__summary {
	list-style: none;
	cursor: pointer;
	display: inline-block;
	padding: 0.5rem 1rem;
	background: #e7e7e7;
	color: #000;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 700;
}

.mvn-bg-filters-toggle__summary::-webkit-details-marker {
	display: none;
}

.mvn-bg-filters-toggle__summary::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	vertical-align: middle;
}

.mvn-bg-filters-toggle[open] .mvn-bg-filters-toggle__summary::after {
	transform: rotate(-135deg);
}

.mvn-bg-filters-toggle[open] > .mvn-bg-filters {
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.mvn-bg-filters-toggle__summary {
		display: none;
	}

	.mvn-bg-filters-toggle[open] > .mvn-bg-filters {
		margin-top: 0;
	}
}

/* ============================================================
   Smooth accordion animation — progressive enhancement.
   Applies to any <details> inside the buying guide. Browsers
   without ::details-content / interpolate-size support fall back
   to instant open/close.
   ============================================================ */

.mvn-buying-guide details {
	interpolate-size: allow-keywords;
}

.mvn-buying-guide details::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.25s ease, content-visibility 0.25s;
	transition-behavior: allow-discrete;
}

.mvn-buying-guide details[open]::details-content {
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
	.mvn-buying-guide details::details-content,
	.mvn-bg-filters-toggle__summary::after {
		transition: none;
	}
}