/**
 * Shop v2 — catalog (Phase 1)
 * Filter dock, wayfinding, category tiles, product grid, toolbar
 * All rules scoped under .shop-v2
 */

/* ── Layout ─────────────────────────────────────────────────────────────── */

.shop-v2.catalog_main #content.content_cat,
.shop-v2 .catalog_main #content.content_cat {
	display: grid;
	grid-template-columns: min(16rem, 100%) minmax(0, 1fr);
	column-gap: clamp(1rem, 2.5vw, 2rem);
	row-gap: 0.75rem;
	width: min(100% - var(--ms-gutter-inline) * 2, var(--ms-content-max));
	max-width: var(--ms-content-max);
	margin-inline: auto;
	padding-inline: var(--ms-gutter-inline);
	float: none;
}

.shop-v2 #content.content_cat::after {
	content: "";
	display: table;
	clear: both;
}

.shop-v2 #content.content_cat > .left-content {
	grid-column: 1;
	grid-row: 1 / span 20;
	align-self: start;
}

.shop-v2 #content.content_cat > .catalog-page-name {
	grid-column: 2;
	grid-row: 1;
}

.shop-v2 #content.content_cat > .pagepath {
	grid-column: 2;
	grid-row: 2;
	margin-bottom: 1.25rem;
}

.shop-v2 #content.content_cat > .right-content {
	grid-column: 2;
	grid-row: 3;
}

/* ── 4.1 Filter sidebar ─────────────────────────────────────────────────── */

.shop-v2 .left-content {
	width: min(100%, 16rem);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: var(--ms-radius-lg);
	border: 1px solid var(--ms-border);
	background: var(--ms-glass-bg-light);
	backdrop-filter: var(--ms-backdrop);
	box-shadow: var(--ms-shadow-sm);
	position: sticky;
	top: calc(var(--ms-header-utility-height) + 5.5rem);
	z-index: calc(var(--ms-z-sticky) - 2);
}

.shop-v2 #content.content_cat .left-content {
	width: min(100%, 16rem);
}

.shop-v2 .left-menu-title {
	margin: 1rem 0 0.5rem;
	font-size: var(--ms-text-xs);
	font-weight: var(--ms-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ms-brand);
}

.shop-v2 .left-menu-title:first-child {
	margin-top: 0;
}

