/**
 * Delivery estimate — sits between the stock notice and the cart row.
 * Colors are the child theme's "VL light green" and near-black.
 */
.vl-delivery {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 1.2em;
	line-height: 1.5;
}

.vl-delivery[hidden] {
	display: none;
}

.vl-delivery-icon {
	color: #6dd09d;
	flex-shrink: 0;
	/* Nudge the glyph onto the first text baseline. */
	margin-top: 0.18em;
}

.vl-delivery-estimate {
	/* The date is one unit; breaking "szept. 15.," off "kedd" reads badly. */
	white-space: nowrap;
}

/* Info icon — drawn rather than pulled from the icon font, so it keeps its
   shape whichever Font Awesome build the page happens to load. */
.vl-delivery-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	margin-left: 6px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	line-height: 1;
	vertical-align: 1px;
	cursor: help;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* Serif italic on the glyph alone. Setting it on the wrapper would cascade into
   the tooltip, which has to stay in the body font. */
.vl-delivery-info::before {
	content: "i";
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
}

.vl-delivery-info:hover,
.vl-delivery-info:focus {
	opacity: 1;
	outline: none;
}

.vl-delivery-tip {
	position: absolute;
	bottom: calc(100% + 9px);
	/* Anchored right so the bubble grows leftward, away from the page edge. */
	right: -6px;
	z-index: 20;
	width: 250px;
	max-width: calc(100vw - 40px);
	padding: 10px 12px;
	border-radius: 6px;
	background: #161619;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-style: normal;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.vl-delivery-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 10px;
	border: 6px solid transparent;
	border-top-color: #161619;
}

.vl-delivery-info:hover .vl-delivery-tip,
.vl-delivery-info:focus .vl-delivery-tip {
	opacity: 1;
	visibility: visible;
}

/* Narrow screens: the bubble is 250px wide but anchored to a 15px icon, so
   wherever the date line happens to wrap, its left half can fall outside the
   viewport. Anchor it to the text column instead — that box is already inside
   the page padding, so the bubble cannot leave the screen at any width.

   Vertically the bubble can no longer hang off the icon, because the icon is
   not the containing block any more. It does not need to: the icon always
   closes the sentence, so it is always on the block's last line, and one
   line-height up from the bottom edge is exactly that line. */
@media (max-width: 782px) {
	.vl-delivery-body {
		position: relative;
	}

	.vl-delivery-info {
		position: static;
	}

	.vl-delivery-tip {
		left: 0;
		/* Matches the icon's own 6px overhang, so the bubble still ends flush
		   with the text column's right edge. */
		right: -8px;
		bottom: calc(1.5em + 9px);
		box-sizing: border-box;
		width: auto;
		max-width: none;
	}

	/* The arrow has to move off the bubble and onto the icon: the bubble now
	   spans the whole column, so an offset from its edge no longer points at
	   anything. An absolutely positioned pseudo-element with auto insets keeps
	   its static position, which is the icon — so it tracks the icon for free,
	   at every width and wherever the line wraps. */
	.vl-delivery-tip::after {
		display: none;
	}

	.vl-delivery-info::after {
		content: "";
		position: absolute;
		bottom: calc(1.5em + 3px);
		margin-left: -3px;
		border: 6px solid transparent;
		border-top-color: #161619;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease, visibility 0.15s ease;
	}

	.vl-delivery-info:hover::after,
	.vl-delivery-info:focus::after {
		opacity: 1;
		visibility: visible;
	}
}