/* ==========================================================================
   messe-display — Shop / category listing
   Figma "Exhibition shop" 1440x1843 (frames 7:14 and 51:4213).
   Layout: sidebar 330 + products 1050, section pad 41/15, itemSpacing 10.
   ========================================================================== */

.md-shop {
	display: grid;
	grid-template-columns: 330px 1fr;
	gap: 10px;
	align-items: start;
	padding: 41px var(--md-gutter);
}

/* --------------------------------------------------------------------------
   Sidebar facets — each panel is a 1px #DDDDDD box; the heading row is
   330x78 with 24px vertical padding; the first panel's heading is #EFEFEF.
   -------------------------------------------------------------------------- */
.md-facet {
	border: 1px solid var(--md-line-2);
	border-bottom: 0;
}
/* `:last-of-type`, not `:last-child` — the "clear all filters" link is now the
   last element in <aside> whenever a filter is active, so `:last-child` stopped
   matching and the sidebar lost its bottom border exactly when it was in use. */
.md-facet:last-of-type { border-bottom: 1px solid var(--md-line-2); }

.md-facet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 78px;
	padding: 24px 12px;
	text-align: left;
}
.md-facet:first-child .md-facet__head { background: var(--md-fill-2); }
.md-facet__head svg { transition: transform .2s ease; }
.md-facet[open] .md-facet__head svg { transform: rotate(180deg); }

.md-facet__body { padding: 0 12px 16px; }

.md-facet__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24px;
}
.md-facet__meta button { text-decoration: underline; }

.md-facet__list { display: flex; flex-direction: column; }
.md-facet__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px 12px 0;
	cursor: pointer;
	font-family: var(--md-font-banner);
	font-size: 15px;
	line-height: 20px;
	color: var(--md-black);
}
.md-facet__opt input { width: 19px; height: 19px; accent-color: var(--md-purple); }
.md-facet__opt span:last-child { margin-left: auto; color: var(--md-grey-3); font-size: 13px; }

/* --------------------------------------------------------------------------
   Filter bar — Figma "Filter shop" 1035x74, pad 14 top/bottom.
   View-mode icons left; "on sale" checkbox and the sort select right,
   both on #EFEFEF, 40px tall.
   -------------------------------------------------------------------------- */
.md-shopbar {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 14px 0;
}
.md-shopbar__views { display: flex; align-items: center; gap: 15px; }
.md-shopbar__views button { display: flex; color: var(--md-purple); }
.md-shopbar__views button.is-grid { color: var(--md-red); }

.md-shopbar__right { display: flex; align-items: center; gap: 20px; margin-left: auto; }

.md-shopbar__check {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 8px 15px;
	background: var(--md-fill-2);
	font-size: 15px;
	line-height: 24px;
	letter-spacing: .75px;
	cursor: pointer;
}
.md-shopbar__check input {
	width: 19px;
	height: 19px;
	border: 1.6px solid #B6B6B6;
	border-radius: 3px;
	accent-color: var(--md-purple);
}

.md-shopbar__sort {
	height: 40px;
	min-width: 240px;
	padding: 0 15px;
	border: 0;
	border-radius: 0;
	background: var(--md-fill-2);
	font-family: var(--md-font);
	font-size: 14px;
	line-height: 24px;
	letter-spacing: .35px;
	color: var(--md-black);
	cursor: pointer;
}

.md-shop__count { font-size: 14px; color: var(--md-grey-3); }

/* --------------------------------------------------------------------------
   Product grid — 3 columns; each Section is 350x511.3 with pad 0/15/15/15.
   Card image 330x419.
   -------------------------------------------------------------------------- */
.md-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
.md-shop__grid > * { padding: 0 var(--md-gutter) var(--md-gutter); }

.md-shop .md-card__media { aspect-ratio: 330 / 419; }

/* Badges — Figma 54x20 pills: "Hot" on #D10202, "Sale" on #000000,
   both Inter 400/12 lh 12 ls 0.75 uppercase in #FFFFFF. */
