/**
 * Sobne Rastline — frontend chrome CSS.
 *
 * Reserve this file for layout and behaviour that theme.json cannot express:
 * sticky positioning, complex component composition, breakpoint overrides.
 * Tokens (colors, spacing, radii) always come from CSS custom properties
 * generated by theme.json — never hardcode hex / px in here.
 */

/* ─── Global side padding — mobile override ────────────────────────────── */

/* theme.json ships a responsive clamp(24px, 5vw, 80px) for the site's global
   side padding (used everywhere via has-global-padding / alignfull escapes).
   An editor session in Appearance → Editor → Styles → Layout → Padding
   replaced it with a flat 42px, saved to the wp_global_styles DB record —
   fine on desktop, disproportionate on a ~380px phone. Scale it back down
   below the tablet breakpoint; !important since the override and this rule
   are both plain `body` selectors of equal specificity. */
@media (max-width: 600px) {
	body {
		--wp--style--root--padding-left: 20px !important;
		--wp--style--root--padding-right: 20px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Rearchitecture foundations — placeholders, depth, dividers, link idiom,
   scroll reveal. (Section/hero/feature layout lives further down per area.)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Designed image placeholder (no photo yet) ───────────────────────── */

.mjw-img-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	overflow: hidden;
	background: radial-gradient(120% 120% at 30% 18%, var(--wp--preset--color--base) 0%, var(--wp--preset--color--base-warm) 100%);
	border-radius: inherit;
}

.mjw-img-placeholder .mjw-botanical {
	width: 42%;
	max-width: 150px;
	height: auto;
	color: var(--wp--preset--color--accent);
	opacity: 0.13;
}

/* The featured-image filter wraps the placeholder in a core figure; make it
   fill + clip exactly like a real featured image would. */
.mjw-featured-placeholder {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--default);
}

.mjw-featured-placeholder a {
	display: block;
}

/* ─── Depth: lift imagery off the cream ───────────────────────────────── */

.mjw-plant-card__media,
.mjw-plant-gallery__main {
	box-shadow: var(--wp--custom--shadow--soft);
}

/* ─── Hairline divider utility ────────────────────────────────────────── */

.mjw-rule {
	border: 0;
	border-top: 1px solid var(--wp--custom--hairline);
	margin: 0;
}

/* ─── Arrow link idiom (primary text-link style) ──────────────────────── */

.mjw-link-arrow {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 280ms ease, color 200ms ease;
}

.mjw-link-arrow:hover,
.mjw-link-arrow:focus-visible {
	color: var(--wp--preset--color--accent);
	background-size: 100% 1px;
}

.mjw-link-arrow__arrow {
	transition: transform 280ms ease;
}

.mjw-link-arrow:hover .mjw-link-arrow__arrow {
	transform: translateX(0.25em);
}

/* ─── Section eyebrow (shared tiny-caps label) ────────────────────────── */

.mjw-section-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ─── Scroll reveal (gated on .mjw-reveal-ready added by motion.js) ────── */

.mjw-reveal-ready .mjw-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease, transform 600ms ease;
}

.mjw-reveal-ready .mjw-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Reduced motion: no reveal transforms, no hover zoom, no transitions. */
@media (prefers-reduced-motion: reduce) {
	.mjw-reveal-ready .mjw-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ─── Sticky header ───────────────────────────────────────────────────── */

.mjw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--custom--hairline);
	transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Front page, scrolled past the hero: the solid header gains a subtle lift. */
.mjw-has-hero .mjw-header:not(.is-over-hero) {
	box-shadow: 0 1px 0 var(--wp--custom--hairline), 0 12px 30px -24px rgba(46, 61, 44, 0.55);
}

/* Site title — no underline on hover. */
.mjw-header .wp-block-site-title a {
	text-decoration: none;
}

/* Navigation — underline-grow on hover (kills the default underline). */
.mjw-header .wp-block-navigation .wp-block-navigation-item a {
	text-decoration: none;
	padding-bottom: 2px;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 250ms ease, color 200ms ease;
}

.mjw-header .wp-block-navigation .wp-block-navigation-item a:hover,
.mjw-header .wp-block-navigation .wp-block-navigation-item a:focus-visible {
	color: var(--wp--preset--color--accent);
	background-size: 100% 1px;
}

