/*
 * Bilecik — jeden wygląd na karcie produktu, w koszyku i w checkoucie:
 *
 *   ┌───────────────────────────────┐
 *   │ ✉ Bilecik                  ✎ │  nagłówek: koperta, tytuł, akcja
 *   ├───────────────────────────────┤  kreska
 *   │ Wszystkiego najlepszego!      │  treść
 *   ├───────────────────────────────┤  kreska  ┐ tylko przy pisaniu
 *   │ Zostało 37 znaków             │  licznik ┘ i blisko limitu
 *   └───────────────────────────────┘
 *
 * Ramka cienka szara; w trakcie pisania ciemnozielona (#405147), a o ton
 * jaśniejsze jest tylko pole z treścią — nagłówek i stopka zostają w kolorze
 * tła. Bez bileciku — przerywany kafelek „✉ Dodaj bilecik · bezpłatnie”.
 * Akcja w nagłówku: w podglądzie ołówek, przy pisaniu kosz (w koszyku kosz
 * tylko przy pisaniu — w podglądzie stałby obok kosza bukietu). W checkoucie
 * bez akcji, do odczytu.
 */
.ttkw-card,
.ttkw-card-view__box,
.ttkw-card-edit__open,
.wc-block-components-product-details__bilecik,
dl.variation dd.variation-Bilecik,
.wc-item-meta .ttkw-card-text {
	--ttkw-card-accent: #405147;
	--ttkw-card-line: rgba(37, 37, 37, 0.12);
	box-sizing: border-box;
	width: 100%;
	max-width: 26em;
	border: 1px solid #cfcbc8;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.45;
	color: #252525;
	transition: border-color 0.15s, background-color 0.15s;
}

/* Nagłówek: koperta, tytuł (pogrubiony), „· bezpłatnie”, akcja po prawej. */
.ttkw-card__toggle,
.ttkw-card-view__head,
.ttkw-card-edit__open {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 40px;
	margin: 0;
	padding: 6px 6px 6px 12px;
	box-sizing: border-box;
}

.ttkw-card__icon {
	flex: none;
	color: var(--ttkw-card-accent);
}

.ttkw-card__title,
.ttkw-card-view__title {
	font-weight: 600;
}

.ttkw-card__free {
	color: #6f6a69;
	font-size: 13px;
}

.ttkw-card__free::before {
	content: "· ";
}

/* Ikona akcji (ołówek, kosz) w nagłówku — po prawej, 30 × 30 px. */
.ttkw-card__remove,
.ttkw-card-view__action {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #6f6a69;
	cursor: pointer;
}

.ttkw-card__remove:hover,
.ttkw-card-view__action:hover,
.ttkw-card-view__box:hover .ttkw-card-view__action {
	color: var(--ttkw-card-accent);
}

.ttkw-card-view__action:focus-visible {
	outline: 2px solid var(--ttkw-card-accent);
	outline-offset: -2px;
}

.ttkw-card-view__action:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Treść i pole: pod kreską oddzielającą nagłówek. */
.ttkw-card-view__text,
.ttkw-card__body,
.ttkw-card-view__box textarea {
	border-top: 1px solid var(--ttkw-card-line);
}

/* Stopka (licznik znaków): za kreską, mniejsza i szara; tylko blisko limitu. */
.ttkw-card__note[hidden] {
	display: none;
}

.ttkw-card__note {
	margin: 0;
	padding: 6px 12px 8px;
	border-top: 1px solid var(--ttkw-card-line);
	font-size: 12.5px;
	color: #6f6a69;
}

.ttkw-card__note.is-low {
	color: #8a5a1c;
	font-weight: 600;
}

/* Pisanie: ramka zielona; jaśniejsze (jak pola na kasie) jest tylko pole
   z treścią, nagłówek i stopka w kolorze tła. Bez licznika pole jest na
   samym dole — overflow przycina jego tło do zaokrąglonych rogów ramki. */
.ttkw-card:has(.ttkw-card__check:checked),
.ttkw-card-view__box.is-editing {
	border-color: var(--ttkw-card-accent);
	overflow: hidden;
}

.ttkw-card:has(.ttkw-card__check:checked):focus-within,
.ttkw-card-view__box.is-editing:focus-within {
	box-shadow: 0 0 0 1px var(--ttkw-card-accent);
}

