/*
 Theme Name:   Hello Elementor Child - Kultowe Lampy
 Theme URI:    https://kultowelampy.pl
 Description:  Child theme dla Hello Elementor - lekka, customowa strona główna
               (bez silnika Elementora dla front-page i kart produktu)
 Author:       Kultowe Lampy
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* Style dopisuj poniżej - będą ładowane PO stylach motywu nadrzędnego,
   więc mogą nadpisywać jego style jeśli zajdzie taka potrzeba. */

/* ==========================================================================
   0. ZMIENNE / PODSTAWY
   Font i kolory zgodne z Twoim istniejącym Dodatkowe CSS w Elementorze
   (font 'Sora', czarno-biały schemat przycisków z inwersją na hover)
   ========================================================================== */
:root {
	--hl-font: 'Sora', sans-serif;
	--hl-black: #000000;
	--hl-white: #ffffff;
	--hl-gray-bg: #f4f4f4;      /* tło pasków promocyjnych / wyróżnionych */
	--hl-max-width: 1200px;     /* szerokość kontenera, jak w e-con-boxed Elementora */
	--hl-gap: 24px;
	--hl-section-gap: 60px;     /* odstęp między sekcjami, zastępuje elementor-spacer */
}

#lekka-strona-glowna * {
	box-sizing: border-box;
}

#lekka-strona-glowna h2,
#lekka-strona-glowna h3 {
	font-family: var(--hl-font);
	color: var(--hl-black);
	margin: 0 0 20px;
	text-align: center;
	font-weight: 600;
}

#lekka-strona-glowna .hl-container {
	max-width: var(--hl-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Odstęp jednolity między każdą sekcją strony głównej */
#lekka-strona-glowna > section {
	margin-bottom: var(--hl-section-gap);
}

/* ==========================================================================
   1. HERO / SLIDER
   Pełna szerokość, zdjęcia 100% wysokości widoczne na screenie,
   strzałki nałożone po bokach, kropki na dole
   ========================================================================== */
.home-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 1825 / 625; /* proporcja oryginalnych banerów - rezerwuje miejsce z góry, zero CLS */
	overflow: hidden;
}

.home-hero__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.home-hero__slide {
	display: none;
	width: 100%;
	height: 100%;
}

.home-hero__slide.is-active {
	display: block;
}

.home-hero__slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.home-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.85);
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	color: var(--hl-black);
	z-index: 2;
	transition: background 0.2s ease;
}

.home-hero__nav:hover {
	background: var(--hl-white);
}

.home-hero__nav--prev { left: 20px; }
.home-hero__nav--next { right: 20px; }

.home-hero__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.home-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 0;
}

.home-hero__dot.is-active {
	background: var(--hl-white);
}

/* ==========================================================================
   2. PROMO BANNER (np. "Artemide - Autoryzowany partner")
   Szary pasek na całą szerokość, logo po lewej, tekst po prawej
   ========================================================================== */
.home-promo-banner {
	display: flex;
	align-items: center;
	gap: var(--hl-gap);
	background: var(--hl-gray-bg);
	padding: 30px 20px;
	max-width: var(--hl-max-width);
	margin-left: auto;
	margin-right: auto;
}

.home-promo-banner__badge img {
	max-width: 220px;
	height: auto;
	display: block;
}

.home-promo-banner__title {
	text-align: left;
	font-size: 1.3em;
	margin-bottom: 6px;
}

.home-promo-banner__text {
	font-family: var(--hl-font);
	color: #333;
	margin: 0;
}

@media (max-width: 767px) {
	.home-promo-banner {
		flex-direction: column;
		text-align: center;
	}
	.home-promo-banner__title,
	.home-promo-banner__text {
		text-align: center;
	}
}

/* ==========================================================================
   3. BLOK WYRÓŻNIONY (duże zdjęcie + 2 produkty)
   np. "Aromas Dalt", "Icone Luce", "Artemide Tolomeo Micro/Mega"
   ========================================================================== */
