/*
 * Redesign "Návrh 3" (P08a) – sections of the new home page and the decor components. Loaded only on pages that use
 * hst-* classes (includes/reskin.php), behind the switch HST_RESKIN. Decor markup: includes/reskin-decor.php.
 *
 * Section = Kadence Row Layout (full width, one column) with
 *   hst-sec + hst-sec--ink | --bone | --oxblood | --concrete (text colours; the background is the row's colour),
 *   decor classes (hst-seam-*, hst-thread-*), and a section class (hst-hero, hst-cats …) for its own spacing.
 * Inside: hst-split (Row Layout, two columns), hst-sec-head (heading + action), hst-steps, core blocks.
 * The rules also apply in the block editor (.editor-styles-wrapper – the editor loads this file as the style of the
 * redesign blocks), so the owner edits the page in its real colours and type.
 */

/* ---- Sections ---------------------------------------------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec,
:is(.hst-reskin, .editor-styles-wrapper) .hst-strap {
	position: relative;
	font-family: var(--hst-sans);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(56px, 6vw, 88px) var(--hst-gutter);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > * + * {
	margin-top: 24px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--oxblood {
	--hst-focus: var(--hst-thread);
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--bone,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--concrete {
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink p {
	color: var(--hst-on-dark);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--oxblood p {
	color: var(--hst-on-oxblood);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--bone p {
	color: var(--hst-on-light);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--concrete p,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--concrete li {
	color: var(--hst-on-light-2);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink :is(h1, h2, h3, h4),
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--oxblood :is(h1, h2, h3, h4) {
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--bone :is(h1, h2, h3, h4),
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--concrete :is(h1, h2, h3, h4) {
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink a:not(.wp-element-button),
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--oxblood a:not(.wp-element-button) {
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--bone a:not(.wp-element-button),
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--concrete a:not(.wp-element-button) {
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec p,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec li {
	font-size: 17px;
	line-height: 1.65;
}

/* Section spacing as in the design (top / bottom; the bottom leaves room for a seam). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-hero > .kt-row-column-wrap {
	padding-top: clamp(36px, 5vw, 72px);
	padding-bottom: clamp(32px, 3vw, 48px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-cats > .kt-row-column-wrap {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(120px, 11vw, 150px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-products > .kt-row-column-wrap {
	padding-top: clamp(36px, 4vw, 56px);
	padding-bottom: clamp(48px, 5vw, 72px); /* P08f: less room under "Zobraziť celý obchod" (the strap row follows). */
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-products .kt-inside-inner-col > .wp-block-buttons.hst-center {
	margin-top: clamp(48px, 5vw, 64px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-him > .kt-row-column-wrap {
	padding-top: 24px;
	padding-bottom: clamp(120px, 11vw, 160px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-workshop > .kt-row-column-wrap {
	padding-top: clamp(56px, 6vw, 88px);
	padding-bottom: clamp(120px, 11vw, 160px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-custom > .kt-row-column-wrap {
	padding-top: clamp(64px, 7vw, 104px);
	padding-bottom: clamp(80px, 8vw, 112px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-insta > .kt-row-column-wrap,
:is(.hst-reskin, .editor-styles-wrapper) .hst-news > .kt-row-column-wrap {
	padding-top: clamp(72px, 7vw, 104px);
	padding-bottom: clamp(64px, 8vw, 112px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-custom {
	overflow: hidden;
}

/* Two columns. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-split > .kt-row-column-wrap {
	padding: 0;
	max-width: none;
	column-gap: clamp(40px, 6vw, 96px);
	row-gap: 40px;
	align-items: center;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-split .wp-block-kadence-column > .kt-inside-inner-col > * + * {
	margin-top: 24px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-news .hst-split > .kt-row-column-wrap {
	align-items: start;
}

/* Heading row: heading left, action right. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head > .wp-block-group__inner-container,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head:not(:has(> .wp-block-group__inner-container)) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head__text {
	max-width: 660px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head__text > .wp-block-group__inner-container > * + * {
	margin-top: 16px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head > .wp-block-group__inner-container > *,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head__text > .wp-block-group__inner-container > :first-child {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head__link a,
:is(.hst-reskin, .editor-styles-wrapper) .hst-more a {
	font-size: 16px;
	font-weight: 600;
	text-underline-offset: 5px;
}

/* ---- Type ---------------------------------------------------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec :is(h1, h2, h3) {
	margin: 0;
	font-family: var(--hst-serif);
	font-weight: 600;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(h1, h2, h3) em {
	font-style: italic;
	font-weight: 500;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-h1 {
	font-size: clamp(56px, 7.4vw, 112px);
	font-size: min(clamp(56px, 7.4vw, 112px), calc(100cqi / 7.3));
	line-height: 0.95;
	letter-spacing: -0.02em;
}

/* P10e: the second row of the home H1 („vyrobená ručne.“ ≈ 7.2 em) stays one row – the font shrinks only as much as the
   column needs („Odvaha,“ / „vyrobená ručne.“ as before). The column of the H1 is the container of the cqi unit. */
:is(.hst-reskin, .editor-styles-wrapper) :has(> .hst-h1) {
	container-type: inline-size;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-h2 {
	font-size: clamp(40px, 4.4vw, 64px);
	line-height: 1;
	letter-spacing: -0.015em;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-news .hst-h2 {
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1.05;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec h3 {
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: #c9bdb1;
	font-size: 12px !important;
	font-weight: 600;
	font-stretch: 75%;
	letter-spacing: 0.2em;
	line-height: 1.4 !important;
	text-transform: uppercase;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-eyebrow::before {
	content: "";
	flex: none;
	width: 48px;
	border-top: 2px dashed var(--hst-thread);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-lead {
	max-width: 34em;
	font-size: 18px;
}

/* ---- Buttons (core Buttons block, class on the button) ---------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

:is(.hst-reskin, .editor-styles-wrapper) .wp-block-buttons.hst-center {
	justify-content: center;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-btn--bone, .hst-btn--oxblood, .hst-btn--outline, .hst-btn--outline-dark) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	padding: 0 30px;
	border: 1.5px solid transparent;
	border-radius: var(--hst-radius);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--bone .wp-block-button__link {
	background: var(--hst-bone);
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--bone .wp-block-button__link:hover {
	background: #ffffff;
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--oxblood .wp-block-button__link {
	background: var(--hst-oxblood);
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--oxblood .wp-block-button__link:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

/* On the ink sections (hero) the darker oxblood would vanish – lighter red on hover there. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink .hst-btn--oxblood .wp-block-button__link:hover {
	background: #7a1420;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--outline .wp-block-button__link {
	background: transparent;
	border-color: rgba(239, 230, 218, 0.6);
	color: var(--hst-bone);
	font-weight: 600;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--outline .wp-block-button__link:hover {
	border-color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--outline-dark .wp-block-button__link {
	background: transparent;
	border-color: var(--hst-ink);
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--outline-dark .wp-block-button__link:hover {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

/* ---- Placeholders for P08b–P08d (marked, visible only until the dynamic blocks replace them) -------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-placeholder {
	box-sizing: border-box;
	min-height: 140px;
	padding: 24px;
	border: 1.5px dashed currentColor;
	border-radius: 4px;
	opacity: 0.85;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-placeholder p {
	margin: 0;
	font-size: 15px !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-placeholder--media {
	position: relative;
	padding: 0 0 64px 36px;
	border: 0;
	opacity: 1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-placeholder__note {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 22em;
	padding: 8px 12px;
	border: 1.5px dashed currentColor;
	border-radius: 4px;
}

/* ---- Photo shapes -------------------------------------------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-arch {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-arch img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 300px 300px 4px 4px;
	background: #1b1515;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-arch--tall img {
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 6px 6px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-square img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	background: #ddd2c4;
}

/* Price tag: oxblood, pointed left end, bone eyelet, Bodoni 20 px. In .hst-tagged it sits on the photo. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-price-tag {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 8px 16px 8px 28px;
	background: var(--hst-oxblood);
	color: var(--hst-bone) !important;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
	font-family: var(--hst-serif);
	font-size: 20px !important;
	font-weight: 600;
	line-height: 1.1 !important;
	white-space: nowrap;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-price-tag::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tagged {
	position: relative;
	max-width: 300px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tagged .hst-price-tag {
	position: absolute;
	z-index: 1;
	left: -10px;
	bottom: 18px;
	margin: 0 !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tagged .wp-block-image {
	margin: 0;
}

/* Leather patch: photo cut like a piece of leather, golden stitch around (SVG from reskin-decor.php). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-patch {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-patch img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 40%;
	clip-path: polygon(7% 3%, 31% 0%, 57% 2.5%, 82% 0%, 97% 6%, 100% 31%, 96% 55%, 100% 83%, 90% 100%, 63% 97%, 37% 100%, 11% 96%, 0% 78%, 3% 50%, 0% 24%);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-patch__stitch {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: var(--hst-thread);
	pointer-events: none;
}

/* Made-to-measure pattern: dashed outline with notches and scissors, tools photo over the corner. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 480px;
	margin-bottom: 40px;
	padding: 22px;
	box-sizing: border-box;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern > .kt-inside-inner-col {
	position: relative;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__outline {
	position: absolute;
	inset: 0;
	border: 1.5px dashed rgba(22, 17, 15, 0.55);
	border-radius: 3px;
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__notch {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__notch--top {
	left: 50%;
	top: -1px;
	margin-left: -7px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 11px solid var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__notch--bottom {
	left: 50%;
	bottom: -1px;
	margin-left: -7px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 11px solid var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__notch--right {
	right: -1px;
	top: 50%;
	margin-top: -7px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 11px solid var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__scissors {
	position: absolute;
	left: 34px;
	top: -13px;
	display: flex;
	padding: 0 6px;
	background: var(--hst-concrete);
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern .wp-block-image {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 35%;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern .hst-pattern__tools {
	position: absolute;
	left: -44px;
	bottom: -40px;
	width: 52%;
	margin: 0 !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern__tools img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 30% 50%;
	box-shadow: 0 20px 40px rgba(22, 17, 15, 0.38);
}

/* Leather tag (newsletter): cut corners, eyelet, stitch inside. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag {
	position: relative;
	box-sizing: border-box;
	padding: clamp(36px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(36px, 4vw, 52px) clamp(68px, 6vw, 92px);
	background: var(--hst-oxblood);
	color: var(--hst-bone);
	clip-path: polygon(40px 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
	--hst-focus: var(--hst-thread);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag > .kt-inside-inner-col {
	position: relative;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-tag :is(h2, h3) {
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-tag p {
	color: var(--hst-on-oxblood);
	font-size: 16px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag__eyelet {
	position: absolute;
	left: 22px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: var(--hst-bone);
	box-shadow: 0 0 0 4px var(--hst-thread);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag__stitch {
	position: absolute;
	left: 54px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	border: 1.5px dashed var(--hst-thread);
	border-radius: 2px;
	pointer-events: none;
}

/* Quote (Dielňa): a speech bubble of darker leather with a stitch inside, its tail points to the name below (P08f). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-quote {
	margin: 36px 0 0;
	padding: 0;
	border: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-quote p {
	position: relative;
	max-width: 24em;
	margin: 0;
	padding: 28px 32px 30px;
	border-radius: 6px;
	background: var(--hst-oxblood-deep);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: clamp(21px, 1.9vw, 26px);
	font-style: italic;
	line-height: 1.4;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-quote p::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1.5px dashed var(--hst-thread);
	border-radius: 3px;
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-quote p::after {
	content: "";
	position: absolute;
	left: 40px;
	top: 100%;
	border-style: solid;
	border-width: 20px 22px 0 0;
	border-color: var(--hst-oxblood-deep) transparent transparent;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-quote cite {
	display: block;
	margin-top: 28px;
	padding-left: 40px;
	color: var(--hst-on-oxblood);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
}

/* Numbered list (Na mieru). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-numbered {
	max-width: 520px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hst-step;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-numbered li {
	display: flex;
	gap: 18px;
	align-items: baseline;
	margin: 0;
	padding: 14px 0;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
	font-size: 16px !important;
	line-height: 1.55 !important;
	counter-increment: hst-step;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-numbered li:last-child {
	border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-numbered li::before {
	content: counter(hst-step);
	min-width: 22px;
	color: var(--hst-oxblood);
	font-family: var(--hst-serif);
	font-size: 22px;
	font-weight: 600;
}

/* Steps on a wavy stitch (Dielňa). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-steps-title {
	margin-top: clamp(72px, 8vw, 116px) !important;
	text-align: center;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps {
	position: relative;
	margin-top: clamp(32px, 3.5vw, 48px) !important; /* P08f: more room under the heading. */
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding: 0;
	max-width: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps__wave {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 70px;
	color: var(--hst-thread);
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 18px;
	text-align: center;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps .kt-inside-inner-col > * {
	margin-bottom: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps .kt-inside-inner-col > * + * {
	margin-top: 4px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 16px 0 14px;
	border-radius: 50%;
	background: var(--hst-oxblood-deep);
	box-shadow: 0 0 0 2px var(--hst-bone);
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-step__title {
	color: var(--hst-bone);
	font-size: 18px;
	font-weight: 700;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-steps p:not(.hst-step__num, .hst-step__title) {
	max-width: 16em;
	font-size: 15px;
	line-height: 1.55;
}

/* ---- Seams and the vertical thread --------------------------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-seam__edge {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 56px;
	z-index: 2;
	display: block;
	color: var(--hst-thread);
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam__fill {
	fill: var(--hst-seam-fill, var(--hst-bone));
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-b {
	--hst-seam-fill: var(--hst-oxblood);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-c {
	--hst-seam-fill: var(--hst-concrete);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-to-ink {
	--hst-seam-fill: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-to-bone {
	--hst-seam-fill: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-to-oxblood {
	--hst-seam-fill: var(--hst-oxblood);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-to-concrete {
	--hst-seam-fill: var(--hst-concrete);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--seam {
	left: 3%;
	bottom: 21px;
	margin: 0 0 -5px -5px;
}

/* hst-seam-end-knot (P09c): the stitch ends at 97 % with a knot instead of going on as the thread below. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--seam-end {
	left: 97%;
	bottom: 21px;
	margin: 0 0 -5px -5px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-thread {
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	z-index: 0;
	display: block;
	overflow: visible;
	color: var(--hst-thread);
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-thread--right {
	left: calc(97% - 2px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-thread--left {
	left: calc(3% - 2px);
}

/* With a seam at the bottom the thread stops at the stitch; with a straight seam at the top it starts below it. */
:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-seam-a, .hst-seam-b, .hst-seam-c) > .hst-thread {
	height: calc(100% - 21px);
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-seam-straight-rl, .hst-seam-straight-lr) > .hst-thread {
	top: 24px;
	height: calc(100% - 24px);
}

/* ---- Strap: slanted oxblood band on the line between bone and ink ------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-strap {
	z-index: 3;
	height: clamp(120px, 11vw, 160px);
	/* The line between the bone section above and the ink one below runs in the angle of the strap (−2°, through the
	   centre like the strap) – the strap covers it from edge to edge at every width (P09k, decision 111). */
	background: linear-gradient(178deg, var(--hst-bone) 0 50%, var(--hst-ink) 50% 100%) !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__band {
	position: absolute;
	left: -6%;
	right: -6%;
	top: 50%;
	height: 78px;
	margin-top: -39px;
	transform: rotate(-2deg);
	background: var(--hst-oxblood);
	color: var(--hst-thread);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__stitch {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1.5px dashed var(--hst-thread);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__stitch--top {
	top: 8px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__stitch--bottom {
	bottom: 8px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__buckle {
	position: absolute;
	left: 12%;
	top: 50%;
	width: 40px;
	height: 54px;
	margin-top: -27px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__holes {
	position: absolute;
	right: 12%;
	top: 50%;
	margin-top: -6px;
	display: flex;
	gap: 22px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__holes span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--hst-ink);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap > .kt-row-column-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: none;
	padding: 0 18% 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-2deg);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap .kt-inside-inner-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 30px;
	white-space: nowrap;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap .hst-strap__text {
	margin: 0;
	color: var(--hst-bone);
	font-size: clamp(16px, 1.45vw, 20px);
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	line-height: 1.2;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-strap .hst-strap__text + .hst-strap__text::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 30px 0 0;
	border-radius: 50%;
	background: var(--hst-thread);
	vertical-align: middle;
}

/* ---- Phones -------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec p,
	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec li {
		font-size: 16px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-h1 {
		font-size: 50px;
		font-size: min(50px, calc(100cqi / 7.3));
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-h2 {
		font-size: clamp(30px, 9vw, 36px);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-placeholder--media {
		padding: 0 0 56px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-hero > .kt-row-column-wrap {
		padding-top: 22px;
		padding-bottom: 44px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-split > .kt-row-column-wrap {
		row-gap: 32px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-arch img {
		aspect-ratio: 4 / 5;
		border-radius: 175px 175px 4px 4px;
	}

	/* Mobile design: a list with the number on the left and a straight dashed thread through the numbers. */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps-title {
		margin-top: 60px !important;
		text-align: left;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps {
		margin-top: 28px !important;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps > .kt-row-column-wrap {
		grid-template-columns: 1fr;
		row-gap: 22px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-quote p {
		padding: 24px 24px 26px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-quote p::after {
		left: 32px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-quote cite {
		padding-left: 32px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps > .kt-row-column-wrap::before {
		content: "";
		position: absolute;
		left: 18px;
		top: 18px;
		bottom: 40px;
		border-left: 2px dashed var(--hst-thread);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps .kt-inside-inner-col {
		display: grid;
		grid-template-columns: 38px minmax(0, 1fr);
		column-gap: 18px;
		align-items: start;
		padding: 0;
		text-align: left;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps .kt-inside-inner-col > * + * {
		margin-top: 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-step__num {
		grid-row: 1 / span 2;
		margin: 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-step__title {
		padding-top: 5px;
		font-size: 17px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps p:not(.hst-step__num, .hst-step__title) {
		grid-column: 2;
		max-width: none;
		margin-top: 2px;
		line-height: 1.5;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-steps__wave {
		display: none;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-eyebrow {
		font-size: 11px !important;
		letter-spacing: 0.18em;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-lead {
		font-size: 16px;
	}

	/* Strap on phones: 104 px, band 56 px at −3°, only the first text (the home page has none since P08f). */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap {
		height: 104px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__band {
		height: 56px;
		margin-top: -28px;
		transform: rotate(-3deg);
		box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__stitch--top {
		top: 6px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__stitch--bottom {
		bottom: 6px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap > .kt-row-column-wrap {
		padding: 0;
		transform: rotate(-3deg);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap .hst-strap__text {
		font-size: 14px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap .hst-strap__text + .hst-strap__text {
		display: none;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__buckle {
		left: 10%;
		width: 28px;
		height: 38px;
		margin-top: -19px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__holes {
		right: 10%;
		margin-top: -4px;
		gap: 12px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-strap__holes span {
		width: 8px;
		height: 8px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-pattern .hst-pattern__tools {
		left: -20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec * {
		transition: none !important;
	}
}

/* =================================================================================================================
 * Blocks of the redesign (P08b, includes/reskin-blocks.php) – not scoped to .hst-reskin, the editor loads this file
 * as the blocks' style (the variables come from reskin.css, a dependency).
 * ================================================================================================================= */

/* ---- hst/arch-slider: photos in an arch, stamp, dashes and arrows ------------------------------------------------- */
.hst-slider {
	position: relative;
	padding: 0 0 64px 36px;
}

.hst-slider__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: 300px 300px 4px 4px;
	background: #1b1515;
}

.hst-slider__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	opacity: 0;
	/* Inactive photos are not painted at all (visibility after the fade): stacked transparent images inside the
	   rounded, clipped frame were not drawn by Chrome's renderer in some cases. */
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.hst-slider__img.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.7s ease, visibility 0s;
}

.hst-slider__img[hidden] {
	display: none;
}

.hst-slider__stamp {
	position: absolute;
	left: 0;
	bottom: 28px;
	z-index: 1;
	width: 156px;
	height: 156px;
	border-radius: 50%;
	background: var(--hst-oxblood);
	box-shadow: 0 0 0 8px var(--hst-ink);
	color: var(--hst-thread);
}

.hst-slider__stamp svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hst-slider__stamp text {
	fill: var(--hst-bone);
}

.hst-slider__stamp-ring {
	font-family: var(--hst-sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0; /* textLength spreads the letters (includes/reskin-blocks.php). */
}

.hst-slider__stamp-small {
	font-family: var(--hst-serif);
	font-size: 13px;
	font-style: italic;
}

.hst-slider__stamp-year {
	font-family: var(--hst-serif);
	font-size: 26px;
	font-weight: 600;
}

/* Without the ring text (P08f): a smaller medallion, "od roku" and the year larger inside it. */
.hst-slider__stamp--plain {
	width: 112px;
	height: 112px;
	box-shadow: 0 0 0 7px var(--hst-ink);
}

.hst-slider__stamp--plain .hst-slider__stamp-small {
	font-size: 19px;
}

.hst-slider__stamp--plain .hst-slider__stamp-year {
	font-size: 40px;
}

.hst-slider__controls {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}

.hst-slider .hst-slider__dot,
.hst-slider .hst-slider__arrow,
.hst-strip .hst-strip__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--hst-bone);
	cursor: pointer;
}

.hst-slider .hst-slider__dot:hover,
.hst-slider .hst-slider__arrow:hover,
.hst-strip .hst-strip__btn:hover {
	background: none;
	box-shadow: none;
	color: #ffffff;
}

.hst-slider .hst-slider__dot {
	width: 40px;
	height: 44px;
}

.hst-slider__dot span {
	display: block;
	width: 16px;
	height: 3px;
	border-radius: 2px;
	background: rgba(239, 230, 218, 0.4);
	transition: width 0.3s ease;
}

.hst-slider__dot[aria-current="true"] span {
	width: 30px;
	background: var(--hst-thread);
}

.hst-slider .hst-slider__arrow {
	width: 44px;
	height: 44px;
}

.hst-slider .hst-slider__arrow--prev {
	margin-left: 10px;
}

/* Pause / play of the autoplay (P08f). */
.hst-slider .hst-slider__pause {
	margin-left: 4px;
	color: var(--hst-on-dark-3);
}

.hst-slider__pause .hst-slider__icon-play,
.hst-slider__pause.is-paused .hst-slider__icon-pause {
	display: none;
}

.hst-slider__pause.is-paused .hst-slider__icon-play {
	display: block;
}

.hst-slider button:focus-visible,
.hst-strip button:focus-visible,
.hst-cat-card__link:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 2px;
}

/* ---- hst/category-strip + hst/category-card ----------------------------------------------------------------------- */
.hst-strip {
	position: relative;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > .hst-strip {
	margin-top: 36px;
}

/* .hst-strip > … beats the theme's ".entry-content ul" (padding-left would shift the cards). */
.hst-strip > .hst-strip__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max(220px, calc((100% - 60px) / 4.3));
	gap: 20px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hst-strip__list::-webkit-scrollbar {
	display: none;
}

/* Arrows sit at the right end of the heading row above the strip (36 px gap). */
.hst-strip__nav {
	position: absolute;
	right: 0;
	bottom: calc(100% + 36px);
	display: flex;
	gap: 6px;
}

.hst-strip .hst-strip__btn {
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(239, 230, 218, 0.35);
	border-radius: 3px;
}

.hst-strip .hst-strip__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-cats .hst-sec-head {
	padding-right: 106px;
}

.hst-strip__list > .hst-cat-card {
	margin: 0;
	scroll-snap-align: start;
}

.hst-cat-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--hst-ink-card);
	color: var(--hst-bone);
	text-decoration: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-cat-card__link {
	color: var(--hst-bone);
	text-decoration: none;
}

.hst-cat-card__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--hst-photo-bg);
}

.hst-cat-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	transition: transform 0.5s ease;
}

.hst-cat-card__link:hover .hst-cat-card__img img {
	transform: scale(1.03);
}

.hst-cat-card__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 20px;
	border-top: 3px solid var(--hst-oxblood);
}

.hst-cat-card__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hst-cat-card__name {
	font-family: var(--hst-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-cat-card__sub {
	color: var(--hst-on-dark-3);
	font-size: 14px;
	line-height: 1.4;
}

.hst-cat-card__body svg {
	flex: none;
}

/* Editor: the cards as one row of fixed width. */
.hst-strip--editor .hst-strip__list > * {
	min-width: 0;
}

@media (max-width: 767px) {
	.hst-slider {
		padding: 0 0 56px;
	}

	.hst-slider__frame {
		aspect-ratio: 4 / 5;
		border-radius: 175px 175px 4px 4px;
	}

	.hst-slider__img {
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	.hst-slider__stamp {
		left: auto;
		right: 12px;
		bottom: 30px;
		width: 108px;
		height: 108px;
		box-shadow: 0 0 0 6px var(--hst-ink);
	}

	.hst-slider__stamp--plain {
		width: 86px;
		height: 86px;
		box-shadow: 0 0 0 5px var(--hst-ink);
	}

	.hst-slider__controls {
		left: -10px;
		right: auto;
	}

	.hst-slider .hst-slider__dot {
		width: 36px;
	}

	.hst-slider .hst-slider__arrow--prev {
		margin-left: 4px;
	}

	/* Strip on phones: full width, no arrows (swipe). */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > .hst-strip {
		margin: 14px calc(-1 * var(--hst-gutter)) 0;
	}

	.hst-strip > .hst-strip__list {
		grid-auto-columns: 244px;
		gap: 14px;
		padding: 0 var(--hst-gutter) 6px;
		scroll-padding: 0 var(--hst-gutter);
	}

	/* Arrows on phones too (P08f, the owner's wish) – right of "Celý obchod" at the bottom of the heading. */
	.hst-strip__nav {
		right: var(--hst-gutter);
		bottom: calc(100% + 26px);
	}

	.hst-strip .hst-strip__btn {
		width: 40px;
		height: 40px;
	}

	/* Room for the arrows when "Celý obchod" stays on the heading row (wider phones, small tablets ~750 px). */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-cats .hst-sec-head__link {
		margin-right: 100px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-cats .hst-sec-head {
		padding-right: 0;
	}

	.hst-cat-card__body {
		gap: 10px;
		padding: 14px 16px 16px;
	}

	.hst-cat-card__name {
		font-size: 24px;
	}

	.hst-cat-card__sub {
		font-size: 13px;
	}
}

/* Small tablets (768–900 px): the slider already takes the full width there (HST_SLIDER_SIZES) – the hero goes
   one column, the photo first as on phones, in the wide desktop arch. */
@media (min-width: 768px) and (max-width: 900px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-hero .hst-split > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-hero .hst-split > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-slider__img,
	.hst-slider__dot span,
	.hst-cat-card__img img {
		transition: none;
	}
}

/* ---- hst/product-grid (P08c): square cards, price tag, filters, add-to-basket chooser ---------------------------- */
.hst-pgrid {
	position: relative;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > .hst-pgrid {
	margin-top: clamp(40px, 4vw, 56px);
}

.hst-pgrid > .hst-pgrid__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 48px 24px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-pgrid__grid > .hst-pcard {
	position: relative;
	margin: 0;
}

.hst-pcard[hidden] {
	display: none;
}

.hst-pcard__media {
	position: relative;
}

.hst-pcard__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background: #ddd2c4;
}

.hst-pcard__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	transition: transform 0.5s ease;
}

.hst-pcard__img:hover img {
	transform: scale(1.03);
}

.hst-pcard__media .hst-price-tag {
	position: absolute;
	z-index: 1;
	left: -10px;
	bottom: 18px;
	margin: 0;
}

.hst-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 16px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-pcard__name {
	color: var(--hst-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.hst-pcard__name:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hst-pcard__desc {
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.45;
}

.hst-pcard__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.hst-pcard__note {
	color: var(--hst-on-light);
	font-size: 13px;
	line-height: 1.3;
}

/* Filters (pills); on wide screens in the heading row above the grid. */
.hst-pgrid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.hst-pgrid .hst-filter,
.hst-pick .hst-pick__toggle,
.hst-pick .hst-pick__submit,
.hst-pick .hst-pick__close,
.hst-pick .hst-pick__continue {
	box-shadow: none;
	cursor: pointer;
	font-family: var(--hst-sans);
	font-stretch: var(--hst-narrow);
	text-transform: none;
	letter-spacing: 0;
}

.hst-pgrid .hst-filter {
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid rgba(22, 17, 15, 0.3);
	border-radius: 999px;
	background: transparent;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
}

.hst-pgrid .hst-filter:hover {
	border-color: var(--hst-ink);
	background: transparent;
	color: var(--hst-ink);
}

.hst-pgrid .hst-filter[aria-pressed="true"] {
	border-color: var(--hst-ink);
	background: var(--hst-ink);
	color: var(--hst-bone);
}

@media (min-width: 1100px) {
	.hst-pgrid.has-filters .hst-pgrid__filters {
		position: absolute;
		right: 0;
		bottom: calc(100% + clamp(40px, 4vw, 56px));
		justify-content: flex-end;
		max-width: 520px;
		margin: 0;
	}
}

/* The chooser: details with a real form; the panel covers the card. */
.hst-pick {
	flex: none;
}

.hst-pick .hst-pick__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--hst-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	list-style: none;
}

.hst-pick .hst-pick__toggle::-webkit-details-marker {
	display: none;
}

.hst-pick .hst-pick__toggle::marker {
	content: "";
}

.hst-pick .hst-pick__toggle:hover,
.hst-pick[open] .hst-pick__toggle {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

/* Gift voucher card: a link to its page in the look of "Do košíka" (value and dedication are chosen there – P10m doplnok). */
.hst-reskin .hst-pick--link .hst-pick__toggle {
	color: var(--hst-ink);
	text-decoration: none;
}

.hst-reskin .hst-pick--link .hst-pick__toggle:hover,
.hst-reskin .hst-pick--link .hst-pick__toggle:focus-visible {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-pick__panel {
	position: absolute;
	z-index: 3;
	left: -10px;
	right: -10px;
	top: -10px;
	box-sizing: border-box;
	min-height: calc(100% + 20px);
	padding: 16px 16px 18px;
	border: 1.5px solid var(--hst-ink);
	border-radius: 6px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	box-shadow: 0 22px 44px rgba(22, 17, 15, 0.22);
	display: flex;
}

.hst-pick__form {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.hst-pick__fields,
.hst-pick__done {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
}

.hst-pick__fields[hidden],
.hst-pick__done[hidden],
.hst-pick__error[hidden] {
	display: none;
}

.hst-pick__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.hst-pick__title {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.hst-pick__name {
	font-size: 17px;
	font-weight: 700;
}

.hst-pick__price {
	font-family: var(--hst-serif);
	font-size: 21px;
	font-weight: 600;
}

.hst-pick .hst-pick__close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px -8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hst-ink);
}

.hst-pick .hst-pick__close:hover {
	background: none;
	color: var(--hst-oxblood);
}

.hst-pick__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.hst-pick__group legend {
	margin: 0 0 6px;
	padding: 0;
	color: var(--hst-on-light);
	font-size: 13px;
}

.hst-pick__current {
	color: var(--hst-ink);
	font-weight: 600;
}

.hst-pick__options {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* Visually hidden radio, the label is the swatch or size button. */
.hst-pick__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.hst-pick__swatch {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(22, 17, 15, 0.25);
	cursor: pointer;
}

.hst-pick__size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 38px;
	margin: 0;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1.5px solid var(--hst-ink);
	border-radius: 3px;
	color: var(--hst-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.hst-pick__input:checked + .hst-pick__swatch {
	box-shadow: 0 0 0 2px var(--hst-bone), 0 0 0 4px var(--hst-ink);
}

.hst-pick__input:checked + .hst-pick__size {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-pick__input:focus-visible + label {
	outline: 2px solid var(--hst-ink);
	outline-offset: 5px;
}

/* The option as a photo in the chooser (P09k – N001 strap): photo, name, surcharge, + / ✓; the checkbox is hidden. */
.hst-pick__tile {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	padding: 4px 10px 4px 4px;
	box-sizing: border-box;
	border: 1.5px solid rgba(22, 17, 15, 0.35);
	border-radius: 4px;
	cursor: pointer;
}

.hst-pick__tile-media {
	flex: none;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 3px;
	background: #ddd2c4;
}

.hst-pick__tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hst-pick__tile-name {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
}

.hst-pick__tile-price {
	flex: none;
	font-size: 14px;
	white-space: nowrap;
}

.hst-pick__tile-mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--hst-ink);
	border-radius: 50%;
}

.hst-pick__tile-tick,
.hst-pick__input:checked + .hst-pick__tile .hst-pick__tile-plus {
	display: none;
}

.hst-pick__input:checked + .hst-pick__tile {
	border-color: var(--hst-ink);
	box-shadow: inset 0 0 0 1px var(--hst-ink);
}

.hst-pick__input:checked + .hst-pick__tile .hst-pick__tile-tick {
	display: inline;
}

.hst-pick__input:checked + .hst-pick__tile .hst-pick__tile-mark {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-pick .hst-pick__submit {
	width: 100%;
	min-height: 48px;
	margin-top: auto;
	padding: 0 14px;
	border: 0;
	border-radius: 3px;
	background: var(--hst-oxblood);
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 700;
}

.hst-pick .hst-pick__submit:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

.hst-pick .hst-pick__submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-sec, .hst-shop-items, .hst-look, .hst-pp-look) .hst-pick .hst-pick__error {
	margin: 0;
	color: var(--hst-oxblood);
	font-size: 13px;
	line-height: 1.45;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-sec, .hst-shop-items, .hst-look, .hst-pp-look) .hst-pick .hst-pick__done-title {
	margin: 0;
	color: var(--hst-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.hst-pick__done-title:focus {
	outline: none;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-sec, .hst-shop-items, .hst-look, .hst-pp-look) .hst-pick .hst-pick__summary {
	margin: 0;
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.45;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-sec, .hst-shop-items, .hst-look, .hst-pp-look) .hst-pick .hst-pick__to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: auto;
	border-radius: 3px;
	background: var(--hst-ink);
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-pick .hst-pick__continue {
	min-height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hst-pick .hst-pick__continue:hover {
	background: none;
	color: var(--hst-oxblood);
}

@media (max-width: 767px) {
	.hst-pgrid > .hst-pgrid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 14px;
	}

	.hst-pgrid__filters {
		flex-wrap: nowrap;
		margin: 0 calc(-1 * var(--hst-gutter)) 26px;
		padding: 0 var(--hst-gutter) 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hst-pgrid .hst-filter {
		flex: none;
		padding: 0 18px;
		white-space: nowrap;
	}

	.hst-pcard__media .hst-price-tag {
		left: -8px;
		bottom: 12px;
		padding: 6px 12px 6px 22px;
		clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
		font-size: 17px !important;
	}

	.hst-pcard__media .hst-price-tag::before {
		left: 10px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
	}

	.hst-pcard__body {
		gap: 2px;
		padding-top: 12px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-pcard__name {
		font-size: 15px;
	}

	.hst-pcard__desc {
		font-size: 13px;
		line-height: 1.4;
	}

	.hst-pcard__row {
		flex-direction: column;
		align-items: stretch;
	}

	.hst-pcard__note {
		display: none;
	}

	.hst-pick .hst-pick__toggle {
		justify-content: center;
		width: 100%;
		font-size: 14px;
		box-sizing: border-box;
	}

	.hst-pick__panel {
		left: -6px;
		right: -6px;
		top: -6px;
		min-height: calc(100% + 12px);
		padding: 10px 10px 12px;
		border-radius: 8px;
	}

	.hst-pick__form,
	.hst-pick__fields,
	.hst-pick__done {
		gap: 8px;
	}

	.hst-pick__name {
		font-size: 14px;
	}

	.hst-pick__price {
		font-size: 17px;
	}

	.hst-pick .hst-pick__close {
		width: 36px;
		height: 36px;
		margin: -6px -6px 0 0;
	}

	.hst-pick__group legend {
		font-size: 12px;
		margin-bottom: 4px;
	}

	.hst-pick__options {
		gap: 6px;
	}

	.hst-pick__swatch {
		width: 26px;
		height: 26px;
	}

	.hst-pick__size {
		min-width: 40px;
		height: 34px;
	}

	.hst-pick .hst-pick__submit,
	:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-sec, .hst-shop-items, .hst-look, .hst-pp-look) .hst-pick .hst-pick__to-cart {
		min-height: 44px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-pcard__img img {
		transition: none;
	}
}

@media (min-width: 1100px) {
	/* Room for the filters at the right end of the heading row. */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-products:has(.hst-pgrid.has-filters) .hst-sec-head {
		padding-right: 540px;
	}
}

/* Editor preview (ServerSideRender): links, forms and buttons of the blocks do nothing, a click selects the block. */
.editor-styles-wrapper :is(.hst-pgrid, .hst-strip, .hst-slider) :is(a, button, summary, label, input, form) {
	pointer-events: none;
}

/* "Novinka" – products published less than newDays ago (hst/product-grid). */
.hst-pcard__badge {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--hst-ink);
	color: var(--hst-bone);
	font-size: 12px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	pointer-events: none;
}

@media (max-width: 767px) {
	.hst-pcard__badge {
		top: 8px;
		left: 8px;
		padding: 4px 8px;
		font-size: 11px;
	}
}

/* ---- P08d: hst/product-rows (Aj pre neho) ------------------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) ul.hst-prows {
	max-width: 480px;
	margin: 4px 0 0;
	padding: 0;
	border-top: 1px dashed rgba(239, 230, 218, 0.28);
	list-style: none;
}

.hst-prows > li {
	margin: 0;
	border-bottom: 1px dashed rgba(239, 230, 218, 0.28);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-prow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	color: var(--hst-bone);
	text-decoration: none;
}

.hst-prow__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hst-prow__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.hst-prow:hover .hst-prow__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hst-prow__sub {
	color: var(--hst-on-dark-3);
	font-size: 14px;
	line-height: 1.4;
}

.hst-prow__price {
	font-family: var(--hst-serif);
	font-size: 24px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---- hst/hotspot: photo in a tall arch with a point on a product -------------------------------------------------- */
.hst-hotspot {
	position: relative;
	width: 100%;
	max-width: 540px;
	margin: 0 0 0 auto;
}

/* The photo reaches up over the strap row (z-index 3) as in the design – Kadence gives the column wrap of the row
   its own stacking context (z-index 1), so the wrap goes above the strap. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-him .hst-hotspot {
	margin-top: calc(-1 * clamp(70px, 7.6vw, 110px));
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-him:has(.hst-hotspot) > .kt-row-column-wrap {
	z-index: 4;
}

.hst-hotspot__frame {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 6px 6px;
	background: var(--hst-photo-bg);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.hst-hotspot__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 30%);
}

.hst-hotspot__line {
	position: absolute;
	border-left: 1.5px solid var(--hst-bone);
	pointer-events: none;
}

.hst-hotspot__point {
	position: absolute;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 2px solid var(--hst-bone);
	border-radius: 50%;
	background: rgba(22, 17, 15, 0.35);
	box-shadow: 0 0 0 7px rgba(239, 230, 218, 0.22);
}

.hst-hotspot__point:hover,
.hst-hotspot__point:focus-visible {
	box-shadow: 0 0 0 9px rgba(239, 230, 218, 0.4);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec a.hst-hotspot__label {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 9px 16px 10px;
	transform: translateX(-50%);
	border-radius: 4px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.hst-hotspot__name {
	font-size: 14px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
}

.hst-hotspot__price {
	font-family: var(--hst-serif);
	font-size: 21px;
	font-weight: 600;
}

/* ---- hst/instagram: six photos across the whole width ------------------------------------------------------------- */
/* The section (row class hst-insta) clips the full-width strip. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec.hst-insta {
	overflow-x: clip;
}

:is(.hst-reskin, .editor-styles-wrapper) ul.hst-igrid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 0;
	list-style: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > ul.hst-igrid {
	margin-top: clamp(32px, 3vw, 44px);
}

.hst-igrid > li {
	margin: 0;
}

.hst-igrid a {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.hst-igrid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.hst-igrid a:hover img {
	transform: scale(1.04);
}

.hst-igrid a:focus-visible {
	outline-offset: -4px;
}

/* Instagram glyph (outline: rounded square, lens, dot) on the "Sledovať" button – P08f. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-btn--insta .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 20px;
	margin-right: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='0.6' fill='black'/%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' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='0.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Note for the site editors when MailPoet is off (includes/reskin-sections.php). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-admin-note {
	padding: 12px 14px;
	border: 1.5px dashed currentColor;
	border-radius: var(--hst-radius);
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.85;
}

/* ---- hst/latest-post ---------------------------------------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec a.hst-post-card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	overflow: hidden;
	border-radius: 4px;
	background: var(--hst-ink);
	color: var(--hst-bone);
	text-decoration: none;
}

.hst-post-card__img {
	display: block;
	min-height: 230px;
}

.hst-post-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 230px;
	object-fit: cover;
	object-position: 55% 50%;
}

.hst-post-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 24px;
}

.hst-post-card__label {
	color: var(--hst-on-dark-3);
	font-size: 14px;
}

.hst-post-card__title {
	font-family: var(--hst-serif);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-post-card__excerpt {
	color: var(--hst-on-dark-2);
	font-size: 15px;
	line-height: 1.55;
}

.hst-post-card__more {
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---- MailPoet form inside the leather tag (form 2, unchanged – shared with the current home page) ----------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form {
	margin: 0;
	padding: 0 !important;
	background: none !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag form.mailpoet_form,
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
}

/* Label "Tvoj e-mail" above the field (decision 41); the required star stays only for the input (aria-required). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form label.mailpoet_text_label {
	display: block;
	margin: 0 0 8px;
	color: var(--hst-bone) !important;
	font-family: var(--hst-sans) !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.4;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet_required {
	display: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet_paragraph {
	flex: 1 1 100%;
	margin: 0 !important;
	padding: 0 !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet_paragraph:has(.mailpoet_text, input[type="email"]) {
	flex: 1 1 220px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet_paragraph:has(.mailpoet_submit) {
	flex: 0 0 auto;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form input.mailpoet_text {
	box-sizing: border-box;
	width: 100% !important;
	min-height: 52px;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1.5px solid rgba(239, 230, 218, 0.7) !important;
	border-radius: 3px !important;
	background: rgba(22, 17, 15, 0.25) !important;
	color: var(--hst-bone) !important;
	font-family: var(--hst-sans) !important;
	font-size: 16px !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form input.mailpoet_text::placeholder {
	color: rgba(239, 230, 218, 0.7);
	opacity: 1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form input.mailpoet_submit {
	min-height: 52px;
	margin: 0 !important;
	padding: 0 26px !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: var(--hst-bone) !important;
	color: var(--hst-ink) !important;
	font-family: var(--hst-sans) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	font-stretch: var(--hst-narrow);
	cursor: pointer;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form input.mailpoet_submit:hover {
	background: #ffffff !important;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form p,
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet-heading {
	margin: 0 !important;
	color: var(--hst-on-oxblood) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	text-align: left !important;
}

/* Link to the privacy statement in the consent text (decision 42) – bone on the oxblood tag, not the section's ink. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-tag .mailpoet_form a {
	color: var(--hst-bone);
	text-decoration: underline;
	text-underline-offset: 3px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-tag .mailpoet_form a:hover {
	color: #ffffff;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet_message p {
	font-size: 15px !important;
}

@media (max-width: 767px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-him .hst-hotspot {
		max-width: none;
		margin-top: 0;
	}

	/* Mobile design: a strip of 158 px squares that scrolls sideways. */
	:is(.hst-reskin, .editor-styles-wrapper) ul.hst-igrid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 158px;
		gap: 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > ul.hst-igrid {
		margin-top: 28px;
	}

	.hst-igrid::-webkit-scrollbar {
		display: none;
	}

	.hst-igrid > li {
		scroll-snap-align: start;
	}

	.hst-prow__price {
		font-size: 22px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form .mailpoet_paragraph:has(.mailpoet_submit),
	:is(.hst-reskin, .editor-styles-wrapper) .hst-tag .mailpoet_form input.mailpoet_submit {
		flex-basis: 100%;
		width: 100% !important;
	}

	/* Buttons of the sections fill the width on mobile as in the design (two buttons share a row). */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .wp-block-buttons > .wp-block-button {
		flex: 1 1 auto;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec-head .wp-block-buttons {
		flex: 1 1 100%;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
		justify-content: center;
		padding: 0 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-igrid img {
		transition: none;
	}
}

/* ==== P09a – subpages: page header, slanted seam, Kontakt (design/podstranky/README.md) ========================== */

/* ---- Page header (hst/page-hero, includes/page-hero.php) -------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero {
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
	background: var(--hst-ink);
	color: var(--hst-bone);
	font-family: var(--hst-sans);
	--hst-focus: var(--hst-thread);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(28px, 3.4vw, 48px) var(--hst-gutter) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-bottom: 64px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--hst-on-dark-3);
	font-size: 14px;
	line-height: 1.5;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs li {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs a {
	color: var(--hst-on-dark-3);
	text-decoration: underline;
	text-underline-offset: 4px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs a:hover,
:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs [aria-current] {
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs__sep {
	display: flex;
	color: var(--hst-thread);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero .hst-page-hero__title {
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: clamp(56px, 6.6vw, 100px);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero .hst-page-hero__lead {
	max-width: 34em;
	margin: 0;
	color: var(--hst-on-dark);
	font-size: 18px;
	line-height: 1.65;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__media {
	position: relative;
	align-self: end;
	padding: 16px 16px 0;
}

/* Concentric golden stitch around the arch, no bottom edge (switched off with the thread, reskin.css). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__stitch {
	position: absolute;
	inset: 0;
	border: 2px dashed var(--hst-thread);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__arch {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 999px 999px 0 0;
	background: var(--hst-photo-bg);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
}

/* ---- Slanted seam (hst-seam-slant, includes/reskin-decor.php) ---------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-seam__slant {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 64px;
	color: var(--hst-thread);
	pointer-events: none;
}

/* The right thread of the section stops where the stitch starts (97 % of the width, 14.6 of 64 units from the top). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-slant > .hst-thread {
	height: calc(100% - 49px);
}

/* Knots at both ends of the slanted stitch (P09k, decision 110): 97 % at 14.6 and 3 % at 63.4 of 64 units. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--slant {
	margin: 0 0 -5px -5px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--slant-r {
	left: 97%;
	bottom: 49.4px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--slant-l {
	left: 3%;
	bottom: 0.6px;
}

/* ---- Kontakt: intro with the contact list ------------------------------------------------------------------------ */
:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro > .kt-row-column-wrap {
	padding-top: clamp(36px, 4vw, 56px);
	padding-bottom: clamp(112px, 10vw, 144px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro .hst-split > .kt-row-column-wrap {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 32px clamp(48px, 7vw, 112px);
	align-items: start;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro .hst-split .kt-inside-inner-col > * + * {
	margin-top: 20px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro p {
	max-width: 30em;
	line-height: 1.7;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-contact-list li {
	margin: 0;
	border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-contact-list a.hst-contact-list__link {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 24px;
	align-items: center;
	gap: 20px;
	padding: 20px 0;
	color: var(--hst-ink);
	text-decoration: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	border: 1.5px solid var(--hst-oxblood);
	border-radius: 50%;
	color: var(--hst-oxblood);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__label {
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.4;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__value {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__link > svg {
	transition: transform 0.2s ease;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__link:hover > svg {
	transform: translateX(4px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__link:hover .hst-contact-list__value {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* ---- Kontakt: form section ------------------------------------------------------------------------------------------ */
:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-form > .kt-row-column-wrap {
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(80px, 8vw, 112px);
}

/* Heading + text, the form card and the help links: card on the right on desktop, links under the card on phones.
   The theme wraps the content of a group in .wp-block-group__inner-container – the grid is on that wrapper then. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-cf:not(:has(> .wp-block-group__inner-container)),
:is(.hst-reskin, .editor-styles-wrapper) .hst-cf > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "head card" "faq card";
	column-gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-cf, .hst-cf > .wp-block-group__inner-container) > * {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-cf__head {
	grid-area: head;
	padding-top: 12px;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-cf__head, .hst-cf__head > .wp-block-group__inner-container) > * + * {
	margin-top: 20px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-cf__head p {
	max-width: 28em;
	color: var(--hst-on-dark-2);
	line-height: 1.7;
}

/* The anchor of "Navrhnúť vlastný kúsok" clears the sticky row by scroll-padding-top of the page (reskin.css, P09g). */

:is(.hst-reskin, .editor-styles-wrapper) .hst-cf .hst-cf__faq {
	grid-area: faq;
	max-width: 440px;
	margin-top: 40px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-cf__faq-title {
	margin: 0 0 10px;
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

/* Help links in rows with a dashed line and an arrow (also usable on bone sections). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-link-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-link-list li {
	margin: 0;
	border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
	font-size: 16px;
	line-height: 1.4;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink .hst-link-list,
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec--ink .hst-link-list li {
	border-color: rgba(239, 230, 218, 0.28);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-link-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	font-weight: 500;
	text-decoration: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-link-list a::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-link-list a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-link-list a:hover::after {
	transform: translateX(4px);
}

/* Form card: dark leather with a golden stitch inside. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-cf__card {
	grid-area: card;
	position: relative;
	box-sizing: border-box;
	padding: clamp(32px, 3.4vw, 48px);
	border-radius: 4px;
	background: var(--hst-ink-card);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-cf__card::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1.5px dashed rgba(184, 149, 79, 0.75);
	border-radius: 2px;
	pointer-events: none;
}

/* ---- Contact form (Kadence Advanced Form "kontakt-formular", includes/contact-form.php) ------------------------- */
.hst-contact-form form.kb-advanced-form {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-sans);
}

.hst-contact-form form.kb-advanced-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

.hst-contact-form form.kb-advanced-form > .hst-field-half {
	grid-column: auto;
}

.hst-contact-form form.kb-advanced-form > input[type="hidden"] {
	display: none;
}

.hst-contact-form .kb-adv-form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.hst-contact-form .kb-adv-form-label {
	margin: 0;
	padding: 0;
	color: var(--hst-bone);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.hst-contact-form .hst-optional {
	color: var(--hst-on-dark-3);
	font-weight: 400;
}

/* No asterisks (as in the design): the optional field says "(nepovinné)", the required ones carry aria-required. */
.hst-contact-form .kb-adv-form-required {
	display: none;
}

.hst-contact-form :is(input[type="text"], input[type="email"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 1.5px solid rgba(239, 230, 218, 0.35);
	border-radius: var(--hst-radius);
	background: var(--hst-ink);
	box-shadow: none;
	color: var(--hst-bone);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.hst-contact-form textarea {
	min-height: 168px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

.hst-contact-form .kb-adv-form-field select {
	padding-right: 48px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8954f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 18px;
	cursor: pointer;
}

.hst-contact-form select option {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-contact-form :is(input, select, textarea)::placeholder {
	color: #9a8c80;
	opacity: 1;
}

.hst-contact-form :is(input[type="text"], input[type="email"], select, textarea):hover {
	border-color: rgba(239, 230, 218, 0.6);
}

.hst-contact-form :is(input[type="text"], input[type="email"], select, textarea):focus {
	border-color: var(--hst-bone);
	outline: 2px solid var(--hst-thread);
	outline-offset: 2px;
}

/* Errors: the field border and the message under it (Kadence adds aria-invalid and aria-describedby). */
.hst-contact-form :is(input, select, textarea)[aria-invalid="true"],
.hst-contact-form .has-error {
	border-color: #e7a19a;
}

.hst-contact-form .kb-adv-form-message {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #f2b3ab;
	font-size: 14px;
	line-height: 1.5;
}

/* Summary above the form after a failed submit (role="alert", focused by Kadence). */
.hst-contact-form .kb-adv-form-message.kb-adv-form-warning:not(.kb-adv-form-error-msg) {
	grid-column: 1 / -1;
	margin-bottom: 20px;
	padding: 12px 14px;
	border: 1.5px solid #e7a19a;
	border-radius: var(--hst-radius);
	color: var(--hst-bone);
	font-size: 15px;
}

.hst-sec .hst-contact-form .kb-adv-form-warning :is(h2, h3, h4, h5, h6, p, li) {
	margin: 0;
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.hst-sec .hst-contact-form .kb-adv-form-warning :is(ul, ol) {
	margin: 4px 0 0;
	padding-left: 20px;
}

.hst-sec .hst-contact-form .kb-adv-form-warning li {
	font-weight: 400;
}

/* Attachment: the dashed box of the design; the native input covers it (invisible) and stays the control. */
.hst-contact-form .hst-file {
	position: relative;
}

.hst-contact-form .hst-file input[type="file"] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hst-contact-form .hst-file__box {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	min-height: 68px;
	padding: 12px 16px;
	border: 1.5px dashed rgba(239, 230, 218, 0.4);
	border-radius: var(--hst-radius);
	color: var(--hst-thread);
}

.hst-contact-form .hst-file__box > svg {
	flex: none;
}

.hst-contact-form .hst-file__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.hst-contact-form .hst-file__title {
	overflow: hidden;
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hst-contact-form .hst-file .kb-adv-form-help {
	margin: 0;
	color: var(--hst-on-dark-3);
	font-size: 13px;
}

.hst-contact-form .hst-file:hover .hst-file__box,
.hst-contact-form .hst-file.has-file .hst-file__box {
	border-color: rgba(239, 230, 218, 0.7);
}

.hst-contact-form .hst-file input[type="file"]:focus-visible + .hst-file__box {
	outline: 2px solid var(--hst-thread);
	outline-offset: 2px;
}

.hst-sec .hst-contact-form .hst-form-note {
	color: var(--hst-on-dark-3);
	font-size: 13px;
	line-height: 1.55;
}

.hst-contact-form .hst-form-note a {
	color: var(--hst-bone);
	text-underline-offset: 3px;
}

.hst-contact-form .kb-adv-form-submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--hst-radius);
	background: var(--hst-bone);
	box-shadow: none;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	line-height: 1.2;
	cursor: pointer;
}

.hst-contact-form .kb-adv-form-submit-button:hover {
	background: #ffffff;
	color: var(--hst-ink);
}

.hst-contact-form .kb-adv-form-submit-button:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 3px;
}

/* Honeypot: off screen, not display:none (some bots skip hidden fields). */
.hst-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* After sending: golden dashed circle with a tick, "Správa odišla." (Kadence keeps only div / p, the icon is CSS). */
.hst-contact-form .kb-adv-form-success {
	color: var(--hst-bone);
	font-size: 17px;
}

.hst-contact-form .kb-adv-form-success:focus {
	outline: none;
}

.hst-sent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	min-height: 520px;
	padding: 12px 8px;
}

.hst-sent__icon {
	position: relative;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	border: 2px dashed var(--hst-thread);
	border-radius: 50%;
}

.hst-sent__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hst-bone);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 28px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 28px no-repeat;
}

.hst-sec .hst-contact-form .hst-sent p {
	max-width: 26em;
	margin: 0;
	color: var(--hst-on-dark-2);
	font-size: 17px;
	line-height: 1.65;
}

.hst-sec .hst-contact-form .hst-sent p.hst-sent__title {
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.05;
}

/* ---- Kontakt: newsletter tag over the workshop photo -------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-split > .kt-row-column-wrap {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	column-gap: 0;
	align-items: center;
}

/* The tag reaches 72 px over the photo; the shadow sits on its wrapper (on the tag the clip-path would cut it). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag-wrap {
	position: relative;
	z-index: 2;
	margin-right: -72px;
	filter: drop-shadow(0 24px 40px rgba(22, 17, 15, 0.3));
}

/* Tag as a group (Kontakt): the decor ends up inside the theme's inner wrapper – it must not be the positioning box. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-tag > .wp-block-group__inner-container {
	position: static;
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-tag, .hst-tag > .wp-block-group__inner-container) > :not(.hst-tag__eyelet, .hst-tag__stitch, .wp-block-group__inner-container) {
	position: relative;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-tag > .wp-block-group__inner-container > :not(.hst-tag__eyelet, .hst-tag__stitch) + :not(.hst-tag__eyelet, .hst-tag__stitch) {
	margin-top: 18px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-split .wp-block-kadence-column:not(.hst-tag-wrap) {
	position: relative;
	z-index: 1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news__photo {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 38%;
	border-radius: 4px;
}

/* ---- P09a – phones ------------------------------------------------------------------------------------------------ */
/* Tablets upright (P09l bod 6): the photo column is narrow (≈ 270 px at 768), a square arch would be lower than on
   phones – the frame is taller than wide here, between the phone and the desktop; from 1024 px the square as before. */
@media (min-width: 768px) and (max-width: 1023px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__arch {
		aspect-ratio: 5 / 6;
	}
}

@media (max-width: 767px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding: 20px 20px 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__text {
		gap: 0;
		padding-bottom: 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs ol {
		gap: 4px 8px;
		font-size: 13px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-crumbs__sep svg {
		width: 13px;
		height: 13px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero .hst-page-hero__title {
		margin-top: 12px;
		font-size: 54px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero .hst-page-hero__lead {
		margin-top: 14px;
		font-size: 16px;
		line-height: 1.6;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__media {
		padding: 12px 12px 0;
	}

	/* Phones (P09l bod 6): the frame is 5/6 of its width high – a half circle at the top, straight sides under it
	   (16 : 9 left only a low half circle); at most 340 px, so wider phones in landscape stay lower. */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__arch {
		aspect-ratio: 6 / 5;
		max-height: 340px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero__img {
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-seam__slant {
		height: 32px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-slant > .hst-thread {
		height: calc(100% - 25px);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--slant-r {
		bottom: 24.7px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--slant-l {
		bottom: 0.3px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro > .kt-row-column-wrap {
		padding-top: 30px;
		padding-bottom: 84px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro .hst-split > .kt-row-column-wrap {
		gap: 22px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-intro .hst-h2,
	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf__head .hst-h2 {
		font-size: 36px;
		line-height: 1.02;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-contact-list a.hst-contact-list__link {
		grid-template-columns: 46px minmax(0, 1fr) 22px;
		gap: 16px;
		padding: 16px 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__icon {
		width: 46px;
		height: 46px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__icon svg {
		width: 20px;
		height: 20px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__label {
		font-size: 13px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-list__value {
		font-size: 18px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-form > .kt-row-column-wrap {
		padding-top: 24px;
		padding-bottom: 72px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf:not(:has(> .wp-block-group__inner-container)),
	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "head" "card" "faq";
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf__head {
		padding-top: 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-cf__head, .hst-cf__head > .wp-block-group__inner-container) > * + * {
		margin-top: 14px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf .hst-cf__card {
		margin-top: 24px;
		padding: 28px 22px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf__card::before {
		inset: 8px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-cf .hst-cf__faq {
		max-width: none;
		margin-top: 36px;
	}

	.hst-contact-form form.kb-advanced-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.hst-contact-form form.kb-advanced-form > .hst-field-half {
		grid-column: 1 / -1;
	}

	.hst-contact-form textarea {
		min-height: 160px;
	}

	.hst-contact-form .kb-adv-form-submit-button {
		width: 100%;
	}

	.hst-sent {
		min-height: 360px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news > .kt-row-column-wrap {
		padding-top: 64px;
		padding-bottom: 72px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-split > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-split .wp-block-kadence-column:not(.hst-tag-wrap) {
		margin-left: 40px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news__photo img {
		aspect-ratio: 4 / 3;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-tag-wrap {
		margin: -56px 10px 0 0;
		filter: drop-shadow(0 18px 30px rgba(22, 17, 15, 0.3));
	}

	/* Smaller tag on phones (design: 32 px corners, smaller eyelet, heading 30 px). */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-tag {
		padding: 32px 22px 30px 56px;
		clip-path: polygon(32px 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px), 0 32px);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-tag__eyelet {
		left: 16px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		box-shadow: 0 0 0 3px var(--hst-thread);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-tag__stitch {
		left: 42px;
		top: 8px;
		right: 8px;
		bottom: 8px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-contact-news .hst-tag .hst-h2 {
		font-size: 30px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec.hst-contact-news .hst-tag p {
		font-size: 15px;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-contact-list__link > svg, .hst-link-list a::after) {
		transition: none;
	}
}

/* ==== P09b – O nás: story on the thread, photo with product tags, gallery (design/podstranky/README.md §4) ======== */

/* ---- Seams of the page ---------------------------------------------------------------------------------------------- */
/* Inverted seam B at the top (hst-seam-top-b): the section above comes down over this one. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-seam__top {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 56px;
	color: var(--hst-thread);
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-seam__fill-top {
	fill: var(--hst-seam-fill-top, var(--hst-bone));
}

/* Knots at both ends of its stitch (P09k, decision 110): 3 % and 97 %, 35 of 56 units from the top. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--top {
	top: 35px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--top-l {
	left: 3%;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-knot--top-r {
	left: 97%;
}

/* A seam only on phones (hst-seam-mobile): wider screens run the thread to the bottom of the section. */
@media (min-width: 768px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-mobile > :is(.hst-seam__edge, .hst-knot--seam, .hst-knot--seam-end) {
		display: none;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-seam-mobile > .hst-thread {
		height: 100%;
	}
}

/* ---- Story: heading, timeline on the golden thread, photo as a piece of leather ------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-story > .kt-row-column-wrap {
	padding-top: clamp(40px, 4.4vw, 64px);
	padding-bottom: clamp(64px, 6vw, 88px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-split > .kt-row-column-wrap {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(48px, 7vw, 100px);
	align-items: start;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-split > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
	align-self: center;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-patch {
	max-width: 460px;
	margin-left: auto;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-patch img {
	object-position: 55% 45%;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline {
	position: relative;
	margin-top: clamp(36px, 4vw, 52px);
}

:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-timeline:not(:has(> .wp-block-group__inner-container)), .hst-timeline > .wp-block-group__inner-container) {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

/* The thread (dashes 8 / 6 as the SVG stitches) behind the knots. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline::before {
	content: "";
	position: absolute;
	left: 95px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(to bottom, var(--hst-thread) 0 8px, transparent 8px 14px) 0 0 / 2px 14px repeat-y;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline .hst-timeline__item {
	position: relative;
	margin: 0;
}

/* Year in the first column across all rows of the step; no row gap – the empty rows of the span would add it. */
:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-timeline__item:not(:has(> .wp-block-group__inner-container)), .hst-timeline__item > .wp-block-group__inner-container) {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	column-gap: 52px;
	row-gap: 0;
	align-content: start;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline__item::before {
	content: "";
	position: absolute;
	left: 91px;
	top: 11px;
	z-index: 1;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--hst-thread);
	box-shadow: 0 0 0 5px var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline__item :is(h3, p) {
	grid-column: 2;
	max-width: 36em;
	margin: 0;
}

/* Spacing inside a step (design: paragraphs 16 px, heading → text 12 px, second heading 28 px). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item p:not(.hst-timeline__year) + p {
	margin-top: 16px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item h3 + p:not(.hst-timeline__year) {
	margin-top: 12px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item p:not(.hst-timeline__year) + h3 {
	margin-top: 28px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item .hst-timeline__year {
	grid-column: 1;
	grid-row: 1 / span 30;
	max-width: none;
	padding-top: 4px;
	color: var(--hst-oxblood);
	font-family: var(--hst-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	text-align: right;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline__year em {
	font-size: 28px;
	font-weight: 500;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item h3 {
	font-size: 28px;
	line-height: 1.1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item p:not(.hst-timeline__year) {
	color: var(--hst-on-light-2);
	font-size: 17px;
	line-height: 1.75;
}

/* ---- Photo across the width with product tags (hst/photo-tags) ------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: #cfccc7;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	--hst-focus: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__photo {
	position: relative;
	aspect-ratio: 2 / 1;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 20%);
}

/* The thread over the photo: from the stitch of the top seam to the stitch of seam C. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags > .hst-thread {
	top: 56px;
	z-index: 2;
	height: calc(100% - 77px);
}

/* Quote and button on the light floor of the photo, top left. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__intro {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 3;
	pointer-events: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__intro-inner {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(68px, 6vw, 88px) var(--hst-gutter) 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__intro-inner > * {
	pointer-events: auto;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-photo-tags__quote {
	max-width: 720px;
	margin: 0;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: clamp(36px, 3.4vw, 50px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.01em;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-photo-tags__button {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	margin-top: 24px;
	padding: 0 30px;
	border-radius: var(--hst-radius);
	background: var(--hst-ink);
	color: var(--hst-bone);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-photo-tags__button:hover {
	background: var(--hst-oxblood);
	color: var(--hst-bone);
}

/* A tag: point on the product, a string and a hanging oxblood price tag with an eyelet (link to the product). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 3;
	width: 0;
	height: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__point {
	position: absolute;
	left: -15px;
	top: -15px;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border: 2px solid var(--hst-bone);
	border-radius: 50%;
	background: rgba(22, 17, 15, 0.35);
	box-shadow: 0 0 0 7px rgba(239, 230, 218, 0.32), 0 2px 12px rgba(22, 17, 15, 0.35);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__string {
	position: absolute;
	left: -1px;
	top: 15px;
	height: 62px;
	border-left: 1.5px solid rgba(22, 17, 15, 0.75);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__hang {
	position: absolute;
	left: 0;
	top: 64px;
	transform: translateX(-50%);
	filter: drop-shadow(0 12px 18px rgba(22, 17, 15, 0.35));
}

/* Focus ring on the wrapper (the tag's clip-path would cut it); dark – the tags sit on the light floor of the photo. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__hang:focus-within {
	outline: 2px solid var(--hst-ink);
	outline-offset: 3px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-ptag__tag {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26px 18px 12px;
	background: var(--hst-oxblood);
	clip-path: polygon(50% 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
	color: var(--hst-bone);
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-ptag__tag:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__tag:focus-visible {
	outline: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__eyelet {
	position: absolute;
	left: 50%;
	top: 9px;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--hst-bone);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__name {
	font-size: 14px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__price {
	font-family: var(--hst-serif);
	font-size: 22px;
	font-weight: 600;
}

/* ---- Gallery (hst/gallery): strip of photos, enlarging dialog --------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec > .kt-row-column-wrap {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(80px, 8vw, 112px);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec .hst-sec-head {
	padding-right: 106px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec .hst-sec-head__text {
	max-width: 700px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-gallery-sec .hst-sec-head__text p,
:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec .hst-sec-head__text p {
	max-width: 36em;
	color: var(--hst-on-dark-2);
	line-height: 1.7;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > .hst-gallery {
	margin-top: 40px;
}

.hst-gallery > .hst-strip__list {
	grid-auto-columns: max(230px, calc((100% - 60px) / 4.3));
}

.hst-gallery .hst-gallery__item {
	margin: 0;
	scroll-snap-align: start;
}

.hst-gallery .hst-gallery__open {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 7;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 2px;
	background: var(--hst-photo-bg);
	box-shadow: none;
	cursor: zoom-in;
}

.hst-gallery .hst-gallery__open:hover {
	background: var(--hst-photo-bg);
}

.hst-gallery .hst-gallery__open:focus-visible {
	outline: 3px solid var(--hst-thread);
	outline-offset: -3px;
}

.hst-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hst-gallery__open:hover .hst-gallery__img {
	transform: scale(1.03);
}

/* Link to Instagram under the gallery, with the Instagram glyph. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-insta-link {
	margin-top: 28px;
	font-size: 16px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-insta-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-weight: 600;
	text-underline-offset: 5px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-insta-link a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--hst-thread);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4.5'/%3E%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Ccircle cx='17.2' cy='6.8' r='0.6' fill='black'/%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' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4.5'/%3E%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Ccircle cx='17.2' cy='6.8' r='0.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Enlarged photo: a modal dialog over the whole window. */
html:has(.hst-lightbox[open]) {
	overflow: hidden;
}

.hst-lightbox {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 56px 80px;
	border: 0;
	background: rgba(14, 10, 9, 0.97);
	color: var(--hst-bone);
	font-family: var(--hst-sans);
}

.hst-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hst-lightbox::backdrop {
	background: rgba(14, 10, 9, 0.6);
}

.hst-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.hst-lightbox__img {
	display: block;
	max-width: min(100%, 900px);
	max-height: calc(100vh - 150px);
	object-fit: contain;
}

.hst-lightbox__count {
	color: var(--hst-on-dark-3);
	font-size: 14px;
}

.hst-lightbox .hst-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1.5px solid rgba(239, 230, 218, 0.35);
	border-radius: var(--hst-radius);
	background: rgba(22, 17, 15, 0.6);
	box-shadow: none;
	color: var(--hst-bone);
	cursor: pointer;
}

.hst-lightbox .hst-lightbox__btn:hover {
	border-color: var(--hst-bone);
	background: rgba(22, 17, 15, 0.8);
	color: #ffffff;
}

.hst-lightbox .hst-lightbox__btn:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 2px;
}

.hst-lightbox .hst-lightbox__prev {
	left: 16px;
	top: 50%;
	margin-top: -24px;
}

.hst-lightbox .hst-lightbox__next {
	right: 16px;
	top: 50%;
	margin-top: -24px;
}

.hst-lightbox .hst-lightbox__close {
	right: 16px;
	top: 16px;
}

/* ---- Máš vlastnú víziu? on O nás (the home page block, thread on the left) ------------------------------------------ */
:is(.hst-reskin, .editor-styles-wrapper) .hst-custom.hst-seam-straight-rl > .hst-thread {
	top: 24px;
	height: calc(100% - 24px);
}

/* Small tablets: the story in one column (two columns left ~250 px for the text), the photo under it. */
@media (min-width: 768px) and (max-width: 900px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-split > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 56px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-patch {
		max-width: 420px;
		margin: 0 auto;
	}
}

/* ---- P09b – phones -------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-story > .kt-row-column-wrap {
		padding-top: 30px;
		padding-bottom: 96px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-split > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-patch {
		width: auto;
		max-width: none;
		margin: 0 14px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-story .hst-h2 {
		font-size: 36px;
		line-height: 1.02;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline {
		margin-top: 28px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-timeline:not(:has(> .wp-block-group__inner-container)), .hst-timeline > .wp-block-group__inner-container) {
		gap: 34px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline::before {
		left: 5px;
		top: 10px;
		bottom: 10px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline__item {
		padding-left: 34px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) :is(.hst-timeline__item:not(:has(> .wp-block-group__inner-container)), .hst-timeline__item > .wp-block-group__inner-container) {
		display: flex;
		flex-direction: column;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item .hst-timeline__year + * {
		margin-top: 12px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item h3 + p:not(.hst-timeline__year) {
		margin-top: 10px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item p:not(.hst-timeline__year) + p {
		margin-top: 14px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item p:not(.hst-timeline__year) + h3 {
		margin-top: 24px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline__item::before {
		left: 0;
		top: 7px;
		box-shadow: 0 0 0 4px var(--hst-bone);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item .hst-timeline__year {
		padding-top: 0;
		font-size: 26px;
		text-align: left;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-timeline__year em {
		font-size: 25px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item h3 {
		font-size: 24px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .hst-timeline__item p:not(.hst-timeline__year) {
		font-size: 16px;
		line-height: 1.7;
	}

	/* Photo with tags on phones: quote and button on an oxblood band above the photo. */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags {
		background: var(--hst-oxblood);
		--hst-focus: var(--hst-thread);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags > :is(.hst-seam__top, .hst-knot--top) {
		display: none;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags > .hst-thread {
		top: 0;
		height: calc(100% - 21px);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__intro {
		position: relative;
		pointer-events: auto;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__intro-inner {
		padding: 52px 20px 36px 28px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-photo-tags__quote {
		color: var(--hst-bone);
		font-size: 40px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-photo-tags__button {
		min-height: 52px;
		margin-top: 26px;
		padding: 0 26px;
		background: var(--hst-bone);
		color: var(--hst-ink);
		font-size: 15px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-photo-tags__button:hover {
		background: #ffffff;
		color: var(--hst-ink);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__photo {
		height: 470px;
		aspect-ratio: auto;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags__img {
		object-position: var(--hst-pos-m, 10% 50%);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag {
		left: var(--xm);
		top: var(--ym);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__point {
		left: -13px;
		top: -13px;
		width: 26px;
		height: 26px;
		box-shadow: 0 0 0 6px rgba(239, 230, 218, 0.32), 0 2px 10px rgba(22, 17, 15, 0.35);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__string {
		top: 13px;
		height: var(--drop-m, 42px);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__hang {
		top: calc(var(--drop-m, 42px) + 2px);
		filter: drop-shadow(0 10px 14px rgba(22, 17, 15, 0.35));
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-photo-tags .hst-ptag__tag {
		padding: 22px 12px 10px;
		clip-path: polygon(50% 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__eyelet {
		top: 7px;
		width: 7px;
		height: 7px;
		margin-left: -3.5px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__name {
		font-size: 12.5px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-ptag__price {
		font-size: 19px;
	}

	/* Gallery on phones: full-width strip without arrows (swipe), 220 px photos. */
	:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec > .kt-row-column-wrap {
		padding-top: 40px;
		padding-bottom: 64px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec .hst-sec-head {
		padding-right: 0;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-gallery-sec .hst-h2 {
		font-size: 34px;
		line-height: 1.02;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-sec .kt-inside-inner-col > .hst-gallery {
		margin: 24px calc(-1 * var(--hst-gutter)) 0;
	}

	.hst-gallery > .hst-strip__list {
		grid-auto-columns: 220px;
		gap: 12px;
	}

	.hst-gallery > .hst-strip__nav {
		display: none;
	}

	.hst-lightbox {
		padding: 72px 12px 64px;
	}

	.hst-lightbox__img {
		max-height: calc(100vh - 170px);
	}

	.hst-lightbox .hst-lightbox__prev,
	.hst-lightbox .hst-lightbox__next {
		top: auto;
		bottom: 12px;
		margin-top: 0;
	}

	.hst-lightbox .hst-lightbox__prev {
		left: calc(50% - 58px);
	}

	.hst-lightbox .hst-lightbox__next {
		right: calc(50% - 58px);
	}

	.hst-lightbox .hst-lightbox__close {
		right: 12px;
		top: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-gallery__img {
		transition: none;
	}

	.hst-gallery__open:hover .hst-gallery__img {
		transform: none;
	}
}

/* ==== P09c – information pages: header options, document text (hst-doc) ============================================ */

/* ---- Page header: smaller heading for long titles (block option "Menší nadpis") ------------------------------------ */
:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero .hst-page-hero__title--small {
	font-size: clamp(44px, 4.4vw, 64px);
	line-height: 1;
}

/* ---- Document (hst-doc, includes/page-hero.php): text after the subpage header in one readable column ------------
   The base for the text of blog posts as well. No thread through the text – pages for reading. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc {
	--hst-focus: var(--hst-ink);
	--hst-doc-line: rgba(22, 17, 15, 0.15);
	--hst-doc-head: #e4d9c9; /* darker bone: table headers */
	background: var(--hst-bone);
	color: var(--hst-on-light-2);
	font-family: var(--hst-sans);
	font-size: 17px;
	line-height: 1.7;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc__body {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(48px, 5vw, 72px) var(--hst-gutter) clamp(80px, 8vw, 112px);
}

/* One column of ~70 characters on the left edge of the header text (same container and gutter), not centred. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc__body > * {
	max-width: 46rem;
	margin-left: 0;
	margin-right: 0;
}

/* Element selectors only – a class in the list would outweigh "li > p" below. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc :is(p, ul, ol, dl, blockquote, figure) {
	margin-top: 0;
	margin-bottom: 1.1em;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc :is(h2, h3, h4) {
	color: var(--hst-ink);
	letter-spacing: normal;
	text-transform: none;
	scroll-margin-top: 0; /* anchors clear the sticky row by scroll-padding-top of the page (reskin.css, P09g) */
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc h2 {
	margin: 2.2em 0 0.6em;
	font-family: var(--hst-serif);
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 600;
	line-height: 1.15;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc h3 {
	margin: 1.8em 0 0.5em;
	font-family: var(--hst-sans);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc h4 {
	margin: 1.5em 0 0.4em;
	font-family: var(--hst-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

/* The first heading of the text has no space above (also after the notice of the English version). */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc__body > :first-child,
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc__body > :is(.hst-legal-notice, .hst-legal-draft) + :not(.hst-legal-notice, .hst-legal-draft),
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc #cmplz-document > :first-child {
	margin-top: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc :is(ul, ol) {
	padding-left: 1.3em;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc li {
	margin: 0 0 0.35em;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc li::marker {
	color: var(--hst-oxblood);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc li > p {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc li > :is(ul, ol) {
	margin: 0.35em 0 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc :is(strong, b) {
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc a {
	color: var(--hst-oxblood);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc a:hover {
	color: var(--hst-ink);
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc a:focus-visible {
	outline: 2px solid var(--hst-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc hr {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
	background: none;
}

/* Tables: scrolling wrapper on narrow screens instead of a page that overflows. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-doc__table {
	max-width: 100%;
	margin: 0 0 1.1em;
	overflow-x: auto;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc :is(th, td) {
	padding: 0.6em 0.8em;
	border: 0;
	border-bottom: 1px solid var(--hst-doc-line);
	text-align: left;
	vertical-align: top;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc :is(th, thead td) {
	background: var(--hst-doc-head);
	color: var(--hst-ink);
	font-weight: 700;
}

/* Links to PDF files ("Dokumenty na stiahnutie"): document icon and "(PDF)", the text stays. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc a[href$=".pdf" i]::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.4em;
	vertical-align: -0.17em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%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' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc a[href$=".pdf" i]::after {
	content: " (PDF)";
}

/* The icon instead of the bullet only in a list of downloads (an item starting with the link), not in numbered steps. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc ul > li:has(> a[href$=".pdf" i]:first-child),
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc ul > li:has(> p:first-child > a[href$=".pdf" i]:first-child),
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc ul > li:has(> p:first-child > code:first-child > a[href$=".pdf" i]:first-child) {
	list-style: none;
}

/* <code> around links (pasted text): the text font, not a code font. */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc code:has(> a) {
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
}

/* Notice of the English version (legal-en.php): "the Slovak version prevails". */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-legal-notice {
	margin: 0 0 2em;
	padding: 0.8em 1em;
	border: 1px dashed rgba(22, 17, 15, 0.35);
	border-radius: var(--hst-radius);
	color: var(--hst-on-light-2);
	font-size: 15px;
	line-height: 1.6;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-legal-draft {
	margin: 0 0 2em;
	padding: 0.6em 1em;
	background: #fff3cd;
	color: #664d03;
	font-size: 14px;
}

/* ---- Complianz documents in hst-doc (privacy statement, cookie policy, imprint): its 14 px / 800 px look → ours ----
   Complianz styles them with #cmplz-document selectors, hence the id here. */
.hst-reskin .hst-doc #cmplz-document {
	max-width: 46rem;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.hst-reskin .hst-doc #cmplz-document :is(p, li, td) {
	font-size: inherit;
}

.hst-reskin .hst-doc #cmplz-document :is(h2, h3, h4, h5) {
	padding-bottom: 0;
	color: var(--hst-ink);
	text-align: left;
}

.hst-reskin .hst-doc #cmplz-document h2 {
	margin: 2.2em 0 0.6em;
	font-size: clamp(26px, 2.4vw, 34px);
}

.hst-reskin .hst-doc #cmplz-document h3 {
	margin: 1.8em 0 0.5em;
	font-size: 19px;
}

.hst-reskin .hst-doc #cmplz-document h4 {
	margin: 1.2em 0 0.3em;
	font-size: 17px;
}

.hst-reskin .hst-doc #cmplz-document h5 {
	margin: 0;
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 700;
}

.hst-reskin .hst-doc #cmplz-document ul {
	margin: 0 0 1.1em;
	padding-left: 1.3em;
}

.hst-reskin .hst-doc #cmplz-document a:focus {
	padding: 0;
	border: 0;
}

/* Expandable parts (<details class="cmplz-dropdown">). */
.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown {
	margin: 0 0 0.6em;
	border: 1px dashed rgba(22, 17, 15, 0.28);
	border-radius: var(--hst-radius);
	background: transparent;
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown summary {
	margin: 0;
	padding: 0.7em 1em;
	background: rgba(22, 17, 15, 0.04);
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown summary:focus-visible {
	outline: 2px solid var(--hst-ink);
	outline-offset: 2px;
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown summary :is(h3, p) {
	margin: 0;
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown summary p {
	font-size: 15px;
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown h4 {
	margin: 0.9em 0 0.3em;
	font-size: 16px;
}

/* "Spravujte svoje nastavenia súhlasu" (consent categories under the cookie policy): the frame of the parts above. */
.hst-reskin .hst-doc #cmplz-manage-consent-container .cmplz-categories .cmplz-category {
	border: 1px dashed rgba(22, 17, 15, 0.28);
	border-radius: var(--hst-radius);
	background: transparent;
}

.hst-reskin .hst-doc #cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
	background: rgba(22, 17, 15, 0.04);
}

/* "Vždy aktívny": Complianz green (#008000, 12 px) has too little contrast on bone – a darker green, 14 px. */
.hst-reskin .hst-doc #cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	color: #22582a;
	font-size: 14px;
}

/* Consent per service (checkbox in the summary): 24 px touch target instead of 13 px. */
.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown summary input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--hst-oxblood);
}

/* Cookie list of the cookie policy (a grid of divs): fine lines, header cells in the darker bone, 15 px. */
.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose {
	border-color: var(--hst-doc-line);
	background-color: var(--hst-doc-line);
	font-size: 15px;
	line-height: 1.5;
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose div {
	padding: 0.6em 0.8em;
	background-color: var(--hst-bone);
	overflow-wrap: anywhere;
}

.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose :is(.purpose, .name-header, .retention-header, .function-header) {
	background-color: var(--hst-doc-head);
}

/* Services of the cookie policy on narrow screens: the category under the name (in one row the name broke letter by
   letter). Complianz places only the heading, paragraph and chevron by name; label and checkbox fill row one. */
@media (max-width: 600px) {
	.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
		grid-template: "heading label checkbox chevron" "paragraph paragraph paragraph paragraph" / minmax(0, 1fr) 0 auto 25px;
		row-gap: 2px;
	}

	.hst-reskin .hst-doc #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
		padding: 0 5px; /* as the heading above it */
		text-align: left;
	}
}

/* ---- P09c – phones ------------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-page-hero .hst-page-hero__title--small {
		font-size: 44px;
		line-height: 1;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-doc {
		font-size: 16px;
		line-height: 1.65;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-doc h2,
	.hst-reskin .hst-doc #cmplz-document h2 {
		font-size: 26px;
	}

	:is(.hst-reskin, .editor-styles-wrapper) .hst-doc h3,
	.hst-reskin .hst-doc #cmplz-document h3 {
		font-size: 18px;
	}
}

/* ==== P09d – blog: list of posts, post, comments (design/blog/README.md, includes/reskin-blog.php) ================= */

.hst-reskin .hst-blog {
	display: block;
	margin: 0;
	padding: 0;
}

/* ---- Topic tag (category): small oxblood price tag with a bone eyelet ------------------------------------------- */
.hst-reskin .hst-topic {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px 6px 24px;
	background: var(--hst-oxblood);
	color: var(--hst-bone);
	clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
	font-family: var(--hst-sans);
	font-size: 14px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.hst-reskin .hst-topic__eye {
	position: absolute;
	left: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--hst-bone);
}

.hst-reskin a.hst-topic:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

/* The clip-path would cut the focus ring: the plain shape while focused. */
.hst-reskin a.hst-topic:focus-visible {
	clip-path: none;
	outline: 2px solid var(--hst-thread);
	outline-offset: 2px;
	border-radius: 2px;
}

.hst-reskin .hst-topic--photo {
	position: absolute;
	left: -10px;
	bottom: 18px;
	z-index: 1;
	padding: 7px 16px 7px 28px;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
	line-height: 1.2;
	pointer-events: none;
}

.hst-reskin .hst-topic--photo .hst-topic__eye {
	left: 13px;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
}

.hst-reskin .hst-topic--small {
	padding: 3px 10px 3px 19px;
	clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
	font-size: 12px;
}

.hst-reskin .hst-topic--small .hst-topic__eye {
	left: 8px;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
}

/* ---- Header: the line with topic, date and reading time (post) -------------------------------------------------- */
.hst-reskin .hst-page-hero .hst-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
	color: var(--hst-on-dark-3);
	font-size: 14px;
	line-height: 1.4;
}

/* ---- List of posts ---------------------------------------------------------------------------------------------- */
.hst-reskin .hst-blog-list {
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-blog-list__inner {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(32px, 4vw, 48px) var(--hst-gutter) clamp(80px, 8vw, 112px);
}

.hst-reskin .hst-blog-empty {
	margin: 0;
	color: var(--hst-on-light-2);
	font-size: 17px;
	line-height: 1.65;
}

.hst-reskin .hst-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-topics__list li {
	margin: 0;
}

.hst-reskin .hst-topics__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid rgba(22, 17, 15, 0.3);
	border-radius: 999px;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
	white-space: nowrap;
}

.hst-reskin .hst-topics__pill:hover {
	border-color: var(--hst-ink);
}

.hst-reskin .hst-topics__pill[aria-current] {
	border-color: var(--hst-ink);
	background: var(--hst-ink);
	color: var(--hst-bone);
}

/* Newest post: large dark card, the photo cut like a piece of leather with the golden stitch (as on O nás). */
.hst-reskin .hst-feature {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	margin: clamp(28px, 3vw, 40px) 0 0;
	padding: clamp(28px, 3.4vw, 48px);
	border-radius: 4px;
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-blog-list__inner > h2 + .hst-feature {
	margin-top: 0;
}

.hst-reskin .hst-feature__media {
	position: relative;
	display: block;
	width: 100%;
	max-width: 460px;
}

.hst-reskin .hst-feature__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	clip-path: polygon(7% 3%, 31% 0%, 57% 2.5%, 82% 0%, 97% 6%, 100% 31%, 96% 55%, 100% 83%, 90% 100%, 63% 97%, 37% 100%, 11% 96%, 0% 78%, 3% 50%, 0% 24%);
}

.hst-reskin .hst-feature__stitch {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	color: var(--hst-thread);
	pointer-events: none;
}

.hst-reskin .hst-feature__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.hst-reskin .hst-feature .hst-feature__title {
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: clamp(40px, 4.2vw, 64px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
}

.hst-reskin .hst-feature__title a {
	color: inherit;
	text-decoration: none;
}

.hst-reskin .hst-feature__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.hst-reskin .hst-feature__title a:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 4px;
	border-radius: 2px;
}

.hst-reskin .hst-feature .hst-feature__excerpt {
	max-width: 30em;
	margin: 0;
	color: var(--hst-on-dark-2);
	font-size: 18px;
	line-height: 1.65;
}

.hst-reskin .hst-feature .hst-feature__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	color: var(--hst-on-dark-3);
	font-size: 14px;
}

.hst-reskin .hst-feature__more {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 3px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-feature__more:hover {
	background: #fff;
	color: var(--hst-ink);
}

/* Grid of the other posts (and the further posts below a post). */
.hst-reskin .hst-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 56px 32px;
	align-items: start;
	margin: clamp(56px, 6vw, 80px) 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-pcard-post {
	margin: 0;
}

.hst-reskin .hst-pcard-post__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hst-reskin .hst-pcard-post__media {
	position: relative;
}

.hst-reskin .hst-pcard-post__photo {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 4px;
	background: #ddd2c4;
}

.hst-reskin .hst-pcard-post__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
}

.hst-reskin .hst-pcard-post .hst-pcard-post__title {
	margin: 6px 0 0;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

/* The whole card is the link of the heading (its area stretched over the card). */
.hst-reskin .hst-pcard-post__title a {
	color: inherit;
	text-decoration: none;
}

.hst-reskin .hst-pcard-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hst-reskin .hst-pcard-post__card:hover .hst-pcard-post__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.hst-reskin .hst-pcard-post__title a:focus-visible {
	outline: none;
}

.hst-reskin .hst-pcard-post__title a:focus-visible::after {
	outline: 2px solid var(--hst-ink);
	outline-offset: 6px;
	border-radius: 4px;
}

.hst-reskin .hst-pcard-post .hst-pcard-post__excerpt {
	margin: 0;
	color: var(--hst-on-light);
	font-size: 15px;
	line-height: 1.6;
}

.hst-reskin .hst-pcard-post .hst-pcard-post__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
	color: var(--hst-on-light);
	font-size: 13px;
}

.hst-reskin .hst-post-grid--related {
	gap: 48px 32px;
	margin-top: 44px;
}

.hst-reskin .hst-pcard-post--related .hst-pcard-post__card {
	gap: 12px;
}

.hst-reskin .hst-pcard-post--related .hst-pcard-post__photo {
	aspect-ratio: 4 / 3;
	background: #c9c5bf;
}

.hst-reskin .hst-pcard-post--related .hst-pcard-post__title {
	font-size: 26px;
	line-height: 1.12;
}

/* Pagination. */
.hst-reskin .hst-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: clamp(56px, 6vw, 80px);
}

.hst-reskin :is(.hst-pager__num, .hst-pager__step) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border: 1.5px solid rgba(22, 17, 15, 0.3);
	border-radius: 999px;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.hst-reskin .hst-pager__num {
	min-width: 44px;
	box-sizing: border-box;
}

.hst-reskin .hst-pager__step {
	padding: 0 18px;
	font-stretch: var(--hst-narrow);
}

.hst-reskin :is(.hst-pager__num, .hst-pager__step):hover {
	border-color: var(--hst-ink);
}

.hst-reskin .hst-pager__num[aria-current] {
	border-color: var(--hst-ink);
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-pager__gap {
	padding: 0 4px;
	color: var(--hst-on-light);
}

/* Newsletter of the blog: the one of Kontakt (P09a) on concrete, no stitches, photo of the stand at an event. */
.hst-reskin .hst-blog-news > .kt-row-column-wrap {
	padding-top: clamp(72px, 7vw, 104px);
	padding-bottom: clamp(80px, 8vw, 112px);
}

.hst-reskin .hst-blog-news__photo img {
	object-position: 62% 50%;
}

/* ---- Post: text, table of contents, question for the workshop -------------------------------------------------- */
.hst-reskin .hst-article {
	margin: 0;
}

.hst-reskin .hst-article__body {
	background: var(--hst-bone);
	color: var(--hst-on-light-2);
}

.hst-reskin .hst-article__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(48px, 5vw, 72px) var(--hst-gutter) clamp(72px, 7vw, 104px);
}

.hst-reskin .hst-article__text {
	grid-column: 1;
	max-width: 40rem;
	min-width: 0;
}

.hst-reskin .hst-article__text > :first-child {
	margin-top: 0;
}

/* Text of a post (hst-doc of P09c with the spacing of the article design). */
.hst-reskin .hst-article__text p {
	margin: 0 0 18px;
}

.hst-reskin .hst-article__text h2 {
	margin: 56px 0 18px;
	line-height: 1.12;
}

.hst-reskin .hst-article__text h3 {
	margin: 36px 0 12px;
}

.hst-reskin .hst-article__text h4 {
	margin: 30px 0 10px;
}

.hst-reskin .hst-article__text li {
	margin: 0 0 10px;
}

.hst-reskin .hst-article__text :is(h2, h3, h4) + :is(h3, h4) {
	margin-top: 22px;
}

.hst-reskin .hst-doc blockquote {
	margin: 0 0 18px;
	padding: 2px 0 2px 20px;
	border: 0;
	border-left: 2px solid rgba(22, 17, 15, 0.22);
	color: inherit;
	font-size: inherit;
	font-style: normal;
}

.hst-reskin .hst-doc blockquote p:last-child {
	margin-bottom: 0;
}

.hst-reskin .hst-article__aside {
	grid-column: 2;
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 340px;
}

.hst-reskin .hst-toc .hst-toc__title {
	margin: 0 0 14px;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
}

.hst-reskin .hst-toc__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 4px 0;
	border-left: 2px dashed rgba(184, 149, 79, 0.75);
	list-style: none;
}

.hst-reskin .hst-toc__item {
	position: relative;
	margin: 0;
}

/* The gold knot of the part being read (reskin-home.js). */
.hst-reskin .hst-toc__item::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--hst-thread);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.hst-reskin .hst-toc__item.is-current::before {
	opacity: 1;
}

.hst-reskin .hst-toc__link {
	display: block;
	padding: 8px 0 8px 20px;
	color: var(--hst-on-light);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.hst-reskin .hst-toc__item--h3 .hst-toc__link {
	padding-left: 34px;
	font-size: 14px;
}

.hst-reskin .hst-toc__link:hover {
	color: var(--hst-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-toc__link:focus-visible {
	outline: 2px solid var(--hst-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

.hst-reskin .hst-toc__item.is-current .hst-toc__link {
	color: var(--hst-ink);
	font-weight: 650;
}

.hst-reskin .hst-toc-m {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.hst-toc) {
		scroll-behavior: smooth;
	}
}

.hst-reskin .hst-ask {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 30px 28px 32px;
	border-radius: 4px;
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-ask__stitch {
	position: absolute;
	inset: 8px;
	border: 1.5px dashed rgba(184, 149, 79, 0.75);
	border-radius: 2px;
	pointer-events: none;
}

.hst-reskin .hst-ask .hst-ask__title {
	position: relative;
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-ask .hst-ask__text {
	position: relative;
	margin: 0;
	color: var(--hst-on-dark-2);
	font-size: 15px;
	line-height: 1.6;
}

.hst-reskin .hst-ask__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 4px;
	padding: 0 22px;
	border-radius: 3px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-ask__btn:hover {
	background: #fff;
	color: var(--hst-ink);
}

.hst-reskin .hst-ask__btn:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 3px;
}

/* ---- Products from the workshop (dark) -------------------------------------------------------------------------- */
.hst-reskin .hst-post-products {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin :is(.hst-post-products__inner, .hst-post-related__inner) {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(72px, 7vw, 96px) var(--hst-gutter) clamp(80px, 8vw, 104px);
}

.hst-reskin .hst-blog-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
}

.hst-reskin .hst-blog-head .hst-blog-head__title {
	max-width: 16em;
	margin: 0;
	color: inherit;
	font-family: var(--hst-serif);
	font-size: clamp(36px, 3.4vw, 50px);
	font-weight: 600;
	line-height: 1.04;
}

.hst-reskin .hst-pill-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 22px;
	border: 1.5px solid rgba(22, 17, 15, 0.45);
	border-radius: 999px;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-pill-btn:hover {
	border-color: var(--hst-ink);
	background: rgba(22, 17, 15, 0.06);
	color: var(--hst-ink);
}

.hst-reskin .hst-pill-btn--light {
	border-color: rgba(239, 230, 218, 0.6);
	color: var(--hst-bone);
}

.hst-reskin .hst-pill-btn--light:hover {
	border-color: var(--hst-bone);
	background: rgba(239, 230, 218, 0.08);
	color: var(--hst-bone);
}

.hst-reskin .hst-pill-btn--light:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 3px;
}

.hst-reskin .hst-pill-btn--mobile {
	display: none;
}

.hst-reskin .hst-plinks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-plink {
	margin: 0;
}

.hst-reskin .hst-plink__link {
	display: flex;
	flex-direction: column;
	color: var(--hst-bone);
	text-decoration: none;
}

.hst-reskin .hst-plink__link:hover .hst-plink__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-plink__link:focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 4px;
	border-radius: 4px;
}

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

.hst-reskin .hst-plink__photo {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hst-photo-bg);
}

.hst-reskin .hst-plink__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
}

.hst-reskin .hst-plink .hst-price-tag {
	position: absolute;
	left: -10px;
	bottom: 18px;
}

.hst-reskin .hst-plink__name {
	padding-top: 16px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.hst-reskin .hst-plink__desc {
	padding-top: 3px;
	color: var(--hst-on-dark-3);
	font-size: 14px;
	line-height: 1.45;
}

/* ---- Comments (bone) ------------------------------------------------------------------------------------------- */
.hst-reskin .hst-comments {
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-comments__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
	gap: clamp(40px, 6vw, 96px);
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(72px, 7vw, 96px) var(--hst-gutter) clamp(80px, 8vw, 112px);
}

.hst-reskin .hst-comments__main {
	max-width: 40rem;
	min-width: 0;
}

.hst-reskin .hst-comments .hst-comments__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: clamp(36px, 3.4vw, 50px);
	font-weight: 600;
	line-height: 1.04;
}

.hst-reskin .hst-comments__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	box-sizing: border-box;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--hst-concrete);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.hst-reskin .hst-comments .hst-comments__empty {
	margin: 18px 0 0;
	color: var(--hst-on-light-2);
	font-size: 17px;
	line-height: 1.65;
}

.hst-reskin .hst-comment-list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-comment-list > .hst-comment + .hst-comment {
	padding-top: 28px;
	border-top: 1px dashed rgba(22, 17, 15, 0.25);
}

.hst-reskin .hst-comment {
	position: relative;
	margin: 0;
}

.hst-reskin .hst-comment__card {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 0 18px;
}

.hst-reskin .hst-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hst-concrete);
	color: var(--hst-on-light);
}

.hst-reskin .hst-avatar--workshop {
	background: var(--hst-ink);
}

.hst-reskin .hst-avatar--workshop img {
	display: block;
	width: 22px;
	height: auto;
}

.hst-reskin .hst-comment__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hst-reskin .hst-comment .hst-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
	margin: 0;
	line-height: 1.4;
}

.hst-reskin .hst-comment__author {
	color: var(--hst-ink);
	font-size: 16px;
	font-weight: 700;
}

.hst-reskin .hst-comment__meta time {
	color: var(--hst-on-light);
	font-size: 13px;
}

.hst-reskin .hst-comment .hst-comment__pending {
	margin: 0;
	color: var(--hst-oxblood);
	font-size: 14px;
	font-weight: 600;
}

.hst-reskin .hst-comment__text {
	color: var(--hst-on-light-2);
	font-size: 16px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.hst-reskin .hst-comment__text p {
	margin: 0 0 0.6em;
	font-size: inherit;
	line-height: inherit;
}

.hst-reskin .hst-comment__text p:last-child {
	margin-bottom: 0;
}

.hst-reskin .hst-comment__text a {
	color: var(--hst-oxblood);
}

.hst-reskin .hst-comment .comment-reply-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--hst-oxblood);
	font-size: 15px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-comment .comment-reply-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-comment .comment-reply-link:focus-visible {
	outline: 2px solid var(--hst-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Replies (2nd level): indented to the text of the parent; the thread runs from below the parent's avatar down and in
   an arc to the reply, where it ends with a knot (switched off with the golden thread). */
.hst-reskin .hst-comment .children {
	margin: 0;
	padding: 20px 0 0 66px;
	list-style: none;
}

.hst-reskin .hst-comment .children > .hst-comment + .hst-comment {
	margin-top: 22px;
}

.hst-reskin .hst-comment .children .hst-comment__card {
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0 16px;
}

.hst-reskin .hst-comment .children .hst-avatar {
	width: 44px;
	height: 44px;
}

.hst-reskin .hst-comment.parent > .hst-comment__card::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 60px;
	bottom: -2px;
	border-left: 2px dashed var(--hst-thread);
}

.hst-reskin .hst-comment .children > .hst-comment::before {
	content: "";
	position: absolute;
	left: -43px;
	top: -22px;
	width: 37px;
	height: 44px;
	border-left: 2px dashed var(--hst-thread);
	border-bottom: 2px dashed var(--hst-thread);
	border-bottom-left-radius: 14px;
	pointer-events: none;
}

.hst-reskin .hst-comment .children > .hst-comment::after {
	content: "";
	position: absolute;
	left: -9px;
	top: 17px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hst-thread);
	pointer-events: none;
}

/* Further replies: the thread goes on along the earlier ones. */
.hst-reskin .hst-comment .children > .hst-comment:not(:last-child) > .hst-comment__card::before {
	content: "";
	position: absolute;
	left: -43px;
	top: 8px;
	bottom: -22px;
	border-left: 2px dashed var(--hst-thread);
}

.hst-thread-off .hst-comment.parent > .hst-comment__card::before,
.hst-thread-off .hst-comment .children > .hst-comment::before,
.hst-thread-off .hst-comment .children > .hst-comment::after,
.hst-thread-off .hst-comment .children > .hst-comment > .hst-comment__card::before {
	display: none !important;
}

.hst-reskin.hst-thread-off .hst-toc__list {
	border-left-style: solid;
	border-left-color: rgba(22, 17, 15, 0.15);
}

.hst-reskin.hst-thread-off :is(.hst-ask__stitch, .hst-feature__stitch) {
	display: none;
}

/* Form. */
.hst-reskin .hst-comments__form {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
}

.hst-reskin .hst-comments__empty + .hst-comments__form {
	margin-top: 40px;
}

.hst-reskin .hst-comment-respond {
	margin: 0;
	padding: 0;
	background: none;
}

.hst-reskin .hst-comment .hst-comment-respond {
	margin: 24px 0 8px;
	padding: 24px 0 0;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
}

.hst-reskin .hst-comment-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.hst-reskin .hst-comment-respond .comment-reply-title {
	margin: 0 0 6px;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-comment-respond .comment-reply-title small {
	display: block;
	margin-top: 4px;
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.hst-reskin #cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--hst-oxblood);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-comment-form :is(.comment-notes, .logged-in-as) {
	margin: 0;
	color: var(--hst-on-light);
	font-size: 15px;
	line-height: 1.6;
}

.hst-reskin .hst-comment-form .logged-in-as a {
	color: var(--hst-oxblood);
}

.hst-reskin .hst-comment-form .hst-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

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

.hst-reskin .hst-comment-form .hst-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-comment-form .hst-field textarea {
	min-height: 168px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

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

.hst-reskin .hst-comment-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.hst-reskin .hst-comment-form .hst-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--hst-on-light-2);
	font-size: 15px;
	line-height: 1.5;
}

.hst-reskin .hst-comment-form .hst-check input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--hst-oxblood);
}

.hst-reskin .hst-comment-form .hst-check label {
	cursor: pointer;
}

.hst-reskin .hst-comment-form .hst-comment-form__note {
	margin: 0;
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.55;
}

.hst-reskin .hst-comment-form__note a {
	color: var(--hst-oxblood);
	text-underline-offset: 3px;
}

.hst-reskin .hst-comment-form .form-submit {
	margin: 0;
}

.hst-reskin .hst-comment-form .hst-comment-form__submit {
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 3px;
	background: var(--hst-oxblood);
	box-shadow: none;
	color: var(--hst-bone);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	cursor: pointer;
}

.hst-reskin .hst-comment-form .hst-comment-form__submit:hover {
	background: var(--hst-oxblood-deep);
}

.hst-reskin .hst-comment-form .hst-comment-form__submit:focus-visible {
	outline: 2px solid var(--hst-ink);
	outline-offset: 2px;
}

/* After sending: the comment awaits approval. */
.hst-reskin .hst-comment-sent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	min-height: 320px;
}

.hst-reskin .hst-comment-sent__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	box-sizing: border-box;
	border: 2px dashed var(--hst-thread);
	border-radius: 50%;
	color: var(--hst-ink);
}

.hst-reskin .hst-comment-sent .hst-comment-sent__title {
	margin: 0;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-comment-sent .hst-comment-sent__text {
	margin: 0;
	color: var(--hst-on-light-2);
	font-size: 16px;
	line-height: 1.6;
}

.hst-reskin .hst-comment-sent__more {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	margin-top: 6px;
	padding: 0 22px;
	border: 1.5px solid rgba(22, 17, 15, 0.4);
	border-radius: 3px;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

/* ---- Further posts (concrete) ------------------------------------------------------------------------------------ */
.hst-reskin .hst-post-related {
	background: var(--hst-concrete);
	color: var(--hst-ink);
}

/* ---- P09d – tablets ---------------------------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.hst-reskin .hst-plinks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hst-reskin :is(.hst-article__inner, .hst-comments__inner) {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 0.6fr);
	}
}

/* ---- P09d – phones ------------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
	.hst-reskin .hst-page-hero .hst-post-meta {
		margin-top: 14px;
		font-size: 13px;
	}

	/* Topics: one row across the whole width, scrolling sideways. */
	.hst-reskin .hst-topics__list {
		flex-wrap: nowrap;
		margin: 0 calc(-1 * var(--hst-gutter));
		padding: 0 var(--hst-gutter) 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hst-reskin .hst-topics__list::-webkit-scrollbar {
		display: none;
	}

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

	.hst-reskin .hst-feature__media {
		max-width: none;
	}

	.hst-reskin .hst-feature__img {
		aspect-ratio: 5 / 4;
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	.hst-reskin .hst-feature .hst-feature__title {
		font-size: 38px;
	}

	.hst-reskin .hst-feature .hst-feature__excerpt {
		font-size: 16px;
	}

	.hst-reskin .hst-feature__more {
		align-self: stretch;
		justify-content: center;
	}

	/* Rows instead of the grid. */
	.hst-reskin .hst-post-grid {
		display: block;
		margin-top: 40px;
	}

	.hst-reskin .hst-post-grid > .hst-pcard-post {
		padding: 18px 0;
		border-top: 1px dashed rgba(22, 17, 15, 0.3);
	}

	.hst-reskin .hst-post-grid > .hst-pcard-post:last-child {
		border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
	}

	.hst-reskin .hst-pcard-post__card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 6px 16px;
		align-items: start;
	}

	.hst-reskin .hst-pcard-post__media {
		grid-row: 1 / span 2;
	}

	.hst-reskin .hst-pcard-post__photo,
	.hst-reskin .hst-pcard-post--related .hst-pcard-post__photo {
		width: 112px;
		height: 112px;
		aspect-ratio: auto;
	}

	.hst-reskin .hst-pcard-post__img {
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	.hst-reskin .hst-topic--photo {
		left: -6px;
		bottom: 10px;
		padding: 4px 10px 4px 20px;
		clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
		font-size: 12px;
	}

	.hst-reskin .hst-topic--photo .hst-topic__eye {
		left: 9px;
		width: 5px;
		height: 5px;
		margin-top: -2.5px;
	}

	.hst-reskin .hst-pcard-post .hst-pcard-post__title,
	.hst-reskin .hst-pcard-post--related .hst-pcard-post__title {
		margin: 0;
		font-size: 21px;
		line-height: 1.15;
	}

	.hst-reskin .hst-pcard-post .hst-pcard-post__excerpt {
		display: none;
	}

	.hst-reskin .hst-pcard-post .hst-pcard-post__meta {
		justify-content: flex-start;
		gap: 4px 16px;
		flex-wrap: wrap;
		padding-top: 0;
		border-top: 0;
	}

	.hst-reskin .hst-pager {
		margin-top: 40px;
	}

	/* Post: one column – contents above the text, the question below it. */
	.hst-reskin .hst-article__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 30px var(--hst-gutter) 72px;
	}

	.hst-reskin .hst-article__text {
		max-width: none;
		font-size: 16px;
		line-height: 1.7;
	}

	.hst-reskin .hst-article__text h2 {
		font-size: 27px;
	}

	.hst-reskin .hst-article__text h3 {
		font-size: 18px;
	}

	.hst-reskin .hst-toc-m {
		display: block;
		margin: 0 0 36px;
		border-top: 1px dashed rgba(22, 17, 15, 0.3);
		border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
	}

	.hst-reskin .hst-toc-m__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 52px;
		color: var(--hst-ink);
		font-size: 15px;
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}

	.hst-reskin .hst-toc-m__summary::-webkit-details-marker {
		display: none;
	}

	.hst-reskin .hst-toc-m__summary svg {
		color: var(--hst-thread);
		transform: rotate(90deg);
	}

	.hst-reskin .hst-toc-m[open] .hst-toc-m__summary svg {
		transform: rotate(-90deg);
	}

	.hst-reskin .hst-toc-m .hst-toc__list {
		margin: 0 0 16px;
	}

	.hst-reskin .hst-article__aside {
		grid-column: 1;
		position: static;
		max-width: none;
		margin-top: 40px;
	}

	.hst-reskin .hst-article__aside .hst-toc {
		display: none;
	}

	/* Products: a strip of 220 px cards with snapping, the button below it across the width. */
	.hst-reskin .hst-blog-head .hst-pill-btn {
		display: none;
	}

	.hst-reskin .hst-pill-btn--mobile {
		display: flex;
		width: 100%;
		margin-top: 28px;
	}

	.hst-reskin .hst-plinks {
		display: flex;
		gap: 16px;
		margin: 32px calc(-1 * var(--hst-gutter)) 0;
		padding: 0 var(--hst-gutter) 4px 30px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 30px;
		scrollbar-width: none;
	}

	.hst-reskin .hst-plinks::-webkit-scrollbar {
		display: none;
	}

	.hst-reskin .hst-plink {
		flex: 0 0 220px;
		scroll-snap-align: start;
	}

	/* Comments. */
	.hst-reskin .hst-comments__inner {
		grid-template-columns: minmax(0, 1fr);
		padding: 64px var(--hst-gutter) 72px;
	}

	.hst-reskin .hst-comments .hst-comments__title {
		font-size: 36px;
	}

	.hst-reskin .hst-comment__card {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 0 14px;
	}

	.hst-reskin .hst-avatar {
		width: 40px;
		height: 40px;
	}

	.hst-reskin .hst-comment .children {
		padding-left: 44px;
	}

	.hst-reskin .hst-comment .children .hst-comment__card {
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 0 12px;
	}

	.hst-reskin .hst-comment .children .hst-avatar {
		width: 36px;
		height: 36px;
	}

	.hst-reskin .hst-comment.parent > .hst-comment__card::before {
		left: 19px;
		top: 50px;
	}

	.hst-reskin .hst-comment .children > .hst-comment::before {
		left: -25px;
		width: 20px;
		height: 40px;
	}

	.hst-reskin .hst-comment .children > .hst-comment::after {
		left: -8px;
		top: 14px;
	}

	.hst-reskin .hst-comment .children > .hst-comment:not(:last-child) > .hst-comment__card::before {
		left: -25px;
	}

	.hst-reskin .hst-comment-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.hst-reskin .hst-comment-form .hst-comment-form__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-reskin .hst-toc__item::before {
		transition: none;
	}
}

/* ==== P09e – shop and categories (design/obchod/README.md, includes/reskin-shop.php) ============================ */

.hst-reskin .hst-shop {
	display: block;
	background: var(--hst-bone);
}

/* ---- Tiles Dámy / Páni (hst/shop-worlds) -------------------------------------------------------------------------- */
.hst-reskin .hst-worlds {
	position: relative;
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-worlds__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 24px;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(40px, 4vw, 56px) var(--hst-gutter) clamp(64px, 6vw, 88px);
	box-sizing: border-box;
}

.hst-reskin .hst-world {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 640px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-world__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	transition: transform 0.6s ease;
}

.hst-reskin .hst-world:hover .hst-world__img {
	transform: scale(1.02);
}

.hst-reskin .hst-world__shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72%;
	background: linear-gradient(to top, rgba(14, 10, 9, 0.95) 0%, rgba(14, 10, 9, 0.74) 40%, rgba(14, 10, 9, 0) 100%);
	pointer-events: none;
}

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

.hst-reskin .hst-world__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hst-reskin .hst-world__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 40px 44px 44px;
	pointer-events: none;
}

.hst-reskin .hst-world__title {
	margin: 0;
	font-family: var(--hst-serif);
	font-size: clamp(64px, 6.4vw, 96px);
	font-weight: 600;
	line-height: 0.92;
	letter-spacing: -0.02em;
}

.hst-reskin .hst-world__title a {
	color: var(--hst-bone);
	text-decoration: none;
	pointer-events: auto;
}

.hst-reskin .hst-world__title a:hover {
	color: var(--hst-bone);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.hst-reskin .hst-world__count {
	margin: 0;
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 600;
}

.hst-reskin .hst-world__text {
	max-width: 30em;
	margin: 0;
	color: var(--hst-on-dark);
	font-size: 17px;
	line-height: 1.6;
}

.hst-reskin .hst-world__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	pointer-events: auto;
}

.hst-reskin .hst-world__pills li {
	margin: 0;
}

.hst-reskin .hst-world__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	box-sizing: border-box;
	border: 1.5px solid rgba(239, 230, 218, 0.55);
	border-radius: 999px;
	background: rgba(14, 10, 9, 0.35);
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-world__pill:hover {
	border-color: var(--hst-bone);
	background: rgba(14, 10, 9, 0.6);
	color: var(--hst-bone);
}

.hst-reskin .hst-world__pill-count {
	color: var(--hst-on-dark-3);
	font-weight: 500;
}

.hst-thread-off .hst-world__stitch {
	display: none;
}

/* ---- "Zlož si celý look" (hst/photo-tags, layout side) ----------------------------------------------------------- */
.hst-reskin .hst-look {
	position: relative;
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-look__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(48px, 7vw, 112px);
	align-items: center;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(72px, 7vw, 104px) var(--hst-gutter);
	box-sizing: border-box;
}

.hst-reskin .hst-look__media {
	justify-self: end;
	width: 100%;
	max-width: 500px;
}

.hst-reskin .hst-look .hst-look__photo {
	position: relative;
	height: auto;
	aspect-ratio: 5 / 7;
}

.hst-reskin .hst-look .hst-photo-tags__img {
	border-radius: 4px;
	object-position: var(--hst-pos, 50% 50%);
}

.hst-reskin .hst-look .hst-ptag__string {
	height: 40px;
}

.hst-reskin .hst-look .hst-ptag__hang {
	top: 42px;
}

.hst-reskin .hst-look__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 560px;
}

.hst-reskin .hst-look__title {
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
}

.hst-reskin .hst-look__lead {
	margin: 0;
	color: var(--hst-on-dark-2);
	font-size: 17px;
	line-height: 1.7;
}

.hst-reskin .hst-look__list {
	margin: 6px 0 0;
	padding: 0;
	border-top: 1px dashed rgba(239, 230, 218, 0.28);
	list-style: none;
}

.hst-reskin .hst-look__list li {
	margin: 0;
	border-bottom: 1px dashed rgba(239, 230, 218, 0.28);
}

.hst-reskin .hst-look__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 14px 0;
	color: var(--hst-bone);
	text-decoration: none;
}

.hst-reskin .hst-look__item:hover {
	color: var(--hst-bone);
}

.hst-reskin .hst-look__item:hover .hst-look__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hst-reskin .hst-look__thumb {
	display: block;
	width: 64px;
	height: 80px;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	border-radius: 3px;
}

.hst-reskin .hst-look__name-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hst-reskin .hst-look__name {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.hst-reskin .hst-look__desc {
	color: var(--hst-on-dark-3);
	font-size: 14px;
	line-height: 1.45;
}

.hst-reskin .hst-look__price {
	font-family: var(--hst-serif);
	font-size: 24px;
	font-weight: 600;
	white-space: nowrap;
}

.hst-reskin .hst-look__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
}

.hst-reskin .hst-look__total-label {
	color: var(--hst-on-dark-3);
	font-size: 15px;
}

.hst-reskin .hst-look__total-price {
	font-family: var(--hst-serif);
	font-size: 30px;
	font-weight: 600;
	white-space: nowrap;
}

.hst-reskin .hst-look__btn {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 54px;
	padding: 0 28px;
	box-sizing: border-box;
	border-radius: var(--hst-radius);
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-look__btn:hover {
	background: #fff;
	color: var(--hst-ink);
}

/* ---- The pieces: heading, quick row, filters, bar, grid ---------------------------------------------------------- */
.hst-reskin .hst-shop-items {
	position: relative;
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-shop-items__inner {
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(64px, 6vw, 88px) var(--hst-gutter) clamp(80px, 8vw, 112px);
	box-sizing: border-box;
}

.hst-reskin .hst-shop-items__title {
	margin: 0;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
}

.hst-reskin .hst-shop-items__layout {
	display: grid;
	grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
	gap: 40px 56px;
	align-items: start;
	margin-top: 36px;
}

.hst-reskin .hst-filters {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.hst-reskin .hst-filter-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hst-reskin .hst-filter-group__title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.hst-reskin .hst-tree {
	margin: 0;
	padding: 4px 0;
	border-left: 2px dashed rgba(184, 149, 79, 0.75);
	list-style: none;
}

.hst-reskin .hst-tree__item {
	position: relative;
	margin: 0;
}

.hst-reskin .hst-tree__item.is-current::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--hst-thread);
}

.hst-reskin .hst-tree__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 8px 18px;
	color: var(--hst-on-light-2);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.hst-reskin .hst-tree__item--d1 .hst-tree__link {
	padding-left: 32px;
	font-size: 15px;
	font-weight: 500;
}

.hst-reskin .hst-tree__item--d2 .hst-tree__link {
	padding-left: 46px;
	font-size: 14px;
	font-weight: 500;
}

.hst-reskin .hst-tree__link:hover {
	color: var(--hst-ink);
}

.hst-reskin .hst-tree__link:hover .hst-tree__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-tree__item.is-current .hst-tree__link {
	color: var(--hst-ink);
	font-weight: 700;
}

.hst-reskin .hst-tree__count {
	color: var(--hst-on-light);
	font-size: 13px;
	font-weight: 500;
}

.hst-reskin .hst-price-opts {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-price-opts li {
	margin: 0;
}

.hst-reskin .hst-price-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.hst-reskin .hst-price-opt__ring {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid rgba(22, 17, 15, 0.45);
	border-radius: 50%;
}

.hst-reskin .hst-price-opt.is-on .hst-price-opt__ring {
	border-color: var(--hst-oxblood);
}

.hst-reskin .hst-price-opt.is-on .hst-price-opt__ring::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--hst-oxblood);
}

.hst-reskin .hst-price-opt__label {
	flex: 1;
}

.hst-reskin .hst-price-opt.is-on {
	font-weight: 700;
}

.hst-reskin a.hst-price-opt:hover {
	color: var(--hst-ink);
}

.hst-reskin a.hst-price-opt:hover .hst-price-opt__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-price-opt.is-off {
	opacity: 0.45;
	cursor: default;
}

.hst-reskin .hst-price-opt__count {
	color: var(--hst-on-light);
	font-size: 13px;
	font-weight: 500;
}

.hst-reskin .hst-filter-note {
	margin: 0;
	padding-top: 18px;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.55;
}

.hst-reskin .hst-results {
	min-width: 0;
}

.hst-reskin .hst-results[aria-busy="true"] .hst-shop-grid {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.hst-reskin .hst-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-bottom: 18px;
	border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
}

.hst-reskin .hst-bar__tools {
	order: 2;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hst-reskin .hst-bar__state {
	order: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.hst-reskin .hst-bar__count {
	margin: 0 6px 0 0;
	font-size: 15px;
	font-weight: 700;
}

.hst-reskin .hst-bar__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.hst-reskin .hst-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-chips li {
	margin: 0;
}

.hst-reskin .hst-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px 0 14px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--hst-ink);
	color: var(--hst-bone);
	font-size: 14px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-chip:hover {
	background: var(--hst-oxblood);
	color: var(--hst-bone);
}

.hst-reskin .hst-clear {
	color: var(--hst-oxblood);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.hst-reskin .hst-sort__label {
	font-size: 15px;
	font-weight: 600;
}

.hst-reskin .hst-sort__select {
	position: relative;
	display: inline-flex;
}

.hst-reskin .hst-sort select {
	min-height: 44px;
	padding: 0 40px 0 14px;
	border: 1.5px solid rgba(22, 17, 15, 0.35);
	border-radius: var(--hst-radius);
	background: #f8f3eb;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	cursor: pointer;
}

.hst-reskin .hst-sort__select svg {
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -8px;
	color: var(--hst-oxblood);
	pointer-events: none;
}

.hst-reskin .hst-sort__go {
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--hst-ink);
	border-radius: var(--hst-radius);
	background: transparent;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 600;
	box-shadow: none;
	cursor: pointer;
}

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

/* Grid and cards. */
.hst-reskin .hst-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 44px 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-scard {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.hst-reskin .hst-scard__media {
	position: relative;
}

.hst-reskin .hst-scard__img {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	background: #ddd2c4;
}

.hst-reskin .hst-scard__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	transition: transform 0.5s ease;
}

.hst-reskin .hst-scard__img:hover img {
	transform: scale(1.03);
}

.hst-reskin .hst-scard__media .hst-price-tag {
	position: absolute;
	z-index: 1;
	left: -10px;
	bottom: 18px;
}

.hst-reskin .hst-scard__title {
	margin: 16px 0 0;
	font-family: var(--hst-sans);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.hst-reskin .hst-scard__name {
	color: var(--hst-ink);
	text-decoration: none;
}

.hst-reskin .hst-scard__name:hover {
	color: var(--hst-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hst-reskin .hst-scard__desc {
	margin: 3px 0 0;
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.45;
}

.hst-reskin .hst-scard__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

.hst-reskin .hst-scard__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.hst-reskin .hst-scard__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(22, 17, 15, 0.25);
}

/* "Zobraziť ďalšie kúsky" and the empty selection. */
.hst-reskin .hst-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 48px;
	text-align: center;
}

.hst-reskin .hst-more:empty {
	display: none;
}

.hst-reskin .hst-more__text {
	margin: 0;
	color: var(--hst-on-light);
	font-size: 14px;
}

.hst-reskin .hst-more__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px 20px;
}

.hst-reskin .hst-more__next {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 30px;
	box-sizing: border-box;
	border: 1.5px solid var(--hst-ink);
	border-radius: 999px;
	color: var(--hst-ink);
	font-size: 16px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-more__next:hover {
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-shop-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 40px;
	padding: 36px 32px;
	border: 1.5px dashed rgba(22, 17, 15, 0.3);
	border-radius: 4px;
}

.hst-reskin .hst-shop-empty__title {
	margin: 0;
	font-family: var(--hst-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
}

.hst-reskin .hst-shop-empty__text {
	max-width: 34em;
	margin: 0;
	color: var(--hst-on-light-2);
	font-size: 16px;
	line-height: 1.6;
}

.hst-reskin .hst-shop-empty__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 8px;
	padding: 0 24px;
	box-sizing: border-box;
	border-radius: var(--hst-radius);
	background: var(--hst-oxblood);
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-shop-empty__btn:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

/* The phone panel: hidden on desktop (the sidebar has the filters). */
.hst-reskin .hst-mfilters {
	display: none;
}

/* ---- Subcategory cards ------------------------------------------------------------------------------------------ */
.hst-reskin .hst-subcats {
	position: relative;
	background: var(--hst-bone);
}

.hst-reskin .hst-subcats__inner {
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(40px, 4vw, 56px) var(--hst-gutter) 0;
	box-sizing: border-box;
}

.hst-reskin .hst-subcats__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-subcat {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hst-ink-card);
	color: var(--hst-bone);
}

.hst-reskin .hst-subcat__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--hst-photo-bg);
}

.hst-reskin .hst-subcat__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hst-pos, 50% 50%);
	transition: transform 0.5s ease;
}

.hst-reskin .hst-subcat:hover .hst-subcat__img {
	transform: scale(1.03);
}

.hst-reskin .hst-subcat__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px 20px;
	border-top: 3px solid var(--hst-oxblood);
}

.hst-reskin .hst-subcat__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-subcat__title svg {
	flex: none;
}

.hst-reskin .hst-subcat__link {
	color: var(--hst-bone);
	text-decoration: none;
}

.hst-reskin .hst-subcat__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hst-reskin .hst-subcat__link:hover {
	color: var(--hst-bone);
	text-decoration: underline;
	text-underline-offset: 5px;
}

.hst-reskin .hst-subcat__count {
	margin: 0;
	color: var(--hst-on-dark-3);
	font-size: 14px;
}

.hst-reskin .hst-subcat__pills {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-subcat__pills li {
	margin: 0;
}

.hst-reskin .hst-subcat__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1.5px solid rgba(239, 230, 218, 0.45);
	border-radius: 999px;
	color: var(--hst-bone);
	font-size: 14px;
	font-weight: 600;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-subcat__pill:hover {
	border-color: var(--hst-bone);
	color: var(--hst-bone);
}

.hst-reskin .hst-subcat__pill-count {
	color: var(--hst-on-dark-3);
	font-weight: 500;
}

/* "Máš vlastnú víziu?" on the shop and the categories: the photo of the workshop (IMG_7124) higher. */
.hst-reskin .hst-pattern__photo--p30 img {
	object-position: 50% 30%;
}

/* Editor preview of the placeholder. */
.hst-shop-placeholder {
	padding: 40px 32px;
	border: 2px dashed rgba(22, 17, 15, 0.35);
	border-radius: 6px;
	background: #f8f3eb;
	color: #16110f;
	font-family: Archivo, system-ui, sans-serif;
}

.hst-shop-placeholder__title {
	margin: 0 0 8px;
	font-family: "Bodoni Moda", Georgia, serif;
	font-size: 36px;
	font-weight: 600;
}

/* Panel "Filtre a zoradenie" (phones and tablets): a modal <dialog> with JavaScript, in place without it. */
.hst-mfilters__panel {
	border-radius: 14px 14px 0 0;
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-mfilters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 10px 14px 20px;
	border-bottom: 1px dashed rgba(22, 17, 15, 0.3);
}

.hst-reskin .hst-mfilters__title {
	margin: 0;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-mfilters__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hst-ink);
	box-shadow: none;
	cursor: pointer;
}

.hst-reskin .hst-mfilters__close[hidden] {
	display: none;
}

.hst-reskin .hst-mfilters__body {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 20px 20px 8px;
}

.hst-reskin .hst-mfilters__body .hst-tree__link {
	align-items: center;
	min-height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

.hst-reskin .hst-mfilters__form {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
}

.hst-reskin .hst-mfilters .hst-filter-group__title,
.hst-mfilters-dialog .hst-filter-group__title {
	margin-bottom: 4px;
}

.hst-reskin .hst-mradio {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.hst-reskin .hst-mradio input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.hst-reskin .hst-mradio__ring {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid rgba(22, 17, 15, 0.45);
	border-radius: 50%;
}

.hst-reskin .hst-mradio input:checked + .hst-mradio__ring {
	border-color: var(--hst-oxblood);
}

.hst-reskin .hst-mradio input:checked + .hst-mradio__ring::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--hst-oxblood);
}

.hst-reskin .hst-mradio input:focus-visible + .hst-mradio__ring {
	outline: 2px solid var(--hst-ink);
	outline-offset: 3px;
}

.hst-reskin .hst-mradio:has(input:checked) {
	font-weight: 700;
}

.hst-reskin .hst-mradio__label {
	flex: 1;
}

.hst-reskin .hst-mradio.is-off {
	opacity: 0.45;
	cursor: default;
}

.hst-reskin .hst-mradio__count {
	color: var(--hst-on-light);
	font-size: 13px;
	font-weight: 500;
}

.hst-reskin .hst-mfilters__panel .hst-filter-note {
	padding-top: 16px;
	font-size: 13px;
}

.hst-reskin .hst-mfilters__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px 24px;
	border-top: 1px dashed rgba(22, 17, 15, 0.3);
	background: var(--hst-bone);
}

.hst-reskin .hst-mfilters__reset {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 4px;
	color: var(--hst-oxblood);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-mfilters__apply {
	flex: 1;
	min-height: 52px;
	border: 0;
	border-radius: var(--hst-radius);
	background: var(--hst-oxblood);
	color: var(--hst-bone);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	box-shadow: none;
	cursor: pointer;
}

.hst-reskin .hst-mfilters__apply:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

/* The modal dialog (reskin-home.js moves the panel into it). */
.hst-reskin .hst-mfilters-dialog {
	width: 100%;
	max-width: 520px;
	max-height: calc(100dvh - 64px);
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: 14px 14px 0 0;
	background: var(--hst-bone);
	box-shadow: 0 -12px 40px rgba(14, 10, 9, 0.35);
	overflow: auto;
}

.hst-reskin .hst-mfilters-dialog::backdrop {
	background: rgba(14, 10, 9, 0.55);
}

.hst-reskin .hst-mfilters-dialog .hst-mfilters__actions {
	position: sticky;
	bottom: 0;
}

/* ---- Tablet and phones ------------------------------------------------------------------------------------------ */
@media (max-width: 1199px) {
	.hst-reskin .hst-world {
		min-height: 560px;
	}

	.hst-reskin .hst-world__body {
		padding: 32px 32px 36px;
	}

	.hst-reskin .hst-subcats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 959px) {
	.hst-reskin .hst-shop-items__layout {
		display: block;
		margin-top: 20px;
	}

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

	.hst-reskin .hst-quick {
		display: block;
		margin: 20px calc(-1 * var(--hst-gutter)) 0;
	}

	.hst-reskin .hst-quick__list {
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 0 var(--hst-gutter) 2px;
		overflow-x: auto;
		scrollbar-width: none;
		list-style: none;
	}

	.hst-reskin .hst-quick__list::-webkit-scrollbar {
		display: none;
	}

	.hst-reskin .hst-quick__list li {
		flex: none;
		margin: 0;
	}

	.hst-reskin .hst-quick__pill {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 16px;
		box-sizing: border-box;
		border: 1.5px solid rgba(22, 17, 15, 0.3);
		border-radius: 999px;
		color: var(--hst-ink);
		font-size: 15px;
		font-weight: 600;
		font-stretch: var(--hst-narrow);
		text-decoration: none;
		white-space: nowrap;
	}

	.hst-reskin .hst-quick__pill:hover {
		border-color: var(--hst-ink);
		color: var(--hst-ink);
	}

	.hst-reskin .hst-quick__pill[aria-current] {
		border-color: var(--hst-ink);
		background: var(--hst-ink);
		color: var(--hst-bone);
	}

	.hst-reskin .hst-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-bottom: 14px;
	}

	.hst-reskin .hst-bar__tools {
		order: 1;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.hst-reskin .hst-bar__state {
		order: 2;
		justify-content: space-between;
	}

	.hst-reskin .hst-sort__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.hst-reskin .hst-sort select {
		padding: 0 36px 0 12px;
	}

	.hst-reskin .hst-sort__select svg {
		right: 12px;
	}

	.hst-reskin .hst-mfilters {
		display: block;
	}

	.hst-reskin .hst-mfilters__open {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 0 16px;
		box-sizing: border-box;
		border: 1.5px solid var(--hst-ink);
		border-radius: var(--hst-radius);
		color: var(--hst-ink);
		font-size: 15px;
		font-weight: 600;
		font-stretch: var(--hst-narrow);
		list-style: none;
		cursor: pointer;
	}

	.hst-reskin .hst-mfilters__open::-webkit-details-marker {
		display: none;
	}

	.hst-reskin .hst-mfilters__open::marker {
		content: "";
	}

	.hst-reskin .hst-mfilters__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--hst-oxblood);
		color: var(--hst-bone);
		font-size: 12px;
		font-weight: 700;
	}

	/* Without JavaScript the panel opens in place under the button (<details>). */
	.hst-reskin .hst-mfilters[open] {
		order: 3;
		width: 100%;
	}

	.hst-reskin .hst-mfilters[open] > .hst-mfilters__panel {
		margin-top: 12px;
		border: 1.5px solid rgba(22, 17, 15, 0.3);
		border-radius: 6px;
	}

	.hst-reskin .hst-shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 14px;
		margin-top: 24px;
	}

	.hst-reskin .hst-scard__media .hst-price-tag {
		left: -8px;
		bottom: 12px;
		padding: 6px 11px 6px 22px;
		clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
		font-size: 16px !important;
	}

	.hst-reskin .hst-scard__media .hst-price-tag::before {
		left: 10px;
		width: 6px;
		height: 6px;
		margin-top: -3px;
	}

	.hst-reskin .hst-scard__title {
		margin-top: 12px;
		font-size: 15px;
	}

	.hst-reskin .hst-scard__desc {
		margin-top: 2px;
		font-size: 13px;
	}

	.hst-reskin .hst-scard__row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding-top: 10px;
	}

	.hst-reskin .hst-scard__dots {
		gap: 3px;
	}

	.hst-reskin .hst-scard__dot {
		width: 10px;
		height: 10px;
	}

	.hst-reskin .hst-scard .hst-pick .hst-pick__toggle {
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		font-size: 14px;
	}

	.hst-reskin .hst-more {
		align-items: stretch;
		margin-top: 36px;
	}

	.hst-reskin .hst-more__next {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.hst-reskin .hst-worlds__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding-top: 28px;
		padding-bottom: 56px;
	}

	.hst-reskin .hst-world {
		min-height: 440px;
	}

	.hst-reskin .hst-world__img {
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	.hst-reskin .hst-world__stitch {
		inset: 8px;
	}

	/* The text covers more of the photo on phones: a taller shade keeps the heading readable. */
	.hst-reskin .hst-world__shade {
		height: 88%;
		background: linear-gradient(to top, rgba(14, 10, 9, 0.95) 0%, rgba(14, 10, 9, 0.8) 50%, rgba(14, 10, 9, 0) 100%);
	}

	.hst-reskin .hst-world__pill {
		gap: 6px;
		padding: 0 14px;
		font-size: 14px;
	}

	.hst-reskin .hst-world__body {
		gap: 10px;
		padding: 28px 24px;
	}

	.hst-reskin .hst-world__title {
		font-size: 60px;
	}

	.hst-reskin .hst-world__text {
		font-size: 16px;
	}

	.hst-reskin .hst-look__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.hst-reskin .hst-look__media {
		justify-self: stretch;
		max-width: none;
	}

	.hst-reskin .hst-look .hst-photo-tags__img {
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	.hst-reskin .hst-look .hst-ptag__string {
		height: var(--drop-m, 30px);
	}

	.hst-reskin .hst-look .hst-ptag__hang {
		top: calc(var(--drop-m, 30px) + 2px);
	}

	.hst-reskin .hst-look__text {
		gap: 18px;
	}

	.hst-reskin .hst-look__title {
		font-size: 40px;
	}

	.hst-reskin .hst-look__lead {
		font-size: 16px;
	}

	.hst-reskin .hst-look__item {
		grid-template-columns: 52px minmax(0, 1fr) auto;
		gap: 14px;
	}

	.hst-reskin .hst-look__thumb {
		width: 52px;
		height: 65px;
	}

	.hst-reskin .hst-look__name {
		font-size: 15px;
	}

	.hst-reskin .hst-look__desc {
		font-size: 13px;
	}

	.hst-reskin .hst-look__price {
		font-size: 22px;
	}

	.hst-reskin .hst-look__total-price {
		font-size: 28px;
	}

	.hst-reskin .hst-look__btn {
		justify-content: center;
		width: 100%;
	}

	.hst-reskin .hst-shop-items__inner {
		padding-top: 56px;
		padding-bottom: 72px;
	}

	.hst-reskin .hst-shop-items__title {
		font-size: 36px;
		line-height: 1.02;
	}

	.hst-reskin .hst-subcats__inner {
		padding: 28px 0 0;
	}

	.hst-reskin .hst-subcats__list {
		display: flex;
		gap: 14px;
		padding: 0 20px 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 20px;
		scrollbar-width: none;
	}

	.hst-reskin .hst-subcats__list::-webkit-scrollbar {
		display: none;
	}

	.hst-reskin .hst-subcat {
		flex: 0 0 200px;
		scroll-snap-align: start;
	}

	.hst-reskin .hst-subcat__img {
		object-position: var(--hst-pos-m, var(--hst-pos, 50% 50%));
	}

	.hst-reskin .hst-subcat__body {
		gap: 2px;
		padding: 14px 16px 16px;
	}

	.hst-reskin .hst-subcat__title {
		gap: 10px;
		font-size: 24px;
	}

	.hst-reskin .hst-subcat__count {
		font-size: 13px;
	}

	/* Phones (design): the next level under each other, across the card, the count on the right. */
	.hst-reskin .hst-subcat__pills {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 6px;
	}

	.hst-reskin .hst-subcat__pill {
		display: flex;
		justify-content: space-between;
		gap: 8px;
	}

	.hst-reskin .hst-shop-empty {
		padding: 28px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-reskin :is(.hst-world__img, .hst-scard__img img, .hst-subcat__img) {
		transition: none;
	}

	.hst-reskin .hst-world:hover .hst-world__img,
	.hst-reskin .hst-scard__img:hover img,
	.hst-reskin .hst-subcat:hover .hst-subcat__img {
		transform: none;
	}
}

/* ==== P09f – product page (includes/reskin-product*.php, design/produkt/README.md) ==================================
   Bone section with the sticky gallery and the choice, "O kúsku" + "Dobré vedieť" under a straight golden seam,
   "Doplň si look" on ink, "Máš vlastnú víziu?" (block of the shop page). The sticky gallery needs ancestors without
   overflow: hidden – the wrappers of Kadence clip horizontally instead. ========================================== */
.hst-product-page #wrapper,
.hst-product-page .site,
.hst-product-page #inner-wrap,
.hst-product-page .content-container {
	overflow: visible;
	overflow-x: clip;
}

.hst-reskin .hst-pp {
	--hst-pp-line: rgba(22, 17, 15, 0.3);
	--hst-pp-tag: #f8f3eb;
	display: block;
	margin: 0;
	color: var(--hst-ink);
}

/* Reset without weight (:where) – the margins of the components below win. */
:where(.hst-reskin .hst-pp) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend) {
	margin: 0;
}

.hst-reskin .hst-pp-radio,
.hst-reskin .hst-pp-tile__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
}

.hst-reskin .hst-pp-radio:focus-visible + label,
.hst-reskin .hst-pp-tile__input:focus-visible ~ .hst-pp-tile__media,
.hst-reskin .hst-pp-tile:has(.hst-pp-tile__input:focus-visible) {
	outline: 2px solid var(--hst-focus);
	outline-offset: 3px;
}

.hst-reskin .hst-pp-tile:has(.hst-pp-tile__input:focus-visible) .hst-pp-tile__media {
	outline: 0;
}

/* ---- Section 1: breadcrumbs, gallery, choice ---------------------------------------------------------------- */
.hst-reskin .hst-pp-buy {
	position: relative;
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-buy__inner {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: 24px var(--hst-gutter) clamp(72px, 7vw, 104px);
}

.hst-reskin .hst-pp-buy .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 18px;
}

.hst-reskin .hst-pp-crumbs .hst-crumbs ol {
	gap: 4px 10px;
	color: var(--hst-on-light);
	font-size: 14px;
}

.hst-reskin .hst-pp-crumbs .hst-crumbs a {
	color: var(--hst-on-light);
}

.hst-reskin .hst-pp-crumbs .hst-crumbs a:hover,
.hst-reskin .hst-pp-crumbs .hst-crumbs [aria-current] {
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-crumbs .hst-crumbs [aria-current] {
	font-weight: 500;
}

.hst-reskin .hst-pp-crumbs .hst-crumbs__sep {
	color: #8a6d36;
}

.hst-reskin .hst-pp-buy__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px clamp(40px, 5vw, 80px);
	margin-top: 22px;
}

/* Gallery: sticks under the sticky row of the header (P09g: --hst-header-h, reskin.css). */
.hst-reskin .hst-pp-gal {
	position: sticky;
	top: calc(var(--hst-header-h, 76px) + 24px);
	display: flex;
	gap: 14px;
	flex: 1 1 560px;
	min-width: 0;
}

.hst-reskin .hst-pp-gal__thumbs {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	width: 76px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-pp-gal__thumbs li {
	margin: 0;
}

.hst-reskin .hst-pp-gal__thumb {
	display: block;
	overflow: hidden;
	width: 76px;
	height: 95px;
	border-radius: 3px;
	background: #ddd2c4;
}

.hst-reskin .hst-pp-gal__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.hst-reskin .hst-pp-gal__thumb[aria-current] {
	box-shadow: 0 0 0 2px var(--hst-bone), 0 0 0 4px var(--hst-ink);
}

.hst-reskin .hst-pp-gal__thumb[aria-current] img,
.hst-reskin .hst-pp-gal__thumb:hover img {
	opacity: 1;
}

.hst-reskin .hst-pp-gal__main {
	position: relative;
	flex: 1;
	min-width: 0;
}

.hst-reskin .hst-pp-gal__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	background: #ddd2c4;
	touch-action: pan-y;
}

/* The slide is a <figure>: the theme gives it a margin (8.5 px above and below) – the photo would leave a stripe of the
   frame above it (P09k, bod 22). */
.hst-reskin .hst-pp-gal__slide {
	height: 100%;
	margin: 0;
}

.hst-reskin .hst-pp-gal__slide[hidden] {
	display: none;
}

.hst-reskin .hst-pp-gal__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.hst-reskin .hst-pp-gal__count {
	position: absolute;
	left: 16px;
	top: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(22, 17, 15, 0.72);
	color: var(--hst-bone);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.45;
}

.hst-reskin .hst-pp-gal__zoom,
.hst-reskin .hst-pp-gal__arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(239, 230, 218, 0.92);
	color: var(--hst-ink);
	box-shadow: none;
	cursor: pointer;
}

.hst-reskin .hst-pp-gal__zoom[hidden],
.hst-reskin .hst-pp-gal__arrow[hidden] {
	display: none;
}

.hst-reskin .hst-pp-gal__zoom {
	right: 14px;
	top: 14px;
	width: 44px;
	height: 44px;
}

.hst-reskin .hst-pp-gal__arrow {
	top: 50%;
	width: 48px;
	height: 48px;
	margin-top: -24px;
}

.hst-reskin .hst-pp-gal__arrow--prev {
	left: 14px;
}

.hst-reskin .hst-pp-gal__arrow--next {
	right: 14px;
}

.hst-reskin .hst-pp-gal__zoom:hover,
.hst-reskin .hst-pp-gal__arrow:hover {
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-gal__nophoto {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100% - 32px);
	box-sizing: border-box;
	padding: 8px 18px 8px 8px;
	border-radius: 999px;
	background: rgba(22, 17, 15, 0.88);
	color: var(--hst-bone);
	font-size: 14px;
	line-height: 1.35;
}

.hst-reskin .hst-pp-gal__nophoto[hidden] {
	display: none;
}

.hst-reskin .hst-pp-gal__nophoto-swatch {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 2px var(--hst-bone);
}

.hst-reskin .hst-pp-gal__nophoto-short {
	display: none;
}

/* Panel. */
.hst-reskin .hst-pp-panel {
	display: flex;
	flex: 1 1 400px;
	flex-direction: column;
	gap: 30px;
	max-width: 540px;
	min-width: 0;
}

.hst-reskin .hst-pp-title {
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: clamp(44px, 4.4vw, 64px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 0.98;
}

.hst-reskin .hst-pp-sub {
	margin-top: 10px;
	color: var(--hst-on-light);
	font-size: 17px;
	line-height: 1.45;
}

.hst-reskin .hst-pp-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: 18px;
}

.hst-reskin .hst-pp-price__value {
	font-family: var(--hst-serif);
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
}

.hst-reskin .hst-pp-price__note {
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.45;
}

.hst-reskin .hst-pp-short {
	margin-top: 18px;
	color: var(--hst-on-light-2);
	font-size: 16px;
	line-height: 1.7;
}

.hst-reskin .hst-pp-short p + p {
	margin-top: 10px;
}

/* The short description is bold as a whole in WooCommerce – shown as normal text (README §3.1). */
.hst-reskin .hst-pp-short :is(strong, b) {
	font-weight: inherit;
}

.hst-reskin .hst-pp-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 0;
}

.hst-reskin .hst-pp-opt {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 0;
	border: 0;
}

.hst-reskin .hst-pp-opt > legend.hst-pp-opt__label {
	margin-bottom: 12px;
}

.hst-reskin .hst-pp-opt__label {
	padding: 0;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.hst-reskin .hst-pp-opt__value {
	font-weight: 500;
}

.hst-reskin .hst-pp-opt__state {
	color: var(--hst-on-light);
	font-weight: 500;
}

.hst-reskin .hst-pp-opt__note {
	color: var(--hst-on-light);
	font-size: 13px;
}

/* Leather swatches. */
.hst-reskin .hst-pp-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hst-reskin .hst-pp-swatch {
	display: block;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 50%;
	cursor: pointer;
}

.hst-reskin .hst-pp-swatch--small {
	width: 40px;
	height: 40px;
	padding: 2px;
}

.hst-reskin .hst-pp-swatch__img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(22, 17, 15, 0.25);
}

.hst-reskin .hst-pp-radio:checked + .hst-pp-swatch {
	border-color: var(--hst-ink);
}

.hst-reskin .hst-pp-swatch:hover {
	border-color: rgba(22, 17, 15, 0.4);
}

/* Parameters at the choice. */
.hst-reskin .hst-pp-params-pick {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hst-reskin .hst-pp-params {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-pp-params li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-params .hst-pp-ico {
	flex: none;
	margin-top: 1px;
	color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-params__value {
	color: var(--hst-on-light-2);
}

.hst-reskin .hst-pp-params__link {
	width: fit-content;
	margin-left: 32px;
	padding: 4px 0;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Sizes and the size chart. */
.hst-reskin .hst-pp-opt__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
}

.hst-reskin .hst-pp-chart__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	list-style: none;
	cursor: pointer;
}

.hst-reskin .hst-pp-chart__open::-webkit-details-marker {
	display: none;
}

.hst-reskin .hst-pp-chart__open::marker {
	content: "";
}

.hst-reskin .hst-pp-chart__open .hst-pp-ico {
	color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-chart {
	flex: 1 1 100%;
	order: 2;
}

.hst-reskin .hst-pp-opt__head > .hst-pp-opt__label {
	order: 1;
}

.hst-reskin .hst-pp-chart:not([open]) {
	flex: none;
}

.hst-reskin .hst-pp-chart[open] > .hst-pp-chart__panel {
	margin-top: 10px;
	padding: 20px;
	border-radius: 4px;
	background: var(--hst-pp-tag);
}

.hst-reskin .hst-pp-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hst-reskin .hst-pp-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 68px;
	min-height: 52px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--hst-pp-line);
	border-radius: 3px;
	color: var(--hst-ink);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.hst-reskin .hst-pp-opt--size.is-error .hst-pp-size {
	border-color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-radio:checked + .hst-pp-size {
	border: 2px solid var(--hst-ink);
	background: var(--hst-pp-tag);
}

.hst-reskin .hst-pp-error {
	color: var(--hst-oxblood);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

.hst-reskin .hst-pp-error[hidden] {
	display: none;
}

.hst-reskin .hst-pp-hint {
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-hint a {
	color: var(--hst-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Hardware. */
.hst-reskin .hst-pp-metals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.hst-reskin .hst-pp-metal {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 60px;
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid rgba(22, 17, 15, 0.25);
	border-radius: 3px;
	color: var(--hst-ink);
	cursor: pointer;
}

.hst-reskin .hst-pp-radio:checked + .hst-pp-metal {
	border: 2px solid var(--hst-ink);
	background: var(--hst-pp-tag);
}

.hst-reskin .hst-pp-metal__ring {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(22, 17, 15, 0.25), 0 1px 2px rgba(22, 17, 15, 0.25);
}

.hst-reskin .hst-pp-metal__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.hst-reskin .hst-pp-metal__name {
	font-size: 15px;
	font-weight: 700;
}

.hst-reskin .hst-pp-metal__sub {
	color: var(--hst-on-light);
	font-size: 13px;
}

.hst-reskin .hst-pp-metal__price {
	flex: none;
	color: var(--hst-on-light);
	font-size: 14px;
	font-weight: 600;
}

.hst-reskin .hst-pp-metal__price.is-paid {
	color: var(--hst-ink);
}

/* Add-ons and the option as a photo. */
.hst-reskin .hst-pp-addons {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 26px;
	border-top: 1px dashed var(--hst-pp-line);
}

.hst-reskin .hst-pp-addons__title {
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
}

.hst-reskin .hst-pp-addons__title span {
	color: var(--hst-on-light);
	font-weight: 500;
}

.hst-reskin .hst-pp-addons__text {
	margin-top: -10px;
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.55;
}

.hst-reskin .hst-pp-tiles {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-pp-tiles li {
	margin: 0;
}

.hst-reskin .hst-pp-tile {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	margin: 0;
	border: 1.5px solid rgba(22, 17, 15, 0.22);
	border-radius: 4px;
	background: rgba(248, 243, 235, 0.5);
	color: var(--hst-ink);
	cursor: pointer;
}

.hst-reskin .hst-pp-tile:has(.hst-pp-tile__input:checked) {
	border: 2px solid var(--hst-oxblood);
	background: var(--hst-pp-tag);
}

.hst-reskin .hst-pp-tile__media {
	position: relative;
	flex: none;
	width: 112px;
	aspect-ratio: 1 / 1;
	background: #ddd2c4;
}

.hst-reskin .hst-pp-tile--wide .hst-pp-tile__media {
	width: 168px;
}

.hst-reskin .hst-pp-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hst-reskin .hst-pp-tile__badge {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hst-bone);
	color: var(--hst-ink);
	box-shadow: 0 2px 6px rgba(22, 17, 15, 0.3);
}

.hst-reskin .hst-pp-tile__badge .hst-pp-ico {
	position: absolute;
	left: 7px;
	top: 7px;
	stroke-width: 2.4;
}

.hst-reskin .hst-pp-tile__badge .hst-pp-ico--tick,
.hst-reskin .hst-pp-tile__input:checked ~ .hst-pp-tile__media .hst-pp-ico--plus {
	opacity: 0;
}

.hst-reskin .hst-pp-tile__input:checked ~ .hst-pp-tile__media .hst-pp-tile__badge {
	background: var(--hst-oxblood);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-tile__input:checked ~ .hst-pp-tile__media .hst-pp-ico--tick {
	opacity: 1;
}

.hst-reskin .hst-pp-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 14px 18px;
}

.hst-reskin .hst-pp-tile__name {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.hst-reskin .hst-pp-tile__desc {
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.45;
}

.hst-reskin .hst-pp-tile__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: 6px;
}

.hst-reskin .hst-pp-tile__price {
	color: var(--hst-oxblood);
	font-size: 16px;
	font-weight: 700;
}

.hst-reskin .hst-pp-tile__state {
	color: var(--hst-on-light);
	font-size: 14px;
	font-weight: 600;
}

.hst-reskin .hst-pp-tile__on,
.hst-reskin .hst-pp-tile__input:checked ~ .hst-pp-tile__body .hst-pp-tile__off {
	display: none;
}

.hst-reskin .hst-pp-tile__input:checked ~ .hst-pp-tile__body .hst-pp-tile__on {
	display: inline;
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-aopt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 4px;
	padding: 12px 14px;
	border-radius: 4px;
	background: var(--hst-pp-tag);
}

/* Without the script the choices of an add-on show only while it is added (the script sets hidden itself). */
.hst-reskin .hst-pp-tiles li:has(.hst-pp-tile__input:not(:checked)) > .hst-pp-aopt,
.hst-reskin .hst-pp-aopt[hidden],
.hst-reskin .hst-pp-aopt__set[hidden],
.hst-reskin .hst-pp-aopt__change[hidden],
.hst-reskin .hst-pp-aopt__note[hidden] {
	display: none;
}

.hst-reskin .hst-pp-aopt__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
}

.hst-reskin .hst-pp-aopt .hst-pp-aopt__now,
.hst-reskin .hst-pp-aopt .hst-pp-aopt__note {
	margin: 0;
	color: var(--hst-on-light-2);
	font-size: 14px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-aopt__change {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hst-ink);
	box-shadow: none;
	font-family: var(--hst-sans);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.hst-reskin .hst-pp-aopt__change:hover {
	background: none;
	color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-aopt__set {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.hst-reskin .hst-pp-aopt__set .hst-pp-swatches,
.hst-reskin .hst-pp-aopt__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* "Ako choker" and the hardware as small pills; the checked one is ink. */
.hst-reskin .hst-pp-aopt__like,
.hst-reskin .hst-pp-aopt__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 40px;
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1.5px solid rgba(22, 17, 15, 0.35);
	border-radius: 999px;
	color: var(--hst-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hst-reskin .hst-pp-aopt__plus {
	font-weight: 500;
	color: var(--hst-on-light);
}

.hst-reskin .hst-pp-radio:checked + :is(.hst-pp-aopt__like, .hst-pp-aopt__chip) {
	border-color: var(--hst-ink);
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-radio:checked + .hst-pp-aopt__chip .hst-pp-aopt__plus {
	color: inherit;
}

/* Summary "Tvoj kúsok" – a tag with a golden stitch and a punched hole. */
.hst-reskin .hst-pp-sum {
	position: relative;
	padding: 28px 28px 26px;
	border-radius: 4px;
	background: var(--hst-pp-tag);
	box-shadow: 0 22px 44px -28px rgba(22, 17, 15, 0.55);
}

.hst-reskin .hst-pp-sum::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(184, 149, 79, 0.95);
	border-radius: 2px;
	pointer-events: none;
}

.hst-reskin .hst-pp-sum__hole {
	position: absolute;
	right: 24px;
	top: 22px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--hst-bone);
	box-shadow: inset 0 1px 3px rgba(22, 17, 15, 0.45);
}

.hst-reskin .hst-pp-sum__title {
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-pp-sum__lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-pp-sum__line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 2px 16px;
	margin: 0;
}

.hst-reskin .hst-pp-sum__name,
.hst-reskin .hst-pp-sum__price {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.hst-reskin .hst-pp-sum__price {
	white-space: nowrap;
}

.hst-reskin .hst-pp-sum__detail {
	grid-column: 1 / -1;
	color: var(--hst-on-light);
	font-size: 14px;
	line-height: 1.45;
}

.hst-reskin .hst-pp-sum__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--hst-pp-line);
}

.hst-reskin .hst-pp-sum__total-label {
	font-size: 16px;
	font-weight: 700;
}

.hst-reskin .hst-pp-sum__total-value {
	font-family: var(--hst-serif);
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
}

.hst-reskin .hst-pp-sum__nojs {
	margin-top: 8px;
	color: var(--hst-on-light);
	font-size: 13px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-sum__status {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
}

.hst-reskin .hst-pp-sum__icon {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-sum__icon .hst-pp-ico {
	display: block;
}

.hst-reskin .hst-pp-sum__status-text {
	color: var(--hst-ink);
	font-size: 15px;
	line-height: 1.45;
}

.hst-reskin .hst-pp-sum__custom {
	margin: 6px 0 0 30px;
	color: var(--hst-on-light);
	font-size: 13px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-sum__custom[hidden] {
	display: none;
}

.hst-reskin .hst-pp-sum__custom a {
	color: var(--hst-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-pp-sum__actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.hst-reskin .hst-pp-qty {
	display: flex;
	flex: none;
	align-items: center;
	box-sizing: border-box;
	width: 135px;
	border: 1.5px solid rgba(22, 17, 15, 0.35);
	border-radius: 3px;
	background: var(--hst-bone);
}

.hst-reskin .hst-pp-qty__btn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 54px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hst-ink);
	box-shadow: none;
	cursor: pointer;
}

.hst-reskin .hst-pp-qty__btn[hidden] {
	display: none;
}

.hst-reskin .hst-pp-qty__btn:hover {
	background: rgba(22, 17, 15, 0.06);
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-qty__input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hst-ink);
	box-shadow: none;
	font-family: var(--hst-sans);
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.hst-reskin .hst-pp-qty__input::-webkit-outer-spin-button,
.hst-reskin .hst-pp-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hst-reskin .hst-pp-submit,
.hst-reskin .hst-pp-bar__submit {
	flex: 1;
	min-height: 57px;
	padding: 0 20px;
	border: 0;
	border-radius: 3px;
	background: var(--hst-oxblood);
	color: var(--hst-bone);
	box-shadow: none;
	font-family: var(--hst-sans);
	font-size: 17px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.hst-reskin .hst-pp-submit:hover,
.hst-reskin .hst-pp-bar__submit:hover {
	background: var(--hst-oxblood-deep);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-submit:disabled,
.hst-reskin .hst-pp-bar__submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

.hst-reskin .hst-pp-sum__mtotal,
.hst-reskin .hst-pp-bar {
	display: none;
}

.hst-reskin .hst-pp-done {
	--hst-focus: var(--hst-thread);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
	padding: 16px 18px;
	border-radius: 3px;
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-done[hidden] {
	display: none;
}

.hst-reskin .hst-pp-done__text {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
}

.hst-reskin .hst-pp-done__text:focus {
	outline: 0;
}

.hst-reskin .hst-pp-done__text .hst-pp-ico {
	flex: none;
	margin-top: 1px;
	color: var(--hst-thread);
	stroke-width: 2;
}

.hst-reskin .hst-pp-done__warn {
	color: var(--hst-on-oxblood);
	font-size: 14px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-done__warn[hidden] {
	display: none;
}

.hst-reskin .hst-pp-done__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hst-reskin .hst-pp-done__cart {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 3px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-size: 15px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-decoration: none;
}

.hst-reskin .hst-pp-done__cart:hover {
	background: #fff;
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-done__more {
	min-height: 46px;
	padding: 0 16px;
	border: 1.5px solid rgba(239, 230, 218, 0.5);
	border-radius: 3px;
	background: none;
	color: var(--hst-bone);
	box-shadow: none;
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.hst-reskin .hst-pp-done__more:hover {
	border-color: var(--hst-bone);
	background: none;
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-error--form {
	margin-top: 12px;
}

/* Trust rows. */
.hst-reskin .hst-pp-trust {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	color: var(--hst-on-light-2);
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}

.hst-reskin .hst-pp-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.hst-reskin .hst-pp-trust .hst-pp-ico {
	flex: none;
	color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-trust a {
	color: var(--hst-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Section 2: "O kúsku" and "Dobré vedieť" under a straight golden seam with knots at 3 % and 97 % ---------- */
.hst-reskin .hst-pp-about {
	position: relative;
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-about::before {
	content: "";
	position: absolute;
	left: 3%;
	right: 3%;
	top: -1px;
	border-top: 2px dashed var(--hst-thread);
}

.hst-reskin .hst-pp-about::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -5px;
	height: 10px;
	background:
		radial-gradient(circle at 3% 50%, var(--hst-thread) 4.5px, transparent 5px),
		radial-gradient(circle at 97% 50%, var(--hst-thread) 4.5px, transparent 5px);
	pointer-events: none;
}

.hst-thread-off .hst-pp-about::before,
.hst-thread-off .hst-pp-about::after {
	display: none;
}

.hst-reskin .hst-pp-about__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 56px clamp(48px, 7vw, 112px);
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(64px, 6vw, 88px) var(--hst-gutter) clamp(80px, 8vw, 112px);
}

.hst-reskin .hst-pp-about__text {
	flex: 1 1 520px;
	max-width: 760px;
	min-width: 0;
}

.hst-reskin .hst-pp-about__title,
.hst-reskin .hst-pp-look__title {
	font-family: var(--hst-serif);
	font-size: clamp(40px, 4.4vw, 60px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1;
}

.hst-reskin .hst-pp-about__title {
	color: var(--hst-ink);
}

.hst-reskin .hst-pp-desc h3 {
	margin: 34px 0 0;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.hst-reskin .hst-pp-desc :is(p, ul, ol) {
	max-width: 38em;
	margin: 10px 0 0;
	color: var(--hst-on-light-2);
	font-size: 17px;
	line-height: 1.75;
}

.hst-reskin .hst-pp-desc :is(ul, ol) {
	padding-left: 1.2em;
}

.hst-reskin .hst-pp-desc li {
	margin: 4px 0 0;
}

.hst-reskin .hst-pp-desc a {
	color: var(--hst-oxblood);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-pp-specs {
	display: grid;
	grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
	margin: 40px 0 0;
	border-top: 1px dashed var(--hst-pp-line);
}

.hst-reskin .hst-pp-specs dt {
	padding: 14px 24px 14px 0;
	border-bottom: 1px dashed var(--hst-pp-line);
	font-size: 15px;
	font-weight: 700;
}

.hst-reskin .hst-pp-specs dd {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px dashed var(--hst-pp-line);
	color: var(--hst-on-light-2);
	font-size: 15px;
	line-height: 1.5;
}

.hst-reskin .hst-pp-good {
	flex: 1 1 360px;
	max-width: 520px;
	min-width: 0;
}

.hst-reskin .hst-pp-good__title {
	margin: 0 0 14px;
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-pp-acc {
	border-bottom: 1px solid rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-pp-good__title + .hst-pp-acc {
	border-top: 1px solid rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-pp-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	color: var(--hst-ink);
	list-style: none;
	cursor: pointer;
}

.hst-reskin .hst-pp-acc__head::-webkit-details-marker {
	display: none;
}

.hst-reskin .hst-pp-acc__head::marker {
	content: "";
}

.hst-reskin .hst-pp-acc__title {
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.hst-reskin .hst-pp-acc__head .hst-pp-ico {
	flex: none;
	transition: transform 0.2s ease;
}

.hst-reskin .hst-pp-acc[open] .hst-pp-acc__head .hst-pp-ico {
	transform: rotate(45deg);
}

.hst-reskin .hst-pp-acc__body {
	padding: 0 36px 20px 0;
	color: var(--hst-on-light-2);
	font-size: 15px;
	line-height: 1.65;
}

.hst-reskin .hst-pp-acc__body a {
	color: var(--hst-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-pp-reviews :is(#reviews, #comments, .woocommerce-Reviews) {
	margin: 0;
	padding: 0;
}

.hst-reskin .hst-pp-reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hst-reskin .hst-pp-reviews .commentlist li {
	margin: 0 0 16px;
}

.hst-reskin .hst-pp-reviews .comment-reply-title {
	display: block;
	margin: 16px 0 8px;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
}

.hst-reskin .hst-pp-reviews .hst-comment-form {
	gap: 14px;
}

.hst-reskin .hst-pp-reviews p.stars {
	margin: 4px 0 0;
	font-size: 22px;
	line-height: 1;
}

.hst-reskin .hst-pp-reviews p.stars a {
	margin-right: 4px;
	color: var(--hst-oxblood);
}

.hst-reskin .hst-pp-reviews p.stars a:focus-visible {
	outline: 2px solid var(--hst-focus, var(--hst-ink));
	outline-offset: 2px;
}

/* ---- Section 3: "Doplň si look" on ink (cards of the shop) ------------------------------------------------------- */
.hst-reskin .hst-pp-look {
	--hst-focus: var(--hst-thread);
	position: relative;
	background: var(--hst-ink);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-look__inner {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: clamp(72px, 7vw, 104px) var(--hst-gutter) clamp(80px, 8vw, 112px);
}

.hst-reskin .hst-pp-look__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 32px;
}

.hst-reskin .hst-pp-look__title {
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-look__link {
	padding: 6px 0;
	color: var(--hst-bone);
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.hst-reskin .hst-pp-look__link:hover {
	color: #fff;
}

.hst-reskin .hst-pp-look .hst-pp-look__grid {
	margin: 40px 0 0;
}

.hst-reskin .hst-pp-look .hst-scard__img {
	background: var(--hst-photo-bg);
}

.hst-reskin .hst-pp-look .hst-scard__name,
.hst-reskin .hst-pp-look .hst-scard__name:hover {
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-look .hst-scard__desc {
	color: var(--hst-on-dark-3);
}

.hst-reskin .hst-pp-look .hst-scard__dot {
	box-shadow: inset 0 0 0 1px rgba(239, 230, 218, 0.35);
}

.hst-reskin .hst-pp-look .hst-pick .hst-pick__toggle {
	border-color: var(--hst-bone);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-look .hst-pick .hst-pick__toggle:hover,
.hst-reskin .hst-pp-look .hst-pick[open] .hst-pick__toggle {
	background: var(--hst-bone);
	color: var(--hst-ink);
}

/* ---- Dialogs: zoom of the gallery and the size chart ----------------------------------------------------------- */
.hst-reskin .hst-pp-zoom {
	--hst-focus: var(--hst-thread);
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 40px 88px;
	border: 0;
	background: rgba(14, 10, 9, 0.95);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-zoom[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hst-reskin .hst-pp-zoom::backdrop {
	background: rgba(14, 10, 9, 0.95);
}

.hst-reskin .hst-pp-zoom__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hst-reskin .hst-pp-zoom__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1.5px solid rgba(239, 230, 218, 0.5);
	border-radius: 50%;
	background: none;
	color: var(--hst-bone);
	box-shadow: none;
	cursor: pointer;
}

.hst-reskin .hst-pp-zoom__btn:hover {
	border-color: var(--hst-bone);
	background: rgba(239, 230, 218, 0.1);
	color: var(--hst-bone);
}

.hst-reskin .hst-pp-zoom__btn--prev {
	left: 20px;
	top: 50%;
	margin-top: -26px;
}

.hst-reskin .hst-pp-zoom__btn--next {
	right: 20px;
	top: 50%;
	margin-top: -26px;
}

.hst-reskin .hst-pp-zoom__btn--close {
	right: 20px;
	top: 20px;
}

.hst-reskin .hst-pp-zoom__count {
	position: absolute;
	left: 24px;
	top: 30px;
	margin: 0;
	color: var(--hst-bone);
	font-size: 14px;
	font-weight: 600;
}

.hst-reskin .hst-pp-chart-dialog {
	box-sizing: border-box;
	width: calc(100% - 48px);
	max-width: 640px;
	max-height: calc(100% - 48px);
	padding: 34px 34px 30px;
	border: 0;
	border-radius: 4px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.hst-reskin .hst-pp-chart-dialog::backdrop {
	background: rgba(14, 10, 9, 0.62);
}

.hst-reskin .hst-pp-chart-dialog::before {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1.5px dashed rgba(184, 149, 79, 0.9);
	border-radius: 2px;
	pointer-events: none;
}

.hst-reskin .hst-pp-chart__title {
	color: var(--hst-ink);
	font-family: var(--hst-serif);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.05;
}

.hst-reskin .hst-pp-chart__intro,
.hst-reskin .hst-pp-chart__outro {
	color: var(--hst-on-light-2);
	font-size: 15px;
	line-height: 1.6;
}

.hst-reskin .hst-pp-chart__intro {
	margin-top: 10px;
}

.hst-reskin .hst-pp-chart__outro {
	margin-top: 18px;
}

.hst-reskin .hst-pp-chart__outro a {
	color: var(--hst-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hst-reskin .hst-pp-chart__scroll {
	overflow-x: auto;
	margin-top: 20px;
}

.hst-reskin .hst-pp-chart__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.hst-reskin .hst-pp-chart__table :is(th, td) {
	padding: 12px;
	border: 0;
	border-bottom: 1px dashed var(--hst-pp-line, rgba(22, 17, 15, 0.3));
	background: none;
	color: var(--hst-ink);
	text-align: left;
	font-weight: 500;
}

.hst-reskin .hst-pp-chart__table thead th {
	padding: 10px 12px;
	border-bottom: 1.5px solid var(--hst-ink);
	font-weight: 700;
}

.hst-reskin .hst-pp-chart__table tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.hst-reskin .hst-pp-chart__table tr.is-on {
	background: var(--hst-pp-tag, #f8f3eb);
}

.hst-reskin .hst-pp-chart__table tr.is-on :is(th, td) {
	font-weight: 700;
}

.hst-reskin .hst-pp-chart__close {
	min-height: 50px;
	margin-top: 20px;
	padding: 0 26px;
	border: 0;
	border-radius: 3px;
	background: var(--hst-ink);
	color: var(--hst-bone);
	box-shadow: none;
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.hst-reskin .hst-pp-chart__close[hidden] {
	display: none;
}

/* ---- Tablet: the gallery with the thumbnails under it -------------------------------------------------------- */
/* Desktop (thumbnails in a column, P09k bod 10): the gallery keeps the height of the photo – the column is not taller,
   its thumbnails scroll (wheel, keyboard focus, the current one is kept in view by reskin-home.js) with a soft fade at
   the edge that has more; the note "Fotku v tejto farbe zatiaľ nemáme" stays at the bottom of the photo. */
@media (min-width: 1200px) {
	.hst-reskin .hst-pp-gal {
		align-items: flex-start;
	}

	.hst-reskin .hst-pp-gal__thumbs {
		align-self: stretch;
		contain: size;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		/* Room for the ring of the current thumbnail (2 + 2 px) inside the scrolled column. */
		padding: 4px;
		margin: -4px;
		width: 84px;
	}

	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar {
		display: none;
	}

	.hst-reskin .hst-pp-gal__thumbs.hst-can-up {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
		mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
	}

	.hst-reskin .hst-pp-gal__thumbs.hst-can-down {
		-webkit-mask-image: linear-gradient(to top, transparent 0, #000 40px);
		mask-image: linear-gradient(to top, transparent 0, #000 40px);
	}

	.hst-reskin .hst-pp-gal__thumbs.hst-can-up.hst-can-down {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.hst-reskin .hst-pp-gal {
		flex: 1 1 340px;
		flex-direction: column;
	}

	.hst-reskin .hst-pp-gal__thumbs {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
		width: auto;
		/* Room for the scrollbar under the thumbnails (P09l bod 3). */
		margin-bottom: -10px;
		padding: 4px 4px 14px;
		scrollbar-width: thin;
		scrollbar-color: #8f7f71 transparent;
	}

	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar {
		height: 6px;
	}

	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar-track {
		background: transparent;
	}

	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: #8f7f71;
	}

	.hst-reskin .hst-pp-gal__thumbs li {
		flex: none;
	}

	.hst-reskin .hst-pp-gal__thumb {
		width: 56px;
		height: 70px;
	}

	.hst-reskin .hst-pp-panel {
		flex: 1 1 320px;
	}
}

/* Narrow tablets: the hardware tiles are ~140 px – the price goes below the name as on a phone. */
@media (min-width: 768px) and (max-width: 959px) {
	.hst-reskin .hst-pp-metal {
		display: grid;
		grid-template-columns: 22px minmax(0, 1fr);
		align-items: center;
		gap: 2px 10px;
		padding: 8px 10px;
	}

	.hst-reskin .hst-pp-metal__ring {
		grid-row: 1 / 3;
		width: 22px;
		height: 22px;
	}

	.hst-reskin .hst-pp-metal__price {
		grid-column: 2;
		margin-left: 0;
		font-size: 12px;
	}
}

/* ---- Phones -------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hst-reskin .hst-pp-buy__inner {
		padding: 14px 0 56px;
	}

	.hst-reskin .hst-pp-buy .woocommerce-notices-wrapper,
	.hst-reskin .hst-pp-crumbs {
		padding: 0 20px;
	}

	.hst-reskin .hst-pp-crumbs .hst-crumbs ol {
		gap: 8px; /* two lines (HS001): 24 px touch spacing between the rows */
		font-size: 13px;
		line-height: 1.5;
	}

	/* The name is the H1 right under the photo: without the last item. */
	.hst-reskin .hst-pp-crumbs li[aria-current],
	.hst-reskin .hst-pp-crumbs li:nth-last-child(2) {
		display: none;
	}

	.hst-reskin .hst-pp-buy__grid {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		margin-top: 12px;
	}

	.hst-reskin .hst-pp-gal {
		position: static;
		flex: none;
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.hst-reskin .hst-pp-gal__frame {
		border-radius: 0;
	}

	.hst-reskin .hst-pp-gal__thumbs {
		order: 2;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		width: auto;
		margin-top: 10px;
		margin-bottom: -10px;
		padding: 4px 20px 14px;
		scrollbar-width: thin;
		scrollbar-color: #8f7f71 transparent;
	}

	/* Safari (no scrollbar-color): a thin thumb, 3.1 : 1 on bone (phones and tablets, P09l bod 3). */
	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar {
		height: 6px;
	}

	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar-track {
		background: transparent;
	}

	.hst-reskin .hst-pp-gal__thumbs::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: #8f7f71;
	}

	.hst-reskin .hst-pp-gal__thumbs li {
		flex: none;
	}

	.hst-reskin .hst-pp-gal__thumb {
		width: 56px;
		height: 70px;
	}

	.hst-reskin .hst-pp-gal__count {
		left: 14px;
		top: 14px;
		padding: 3px 11px;
		font-size: 12px;
	}

	.hst-reskin .hst-pp-gal__zoom {
		right: 10px;
		top: 10px;
	}

	.hst-reskin .hst-pp-gal__arrow {
		width: 44px;
		height: 44px;
		margin-top: -22px;
	}

	.hst-reskin .hst-pp-gal__arrow--prev {
		left: 10px;
	}

	.hst-reskin .hst-pp-gal__arrow--next {
		right: 10px;
	}

	.hst-reskin .hst-pp-gal__nophoto {
		left: 12px;
		bottom: 12px;
		gap: 10px;
		max-width: calc(100% - 24px);
		padding: 6px 14px 6px 6px;
		font-size: 13px;
	}

	.hst-reskin .hst-pp-gal__nophoto-swatch {
		width: 34px;
		height: 34px;
	}

	.hst-reskin .hst-pp-gal__nophoto-long {
		display: none;
	}

	.hst-reskin .hst-pp-gal__nophoto-short {
		display: inline;
	}

	/* The panel's parts become items of the column: the sticky bar comes between the summary and the trust rows. */
	.hst-reskin .hst-pp-panel {
		display: contents;
	}

	.hst-reskin .hst-pp-head {
		padding: 22px 20px 0;
	}

	.hst-reskin .hst-pp-form {
		gap: 26px;
		margin-top: 26px;
		padding: 0 20px;
	}

	.hst-reskin .hst-pp-bar {
		order: 1;
	}

	.hst-reskin .hst-pp-trust {
		order: 2;
		gap: 10px;
		margin-top: 22px;
		padding: 0 20px;
		font-size: 13px;
	}

	.hst-reskin .hst-pp-title {
		font-size: 40px;
		line-height: 1;
	}

	.hst-reskin .hst-pp-sub {
		margin-top: 8px;
		font-size: 15px;
	}

	.hst-reskin .hst-pp-price {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-top: 14px;
	}

	.hst-reskin .hst-pp-price__value {
		font-size: 32px;
	}

	.hst-reskin .hst-pp-price__note {
		font-size: 13px;
	}

	.hst-reskin .hst-pp-short {
		margin-top: 14px;
		font-size: 15px;
		line-height: 1.65;
	}

	.hst-reskin .hst-pp-opt {
		gap: 10px;
	}

	.hst-reskin .hst-pp-opt > legend.hst-pp-opt__label {
		margin-bottom: 10px;
	}

	.hst-reskin .hst-pp-opt__label {
		font-size: 14px;
	}

	.hst-reskin .hst-pp-swatch {
		width: 44px;
		height: 44px;
	}

	.hst-reskin .hst-pp-swatches {
		gap: 6px;
	}

	.hst-reskin .hst-pp-params li {
		gap: 10px;
		font-size: 14px;
	}

	.hst-reskin .hst-pp-params__link {
		margin-left: 29px;
		padding: 8px 0;
		font-size: 14px;
	}

	.hst-reskin .hst-pp-sizes {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hst-reskin .hst-pp-size {
		min-height: 50px;
	}

	.hst-reskin .hst-pp-metals {
		gap: 8px;
	}

	.hst-reskin .hst-pp-metal {
		display: grid;
		grid-template-columns: 22px minmax(0, 1fr);
		align-items: center;
		gap: 0 10px;
		min-height: 58px;
		padding: 8px 10px;
	}

	.hst-reskin .hst-pp-metal__ring {
		grid-row: 1 / 3;
		width: 22px;
		height: 22px;
	}

	.hst-reskin .hst-pp-metal__name {
		font-size: 14px;
	}

	.hst-reskin .hst-pp-metal__sub {
		display: none;
	}

	.hst-reskin .hst-pp-metal__price {
		grid-column: 2;
		font-size: 12px;
	}

	.hst-reskin .hst-pp-tile__media,
	.hst-reskin .hst-pp-tile--wide .hst-pp-tile__media {
		width: 104px;
	}

	.hst-reskin .hst-pp-tile__body {
		padding: 12px 14px;
	}

	.hst-reskin .hst-pp-sum {
		display: flex;
		flex-direction: column;
		padding: 22px 20px 20px;
		box-shadow: 0 18px 36px -24px rgba(22, 17, 15, 0.55);
	}

	.hst-reskin .hst-pp-sum::before {
		inset: 6px;
	}

	.hst-reskin .hst-pp-sum__hole {
		right: 18px;
		top: 18px;
		width: 12px;
		height: 12px;
	}

	.hst-reskin .hst-pp-sum__title {
		font-size: 24px;
	}

	.hst-reskin .hst-pp-sum__lines {
		gap: 10px;
		margin-top: 14px;
	}

	.hst-reskin .hst-pp-sum__line {
		gap: 1px 12px;
	}

	.hst-reskin .hst-pp-sum__name,
	.hst-reskin .hst-pp-sum__price {
		font-size: 15px;
	}

	.hst-reskin .hst-pp-sum__detail {
		font-size: 13px;
	}

	/* Quantity and "Spolu" in one row, the status under it; the button is in the sticky bar. */
	.hst-reskin .hst-pp-sum__total,
	.hst-reskin .hst-pp-submit {
		display: none;
	}

	.hst-reskin .hst-pp-sum__actions {
		order: 3;
		align-items: center;
		justify-content: space-between;
		margin-top: 14px;
		padding-top: 12px;
		border-top: 1px dashed var(--hst-pp-line);
	}

	.hst-reskin .hst-pp-sum__mtotal {
		display: block;
		text-align: right;
	}

	.hst-reskin .hst-pp-sum__mtotal span:first-child {
		display: block;
		font-size: 13px;
		font-weight: 700;
	}

	.hst-reskin .hst-pp-sum__mtotal span:last-child {
		font-family: var(--hst-serif);
		font-size: 32px;
		font-weight: 600;
		line-height: 1;
	}

	.hst-reskin .hst-pp-sum__nojs {
		order: 4;
	}

	.hst-reskin .hst-pp-sum__status {
		order: 5;
		gap: 9px;
		margin-top: 12px;
	}

	.hst-reskin .hst-pp-sum__status-text {
		font-size: 14px;
	}

	.hst-reskin .hst-pp-sum__custom {
		order: 6;
	}

	.hst-reskin .hst-pp-done {
		order: 7;
	}

	.hst-reskin .hst-pp-error--form {
		order: 8;
	}

	.hst-reskin .hst-pp-qty {
		width: 126px;
	}

	.hst-reskin .hst-pp-qty__btn,
	.hst-reskin .hst-pp-qty__input {
		height: 46px;
	}

	.hst-reskin .hst-pp-qty__input {
		font-size: 16px;
	}

	/* A focused field scrolls above the sticky bar, not under it. */
	html:has(body.hst-product-page) {
		scroll-padding-bottom: 96px;
	}

	/* Sticky bar "Spolu + Pridať do košíka" – stays at the bottom while the choice is on the screen. */
	.hst-reskin .hst-pp-bar {
		position: sticky;
		bottom: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 14px;
		margin-top: 18px;
		padding: 12px 20px;
		background: var(--hst-ink);
		color: var(--hst-bone);
		--hst-focus: var(--hst-thread);
	}

	.hst-reskin .hst-pp-bar::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 4px;
		border-top: 1.5px dashed rgba(184, 149, 79, 0.75);
	}

	.hst-reskin .hst-pp-bar__total {
		display: flex;
		flex: none;
		flex-direction: column;
		line-height: 1.1;
	}

	.hst-reskin .hst-pp-bar__total span:first-child {
		color: var(--hst-on-dark-3);
		font-size: 12px;
	}

	.hst-reskin .hst-pp-bar__total span:last-child {
		font-family: var(--hst-serif);
		font-size: 24px;
		font-weight: 600;
	}

	.hst-reskin .hst-pp-bar__submit {
		min-height: 52px;
		font-size: 16px;
	}

	.hst-reskin .hst-pp-about__inner {
		gap: 48px;
		padding: 52px 20px 60px;
	}

	.hst-reskin .hst-pp-about::before {
		top: -1px;
	}

	.hst-reskin .hst-pp-about__title {
		font-size: 36px;
		line-height: 1.02;
	}

	.hst-reskin .hst-pp-desc h3 {
		margin-top: 26px;
		font-size: 17px;
	}

	.hst-reskin .hst-pp-desc :is(p, ul, ol) {
		margin-top: 8px;
		font-size: 15px;
		line-height: 1.7;
	}

	.hst-reskin .hst-pp-specs {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 32px;
	}

	.hst-reskin .hst-pp-specs dt {
		padding: 12px 0 2px;
		border-bottom: 0;
	}

	.hst-reskin .hst-pp-specs dd {
		padding: 0 0 12px;
	}

	.hst-reskin .hst-pp-good__title {
		font-size: 26px;
	}

	.hst-reskin .hst-pp-acc__head {
		min-height: 56px;
	}

	.hst-reskin .hst-pp-acc__body {
		padding-right: 0;
	}

	.hst-reskin .hst-pp-look__inner {
		padding: 56px 20px 64px;
	}

	.hst-reskin .hst-pp-look__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.hst-reskin .hst-pp-look__title {
		font-size: 34px;
	}

	.hst-reskin .hst-pp-look .hst-pp-look__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 14px;
		margin-top: 28px;
	}

	.hst-reskin .hst-pp-zoom {
		padding: 72px 12px;
	}

	.hst-reskin .hst-pp-zoom__btn--prev,
	.hst-reskin .hst-pp-zoom__btn--next {
		top: auto;
		bottom: 14px;
		margin-top: 0;
	}

	/* Size chart: bottom sheet with a handle. */
	.hst-reskin .hst-pp-chart-dialog {
		width: 100%;
		max-width: none;
		max-height: 88vh;
		margin: auto 0 0;
		padding: 30px 20px 24px;
		border-radius: 12px 12px 0 0;
	}

	.hst-reskin .hst-pp-chart-dialog::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 12px;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: rgba(22, 17, 15, 0.25);
	}

	.hst-reskin .hst-pp-chart__title {
		font-size: 28px;
	}

	/* Five columns in 350 px: numbers on one line, the headings may wrap. */
	.hst-reskin .hst-pp-chart__table {
		font-size: 14px;
	}

	.hst-reskin .hst-pp-chart__table :is(th, td) {
		padding: 11px 6px;
	}

	.hst-reskin .hst-pp-chart__table td {
		white-space: nowrap;
	}

	.hst-reskin .hst-pp-chart__table thead th {
		padding: 8px 6px;
		font-size: 13px;
		vertical-align: bottom;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-reskin .hst-pp-acc__head .hst-pp-ico {
		transition: none;
	}
}

/* ==== Pages of the newsletter (P09j, design/cookie-newsletter/README.md §2, includes/reskin-newsletter.php) ==========
   The oxblood leather tag of the newsletter of the home page (.hst-tag with its eyelet and stitch above) on a bone
   section; inside the H1 = the title of MailPoet, the lead, the content of MailPoet and the buttons of the state. */
.hst-reskin .hst-nl__sec {
	position: relative;
	padding: clamp(56px, 7vw, 104px) var(--hst-gutter) clamp(80px, 8vw, 120px);
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-nl__inner {
	max-width: 780px;
	margin: 0 auto;
}

.hst-reskin .hst-nl .hst-nl__tag {
	padding: clamp(40px, 4vw, 56px) clamp(32px, 4vw, 56px) clamp(40px, 4vw, 56px) clamp(72px, 6vw, 96px);
}

.hst-reskin .hst-nl__body {
	position: relative;
}

.hst-reskin .hst-nl .hst-nl__title {
	margin: 0;
	color: var(--hst-bone);
	font-family: var(--hst-serif);
	font-size: clamp(38px, 3.8vw, 54px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.hst-reskin .hst-nl :is(.hst-nl-lead, .hst-nl__content p, .hst-nl__content) {
	max-width: 32em;
	color: var(--hst-on-oxblood);
	font-size: 17px;
	line-height: 1.65;
}

.hst-reskin .hst-nl .hst-nl-lead,
.hst-reskin .hst-nl .hst-nl__content {
	margin: 14px 0 0;
}

.hst-reskin .hst-nl .hst-nl__content p {
	margin: 0;
}

.hst-reskin .hst-nl .hst-nl__content > p:empty {
	display: none;
}

.hst-reskin .hst-nl :is(.hst-nl-lead, .hst-nl__content) strong {
	color: var(--hst-bone);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hst-reskin .hst-nl a:not(.hst-nl-btn) {
	color: var(--hst-bone);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Buttons: bone 52 px, outlined, a text link. */
.hst-reskin .hst-nl .hst-nl-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	margin-top: 26px;
}

.hst-reskin .hst-nl .hst-nl-actions--after {
	margin-top: 18px;
}

.hst-reskin .hst-nl .hst-nl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 52px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: var(--hst-radius);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.hst-reskin .hst-nl .hst-nl-btn--bone {
	background: var(--hst-bone);
	color: var(--hst-ink);
}

.hst-reskin .hst-nl .hst-nl-btn--bone:hover {
	background: #ffffff;
	color: var(--hst-ink);
}

.hst-reskin .hst-nl .hst-nl-btn--line {
	padding: 0 24px;
	border: 1.5px solid rgba(239, 230, 218, 0.7);
	background: none;
	color: var(--hst-bone);
	font-weight: 600;
}

.hst-reskin .hst-nl .hst-nl-btn--line:hover {
	border-color: var(--hst-bone);
	color: #ffffff;
}

.hst-reskin .hst-nl .hst-nl-btn svg {
	flex: none;
}

.hst-reskin .hst-nl .hst-nl-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hst-reskin .hst-nl .hst-nl-link:hover {
	color: #ffffff;
}

/* Unsubscribed: "Odhlásenie omylom?" bold, then "Prihlásiť sa znova" (the link of MailPoet) and "Na úvod". */
.hst-reskin .hst-nl--unsubscribed .hst-nl__content {
	margin-top: 22px;
}

.hst-reskin .hst-nl .mailpoet_unsubscribed_content {
	color: var(--hst-bone);
	font-size: 16px;
	font-weight: 700;
}

.hst-reskin .hst-nl .mailpoet_unsubscribed_content strong {
	display: block;
	font-weight: inherit;
}

.hst-reskin .hst-nl .mailpoet_unsubscribed_content .hst-nl-actions {
	margin-top: 10px;
}

/* Forms of MailPoet inside the content (the survey after unsubscribing from a newsletter e-mail, the captcha). */
.hst-reskin .hst-nl .hst-nl__content :is(form, fieldset) {
	margin: 0;
	padding: 0;
	border: 0;
}

.hst-reskin .hst-nl .hst-nl__content form:not(.mailpoet-manage-subscription, .hst-nl-form) {
	margin-top: 24px;
}

.hst-reskin .hst-nl .hst-nl__content :is(input[type="submit"], button[type="submit"]):not(.hst-nl-btn) {
	min-height: 52px;
	margin-top: 16px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--hst-radius);
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	cursor: pointer;
}

/* The survey of MailPoet after unsubscribing (reasons as radios). */
.hst-reskin .hst-nl .mailpoet-unsubscribe-reason legend {
	margin: 0 0 6px;
	padding: 0;
	color: var(--hst-bone);
	font-size: 16px;
	font-weight: 700;
}

.hst-reskin .hst-nl .mailpoet-unsubscribe-reason p {
	margin: 0;
}

.hst-reskin .hst-nl .mailpoet-unsubscribe-reason label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	color: var(--hst-bone);
	font-size: 15px;
	cursor: pointer;
}

.hst-reskin .hst-nl .mailpoet-unsubscribe-reason input[type="radio"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--hst-bone);
}

.hst-reskin .hst-nl .mailpoet-unsubscribe-reason textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 12px 16px;
	border: 1.5px solid rgba(239, 230, 218, 0.7);
	border-radius: var(--hst-radius);
	background: rgba(22, 17, 15, 0.25);
	color: var(--hst-bone);
	font-family: var(--hst-sans);
	font-size: 16px;
}

/* ---- Management of the subscription: the form of MailPoet in the style of the fields of the tag on the home page -- */
.hst-reskin .hst-nl .mailpoet-manage-subscription {
	display: grid;
	gap: 16px;
	max-width: 520px;
	margin: 24px 0 0;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription > br,
.hst-reskin .hst-nl .mailpoet-manage-subscription .hst-nl-hidden,
.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet_form_loading {
	display: none;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet_paragraph {
	max-width: none;
	margin: 0;
	color: var(--hst-on-oxblood);
	font-size: 15px;
	line-height: 1.5;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet_paragraph > label:not(.hst-nl-check),
.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet_text_label {
	display: block;
	margin: 0;
	color: var(--hst-bone);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription .hst-nl-optional {
	color: var(--hst-on-oxblood);
	font-weight: 500;
}

/* The e-mail: MailPoet shows it as text (it is not changed there – its note says how) – the look of a read-only field. */
.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet_paragraph > label strong {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 52px;
	margin-top: 6px;
	padding: 0 16px;
	border: 1.5px solid rgba(239, 230, 218, 0.35);
	border-radius: var(--hst-radius);
	background: rgba(22, 17, 15, 0.25);
	color: var(--hst-bone);
	font-size: 16px;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet_paragraph > label br {
	display: none;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription .mailpoet-change-email-info {
	display: block;
	margin-top: 6px;
	color: var(--hst-on-oxblood);
	font-size: 13px;
	line-height: 1.5;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription input.mailpoet_text,
.hst-reskin .hst-nl .mailpoet-manage-subscription select.mailpoet_select {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 6px 0 0;
	padding: 0 16px;
	border: 1.5px solid rgba(239, 230, 218, 0.7);
	border-radius: var(--hst-radius);
	background: rgba(22, 17, 15, 0.25);
	color: var(--hst-bone);
	font-family: var(--hst-sans);
	font-size: 16px;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription select.mailpoet_select option {
	color: var(--hst-ink);
}

.hst-reskin .hst-nl .mailpoet-manage-subscription :is(input.mailpoet_text, select.mailpoet_select):focus-visible {
	outline: 2px solid var(--hst-thread);
	outline-offset: 2px;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription .parsley-errors-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	color: var(--hst-bone);
	font-size: 14px;
}

/* "Chcem dostávať novinky z dielne": the native checkbox over a 24 px box (bone, an ink tick when on). */
.hst-reskin .hst-nl .mailpoet-manage-subscription .hst-nl-check,
.hst-reskin .hst-nl .hst-nl-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--hst-bone);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.hst-reskin .hst-nl .hst-nl-check input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	height: 24px;
	margin: -12px 0 0;
	opacity: 0;
	cursor: pointer;
}

.hst-reskin .hst-nl .hst-nl-check__box {
	position: relative;
	flex: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--hst-bone);
	border-radius: var(--hst-radius);
}

.hst-reskin .hst-nl .hst-nl-check input:checked + .hst-nl-check__box {
	background: var(--hst-bone);
}

.hst-reskin .hst-nl .hst-nl-check input:checked + .hst-nl-check__box::after {
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--hst-ink);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
	content: "";
}

.hst-reskin .hst-nl .hst-nl-check input:focus-visible + .hst-nl-check__box {
	outline: 2px solid var(--hst-thread);
	outline-offset: 3px;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription input.mailpoet_submit {
	justify-self: start;
	min-height: 52px;
	margin: 4px 0 0;
	padding: 0 26px;
	border: 0 !important;
	border-radius: var(--hst-radius);
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 16px;
	font-weight: 700;
	font-stretch: var(--hst-narrow);
	cursor: pointer;
}

.hst-reskin .hst-nl .mailpoet-manage-subscription input.mailpoet_submit:hover {
	background: #ffffff;
}

/* Saved / not saved: a notice under the H1. */
.hst-reskin .hst-nl .mailpoet-manage-subscription :is(.mailpoet-submit-success, .mailpoet-submit-error) {
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--hst-thread);
	background: rgba(22, 17, 15, 0.25);
	color: var(--hst-bone);
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 767px) {
	.hst-reskin .hst-nl .hst-nl__tag {
		padding: 36px 24px 36px 56px;
		clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
	}

	.hst-reskin .hst-nl .hst-tag__eyelet {
		left: 14px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
	}

	.hst-reskin .hst-nl .hst-tag__stitch {
		left: 40px;
	}

	.hst-reskin .hst-nl .hst-nl__title {
		font-size: 36px;
	}

	.hst-reskin .hst-nl :is(.hst-nl-lead, .hst-nl__content p, .hst-nl__content) {
		font-size: 16px;
	}
}

/* ==== P10i – text of a category under the pieces (includes/seo-sk.php, design/seo-sk/README.md §3 – §5) ==========
   Bone like the pieces above, a dashed seam between them; one readable column (as hst-doc) and the questions as
   <details> next to it on wide screens, under it on phones and tablets. */
.hst-reskin .hst-cat-text {
	--hst-focus: var(--hst-ink);
	background: var(--hst-bone);
	color: var(--hst-on-light-2);
	font-family: var(--hst-sans);
	font-size: 17px;
	line-height: 1.7;
}

.hst-reskin .hst-cat-text__inner {
	box-sizing: border-box;
	max-width: var(--hst-content);
	margin: 0 auto;
	padding: 0 var(--hst-gutter) clamp(72px, 7vw, 104px);
}

.hst-reskin .hst-cat-text__inner::before {
	content: "";
	display: block;
	margin-bottom: clamp(44px, 5vw, 64px);
	border-top: 1px dashed rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-cat-text--faq .hst-cat-text__inner {
	display: grid;
	grid-template-columns: minmax(0, 46rem) minmax(300px, 420px);
	justify-content: space-between;
	column-gap: clamp(40px, 5vw, 88px);
	align-items: start;
}

.hst-reskin .hst-cat-text--faq .hst-cat-text__inner::before,
.hst-reskin .hst-cat-text__draft {
	grid-column: 1 / -1;
}

.hst-reskin .hst-cat-text__body {
	max-width: 46rem;
}

.hst-reskin .hst-cat-text :is(p, ul, ol) {
	margin: 0 0 1.1em;
}

.hst-reskin .hst-cat-text :is(h2, h3) {
	color: var(--hst-ink);
	letter-spacing: normal;
	text-transform: none;
}

.hst-reskin .hst-cat-text h2 {
	margin: 0 0 0.6em;
	font-family: var(--hst-serif);
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 600;
	line-height: 1.12;
}

.hst-reskin .hst-cat-text h3 {
	margin: 1.6em 0 0.45em;
	font-family: var(--hst-sans);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.hst-reskin .hst-cat-text :is(ul, ol) {
	padding-left: 1.3em;
}

.hst-reskin .hst-cat-text li {
	margin: 0 0 0.35em;
}

.hst-reskin .hst-cat-text li::marker {
	color: var(--hst-oxblood);
}

.hst-reskin .hst-cat-text strong {
	color: var(--hst-ink);
}

.hst-reskin .hst-cat-text a {
	color: var(--hst-oxblood);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.hst-reskin .hst-cat-text a:hover {
	color: var(--hst-ink);
}

.hst-reskin .hst-cat-text a:focus-visible,
.hst-reskin .hst-cat-text .hst-faq__q:focus-visible {
	outline: 2px solid var(--hst-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Questions. */
.hst-reskin .hst-cat-text .hst-cat-text__faq-title {
	margin: 0 0 14px;
	font-family: var(--hst-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
}

.hst-reskin .hst-cat-text .hst-faq {
	border-bottom: 1px solid rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-cat-text .hst-cat-text__faq-title + .hst-faq {
	border-top: 1px solid rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-cat-text .hst-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 10px 0;
	box-sizing: border-box;
	color: var(--hst-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.hst-reskin .hst-cat-text .hst-faq__q::-webkit-details-marker {
	display: none;
}

.hst-reskin .hst-cat-text .hst-faq__q::marker {
	content: "";
}

.hst-reskin .hst-cat-text .hst-faq__icon {
	flex: none;
	transition: transform 0.2s ease;
}

.hst-reskin .hst-cat-text .hst-faq[open] .hst-faq__icon {
	transform: rotate(45deg);
}

.hst-reskin .hst-cat-text .hst-faq__a {
	padding: 0 36px 18px 0;
	font-size: 16px;
	line-height: 1.65;
}

.hst-reskin .hst-cat-text .hst-faq__a p {
	margin: 0;
}

/* Draft (only an administrator sees it). */
.hst-reskin .hst-cat-text__draft {
	margin: 0 0 28px;
	padding: 10px 14px;
	border: 1px dashed var(--hst-oxblood);
	color: var(--hst-oxblood);
	font-size: 14px;
	line-height: 1.4;
}

@media (max-width: 1023px) {
	.hst-reskin .hst-cat-text--faq .hst-cat-text__inner {
		display: block;
	}

	.hst-reskin .hst-cat-text__faq {
		max-width: 46rem;
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.hst-reskin .hst-cat-text {
		font-size: 16px;
	}

	.hst-reskin .hst-cat-text .hst-cat-text__faq-title {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hst-reskin .hst-cat-text .hst-faq__icon {
		transition: none;
	}
}

/* ---- P10k: cards of pieces in the text of a post (block hst/product-pick), questions at the end of a post, the
   extended return over Christmas in "Dobré vedieť". ---------------------------------------------------------------- */
:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 18px 0 30px;
	padding: 0;
	list-style: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick > li {
	margin: 0;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick .hst-plink__link {
	color: var(--hst-ink);
	text-decoration: none;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick .hst-plink__name {
	padding-top: 10px;
	color: var(--hst-ink);
	font-family: var(--hst-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick .hst-plink__desc {
	color: var(--hst-on-light);
	font-size: 14px;
}

:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick .hst-price-tag {
	font-size: 16px !important;
}

@media (max-width: 767px) {
	:is(.hst-reskin, .editor-styles-wrapper) .hst-doc .hst-plinks--pick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

.hst-reskin .hst-post-faq {
	margin: 8px 0 0;
}

.hst-reskin .hst-post-faq .hst-faq {
	border-bottom: 1px solid rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-post-faq .hst-faq:first-child {
	border-top: 1px solid rgba(22, 17, 15, 0.35);
}

.hst-reskin .hst-post-faq .hst-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 10px 0;
	box-sizing: border-box;
	color: var(--hst-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.hst-reskin .hst-post-faq .hst-faq__q::-webkit-details-marker {
	display: none;
}

.hst-reskin .hst-post-faq .hst-faq__q::marker {
	content: "";
}

.hst-reskin .hst-post-faq .hst-faq__icon {
	flex: none;
	transition: transform 0.2s ease;
}

.hst-reskin .hst-post-faq .hst-faq[open] .hst-faq__icon {
	transform: rotate(45deg);
}

.hst-reskin .hst-post-faq .hst-faq__a {
	padding: 0 36px 18px 0;
}

.hst-reskin .hst-post-faq .hst-faq__a p {
	margin: 0;
}

/* Gift voucher on cards: the whole (landscape) voucher on the dark background of the card, not a crop. */
.hst-reskin :is(.hst-scard__img, .hst-plink__photo):has(.hst-gv-fit) {
	background: #16110f;
}

.hst-reskin img.hst-gv-fit {
	object-fit: contain;
	object-position: 50% 50%;
}

.hst-reskin .hst-pp-xmas {
	margin-top: 10px;
	padding-left: 12px;
	border-left: 3px solid var(--hst-thread);
	font-weight: 600;
}

/* ---- P10l: reviews – the sentence about checking, the thanks, the Instagram badge, small stars on the cards ---------- */
.hst-reskin .hst-pp-reviews__trust {
	margin: 0 0 16px;
	padding-left: 12px;
	border-left: 3px solid var(--hst-thread);
	color: var(--hst-on-light-2);
	font-size: 14px;
	line-height: 1.55;
}

.hst-reskin .hst-pp-reviews__form {
	scroll-margin-top: calc(var(--hst-header-h, 76px) + 16px);
}

.hst-reskin .hst-pp-reviews__done {
	margin: 16px 0 4px;
	padding: 12px 14px;
	border: 1.5px solid var(--hst-ink);
	border-radius: 4px;
	background: var(--hst-bone);
	color: var(--hst-ink);
	font-weight: 600;
}

.hst-reskin .hst-pp-reviews .hst-review-ig {
	white-space: nowrap;
}

.hst-reskin .hst-scard__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	color: var(--hst-on-light);
	font-size: 13px;
	line-height: 1.3;
}

.hst-reskin .hst-stars {
	position: relative;
	display: inline-block;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
	background: linear-gradient(90deg, var(--hst-oxblood) var(--hst-r, 0%), rgba(22, 17, 15, 0.22) var(--hst-r, 0%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hst-reskin .hst-stars::before {
	content: "★★★★★";
}

/* Size chart: "Kupuješ darček a nevieš veľkosť? Daruj poukážku." (P10m) */
.hst-reskin .hst-pp-chart__gift {
	margin: 10px 0 0;
	color: var(--hst-on-light-2);
	font-size: 14px;
	line-height: 1.55;
}

.hst-reskin .hst-pp-chart__gift a {
	color: var(--hst-oxblood);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}