/*
Theme Name: Apo Naturpark
Version: 0.5.0
Requires at least: 6.7
Requires PHP: 8.2
Text Domain: apo
Description: Block theme for Naturpark Apotheke. Tokens in theme.json, rules in /DESIGN.md.
*/

/* Every value below comes from theme.json presets/custom. No raw colours, sizes or radii. */

:root {
	--apo-focus: var(--wp--preset--color--forest);
}
/* page gutter: 16px, 24px from 782px. Set through WordPress's own root-padding variables so the padding of
   .has-global-padding and the negative margin of full-width blocks always match (html body beats core's body rule). */
@media (min-width: 782px) {
	html body { --wp--style--root--padding-left: var(--wp--preset--spacing--24); --wp--style--root--padding-right: var(--wp--preset--spacing--24); }
}

/* WooCommerce and core block CSS use WordPress's default preset names, which this theme does not define.
   Point them at the theme scale (not in theme.json, so the editor's size picker stays free of duplicates). */
:root {
	--wp--preset--font-size--x-small: var(--wp--preset--font-size--xs);
	--wp--preset--font-size--small: var(--wp--preset--font-size--sm);
	--wp--preset--font-size--normal: var(--wp--preset--font-size--md);
	--wp--preset--font-size--medium: var(--wp--preset--font-size--lg);
	--wp--preset--font-size--large: var(--wp--preset--font-size--heading-s);
	--wp--preset--font-size--x-large: var(--wp--preset--font-size--heading-m);
	--wp--preset--font-size--huge: var(--wp--preset--font-size--heading-l);
	--wp--preset--spacing--20: var(--wp--preset--spacing--8);
	--wp--preset--spacing--30: var(--wp--preset--spacing--12);
}

/* ---------- base ---------- */
body { -webkit-font-smoothing: antialiased; }
/* browsers give form controls their own system font (Arial); every field and button inherits the theme font instead */
:where(button, input, select, textarea) { font: inherit; }
img { max-width: 100%; height: auto; }
:where(a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible) {
	outline: 3px solid var(--apo-focus);
	outline-offset: 2px;
}
.has-steel-background-color, .apo-infocard { --apo-focus: var(--wp--custom--color--sun); }
/* text on steel: white headings, sky body text and eyebrows (DESIGN.md › Components) */
.has-steel-background-color :is(h1, h2, h3) { color: var(--wp--preset--color--base); }
.has-steel-background-color :is(.apo-lead, .apo-muted, .is-style-eyebrow) { color: var(--wp--preset--color--sky); }
.apo-icon { flex: none; }
/* headline font is always 500; an italic keyword drops to 400 italic (DESIGN.md › Typography) */
.has-heading-font-family { font-weight: 500; }
:is(h1, h2, .has-heading-font-family) em { font-style: italic; font-weight: 400; }


/* 8pt baseline (DESIGN.md › Typography): every element computes its own line height on the 8px grid
   (text: nearest multiple of 8 to 1.5em; headings: theme.json, next multiple of 8 above 1em).
   Without this rule, children would inherit the body's computed 24px whatever their own font size. */
:where(body *) { line-height: var(--wp--custom--line-height--text); }
/* inline text takes the line height of its block: an <em> in a display headline would otherwise compute 1.5 × 76px and push the lines apart */
:where(em, strong, b, i, u, s, small, mark, abbr, cite, q, del, ins, sub, sup, time, code, bdi, br) { line-height: inherit; }

/* Reflow at 320px (WCAG 1.4.10): long words in large type break instead of overflowing */
:where(h1, h2, h3, h4, h5, h6, p, li) { overflow-wrap: break-word; }

/* short pages: footer stays at the bottom of the viewport */
.wp-site-blocks { display: flex; flex-direction: column; min-height: round(down, 100vh, var(--wp--custom--baseline)); } /* on the 8px grid, or the footer lands between two lines */
.apo-main { flex: 1; }
.wp-site-blocks > * { margin-block: 0; }

/* ---------- forms (search, quantity, sorting, review form) ---------- */
/* classic forms only; WooCommerce block components style their own fields (see the WooCommerce blocks section) */
main :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [class*="wc-block-components"]), select, textarea) {
	font: inherit; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--control); min-height: 2.5rem; padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
}
/* single-line fields: fixed 40px including the border (8pt grid); the text centres itself */
main :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [class*="wc-block-components"]), select) { box-sizing: border-box; height: 2.5rem; padding-block: 0; }
main :where(input, select, textarea):focus { border-color: var(--wp--preset--color--steel); outline-offset: 0; }
main :where(label) { font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
main :where(label:has(input[type="checkbox"], input[type="radio"]), .wc-block-components-checkbox__label) { font-weight: 400; }

/* ---------- typography helpers ---------- */
.apo-lead { font-size: var(--wp--preset--font-size--md); color: var(--wp--preset--color--forest-muted); max-width: 32rem; }
.apo-muted { color: var(--wp--preset--color--forest-muted); max-width: 36rem; }
.apo-meta { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
/* eyebrow: one label per section, any block (paragraph, post terms) */
.is-style-eyebrow { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--forest-muted); }

/* ---------- sections ---------- */
.apo-section { padding-block: var(--wp--custom--section--padding); }
.apo-section--hero { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80); }
@media (min-width: 782px) { .apo-section--hero { padding-block: var(--wp--preset--spacing--48) var(--wp--preset--spacing--80); } }
.apo-section.apo-section--quick { padding-block: 0 var(--wp--preset--spacing--24); margin-block-start: 0; }
.apo-section__head { gap: var(--wp--preset--spacing--24); margin-bottom: var(--wp--preset--spacing--32); }

/* ---------- rhythm (DESIGN.md › Spacing): the only place text blocks get vertical spacing ---------- */
.apo-section :where(.apo-hero__text, .apo-panel, .apo-panel > .wp-block-column, .apo-section__head > .wp-block-group, .apo-infocard) > * { margin-block: 0; }
.apo-section .is-style-eyebrow + :is(h1, h2) { margin-top: var(--wp--preset--spacing--8); }
.apo-section h1 + * { margin-top: var(--wp--preset--spacing--24); }
.apo-section :is(h2, h3):not(.wp-block-post-title, .apo-card__title) + * { margin-top: var(--wp--preset--spacing--16); }
.apo-section h3:not(.wp-block-post-title, .apo-card__title) + * { margin-top: var(--wp--preset--spacing--8); }
.apo-section h2 + .wp-block-search { margin-top: var(--wp--preset--spacing--24); }
.apo-section .wp-block-search + * { margin-top: var(--wp--preset--spacing--16); }
.apo-section * + .apo-actions { margin-top: var(--wp--preset--spacing--32); }

/* ---------- buttons (core/button + block styles from functions.php) ---------- */
/* icons are CSS masks so editors only see the label */
.wp-block-button__link { padding-block: 0; padding-inline: var(--wp--preset--spacing--16); display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--8); min-height: 2.5rem; white-space: nowrap; text-decoration: none; transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear; }
.apo-actions { gap: var(--wp--preset--spacing--16); flex-wrap: wrap; }
.apo-actions .wp-block-button__link { min-height: 3rem; padding-inline: var(--wp--preset--spacing--24); border-radius: var(--wp--custom--radius--control); }

.is-style-sun .wp-block-button__link { background: var(--wp--custom--color--sun); color: var(--wp--preset--color--forest); }
.is-style-sun .wp-block-button__link:hover { background: var(--wp--custom--color--sun-light); color: var(--wp--preset--color--forest); }
.is-style-sun .wp-block-button__link::before { content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor; mask: url(assets/icons/calendar.svg) center / contain no-repeat; }

.is-style-outline .wp-block-button__link { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--green); color: var(--wp--preset--color--green); }
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--base); border-color: var(--wp--custom--color--green-dark); color: var(--wp--custom--color--green-dark); }

.is-style-link .wp-block-button__link { background: none; padding: 0; min-height: 3rem; white-space: normal; text-align: left; color: var(--wp--preset--color--green); } /* long labels wrap at 320px (two 24px lines = 48) */
.is-style-link .wp-block-button__link:hover { background: none; color: var(--wp--custom--color--green-dark); }
.is-style-link .wp-block-button__link::after { content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor; mask: url(assets/icons/arrow-right.svg) center / contain no-repeat; }

.is-style-chip .wp-block-button__link { min-height: 2rem; padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12); font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--wp--preset--color--steel); background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--pill); }
.is-style-chip .wp-block-button__link:hover { background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--steel); color: var(--wp--preset--color--steel); }

/* ---------- cards & panels ---------- */
/* Hairlines are drawn inside the box (inset line or outline), not as borders: a 1px border would add 2px to the height
   and push everything below off the 8px grid. Same look, flat, no elevation. */
/* Linked card (group style "Karte"): the heading link stretches over the whole card on the front end */
.is-style-card { position: relative; gap: var(--wp--preset--spacing--16); padding: var(--wp--preset--spacing--16); background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--card); transition: box-shadow 120ms linear; }
.is-style-card::after { content: ""; width: 1rem; height: 1rem; flex: none; margin-left: auto; background: var(--wp--preset--color--forest-muted); mask: url(assets/icons/arrow-right.svg) center / contain no-repeat; }
.is-style-card:hover { box-shadow: inset 0 0 0 1px var(--wp--preset--color--green); }
.is-style-card:has(a:focus-visible) { outline: 3px solid var(--apo-focus); outline-offset: 2px; }
.is-style-card a { color: inherit; text-decoration: none; }
.is-style-card a:focus-visible { outline: none; }
.is-style-card .apo-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* editor: keep every text in the card clickable for editing */
.editor-styles-wrapper .is-style-card .apo-card__title a::after { display: none; }
.apo-card__body { flex: 1; min-width: 0; }
.apo-card__title { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: var(--wp--custom--line-height--text); margin: 0; }
.apo-card__text { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.apo-card__body .apo-card__text { margin: 0; }

.apo-iconcircle { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; margin: 0; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--mint); }
.apo-iconcircle img { width: 1.5rem; height: 1.5rem; } /* glyph centred in its 48px circle; the circle is what sits on the grid */

