/*
Theme Name: WinMax
Theme URI: https://winmax.hu
Author: WinMax
Description: Modern, egyedi WooCommerce blokk-sablon a WinMax elektronikai webáruház számára. Teljes egészében szerkeszthető a WordPress oldal-szerkesztőben (Site Editor).
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: winmax
Tags: e-commerce, full-site-editing, block-patterns

WinMax is a block theme built for a WooCommerce electronics store.
*/

/* ---------- base polish ---------- */
html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	background: linear-gradient(180deg, #f8fafc 0%, #e7ebf1 100%);
}
/* Root-level template blocks (header/main/footer) shouldn't get the
   theme's default blockGap margin between them - that's for content
   spacing, not page-structure seams. WordPress wraps template parts in
   their own .wp-block-template-part element with its own default margin. */
body > .wp-block-group,
.wp-site-blocks > .wp-block-template-part {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---------- header definition ---------- */
.wm-header {
	box-shadow: 0 6px 24px rgba(0, 32, 80, 0.16);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* Force true edge-to-edge width: WordPress's alignfull negative-margin CSS
   isn't reliably generated for nested groups inside a sticky template-part
   header, so we do it directly instead of depending on that mechanism. */
.wm-topbar,
.wm-mainbar,
.wm-mainrow {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}
.wm-mainrow {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wm-mainrow,
.wm-mainrow > .wp-block-group,
.wm-mainrow .wp-block-navigation__container {
	align-items: center !important;
}

/* ---------- utility nav (Kapcsolat / B2B / Letöltések) ---------- */
.wm-utilnav a {
	text-decoration: none;
	color: #5b6576 !important;
	opacity: 0.9;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.wm-utilnav a:hover { opacity: 1; color: var(--wp--preset--color--primary) !important; }

/* ---------- language switcher ----------
   desktop: injected into the topbar row, just left of "Rólunk" (see
   header.html + winmax_inject_topbar_language_switcher in functions.php);
   mobile: injected as a <li> inside the hamburger menu's item list instead
   (see winmax_inject_mobile_language_switcher) since the topbar itself is
   hidden on mobile.
   TranslatePress ships this widget sized for a standalone floating button
   (generous padding on both the inert "anchor" box and the real language
   pill inside it), which is much taller than the thin topbar it now sits
   in — shrink both down to match the topbar's original ~32px height. */
.wm-topbar-lang {
	display: flex;
	align-items: center;
	margin-right: 20px;
}
.wm-topbar-lang .trp-shortcode-switcher__wrapper {
	font-size: 0.75rem;
}
.wm-topbar-lang .trp-shortcode-anchor,
.wm-topbar-lang .trp-shortcode-overlay {
	padding: 0 !important;
}
.wm-topbar-lang .trp-language-item {
	padding: 3px 8px !important;
	font-size: 0.75rem !important;
}
.wm-topbar-lang .trp-current-language-item__wrapper {
	gap: 2px;
}
.wm-topbar-lang .trp-flag-image {
	width: 14px !important;
	height: auto !important;
}
.wm-topbar-lang .trp-shortcode-arrow {
	width: 14px !important;
	height: 14px !important;
}
/* hidden by default so it doesn't leak into the desktop nav row, which
   reuses the exact same <ul> the mobile overlay displays */
.wm-mobile-lang-item {
	display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wm-mobile-lang-item {
	display: flex !important;
	justify-content: flex-end;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* mobile menu overlay: items bottom/right-aligned instead of centered,
   so they sit in easy thumb reach when holding the phone one-handed
   (the close button stays top-right, fixed via its own absolute
   positioning, unaffected by this). */
/* the dialog wrapper chain (close-wrap > dialog > content) shrinks to
   its own content height by default — "push content to the bottom of
   the screen" needs each link in that chain to actually be full height
   first, or justify-content:flex-end just bottoms it out inside a box
   that's already sitting near the top with empty space below it.
   Gated on .is-menu-open (not a media query): the desktop flat nav bar
   reuses this same wrapper markup, and WP core's own breakpoint for
   showing/hiding the toggle button is a fixed 600px that doesn't line
   up with any max-width we'd pick here — gating on the open state
   instead means these rules only ever apply while the overlay is
   actually on screen, regardless of what width that happens at. */
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	flex-grow: 1;
}
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	height: 100%;
}
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: flex-end !important;
	align-items: flex-end !important;
	padding-right: 28px;
	padding-bottom: 40px;
	box-sizing: border-box;
}
/* .wm-mainrow has its own blanket "align-items: center !important" for
   the desktop inline row — win over it here (higher specificity, same
   !important) without touching that rule, since it's still correct for
   the collapsed desktop nav. */
.wm-mainrow .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-end !important;
	/* this list has its own flex-grow:1 (core default, so it fills the
	   now-full-height content box above), which makes ITS OWN
	   justify-content — not the content wrapper's — the one that
	   actually decides where the items sit inside that tall box */
	justify-content: flex-end !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wm-mainnav .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wm-mainnav .wp-block-navigation-item > .wp-block-navigation-item__content {
	text-align: right;
}

/* mobile menu opening animation — display:none → flex can't be
   *transitioned* (no box to interpolate from), but a CSS *animation*
   still plays on that first frame, so the panel gets a quick slide+fade
   from the right (the side the items now live on), and each item
   cascades in right after with a small stagger for a bit of polish
   without slowing the whole thing down. */
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open {
	animation: wmMenuIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wmMenuIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	animation: wmDialogIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wmDialogIn {
	from { transform: translateX(28px); }
	to { transform: translateX(0); }
}
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	opacity: 0;
	animation: wmItemIn 0.32s ease both;
}
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.06s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.10s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.14s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.18s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.21s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.24s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.27s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.30s; }
.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+9) { animation-delay: 0.33s; }
@keyframes wmItemIn {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open,
	.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.wm-mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- search ---------- */
.wm-search .wc-block-product-search__fields {
	position: relative;
}
.wm-search label {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.wm-search input[type="search"] {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.6rem 1rem;
	font-size: 0.8125rem;
	min-width: 160px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wm-search--compact input[type="search"] {
	background: #fff;
	min-width: 100px;
	padding: 0.4rem 0.7rem;
	font-size: 0.75rem;
}
.wm-search--compact button {
	width: 28px;
	height: 28px;
	min-width: 28px;
}

/* big prominent search bar (main row) */
.wm-search--big {
	flex: 1 1 auto;
	max-width: 760px;
	width: 100%;
}
.wm-search--big .wc-block-product-search {
	width: 100%;
}
.wm-search--big .wc-block-product-search__fields {
	position: relative;
	width: 100%;
	display: block;
}
.wm-search--big input[type="search"] {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.9rem 4rem 0.9rem 1.5rem;
	font-size: 0.9375rem;
}
.wm-search--big input[type="search"]:focus {
	background: #fff;
	border-color: var(--wp--preset--color--primary);
}
.wm-search--big .wc-block-product-search__button {
	position: absolute !important;
	top: 50% !important;
	right: 6px !important;
	left: auto !important;
	bottom: auto !important;
	transform: translateY(-50%);
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}
.wm-search--big .wc-block-product-search__button svg { fill: #fff; }

/* cart as a solid prominent pill button */
.wm-cart-btn .wc-block-mini-cart__button {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	padding: 0.65rem 1.1rem !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: 0.875rem !important;
	width: auto;
	height: auto;
	box-shadow: 0 8px 18px rgba(0,87,224,0.25);
	transition: filter 0.15s ease;
}
.wm-cart-btn .wc-block-mini-cart__button:hover { filter: brightness(1.08); }
.wm-cart-btn .wc-block-mini-cart__amount { color: #fff !important; }
.wm-cart-btn svg { fill: #fff !important; }
.wm-search input[type="search"]:focus {
	outline: none;
	background: #fff;
	border-color: var(--wp--preset--color--primary);
}
.wm-search button {
	border-radius: 999px !important;
	width: 38px;
	height: 38px;
	min-width: 38px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- header icon buttons ---------- */
.wm-icon-btn .wc-block-components-product-search__button,
.wm-icon-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}
.wm-icon-btn a:hover,
.wm-icon-btn:hover {
	background-color: #F0F4FF;
}
.wc-block-mini-cart__button {
	border-radius: 999px !important;
}

/* ---------- nav underline hover ---------- */
.wm-mainnav .wp-block-navigation-item > a,
.wm-mainnav .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.wm-mainnav .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.wm-mainnav .wp-block-navigation-item > a:hover::after { transform: scaleX(1); }
.wm-mainnav .wp-block-navigation-item > a:hover { color: var(--wp--preset--color--primary) !important; }

/* ---------- highlighted nav pills: Akció / Outlet / Használt ---------- */
.wm-mainnav .wm-pill > a {
	position: relative;
	color: #fff !important;
	padding: 0.45rem 1rem !important;
	border-radius: 999px;
	font-weight: 700 !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.wm-mainnav .wm-pill > a::after { content: none !important; }
.wm-mainnav .wm-pill > a:hover {
	color: #fff !important;
	transform: translateY(-1px);
	filter: brightness(1.08);
}
.wm-mainnav .wm-pill--akcio > a { background: var(--wp--preset--color--accent); box-shadow: 0 6px 14px rgba(225,53,43,0.30); }
.wm-mainnav .wm-pill--outlet > a { background: #F59E0B; box-shadow: 0 6px 14px rgba(245,158,11,0.30); }
.wm-mainnav .wm-pill--hasznalt > a { background: #0EA35C; box-shadow: 0 6px 14px rgba(14,163,92,0.30); }

/* mobile hamburger toggle: on its own, a bare 24px icon on a plain white
   bar is easy to miss next to the colorful banners below it. Instead of
   a separate floating icon, the whole row reads as one soft, full-height
   surface: two arrow-tipped "ribbons" (::before/::after on .wm-mainrow,
   see below) flank the label, sharing its exact tint, so the row looks
   like a single integrated bar that happens to taper to a point on each
   end — not three separate shapes. */
/* the ribbons: full height of the row, arrow-cut on the inner edge
   (clip-path notch, not a separate icon), same soft tint as the button
   above so button+ribbons read as one continuous shape with pointed
   ends, sitting flush in the row rather than floating on top of it.
   Everything here is mobile-only. WP core's own CSS only hides this
   toggle button above 600px (wp-includes/blocks/navigation/style.css:
   "@media (min-width: 600px) { ...display:none }"), so our breakpoint
   has to match that exactly — 782px left a 600–782px gap where core
   showed the flat list AND our !important kept the button visible too
   (e.g. a 768px-wide iPad Mini showed both at once). */
@media (max-width: 599px) {
	.wm-mainnav .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: none;
		color: var(--wp--preset--color--primary) !important;
		padding: 0 16px !important;
		min-height: 0 !important;
		height: 100%;
		position: relative;
		z-index: 1;
	}
	.wm-mainnav .wm-menu-label {
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1;
	}
	.wm-mainnav .wm-menu-chevron {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
	}
	.wm-mainrow {
		--wm-menu-tint: rgba(0, 87, 224, 0.06);
		position: relative;
	}
	.wm-mainrow::before,
	.wm-mainrow::after {
		content: "";
		position: absolute;
		top: 0;
		height: 100%;
		width: 26%;
		background: var(--wm-menu-tint);
	}
	.wm-mainrow::before {
		left: 0;
		clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
	}
	.wm-mainrow::after {
		right: 0;
		clip-path: polygon(100% 0, 12% 0, 0 50%, 12% 100%, 100% 100%);
	}
	/* this row holds nothing but the menu button below 600px, so its
	   padding *is* the button's height — doubled from the original 2px
	   sliver to give the "Menü" bar real visual weight */
	.wm-mainrow { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* ---------- badges ---------- */
.wm-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.6875rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.wm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- split brand banner (iLike / Outlet) ----------
   replaces the old hero: two side-by-side tinted panels, each with a
   heading, a checkmark subtext line, and a row of 4 product thumbnails.
   Sits inside an alignwide wrapper, same content width as the rest of
   the page's sections. */
.wm-brand-banner {
	display: flex;
	gap: 24px;
}
.wm-brand-banner-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Side by side (desktop) the two panels must split the row evenly,
	   which needs flex-basis:0 — with "auto" a panel's starting width
	   is its content width, and a product strip with a dozen items in a
	   non-wrapping scroll row makes that enormous, squeezing the other
	   panel. The stacked (column) layout below the 900px breakpoint
	   flips the main axis to height, where a 0 basis collapses the panel
	   (Firefox then mis-measured the old min-height patch), so there it
	   gets sized by its content instead — see the media query. */
	flex: 1 1 0;
	min-width: 0;
	border-radius: 20px;
	padding: 56px 48px;
	box-sizing: border-box;
	/* same "liquid glass" treatment as the category-page heroes: a
	   translucent tint, a light rim and an inner highlight, plus a
	   backdrop blur for depth even without a photo behind these panels */
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 18px 40px -14px rgba(0, 32, 80, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
}
.wm-brand-banner-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 8% -20%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%);
}
/* iLike = our own brand, so it gets the Outlet-style amber treatment and
   vice versa per the swap — the class names stay put, only the colors move */
.wm-brand-banner-panel--ilike {
	background: linear-gradient(135deg, color-mix(in srgb, #92400e 90%, transparent) 0%, color-mix(in srgb, #F59E0B 65%, transparent) 60%, color-mix(in srgb, #ffb84d 55%, transparent) 100%);
}
.wm-brand-banner-panel--outlet {
	background: linear-gradient(135deg, color-mix(in srgb, #002d80 90%, transparent) 0%, color-mix(in srgb, #0057E0 65%, transparent) 60%, color-mix(in srgb, #3d85ff 55%, transparent) 100%);
}
/* CTA pill, left-aligned in normal flow right below the product grid —
   a fixed margin-top (not an absolute bottom offset) is what actually
   guarantees an identical gap on both panels, since the iLike header
   (logo image + 2-line subtitle) and the Outlet header (plain heading)
   are never quite the same height, which used to throw the two panels'
   absolutely-positioned buttons out of sync with each other. */
.wm-brand-banner-cta {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	background: #fff;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wm-brand-banner-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
}
.wm-brand-banner-panel--ilike .wm-brand-banner-cta {
	color: #c2570a;
}
.wm-brand-banner-panel--outlet .wm-brand-banner-cta {
	color: var(--wp--preset--color--primary);
}
.wm-brand-banner-header {
	margin-bottom: 32px;
}
/* the iLike logo (48px tall) and the Outlet heading text don't naturally
   match height, and the two panels' subtitle copy isn't the same length
   either (so one wraps to 2 lines, the other doesn't) — reserving fixed
   space for both keeps the product grid starting at the same height on
   both panels regardless of that content-length difference. */
.wm-brand-banner-title {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: #fff;
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
/* the iLike brand logo has orange in it, same as this panel's background,
   so it needs a white outline to stay visible — built from stacked
   drop-shadows (which trace the image's alpha silhouette) since it's a
   flat PNG, not an SVG we can give a real stroke to. */
.wm-brand-banner-logo {
	display: block;
	height: 48px;
	width: auto;
	margin: 0 0 10px;
	filter:
		drop-shadow(1.5px 0 0 #fff)
		drop-shadow(-1.5px 0 0 #fff)
		drop-shadow(0 1.5px 0 #fff)
		drop-shadow(0 -1.5px 0 #fff)
		drop-shadow(1.5px 1.5px 0 #fff)
		drop-shadow(-1.5px -1.5px 0 #fff)
		drop-shadow(1.5px -1.5px 0 #fff)
		drop-shadow(-1.5px 1.5px 0 #fff);
}
.wm-brand-banner-subtitle {
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	min-height: 2.8em;
	margin: 0;
}
/* horizontally scrollable strip — lets the panel hold more sample
   products than fit in one row, instead of capping it at 4. Scrolling
   itself is driven by the prev/next buttons winmax_product_carousels()
   injects into the wrap below (same mechanism as the homepage product
   rows), so the native scrollbar is hidden rather than styled. */
.wm-brand-banner-products-wrap {
	position: relative;
}
.wm-brand-banner-products {
	display: flex;
	min-width: 0;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* proximity, not mandatory — a hard snap fights a vertical wheel/trackpad
	   gesture that merely passes over the row, which is what made scrolling
	   down the homepage feel like it kept catching on every product strip */
	scroll-snap-type: x proximity;
	/* pan-x, not pan-y: this claims horizontal touch panning for the
	   element itself (so finger-drag still scrolls the strip), while
	   ceding vertical gestures to the page instead of capturing them.
	   (Had this backwards before — pan-y did the opposite of both: it
	   claimed vertical panning for the strip, which is what broke
	   touch-drag scrolling here, without even fixing the vertical
	   hijack it was meant to solve.) */
	touch-action: pan-x;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.wm-brand-banner-products::-webkit-scrollbar {
	display: none;
}
.wm-brand-banner-product {
	display: flex;
	flex-direction: column;
	flex: 0 0 150px;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wm-brand-banner-product:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.wm-brand-banner-product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}
.wm-brand-banner-product-price {
	padding: 10px 12px;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy);
}
@media (max-width: 900px) {
	.wm-brand-banner {
		flex-direction: column;
		/* a little breathing room off the screen edge — the panels
		   otherwise ran edge-to-edge once stacked on mobile, with
		   nothing else on the page doing that */
		padding: 0 10px;
	}
	.wm-brand-banner-panel {
		flex: 0 0 auto;
	}
}
@media (max-width: 480px) {
	.wm-brand-banner-panel {
		padding: 20px;
	}
	.wm-brand-banner-products {
		gap: 10px;
	}
	.wm-brand-banner-product {
		flex-basis: 128px;
	}
}

/* ---------- category photo cards (Featured Category block) ---------- */
.wm-cat-photo-card {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wm-cat-photo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 32, 80, 0.18);
}
.wm-cat-photo-card .wc-block-featured-category__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}
.wm-cat-photo-card .wc-block-featured-category__inner-blocks {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding-bottom: 22px;
	box-sizing: border-box;
}
/* icon + category name, merged into one pill in the top-left corner
   (previously a separate icon badge up top and a title pill at the
   bottom of the card) */
.wm-cat-badge {
	position: absolute !important;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1;
	padding: 0.55rem 0.95rem;
	border-radius: 999px;
	margin: 0 !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	z-index: 2;
}
.wm-cat-photo-card .wc-block-featured-category__background-image {
	object-fit: cover !important;
}
/* sized to comfortably fit "Megnézem →" without wrapping even in the
   narrowest (2-column mobile) tile — used at every width rather than
   just scaled down for mobile, since a 5-column *tablet* grid (e.g.
   1024px) sits in between the mobile and desktop breakpoints and was
   still wide enough to use the bigger size below, which wrapped there */
.wm-cat-pill-btn .wp-block-button__link {
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 0.6875rem !important;
	padding: 0.35rem 0.8rem !important;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* ---------- category icon cards ---------- */
.wm-cat-card {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: 1.75rem 1.5rem;
	text-decoration: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wm-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 32, 80, 0.10);
	border-color: transparent;
}
.wm-cat-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	background: linear-gradient(135deg, #EAF1FF 0%, #DCE8FF 100%);
}
.wm-cat-name {
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
}
.wm-cat-arrow {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.875rem;
}

/* ---------- homepage product rows: full-width title strip ----------
   each row (Akciós/Legújabb/TV/Monitor/...) is a slim, full-bleed tinted
   band carrying just the heading + "see all" link, immediately followed
   by its wm-row-products wrapper — the pair replace the old tall
   (64px top+bottom) section blocks so consecutive rows sit much closer
   together. */
.wm-row-title {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	/* very faint version of the hero banners' glass treatment — just
	   enough translucency + blur to feel like the same material, not
	   a loud color like the banners get */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 100%) !important;
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.wm-row-title-text {
	/* top/bottom only: "Legújabb termékek" has no heading+link wrapper, so
	   its <h2> is a direct child of the constrained wm-row-title strip and
	   relies on WordPress's own margin-left/right:auto centering to match
	   the 1680px-wide heading+link wrapper the other rows use — a blanket
	   margin:0 here wiped that out and left it flush against the edge
	   instead of centered like every other row. */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
}
.wm-row-products {
	margin-top: 0 !important;
}

/* the homepage sale/new-product grids carry align:"wide" so they match the
   category-card row above, but the block doesn't stretch to fill that
   width on its own (it shrinks to its content instead) */
.wp-block-woocommerce-product-on-sale.alignwide,
.wp-block-woocommerce-product-new.alignwide,
.wp-block-woocommerce-product-category.alignwide {
	width: 100% !important;
}

/* ---------- product grid gap ----------
   WooCommerce sizes each card as a flex item with a percentage width that
   assumes zero gap; adding flex `gap` on top overflows the row and wraps
   early. CSS Grid divides available space AFTER accounting for gaps, so
   we switch layout mode instead of patching the width math. */
.wc-block-grid__products {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	column-gap: 16px !important;
	row-gap: 8px !important;
}
.wc-block-grid__products .wc-block-grid__product {
	width: 100% !important;
	max-width: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
}
@media (max-width: 1200px) {
	.wc-block-grid__products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 992px) {
	.wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	.wc-block-grid__products { gap: 12px !important; }
}

/* same fixed-grid treatment for the Product Collection block (used by
   dynamic taxonomy-filtered pages, e.g. the brand archives) — its own
   "Reszponzív" column-shrinking is JS/ResizeObserver-driven and doesn't
   follow these breakpoints, so displayLayout.shrinkColumns is set to
   false on that block and this plain CSS grid takes over instead,
   matching every other product listing on the site.
   Tag-qualified (ul.…) on purpose: WooCommerce reuses this exact class
   name both on the outer <ul> (the grid) AND on a <div> inside every
   single product <li> (that item's own image/title/price/button
   wrapper) — an unqualified class selector grid-ified that inner div
   too, scattering each card's contents into a mini grid instead of a
   vertical stack. */
ul.wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	column-gap: 16px !important;
	row-gap: 8px !important;
}
ul.wp-block-woocommerce-product-template > li {
	width: 100% !important;
	max-width: none !important;
	flex-basis: auto !important;
	margin: 0 !important;
}
@media (max-width: 1200px) {
	ul.wp-block-woocommerce-product-template { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 992px) {
	ul.wp-block-woocommerce-product-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
	ul.wp-block-woocommerce-product-template { gap: 12px !important; }
}

/* ---------- homepage product rows: horizontal-scroll carousel ----------
   overrides the shared grid rule above just for the homepage sections. The
   on-sale/new/category blocks are also reused as full listings on their own
   pages (/akcio/, /tv/, /monitor/, ...), which must keep the fixed
   multi-row grid — the .home body class (only present on the front page)
   is what tells the two contexts apart, since winmax_product_carousels()
   also only injects its JS there. */
body.home .wp-block-woocommerce-product-on-sale .wc-block-grid__products,
body.home .wp-block-woocommerce-product-new .wc-block-grid__products,
body.home .wp-block-woocommerce-product-category .wc-block-grid__products {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* pan-x: the strip claims horizontal touch panning for itself (so
	   finger-drag still scrolls it), while vertical gestures pass
	   through to the page instead of being captured here */
	touch-action: pan-x;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-bottom: 4px;
}
body.home .wp-block-woocommerce-product-on-sale .wc-block-grid__products::-webkit-scrollbar,
body.home .wp-block-woocommerce-product-new .wc-block-grid__products::-webkit-scrollbar,
body.home .wp-block-woocommerce-product-category .wc-block-grid__products::-webkit-scrollbar {
	display: none;
}
body.home .wp-block-woocommerce-product-on-sale .wc-block-grid__products .wc-block-grid__product,
body.home .wp-block-woocommerce-product-new .wc-block-grid__products .wc-block-grid__product,
body.home .wp-block-woocommerce-product-category .wc-block-grid__products .wc-block-grid__product {
	flex: 0 0 220px !important;
	width: 220px !important;
	scroll-snap-align: start;
}
@media (max-width: 480px) {
	body.home .wp-block-woocommerce-product-on-sale .wc-block-grid__products .wc-block-grid__product,
	body.home .wp-block-woocommerce-product-new .wc-block-grid__products .wc-block-grid__product,
	body.home .wp-block-woocommerce-product-category .wc-block-grid__products .wc-block-grid__product {
		flex-basis: 160px !important;
		width: 160px !important;
	}
}
body.home .wp-block-woocommerce-product-on-sale,
body.home .wp-block-woocommerce-product-new,
body.home .wp-block-woocommerce-product-category {
	position: relative;
}
.wm-carousel-btn {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	border: none;
	box-shadow: 0 6px 16px rgba(0, 87, 224, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wm-carousel-btn:hover {
	box-shadow: 0 10px 22px rgba(0, 87, 224, 0.45);
	transform: translateY(-50%) scale(1.06);
}
.wm-carousel-btn--prev {
	left: 4px;
}
.wm-carousel-btn--next {
	right: 4px;
}
.wm-carousel-btn[hidden] {
	display: none !important;
}
@media (max-width: 600px) {
	.wm-carousel-btn {
		width: 36px;
		height: 36px;
		font-size: 0.95rem;
	}
}

/* ---------- product cards (all WC grid blocks) ---------- */
.wc-block-product-category .wc-block-grid__product,
.wp-block-woocommerce-product-collection .wc-block-product,
.wp-block-woocommerce-product-on-sale .wc-block-grid__product,
.wp-block-woocommerce-product-tag .wc-block-grid__product,
.wp-block-woocommerce-product-new .wc-block-grid__product,
.wp-block-woocommerce-handpicked-products .wc-block-grid__product,
.wc-block-product-template .wc-block-product {
	display: flex !important;
	flex-direction: column;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.wc-block-product-category .wc-block-grid__product:hover,
.wp-block-woocommerce-product-collection .wc-block-product:hover,
.wp-block-woocommerce-product-on-sale .wc-block-grid__product:hover,
.wp-block-woocommerce-product-tag .wc-block-grid__product:hover,
.wp-block-woocommerce-product-new .wc-block-grid__product:hover,
.wp-block-woocommerce-handpicked-products .wc-block-grid__product:hover,
.wc-block-product-template .wc-block-product:hover {
	box-shadow: 0 20px 40px rgba(0, 32, 80, 0.12);
	transform: translateY(-4px);
	border-color: transparent;
}

/* product image sits inset within the card, not flush against its
   edges. Used to be edge-to-edge, which worked fine while every photo
   was a demo product shot on a plain white background — identical to
   the card's own background, so the seam was invisible. Real supplier
   photos (dark backgrounds, lifestyle shots, etc.) have actual
   contrast against the card, and at the edge that reads as the photo
   being cropped/cramped — so it gets its own padding and a smaller,
   independent corner radius instead of sharing the card's. */
.wc-block-grid__product-image,
.wc-block-components-product-image {
	overflow: hidden;
	padding: 14px 14px 0;
	box-sizing: border-box;
}
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	/* contain, not cover: supplier photos come in every proportion (wide
	   monitors, tall phones, ...) on white backgrounds, and cover into a
	   square crops the sides off anything that isn't square */
	object-fit: contain !important;
	background: #fff;
	border-radius: 10px;
}
/* the whole card is one <a>, so its default underline runs under the
   title text too (the only plain text inside it) — kill it at the link
   level rather than just the title, so it can't resurface elsewhere. */
.wc-block-grid__product-link,
.wc-block-components-product-link,
.wc-block-product-template .wc-block-product a,
.woocommerce-loop-product__link,
.wp-block-post-title a {
	text-decoration: none !important;
}
.wc-block-grid__product-title,
.wc-block-components-product-title {
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	color: var(--wp--preset--color--navy) !important;
	padding: 1rem 1.1rem 0 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-decoration: none !important;
	/* reserve space for two lines so a one-line title doesn't leave the
	   price sitting further from the button than a two-line title would */
	min-height: 2.7rem;
	display: block;
}
/* WC marks the title/price "center aligned" by default in some contexts;
   force flex-start/left explicitly so a short price or a short second
   title line doesn't drift toward the middle of the (wider on mobile)
   card while the button below stays full-width/left-anchored. */
.wc-block-grid__product-price,
.wc-block-components-product-price {
	padding: 0.4rem 1.1rem 0 !important;
	font-size: 1.0625rem !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline;
	justify-content: flex-start !important;
	width: 100%;
	box-sizing: border-box;
	gap: 0 0.35rem;
}
.wc-block-grid__product-price del,
.wc-block-components-product-price del {
	opacity: 0.55;
	font-size: 0.8125rem !important;
	font-weight: 400;
	white-space: nowrap;
}
.wc-block-grid__product-price ins,
.wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent) !important;
	font-weight: 700 !important;
	white-space: nowrap;
}
.wc-block-grid__product-onsale,
.wp-block-woocommerce-product-sale-badge {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	max-width: max-content !important;
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem !important;
	top: 0.9rem !important;
	left: 0.9rem !important;
	right: auto !important;
	box-shadow: 0 4px 10px rgba(225, 53, 43, 0.35);
}
.wc-block-grid__product .wp-block-button,
.wc-block-components-product-button {
	width: 100% !important;
	box-sizing: border-box !important;
	margin-top: auto;
	padding: 1rem 1.1rem 1.25rem !important;
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-components-product-button__button {
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
	justify-content: center;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	padding: 0.75rem 1rem !important;
	box-shadow: none !important;
}

/* ---------- classic WooCommerce loop (used by the Shop archive page) ----------
   Same visual language as the block-based grids, applied to the classic
   template markup (ul.products > li.product) so /shop/ matches the rest
   of the site. */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	column-gap: 24px !important;
	row-gap: 12px !important;
	list-style: none;
}
/* WooCommerce's classic stylesheet uses ::before/::after as a float
   clearfix on this list; left in place, that generated content becomes
   an invisible grid item and eats the first cell once we switch to grid. */
ul.products::before,
ul.products::after {
	display: none !important;
	content: none !important;
}
ul.products li.product,
ul.products li.product.first,
ul.products li.product.last,
ul.products li.product:nth-child(n) {
	float: none !important;
	grid-column: auto !important;
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	padding: 0 !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
ul.products li.product:hover {
	box-shadow: 0 20px 40px rgba(0, 32, 80, 0.12);
	transform: translateY(-4px);
	border-color: transparent;
}
ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
ul.products li.product img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 16px 16px 0 0;
	/* WooCommerce's own core CSS (.woocommerce ul.products li.product a img)
	   has one more class than any selector here, so it wins the cascade on
	   any property both sides declare, no matter the source order — hence
	   !important everywhere in this block, incl. its unwanted 1em bottom
	   margin that was pushing the title away from the image below */
	margin: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title {
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	color: var(--wp--preset--color--navy) !important;
	padding: 1rem 1.1rem 0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}
ul.products li.product .price {
	padding: 0.4rem 1.1rem 0 !important;
	margin: 0 !important;
	font-size: 1.0625rem !important;
	display: block !important;
	/* the whole card is one giant <a> in this classic markup, so without
	   this the price just inherits the link's blue instead of reading as
	   plain text like it does on the block-grid cards elsewhere */
	color: var(--wp--preset--color--ink) !important;
}
ul.products li.product .price del {
	opacity: 0.55;
	font-size: 0.8125rem;
	font-weight: 400;
}
ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}
ul.products li.product .onsale {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	right: auto;
	background: var(--wp--preset--color--accent) !important;
	color: #fff;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	width: auto;
	height: auto;
	line-height: normal;
	min-height: 0;
	box-shadow: 0 4px 10px rgba(225, 53, 43, 0.35);
}
ul.products li.product a.button {
	margin: auto 1.1rem 1.25rem !important;
	width: calc(100% - 2.2rem) !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	padding: 0.75rem 1rem !important;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	text-align: center;
}
@media (max-width: 992px) {
	ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- generic section card used for trust badges etc ---------- */
.wm-trust-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: 16px;
	background: var(--wp--preset--color--light);
}
.wm-trust-icon {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 12px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	box-shadow: 0 6px 16px rgba(0,32,80,0.08);
}

/* ---------- buttons: soft shadow on primary ---------- */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	box-shadow: 0 8px 20px rgba(0, 87, 224, 0.25);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	box-shadow: none;
}

/* ---------- footer link hovers ---------- */
footer .wp-block-navigation-item > a { opacity: 0.85; transition: opacity 0.15s ease; }
footer .wp-block-navigation-item > a:hover { opacity: 1; }

/* footer logo — white monochrome cut of the main logo (the navy/blue
   version disappears against the dark footer background) */
.wm-footer-logo {
	display: block;
	height: 30px;
	width: auto;
	margin: 0 0 16px;
}

/* older Pepita partner-badge registrations (previous legal entity names
   on the same marketplace account history) — kept embedded so Pepita's
   own verification crawler still finds them on this domain, but not
   shown to shoppers alongside the current, active badge. display:none
   would still let the images fetch, but some badge-verification checks
   specifically look for a real, non-zero-size element, so this clips
   it to 1px instead of removing it from layout entirely. */
.wm-pepita-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* generic WooCommerce archives (brand/tag/category terms with no custom
   page of their own, e.g. /marka/ilike/) render TWO titles: the theme's
   own styled band up top ("Márka: iLike") and, further down, the classic
   template's own "iLike" heading — same text, stacked with an ugly gap.
   Drop the second one; its breadcrumb/result-count/sorting stay. */
.wm-section .woocommerce-products-header {
	display: none;
}
/* the rest of that classic template's chrome (breadcrumb, result count,
   sorting dropdown) has no custom block-editor equivalent to style, so it
   was rendering with zero theme styling at all — restyle it to match the
   rest of the site instead of looking like a bare, unthemed WooCommerce
   default next to the polished product grid below it. */
.wm-section .woocommerce-breadcrumb {
	margin: 0 0 20px;
	font-size: 0.875rem;
	color: #5b6576;
}
.wm-section .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.wm-section .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}
.wm-section .woocommerce-notices-wrapper:empty {
	display: none;
}
/* result-count and the sorting <form> are loose siblings (no shared
   wrapper to flex), so the classic float-left/float-right pairing is
   what actually lines them up on one row */
.wm-section .site-main {
	overflow: hidden;
}
.wm-section .woocommerce-result-count {
	float: left;
	margin: 0.4rem 0 24px;
	font-size: 0.9375rem;
	color: #5b6576;
}
.wm-section .woocommerce-ordering {
	float: right;
	margin: 0 0 24px;
}
.wm-section .woocommerce-ordering select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.5rem 2rem 0.5rem 0.9rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: #fff;
	cursor: pointer;
}

@media (max-width: 782px) {
	.wm-topbar { display: none; }

	/* header: let the main bar wrap, search drops to its own full row */
	.wm-mainbar-inner {
		flex-wrap: wrap !important;
		row-gap: 12px !important;
	}
	/* the search bar drops to its own full-width row below, so this row
	   only ever holds the logo + the account/cart icons — plenty of
	   spare width next to those for a bigger mark than the old 150px.
	   A fixed px width (185px, picked to just fit a 390px-wide phone)
	   turned out to be too wide on some real, narrower Android devices
	   — instead of also wrapping to its own line like the icons did,
	   the icon cluster's fixed size doesn't budge, so it's the logo
	   that has to give: min-width:0 lets the flex item actually shrink
	   below its image's intrinsic width, and max-width caps growth at
	   the old 185px on wider phones, so it now scales to whatever room
	   is actually left instead of assuming a fixed viewport width. */
	.wm-logo { order: 1; min-width: 0; }
	.wm-logo .custom-logo-link { display: block; }
	/* flex-wrap decides which items share a line using each item's own
	   *specified* (hypothetical) size, before any shrinking happens — so
	   a plain "flex-shrink" on the logo never helped: by the time the
	   browser considers shrinking, it's already decided (using the
	   unshrunk 185px) that the logo and icon cluster don't fit on one
	   line, and wrapped. A fixed px cap can't fix that at every width
	   either — 185px happens to fit a 390px phone with the icon
	   cluster (124px) and gap (28px) alongside it, but not a real
	   360px-wide Android phone, which is exactly what was reported.
	   Tying the cap to 100vw makes the *specified* size itself shrink
	   with the viewport, so the fits-on-one-line math is true before
	   wrapping is even decided, on any width — not just the ones this
	   was tested at. -208px = 48px row padding + 28px gap + ~124px
	   icon cluster + a little safety margin; 185px still caps it from
	   growing past the original size on the wider end of this range. */
	.wm-logo img { display: block; width: 100%; max-width: clamp(100px, calc(100vw - 208px), 185px); height: auto !important; }
	.wm-header-icons { order: 2; flex-shrink: 0; }
	.wm-search--big {
		order: 3;
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
	/* category tiles: 2 columns instead of a squeezed 5, with side padding
	   so the cards don't touch the screen edge */
	.wm-cat-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box;
		gap: 16px !important;
	}
	/* the block's own min-height:260px (inline style) is fine at 5-wide
	   desktop columns but makes a narrow 2-column mobile card tall and
	   portrait-shaped — square them up instead */
	.wm-cat-photo-card {
		min-height: 0 !important;
		aspect-ratio: 1 / 1;
	}

	/* category tiles: scale the icon+name badge / button down so they
	   don't crowd the narrower 2-column cards */
	.wm-cat-badge {
		top: 10px;
		left: 10px;
		gap: 0.3rem;
		font-size: 0.75rem;
		padding: 0.4rem 0.75rem;
	}
	/* (button sizing now lives in the base rule above — same size at
	   every width, so no override needed here anymore) */
	.wm-cat-photo-card .wc-block-featured-category__inner-blocks {
		gap: 0.4rem;
		padding-bottom: 14px;
	}

	/* generic page template (Kapcsolat, B2B, TV/Monitor/... category pages):
	   post-content stretches edge-to-edge on mobile with no side padding */
	.wm-page-title-band,
	.wp-block-post-content,
	.wm-row-title,
	.wm-row-products,
	.wm-section {
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box;
	}
}

/* =========================================================
   SINGLE PRODUCT PAGE
   ========================================================= */

.single-product .wc-block-breadcrumbs {
	margin: 20px auto 4px;
	font-size: 0.85rem;
	color: #6B7688;
}
.single-product .wc-block-breadcrumbs a {
	color: #6B7688;
	text-decoration: none;
}
.single-product .wc-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
}

.single-product .wp-block-columns.alignwide {
	gap: 72px !important;
	margin-top: 16px;
	margin-bottom: 64px;
	align-items: flex-start !important;
}

/* details column: right-aligned so it doesn't crowd the gallery */
.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) {
	text-align: right;
}
.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) .wp-block-woocommerce-add-to-cart-form,
.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) .wp-block-woocommerce-product-meta .wp-block-group {
	justify-content: flex-end;
}
/* form.cart is deliberately excluded above: it's a flex row where the
   button already grows via flex:1 to fill the space, so justify-content
   here just leaves a stray gap in front instead of letting it fill */
.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) p.stock {
	margin-left: auto;
}

/* ---- gallery column ---- */
.single-product .wp-block-woocommerce-product-image-gallery {
	position: sticky;
	top: 24px;
}
.single-product .wp-block-woocommerce-product-image-gallery {
	position: relative;
}
.single-product .woocommerce-product-gallery {
	box-sizing: border-box !important;
	max-width: 100%;
	background: #fff;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 10px 30px rgba(0, 32, 80, 0.08);
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
}
/* classic WooCommerce sale badge (circular by default) — restyle to match
   the pill badge used on product cards elsewhere on the site, contained
   within the card instead of bleeding off its negative-offset corner */
.single-product .wp-block-woocommerce-product-image-gallery .onsale {
	position: absolute !important;
	top: 16px !important;
	left: 16px !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center;
	padding: 0.35rem 0.85rem !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2 !important;
	box-shadow: 0 4px 10px rgba(225, 53, 43, 0.35);
	z-index: 2;
}
.single-product .woocommerce-product-gallery__wrapper img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	object-fit: contain;
	aspect-ratio: 1 / 1;
}
.single-product .flex-control-thumbs {
	margin: 16px 0 0 !important;
	padding: 0 !important;
	gap: 10px;
	display: flex;
	list-style: none;
}
.single-product .flex-control-thumbs li {
	list-style: none;
}
.single-product .flex-control-thumbs li img {
	border-radius: 8px;
	border: 2px solid transparent;
	transition: border-color 0.15s ease;
	cursor: pointer;
}
.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ---- details column ---- */
.single-product h1.wp-block-post-title {
	font-size: 2.15rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	line-height: 1.2;
	margin: 0 0 14px;
}

.single-product .wp-block-woocommerce-product-price {
	margin-bottom: 18px;
}
/* scoped to the two-column gallery+details layout so this doesn't also
   blow up the small price text on the "Kapcsolódó termékek" cards below,
   which reuse the exact same .wc-block-components-product-price class */
.single-product .wp-block-columns.alignwide .wc-block-components-product-price {
	font-size: 2rem !important;
	font-weight: 800;
	color: var(--wp--preset--color--primary) !important;
	/* this column is right-aligned by design (see the "jobbra zárva"
	   layout below); the shared card-grid price rule forces
	   justify-content:flex-start, which fights that here specifically */
	justify-content: flex-end !important;
}
.single-product .wp-block-columns.alignwide .wc-block-components-product-price del {
	opacity: 0.55;
	font-size: 1.1rem !important;
	font-weight: 400;
	margin-right: 0.5rem;
}
.single-product .wp-block-columns.alignwide .wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--accent) !important;
}

.single-product .wp-block-post-excerpt__excerpt {
	color: #4B5768;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* add-to-cart card — capped so it doesn't stretch edge-to-edge on the
   (now much wider) details column; kept right-aligned to match the rest
   of the column's layout */
.single-product .wp-block-woocommerce-add-to-cart-form {
	background: var(--wp--preset--color--light);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
	max-width: 480px;
	margin-left: auto;
}
.single-product p.stock {
	font-weight: 600;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	margin: 0 0 18px;
}
.single-product p.stock.in-stock {
	background: rgba(14, 163, 92, 0.12);
	color: #0EA35C;
}
.single-product p.stock.in-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0EA35C;
}
.single-product p.stock.out-of-stock {
	background: rgba(225, 53, 43, 0.1);
	color: var(--wp--preset--color--accent);
}
.single-product p.stock.out-of-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.single-product form.cart {
	display: flex;
	gap: 14px;
	align-items: stretch;
	flex-wrap: wrap;
}
/* WooCommerce's classic float clearfix (.cart:before/:after { content:" ";
   display:table }) becomes a real, gap-consuming phantom flex item once
   the parent is a flex container — same class of bug as the ul.products
   clearfix fixed earlier. */
.single-product form.cart::before,
.single-product form.cart::after {
	display: none !important;
	content: none !important;
}
.single-product .quantity {
	display: flex;
	margin: 0 !important;
}
.single-product .quantity .qty {
	width: 80px;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px !important;
	background: #fff;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	padding: 0 8px;
}
.single-product .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 14px 28px !important;
	box-shadow: 0 8px 20px rgba(0, 87, 224, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}
.single-product .single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(0, 87, 224, 0.32);
}

/* meta: SKU / category */
.single-product .wp-block-woocommerce-product-meta {
	font-size: 0.88rem;
	color: #6B7688;
}
.single-product .wp-block-woocommerce-product-meta .wp-block-group {
	gap: 8px 20px !important;
	flex-wrap: wrap;
}
.single-product .wc-block-components-product-sku .sku {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.single-product .taxonomy-product_cat a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}
.single-product .taxonomy-product_cat a:hover {
	text-decoration: underline;
}

/* ---- description / reviews tabs ---- */
/* Same align:"wide" bounds as the breadcrumbs, the gallery+details
   columns above it, and the related-products section below — all four
   should share the exact same left/right edges. WordPress sets this
   block's own `width` (not max-width) to the theme's wideSize; without
   border-box, our 40px padding + 1px border added on top of that,
   pushing it past the other "wide" elements at viewports wide enough
   to hit the wideSize cap (>1680px). */
.single-product .wp-block-woocommerce-product-details {
	box-sizing: border-box;
	margin-top: 24px;
	background: #fff;
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0, 32, 80, 0.06);
	border: 1px solid var(--wp--preset--color--border);
}
.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	border-bottom: 2px solid var(--wp--preset--color--border);
}
.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}
.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 20px;
	font-weight: 700;
	font-size: 0.95rem;
	color: #6B7688 !important;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--primary) !important;
	border-bottom-color: var(--wp--preset--color--primary) !important;
}
.single-product .woocommerce-Tabs-panel h2 {
	font-size: 1.3rem;
	color: var(--wp--preset--color--navy);
	margin: 0 0 12px;
}
.single-product .woocommerce-Tabs-panel p {
	color: #4B5768;
	line-height: 1.7;
}
.single-product .woocommerce-noreviews {
	color: #6B7688;
}

/* review form tidy-up */
.single-product #review_form input[type="text"],
.single-product #review_form input[type="email"],
.single-product #review_form textarea,
.single-product #review_form select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 10px 14px;
	width: 100%;
	max-width: 420px;
	font-family: inherit;
	background: #fff;
}
.single-product #review_form textarea {
	max-width: 100%;
}
.single-product #review_form .form-submit input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 87, 224, 0.25);
}

/* related products heading */
.single-product .wp-block-woocommerce-product-collection {
	margin-top: 64px;
	margin-bottom: 64px;
}
.single-product .wp-block-woocommerce-product-collection > .wp-block-heading {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 0 0 24px;
}

/* related-products cards use a newer "product collection" badge markup
   that nests the real, visible badge one level deeper than the badge on
   the homepage grids (a plain flat span there) — the outer wrapper was
   getting our pill styling while WC's own unstyled default badge rendered
   on top of it inside. Remove the outer box and style the inner one. */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-sale-badge {
	display: contents !important;
}
.wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem !important;
	box-shadow: 0 4px 10px rgba(225, 53, 43, 0.35);
	z-index: 2;
}
.wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge__text {
	color: #fff !important;
}

