/**
 * Gift vouchers (P10k, includes/gift-voucher-render.php, templates/gift-voucher/page.php): the product page of the
 * voucher (on top of the piece page – reskin-page.css: .hst-pp-*) and the voucher page with printing on A6 / A4.
 */

/* ---- Product page ------------------------------------------------------------------------------------------------ */
.hst-reskin .hst-gv-pic {
	position: sticky;
	top: calc(var(--hst-header-h, 76px) + 24px);
	flex: 1 1 560px;
	min-width: 0;
	margin: 0;
}

.hst-reskin .hst-gv-pic__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1748 / 1240;
	border-radius: 6px;
	background: var(--hst-ink);
	box-shadow: 0 18px 40px rgba(22, 17, 15, 0.22);
}

.hst-reskin .hst-gv-values .hst-pp-sizes {
	gap: 12px;
}

.hst-reskin .hst-gv-pill {
	min-width: 96px;
	min-height: 56px;
	font-family: var(--hst-serif);
	font-size: 20px;
	font-weight: 600;
}

.hst-reskin .hst-gv-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hst-reskin .hst-gv-optional {
	color: var(--hst-on-light);
	font-weight: 400;
}

.hst-reskin .hst-gv-fields__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.hst-reskin .hst-gv-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.hst-reskin .hst-gv-field label {
	color: var(--hst-ink);
	font-size: 14px;
	font-weight: 600;
}

.hst-reskin .hst-gv-field :is(input, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid rgba(22, 17, 15, 0.35);
	border-radius: 3px;
	background: #f8f3eb;
	box-shadow: none;
	color: var(--hst-ink);
	font-family: inherit;
	font-size: 16px;
}

.hst-reskin .hst-gv-field textarea {
	min-height: 96px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.hst-reskin .hst-gv-field :is(input, textarea):focus {
	border-color: var(--hst-ink);
	outline: 2px solid var(--hst-ink);
	outline-offset: 1px;
}

.hst-reskin .hst-gv-field__count {
	align-self: flex-end;
	color: var(--hst-on-light);
	font-size: 13px;
}

.hst-reskin .hst-gv-fields .hst-pp-hint {
	margin: 0;
}

/* "Ako to funguje" (left column, as "O kúsku" of a piece – P10k doplnok 2): the steps under each other, the terms in
   the size of a description (.hst-pp-desc); "Dobré vedieť" on the right uses the rows of the piece page. */
.hst-reskin .hst-gv-steps {
	display: grid;
	gap: 18px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-gv-steps__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
}

.hst-reskin .hst-gv-steps__item p {
	margin: 4px 0 0;
	color: var(--hst-on-light-2);
	font-size: 17px;
	line-height: 1.6;
}

.hst-reskin .hst-gv-steps__n {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hst-ink);
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: 18px;
	font-weight: 600;
}

.hst-reskin .hst-gv-terms h3 {
	margin-top: 40px;
}

