/* ==========================================================================
   Emily H&B — Header
   --------------------------------------------------------------------------
   Geometry, colours and row structure are seeded into the Kadence Header
   Builder by inc/class-emily-hb-header.php. This file covers what the
   Customizer cannot express: the announcement bar's two-cell layout, the
   search field, the utility icons, nav link colours, and the sticky state.

   Kadence markup this file relies on:
     #masthead                     desktop header
     #mobile-header                mobile header
     .site-top-header-wrap         announcement bar row
     .site-main-header-wrap        logo bar row
     .site-bottom-header-wrap      nav row
     .kadence-sticky-header        the row that sticks
     .item-is-stuck                applied once scrolled past the trigger
     .item-hidden-above            applied while hidden on scroll-down
   ========================================================================== */

/* --- Announcement bar ---------------------------------------------------- */

#masthead .site-top-header-wrap .site-header-top-section-center,
#masthead .site-top-header-wrap .site-header-item,
#masthead .site-top-header-wrap .header-html,
#masthead .site-top-header-wrap .header-html-inner,
#mobile-header .site-top-header-wrap .site-header-top-section-center,
#mobile-header .site-top-header-wrap .site-header-item,
#mobile-header .site-top-header-wrap .mobile-html,
#mobile-header .site-top-header-wrap .mobile-html-inner {
	width: 100%;
	flex: 1 1 100%;
	margin-right: 0;
}

#masthead .site-top-header-wrap .site-top-header-inner-wrap,
#mobile-header .site-top-header-wrap .site-top-header-inner-wrap {
	padding-inline: 0;
}

.ehb-announcement {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	box-sizing: border-box;
}

.ehb-announcement::before {
	display: none;
}

.ehb-announcement__message {
	width: 100%;
	text-align: center;
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-medium);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	margin: 0;
	padding-inline: 100px;
	box-sizing: border-box;
}

.ehb-announcement__lang {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ehb-text-on-dark);
	text-decoration: none;
	white-space: nowrap;
}

.ehb-announcement__lang:hover,
.ehb-announcement__lang:focus-visible {
	color: var(--ehb-text-on-dark);
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.ehb-announcement {
		height: 42px;
	}

	.ehb-announcement__message {
		text-align: start;
		font-size: 11px;
		padding-inline: 0 36px;
	}

	.ehb-announcement__lang {
		font-size: 11px;
	}
}

@media (min-width: 1024px) {
	body:not(.ehb-checkout-minimal) .site-top-header-wrap .site-top-header-inner-wrap,
	body:not(.ehb-checkout-minimal) .site-main-header-wrap .site-main-header-inner-wrap,
	body:not(.ehb-checkout-minimal) .site-bottom-header-wrap .site-bottom-header-inner-wrap {
		padding-inline: 48px !important;
		box-sizing: border-box;
	}
}

/* The announcement bar must never stick — it scrolls away, which is why the
   mobile language switcher is duplicated into the hamburger drawer. Kadence
   is configured to stick only the main row, so this is a guard, not a fix. */
.site-top-header-wrap {
	position: static !important;
}

/* --- Logo bar ------------------------------------------------------------ */

/* The logo bar sits on magenta, so the white logo lockup is the one in use. */
.site-main-header-wrap .site-branding img,
#mobile-header .site-main-header-wrap .site-branding img {
	max-height: 60px;
	width: auto;
}

@media (max-width: 1023px) {
	#mobile-header .site-branding img {
		max-height: 40px;
	}
}

/* --- Search field --------------------------------------------------------
   Figma: 737x44 desktop, 358x40 mobile. White field on the magenta bar,
   placeholder in text/muted.                                              */

.site-main-header-wrap .search-toggle-open-container,
.site-bottom-header-wrap .search-toggle-open-container {
	width: 100%;
}

/* The old .search-form block lived here. It was written before the header
   search was replaced with Emily_HB_Header::render_search(), and its 8px
   radius was overriding the pill on .ehb-search. Removed rather than patched:
   two rules describing the same control is how a design system rots. */

/* --- Utilities: sign in, favourites, cart --------------------------------
   Rendered by Emily_HB_Header::render_utilities() ahead of the cart, because
   the free Kadence header builder has no account or wishlist element.     */

