/*
Theme Name: Gitara Online
Theme URI: https://gitara-online.pl
Description: Motyw potomny dla Trusted, przygotowany pod sklep z gitarami klasycznymi i lutniczymi. Cała zmiana wyglądu odbywa się w sekcji ZMIENNE na górze tego pliku — kolory, czcionki, kształty i odstępy. Motyw nadrzędny Trusted zostaje nietknięty, więc jego aktualizacje niczego nie nadpisują.
Author: Gitara Online
Author URI: https://gitara-online.pl
Template: trusted
Version: 1.5.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gitara-online-skorka
*/

/* ============================================================
   ZMIENNE — JEDYNE MIEJSCE, KTÓRE ZMIENIASZ

   Zmiana wartości poniżej przemalowuje całą stronę.
   Nie musisz szukać niczego niżej w tym pliku.
   ============================================================ */

:root {

  /* --- KOLORY GŁÓWNE ---------------------------------------
     Zasada nadrzędna: nigdy czysta biel ani czysta czerń.
     Biel męczy oczy i wygląda tanio, czerń zabija ciepło drewna.

     UWAGA: --marka, --menu-tlo i --ciemny muszą być takie same
     jak stałe GO_KOLOR_* w pliku functions.php. Inaczej część
     elementów Trusted zostanie w starym kolorze. */

  --marka:          #5E2530;   /* wino — przyciski, linki, stany aktywne */
  --marka-hover:    #4A1D26;   /* wino ciemniejsze */
  --marka-jasne:    #F7EDEA;   /* delikatne tło pod wyróżnienia */

  --zloto:          #8C5A14;   /* ceny na pergaminie — ciemne, dla kontrastu */
  --zloto-hover:    #6F460F;
  --zloto-jasne:    #DCB05A;   /* złoto na ciemnym tle: menu, stopka */

  --menu-tlo:       #4A1D26;   /* pasek nagłówka i menu — głębokie wino */
  --menu-tekst:     #F7F0E4;   /* napisy na ciemnym pasku */

  --ciemny:         #211711;   /* orzech — stopka, panel koszyka, górny pasek */
  --ciemny-2:       #34241A;

  /* Tło rozwijanego menu. Domyślnie takie samo jak pasek nagłówka,
     żeby podmenu było przedłużeniem paska, a nie osobną czarną płytą.
     Jeśli wolisz dawne odróżnienie poziomów — wpisz tu var(--ciemny). */
  --podmenu-tlo:    var(--menu-tlo);

  /* --- TEKST ----------------------------------------------- */
  --tekst:          #34241A;   /* treść strony */
  --tekst-cichy:    #6A4C34;   /* podpisy, daty, meta */
  --naglowki:       #211711;   /* H1..H6 */

  /* --- TŁA I LINIE ----------------------------------------- */
  --tlo:            #FCFAF4;   /* pergamin — tło strony */
  --tlo-alt:        #F6EFE2;   /* sekcje naprzemienne */
  --tlo-panel:      #EDE2CE;   /* panel wypukły, wyróżnione bloki */
  --linia:          #E5D8BF;   /* obramowania, separatory */

  /* --- CZCIONKI -------------------------------------------- */
  --font-naglowki:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-tresc:     'Lora', Georgia, serif;
  --font-ui:        'Work Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- KSZTAŁTY -------------------------------------------- */
  --rogi:           10px;      /* przyciski, pola formularzy */
  --rogi-karta:     16px;      /* karty produktów, panele */

  /* Cienie ciepłe, na bazie orzecha — nigdy czarne.
     Czarny cień pod ciepłym zdjęciem wygląda brudno. */
  --cien:           0 1px 2px rgba(45,30,18,.06), 0 2px 8px rgba(45,30,18,.05);
  --cien-mocny:     0 4px 12px rgba(45,30,18,.10), 0 12px 32px rgba(45,30,18,.08);

  /* --- ODSTĘPY ---------------------------------------------
     Luksus to przede wszystkim powietrze. Szerokie marginesy
     robią więcej dla wrażenia klasy niż jakikolwiek złoty ornament. */
  --sekcja:         88px;
  --odstep:         20px;

  /* --- RUCH ------------------------------------------------ */
  --przejscie:      180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ------------------------------------------------------------
   GOTOWE WARIANTY NA WYMIANĘ

   Chcesz inny klimat? Podmień wartości w sekcji KOLORY GŁÓWNE
   i te same cztery w stałych GO_KOLOR_* w functions.php.

   WINO GŁĘBSZE (ciemniej, bardziej wieczorowo):
     --marka: #4A1D26;  --marka-hover: #3A161D;
     --menu-tlo: #3A161D;  --ciemny: #1A120D;

   WINO JAŚNIEJSZE (cieplej, mniej formalnie):
     --marka: #7A3341;  --marka-hover: #612833;
     --menu-tlo: #5E2530;  --ciemny: #211711;

   ZŁOTO NA PIERWSZYM PLANIE (powrót do miodu jako akcentu):
     --marka: #B67A1E;  --marka-hover: #986011;
     --menu-tlo: #211711;  --ciemny: #211711;
   ------------------------------------------------------------ */


/* ============================================================
   PONIŻEJ NIC NIE MUSISZ ZMIENIAĆ

   To reguły, które przypisują zmienne z góry do elementów
   motywu Trusted. Działa automatycznie.
   ============================================================ */

/* --- TŁO STRONY -------------------------------------------- */
body,
#page,
#content.site-content,
.woocommerce div.product,
.woocommerce-page div.product {
	background-color: var(--tlo);
}

/* --- TEKST I TYPOGRAFIA ------------------------------------ */
body,
button,
input,
select,
textarea {
	color: var(--tekst);
}

body,
.entry-content,
.entry-summary,
.woocommerce div.product .woocommerce-tabs .panel {
	font-family: var(--font-tresc);
	font-size: 17px;
	line-height: 1.7;
}

/* Interfejs, nawigacja, tabele parametrów — bezszeryfowa,
   bo w małych rozmiarach czyta się szybciej niż Lora. */
#primary-menu,
#primary-menu a,
#top-bar,
#top-bar a,
.entry-meta,
.entry-footer,
button,
input,
select,
textarea,
.woocommerce table.shop_attributes,
.woocommerce table.shop_table,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce ul.products li.product .button,
.woocommerce-breadcrumb,
.pagination {
	font-family: var(--font-ui);
}

h1, h2, h3, h4, h5, h6,
.entry-header .entry-title,
.entry-header .entry-title a,
.site-title,
.site-title a,
#secondary .widget .widget-title,
.featured-post h4,
.featured-post h4 a,
.woocommerce div.product .product_title,
.wc-block-grid__product-title {
	font-family: var(--font-naglowki);
	color: var(--naglowki);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Nagłówki w treści dostają więcej powietrza nad sobą niż pod.
   Dzięki temu wzrok od razu wie, gdzie zaczyna się nowa myśl. */
.entry-content h2 {
	font-size: 2rem;
	margin-top: 2.2em;
	margin-bottom: .7em;
}

.entry-content h3 {
	font-size: 1.5rem;
	margin-top: 1.8em;
	margin-bottom: .6em;
}

.entry-meta,
.entry-footer,
.posted-on,
.byline,
.woocommerce-breadcrumb,
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
	color: var(--tekst-cichy);
	font-size: .875rem;
}

/* --- LINKI ------------------------------------------------- */
a,
#primary-menu li.current-menu-item > a,
#site-description,
.pagination .current {
	color: var(--marka);
}

a:hover,
a:focus,
#primary-menu li a:hover,
#primary-menu ul li a:hover,
.pagination a:hover {
	color: var(--marka-hover);
}

/* Podkreślenie linków w treści pojawia się na hover — w samym
   tekście przeszkadza, ale bez niego link nie jest oczywisty. */
.entry-content a:hover,
.entry-content a:focus {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* --- KRESKA POD NAGŁÓWKAMI (znak firmowy Trusted) ---------- */
.entry-content h1:before,
.entry-content h2:before,
.entry-content h3:before,
.entry-content h4:before,
.entry-content h5:before,
.entry-content h6:before,
.entry-header .entry-title:before,
#secondary .widget .widget-title:before,
h3#reply-title:before,
h3.comments-title:before,
.woocommerce h2:before,
.woocommerce div.product .woocommerce-tabs .wc-tabs li.active:after {
	background-color: var(--marka);
}

/* --- PRZYCISKI --------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
#top-bar a.button,
#cta-section a.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce a.added_to_cart,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
	background: var(--marka);
	color: #FFFDF8;
	border-radius: var(--rogi);
	box-shadow: none;
	font-family: var(--font-ui);
	font-weight: 500;
	letter-spacing: .04em;
	padding: .85em 1.6em;
	transition: background var(--przejscie), transform var(--przejscie);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
#cta-section a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--marka-hover);
	transform: translateY(-2px);
}

/* Przycisk „Dodaj do koszyka" — ten sam kolor co reszta, ale wyraźnie
   większy. Zakup to moment premium, a nie kolejny link w nawigacji.
   Różnicujemy rozmiarem, nie kolorem — dwa mocne kolory obok siebie
   walczą ze sobą i żaden nie prowadzi wzroku. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
	font-size: 1.05rem;
	padding: 1.05em 2.4em;
}

/* --- CENY -------------------------------------------------
   Trusted domyślnie wsadza cenę w kolorowy prostokąt. Przy
   instrumencie za kilka tysięcy złotych to wygląda jak metka
   z wyprzedaży. Zdejmujemy tło, zostaje typografia — w złocie,
   żeby odcinała się od winnych przycisków obok.

   Trusted dokłada jeszcze pseudoelement :before jako tło pod ceną.
   Trzeba go zdjąć osobno, inaczej zostaje kolorowy pasek. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.wc-block-grid__product-price {
	background: none;
	border-radius: 0;
	padding: 0;
	color: var(--zloto);
	font-family: var(--font-naglowki);
	font-weight: 600;
}

.woocommerce ul.products li.product .price:before,
.woocommerce div.product p.price:before,
.wc-block-grid__product-price:before {
	background: none;
	content: none;
}

.woocommerce div.product p.price {
	font-size: 1.9rem;
}

.woocommerce ul.products li.product .price {
	font-size: 1.35rem;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--tekst-cichy);
	font-weight: 400;
	opacity: 1;
}

/* Cena po obniżce — złoto ciemniejsze, żeby odcięła się
   od przekreślonej ceny obok. */
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	color: var(--zloto-hover);
	text-decoration: none;
}

/* --- CIEMNE TŁA: STOPKA, ROZWIJANE MENU -------------------- */
#colophon,
#masthead.above,
#masthead.scrolled,
#top-bar ul > li > ul,
#primary-menu ul,
.featured-post .featured-icon,
.trusted-modal,
.top-login-dropdown,
.top-login-mini-cart {
	background: var(--ciemny);
}

#colophon,
#colophon a {
	color: #E8DCC6;
}

