/* ============================================================
   Cenové boxy — dizajn témy Planétky (.cp-pbox)
   Postavené na CSS tokenoch témy (--cp-*) s fallbackmi pre svetlý režim.
   ============================================================ */

/* ---- alert platnosti kupónov nad boxom (dizajn Cenovy box) ----
   mobil = kompaktný, desktop @768 rozmery podľa dizajnu; dark rieši tokeny */

.cp-pbox-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	/* mobil: rovnaká výnimka zo šírky ako box */
	margin: 6px -14px 14px;
	padding: 10px 13px;
	border-radius: 14px;
	background: var(--cp-surface-2, #F7F6F4);
	border: 1px solid var(--cp-border, rgba(0, 0, 0, .08));
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cp-text, #1a1a1a);
}

.cp-pbox-alert__icon {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--cp-hl, #FF5A4D), var(--cp-deep, #C2261C));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--cp-brand, #E8332A) 30%, transparent);
}

.cp-pbox-alert__icon svg {
	width: 15px;
	height: 15px;
}

/* zdvojená špecificita — obsahové štýly témy (article strong) inak prebijú farbu */
.cp-pbox-alert strong.cp-pbox-alert__date {
	color: var(--cp-brand, #E8332A);
	font-weight: 800;
	white-space: nowrap;
}

/* ---- automatické info texty podľa predajcu (VIP podpora, platby) ----
   nerušivý neutrálny notice nad boxom; farba len v ikone */

.cp-pbox-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px -14px 14px;
	padding: 11px 13px;
	border-radius: 14px;
	background: var(--cp-surface-2, #F7F6F4);
	border: 1px solid var(--cp-border, rgba(0, 0, 0, .08));
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cp-text, #1a1a1a);
}

.cp-pbox-note__icon {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--cp-brand, #E8332A) 10%, transparent);
	color: var(--cp-brand, #E8332A);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.cp-pbox-note__icon svg {
	width: 15px;
	height: 15px;
}

.cp-pbox-note__text a {
	color: var(--cp-brand, #E8332A);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cp-pbox-note strong.cp-pbox-note__label {
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-weight: 800;
	color: var(--cp-text, #1a1a1a);
}

/* ---- extra služba pod boxom (Gshopper) — zbaliteľná, dashed rám ---- */

.cp-pbox-extra {
	margin: -14px -14px 28px;
	border: 1px dashed var(--cp-border-strong, rgba(0, 0, 0, .16));
	border-radius: 14px;
	background: var(--cp-surface, #fff);
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--cp-text, #1a1a1a);
	overflow: hidden;
}

.cp-pbox-extra__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	cursor: pointer;
	list-style: none;
}

.cp-pbox-extra__head::-webkit-details-marker {
	display: none;
}

.cp-pbox-extra__icon {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--cp-brand, #E8332A) 10%, transparent);
	color: var(--cp-brand, #E8332A);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-pbox-extra__icon svg {
	width: 16px;
	height: 16px;
}

.cp-pbox-extra__text {
	flex: 1;
}

.cp-pbox-extra__text strong {
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-weight: 800;
}

.cp-pbox-extra__chev {
	flex: none;
	color: var(--cp-text-soft, #777);
	display: flex;
	transition: transform .2s ease;
}

.cp-pbox-extra[open] .cp-pbox-extra__chev {
	transform: rotate(90deg);
}

.cp-pbox-extra__body {
	padding: 0 13px 13px;
}

/* obsahové štýly témy (.cp-art p) by prebili veľkosť — explicitne rovnaká ako summary */
.cp-pbox-extra__body p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-family: inherit;
}

.cp-pbox-extra__body a {
	color: var(--cp-brand, #E8332A);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cp-pbox {
	border-radius: 20px;
	overflow: hidden;
	background: var(--cp-surface, #fff);
	border: 1px solid var(--cp-border, #eceaea);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
	/* mobil: výnimka — box vytŕča z kontajnera článku (viac priestoru) */
	margin: 6px -14px 28px;
	position: relative;
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	color: var(--cp-text, #1a1a1a);
	font-size: 15px;
	line-height: 1.5;
}

.cp-pbox .cp-eyebrow {
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 1.8px;
}

.cp-pbox .cp-disp {
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
}

.cp-pbox__strip {
	height: 4px;
	background: linear-gradient(90deg, var(--cp-accent, #FF8A3D), var(--cp-hl, #FFC24B), var(--cp-deep, #B3241C));
}

.cp-pbox__admin {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cp-faint, #9a9a9a);
	border: 1px solid var(--cp-border, #eceaea);
	background: var(--cp-surface, #fff);
	text-decoration: none;
}

.cp-pbox__head {
	padding: 13px 18px 0;
}

.cp-pbox__eyebrow-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 7px;
}

.cp-pbox__mark {
	width: 20px;
	height: 20px;
	flex: none;
	display: flex;
}

.cp-pbox__mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cp-pbox__eyebrow {
	font-size: 9px;
	letter-spacing: 1.8px;
	color: var(--cp-brand, #E8332A);
}

.cp-pbox__title {
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -.5px;
	color: var(--cp-text, #1a1a1a);
	line-height: 1.1;
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
}

/* podtitulok = názov variantu pri boxe s jediným variantom */
.cp-pbox__title-variant {
	margin-top: 3px;
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cp-soft, #555);
	line-height: 1.3;
}

/* ---- prepínač variácií ---- */

.cp-pbox__variants {
	padding: 10px 18px 4px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.cp-pbox__variant {
	cursor: pointer;
	display: block;
	text-align: left;
	border-radius: 10px;
	padding: 8px 11px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border: 1.5px solid var(--cp-border, #eceaea);
	background: var(--cp-surface, #fff);
	color: var(--cp-text, #1a1a1a);
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 800;
	transition: border-color .18s var(--cp-ease, ease), background .18s var(--cp-ease, ease), color .18s var(--cp-ease, ease), transform .18s var(--cp-ease, ease);
}

.cp-pbox__variant-in {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.35;
}

.cp-pbox__variant .cp-disp {
	display: inline;
}

.cp-pbox__variant-ship {
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	width: 0;
	min-width: 100%;
	font-size: 8px;
	letter-spacing: .8px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cp-faint, #9a9a9a);
}

.cp-pbox__variant-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cp-faint, #9a9a9a) 65%, transparent);
}

.cp-pbox__variant-flag {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	object-fit: contain;
	background: transparent;
}

.cp-pbox__variant-ship-txt {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cp-pbox__variant.is-active .cp-pbox__variant-ship {
	color: rgba(255, 255, 255, .85);
}

.cp-pbox__variant.is-active .cp-pbox__variant-dot {
	background: rgba(255, 255, 255, .9);
}

.cp-pbox__variant.cp-pbox__variant--soldout .cp-pbox__variant-dot {
	background: var(--cp-faint, #9a9a9a);
	opacity: .6;
}

.cp-pbox__variant.cp-pbox__variant--soldout .cp-pbox__variant-flag {
	filter: grayscale(1);
	opacity: .55;
}


.cp-pbox__variant.is-active {
	border-color: transparent;
	background: var(--cp-hero-btn, linear-gradient(135deg, #FF6B4A, #E8332A));
	color: #fff;
	box-shadow: 0 5px 14px color-mix(in srgb, var(--cp-brand, #E8332A) 26%, transparent);
}

.cp-pbox__variant-price {
	display: inline;
	font-size: 10.5px;
	font-weight: 700;
	opacity: .92;
	white-space: nowrap;
}

.cp-pbox__variant-price--accent {
	color: var(--cp-brand, #E8332A);
	font-weight: 800;
	opacity: 1;
}

.cp-pbox__variant.is-active .cp-pbox__variant-price--accent {
	color: #fff;
}

.cp-pbox__variant.cp-pbox__variant--soldout {
	background: var(--cp-surface-2, #f5f3f3);
	border-style: dashed;
	color: var(--cp-faint, #9a9a9a);
}

.cp-pbox__variant.cp-pbox__variant--soldout .cp-pbox__variant-price,
.cp-pbox__variant.cp-pbox__variant--soldout .cp-pbox__variant-price--accent {
	color: var(--cp-faint, #9a9a9a);
	text-decoration: line-through;
	opacity: .8;
}

.cp-pbox__variant.cp-pbox__variant--soldout.is-active {
	background: var(--cp-faint, #9a9a9a);
	border-style: solid;
	color: #fff;
	box-shadow: none;
}

.cp-pbox__variant.cp-pbox__variant--soldout.is-active .cp-pbox__variant-price,
.cp-pbox__variant.cp-pbox__variant--soldout.is-active .cp-pbox__variant-price--accent {
	color: #fff;
}

.cp-pbox__panel[hidden] {
	display: none;
}

/* ---- hlavná mriežka ---- */

.cp-pbox__main {
	display: grid;
	grid-template-columns: minmax(128px, 44%) 1fr;
	/* riadok 3 (cena) je pružný a cena v ňom sedí HORE — prebytočná výška
	   z ľavého stĺpca padá pod cenu, nie medzi ceny */
	grid-template-rows: auto auto 1fr auto;
	gap: 4px 12px;
	align-items: start;
	padding: 18px 18px 6px;
}

/* Na mobile sa __info "rozpustí" do gridu mainu: tools/ceny vpravo od
   fotky, kupóny pod oboma stĺpcami. Desktop @768 vracia blokový info. */
.cp-pbox__info {
	display: contents;
}

.cp-pbox__left {
	position: relative;
	grid-column: 1;
	grid-row: 1 / 4;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.cp-pbox__tools { grid-column: 2; grid-row: 1; min-width: 0; }
.cp-pbox__oldrow { grid-column: 2; grid-row: 2; min-width: 0; }
/* cena hneď pod prečiarknutou cenou, pri sebe */
.cp-pbox__price { grid-column: 2; grid-row: 3; align-self: start; justify-self: start; min-width: 0; margin-top: 0; white-space: nowrap; }

.cp-pbox__coupons { grid-column: 1 / -1; grid-row: 4; }

.cp-pbox__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--cp-border, #eceaea);
	background: #fff;
}

.cp-pbox__media > a {
	display: block;
	width: 100%;
	height: 100%;
}

.cp-pbox__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
}

/* téma dáva .cp-art img cursor:zoom-in — logá/vlajky nie sú v lightboxe */
.cp-pbox .cp-pbox__shop-flag,
.cp-pbox .cp-pbox__shop-logo,
.cp-pbox .cp-pbox__other-logo,
.cp-pbox .cp-pbox__variant-flag {
	cursor: default;
}

.cp-pbox__shop-tag {
	/* position explicitne — téma (placeholder štýly) má absolute overlay */
	position: static;
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--cp-surface-2, #faf8f8);
	border: 1px solid var(--cp-border, #eceaea);
	color: var(--cp-soft, #555);
	padding: 5px 9px;
	border-radius: 8px;
	max-width: 100%;
}

.cp-pbox__shop-tag .cp-eyebrow {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* DM Sans namiesto Montserratu (eyebrow default) */
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .8px;
	line-height: 1.4;
}

.cp-pbox .cp-pbox__shop-flag {
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 3px;
	object-fit: contain;
	background: transparent;
	color: inherit;
}

/* ---- nástroje ---- */

.cp-pbox__tools {
	display: flex;
	gap: 5px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}

.cp-pbox__tool {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--cp-border, #eceaea);
	background: transparent;
	border-radius: 9px;
	padding: 6px 9px;
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-weight: 700;
	font-size: 10.5px;
	color: var(--cp-soft, #555);
	transition: color .18s var(--cp-ease, ease), border-color .18s var(--cp-ease, ease);
}

.cp-pbox__tool.is-active {
	color: var(--cp-brand, #E8332A);
	border-color: var(--cp-brand, #E8332A);
}

/* ---- ceny ---- */

.cp-pbox__oldrow {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cp-pbox__oldrow {
	line-height: 1.15;
}

.cp-pbox__old {
	font-size: 16px;
	color: var(--cp-faint, #9a9a9a);
	text-decoration: line-through;
	font-weight: 400;
}

.cp-pbox__save {
	display: none;
	font-size: 8.5px;
	letter-spacing: .7px;
	color: #fff;
	background: linear-gradient(135deg, #1F8A5B, #15784D);
	padding: 3px 7px;
	border-radius: 6px;
	white-space: nowrap;
}

.cp-pbox__price {
	font-size: 31px;
	font-weight: 900;
	color: var(--cp-brand, #E8332A);
	letter-spacing: -1.5px;
	line-height: 1;
	margin-top: 4px;
}

.cp-pbox__price.cp-pbox__price--soldout {
	color: var(--cp-faint, #9a9a9a);
	text-decoration: line-through;
}

.cp-pbox__soldout {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 14px;
	border: 1.5px dashed var(--cp-border, #d9d5d5);
	border-radius: 9px;
	background: var(--cp-surface-2, #faf8f8);
	color: var(--cp-faint, #9a9a9a);
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 2.5px;
	text-align: center;
}

/* ---- kupóny ---- */

.cp-pbox__coupons {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cp-pbox__coupon-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cp-pbox__coupon-label {
	flex: none;
	width: auto;
	min-width: 52px;
	white-space: nowrap;
	font-size: 9px;
	letter-spacing: .6px;
	color: var(--cp-soft, #555);
}

.cp-pbox__code {
	position: relative;
	flex: 1;
	border: 1.5px dashed var(--cp-border, #d9d5d5);
	border-radius: 9px;
	padding: 8px 14px;
	text-align: center;
	background: var(--cp-surface-2, #faf8f8);
	min-width: 0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: var(--cp-text, #1a1a1a);
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cp-pbox__code--long {
	font-size: 11px;
	letter-spacing: .8px;
}

.cp-pbox__copied {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		-45deg,
		var(--cp-positive, #1F8A5B) 0 10px,
		color-mix(in srgb, var(--cp-positive, #1F8A5B) 82%, #000) 10px 20px
	);
	color: #fff;
	font-size: 12px;
	letter-spacing: 1px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s var(--cp-ease, ease);
}

.cp-pbox__code.is-copied .cp-pbox__copied {
	opacity: 1;
}

.cp-pbox__copy {
	flex: none;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--cp-faint, #9a9a9a);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .18s var(--cp-ease, ease);
}

.cp-pbox__copy .ppb-ico-check,
.cp-pbox__copy.is-copied .ppb-ico-copy {
	display: none;
}

.cp-pbox__copy.is-copied {
	color: var(--cp-positive, #1F8A5B);
}

.cp-pbox__copy.is-copied .ppb-ico-check {
	display: block;
}

.cp-pbox__flash {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	align-self: stretch;
	padding: 9px 13px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--cp-accent, #FF8A3D) 7%, transparent);
	color: color-mix(in srgb, var(--cp-deep, #B3241C) 55%, var(--cp-soft, #777));
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ---- zľava v košíku ---- */

.cp-pbox__cart {
	display: flex;
	align-items: stretch;
	/* na mobile centrované VŽDY (feedback 2026-07-10 — aj pod kupónmi
	   bol riadok naľavo a pôsobil nezarovnane); desktop @768 flex-start */
	justify-content: center;
	gap: 5px;
	margin-top: 2px;
	flex-wrap: nowrap;
	max-width: 100%;
	min-width: 0;
}

/* kotvou tooltipu je celý cart riadok — centrovaný hint sa vždy zmestí do boxu */
.cp-pbox__cart {
	position: relative;
}

.cp-pbox__cart-label {
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 1.2;
	border: 1px solid var(--cp-border, #eceaea);
	border-radius: 8px;
	padding: 8px 9px;
	background: var(--cp-surface, #fff);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--cp-soft, #555);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* hodnota má .cp-disp — téma by jej dala Montserrat, tu chceme DM Sans.
   Allowance hodnota je <a> (otvára allowance stránku) — farba/dekorácia
   explicitne, inak by ju prebil .cp-art a témy. */
.cp-pbox .cp-pbox__cart-value {
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	color: color-mix(in srgb, var(--cp-positive, #1F8A5B) 74%, var(--cp-soft, #555));
	text-decoration: none;
}

.cp-pbox a.cp-pbox__cart-value {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: color-mix(in srgb, var(--cp-positive, #1F8A5B) 45%, transparent);
	cursor: pointer;
}

.cp-pbox__cart-value {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--cp-positive, #1F8A5B) 30%, transparent);
	background: color-mix(in srgb, var(--cp-positive, #1F8A5B) 9%, transparent);
	color: color-mix(in srgb, var(--cp-positive, #1F8A5B) 74%, var(--cp-soft, #555));
	border-radius: 8px;
	padding: 5px 8px;
	font-weight: 700;
	font-size: 11px;
	white-space: nowrap;
}

.cp-pbox__cart-plus {
	flex: none;
}

/* AliExpress: „Kód nefunguje? Zobraz ďalšie kupóny" pod kupónom —
   odkaz na kupónový článok (theme mod cp_ali_url) */
.cp-pbox .cp-pbox__morecodes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 2px;
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	color: var(--cp-soft, #555);
	text-decoration: none;
}

/* refresh ikonka šedá ako text */
.cp-pbox .cp-pbox__morecodes svg {
	flex: none;
	color: var(--cp-soft, #555);
}

.cp-pbox .cp-pbox__morecodes strong {
	color: var(--cp-brand, #E8332A);
	font-weight: 700;
}

.cp-pbox .cp-pbox__morecodes:hover strong {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cp-pbox__cart-help {
	flex: none;
}

.cp-pbox__cart-plus {
	align-self: center;
	color: var(--cp-soft, #555);
	font-weight: 800;
	font-size: 13px;
}

.cp-pbox__cart-help {
	position: static;
	align-self: center;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--cp-faint, #9a9a9a);
	color: var(--cp-faint, #9a9a9a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	cursor: help;
}

.cp-pbox__cart-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 100%;
	background: var(--cp-ink, #1a1a1a);
	color: #fff;
	font-size: 11.5px;
	font-weight: 500;
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	line-height: 1.45;
	padding: 9px 12px;
	border-radius: 9px;
	opacity: 0;
	pointer-events: none;
	/* delay pri skrývaní — čas prejsť myšou z ? na odkaz v tipe */
	transition: opacity .18s var(--cp-ease, ease) .3s;
	z-index: 5;
}

/* neviditeľný most cez medzeru tip↔riadok, nech hover po ceste nespadne */
.cp-pbox__cart-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}

/* odkaz v tooltipe (allowance) — biely s podčiarknutím */
.cp-pbox__cart-tip a {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cp-pbox__cart-help:hover .cp-pbox__cart-tip,
.cp-pbox__cart-help:focus .cp-pbox__cart-tip,
.cp-pbox__cart-help:focus-within .cp-pbox__cart-tip,
.cp-pbox__cart-help.is-open .cp-pbox__cart-tip {
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0s;
}

/* ---- CTA ---- */

.cp-pbox__cta-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px 18px;
}

.cp-pbox__shop {
	flex: none;
	display: flex;
	align-items: center;
	max-width: 120px;
}

.cp-pbox__shop-logo {
	max-height: 40px;
	max-width: 120px;
	width: auto;
	display: block;
	object-fit: contain;
	/* logo odsadené vnútri vlastného bieleho chipu, nie nacapené na okraj */
	background: #fff;
	border: 1px solid var(--cp-border, #eceaea);
	border-radius: 10px;
	padding: 6px 10px;
}

/* Téma má globálne pravidlo pre LiteSpeed lazyload skeleton
   (img[data-lazyloaded].litespeed-loaded{background:none}), ktoré má
   vyššiu špecificitu než jedna trieda a po dobehnutí lazy-loadu by zhodilo
   biele pozadie loga (potrebné, kým logá nemajú priehľadné PNG pozadie).
   Táto väzba na .cp-pbox musí mať rovnakú alebo vyššiu špecificitu. */
.cp-pbox .cp-pbox__cta-row .cp-pbox__shop img.cp-pbox__shop-logo,
.cp-pbox .cp-pbox__others .cp-pbox__other-shop img.cp-pbox__other-logo {
	background: #fff;
}

/* vlajky v chipoch/tagu sú čisto dekoratívne — klik nech ide na chip,
   nikdy nie do lightboxu témy */
.cp-pbox .cp-pbox__variant-flag,
.cp-pbox .cp-pbox__shop-flag {
	pointer-events: none;
	cursor: default;
}

.cp-pbox__cta {
	flex: 1;
	text-align: center;
	background: var(--cp-hero-btn, linear-gradient(135deg, #FF6B4A, #E8332A));
	color: #fff !important;
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .3px;
	padding: 12px;
	border-radius: 12px;
	text-decoration: none !important;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--cp-brand, #E8332A) 32%, transparent);
	transition: transform .18s var(--cp-ease, ease), filter .18s var(--cp-ease, ease), box-shadow .18s var(--cp-ease, ease);
}

/* zdvojená špecificita — .cp-art a (0,1,1) témy inak zráža weight na 600 */
.cp-pbox .cp-pbox__cta {
	font-weight: 900;
}

.cp-pbox__cta.cp-pbox__cta--off {
	background: var(--cp-faint, #9a9a9a);
	box-shadow: none;
}

/* ---- pätička ---- */

.cp-pbox__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 12px 18px 16px;
	font-size: 12px;
	color: var(--cp-soft, #555);
	text-align: center;
}

.cp-pbox__foot strong {
	color: var(--cp-text, #1a1a1a);
	font-weight: 700;
}

.cp-pbox__foot a {
	color: color-mix(in srgb, var(--cp-brand, #E8332A) 72%, transparent);
	font-weight: 600;
	cursor: pointer;
}

.cp-pbox__foot-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--cp-faint, #9a9a9a);
}

.cp-pbox__updated {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 18px 14px;
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
	font-size: 11px;
	letter-spacing: .3px;
	color: var(--cp-faint, #9a9a9a);
	text-align: center;
}

/* ---- ďalšie kupóny ---- */

.cp-pbox__others {
	border-top: 1px solid var(--cp-border, #eceaea);
	padding: 14px 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cp-pbox__others-title {
	font-size: 9px;
	letter-spacing: 1.4px;
	color: var(--cp-soft, #555);
	margin-bottom: 2px;
}

.cp-pbox__other {
	display: grid;
	/* 3 stĺpce: cena v riadku 1 preteká cez stĺpce 2-3, kód sa tak
	   roztiahne cez stĺpce 1-2 až po tlačidlo Využiť */
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "shop price price" "code code cta";
	align-items: center;
	gap: 8px;
	border: 1px solid var(--cp-border, #eceaea);
	border-radius: 12px;
	padding: 10px;
	background: var(--cp-surface-2, #faf8f8);
}

.cp-pbox__other-code {
	grid-area: code;
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	width: 100%;
}

.cp-pbox__other-code .cp-pbox__code {
	flex: 1;
}

.cp-pbox__other-shop {
	grid-area: shop;
	display: flex;
	align-items: center;
}

.cp-pbox__other-shop img {
	max-height: 30px;
	max-width: 84px;
	width: auto;
	object-fit: contain;
	display: block;
	background: #fff;
	border: 1px solid var(--cp-border, #eceaea);
	border-radius: 8px;
	padding: 4px 7px;
}

.cp-pbox__other-price {
	grid-area: price;
	justify-self: end;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.cp-pbox__other-old {
	font-size: 12px;
	color: var(--cp-faint, #9a9a9a);
	text-decoration: line-through;
	font-weight: 600;
}

.cp-pbox__other-new {
	font-size: 16px;
	font-weight: 900;
	color: var(--cp-brand, #E8332A);
	letter-spacing: -.5px;
}

.cp-pbox__code--other {
	font-size: 11px;
	padding: 6px 10px;
	background: var(--cp-surface, #fff);
}

.cp-pbox__copy--sm {
	width: 30px;
	height: 30px;
}

.cp-pbox__copy--sm svg {
	width: 17px;
	height: 17px;
}

.cp-pbox__other-cta {
	justify-self: end;
	text-align: center;
}

.cp-pbox__flash--other {
	grid-area: code;
	justify-self: start;
	font-size: 10px;
	padding: 7px 11px;
}

.cp-pbox__other-cta {
	grid-area: cta;
	flex: none;
	padding: 8px 12px;
	border-radius: 9px;
	border: 1.5px solid var(--cp-brand, #E8332A);
	color: var(--cp-brand, #E8332A) !important;
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .6px;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .18s var(--cp-ease, ease), color .18s var(--cp-ease, ease);
}

@media (min-width: 560px) {
	.cp-pbox__other {
		grid-template-columns: 74px auto 1fr auto;
		grid-template-areas: "shop price code cta";
		gap: 8px 10px;
		padding: 10px 12px;
	}

	.cp-pbox__other-cta {
		justify-self: auto;
		padding: 9px 16px;
	}

	.cp-pbox__other-price {
		justify-self: auto;
	}

	.cp-pbox__code--other {
		font-size: 12.5px;
		padding: 7px 12px;
	}

	.cp-pbox__copy--sm {
		width: 34px;
		height: 34px;
	}
}

/* ---- cenová história ---- */

.cp-pbox-modal--history {
	width: min(760px, calc(100vw - 32px));
}

.cp-pbox__history-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
	font-size: 12.5px;
	color: var(--cp-soft, #555);
}

.cp-pbox__history-stats {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.cp-pbox__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--cp-border, #eceaea);
	background: var(--cp-surface-2, #faf8f8);
	border-radius: 8px;
	padding: 5px 10px;
	font-size: 11.5px;
	color: var(--cp-soft, #555);
}

.cp-pbox__stat b {
	font-weight: 800;
}

.cp-pbox__stat--min b {
	color: color-mix(in srgb, var(--cp-positive, #1F8A5B) 78%, var(--cp-soft, #555));
}

.cp-pbox__stat--max b {
	color: color-mix(in srgb, var(--cp-brand, #E8332A) 72%, var(--cp-soft, #555));
}

.cp-pbox-modal__chart {
	height: min(52vh, 380px);
	min-height: 230px;
}

.cp-pbox__ranges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.cp-pbox__range {
	cursor: pointer;
	border: 1px solid var(--cp-border, #eceaea);
	background: transparent;
	border-radius: 99px;
	padding: 6px 12px;
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-weight: 700;
	font-size: 10.5px;
	color: var(--cp-soft, #555);
	transition: color .18s var(--cp-ease, ease), border-color .18s var(--cp-ease, ease), background .18s var(--cp-ease, ease);
}

.cp-pbox__range.is-active {
	background: var(--cp-hero-btn, linear-gradient(135deg, #FF6B4A, #E8332A));
	border-color: transparent;
	color: #fff;
}

.cp-pbox__trend {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: 7px;
	font-size: 12px;
}

.cp-pbox__trend--good {
	color: var(--cp-positive, #1F8A5B);
	background: color-mix(in srgb, var(--cp-positive, #1F8A5B) 12%, transparent);
}

.cp-pbox__trend--bad {
	color: var(--cp-brand, #E8332A);
	background: color-mix(in srgb, var(--cp-brand, #E8332A) 10%, transparent);
}

/* história: všetko DM Sans (heading modálu ostáva display font) */
.cp-pbox-modal--history .cp-pbox__trend,
.cp-pbox-modal--history .cp-pbox__trend-label,
.cp-pbox-modal--history .cp-pbox__stat,
.cp-pbox-modal--history .cp-pbox__range {
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
}

/* ---- zbaliteľný TIP ---- */

/* details.* — vyššia špecificita, prebíja display:flex z .cp-pbox__tip témy
   (v referenčnom placeholderi je tip <a>, tu je to rozbaľovací <details>) */
details.cp-pbox__tip {
	display: block;
	padding: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--cp-brand, #E8332A) 8%, transparent), color-mix(in srgb, var(--cp-accent, #FF8A3D) 8%, transparent));
	border-top: 1px solid var(--cp-border, #eceaea);
	text-align: left;
}

.cp-pbox__tip-head {
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	color: var(--cp-soft, #555);
}

.cp-pbox__tip-head::-webkit-details-marker {
	display: none;
}

.cp-pbox__tip-ico {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--cp-surface, #fff);
	border: 1px solid var(--cp-border, #eceaea);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cp-brand, #E8332A);
}

.cp-pbox__tip-text {
	flex: 1;
	font-size: 12px;
	color: var(--cp-text, #1a1a1a);
}

.cp-pbox__tip-text .cp-eyebrow {
	font-size: 10px;
	letter-spacing: 1px;
	color: var(--cp-brand, #E8332A);
	margin-right: 6px;
}

.cp-pbox__tip-chev {
	flex: none;
	display: flex;
	color: var(--cp-faint, #9a9a9a);
	transition: transform .22s var(--cp-ease, ease);
}

.cp-pbox__tip[open] .cp-pbox__tip-chev {
	transform: rotate(90deg);
}

.cp-pbox__tip-body {
	padding: 2px 18px 16px;
	font-size: 13.5px;
	color: var(--cp-soft, #555);
	text-align: left;
}

.cp-pbox__tip-body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

/* ---- modály ---- */

.cp-pbox-modal {
	border: 1px solid var(--cp-border, #eceaea);
	border-radius: 20px;
	background: var(--cp-surface, #fff);
	color: var(--cp-text, #1a1a1a);
	padding: 0;
	width: min(680px, calc(100vw - 32px));
	max-height: min(84vh, 760px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	font-family: var(--cp-font-text, "DM Sans", system-ui, sans-serif);
}

.cp-pbox-modal--small {
	width: min(440px, calc(100vw - 32px));
}

.cp-pbox-modal::backdrop {
	background: rgba(10, 8, 8, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.cp-pbox-modal__head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px 14px;
	background: var(--cp-surface, #fff);
	border-bottom: 1px solid var(--cp-border, #eceaea);
	z-index: 2;
}

.cp-pbox-modal__title {
	flex: 1;
	margin: 0;
	font-family: var(--cp-font-disp, Montserrat, system-ui, sans-serif);
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -.3px;
	line-height: 1.25;
	color: var(--cp-text, #1a1a1a);
}

.cp-pbox-modal__close {
	flex: none;
	cursor: pointer;
	width: 34px;
	height: 34px;
	border: 1px solid var(--cp-border, #eceaea);
	border-radius: 10px;
	background: transparent;
	color: var(--cp-soft, #555);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-pbox-modal__body {
	padding: 16px 20px 20px;
	overflow: auto;
	font-size: 14px;
}

.cp-pbox-modal__body--guide img,
.cp-pbox-modal__body--guide iframe {
	max-width: 100%;
	border-radius: 10px;
}

.cp-pbox-modal__note {
	margin: 0 0 14px;
	color: var(--cp-soft, #555);
	font-size: 13.5px;
}

.cp-pbox-modal__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cp-pbox-modal__form input[type=email] {
	width: 100%;
	border: 1.5px solid var(--cp-border, #d9d5d5);
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--cp-surface-2, #faf8f8);
	color: var(--cp-text, #1a1a1a);
}

.cp-pbox-modal__form input[type=email]:focus {
	outline: none;
	border-color: var(--cp-brand, #E8332A);
}

.cp-pbox-modal__submit {
	cursor: pointer;
	border: none;
	border-radius: 11px;
	padding: 13px;
	background: var(--cp-hero-btn, linear-gradient(135deg, #FF6B4A, #E8332A));
	color: #fff;
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: .4px;
}

.cp-pbox-modal__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.cp-pbox-modal__status {
	margin: 0;
	min-height: 1em;
	font-size: 13px;
	color: var(--cp-soft, #555);
}

.cp-pbox-modal__form.is-done input[type=email],
.cp-pbox-modal__form.is-done .cp-pbox-modal__submit {
	display: none;
}

.cp-pbox-modal__form.is-done .cp-pbox-modal__status {
	color: var(--cp-positive, #1F8A5B);
	font-weight: 700;
	font-size: 14px;
}

/* ---- desktop ---- */

@media (min-width: 768px) {
	.cp-pbox__head {
		padding: 14px 24px 0;
	}

	.cp-pbox__title {
		font-size: 21px;
	}

	.cp-pbox__variants {
		padding: 11px 24px 4px;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}


	.cp-pbox__variant {
		flex-direction: row;
		align-items: center;
		gap: 9px;
		border-radius: 11px;
		padding: 10px 14px;
		font-size: 13px;
	}

	.cp-pbox__variant-price {
		font-size: 12px;
	}



	/* na desktope box nezaberá celú šírku stĺpca článku — centrovaný, užší */
	.cp-pbox {
		max-width: 660px;
		margin: 6px auto 28px;
	}

	.cp-pbox-alert {
		max-width: 660px;
		margin: 6px auto 14px;
		padding: 14px 18px;
		gap: 13px;
		border-radius: 16px;
		font-size: 14.5px;
	}

	.cp-pbox-alert__icon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
	}

	.cp-pbox-alert__icon svg {
		width: 19px;
		height: 19px;
	}

	.cp-pbox-note {
		max-width: 660px;
		margin: 6px auto 14px;
		padding: 13px 16px;
		gap: 12px;
		border-radius: 16px;
		font-size: 13.5px;
	}

	.cp-pbox-note__icon {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.cp-pbox-note__icon svg {
		width: 18px;
		height: 18px;
	}

	.cp-pbox-extra {
		max-width: 660px;
		margin: -14px auto 28px;
		border-radius: 16px;
		font-size: 13.5px;
	}

	.cp-pbox-extra__head {
		padding: 13px 16px;
		gap: 12px;
	}

	.cp-pbox-extra__icon {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.cp-pbox-extra__icon svg {
		width: 18px;
		height: 18px;
	}

	.cp-pbox-extra__body {
		padding: 0 16px 15px;
	}

	.cp-pbox__main {
		grid-template-columns: 200px 1fr;
		grid-template-rows: auto;
		gap: 22px;
		padding: 20px 24px 6px;
	}

	.cp-pbox__info {
		display: block;
	}

	/* desktop: cena späť do bloku, badge Ušetríš viditeľný, varianty 1 riadok */
	.cp-pbox__price {
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
		margin-top: 4px;
		white-space: normal;
	}

	.cp-pbox__save {
		display: inline-block;
	}

	.cp-pbox__variant-in {
		display: block;
		-webkit-line-clamp: initial;
		line-clamp: initial;
		white-space: nowrap;
		line-height: 1.25;
	}

	/* cart riadok centrovaný aj na desktope; tooltip kotvený na celý riadok
	   (right:-8px kotva na 20px ikonke + max-width:100% = tooltip stlačený
	   na šírku ikonky — jeden znak na riadok) */

	.cp-pbox__flash {
		width: auto;
		align-self: flex-start;
		justify-content: flex-start;
	}

	.cp-pbox__left {
		grid-column: auto;
		grid-row: auto;
	}

	.cp-pbox__shop-tag {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 2;
		background: rgba(26, 26, 26, .82);
		border: none;
		color: #fff;
		padding: 6px 11px 6px 8px;
		border-radius: 9px;
		max-width: calc(100% - 20px);
	}

	.cp-pbox__shop-tag .cp-eyebrow {
		display: block;
		-webkit-line-clamp: initial;
		line-clamp: initial;
		font-size: 8.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	.cp-pbox .cp-pbox__shop-flag {
		width: 18px;
		height: 18px;
	}

	.cp-pbox__tools {
		gap: 7px;
		margin-bottom: 14px;
	}

	.cp-pbox__tool {
		gap: 6px;
		padding: 7px 11px;
	}

	.cp-pbox__price {
		font-size: 44px;
	}

	.cp-pbox__cart-label {
		padding: 8px 13px;
		font-size: 12px;
	}

	.cp-pbox__cart-value {
		padding: 5px 11px;
		font-size: 12.5px;
	}

	.cp-pbox__cta-row {
		gap: 18px;
		padding: 14px 24px 18px;
	}

	.cp-pbox__cta {
		font-size: 13.5px;
		padding: 13px 20px;
		border-radius: 12px;
	}

	.cp-pbox__media {
		max-width: none;
	}

	.cp-pbox__foot {
		padding: 12px 24px 16px;
	}

	.cp-pbox__others {
		padding: 14px 24px 18px;
	}

	.cp-pbox__tip-head {
		padding: 15px 24px;
	}

	.cp-pbox__tip-body {
		padding: 2px 24px 18px;
	}
}

/* ---- mikrointerakcie (len hover zariadenia) ---- */

@media (hover: hover) {
	.cp-pbox__cta:hover {
		transform: translateY(-2px);
		filter: brightness(1.08);
		box-shadow: 0 12px 26px color-mix(in srgb, var(--cp-brand, #E8332A) 40%, transparent);
	}

	.cp-pbox__cta.cp-pbox__cta--off:hover {
		filter: none;
		box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
	}

	.cp-pbox__variant:not(.is-active):hover {
		border-color: var(--cp-brand, #E8332A);
		transform: translateY(-1px);
	}

	.cp-pbox__variant.cp-pbox__variant--soldout:not(.is-active):hover {
		border-color: var(--cp-faint, #9a9a9a);
	}

	.cp-pbox__tool {
		transition: color .18s var(--cp-ease, ease), border-color .18s var(--cp-ease, ease), transform .18s var(--cp-ease, ease);
	}

	.cp-pbox__tool:hover {
		color: var(--cp-brand, #E8332A);
		border-color: var(--cp-brand, #E8332A);
		transform: translateY(-1px);
	}

	.cp-pbox__copy:hover {
		color: var(--cp-text, #1a1a1a);
		transform: scale(1.1);
	}

	.cp-pbox__copy {
		transition: color .18s var(--cp-ease, ease), transform .18s var(--cp-ease, ease);
	}

	.cp-pbox__code:hover {
		border-color: var(--cp-brand, #E8332A);
	}

	.cp-pbox__other-cta:hover {
		background: var(--cp-brand, #E8332A);
		color: #fff !important;
	}

	.cp-pbox__admin:hover {
		color: var(--cp-brand, #E8332A);
	}

	.cp-pbox__range:not(.is-active):hover {
		color: var(--cp-brand, #E8332A);
		border-color: var(--cp-brand, #E8332A);
	}

	.cp-pbox-modal__close:hover {
		color: var(--cp-brand, #E8332A);
		border-color: var(--cp-brand, #E8332A);
		transform: rotate(90deg);
	}

	.cp-pbox__tip-head:hover .cp-pbox__tip-ico {
		border-color: var(--cp-brand, #E8332A);
		transform: translateY(-1px);
	}

	.cp-pbox__tip-ico {
		transition: border-color .18s var(--cp-ease, ease), transform .18s var(--cp-ease, ease);
	}

	.cp-pbox-modal__submit:hover {
		filter: brightness(1.08);
		transform: translateY(-1px);
	}

	.cp-pbox-modal__submit {
		transition: filter .18s var(--cp-ease, ease), transform .18s var(--cp-ease, ease);
	}
}

/* ---- animácie (vstupy panelov, modály, overlay) ---- */

@media (prefers-reduced-motion: no-preference) {
	@keyframes cp-pbox-panel-in {
		from {
			opacity: 0;
			transform: translateY(7px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	.cp-pbox__panel--anim {
		animation: cp-pbox-panel-in .3s var(--cp-ease, ease) both;
	}

	@keyframes cp-pbox-modal-in {
		from {
			opacity: 0;
			transform: translateY(14px) scale(.96);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes cp-pbox-backdrop-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	dialog.cp-pbox-modal[open] {
		animation: cp-pbox-modal-in .32s var(--cp-ease, cubic-bezier(.2, .7, .3, 1)) both;
	}

	dialog.cp-pbox-modal[open]::backdrop {
		animation: cp-pbox-backdrop-in .28s ease both;
	}

	@keyframes cp-pbox-stripes {
		to {
			background-position: 28.28px 0;
		}
	}

	.cp-pbox__code.is-copied .cp-pbox__copied {
		animation: cp-pbox-stripes .8s linear infinite;
	}

	@keyframes cp-pbox-tip-in {
		from {
			opacity: 0;
			transform: translateY(-4px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	details.cp-pbox__tip[open] .cp-pbox__tip-body {
		animation: cp-pbox-tip-in .26s var(--cp-ease, ease) both;
	}
}

/* tabular-nums len tam, kde sa čísla menia (história, aktualizované) —
   na statických cenách menilo vzhľad číslic (širšia 1), user chcel pôvodný */
.cp-pbox__stat b,
.cp-pbox__updated {
	font-variant-numeric: tabular-nums;
}

/* 5.9.11 — TIP na dopravu: menší text obsahu. Téma dáva .cp-art p 1rem
   (0,1,1) → potrebná vyššia špecificita na p vnútri tipu. */
.cp-pbox__tip-body {
	font-size: 12.5px;
}

.cp-art .cp-pbox__tip-body p,
.cp-pbox__tip-body p {
	font-size: 12.5px;
	line-height: 1.55;
	margin: 0 0 8px;
}

.cp-art .cp-pbox__tip-body p:last-child,
.cp-pbox__tip-body p:last-child {
	margin-bottom: 0;
}