/**
 * Ventureheap Builder - header search, account and icon buttons.
 */

.vhb-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--vhb-transition), color var(--vhb-transition);
}

.vhb-icon-btn:hover,
.vhb-icon-btn:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.vhb-icon-btn svg { display: block; }

.vhb-icon-btn--labelled { width: auto; padding: 0 .85rem; border-radius: 999px; font-weight: 600; font-size: .92rem; }

.vhb-icon-btn__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: .68rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: var(--vhb-primary);
	border-radius: 999px;
}

.vhb-icon-btn__count[hidden] { display: none; }

.vhb-header-icons { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* Search ------------------------------------------------------------------ */
.vhb-search { position: relative; }

.vhb-search-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 50;
	width: min(420px, calc(100vw - 32px));
	padding: 12px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .45);
}

.vhb-search-panel[hidden] { display: none; }
.vhb-search-panel form { display: flex; gap: 8px; }

.vhb-search-panel input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: .6rem .9rem;
	font: inherit;
	color: var(--vhb-text);
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius-btn);
}

.vhb-search-panel input[type="search"]:focus { outline: none; border-color: var(--vhb-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vhb-primary) 18%, transparent); }
.vhb-search-panel button[type="submit"] { flex: 0 0 auto; }

/* Inline variant, for a header with room for it. */
.vhb-search--inline { width: 100%; }
.vhb-search--inline form { display: flex; gap: 8px; }

.vhb-search--inline input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: .6rem .9rem .6rem 2.6rem;
	font: inherit;
	background: var(--vhb-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.9'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat .8rem center / 18px;
	border: 1px solid transparent;
	border-radius: 999px;
}

.vhb-search--inline input[type="search"]:focus { outline: none; background-color: var(--vhb-bg); border-color: var(--vhb-primary); }

/* Account ----------------------------------------------------------------- */
.vhb-account { position: relative; }

.vhb-account__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 50;
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .45);
}

.vhb-account__menu[hidden] { display: none; }
.vhb-account__menu li { margin: 0; }

.vhb-account__menu a {
	display: block;
	padding: .55rem .7rem;
	font-size: .94rem;
	color: var(--vhb-secondary);
	text-decoration: none;
	border-radius: var(--vhb-radius-btn);
}

.vhb-account__menu a:hover { background: var(--vhb-alt); color: var(--vhb-primary); }
.vhb-account__name { padding: .4rem .7rem .6rem; font-size: .8rem; color: var(--vhb-muted); }

@media (max-width: 767px) {
	.vhb-icon-btn { width: 40px; height: 40px; }
	.vhb-search-panel { position: fixed; top: auto; left: 16px; right: 16px; width: auto; }
}

/* Four icons and a logo on a 360px phone: the tap targets stay 40px, the
   space between them goes. */
@media (max-width: 480px) {
	.vhb-icon-btn { width: 38px; height: 38px; }
	.vhb-icon-btn svg { width: 20px; height: 20px; }
	.vhb-header-icons { gap: 0; }
	.vhb-inline-row--keep > .elementor-container { gap: 0; }
}

/* The mini cart is its own widget with its own button, so line it up with
   the search, wishlist and account icons rather than letting it sit a few
   pixels lower and wider than the rest of the row. */
.vhb-header-template .vhb-mini-cart__button,
.vhb-inline-row--keep .vhb-mini-cart__button {
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 20px;
	border-radius: 50%;
	transition: background var(--vhb-transition);
}

.vhb-header-template .vhb-mini-cart__button:hover,
.vhb-inline-row--keep .vhb-mini-cart__button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

.vhb-header-template .vhb-mini-cart__count { top: 2px; right: 0; }

@media (max-width: 767px) {
	.vhb-header-template .vhb-mini-cart__button,
	.vhb-inline-row--keep .vhb-mini-cart__button { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
	.vhb-header-template .vhb-mini-cart__button,
	.vhb-inline-row--keep .vhb-mini-cart__button { width: 38px; height: 38px; font-size: 18px; }
}

/* The contact strip above a shop header: one line, a divider between the
   items, and never a wall of text on a phone. */
.vhb-contact-strip .vhb-info-box { gap: 8px; margin: 0; }
.vhb-contact-strip .vhb-info-box__title { margin: 0; letter-spacing: .01em; }
.vhb-contact-strip .vhb-info-box__text { display: none; }

.vhb-contact-strip .vhb-inline-row--keep > .elementor-container > .elementor-column + .elementor-column {
	position: relative;
	padding-left: 18px;
	margin-left: 18px;
}

.vhb-contact-strip .vhb-inline-row--keep > .elementor-container > .elementor-column + .elementor-column::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 18px;
	margin-top: -9px;
	background: currentColor;
	opacity: .35;
}

@media (max-width: 480px) {
	.vhb-contact-strip .vhb-info-box__title { font-size: 11px; }
	.vhb-contact-strip .vhb-inline-row--keep > .elementor-container > .elementor-column + .elementor-column { padding-left: 10px; margin-left: 10px; }
}