/**
 * Dermia Price Display – štruktúra ceny.
 * Farby/veľkosti riadené cez CSS premenné (--dpd-*) generované z nastavení.
 * Fallbacky sú súčasťou var(...) aby inline hodnoty z :root neboli prebité.
 */

.dpd-price {
	display: block;
	line-height: 1.2;
}

/* Font celého cenového bloku – prázdne nastavenie = font témy (inherit). */
.dpd-price,
.dpd-price .amount,
.dpd-price bdi {
	font-family: var(--dpd-font-family, inherit) !important;
}

/* Reset prípadného dedeného zarovnania/dekorácie z témy. */
.dpd-price del,
.dpd-price ins {
	background: none;
	text-decoration: none;
	opacity: 1;
}

.dpd-price .amount,
.dpd-price bdi {
	text-decoration: inherit;
	color: inherit;
}

/* --- Pôvodná cena (prečiarknutá) --- */
/* Selektor so zvýšenou špecificitou, aby prebil reset .dpd-price del vyššie. */
.dpd-price del.dpd-original {
	text-decoration: none;
	white-space: nowrap;
	position: relative;
}

/* Farba explicitne aj na vnútorné elementy ceny — téma (WoodMart) ich na
   detaile produktu farbí vlastnými selektormi s vyššou špecificitou. */
