/* BuyMe termékkonfigurátor
   Ugyanaz a paletta, mint a felvásárlási űrlapon: egy tintakék, egy semleges,
   egy zöld a kiválasztott árra. A nem elérhető opció halvány marad, nem tűnik el. */

/* A színváltozókat minden saját konténerünk megkapja, különben a
   készletböngésző és a beszámítás doboza szín nélkül maradna. */
.bmp,
.bmb,
.bmg,
.buyme-tradein {
	--ink: #14171a;
	--blue: #14304f;
	--muted: #6b7076;
	--line: #e1e4e8;
	--wash: #f7f8f9;
	--pick: #1c6b4a;
}

.bmp {

	max-width: 860px;
	margin: 0 auto;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}

.bmp *,
.bmp *::before,
.bmp *::after {
	box-sizing: border-box;
}

.bmp-empty {
	color: var(--muted);
	padding: 24px 0;
}

/* Fejléc */
.bmp-head {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 32px;
	align-items: center;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 6px;
}

.bmp-media img {
	width: 100%;
	max-height: 190px;
	object-fit: contain;
	height: auto;
	display: block;
}

.bmp-brand {
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 2px;
}

.bmp-name {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0 0 6px;
}

.bmp-summary {
	color: var(--muted);
	font-size: 14.5px;
	margin: 0 0 16px;
}

.bmp-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 13px;
	color: var(--muted);
}

.bmp-badges li::before {
	content: "\2713";
	margin-right: 6px;
	color: var(--pick);
	font-weight: 600;
}

/* Blokkok */
.bmp-block {
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}

.bmp-h {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 12px;
}

.bmp-h-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.bmp-h-row .bmp-h {
	margin-bottom: 12px;
}

