/*
Theme Name: Salient Child - Furlo
Description: Motyw potomny Salient dla sklepu furlo.pl. Kod w functions.php, tu paleta, fonty i poprawki wyglądu.
Author: Furlo
Template: salient
Version: 0.1.0
Text Domain: salient-child-furlo
*/

/*
 * 1. PALETA C „Limonka” (wybór Pawła 21.10.2026; tabela: brand-brain/brand-guidelines.md, Identyfikacja wizualna)
 *    - jedyne miejsce z kodami kolorów sklepu. Te same kolory: inc/emaile/furlo-emaile.php,
 *    strona/skrypty/ustawienia-emaili-furlo-2026-10-21.php i ustawienia motywu salient-opcje-furlo.json.
 *    Pięć pierwszych zmiennych czyta też wysuwany koszyk (inc/koszyk) i kasa (inc/kasa).
 *    Selektor html:root jest o stopień mocniejszy niż :root z modułu koszyka i :where(:root) z kasy,
 *    więc paleta wygrywa niezależnie od kolejności arkuszy.
 *    Zasady palety: limonka tylko na przycisku kupna (wyjątek: licznik koszyka), zawsze z czarnym napisem,
 *    ramką 2 px #111111 i twardym cieniem - sama limonka na jasnym tle ma kontrast 1,3:1.
 *    Malina tylko na ozdoby (gwiazdki, kropki, podkreślenia); jako tekst dopiero od 24 px.
 */
html:root {
	--furlo-tlo: #FFFDF6;            /* ciepła biel - tło strony */
	--furlo-tekst: #161616;          /* tekst; też ciemne pasy (pasek górny, stopka) */
	--furlo-linia: #111111;          /* obramowania i linie */
	--furlo-przycisk: #C8F03C;       /* limonka - TYLKO przycisk kupna */
	--furlo-przycisk-tekst: #111111; /* napis na przycisku kupna */
	--furlo-sekcja: #F4F0E2;         /* jasny len - tło sekcji */
	--furlo-karta: #FFFFFF;          /* karty i pola */
	--furlo-akcent: #E8336D;         /* malina - ozdoby; tekst tylko od 24 px */
	--furlo-pomoc: #5E5B55;          /* tekst drugi: stara cena, dopiski */

	--furlo-naglowek: #111111;       /* nagłówki */
	--furlo-ramka: #111111;          /* ramki i obramowania 2 px */
	--furlo-ramka-grubosc: 2px;
	--furlo-cien: 4px 4px 0 #111111; /* twardy cień przycisku kupna */
	--furlo-plakietka-tlo: #111111;  /* plakietka „Oszczędzasz” */
	--furlo-plakietka-tekst: #C8F03C;
	--furlo-ozdoba: var(--furlo-akcent);

	/* Fonty marki: pliki w assets/fonty/ (ładuje functions.php), systemowe w zapasie. */
	--furlo-font-naglowek: "Unbounded", "Arial Black", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--furlo-font-tekst: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/*
 * 2. STRONA: tło, kolor i krój tekstu. Rozmiary: tekst 18 px na komputerze,
 *    17 px na telefonie, interlinia 1,6.
 */
html body {
	background-color: var(--furlo-tlo);
	color: var(--furlo-tekst);
	font-family: var(--furlo-font-tekst);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
}

html body .container-wrap,
html body .ajax-loader-wrap,
html body #ajax-content-wrap {
	background-color: var(--furlo-tlo);
}

body p,
body li,
body td,
body th,
body label,
body input,
body select,
body textarea,
body button {
	font-family: var(--furlo-font-tekst);
}

body strong,
body b {
	font-weight: 600;
}

