/*
 Theme Name:   To Te Kwiaty 1
 Theme URI:    http://example.com/
 Description:  To Te Kwiaty
 Author:       John Doe
 Author URI:   http://example.com
 Template:     ashe-pro-premium
 Version:      2.0.30
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  ttkw
*/

/* Lupa FiboSearch: biała w pasku górnym, czarna w menu mobilnym.
   Wtyczka ma jeden kolor dla obu miejsc i wstawia go później w <head>,
   więc selektor idzie przez #top-menu / #mobile-menu.
   Kreska pierścienia jest pogrubiona. W pasku znaczek ma 12 px:
   link lupy jest wysoki na cały rząd (50 px) i bez tego svg
   rozciąga się do 20 px, grubszy niż konto i koszyk. */
#top-menu .dgwt-wcas-search-icon path {
	fill: #fff;
	stroke: #fff;
	stroke-width: 3px;
}

#mobile-menu .dgwt-wcas-search-icon path {
	fill: #000;
	stroke: #000;
	stroke-width: 2px;
}

/* W menu telefonu wiersze mają line-height 3.4, ale lupa jest samym
   svg 20 px, więc wiersz zwija się do ikony i kreska pierścienia
   obcina się o krawędź. Ten sam rytm co tekst, znaczek odrobinę mniejszy. */
#mobile-menu > li:has(.dgwt-wcas-search-icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.4em;
}

#mobile-menu .dgwt-wcas-ico-magnifier-handler {
	width: 16px;
	height: 16px;
	overflow: visible;
}

/* Wiersze metod jak w Storefront: szary pasek, jaśniejszy opis, ciemniejszy hover.
   Logo przy prawej krawędzi — Ashe robi z img blok na pełną szerokość. */
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 0.5em;
	line-height: 1.5;
	background-color: #e5e2e2;
	border-radius: var(--ttkw-radius);
	overflow: hidden;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:hover {
	background-color: #dbd7d7;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input {
	margin: 0 1em 0 1.41575em;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box {
	flex: 1 0 100%;
	margin: 0;
	padding: 1.41575em;
	border-radius: 0;
	background-color: #ebeaea;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > .payment_box::before {
	display: none;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 1.41575em 1.41575em 1.41575em 0;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
	display: inline-block;
	flex: 0 0 auto;
	float: none;
	width: auto;
	max-width: 70px;
	max-height: 1.618em;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

/*
 * Skóra pól i przycisków na czas Ashe. Do wycięcia po Purple (tam to jest theme.json).
 * Promień z !important, bo Ashe zeruje -webkit-border-radius na input/textarea/select.
 * Kolor ramki z !important, bo bloki WooCommerce rysują border z currentColor w 80%.
 * Tło pola jak strona (#efecec). Na kasie pole jest o ton jaśniejsze od karty.
 * Selektor przycisku idzie od body.woocommerce — klasy .woocommerce nie ma wewnątrz .page-content.
 */
:root {
	--ttkw-radius: 6px;
	--ttkw-line: rgba(37, 37, 37, 0.35);
	--ttkw-line-focus: rgba(37, 37, 37, 0.55);
	--ttkw-field: #efecec;
	--ttkw-ink: #3a3632;
}

.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="password"],
.page-content input[type="search"],
.page-content input[type="url"],
.page-content input[type="number"]:not(.wc-block-components-quantity-selector__input),
.page-content textarea,
.page-content select,
.wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	-webkit-border-radius: var(--ttkw-radius) !important;
	border-radius: var(--ttkw-radius) !important;
	border-color: var(--ttkw-line) !important;
	background-color: var(--ttkw-field) !important;
	color: var(--ttkw-ink);
}

/* Kasa: karta jest #efecec, pole o ton jaśniejsze, żeby było widać gdzie pisać. */
body.ttkw-checkout-columns .wc-block-components-text-input input,
body.ttkw-checkout-columns .wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: #f7f5f5 !important;
}

/* Pusta etykieta bloku stoi w polu jak placeholder: 16 px i color: inherit. */
.wc-block-components-text-input:not(.is-active) label {
	font-size: 13px !important;
	color: rgba(37, 37, 37, 0.5) !important;
}

.wc-block-components-text-input.is-active label {
	color: rgba(37, 37, 37, 0.55) !important;
}