/* Pole bez własnej ramki i tła — tło daje ramka. Motyw (ttkw/style.css,
   Ashe) daje polom ramkę, tło i zaokrąglenie, część z !important. */
.ttkw-card .ttkw-card__body textarea,
.ttkw-card-view .ttkw-card-view__box textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Dwie linie na start w obu miejscach — dalej pole rośnie z treścią. */
	min-height: 2.9em;
	margin: 0;
	padding: 8px 12px;
	border: 0 !important;
	border-radius: 0 !important;
	background: #f7f5f5 !important;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1.45;
}

.ttkw-card .ttkw-card__body textarea {
	/* Bez uchwytu — pole rośnie samo (card-message.js), jak w koszyku. */
	resize: none;
}

.ttkw-card-view .ttkw-card-view__box textarea {
	border-top: 1px solid var(--ttkw-card-line) !important;
	resize: none;
	overflow: hidden;
}

.ttkw-card .ttkw-card__body textarea:focus,
.ttkw-card-view .ttkw-card-view__box textarea:focus {
	outline: none;
	box-shadow: none;
}

/* --- Karta produktu (card-message.php) -------------------------------- */
/* Niezaznaczony — przerywany kafelek „Dodaj bilecik z życzeniami”; po
   zaznaczeniu ramka, kreska, pole i licznik. Bez skryptu, przez :checked. */
.ttkw-card {
	position: relative;
	clear: both;
	margin: 0 0 16px;
	border-style: dashed;
	border-color: #b9b3af;
}

.ttkw-card:hover {
	border-color: var(--ttkw-card-accent);
}

.ttkw-card:has(.ttkw-card__check:checked) {
	border-style: solid;
}

.ttkw-card:has(.ttkw-card__check:focus-visible) {
	outline: 2px solid var(--ttkw-card-accent);
	outline-offset: 2px;
}

