/**
 * Shop page
 *
 * Page-specific composition for the FluentCart catalog. All color, radius,
 * shadow, type, spacing, and motion values inherit Marketers Delight tokens.
 */

.md-shop-page {
	--shop-grid-line: color-mix(in srgb, var(--color-primary) 10%, transparent);
	--shop-well: color-mix(in srgb, var(--color-primary) 5%, var(--color-content-bg));
	--shop-well-strong: color-mix(in srgb, var(--color-primary) 9%, var(--color-content-bg));
	--shop-card-border: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
	--shop-soft-button: var(--primary-tint-soft);
	--shop-soft-button-hover: var(--primary-tint);
}

[data-theme="dark"] .md-shop-page {
	--shop-grid-line: color-mix(in srgb, var(--color-primary) 13%, transparent);
	--shop-well: color-mix(in srgb, var(--color-primary) 7%, var(--color-content-bg));
	--shop-well-strong: color-mix(in srgb, var(--color-primary) 12%, var(--color-content-bg));
	--shop-card-border: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.md-shop-page .md-shop {
	overflow: clip;
}

.md-shop-hero {
	background-color: var(--color-bg);
	background-image:
		linear-gradient(var(--shop-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--shop-grid-line) 1px, transparent 1px);
	background-size: var(--space-single) var(--space-single);
	border-block-end: 1px solid var(--color-border);
}

.md-shop-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.md-shop-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-third);
	margin-block-end: var(--space-single);
	color: var(--color-text-sec);
}

.md-shop-breadcrumb a {
	color: var(--color-text-sec);
	text-decoration: none;
}

.md-shop-breadcrumb a:hover,
.md-shop-breadcrumb a:focus-visible {
	color: var(--color-primary);
}

.md-shop-eyebrow,
.md-shop-section-label {
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.09em;
}

.md-shop-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-third);
	margin-block-end: var(--space-half);
}

.md-shop-eyebrow__dot {
	width: var(--space-third);
	height: var(--space-third);
	border-radius: var(--radius-full);
	background: var(--color-primary);
	box-shadow: 0 0 0 var(--space-third) var(--primary-tint-soft);
}

.md-shop-hero__title {
	max-width: 12ch;
	margin-block-end: var(--space-half);
}

.md-shop-hero__lead,
.md-shop-hero__copy {
	max-width: 62ch;
}

.md-shop-hero__lead {
	margin-block-end: var(--space-third);
}

.md-shop-hero__lead::first-letter,
.md-shop-archive__lead::first-letter {
	float: none;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-shadow: none;
}

.md-shop-hero__copy {
	margin-block-end: var(--space-single);
}

.md-shop-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-half);
	margin-block-end: var(--space-double);
}

.md-shop-hero__actions .button,
.md-shop-hero__actions .button-outline {
	margin: 0;
}

.md-shop-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: min(100%, 58rem);
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--color-border);
	background: color-mix(in srgb, var(--color-content-bg) 84%, transparent);
}

.md-shop-proof__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-third);
	padding: var(--space-half) var(--space-single);
	margin: 0;
}

.md-shop-proof__item + .md-shop-proof__item {
	border-inline-start: 1px solid var(--color-border);
}

.md-shop-proof dd {
	order: -1;
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--fs-m);
	font-weight: var(--font-weight-bold);
	line-height: var(--lh-tight);
	color: var(--color-headline);
}

.md-shop-proof dt {
	font-size: var(--fs-s);
	line-height: var(--lh-tight);
	color: var(--color-text-sec);
}

.md-shop-collections {
	background: var(--color-content-bg);
}

.md-shop-section-head,
.md-shop-catalog__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
	align-items: end;
	gap: var(--space-double);
}

.md-shop-section-head {
	margin-block-end: var(--space-single);
}

.md-shop-section-head .main-title,
.md-shop-catalog__head .main-title {
	margin-block-end: 0;
}

.md-shop-section-label {
	margin-block-end: var(--space-third);
}

.md-shop-category-grid {
	align-items: stretch;
}