#colophon a:hover {
	color: var(--zloto-jasne);
}

/* Dolny pasek stopki — o ton jaśniejszy od reszty, żeby
   oddzielić podpis od widżetów nad nim. Tu ląduje nasz
   „Stworzone i wspierane przez gitara-online.pl". */
#bottom-footer {
	background: var(--ciemny-2);
	border-top: 1px solid rgba(232,220,198,.12);
}

#colophon .site-info {
	font-family: var(--font-ui);
	font-size: .875rem;
	letter-spacing: .02em;
}

#colophon .site-info a {
	color: var(--zloto-jasne);
	text-decoration: none;
}

#colophon .site-info a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Górny pasek nad nagłówkiem — orzech, cieńszy i ciemniejszy
   niż pasek menu pod nim. Trzy poziomy ciemności dają głębię:
   orzech, wino, pergamin. */
#top-bar {
	background: var(--ciemny);
	border-bottom: none;
	color: #D9C7A8;
	font-size: .875rem;
}

#top-bar a,
#top-bar .fa,
#masthead.light #top-bar,
#masthead.light #top-bar a,
#masthead.light #top-bar .fa {
	color: #D9C7A8;
}

#top-bar a:hover,
#masthead.light #top-bar a:hover,
#masthead.light #top-bar .fa:hover {
	color: var(--zloto-jasne);
}

