/**
 * Voľba typu nákupu na stránke produktu a prepínač v košíku.
 *
 * @package TulipoBox\SubscriptionSwitch
 */

/* --- Voľba typu nákupu na stránke produktu ----------------------------- */

/*
 * Dve karty nad tlačidlom Pridať do košíka. Vyzerajú ako spôsoby platby na
 * pokladni: krúžok, názov, krátky popis, cena vpravo; vybraná má slivkový
 * prstenec. Selektory majú navyše .tlpb-buy, lebo Elementor farbí odkazy
 * cez `.elementor-kit-N a` a ten by obyčajnú triedu prebil.
 */
.tlpb-buy {
	margin: 0 0 var( --tlpb-space-5 );
}

.tlpb-buy__heading {
	display: block;
	margin: 0 0 var( --tlpb-space-2 );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.35;
}

.tlpb-buy__list {
	display: grid;
	gap: var( --tlpb-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlpb-buy__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Obrys je vnútorný tieň – pri zmene hrúbky sa karta nepohne. */
.tlpb-buy .tlpb-buy__option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: var( --tlpb-space-3 );
	padding: var( --tlpb-space-3 ) var( --tlpb-space-4 );
	border-radius: var( --tlpb-radius-md );
	background: transparent;
	box-shadow: inset 0 0 0 1px var( --tlpb-field-line );
	color: var( --tlpb-ink );
	text-decoration: none;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.tlpb-buy .tlpb-buy__option:hover {
	background: var( --tlpb-panel );
	box-shadow: inset 0 0 0 1px var( --tlpb-plum );
	color: var( --tlpb-ink );
	text-decoration: none;
}

.tlpb-buy .tlpb-buy__option:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 3px;
}

.tlpb-buy .tlpb-buy__option.is-active {
	background: var( --tlpb-panel );
	box-shadow: inset 0 0 0 2px var( --tlpb-plum );
	cursor: default;
}

/* Krúžok kreslíme sami – karta je odkaz, nie formulárové pole. */
.tlpb-buy__radio {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --tlpb-panel );
	box-shadow: inset 0 0 0 2px var( --tlpb-field-line );
}

.tlpb-buy__option.is-active .tlpb-buy__radio {
	box-shadow: inset 0 0 0 2px var( --tlpb-plum );
}

.tlpb-buy__option.is-active .tlpb-buy__radio::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var( --tlpb-plum );
}

.tlpb-buy__body {
	min-width: 0;
}

.tlpb-buy__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --tlpb-space-1 ) var( --tlpb-space-2 );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
	font-weight: 700;
	line-height: 1.3;
}

.tlpb-buy__badge {
	padding: 2px var( --tlpb-space-2 );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-apricot );
	color: var( --tlpb-ink );
	font-size: 0.75em;
	font-weight: 800;
	line-height: 1.4;
}

.tlpb-buy__text {
	display: block;
	margin-top: 2px;
	color: var( --tlpb-ink-muted );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-sm );
	line-height: 1.4;
}

.tlpb-buy__price {
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
	white-space: nowrap;
}

/* „/ Mesiac“ od SUBS – drobnejšie, nech vedie suma. */
.tlpb-buy__price .wpsubs-subscription-timing {
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
	font-weight: 600;
}

/* Ceny z pluginov na predplatné chodia aj s <del>/<ins> – nech to nerozbije riadok. */
.tlpb-buy__price del,
.tlpb-buy__price ins {
	background: none;
	text-decoration-thickness: 1px;
}