.md-shop-category {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	padding: var(--space-single);
	border: 1px solid var(--shop-card-border);
	border-radius: var(--radius-m);
	background: var(--shop-well);
	color: var(--color-text);
	text-decoration: none;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.md-shop-category:hover,
.md-shop-category:focus-visible {
	transform: translateY(calc(var(--space-third) * -1));
	box-shadow: var(--shadow-md);
	color: var(--color-text);
}

.md-shop-category__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-half);
	margin-block-end: var(--space-single);
}

.md-shop-category__index {
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	color: var(--color-primary);
}

.md-shop-category__title {
	display: block;
	margin-block-end: var(--space-third);
	color: var(--color-headline);
}

.md-shop-category__description {
	display: block;
	margin-block-end: var(--space-single);
}

.md-shop-category__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-third);
	margin-block-start: auto;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
}

.md-shop-catalog {
	border-block-start: 1px solid var(--color-border);
	background: var(--color-bg);
}

.md-shop-catalog__head {
	padding-block-end: var(--space-single);
	border-block-end: 1px solid var(--color-border);
}

.md-shop-catalog > .wp-block-fluent-cart-products {
	padding-block-start: var(--space-single);
	padding-block-end: 0;
}

.md-shop-page .fct-product-action-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-third);
	margin-block-end: var(--space-half);
}

.md-shop-page .fct-shop-view-switcher {
	margin: 0;
}

.md-shop-page .fct-shop-view-switcher button,
.md-shop-page .fct-sorting-toggle,
.md-shop-page .fct-shop-filter-toggle-button {
	min-height: 2.75rem;
	border-color: var(--color-border);
	border-radius: var(--radius-s);
	background: var(--color-content-bg);
	color: var(--color-text);
}

.md-shop-page .fct-sorting-toggle,
.md-shop-page .fct-shop-filter-toggle-button {
	padding-inline: var(--space-half);
}

.md-shop-page .fct-products-wrapper-inner {
	grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
	gap: var(--space-single);
	align-items: start;
}

.md-shop-page .fct-shop-filter-wrapper {
	position: sticky;
	top: calc(var(--space-double) + var(--space-single));
	padding: var(--space-single);
	border-color: var(--shop-card-border);
	border-radius: var(--radius-m);
	background: var(--shop-well);
}

.md-shop-page .fct-shop-product-search {
	margin-block-end: var(--space-single);
}

.md-shop-page .fct-shop-product-search .fct-shop-input,
.md-shop-page .fc_price_range_input {
	border-color: var(--color-border);
	border-radius: var(--radius-s);
	background: var(--color-content-bg);
	color: var(--color-text);
}

.md-shop-page .fct-shop-item-collapse-wrap .item-heading {
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	color: var(--color-headline);
}

.md-shop-page .fct-shop-checkbox {
	color: var(--color-text-sec);
}

.md-shop-page .md-shop-catalog .fct-products-wrapper .fct-products-wrapper-inner .fct-products-container {
	grid-column: 2 / 3;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-single);
}

.md-shop-page .fct-product-card {
	min-width: 0;
	padding: var(--space-half);
	border-color: var(--shop-card-border);
	border-radius: var(--radius-m);
	background: var(--color-content-bg);
	box-shadow: none;
	transition: none;
}

.md-shop-page .mode-grid .fct-product-card {
	display: flex;
	flex-direction: column;
}

.md-shop-page .fct-product-card:hover {
	border-color: var(--shop-card-border);
	box-shadow: none;
}

.md-shop-page .fct-product-card-image-wrap {
	aspect-ratio: 4 / 3;
	margin-block-end: var(--space-half);
	padding: var(--space-half);
	border-radius: var(--radius-s);
	background: var(--shop-well);
	outline: 1px solid var(--color-border);
	outline-offset: -1px;
	overflow: clip;
}

.md-shop-page .fct-product-card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	transition: transform var(--transition-fast);
}

.md-shop-page .fct-product-card-image-wrap:hover .fct-product-card-image,
.md-shop-page .fct-product-card-image-wrap:focus-visible .fct-product-card-image {
	transform: scale(1.02);
}

.md-shop-page h3.fct-product-card-title {
	min-width: 0;
	margin-block-end: var(--space-third);
	font-family: var(--font-head);
	font-size: var(--fs-m);
	font-weight: var(--font-weight-bold);
	line-height: var(--lh-tight);
	overflow-wrap: anywhere;
}

