/* Global ---------------------------------------*/

:root {
	--light-orange: #ffe8dd;
	--light-purple: #f5eaf9;
}

.rounded-border {
	border: 2px solid var(--fs-color-secondary);
	border-radius: 10px;
	padding: 1em;
}

/* Product page */

/* The doubled class is needed: flatsome.css sets .box-vertical{display:table}
   and .box-vertical .box-image/.box-text{display:table-cell}, and it loads
   after this file, so a single .qd-box loses the tie. Grid blockifies its own
   items, so those table-cell declarations then fall away on their own. */
.qd-box.box-vertical {
	display: grid;
	grid-template-columns: 40% 1fr;
	align-items: center;
	width: 100%;
	padding: 0;			/* so the title's rule reaches both borders; each part pads itself */
	max-width: 600px;
	margin: 0 0 1em 0 !important;
}

.qd-box.box-vertical .title {
	grid-column: 1 / -1;
	padding: .6em 1em;
	/*border-bottom: 2px solid var(--fs-color-secondary);*/
	color: #000;
	font-weight: bold;
	font-size: 1.1em;
	text-align: center;
	/*background-color: var(--light-orange);*/
	border-radius: 10px 10px 0 0;
}

.qd-box.box-vertical .box-image {
	direction: ltr;
}

.qd-box.box-vertical .box-text {
	padding: 1em 1.5em 1em 1em;
}

.qd-box .box-image img {
	transform: none;
}

@media screen and (min-width: 550px) {
	.box-list-view .box .box-image, .box-vertical .box-image {
		width: 80% !important;
	}
}

.qd-offers .product-small .box-image {
	border-radius: 10px;
}

/* Mennyiségi kedvezmény: az ajánlatok egymás mellett -------------
 *
 * Egy termékhez legfeljebb három sáv tartozhat. Egyetlen ajánlatnál marad a
 * korábbi, fekvő elrendezés (kép balra, szöveg jobbra); kettőnél-háromnál a
 * kép a szöveg fölé kerül, különben a dobozok nem férnének el egymás mellett.
 */
.qd-offers {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1em;
	margin-bottom: 1em;
}

.qd-offers .qd-box.box-vertical {
	flex: 1 1 220px;
	margin: 0 !important;
	border-radius: 10px;
}

.qd-offers--1 .qd-box.box-vertical {
	flex-basis: 100%;
	max-width: 600px;
}

.qd-offers--2 .qd-box.box-vertical,
.qd-offers--3 .qd-box.box-vertical {
	grid-template-columns: 1fr;
	align-items: start;
	max-width: none;
}