.tlpb-is-loading .tlpb-buy__list {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

/* Úzky displej: cena pod popis, inak by text zostal na pár slov na riadok. */
@media ( max-width: 400px ) {
	.tlpb-buy .tlpb-buy__option {
		grid-template-columns: auto 1fr;
	}

	.tlpb-buy__price {
		grid-column: 2;
		margin-top: var( --tlpb-space-1 );
		text-align: left;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tlpb-buy .tlpb-buy__option,
	.tlpb-is-loading .tlpb-buy__list {
		transition: none;
	}
}

/* --- Ako funguje predplatné (pod tlačidlom) ------------------------------ */

/*
 * Tri kroky v marhuľovom paneli, ako sekcia „Máte doma viac detí?“ na
 * pokladni. Na marhuli je všetok text `--tlpb-ink` – stlmený by tu nemal
 * 4,5:1 (pozri tokens.css). Panel je kontajner: keď je stĺpec úzky (mobil),
 * kroky sa uložia pod seba, nezávisle od šírky okna.
 */
.tlpb-howto {
	--tlpb-howto-dot: 28px;

	container-type: inline-size;
	flex: 1 0 100%; /* formulár je flex – panel ide na vlastný riadok pod tlačidlo */
	margin: var( --tlpb-space-1 ) 0 0;
	padding: var( --tlpb-space-4 );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-apricot-soft );
	color: var( --tlpb-ink );
}

.tlpb-howto__heading {
	display: block;
	margin: 0 0 var( --tlpb-space-3 );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.35;
}

/* Stĺpcov je toľko, koľko vyplnených krokov. */
.tlpb-howto__steps {
	display: grid;
	grid-auto-columns: minmax( 0, 1fr );
	grid-auto-flow: column;
	gap: var( --tlpb-space-3 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlpb-howto__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --tlpb-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlpb-howto__num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var( --tlpb-howto-dot );
	height: var( --tlpb-howto-dot );
	border-radius: 50%;
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 800;
	line-height: 1;
}

/* Spojnica k ďalšiemu kroku – od krúžku po začiatok ďalšieho stĺpca. */
.tlpb-howto__step:not( :last-child )::after {
	content: "";
	position: absolute;
	top: calc( var( --tlpb-howto-dot ) / 2 - 1px );
	left: calc( var( --tlpb-howto-dot ) + var( --tlpb-space-2 ) );
	right: calc( var( --tlpb-space-2 ) - var( --tlpb-space-3 ) );
	height: 2px;
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-mauve );
}

.tlpb-howto__title {
	display: block;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.3;
}

.tlpb-howto__text {
	display: block;
	margin-top: 2px;
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-sm );
	line-height: 1.45;
}

/* Úzky stĺpec: kroky pod sebou, krúžok vľavo, spojnica zvislo. */
@container ( max-width: 420px ) {
	.tlpb-howto__steps {
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}

	.tlpb-howto__step {
		flex-direction: row;
		align-items: flex-start;
		gap: var( --tlpb-space-3 );
	}

	.tlpb-howto__body {
		padding-top: var( --tlpb-space-1 );
	}

	.tlpb-howto__step:not( :last-child )::after {
		top: calc( var( --tlpb-howto-dot ) + var( --tlpb-space-1 ) );
		bottom: calc( var( --tlpb-space-1 ) - var( --tlpb-space-3 ) );
		left: calc( var( --tlpb-howto-dot ) / 2 - 1px );
		right: auto;
		width: 2px;
		height: auto;
	}
}

/* --- Prepínač typu nákupu ----------------------------------------------- */

.tlpb-cart-switch {
	display: block;
	margin-top: var( --tlpb-space-2, 8px );
}

/*
 * Premenné patria na .tlpb-seg, nie na obal. Prepínač sa používa aj mimo
 * košíka (sekcia „Pridajte aj pre iný vek“ má vlastný obal) a keď boli
 * na .tlpb-cart-switch, vybranej možnosti tam nevyšlo pozadie vôbec.
 */
