/**
 * WPMUSERV-1876 Styles
 */

/*
 * Use a high-specificity selector (body .ep-autosuggest-container) to prevent theme overrides.
 * This ensures our styles for the autosuggest dropdown are applied reliably.
 */

/* Main link container - uses Flexbox to align thumbnail, details, and price in a row. */
body .ep-autosuggest-container .ep-autosuggest .autosuggest-link {
    display: flex !important;
    align-items: center;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
}

/* Add a border to each item except the last one. */
body .ep-autosuggest-container .ep-autosuggest .autosuggest-item {
    border-bottom: 1px solid #eaeaea;
}

body .ep-autosuggest-container .ep-autosuggest .autosuggest-item:last-child {
    border-bottom: none;
}

/* Style the thumbnail image. */
body .ep-autosuggest-container .autosuggest-thumbnail {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0; /* Prevents the image from shrinking. */
    border-radius: 4px;
}

/* Details container (for title) - this flex item will grow to fill space. */
body .ep-autosuggest-container .autosuggest-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* Allows this element to grow and shrink. */
    text-align: left;
}

body .ep-autosuggest-container .autosuggest-title {
    font-weight: 500;
    /* line-height: 1.25; */
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price column - aligned to the far right. */
body .ep-autosuggest-container .autosuggest-price {
    /* margin-left: auto; */
    font-size: 10px;
    color: #222;
    flex-shrink: 0;
    font-weight: 600;
}

/* Style for sale prices. */
body .ep-autosuggest-container .autosuggest-price del {
    font-weight: 400;
    color: #888;
    margin-right: 0.5em;
    text-decoration: line-through;
}

body .ep-autosuggest-container .autosuggest-price ins {
    text-decoration: none;
}

/* Improve hover/focus states. */
body .ep-autosuggest-container .ep-autosuggest .autosuggest-item:hover,
body .ep-autosuggest-container .ep-autosuggest .autosuggest-item.selected {
    background-color: #f7f7f7;
    color: #000;
}

/* Responsive adjustments for mobile devices. */
@media (max-width: 850px) {
	body .ep-autosuggest-container .autosuggest-price {
		font-size: 12px;
	}
}