/* 3. NAGŁÓWKI i nazwa sklepu w nagłówku strony: Unbounded 700, #111111. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body #page-header-bg h1,
body .row .col.section-title h1,
body.woocommerce div.product .product_title,
body .woocommerce div.product .product_title,
#header-outer #logo,
#header-outer #logo.no-image {
	font-family: var(--furlo-font-naglowek);
	font-weight: 700;
	color: var(--furlo-naglowek);
	text-transform: none;
}

body h1 { font-size: 44px; line-height: 1.15; }
body h2 { font-size: 32px; line-height: 1.2; }
body h3 { font-size: 24px; line-height: 1.25; }

/* Tytuł strony informacyjnej (pas tytułu włączony w ustawieniach motywu): tło sekcji z napisem w kolorze tekstu. */
body #page-header-bg,
body #page-header-wrap {
	background-color: var(--furlo-sekcja);
}

body #page-header-bg h1,
body #page-header-bg .subheader {
	color: var(--furlo-tekst);
}

/* 4. LINKI: kolor tekstu, w treści podkreślone. */
body a {
	color: var(--furlo-tekst);
}

/* Zmiana koloru po najechaniu tylko w treści na jasnym tle - nie na ciemnych pasach. */
.container-wrap p > a:not(.button):not(.nectar-button):hover {
	color: var(--furlo-pomoc);
}

.container-wrap p > a:not(.button):not(.nectar-button),
.container-wrap .woocommerce-privacy-policy-text a,
.container-wrap .woocommerce-terms-and-conditions-checkbox-text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 5. PRZYCISKI WooCommerce: kolor przycisku z jego napisem, zwykły zapis liter
 *    (motyw robił "Dodaj Do Koszyka"). !important, bo motyw koloruje przyciski
 *    własnym arkuszem generowanym z ustawień, o wysokiej wadze selektorów.
 */
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body .woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product .button,
body .woocommerce div.product form.cart .button,
body.woocommerce div.product form.cart .button,
body .single_add_to_cart_button,
body a.added_to_cart,
body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body .woocommerce #payment #place_order,
body .wc-block-components-button:not(.is-link),
body .wp-block-button .wp-block-button__link.add_to_cart_button {
	background-color: var(--furlo-przycisk) !important;
	background-image: none !important;
	border: var(--furlo-ramka-grubosc) solid var(--furlo-ramka) !important;
	box-shadow: var(--furlo-cien) !important;
	color: var(--furlo-przycisk-tekst) !important;
	font-family: var(--furlo-font-tekst);
	font-weight: 700;
	text-transform: none !important;
	letter-spacing: 0;
	opacity: 1;
}

body.woocommerce a.button *,
body.woocommerce button.button *,
body .woocommerce a.button *,
body .woocommerce button.button *,
body .single_add_to_cart_button * {
	color: var(--furlo-przycisk-tekst) !important;
	text-transform: none !important;
}

/* Najechanie i fokus: kolory bez zmian, przycisk „wciska się” - cień maleje, przycisk schodzi o 2 px. */
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .single_add_to_cart_button:hover,
body.woocommerce a.button:focus-visible,
body.woocommerce button.button:focus-visible,
body .woocommerce a.button:focus-visible,
body .woocommerce button.button:focus-visible,
body .single_add_to_cart_button:focus-visible {
	background-color: var(--furlo-przycisk) !important;
	color: var(--furlo-przycisk-tekst) !important;
	box-shadow: 2px 2px 0 var(--furlo-ramka) !important;
	transform: translate(2px, 2px);
	opacity: 1;
}

/* Wyłączony przycisk zostaje czytelny: te same kolory, tylko bez reakcji. */
body .woocommerce button.button:disabled,
body .woocommerce button.button.disabled,
body .woocommerce a.button.disabled {
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none;
}

/* Przycisk zakupu na stronie produktu: rozmiary. */
body .woocommerce div.product form.cart .single_add_to_cart_button,
body.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 56px;
	font-size: 18px;
	line-height: 1.2;
}

/* 6. CENA: kolor tekstu, waga 700. */
body .woocommerce div.product p.price,
body.woocommerce div.product p.price,
body .woocommerce div.product span.price,
body .woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price,
body .woocommerce .price .amount {
	color: var(--furlo-tekst);
	font-family: var(--furlo-font-tekst);
	font-weight: 700;
}