/* Panel logowania i podglądu koszyka — orzech, jak podmenu.
   Na zrzucie były to te ciemne pasy z tekstem na całą szerokość. */
.trusted-modal,
.top-login-dropdown,
.top-login-mini-cart {
	background: var(--ciemny);
	border-radius: var(--rogi-karta);
}

.top-login-dropdown,
.top-login-dropdown a,
.top-login-mini-cart,
.top-login-mini-cart a {
	color: #E8DCC6;
}

.top-login-dropdown a:hover,
.top-login-mini-cart a:hover {
	color: var(--zloto-jasne);
}

@media screen and (max-width: 1024px) {
	#primary-menu,
	.site-navigation.centered #primary-menu {
		background: var(--ciemny);
	}
}

/* --- NAGŁÓWEK STRONY I MENU --------------------------------
   Pasek z logo i nawigacją na głębokim winie. Na pergaminie
   menu ginęło — nie było widać, gdzie kończy się nagłówek,
   a zaczyna treść. Ciemny pasek daje ramę całej stronie.

   position: relative jest tu konieczne. Bez niego rozwijane
   menu na telefonie pozycjonuje się względem całej strony
   i ucieka poza ekran. */
#masthead,
#masthead.light,
#masthead.above,
#masthead.scrolled {
	position: relative;
	background-color: var(--menu-tlo);
	border-bottom: none;
}