/* Kwadrat 20 px. Ashe zeruje narożnik inputa, więc promień musi być z !important. */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.page-content input[type="checkbox"] {
	-webkit-border-radius: var(--ttkw-radius) !important;
	border-radius: var(--ttkw-radius) !important;
	border-color: var(--ttkw-line) !important;
	background-color: #f7f5f5 !important;
}

/* Radio bloku jest kółkiem. Ashe zeruje promień i zostaje kwadrat z kropką. */
.wc-block-components-radio-control__input,
.page-content input[type="radio"] {
	-webkit-border-radius: 50% !important;
	border-radius: 50% !important;
	border-color: var(--ttkw-line) !important;
	background-color: #f7f5f5 !important;
}

/* „Dostawa” / „Odbiór”: zaznaczenie było białe z czarną kreską. */
.wc-block-checkout__shipping-method-option--selected {
	background: #f7f5f5 !important;
	border-color: var(--ttkw-line) !important;
	border-radius: var(--ttkw-radius);
}

/* Zaznaczona płatność: Woo rysuje tylko ciemny inset, bez tła. */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
	background: #f7f5f5 !important;
	box-shadow: inset 0 0 0 1.5px var(--ttkw-line) !important;
	border-radius: var(--ttkw-radius);
}

/* Ikona metody jest w środku etykiety. align-right ustawia flex-end tylko w pudełku ikony, a pudełko jest szerokie jak obrazek. */
.wc-block-components-radio-control__label-group .wc-block-components-radio-control__label {
	display: flex;
	align-items: center;
	width: 100%;
}

.wc-block-components-radio-control__label-group .wc-block-components-payment-method-icons--align-right {
	width: auto;
	margin: 0 0 0 auto;
}

/* Kraj na kasie: białe pudełko jest na kontenerze, nie na select. */
.wc-blocks-components-select .wc-blocks-components-select__container {
	-webkit-border-radius: var(--ttkw-radius) !important;
	border-radius: var(--ttkw-radius) !important;
	background: transparent;
}

.page-content input[type="text"]:focus,
.page-content input[type="email"]:focus,
.page-content input[type="tel"]:focus,
.page-content input[type="password"]:focus,
.page-content input[type="search"]:focus,
.page-content input[type="url"]:focus,
.page-content input[type="number"]:not(.wc-block-components-quantity-selector__input):focus,
.page-content textarea:focus,
.page-content select:focus,
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--ttkw-line-focus) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(58, 54, 50, 0.06);
}

.woocommerce .page-content a.button,
.woocommerce .page-content button.button,
.woocommerce .page-content input.button,
.woocommerce .page-content a.button.alt,
.woocommerce .page-content button.button.alt,
.woocommerce .page-content input.button.alt,
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.wp-element-button {
	border-radius: var(--ttkw-radius) !important;
	text-transform: none !important;
	font-weight: 500;
	letter-spacing: 0.01em !important;
}

/* Koszyk to link, kasa to button. Ashe przywraca systemowy wygląd buttona, więc kolory się rozjeżdżają. */
.wc-block-components-button.contained:not(.is-link) {
	appearance: none;
	background-color: #333 !important;
	color: #fff !important;
	min-height: 48px;
}

.wc-block-components-button.contained:not(.is-link):hover {
	background-color: #ca9b52 !important;
	color: #fff !important;
}

/* Ramka karty jak w Dawn: 6 px, kreska 1 px przy 10% krycia.
   Obejmuje zdjęcie, tytuł i cenę. Zdjęcie jest dosunięte do krawędzi, więc zaokrąglenie ramki je przycina. */
.woocommerce ul.products li.product,
.wc-block-product-template li.wc-block-product,
.wc-block-featured-category,
.wc-block-featured-product,
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce div.product div.images:not(:has(.flex-viewport)) .woocommerce-product-gallery__image {
	border: 1px solid rgba(37, 37, 37, 0.1);
	border-radius: var(--ttkw-radius);
	overflow: hidden;
}

.woocommerce ul.products li.product,
.wc-block-product-template li.wc-block-product {
	padding-bottom: 12px;
}

/* Miniatury galerii na całą szerokość zdjęcia głównego.
   Ashe odejmuje 1 px od każdej, więc rząd jest krótszy o 4 px. */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 5px;
}

