/* header-beauty-centered */
/*
 * Beauty pattern structure — layout/positioning that this specific header
 * needs regardless of which style is being previewed on the page (see
 * inc/style-preview.php in the theme for the color/font/spacing side,
 * generated per style from styles/*.json).
 */
.aconi-header-nav-row {
	position: relative;
}
.aconi-header-icons {
	position: absolute;
	right: var(--wp--preset--spacing--medium);
	top: 50%;
	transform: translateY(-50%);
}
.aconi-header-search-icon .wp-block-search__inside-wrapper {
	align-items: center;
}
.aconi-header-search-icon .wp-block-search__button {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--text-primary) !important;
	padding: 0 !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.aconi-header-search-icon .wp-block-search__button svg {
	width: 20px !important;
	height: 20px !important;
}
.aconi-header-search-icon .wp-block-search__button:hover {
	background: none;
	color: var(--wp--preset--color--cta);
}

/* header-transparent-overlay */
/*
 * Header G · Transparent Overlay: no "position" block support exists for
 * "absolute" (core only exposes sticky/fixed), so this is done as a plain
 * className + CSS. Removed from flow and pinned to the top, it floats
 * above whatever block follows it (typically a full-bleed hero) instead
 * of pushing that block down.
 */
.aconi-header-transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
/*
 * Same is-layout-flow family bug documented elsewhere: the transparent
 * header collapses to zero height (its content is position:absolute, out
 * of flow), but it is still the DOM's :first-child, so <main> — the next
 * sibling, not :first-child — still gets hit by WordPress's global
 * root-level block-gap margin-top. That pushes the hero down below the
 * overlay header instead of letting it start flush at the very top.
 */
.aconi-main-overlay {
	margin-top: 0 !important;
}

/* Base icon-button sizing shared with header-beauty-centered — included
   here too so this header works correctly on its own. */
.aconi-header-search-icon .wp-block-search__inside-wrapper {
	align-items: center;
}
.aconi-header-search-icon .wp-block-search__button {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--text-primary) !important;
	padding: 0 !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.aconi-header-search-icon .wp-block-search__button svg {
	width: 20px !important;
	height: 20px !important;
}
.aconi-header-search-icon .wp-block-search__button:hover {
	background: none;
	color: var(--wp--preset--color--cta);
}

/*
 * .aconi-header-search-icon normally forces a dark icon color (readable
 * on the other headers' light backgrounds) — override it back to the
 * light text color this header uses on its transparent background.
 */
.aconi-header-transparent .aconi-header-search-icon .wp-block-search__button {
	color: var(--wp--preset--color--text-on-dark) !important;
}
/*
 * WooCommerce's customer-account link carries its own explicit text color
 * (from the theme's global link color), which beats the inherited light
 * color this header needs — same family of bug as the search button
 * above, just on a link instead of a button.
 */
.aconi-header-transparent .wc-block-customer-account__link {
	color: inherit;
}
/*
 * The search icon button is sized to 24px by the shared base rule above;
 * the account/cart icons are WooCommerce blocks with a fixed 42px/25px
 * footprint. Match the search button to them here so all three read as
 * the same size in this header specifically.
 */
.aconi-header-transparent .aconi-header-search-icon .wp-block-search__button {
	width: 42px !important;
	height: 42px !important;
}
.aconi-header-transparent .aconi-header-search-icon .wp-block-search__button svg {
	width: 25px !important;
	height: 25px !important;
}
/*
 * The mobile nav overlay (core/navigation, overlayMenu:"mobile") always
 * gets its own opaque white background when opened — good, it has to be
 * readable regardless of what's behind the header. But it inherits this
 * header's light "text-on-dark" nav color, which on that white background
 * is nearly invisible. Force dark text back on just the opened overlay;
 * the closed/desktop nav keeps the light color that reads correctly over
 * the hero.
 */
.aconi-header-transparent .wp-block-navigation__responsive-container.is-menu-open {
	color: var(--wp--preset--color--text-primary);
}

