/*
Theme Name: WonderFlower
Theme URI: https://wonderflowerdecor.hu
Author: richies_marveen_bot
Description: Block theme for WonderFlower Decor. Hand-made nursery decor. The frame is deliberately grey and quiet so the pastel products carry the colour; sage is the only accent. Designed so the shop owner can rearrange content without being able to break the design -- every colour, size and space comes from theme.json.
Version: 0.16.8
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wonderflower
Tags: block-theme, e-commerce, full-site-editing, custom-colors, custom-menu

WooCommerce templates live in templates/. Product configurator functionality
belongs in a separate plugin, NOT in this theme -- anything in the theme is lost
on a theme switch.
*/

/* ---------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------
   Full screen on every device. `dvh` is the important part on phones: `100vh`
   is measured against the viewport *without* the browser's collapsing address
   bar, so a 100vh hero always overflows by the height of that bar and the page
   starts scrolled wrong. `dvh` tracks the real visible height. The vh line
   stays first as the fallback for browsers that do not know dvh.
--------------------------------------------------------------------------- */

/* WordPress puts a 16px block gap between the header and <main>. Under a
   full-screen hero that gap is the difference between "fills the screen" and
   "overflows by 16px and starts the page scrolled". No section needs it: every
   one of them brings its own padding. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Sticky footer: on a page shorter than the screen (contact, an empty cart)
   the footer sits at the bottom of the screen instead of riding up under the
   content; a longer page just ends with it. Not "main fills the screen": that
   pushed the footer below the fold on pages with nothing to scroll for. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

.wp-block-cover.wf-hero {
	/* The header sits ABOVE the hero, so a plain 100vh hero is one header
	   taller than the screen and its button falls below the fold -- which is
	   exactly what happened on the first attempt. Subtract the measured header
	   height (set by the inline script in functions.php) so the visible area is
	   filled edge to edge and the button lands just inside it. */
	min-height: calc(100vh - var(--wf-header-h, 0px));
	min-height: calc(100dvh - var(--wf-header-h, 0px));
}

/* Portrait screens (phone, upright tablet): the whole portrait photo shows,
   and the empty wall is in its middle, so the text block is centred there
   instead of sitting on the furniture. */
@media (orientation: portrait) {
	.wp-block-cover.wf-hero.is-position-bottom-center {
		align-items: center;
	}
	/* a little lower than dead centre, clear of the lowest clouds (Rich) */
	.wp-block-cover.wf-hero .wp-block-cover__inner-container {
		transform: translateY(2.5rem);
	}
}

/* Landscape: the empty wall is the bottom third of the photo; a wider subtitle
   (two lines instead of three) keeps the block low and off the clouds. */
@media (orientation: landscape) {
	.wf-hero .wf-hero__lead {
		max-width: 60rem;
	}
	.wf-hero .wf-hero__lead.has-large-font-size {
		font-size: 1.125rem !important;
	}
	.wp-block-cover.wf-hero .wp-block-cover__inner-container {
		max-width: 60rem;
	}
	/* sit closer to the bottom edge: the empty wall is the photo's lower part
	   (the block's own inline padding needs !important to be overridden) */
	.wp-block-cover.wf-hero {
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}
	.wf-hero .wf-hero__title {
		font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
	}
	/* desktop veil 25%, phones keep 20% (Rich, 2026-10-11) */
	.wp-block-cover.wf-hero .wp-block-cover__background.has-background-dim {
		opacity: 0.25;
	}
	.wf-hero .wf-hero__cta {
		margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
	}
}

/* Phone: smaller header logo (Rich, 2026-10-11). The site-logo block sets an
   inline width, so the img needs !important. */
@media (max-width: 47.99rem) {
	.wp-block-site-logo.wf-logo img {
		width: 170px !important;
		height: auto !important;
	}
}

