/* Kofaya Fitting: price block and start button on a configurable product page. Scoped to kf- classes. */

/*
 * Both carry every text in German and in English; the page's language picks one.
 * Google Translate sets <html lang="de"> when it translates the English site, so a
 * German visitor reads the German spans (translate="no") instead of Google's words.
 * !important: the theme's Additional CSS restyles spans and buttons with it.
 */
html[lang|="de"] .kf-l-en,
html:not([lang|="de"]) .kf-l-de {
	display: none !important;
}

.kf-pricing {
	--kf-teal: #07718b;
	--kf-terracotta: #c16433;
	--kf-cream: #f7f3ec;
	--kf-gold-tint: #f3e3c0;
	margin: 0 0 1.25em;
	padding: 1em 1.25em 0.85em;
	background: var(--kf-cream);
	border: 1px solid var(--kf-gold-tint);
	border-radius: 8px;
}

.kf-pricing .kf-pricing__title {
	margin: 0 0 0.35em;
	padding: 0;
	font-size: 1.05em;
	line-height: 1.3;
	color: var(--kf-teal);
}

.kf-pricing .kf-pricing__tiers {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kf-pricing .kf-pricing__tier {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1em;
	align-items: baseline;
	margin: 0;
	padding: 0.55em 0;
	border-top: 1px solid var(--kf-gold-tint);
}

.kf-pricing .kf-pricing__tier:first-child {
	border-top: 0;
}

.kf-pricing__name {
	grid-column: 1;
	font-weight: 700;
	color: var(--kf-teal);
}

.kf-pricing__line {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.85;
}

.kf-pricing__price {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-weight: 700;
	color: var(--kf-terracotta);
	white-space: nowrap;
}

.kf-pricing__price .amount {
	color: inherit;
}

.kf-pricing__price--none {
	font-weight: 400;
	font-style: italic;
	color: inherit;
	opacity: 0.75;
}

.kf-pricing .kf-pricing__legal {
	margin: 0.35em 0 0;
	font-size: 0.85em;
	line-height: 1.5;
}

.kf-pricing .kf-pricing__more {
	margin: 0.35em 0 0;
	padding: 0.55em 0 0;
	border-top: 1px solid var(--kf-gold-tint);
}

.kf-pricing__more summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--kf-teal);
}

.kf-pricing__more summary:focus-visible {
	outline: 2px solid var(--kf-teal);
	outline-offset: 2px;
}

.kf-pricing .kf-pricing__more p {
	margin: 0.5em 0 0.2em;
	font-size: 0.9em;
	line-height: 1.55;
}

.kf-start {
	margin: 0 0 1.5em;
}

/* The theme's button, in terracotta. */
.kf-start .button.kf-start-design,
.kf-start button.button.alt.kf-start-design {
	background-color: #c16433;
	border-color: #c16433;
	color: #fff;
}

.kf-start .button.kf-start-design:hover,
.kf-start .button.kf-start-design:focus,
.kf-start button.button.alt.kf-start-design:hover,
.kf-start button.button.alt.kf-start-design:focus {
	background-color: #a9562a;
	border-color: #a9562a;
	color: #fff;
}

.kf-start .button.kf-start-design:focus-visible {
	outline: 2px solid #07718b;
	outline-offset: 2px;
}