.home-featured-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hl-gap);
	max-width: var(--hl-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	align-items: stretch;
	background: var(--hl-gray-bg); /* tło obejmuje CAŁY blok, nie tylko kolumnę tekstu */
}

/* Odwrócona kolejność, gdy image_side = 'right' */
.home-featured-block--image-right {
	direction: rtl;
}
.home-featured-block--image-right > * {
	direction: ltr;
}

.home-featured-block__image img {
	width: 100%;
	height: 100%;
	min-height: 400px;
	object-fit: contain; /* zoom-out zamiast zoom-fill, jak w kartach produktów */
	background: #ffffff00; /* przezroczyste tło */
	display: block;
}

.home-featured-block__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20px;
}

.home-featured-block__title {
	text-align: center; /* wyśrodkowany, jak w rzędach kategorii */
}

.home-featured-block__products {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 767px) {
	.home-featured-block {
		grid-template-columns: 1fr;
		padding: 24px;
	}
	.home-featured-block--image-right {
		direction: ltr;
	}
	.home-featured-block__image img {
		min-height: 260px;
	}
	.home-featured-block__products {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   4. RZĄD KATEGORII (4 produkty w linii)
   np. "Lampy sufitowe", "Producent Artemide"
   ========================================================================== */
.home-category-row {
	max-width: var(--hl-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px;
}

.home-category-row__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--hl-gap);
}

@media (max-width: 1024px) {
	.home-category-row__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.home-category-row__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   5. KARTA PRODUKTU
   Wspólna dla rzędów kategorii i bloków wyróżnionych.
   Kolory/rozmiary zgodne z Twoim istniejącym CSS (Sora, cena 1.5em czarna,
   przycisk czarno-biały z inwersją na hover — dokładnie jak .products-blog)
   ========================================================================== */
.home-product-card {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.home-product-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.home-product-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain; /* zoom-out: cały produkt widoczny, kwadratowa proporcja zachowana */
	background: #ffffff;
	margin-bottom: 12px;
}

.home-product-card__name {
	font-family: var(--hl-font);
	color: var(--hl-black);
	font-size: 0.9em;
	line-height: 1.4;
	margin-bottom: 6px;
	transition: color 0.2s ease;
}

.home-product-card__link:hover .home-product-card__name {
	color: #acacac;
	text-decoration: underline;
}

.home-product-card__price {
	font-family: var(--hl-font);
	color: var(--hl-black);
	font-size: 1.1em;
	font-weight: 700;
	margin-bottom: 14px;
}

/* Usuwa domyślny WooCommerce-owy przekreślony <del> jeśli występuje w price_html,
   zachowuje spójność z resztą sklepu */
.home-product-card__price del {
	opacity: 0.5;
	font-size: 0.8em;
	margin-right: 6px;
}

/* Przycisk "Dodaj do koszyka" / "Wybierz opcje" renderowany przez
   woocommerce_template_loop_add_to_cart(). Globalny styl przycisków ze strony
   czasem się nie doczepia do tego markupu, więc definiujemy jawnie - biały/czarny
   z ramką i inwersją na hover, zgodnie z resztą sklepu. */
.home-product-card .button {
	display: inline-block;
	align-self: center;
	margin-top: auto;
	padding: 10px 20px;
	font-family: var(--hl-font);
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none !important;
	color: var(--hl-black) !important;
	background: var(--hl-white) !important;
	border: 1px solid var(--hl-black) !important;
	border-radius: 3px;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

.home-product-card .button:hover {
	color: var(--hl-white) !important;
	background: var(--hl-black) !important;
}

/* Ukrywa tekst pomocniczy dla czytników ekranu, który WooCommerce dokleja
   po przycisku wariantów ("Ten produkt ma wiele wariantów...") - i tak
   niepotrzebnie zajmowałby miejsce w układzie karty */
.home-product-card .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}