/* Mobile: full-screen editorial overlay menu (core JS owns open/close/focus). */
.mjw-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
}

.mjw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
}

.mjw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	padding-block: 8px;
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-m);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-transform: none;
	background-image: none;
	color: var(--wp--preset--color--contrast);
}

/* ─── Instagram CTA button ────────────────────────────────────────────── */

.mjw-ig-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 28px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: var(--wp--custom--transition--default);
}

.mjw-ig-button:hover {
	background-color: var(--wp--preset--color--base-warm);
	color: var(--wp--preset--color--accent);
}

.mjw-ig-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

.mjw-ig-icon {
	flex-shrink: 0;
}

/* Instagram embed — one official post via Meta's Embed Button, swapped by hand. */
.mjw-ig-embed {
	display: flex;
	justify-content: center;
	margin: 0 auto var(--wp--preset--spacing--6);
}

/* ─── Footer ──────────────────────────────────────────────────────────── */

.mjw-footer-top {
	gap: var(--wp--preset--spacing--6);
}

.mjw-footer-brand {
	flex: 1 1 280px;
	max-width: 36ch;
}

.mjw-footer-tag {
	color: var(--wp--preset--color--muted-light);
}

.mjw-footer-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--1);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-light);
}

.mjw-footer-links p,
.mjw-footer-meta p {
	margin: 0;
}

.mjw-footer-links a,
.mjw-footer-meta a {
	text-decoration: none;
	color: var(--wp--preset--color--base);
	padding-bottom: 1px;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size 250ms ease;
}

.mjw-footer-links a:hover,
.mjw-footer-meta a:hover,
.mjw-footer-links a:focus-visible,
.mjw-footer-meta a:focus-visible {
	background-size: 100% 1px;
}

.mjw-footer .mjw-footer-locale {
	color: var(--wp--preset--color--muted-light);
}

.mjw-footer .mjw-footer-rule {
	margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--4);
	border: 0;
	border-top: 1px solid rgb(250 248 243 / 0.14);
	background-color: transparent;
}

.mjw-footer-copyright {
	margin: 0;
	color: var(--wp--preset--color--muted-light);
}

@media (max-width: 600px) {
	.mjw-footer-top {
		flex-direction: column;
		gap: var(--wp--preset--spacing--5);
	}
}

/* ─── Homepage hero (full-bleed cover) ────────────────────────────────── */

.mjw-hero {
	isolation: isolate;
	/* clamp caps the hero on tall/ultra-wide viewports so the green backdrop never
	   grows past a sane height; !important is required to beat the cover block's
	   own inline min-height style (set via the editor's block inspector). */
	min-height: clamp(560px, 82svh, 820px) !important;
	color: var(--wp--preset--color--base);
	/* Keep the content horizontally centered regardless of whichever
	   is-position-* class the block currently carries, so it always lines up
	   with the rest of the page's centered containers. Needs !important: core's
	   .wp-block-cover.is-position-* rules are two classes, more specific than
	   this single-class selector. */
	justify-content: center !important;
}

/* Front page: the STICKY header overlays the hero. Pull the hero up by the
   header height so it sits flush at the top with the header transparent over it.
   (Sticky — not fixed; fixed positioning proved flaky here. Over-pull via the
   64px fallback is safe: it only clips the hero's empty top edge, never gaps.) */
.mjw-has-hero .mjw-home {
	margin-top: 0;
}

.mjw-has-hero .mjw-home > .mjw-hero {
	margin-top: calc(-1 * var(--mjw-header-h, 64px));
}

/* Stacking order inside the cover: overlay/photo (0) → botanical + gradient
   (1) → content (2). isolation above keeps it self-contained. */
.mjw-hero > .wp-block-cover__background,
.mjw-hero .wp-block-cover__image-background {
	z-index: 0;
}