.site-main-header-wrap .site-header-section-right,
#mobile-header .site-header-main-section-right {
	display: flex;
	align-items: center;
	gap: 26px;
}

.ehb-header-util {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--ehb-text-on-dark);
	text-decoration: none;
}

.ehb-header-util svg {
	width: 100%;
	height: 100%;
}

.ehb-header-util:hover,
.ehb-header-util:focus-visible {
	color: var(--ehb-text-on-dark);
	opacity: 0.75;
}

@media (max-width: 1023px) {
	#mobile-header .site-header-main-section-right {
		gap: 14px;
	}

	.ehb-header-util {
		width: 24px;
		height: 24px;
	}
}

/* --- Nav row -------------------------------------------------------------
   Figma: Label/Nav, 34px gap. Two items are set in brand magenta — Bundles &
   Specials and Hot Deals — to mark them as promotional. They are matched by
   a body class the client can apply to the menu items rather than by
   position, so reordering the menu does not break the colour.             */

.site-bottom-header-wrap .header-navigation ul.menu > li > a {
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-medium);
	font-size: var(--ehb-size-label-nav);
	line-height: var(--ehb-lh-label-nav);
	letter-spacing: var(--ehb-ls-label-nav);
	color: var(--ehb-text-ink);
}

.site-bottom-header-wrap .header-navigation ul.menu > li {
	margin-inline-end: 34px;
}

.site-bottom-header-wrap .header-navigation ul.menu > li:last-child {
	margin-inline-end: 0;
}

.site-bottom-header-wrap .header-navigation ul.menu > li > a:hover,
.site-bottom-header-wrap .header-navigation ul.menu > li.current-menu-item > a {
	color: var(--ehb-brand-magenta);
}

/* Promotional menu items. Add the CSS class "ehb-nav-promo" to the menu item
   in Appearance → Menus → Screen Options → CSS Classes. */
.site-bottom-header-wrap .header-navigation ul.menu > li.ehb-nav-promo > a {
	color: var(--ehb-brand-magenta);
}

/* --- Sticky state --------------------------------------------------------
   Kadence animates the reveal with transform: translateY() in JS, which is
   compositor-only — no width, height, top or margin is touched, as the Figma
   motion spec requires. All this file adds is the stuck appearance.       */

.kadence-sticky-header {
	transition: transform 200ms ease-out;
	will-change: transform;
}

.kadence-sticky-header.item-is-stuck,
.site-main-header-wrap.kadence-sticky-header.item-is-stuck,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	background: var(--ehb-brand-magenta) !important;
	border-bottom: 0 !important;
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
	background: var(--ehb-brand-magenta) !important;
}

/* White logo remains clearly visible on magenta ground when sticky. */
.kadence-sticky-header.item-is-stuck .site-branding img,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding img {
	max-height: 60px;
	width: auto;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Maintain white utility icons and cart on magenta ground. */
.kadence-sticky-header.item-is-stuck .ehb-header-util,
.kadence-sticky-header.item-is-stuck .header-cart-button,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .ehb-header-util,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-cart-button {
	color: var(--ehb-text-on-dark) !important;
}

.kadence-sticky-header.item-is-stuck .ehb-header-util:hover,
.kadence-sticky-header.item-is-stuck .header-cart-button:hover,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .ehb-header-util:hover,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-cart-button:hover {
	color: var(--ehb-text-on-dark) !important;
	opacity: 0.8;
}

.kadence-sticky-header.item-is-stuck .header-cart-total,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-cart-total {
	background: var(--ehb-surface-paper) !important;
	color: var(--ehb-brand-magenta) !important;
}

/* --- Fixes found on staging ----------------------------------------------
   Three things the Customizer seeding could not reach, each confirmed against
   the rendered page rather than assumed.                                   */

/*
 * 1. The search field. Kadence's centre column is a flex item that shrinks to
 *    its content, so max-width alone left the field at ~240px instead of the
 *    737px in the design. The column has to be told to grow first.
 */
.site-main-header-wrap .site-header-main-section-center,
.site-main-header-wrap .site-header-section-center {
	flex: 1 1 auto;
	min-width: 0;
}

.site-main-header-wrap .site-header-section-center .site-header-item {
	width: 100%;
}

.ehb-search {
	display: flex;
	align-items: center;
	gap: var(--ehb-space-12);
	width: 100%;
	max-width: 737px;
	padding: var(--ehb-space-12) var(--ehb-space-20);
	background: var(--ehb-surface-paper);
	border: 0;
	border-radius: var(--ehb-radius-md);
}

.ehb-search__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--ehb-text-muted);
}

