/* ===============================================================
   KLEURASSISTENT
   Wat de technische fiche van de fabrikant zegt, met het citaat erbij.

   Alles hier leunt op de variabelen van het thema. Geen eigen kleuren en geen
   eigen lettertypen: de eerste versie had die wel en stak daardoor af tegen de
   rest van de winkel. Een instrument dat er anders uitziet dan de winkel eromheen
   leest als iets dat er per ongeluk bij staat.

   De vormtaal is die van de tintvinder ernaast: mono-blokletters als label,
   Syne voor de koppen, hoeken van 2px, koper als enige accent.
   =============================================================== */

.hs-ka {
	max-width: 860px;
	margin: 0 auto;
	text-align: left;
}

.hs-ka__kop {
	border-bottom: 1px solid var(--line);
	padding-bottom: 14px;
	margin-bottom: 20px;
}

.hs-ka__kop strong {
	display: block;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--copper-ink);
	font-weight: 500;
	margin-bottom: 6px;
}

.hs-ka__kop span {
	display: block;
	color: var(--muted);
	font-size: .92rem;
}

/* ------------------------------------------------------------- de keuze */

.hs-ka__keuze {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.hs-ka__keuze label {
	flex: 1 1 320px;
	margin: 0;
}

.hs-ka__keuze label span {
	display: block;
	margin-bottom: 5px;
}

.hs-ka__keuze select {
	width: 100%;
	margin: 0;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--card);
	padding: 0 34px 0 12px;
	font-size: .88rem;
}

.hs-ka__keuze .button {
	margin: 0;
	height: 42px;
	line-height: 40px;
}

/* ------------------------------------------------------------- de lijn */

.hs-ka__lijn {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin: 30px 0 4px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.hs-ka__lijn h3 {
	margin: 0;
	font-size: 1.35rem;
	letter-spacing: -.02em;
}

.hs-ka__winkel.button.is-link {
	margin: 0;
	font-size: .72rem;
}

/* ------------------------------------------------------------- de regels */

.hs-ka__blok {
	margin: 26px 0;
}

.hs-ka__blok h4 {
	margin: 0 0 10px;
	/* De opmaak komt van .hs-label; hier alleen de ruimte eromheen. */
}

.hs-ka__regel {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 2px solid var(--copper-dim);
	border-radius: 2px;
	padding: 14px 16px;
	margin: 10px 0;
	transition: border-color var(--tick);
}

.hs-ka__regel:hover {
	border-left-color: var(--copper);
}

/* De voorwaarde is het belangrijkste dat de vorige versie miste: Koleston staat
   op 1:1 behalve de special blondes, en zonder dit label lees je de helft fout. */
.hs-ka__wanneer {
	display: inline-block;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--copper-ink);
	background: rgba(192, 139, 74, .1);
	border-radius: 2px;
	padding: 3px 7px;
	margin-bottom: 7px;
}

/* Mengverhoudingen, volumes en tijden zijn cijfers. Die lijnen uit, net als de
   prijzen en de tintcodes elders in de winkel. */
.hs-ka__waarde {
	margin: 2px 0 8px;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: .98rem;
	color: var(--text);
}

.hs-ka__citaat {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--muted);
	font-style: normal;
}

/* De aanhalingstekens om de zin zelf, en niet om het hele blok. Op het blok
   belandde het sluitteken onder de vindplaats op een eigen regel. */
.hs-ka__citaat > span::before { content: "\201E"; }
.hs-ka__citaat > span::after  { content: "\201C"; }

.hs-ka__citaat cite {
	display: block;
	font-style: normal;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted-dark);
	margin-top: 5px;
}

/* ------------------------------------------------------------- de bronnen */

.hs-ka__bronnen {
	border-top: 1px solid var(--line);
	margin-top: 34px;
	padding-top: 16px;
	font-size: .88rem;
}

.hs-ka__bronnen ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.hs-ka__bronnen li {
	margin: 5px 0;
}

.hs-ka__bronnen li a {
	color: var(--copper-ink);
}

.hs-ka__bronnen li span {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--muted-dark);
	margin-left: 10px;
}

/* De vaste regel. Geen alarmkleur: dit is geen fout maar de afspraak waar het
   hele scherm op rust. */
.hs-ka__vast {
	background: var(--surface);
	border-left: 2px solid var(--copper);
	border-radius: 0 2px 2px 0;
	padding: 12px 15px;
	margin-top: 16px;
	font-size: .86rem;
	color: var(--muted);
}

.hs-ka__leeg {
	color: var(--muted);
	margin-top: 22px;
}