.qd-offers .qd-box:first-child {
	background-image: linear-gradient(180deg,#ff6f20 0%, #fff 100%);
}

.qd-offers .qd-box:nth-child(2) {
	background-image: linear-gradient(180deg, #f2a900 0%, #fff 100%);
}

.qd-offers .qd-box:nth-child(3) {
	background-image: linear-gradient(180deg, #a45dbb 0%, #fff 100%);
}



/* A képdoboz négyzetes, tehát a magassága a szélességét követi: két ajánlatnál
   a kártya kétszer olyan széles, mint háromnál, és vele nyúlna a kép is.
   Ezért nem a képet zsugorítjuk (az vágás nélkül sem segítene, a négyzet
   ugyanúgy magas maradna), hanem magát a keretet fogjuk vissza és középre
   igazítjuk. */
.qd-offers--2 .qd-box.box-vertical .box-image,
.qd-offers--3 .qd-box.box-vertical .box-image {
	width: 100% !important;
	max-width: 220px;
	margin: 0 auto;
	/*padding: 1em 0 0;*/
	display: table;
}

.qd-offers--2 .qd-box.box-vertical .box-text,
.qd-offers--3 .qd-box.box-vertical .box-text {
	display: flex;
	flex-direction: column;
	padding: 1em;
	text-align: center;
}

/* A gomb a doboz aljára tapad, így az eltérő hosszúságú nevek mellett is
   egy vonalban áll a három ajánlatnál. */
.qd-offers .qd-box.box-vertical .box-text .button {
	margin-top: auto;
	margin-bottom: 0;
}

/* Keskeny kijelzőn egymás alá kerülnek. */
@media screen and (max-width: 549px) {
	.qd-offers .qd-box.box-vertical {
		flex-basis: 100%;
	}
}

/* Függőleges fültárcsa: maradjon a képernyőn görgetés közben -----
 *
 * A fülek konténere (.woocommerce-tabs) flexbox, ezért a lista alapból a
 * panelek teljes magasságára nyúlik (align-items: stretch) — így volt 3276
 * pixel magas 170 helyett. Egy ekkora elemnek nincs hova tapadnia, tehát a
 * position: sticky önmagában nem csinálna semmit: az align-self: flex-start
 * legalább annyira lényeges, mint maga a sticky.
 *
 * A top a rögzített fejléc alá igazít. A Flatsome fejléce sticky-shrink:
 * görgetéskor a felső sáv és a header-bottom elrejtőzik, a maradék
 * .header-main 90 pixel — a 14 pixel ráhagyás csak levegő. Ha a fejléc
 * magassága a Testreszabóban változik, ezt a számot is igazítani kell.
 *
 * 550 pixel alatt nincs értelme: ott a .small-nav-collapse a füleket teljes
 * szélességű, egymás alatti sávokká rendezi.
 */
@media screen and (min-width: 850px) {
	.product-tabs.nav-vertical {
		position: sticky;
		top: 104px;
		align-self: flex-start;
	}
}

/* Tablazat -------------------------------------*/

.fs-table-container {
	overflow-x: auto;
}

.fs-table-container table tr:nth-child(even) {
	background: #f5f5f5;
}

.fs-table-container table th{
	background: #dddddd;
}

.fs-table-container table th:first-child,
.fs-table-container table td:first-child {
	padding-left: 0.5em;
}

.fs-table-container table th:last-child,
.fs-table-container table td:last-child {
	padding-right: 0.5em;
}

.fs-table-container table tr:hover {
	background-color: #dddddd;
}

.fs-table-container .ar {
	text-align: right;
}

/* product page thumbnail max-height ------------*/
body.single-product .product-gallery .col a {
	text-align: center;
}

body.single-product .product-gallery .col a img {
	max-height: 150px;
	width: auto;
}

.woocommerce div.product div.images img {
	background-color: #fff;
	min-height: 600px;
	max-height: 600px;
	min-width: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Catalog/card thumbnails sitewide — shop loop, brand list, related/upsell
   products, anything using Flatsome's .box-image card. The theme's own rule
   uses object-fit: cover (crops to fill, e.g. clipping non-square brand
   logos); this shrinks the image to fit inside the box instead, centered,
   same as the single product image above. !important because fs-style.css
   is not guaranteed to load after the theme's own stylesheet, and this must
   win regardless of load order. */
.box-image img,
.has-format img,
.image-cover img,
img.back-image {
	object-fit: contain !important;
	object-position: 50% 50% !important;
	background-color: #fff;
	/* Pre-shrunk to 90% at rest, so Flatsome's own hover-zoom transform below
	   (which replaces this, not multiplies it — CSS transforms from separate
	   rules don't compose) can scale it back up without exceeding the box.
	   The box clips at its own edge (.box-image has overflow:hidden), so
	   without this the zoom pushed the fitted image back outside the box on
	   hover — the exact cropping problem this whole thing was fixing, just
	   happening on interaction instead of at rest. */
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

/* .bg-zoom:hover .bg, .has-hover:hover .image-zoom img { transform: scale(1.1) }
   is Flatsome's own hover-zoom rule. 0.9 (rest, above) * 1.1 (their zoom) = 0.99
   — keeps the zoom-in feel while staying just inside the box, never clipped. */
.has-hover:hover .box-image img,
.has-hover:hover .has-format img,
.has-hover:hover .image-cover img,
.has-hover:hover img.back-image {
	transform: scale(0.999) !important;
}

/* Brand thumbnails in nav menus — the source is the smallest non-cropped
   registered size (370px, see fs_menu_item_term_thumbnail() in catalog.php);
   shown here at icon size, shrunk-to-fit and centered, same treatment as
   every other thumbnail on the site. */
.fs-menu-thumb {
	width: 22px;
	height: 22px;
	object-fit: contain;
	object-position: 50% 50%;
	vertical-align: middle;
	margin-right: 6px;
	border-radius: 3px;
}

/* Category icons in nav menus (fs_menu_category_icon() in catalog.php). No
   circle behind them, so nothing constrains how large they can sit next to
   the text; bigger than the old badge on purpose. */
.fs-menu-icon {
	width: 28px;
	height: 28px;
	vertical-align: central;
	margin-right: 6px;
}

/* The svg as it is: an <img>, drawn with the file's own colours, scaled to
   fit the 28px box without cropping. No max-width/height override from the
   theme's img rules may squash it. */
.fs-menu-icon--img {
	display: inline-block;
	max-width: none;
	object-fit: contain;
	object-position: 50% 50%;
	background: none;
	border-radius: 0;
}

/* Fallback only — a <span> with a letter, for any category without an icon
   yet. The real icons above are <img> elements, so this span-only rule never
   touches them; it keeps a circle just for the fallback, since a bare letter
   needs some backdrop to read as a badge rather than stray text. Its
   background colour comes from an inline style next to the letter. */
span.fs-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* Catalog result count --------------------------
   WOOF's turbo mode ships ".woof_found_count { display: none }"
   (ext/turbo_mode/css/turbo_mode.css) and only reveals the number by
   calling jQuery(...).show() — an inline style — from its own ajax redraw
   handler. That leaves the server-rendered count (fs_result_count_with_woof_span()
   in catalog.php) invisible on a plain page load, with only the "termék
   listázva" text beside the hidden number, until the visitor happens to
   touch a filter. Our count always has a real value in the markup already,
   so it can simply stay visible; !important because the plugin's own rule
   is a class selector of equal weight loaded after this file. Scoped to the
   result-count paragraph so any other .woof_found_count the plugin hides on
   purpose is left alone. */
.woocommerce-result-count .woof_found_count {
	display: inline !important;
}

/* Absolute footer ------------------------------*/

.fs-logo img{
	height: 1.5em;
	padding-right: 0.4em;
}

.absolute-footer {
	padding: 15px 0 15px !important;
}

.footer-secondary {
	padding: 0 !important;
}

.footer-secondary .footer-text a {
	vertical-align: text-bottom;
}

/* Hide grecapcha badge */
.grecaptcha-badge {
	opacity: 0 !important;
}

/* Sale price color ------------------------------*/
.price ins,
.price ins .woocommerce-Price-amount {
	color: #f52222;
}

/* In-stock "tablet" badge ------------------------*/
p.in-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #e6f7ec;
	color: #1e8e3e;
	border: 1px solid #1e8e3e;
	border-radius: 10px;
	padding: 4px 14px;
	font-weight: 600;
	font-size: 0.85em;
}

p.in-stock::before {
	content: "\2713";
	font-weight: 700;
}

/* Free shipping progress line --------------------*/
.fs-free-shipping-progress {
	position: relative;
	width: 100%;
	max-width: 320px;
	height: 16px;
	/* No right gutter any more — the goal badge sits inside the bar's right edge
	   rather than hanging off it. */
	margin: 16px 0 10px 0;
}

.fs-free-shipping-progress-bar {
	position: relative;
	width: calc(100% - 40px);
	height: 100%;
	background: #f5eaf9;
	border-radius: 999px;
	box-shadow: inset 0 1px 3px rgba(106, 27, 154, 0.15);
	overflow: hidden;
}

/* The gradient tiles every 400px and the track is exactly two tiles wide, so
   sliding it by one full tile lands on an identical frame — seamless loop, no
   snap at the end of the cycle. Moving it with transform (not background-position)
   keeps it on the compositor, so it never repaints per frame. */
.fs-free-shipping-progress-track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 800px;
	background: linear-gradient(90deg, var(--fs-color-secondary), #f2a900, #ffb74d, #a45dbb, var(--fs-color-primary), var(--fs-color-secondary));
	background-size: 400px 100%;
	background-repeat: repeat-x;
	will-change: transform;
	animation: fs-fsp-shimmer 6s linear infinite;
}

@keyframes fs-fsp-shimmer {
	from { transform: translateX(0); }
	to { transform: translateX(-400px); }
}

/* Covers the not-yet-reached portion of the track, revealing the gradient
   underneath as the cart value grows. */
.fs-free-shipping-progress-mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: var(--light-purple);
}

/* Outer element only carries the position. Its "left" is a percentage of the
   bar, so it lands on fractional pixels and shifts whenever the value changes —
   keeping that off the animated element gives the pulse below a box that never
   moves and never needs re-snapping. */
.fs-free-shipping-progress-marker {
	position: absolute;
	top: 50%;
	/* Clamped inside the track: the centre runs from half a marker in on the left
	   to half a marker in from the track's right end, so it never hangs over
	   either cap. 68px is the track's 40px goal gutter plus the marker's 28px. */
	left: calc(14px + (100% - 68px) * var(--fs-pct, 0) / 100);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 13px;
	transform: translate(-50%, -50%);
}

/* Badge itself no longer moves — the rings below do the pulsing. */
.fs-free-shipping-progress-marker-inner {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--fs-color-primary);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(106, 27, 154, 0.45);
}

/* Icon sits above the badge, never scaled, so it stays crisp. */
.fs-free-shipping-progress-marker > i {
	position: relative;
	z-index: 2;
}

/* Two rings spreading out from under the badge like rings on water, the second
   half a cycle behind the first so one is always on its way out. Hollow shapes
   animating nothing but transform and opacity: no text and no fills to
   re-rasterise, which is what made the scaling badge look stepped. */
/* Real elements rather than ::before/::after: Firefox's off-main-thread
   animation support for pseudo-elements is newer and less reliable than for
   ordinary elements, and the ripple stuttered there while Chrome was fine.
   Laid out at the size the ripple ends on (50px) and scaled up only to 1, never
   past it, so neither engine has to redraw the ring as it grows. */
.fs-free-shipping-progress-ring {
	position: absolute;
	inset: -11px;
	border-radius: 50%;
	border: 3.5px solid var(--fs-color-primary);
	pointer-events: none;
	/* The box is laid out at the ripple's full 50px, so without these it shows as
	   a big solid ring whenever the animation is not applying values — through the
	   second ring's delay, and again each time the animation restarts, which is
	   exactly when the marker moves. */
	opacity: 0;
	transform: scale(0.56);
	will-change: transform, opacity;
	animation: fs-fsp-ripple 3.8s normal infinite;
	animation-fill-mode: backwards;
}

/* Second ring runs half a cycle behind the first. */
.fs-free-shipping-progress-ring + .fs-free-shipping-progress-ring {
	animation-delay: 1.9s;
}

/* 0.56 is 28/50 — the ring starts flush with the badge and spreads to 50px. */
@keyframes fs-fsp-ripple {
	0% { transform: scale(0.56); opacity: 0.5; }
	100% { transform: scale(1); opacity: 0; }
}

.fs-free-shipping-progress-goal {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f2a900;
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	box-shadow: 0 2px 6px rgba(242, 169, 0, 0.45);
}

.fs-fast-delivery-note {
	margin-top: 6px;
	/*font-size: 0.9em;*/
}

/* Not on the cart page: the shipping choices are right there, so the delivery
   promise only repeats itself. Done here rather than in php because the notice
   is also swapped in from an ajax fragment, which cannot tell which page it is
   landing on — this way it stays hidden however it got there. */
body.woocommerce-cart .fs-fast-delivery-note {
	display: none;
}

.woocommerce-info.message-wrapper i.fa-truck-fast,
.woocommerce-info.message-wrapper i.fa-truck{
	margin-right: 4px;
	color: var(--fs-color-primary);
}

.fs-truck-icon {
	color: var(--fs-color-primary);
}

.fs-gift-icon {
	color: #f2a900;
	margin-right: 4px;
}

/* Mini cart version -----------------------------*/
.fs-mini-cart-shipping {
	margin: 14px 0 4px;
	font-size: 0.9em;
	line-height: 1.45;
	text-align: left;
	margin-bottom: 1.6em;
}

.fs-mini-cart-shipping .fs-free-shipping-progress {
	margin: 14px 0 4px 0;
}

@media (min-width: 450px) {
	.product-summary .ux-product-brands {
		flex-direction: column;
		float: right;
		margin-block: 0;
		margin-inline-start: 15px;
	}
}

.product-summary .ux-product-brands a {
	max-width: 150px !important;
	border: none !important;
	margin-bottom: 1em;
}

body.woocommerce-checkout span.optional {
	display: none;
}

.slide-down {
	overflow:hidden;
	transition: .3s ease-in-out;
	height: 0;
}

.slide-down-visible {
	height: 5em;
}

@media only screen and (min-width: 550px) {
	/* A telefon / e-mail mező fél szélességű marad. A PHP-ben beállított
		   form-row-first / form-row-last osztályt a checkout JS futás közben
		   felülírhatja form-row-wide-ra; ezért ID alapján kényszerítjük ki, mert
		   az #id szelektor erősebb, mint bármelyik .form-row-* osztály-szabály. */
	#billing_phone_field,
	#billing_email_field {
		width: 47% !important;
		clear: none !important;
	}

	#billing_phone_field {
		float: left !important;
	}

	#billing_email_field {
		float: right !important;
		margin-right: 0 !important;
	}
}

