/**
 * Ráduly / lindabuttercup — élesítési javítások
 * Róbert 2026.09.10-i levelének 4., 6. és 7. pontja.
 */

/* ═══════════════════════════════ 4. pont — termékkártya hover állapota ═══ */

/**
 * Az Elkészítési idő és a Szerkesztési díj a gomb alatt jelenik meg, hoverre.
 * Alapállapotban a kártya minimális marad — kép, terméknév, kategória, ár —,
 * ahogy Róbert kérte.
 */
.raduly-loop-attrs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity .2s ease, max-height .2s ease;
}

.wd-product:hover .raduly-loop-attrs,
.wd-product:focus-within .raduly-loop-attrs {
	opacity: 1;
	max-height: 80px;
}

.raduly-attr-label {
	font-weight: 600;
}

.raduly-attr-value {
	white-space: nowrap;
}

/*
 * Érintőképernyőn nincs hover, ezért ott mindig látszik. A WoodMart is így
 * kezeli a kártyagombokat: mobilon nem rejti el őket.
 */
@media (max-width: 768.98px) {
	.raduly-loop-attrs {
		opacity: 1;
		max-height: none;
	}
}

/* ═══════════════════════════════════ 6. pont — termékgaléria magassága ═══ */

/**
 * A PROBLÉMA
 * A galéria vízszintes carousel: minden kép egymás mellett van a DOM-ban, és a
 * doboz magassága a LEGMAGASABB képhez igazodna. A legrosszabb eset a
 * „Határidőnapló | Körmösöknek”: a kiemelt kép fekvő (2560×1920), a galéria
 * mindhárom képe viszont nagyon magas álló (1440×2560). Így a fekvő kép alatt
 * több mint 600 px üresség maradt.
 *
 * A MEGOLDÁS
 * Minden dia ugyanabba a dobozba kerül, `object-fit: contain` — vagyis a kép
 * TELJES EGÉSZÉBEN látszik, semmi nincs levágva, az eredeti álló és fekvő képek
 * megmaradnak. A doboz magassága soha nem ugrik.
 *
 * A doboz ARÁNYA termékenként változik: a KIEMELT KÉP saját arányát veszi fel.
 * Ezt a raduly_fixes_gallery_ratio() írja ki a fejlécbe, termékoldalanként.
 * Így a kiemelt kép — amit a vásárló elsőként lát — hézag nélkül tölti ki a
 * dobozt, és az akciócímke (pl. „-25%”) rajta ül, nem a fehér semmiben lebeg.
 * Ez volt az 1.3.0 fix négyzetes dobozának a mellékhatása.
 *
 * A lenti érték csak tartalék: ha nincs kiemelt kép, marad a négyzet.
 */