.bmp-info {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bmp-info:hover {
	color: #0e2540;
}

/* Választógombok */
.bmp-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bmp-opt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 116px;
	padding: 11px 16px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.bmp-opt:hover:not(:disabled) {
	border-color: #c3c9d0;
}

.bmp-opt.is-on {
	border-color: var(--blue);
	box-shadow: inset 0 0 0 1px var(--blue);
}

.bmp-opt.is-off,
.bmp-opt:disabled {
	color: #a8adb3;
	background: var(--wash);
	cursor: default;
	border-style: dashed;
}

.bmp-opt-label {
	font-weight: 500;
	font-size: 15px;
}

.bmp-opt-sub {
	font-size: 12.5px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.bmp-opt.is-off .bmp-opt-sub {
	color: #a8adb3;
}

.bmp-note {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.5;
	max-width: 62ch;
}

/* Vásárlás */
.bmp-buy {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 26px 0 0;
}

.bmp-price {
	flex: 1 1 auto;
	min-width: 0;
}

.bmp-price-now {
	display: block;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.022em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.bmp-price-stock {
	display: block;
	font-size: 13px;
	color: var(--pick);
	margin-top: 3px;
}

.bmp-cart {
	padding: 14px 40px;
	background: var(--blue);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font: inherit;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}

.bmp-cart:hover:not(:disabled) {
	background: #0e2540;
}

.bmp-cart:disabled {
	opacity: .5;
	cursor: default;
}

.bmp-error {
	width: 100%;
	margin: 4px 0 0;
	padding: 10px 14px;
	border-left: 3px solid #9b2c2c;
	background: #fdf5f5;
	color: #7c2222;
	font-size: 14px;
}

/* A hidden attribútumot a saját display szabályaink felülírnák, ezért
   kifejezetten elrejtjük. Csak a saját elemeinkre, hogy a téma működését
   ne befolyásoljuk. */
.bmp [hidden],
.bmp[hidden],
.buyme-tradein [hidden] { display: none !important; }

/* Magyarázó ablak */
.bmp-modal {
	position: fixed;
	inset: 0;
	background: rgba( 20, 23, 26, .45 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
}

.bmp-modal-box {
	background: #fff;
	border-radius: 6px;
	max-width: 560px;
	width: 100%;
	max-height: 82vh;
	overflow: auto;
}

.bmp-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	background: #fff;
}

.bmp-modal-head h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.bmp-modal-x {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0 4px;
}

.bmp-modal-body {
	padding: 6px 22px 22px;
}

.bmp-explain {
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

.bmp-explain:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bmp-explain h5 {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.bmp-explain p {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.55;
}

.bmp :focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

@media ( max-width: 720px ) {
	.bmp-head {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.bmp-media {
		max-width: 150px;
	}

	.bmp-name { font-size: 23px; }

	.bmp-opt {
		flex: 1 1 calc( 50% - 4px );
		min-width: 0;
	}

	.bmp-buy {
		gap: 14px;
	}

	.bmp-cart {
		width: 100%;
	}
}

/* A kiválasztott darab saját fotói */
.bmp-unit-photos {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 18px 0 0;
}

.bmp-unit-photos img {
	width: 92px;
	height: 92px;
	/* Beillesztés, nem vágás: egy levágott készülékfotón nem látszik,
	   amit a vásárló látni akar. */
	object-fit: contain;
	background: var(--wash);
	border: 1px solid var(--line);
	border-radius: 3px;
	display: block;
}

.bmp-unit-photos img.is-main {
	width: 190px;
	height: 190px;
}

@media ( max-width: 720px ) {
	.bmp-unit-photos img.is-main {
		width: 140px;
		height: 140px;
	}

	.bmp-unit-photos img {
		width: 68px;
		height: 68px;
	}
}

/* Beszámítás a kosárban és a pénztárban */
.buyme-tradein {
	--ti-ink: #14171a;
	--ti-blue: #14304f;
	--ti-muted: #6b7076;
	--ti-line: #e1e4e8;
	--ti-pick: #1c6b4a;

	margin: 0 0 26px;
	padding: 18px 20px;
	border: 1px solid var(--ti-line);
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ti-ink);
}

.buyme-tradein label strong {
	display: block;
	font-size: 15.5px;
	margin-bottom: 3px;
}

.buyme-tradein label span {
	display: block;
	font-size: 13.5px;
	color: var(--ti-muted);
	max-width: 62ch;
	margin-bottom: 12px;
}

.buyme-tradein-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.buyme-tradein-row input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 10px 13px;
	border: 1px solid var(--ti-line);
	border-radius: 3px;
	font: inherit;
}

.buyme-tradein-row input:focus {
	outline: 2px solid var(--ti-blue);
	outline-offset: 1px;
	border-color: var(--ti-blue);
}

.buyme-tradein-row button {
	padding: 10px 24px;
	background: var(--ti-blue);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.buyme-tradein-row button:hover {
	background: #0e2540;
}

.buyme-tradein-active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-left: 3px solid var(--ti-pick);
	padding-left: 14px;
	margin: -4px 0;
}

.buyme-tradein-info strong {
	display: block;
	color: var(--ti-pick);
}

.buyme-tradein-info span {
	display: block;
	font-size: 13.5px;
	color: var(--ti-muted);
}

.buyme-tradein-remove {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--ti-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.buyme-tradein-remove:hover {
	color: var(--ti-ink);
}

/* Értesítés, ha nincs raktáron */
.bmp-wanted {
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--kerek, 4px);
	background: var(--wash);
	padding: 20px 22px;
	margin-top: 24px;
}

.bmp-wanted h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 6px;
}

.bmp-wanted p {
	margin: 0 0 14px;
	font-size: 14.5px;
	color: var(--muted);
	max-width: 58ch;
}

.bmp-wanted-sor {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bmp-wanted-sor input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font: inherit;
	background: #fff;
}

.bmp-wanted-sor input:focus {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
	border-color: var(--blue);
}

.bmp-wanted-sor button {
	flex: none;
	padding: 11px 22px;
	background: var(--blue);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.bmp-wanted-sor button:hover { background: #0e2540; }

.bmp-wanted-mit {
	margin: 10px 0 0 !important;
	font-size: 13px !important;
	font-style: italic;
}

.bmp-wanted-uzenet {
	margin: 12px 0 0 !important;
	font-size: 14px !important;
	padding: 10px 14px;
	border-radius: 3px;
}

.bmp-wanted-uzenet.is-kesz {
	background: #eef4f0;
	color: var(--pick);
	border-left: 3px solid var(--pick);
}

.bmp-wanted-uzenet.is-hiba {
	background: #fdf5f5;
	color: #7c2222;
	border-left: 3px solid #9b2c2c;
}

/* A téma saját kosárűrlapja példányvezérelt terméknél félrevezető lenne:
   nem tudja, melyik darabot vinné a kosárba. A konfigurátor veszi át. */
.buyme-unit-product form.cart,
.buyme-unit-product .wp-block-woocommerce-add-to-cart-form,
.buyme-unit-product .wc-block-add-to-cart-form,
.buyme-unit-product .elementor-widget-woocommerce-product-add-to-cart,
.buyme-unit-product .single_add_to_cart_button,
.buyme-unit-product .woocommerce-variation-add-to-cart {
	display: none !important;
}

/* A saját gombunk viszont maradjon, akkor is, ha a fenti osztályok
   valamelyike ráillene. */
.buyme-unit-product .bmp .bmp-cart,
.buyme-unit-product .bmp form {
	display: revert !important;
}

.buyme-unit-product .bmp-cart {
	display: block !important;
}

/* A téma ár- és készletblokkja is duplán jelenne meg. */
.buyme-unit-product .product .price,
.buyme-unit-product .wp-block-woocommerce-product-price,
.buyme-unit-product .stock {
	display: none !important;
}

.buyme-unit-product .bmp .price,
.buyme-unit-product .bmp-price-now,
.buyme-unit-product .bmp-price-stock {
	display: block !important;
}

/* Gyűjtemények listája */
.bmg {
	--bmg-oszlop: 4;
	max-width: 1180px;
	margin: 0 auto;
}

.bmg-cim {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

.bmg-racs {
	display: grid;
	grid-template-columns: repeat( var(--bmg-oszlop), 1fr );
	gap: 12px;
}

.bmg-elem {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--line, #e1e4e8);
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.bmg-elem:hover {
	border-color: var(--blue, #14304f);
}

.bmg-nev {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}

.bmg-db {
	font-size: 13px;
	color: var(--muted, #6b7076);
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 900px ) {
	.bmg-racs { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( max-width: 520px ) {
	.bmg-racs { grid-template-columns: 1fr; }
}

/* Készletböngésző */
.bmb {
	color: var(--ink);
	font-size: 16px;
	line-height: 1.55;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
}

.bmb-szuro-fej {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.bmb-szuro-fej h2 { font-size: 17px; font-weight: 600; margin: 0; }

.bmb-torles { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.bmb-torles:hover { color: var(--ink); }

.bmb-csoport {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
	padding: 14px 0 12px;
}

.bmb-csoport legend {
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 8px;
}

.bmb-opcio {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 0;
	cursor: pointer;
	font-size: 14px;
}

.bmb-opcio input { margin: 0; accent-color: var(--blue); }
.bmb-opcio-nev { flex: 1 1 auto; }
.bmb-opcio-db { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.bmb-opcio.is-ures { opacity: .42; cursor: not-allowed; }

.bmb-kuld {
	margin-top: 14px;
	width: 100%;
	padding: 11px;
	background: var(--blue);
	color: #fff;
	border: 0;
	border-radius: 3px;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.bmb-fejlec {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.bmb-szam { margin: 0; font-size: 14px; color: var(--muted); }

.bmb-rendezes {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.bmb-rendezes label { color: var(--muted); }

.bmb-rendezes select {
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font: inherit;
	background: #fff;
}

/* Lapozó */
.bmb-lapozo {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.bmb-lap {
	min-width: 38px;
	padding: 8px 12px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: 3px;
	text-decoration: none;
	color: var(--ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.bmb-lap:hover { border-color: var(--blue); }

.bmb-lap.is-aktiv {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	font-weight: 600;
}

.bmb-ures {
	padding: 30px;
	background: var(--wash);
	border-radius: 4px;
	color: var(--muted);
	max-width: 56ch;
}

/* A készletböngésző rácsát is kényszerítjük, mert a témák
   saját listaelrendezést tehetnek rá. */
.bmb-racs {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 18px !important;
	justify-content: start !important;
	align-items: stretch !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Az automatikus bekezdésekből származó üres elemek itt sem foglalhatnak
   rácscellát. */
.bmb-racs > *:not(.bmb-kartya) {
	display: none !important;
}

.bmb-kartya {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 14px 16px 16px;
	background: #fff;
}

.bmb-kartya:hover { border-color: #cfd3d7; }

.bmb-kep {
	display: block;
	position: relative;
	height: 170px;
	margin-bottom: 12px;
	background: var(--wash);
	border-radius: 6px;
	overflow: hidden;
}

.bmb-kep img { width: 100%; height: 100%; object-fit: contain; display: block; }

.bmb-kep-ures { position: absolute; inset: 0; }

.bmb-kep-ures::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	background: #d7dade;
	border-radius: 8px;
}

.bmb-kep-ures[data-forma="phone"]::after { width: 52px; height: 104px; }
.bmb-kep-ures[data-forma="tablet"]::after { width: 90px; height: 118px; border-radius: 6px; }
.bmb-kep-ures[data-forma="laptop"]::after { width: 124px; height: 78px; border-radius: 5px; }
.bmb-kep-ures[data-forma="watch"]::after { width: 48px; height: 58px; border-radius: 12px; }
.bmb-kep-ures[data-forma="console"]::after { width: 110px; height: 44px; border-radius: 5px; }

.bmb-fok {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 2px 9px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--blue);
}

.bmb-kartya h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 3px; line-height: 1.3; }
.bmb-kartya h3 a { text-decoration: none; color: inherit; }
.bmb-kartya h3 a:hover { text-decoration: underline; }

.bmb-valtozat { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

.bmb-megtakaritas {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--pick);
	line-height: 1.4;
}

.bmb-ar {
	margin: auto 0 12px;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.bmb-gomb {
	display: block;
	text-align: center;
	padding: 10px;
	border: 1px solid var(--blue);
	border-radius: 3px;
	color: var(--blue);
	text-decoration: none;
	font-weight: 500;
	font-size: 14.5px;
}

.bmb-gomb:hover { background: var(--blue); color: #fff; }

@media ( max-width: 1000px ) {
	.bmb { grid-template-columns: 1fr; gap: 22px; }
	.bmb-racs { grid-template-columns: repeat(2, 1fr) !important; }
	.bmb-oldal { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
	.bmb-csoport { display: inline-block; vertical-align: top; min-width: 180px; margin-right: 24px; }
}

@media ( max-width: 560px ) {
	.bmb-racs { grid-template-columns: 1fr !important; }
	.bmb-csoport { display: block; margin-right: 0; }
}

/* Kereső és ársáv a szűrőkben */
.bmb-kereses {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font: inherit;
	background: #fff;
}

.bmb-kereses:focus {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
	border-color: var(--blue);
}

.bmb-arsav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bmb-arsav label { flex: 1 1 0; min-width: 0; }

.bmb-arsav input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font: inherit;
	font-variant-numeric: tabular-nums;
	background: #fff;
}

.bmb-arsav-jel { flex: none; color: var(--muted); }

.bmb-kuld-kicsi {
	margin-top: 10px;
	padding: 8px;
	font-size: 14px;
}

/* Összecsukható szűrők: asztali gépen mindig nyitva */
.bmb-nyit { display: none; }

@media ( max-width: 1000px ) {
	.bmb-nyit {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 11px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 4px;
		font: inherit;
		font-weight: 500;
		cursor: pointer;
		color: var(--ink);
	}

	.bmb-nyit:hover { border-color: var(--blue); }

	.bmb-nyit-db {
		background: var(--blue);
		color: #fff;
		border-radius: 10px;
		padding: 1px 8px;
		font-size: 12px;
		font-weight: 600;
	}

	/* Alapból zárva, hogy a termékek rögtön látszódjanak. */
	.bmb-mezok { display: none; padding-top: 12px; }
	.bmb-mezok.is-nyitva { display: block; }

	.bmb-csoport {
		display: inline-block;
		vertical-align: top;
		min-width: 190px;
		margin-right: 24px;
	}

	.bmb-csoport:first-of-type { display: block; margin-right: 0; }
}

@media ( max-width: 560px ) {
	.bmb-csoport { display: block; margin-right: 0; min-width: 0; }
}

/* Illusztráció jelzése */
/* Szerkesztőnek szóló figyelmeztetés, ha egy rövidkód nem tud mit mutatni */
.bmg-hiba {
	max-width: 900px;
	margin: 0 auto;
	padding: 16px 20px;
	background: #fdf6e7;
	border: 1px solid #e6d5ac;
	border-radius: 8px;
	color: #7a5a12;
	font-size: 14.5px;
	line-height: 1.55;
}

/* Listaoldali gomb: mindig a termékoldalra visz, nem a kosárba */
.buyme-loop-gomb.is-ures {
	opacity: .75;
}


/* ==========================================================
   Kiemelt ajánlat és hős, a [buyme_hero] rövidkódhoz.
   A színek a készülékek gyári színeiből jönnek.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

.buymeui {
	--tinta: #1b1a20;
	--kremx: #fdf8f0;
	--ultramarin: #3a4fd6;
	--turkiz: #3f9e93;
	--homok: #f4c94e;
	--halvany: #6c6a74;
	--r: 26px;
	--oldal: 24px;
	--max: 1180px;
	container-type: inline-size;
	font-family: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--tinta);
}

.buymeui *, .buymeui *::before, .buymeui *::after { box-sizing: border-box; }
.buymeui a { color: inherit; text-decoration: none; }

.buymeui h1, .buymeui h2 {
	font-family: "Bricolage Grotesque", -apple-system, sans-serif;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.02;
	margin: 0;
}

.buymeui a.gomb {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 700;
	font-size: 17px;
	padding: 15px 30px;
	border-radius: 999px;
	background: #fff;
	color: var(--tinta);
	transition: transform .12s ease;
}

.buymeui a.gomb:hover { transform: translateY(-2px); }

.buymeui a.gomb-vilagos {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}

.buymeui a.gomb-vilagos:hover { background: rgba(255,255,255,.14); }

.buymeui-hos { padding: 0 var(--oldal); }

.buymeui-hos-mezo {
	max-width: var(--max);
	margin: 0 auto;
	background: var(--ultramarin);
	border-radius: var(--r);
	padding: 56px 52px;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.buymeui-hos-mezo::after {
	content: "";
	position: absolute;
	right: -90px;
	top: -90px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: rgba(255,255,255,.07);
}

.buymeui-hos-racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 44px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.buymeui-hos h1 { font-size: clamp(38px, 5.4vw, 64px); color: #fff; margin-bottom: 20px; }

.buymeui-hos h1 mark {
	background: var(--homok);
	color: var(--tinta);
	padding: 0 .12em;
	border-radius: 8px;
}

.buymeui-hos-lead { font-size: 18px; color: rgba(255,255,255,.86); max-width: 44ch; margin: 0; }
.buymeui-hos-gombok { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Az ajánlatkártya */
.buymeui a.buymeui-ajanlat {
	display: block;
	background: #fff;
	border-radius: 20px;
	padding: 22px;
	color: var(--tinta);
	position: relative;
	transition: transform .12s ease;
}

.buymeui a.buymeui-ajanlat:hover { transform: translateY(-3px); }

.buymeui-cimke {
	position: absolute;
	top: -13px;
	left: 20px;
	background: var(--homok);
	color: var(--tinta);
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 5px 14px;
	border-radius: 999px;
}

.buymeui-ajanlat h2 { font-size: 21px; margin: 8px 0 3px; }
.buymeui-ajanlat-alcim { margin: 0 0 16px; font-size: 14px; color: var(--halvany); }

.buymeui-keszulek {
	display: block;
	height: 160px;
	background: var(--kremx);
	border-radius: 14px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
}

.buymeui-keszulek img { width: 100%; height: 100%; object-fit: contain; display: block; }

.buymeui-keszulek:empty::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 112px;
	border-radius: 12px;
	background: var(--ultramarin);
	opacity: .16;
}

.buymeui-arsor {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.buymeui-ar-regi { font-size: 15px; color: var(--halvany); text-decoration: line-through; }

.buymeui-ar {
	font-family: "Bricolage Grotesque", sans-serif;
	font-weight: 800;
	font-size: 30px;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.buymeui-spor {
	display: block;
	margin-top: 12px;
	background: var(--turkiz);
	color: #fff;
	border-radius: 12px;
	padding: 9px 14px;
	font-size: 14.5px;
	font-weight: 500;
}

@container (max-width: 900px) {
	.buymeui-hos-mezo { padding: 38px 26px; }
	.buymeui-hos-racs { gap: 30px; }
}

/* Biztos háló: a képernyő szélessége alapján is. */
@media (max-width: 900px) {
	.buymeui-hos-mezo { padding: 38px 26px; }
	.buymeui-hos-racs { gap: 30px; }
}

@media (max-width: 520px) {
	.buymeui { --oldal: 14px; --r: 20px; }
	.buymeui-hos-gombok .gomb, .buymeui-hos-gombok .gomb-vilagos { width: 100%; justify-content: center; }
}

/* Ár körüli információk a termékoldalon */
.bmp-price-regi {
	display: block;
	font-size: 15px;
	color: var(--muted);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
	margin-bottom: 2px;
}

.bmp-megtakaritas {
	display: inline-block;
	margin: 8px 0 0;
	padding: 5px 12px;
	background: var(--pick);
	color: #fff;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
}

.bmp-surgos {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #b3491c;
}

.bmp-surgos::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #b3491c;
	flex: none;
}

.bmp-szallitas {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--muted);
}

/* Beszámítás: a felvásárlás felé terel a vásárlás pillanatában */
.bmp-beszamitas {
	margin: 18px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--wash);
}

.bmp-besz-cim {
	margin: 0 0 5px;
	font-weight: 600;
	font-size: 15px;
}

.bmp-besz-szoveg {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.5;
	max-width: 44ch;
}

.bmp a.bmp-besz-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}

.bmp a.bmp-besz-link:hover { text-decoration: underline; }

/* ==========================================================
   Termékoldal, háromhasábos elrendezés.
   Kép, választók, vásárlódoboz. A vásárlódoboz görgetéskor
   is látszik, mert a döntés ott születik meg.
   ========================================================== */
.bmp {
	--valasztott: #3a4fd6;
	--valasztott-hat: #eef0fd;
}

/*
 * Nem csinálunk saját hasábokat.
 *
 * A WooCommerce termékoldala már eleve két hasábos: kép balra,
 * összefoglaló jobbra. A mi tartalmunk a jobb oldali hasábba kerül,
 * és abban még hasábokat nyitni összepréseli a szöveget.
 *
 * Helyette a vásárlódoboz kiemelt kártya a választók alatt, és
 * a képernyő alján is elérhető marad.
 */
.bmp-buy {
	margin-top: 26px;
}

/* A fejrész: márka, típus, összeállítás */
.bmp-head { margin-bottom: 22px; }
.bmp-name { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; }

.bmp-summary {
	font-size: 15px;
	color: var(--muted);
	margin-top: 4px;
}

/* Csoportcímek ikonnal */
.bmp-h {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
	letter-spacing: -.015em;
}

.bmp-h::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: currentColor;
	opacity: .55;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Az ikonok beágyazott rajzok, hogy ne kelljen külön fájl. */
[data-ikon="tarhely"] .bmp-h::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E");
}

[data-ikon="szin"] .bmp-h::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 000 18 4.5 4.5 0 000-9 4.5 4.5 0 010-9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 000 18 4.5 4.5 0 000-9 4.5 4.5 0 010-9z'/%3E%3C/svg%3E");
}

[data-ikon="allapot"] .bmp-h::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

[data-ikon="akku"] .bmp-h::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2' y='7' width='16' height='10' rx='2.5'/%3E%3Cpath d='M21 10.5v3'/%3E%3Cpath d='M5.5 10v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2' y='7' width='16' height='10' rx='2.5'/%3E%3Cpath d='M21 10.5v3'/%3E%3Cpath d='M5.5 10v4'/%3E%3C/svg%3E");
}

/* Választógombok */
.bmp .bmp-opt {
	position: relative;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	background: #fff;
	transition: border-color .12s ease, background .12s ease;
}

.bmp .bmp-opt:hover:not([disabled]) { border-color: #b9bec6; }

.bmp .bmp-opt.is-on {
	border-color: var(--valasztott);
	background: var(--valasztott-hat);
}

/* Pipa a kiválasztotton */
.bmp .bmp-opt.is-on::after {
	content: "";
	position: absolute;
	right: 9px;
	top: 9px;
	width: 15px;
	height: 15px;
	background: var(--valasztott);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Az elfogyott változat látszik, csak áthúzva. Így a vásárló tudja,
   hogy létezik, csak most nincs belőle. */
.bmp .bmp-opt[disabled] {
	background: var(--wash);
	border-color: var(--line);
	color: var(--muted);
	cursor: not-allowed;
	overflow: hidden;
}

.bmp .bmp-opt[disabled]::before {
	content: "";
	position: absolute;
	left: -10%;
	right: -10%;
	top: 50%;
	height: 1px;
	background: #c9ccd0;
	transform: rotate(-11deg);
}

/* Színválasztó készülékfotóval */
.bmp-opt-kep {
	display: block;
	width: 100%;
	height: 54px;
	margin-bottom: 7px;
	border-radius: 6px;
	background: var(--wash) center / contain no-repeat;
}

/* Vásárlódoboz */
.bmp-buy {
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: 20px;
	background: #fff;
}

.bmp-price-now {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.bmp .bmp-cart {
	width: 100%;
	margin-top: 16px;
	padding: 15px;
	border: 0;
	border-radius: 10px;
	background: var(--valasztott);
	color: #fff;
	font-size: 16.5px;
	font-weight: 600;
	cursor: pointer;
}

.bmp .bmp-cart:hover:not([disabled]) { background: #2c3fb4; }
.bmp .bmp-cart[disabled] { background: #c9ccd0; cursor: not-allowed; }

/* Az állapot magyarázata, jellemzőkkel */
.bmp-grade-note {
	margin-top: 12px;
	padding: 13px 15px;
	background: var(--wash);
	border-radius: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #43474c;
}

.bmp-jellemzok {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding: 0;
	list-style: none;
}

.bmp-jellemzo {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	background: #fff;
}

.bmp-jellemzo::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: var(--pick);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ==========================================================
   Tömörebb elrendezés.
   A csoportcímke a gombok mellé kerül, nem föléjük. Így
   feleannyi függőleges hely kell, és a gombok maradhatnak
   kényelmes méretűek.
   ========================================================== */
@media ( min-width: 620px ) {
	.bmp .bmp-block {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 6px 18px;
		align-items: start;
		margin-bottom: 18px;
		padding-bottom: 18px;
	}

	.bmp .bmp-block > .bmp-h,
	.bmp .bmp-block > .bmp-h-row {
		grid-column: 1;
		grid-row: 1;
		margin: 6px 0 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.bmp .bmp-block > .bmp-opts { grid-column: 2; grid-row: 1; margin-top: 0; }

	.bmp .bmp-block > .bmp-note,
	.bmp .bmp-block > .bmp-jellemzok {
		grid-column: 2;
		margin-top: 10px;
	}

	/* A magyarázó hivatkozás a címke alá kerül, nem a sor végére. */
	.bmp .bmp-h-row .bmp-info {
		font-size: 12.5px;
		text-align: left;
		padding: 0;
	}
}

/* Kisebb térköz és tömörebb gombok mindenhol */
.bmp .bmp-opts {
	grid-template-columns: repeat( auto-fill, minmax( 104px, 1fr ) );
	gap: 8px;
}

.bmp .bmp-opt {
	padding: 10px 12px;
	border-radius: 9px;
}

.bmp .bmp-opt-label { font-size: 14px; }
.bmp .bmp-opt-sub { font-size: 12px; margin-top: 1px; }

.bmp .bmp-opt.is-on::after { right: 7px; top: 7px; width: 13px; height: 13px; }

.bmp .bmp-h { font-size: 15.5px; }
.bmp .bmp-h::before { width: 17px; height: 17px; }

.bmp .bmp-note {
	padding: 10px 13px;
	font-size: 13.5px;
	line-height: 1.5;
}

.bmp .bmp-jellemzok { gap: 6px; margin-top: 10px; }

.bmp .bmp-jellemzo {
	padding: 5px 11px;
	font-size: 12.5px;
}

.bmp .bmp-jellemzo::before { width: 12px; height: 12px; }

.bmp-head { margin-bottom: 16px; }

.bmp .bmp-buy {
	margin-top: 18px;
	padding: 18px;
}

.bmp .bmp-cart { margin-top: 12px; padding: 13px; }

.bmp .bmp-beszamitas { margin-top: 14px; padding: 13px 15px; }
.bmp .bmp-besz-szoveg { font-size: 13.5px; margin-bottom: 8px; }
.bmp .bmp-szallitas { margin-top: 9px; font-size: 13.5px; }
.bmp .bmp-surgos { margin-top: 9px; }
.bmp .bmp-megtakaritas { margin-top: 7px; }

/* A színválasztó képe kisebb, hogy a gomb ne nőjön meg */
.bmp .bmp-opt-kep { height: 42px; margin-bottom: 6px; }

/* ==========================================================
   Ahol egyetlen változat van, ott nincs mit választani.
   Ilyenkor a nagy gomb félrevezető és helyet pazarol, ezért
   sima adatsorként jelenik meg.
   ========================================================== */
.bmp .bmp-opts:has( .bmp-opt:only-child ) {
	display: block;
}

.bmp .bmp-opts > .bmp-opt:only-child {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 6px 0 !important;
	cursor: default;
	display: flex !important;
	/* Az eredeti gomb oszlop irányú, itt viszont egy sorban akarjuk. */
	flex-direction: row !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	width: auto;
}

.bmp .bmp-opts > .bmp-opt:only-child::after { content: none !important; }
.bmp .bmp-opts > .bmp-opt:only-child .bmp-opt-label { font-size: 15px; }

.bmp .bmp-opts > .bmp-opt:only-child .bmp-opt-sub {
	margin-top: 0;
	font-size: 13px;
	color: var(--muted);
}

.bmp .bmp-opts > .bmp-opt:only-child .bmp-opt-kep {
	width: 34px;
	height: 34px;
	margin: 0;
	border-radius: 6px;
	flex: none;
}

/* Ha csak egy változat van, a blokk is szűkebb lehet */
@media ( min-width: 620px ) {
	.bmp .bmp-block:has( .bmp-opt:only-child ) {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.bmp .bmp-block:has( .bmp-opt:only-child ) > .bmp-h,
	.bmp .bmp-block:has( .bmp-opt:only-child ) > .bmp-h-row {
		margin-top: 4px;
	}

	/* A kép kövesse a görgetést, hogy a jobb oldal hosszánál is
	   maradjon vizuális horgony. */
	.woocommerce div.product div.images,
	.woocommerce-product-gallery {
		position: sticky;
		top: 24px;
	}
}

/* ==========================================================
   Tájékoztató szakasz a vásárlódoboz alatt.
   ========================================================== */
.bmp-tajekoztato {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min(280px, 100%), 1fr ) );
	gap: 16px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

/* Bal oldali kiemelés: a bevizsgálás felé terel */
.bmp a.bmp-promo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--wash);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: background .12s ease;
}

.bmp a.bmp-promo:hover { background: #eef0f3; }

.bmp-promo-ikon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--blue);
	position: relative;
}

.bmp-promo-ikon::after {
	content: "";
	position: absolute;
	inset: 10px;
	background: #fff;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.bmp-promo-szoveg { flex: 1 1 auto; min-width: 0; }
.bmp-promo-szoveg strong { display: block; font-size: 15px; margin-bottom: 2px; }
.bmp-promo-szoveg span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.bmp-promo-nyil { flex: none; color: var(--muted); font-size: 18px; }

/* Jobb oldali sorok */
.bmp-sorok {
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.bmp .bmp-sor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 15px 18px;
	background: #fff;
	border: 0;
	border-bottom: 1px solid var(--line);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.bmp .bmp-sor:last-child { border-bottom: 0; }
.bmp .bmp-sor:hover { background: var(--wash); }
.bmp .bmp-sor span { color: var(--muted); font-size: 20px; line-height: 1; }

/* ==========================================================
   Készletlista, a termékoldallal egységes megjelenéssel.
   Ugyanaz a kék kiemelés, ugyanazok a pipák és címkék.
   ========================================================== */
.bmb {
	--valasztott: #3a4fd6;
	--valasztott-hat: #eef0fd;
}

/* Szűrők: a kijelölt szűrő ugyanúgy kék, mint a termékoldalon */
.bmb .bmb-opcio {
	padding: 6px 8px;
	border-radius: 7px;
	margin: 0 -8px;
}

.bmb .bmb-opcio:hover:not(.is-ures) { background: var(--wash); }

.bmb .bmb-opcio:has( input:checked ) {
	background: var(--valasztott-hat);
	font-weight: 600;
}

.bmb .bmb-opcio:has( input:checked ) .bmb-opcio-db { color: var(--valasztott); }

.bmb .bmb-csoport legend {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Kártyák: ugyanaz a kerekítés és keret, mint a termékoldali gomboknál */
.bmb .bmb-kartya {
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 14px;
	transition: border-color .12s ease, transform .12s ease;
}

.bmb .bmb-kartya:hover {
	border-color: var(--valasztott);
	transform: translateY(-2px);
}

.bmb .bmb-kep {
	height: 150px;
	border-radius: 9px;
	margin-bottom: 12px;
}

/* Az állapotcímke a termékoldali stílust követi */
.bmb .bmb-fok {
	background: var(--valasztott-hat);
	border: 0;
	color: var(--valasztott);
	border-radius: 5px;
	padding: 3px 9px;
	font-size: 11px;
	letter-spacing: .04em;
}

.bmb .bmb-kartya h3 { font-size: 15px; margin-bottom: 2px; }
.bmb .bmb-valtozat { font-size: 12.5px; margin-bottom: 8px; }

/* A megtakarítás ugyanaz a zöld pirula, mint a termékoldalon */
.bmb .bmb-megtakaritas {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	background: var(--pick);
	color: #fff;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
}

.bmb .bmb-ar { font-size: 19px; margin-bottom: 10px; }

.bmb a.bmb-gomb {
	border: 0;
	border-radius: 9px;
	background: var(--valasztott);
	color: #fff;
	padding: 11px;
	font-size: 14.5px;
	font-weight: 600;
}

.bmb a.bmb-gomb:hover { background: #2c3fb4; }

/* Sürgetés a kártyán, ha utolsó darab */
.bmb-utolso {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #b3491c;
}

.bmb-utolso::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b3491c;
	flex: none;
}

/* Fejléc és rendezés */
.bmb-fejlec { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bmb-szam { font-weight: 500; color: var(--ink); }

/* ==========================================================
   Kosár és pénztár.
   A WooCommerce kétféleképpen rajzolja ezeket: a régi
   rövidkódos módon és az újabb blokkosan. Mindkettőt
   címezzük, mert nem tudjuk előre, melyik fut.
   ========================================================== */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.cart_totals,
.checkout-button {
	--valasztott: #3a4fd6;
	--valasztott-hat: #eef0fd;
	--bm-line: #e1e4e8;
	--bm-wash: #f7f8f9;
}

/* Elsődleges gombok: ugyanaz a kék, mint a boltban */
/* A gombot közvetlenül is címezzük, mert az oldalosztály
   témánként eltérhet, és akkor a szabály nem érne el hozzá. */
.checkout-button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--valasztott) !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 15px 28px !important;
	font-size: 16.5px !important;
	font-weight: 600 !important;
	color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.checkout-button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: #2c3fb4 !important;
}

/*
 * Beviteli mezők.
 *
 * A régi pénztár mezői fölött külön címke áll, ott a belső margó
 * szabadon állítható. A blokkos pénztár viszont lebegő címkét használ:
 * a felirat a mezőn belül ül, és felcsúszik, amikor a vásárló beír
 * valamit. Ha ott elvesszük a felső helyet, a címke rácsúszik az
 * értékre. Ezért a két esetet külön kezeljük.
 */
/*
 * Csak a régi pénztár mezői.
 *
 * A .form-row burkoló kizárólag a régi szerkezetben létezik, a
 * blokkosban nincs. Enélkül a szabály a blokkos mezőkre is ráillene,
 * mert az oldal ugyanazt az osztályt viseli, és elvenné a helyet
 * a lebegő címke elől.
 */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select {
	border: 1px solid var(--bm-line) !important;
	border-radius: 9px !important;
	padding: 12px 14px !important;
	font-size: 16px !important;
	box-shadow: none !important;
	background: #fff !important;
}

/* Blokkos pénztár: a belső margóhoz nem nyúlunk, csak a kerethez. */
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-select__container {
	border-color: var(--bm-line) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	background: #fff !important;
}

.woocommerce-checkout .form-row .input-text:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--valasztott) !important;
	box-shadow: 0 0 0 3px rgba(58, 79, 214, .14) !important;
	outline: none !important;
}

/* A lebegő címke színe kövesse a boltot, de a helyét ne bántsuk. */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
	color: #6b7076 !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
	color: var(--valasztott) !important;
}

/* Összegző doboz: kiemelt kártya, mint a termékoldali vásárlódoboz */
.cart_totals,
.woocommerce-checkout-review-order,
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1.5px solid var(--bm-line) !important;
	border-radius: 14px !important;
	padding: 20px !important;
	background: #fff !important;
}

.cart_totals h2,
.woocommerce-checkout-review-order h3 {
	font-size: 18px;
	letter-spacing: -.02em;
	margin-bottom: 12px;
}

/* A végösszeg legyen a legnagyobb szám a képernyőn */
.order-total .amount,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-size: 24px !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
}

/* Terméksorok a kosárban */
.woocommerce-cart-form table.cart th,
.woocommerce-cart-form table.cart td {
	border-color: var(--bm-line) !important;
	padding: 14px 12px !important;
}

.woocommerce-cart-form table.cart img,
.wc-block-cart-item__image img {
	border-radius: 8px;
	max-width: 74px;
}

/* Bizalmi sáv a pénztár alján. A fizetés előtti pillanat a
   legérzékenyebb, ott jólesik az emlékeztető. */
.buyme-penztar-bizalom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 20px 0 0;
	padding: 16px 18px;
	background: var(--bm-wash);
	border-radius: 12px;
	list-style: none;
}

.buyme-penztar-bizalom li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #43474c;
}

.buyme-penztar-bizalom li::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: #1c6b4a;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Üres kosár: ne zsákutca legyen */
.cart-empty,
.wc-block-cart__empty-cart__title {
	font-size: 20px !important;
	font-weight: 600;
}

.buyme-ures-kosar {
	margin: 16px 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.buyme-ures-kosar a {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.buyme-ures-kosar a.elsodleges { background: var(--valasztott); color: #fff; }
.buyme-ures-kosar a.elsodleges:hover { background: #2c3fb4; }

.buyme-ures-kosar a.masodlagos {
	background: #fff;
	color: #14171a;
	box-shadow: inset 0 0 0 1.5px var(--bm-line);
}

.buyme-ures-kosar a.masodlagos:hover { box-shadow: inset 0 0 0 1.5px var(--valasztott); }

/* Tények a kártyán: garancia, szállítás, részlet, megtakarítás */
.bmb .bmb-tenyek {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 5px;
}

.bmb .bmb-teny {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: #4b5057;
}

.bmb .bmb-teny::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 1px;
	background: #8b9099;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.bmb .bmb-teny-garancia::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.bmb .bmb-teny-szallitas::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='1.5' y='6' width='13' height='10' rx='1.5'/%3E%3Cpath d='M14.5 9.5h4l3 3v3.5h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='1.5' y='6' width='13' height='10' rx='1.5'/%3E%3Cpath d='M14.5 9.5h4l3 3v3.5h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='17.5' cy='18' r='1.8'/%3E%3C/svg%3E");
}

.bmb .bmb-teny-reszlet::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='2' y='5.5' width='20' height='13' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='2' y='5.5' width='20' height='13' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

/* A megtakarítás kiemelt: ez a legerősebb érv */
.bmb .bmb-teny-megtakaritas {
	color: #1c6b4a;
	font-weight: 600;
}

.bmb .bmb-teny-megtakaritas::before {
	background: #1c6b4a;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 15.5l7-7'/%3E%3Ccircle cx='9.5' cy='9.5' r='1.3'/%3E%3Ccircle cx='14.5' cy='14.5' r='1.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 15.5l7-7'/%3E%3Ccircle cx='9.5' cy='9.5' r='1.3'/%3E%3Ccircle cx='14.5' cy='14.5' r='1.3'/%3E%3C/svg%3E");
}

/* A régi pirulás megtakarítás helyett most soros, ezért elrejtjük */
.bmb .bmb-megtakaritas:not(.bmb-teny) { display: none; }

/* A tények miatt szélesebb kártya kell, különben szavanként tördel */
.bmb .bmb-racs {
	grid-template-columns: repeat( auto-fill, minmax( min(250px, 100%), 1fr ) ) !important;
}

@media ( max-width: 640px ) {
	.bmb .bmb-racs {
		grid-template-columns: repeat( auto-fill, minmax( min(160px, 100%), 1fr ) ) !important;
	}

	/* Szűk kártyán a hosszú sorok elmaradnak, csak a lényeg marad */
	.bmb .bmb-teny-szallitas,
	.bmb .bmb-teny-reszlet { display: none; }
}

/* Kapcsolódó termékek a termékoldal alján */
.bmb-kapcsolodo {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.bmb-kapcs-cim {
	font-size: 22px;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

/* A kapcsolódó szakaszban nincs oldalsáv, a rács a teljes szélességet
   használja. */
.bmb-kapcsolodo .bmb-racs {
	grid-template-columns: repeat( auto-fill, minmax( min(230px, 100%), 1fr ) ) !important;
}