/* ------------------------------------------------------------- op de startpagina
   Daar staat het blok op de donkere sectie, net als de tintvinder. Dan draaien de
   lijnen en de tekstkleuren om. */

.dark .hs-ka__kop,
.dark .hs-ka__lijn,
.dark .hs-ka__bronnen { border-color: var(--line-dark); }

.dark .hs-ka__kop span,
.dark .hs-ka__citaat,
.dark .hs-ka__vast,
.dark .hs-ka__leeg { color: #B3AA9E; }

.dark .hs-ka__regel {
	background: rgba(246, 243, 238, .045);
	border-color: var(--line-dark);
}

.dark .hs-ka__waarde { color: var(--surface); }
.dark .hs-ka__vast   { background: rgba(246, 243, 238, .045); }
.dark .hs-ka__keuze select {
	background: rgba(246, 243, 238, .045);
	border-color: var(--line-dark);
	color: var(--surface);
}

@media (max-width: 600px) {
	.hs-ka__keuze { flex-direction: column; align-items: stretch; }
	.hs-ka__keuze .button { width: 100%; }
}

/* ------------------------------------------------------------- de uitleg
   Alleen te zien zolang er nog geen lijn gekozen is. Wie eenmaal aan het werk is
   heeft geen inleiding meer nodig en wil de regels zien. */

.hs-ka__uitleg {
	margin: 0 0 22px;
	font-size: .92rem;
	color: var(--muted);
	max-width: 62ch;
}

.hs-ka__uitleg p { margin: 0 0 10px; }
.hs-ka__uitleg p:last-child { margin-bottom: 0; }

.dark .hs-ka__uitleg { color: #B3AA9E; }

/* ===============================================================
   HET PANEEL DAT ZICH MELDT
   Rechtsonder, klein, en weg met een kruisje. Geen overlay over de pagina: wie
   aan het winkelen is moet gewoon door kunnen klikken.
   =============================================================== */

.hs-as {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 999;
	width: 320px;
	max-width: calc(100vw - 36px);
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 2px solid var(--copper);
	border-radius: 2px;
	padding: 16px 18px 18px;
	box-shadow: 0 8px 30px rgba(14, 12, 10, .13);
	/* Begint onzichtbaar en net iets lager, zodat hij omhoog schuift in plaats van
	   in beeld te knallen. Een paneel dat springt leest als een advertentie. */
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}

.hs-as--aan {
	opacity: 1;
	transform: translateY(0);
}

.hs-as__weg {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 1.2rem;
	cursor: pointer;
}

.hs-as__weg:hover { color: var(--text); background: none; }

.hs-as__label {
	display: block;
	color: var(--copper-ink);
	margin-bottom: 8px;
}

.hs-as__vraag {
	margin: 0 0 6px;
	font-family: var(--disp);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -.02em;
	color: var(--text);
}

.hs-as__tekst {
	margin: 0 0 12px;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--muted);
}

.hs-as__lijst {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.hs-as__lijst li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	padding: 7px 0;
	border-top: 1px solid var(--line);
}

.hs-as__soort {
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
	flex: 0 0 100%;
}

.hs-as__waarde {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: .9rem;
	color: var(--text);
}

.hs-as__lijst em {
	font-style: normal;
	font-size: .74rem;
	color: var(--copper-ink);
	background: rgba(192, 139, 74, .1);
	border-radius: 2px;
	padding: 2px 6px;
}

.hs-as__knop.button { margin: 0; width: 100%; }

@media (max-width: 520px) {
	.hs-as { right: 10px; bottom: 10px; width: auto; left: 10px; }
}

/* Wie geen bewegende beelden wil, krijgt hem gewoon zonder overgang. */
@media (prefers-reduced-motion: reduce) {
	.hs-as { transition: none; transform: none; }
}

/* ------------------------------------------------------------- dias in de slider
   Elke dia moet zelf de volle breedte pakken. Zonder dit valt een cel terug op de
   breedte van zijn inhoud: de tekst loopt dan buiten beeld en de vorige dia piept
   ernaast door. */

.hs-dia {
	/* Geen eigen breedte: Flatsome meet zijn cellen zelf op. Een width of flex
	   hier liet ze naar 30px krimpen, want de cel staat absoluut gepositioneerd
	   en het bovenliggende element heeft geen breedte om 100% van te nemen. */
	padding: 0 15px;
}

.hs-dia .hs-ka {
	max-width: 700px;
	margin: 0 auto;
}

/* De wand blijft gecentreerd zoals hij was. */
.hs-dia .hs-wall { margin: 0 auto; }