/*
 * MaD Zero – Webshop kit: WooCommerce-stílusréteg.
 * Csak Woo mellett töltődik (kits/shop/shop.php enqueue-olja).
 *
 * Letisztult, lapos woo-stílus: elrendezés/levegő/hierarchia + EGY akciószín
 * (primary) a gombokon. Minden szín/betű/radius a téma tokenjeiből — a kit
 * projektenként a Global Styles-szal skinezhető, itt nyers érték nincs.
 * A blokk-szelektorok mellett a klasszikus woo-szelektorok is szerepelnek
 * (galéria, my account, e-mailes nézetek még klasszikus markupot adnak).
 */

/* --- Közös block-gap a woo blokk-oldalakon --- */
.woocommerce-page .wp-block-group.has-global-padding,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wp--style--block-gap: var(--wp--preset--spacing--v-s);
}

/* ============ 1. TERMÉKKÁRTYA (archive + related products) ============ */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template,
.wp-block-woocommerce-product-template,
.wc-block-product-template,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--v-m) var(--wp--preset--spacing--h-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A klasszikus woocommerce.css clearfix-pszeudói (.woocommerce ul.products::before/::after)
   a grid-konténerben grid-itemmé válnának → üres első cella, elcsúszott sorok. Ki velük. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none;
}

/* egy-egy termékkártya
   (a .woocommerce…[class*=columns-] variáns kell is: a woocommerce.css ennyi
   specificitással teszi rá a width:22.05% + float:left-et — anélkül vékony csík) */
.wp-block-woocommerce-product-template .wc-block-product,
.wp-block-woocommerce-product-template li.product,
.wc-block-product-template .wc-block-product,
.woocommerce ul.products[class*="columns-"] li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--v-s);
	margin: 0;
	padding: var(--wp--preset--spacing--v-s);
	background: var(--wp--preset--color--bcg-light);
	border-radius: var(--wp--custom--radius--s);
	text-align: center;
	list-style: none;
	width: auto;  /* a Woo alap li.product{width:22.05%} kioltása a gridben (különben vékony csík) */
	float: none;
}

/* kártya-kép felül */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image,
ul.products li.product a img {
	border-radius: var(--wp--custom--radius--s);
	overflow: hidden;
	margin: 0 0 var(--wp--preset--spacing--v-s) 0;
}

/* név bold */
.wc-block-product .wp-block-post-title,
.wc-block-product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-weight: 700;
	margin: 0;
}

/* ár bold + primary */
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .price,
ul.products li.product .price {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-top: auto;
}

/* "Kosárba" / "Opciók választása" gomb a kártyán: teljes szélességű
   (variálható terméknél a loop-gomb osztálya csak `button product_type_variable`,
   add_to_cart_button nincs rajta → az általános a.button kell) */
.wp-block-woocommerce-product-button .wp-block-button__link,
ul.products li.product .button.add_to_cart_button,
ul.products li.product a.button {
	display: block;
	width: 100%;
	box-sizing: border-box; /* width:100% + gomb-padding content-boxként túllógna a kártyán */
}

/* A klasszikus loopban a kép+cím+ár egy <a>-ban ül, a gomb a li közvetlen
   flex-gyereke → a margin-top:auto a gombot a kártya aljára tolja, így
   eltérő cím-hossznál is egy vonalban ülnek a gombok.
   (A .woocommerce-es variáns kell: a woocommerce.css margin-top:1em-je
   (0,4,2) specificitással jön — anélkül az auto alulmarad.) */
.woocommerce ul.products li.product > .button,
ul.products li.product > .button {
	margin-top: auto;
}

/* ============ 2. SINGLE PRODUCT (termékoldal) ============ */
/* breadcrumb: kisbetűs, halvány */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 0.85rem;
	text-transform: lowercase;
	color: var(--wp--preset--color--separator);
	margin-bottom: var(--wp--preset--spacing--v-s);
}
.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a { color: var(--wp--preset--color--txt-dark); opacity: 0.6; }

/* galéria-kép radius a tokenből */
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery img {
	border-radius: var(--wp--custom--radius--s);
}