/* Phone: smaller hero type (Rich, 2026-10-11: "túl nagy"). */
@media (max-width: 47.99rem) {
	.wf-hero .wf-hero__title {
		font-size: 1.625rem;
	}
	/* the preset class .has-large-font-size carries !important in core */
	.wf-hero .wf-hero__lead.has-large-font-size {
		font-size: 1rem !important;
	}
	/* on a real iPhone the block sat right under the lowest cloud */
	.wp-block-cover.wf-hero .wp-block-cover__inner-container {
		transform: translateY(4.5rem);
	}
}

/* Livia's title and subtitle sit on a light photo: a soft shadow keeps them
   readable without darkening the whole image further. */
.wf-hero .wf-hero__title,
.wf-hero .wf-hero__lead {
	text-shadow: 0 1px 12px rgba(28, 28, 26, 0.35);
}

.wf-hero .wf-hero__lead {
	max-width: 34rem;
	margin-inline: auto;
}

/* The title, subtitle and button sit in the lower part of the photo, under the balloon. */
.wf-hero .wf-hero__cta {
	margin-bottom: clamp(1rem, 4vh, 3rem);
}

.wf-hero .wf-hero__cta .wp-block-button__link {
	backdrop-filter: blur(2px);
	background: rgba(28, 28, 26, 0.18);
	transition: background 200ms ease, transform 200ms ease;
}

.wf-hero .wf-hero__cta .wp-block-button__link:hover,
.wf-hero .wf-hero__cta .wp-block-button__link:focus-visible {
	background: rgba(28, 28, 26, 0.38);
	transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
	.wf-hero .wf-hero__cta .wp-block-button__link {
		transition: none;
	}
	.wf-hero .wf-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* The anchor the hero button jumps to. Scroll smoothly, but never for someone
   who asked the system for less motion. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
   Gallery hover
   ---------------------------------------------------------------------------
   The one piece of motion in the theme. A photographer's-portfolio zoom: the
   image grows inside a fixed frame, so neighbours never shift and the grid
   stays still. Everything else visual lives in theme.json.

   Applied via the `wf-gallery` class on a gallery or columns block, so it can
   never leak into product images or post content.
--------------------------------------------------------------------------- */

.wf-gallery figure.wp-block-image,
.wf-gallery .wp-block-image {
	overflow: hidden;
	margin: 0;
}

.wf-gallery .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.wf-gallery .wp-block-image:hover img,
.wf-gallery .wp-block-image:focus-within img {
	transform: scale(1.05);
}

/* Keyboard users get the same affordance as a mouse, and a visible ring. */
.wf-gallery .wp-block-image a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wf-gallery .wp-block-image img {
		transition: none;
	}
	.wf-gallery .wp-block-image:hover img,
	.wf-gallery .wp-block-image:focus-within img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Mobile
   ---------------------------------------------------------------------------
   The desktop layout is a wide photograph with room around it. On a phone the
   same rules give a tall crop with a lot of empty overlay, and a gallery one
   image per screen, which reads as a much thinner page. Two corrections:
   the hero gives the photo more of the frame, and the gallery becomes a real
   thumbnail grid instead of a single column.
--------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Full gallery page: two columns, big enough to actually look at. */
	.wf-gallery .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--wp--preset--spacing--20);
	}

	/* Home-page preview keeps its four-across row on a phone too, just tighter. */
	.wf-gallery-preview .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 6px;
	}
}

/* ---------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------
   On a phone the footer measured 786px -- nearly a full screen of links after
   the page had already ended. The block gap the theme uses for page sections
   (32px) is far too generous for a stacked list of five short menu items.
   Tightened on mobile, left alone on desktop where the columns sit side by
   side and the height is not a problem.
--------------------------------------------------------------------------- */

/* Compact footer (Rich, 2026-10-11: "nagyon szét van húzva"): logo, menu in
   one line and contact in one row, then a single legal line. */