.shop-v2 .left-menu-list {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.shop-v2 .left-menu-list li {
	font-size: var(--ms-text-sm);
	color: var(--ms-ink);
	line-height: var(--ms-leading-snug);
}

.shop-v2 .left-menu-list li a {
	color: var(--ms-ink);
	text-decoration: none;
	transition: color var(--ms-transition-fast);
}

.shop-v2 .left-menu-list li a:hover {
	color: var(--ms-brand);
	text-decoration: none;
}

.shop-v2 .left-menu-list.selected-values {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.shop-v2 .left-menu-list.selected-values li {
	margin: 0 !important;
}

.shop-v2 .selected-values li span,
.shop-v2 .selected-filter-el-title {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-brand-muted);
	color: var(--ms-brand);
	font-size: var(--ms-text-xs);
	font-weight: var(--ms-weight-medium);
	line-height: 1.2;
}

.shop-v2 .delete-filter-link {
	float: none;
	margin: 0;
	top: 0;
	opacity: 0.7;
	transition: opacity var(--ms-transition-fast), transform var(--ms-transition-fast);
}

.shop-v2 .delete-filter-link:hover {
	opacity: 1;
	transform: scale(1.05);
}

.shop-v2 .right-content {
	width: auto;
	float: none;
	min-width: 0;
	margin-bottom: 1.5rem;
}

/* ── 4.2 Page heading + breadcrumbs ─────────────────────────────────────── */

.shop-v2 .catalog-page-name {
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: var(--ms-weight-normal);
	letter-spacing: var(--ms-tracking-tight);
	color: var(--ms-ink);
	line-height: var(--ms-leading-tight);
	animation: ms-fade-up var(--ms-duration-reveal) var(--ms-ease-out) both;
}

.shop-v2 .catalog-page-name-margin-block {
	margin-left: 0;
}

.shop-v2 .pagepath {
	left: 0;
	display: block;
	max-width: none;
	margin: 0 0 2rem;
	font-size: var(--ms-text-xs);
	font-weight: var(--ms-weight-medium);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shop-v2 .pagepath ol {
	margin: 0;
}

.shop-v2 .pagepath ol li:not(:last-child)::after {
	content: "/";
	margin-inline: 0.5rem;
	color: var(--ms-ink-muted);
	opacity: 0.6;
}

.shop-v2 .pagepath a {
	color: var(--ms-ink-muted);
	text-decoration: none;
	transition: color var(--ms-transition-fast);
}

.shop-v2 .pagepath a:hover {
	color: var(--ms-brand);
}

.shop-v2 .pagepath ol li:last-child a,
.shop-v2 .pagepath ol li:last-child {
	color: var(--ms-brand);
}

/* ── 4.3 Category tiles ─────────────────────────────────────────────────── */

.shop-v2 .container_Block {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 1rem 0 2rem;
	justify-content: center;
	text-align: initial;
}

.shop-v2 .brand_visible_main_item,
.shop-v2 .brand_visible_main {
	width: auto !important;
	height: auto;
	min-height: 12.5rem;
	margin: 0;
	padding: 0;
	border-radius: var(--ms-radius-lg);
	border: 1px solid var(--ms-border);
	background: var(--ms-void);
	box-shadow: var(--ms-shadow-sm);
	overflow: hidden;
	transition:
		transform var(--ms-transition-base),
		box-shadow var(--ms-transition-base),
		border-color var(--ms-transition-base);
}

.shop-v2 a.brand_visible_main_item {
	display: block;
	color: inherit;
	text-decoration: none;
}

.shop-v2 .brand_visible_main_item:hover,
.shop-v2 .brand_visible_main:hover {
	transform: translateY(-4px) perspective(800px) rotateX(2deg);
	border-color: oklch(0.55 0.18 250 / 0.35);
	box-shadow: var(--ms-shadow-md), 0 16px 40px var(--ms-brand-muted);
}

.shop-v2 .brand_visible_link {
	display: block;
	position: relative;
	height: 100%;
	min-height: 12.5rem;
	overflow: hidden;
}

.shop-v2 .brand_visible_main_item .brand_visible_img,
.shop-v2 .brand_visible_main .brand_visible_img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	top: 0 !important;
	object-fit: cover;
	opacity: 0.88;
	transition: transform var(--ms-transition-base), opacity var(--ms-transition-base);
}

.shop-v2 .brand_visible_main_item:hover .brand_visible_img,
.shop-v2 .brand_visible_main:hover .brand_visible_img {
	transform: scale(1.06);
	opacity: 1;
}

.shop-v2 .SpanBrandCard,
.shop-v2 .SpanBrand {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 2.5rem 1rem 1rem;
	background: linear-gradient(to top, oklch(0.14 0.02 250 / 0.92) 0%, transparent 100%);
	color: oklch(0.98 0 0);
	font-size: var(--ms-text-lg);
	font-weight: var(--ms-weight-semibold);
	font-style: normal;
	line-height: var(--ms-leading-snug);
	text-align: left;
}

/* ── 4.4 Product grid ───────────────────────────────────────────────────── */

.shop-v2 .catalog_item {
	width: 100%;
	margin-bottom: 1rem;
	padding: 1.25rem;
	border-radius: var(--ms-radius-lg);
	border: 1px solid var(--ms-border);
	background: var(--ms-surface);
	box-shadow: var(--ms-shadow-xs);
	transition:
		border-color var(--ms-transition-fast),
		box-shadow var(--ms-transition-fast);
}

.shop-v2 .catalog_item:hover {
	border-color: oklch(0.55 0.18 250 / 0.3);
	box-shadow: var(--ms-shadow-md);
}

.shop-v2 .catalog_item_custom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
}

.shop-v2 .catalog_image {
	width: min(100%, 12.5rem);
	float: none;
	flex: 0 0 min(100%, 12.5rem);
}

.shop-v2 #content.content_cat .catalog_image {
	width: min(100%, 12.5rem);
}

.shop-v2 .catalog_image img,
.shop-v2 .catalog_image .catalog_image_inner img {
	width: 100%;
	height: auto;
	transition: transform var(--ms-transition-fast);
}

.shop-v2 .catalog_item:hover .catalog_image img {
	transform: translateY(-4px);
}

.shop-v2 .catalog_description {
	width: auto;
	flex: 1 1 14rem;
	float: none;
	min-width: 0;
}

.shop-v2 #content.content_cat .catalog_description {
	width: auto;
}

.shop-v2 .catalog_description .catalog_title a,
.shop-v2 .catalog_description .catalog_title_mobile a,
.shop-v2 .catalog_description .catalog_title_back a {
	color: var(--ms-ink);
	font-size: var(--ms-text-base);
	font-weight: var(--ms-weight-semibold);
	line-height: var(--ms-leading-snug);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shop-v2 .catalog_description .catalog_title a:hover,
.shop-v2 .catalog_description .catalog_title_mobile a:hover {
	color: var(--ms-brand);
	text-decoration: none;
}

.shop-v2 .catalog_description .catalog_text,
.shop-v2 .catalog_description #availability.catalog_text {
	font-size: var(--ms-text-xs);
	color: var(--ms-ink-muted);
}

.shop-v2 .catalog_item.item-available .catalog_description #availability,
.shop-v2 .catalog_item.item-available .availability-text {
	display: inline-block;
	padding: 0.2rem 0.625rem;
	border-radius: var(--ms-radius-pill);
	background: oklch(0.65 0.15 145 / 0.15);
	color: oklch(0.45 0.14 145);
	font-weight: var(--ms-weight-semibold);
}