/* ár nagy + bold */
.wp-block-woocommerce-product-price,
.single-product .summary .price {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.wp-block-woocommerce-product-price del,
.single-product .summary .price del {
	color: var(--wp--preset--color--separator);
	font-weight: 400;
	opacity: 0.7;
}

/* galéria: töltse ki az oszlopát (ne maradjon üres sáv a szöveg előtt) */
.wp-block-woocommerce-product-image-gallery,
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	width: 100%;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

/* vásárlás-sor: stepper + Kosárba gomb egy sorban (a régi oldal mintája) */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--v-s);
}
.single-product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
/* variable terméknél a variáció-tábla teljes sort kapjon */
.single-product form.cart table.variations,
.single-product form.cart .single_variation_wrap { flex-basis: 100%; }
.single-product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
}
.single-product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; }

/* add-to-cart gomb: sötét, uppercase (a generikus primary-gomb felülírása) */
.single_add_to_cart_button,
.wc-block-components-button.wc-block-cart__submit-button {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.9em 1.5em;
	background: var(--wp--preset--color--txt-dark);
	color: var(--wp--preset--color--txt-light);
	border-color: var(--wp--preset--color--txt-dark);
}
.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--txt-muted);
	border-color: var(--wp--preset--color--txt-muted);
	color: var(--wp--preset--color--txt-light);
	filter: none;
}

/* mennyiség-stepper: a Woo add-to-cart-form blokk SAJÁT −/+ gombjait
   öltöztetjük (wc-block-components-quantity-selector) — sötét kockák */
.quantity.wc-block-components-quantity-selector {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: 0; /* a Woo alap 4px lekerekítésének kioltása (éles sarkok a márkában) */
	overflow: hidden;
	width: auto; /* a Woo fix 107px helyett a tartalomhoz */
}
.quantity .wc-block-components-quantity-selector__button {
	width: 2.5rem;
	border: none;
	border-radius: 0;
	background: var(--wp--preset--color--primary); /* fekete, mint a régin (a txt-dark #333 szürkének hatott) */
	color: var(--wp--preset--color--txt-light);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s ease;
}
.quantity .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--txt-muted);
}
.quantity input.qty {
	width: 3.25rem;
	border: none;
	border-radius: 0;
	background: var(--wp--preset--color--page-bcg);
	padding: 0.5em 0.25em;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* product-meta: halvány, separator felső szegély */
.wp-block-woocommerce-product-meta,
.single-product .product_meta {
	margin-top: var(--wp--preset--spacing--v-s);
	padding-top: var(--wp--preset--spacing--v-s);
	border-top: 1px solid var(--wp--preset--color--separator);
	font-size: 0.9rem;
	color: var(--wp--preset--color--separator);
}
.wp-block-woocommerce-product-meta a,
.single-product .product_meta a { color: var(--wp--preset--color--txt-dark); }

/* termékgaléria: thumbnailek ne csússzanak össze */
.woocommerce-product-gallery { max-width: 100%; }
.woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.woocommerce-product-gallery .flex-control-thumbs li { float: none; width: calc(25% - 8px); margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: auto; opacity: .55; cursor: pointer; transition: opacity .2s; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }

/* ============ 2/b. TERMÉK-ADATLAP LENYÍLÓK ([snv_termek_adatlap]) ============ */
/* A lenyíló-mechanika (panel-váz, +/− jelző, <details>-marker) a GLOBÁLIS
   panel-primitívumból jön: style.css → PANEL / ACCORDION (.snv-adatlap__panel
   ott a három fogyasztó egyike). Itt csak az adatlap-SPECIFIKUS keret marad:
   a szekció-margó, a cím és a tartalmi lista formázása. */
.snv-adatlap {
	margin-top: var(--wp--preset--spacing--v-m);
}
.snv-adatlap__cim {
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--v-s);
}
.snv-adatlap__tartalom ul { margin: 0 0 0 1.1em; padding: 0; }
.snv-adatlap__tartalom li { margin-bottom: 0.5em; }
.snv-adatlap__linkek { list-style: none; margin-left: 0 !important; }