.apo-panel { border-radius: var(--wp--custom--radius--surface); padding: var(--wp--preset--spacing--32); }
@media (min-width: 782px) { .apo-panel { padding: var(--wp--preset--spacing--40); } }
.apo-panel--white { background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border); }

/* columns used as side-by-side panels */
/* columns: every split lands on the 8px grid at full width (1248 = 156 × 8) */
.apo-split { gap: var(--wp--preset--spacing--32); }
@media (min-width: 782px) {
	/* golden section: first column = (width − gap) / φ rounded to 8px, the second takes the rest (752 | 32 | 464).
	   --minor-first swaps the proportions. Beats core's .wp-block-columns:not(…) > .wp-block-column (0,3,0). */
	.wp-block-columns.apo-golden { gap: var(--wp--preset--spacing--32); }
	.wp-block-columns.apo-golden > .wp-block-column { flex: 1 1 0; box-sizing: border-box; } /* panel padding counts inside the column width */
	.wp-block-columns.apo-golden > .wp-block-column:first-child { flex: 0 0 round(nearest, calc((100% - var(--wp--preset--spacing--32)) * 0.618), var(--wp--custom--baseline)); }
	.wp-block-columns.apo-golden--minor-first > .wp-block-column:first-child { flex-basis: round(nearest, calc((100% - var(--wp--preset--spacing--32)) * 0.382), var(--wp--custom--baseline)); }
	/* footer 40 | 30 | 30: first column rounded to 16px so the two others split the rest evenly on 8px (480 | 352 | 352) */
	.wp-block-columns.apo-footer-cols { gap: var(--wp--preset--spacing--32); }
	.wp-block-columns.apo-footer-cols > .wp-block-column { flex: 1 1 0; }
	.wp-block-columns.apo-footer-cols > .wp-block-column:first-child { flex: 0 0 round(nearest, calc((100% - 2 * var(--wp--preset--spacing--32)) * 0.4), calc(2 * var(--wp--custom--baseline))); }
}

/* ---------- topbar ---------- */
.apo-topbar { background: var(--wp--preset--color--cream); box-shadow: inset 0 -1px 0 var(--wp--custom--color--border); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--forest-muted); }
.apo-topbar__inner { max-width: var(--wp--custom--container--header); margin-inline: auto; padding-block: var(--wp--preset--spacing--8); gap: var(--wp--preset--spacing--16); }
.apo-topbar .wp-block-group { gap: var(--wp--preset--spacing--24); }
.apo-topbar p { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--4); min-height: 1.5rem; margin: 0; white-space: nowrap; }
.apo-topbar p::before { content: ""; width: .875rem; height: .875rem; flex: none; background: currentColor; mask: center / contain no-repeat; }
.apo-topbar__info p:nth-child(1)::before { mask-image: url(assets/icons/map-pin.svg); }
.apo-topbar__info p:nth-child(2)::before { mask-image: url(assets/icons/clock.svg); }
.apo-topbar p:has(a[href^="tel:"])::before { mask-image: url(assets/icons/phone.svg); }
.apo-topbar p.apo-topbar__night::before { mask-image: url(assets/icons/moon.svg); }
.apo-topbar a { display: inline-flex; align-items: center; min-height: 1.5rem; color: inherit; text-decoration: none; }
.apo-topbar a:hover { color: var(--wp--preset--color--forest); text-decoration: underline; text-underline-offset: .2em; }
/* night service: emphasised by weight and icon, not by the green action colour (that marks the current nav section) */
.apo-topbar__night { font-weight: 700; color: var(--wp--preset--color--forest); }
/* mobile: keep tap-to-call + Nachtdienst, drop the info line */
@media (max-width: 781px) { .apo-topbar__info { display: none !important; } .apo-topbar__inner { justify-content: flex-end !important; } }

/* ---------- header ---------- */
/* The whole header template part sticks, shifted up by the topbar (40px): the topbar scrolls away, the bar with logo,
   navigation and Termin stays. A sticky block inside the part could only stick within the part itself.
   Below the WordPress admin bar when logged in. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; }
.wp-site-blocks > header.wp-block-template-part:has(.apo-topbar) { top: calc(var(--wp-admin--admin-bar--height, 0px) - 2.5rem); } /* checkout header has no topbar */
/* no backdrop-filter here: it would turn the header into the containing block of the fixed mobile menu overlay */
.apo-header { background: var(--wp--preset--color--base); box-shadow: inset 0 -1px 0 var(--wp--custom--color--border); z-index: 40; }
.apo-header__bar { max-width: var(--wp--custom--container--header); min-height: 4.5rem; gap: var(--wp--preset--spacing--16); }
.apo-logo { margin: 0; line-height: 0; }
.apo-logo a { display: inline-flex; border-radius: var(--wp--custom--radius--control); }
.apo-logo img { height: 3.5rem; width: auto; } /* 56px: 8px above and below in the 72px bar */
.apo-header__actions { gap: var(--wp--preset--spacing--8); flex: none; }
/* core search in "button only" mode: icon button that expands into a field */
.apo-search-open { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--wp--custom--radius--control); background: transparent; color: var(--wp--preset--color--forest); cursor: pointer; }
.apo-search-open::before { content: ""; width: 1.5rem; height: 1.5rem; background: currentColor; mask: url(assets/icons/search.svg) center / contain no-repeat; }
.apo-search-open:hover { background: var(--wp--preset--color--mint); }
/* search dialog: panel near the top, the page dimmed behind it (opacity on the backdrop, no colour mixing) */
/* .apo-header raises specificity above WP's "body .is-layout-flex > * { margin: 0 }" (the dialog sits in the actions row) */
.apo-header .apo-search-dialog { width: min(100% - 2 * var(--wp--preset--spacing--16), var(--wp--style--global--content-size)); max-width: none; margin: var(--wp--preset--spacing--80) auto auto; padding: 0; border: 0; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--base); color: var(--wp--preset--color--forest); }
.apo-search-dialog::backdrop { background: var(--wp--preset--color--forest); opacity: .6; }
.apo-search-dialog__panel { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--8); padding: var(--wp--preset--spacing--24); }
.apo-search-dialog .apo-header__search { flex: 1; min-width: 0; margin: 0; }
.apo-search-dialog .wp-block-search__input { flex: 1; min-width: 0; }
.apo-search-dialog .wp-block-search__inside-wrapper { gap: var(--wp--preset--spacing--8); padding: 0; border: 0; }
.apo-search-dialog .wp-block-search__input { box-sizing: border-box; height: 3rem; padding: 0 var(--wp--preset--spacing--16); border: 1px solid var(--wp--custom--color--border-strong); border-radius: var(--wp--custom--radius--control); font-size: var(--wp--preset--font-size--md); }
.apo-search-dialog .wp-block-search__button { height: 3rem; margin: 0; padding-inline: var(--wp--preset--spacing--24); border: 0; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--green); color: var(--wp--preset--color--base); font-weight: 700; }
.apo-search-dialog .wp-block-search__button:hover { background: var(--wp--custom--color--green-dark); }
.apo-search-dialog__close { display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: var(--wp--custom--radius--control); background: transparent; color: var(--wp--preset--color--forest); cursor: pointer; }
.apo-search-dialog__close::before { content: ""; width: 1.5rem; height: 1.5rem; background: currentColor; mask: url(assets/icons/x.svg) center / contain no-repeat; }
.apo-search-dialog__close:hover { background: var(--wp--preset--color--mint); }
@media (max-width: 599px) {
	.apo-header .apo-search-dialog { margin-top: var(--wp--preset--spacing--16); }
	.apo-search-dialog__panel { padding: var(--wp--preset--spacing--16); }
	/* field takes the whole row next to the X, "Suchen" goes full width below */
	.apo-search-dialog .wp-block-search__inside-wrapper { flex-wrap: wrap; }
	.apo-search-dialog .wp-block-search__input { flex-basis: 100%; }
	.apo-search-dialog .wp-block-search__button { flex: 1; }
}
.apo-header__termin .wp-block-button__link { padding-inline: var(--wp--preset--spacing--16); }
/* mobile: Termin stays reachable as icon button (only conversion goal, see DESIGN.md) */
@media (max-width: 781px) {
	/* gap 0: the hidden label is still a flex item and the gap would push the icon 4px off centre */
	.apo-header__termin .wp-block-button__link { width: 2.5rem; padding-inline: 0; gap: 0; font-size: 0; }
	.apo-header__termin .wp-block-button__link::before { width: 1.5rem; height: 1.5rem; } /* 24 in 40: 8px around */
}
.apo-cart .wc-block-mini-cart__button { padding: 0; width: 2.5rem; height: 2.5rem; justify-content: center; border-radius: var(--wp--custom--radius--control); color: var(--wp--preset--color--forest); }
.apo-cart .wc-block-mini-cart__button:hover { background: var(--wp--preset--color--mint); opacity: 1; }
/* WC hides the closed mini-cart drawer with opacity only, so its links stay in the tab order.
   visibility removes them; the delay keeps WC's own 0.3s fade-out. */
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
/* drawer controls: theme focus ring instead of WC's blue box-shadow (body raises specificity above WC's rule) */
body .wc-block-components-drawer :is(a, button, .wc-block-components-button):focus-visible { outline: 3px solid var(--apo-focus); outline-offset: 2px; box-shadow: none; }
/* "Warenkorb anzeigen" = theme outline button. WC draws the outline as an inset shadow in currentColor, so colour is enough. */
body .wc-block-components-drawer .wc-block-components-button.is-style-outline { background: var(--wp--preset--color--base); color: var(--wp--preset--color--green); }
body .wc-block-components-drawer .wc-block-components-button.is-style-outline:hover { color: var(--wp--custom--color--green-dark); }
/* WC writes badge colours as inline styles via the Interactivity API; !important is the only override */
.apo-cart .wc-block-mini-cart__badge { background-color: var(--wp--preset--color--green) !important; color: var(--wp--preset--color--base) !important; border: 0; border-radius: var(--wp--custom--radius--pill); font-weight: 700; }