@media (max-width: 1023px) {
	.hst-reskin .hst-gv-pic {
		position: static;
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	.hst-reskin .hst-gv-fields__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.hst-reskin .hst-gv-steps {
		gap: 14px;
		margin-top: 24px;
	}

	.hst-reskin .hst-gv-steps__item p {
		font-size: 15px;
		line-height: 1.6;
	}

	.hst-reskin .hst-gv-terms h3 {
		margin-top: 32px;
	}

	.hst-reskin .hst-gv-pill {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---- Voucher page /poukazka/{token}/ ------------------------------------------------------------------------------ */
.hst-reskin .hst-gvp {
	background: var(--hst-bone);
}

.hst-reskin .hst-gvp__inner {
	box-sizing: border-box;
	max-width: 980px;
	margin: 0 auto;
	padding: 48px var(--hst-gutter, 24px) 80px;
	text-align: center;
}

.hst-reskin .hst-gvp__eyebrow {
	margin: 0 0 8px;
	color: var(--hst-oxblood);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hst-reskin .hst-gvp__title {
	margin: 0 0 28px;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: clamp(36px, 4vw, 52px);
	font-weight: 600;
	line-height: 1.05;
}

.hst-reskin .hst-gvp__state {
	margin: 0 auto 24px;
	padding: 12px 16px;
	max-width: 620px;
	border-left: 3px solid var(--hst-oxblood);
	background: #f8f3eb;
	color: var(--hst-ink);
	font-weight: 700;
	text-align: left;
}

.hst-reskin .hst-gvp__sheet {
	position: relative;
	margin: 0 auto;
	max-width: 874px;
}

.hst-reskin .hst-gvp__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 22px 48px rgba(22, 17, 15, 0.25);
}

.hst-reskin .hst-gvp__mark {
	display: none;
}

.hst-reskin .hst-gvp__code {
	margin: 22px 0 0;
	color: var(--hst-ink);
	font-size: 17px;
	font-weight: 600;
}

.hst-reskin .hst-gvp__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 26px 0 0;
}

.hst-reskin .hst-gvp__how {
	max-width: 620px;
	margin: 28px auto 0;
	color: var(--hst-on-light);
	font-size: 15px;
	line-height: 1.65;
}

.hst-reskin .hst-gvp__how a {
	color: var(--hst-oxblood);
	font-weight: 700;
}

/* Print: only the voucher. A4 (default): A6 in the middle of the page with crop marks; A6: the whole page. */
@media print {
	body.hst-gvp-page {
		visibility: hidden;
		background: #fff !important;
	}

	body.hst-gvp-page .hst-gvp__sheet,
	body.hst-gvp-page .hst-gvp__sheet * {
		visibility: visible;
	}

	body.hst-gvp-page .hst-gvp__sheet {
		position: absolute;
		top: 40mm;
		left: 50%;
		width: 148mm;
		max-width: none;
		height: 105mm;
		margin: 0 0 0 -74mm;
	}

	body.hst-gvp-page .hst-gvp__img {
		width: 148mm;
		height: 105mm;
		border-radius: 0;
		box-shadow: none;
	}

	body.hst-gvp-page .hst-gvp__mark {
		position: absolute;
		display: block;
		width: 8mm;
		height: 8mm;
		border: 0 solid #000;
	}

	body.hst-gvp-page .hst-gvp__mark--tl {
		top: -10mm;
		left: -10mm;
		border-right-width: 0.2mm;
		border-bottom-width: 0.2mm;
	}

	body.hst-gvp-page .hst-gvp__mark--tr {
		top: -10mm;
		right: -10mm;
		border-left-width: 0.2mm;
		border-bottom-width: 0.2mm;
	}

	body.hst-gvp-page .hst-gvp__mark--bl {
		bottom: -10mm;
		left: -10mm;
		border-right-width: 0.2mm;
		border-top-width: 0.2mm;
	}

	body.hst-gvp-page .hst-gvp__mark--br {
		right: -10mm;
		bottom: -10mm;
		border-left-width: 0.2mm;
		border-top-width: 0.2mm;
	}

	body.hst-gvp-page.hst-gvp-a6 .hst-gvp__sheet {
		top: 0;
		left: 0;
		margin: 0;
	}

	body.hst-gvp-page.hst-gvp-a6 .hst-gvp__mark {
		display: none;
	}
}

/* ---- Live preview of the voucher (P10m C): the SVG layer in the coordinates of the picture (1748 × 1240) -------- */
.hst-reskin .hst-gv-pic__frame {
	position: relative;
}

.hst-reskin .hst-gv-live {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.hst-reskin .hst-gv-live text {
	font-kerning: none;
	font-variant-ligatures: none;
}

.hst-reskin .hst-gv-live__lbl {
	font: 600 36px "HSTV Archivo", sans-serif;
	fill: #b8954f;
}

.hst-reskin .hst-gv-live__val {
	font: 400 38px "HSTV Archivo", sans-serif;
	fill: #efe6da;
}

.hst-reskin .hst-gv-live__msg {
	font: italic 500 42px "HSTV Bodoni", serif;
	fill: #efe6da;
}

.hst-reskin .hst-gv-pic__note {
	margin: 16px 0 0;
	color: var(--hst-on-light-2);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* ---- Card of the voucher (P10m B: home page, shop) – dark leather, golden stitch, the voucher, text, button ---- */
.hst-reskin .hst-gvcard {
	margin: 56px auto 0;
	max-width: 980px;
}

.hst-reskin .hst-gvcard .hst-gvcard__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	padding: clamp(24px, 3vw, 36px);
	border-radius: 6px;
	background: var(--hst-ink);
	color: var(--hst-bone);
	box-shadow: 0 18px 40px rgba(22, 17, 15, 0.18);
}

.hst-reskin .hst-gvcard .hst-gvcard__stitch {
	position: absolute;
	inset: 10px;
	border: 1.5px dashed rgba(184, 149, 79, 0.7);
	border-radius: 3px;
	pointer-events: none;
}

.hst-reskin .hst-gvcard .hst-gvcard__pic {
	position: relative;
	display: block;
}

.hst-reskin .hst-gvcard .hst-gvcard__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1748 / 1240;
	border-radius: 4px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	transform: rotate(-2deg);
}

.hst-reskin .hst-gvcard .hst-gvcard__body {
	position: relative;
	min-width: 0;
}

.hst-reskin .hst-gvcard .hst-gvcard__eyebrow {
	margin: 0 0 8px;
	color: var(--hst-thread);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hst-reskin .hst-gvcard .hst-gvcard__title {
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: clamp(28px, 2.6vw, 36px);
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-gvcard .hst-gvcard__text {
	margin: 12px 0 22px;
	color: var(--hst-on-dark);
	font-size: 16px;
	line-height: 1.6;
}

.hst-reskin .hst-gvcard-sec {
	box-sizing: border-box;
	max-width: var(--hst-content, 1360px);
	margin: 0 auto;
	padding: 0 var(--hst-gutter, 24px) 72px;
}

.hst-reskin .hst-gvcard-sec .hst-gvcard {
	margin-top: 0;
}

@media (max-width: 767px) {
	.hst-reskin .hst-gvcard {
		margin-top: 40px;
	}

	.hst-reskin .hst-gvcard .hst-gvcard__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 28px 22px 26px;
	}

	.hst-reskin .hst-gvcard .hst-gvcard__pic {
		max-width: 300px;
		margin: 0 auto;
	}

	.hst-reskin .hst-gvcard-sec {
		padding: 0 16px 48px;
	}
}