.mjw-hero > .wp-block-cover__inner-container {
	z-index: 2;
	max-width: min(1100px, 100%);
	/* Tied to the site's global side padding (same var the rest of the page's
	   has-global-padding sections use) instead of its own hardcoded clamp, so
	   the hero can never drift out of sync with the rest of the page again. */
	padding-inline: var(--wp--style--root--padding-left);
	padding-block-end: clamp(40px, 6vw, 96px);
	/* Reserve at least the sticky header's height at the top of the content box.
	   The hero is bottom-anchored and pulled up under the header (see the
	   negative margin-top above); when the block's content is tall enough to
	   need more than min-height, the cover grows from a pinned top edge, and
	   without this the content's own top creeps up behind the header — the
	   editors were papering over exactly this by hand-adding a spacer line at
	   the start of the content. This makes it hold regardless of content length. */
	padding-block-start: calc(var(--mjw-header-h, 64px) + var(--wp--preset--spacing--4));
	text-align: center;
}

/* Center any buttons row inside the hero — the block has no reliable custom
   class to hook (editors rebuild it from scratch), so target it structurally. */
.mjw-hero > .wp-block-cover__inner-container .wp-block-buttons {
	justify-content: center;
}

/* Faint botanical motif — only while there is no photograph. */
.mjw-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%23FAF8F3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 112 C26 96 18 62 50 14 C82 62 74 96 50 112 Z'/%3E%3Cpath d='M50 106 L50 24'/%3E%3Cpath d='M50 44 C41 40 35 44 31 53'/%3E%3Cpath d='M50 44 C59 40 65 44 69 53'/%3E%3Cpath d='M50 64 C40 60 34 65 30 75'/%3E%3Cpath d='M50 64 C60 60 66 65 70 75'/%3E%3Cpath d='M50 84 C42 81 36 85 33 94'/%3E%3Cpath d='M50 84 C58 81 64 85 67 94'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 90% 46%;
	background-size: auto 88%;
	opacity: 0.1;
	pointer-events: none;
}

.mjw-hero:has(.wp-block-cover__image-background)::before {
	content: none;
}

/* Bottom-up legibility gradient over placeholder or future photo. */
.mjw-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(31, 40, 32, 0.78) 0%, rgba(31, 40, 32, 0.32) 38%, rgba(31, 40, 32, 0.1) 100%);
	pointer-events: none;
}

.mjw-hero-eyebrow {
	color: rgb(250 248 243 / 0.8);
}

.mjw-hero-headline {
	max-width: 12ch;
	/* !important: the block ships its own inline margin-left/right:0 (set via
	   the editor's block toolbar), which otherwise beats this. */
	margin-inline: auto !important;
}

.mjw-hero-lede {
	max-width: 46ch;
	color: rgb(250 248 243 / 0.85);
	margin-inline: auto !important;
}

/* Ghost CTA: cream outline that fills on hover/focus. */
.mjw-hero-cta .wp-block-button__link:hover,
.mjw-hero-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--accent) !important;
}

/* Transparent header ONLY while it sits over the hero (front page, at the top).
   The default header is solid + dark, so the nav stays legible even if JS never
   runs or lags — no cream-on-cream over the content sections. */
.mjw-has-hero .mjw-header.is-over-hero {
	background-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

.mjw-has-hero .mjw-header.is-over-hero .wp-block-site-title a,
.mjw-has-hero .mjw-header.is-over-hero .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item a,
.mjw-has-hero .mjw-header.is-over-hero .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
	text-shadow: 0 1px 2px rgba(31, 40, 32, 0.45);
}

@media (max-width: 600px) {
	.mjw-hero {
		min-height: 78svh !important;
	}
}

@media (max-height: 520px) {
	.mjw-hero {
		min-height: 100svh !important;
	}
}

/* Shorter viewports: shrink the headline + tighten the bottom inset so the hero
   content never rises into the fixed header. */
@media (max-height: 820px) {
	.mjw-hero .mjw-hero-headline {
		font-size: clamp(2.25rem, 4.4vw, 3.75rem) !important;
	}
	.mjw-hero > .wp-block-cover__inner-container {
		padding-block-end: clamp(24px, 3.5vh, 56px);
	}
}

/* ─── Homepage intro statement ────────────────────────────────────────── */