.ehb-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--ehb-font-body);
	font-size: var(--ehb-size-body-small);
	line-height: var(--ehb-lh-body-small);
	color: var(--ehb-text-body);
}

.ehb-search .search-field::placeholder {
	color: var(--ehb-text-muted);
	opacity: 1;
}

.ehb-search .search-field:focus {
	outline: 0;
	box-shadow: none;
}

.ehb-search:focus-within {
	outline: 2px solid var(--ehb-text-on-dark);
	outline-offset: 2px;
}

.kadence-sticky-header.item-is-stuck .ehb-search {
	border: 0;
}

.kadence-sticky-header.item-is-stuck .ehb-search:focus-within {
	outline: 2px solid var(--ehb-text-on-dark);
	outline-offset: 2px;
}

/*
 * 2. The nav row. It is the only element in its row, so Kadence renders it
 *    with the "only-center-column" layout and centres it. The design starts
 *    the nav at the left gutter.
 */
.site-bottom-header-wrap .site-header-row-only-center-column,
.site-bottom-header-wrap .site-header-section-center {
	justify-content: flex-start;
}

.site-bottom-header-wrap .header-navigation ul.menu {
	justify-content: flex-start;
}

/*
 * 3. The logo bar's column widths.
 *
 * Kadence lays each header row out as a CSS grid and sizes the two side
 * columns to match each other, leaving the centre at its content width — the
 * measured value was "433px 238px 433px", which is why the search field would
 * not grow no matter what flex rules it was given. The centre column has to
 * be the one that takes the remaining space.
 *
 * minmax(0, 1fr) rather than 1fr: a bare 1fr has an auto minimum, so a long
 * placeholder would push the column wider than the row instead of the input
 * scrolling inside it.
 */
.site-main-header-wrap .site-main-header-inner-wrap.site-header-row-has-sides {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.site-main-header-wrap .site-header-section-center {
	justify-content: center;
}

.site-main-header-wrap .site-header-section-center .site-header-item {
	width: 100%;
	display: flex;
	justify-content: center;
}

/*
 * 4. The mobile search row has the same grid problem as the desktop logo bar:
 *    the row is a CSS grid and the centre column is sized to its content, so
 *    the field came out 230px instead of filling the 390 - 32 gutter.
 */
#mobile-header .site-bottom-header-inner-wrap {
	grid-template-columns: minmax(0, 1fr);
}

#mobile-header .site-header-section-center,
#mobile-header .site-header-bottom-section-center {
	justify-content: stretch;
	width: 100%;
}

#mobile-header .site-header-bottom-section-center .site-header-item {
	width: 100%;
}

/* Figma mobile: the field is 358x40 with 11/16 padding, not the desktop
   737x44 with 12/20. Without the height override the search row came out 56
   instead of 52. */
#mobile-header .ehb-search {
	max-width: none;
	height: 40px;
	padding: 11px var(--ehb-space-16);
	gap: 10px;
}

#mobile-header .ehb-search .search-field {
	line-height: 18px;
	font-size: 14px;
}

#mobile-header .ehb-search__icon svg {
	width: 18px;
	height: 18px;
}

/*
 * 5. The mobile search row's ground.
 *
 * Figma: the mobile header is one continuous magenta block — logo bar plus
 * search row — while the desktop bottom row is the paper nav bar. Kadence
 * gives both rows a single background option and reads only its 'desktop'
 * key, so the mobile colour has to come from here.
 */
@media (max-width: 1023px) {
	#mobile-header .site-bottom-header-wrap,
	#mobile-header .site-bottom-header-wrap .site-header-row-container-inner,
	/* Wrapper too: any gap Kadence's sticky JS opens between rows shows magenta, never the page's white. */
	#mobile-header .site-header-inner-wrap {
		background-color: var(--ehb-brand-magenta);
	}
}