/* this block's title is a plain core "post title" block (not WC's own
   product-title component), so it has none of the padding the other
   product-card titles get — add it here to match. WooCommerce's own
   "Related Products" pattern also hardcodes textAlign:"center" on it
   (has-text-align-center), unlike every other product grid on the site,
   which is why it needs its own override back to left. min-height
   reserves two lines so a one-line title doesn't leave that card's
   button sitting higher than its row-mates. (One rule, not two: a
   near-duplicate selector used to live further up this file with a
   conflicting top-padding value — same specificity, same !important,
   so whichever came later in the file silently won.) */
.wp-block-woocommerce-product-collection .wp-block-post-title {
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	color: var(--wp--preset--color--navy) !important;
	padding: 1rem 1.1rem 0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	/* box-sizing:border-box means min-height has to cover the 1rem
	   top padding too, not just two lines of text (1rem + 2.7rem),
	   or a two-line title grows past a one-line title's reserved
	   box and their buttons stop lining up across the row */
	min-height: 3.7rem;
	display: block !important;
	box-sizing: border-box;
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
	padding: 0.4rem 1.1rem 0 !important;
	box-sizing: border-box;
}
/* Cards in a row are equal height, but real supplier product names run
   2–4 lines, and the price used to sit right under the title — so it
   landed at a different height on every card while the button stayed
   put. Let the title block soak up the slack instead, which anchors
   price + button to the bottom of every card. */