.woocommerce div.product div.images ol.flex-control-thumbs li {
	float: none;
	flex: 0 0 calc((100% - 15px) / 4);
	width: calc((100% - 15px) / 4);
	min-width: 0;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	width: 100%;
	height: auto;
}

/* Wybór wariantu: Ashe daje liście 15 px marginesu pod spodem, komórkom po
   10 px, a tabeli 22 px — pod listą było ~50 px pustego miejsca. Teraz 16 px
   do kafelka bileciku / ceny, a nazwa atrybutu na wysokości listy.
   Selektor mocniejszy niż w WooCommerce — jego arkusz ładuje się po naszym. */
.woocommerce div.product form.variations_form table.variations {
	margin-bottom: 8px;
}

.woocommerce div.product form.variations_form table.variations th,
.woocommerce div.product form.variations_form table.variations td {
	padding-top: 0;
	padding-bottom: 8px;
	vertical-align: middle;
}

.woocommerce div.product form.variations_form table.variations select {
	margin-bottom: 0;
}

/* Lista wariantów — tylko gdy opcji jest więcej niż przycisków
   (totekwiaty-core, variation-buttons; zwykle są przyciski).
   Nazwa atrybutu tak szeroka jak jej tekst, równo z lewą krawędzią kafelka
   bileciku i ceny, potem stały odstęp 16 px i lista o stałej szerokości.
   Bez tego tabela dzieliła szerokość według treści obu kolumn: lista
   zaczynała się w innym miejscu przy każdym produkcie („Ilość” — daleko,
   „Rozmiar bukietu” — blisko) i miała szerokość swojej najdłuższej opcji. */
.woocommerce div.product form.variations_form table.variations th.label {
	width: 1%;
	padding-left: 0;
	padding-right: 16px;
	white-space: nowrap;
}

.woocommerce div.product form.variations_form table.variations td.value {
	padding-right: 0;
}

.woocommerce div.product form.variations_form table.variations td.value select {
	width: 220px;
	max-width: 100%;
}

/* Na telefonie nazwa i 220 px listy nie mieszczą się w kolumnie — lista
   zajmuje resztę wiersza, do prawej krawędzi kafelka bileciku. */
@media screen and (max-width: 600px) {
	.woocommerce div.product form.variations_form table.variations td.value select {
		width: 100%;
	}
}

/* Strona główna: cena i przycisk schodzą razem na dół karty, gdy tytuł ma drugą linię. */
.wc-block-product-template.is-flex-container {
	align-items: stretch;
}

.wc-block-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
}

.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: auto;
}

/* Tytuł zawsze na dwie linie, żeby karty w rzędzie miały tę samą wysokość. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	line-height: 1.35;
	min-height: calc(2lh + 6px);
	padding-bottom: 6px;
}

/* Najazd na kartę lekko powiększa zdjęcie, jak w Dawn. Od 990 px, bo na telefonie hover zostaje. */
@media screen and (min-width: 990px) {
	.wc-block-product-template .wc-block-components-product-image,
	.wc-block-product-template .wc-block-components-product-image a,
	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
		overflow: hidden;
	}

	.wc-block-product-template .wc-block-components-product-image img,
	.wc-block-featured-category__background-image,
	.wc-block-featured-product__background-image,
	.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
		transition: transform 0.5s ease;
	}

	.wc-block-product-template li.wc-block-product:hover .wc-block-components-product-image img,
	.wc-block-featured-category:hover .wc-block-featured-category__background-image,
	.wc-block-featured-product:hover .wc-block-featured-product__background-image,
	.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img {
		transform: scale(1.03);
	}
}

/* Paginacja kategorii i stepper ilości w koszyku. */
.blog-pagination.numeric a,
.blog-pagination.numeric span,
.wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	border-radius: var(--ttkw-radius);
}

.woocommerce span.onsale {
	border-radius: var(--ttkw-radius);
}

/* Pasek ciasteczek: wtyczka daje pigułkę 150 px. */
#moove_gdpr_cookie_info_bar .mgbutton,
#moove_gdpr_cookie_modal .mgbutton {
	border-radius: var(--ttkw-radius) !important;
}

/* Mapa Google w stopce. */
.ashe-widget iframe[src*="google.com/maps"] {
	border-radius: var(--ttkw-radius);
}

