/* ===============================================================
   De artikelbot

   Eigen bestand met filemtime als versie, om dezelfde reden als hs-shop.css:
   LiteSpeed voegt stylesheets samen en levert ze uit een eigen cache, en een
   wijziging in style.css kwam daardoor niet door.

   De knop hangt rechtsonder. Niet linksonder, want daar zet Flatsome zijn eigen
   terug-naar-boven, en twee ronde knoppen op elkaar is hoe een bezoeker de
   verkeerde indrukt.
   =============================================================== */

.hs-bot {
	position: fixed;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 999;
	font-family: inherit;
}

/* De knop. Koper op inkt, zoals de rest van de winkel. */
.hs-bot__knop {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	border: 0;
	border-radius: 2rem;
	background: #0e0c0a;
	color: #fff;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(14, 12, 10, .28);
	transition: background .2s, transform .2s;
}

.hs-bot__knop:hover {
	background: #8f5c2b;
	transform: translateY(-1px);
}

.hs-bot__knop::before {
	content: "";
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: #e0a93b;
	flex: none;
}

/* Het venster. Op een telefoon vult het bijna het scherm, want een chatvenster
   van 300 pixels op een toestel van 390 is een kijkgat. */
.hs-bot__venster {
	position: absolute;
	right: 0;
	bottom: 3.4rem;
	width: min(23rem, calc(100vw - 2rem));
	max-height: min(32rem, calc(100vh - 6rem));
	display: flex;
	flex-direction: column;
	background: #fffdfb;
	border: 1px solid #e3ddd6;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(14, 12, 10, .22);
	overflow: hidden;
}

.hs-bot__venster[hidden] {
	display: none;
}

.hs-bot__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .7rem .9rem;
	border-bottom: 1px solid #e3ddd6;
	background: #f6f2ee;
}

.hs-bot__titel {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #6d6660;
}

.hs-bot__sluit {
	border: 0;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: #6d6660;
	cursor: pointer;
	padding: 0 .2rem;
}

.hs-bot__draad {
	flex: 1;
	overflow-y: auto;
	padding: .9rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.hs-bot__bel {
	font-size: .93rem;
	line-height: 1.5;
	border-radius: 10px;
	padding: .6rem .75rem;
	max-width: 92%;
}

.hs-bot__bel--ik {
	align-self: flex-end;
	background: #0e0c0a;
	color: #fff;
}

.hs-bot__bel--bot {
	align-self: flex-start;
	background: #f6f2ee;
	color: #101012;
}

/* De artikelkaarten. Een rij per artikel, foto klein: de bezoeker kijkt al naar
   een productpagina, dus dit hoeft geen tweede etalage te zijn. */
.hs-bot__kaarten {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.hs-bot__kaart {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem;
	border: 1px solid #e3ddd6;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, background .15s;
}

.hs-bot__kaart:hover {
	border-color: #8f5c2b;
	background: #fbf1dc;
}

.hs-bot__kaart img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	flex: none;
	background: #fff;
}

.hs-bot__kaarttekst {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.hs-bot__kaarttekst strong {
	font-size: .87rem;
	font-weight: 600;
	line-height: 1.3;
	/* Twee regels en dan afkappen. Artikelnamen hier lopen tot ver over de
	   zeventig tekens, en een kaart die meegroeit duwt de rest uit beeld. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hs-bot__prijs {
	font-size: .82rem;
	color: #6d6660;
	font-variant-numeric: tabular-nums;
}

/* Wat de technische fiche zegt. Zichtbaar anders dan de rest van het gesprek,
   want dit is het enige in dit venster dat niet van ons komt maar van de
   fabrikant, en dat verschil hoort te zien te zijn. */
.hs-bot__fiche {
	border-left: 3px solid #e0a93b;
	padding-left: .7rem;
}

.hs-bot__fichekop {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #b8842a;
	margin-bottom: .3rem;
}

.hs-bot__fiche p {
	margin: .3rem 0 .1rem;
	font-size: .88rem;
	font-weight: 600;
}

.hs-bot__fiche q {
	display: block;
	font-size: .84rem;
	color: #6d6660;
	font-style: italic;
	line-height: 1.45;
}

.hs-bot__fiche a {
	font-size: .78rem;
	color: #b8842a;
}

.hs-bot__form {
	display: flex;
	gap: .4rem;
	padding: .7rem;
	border-top: 1px solid #e3ddd6;
	background: #fffdfb;
}

.hs-bot__veld {
	flex: 1;
	min-width: 0;
	padding: .55rem .7rem;
	font: inherit;
	font-size: .9rem;
	border: 1px solid #e3ddd6;
	border-radius: 6px;
	background: #fff;
}

.hs-bot__veld:focus {
	outline: 2px solid #e0a93b;
	outline-offset: -1px;
}

.hs-bot__form button {
	border: 0;
	border-radius: 6px;
	padding: .55rem .9rem;
	background: #e0a93b;
	color: #fff;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}

.hs-bot__form button:hover {
	background: #b8842a;
}

.hs-bot__klein {
	margin: 0;
	padding: 0 .8rem .8rem;
	font-size: .74rem;
	line-height: 1.45;
	color: #6d6660;
	background: #fffdfb;
}

/* Op een klein scherm hoort dit venster het scherm te vullen. Half zwevend boven
   een pagina die eronder doorschuift leest niet. */
@media (max-width: 30rem) {
	.hs-bot__venster {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-height: 78vh;
		border-radius: 12px 12px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
}

/* Wie beweging heeft uitgezet, krijgt geen beweging. */
@media (prefers-reduced-motion: reduce) {
	.hs-bot__knop {
		transition: none;
	}
	.hs-bot__knop:hover {
		transform: none;
	}
}