/* B2B ár-kapu (vendég): két sor az ár helyén */
.snv-price-gate {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--txt-dark);
}
.snv-price-gate a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.snv-price-gate .snv-price-gate__masodik {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--txt-muted);
}

/* ============ 3. KOSÁR (cart) ============ */
.wp-block-woocommerce-cart .wc-block-cart-items,
.woocommerce-cart table.cart {
	border-collapse: collapse;
}
.wp-block-woocommerce-cart .wc-block-cart-items td,
.wp-block-woocommerce-cart .wc-block-cart-items th,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	padding: var(--wp--preset--spacing--v-s);
	border-bottom: 1px solid var(--wp--preset--color--separator);
}

/* összegző oldalsáv: keretes panel */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar,
.woocommerce-cart .cart_totals {
	background: var(--wp--preset--color--bcg-light);
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: var(--wp--custom--radius--s);
	padding: var(--wp--preset--spacing--v-m);
}

/* mini-cart gomb (fejlécben) */
.wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: var(--wp--custom--radius--s);
	padding: 0.5rem 0.9rem;
}
.wc-block-mini-cart__amount { font-weight: 700; }

/* ============ 4. PÉNZTÁR (checkout) ============ */
/* input-mezők: lapos, halvány háttér, separator border */
.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	background: var(--wp--preset--color--bcg-light);
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: var(--wp--custom--radius--s);
	padding: 0.75em 1em;
}
.wc-block-components-text-input input:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

/* rendelés-összegző oldalsáv: keretes panel */
.wc-block-checkout__sidebar,
.woocommerce-checkout #order_review {
	background: var(--wp--preset--color--bcg-light);
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: var(--wp--custom--radius--s);
	padding: var(--wp--preset--spacing--v-m);
}

/* Megrendelés gomb: széles */
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order {
	width: 100%;
	text-transform: uppercase;
	padding: 0.9em 1.5em;
}

/* ============ 5. FIÓKOM (my account) ============ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--separator);
	border-radius: var(--wp--custom--radius--s);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.85em 1.25em;
	color: var(--wp--preset--color--txt-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--separator);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--txt-light);
	font-weight: 700;
	border-left: 4px solid var(--wp--preset--color--txt-light);
}
.woocommerce-account .woocommerce-MyAccount-content {
	padding-left: var(--wp--preset--spacing--h-s);
}

/* ============ 6. ÁLTALÁNOS WOO-GOMBOK ============ */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.wc-block-components-button,
.added_to_cart,
.wp-block-woocommerce-product-button .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--txt-light); /* primary=#000 fekete → fehér szöveg */
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--s);
	padding: 0.7em 1.4em;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover,
.added_to_cart:hover,
.wp-block-woocommerce-product-button .wp-block-button__link:hover {
	filter: brightness(0.95);
	color: var(--wp--preset--color--txt-light);
}

/* "Kupon beváltása" = outline (átlátszó háttér + primary szegély/szöveg) */
.wc-block-components-totals-coupon__button,
.woocommerce-cart .coupon button.button {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
}
.wc-block-components-totals-coupon__button:hover,
.woocommerce-cart .coupon button.button:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--txt-light);
	filter: none;
}

/* ============ WOO 1000px-ES CAP KI ============ */
/* A woocommerce-blocktheme.css 1000px-re szorítja a kosár/pénztár/fiókom
   konténerét és címét — helyette a téma wide-sávja. A body-prefix a
   specificitás miatt kell (betöltési sorrendtől függetlenül nyerjen). */
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout main .woocommerce,
body.woocommerce-account main .woocommerce,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-account .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size, var(--wp--style--global--content-size, 1400px));
	margin-inline: auto;
}

/* ============ TÚLCSÚSZÁS-GÁT + CONSTRAINED SÁV ============ */
/* pl. Fiókom a page.html nem-constrained main-jén */
.woocommerce, .woocommerce-page, .wc-block-components-sidebar-layout { max-width: 100%; box-sizing: border-box; }
.woocommerce img, .wc-block-components-product-image img { max-width: 100%; height: auto; }
.woocommerce table.shop_table { max-width: 100%; }
.woocommerce-account .woocommerce {
	max-width: var(--wp--style--global--content-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--h-s);
	box-sizing: border-box;
}