/* Zdjęcie w bloku „Media i tekst”: edytor zaokrągla cały blok, nie fotografię. */
.wp-block-media-text__media {
	border-radius: var(--ttkw-radius);
	overflow: hidden;
}

/* Przyciski w treści strony: Ashe nie daje im marginesu, więc nagłówek pod spodem się przyklejał. */
.post-content .wp-block-buttons:not(:last-child) {
	margin-bottom: 26px;
}

/* Ikonki konta i koszyka (functions.php › ttkw_top_bar_icons, ttkw_mobile_nav_icons). */
.ttkw-icon-link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 6px;
	color: inherit;
	line-height: 1;
}

.ttkw-icon-link svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Licznik produktów: kółko przy prawym górnym rogu koszyka. */
.ttkw-cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	letter-spacing: 0;
}

.ttkw-cart-count[hidden] {
	display: none;
}

/* Górny pasek (komputer): białe jak linki paska, licznik białe kółko z ciemną cyfrą. */
/* Pasek to jeden rząd: język | narzędzia. Białe znaki między li
   (inline-block) dokładały nierówne luki, stąd flex. */
#top-menu {
	display: flex;
	align-items: center;
}

#top-menu > li.ttkw-top-icon {
	margin-left: 12px;
}

#top-menu .ttkw-top-icon .ttkw-icon-link {
	margin-left: 0;
	padding: 6px 0;
	color: #fff;
}

/* Kreska tylko między językiem a lupą. PL zmienia cały sklep,
   lupa, konto i koszyk zostają jednym rzędem — licznik koszyka
   siedzi przy krawędzi ikony i o kolejną kreskę by się ocierał.
   Linia krótsza niż pasek, w kolorze linków. */
#top-menu > li.pll-parent-menu-item {
	margin-right: 25px;
}

#top-menu > li.pll-parent-menu-item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -13px;
	width: 1px;
	height: 14px;
	transform: translateY(-50%);
	background: #fff;
	pointer-events: none;
}

/* Ashe dokłada lupie lewy margines i padding jak pozycji tekstowej,
   więc ikona odjeżdżała od kreski. To samo, gdy przełącznika nie ma
   i lupa jest pierwszą pozycją paska. */
#top-menu > li.pll-parent-menu-item + li .dgwt-wcas-search-icon,
#top-menu > li:first-child .dgwt-wcas-search-icon {
	display: flex;
	align-items: center;
	width: 12px;
	height: 50px;
	margin-left: 0;
	padding-right: 0;
	padding-left: 0;
}

#top-menu > li.pll-parent-menu-item + li .dgwt-wcas-ico-magnifier-handler,
#top-menu > li:first-child .dgwt-wcas-ico-magnifier-handler {
	flex: none;
	width: 12px;
	height: 12px;
}

#top-menu .ttkw-cart-count {
	background: #fff;
	color: #1a1a1a;
}

/* Przełącznik języka (Polylang, same flagi, bez nazw). Ashe w normalize
   ustawia img { display: block }, a wysokość pozycji menu bierze z
   line-height tekstu (pasek 50 px, submenu 3.7). Blokowy obrazek nie
   tworzy wiersza, więc link zwija się do 11 px flagi. Z powrotem w linii
   flaga łapie tę wysokość — także w menu mobilnym, gdzie Ashe wstawia
   to samo menu.
   Szerokość: Ashe daje każdemu submenu paska stałe 170 px pod etykietę
   tekstową i dokleja je do lewej krawędzi li. Link ma padding 0 5px,
   a pierwsza pozycja (tu przełącznik) traci tylko lewy, więc flaga
   nie jest na środku li. Bez poziomego paddingu li = flaga, lista
   zwija się do obrazka i schodzi na jego środek. */
#top-menu .pll-parent-menu-item > a img,
#top-menu .lang-item > a img,
#mobile-menu .pll-parent-menu-item > a img,
#mobile-menu .lang-item > a img {
	display: inline-block;
	vertical-align: middle;
}

/* Ashe daje linkowi line-height 50 px. Napis siedzi wtedy na linii
   pisma, więc „PL” jest wyżej niż środek ikon i kreski. Flex
   środkuje literę i strzałkę w tym samym rzędzie. */