/* --- Figma parity pass ---------------------------------------------------
   Measured against the Header component (node 111:68), not eyeballed.

   Search field   737x44 at x=355, corner radius 999 — a pill, not the 8px
                  radius/md I first transcribed. Icon 20x20, 20px left inset,
                  11px gap to the placeholder, stroke 1.8 in text/muted.
   Utilities      140x30 at x=1252, three items, 26px gaps.
   Cart           36x30; the count is an 18x18 pill sitting ON the icon at its
                  top-right (offset 18,0 inside the 36x30 box), white ground
                  with the numeral in brand magenta.
   ------------------------------------------------------------------------ */

.ehb-search {
	/* A pill. The 8px radius was wrong. */
	border-radius: var(--ehb-radius-pill);
	/* 44px exactly: 12px padding each side over a 20px line box. A 22px
	   line-height made it 46 and the bar looked heavier than the design. */
	height: 44px;
	padding: var(--ehb-space-12) var(--ehb-space-20);
	gap: 11px;
	box-sizing: border-box;
}

.ehb-search .search-field {
	line-height: 20px;
	font-size: 14.5px;
}

.ehb-search__icon svg {
	width: 20px;
	height: 20px;
}

/* --- Utilities cluster ---------------------------------------------------- */

.site-main-header-wrap .site-header-section-right .site-header-item {
	display: flex;
	align-items: center;
	gap: 26px;
}

/* Cart: 36x30, and the toggle must be a positioning context so the count can
   sit on top of the icon rather than beside it. */
.header-cart-wrap .header-cart-button,
.header-mobile-cart-wrap .header-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ehb-text-on-dark);
}

.header-cart-wrap .kadence-svg-icon,
.header-mobile-cart-wrap .kadence-svg-icon {
	width: 26px;
	height: 26px;
}

/* Kadence names this .header-cart-total; .kadence-cart-total does not exist
   in the free theme, which is why the first version of this rule never
   applied and the count sat inline beside the icon. */
.header-cart-wrap .header-cart-total,
.header-mobile-cart-wrap .header-cart-total {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--ehb-radius-pill);
	background: var(--ehb-surface-paper);
	color: var(--ehb-brand-magenta);
	font-family: var(--ehb-font-display);
	font-weight: var(--ehb-weight-bold);
	font-size: 10.5px;
	line-height: 1;
}

/* Sticky cart styling matches default non-stuck magenta row */
.kadence-sticky-header.item-is-stuck .header-cart-button {
	color: var(--ehb-text-on-dark) !important;
}

.kadence-sticky-header.item-is-stuck .header-cart-total {
	background: var(--ehb-surface-paper) !important;
	color: var(--ehb-brand-magenta) !important;
}


/* --- Column widths -------------------------------------------------------
   Measured: left column 157 (logo 147 + 10), right column 166 (utilities 140
   + 26). Both side columns must equal their content exactly, or the centre
   column is the wrong width and the search field lands 8px off the position
   in the design.

   The stray 26 came from a gap on the section itself, which was also being
   applied between the empty -right-center placeholder div and the utilities.
   The gap belongs on the item that actually holds the three icons.
   ------------------------------------------------------------------------ */

.site-main-header-wrap .site-header-section-right {
	gap: 0;
	justify-content: flex-end;
}

.site-main-header-wrap .site-header-main-section-right-center:empty {
	display: none;
}

.site-main-header-wrap .site-branding,
.site-main-header-wrap .site-header-main-section-left .site-header-item {
	margin: 0;
	padding: 0;
}

.site-main-header-wrap .site-header-main-section-left {
	justify-content: flex-start;
}

/* Nav item spacing. Figma: 34px between items, and "Shop" is 35px wide — so
   the gap must come from the list item, not from padding on the link, or
   every item is pushed a further 17px each side and the row stops matching. */
.site-bottom-header-wrap .header-navigation ul.menu > li > a {
	padding-inline: 0;
}

/* Cart count: 18x18 in Figma. Horizontal padding made a single digit 22 wide. */
.header-cart-wrap .header-cart-total,
.header-mobile-cart-wrap .header-cart-total {
	padding: 0;
	width: 18px;
	min-width: 18px;
}