.mjw-intro-statement {
	max-width: 26ch;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {
	.mjw-intro-statement {
		max-width: none;
	}
}

/* ─── Homepage featured plants — alternating feature rows ─────────────── */

.mjw-featured {
	border-top: 1px solid var(--wp--custom--hairline);
}

.mjw-featured-head {
	max-width: 1100px;
}

.mjw-featured-rows .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 72px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mjw-featured-rows .wp-block-post-template > li {
	margin: 0;
}

.mjw-plant-feature {
	display: grid;
	grid-template-columns: min(48%, 58vh) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

.mjw-plant-feature__media {
	position: relative;
	display: block;
	grid-column: 1;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--base-warm);
	box-shadow: var(--wp--custom--shadow--default);
}

.mjw-plant-feature__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 700ms ease;
}

.mjw-plant-feature:hover .mjw-plant-feature__img {
	transform: scale(1.04);
}

.mjw-plant-feature__badges {
	position: absolute;
	top: var(--wp--preset--spacing--3);
	left: var(--wp--preset--spacing--3);
}

.mjw-plant-feature__body {
	grid-column: 2;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

/* Alternate the image side every other row; DOM order stays media-then-body.
   Image anchors to the left gutter on odd rows, the right gutter on even rows. */
.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature {
	grid-template-columns: minmax(0, 1fr) min(48%, 58vh);
}

.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature__media {
	grid-column: 2;
}

.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature__body {
	grid-column: 1;
	grid-row: 1;
}

.mjw-plant-feature__family {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny-caps);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.mjw-plant-feature__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1.08;
	color: var(--wp--preset--color--contrast);
}

.mjw-plant-feature__latin {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.mjw-plant-feature__excerpt {
	margin: 0;
	max-width: 46ch;
	color: var(--wp--preset--color--contrast);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mjw-plant-feature .mjw-care-icons {
	gap: var(--wp--preset--spacing--5);
}

.mjw-plant-feature__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--2);
}

.mjw-plant-feature__foot .mjw-price {
	margin: 0;
}

.mjw-featured-all {
	margin-top: var(--wp--preset--spacing--2);
}

/* Sold feature: grey the image, mute the type. */
.mjw-plant-feature.is-sold .mjw-plant-feature__img {
	filter: grayscale(1);
	opacity: 0.65;
}

.mjw-plant-feature.is-sold .mjw-plant-feature__title {
	color: var(--wp--preset--color--muted-light);
}

/* Mobile: stack to one column, image always above text. */
@media (max-width: 781px) {
	.mjw-plant-feature,
	.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature {
		grid-template-columns: 1fr;
	}
	.mjw-plant-feature__media,
	.mjw-plant-feature__body,
	.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature__media,
	.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature__body {
		grid-column: 1;
	}
	.mjw-featured-rows .wp-block-post-template > li:nth-child(even) .mjw-plant-feature__body {
		grid-row: auto;
	}
}

/* ─── Homepage story / about (asymmetric) ─────────────────────────────── */

/* This section is a template part (parts/story-block.html) referenced from
   inside the constrained <main>. WP's core layout CSS only lets a block
   escape to full width when the .alignfull class sits on the *direct* child
   of the constrained/padded container — here that direct child is WP's
   auto-generated .wp-block-template-part wrapper, not the alignfull section
   one level inside it, so the wrapper gets capped to content-size instead
   (unlike instagram-cta/footer below, which sit outside <main> and escape
   correctly). Replicate core's own escape-hatch at the wrapper level instead
   of reordering the template. */
.mjw-home > .wp-block-template-part:has(> .mjw-story) {
	max-width: none;
	margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
}

.mjw-story {
	position: relative;
	overflow: hidden;
}

.mjw-story-pullquote {
	max-width: 18ch;
	color: var(--wp--preset--color--contrast);
}

.mjw-story-text {
	max-width: 48ch;
	color: var(--wp--preset--color--contrast);
}

/* Editorial stagger: drop the supporting column below the pull-quote. */
@media (min-width: 782px) {
	.mjw-story-cols > .wp-block-column:last-child {
		margin-top: var(--wp--preset--spacing--7);
	}
}