.ttkw-card__check {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ttkw-card__toggle {
	cursor: pointer;
}

.ttkw-card__on,
.ttkw-card__remove,
.ttkw-card__check:checked + .ttkw-card__toggle .ttkw-card__add {
	display: none;
}

/* Zaznaczony: nagłówek nie przełącza (żeby przypadkiem nie schować treści),
   tylko kosz po prawej. */
.ttkw-card__check:checked + .ttkw-card__toggle {
	cursor: default;
	pointer-events: none;
}

.ttkw-card__check:checked + .ttkw-card__toggle .ttkw-card__on {
	display: inline;
}

.ttkw-card__check:checked + .ttkw-card__toggle .ttkw-card__remove {
	display: flex;
	pointer-events: auto;
}

.ttkw-card__body {
	display: none;
}

.ttkw-card__check:checked ~ .ttkw-card__body {
	display: block;
}

/* Pole już ma kreskę nad sobą (z .ttkw-card__body). */
.ttkw-card .ttkw-card__body textarea {
	border-top: 0 !important;
}

/* --- Koszyk blokowy (card-message-cart.js) ---------------------------- */
.ttkw-card-edit-host {
	align-self: stretch;
	margin: 6px 0 8px;
}

.ttkw-card-edit-host:empty {
	display: none;
}

/* Bilecik pod kolumną kwoty „łącznie”: prawa krawędź ramki równo z prawą
   krawędzią kwoty nad nią (.is-wide i --ttkw-card-room ustawia
   card-message-cart.js, gdy bilecik zaczyna się poniżej kwoty i plakietki
   promocji). Działa w tabeli koszyka (szersze okna) i w siatce (telefon).
   Ujemny margines — tabela i siatka nie liczą szerokości bileciku przy
   dobieraniu kolumn (inaczej wypchnęłaby kwotę). Bilecik leży nad kolumną
   kwoty (z-index) — inaczej jej pusty dół przechwytywał kliknięcia w ramkę
   i ołówek. */
.ttkw-card-edit-host.is-wide {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	width: var(--ttkw-card-room);
	max-width: none;
	margin-right: calc(-1 * var(--ttkw-card-room));
}

/* Ramka do prawej krawędzi kwoty — bez limitu 26em (także na desktopie). */
.ttkw-card-edit-host.is-wide .ttkw-card-view__box,
.ttkw-card-edit-host.is-wide .ttkw-card-edit__open {
	max-width: none;
}

/* Karta produktu na telefonie: kafelek na całą szerokość formularza, jak
   przyciski wariantów i cena — 26em zostawiało przerwę po prawej. */
@media (max-width: 767px) {
	.ttkw-card {
		max-width: none;
	}
}

/* Bilecik rysuje skrypt — blokowy (dane pozycji) w tym wierszu chowamy.
   Bez skryptu zostaje blokowy, więc treść zawsze widać. */
.wc-block-cart-items__row:has(.ttkw-card-view) .wc-block-components-product-details:has(.wc-block-components-product-details__bilecik) {
	display: none;
}

.ttkw-card-view__box {
	cursor: pointer;
}

.ttkw-card-view__box:not(.is-editing):hover {
	border-color: #a9a39f;
}

.ttkw-card-view__box.is-editing {
	cursor: text;
}

.ttkw-card-view__text {
	padding: 8px 12px 10px;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* Bez bileciku: przerywany kafelek jak na karcie produktu. Motyw (Ashe)
   stylizuje przyciski — zdejmujemy tło, wersaliki i cień. */
.ttkw-card-edit__open {
	border-style: dashed;
	border-color: #b9b3af;
	background: none;
	box-shadow: none;
	color: #252525;
	font: inherit;
	font-size: 14px;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.ttkw-card-view__action {
	box-shadow: none;
	line-height: 1;
}

.ttkw-card-edit__open:hover {
	border-color: var(--ttkw-card-accent);
}

.ttkw-card-edit__open:focus-visible {
	outline: 2px solid var(--ttkw-card-accent);
	outline-offset: 2px;
}

.ttkw-card-edit__link {
	padding: 0;
	border: 0;
	background: none;
	color: #252525;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.ttkw-card-edit__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 8px;
}

/* „Zapisz” jak główne przyciski sklepu (motyw ttkw: grafit, po najechaniu
   złoto), tylko mniejszy; „Anuluj” zwykłym tekstem. Zieleń zostaje dla ramki
   w trakcie edycji. */
.ttkw-card-edit__save {
	padding: 6px 16px;
	border: 0;
	border-radius: var(--ttkw-radius, 6px);
	background: #333;
	color: #fff;
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.15s;
}

.ttkw-card-edit__save:not(:disabled):hover {
	background: #ca9b52;
}

.ttkw-card-edit__save:disabled,
.ttkw-card-edit__link:disabled {
	opacity: 0.5;
	cursor: default;
}

.ttkw-card-edit__error {
	margin: 0.35em 0 0;
	color: #cc1818;
	font-size: 13px;
}

/* --- Checkout i koszyk bez skryptu: dane pozycji bloku ------------------ */
/* Blok rysuje „Bilecik: treść” (klasa z nazwy danych: __bilecik). Ta sama
   ramka: nazwa jako nagłówek z kopertą (bez dwukropka — tekst nazwy
   chowamy, „Bilecik” dopisuje CSS; TODO przy wersji angielskiej), treść pod
   kreską. Ramka od lewej krawędzi opisu do prawej krawędzi pozycji (pod
   kolumną z ceną) — szerokość kolumny opisu zależy od długości ceny, więc
   bez tego każda ramka byłaby inna. 72 px = miniatura (48) i odstęp opisu (24). */
.wc-block-components-order-summary-item:has(.wc-block-components-product-details__bilecik) {
	container-type: inline-size;
}

.wc-block-components-order-summary-item__description:has(.wc-block-components-product-details__bilecik) {
	flex: 1 1 auto;
	min-width: 0;
}

.wc-block-components-product-details:has(.wc-block-components-product-details__bilecik) {
	display: block;
	align-self: stretch;
	width: 100%;
	margin: 8px 0 0;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-details:has(.wc-block-components-product-details__bilecik) {
	width: calc(100cqw - 72px);
	max-width: none;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-details__bilecik {
	max-width: none;
}

.wc-block-components-product-details__bilecik {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-components-product-details__bilecik .wc-block-components-product-details__name {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 6px 12px;
	box-sizing: border-box;
	font-size: 0;
	font-weight: 600;
	color: #252525;
}

.wc-block-components-product-details__bilecik .wc-block-components-product-details__name::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--ttkw-card-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='1.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='1.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wc-block-components-product-details__bilecik .wc-block-components-product-details__name::after {
	content: "Bilecik";
	font-size: 14px;
}

.wc-block-components-product-details__bilecik .wc-block-components-product-details__value {
	display: block;
	padding: 8px 12px 10px;
	border-top: 1px solid var(--ttkw-card-line);
	overflow-wrap: anywhere;
}

/* Klasyczny koszyk i checkout (dt/dd .variation-Bilecik): nazwa nad ramką,
   treść w ramce — klasyczny checkout nie jest już używany. */
dl.variation dt.variation-Bilecik {
	display: block;
	float: none;
	clear: both;
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 600;
	color: #6f6a69;
}

dl.variation dd.variation-Bilecik {
	display: block;
	float: none;
	clear: both;
	margin: 0;
	padding: 8px 12px;
	overflow-wrap: anywhere;
}

dl.variation dd.variation-Bilecik p {
	margin: 0;
}

/* Kolejność w pozycji (koszyk i podsumowanie checkoutu): nazwa, wariant
   („Ilość: 9 sztuk”), cena, bilecik (w koszyku: ze skryptu), ilość. Blok
   wstawia bilecik (dane pozycji) przed wariantem, a oba pod ceną — metadane
   „rozpuszczamy” (display: contents) w kolumnie pozycji i ustawiamy order. */
.wc-block-cart-item__wrap > .wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description > .wc-block-components-product-metadata {
	display: contents;
}

.wc-block-cart-item__wrap > .wc-block-components-product-name,
.wc-block-components-order-summary-item__description > .wc-block-components-product-name {
	order: 1;
}

.wc-block-cart-item__wrap .wc-block-components-product-details:not(:has(.wc-block-components-product-details__bilecik)),
.wc-block-components-order-summary-item__description .wc-block-components-product-details:not(:has(.wc-block-components-product-details__bilecik)) {
	order: 2;
}

.wc-block-cart-item__wrap > .wc-block-cart-item__prices,
.wc-block-components-order-summary-item__description > .wc-block-cart-item__prices {
	order: 3;
}

.wc-block-cart-item__wrap .wc-block-components-product-details:has(.wc-block-components-product-details__bilecik),
.wc-block-components-order-summary-item__description .wc-block-components-product-details:has(.wc-block-components-product-details__bilecik) {
	order: 5;
}

.wc-block-cart-item__wrap > .ttkw-card-edit-host {
	order: 6;
}

.wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
	order: 7;
}

/* Wariant zaraz pod nazwą — bez odstępu, jakby był częścią nazwy. */
.wc-block-cart-item__wrap .wc-block-components-product-details:not(:has(.wc-block-components-product-details__bilecik)),
.wc-block-components-order-summary-item__description .wc-block-components-product-details:not(:has(.wc-block-components-product-details__bilecik)) {
	margin: 2px 0 4px;
}

/* „Dziękujemy” (dane pozycji zamówienia, ttkw_card_display_value): ta sama
   ramka co w koszyku i checkoucie — „Bilecik” z kopertą jako nagłówek nad
   kreską, treść pod spodem. Etykietę WooCommerce („Bilecik:”, pływająca
   w lewo) chowamy — przy ramce wchodziła w treść. */
/* Ramka równo z nazwą produktu, bez wcięcia listy (na telefonie szkoda miejsca). */
.woocommerce .wc-item-meta:has(> li > .ttkw-card-text) {
	padding-left: 0;
}

.woocommerce .wc-item-meta li:has(> .ttkw-card-text) {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

/* .woocommerce i strong — mocniej niż reguła WooCommerce dla etykiety. */
.woocommerce .wc-item-meta li:has(> .ttkw-card-text) > strong.wc-item-meta-label {
	display: none;
}

.wc-item-meta .ttkw-card-text {
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #252525;
	overflow-wrap: anywhere;
}

.wc-item-meta .ttkw-card-text::before {
	content: "Bilecik";
	display: block;
	padding: 8px 12px 8px 39px;
	border-bottom: 1px solid var(--ttkw-card-line);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='1.5' fill='none' stroke='%23405147' stroke-width='1.5'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='%23405147' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 12px center / 20px 20px no-repeat;
	font-weight: 600;
	line-height: 1.3;
}

.wc-item-meta .ttkw-card-text p {
	margin: 0;
	padding: 0 12px 0.6em;
}

.wc-item-meta .ttkw-card-text p:first-of-type {
	padding-top: 8px;
}

.wc-item-meta .ttkw-card-text p:last-of-type {
	padding-bottom: 10px;
}