/* ============ RESZPONZÍV (layout-MQ, nem token-felülírás) ============ */
@media (max-width: 998px) {
	/* termékrács 2 oszlopra */
	.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template,
	.wp-block-woocommerce-product-template,
	.wc-block-product-template,
	ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--v-s) var(--wp--preset--spacing--h-s);
	}

	/* single product: két oszlop egymás alá (a core 781px-nél váltana, ez tablet-barátabb) */
	.single-product .wp-block-columns {
		flex-direction: column;
	}
	.single-product .wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
	}

	/* kosár/pénztár oldalsáv a tartalom alá */
	.wp-block-woocommerce-cart .wc-block-cart,
	.wp-block-woocommerce-checkout .wc-block-checkout {
		flex-direction: column;
	}
	.wc-block-cart__sidebar,
	.wc-block-checkout__sidebar {
		width: 100%;
		max-width: 100%;
	}

	/* fiókom: menü a tartalom fölé, tartalom-padding nullázva */
	.woocommerce-account .woocommerce-MyAccount-content {
		padding-left: 0;
		margin-top: var(--wp--preset--spacing--v-s);
	}
}

/* ============ 7. KLASSZIKUS KOSÁR/PÉNZTÁR ELRENDEZÉS ============ */
/* Hibrid téma: a kosár/pénztár KLASSZIKUS shortcode (Barion + átvevőpont-
   választó miatt) — a fenti blokk-szelektorok ezt nem fogják meg. A .woocommerce
   középre-igazítását a fenti 1000px-cap szakasz adja; itt a BELSŐ elrendezés. */

/* -- KOSÁR: teljes szélességű tábla, összegző jobbra -- */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart table.cart {
	width: 100%;
}
.woocommerce-cart .cart-collaterals {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--v-m);
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: 48%;
	min-width: 340px;
}

/* kosár mennyiség-mező: rendezett, középre igazított szám */
.woocommerce-cart td.product-quantity .quantity input.qty {
	width: 4rem;
	text-align: center;
	padding: 0.5em 0.25em;
	background: var(--wp--preset--color--page-bcg);
	border: 1px solid var(--wp--preset--color--separator);
}

/* kosár akció-gombok FEKETE (Kosár frissítése + Tovább a pénztárhoz) */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--wp--preset--color--txt-dark);
	color: var(--wp--preset--color--txt-light);
	border-color: var(--wp--preset--color--txt-dark);
}
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--wp--preset--color--txt-muted);
	border-color: var(--wp--preset--color--txt-muted);
	color: var(--wp--preset--color--txt-light);
	filter: none;
}

/* -- PÉNZTÁR: két oszlop CSS Grid-del (determinisztikus, float helyett) --
   BAL: számlázás + szállítás egymás alatt · JOBB: fejléc + rendelés-összegző */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"billing review-heading"
		"billing review";
	column-gap: var(--wp--preset--spacing--h-m);
	align-items: start;
}
.woocommerce-checkout #customer_details { grid-area: billing; min-width: 0; }
.woocommerce-checkout #order_review_heading { grid-area: review-heading; margin-top: 0; }
.woocommerce-checkout #order_review { grid-area: review; min-width: 0; }
/* a col2-set belső oszlopai egymás alá (számlázás fölött, szállítás alatta) */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--wp--preset--spacing--v-s);
}
/* rejtett input-ok / hook-maradékok ne bontsák a gridet */
.woocommerce-checkout form.checkout > input[type="hidden"] { display: none; }

/* -- klasszikus reszponzív: egy oszlop mobilon -- */
@media (max-width: 998px) {
	/* pénztár: egy oszlopba (számlázás → szállítás → összegző) */
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"billing"
			"review-heading"
			"review";
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		width: 100%;
		min-width: 0;
	}
}