/* category-grid-hero-col */
.aconi-catgrid-hero-col {
	display: grid;
	grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
	min-height: 340px;
	gap: var(--wp--preset--spacing--xsmall);
}

.aconi-catgrid-hero-col > * {
	border-radius: var(--wp--custom--aconi-radius--card);
	overflow: hidden;
	/* Same is-layout-flow margin-block-start bug as the other category-grid-* variants. */
	margin-top: 0 !important;
}

@media (max-width: 781px) {
	.aconi-catgrid-hero-col {
		grid-template-columns: 1fr;
	}
	.aconi-catgrid-hero-col > * {
		min-height: 220px;
	}
}

/* footer-contact-awards */
/*
 * Recurring is-layout-flow bug — see footer-mega's copy of this file for
 * the full explanation. Same fix, needed independently since this is a
 * separate pattern.
 */
.aconi-footer-links > * {
	margin-top: 0 !important;
}

/* hero-full-bleed */
/*
 * Same is-layout-flow family bug as elsewhere: this pattern has no
 * .aconi-main-overlay wrapper around it when composed via the
 * Template-Builder (content sits directly in .wp-site-blocks, not inside
 * a theme <main>), so it still picks up WordPress's global block-gap
 * margin-top as a non-first flow child — leaving a visible gap of plain
 * page background above the image, right where a transparent header
 * needs a dark backdrop.
 */
.aconi-hero-full-bleed {
	margin-top: 0 !important;
}

/* category-view-sidebar-filter */
.aconi-sidebar-filter-col {
	/* WooCommerce's native Preis-Filter-Block rendert sich selbst mit einer
	 * festen intrinsischen Breite von ca. 363px (zwei Slider-Handles brauchen
	 * offenbar einen Mindestplatz) und schrumpft nicht mit einem schmaleren
	 * Container - ein fester "flex: 0 0 220px" liess ihn seitlich aus der
	 * Sidebar herauslaufen. "auto" + min-width lässt die Spalte stattdessen
	 * von ihrem breitesten Inhalt (eben dem Preis-Filter) bestimmen.
	 */
	flex: 0 0 auto;
	min-width: 220px;
}
.aconi-sidebar-filter-grid {
	flex: 1 1 0;
	min-width: 0;
}
/*
 * core/group's flex layout support defaults cross-axis alignment to
 * "center" when the pattern's own block attributes don't set an explicit
 * verticalAlignment — invisible with a short product grid, but with many
 * products (multiple grid rows + pagination) it vertically centers the
 * much-shorter filter sidebar next to the much-taller grid, making the
 * filters appear to "start" far down the page instead of at the top.
 */
.aconi-sidebar-filter-row {
	align-items: flex-start;
}

@media (max-width: 781px) {
	.aconi-sidebar-filter-row {
		flex-direction: column;
	}
	.aconi-sidebar-filter-col,
	.aconi-sidebar-filter-grid {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* category-view-topbar-filter */
/*
 * category-view-topbar-filter: real WooCommerce product-filter-* blocks
 * arranged as a horizontal bar (category pills row + a row of
 * attribute/price filter groups) instead of a sidebar.
 */
.aconi-topbar-filters.wp-block-woocommerce-product-filters {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--small);
}
.aconi-topbar-filter-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Getrennt, statt "gap" pauschal: Abstand zwischen einzelnen Chips in
	 * einer Zeile darf großzügig sein, zwischen den umgebrochenen Zeilen
	 * (Farbe/Material/Preis) wirkte derselbe Wert (96px) wie eine leere
	 * Lücke. */
	column-gap: var(--wp--preset--spacing--large);
	row-gap: var(--wp--preset--spacing--small);
}
.aconi-topbar-filter-group .wp-block-woocommerce-product-filter-attribute {
	flex: 0 0 auto;
}
/*
 * The price-slider's middle grid column is "1fr" (the draggable track) -
 * CSS Grid never counts a 1fr track toward a container's own max-content/
 * shrink-to-fit size, so "flex: 0 0 auto" here left it with zero width
 * (completely undraggable). A real, explicit basis gives that 1fr track
 * something to actually expand into.
 */
