/**
 * Egyedi Fotós Ajándékok – bolt kiegészítők (Flatsome témához).
 *
 * 1. Flatsome ↔ WooCommerce 11 kompatibilitás: a Woo blokk-CSS `display:grid`-et
 *    ad a `.products.row`-nak, a Flatsome viszont flexbox-rácsot használ.
 *    Ütközéskor a kártyák pár pixelre nyomódnak és a képek eltűnnek.
 * 2. Üres kategória / találat nélküli lista üzenete.
 */
:root {
	--shop-brand: #11519B;
	--shop-brand-dark: #0D4380;
	--shop-brand-soft: #EAF1FA;
	--shop-ink: #16161D;
	--shop-muted: #6B7280;
	--shop-faint: #9CA3AF;
	--shop-line: #E8E8EC;
	--shop-radius: 10px;
	--shop-shadow: 0 1px 2px rgba(22, 22, 29, .04), 0 4px 16px rgba(22, 22, 29, .06);
	--shop-shadow-hover: 0 8px 28px rgba(22, 22, 29, .10);
}

/* =========================================================================
   FLATSOME ↔ WOOCOMMERCE RÁCS-KOMPATIBILITÁS
   A Woo blokk-CSS `display:grid`-et ad a .products.row-nak; a Flatsome
   flexbox-rácsot vár. Ütközéskor a kártyák 4px-re nyomódnak, a képek eltűnnek.
   ========================================================================= */

.woocommerce .products.row,
.products.row,
ul.products.row,
.woocommerce-page .products.row,
.row.category-row,
.related .products.row,
.upsells .products.row {
	display: flex !important;
	flex-flow: row wrap !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

.products.row > .col,
.row.category-row > .col {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	grid-column: auto !important;
	grid-row: auto !important;
	float: none !important;
}

/* Oszlopszám a Flatsome saját osztályai szerint */
.row.large-columns-6 > .col { flex-basis: 16.666%; max-width: 16.666% !important; }
.row.large-columns-5 > .col { flex-basis: 20%;     max-width: 20% !important; }
.row.large-columns-4 > .col { flex-basis: 25%;     max-width: 25% !important; }
.row.large-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333% !important; }
.row.large-columns-2 > .col { flex-basis: 50%;     max-width: 50% !important; }
.row.large-columns-1 > .col { flex-basis: 100%;    max-width: 100% !important; }

@media (max-width: 849px) {
	.row.medium-columns-4 > .col { flex-basis: 25%;     max-width: 25% !important; }
	.row.medium-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333% !important; }
	.row.medium-columns-2 > .col { flex-basis: 50%;     max-width: 50% !important; }
	.row.medium-columns-1 > .col { flex-basis: 100%;    max-width: 100% !important; }
}

@media (max-width: 549px) {
	.row.small-columns-3 > .col { flex-basis: 33.333%; max-width: 33.333% !important; }
	.row.small-columns-2 > .col { flex-basis: 50%;     max-width: 50% !important; }
	.row.small-columns-1 > .col { flex-basis: 100%;    max-width: 100% !important; }
}

.products.row .col-inner,
.products.row .product-small.box,
.products.row .box-image {
	width: auto !important;
	max-width: none !important;
}

.products.row .box-image {
	display: block !important;
}

.products.row .box-image img,
.row.category-row .box-image img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	display: block;
}

/* --- legördülők: ne vágódjanak el --- */

.woocommerce-ordering select,
.woocommerce select.orderby,
form.woocommerce-ordering select {
	height: auto !important;
	min-height: 44px;
	line-height: 1.4 !important;
	padding: 10px 34px 10px 14px !important;
	max-width: 100%;
}

.woocommerce-ordering,
.woocommerce .woocommerce-ordering {
	overflow: visible;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	height: auto !important;
	min-height: 44px;
	line-height: 1.4 !important;
}

/* --- mennyiség: csak EGY léptető pár --- */

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}

.quantity input[type="number"] {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

.quantity .minus ~ .minus,
.quantity .plus ~ .plus,
.quantity button.minus + button.minus,
.quantity button.plus + button.plus {
	display: none !important;
}



/* =========================================================================
   13. ÜRES KATEGÓRIA / NINCS TALÁLAT
   ========================================================================= */

.shop-ui-empty {
	text-align: center;
	padding: 48px 24px;
	background: #fff;
	border: 1px solid var(--shop-line);
	border-radius: var(--shop-radius);
	box-shadow: var(--shop-shadow);
	margin: 8px 0 32px;
}

.shop-ui-empty-icon {
	display: block;
	font-size: 44px;
	margin-bottom: 12px;
	opacity: .5;
}

.shop-ui-empty h2 {
	margin: 0 0 10px;
	font-size: clamp(19px, 2.4vw, 24px);
	font-weight: 700;
	color: var(--shop-ink);
	letter-spacing: -0.01em;
}

.shop-ui-empty p {
	margin: 0 auto 6px;
	max-width: 560px;
	color: var(--shop-muted);
	font-size: 15.5px;
	line-height: 1.65;
}

.shop-ui-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-top: 22px !important;
}