.apo-nav { flex: 1; justify-content: center; }
.apo-nav .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--sm); font-weight: 500; color: var(--wp--preset--color--forest-muted); text-decoration: none; }
.apo-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--forest); }
.apo-nav .current-menu-item > .wp-block-navigation-item__content { background: var(--wp--preset--color--green); color: var(--wp--preset--color--base); font-weight: 700; padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16); border-radius: var(--wp--custom--radius--control); }
.apo-nav .current-menu-item > .wp-block-navigation-item__content:hover { background: var(--wp--custom--color--green-dark); }
.apo-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--24); }
.apo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--24); align-items: flex-start; }
.apo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: var(--wp--preset--spacing--16); }
.apo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--forest); }
.apo-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24); }
.apo-nav .wp-block-navigation__responsive-container-open, .apo-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--forest); }
/* below 1024px the menu is a hamburger: it moves to the far right, after search, cart and Termin */
@media (max-width: 1023px) {
	.apo-nav { order: 1; flex: none; }
	.apo-header__bar > .apo-header__actions { margin-inline-start: auto; } /* beats WP's "body .is-layout-flex > * { margin: 0 }" */
}
/* collapse to hamburger below 1024px (core default is 600px) */
@media (min-width: 600px) and (max-width: 1023px) {
	.apo-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.apo-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ---------- hero ---------- */
/* full-bleed steel band: the one bold, dark moment of the page. The quick-action cards overlap its lower edge. */
.apo-hero { gap: var(--wp--preset--spacing--32); margin-block: 0; }
.apo-hero__text { display: flex; flex-direction: column; }
.apo-hero__text h1 { max-width: 40rem; }
/* display type sits tighter than other headings (~0.95, still on the 8px grid: 72 desktop, 48 mobile);
   its descenders need the extra room before the lead */
.has-display-font-size { line-height: round(nearest, .95em, var(--wp--custom--baseline)); }
.apo-section .apo-hero__text h1 + * { margin-top: var(--wp--preset--spacing--32); }
.apo-hero__media figure { margin: 0; height: 100%; }
.apo-hero__media img { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; object-position: 65% 50%; border-radius: var(--wp--custom--radius--surface); }
/* desktop: the photo takes the height of the text block, which is on the 8px grid; centring the text in a fixed-height row
   would put it on a half step whenever the copy changes */
@media (min-width: 782px) { .apo-hero__media { position: relative; } .apo-hero__media img { position: absolute; inset: 0; min-height: 0; } }

/* Desktop: the steel band ends on a golden line of the first screen (the solid red lines of the „Raster“ overlay):
   61.8 % of the viewport height on normal screens, 38.2 % from 1300px screen height (there 61.8 % would be far too tall).
   The headline size comes from the height that is left so the text fits; extra height goes to the photo.
   Never shorter than its content: on very low screens the band ends below the line. Inside, the 8px grid stays. */
@media (min-width: 782px) {
	/* rounded to 8px: the edge sits at most 4px off the golden line, and everything below stays on the grid */
	.apo-section--hero { --apo-hero-line: 61.8svh; box-sizing: border-box; display: flex; flex-direction: column; min-height: round(nearest, calc(var(--apo-hero-line) - 7rem), var(--wp--custom--baseline)); padding-block: var(--wp--preset--spacing--40); } /* 7rem = topbar 40 + header 72 */
	.apo-section--hero > .apo-hero { flex: 1; width: 100%; } /* centred with auto margins, so it would shrink to its content */
	.apo-hero__text { justify-content: center; }
	/* 23.5rem = header 112 + band padding 80 + eyebrow, lead, buttons and gaps 184; three lines at ~0.95.
	   The preset class sets font-size with !important. */
	.apo-hero__text h1.has-display-font-size {
		font-size: clamp(var(--wp--preset--font-size--heading-s), calc((var(--apo-hero-line) - 23.5rem) / 2.85), var(--wp--preset--font-size--display)) !important;
		line-height: round(down, .95em, var(--wp--custom--baseline));
	}
	.apo-section.apo-section--quick .apo-quick { margin-top: 0; } /* cards below the band; above the -40px overlap rule further down */
	.apo-section.apo-section--quick { padding-top: var(--wp--preset--spacing--24); }
}
@media (min-width: 782px) and (min-height: 1300px) { .apo-section--hero { --apo-hero-line: 38.2svh; } }

/* ---------- quick actions ---------- */
.apo-section--quick .apo-quick { margin-top: calc(-1 * var(--wp--preset--spacing--40)); position: relative; z-index: 1; }

/* ---------- shop search ---------- */
#shop-suche { scroll-margin-top: 6rem; }
.apo-search { margin: 0; }
.apo-search .wp-block-search__inside-wrapper { border: 0; box-shadow: inset 0 0 0 1px var(--wp--custom--color--border-strong); border-radius: calc(var(--wp--custom--radius--control) + var(--wp--preset--spacing--4)); background: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--8); }
.apo-search .wp-block-search__inside-wrapper:focus-within { outline: 3px solid var(--apo-focus); outline-offset: 2px; }
.apo-search .wp-block-search__input { border: 0; background: transparent; min-height: 3rem; padding-inline: var(--wp--preset--spacing--12); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest); }
.apo-search .wp-block-search__input:focus { outline: none; } /* ring is drawn on the wrapper (focus-within) */
.apo-search .wp-block-search__input::placeholder { color: var(--wp--preset--color--forest-muted); }
.apo-search .wp-block-search__button { margin: 0; border: 0; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--steel); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--sm); font-weight: 700; padding-inline: var(--wp--preset--spacing--16); }
@media (max-width: 599px) {
	.apo-search .wp-block-search__inside-wrapper { flex-wrap: wrap; gap: var(--wp--preset--spacing--8); }
	.apo-search .wp-block-search__input { flex-basis: 100%; }
	.apo-search .wp-block-search__button { flex: 1; min-height: 3rem; }
}
.apo-search .wp-block-search__button { white-space: nowrap; }
.apo-search .wp-block-search__button:hover { background: var(--wp--preset--color--forest); }
.apo-chips { gap: var(--wp--preset--spacing--8); }
.apo-chips .wp-block-buttons { gap: var(--wp--preset--spacing--8); }
.apo-chips__label { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--forest-muted); margin: 0 var(--wp--preset--spacing--4) 0 0; }

/* ---------- services ---------- */
/* open list beside the steel panel: hairline rows, no cards, no icons; rows share the panel's height */
.apo-rows { display: grid; grid-auto-rows: 1fr; height: 100%; }
.apo-rows > * { margin: 0; }
.apo-row { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--8); padding-block: var(--wp--preset--spacing--24); box-shadow: inset 0 1px 0 var(--wp--custom--color--border); padding-inline-end: var(--wp--preset--spacing--48); }
.apo-row:last-child { box-shadow: inset 0 1px 0 var(--wp--custom--color--border), inset 0 -1px 0 var(--wp--custom--color--border); }
.apo-row::after { content: ""; position: absolute; right: 0; top: 50%; width: 1.5rem; height: 1.5rem; translate: 0 -50%; background: var(--wp--preset--color--green); mask: url(assets/icons/arrow-right.svg) center / contain no-repeat; }
.apo-row__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); font-weight: 560; line-height: var(--wp--custom--line-height--heading); margin: 0; }
.apo-row__title a { color: var(--wp--preset--color--forest); text-decoration: none; }
.apo-row__title a::after { content: ""; position: absolute; inset: 0; }
.apo-row:hover .apo-row__title a { color: var(--wp--preset--color--green); }
.apo-row:has(a:focus-visible) { outline: 3px solid var(--apo-focus); outline-offset: 2px; }
.apo-row a:focus-visible { outline: none; }
.apo-row__text { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.editor-styles-wrapper .apo-row__title a::after { display: none; }

/* open section: content sits straight on the page ground, hairline above instead of a boxed panel */
.apo-open { box-shadow: inset 0 1px 0 var(--wp--custom--color--border); padding-block: var(--wp--preset--spacing--40) 0; }
/* centred block with a long breath above and below, like a pulled quote between two split sections */
.apo-center { box-shadow: none; text-align: center; padding-block: var(--wp--preset--spacing--40); }
.apo-center > :is(h2, p) { margin-inline: auto; max-width: 36rem; }
.apo-section .apo-open > * + * { margin-top: var(--wp--preset--spacing--16); }

/* ---------- products (homepage collection + shop archive) ---------- */
.apo-products .wc-block-product-template { gap: var(--wp--preset--spacing--16); }
/* WC derives its own auto-fill columns from a fixed gap; pin 2 / 4 columns so cards land on the grid (4 × 288 + 3 × 32 = 1248) */
.apo-products .wc-block-product-template:is(.columns-3, .columns-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 782px) { .apo-products .wc-block-product-template { gap: var(--wp--preset--spacing--32); } .apo-products .wc-block-product-template.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .apo-products .wc-block-product-template.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.apo-products .wc-block-product { background: var(--wp--preset--color--base); position: relative; border-radius: var(--wp--custom--radius--card); overflow: hidden; display: flex; flex-direction: column; }
/* frame as a layer above the image stage (an inset outline is covered by it); adds no height, so the 8pt grid holds */
.apo-products .wc-block-product::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--wp--custom--color--border); border-radius: inherit; pointer-events: none; }
.apo-products .wc-block-product > * { padding-inline: var(--wp--preset--spacing--16); }
.apo-products .wc-block-components-product-image, .apo-products .wp-block-woocommerce-product-image { padding: 0; margin: 0; background: var(--wp--preset--color--cream); height: 9rem; }
.apo-products .wc-block-components-product-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--wp--preset--spacing--16); box-sizing: border-box; }
/* WC sets object-fit/aspect-ratio inline on the image */
.apo-products .wc-block-components-product-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain !important; aspect-ratio: auto !important; }
.apo-products .wp-block-post-title { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: var(--wp--custom--line-height--text); margin: var(--wp--preset--spacing--16) 0 0; min-height: calc(2 * var(--wp--custom--line-height--text)); }
.apo-products .wp-block-post-title a { color: var(--wp--preset--color--forest); text-decoration: none; }
.apo-products .wc-block-components-product-summary { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--forest-muted); margin: var(--wp--preset--spacing--8) 0 0; }
.apo-products .wp-block-woocommerce-product-summary { margin: 0; } /* WC adds 12px below */
.apo-products .wc-block-components-product-summary p { margin: 0; min-height: calc(2 * var(--wp--custom--line-height--text)); }
/* two narrow cards per row: price and Grundpreis need the width, the cart button goes below */
@media (max-width: 599px) { .apo-products .apo-product__buy { flex-wrap: wrap; gap: var(--wp--preset--spacing--8); } }
.apo-product__buy { margin-top: auto; padding-top: var(--wp--preset--spacing--16); padding-bottom: var(--wp--preset--spacing--16); }
.apo-products .wc-block-components-product-price { font-size: var(--wp--preset--font-size--sm); font-weight: 700; color: var(--wp--preset--color--forest); line-height: 3rem; } /* as tall as the cart button next to it */
/* with a Grundpreis line, price and unit price take one 24px line each: together the cart button's 48px */
.apo-products .wc-block-components-product-price:has(.apo-unit-price) { line-height: var(--wp--custom--line-height--text); }
.apo-products .apo-unit-price { line-height: inherit; }
.apo-products .wc-block-components-product-button { margin: 0; }
.apo-products .wc-block-components-product-button .wp-block-button__link { display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--green); color: var(--wp--preset--color--base); font-size: 0; line-height: 0; }
.apo-products .wc-block-components-product-button .wp-block-button__link::before { content: ""; width: 1.25rem; height: 1.25rem; background: currentColor; mask: url(assets/icons/plus.svg) center / contain no-repeat; }
.apo-products .wc-block-components-product-button .wp-block-button__link:hover { background: var(--wp--custom--color--green-dark); }
/* drawer replaces WC's "Warenkorb anzeigen" link; hide its wrapper too or it shifts the row */
.apo-products .wc-block-components-product-button > span { display: none; }
/* the hidden label is a second grid row and pushes the icon up; aria-label names the button */
.apo-products .wc-block-components-product-button .wp-block-button__link > span { display: none; }