label.woof_radio_label:has(+ a.woof_radio_term_reset) {
	padding-right: 1em;
}

.akciok-menupont a {
	color: var(--fs-color-secondary) !important;
}

.widget-woof label {
	margin-bottom: 0;
	padding-top: 5px;
}

.woof_list_checkbox li div {
	margin-top: 0px !important;
}

.woof_search_is_going nav.woocommerce-breadcrumb {
	display: block !important;
}
/* GAL product descriptions ------------------------------
   Imported from the manufacturer's product pages, which alternate a text
   column with one illustration. The image column is sticky because the
   "Tudományos háttér" bodies run very long next to a single picture. */
.gal-desc__intro {
	margin-bottom: 2.5em;
}

.gal-desc__block {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5em 2.5em;
	margin-bottom: 2.5em;
}

.gal-desc__block h3:first-child {
	margin-top: 0;
}

.gal-desc__figure {
	margin: 0;
}

.gal-desc__figure img {
	width: 100%;
	border-radius: 4px;
}

.gal-desc__text img {
	height: auto;
}

.gal-desc__text table {
	width: 100%;
}

.gal-desc__text summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.gal-desc__text summary::before {
	content: "\25B8";
	display: inline-block;
	margin-right: 0.4em;
	transition: transform 0.15s;
}