.wp-site-blocks > footer.wf-footer {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}
.wf-footer .wf-footer__row {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.wf-footer .wf-footer__nav {
	gap: 0.4rem 1.5rem;
}
.wf-footer .wf-footer__logo img {
	display: block;
	width: 140px;
	height: auto;
}
.wf-footer .wf-footer__contact {
	gap: var(--wp--preset--spacing--20);
}
.wf-footer .wf-footer__contact p {
	margin: 0;
}
.wf-footer .wf-footer__contact a {
	color: inherit;
	text-decoration: none;
}
.wf-footer .wf-footer__contact .wp-block-social-links {
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}
.wf-footer .wf-footer__phone {
	display: inline-flex;
	color: var(--wp--preset--color--contrast-2);
}
.wf-footer .wf-footer__phone:hover,
.wf-footer .wf-footer__phone:focus-visible {
	color: var(--wp--preset--color--contrast);
}
@media (max-width: 47.99rem) {
	.wf-footer .wf-footer__contact {
		flex-wrap: wrap;
		justify-content: center;
	}
}
.wf-footer .wf-footer__legal {
	margin: 0;
	flex: 1 1 auto;
}
.wf-footer .wf-footer__legal a {
	color: inherit;
}
@media (max-width: 47.99rem) {
	.wf-footer .wf-footer__row {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
	}
	.wf-footer .wf-footer__logo img {
		width: 120px;
	}
}

/* ---------------------------------------------------------------------------
   Call to action band
   ---------------------------------------------------------------------------
   Rich asked for the light palette back, so the emphasis has to come from
   something other than colour. Three quiet devices instead:

     1. More air than any other section on the page.
     2. A hairline rule above and below, so the band reads as its own thing
        rather than more page.
     3. One size up on the title, and one genuinely solid button.

   Nothing here shouts; the section simply has more room around it than its
   neighbours, and the eye reads that as importance.
--------------------------------------------------------------------------- */

.wf-cta {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wf-cta .wf-cta__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* Phone: one text size, left-aligned. A long centred paragraph in two sizes
   was hard to read on a real iPhone (Rich, 2026-10-11). */
@media (max-width: 47.99rem) {
	.wf-cta .wf-cta__title,
	.wf-cta p.has-text-align-center {
		text-align: left;
	}
	.wf-cta .wf-cta__title {
		font-size: var(--wp--preset--font-size--x-large);
	}
	.wf-cta .wp-block-buttons {
		justify-content: flex-start;
	}
}

.wf-cta .wp-block-buttons.is-layout-flex {
	gap: var(--wp--preset--spacing--30);
}

/* The solid button carries the primary action, so give it more presence than
   the theme's default: wider padding and a touch of lift. */
.wf-cta__primary .wp-block-button__link {
	padding-inline: 2rem;
	box-shadow: 0 1px 2px rgba(44, 44, 42, 0.06), 0 10px 24px rgba(44, 44, 42, 0.10);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.wf-cta__primary .wp-block-button__link:hover,
.wf-cta__primary .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(44, 44, 42, 0.08), 0 14px 30px rgba(44, 44, 42, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.wf-cta__primary .wp-block-button__link {
		transition: none;
	}
	.wf-cta__primary .wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   About section portrait
   ---------------------------------------------------------------------------
   The placeholder illustration sits on a white square, which would show as a
   hard white block on the grey ground. A circular crop hides the edge and is
   the usual shape for a portrait anyway.

   On a phone the columns stack, and a full-width portrait would fill most of
   the screen before a single word of text. Capped and centred instead.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   "Hogyan válassz díszt?": example set left, text + decor tiles right.
   --------------------------------------------------------------------------- */
.wf-howto__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}
.wf-howto__grid > .wp-block-group {
	margin: 0;
}
.wf-howto__photo {
	margin: var(--wp--preset--spacing--30) auto 0;
	max-width: 26rem;
}
.wf-howto__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
.wf-howto__tiles {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.wf-howto__tiles a {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
	overflow: hidden;
}
.wf-howto__tiles img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 300ms ease;
}
.wf-howto__tiles a:hover img,
.wf-howto__tiles a:focus-visible img {
	transform: scale(1.04);
}
.wf-howto__tiles span {
	display: block;
	padding: 0.4rem 0.25rem 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 47.99rem) {
	.wf-howto__body p.has-text-align-center {
		text-align: left;
	}
}
@media (min-width: 48rem) {
	.wf-howto__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
   "Azonnal megvásárolható": product cards.
   --------------------------------------------------------------------------- */
.wf-instock__cards {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
@media (min-width: 48rem) {
	.wf-instock__cards {
		grid-template-columns: repeat(4, 1fr);
	}
}
.wf-instock__card a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: inherit;
	text-decoration: none;
	text-align: center;
}
.wf-instock__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 2px;
	margin-bottom: 0.4rem;
}
.wf-instock__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
}
.wf-instock__desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}
.wf-instock__price {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Dekorok page: each element in two halves like the About section, text on
   the light background, photos on a taupe panel; every second element mirrored.
   Phone: photos first, then the text.
   --------------------------------------------------------------------------- */
.wf-decor {
	display: grid;
	grid-template-columns: 1fr;
	padding: 0;
	/* only the vertical margin: alignfull needs its negative side margins */
	margin-block: 0 !important;
}
.wf-decor > .wp-block-group {
	margin: 0;
}
.wf-decor__text {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.wf-decor__text > * {
	max-width: 30rem;
	margin-inline: auto;
}
.wf-decor__media {
	order: -1;
	background: var(--wp--preset--color--taupe);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	align-content: center;
	justify-items: center;
}
.wf-decor__media--multi {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-decor__media .wp-block-image {
	margin: 0;
	width: 100%;
	max-width: 22rem;
}
.wf-decor__media .wp-block-image img {
	border-radius: 2px;
}
@media (min-width: 48rem) {
	.wf-decor {
		grid-template-columns: 1fr 1fr;
	}
	.wf-decor.wf-decor--no-image {
		grid-template-columns: 1fr;
	}
	.wf-decor__media {
		order: 0;
		padding: var(--wp--preset--spacing--60);
	}
	.wf-decor__text {
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
	/* every second element: photos left, text right */
	.wf-decor:nth-of-type(even) .wf-decor__media {
		order: -1;
	}
	.wf-decor__media--multi:has(> :nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
   "Ti küldtétek" (customer photos): large photo left, text and four small
   photos right; stacked on a phone.
   --------------------------------------------------------------------------- */
.wf-customers__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.wf-customers__grid > .wp-block-group {
	margin: 0;
}

.wf-customers__feature .wp-block-image {
	margin: 0;
}

.wf-customers__thumbs {
	margin-top: var(--wp--preset--spacing--40);
}

.wf-customers__thumbs .wp-block-image {
	margin: 0;
}

@media (max-width: 47.99rem) {
	.wf-customers__body p.has-text-align-center:not(:last-child) {
		text-align: left;
	}
}

@media (min-width: 48rem) {
	.wf-customers__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
	.wf-customers__thumbs.is-layout-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Split section (About), after Livia's Canva design: text on the light
   background, a large portrait on a taupe panel. Phone: portrait first.
   --------------------------------------------------------------------------- */
.wf-split {
	display: grid;
	grid-template-columns: 1fr;
	padding: 0;
}

.wf-split > .wp-block-group {
	margin: 0;
}

.wf-split__text {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.wf-split__text > * {
	max-width: 32rem;
	margin-inline: auto;
}

.wf-split__media {
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wf-split__figure {
	margin: 0;
	width: min(100%, 22rem);
}

.wf-split__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--surface);
	box-shadow: 0 10px 30px rgba(44, 44, 42, 0.12);
}

/* Phone: left-aligned text reads better than a long centred block. */
@media (max-width: 47.99rem) {
	.wf-split__text p.has-text-align-center {
		text-align: left;
	}
}

@media (min-width: 48rem) {
	.wf-split {
		grid-template-columns: 1fr 1fr;
	}
	.wf-split.wf-split--no-image {
		grid-template-columns: 1fr;
	}
	.wf-split__media {
		order: 0;
		padding: var(--wp--preset--spacing--60);
	}
	.wf-split__figure {
		width: min(100%, 26rem);
	}
	.wf-split__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

/* ---------------------------------------------------------------------------
   Contained two-halves (Rich, 2026-10-11): About and Dekorok sit in the same
   centred column as every other section, without the full-width taupe panel.
   The photo keeps its white frame and shadow on the page background.
   --------------------------------------------------------------------------- */
.wf-split,
.wf-decor {
	max-width: 64rem;
	margin-inline: auto !important;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}
.wf-split__text,
.wf-split__media,
.wf-decor__text,
.wf-decor__media {
	background: transparent !important;
	padding: 0 !important;
}
.wf-decor + .wf-decor {
	border-top: 1px solid var(--wp--preset--color--line);
}
@media (min-width: 48rem) {
	.wf-split,
	.wf-decor {
		gap: var(--wp--preset--spacing--60);
	}
}

/* ---------------------------------------------------------------------------
   Contact form
   ---------------------------------------------------------------------------
   Styled here rather than in the plugin so the form inherits the theme's
   palette and type automatically, and follows it if the palette changes.
   The markup comes from the WonderFlower Contact plugin.
--------------------------------------------------------------------------- */

.wf-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	max-width: 34rem;
}

.wf-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.wf-form__label {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.wf-form__input {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	transition: border-color 150ms ease;
}

.wf-form__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--sage-deep);
	box-shadow: 0 0 0 3px rgba(156, 172, 159, 0.28);
}

.wf-form__input--area {
	resize: vertical;
	min-height: 9rem;
	line-height: 1.6;
}

.wf-form__row--submit {
	margin-top: var(--wp--preset--spacing--20);
}

/* Off-screen rather than display:none -- a bot reading the DOM should still
   find the field, a person should never see or tab into it. */
.wf-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wf-form__notice {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--surface);
	font-size: 0.9375rem;
}

.wf-form__notice--error {
	border-left-color: #A8564B;
}

@media (prefers-reduced-motion: reduce) {
	.wf-form__input {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Lightbox
   ---------------------------------------------------------------------------
   Replaces the core one, which opens a single image with no way to move to the
   next. Paging is the whole point of a gallery, so this one has arrows, keys
   and swipe. Behaviour lives in assets/js/gallery-lightbox.js.
--------------------------------------------------------------------------- */

body.wf-lb-open {
	overflow: hidden;
}

/* `display: flex` beats the browser default for [hidden], so the closed
   overlay would sit invisibly over the whole page and swallow every click.
   Playwright caught exactly that: the gallery images were unclickable. */
.wf-lb[hidden] {
	display: none !important;
}

.wf-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: clamp(0.75rem, 3vw, 2.5rem);
	background: rgba(28, 28, 26, 0.94);
}

.wf-lb__frame {
	margin: 0;
	max-width: min(92vw, 60rem);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.wf-lb__img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
}

.wf-lb__cap:empty {
	display: none;
}

.wf-lb__cap {
	margin: 0;
	max-width: 46rem;
	color: #D8D8D5;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

.wf-lb__nav,
.wf-lb__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 999px;
	background: rgba(251, 251, 250, 0.12);
	color: #FBFBFA;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background 150ms ease;
}

.wf-lb__nav:hover,
.wf-lb__close:hover {
	background: rgba(251, 251, 250, 0.24);
}

.wf-lb__nav:focus-visible,
.wf-lb__close:focus-visible {
	outline: 2px solid #FBFBFA;
	outline-offset: 2px;
}

.wf-lb__close {
	position: absolute;
	top: clamp(0.75rem, 3vw, 1.5rem);
	right: clamp(0.75rem, 3vw, 1.5rem);
	font-size: 1.5rem;
}

.wf-lb__counter {
	position: absolute;
	bottom: clamp(0.75rem, 3vw, 1.5rem);
	left: 0;
	right: 0;
	margin: 0;
	color: #9A9A97;
	font-size: 0.8125rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The thumbnail is the control, so it has to look like one. */
.wf-gallery__item img {
	cursor: zoom-in;
}

.wf-gallery__item img:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* On a phone the arrows would eat the photo; swipe covers it instead. */
@media (max-width: 600px) {
	.wf-lb__nav {
		display: none;
	}
}

/* On the cart and checkout pages WooCommerce hides the mini cart with
   visibility:hidden, which keeps its box: the menu icon then stops one icon
   short of the right edge. Take the hidden one out of the layout. */
.wc-block-mini-cart[style*="visibility:hidden"] {
	display: none;
}

/* ...and the header row keeps the cart icon's height (42.5px) without it,
   so the header is the same height on every page. */
.wp-site-blocks > header .is-content-justification-space-between {
	min-height: 42.5px;
}

/* ---------------------------------------------------------------------------
   Buttons stay compact everywhere (Rich, 2026-10-11: "ne legyenek otromba
   nagyok"). WooCommerce's cart, checkout and mini-cart buttons carry their own
   sizes; bring them in line with the theme button.
   --------------------------------------------------------------------------- */
.wc-block-mini-cart__footer-actions .wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-mini-cart-shopping-button-block .wc-block-components-button,
.single_add_to_cart_button {
	font-size: 1rem !important;
	line-height: 1.3 !important;
	min-height: 0 !important;
	padding: 0.75rem 1.5rem !important;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Front page bands alternate base / surface so every section reads as its
   own (Rich, 2026-10-11: workshop and "Hogyan válassz" ran into each other).
   --------------------------------------------------------------------------- */
.wp-site-blocks .wf-customers.has-background { background-color: var(--wp--preset--color--surface) !important; }
.wp-site-blocks .wf-gallery-preview.has-background { background-color: var(--wp--preset--color--base) !important; }
.wp-site-blocks .wf-howto.has-background { background-color: var(--wp--preset--color--surface) !important; }
.wp-site-blocks .wf-instock.has-background { background-color: var(--wp--preset--color--base) !important; }

/* No strip of page background between the last section and the footer. */
.wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

/* About: phone order is text, photo, then the "more" link (Rich, 2026-10-11).
   Desktop: text and link in the left column, photo on the right. */
.wf-split__more {
	order: 2;
	margin: 0 !important;
}
@media (min-width: 48rem) {
	.wf-split {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "text media" "more media";
		grid-template-rows: auto auto;
		row-gap: var(--wp--preset--spacing--30);
	}
	.wf-split.wf-split--no-image {
		grid-template-areas: "text" "more";
		grid-template-columns: 1fr;
	}
	.wf-split__text { grid-area: text; align-self: end; }
	.wf-split__media { grid-area: media; }
	.wf-split__more { grid-area: more; align-self: start; }
}

/* Mobile overlay menu: the designer as a button at the end; hidden in the
   desktop menu, where the hero and sections already carry it. */
.wp-block-navigation .wf-nav-cta {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wf-nav-cta {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
}
.wp-block-navigation__responsive-container.is-menu-open .wf-nav-cta a {
	display: inline-block;
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--surface) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	padding: 0.75rem 1.75rem !important;
	border-radius: 999px;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Shop sorting select: a calm pill in the theme's colours instead of the
   browser default (Rich, 2026-10-11).
   --------------------------------------------------------------------------- */
.woocommerce-ordering {
	margin: 0;
}
.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B675F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.55rem 2.5rem 0.55rem 1.1rem;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 150ms ease;
}
.woocommerce-ordering select.orderby:hover {
	border-color: var(--wp--preset--color--contrast-2);
}
.woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}