/* FiboSearch owns suggestions and keyboard navigation; match the header field. */
.ehb-search-live { width: 100%; max-width: 737px; }
.ehb-search-live .dgwt-wcas-search-wrapp { width: 100%; max-width: none; min-width: 0; }
.ehb-search-live .dgwt-wcas-sf-wrapp { padding: 0; background: transparent; }
.ehb-search-live .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { height: 44px; border: 0; border-radius: 999px; background: var(--ehb-surface-paper); font: 400 14px/20px var(--ehb-font-body); color: var(--ehb-text-ink); padding: 12px 42px; }
.ehb-search-live .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { top: 0; height: 44px; margin: 0; border-radius: 999px; color: var(--ehb-text-muted); }
.ehb-search-live .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg { top: 13px; margin: 0; }
/* Search suggestions: same anatomy as a product card, compressed to one row.
   Blush image well (as PDP/grid) | name | price stack. SKU stays searchable but is not shown. */
.dgwt-wcas-suggestions-wrapp { overflow: hidden; padding: 6px; }
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion, .dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion * { text-decoration: none; }
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion { align-items: center; gap: 14px; padding: 8px 10px; border: 0; border-radius: var(--ehb-radius-md); color: var(--ehb-text-ink); }
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected { background: var(--ehb-surface-raised); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { flex: 0 0 48px; width: 48px; height: 60px; margin: 0; padding: 0; border: 0; border-radius: var(--ehb-radius-md); background: var(--ehb-surface-blush); overflow: hidden; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img { display: block; width: 100%; height: 100%; padding: 4px; border: 0; background: transparent; object-fit: contain; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1 1 auto; min-width: 0; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { min-width: 0; font: 500 14px/20px var(--ehb-font-body); color: var(--ehb-text-ink); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st strong { font-weight: 700; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sku { display: none; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { flex: 0 0 auto; margin: 0; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font: 600 14px/18px var(--ehb-font-body); color: var(--ehb-text-ink); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp del { font-weight: 400; font-size: 12px; color: var(--ehb-text-muted); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins { background: none; color: var(--ehb-status-sale); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .ehb-price-suffix { font-weight: 400; font-size: 11px; color: var(--ehb-text-muted); }
.dgwt-wcas-suggestions-wrapp { border-radius: 12px; border-color: var(--ehb-line-subtle); box-shadow: 0 8px 24px #2314211a; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { font-family: var(--ehb-font-body); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img { object-fit: contain; }
#mobile-header .ehb-search-live .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { height: 40px; font-size: 13px; }
.search .woocommerce-info { max-width: 1200px; margin: 32px auto; }

/* Search suggestions, second pass: a floating card that hangs 8px under the pill (it used to touch it), larger image well,
   the matched letters in brand magenta so you see why a row matched, roomier rows. */
.dgwt-wcas-suggestions-wrapp { margin-top: 8px; padding: 8px; border: 1px solid var(--ehb-line-subtle); border-radius: 16px; box-shadow: 0 16px 40px rgba(36, 19, 32, .14); }
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion { gap: 16px; padding: 10px 12px; border-radius: 12px; transition: background-color 120ms ease; }
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected { background: var(--ehb-surface-blush); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { flex: 0 0 56px; width: 56px; height: 70px; border-radius: 10px; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st { font: 500 15px/22px var(--ehb-font-body); }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st strong { color: var(--ehb-brand-magenta); font-weight: 700; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp { font-size: 15px; line-height: 20px; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp ins { color: var(--ehb-brand-magenta); font-weight: 700; }
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .ehb-price-suffix { font-size: 11px; }
/* FiboSearch sets radius/border/offset on the wrapper with higher specificity; the card must float clear of the pill. */
body .dgwt-wcas-suggestions-wrapp.dgwt-wcas-suggestions-wrapp { margin-top: 8px !important; border: 1px solid var(--ehb-line-subtle) !important; border-radius: 16px !important; }
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion:hover .dgwt-wcas-si,
.dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected .dgwt-wcas-si { background: var(--ehb-surface-paper); } /* the well would vanish into the blush hover row */