/* Nazwa sklepu i hasło pod nią */
.site-title a,
#masthead.light .site-title a {
	color: var(--menu-tekst);
}

.site-title a:hover,
#masthead.light .site-title a:hover {
	color: var(--zloto);
}

#site-description,
#masthead.light #site-description {
	color: #D9C7A8;
}

/* Pozycje menu — jasne na ciemnym, złoto przy najechaniu
   i przy stronie, na której właśnie jesteś. */
#primary-menu li a,
#masthead.light #primary-menu li a,
#primary-menu ul li a {
	color: var(--menu-tekst);
}

#primary-menu li a:hover,
#primary-menu li a:focus,
#masthead.light #primary-menu li a:hover,
#primary-menu ul li a:hover,
#primary-menu li.current-menu-item > a,
#masthead.light #primary-menu li.current-menu-item > a {
	color: var(--zloto-jasne);
}

/* Rozwijane podmenu — orzech, żeby odróżnić poziom
   od paska nadrzędnego. */
#primary-menu ul,
#top-bar ul > li > ul {
	background: var(--ciemny);
	border: none;
}

/* Telefon, koszyk i logowanie na pasku nagłówka */
#masthead .top-tel,
#masthead .top-tel a,
#masthead.light .top-tel,
#masthead.light .top-tel a,
#masthead .top-cart,
#masthead .top-login,
#masthead .top-tel .fa,
#masthead.light .top-tel .mobile-clear a {
	color: var(--menu-tekst);
}

#masthead .top-tel a:hover,
#masthead .top-cart:hover,
#masthead .top-login:hover,
#masthead.light .top-tel .mobile-clear a:hover {
	color: var(--zloto-jasne);
}

/* Menu na telefonie — ta sama głębia co pasek */
@media screen and (max-width: 1024px) {
	#primary-menu,
	.site-navigation.centered #primary-menu,
	#masthead.light #primary-menu li a {
		background-color: var(--ciemny);
		color: var(--menu-tekst);
	}
}

/* --- KARTY PRODUKTÓW --------------------------------------- */
.woocommerce ul.products li.product {
	background: var(--tlo);
	border: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	box-shadow: var(--cien);
	padding: var(--odstep);
	transition: box-shadow var(--przejscie), transform var(--przejscie), border-color var(--przejscie);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--cien-mocny);
	border-color: var(--marka);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	border-radius: calc(var(--rogi-karta) - 6px);
	margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-naglowki);
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--naglowki);
}

/* Plakietka „Promocja" — złoto, bez krzyku. Przyciski są winne,
   więc plakietka w tym samym kolorze zlewałaby się z nimi. */
.woocommerce span.onsale {
	background: var(--zloto);
	color: #FFFDF8;
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	min-height: 0;
	min-width: 0;
	padding: .35em 1em;
	line-height: 1.4;
}

/* --- STRONA PRODUKTU -------------------------------------
   WooCommerce domyślnie „opływa" galerię i opis przez float.
   Jeśli motyw tego nie zamknie, elementy nachodzą na siebie.
   Flex zamyka to raz na zawsze. */
.woocommerce div.product {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	flex: 1 1 100%;
}

.woocommerce div.product .product_title {
	font-size: 2.4rem;
	line-height: 1.15;
	margin-bottom: .3em;
}

/* Tabela parametrów instrumentu — to najczęściej czytany
   fragment karty gitary. Musi być czytelna, nie ozdobna. */
.woocommerce table.shop_attributes {
	border: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-bottom: 1px solid var(--linia);
	padding: .8em 1.1em;
	font-size: .95rem;
	line-height: 1.5;
}

.woocommerce table.shop_attributes th {
	background: var(--tlo-panel);
	color: var(--naglowki);
	font-weight: 500;
	width: 40%;
}

.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td {
	border-bottom: none;
}

/* Zakładki opisu */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--linia);
	padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--tekst-cichy);
	font-weight: 500;
	letter-spacing: .03em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--naglowki);
}

/* --- POLA FORMULARZY --------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background: var(--tlo);
	border-radius: var(--rogi);
	border: 1px solid var(--linia);
	font-family: var(--font-ui);
	padding: .7em .9em;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--marka);
	outline: 2px solid var(--marka-jasne);
	outline-offset: 1px;
}

/* --- SEKCJE NAPRZEMIENNE I STRONA GŁÓWNA ------------------- */
.home #cta-section {
	background: var(--tlo-alt);
	border-top: 1px solid var(--linia);
	border-bottom: 1px solid var(--linia);
}