.wd-gallery-images .wd-carousel-item .woocommerce-product-gallery__image {
	aspect-ratio: var(--raduly-gallery-ratio, 1 / 1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.wd-gallery-images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A bélyegkép-sáv marad négyzetes, ott a levágás megszokott és jól néz ki. */
.wd-gallery-thumbnails .wd-carousel-item img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ═════════════════════════════════════════════ 7. pont — footer tipográfia */

/**
 * A Vegetables referencián az oszlopcímek jóval nagyobbak és vastagabbak a
 * listaelemeknél, a listaelemek pedig kisebbek és sűrűbbek. Nálunk a kettő
 * majdnem egyforma volt, ezért nem állt össze a hierarchia.
 *
 * A színekhez szándékosan nem nyúlunk: a referencián fehér szöveg van zöldön,
 * itt viszont sötét a logó is — fehér szöveghez logót is cserélni kellene.
 * Róbert kifejezetten betűméretet és hierarchiát írt.
 */
.wd-footer .wd-el-toggle-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}

.wd-footer .wd-list .wd-list-content,
.wd-footer .wd-list li {
	font-size: 16px;
	line-height: 1.5;
}

/* A referencián a listaelemek jóval sűrűbben állnak. */
.wd-footer .wd-list > li + li,
.wd-footer .wd-list .wd-list-item + .wd-list-item {
	margin-top: 10px;
}

.wd-footer .wd-text-block {
	font-size: 15px;
	line-height: 1.6;
}

/* ═══════════════════════════════════════ 7. pont — hírlevélblokk ═══════ */

/**
 * A hírlevél most fehér kártyaként ül a zöld footeren — a referencián ez egy
 * enyhén világosabb, ugyanolyan tónusú panel. A fehér doboz eltüntetése a
 * legnagyobb egyetlen változás a footer megjelenésében.
 */
.wd-footer .mailpoet_form,
.wd-footer .mailpoet_form_form,
.wd-footer .mailpoet_form_shortcode {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * A logó a footer tetején már szerepel — a hírlevélblokkban felesleges
 * ismétlés. (Róbert döntése: kivenni.)
 */
.wd-footer .mailpoet_form_image {
	display: none !important;
}

/* A címsor legyen valódi címsor, ahogy a referencián. */
.wd-footer .mailpoet-heading {
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 0 0 6px !important;
}

.wd-footer .mailpoet_form_paragraph {
	font-size: 15px !important;
	line-height: 1.5 !important;
	margin: 0 0 14px !important;
}

/* Az e-mail mező illeszkedjen a téma formanyelvéhez. */
.wd-footer .mailpoet_text {
	font-family: inherit !important;
	font-size: 15px !important;
	height: 48px !important;
	padding: 0 16px !important;
	border-radius: 8px !important;
	border: 0 !important;
	background: #fff !important;
}

/*
 * A gomb ne legyen teljes szélességű: a referencián egy kompakt, rövid
 * feliratú gomb áll az e-mail mező mellett.
 */
.wd-footer .mailpoet_submit {
	width: auto !important;
	min-width: 150px;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	height: 48px !important;
	padding: 0 26px !important;
	border-radius: 8px !important;
	/*
	 * A gomb felirata a MailPoet űrlapban van beírva, ezért a szövegét nem
	 * innen javítjuk — de a téma nagybetűsítését itt kikapcsoljuk, különben
	 * „Iratkozz Fel A Hírlevelünkre!” lenne belőle, ami magyarul hibás.
	 */
	text-transform: none !important;
}

@media (max-width: 575.98px) {
	.wd-footer .mailpoet_submit {
		width: 100% !important;
	}
	.wd-footer .mailpoet-heading {
		font-size: 24px !important;
	}
}

/* ═══════════════════════════ 1. pont — a Testreszabás gomb a jobb oszlopban */

/**
 * A gombot az assets/testreszabas.js teszi be az űrlap helyére. Itt csak
 * azt biztosítjuk, hogy ugyanúgy nézzen ki, mint a többi fő gomb.
 */
.raduly-customize-jump {
	display: block;
	width: 100%;
	margin-top: 10px;
	cursor: pointer;
}

/* ═══════════════════════════ a gyerektéma egyedi CSS-ével való ütközés ═══ */

/**
 * A Testreszabó → Egyedi CSS-ben van egy sor:
 *
 *     .mailpoet_form_paragraph a { color: #000000 !important; }
 *
 * Ez akkor készült, amikor a hírlevél még FEHÉR kártyán ült. Miután a fenti
 * szabályok átlátszóvá tették, a fekete link a sötét footeren gyakorlatilag
 * olvashatatlan. Két osztállyal nagyobb a fajsúlyunk, ezért ez nyer — a
 * gyerektéma CSS-éhez nem kell hozzányúlni.
 */
.wd-footer .mailpoet_form_paragraph a,
.wd-footer .mailpoet_form_paragraph a:hover {
	color: inherit !important;
	text-decoration: underline;
}

/**
 * A kereső „népszerű keresések” sávját a gyerektéma CSS-e elrejti, mert
 * korábban öt angol demó keresőszó volt benne. A 12-es terv magyarra írja
 * őket; ha meg is akarod jeleníteni, vedd ki ezt a sort az Egyedi CSS-ből:
 *
 *     .wd-search-requests.wd-hide-md { display: none !important; }
 *
 * Innen szándékosan NEM írjuk felül — ez megjelenítési döntés, nem hiba.
 */

/* ═════════════════════════════ 5. pont — üres csillagsor a termékoldalon ═══ */

/**
 * Ha még nincs értékelés, a plugin sablonja üres csillagsort rajzol és mellé
 * egy „Írj elsőként értékelést” hivatkozást. Ez csak annyit állít be, hogy a
 * kettő egy sorban, a WooCommerce megszokott elrendezésében álljon.
 */
.raduly-empty-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.raduly-empty-rating .woocommerce-review-link {
	font-size: 13px;
	opacity: .75;
}

.raduly-empty-rating .woocommerce-review-link:hover {
	opacity: 1;
}

/* ═══════════════════════════════ hero diák — a szöveg olvashatósága ═══════ */

/**
 * A diák háttere mostantól nagy felbontású TERMÉKFOTÓ (a korábbi 1219×472-es
 * bannergrafikákat a slider felnagyította, ezért lettek életlenek).
 *
 * Fotó fölött viszont a szöveg olvashatósága nem garantált, ezért a szöveg
 * oldalára egy lágy, fehér átmenet kerül. Ez a fotót nem takarja el — a jobb
 * oldali kétharmadban teljesen átlátszó —, a bal oldali szöveget viszont
 * bármilyen háttér fölött olvashatóvá teszi.
 *
 * Így a négy fotó bármikor cserélhető anélkül, hogy az olvashatóságot újra
 * kellene ellenőrizni.
 */
.wd-slide .wd-slide-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, .88) 0%,
		rgba(255, 255, 255, .70) 30%,
		rgba(255, 255, 255, .15) 58%,
		rgba(255, 255, 255, 0) 72%
	);
}