.md-card__flags {
	position: absolute;
	top: 15px;
	left: 15px;
	display: flex;
	gap: 7px;
	z-index: 2;
}
.md-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	height: 20px;
	padding: 0 8px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: .75px;
	text-transform: uppercase;
	color: var(--md-white);
}
.md-flag--hot  { background: var(--md-red); }
.md-flag--sale { background: var(--md-black); }

/* Wishlist button — Figma Link 40x40, cornerRadius 20, top-right. */
.md-card__wish {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: var(--md-white);
	color: var(--md-black);
	opacity: 0;
	transition: opacity .2s ease;
}
.md-card:hover .md-card__wish,
.md-card__wish:focus-visible { opacity: 1; }

.md-shop__empty { padding: 60px 0; text-align: center; color: var(--md-grey-3); }

@media (max-width: 1099px) {
	.md-shop { grid-template-columns: 1fr; }
	.md-shop__grid { grid-template-columns: repeat(3, 1fr); }
	.md-card__wish { opacity: 1; }
}
@media (max-width: 759px) {
	.md-shop { padding: 24px var(--md-gutter); }
	.md-shop__grid { grid-template-columns: repeat(2, 1fr); }
	.md-shopbar { flex-wrap: wrap; gap: 10px; }
	.md-shopbar__right { width: 100%; margin-left: 0; }
	/* The select must be allowed to shrink, but not below its own longest option
	   ("Preis: absteigend" / "Price: high to low"), which is what clipped the
	   label mid-word on narrow screens. */
	.md-shopbar__sort { min-width: 0; flex: 1 1 auto; }
}

/* ==========================================================================
   Facet panel — additions for the data-driven filters
   ========================================================================== */

/* <summary> renders a disclosure marker and a default cursor of its own. */
.md-facet__head {
	cursor: pointer;
	list-style: none;
}
.md-facet__head::-webkit-details-marker { display: none; }

/* The checkbox is decorative — the whole row is an <a>. Without this it eats
   the click and flips visually before the request lands, so the tick disagrees
   with the URL for the duration of the navigation. */
.md-facet__opt input { pointer-events: none; }

.md-facet__opt:hover { color: var(--md-purple); }
.md-facet__opt.is-selected { font-weight: 600; }

/* An option with nothing behind it in the current scope: still listed, because
   the operator set it up and hiding it makes the sidebar flicker between
   states, but visibly inert. */
.md-facet__opt.is-empty { opacity: .45; }

/* Attribute swatches. pa_standtyp terms carry an image (the `attribue_image`
   ACF field); pa_stand-grosse terms do not, so the swatch is per-option rather
   than per-panel and the list only reserves the column when one is present. */
.md-facet__swatch {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border: 1px solid var(--md-line-2);
	border-radius: var(--md-r-4);
	background: var(--md-white);
	flex: 0 0 auto;
}
.md-facet__list--swatch .md-facet__opt { padding-block: 8px; }

.md-facet__clear {
	display: inline-block;
	margin-top: 14px;
	font-family: var(--md-font);
	font-size: 13px;
	line-height: 20px;
	color: var(--md-grey-3);
	border-bottom: 1px solid currentColor;
}
.md-facet__clear:hover { color: var(--md-purple); }

/* --------------------------------------------------------------------------
   Filter bar at intermediate widths. Between roughly 760 and 1100 the bar is
   still one row but the sidebar has taken the full column, leaving it ~730px:
   the two 26px view icons rendered at 22.9px, the on-sale checkbox at 16.4px
   and the sort label wrapped to two lines. Let the bar wrap instead of
   compressing its controls.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.md-shopbar { flex-wrap: wrap; row-gap: 12px; }
	.md-shopbar__right { margin-left: auto; }
	.md-shopbar__sort { min-width: 200px; }
	.md-shopbar__views button svg { width: 26px; height: 26px; flex: 0 0 auto; }
	.md-shopbar__check input { width: 19px; height: 19px; flex: 0 0 auto; }
	.md-shopbar__check span { white-space: nowrap; }
}
@media (max-width: 759px) {
	.md-shopbar__right { width: 100%; margin-left: 0; }
	.md-shopbar__sort { min-width: 0; }
	.md-shopbar__check span { white-space: normal; }
}