.home #cta-section h2,
.home #cta-section h3 {
	font-family: var(--font-naglowki);
	font-size: 2.2rem;
}

/* Trzy usługi z ikonami na stronie głównej */
.featured-post {
	background: var(--tlo);
	border: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	padding: 28px 24px;
}

.featured-post .featured-icon {
	background: var(--ciemny);
	color: var(--marka);
}

/* Zakładki produktów na stronie głównej — sekcja sklepu.
   Nagłówek dostaje pełny rozmiar, bo to główna atrakcja. */
.home .woocommerce h2,
#home-products h2 {
	font-family: var(--font-naglowki);
	font-size: 2.4rem;
	text-align: center;
	margin-bottom: 1.2em;
}

/* --- KOLUMNA BOCZNA I WIDŻETY ------------------------------ */
#secondary .widget {
	background: var(--tlo-alt);
	border: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	padding: 22px;
	margin-bottom: 28px;
}

#secondary .widget .widget-title {
	font-size: 1.25rem;
	margin-bottom: .8em;
}

#secondary .widget ul li {
	border-bottom: 1px solid var(--linia);
	padding: .55em 0;
}

#secondary .widget ul li:last-child {
	border-bottom: none;
}

/* --- CYTATY I WYRÓŻNIENIA W TREŚCI ------------------------- */
.entry-content blockquote {
	background: var(--marka-jasne);
	border-left: 3px solid var(--marka);
	border-radius: 0 var(--rogi) var(--rogi) 0;
	color: var(--tekst);
	font-family: var(--font-tresc);
	font-style: normal;
	margin: 2em 0;
	padding: 1.4em 1.6em;
}

.entry-content table {
	border: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	border-collapse: separate;
	overflow: hidden;
}

.entry-content th {
	background: var(--tlo-alt);
	color: var(--naglowki);
	font-family: var(--font-ui);
	font-weight: 500;
}

.entry-content th,
.entry-content td {
	border-bottom: 1px solid var(--linia);
	padding: .75em 1em;
}

/* --- ODSTĘPY SEKCJI ---------------------------------------- */
#content.site-content {
	padding-top: var(--sekcja);
	padding-bottom: var(--sekcja);
}

@media screen and (max-width: 782px) {
	:root {
		--sekcja: 44px;
	}

	body {
		font-size: 16px;
	}

	.woocommerce div.product .product_title {
		font-size: 1.8rem;
	}

	.woocommerce div.product p.price {
		font-size: 1.5rem;
	}

	.entry-content h2 {
		font-size: 1.6rem;
	}
}

/* ============================================================
   DOKRĘCENIE ZIELENI

   Filtry w functions.php podstawiają Trustedowi wino i on sam
   przemalowuje większość swoich elementów. Ale kilka miejsc
   trzyma zieleń #00bc96 wpisaną na sztywno w arkuszu Trusted,
   niezależnie od ustawień. Poniżej te, które da się zobaczyć
   na stronie głównej i w nagłówku.
   ============================================================ */

.featured-readmore,
.featured-readmore:hover,
.entry-meta span .fa,
.entry-footer span .fa,
.infinite-loader,
#cta-section .cta-icon .fa {
	color: var(--marka);
}

.top-cart .item-count,
.top-cart:hover .item-count,
#top-bar a.button,
#top-bar button,
#top-bar input[type="submit"],
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	background: var(--marka);
}

.featured-post,
.pagination a:hover,
.pagination .current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	border-color: var(--marka);
}

/* Nakładka na tytule strony w nagłówku i okruszki nawigacji —
   Trusted liczy je jako przezroczyste wino z kanałem alfa. */
.main-title {
	background: rgba(94, 37, 48, .82);
}

.breadcrumbs .trail-items {
	background: rgba(94, 37, 48, .72);
}


/* ============================================================
   STRONA GŁÓWNA I PODSTRONY

   Reguły obsługujące klasy z pliku „STRONA GŁÓWNA.html".
   Wygląd siedzi tutaj, a Ty w treści zmieniasz wyłącznie tekst.
   Zero zależności od edytora bloków — działa też w edytorze
   klasycznym, w zakładce Tekst.
   ============================================================ */

