/**
 * Vyonika — Reusable Search Box (shortcode: [vy_search_box])
 *
 * v3 — applying the same fix as shop-categories.css: don't rely on
 * `all: unset` alone to beat the parent theme's button styling. If
 * that theme rule carries !important (likely, since it wins elsewhere
 * without it too), a plain unset loses regardless of specificity or
 * load order. background-color / border / color are declared here
 * explicitly with !important so this button's look is fully owned,
 * not just reset-and-hope.
 *
 * This is a TRIGGER BUTTON that opens the real #search-modal, styled
 * to look like an input field — see inc/gzm-vy-search-box.php.
 *
 * Visual tokens from the real modal field + base input tokens:
 *   bg            #ffffff
 *   border        1px solid #ebebeb  -> darkens to #111111 on hover
 *   placeholder   rgba(17,17,17,0.6)
 *
 * radius: 12px (not the modal's 30px — correct at the modal's larger
 * ~52px height, but reads as an over-curved capsule at this smaller
 * ~40px topbar height).
 */

.vy-search-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	max-width: 230px;
	margin: 0;
	cursor: pointer;
	font-family: var(--gz-body-font, 'Instrument Sans', Arial, sans-serif);
	font-size: 13px;
	padding: 10px 12px 10px 16px;
	border-radius: 5px;
	-webkit-appearance: none;
	appearance: none;
	outline: none !important;
	background-color: #ffffff !important;
	background-image: none !important;
	border: 1px solid #ebebeb !important;
	box-shadow: none !important;
	color: rgba(17, 17, 17, 0.6) !important;
	transition: border-color 0.25s ease;
}

.vy-search-box:hover,
.vy-search-box:focus {
	border-color: #111111 !important;
}

.vy-search-box__placeholder {
	flex: 1;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
}

.vy-search-box__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #15171A !important;
}

/* Topbar context (Shop/Category page) needs to flex-fill the
   remaining space next to the page title. */
.gzm-cb-topbar .vy-search-box {
	flex: 1;
}

/* ==========================================================
   FULL-WIDTH / HERO VARIANT
   Opt in with: [vy_search_box class="vy-search-box--full"]

   For homepage / wide-container use — stretches edge to edge
   instead of the 230px topbar cap, and goes fully pill-shaped
   (border-radius: 999px). That's not the same "over-curved"
   issue the topbar version had earlier — that was a SHORT box
   forced into a large radius, which read as an odd stubby oval.
   This is a genuinely tall bar (~46px), so a true pill is the
   correct shape at this size, not a mistake.
   ========================================================== */
.vy-search-box.vy-search-box--full {
	max-width: none !important;
	width: 100%;
	padding: 13px 18px 13px 22px !important;
	border-radius: 5px !important;
	font-size: 14px;
}
.vy-search-box.vy-search-box--full .vy-search-box__icon svg {
	width: 18px;
	height: 18px;
}