.wp-block-woocommerce-product-collection .wp-block-post-title {
	flex-grow: 1;
}
.wc-block-grid__product > .wc-block-grid__product-link {
	flex: 1 1 auto;
}

@media (max-width: 782px) {
	.single-product .wc-block-breadcrumbs,
	.single-product .wp-block-columns.alignwide,
	.single-product .wp-block-woocommerce-product-collection {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}
	.single-product .wp-block-columns.alignwide {
		gap: 24px !important;
	}
	/* the details column is right-aligned by design on desktop, to sit
	   nicely opposite the gallery — once the two columns stack into one
	   on mobile, that same right-align just pushes the title/price/
	   description/stock/button over to the right edge instead. */
	.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) {
		text-align: left !important;
	}
	.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) .wp-block-woocommerce-add-to-cart-form,
	.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) .wp-block-woocommerce-product-meta .wp-block-group {
		justify-content: flex-start !important;
	}
	.single-product .wp-block-columns.alignwide > .wp-block-column:nth-child(2) p.stock {
		margin-left: 0 !important;
	}
	.single-product .wp-block-columns.alignwide .wc-block-components-product-price {
		justify-content: flex-start !important;
	}
	.single-product .wp-block-woocommerce-product-image-gallery {
		position: relative;
		top: auto;
	}
	.single-product h1.wp-block-post-title {
		font-size: 1.6rem;
	}
	.single-product .wp-block-columns.alignwide .wc-block-components-product-price {
		font-size: 1.6rem !important;
	}
	.single-product .wp-block-woocommerce-product-details {
		padding: 24px;
	}
	.single-product .woocommerce-tabs ul.tabs {
		gap: 0;
	}
	.single-product .woocommerce-tabs ul.tabs li a {
		padding: 10px 14px;
		font-size: 0.875rem;
	}
	.single-product .quantity .qty {
		width: 64px;
	}
	.single-product .single_add_to_cart_button {
		min-width: 0;
		padding: 14px 16px !important;
	}
}