/* ---------- shop archive ---------- */
.apo-archive__head { margin-bottom: var(--wp--preset--spacing--24); }
.apo-archive__head .wp-block-query-title { margin-top: var(--wp--preset--spacing--16); }
/* Shop: categories in one product column (288) on the left, filters and products (3 × 288) on the right; stacked below 1024px */
.apo-shop { display: grid; gap: var(--wp--preset--spacing--32); }
.apo-shop > * { margin: 0; min-width: 0; }
@media (min-width: 1024px) { .apo-shop { grid-template-columns: calc((100% - 3 * var(--wp--preset--spacing--32)) / 4) 1fr; align-items: start; } }
.apo-shop__title { display: flex; align-items: center; min-height: 4rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: var(--wp--custom--line-height--text); color: var(--wp--preset--color--forest-muted); margin: 0; }
/* title as tall as the filter bar (64) and centred on it; the list starts with the results line next to it (64 + 16) */
.apo-section .apo-shop .apo-shop__title + * { margin-top: var(--wp--preset--spacing--16); } /* beats the section's heading + * rule */
.apo-shop__all, .apo-shop__cats, .apo-shop__cats li { margin: 0; padding: 0; list-style: none; }
/* text flush with the column edge; the highlight reaches 16 into the gutter on both sides */
.apo-shop__all a, .apo-shop__cats a { display: block; margin-inline: calc(-1 * var(--wp--preset--spacing--16)); padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16); border-radius: var(--wp--custom--radius--control); font-size: var(--wp--preset--font-size--sm); font-weight: 500; line-height: var(--wp--custom--line-height--text); color: var(--wp--preset--color--forest); text-decoration: none; }
.apo-shop__all a:hover, .apo-shop__cats a:hover { background: var(--wp--preset--color--cream); }
/* current category (core marks it), or the whole shop on /shop/ */
.apo-shop__cats .current-cat > a, .post-type-archive-product .apo-shop__all a { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--forest); font-weight: 700; }
.apo-shop__cats .children { list-style: none; margin: 0; padding-left: var(--wp--preset--spacing--16); }
/* stacked: the categories become one row of chips that scrolls sideways */
@media (max-width: 1023px) {
	.apo-shop__nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--8); overflow-x: auto; scrollbar-width: none; }
	.apo-section .apo-shop .apo-shop__nav > * { margin: 0; }
	.apo-shop__nav::-webkit-scrollbar { display: none; }
	.apo-shop__title { min-height: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.apo-shop__cats, .apo-shop__cats .children { display: flex; gap: var(--wp--preset--spacing--8); padding: 0; }
	.apo-shop__all a, .apo-shop__cats a { margin-inline: 0; white-space: nowrap; padding: var(--wp--preset--spacing--12); border-radius: var(--wp--custom--radius--pill); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border); background: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--xs); font-weight: 600; }
}
/* filters: search fills the row, sorting next to it (below it on small screens) */
/* on the product columns: search over two, sorting over the third (stacked below 782px) */
.apo-archive__bar { gap: var(--wp--preset--spacing--16); margin-bottom: var(--wp--preset--spacing--16); }
@media (min-width: 782px) { .apo-shop .apo-archive__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--32); } .apo-archive__bar .apo-search { grid-column: span 2; } }
.apo-archive__bar .apo-search { flex: 1 1 24rem; }
.apo-archive__bar .wp-block-search__button { width: 6rem; } /* fixed, so the field ends on the grid too */
/* sorting in the same 64px frame as the search field next to it */
.apo-archive__bar .wc-block-catalog-sorting { margin: 0; }
@media (max-width: 599px) { .apo-archive__bar .wc-block-catalog-sorting { flex-basis: 100%; } }
.apo-archive__bar .woocommerce-ordering { position: relative; margin: 0; }
.apo-archive__bar .woocommerce-ordering::after { content: ""; position: absolute; top: 50%; right: var(--wp--preset--spacing--16); width: 1.25rem; height: 1.25rem; margin-top: -.625rem; background: var(--wp--preset--color--forest); mask: url(assets/icons/chevron-down.svg) center / contain no-repeat; pointer-events: none; }
.apo-archive__bar select.orderby { appearance: none; field-sizing: fixed; width: 100%; height: 4rem; border: 0; box-shadow: inset 0 0 0 1px var(--wp--custom--color--border-strong); border-radius: calc(var(--wp--custom--radius--control) + var(--wp--preset--spacing--4)); background: var(--wp--preset--color--base); padding: 0 var(--wp--preset--spacing--48) 0 var(--wp--preset--spacing--16); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest); cursor: pointer; }
.apo-shop__main .woocommerce-result-count { margin: 0 0 var(--wp--preset--spacing--24); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.wc-block-breadcrumbs, .woocommerce-breadcrumb { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.wc-block-breadcrumbs a { color: inherit; text-decoration: none; }
.apo-crumb-sep { margin-inline: var(--wp--preset--spacing--8); }
/* mobile: one line; a long product name scrolls sideways with the finger instead of wrapping */
@media (max-width: 781px) {
	.woocommerce-breadcrumb { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
	.woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
}
.wc-block-breadcrumbs a:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--32); font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; border-radius: var(--wp--custom--radius--control); }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--green); color: var(--wp--preset--color--base); }

/* ---------- WooCommerce classic forms (Mein Konto, Passwort) ---------- */
/* body raises specificity above WC's legacy rules, which bring their own frame, field and red colours */
body .woocommerce :is(form.login, form.register, form.lost_reset_password) { margin-block: var(--wp--preset--spacing--24); padding: var(--wp--preset--spacing--24); background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--card); }
body .woocommerce form .form-row :is(.input-text, select, textarea) { border: 1px solid var(--wp--custom--color--border-strong); border-radius: var(--wp--custom--radius--control); }
body .woocommerce form .form-row .required { color: var(--wp--custom--color--error); }
.woocommerce-product-gallery__image--placeholder, img.woocommerce-placeholder { border-color: var(--wp--custom--color--border) !important; } /* WC sets the placeholder frame with !important */

/* ---------- WooCommerce blocks: cart, checkout, notices ---------- */
/* WC's own separator variable: frames of totals and order summary follow it */
:root { --wc-separator-color: var(--wp--custom--color--border); }
/* body (plus the attribute WC uses) lifts specificity just above WC's rules */
body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
body .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-quantity-selector { border-color: var(--wp--custom--color--border-strong); border-radius: var(--wp--custom--radius--control); }
/* a 20px checkbox with the 10px control radius would read as a circle: half of it */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border-radius: calc(var(--wp--custom--radius--control) / 2); }
body .wp-block-woocommerce-checkout-order-summary-block { border-radius: var(--wp--custom--radius--card); }
body .wc-blocks-components-select .wc-blocks-components-select__container { border-radius: var(--wp--custom--radius--control); }
/* weights (DESIGN.md › Typography): 400 read, 500 navigate, 600 title, 700 act and signal */
body :is(.wc-block-formatted-money-amount, .woocommerce-Price-amount) { font-weight: 700; }
body del :is(.wc-block-formatted-money-amount, .woocommerce-Price-amount) { font-weight: 400; }
body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
body .wc-block-components-totals-item__label,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text,
body .woocommerce .woocommerce-Reviews .comment-reply-title { font-weight: 600; }
body.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 500; color: var(--wp--preset--color--forest-muted); } /* the woocommerce class sits on body itself */
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--forest); }
/* minimal tabs fade the inactive tab to 65 % (3.3:1); colour carries the state instead */
html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li { opacity: 1; }
/* uppercase table labels in the cart take the eyebrow style, the only uppercase label in the system */
body .wc-block-cart-items__header :is(th, span),
body .wc-block-cart .wc-block-cart__totals-title { font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .16em; color: var(--wp--preset--color--forest-muted); }
/* WC sizes these relative to their parent (0.9em, 13px); pin them to the scale */
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { font-size: var(--wp--preset--font-size--sm); font-weight: 700; }
body .wc-blocks-components-select .wc-blocks-components-select__label { font-size: var(--wp--preset--font-size--xs); }
body .wc-block-components-address-card { border-color: var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--card); }
/* WC fixes its step titles at 500; headings use the theme weight */
body .wc-block-components-title.wc-block-components-checkout-step__title { font-weight: 560; }
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity { border-radius: var(--wp--custom--radius--pill); }
/* notices: success = mint/green, info and warning = sky/steel, error = white/error. No extra tints. */
body .wc-block-components-notice-banner { color: var(--wp--preset--color--forest); background: var(--wp--preset--color--base); border-color: var(--wp--custom--color--border-strong); border-radius: var(--wp--custom--radius--card); }
body .wc-block-components-notice-banner > svg { background-color: var(--wp--preset--color--forest); }
body .wc-block-components-notice-banner.is-success { background: var(--wp--preset--color--mint); border-color: var(--wp--preset--color--green); }
body .wc-block-components-notice-banner.is-success > svg { background-color: var(--wp--preset--color--green); }
body .wc-block-components-notice-banner:is(.is-info, .is-warning) { background: var(--wp--preset--color--sky); border-color: var(--wp--preset--color--steel); }
body .wc-block-components-notice-banner:is(.is-info, .is-warning) > svg { background-color: var(--wp--preset--color--steel); }
body .wc-block-components-notice-banner.is-error { background: var(--wp--preset--color--base); border-color: var(--wp--custom--color--error); }
body .wc-block-components-notice-banner.is-error > svg { background-color: var(--wp--custom--color--error); }