body .woocommerce div.product .summary p.price,
body.woocommerce div.product .summary p.price {
	font-size: 28px;
	line-height: 1.2;
}

body .woocommerce .price del,
body .woocommerce .price del .amount {
	color: var(--furlo-pomoc);
	font-weight: 400;
}

/*
 * 7. POLA FORMULARZY poza kasą (kasa ma własny wygląd w inc/kasa i tu jej nie ruszamy).
 *    Pole ilości (.qty) zostaje po stronie motywu.
 */
body:not(.woocommerce-checkout) input[type="text"],
body:not(.woocommerce-checkout) input[type="email"],
body:not(.woocommerce-checkout) input[type="tel"],
body:not(.woocommerce-checkout) input[type="password"],
body:not(.woocommerce-checkout) input[type="search"],
body:not(.woocommerce-checkout) input[type="url"],
body:not(.woocommerce-checkout) input[type="date"],
body:not(.woocommerce-checkout) input[type="number"]:not(.qty),
body:not(.woocommerce-checkout) textarea,
body:not(.woocommerce-checkout) select {
	background-color: var(--furlo-karta);
	color: var(--furlo-tekst);
	border: var(--furlo-ramka-grubosc) solid var(--furlo-ramka);
	border-radius: 6px;
	font-family: var(--furlo-font-tekst);
	font-size: 17px;
	line-height: 1.4;
	box-shadow: none;
}

body:not(.woocommerce-checkout) input[type="text"]:focus,
body:not(.woocommerce-checkout) input[type="email"]:focus,
body:not(.woocommerce-checkout) input[type="tel"]:focus,
body:not(.woocommerce-checkout) input[type="password"]:focus,
body:not(.woocommerce-checkout) input[type="search"]:focus,
body:not(.woocommerce-checkout) input[type="url"]:focus,
body:not(.woocommerce-checkout) input[type="date"]:focus,
body:not(.woocommerce-checkout) input[type="number"]:not(.qty):focus,
body:not(.woocommerce-checkout) textarea:focus,
body:not(.woocommerce-checkout) select:focus {
	border-color: var(--furlo-tekst);
	outline: 2px solid var(--furlo-tekst);
	outline-offset: 1px;
}

body:not(.woocommerce-checkout) input::placeholder,
body:not(.woocommerce-checkout) textarea::placeholder {
	color: var(--furlo-pomoc);
	opacity: 1;
}

body:not(.woocommerce-checkout) .woocommerce form .form-row label,
body:not(.woocommerce-checkout) .woocommerce-form label {
	color: var(--furlo-tekst);
	font-weight: 600;
}

/* 8. PASEK GÓRNY: ciemne tło (kolor tekstu) z jasnym napisem, wyśrodkowany. */
body #header-secondary-outer {
	background-color: var(--furlo-tekst);
	border-bottom: 0;
}

body #header-secondary-outer .nectar-center-text,
body #header-secondary-outer .nectar-center-text a,
body #header-secondary-outer nav > ul > li > a {
	color: var(--furlo-tlo);
	font-family: var(--furlo-font-tekst);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

body #header-secondary-outer .nectar-center-text {
	text-align: center;
}

/*
 * 9. STOPKA: linki z menu "Stopka" (blok wypisuje functions.php) nad linią praw autorskich.
 *    Ciemne tło, jasne linki; po najechaniu podkreślenie (bez nowego koloru - malina jako tekst dopiero od 24 px).
 */
body #footer-outer,
body #footer-outer #copyright {
	background-color: var(--furlo-tekst);
}

body #footer-outer #copyright,
body #footer-outer #copyright p,
body #footer-outer #copyright a {
	color: var(--furlo-tlo);
	font-size: 15px;
}