/* --- Sekcja powitalna -------------------------------------- */
.go-hero {
	background: var(--tlo-alt);
	border-bottom: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	margin-bottom: 56px;
	padding: 56px 40px;
	text-align: center;
}

.go-hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.1;
	margin: 0 0 .5em;
}

.go-hero p {
	font-size: 1.15rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 62ch;
}

.go-nadtytul {
	color: var(--zloto);
	font-family: var(--font-ui);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	margin-bottom: 1.4em;
	text-transform: uppercase;
}

/* --- Zwykła sekcja treści ---------------------------------- */
.go-sekcja {
	margin-bottom: 56px;
}

.go-sekcja h2 {
	margin-top: 0;
}

/* --- Kafle: siatka niezależna od edytora -------------------
   auto-fit sam decyduje, ile kafli zmieści się w rzędzie.
   Przy kolumnie bocznej treść ma około 740 px, więc trzy kafle
   staną w rzędzie, a sześć rozłoży się na dwa rzędy. Na telefonie
   wszystkie wejdą jeden pod drugim, bez żadnej reguły od nas. */
.go-kafle {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	margin-bottom: 56px;
}

.go-kafel {
	background: var(--tlo);
	border: 1px solid var(--linia);
	border-radius: var(--rogi-karta);
	box-shadow: var(--cien);
	padding: 30px 26px;
	transition: box-shadow var(--przejscie), transform var(--przejscie), border-color var(--przejscie);
}

.go-kafel:hover {
	border-color: var(--marka);
	box-shadow: var(--cien-mocny);
	transform: translateY(-2px);
}

.go-kafel h3 {
	font-size: 1.3rem;
	margin-top: 0;
	margin-bottom: .5em;
}

.go-kafel p {
	margin-bottom: 0;
}

.go-kafel p:last-of-type a {
	font-family: var(--font-ui);
	font-size: .9rem;
	font-weight: 500;
}

/* --- Panel wezwania do kontaktu ---------------------------- */
.go-cta {
	background: var(--marka);
	border-radius: var(--rogi-karta);
	color: #F7F0E4;
	margin-bottom: 56px;
	padding: 52px 40px;
	text-align: center;
}

.go-cta h2 {
	color: #F7F0E4;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	margin-top: 0;
}

.go-cta p {
	margin-left: auto;
	margin-right: auto;
	max-width: 56ch;
}

.go-cta a {
	color: var(--zloto-jasne);
}

/* --- Przyciski w treści -----------------------------------
   Własne klasy, nie klasy bloku WordPressa. Dzięki temu wyglądają
   tak samo niezależnie od tego, czy treść powstała w edytorze
   blokowym, klasycznym, czy została wklejona jako HTML. */
.go-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 32px;
}

.go-btn,
.go-btn:visited {
	background: var(--marka);
	border: 1.5px solid var(--marka);
	border-radius: var(--rogi);
	color: #FFFDF8;
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.2;
	padding: .9em 1.9em;
	text-decoration: none;
	transition: background var(--przejscie), transform var(--przejscie), color var(--przejscie);
}