.aconi-topbar-filter-group .wp-block-woocommerce-product-filter-price {
	flex: 0 0 320px;
}
.aconi-topbar-filter-group h3.wp-block-heading {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--xsmall);
}
.aconi-topbar-category-pills .wc-block-product-filter-chips {
	flex-wrap: wrap;
}
.aconi-topbar-category-pills .wc-block-product-filter-chips__chip {
	border-radius: 999px;
}

/* category-view-drawer-filter */
/*
 * category-view-drawer-filter: WooCommerce's own showFilterDrawer overlay
 * is desktop-DISABLED by core CSS (its own @media(min-width:601px) rule
 * turns the dialog back into a plain position:relative inline block and
 * hides the open/close/footer controls — the drawer is a mobile-only UX
 * by design upstream). All of core's selectors are :where()-wrapped (zero
 * specificity), so these plain-class rules win without needing !important
 * and re-enable a left-side slide-in drawer at desktop widths too.
 */
@media (min-width: 601px) {
	.aconi-drawer-filters .wc-block-product-filters__open-overlay,
	.aconi-drawer-filters .wc-block-product-filters__overlay-footer,
	.aconi-drawer-filters .wc-block-product-filters__overlay-header {
		display: flex;
	}
	.aconi-drawer-filters .wc-block-product-filters__overlay {
		position: fixed;
		background-color: transparent;
		transition: background-color 0.3s ease;
		/* Dieser Layer deckt immer die komplette Seite ab (auch geschlossen,
		 * da nur das Dialog-Panel selbst per translateX weggeschoben wird) -
		 * ohne pointer-events:none blockiert er dann unsichtbar JEDEN Klick
		 * auf der Seite, auch auf den eigenen "Produkte filtern"-Button. */
		pointer-events: none;
	}
	.aconi-drawer-filters.is-overlay-opened .wc-block-product-filters__overlay {
		pointer-events: auto;
	}
	.aconi-drawer-filters.is-overlay-opened .wc-block-product-filters__overlay {
		background-color: rgba(30, 30, 30, 0.4);
	}
	.aconi-drawer-filters .wc-block-product-filters__overlay-wrapper {
		height: 100%;
	}
	.aconi-drawer-filters .wc-block-product-filters__overlay-dialog {
		position: absolute;
		inset: 0 auto 0 0;
		/* WooCommerce's native Preis-Filter-Block braucht eine intrinsische
		 * Breite von ca. 363px (schrumpft nicht mit dem Container) - bei
		 * 360px plus Innenabstand lief er seitlich aus dem Drawer heraus. */
		width: min(440px, 90vw);
		transform: translateX(-100%) !important;
		transition: transform 0.3s ease;
		/* Ohne eigene Hintergrundfarbe ist das Panel selbst transparent -
		 * die Shop-Seite scheint dahinter durch statt eines festen Panels. */
		background-color: var(--wp--preset--color--base, #fff);
		box-shadow: 2px 0 24px rgba(0, 0, 0, 0.15);
	}
	/* Der "Schließen"-Button existiert bereits im Markup, ist aber per
	 * Core-CSS versteckt - oben rechts im Panel sichtbar machen. */
	.aconi-drawer-filters .wc-block-product-filters__close-overlay {
		display: flex !important;
		margin-left: auto;
	}
	.aconi-drawer-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
		transform: translateX(0) !important;
	}
	.aconi-drawer-filters .wc-block-product-filters__overlay-content {
		overflow-y: auto;
		padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--40);
	}
	/* Schließen-Button-Zeile und Anwenden-Button saßen ohne eigenen Abstand
	 * direkt an Ober-/Unterkante des Panels. */
	.aconi-drawer-filters .wc-block-product-filters__overlay-header {
		padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--40) 0;
	}
	.aconi-drawer-filters .wc-block-product-filters__overlay-footer {
		padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--40);
	}
}