/* Blok sam środkuje listę (flex). Samo "margin: 0 auto" na liście nie wystarcza: na ekranie szerszym
   niż lista (ok. 1450 px) motyw zeruje jej marginesy i linki lądowały przy lewej krawędzi. */
.furlo-stopka {
	display: flex;
	justify-content: center;
	background-color: var(--furlo-tekst);
	padding: 28px 16px 20px;
	border-bottom: 1px solid var(--furlo-pomoc);
}

.furlo-stopka .furlo-stopka__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 28px;
	width: 100%;
	max-width: 1425px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.furlo-stopka .furlo-stopka__lista li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .furlo-stopka .furlo-stopka__lista a {
	display: inline-block;
	padding: 10px 0;
	color: var(--furlo-tlo);
	font-family: var(--furlo-font-tekst);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

body .furlo-stopka .furlo-stopka__lista a:hover,
body .furlo-stopka .furlo-stopka__lista a:focus-visible {
	color: var(--furlo-tlo);
	text-decoration: underline;
	text-decoration-color: var(--furlo-akcent);
	text-underline-offset: 3px;
}

/* 10. TELEFON: mniejsze rozmiary; linki stopki jeden pod drugim. */
@media only screen and (max-width: 690px) {
	html body {
		font-size: 17px;
		line-height: 1.6;
	}

	body h1 { font-size: 30px; line-height: 1.15; }
	body h2 { font-size: 24px; line-height: 1.2; }
	body h3 { font-size: 20px; line-height: 1.25; }

	body .woocommerce div.product .summary p.price,
	body.woocommerce div.product .summary p.price {
		font-size: 24px;
	}

	body .woocommerce div.product form.cart .single_add_to_cart_button,
	body.woocommerce div.product form.cart .single_add_to_cart_button {
		min-height: 54px;
		font-size: 17px;
	}

	.furlo-stopka {
		padding: 20px 16px 12px;
	}

	.furlo-stopka .furlo-stopka__lista {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	body .furlo-stopka .furlo-stopka__lista a {
		padding: 12px 8px;
		font-size: 17px;
	}
}

/*
 * 12. POPRAWKI Z TESTU W PRZEGLĄDARCE (12.10.2026)
 *
 * a) "Zamawiam i płacę", "Przejdź do płatności" na stronie koszyka, "Wróć do sklepu" i przycisk
 *    w komunikacie "dodano do koszyka": motyw kładł na nich tło w kolorze akcentu motywu pod nasz
 *    napis - wychodził pusty pas. Selektor z powtórzeniami jest mocniejszy
 *    niż reguły motywu i przywraca limonkę z czarnym napisem, ramką i cieniem (pułapka Salienta: kolor akcentu motywu
 *    jako tło przycisków zamówienia i przejścia do kasy).
 */
html body .woocommerce #order_review #payment #place_order#place_order,
html body.woocommerce-checkout #payment #place_order#place_order#place_order,
html body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button.checkout-button.checkout-button,
html body .woocommerce .return-to-shop a.button.button.button,
html body .woocommerce p.return-to-shop a.button.button.button,
html body .woocommerce .woocommerce-message a.button.button.button,
html body .woocommerce-notices-wrapper a.button.button.button {
	background-color: var(--furlo-przycisk) !important;
	background-image: none !important;
	border: var(--furlo-ramka-grubosc) solid var(--furlo-ramka) !important;
	box-shadow: var(--furlo-cien) !important;
	color: var(--furlo-przycisk-tekst) !important;
	opacity: 1 !important;
}

/*
 * b) Koszyk i kasa bez pasa z tytułem strony - na telefonie zabierał pierwszy ekran,
 *    a kasa ma własne nagłówki części.
 */
body.woocommerce-cart #page-header-wrap,
body.woocommerce-cart #page-header-bg,
body.woocommerce-checkout #page-header-wrap,
body.woocommerce-checkout #page-header-bg {
	display: none !important;
}

/*
 * 13. PRZYCISK KUPNA W MODUŁACH (paleta „Limonka”): wysuwany koszyk, przyklejony pasek kupna, przyciski w opisie
 *     i „Zamawiam i płacę” w kasie. Moduły mają własne reguły z box-shadow: none !important - stąd identyfikator
 *     i powtórzone klasy. Wszędzie: limonka, czarny napis, ramka 2 px #111111, twardy cień.
 */
html body #furlo-koszyk .furlo-koszyk__kasa.furlo-koszyk__kasa:not(.furlo-koszyk__kasa--wroc),
html body #furlo-koszyk .furlo-koszyk__dosprzedaz-dodaj.furlo-koszyk__dosprzedaz-dodaj,
html body.single-product #furlo-pasek-kupna .furlo-pasek-kupna__przycisk.furlo-pasek-kupna__przycisk,
html body.single-product .furlo-opis a.furlo-opis-duzy-przycisk.furlo-opis-duzy-przycisk,
html body.single-product .furlo-opis .furlo-opis-cta__przycisk.furlo-opis-cta__przycisk,
html body.woocommerce-checkout #place_order#place_order {
	background-color: var(--furlo-przycisk) !important;
	background-image: none !important;
	border: var(--furlo-ramka-grubosc) solid var(--furlo-ramka) !important;
	box-shadow: var(--furlo-cien) !important;
	color: var(--furlo-przycisk-tekst) !important;
	opacity: 1 !important;
}