.shop-v2 .catalog_item.item-not-available .catalog_description #availability,
.shop-v2 .catalog_item.item-not-available .availability-text {
	display: inline-block;
	padding: 0.2rem 0.625rem;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-surface-sunken);
	color: var(--ms-ink-muted);
	font-weight: var(--ms-weight-medium);
}

.shop-v2 .catalog_item_custom .minus,
.shop-v2 .catalog_item_custom .plus {
	width: 2rem;
	height: 2rem;
	border-radius: var(--ms-radius-pill);
	border: 1px solid var(--ms-border);
	background: var(--ms-surface);
	color: var(--ms-ink);
	line-height: 1.75rem;
	transition:
		background var(--ms-transition-fast),
		border-color var(--ms-transition-fast);
}

.shop-v2 .catalog_item_custom .minus:hover,
.shop-v2 .catalog_item_custom .plus:hover {
	background: var(--ms-brand-muted);
	border-color: var(--ms-brand);
}

/* ── 4.5 Toolbar + pagination ───────────────────────────────────────────── */

.shop-v2 .grey-left,
.shop-v2 .grey-right,
.shop-v2 .grey-center {
	background: none;
	height: auto;
}

.shop-v2 .grey-center {
	background: var(--ms-surface-sunken);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-md);
	padding: 0.75rem 1rem;
	min-height: auto;
}

.shop-v2 .top-sort .order-value,
.shop-v2 .top-sort .order-value-bottom {
	float: none;
	width: auto;
	min-width: 10rem;
	height: auto;
	padding: 0.5rem 1rem;
	margin: 0;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-pill);
	background: var(--ms-surface);
	color: var(--ms-ink);
	font-size: var(--ms-text-sm);
	font-weight: var(--ms-weight-medium);
	line-height: var(--ms-leading-snug);
}

.shop-v2 .top-sort .order-options {
	top: calc(100% + 0.375rem);
	width: 100%;
	min-width: 12rem;
	padding: 0.5rem;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-md);
	background: var(--ms-glass-bg-light);
	backdrop-filter: var(--ms-backdrop);
	box-shadow: var(--ms-shadow-lg);
}

.shop-v2 .top-sort .order-options a {
	margin: 0;
	padding: 0.5rem 0.625rem;
	border-radius: var(--ms-radius-sm);
	font-size: var(--ms-text-sm);
	transition: background var(--ms-transition-fast);
}

.shop-v2 .top-sort .order-options a:hover {
	background: var(--ms-brand-muted);
	text-decoration: none;
}

.shop-v2 .top-sort .order-options a.selected {
	font-weight: var(--ms-weight-semibold);
	color: var(--ms-brand);
	text-decoration: none;
	background: var(--ms-brand-muted);
}

.shop-v2 .page_menu {
	margin: 2.5rem 0;
	font-size: var(--ms-text-sm);
	font-style: normal;
}

.shop-v2 .page_menu ul {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.shop-v2 .page_menu ul li {
	margin: 0;
}

.shop-v2 .page_menu ul li span,
.shop-v2 .page_menu ul li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.625rem;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-surface-sunken);
	color: var(--ms-ink) !important;
	font-style: normal;
	font-weight: var(--ms-weight-medium);
	text-decoration: none;
	transition:
		background var(--ms-transition-fast),
		box-shadow var(--ms-transition-fast),
		color var(--ms-transition-fast);
}

.shop-v2 .page_menu ul li span {
	background: var(--ms-brand);
	color: oklch(0.99 0 0) !important;
	box-shadow: var(--ms-shadow-glow-brand);
}

.shop-v2 .page_menu a:hover {
	background: var(--ms-brand-muted);
	color: var(--ms-brand) !important;
	text-decoration: none;
}

.shop-v2 .page_menu .page_prev,
.shop-v2 .page_menu .page_next {
	font-size: var(--ms-text-base);
	font-style: normal;
}

/* ── SEO appendix ───────────────────────────────────────────────────────── */

.shop-v2 .seo_text {
	max-width: var(--ms-prose-max);
	margin-inline: auto;
	padding-block: 2.5rem;
	font-size: var(--ms-text-sm);
	line-height: var(--ms-leading-relaxed);
	color: var(--ms-ink-muted);
	border-top: 1px solid var(--ms-border);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media screen and (max-width: 991px) {
	.shop-v2.catalog_main #content.content_cat,
	.shop-v2 .catalog_main #content.content_cat {
		grid-template-columns: 1fr;
	}

	.shop-v2 #content.content_cat > .left-content,
	.shop-v2 #content.content_cat > .catalog-page-name,
	.shop-v2 #content.content_cat > .pagepath,
	.shop-v2 #content.content_cat > .right-content {
		grid-column: 1;
		grid-row: auto;
	}

	.shop-v2 .left-content {
		position: static;
		width: 100%;
	}

	.shop-v2 #content.content_cat .left-content {
		width: 100%;
	}

	.shop-v2 .catalog_item_custom {
		flex-direction: column;
	}

	.shop-v2 .catalog_image {
		flex-basis: 100%;
		max-width: 14rem;
	}
}