.go-btn:hover,
.go-btn:focus {
	background: var(--marka-hover);
	border-color: var(--marka-hover);
	color: #FFFDF8;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Wariant obwódkowy — do działania drugorzędnego */
.go-btn-obwodka,
.go-btn-obwodka:visited {
	background: transparent;
	color: var(--marka);
}

.go-btn-obwodka:hover,
.go-btn-obwodka:focus {
	background: var(--marka);
	color: #FFFDF8;
}

/* Przycisk na winnym panelu — kremowy z winnym napisem.
   Winny przycisk na winnym tle byłby dokładnie tym samym błędem,
   który zrobiłem przy przycisku na stronie głównej. */
.go-cta .go-btn,
.go-cta .go-btn:visited {
	background: #F7F0E4;
	border-color: #F7F0E4;
	color: var(--marka);
}

.go-cta .go-btn:hover,
.go-cta .go-btn:focus {
	background: var(--zloto-jasne);
	border-color: var(--zloto-jasne);
	color: var(--ciemny);
}

/* --- Zdanie zamykające ------------------------------------- */
.go-motto {
	border-top: 1px solid var(--linia);
	color: var(--tekst-cichy);
	font-family: var(--font-naglowki);
	font-size: 1.5rem;
	line-height: 1.4;
	margin-bottom: 0;
	padding-top: 40px;
	text-align: center;
}

@media screen and (max-width: 782px) {
	.go-hero {
		padding: 36px 22px;
	}

	.go-cta {
		padding: 36px 22px;
	}

	.go-hero,
	.go-sekcja,
	.go-kafle,
	.go-cta {
		margin-bottom: 36px;
	}
}

/* ============================================================
   PRZYCISKI BLOKU WORDPRESSA

   To była przyczyna nieczytelnego przycisku na stronie głównej.
   Nadałem styl przyciskom WooCommerce i formularzy, ale nie
   przyciskom bloku Przycisk. Dostały więc grafitowe tło od
   WordPressa, a napis odziedziczył wino z reguły dla linków.
   Wino na grafitcie — nie do przeczytania.

   Lekcja na przyszłość: kolor tła i kolor tekstu ustawia się
   zawsze razem, jedną regułą. Nigdy osobno.
   ============================================================ */

.wp-block-button__link,
.wp-block-button__link:visited {
	background-color: var(--marka);
	border: 1.5px solid var(--marka);
	border-radius: var(--rogi);
	color: #FFFDF8;
	font-family: var(--font-ui);
	font-weight: 500;
	letter-spacing: .04em;
	padding: .9em 1.9em;
	text-decoration: none;
	transition: background-color var(--przejscie), color var(--przejscie), transform var(--przejscie);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
	background-color: var(--marka-hover);
	border-color: var(--marka-hover);
	color: #FFFDF8;
	transform: translateY(-2px);
}

/* Wariant obwódkowy z WordPressa — przezroczyste tło, więc napis
   musi być winny, nie kremowy. Po najechaniu odwrotnie. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:visited {
	background-color: transparent;
	border: 1.5px solid var(--marka);
	color: var(--marka);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--marka);
	color: #FFFDF8;
}


/* ============================================================
   BANERY W KOLUMNIE BOCZNEJ

   Obrazek wrzucony do widżetu w prawej kolumnie dostaje
   zaokrąglone rogi i ciepły cień, tak jak karty produktów.
   Nic nie musisz robić poza wgraniem pliku.
   ============================================================ */

#secondary .widget img,
#secondary .widget_media_image img,
#secondary .textwidget img,
#secondary .widget_custom_html img {
	border-radius: var(--rogi-karta);
	box-shadow: var(--cien);
	display: block;
	height: auto;
	width: 100%;
}

/* Widżet zawierający wyłącznie baner nie potrzebuje pergaminowej
   ramki wokół siebie — obrazek ma własną. */
#secondary .widget_media_image,
#secondary .widget_block:has(> figure) {
	background: none;
	border: none;
	padding: 0;
}

#secondary .widget img:hover {
	box-shadow: var(--cien-mocny);
}

/* --- DOSTĘPNOŚĆ: WIDOCZNY FOKUS ---------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--marka);
	outline-offset: 2px;
}

/* Kto wyłączył animacje w systemie, ten ich nie zobaczy. */
@media (prefers-reduced-motion: reduce) {
	*,
	*:before,
	*:after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}

	.woocommerce ul.products li.product:hover,
	button:hover,
	.woocommerce a.button:hover {
		transform: none;
	}
}


/* ============================================================
   v1.5.0 — ROZWIJANE MENU W KOLORZE PASKA

   Trusted maluje podmenu tym samym kolorem, co stopkę i panel
   koszyka (u nas: orzech #211711). Na tle winnego paska czyta się
   to jako czarną płytę doklejoną do wina.

   Poniższe reguły przestawiają WYŁĄCZNIE rozwijane menu na kolor
   paska nagłówka. Stopka, górny pasek, panel logowania i podglądu
   koszyka zostają orzechowe — one mają być ciemniejsze.

   Sekcja jest na końcu pliku celowo: w CSS przy tej samej sile
   selektora wygrywa reguła późniejsza, więc te trzy reguły
   nadpisują wszystko, co ustawiono wyżej, bez użycia !important.

   Chcesz cofnąć zmianę? W palecie na górze wpisz
   --podmenu-tlo: var(--ciemny);
   ============================================================ */

/* Podmenu na komputerze — rozwijane pod pozycją MARKI i REGULAMIN */
#primary-menu ul,
#top-bar ul > li > ul {
	background: var(--podmenu-tlo);
	border: none;
}

/* Delikatna linia rozdzielająca pozycje w podmenu. Bez niej wino
   na winie zlewa się w jedną plamę i nie widać, gdzie kończy się
   jedna marka, a zaczyna druga. */
#primary-menu ul li + li > a {
	border-top: 1px solid rgba(252, 250, 244, 0.10);
}

/* Podświetlenie pozycji pod kursorem — jaśniejsze wino,
   nie czarne przygaszenie */