#top-menu > li.pll-parent-menu-item > a {
	display: flex;
	align-items: center;
	height: 50px;
	padding-right: 0;
	padding-left: 0;
	line-height: 1;
	transform: translateY(1.5px);
}

/* Górny pasek nie dostaje strzałki podmenu — Ashe rysuje ją tylko przy
   #main-menu (fontello \f107). Ten sam znak przy kodzie języka, żeby
   było widać, że to menu. W telefonie Ashe ma własny przycisk. */
#top-menu > li.pll-parent-menu-item > a:after {
	font-family: "fontello";
	content: "\f107";
	margin-left: 4px;
	font-size: 10px;
	line-height: 1;
	position: relative;
	top: -2px;
}

#top-menu .pll-parent-menu-item > .sub-menu {
	width: max-content;
	left: 50%;
	transform: translateX(-50%);
}

#top-menu .pll-parent-menu-item > .sub-menu > li > a {
	width: auto;
	padding: 0 10px;
	text-align: center;
}

/* Telefon: w przyklejonym pasku menu głównego, po prawej — tam, gdzie Ashe
   stawia swoje ikonki (30 px od krawędzi, 20 px na małych ekranach). */
.ttkw-mobile-icons {
	display: none;
}

@media screen and ( max-width: 979px ) {
	.ttkw-mobile-icons {
		position: absolute;
		top: 50%;
		right: 30px;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 8px;
		transform: translateY(-50%);
	}
}

@media screen and ( max-width: 480px ) {
	.ttkw-mobile-icons {
		right: 20px;
	}
}

/*
 * „Dziękujemy” i zamówienie w „Moim koncie” — tabela zamówienia jak rachunek.
 * WooCommerce dzieli ją na dwie równe kolumny, więc kwota zajmowała pół
 * szerokości, a nazwa i bilecik (na telefonie) były ściśnięte. Tu każdy
 * wiersz to siatka:
 * - pozycje: nazwa (z bilecikiem) | kwota w wąskiej kolumnie po prawej,
 *   w linii nazwy;
 * - sumy pod spodem: etykieta | wartość do prawej (może się zawinąć);
 * - na telefonie bilecik może sięgnąć pod kolumnę kwoty (do prawej
 *   krawędzi kwoty), ale nie szerzej niż wszędzie (26em).
 * Przy okazji: Ashe daje ostatniemu td wiersza 20/18 px (pod koszyk). To
 * łapie też ostatni wiersz tfoot — „Adnotacja” na „Dziękujemy” — i wartość
 * stoi niżej oraz bardziej w lewo. Tu odstępy jak w pozostałych wierszach.
 */
.woocommerce table.woocommerce-table--order-details {
	--ttkw-order-total: 7em;
	display: block;
}

.woocommerce table.woocommerce-table--order-details :is(thead, tbody, tfoot) {
	display: block;
}

/* Ashe daje wierszom tabel padding 10px — w tabeli niewidoczny, w siatce tak. */
.woocommerce table.woocommerce-table--order-details tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ttkw-order-total);
	padding: 0;
}

.woocommerce table.woocommerce-table--order-details tfoot tr {
	grid-template-columns: auto minmax(0, 1fr);
}

.woocommerce table.woocommerce-table--order-details :is(th, td),
.woocommerce table.woocommerce-table--order-details :is(tbody, tfoot) tr:last-child :is(th, td) {
	padding: 13px 12px;
}

/* Kwoty i wartości sum do prawej; kwota pozycji w jednej linii. */
.woocommerce table.woocommerce-table--order-details :is(thead th:last-child, td.product-total, tfoot td) {
	text-align: right;
}

.woocommerce table.woocommerce-table--order-details td.product-total {
	padding-left: 0;
	white-space: nowrap;
}

@media (max-width: 600px) {
	/* Bilecik może sięgnąć pod kolumnę kwoty (7em), aż do prawej krawędzi
	   kwoty — kwota jest tylko w pierwszej linii, a bilecik zaczyna się pod
	   nazwą. Szerokość dalej ograniczona jak wszędzie (26em), więc na
	   szerszym oknie zostaje zwykłą ramką. */
	.woocommerce table.woocommerce-table--order-details td.product-name .wc-item-meta:has(.ttkw-card-text) {
		margin-right: calc(-1 * var(--ttkw-order-total));
	}
}