/* 8pt grid in cart, checkout and mini-cart: WC sets line heights as factors (1.4 → 22.4, 17.92, 28) in dozens of
   deeply nested rules; one important rule puts every text line back on the token */
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wc-block-mini-cart__drawer) :is(a, p, h2, h3, span, div, label, th, td, li, legend, button) { line-height: var(--wp--custom--line-height--text) !important; }
body .wc-block-cart__main .wc-block-cart-items th { padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) 0; } /* 8 + 16 + 16 = 40 */
body .wc-block-components-quantity-selector { box-sizing: border-box; height: 2.5rem; }
/* hairlines inside the boxes (WC draws 1px borders that add to the height) */
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-wrapper { border-top: 0; }
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-wrapper:is([class*="coupon-form-block"], :has(> .wc-block-components-totals-footer-item)) { box-shadow: inset 0 1px 0 var(--wc-separator-color); }
body .wc-block-cart table.wc-block-cart-items { border-bottom: 0; border-spacing: 0; box-shadow: inset 0 -1px 0 var(--wc-separator-color); }
body .wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block { border-top: 0; box-shadow: inset 0 1px 0 var(--wc-separator-color); }
body .wc-block-cart .wp-block-woocommerce-cart-order-summary-block { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--wc-separator-color); }
body .wc-block-cart table.wc-block-cart-items td { border-top: 0; box-shadow: inset 0 1px 0 var(--wc-separator-color); padding-block: var(--wp--preset--spacing--24); }
body .wc-block-cart .wc-block-cart__totals-title { padding-bottom: var(--wp--preset--spacing--16); } /* 40 like the table head next to it */
/* narrow: each line is a grid row; 24 above and below like on desktop, the cells add nothing */
@media (max-width: 699px) {
	body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { padding-block: var(--wp--preset--spacing--24); box-shadow: inset 0 1px 0 var(--wc-separator-color); }
	body .wc-block-cart table.wc-block-cart-items td { padding-block: 0; box-shadow: none; }
}
/* cart line: name, price, details, quantity 8 apart */
body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap { gap: var(--wp--preset--spacing--8); }
body .wc-block-cart-item__wrap > * { margin: 0; }
body .wc-block-components-product-metadata { gap: var(--wp--preset--spacing--8); }
/* totals: WC puts a 4px gap between a line and its (often empty) description */
body .wc-block-components-totals-item { row-gap: 0; }
body .wc-block-components-totals-shipping__via { font-size: var(--wp--preset--font-size--xs); }
/* checkout: fields 48 (WC: 50), checkbox rows 24, separators drawn inside, spacing in 8s */
body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-blocks-components-select .wc-blocks-components-select__container,
body .wc-blocks-components-select .wc-blocks-components-select__select { box-sizing: border-box; height: 3rem; }
body .wc-block-checkout .wc-block-checkout__guest-checkout-notice { margin-top: var(--wp--preset--spacing--8); }
body .wc-block-checkout .wc-block-components-address-form__address_2-toggle { margin-top: var(--wp--preset--spacing--16); }
body .wc-block-components-checkbox label { display: flex; }
body .wc-block-checkout .wc-block-checkout__terms { border-top: 0; box-shadow: inset 0 1px 0 var(--wc-separator-color); }
body .wc-block-checkout .wc-block-checkout__actions { margin-bottom: var(--wp--preset--spacing--40); }
body .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block { display: flow-root; border: 0; } /* flow-root: without the border the title margin would fall out */
@container (min-width: 920px) { body .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block { box-shadow: inset 0 0 0 1px var(--wc-separator-color); } } /* WC frames it only this wide */
body .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block { border-top: 0; box-shadow: inset 0 1px 0 var(--wc-separator-color); }
body .wc-block-components-order-summary .wc-block-components-order-summary-item { padding-bottom: 0; }
body .wc-block-components-order-summary .wc-block-components-order-summary-item__description { padding-top: 0; gap: var(--wp--preset--spacing--8); }
body .wc-block-components-order-summary .wc-block-components-order-summary-item__description > * { margin: 0; }
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity { min-width: 1.5rem; height: 1.5rem; }
body .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price { padding-top: 0; }
body .wc-block-components-address-form > .wc-block-components-text-input,
body .wc-block-components-address-form > .wc-block-components-state-input,
body .wc-block-components-address-form > .wc-blocks-components-select { margin-top: var(--wp--preset--spacing--16); }
body .wc-block-components-address-form > :first-child { margin-top: 0; }
/* Versand | Abholung toggle: WC's 2px border becomes an inset line, the icon 24; options are 40 (or 64 when the label wraps) */
body .wc-block-checkout .wc-block-checkout__shipping-method-option { border: 0; padding-block: var(--wp--preset--spacing--8); }
body .wc-block-checkout .wc-block-checkout__shipping-method-option--selected { box-shadow: inset 0 0 0 2px var(--wp--preset--color--forest); }
body .wc-block-checkout .wc-block-checkout__shipping-method-option svg { width: 1.5rem; height: 1.5rem; }
/* narrow checkout repeats the order summary above the button: framed inside, 40 below */
body .wc-block-checkout .checkout-order-summary-block-fill-wrapper { padding-bottom: var(--wp--preset--spacing--40); }
body .wc-block-checkout .checkout-order-summary-block-fill { border: 0; box-shadow: inset 0 0 0 1px var(--wc-separator-color); }
/* narrow checkout: the folded order summary bar, 16 + 32 + 16 */
body .wc-block-checkout:is(.is-mobile, .is-small) .wc-block-components-checkout-order-summary__title { padding-block: var(--wp--preset--spacing--16); border-block: 0; box-shadow: inset 0 1px 0 var(--wc-separator-color), inset 0 -1px 0 var(--wc-separator-color); }
/* empty cart: WooCommerce spaces its blocks in em; put them on the 8px grid */
.wp-block-woocommerce-empty-cart-block > * { margin-block: 0; }
.wp-block-woocommerce-empty-cart-block > * + * { margin-top: var(--wp--preset--spacing--24); }
.wp-block-woocommerce-empty-cart-block > .wp-block-separator + * { margin-top: var(--wp--preset--spacing--40); }