/* Faint botanical in the negative space (decorative). */
.mjw-story::after {
	content: "";
	position: absolute;
	right: clamp(-60px, -2vw, -24px);
	bottom: -56px;
	width: 240px;
	height: 288px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' fill='none' stroke='%232F3A30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 112 C26 96 18 62 50 14 C82 62 74 96 50 112 Z'/%3E%3Cpath d='M50 106 L50 24'/%3E%3Cpath d='M50 44 C41 40 35 44 31 53'/%3E%3Cpath d='M50 44 C59 40 65 44 69 53'/%3E%3Cpath d='M50 64 C40 60 34 65 30 75'/%3E%3Cpath d='M50 64 C60 60 66 65 70 75'/%3E%3Cpath d='M50 84 C42 81 36 85 33 94'/%3E%3Cpath d='M50 84 C58 81 64 85 67 94'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.06;
	pointer-events: none;
}

/* ─── Homepage care-guide teaser ──────────────────────────────────────── */

.mjw-care-teaser-grid .wp-block-post-template,
.mjw-nasvet-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Full care-article archive breathes a little more than the homepage teaser. */
.mjw-nasvet-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--6);
}

.mjw-care-teaser-grid .wp-block-post-template > li,
.mjw-nasvet-grid .wp-block-post-template > li {
	margin: 0;
}

.mjw-care-card {
	transition: transform 250ms ease;
}

.mjw-care-card:hover {
	transform: translateY(-4px);
}

.mjw-care-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--default);
	box-shadow: var(--wp--custom--shadow--soft);
	transition: box-shadow 250ms ease;
}

.mjw-care-card:hover .wp-block-post-featured-image {
	box-shadow: var(--wp--custom--shadow--default);
}

.mjw-care-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}

.mjw-care-card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.mjw-care-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.mjw-care-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.mjw-care-card__dek {
	margin: var(--wp--preset--spacing--2) 0 0;
	max-width: 42ch;
	color: var(--wp--preset--color--muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mjw-care-card__more {
	margin-top: var(--wp--preset--spacing--3);
}

.mjw-reading-time {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.mjw-care-teaser-grid .wp-block-post-template,
	.mjw-nasvet-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Phase 5 — plant card, detail header, gallery, badges, care, inquiry
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Badges ──────────────────────────────────────────────────────────── */

.mjw-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mjw-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
	white-space: nowrap;
}

.mjw-badge--special {
	background-color: var(--wp--preset--color--badge-special);
	color: var(--wp--preset--color--base);
}

.mjw-badge--last {
	background-color: var(--wp--preset--color--badge-last);
	color: var(--wp--preset--color--base);
}

.mjw-badge--new {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.mjw-badge--sold {
	background-color: var(--wp--preset--color--badge-sold);
	color: var(--wp--preset--color--muted);
}

/* ─── Price (base; card overrides size) ───────────────────────────────── */

.mjw-price {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

/* ─── Care icons ──────────────────────────────────────────────────────── */

.mjw-care-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: var(--wp--preset--spacing--3) 0;
	list-style: none;
	border-top: 1px solid rgb(0 0 0 / 0.06);
	border-bottom: 1px solid rgb(0 0 0 / 0.06);
}

.mjw-care-icons__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin: 0;
}

.mjw-care-icon {
	color: var(--wp--preset--color--accent);
}

.mjw-care-icons__eyebrow {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--tiny-caps);
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.mjw-care-icons__value {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* ─── Inquiry button + channel picker ─────────────────────────────────── */

.mjw-inquiry {
	position: relative;
	display: inline-block;
}

.mjw-inquiry__toggle {
	display: inline-block;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--wp--custom--transition--default);
}

.mjw-inquiry__toggle:hover {
	background-color: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--shadow--soft);
}

.mjw-inquiry__channels {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--wp--preset--spacing--2);
	min-width: 248px;
}

.mjw-inquiry__channels[hidden] {
	display: none;
}

.mjw-inquiry__row {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.mjw-inquiry__channel {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 14px;
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: var(--wp--custom--transition--default);
}

.mjw-inquiry__channel:hover {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--base-warm);
}

.mjw-inquiry-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
	transition: var(--wp--custom--transition--default);
}

.mjw-inquiry__channel:hover .mjw-inquiry-icon {
	color: var(--wp--preset--color--accent);
}

.mjw-inquiry__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.mjw-inquiry__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25;
}

.mjw-inquiry__value {
	font-size: var(--wp--preset--font-size--tiny-caps);
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mjw-inquiry__copy {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	padding: 0;
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: var(--wp--custom--transition--default);
}

.mjw-inquiry__copy:hover {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--base-warm);
	color: var(--wp--preset--color--accent);
}