html body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: #0057E0 !important;
	border-bottom-color: #0057E0 !important;
}
html body.single-product .woocommerce-tabs ul.tabs.wc-tabs li:hover a {
	color: #0057E0 !important;
	border-bottom-color: #0057E0 !important;
}

/* =========================================================
   CART PAGE — the items table doesn't reflow into WC's own
   mobile layout on narrow screens (its JS-driven breakpoint
   never engages here), and fighting the table's column-width
   math with table-layout:fixed still let content overflow.
   Simplest reliable fix: turn the table into a stacked block
   layout on mobile instead.
   ========================================================= */
@media (max-width: 782px) {
	/* the plugin's bare "page-cart" template renders the "Kosár" title as
	   a plain post-title block with no gutter of its own; WC's cart block
	   below it picks up its own mobile margin, so on narrow screens the
	   title sits flush against the edge while the content below it is
	   indented — give the title the same 24px the content already has. */
	.woocommerce-cart h1.wp-block-post-title {
		padding-left: 24px !important;
		padding-right: 24px !important;
		box-sizing: border-box;
	}
	.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block,
	.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block thead,
	.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block tbody,
	.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block tr {
		display: block !important;
		width: 100% !important;
	}
	.wc-block-cart-items thead {
		display: none !important;
	}
	.wc-block-cart-items__row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		column-gap: 12px !important;
		row-gap: 8px !important;
		padding: 16px 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.wc-block-cart-items td {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		border: none !important;
	}
	.wc-block-cart-item__image {
		flex: 0 0 64px !important;
	}
	.wc-block-cart-item__image img {
		width: 64px !important;
		height: auto !important;
	}
	.wc-block-cart-item__product {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.wc-block-cart-item__total {
		flex: 0 0 100% !important;
		padding-left: 76px !important;
	}
	.wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-start !important;
	}
	.wc-block-components-product-badge.wc-block-components-sale-badge {
		white-space: normal !important;
		font-size: 0.6875rem !important;
	}
}