/* ---------- single product ---------- */
.apo-product .wc-block-breadcrumbs { margin-bottom: var(--wp--preset--spacing--24); }
.apo-product__media { background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--surface); padding: var(--wp--preset--spacing--40); }
.apo-product__media { container-type: inline-size; }
/* square photo whose side is rounded down to 8px (the column width is fluid) */
.apo-product__media :is(.woocommerce-product-gallery__image, .woocommerce-product-gallery__image--placeholder) { box-sizing: border-box; height: round(down, 100cqw, var(--wp--custom--baseline)); }
.apo-product__media img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--wp--custom--radius--card); }
.apo-product__info > * { margin-block: 0; }
.apo-product__info .is-style-eyebrow + h1 { margin-top: var(--wp--preset--spacing--8); }
.apo-product__info h1 + * { margin-top: var(--wp--preset--spacing--16); }
.apo-product__info .wc-block-components-product-price { font-weight: 700; }
.apo-product__info .wp-block-post-excerpt, .apo-product__info .wp-block-woocommerce-add-to-cart-form { margin-top: var(--wp--preset--spacing--24); }
.apo-product__info .apo-meta { margin-top: var(--wp--preset--spacing--16); }
.apo-product__info .is-style-eyebrow a { color: inherit; text-decoration: none; }
.apo-product__info .apo-brand a { color: var(--wp--preset--color--green); } /* brand leads to all its products */
.apo-product__info .apo-brand a:hover { text-decoration: underline; }
/* under the price: VAT, shipping, delivery time (inc/product-page.php) */
.apo-product__info .apo-price-notes { margin-top: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--xs); line-height: var(--wp--custom--line-height--text); color: var(--wp--preset--color--forest-muted); }
.apo-price-notes a { color: inherit; }
.apo-product__info .apo-leaflet { margin-top: var(--wp--preset--spacing--16); font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.apo-leaflet a { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--8); color: var(--wp--preset--color--green); text-decoration: none; }
.apo-leaflet a::before { content: ""; width: 1.25rem; height: 1.25rem; background: currentColor; mask: url(assets/icons/file-down.svg) center / contain no-repeat; }
.apo-leaflet a:hover { text-decoration: underline; }
.apo-product form.cart .quantity { margin: 0; }
/* WC clearfix pseudo-elements would count as flex items and add a gap */
.apo-product form.cart::before, .apo-product form.cart::after { display: none; }
.apo-product .comment-form .comment-form-cookies-consent label { display: inline; margin: 0 0 0 var(--wp--preset--spacing--8); }
.apo-product .comment-form label { display: block; margin-bottom: var(--wp--preset--spacing--8); }
.apo-product .comment-form :is(input[type="text"], input[type="email"]) { box-sizing: border-box; width: 100%; max-width: 28rem; }
.apo-product .comment-form > p { margin-block: 0 var(--wp--preset--spacing--16); }
.apo-product form.cart { display: flex; gap: var(--wp--preset--spacing--16); align-items: stretch; }
.apo-product form.cart .quantity input { box-sizing: border-box; width: 4.5rem; height: 3rem; min-height: 0; text-align: center; } /* 48 including the border */
.apo-product form.cart .single_add_to_cart_button { box-sizing: border-box; height: 3rem; min-height: 0; padding-block: 0; padding-inline: var(--wp--preset--spacing--24); border-radius: var(--wp--custom--radius--control); font-size: var(--wp--preset--font-size--sm); font-weight: 700; }
.apo-product .wp-block-woocommerce-product-details { margin-top: var(--wp--preset--spacing--48); }
.apo-product .wp-block-woocommerce-product-details h2 { font-size: var(--wp--preset--font-size--xxl); margin-block: var(--wp--preset--spacing--24) var(--wp--preset--spacing--16); }
.apo-product .woocommerce-tabs ul.tabs li a { font-size: var(--wp--preset--font-size--sm); }
/* tab bar on the grid: 40px tabs, the active line drawn inside (WC adds a 2px border), 24 below */
html body .apo-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs { display: flex; flex-wrap: wrap; margin: 0 0 var(--wp--preset--spacing--24); } /* flex: no whitespace gaps between wrapped rows */
html body .apo-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li { margin: 0; border: 0; }
html body .apo-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active { box-shadow: inset 0 -2px 0 currentColor; }
/* zoom button on the photo: 40, like the other icon buttons */
html body.woocommerce .apo-product div.images .woocommerce-product-gallery__trigger { width: 2.5rem; height: 2.5rem; }
.apo-product__media .woocommerce-product-gallery__image a { display: block; height: 100%; } /* follows the rounded square */
html body.woocommerce .apo-product__media div.images img { height: 100%; }
/* description text: margins on the grid (WC and the browser use em) */
.apo-product .woocommerce-Tabs-panel > * { margin-block: 0; }
.apo-product .woocommerce-Tabs-panel > * + * { margin-top: var(--wp--preset--spacing--16); }
.apo-product .woocommerce-Tabs-panel > * + :is(h3, h4) { margin-top: var(--wp--preset--spacing--24); }
/* Zusätzliche Informationen: label | value rows with a hairline, no italics (WooCommerce stacks and italicises them) */
body .apo-product table.shop_attributes { display: table; width: 100%; margin: 0; border: 0; border-collapse: collapse; }
body .apo-product table.shop_attributes tr { display: table-row; background: none; }
body .apo-product table.shop_attributes tr:nth-child(n) :is(th, td) { display: table-cell; width: auto; padding: var(--wp--preset--spacing--8) 0; border: 0; box-shadow: inset 0 -1px 0 var(--wp--custom--color--border); background: none; text-align: left; vertical-align: top; font-size: var(--wp--preset--font-size--sm); font-style: normal; background: none; line-height: var(--wp--custom--line-height--text); }
body .apo-product table.shop_attributes tr:nth-child(n) th { width: 12rem; padding-right: var(--wp--preset--spacing--16); font-weight: 600; }
.apo-product table.shop_attributes td p { margin: 0; }
.apo-product .apo-related { margin-top: var(--wp--preset--spacing--64); }
.apo-product .apo-related > h2 { margin: 0 0 var(--wp--preset--spacing--24); }
.wp-block-search__label { margin-bottom: var(--wp--preset--spacing--8); }

/* ---------- blog: Gesundheitswissen (home.html) and articles (single.html) ---------- */
/* list: cards like the team page, photo 400 × 248 (golden) */
.apo-blog .wp-block-post { display: flex; flex-direction: column; overflow: hidden; background: var(--wp--preset--color--base); outline: 1px solid var(--wp--custom--color--border); outline-offset: -1px; border-radius: var(--wp--custom--radius--card); }
.apo-blog__photo { height: 15.5rem; margin: 0; }
.apo-blog__photo :is(a, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.apo-blog__body { display: flex; flex: 1; flex-direction: column; padding: var(--wp--preset--spacing--24); }
.apo-blog__body > * { margin-block: 0; }
.apo-blog__body .is-style-eyebrow + .apo-blog__title { margin-top: var(--wp--preset--spacing--8); }
.apo-blog__body :is(.is-style-eyebrow, .apo-blog__title) a { color: inherit; text-decoration: none; }
.apo-blog__title { font-size: var(--wp--preset--font-size--xl); line-height: round(up, 1.2em, var(--wp--custom--baseline)); } /* 32: card titles often wrap */
.apo-blog__title a:hover { color: var(--wp--preset--color--green); }
.apo-blog__excerpt { display: flex; flex: 1; flex-direction: column; margin-top: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.apo-blog__excerpt .wp-block-post-excerpt__excerpt { margin: 0; }
/* "Artikel ansehen" sits at the bottom of every card, styled as the text link with arrow */
.apo-blog__excerpt .wp-block-post-excerpt__more-text { margin: auto 0 0; padding-top: var(--wp--preset--spacing--16); }
.apo-blog__excerpt .wp-block-post-excerpt__more-link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--8); min-height: 3rem; font-weight: 700; color: var(--wp--preset--color--green); text-decoration: none; }
.apo-blog__excerpt .wp-block-post-excerpt__more-link::after { content: ""; width: 1rem; height: 1rem; background: currentColor; mask: url(assets/icons/arrow-right.svg) center / contain no-repeat; }
.apo-blog__excerpt .wp-block-post-excerpt__more-link:hover { color: var(--wp--custom--color--green-dark); }
.apo-blog .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--40); }

/* article */
.apo-single__head > * { margin-block: 0; }
.apo-single__head .is-style-eyebrow a { color: inherit; text-decoration: none; }
.apo-single__head .is-style-eyebrow + h1 { margin-top: var(--wp--preset--spacing--8); }
.apo-single__head h1 + * { margin-top: var(--wp--preset--spacing--16); }
.apo-single .apo-single__photo { height: 30rem; margin-top: var(--wp--preset--spacing--32); } /* 480 = 768 / φ */
.apo-single__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--radius--surface); }
.apo-single .apo-article { margin-top: var(--wp--preset--spacing--48); }
.apo-single .apo-single__back { margin-top: var(--wp--preset--spacing--48); }
/* table of contents left (sticky under the 72px header), text in reading width on the right */
.apo-article { display: grid; gap: var(--wp--preset--spacing--32); grid-template-columns: minmax(0, var(--wp--style--global--content-size)); }
@media (min-width: 1024px) {
	.apo-article:has(.apo-toc) { grid-template-columns: 17rem minmax(0, var(--wp--style--global--content-size)); gap: var(--wp--preset--spacing--64); align-items: start; }
	.apo-toc { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem); }
}
.apo-toc { padding: var(--wp--preset--spacing--24); background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--card); }
.apo-toc__title { margin: 0; }
.apo-toc__list { margin: var(--wp--preset--spacing--8) 0 0; padding: 0; list-style: none; }
.apo-toc__item a { display: block; padding-block: var(--wp--preset--spacing--4); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest); text-decoration: none; }
.apo-toc__item a:hover { color: var(--wp--preset--color--green); text-decoration: underline; text-underline-offset: .2em; }
.apo-toc__item--h3 a { padding-inline-start: var(--wp--preset--spacing--16); color: var(--wp--preset--color--forest-muted); }
.apo-article__body > * { margin-block: 0; }
.apo-article__body > * + * { margin-top: var(--wp--preset--spacing--16); }
.apo-article__body > * + :is(h2, h3) { margin-top: var(--wp--preset--spacing--40); }
.apo-article__body h2 { font-size: var(--wp--preset--font-size--xxl); }
.apo-article__body :is(h2, h3) { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem); } /* below the sticky header */
.apo-article__body :is(h2, h3) + * { margin-top: var(--wp--preset--spacing--8); }
.apo-article__body ul { padding-inline-start: var(--wp--preset--spacing--24); }

/* ---------- page hero (subpages, as on the stage): full-width mint band right under the header ---------- */
.apo-main:has(.apo-page-hero) { padding-top: 0; }
.apo-page-hero { margin-block: 0; padding-block: var(--wp--preset--spacing--32); background: transparent; box-shadow: inset 0 -1px 0 var(--wp--custom--color--border); } /* page ground, a line underneath: the mint band carried no content */
.apo-page-hero.has-mint-background-color { background-color: transparent !important; }
@media (min-width: 782px) { .apo-page-hero { padding-block: var(--wp--preset--spacing--48); } }
.apo-page-hero__inner > * { margin-block: 0; }
.apo-page-hero__inner > :is(h1, .apo-lead) { max-width: 48rem; }
.apo-page-hero__inner .is-style-eyebrow + h1 { margin-top: var(--wp--preset--spacing--8); }
.apo-page-hero__inner h1 + * { margin-top: var(--wp--preset--spacing--24); }
.apo-page-hero__inner .wc-block-breadcrumbs + h1 { margin-top: var(--wp--preset--spacing--16); }
.apo-page-hero__inner .wc-block-breadcrumbs:empty { display: none; }
.apo-page-hero + * { margin-top: var(--wp--preset--spacing--40) !important; } /* above the flow layout's block gap */