html body #furlo-koszyk .furlo-koszyk__kasa.furlo-koszyk__kasa:not(.furlo-koszyk__kasa--wroc):hover,
html body #furlo-koszyk .furlo-koszyk__dosprzedaz-dodaj.furlo-koszyk__dosprzedaz-dodaj:hover,
html body.single-product #furlo-pasek-kupna .furlo-pasek-kupna__przycisk.furlo-pasek-kupna__przycisk:hover,
html body.woocommerce-checkout #place_order#place_order:hover {
	box-shadow: 2px 2px 0 var(--furlo-ramka) !important;
	transform: translate(2px, 2px) !important;
}

/* Przycisk „Wróć do zakupów” w koszyku to nie przycisk kupna: bez limonki, czarna ramka. */
html body #furlo-koszyk .furlo-koszyk__kasa.furlo-koszyk__kasa--wroc {
	border: var(--furlo-ramka-grubosc) solid var(--furlo-ramka) !important;
}

/* Licznik przy ikonie koszyka w nagłówku - jedyny dozwolony wyjątek limonki poza przyciskiem kupna.
   Selektory Salienta do sprawdzenia w przeglądarce po wgraniu (znacznik licznika zależy od stylu nagłówka). */
html body #header-outer .cart-menu .cart-wrap span,
html body #header-outer .cart-wrap .cart-wrap span {
	background-color: var(--furlo-przycisk) !important;
	color: var(--furlo-przycisk-tekst) !important;
	border: 1px solid var(--furlo-ramka);
}

/* Poprawki po przeglądzie 21.10.2026 */
/* Kasa: Salient dopisuje w wierszu dostawy etykietę ::after krojem Open Sans (niewczytany) - wychodził szeryf. */
html body .woocommerce-shipping-totals th::after,
html body .woocommerce-checkout-review-order-table th::after {
	font-family: var(--furlo-font-tekst) !important;
}
/* Wybór metody dostawy i płatności: czarne zamiast systemowego niebieskiego. */
html body .woocommerce input[type="radio"],
html body .woocommerce input[type="checkbox"] {
	accent-color: var(--furlo-ramka);
}
/* Kafelki produktów (sklep, strona startowa): Salient kładzie przycisk na cenie i pokazuje go po najechaniu,
   a styl limonki robił go widocznym na stałe i zasłaniał cenę. Kafelek prowadzi na stronę produktu. */
html body ul.products li.product .add_to_cart_button,
html body ul.products li.product .product-add-to-cart {
	display: none !important;
}
html body ul.products li.product .price {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}