.mjw-inquiry__copy .mjw-inquiry-icon--check {
	display: none;
}

.mjw-inquiry__copy.is-copied {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.mjw-inquiry__copy.is-copied .mjw-inquiry-icon--copy {
	display: none;
}

.mjw-inquiry__copy.is-copied .mjw-inquiry-icon--check {
	display: inline-block;
}

/* ─── Plant gallery (PhotoSwipe) ──────────────────────────────────────── */

.mjw-plant-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.mjw-plant-gallery__main {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--base-warm);
}

.mjw-plant-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--2);
}

.mjw-plant-gallery__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--base-warm);
	cursor: pointer;
	box-shadow: 0 0 0 1px transparent;
	transition: box-shadow 200ms ease;
}

.mjw-plant-gallery__thumb:hover {
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
}

.mjw-plant-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}

.mjw-plant-gallery__thumb:hover .mjw-plant-gallery__img {
	transform: scale(1.05);
}

/* ─── Plant-detail header (left-aligned two-column) ───────────────────── */

.mjw-plant-header {
	display: grid;
	gap: var(--wp--preset--spacing--5);
	text-align: left;
}

.mjw-plant-header__info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.mjw-plant-header__family {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny-caps);
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.mjw-plant-header__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--contrast);
}

.mjw-plant-header__latin,
.mjw-plant-header__cultivar {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.mjw-plant-header__excerpt {
	color: var(--wp--preset--color--contrast);
}

.mjw-plant-header__excerpt p {
	margin: 0;
}

.mjw-plant-header__meta {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mjw-plant-header__meta li {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mjw-plant-header__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.mjw-plant-header__status--reserved {
	color: var(--wp--preset--color--badge-last);
}

.mjw-plant-header__status--sold {
	color: var(--wp--preset--color--muted-light);
}

.mjw-plant-header.is-sold .mjw-plant-gallery__main .mjw-plant-gallery__img {
	filter: grayscale(1);
	opacity: 0.7;
}

@media (min-width: 782px) {
	.mjw-plant-header {
		grid-template-columns: 1.3fr 1fr;
		gap: var(--wp--custom--space--row);
		align-items: start;
	}

	/* Keep the museum label in view alongside the tall portrait. */
	.mjw-plant-header__info {
		position: sticky;
		top: calc(var(--mjw-header-h, 64px) + var(--wp--preset--spacing--4));
	}
}

/* ─── Plant-card grids: related plants ─────────────────────────────────── */

.mjw-related-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mjw-related-grid .wp-block-post-template > li {
	margin: 0;
	display: flex;
}

.mjw-related-grid .wp-block-post-template > li > .wp-block-mjw-plant-card {
	width: 100%;
}

/* ─── Plant archive grid ──────────────────────────────────────────────── */

.mjw-archive-grid .wp-block-post-template {
	/* Auto-fill: card width settles on its own from the available space (min
	   440px), landing on 3 uniform columns at the archive's 1600px content
	   width and fewer as the viewport narrows — no fixed column count, no
	   special-cased "featured" card forcing an odd crop on the first photo. */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
	gap: var(--wp--preset--spacing--5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mjw-archive-grid .wp-block-post-template > li {
	margin: 0;
	display: flex;
}

.mjw-archive-grid .wp-block-post-template > li > .wp-block-mjw-plant-card {
	width: 100%;
}

.mjw-archive-intro {
	max-width: 54ch;
	margin-inline: auto;
	color: var(--wp--preset--color--muted);
}

/* Cards lift + deepen their shadow on hover (interactive everywhere). */
.mjw-plant-card {
	transition: transform 250ms ease;
}

.mjw-plant-card:hover {
	transform: translateY(-4px);
}

.mjw-plant-card:hover .mjw-plant-card__media {
	box-shadow: var(--wp--custom--shadow--default);
}

@media (max-width: 781px) {
	.mjw-related-grid .wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.mjw-archive-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.mjw-related-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   Phase 6 — archives, pagination, single care article
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Archive header ──────────────────────────────────────────────────── */

.mjw-archive-header {
	margin-bottom: var(--wp--preset--spacing--2);
}

/* ─── Query pagination ────────────────────────────────────────────────── */

.mjw-pagination {
	margin-top: var(--wp--preset--spacing--6);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
}

.mjw-pagination a,
.mjw-pagination .page-numbers {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: var(--wp--custom--transition--default);
}

.mjw-pagination a:hover {
	color: var(--wp--preset--color--accent);
}

.mjw-pagination .page-numbers.current {
	color: var(--wp--preset--color--contrast);
}

.mjw-pagination .wp-block-query-pagination-previous,
.mjw-pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--contrast);
}

/* ─── Single care article (editorial) ─────────────────────────────────── */

.mjw-nasvet-hero {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--default);
}

.mjw-nasvet-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Reading time is a byline directly under the title (group blockGap owns the
   spacing), so drop the shortcode's intrinsic top margin here. */
.mjw-single-nasvet .mjw-reading-time {
	margin-top: 0;
}

.mjw-article-prose {
	color: var(--wp--preset--color--contrast);
}

.mjw-single-nasvet .wp-block-post-content > p {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--4);
	line-height: 1.75;
}

/* Editorial drop cap on the opening paragraph only. `first-child` (not
   `first-of-type`) means it simply does nothing when the article opens with an
   image, heading or list — graceful, never a stray cap further down. */
.mjw-single-nasvet .wp-block-post-content > p:first-child::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-weight: 400;
	font-size: 3.6em;
	line-height: 0.78;
	color: var(--wp--preset--color--accent);
}

/* ─── Linked plants (care article → related plants) ───────────────────── */

.mjw-linked-plants {
	margin-top: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--7) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-warm);
}

