.chars {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1rem;
    box-sizing: border-box;
    height: auto; /* Allow natural growth */
}

/* Let the variant text expand as needed */
.shop-item-variant {
    font-size: 0.9rem;
    background: #f8fafc;
    border-left: 4px solid #e2e8f0;
    border-right: 4px solid #e2e8f0;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    color: #475569;
    line-height: 1.4;
    /* Remove overflow limitations */
    height: 80px;
    overflow: visible;
    text-overflow: unset;
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

.shop-price-wrapper {
    margin-bottom: 1em;
}

/* Wrapper for filters */
.filter-wrapper {
    padding: 2rem;
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    margin: 2rem auto;
}

/* Inner wrapper for alignment */
.filter-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dropdown-filters-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
}

/* Style the dropdown containers */
.filter-dropdown {
    position: relative;
    width: 100%;
    max-width: 250px;
}

/* Style the select elements */
.filter-selects {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #495057;
    background-color: #ffffff;
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Add custom arrow using background image */
.filter-selects {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns="http://www.w3.org/2000/svg"%20width="16"%20height="16"%20fill="gray"%20class="bi%20bi-caret-down-fill"%20viewBox="0%200%2016%2016"%3E%3Cpath%20d="M7.247%2011.14l-4.796-5.481C1.885%205.226%202.356%204.5%203.152%204.5h9.696c.796%200%201.267.726.701%201.159l-4.796%205.481a1%201%200%200%201-1.506%200z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

/* Hover and focus styles */
.filter-selects:hover,
.filter-selects:focus {
    border-color: #74c0fc;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(115, 195, 255, 0.25);
    background-color: #f8f9fa;
}

@media (max-width: 600px) {
    .dropdown-filters-wrapper {
        flex-direction: column;
    }
}