/* ---------- team (page „Team“, patterns/team.php) ---------- */
.apo-team .wp-block-post { display: flex; flex-direction: column; overflow: hidden; background: var(--wp--preset--color--base); outline: 1px solid var(--wp--custom--color--border); outline-offset: -1px; border-radius: var(--wp--custom--radius--card); }
/* 248 = 400 / φ: at full width the photo is a golden landscape rectangle */
.apo-team__photo { height: 15.5rem; margin: 0; }
.apo-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.apo-team__photo--empty { display: grid; place-items: center; background: var(--wp--preset--color--base); box-shadow: inset 0 -1px 0 var(--wp--custom--color--border); }
.apo-team__photo--empty .apo-iconcircle { width: 5.5rem; height: 5.5rem; background: var(--wp--preset--color--cream); }
.apo-team__photo--empty .apo-iconcircle img { width: 3rem; height: 3rem; }
.apo-team__body { padding: var(--wp--preset--spacing--24); }
.apo-team__body > * { margin-block: 0; }
.apo-team__body .is-style-eyebrow + .apo-team__name { margin-top: var(--wp--preset--spacing--8); }
.apo-team__name { font-size: var(--wp--preset--font-size--xl); line-height: round(up, 1.2em, var(--wp--custom--baseline)); }
.apo-team__text { margin-top: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.apo-team__text > * { margin-block: 0; }

/* ---------- seltene Krankheiten (hub patterns/rare-diseases.php, disease pages single-apo_disease.html) ---------- */
.apo-single .wc-block-breadcrumbs { margin-bottom: var(--wp--preset--spacing--24); }
.apo-rare-list { margin-top: var(--wp--preset--spacing--64); }
.apo-rare-list > * { margin-block: 0; }
.apo-rare-list > h2 + * { margin-top: var(--wp--preset--spacing--24); }
.apo-rare-list > * + :is(p, .wp-block-buttons) { margin-top: var(--wp--preset--spacing--24); }
.apo-rare .apo-blog__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); font-weight: 560; } /* h3 in the list, styled like the article cards */
.apo-single .apo-single__head .apo-lead { margin-top: var(--wp--preset--spacing--16); }
/* support: four services as cards, then the steel contact panel */
.apo-rare-support { margin-top: var(--wp--preset--spacing--64); }
.apo-rare-support > * { margin-block: 0; }
.apo-rare-support > .is-style-eyebrow + h2 { margin-top: var(--wp--preset--spacing--8); }
.apo-rare-support > h2 + * { margin-top: var(--wp--preset--spacing--24); }
.apo-feature { position: relative; overflow: hidden; isolation: isolate; padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--24) var(--wp--preset--spacing--64); background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--card); }
/* the tile's icon as a large mint watermark in the bottom-right corner, behind the text (decorative, no alt text needed) */
.apo-feature::after { content: ""; position: absolute; z-index: -1; right: calc(-1 * var(--wp--preset--spacing--16)); bottom: calc(-1 * var(--wp--preset--spacing--16)); width: 8rem; height: 8rem; background: var(--wp--preset--color--mint); mask: var(--apo-feature-icon) center / contain no-repeat; }
.apo-feature--snowflake { --apo-feature-icon: url(assets/icons/snowflake.svg); }
.apo-feature--message-circle { --apo-feature-icon: url(assets/icons/message-circle.svg); }
.apo-feature--activity { --apo-feature-icon: url(assets/icons/activity.svg); }
.apo-feature--clipboard-check { --apo-feature-icon: url(assets/icons/clipboard-check.svg); }
.apo-feature > * { margin-block: 0; }
.apo-feature__title { hyphens: auto; font-size: var(--wp--preset--font-size--lg); line-height: var(--wp--custom--line-height--text); }
.apo-feature__text { margin-top: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--forest-muted); }
.apo-rare-contact { margin-top: var(--wp--preset--spacing--24); }
.apo-rare-contact > * { margin-block: 0; }
.apo-rare-contact > h2 + * { margin-top: var(--wp--preset--spacing--16); }
.apo-rare-contact .apo-muted { max-width: 45rem; }
.apo-rare-contact .apo-actions { margin-top: var(--wp--preset--spacing--32); }
.apo-rare-contact :is(.apo-btn-phone, .apo-btn-mail) .wp-block-button__link::before { content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor; mask: center / contain no-repeat; }
.apo-rare-contact .apo-btn-phone .wp-block-button__link::before { mask-image: url(assets/icons/phone.svg); }
.apo-rare-contact .apo-btn-mail .wp-block-button__link::before { mask-image: url(assets/icons/mail.svg); }
/* the e-mail address is wider than a 320px screen: let it break instead of widening the page */
.apo-rare-contact .apo-btn-mail { max-width: 100%; }
.apo-rare-contact .apo-btn-mail .wp-block-button__link { white-space: normal; overflow-wrap: anywhere; }
.apo-rare-contact__order { margin-top: var(--wp--preset--spacing--24) !important; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--sky); }
.apo-rare-contact__order a { color: var(--wp--custom--color--sun); font-weight: 700; }
.apo-rare-contact__order a:hover { color: var(--wp--custom--color--sun-light); }

/* ---------- about ---------- */
.apo-infocard { display: flex; flex-direction: column; background: var(--wp--preset--color--steel); color: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--24); }
.apo-infocard__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); font-weight: 560; color: var(--wp--preset--color--base); }
.apo-infocard p { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--sky); }
:is(.has-steel-background-color, .apo-infocard) .is-style-link .wp-block-button__link { color: var(--wp--custom--color--sun); }
:is(.has-steel-background-color, .apo-infocard) .is-style-link .wp-block-button__link:hover { color: var(--wp--custom--color--sun-light); }
.apo-infocard .wp-block-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--16); }

/* ---------- cookie banner (plugin cookie-consent-gtm): the plugin's banner in the theme's look ---------- */
/* the library's variables set to theme tokens; flat like the rest of the site, body font, theme focus ring.
   The plugin prints its CSS late in the footer, so these rules carry body for the higher specificity. */
body #cc-main {
	--cc-font-family: var(--wp--preset--font-family--body);
	--cc-modal-border-radius: var(--wp--custom--radius--card);
	--cc-btn-border-radius: var(--wp--custom--radius--control);
	--cc-pm-toggle-border-radius: var(--wp--custom--radius--pill);
	--cc-bg: var(--wp--preset--color--base);
	--cc-primary-color: var(--wp--preset--color--forest);
	--cc-secondary-color: var(--wp--preset--color--forest-muted);
	--cc-link-color: var(--wp--preset--color--green);
	--cc-btn-primary-bg: var(--wp--preset--color--green);
	--cc-btn-primary-color: var(--wp--preset--color--base);
	--cc-btn-primary-border-color: var(--wp--preset--color--green);
	--cc-btn-primary-hover-bg: var(--wp--custom--color--green-dark);
	--cc-btn-primary-hover-color: var(--wp--preset--color--base);
	--cc-btn-primary-hover-border-color: var(--wp--custom--color--green-dark);
	--cc-btn-secondary-bg: var(--wp--preset--color--base);
	--cc-btn-secondary-color: var(--wp--preset--color--green);
	--cc-btn-secondary-border-color: var(--wp--preset--color--green);
	--cc-btn-secondary-hover-bg: var(--wp--preset--color--base);
	--cc-btn-secondary-hover-color: var(--wp--custom--color--green-dark);
	--cc-btn-secondary-hover-border-color: var(--wp--custom--color--green-dark);
	--cc-separator-border-color: var(--wp--custom--color--border);
	--cc-toggle-on-bg: var(--wp--preset--color--green);
	--cc-toggle-off-bg: var(--wp--custom--color--border-strong);
	--cc-toggle-on-knob-bg: var(--wp--preset--color--base);
	--cc-toggle-off-knob-bg: var(--wp--preset--color--base);
	--cc-toggle-enabled-icon-color: var(--wp--preset--color--green);
	--cc-toggle-disabled-icon-color: var(--wp--custom--color--border-strong);
	--cc-toggle-readonly-bg: var(--wp--custom--color--border-strong);
	--cc-toggle-readonly-knob-bg: var(--wp--preset--color--base);
	--cc-toggle-readonly-knob-icon-color: var(--wp--custom--color--border-strong);
	--cc-section-category-border: var(--wp--custom--color--border);
	--cc-cookie-category-block-bg: var(--wp--preset--color--cream);
	--cc-cookie-category-block-border: var(--wp--custom--color--border);
	--cc-cookie-category-block-hover-bg: var(--wp--preset--color--mint);
	--cc-cookie-category-block-hover-border: var(--wp--custom--color--border);
	--cc-cookie-category-expanded-block-bg: var(--wp--preset--color--cream);
	--cc-cookie-category-expanded-block-hover-bg: var(--wp--preset--color--mint);
	--cc-overlay-bg: var(--wp--custom--color--overlay);
	--cc-webkit-scrollbar-bg: var(--wp--custom--color--border);
	--cc-webkit-scrollbar-hover-bg: var(--wp--custom--color--border-strong);
	--cc-footer-bg: var(--wp--preset--color--cream);
	--cc-footer-color: var(--wp--preset--color--forest-muted);
	--cc-footer-border-color: var(--wp--custom--color--border);
}
body #cc-main :is(.cm, .pm) { box-shadow: none; border: 1px solid var(--wp--custom--color--border); }
body #cc-main .toggle__icon-circle { box-shadow: none; }
body #cc-main .pm__section--expandable .pm__section-arrow { border-radius: var(--wp--custom--radius--pill); }
body #cc-main :is(.cm__title, .pm__title) { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xl); font-weight: 560; line-height: 1.2; }
body #cc-main :is(.cm__desc, .pm__section-desc-wrapper, .pm__section-desc, .pm__section-table, .pm__service-title) { font-size: var(--wp--preset--font-size--sm); }
body #cc-main :is(.cm__btn, .pm__btn) { font-size: var(--wp--preset--font-size--sm); font-weight: 700; }
body #cc-main .pm__section-title { font-size: var(--wp--preset--font-size--md); font-weight: 600; }
body #cc-main :is(.cm__footer, .cm__links, .cm__link-group, .cm__link-group > *, .pm__badge) { font-size: var(--wp--preset--font-size--xs); }
body #cc-main .pm__table-th { font-weight: 600; }
body #cc-main :focus-visible { outline: 3px solid var(--apo-focus); outline-offset: 2px; }
/* footer link „Cookie-Einstellungen“: only while there is something to choose (body class from the plugin) */
.apo-footer__legal li:has(> a[href="#cookie-einstellungen"]) { display: none; }
.ccgtm-active .apo-footer__legal li:has(> a[href="#cookie-einstellungen"]) { display: revert; }
/* privacy policy table ([cookie_dienste] from the plugin) */
.ccgtm-table { overflow-x: auto; font-size: var(--wp--preset--font-size--sm); } /* scrolls on its own at 320px (WCAG 1.4.10 allows it for data tables) */
.ccgtm-table :is(th, td) { padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12); border: 1px solid var(--wp--custom--color--border); text-align: left; vertical-align: top; }
.ccgtm-table th { font-weight: 600; background: var(--wp--preset--color--cream); }