.md-shop-page a.fct-product-card-title {
	color: var(--color-headline);
}

.md-shop-page a.fct-product-card-title:hover,
.md-shop-page a.fct-product-card-title:focus-visible {
	color: var(--color-primary);
}

.md-shop-page .fct-product-card-prices {
	margin-block-end: var(--space-half);
}

.md-shop-page .md-shop-external-note {
	display: flex;
	align-items: center;
	gap: var(--space-third);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

.md-shop-page .mode-grid .fct-product-card-prices {
	margin-block-start: auto;
}

.md-shop-page .fct-item-price {
	font-family: var(--font-mono);
	font-size: var(--fs-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

.md-shop-page .md-shop-card-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-third);
}

.md-shop-page .format .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons,
.md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons,
.md-shop-page .fct-product-card .md-shop-buy-now,
.md-shop-page .fct-product-card .md-shop-external-product {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-third);
	width: 100%;
	min-width: 0;
	padding: var(--space-half) var(--space-single);
	border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
	border-radius: var(--radius-s);
	background: var(--shop-soft-button);
	box-shadow: none;
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
	line-height: var(--lh-tight);
	text-align: center;
	text-decoration: none;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.md-shop-page .fct-product-card .md-shop-buy-now,
.md-shop-page .fct-product-card .md-shop-external-product {
	border-color: var(--color-button);
	background: var(--color-button);
	color: var(--color-button-text);
}

.md-shop-page .md-shop-action-icon {
	flex: 0 0 auto;
	font-size: 1em;
	line-height: 1;
}

.md-shop-page .format .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:hover,
.md-shop-page .format .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:focus-visible,
.md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:hover,
.md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:focus-visible,
.md-shop-page .fct-product-card .md-shop-buy-now:hover,
.md-shop-page .fct-product-card .md-shop-buy-now:focus-visible,
.md-shop-page .fct-product-card .md-shop-external-product:hover,
.md-shop-page .fct-product-card .md-shop-external-product:focus-visible {
	transform: translateY(calc(var(--space-third) * -1));
	box-shadow: var(--shadow-sm);
}

.md-shop-page .format .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:hover,
.md-shop-page .format .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:focus-visible,
.md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:hover,
.md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:focus-visible {
	background: var(--shop-soft-button-hover);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.md-shop-page .fct-product-card .md-shop-buy-now:hover,
.md-shop-page .fct-product-card .md-shop-buy-now:focus-visible,
.md-shop-page .fct-product-card .md-shop-external-product:hover,
.md-shop-page .fct-product-card .md-shop-external-product:focus-visible {
	border-color: var(--color-button);
	background: color-mix(in srgb, var(--color-button), var(--color-text) 10%);
	color: var(--color-button-text);
}

.md-shop-archive__title {
	max-width: 18ch;
	margin-block-end: var(--space-half);
}

.md-shop-archive__lead {
	max-width: 58ch;
	margin-block-end: var(--space-single);
}

.md-shop-archive-nav {
	border-block-end: 1px solid var(--color-border);
	background: var(--color-content-bg);
}

.md-shop-archive-nav__inner {
	display: grid;
	grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
	align-items: stretch;
}

.md-shop-archive-nav__inner > .md-shop-section-label {
	display: flex;
	align-items: center;
	margin: 0;
	padding-inline-end: var(--space-single);
	border-inline-end: 1px solid var(--color-border);
}

.md-shop-archive-nav__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.md-shop-archive-nav__list li {
	min-width: 0;
	margin: 0;
}

.md-shop-archive-nav__list li + li {
	border-inline-start: 1px solid var(--color-border);
}

.md-shop-archive-nav__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-third);
	min-height: 4.5rem;
	padding: var(--space-half) var(--space-single);
	color: var(--color-text-sec);
	text-decoration: none;
}

.md-shop-archive-nav__link:hover,
.md-shop-archive-nav__link:focus-visible,
.md-shop-archive-nav__link.is-active {
	background: var(--shop-well);
	color: var(--color-headline);
}

.md-shop-archive-nav__index,
.md-shop-archive-nav__count {
	font-size: var(--fs-xs);
	color: var(--color-primary);
}