/* after an ajax add-to-cart, WooCommerce appends a bare "Kosár" text link
   under the button; restyle it as a secondary button and stack the two */
.wc-block-grid__product-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wc-block-grid__product .wp-block-button__link.added::after,
ul.products li.product a.button.added::after {
	display: none !important;
}
.wc-block-grid__product a.added_to_cart,
ul.products li.product a.added_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.65rem 1rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--primary) !important;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}
.wc-block-grid__product a.added_to_cart:hover,
ul.products li.product a.added_to_cart:hover {
	background: #EAF1FF;
}
ul.products li.product a.added_to_cart {
	margin: 0 1.1rem 1.25rem;
	width: calc(100% - 2.2rem);
}

/* generic page body: below the 1320px content width the constrained
   layout has no gutter of its own, so text sat flush against the edge.
   The front-page-only pieces (brand banner, row titles/products, the
   category tile grid) used to only get this via a narrow ≤782px rule
   further down, which left a real gap at tablet widths (e.g. 1024px) —
   wide enough to not match that rule, not wide enough to have hit the
   constrained layout's own natural margin yet — where they ran flush
   to the screen edge. Making the gutter unconditional here closes that
   gap; the ≤782/900px rules below still narrow it further for phones. */
.wp-block-post-content,
.wm-section,
.wm-row-title,
.wm-row-products,
.wm-cat-grid,
.wm-brand-banner {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}
/* the single-product page has no theme override, so it renders
   WooCommerce's own default block template — none of its wrapper
   blocks carry the classes above, so it ran edge-to-edge at the exact
   same widths. Scoped to direct children of <main> only: the product
   collection block also appears nested one level deeper inside
   .wm-section on the brand/taxonomy pages, which is already padded —
   matching only the direct child avoids doubling the gutter there. */