.mjw-linked-plants__eyebrow {
	max-width: 1100px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--tiny-caps);
	letter-spacing: var(--wp--custom--letter-spacing--tiny-caps);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.mjw-linked-plants__title {
	max-width: 1100px;
	margin: var(--wp--preset--spacing--2) auto var(--wp--preset--spacing--5);
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contrast);
}

.mjw-linked-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--5);
	max-width: 1100px;
	margin: 0 auto;
}

.mjw-linked-grid > .mjw-plant-card {
	height: 100%;
}

@media (max-width: 781px) {
	.mjw-linked-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.mjw-linked-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── 404 ─────────────────────────────────────────────────────────────── */

/* Pin the footer and vertically centre the content on the 404. */
.mjw-404-page .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.mjw-404 {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.mjw-404-figure {
	display: flex;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--3);
}

.mjw-404-illustration {
	width: 150px;
	height: auto;
	color: var(--wp--preset--color--accent);
	opacity: 0.85;
}

.mjw-404-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ─── Kontakt page: hand-pasted HTML block (Instagram button + form) ─────
   The "Kontakt" page's Instagram button and contact form are raw HTML/CSS
   pasted directly into the page content (own inline <style>, hardcoded
   colors, sr- prefix) — not theme markup, so this only patches spacing
   from the outside. !important: the block's own <style> tag renders later
   in the document than this stylesheet, so it wins any same-specificity tie. */
.sr-contact-form {
	margin-top: var(--wp--preset--spacing--5) !important;
}

/* Status banner injected above the form after a submit redirect (see
   mjw_contact_form_notice() in inc/contact-form.php) — not page content. */
.mjw-form-notice {
	max-width: 760px;
	margin: var(--wp--preset--spacing--5) auto var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--default, 10px);
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--base-warm);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

.mjw-form-notice--error {
	border-color: var(--wp--preset--color--badge-last);
	color: var(--wp--preset--color--badge-last);
}

/* ─── Visible keyboard focus (a11y) ───────────────────────────────────── */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.mjw-inquiry__toggle:focus-visible,
.mjw-inquiry__channel:focus-visible,
.mjw-inquiry__copy:focus-visible,
.mjw-plant-gallery__main:focus-visible,
.mjw-plant-gallery__thumb:focus-visible,
.mjw-pagination a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* On dark sections an accent outline disappears — switch to a light one. */
.mjw-hero a:focus-visible,
.mjw-hero .wp-block-button__link:focus-visible,
.mjw-ig-cta a:focus-visible,
.mjw-footer a:focus-visible,
.mjw-header .wp-block-navigation a:focus-visible {
	outline-color: var(--wp--preset--color--base);
}