.tlpb-seg {
	--tlpb-seg-accent: var( --tlpb-plum, #713e5a );
	--tlpb-seg-line: var( --tlpb-field-line, #9c8d86 );

	display: inline-flex;
	padding: 3px;
	border: 0;
	border-radius: var( --tlpb-radius-pill, 999px );
	background: var( --tlpb-surface, #fff8ec );
	vertical-align: middle;
}

/* Prepínače musia zostať dosiahnuteľné klávesnicou, tak ich neskrývame
   cez display:none, len ich odsunieme z dohľadu. */
.tlpb-seg__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* Terč 34 px – nižšie už by sa doň na mobile trafilo ťažko. */
.tlpb-seg__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	margin: 0;
	padding: 0 var( --tlpb-space-3, 12px );
	border-radius: var( --tlpb-radius-pill, 999px );
	color: var( --tlpb-ink-muted, #7e6d67 );
	font-family: var( --tlpb-font-heading, inherit );
	font-size: var( --tlpb-text-sm, 14px );
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tlpb-seg__label:hover {
	color: var( --tlpb-ink, #5a4642 );
}

.tlpb-seg__input:checked + .tlpb-seg__label {
	background: var( --tlpb-seg-accent, #713e5a );
	color: var( --tlpb-on-accent, #fff8ec );
	font-weight: 700;
	box-shadow: 0 1px 3px rgba( 90, 70, 66, 0.22 );
}

/* Drobnejšia verzia do ponuky ďalšieho veku – je to druhoradá ponuka. */
.tlpb-seg--sm .tlpb-seg__label {
	min-height: 32px;
	padding: 0 var( --tlpb-space-2, 8px );
	font-size: 13px;
}

.tlpb-seg__input:focus-visible + .tlpb-seg__label {
	outline: 2px solid var( --tlpb-seg-accent, #713e5a );
	outline-offset: 2px;
}

.tlpb-cart-switch.is-busy {
	cursor: progress;
}

.tlpb-cart-switch.is-busy .tlpb-seg {
	opacity: 0.55;
	pointer-events: none;
}

.tlpb-cart-switch__link {
	font-size: 0.85em;
}

/* --- Otázka „Predplatné aj pre druhý box?“ ------------------------------- */

/*
 * Objaví sa pod prepínačom, keď zákazník prepne jeden box na predplatné a
 * v košíku sú ďalšie jednorazové. Marhuľový podklad ako sekcia „Máte doma
 * viac detí?“, text je atramentový (stlmený by na marhuli nemal 4,5:1).
 * Tlačidlá majú vypísané :hover aj :focus – téma Hello Elementor by ich
 * inak prefarbila na ružovo.
 *
 * Riadok položky na pokladni je mriežka (obrázok | názov | suma); bez
 * `grid-column` by sa otázka vtisla do úzkej voľnej bunky. Takto dostane
 * vlastný riadok pod položkou, zarovnaný s textom. Mimo mriežky sa ignoruje.
 */
.tlpb-ask {
	display: block;
	flex: 1 0 100%;
	grid-column: 2 / -1;
	width: 100%;
	margin: var( --tlpb-space-2 ) 0;
	padding: var( --tlpb-space-3 );
	border-radius: var( --tlpb-radius-sm );
	background: var( --tlpb-apricot-soft );
	color: var( --tlpb-ink );
	text-align: left;
}

/*
 * Riadok položky na pokladni (checkout-flow) má nadbytočné riadky mriežky
 * nulové (grid-auto-rows: 0 – skrýva &nbsp; od WooCommerce). Kým je otázka
 * otvorená, dostane riadok štvrtú stopu s bežnou výškou.
 */
body.tlpb-checkout-design table.woocommerce-checkout-review-order-table tbody tr.cart_item:has( .tlpb-ask ) {
	grid-template-rows: auto auto auto auto;
}

body.tlpb-checkout-design table.woocommerce-checkout-review-order-table tbody tr.cart_item .tlpb-ask {
	grid-row: 4;
	margin-bottom: 0;
}

.tlpb-ask__title {
	display: block;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.3;
}

.tlpb-ask__text {
	display: block;
	margin-top: 2px;
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-sm );
	line-height: 1.4;
}

.tlpb-ask__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tlpb-space-2 );
	margin-top: var( --tlpb-space-2 );
}

.tlpb-ask button.tlpb-ask__yes,
.tlpb-ask button.tlpb-ask__only {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 0 var( --tlpb-space-4 );
	border: 0;
	border-radius: var( --tlpb-radius-pill );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}

.tlpb-ask button.tlpb-ask__yes,
.tlpb-ask button.tlpb-ask__yes:hover,
.tlpb-ask button.tlpb-ask__yes:focus {
	background: var( --tlpb-plum );
	box-shadow: none;
	color: var( --tlpb-on-accent );
}

.tlpb-ask button.tlpb-ask__only,
.tlpb-ask button.tlpb-ask__only:hover,
.tlpb-ask button.tlpb-ask__only:focus {
	background: transparent;
	box-shadow: inset 0 0 0 1px var( --tlpb-field-line );
	color: var( --tlpb-ink );
}

.tlpb-ask button.tlpb-ask__yes:hover {
	filter: brightness( 1.08 );
}

.tlpb-ask button.tlpb-ask__only:hover {
	box-shadow: inset 0 0 0 1px var( --tlpb-plum );
}

.tlpb-ask button.tlpb-ask__yes:focus-visible,
.tlpb-ask button.tlpb-ask__only:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* --- Prepínač v mini košíku (panel v hlavičke) -------------------------- */

.tlpb-cart-switch--mini {
	margin-top: 4px;
	clear: both;
}

.tlpb-cart-switch--mini .tlpb-seg__label {
	padding: 0 var( --tlpb-space-3, 12px );
	font-size: var( --tlpb-text-sm, 14px );
}

/* --- Priebeh prepínania ------------------------------------------------- */

.tlpb-cart-busy .tlpb-seg {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * Hláška o prepnutí je súrodenec prepínača. Keď je obal flexbox, sadla by si
 * vedľa neho, zúžila sa na jedno písmeno a text by sa vypísal zvisle – preto
 * jej vynucujeme celý riadok pod ním.
 */
/*
 * Potvrdenie o prepnutí je hlásenie pre čítačky obrazovky. Vizuálne ho
 * neukazujeme: pribudlo by pri každom prepnutí a posunulo by celé zhrnutie
 * o riadok nižšie. Že sa niečo deje, je aj tak vidieť na prekryve načítania.
 */
.tlpb-cart-switch__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* Chybu naopak vidieť treba – tá sa vypíše celá, pod prepínačom. */
.tlpb-cart-switch__status.is-error {
	position: static;
	flex: 1 0 100%;
	width: auto;
	height: auto;
	margin: 3px 0 0;
	overflow: visible;
	clip: auto;
	color: var( --tlpb-danger, #b32d2e );
	font-size: 0.85em;
	line-height: 1.35;
	white-space: normal;
}

/* --- Sekcia o predplatnom nad medzisúčtom -------------------------------- */

/*
 * Svetlá karta v tóne stránky, nie tmavý blok – v košíku, mini košíku aj na
 * pokladni sedí medzi bielymi kartami a nemá ich prekričať. Ponuka je
 * marhuľová (pozvánka), potvrdené predplatné šalviové (hotovo, v poriadku).
 * Text je vždy atramentový: 7,4:1 na marhuli, 6,6:1 na šalvii.
 */
.tlpb-subnote {
	--tlpb-subnote-bg: var( --tlpb-apricot-soft, #fbe9d3 );
	--tlpb-subnote-fg: var( --tlpb-ink, #5a4642 );
	--tlpb-subnote-accent: var( --tlpb-plum, #713e5a );

	/* Maskot je na šírku (306 × 227), tak mu dávame šírku, nie výšku. */
	--tlpb-subnote-figure: 64px;

	display: flex;
	align-items: center;
	gap: var( --tlpb-space-4, 16px );
	margin: 0 0 var( --tlpb-space-4, 16px );
	padding: var( --tlpb-space-4, 16px );
	border-radius: var( --tlpb-radius-md, 16px );
	background: var( --tlpb-subnote-bg );
	color: var( --tlpb-subnote-fg );
}

/* Predplatné už v košíku je – pokojná šalvia namiesto pozvánky. */
.tlpb-subnote--active {
	--tlpb-subnote-bg: var( --tlpb-sage-soft, #dae2da );
}

.tlpb-subnote__figure {
	flex: 0 0 auto;
	width: var( --tlpb-subnote-figure );
	line-height: 0;
}

.tlpb-subnote__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.tlpb-subnote__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --tlpb-space-1, 4px );
	min-width: 0;
}

.tlpb-subnote__title {
	display: block;
	margin: 0;
	color: inherit;
	font-family: var( --tlpb-font-heading, 'Nunito', sans-serif );
	font-size: var( --tlpb-text-body, 16px );
	font-weight: 800;
	line-height: 1.3;
}

.tlpb-subnote__text {
	display: block;
	margin: 0;
	color: inherit;
	font-family: var( --tlpb-font-body, 'Lora', serif );
	font-size: var( --tlpb-text-sm, 14px );
	line-height: 1.5;
}

.tlpb-subnote__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Úspora v nadpise – biela pilulka so slivkovou sumou (8,3:1), aby ju oko
   našlo ako prvú. */
.tlpb-subnote__amount {
	display: inline-block;
	padding: 0 var( --tlpb-space-2, 8px );
	border-radius: var( --tlpb-radius-pill, 999px );
	background: var( --tlpb-panel, #ffffff );
	color: var( --tlpb-subnote-accent );
	white-space: nowrap;
}

/*
 * Tlačidlo „Prepnúť na predplatné“ je vedľajšia akcia – obrys, nie plná
 * slivka, aby nesúperilo s tlačidlom Pokladňa / Objednať pod ním. Selektor má
 * navyše .tlpb-subnote, lebo Elementor farbí odkazy cez `.elementor-kit-N a`
 * (aj :hover) a ten by obyčajnú triedu prebil.
 */
.tlpb-subnote .tlpb-subnote__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* dotykový terč */
	margin-top: var( --tlpb-space-2, 8px );
	padding: 0 var( --tlpb-space-5, 24px );
	border: 2px solid var( --tlpb-subnote-accent );
	border-radius: var( --tlpb-radius-pill, 999px );
	background: transparent;
	color: var( --tlpb-subnote-accent );
	font-family: var( --tlpb-font-heading, 'Nunito', sans-serif );
	font-size: var( --tlpb-text-sm, 14px );
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tlpb-subnote .tlpb-subnote__button:hover,
.tlpb-subnote .tlpb-subnote__button:focus {
	background: transparent;
	color: var( --tlpb-subnote-accent );
	text-decoration: none;
}

.tlpb-subnote .tlpb-subnote__button:hover {
	background: var( --tlpb-subnote-accent );
	color: var( --tlpb-on-accent, #fff8ec );
	transform: translateY( -1px );
}

.tlpb-subnote .tlpb-subnote__button:focus-visible {
	outline: 2px solid var( --tlpb-subnote-accent );
	outline-offset: 2px;
}

.tlpb-subnote .tlpb-subnote__button.is-busy {
	opacity: 0.65;
	cursor: progress;
	pointer-events: none;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.tlpb-subnote .tlpb-subnote__button {
		transition: none;
	}

	.tlpb-subnote .tlpb-subnote__button:hover {
		transform: none;
	}
}

.tlpb-subnote__badge {
	display: inline-block;
	padding: 2px var( --tlpb-space-2, 8px );
	border-radius: var( --tlpb-radius-pill, 999px );
	background: var( --tlpb-panel, #ffffff );
	color: var( --tlpb-ink, #5a4642 );
	font-family: var( --tlpb-font-heading, 'Nunito', sans-serif );
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* Mini košík je úzky – menší maskot, tesnejšie odsadenie. */
.tlpb-subnote--mini {
	--tlpb-subnote-figure: 52px;

	gap: var( --tlpb-space-3, 12px );
	padding: var( --tlpb-space-3, 12px ) var( --tlpb-space-4, 16px );
}

/* Na mobile ide tlačidlo cez celú šírku textu – ľahšie sa trafí palcom. */
@media screen and ( max-width: 480px ) {
	.tlpb-subnote {
		--tlpb-subnote-figure: 52px;

		gap: var( --tlpb-space-3, 12px );
	}

	.tlpb-subnote .tlpb-subnote__button {
		align-self: stretch;
	}
}

/* Ukážka a výber obrázka v administrácii. */
.tlpb-notice-examples {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 900px;
	margin-bottom: 24px;
}

.tlpb-notice-examples > div {
	flex: 1 1 380px;
}

.tlpb-notice-image__preview img {
	display: block;
	max-width: 160px;
	height: auto;
	padding: 8px;
	background: #f6f7f7;
	border-radius: 6px;
}

.tlpb-notice-image:not( .has-image ) .tlpb-notice-image__remove {
	display: none;
}

/*
 * Prepínač v zhrnutí objednávky na pokladni. Stĺpec je úzky, ale písmo
 * nezmenšujeme pod 14 px – je to ovládací prvok, ktorým sa mení cena
 * objednávky. Je inline, takže keď je miesto (košík cez celú šírku), sadne
 * si vedľa neho aj počet kusov; v úzkom stĺpci sa zalomí pod.
 */
.tlpb-cart-switch--checkout {
	display: inline-flex;
	flex-wrap: wrap;
	margin-top: var( --tlpb-space-1, 4px );
	margin-right: var( --tlpb-space-2, 8px );
	vertical-align: middle;
}

.tlpb-cart-switch--checkout .tlpb-seg__label {
	padding: 0 var( --tlpb-space-2, 8px );
	font-size: 13px;
}

/* Sekcia na pokladni vyzerá rovnako ako v košíku. */
.tlpb-subnote--checkout {
	margin-bottom: var( --tlpb-space-4, 16px );
}