#primary-menu ul li > a:hover {
	background: rgba(252, 250, 244, 0.07);
	color: var(--zloto-jasne);
}

/* Menu na telefonie i tablecie — ten sam kolor, żeby rozsuwane
   menu było przedłużeniem paska */
@media screen and (max-width: 1024px) {
	#primary-menu,
	.site-navigation.centered #primary-menu,
	#masthead.light #primary-menu li a {
		background-color: var(--podmenu-tlo);
	}
}


/* ============================================================
   v1.5.1 — BLOKI WORDPRESSA: WYSZUKIWANIE

   Przycisk „Szukaj" w prawej kolumnie był ciemnoszary #32373C
   — to kolor własny WordPressa, nie z naszej palety. Napis siedział
   w dolnej połowie przycisku, a ogonek litery „j" przycinała dolna
   krawędź.

   PRZYCZYNA. Widżet wyszukiwania to blok WordPressa, nie zwykły
   formularz. Ma własne klasy .wp-block-search__button
   i .wp-block-search__input, na które nasz arkusz nie sięgał —
   stylowaliśmy tylko ogólne button i input[type="submit"].
   Rdzeń WordPressa maluje swoje bloki własnymi regułami i wygrywa.

   To ta sama pomyłka co przy .wp-block-button__link w wersji 1.4.0:
   ogólny selektor nie zastąpi klasy bloku. Dlatego ta sekcja obejmuje
   też pozostałe bloki, które mogą trafić do kolumny bocznej.

   Ogonek litery „j" znikał, bo przycisk dziedziczył interlinię 1.7
   od Lory. Pudełko tekstu było wyższe niż przycisk i wystawało poza
   dolną krawędź. Stąd niżej jawne line-height: 1.
   ============================================================ */

/* Pole i przycisk mają być jedną parą: ta sama wysokość,
   te same zaokrąglenia. */
.wp-block-search__input {
	background: var(--tlo);
	border: 1px solid var(--linia);
	border-radius: var(--rogi);
	font-family: var(--font-ui);
	font-size: 15px;
	height: 46px;
	line-height: 1;
	padding: 0 14px;
}

.wp-block-search__input:focus {
	border-color: var(--marka);
	outline: 2px solid var(--marka-jasne);
	outline-offset: 1px;
}

/* Przycisk wygląda tak samo jak wszystkie inne przyciski na stronie.
   Nie wprowadzam trzeciego wzoru przycisku — spójność jest ważniejsza
   od pomysłu. */
.wp-block-search__button,
.wp-block-search .wp-block-search__button {
	background: var(--marka);
	border: none;
	border-radius: var(--rogi);
	box-shadow: none;
	color: #FFFDF8;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .04em;

	/* trzy linijki, które naprawiają ucięty ogonek „j":
	   jawna interlinia, jawna wysokość, odstępy tylko po bokach */
	line-height: 1;
	height: 46px;
	padding: 0 22px;

	margin-left: 8px;
	transition: background var(--przejscie), transform var(--przejscie);
}

.wp-block-search__button:hover {
	background: var(--marka-hover);
	transform: translateY(-2px);
}

.wp-block-search__button:focus-visible {
	outline: 2px solid var(--zloto-jasne);
	outline-offset: 2px;
}

/* Wariant „przycisk w środku pola", jeśli kiedyś go włączysz */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background: var(--tlo);
	border: 1px solid var(--linia);
	border-radius: var(--rogi);
	padding: 3px;
}

.wp-block-search__button-inside .wp-block-search__input {
	border: none;
	height: 40px;
}

.wp-block-search__button-inside .wp-block-search__button {
	height: 40px;
	margin-left: 0;
}

/* Pozostałe bloki rdzenia w kolumnie bocznej. Widżety blokowe mają
   inne klasy niż widżety klasyczne, więc trzeba je wymienić osobno. */
.wp-block-heading,
.wp-block-group h2,
.widget .wp-block-heading {
	font-family: var(--font-naglowki);
	color: var(--naglowki);
}

.wp-block-latest-posts__list li,
.wp-block-latest-comments li,
.wp-block-categories li,
.wp-block-archives li {
	border-bottom: 1px solid var(--linia);
	padding-bottom: .55em;
	margin-bottom: .55em;
}

.wp-block-latest-posts__list li:last-child,
.wp-block-latest-comments li:last-child,
.wp-block-categories li:last-child,
.wp-block-archives li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.wp-block-latest-posts__post-date {
	color: var(--tekst-cichy);
	font-family: var(--font-ui);
	font-size: 13px;
}