/* A középre igazított dián körkörös, egyenletes fátyol kell. */
.wd-slide .wd-slide-container[style*="justify-content: center"] ~ .wd-slide-bg::after,
.wd-slide.wd-slide-center .wd-slide-bg::after {
	background: rgba(255, 255, 255, .68);
}

@media (max-width: 768.98px) {
	/* Mobilon a szöveg a kép fölött középen áll, ott teljes fátyol kell. */
	.wd-slide .wd-slide-bg::after {
		background: rgba(255, 255, 255, .78);
	}
}

/* ══════════════════════════════════ gombfeliratok — ne legyen szókezdő nagybetű */

/**
 * A téma minden gombot `text-transform: capitalize`-zal szed, ezért lett a
 * „Kosárba teszem”-ből „Kosárba Teszem”. Magyarul ez hibás: a mondat közepén
 * nem nagybetűs a második szó. A hírlevél gombjánál ezt már kikapcsoltuk,
 * itt a termékoldali és a kártyagombokra is.
 */
.single_add_to_cart_button,
.wd-add-btn .add_to_cart_button,
.wd-add-btn .product_type_simple,
.raduly-customize-jump,
.woocommerce a.button,
.woocommerce button.button {
	text-transform: none !important;
}

/* ═══════════════════════════════ regisztrációs kedvezmény — Fiókom doboz ═══ */

/**
 * A kuponkód a Fiókom vezérlőpultjának tetején. Szándékosan visszafogott:
 * nem reklámcsík, hanem egy jól olvasható, kimásolható kód.
 */
.raduly-coupon-box {
	margin: 0 0 26px;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: rgba(140, 188, 103, .1);
}

.raduly-coupon-box h3 {
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.3;
}

.raduly-coupon-box p {
	margin: 0 0 8px;
}

.raduly-coupon-box p:last-child {
	margin-bottom: 0;
}

.raduly-coupon-code {
	display: inline-block;
	padding: 8px 16px;
	border: 1px dashed rgba(0, 0, 0, .3);
	border-radius: 8px;
	background: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .08em;
	user-select: all;   /* egy kattintás kijelöli az egészet */
}