main.wp-block-group > .wp-block-woocommerce-breadcrumbs,
main.wp-block-group > .wp-block-columns,
main.wp-block-group > .wp-block-woocommerce-product-collection {
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* =========================================================
   CATEGORY PAGE HERO (TV / Monitor / Tablet / Autórádió / Egyéb)
   Each page sets its own --c1/--c2 gradient colors and --img photo
   inline; the generic title band is replaced by this hero.
   ========================================================= */
:is(.page-id-45, .page-id-46, .page-id-47, .page-id-48, .page-id-49, .page-id-50, .page-id-51, .page-id-52) .wm-page-title-band,
:is(.page-id-45, .page-id-46, .page-id-47, .page-id-48, .page-id-49, .page-id-50, .page-id-51, .page-id-52) .wm-page-title-band + .wp-block-spacer {
	display: none;
}
.wm-cat-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 24px;
	/* -8px sides: WooCommerce's product grid below pulls itself 8px
	   past its block on each side, so the hero matches the card strip */
	margin: 24px -8px 32px !important;
	max-width: none !important;
	padding: 28px 40px;
	border-radius: 22px;
	color: #fff;
	/* "liquid glass": translucent tinted gradient over the photo, a
	   light rim and an inner highlight, so the photo shows through */
	background: linear-gradient(115deg, color-mix(in srgb, var(--c1) 88%, transparent) 0%, color-mix(in srgb, var(--c2) 62%, transparent) 100%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 18px 40px -14px rgba(0, 32, 80, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
}
.wm-cat-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--img) center / cover no-repeat, var(--c1);
}
.wm-cat-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 8% -20%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%);
}
.wm-cat-hero-icon {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.45);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.wm-cat-hero-crumbs {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 4px;
}
.wm-cat-hero-crumbs a {
	color: inherit;
	text-decoration: none;
}
.wm-cat-hero-crumbs a:hover {
	color: #fff;
	text-decoration: underline;
}
.wm-cat-hero-title {
	margin: 0 0 6px;
	color: #fff;
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.wm-cat-hero-tag {
	margin: 0;
	max-width: 860px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.9);
}
/* no photo: soft pastel glass with dark text */
.wm-cat-hero--light {
	color: #14213d;
	background: linear-gradient(115deg, color-mix(in srgb, var(--c1) 92%, transparent) 0%, color-mix(in srgb, var(--c2) 80%, transparent) 100%);
	border-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0 18px 40px -18px rgba(20, 33, 61, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.wm-cat-hero--light::before {
	background: none;
}
.wm-cat-hero--light .wm-cat-hero-title,
.wm-cat-hero--light .wm-cat-hero-crumbs,
.wm-cat-hero--light .wm-cat-hero-crumbs a,
.wm-cat-hero--light .wm-cat-hero-tag {
	color: #14213d;
}
.wm-cat-hero--light .wm-cat-hero-tag {
	opacity: 0.8;
}
.wm-cat-hero--light .wm-cat-hero-icon {
	background: rgba(255, 255, 255, 0.55);
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 10px 24px rgba(20, 33, 61, 0.12), inset 0 1px 0 #fff;
}
@media (max-width: 782px) {
	.wm-cat-hero {
		gap: 16px;
		padding: 20px;
		border-radius: 18px;
	}
	.wm-cat-hero-icon {
		width: 56px;
		height: 56px;
		font-size: 1.75rem;
		border-radius: 16px;
	}
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.wm-contact-intro {
	font-size: 1.0625rem;
	color: #4B5768;
	max-width: 720px;
	margin: 0 auto 32px 0 !important;
}
.wm-contact-columns {
	gap: 32px !important;
	align-items: flex-start !important;
}
.wm-contact-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.wm-contact-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0, 32, 80, 0.05);
}
.wm-contact-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, #EAF1FF 0%, #DCE8FF 100%);
	font-size: 1.3rem;
}
.wm-contact-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B7688;
	margin-bottom: 2px;
}
.wm-contact-value {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
a.wm-contact-value:hover {
	color: var(--wp--preset--color--primary);
}
.wm-contact-form {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(0, 32, 80, 0.06);
	box-sizing: border-box;
}
.wm-contact-form h3 {
	margin: 0 0 20px;
}
.wm-contact-form .wpcf7-form p {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy);
}
.wm-contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}
.wm-contact-form input[type="text"],
.wm-contact-form input[type="email"],
.wm-contact-form input[type="tel"],
.wm-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.wm-contact-form textarea {
	min-height: 140px;
	resize: vertical;
}
.wm-contact-form input:focus,
.wm-contact-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(0, 87, 224, 0.15);
}
.wm-contact-form input[type="submit"] {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 87, 224, 0.25);
	transition: filter 0.15s ease;
}
.wm-contact-form input[type="submit"]:hover {
	filter: brightness(1.08);
}
.wm-contact-form .wpcf7-response-output {
	margin: 16px 0 0;
	border-radius: 12px;
	padding: 12px 16px;
}
@media (max-width: 782px) {
	.wm-contact-form {
		padding: 22px;
	}
}