/* ---------- footer ---------- */
.apo-footer { padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--32); font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--sky); }
.apo-footer .apo-logo a { background: var(--wp--preset--color--base); padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12); border-radius: var(--wp--custom--radius--card); }
.apo-footer h2 { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--wp--preset--color--base); margin-bottom: var(--wp--preset--spacing--8); }
.apo-footer p { max-width: 28rem; }
.apo-footer a:not(.apo-logo) { color: var(--wp--preset--color--base); text-decoration: none; }
.apo-footer a:not(.apo-logo):hover { text-decoration: underline; text-underline-offset: .2em; }
.apo-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--8); }
.apo-footer__legal { margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--24); box-shadow: inset 0 1px 0 var(--wp--preset--color--forest); gap: var(--wp--preset--spacing--16); font-size: var(--wp--preset--font-size--xs); }
.apo-footer__legal .apo-footer__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16); }

/* ---------- style guide (/design/) ---------- */
.apo-sg .wp-block-heading + .apo-muted { margin-top: var(--wp--preset--spacing--16); }
.apo-sg .alignwide > h3 { margin-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--16); }
.apo-sg .apo-muted + * { margin-top: var(--wp--preset--spacing--32); }
.apo-sg__grid { gap: var(--wp--preset--spacing--16); }
.apo-swatch > * { margin: 0; }
.apo-swatch__chip { display: flex; align-items: flex-end; height: 6rem; padding: var(--wp--preset--spacing--12); border: 1px solid var(--wp--custom--color--border); border-radius: var(--wp--custom--radius--card); font-size: var(--wp--preset--font-size--xl); font-weight: 600; }
.apo-swatch__chip p { margin: 0; }
.apo-swatch__name { margin-top: var(--wp--preset--spacing--8) !important; font-weight: 600; font-size: var(--wp--preset--font-size--sm); }
.apo-sg__scale { margin-top: var(--wp--preset--spacing--24); }
.apo-sg__row { flex-wrap: wrap; gap: var(--wp--preset--spacing--24); padding-block: var(--wp--preset--spacing--12); border-bottom: 1px solid var(--wp--custom--color--border); }
.apo-sg__row > * { margin: 0; }
.apo-sg__row .apo-meta { flex: none; width: 8rem; }
.apo-sg__bars { gap: var(--wp--preset--spacing--24); margin-bottom: var(--wp--preset--spacing--32); }
.apo-sg__bar > * { margin: 0; text-align: center; }
.apo-sg__barfill { width: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--control); }
.apo-sg__barfill--4 { height: var(--wp--preset--spacing--4); } .apo-sg__barfill--8 { height: var(--wp--preset--spacing--8); } .apo-sg__barfill--12 { height: var(--wp--preset--spacing--12); }
.apo-sg__barfill--16 { height: var(--wp--preset--spacing--16); } .apo-sg__barfill--24 { height: var(--wp--preset--spacing--24); } .apo-sg__barfill--32 { height: var(--wp--preset--spacing--32); }
.apo-sg__barfill--40 { height: var(--wp--preset--spacing--40); } .apo-sg__barfill--48 { height: var(--wp--preset--spacing--48); } .apo-sg__barfill--64 { height: var(--wp--preset--spacing--64); } .apo-sg__barfill--80 { height: var(--wp--preset--spacing--80); }
.apo-sg__radius { display: flex; align-items: flex-end; height: 6rem; padding: var(--wp--preset--spacing--12); background: var(--wp--preset--color--base); border: 1px solid var(--wp--custom--color--border); }
.apo-sg__radius p { margin: 0; }
.apo-sg__radius--control { border-radius: var(--wp--custom--radius--control); } .apo-sg__radius--card { border-radius: var(--wp--custom--radius--card); }
.apo-sg__radius--surface { border-radius: var(--wp--custom--radius--surface); } .apo-sg__radius--pill { border-radius: var(--wp--custom--radius--pill); }
.apo-sg .apo-quick { margin-top: 0; }
.apo-sg .apo-infocard p { margin-top: var(--wp--preset--spacing--12); }

/* ---------- Grundpreis (inc/unit-price.php), below every price ---------- */
.apo-unit-price { display: block; font-size: var(--wp--preset--font-size--xs); font-weight: 400; line-height: var(--wp--custom--line-height--text); color: var(--wp--preset--color--forest-muted); }
/* order summary (mini-cart, checkout) runs item lines together with " / "; Grundpreis already contains a slash, so one line each */
div.wc-block-components-product-details > span { display: block; }
div.wc-block-components-product-details > span > span[aria-hidden="true"] { display: none; }

/* ---------- forms on pages: withdrawal (inc/withdrawal.php) ---------- */
.apo-form > p { margin: 0 0 var(--wp--preset--spacing--24); }
.apo-form__field label { display: block; }
.apo-form__field :is(input, textarea) { display: block; box-sizing: border-box; width: 100%; margin-top: var(--wp--preset--spacing--8); }
.apo-form__field textarea { height: 6rem; padding-block: var(--wp--preset--spacing--8); resize: vertical; } /* three 24px lines + 8 + 8, incl. border via box-sizing */
.apo-form__hint { display: block; font-size: var(--wp--preset--font-size--xs); line-height: var(--wp--custom--line-height--text); color: var(--wp--preset--color--forest-muted); }
.apo-form__error { display: block; margin-top: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--xs); font-weight: 600; line-height: var(--wp--custom--line-height--text); color: var(--wp--custom--color--error); }
.apo-form [aria-invalid="true"] { border-color: var(--wp--custom--color--error); }
.apo-form button, .nf-form-content input[type="submit"] { min-height: 3rem; padding-inline: var(--wp--preset--spacing--24); border: 0; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--green); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--sm); font-weight: 700; cursor: pointer; }
.apo-form button:hover, .nf-form-content input[type="submit"]:hover { background: var(--wp--custom--color--green-dark); }
.apo-hp { position: absolute; left: -100vw; }
/* file field (Rezept übermitteln): no field frame, the browser's button drawn as a 40px outline button */
.apo-form__field input[type="file"] { height: auto; min-height: 0; padding: 0; border: 0; background: none; }
.apo-form__field input[type="file"]::file-selector-button { height: 2.5rem; margin-right: var(--wp--preset--spacing--16); padding-inline: var(--wp--preset--spacing--16); border: 0; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border-strong); color: var(--wp--preset--color--forest); font: inherit; font-weight: 600; cursor: pointer; }
/* consent checkbox: 24px box on the first text line */
.apo-form__check label { display: flex; gap: var(--wp--preset--spacing--8); align-items: flex-start; line-height: var(--wp--custom--line-height--text); }
.apo-form__check input { flex: none; width: var(--wp--preset--spacing--24); height: var(--wp--preset--spacing--24); margin: 0; accent-color: var(--wp--preset--color--green); }
/* Ninja Forms (contact form on /kontakt/): fields and spacing as .apo-form; consent checkbox before its text */
.nf-form-content .nf-field-container { margin-bottom: var(--wp--preset--spacing--24); }
.nf-form-content :is(.nf-field-label, .nf-field-description) { margin-bottom: var(--wp--preset--spacing--8); }
.nf-form-content :is(input:not([type="checkbox"], [type="submit"]), textarea) { box-sizing: border-box; width: 100%; }
.nf-form-content .nf-error-msg { margin-top: var(--wp--preset--spacing--8); font-size: var(--wp--preset--font-size--xs); font-weight: 600; line-height: var(--wp--custom--line-height--text); color: var(--wp--custom--color--error); }
.nf-form-content .checkbox-wrap { display: flex; flex-wrap: nowrap; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: var(--wp--preset--spacing--8); }
.nf-form-content .checkbox-wrap > .nf-field-label { flex: 1; width: auto; margin: 0; }
.nf-form-content .checkbox-wrap > .nf-field-element { flex: none; width: auto; }
.nf-form-content .checkbox-wrap label { font-weight: 400; line-height: var(--wp--custom--line-height--text); }
.nf-form-content .checkbox-wrap input[type="checkbox"] { display: block; width: var(--wp--preset--spacing--24); height: var(--wp--preset--spacing--24); margin: 0; accent-color: var(--wp--preset--color--green); }
/* notices outside WooCommerce: success = mint/green, error = white/error (as the shop's notices) */
.apo-notice { margin-bottom: var(--wp--preset--spacing--24); padding: var(--wp--preset--spacing--16); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--custom--color--border-strong); }
.apo-notice p { margin: 0; }
.apo-notice--success { background: var(--wp--preset--color--mint); box-shadow: inset 0 0 0 1px var(--wp--preset--color--green); }
.apo-notice--error { box-shadow: inset 0 0 0 1px var(--wp--custom--color--error); }
/* placeholder texts on legal pages until the pharmacy's texts arrive */
.apo-placeholder { padding: var(--wp--preset--spacing--16); border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--sky); }

/* ---------- open layout (Ritual-style wireframe): tiles without frames, captions on the page ground ---------- */
/* products and team: only the picture is a tile (white on cream, radius card); name, text and price sit below it, unframed */
.apo-products .wc-block-product { background: none; border-radius: 0; overflow: visible; }
.apo-products .wc-block-product::after { display: none; }
.apo-products .wc-block-product > * { padding-inline: 0; }
.apo-products .wc-block-components-product-image, .apo-products .wp-block-woocommerce-product-image { height: 12rem; background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.apo-product__buy { padding-bottom: 0; }
.apo-team .wp-block-post { background: none; outline: 0; border-radius: 0; overflow: visible; }
.apo-team__photo { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.apo-team__body { padding: var(--wp--preset--spacing--16) 0 0; }
/* homepage rhythm: sections breathe, 64 between content blocks (80 from tablet) instead of 32-40 */
.home .apo-section:not(.apo-section--hero, .apo-section--quick) { padding-block: var(--wp--preset--spacing--32); }
@media (min-width: 782px) { .home .apo-section:not(.apo-section--hero, .apo-section--quick) { padding-block: var(--wp--preset--spacing--40); } }
.home .apo-section--quick + .apo-section { margin-top: var(--wp--preset--spacing--40); }