.shop-ui-empty-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 12px 26px;
	border-radius: 10px;
	background: var(--shop-brand);
	color: #fff !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	transition: background-color .2s ease, transform .2s ease;
}

.shop-ui-empty-button:hover {
	background: var(--shop-brand-dark);
	transform: translateY(-2px);
}

.shop-ui-empty-link {
	color: var(--shop-brand) !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
}

.shop-ui-empty-suggest {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--shop-line);
}

.shop-ui-empty-suggest span {
	display: block;
	margin-bottom: 10px;
	font-size: 13.5px;
	color: var(--shop-faint);
}

.shop-ui-empty-suggest ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-ui-empty-suggest li a {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid var(--shop-line);
	border-radius: 999px;
	background: #fff;
	color: var(--shop-ink) !important;
	font-size: 13.5px;
	text-decoration: none !important;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.shop-ui-empty-suggest li a:hover {
	border-color: #D9D4FA;
	background: var(--shop-brand-soft);
	color: var(--shop-brand) !important;
}

@media (max-width: 640px) {
	.shop-ui-empty {
		padding: 34px 18px;
	}

	.shop-ui-empty-actions {
		flex-direction: column;
		gap: 10px;
	}

	.shop-ui-empty-button {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------
   Legördülő mezők (variáció-választók, pénztár)
   ------------------------------------------------------------------
   A Flatsome fix magasságú `select`-je levágja a hosszabb opciókat
   (pl. „Narancssárga – XXL”), és elrejti a natív nyilat. Adunk neki
   valódi belmagasságot, helyet a nyílnak, és engedjük a tördelést. */
.woocommerce select,
.woocommerce-page select,
select.form-control,
table.variations select,
.variations select {
	height: auto !important;
	min-height: 44px;
	padding: 10px 38px 10px 14px !important;
	line-height: 1.4 !important;
	text-overflow: ellipsis;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* A natív legördülő lista maga sose legyen levágva */
.variations,
.variations td,
.variations_form,
.product-info,
.product-main {
	overflow: visible !important;
}

@media (max-width: 549px) {
	.woocommerce select,
	.woocommerce-page select,
	table.variations select {
		font-size: 16px !important; /* iOS: 16px alatt ráközelít a mezőre */
	}
}

/* ------------------------------------------------------------------
   Szöveges logó (nincs képes logó, a bolt neve jelenik meg)
   ------------------------------------------------------------------
   A Flatsome alap 32px/32px mérete mellett az „Egyedi Fotós Ajándékok”
   három sorba tört (96px), a fejléc viszont csak 76px magas – így az
   utolsó sor levágódott. Kisebb betűvel két sorba fér (~48px). */
#logo a,
.header-logo a {
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

@media (max-width: 849px) {
	#logo a,
	.header-logo a {
		font-size: 17px;
		line-height: 1.12;
	}
}

/* ------------------------------------------------------------------
   Blokkos pénztár: ország mező elrejtése
   ------------------------------------------------------------------
   Kizárólag Magyarországra értékesítünk (woocommerce_allowed_countries =
   HU), így az egyelemű ország-választó csak zavar. A mező értéke (HU)
   megmarad, csak nem látszik – a rendelés adata hiánytalan.
   A megye mezőt nem itt, hanem a `woocommerce_get_country_locale` szűrőn
   kapcsoljuk ki (Shop_UI_Checkout), mert azt a Store API is olvassa.

   FONTOS: a blokkos pénztár mezőit egyébként NEM stilizáljuk – a saját
   lebegő feliratuk ráúszik az értékre, ha belső margót adunk nekik. */
.wc-block-components-address-form__country,
.wc-block-components-address-form .wc-block-components-country-input {
	display: none !important;
}

/* ------------------------------------------------------------------
   Kategória-fejléc: találatszám
   ------------------------------------------------------------------
   A Flatsome a rendezés-legördülő mellé teszi a találatszámot, de a
   „featured” címstílusnál elrejti. A vásárlónak hasznos tudni, hány
   terméket lát, ezért visszahozzuk. */
.shop-page-title .woocommerce-result-count,
.page-title-inner .woocommerce-result-count {
	display: block !important;
	margin: 0 18px 0 0;
	font-size: 0.9em;
	opacity: 0.9;
}

@media (max-width: 849px) {
	.shop-page-title .woocommerce-result-count,
	.page-title-inner .woocommerce-result-count {
		margin: 0 0 8px;
	}
}