/* ============================================================
 * Dlaždice podkategórií – „i" info bublina + súvisiace kategórie
 * electro-child / inc/category-cards.php
 * Bez JS. Bublina = čistý CSS (:hover + :focus pre mobil/tablet).
 * ============================================================ */

/* Karta = kotva pre absolútne prvky (kvôli „i" badge) */
.product-loop-categories li.product-category { position: relative; }

/* Electro kreslí .product-category::after ako zvislý oddeľovač (border-right #ddd,
   position:absolute). Bol neviditeľný, kým dlaždica nebola position:relative; naše
   position:relative ho „prichytilo" ku každej dlaždici → sivá šmuha vpravo.
   Pôvodne sa nezobrazoval, takže ho vypneme. */
.product-loop-categories .product-category::after { display: none !important; }

/* Iba karty s bublinou povolia presah (aby sa bublina neorezala) */
.product-loop-categories li.product-category:has(.gk-cat-tip) { overflow: visible; }

/* „i" badge */
.gk-cat-info {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2756A0;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	cursor: help;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
	-webkit-appearance: none;
	appearance: none;
	transition: transform .12s ease, background-color .12s ease;
}
.gk-cat-info > span { pointer-events: none; }
.gk-cat-info:hover { background: #1F4A9B; transform: scale(1.08); }
.gk-cat-info:focus { outline: 2px solid #1F4A9B; outline-offset: 2px; }
.gk-cat-info:focus:not(:focus-visible) { outline: none; }

/* Bublina */
.gk-cat-tip {
	position: absolute;
	top: 36px;
	right: 6px;
	z-index: 7;
	width: max-content;
	max-width: 230px;
	padding: 8px 11px;
	background: #1f2937;
	color: #fff;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	pointer-events: none;
}
.gk-cat-tip::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 13px;
	border: 5px solid transparent;
	border-top: 0;
	border-bottom-color: #1f2937;
}

/* Zobrazenie bubliny: hover badge, fokus badge (mobil/tab), alebo hover bubliny */
.gk-cat-info:hover ~ .gk-cat-tip,
.gk-cat-info:focus ~ .gk-cat-tip,
.gk-cat-tip:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* Na úzkych kartách drž bublinu v rozumnej šírke */
@media (max-width: 575px) {
	.gk-cat-tip { max-width: min(230px, 72vw); }
}

/* Samostatná sekcia na listových kategóriách – rovnaký vzhľad ako natívna.
   (žiadne extra štýly nepotrebné; necháme dediť .section-product-categories) */
.gk-related-categories { /* placeholder pre prípadné doladenie odsadenia */ }

/* Dlaždice ZNAČIEK: logo je široké (napr. 250×52) — kategórie majú img max 64×64,
   čo by logo stlačilo na ~64px. Prebijeme max-width aj max-height, aby logo bolo
   čitateľné a zarovnané vľavo (rovnaký ľavý margin ako foto kategórií). */
.product-loop-categories li.gk-card-brand img {
	max-width: 100px !important;
	max-height: 50px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	margin: 10px 12px 10px 2px !important;
}