.md-shop-archive-nav__name {
	min-width: 0;
	font-weight: var(--font-weight-bold);
}

.md-shop-archive-nav__link.is-active {
	box-shadow: inset 0 calc(var(--space-third) * -1) 0 var(--color-primary);
}

.md-shop-catalog--archive {
	border-block-start: 0;
}

.md-shop-page .fluent-cart-shop-no-result-found {
	padding: var(--space-double) var(--space-single);
	border-color: var(--color-border);
	border-radius: var(--radius-m);
	background: var(--shop-well);
}

.md-shop-page .fct-shop-paginator,
.md-shop-page .fluent-cart-product-paginator {
	margin-block-start: var(--space-single);
}

@media (max-width: 1079px) {
	.md-shop-page .md-shop-catalog .fct-products-wrapper .fct-products-wrapper-inner .fct-products-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1366px) {
	.md-shop-hero__inner,
	.md-shop-collections > .inner,
	.md-shop-catalog__head,
	.md-shop-catalog > .wp-block-fluent-cart-products.inner,
	.md-shop-archive-nav__inner {
		padding-inline: var(--space-half);
	}
}

@media (max-width: 767px) {
	.md-shop-section-head,
	.md-shop-catalog__head {
		grid-template-columns: 1fr;
		gap: var(--space-half);
	}

	.md-shop-category-grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(16rem, 78vw);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
	}

	.md-shop-category {
		scroll-snap-align: start;
	}

	.md-shop-page .fct-product-action-container {
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.md-shop-page .fct-shop-filter-toggle-button {
		width: auto;
		margin: 0;
	}

	.md-shop-page .fct-products-wrapper-inner {
		grid-template-columns: 1fr;
	}

	.md-shop-page .md-shop-catalog .fct-products-wrapper .fct-products-wrapper-inner .fct-products-container {
		grid-column: 1;
	}

	.md-shop-page .fct-shop-filter-wrapper {
		position: static;
	}

	.md-shop-archive-nav__inner {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}

	.md-shop-archive-nav__inner > .md-shop-section-label {
		padding: var(--space-half);
		border-inline-end: 0;
		border-block-end: 1px solid var(--color-border);
	}

	.md-shop-archive-nav__list {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(15rem, 76vw);
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
	}

	.md-shop-archive-nav__list li {
		scroll-snap-align: start;
	}
}

@media (max-width: 640px) {
	.md-shop-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.md-shop-hero__actions .button,
	.md-shop-hero__actions .button-outline {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.md-shop-proof__item {
		padding: var(--space-half) var(--space-third);
	}

	.md-shop-proof__item + .md-shop-proof__item {
		border-inline-start: 1px solid var(--color-border);
		border-block-start: 0;
	}

	.md-shop-proof dd {
		font-size: var(--fs-s);
	}

	.md-shop-proof dt {
		font-size: var(--fs-xs);
	}

	.md-shop-page .md-shop-catalog .fct-products-wrapper .fct-products-wrapper-inner .fct-products-container {
		grid-template-columns: 1fr;
	}

	.md-shop-page .fct-product-card-image-wrap {
		aspect-ratio: 16 / 11;
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-shop-category,
	.md-shop-page .fct-product-card-image,
	.md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons,
	.md-shop-page .fct-product-card .md-shop-buy-now,
	.md-shop-page .fct-product-card .md-shop-external-product {
		transition: none;
	}
}

[data-theme="dark"] .md-shop-category:hover,
[data-theme="dark"] .md-shop-category:focus-visible,
[data-theme="dark"] .md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:hover,
[data-theme="dark"] .md-shop-page .fct-product-card .wp-block-fluent-cart-shopapp-product-buttons:focus-visible,
[data-theme="dark"] .md-shop-page .fct-product-card .md-shop-buy-now:hover,
[data-theme="dark"] .md-shop-page .fct-product-card .md-shop-buy-now:focus-visible,
[data-theme="dark"] .md-shop-page .fct-product-card .md-shop-external-product:hover,
[data-theme="dark"] .md-shop-page .fct-product-card .md-shop-external-product:focus-visible {
	box-shadow: none;
}