.dpd-price del.dpd-original,
.dpd-price del.dpd-original .amount,
.dpd-price del.dpd-original bdi {
	color: var(--dpd-color-original, #8a8a8a) !important;
	font-weight: var(--dpd-original-weight, 500) !important;
}

/* Šikmá čiara cez celú cenu (ako v návrhu), nie rovné line-through. */
.dpd-price del.dpd-original::after {
	content: "";
	position: absolute;
	left: -3%;
	right: -3%;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--dpd-color-strike, #e02b2b);
	transform: rotate(-6deg);
	pointer-events: none;
}

/* --- Štítok "Pôvodná cena" --- */
.dpd-label {
	display: inline-block;
	background: var(--dpd-color-label-bg, #eef0f2);
	color: var(--dpd-color-label-text, #6b7280);
	font-size: var(--dpd-label-size, 13px);
	font-weight: 500;
	line-height: 1.3;
	padding: 3px 10px;
	border-radius: 999px;
}

/* --- Badge "Ušetríte ..." --- */
.dpd-badge {
	display: inline-block;
	background: var(--dpd-color-badge-bg, #e7f7ec);
	color: var(--dpd-color-badge-text, #1fa64a);
	font-size: var(--dpd-badge-size, 14px);
	font-weight: 600;
	line-height: 1.3;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* --- Akciová cena --- */
.dpd-sale {
	white-space: nowrap;
}

/* Hrúbka explicitne aj na vnútorné elementy — téma ju inak prebíja. */
.dpd-price .dpd-sale,
.dpd-price .dpd-sale .amount,
.dpd-price .dpd-sale bdi {
	font-weight: var(--dpd-sale-weight, 800) !important;
}

.dpd-price .dpd-sale,
.dpd-price .dpd-sale .amount,
.dpd-price .dpd-sale bdi {
	color: var(--dpd-color-sale, #1fa64a) !important;
}

/* --- Desatiny ako horný index (3 920⁰⁰) --- */
.dpd-price sup.dpd-dec {
	font-size: 0.5em;
	line-height: 1;
	vertical-align: super;
	margin-left: 2px;
	top: 0;
}

.dpd-suffix {
	color: var(--dpd-color-suffix, #9aa0a6);
	font-size: var(--dpd-suffix-size, 13px);
	font-weight: 400;
	margin-left: 4px;
}

/* ======================================================================= */
/* PLNÝ režim (detail)                                                      */
/* ======================================================================= */
/* Stĺpce sa centrujú voči sebe: menšia pôvodná cena tak sedí v stredovej
   výške veľkej akciovej ceny (ako v návrhu). */
.dpd-price--full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 0;
}

/* Stĺpec: štítok/badge pripnuté na spoločnej hornej línii. */
.dpd-price--full .dpd-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
}

/* Ľavý stĺpec: štítok centrovaný nad prečiarknutou cenou + zvislý oddeľovač. */
.dpd-price--full .dpd-col--original {
	align-items: center;
	align-self: stretch;
	padding-right: 28px;
	border-right: 1px solid var(--dpd-color-divider, #dfe3e8);
}

.dpd-price--full .dpd-col--sale {
	align-items: flex-start;
	padding-left: 28px;
}

.dpd-price--full .dpd-original,
.dpd-price--full .dpd-sale {
	line-height: 1;
}

/* Pôvodná cena sa centruje v priestore pod štítkom → sedí na stredovej
   výške akciovej ceny, zatiaľ čo štítok drží hornú líniu s badge. */
.dpd-price--full .dpd-col--original .dpd-original {
	margin-top: auto;
	margin-bottom: auto;
}

/* Jednoduchá cena bez zľavy – žiadny oddeľovač, žiadne odsadenie. */
.dpd-price--simple .dpd-col--sale {
	padding-left: 0;
}

/* ======================================================================= */
/* MOBIL – rovnaký layout ako desktop (2 stĺpce + oddeľovač), len zmenšený */
/* ======================================================================= */
@media (max-width: 600px) {
	.dpd-price--full {
		flex-wrap: nowrap;
		gap: 8px 0;
	}

	.dpd-price--full .dpd-col {
		min-width: 0;
	}

	.dpd-price--full {
		max-width: 100%;
	}

	.dpd-price--full .dpd-col--original {
		padding-right: 10px;
	}

	.dpd-price--full .dpd-col--sale {
		padding-left: 10px;
	}

	/* min() s vw = cena sa škáluje so šírkou obrazovky a nikdy nepretečie.
	   !important, aby responzívne pravidlá témy nemohli veľkosť prebiť. */
	.dpd-price--full .dpd-sale {
		font-size: min(calc(var(--dpd-sale-size, 52px) * 0.7), 8.5vw) !important;
		white-space: normal;
	}

	.dpd-price--full .dpd-sale .amount {
		white-space: nowrap;
	}

	.dpd-price--full .dpd-original {
		font-size: min(calc(var(--dpd-original-size, 28px) * 0.75), 5.5vw) !important;
	}

	.dpd-price--full .dpd-label {
		font-size: calc(var(--dpd-label-size, 13px) * 0.9);
	}

	.dpd-price--full .dpd-badge {
		font-size: calc(var(--dpd-badge-size, 14px) * 0.9);
	}

	.dpd-price--full .dpd-suffix {
		font-size: calc(var(--dpd-suffix-size, 13px) * 0.9);
	}
}

/* Admin náhľad – mobilný rám (320 px) zrkadlí mobilné pravidlá vyššie. */
.dpd-frame--mobile .dpd-price--full {
	flex-wrap: nowrap;
	gap: 8px 0;
}

.dpd-frame--mobile .dpd-price--full .dpd-col {
	min-width: 0;
}

.dpd-frame--mobile .dpd-price--full .dpd-col--original {
	padding-right: 10px;
}

.dpd-frame--mobile .dpd-price--full .dpd-col--sale {
	padding-left: 10px;
}

/* V admin ráme (320 px) používame pevné ekvivalenty vw stropov,
   aby náhľad ukazoval realistickú mobilnú veľkosť. */
.dpd-frame--mobile .dpd-price--full .dpd-sale {
	font-size: min(calc(var(--dpd-sale-size, 52px) * 0.7), 28px);
	white-space: normal;
}

.dpd-frame--mobile .dpd-price--full .dpd-sale .amount {
	white-space: nowrap;
}

.dpd-frame--mobile .dpd-price--full .dpd-original {
	font-size: min(calc(var(--dpd-original-size, 28px) * 0.75), 18px);
}

.dpd-frame--mobile .dpd-price--full .dpd-label {
	font-size: calc(var(--dpd-label-size, 13px) * 0.9);
}

.dpd-frame--mobile .dpd-price--full .dpd-badge {
	font-size: calc(var(--dpd-badge-size, 14px) * 0.9);
}

.dpd-frame--mobile .dpd-price--full .dpd-suffix {
	font-size: calc(var(--dpd-suffix-size, 13px) * 0.9);
}

.dpd-price--full .dpd-original {
	font-size: var(--dpd-original-size, 20px);
}

.dpd-price--full .dpd-sale {
	font-size: var(--dpd-sale-size, 34px);
}

/* ======================================================================= */
/* KOMPAKTNÝ režim (mriežka)                                               */
/* ======================================================================= */
.dpd-price--compact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dpd-price--compact .dpd-topline {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dpd-price--compact .dpd-original {
	font-size: var(--dpd-original-size-grid, 15px);
}

.dpd-price--compact .dpd-sale {
	font-size: var(--dpd-sale-size-grid, 24px);
}

.dpd-badge--sm {
	font-size: var(--dpd-badge-size-grid, 12px);
	padding: 1px 8px;
}