.gal-desc__text details[open] > summary::before {
	transform: rotate(90deg);
}

@media screen and (min-width: 850px) {
	.gal-desc__block {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}

	.gal-desc__block--flip .gal-desc__text {
		order: 2;
	}

	.gal-desc__block--wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.gal-desc__figure {
		position: sticky;
		top: 100px;
	}

	/* The illustrations are tall stock photos; next to a short section they
	   would otherwise tower over their own text. */
	.gal-desc__figure img {
		max-height: 560px;
		object-fit: cover;
	}
}

/* Catalog category / brand header -----------------------
   fs_woof_term_header() in catalog.php, above the filtered grid. Category
   thumbnails are photos, brand thumbnails are wide logos, hence the
   cover/contain split. */
.fs-term-header {
	display: grid;
	gap: 20px;
	margin-bottom: 30px;
}

.fs-term-card {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	align-items: center;
	padding: 20px;
	border-radius: 10px;
	background: linear-gradient(135deg,var(--fs-color-secondary) 0%, #a45dbb 100%);
}

.fs-term-card__title,
.fs-term-card__desc {
	color: #fff;
}

.fs-term-card--noimg {
	grid-template-columns: 1fr;
}

.fs-term-card__img img {
	display: block;
	width: 100%;
	height: 150px;
	border-radius: 10px;
	object-fit: cover;
}

/* A logo must not be cropped, and sits on its own white ground. */
.fs-term-card--product_brand .fs-term-card__img img {
	height: 90px;
	object-fit: contain;
	background: #fff;
	padding: 8px;
}

/* A category shows its svg icon (the menu icon), not a photo: fitted whole,
   on a white tile - the icons are dark line art that would barely show on
   the card's gradient. */
.fs-term-card--product_cat .fs-term-card__img img {
	object-fit: contain;
	/*background: #fff;*/
	padding: 16px;
}

/* The "Mennyiségi kedvezmény" filter's card (fs_qd_catalog_card() in
   quantity-discount.php): its image is whatever gets uploaded on the admin
   page, of any shape, so it is fitted whole rather than cropped. */
.fs-term-card--qd .fs-term-card__img img {
	object-fit: contain;
}

.fs-term-card__title {
	margin: 0 0 8px;
	font-size: 1.15em;
	line-height: 1.3;
}

.fs-term-card__desc {
	line-height: 1.6;
}

.fs-term-card__desc :last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 600px) {
	.fs-term-card {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.fs-term-card__img img {
		height: 160px;
	}
}


/* Brand list blurb ------------------------------
   Under each logo on the /markak/ page (brand_list() in shortcodes.php).
   Clamped to three lines so a long description can't make one card taller
   than the rest — the row is .has-equal-box-heights, so one overflowing card
   would stretch every other one with it. */
.fs-brand-desc {
	display: -webkit-box;
	/*-webkit-line-clamp: 3;*/
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: .4em;
	color: #4a4a4a;
	font-size: .85em;
	font-weight: normal;
	line-height: 1.45;
	text-align: center;
}

/* Front page category tiles ---------------------
   The sitewide pre-shrink above (transform: scale(.9), and the .99 on hover)
   exists so a fitted thumbnail can't be pushed back outside its box by
   Flatsome's hover zoom. These tiles don't need it: the clipping is done here
   instead, by the rounded .col-inner. Both transforms carry !important, so
   these have to as well — the selectors are longer, so specificity is already
   on this side.

   The sitewide object-fit: contain is overridden too: these tiles are meant
   to be filled edge to edge, and .image-cover already holds a square box
   (padding-top:100%) for the image to crop into. */
.home .product-category .box-image img,
.home .product-category .has-hover:hover .box-image img,
.home .product-category .has-hover:hover .image-cover img {
	object-fit: cover !important;
	transform: none !important;
}

.home .product-category .has-hover:hover .box-image img,
.home .product-category .has-hover:hover .image-cover img {
	transform: scale(1.1) !important;
}


/* Every tile as tall as the tallest one on its row, so a name that wraps to
   two lines doesn't leave its neighbours short. .col stretches to the flex
   line's height already; making it a flex container passes that height down
   to .box-text, the only part that can absorb the difference.

   Note the grow-only shorthand below: a plain "flex: 1" sets flex-basis to 0,
   which in a column throws away the natural height of the square image box
   (.image-cover is a padding-top:100% ratio box) and collapses the whole tile
   to its caption. */
.home .product-category.col {
	display: flex;
}

.home .product-category.col .col-inner {
	border-radius: 10px;
	overflow: hidden;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.home .product-category.col .col-inner > a,
.home .product-category.col .box-category {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* flatsome.css gives .box-image "margin: 0 auto". As a flex item those auto
   margins eat the free space on the cross axis, which cancels the default
   stretch — the box ends up 0 wide, and .image-cover's padding-top:100%
   resolves against that 0, collapsing the picture entirely. */
.home .product-category.col .box-image {
	width: 100%;
}

.home .product-category.col .box-text {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	padding-bottom: .5em;
}

/* Front page USP row ----------------------------
   The three "szakmai tapasztalat / gyors kiszállítás / óriási választék"
   items are the only .icon-box.featured-box on the front page. Their icons
   are inline SVGs with quite different intrinsic ratios (0.77:1, 1.31:1,
   0.85:1) and the page builder writes a per-item width straight onto
   .icon-box-img as an inline style — 70px, 115px and 76px — so the three
   render at visibly different sizes.

   Pinning one square box and letting each svg fit inside it gives them an
   identical footprint; the default preserveAspectRatio (xMidYMid meet)
   scales each one down and centres it, so nothing is cropped or stretched.
   !important is unavoidable on the width: it is competing with an inline
   style, which nothing else can outrank.

   Colour needs no work here — flatsome.css already resolves
   .icon-box-img svg / svg path to currentColor, so the icons inherit the
   same #555 as the captions next to them. */
.home .icon-box.featured-box {
	align-items: center;
}

.home .icon-box.featured-box .icon-box-img {
	width: 84px !important;
	height: 84px;
}

.home .icon-box.featured-box .icon-box-img .icon,
.home .icon-box.featured-box .icon-box-img .icon-inner {
	height: 100%;
}

.home .icon-box.featured-box .icon-box-img svg {
	width: 100%;
	height: 100%;
	/* flatsome.css adds padding-top: .2em here, which on a fixed-height box
	   just pushes the icon off centre. */
	padding-top: 0;
}

/* Front page USP row: stack under 1000px --------
   The columns are "medium-4 small-12 large-4" and flatsome's breakpoints are
   550px (medium) and 850px (large), so from 850px up the three sit side by
   side and the captions get cramped well before the layout would otherwise
   break.

   Matched by content rather than by the row: the page builder regenerates the
   row's id on every save and its class list changes with the layout settings,
   so neither is a stable hook — but "the column that holds a USP icon-box"
   always is. No !important needed; this outranks flatsome's single-class
   .large-4 / .medium-4 whatever the load order. 999.98 rather than 999 so a
   fractional viewport width can't fall between the two rules and snap back to
   three across. */
@media screen and (max-width: 1030px) {
	.home .col:has(.icon-box.featured-box) {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Szállítási táblázat ---------------------------
   Row highlight on the /szallitasi-informaciok/ table. Scoped to tbody: the
   header row lighting up under the cursor reads as a glitch rather than as
   feedback. This table is not inside .fs-table-container, so the #ddd hover
   defined for those tables further up doesn't reach it. */
.szallitas-tablazat tbody tr {
	transition: background-color 0.2s ease;
}

.szallitas-tablazat tbody tr:hover {
	background-color: var(--light-purple);
}

.szallitas-tablazat th:first-child,
.szallitas-tablazat td:first-child {
	padding-left: 1em;
}

/* MailerLite subscribe form ---------------------
   [fs_mailerlite_subscribe] — includes/mailerlite.php. */
/* Stacked by default: the form is mostly used in narrow places (sidebar,
   popup, footer column) where a row wraps anyway. */
.fs-ml-form__fields {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.fs-ml-form__fields input[type="email"],
.fs-ml-form__fields input[type="text"],
.fs-ml-form__fields .fs-ml-form__button {
	width: 100%;
	margin: 0;
	min-width: 0;
	border-radius: 10px;
}

.pum-content + .pum-close {
	border-radius: 100% !important;
}

/* One row instead — add class="fs-ml-form--inline" to the shortcode. */
.fs-ml-form--inline .fs-ml-form__fields {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.fs-ml-form--inline .fs-ml-form__fields input[type="email"],
.fs-ml-form--inline .fs-ml-form__fields input[type="text"] {
	flex: 1 1 200px;
	width: auto;
}

.fs-ml-form--inline .fs-ml-form__fields .fs-ml-form__button {
	flex: 0 0 auto;
	width: auto;
}

.fs-ml-form__title {
	margin-bottom: .3em;
}

.fs-ml-form__text {
	margin-bottom: .8em;
}

/* Off-screen rather than display:none — a bot filling every field it can see
   in the DOM is exactly what this is here to catch. */
.fs-ml-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fs-ml-form__message:empty {
	display: none;
}

.fs-ml-form__message {
	margin: .7em 0 0;
	font-weight: 600;
}

.fs-ml-form__message.is-success {
	color: #1e8e3e;
}

.fs-ml-form__message.is-error {
	color: #f52222;
}

.fs-ml-form.is-busy {
	opacity: .6;
}

 .round-border {
	 border-radius: 10px;
	 overflow: hidden;
 }
/* MailerLite state on the My Account dashboard ---
   fs_ml_account_panel() — includes/mailerlite.php. */
.fs-ml-account {
	border: 2px solid var(--fs-color-secondary, #d8d8d8);
	border-radius: 10px;
	padding: 1em 1.2em;
	margin-top: 1.5em;
}

.fs-ml-account h3 {
	margin-bottom: .5em;
}

.fs-ml-account p {
	margin-bottom: .4em;
}

.fs-ml-account p:last-child {
	margin-bottom: 0;
}

.fs-ml-account__badge {
	display: inline-block;
	padding: .1em .7em;
	border-radius: 10px;
	background-color: var(--light-purple);
	font-weight: 600;
}

/* Waiting on a confirmation click is the one state the customer has to act
   on, so it is the one that gets colour. */
.fs-ml-account--unconfirmed .fs-ml-account__badge {
	background-color: var(--light-orange);
}

.fs-ml-account--active .fs-ml-account__badge {
	color: #1e8e3e;
}

.fs-ml-account__note,
.fs-ml-account__lists,
.fs-ml-account__since {
	font-size: .9em;
	opacity: .85;
}

.fs-ml-account__form {
	margin-top: 1em;
}

.fs-ml-account__form .button {
	margin: 0;
}

.fs-ml-account__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 1em;
	max-width: 320px;
}

.fs-ml-account__field label {
	font-weight: 600;
}

.fs-ml-account__field input {
	margin: 0;
}

/* The "why subscribe" pitch above the account newsletter form. */
.fs-ml-account__why {
	margin-bottom: 1.4em;
}

.fs-ml-account__why h2 {
	font-size: 1.25em;
	margin-bottom: .5em;
}

.fs-ml-account__why ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5em;
}

.fs-ml-account__why li {
	position: relative;
	padding-left: 1.6em;
	line-height: 1.5;
}

/* A tick rather than a bullet: every line is a promise, not an item. */
.fs-ml-account__why li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--fs-color-primary, #6a1b9a);
}

/* Termékkártya-képek egységes magassága -----------
   A WooCommerce bélyegkép-vágás "uncropped": a kép 280 pixel széles, a magassága
   viszont a forrásfotó képaránya szerint változik. Egy álló fotó – például a
   D3-Vitaminé, ami 280x381 – így 105 pixellel lejjebb tolja a kártya szövegét,
   mint a négyzetes szomszédaiét. A katalógusban ez ma csak azért nem látszik,
   mert ott minden termékfotó véletlenül négyzetes; ott is előjönne az első álló
   képnél, ezért a szabály minden termékkártyára vonatkozik, nem csak a
   főoldali sliderre.
   A megoldás négyzetes képdoboz: a kép a fenti object-fit: contain szabállyal
   illeszkedik bele, tehát semmi nem vágódik le, csak keret kerül köré. */
.product-small .box-image {
	aspect-ratio: 1 / 1;
}

/* A képet körülvevő wrapperek (.image-fade_in_back / .image-zoom stb.) és a
   linkjük is végigérjen, különben az img-nek nincs mihez képest 100%-a.
   A .image-tools és a .badge-container kimarad: azok overlayek, nem a kép. */
.product-small .box-image > div:not(.image-tools):not(.badge-container),
.product-small .box-image > div:not(.image-tools):not(.badge-container) > a,
.product-small .box-image > a {
	display: block;
	height: 100%;
}

/* A kép a négyzetes dobozba BELEFÉR, nem tölti ki: az object-fit: contain a
   teljes képet meghagyja és keretet tesz köré. Itt is kiírjuk (nem csak a
   fenti globális szabályban), hogy a szándék egy helyen olvasható legyen, és
   egy későbbi cover-szabály se tudja véletlenül levágni a képet. */
.product-small .box-image img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	object-position: 50% 50% !important;
}

/* Termékkártya lekerekítése -----------------------
   A .col-inner szándékosan NEM kap overflow: hidden-t: a badge-container
   abszolút pozicionált, és így szabadon kilóghat a kártyából, ha egy jelvény
   túlér a szélén. Erre itt nincs is szükség, mert az egyetlen gyerek, aminek a
   szögletes sarka átlógna a lekerekítésen, a .box-image – annak viszont saját
   overflow: hidden-je van, tehát a kép magától követi a kerekítést. */
.product-small .col-inner {
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(22, 12, 30, .10);
	transition: box-shadow .25s ease;
}

.product-small.has-hover:hover .col-inner {
	box-shadow: 0 8px 22px rgba(22, 12, 30, .18);
}

/* A .col-inner alatt van még egy .box is, saját FEHÉR háttérrel és teljes
   magassággal — ez takarta ki a lekerekített alsó sarkokat (felül csak azért
   nem látszott, mert a .box-image maga vágja magát). Ezért a .box is megkapja
   ugyanazt a sugarat, különben a szögletes fehér háttere a lekerekítés fölé
   fest, és az árnyék sem látszik ki a saroknál. */
.product-small .box {
	border-radius: 10px;
}

/* Csak a felső két sarok: alul a .box-text folytatódik, azt a .col-inner
   fehér háttere kerekíti le. */
.product-small .box-image {
	border-radius: 10px 10px 0 0;
}

/* Termékleírás-táblázatok -------------------------
   A .szallitas-tablazat szabályait veszi át, kiegészítve a csíkozással és a
   jobbra igazított számoszlopokkal. A táblázatok markupjából minden formázás
   (inline style, width, border) ki lett szedve — a kinézet innen jön. */
.vl-tablazat-container {
	overflow-x: auto;			/* túlcsordulás esetén vízszintes görgetés */
	max-width: 100%;
	margin-bottom: 1em;
}

/* Csak annyi széles, amennyi a tartalom — a témák table{width:100%} szabálya
   ellen kell az !important. */
.vl-tablazat {
	width: auto !important;
	border-collapse: collapse;
	margin: 0;
}

.vl-tablazat th,
.vl-tablazat td {
	padding: 0.45em 0.8em;
	border: 0;
	vertical-align: top;
}

.vl-tablazat th:first-child,
.vl-tablazat td:first-child {
	padding-left: 1em;
}

.vl-tablazat th:last-child,
.vl-tablazat td:last-child {
	padding-right: 1em;
}

.vl-tablazat tbody tr {
	transition: background-color 0.2s ease;
}

.vl-tablazat tbody tr:nth-child(even) {
	background-color: var(--light-purple);
}

/* A hover a --light-purple-nél mélyebb, különben a páros sorokon nem látszana. */
.vl-tablazat tbody tr:hover {
	background-color: #e7d5f2;
}

.vl-tablazat .ar {
	text-align: right;
}

/* A cellák tartalma szerkesztőből jön, gyakran <p>-be csomagolva. */
.vl-tablazat p {
	margin: 0;
}

/* WOOF szűrő jelölőnégyzetek és rádiógombok színe ---
   A HUSKY/WOOF az iCheck "square-orange" skint használja, ami egyetlen
   240x24-es PNG spriteból dolgozik (10 állapot, 24 pixelenként). A narancs
   (#de8650) magában a képfájlban van, ezért sem color, sem background-color
   nem hat rá — a sprite átszínezéséhez új képet kellene generálni.
   Ehelyett a két narancsot használó állapotot (bejelölt és hover) nem a
   sprite adja: elrejtjük a hátteret, és a keretet/kitöltést CSS-ből rajzoljuk
   a téma másodlagos színével. A szürke állapotok (üres, letiltott) maradnak
   a spriteon, azokban nincs átszínezendő narancs.
   A skin szerint a checkbox szögletes, a rádió kör, és MINDKETTŐ pipát kap
   bejelölve — ezért ugyanaz a ::after mindkettőn. */

.icheckbox_square-orange.checked,
.iradio_square-orange.checked {
	background-image: none;
	background-color: var(--fs-color-secondary, #ff6f20);
}

.iradio_square-orange.checked,
.iradio_square-orange.hover:not(.checked) {
	border-radius: 50%;
}

/* A fehér pipa. pointer-events: none, hogy a doboz fölött fekvő átlátszó
   .iCheck-helper továbbra is elkapja a kattintást. */
.icheckbox_square-orange.checked::after,
.iradio_square-orange.checked::after {
	content: "";
	position: absolute;
	pointer-events: none;
	left: 8px;
	top: 5px;
	width: 6px;
	height: 11px;
	box-sizing: border-box;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* Hover üres állapotban: a spriteon ez is narancs keret volt.
   A :not(.checked) kell, különben a bejelölt elem fölé húzva a kurzort ez
   a szabály kioltaná a kitöltést. */
.icheckbox_square-orange.hover:not(.checked),
.iradio_square-orange.hover:not(.checked) {
	background-image: none;
	box-sizing: border-box;
	border: 2px solid var(--fs-color-secondary, #ff6f20);
}

/* Letiltott + bejelölt: ugyanaz, halványan. */
.icheckbox_square-orange.checked.disabled,
.iradio_square-orange.checked.disabled {
	opacity: 0.5;
}

.coupon-error-notice {
	color: var(--fs-color-alert);
}

.vertical-box-product-data {
	position: relative;
}

.vertical-box-product-data .badge-container {
	margin: -10px 0 0;
}

/* Checkout: the checkbox label is a full-width block in the theme, which put
   "miért érdemes létrehozni fiókot?" (fs_checkout_create_account_tip() in
   checkout.php) on the next line. Inline, the text follows the label, and
   wraps below it only where the line is too narrow. */
.woocommerce-account-fields p.create-account > label {
	display: inline-block;
	margin-bottom: 0;
}

.woocommerce-account-fields p.create-account {
	margin-bottom: .4em;
}

.fs-createaccount-tip {
	cursor: pointer;
	padding: 5px 8px;
	font-size: .85em;
	color: var(--fs-color-primary);
	margin-bottom: .4em;
	font-weight: 700;
}

#popmake-868 p {
	display: flex;
	gap: .7em;
	align-items: center;
}

#popmake-868 h4 {
	margin-bottom: 1.2em;
}

#popmake-868 h4 i {
	margin-right: .7em;
}

#popmake-868 i {
	color: var(--fs-color-primary);
}