/* =========================================================
   DOWNLOADS PAGE
   ========================================================= */
.wp-block-post-content h2:has(+ .wm-downloads) {
	margin-top: 48px;
}
.wm-downloads {
	list-style: none;
	margin: 20px 0 32px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
}
.wm-downloads li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wm-downloads li:last-child {
	border-bottom: none;
}
.wm-downloads li:hover {
	background: var(--wp--preset--color--light);
}
.wm-dl-link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	text-decoration: none !important;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}
.wm-dl-type {
	flex: 0 0 auto;
	min-width: 44px;
	text-align: center;
	padding: 4px 8px;
	border-radius: 8px;
	background: #EAF1FF;
	color: var(--wp--preset--color--primary);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.wm-dl-link:hover .wm-dl-title {
	color: var(--wp--preset--color--primary);
}
.wm-dl-meta {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	color: #6B7688;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.wm-downloads li {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */
.wm-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -8px 24px rgba(0, 32, 80, 0.12);
}
.wm-cookie-banner--hidden {
	display: none !important;
}
.wm-cookie-banner-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.wm-cookie-banner-text {
	margin: 0;
	flex: 1 1 420px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #4B5768;
}
.wm-cookie-banner-text a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.wm-cookie-banner-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	flex: 0 0 auto;
}
.wm-cookie-btn {
	border: none;
	border-radius: 999px;
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease, background-color 0.15s ease;
}
.wm-cookie-btn--decline {
	background: #fff;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border);
}
.wm-cookie-btn--decline:hover {
	background: var(--wp--preset--color--light);
}
.wm-cookie-btn--accept {
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 8px 20px rgba(0, 87, 224, 0.25);
}
.wm-cookie-btn--accept:hover {
	filter: brightness(1.08);
}
@media (max-width: 600px) {
	.wm-cookie-banner-inner {
		padding: 16px 20px;
	}
	.wm-cookie-banner-actions {
		width: 100%;
	}
	.wm-cookie-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}