.InputSection {
    margin: 1.75em auto 2.5em;

    display: flex; gap: 1.5em 0.75em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.InputSection div {
    position: relative;
}
.InputSection .HelperText {
    text-align: center;
    font: 800 0.9em Poppins;
    text-transform: uppercase;
}
.InputSection .Selected {
    min-width: 10em;
    cursor: pointer;
    text-align: center;
    border-radius: 1em;
    white-space: nowrap;
    padding: 0.75em 1.5em;
    background-color: #fff;
    border: none; outline: none;
    font: 500 1em 'Merriweather Sans';
    box-shadow: 0em 0.25em 0.25em rgba(0, 0, 0, 0.4);
}
.InputSection input {
    width: 17.5em;
    text-align: left;
    border-radius: 1em;
    padding: 0.75em 1.25em;
    background-color: #fff;
    border: none; outline: none;
    font: 500 1em 'Merriweather Sans';
    box-shadow: 0em 0.25em 0.25em rgba(0, 0, 0, 0.4);

    transition: 0.2s ease-out;
}
.InputSection .Error input {
    color: #880000;
    background-color: #ffaaaa;
}
.InputSection .Error input::placeholder {
    color: #881c1c;
}
.InputSection .Options {
    max-height: 12em;
    margin-top: 0.5em;
    border-radius: 1em;
    background-color: #fff;
    min-width: 100%; padding: 0.5em;
    box-shadow: 0em 0.25em 0.25em rgba(0, 0, 0, 0.4);

    position: absolute; left: 50%;
    display: flex; gap: 0.2em;
    flex-direction: column;
    translate: -50% 0%;
    overflow-y: auto;
    z-index: 200;
}
.InputSection .Options div {
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.75em;
    padding: 0.4em 0.75em;
    font: 500 1em 'Merriweather Sans';

    user-select: none;
    -webkit-user-select: none;

    transition: 0.15s ease-out;
}
.InputSection .Options div:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.InputSection .Options .Active {
    background-color: rgba(0, 0, 0, 0.2) !important;
}
.InputSection .Options.Hidden {
    display: none;
}

.DetailedDisplay {
    max-width: 100%;
    padding-bottom: 1em;

    overflow: auto;
}
.DetailedDisplay .Container {
    padding: 1.5em;
    border-radius: 1em;
    margin: 0 auto auto;
    background-color: #fff;
    min-width: min(75em, 100%);
    min-height: min(15em, 100%);
    box-shadow: 0em 0.25em 0.25em rgba(0, 0, 0, 0.3);
    width: max-content;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.DetailedDisplay .Hidden {
    display: none !important;
}
.DetailedDisplay table {
    width: 100%;
    border-radius: 0.75em;
    border-collapse: collapse;

    overflow: hidden;
}
.DetailedDisplay th {
    color: #fff;
    text-align: center;
    padding: 0.5em 1em;
    white-space: nowrap;
    font: 700 0.95em Poppins;
    background-color: #0066d3;
}
.DetailedDisplay td {
    color: #333;
    text-align: center;
    padding: 0.5em 1em;
    white-space: nowrap;
    background-color: #f6f6f6;
    border-bottom: 0.1em solid #aaa;
    font: 500 0.95em 'Merriweather Sans';
}
.DetailedDisplay tr:last-child td {
    border-bottom: unset;
}
.DetailedDisplay .PriceDetails {
    display: flex; gap: 0.5em;
    justify-content: center;
    align-items: center;
}
.DetailedDisplay .CostPerUnit {
    font: 700 1.2em Montserrat;
}
.DetailedDisplay .MRP {
    color: #000;
    padding-top: 0.2em;
    text-decoration: line-through;
    font: 300 0.85em 'Merriweather Sans';
}
.DetailedDisplay .AddToCart {
    width: 100%;
    cursor: pointer;
    padding: 0.4em 1em;
    border-radius: 0.75em;
    font: 700 0.9em Poppins;
    text-transform: uppercase;
    border: none; outline: none;
    background-color: #e0cf6b;

    transition: 0.2s ease-out;
}
.DetailedDisplay .AddToCart:hover {
    background-color: #cfbd58;
}
.DetailedDisplay .NumberSpinner {
    padding: 0.25em 0.75em;
    border-radius: 0.75em;
    border: 0.15em solid #000;

    display: flex; gap: 1em;
    justify-content: space-between;
    align-items: center;
}
.DetailedDisplay .DecreaseUnit {
    cursor: pointer;
    width: 0.75em; aspect-ratio: 1;
    background: url('Minus.svg') center / contain no-repeat;
}
.DetailedDisplay .CurrentValue {
    font: 700 0.85em Montserrat;
}
.DetailedDisplay .IncreaseUnit {
    cursor: pointer;
    width: 0.75em; aspect-ratio: 1;
    background: url('Plus.svg') center / contain no-repeat;
}
.DetailedDisplay .Unavailable {
    color: #f00;
    padding: 0.3em;
    text-align: center;
    font: 700 0.9em Poppins;
    text-transform: uppercase;
}
.DetailedDisplay .EmptyDisplay {
    padding: 1em 1.5em;
    border-radius: 0.75em;

    display: flex; gap: 1.5em;
    flex-direction: column;
    align-items: center;
}
.DetailedDisplay .NoResult {
    text-align: center;
    text-transform: uppercase;
    font: 700 1.5em 'Merriweather Sans';
}
.DetailedDisplay .ClearFilters {
    color: #fff;
    cursor: pointer;
    padding: 0.5em 2em;
    border-radius: 0.8em;
    font: 700 1.1em Poppins;
    text-transform: uppercase;
    border: none; outline: none;
    background-color: var(--BaseColor);
    box-shadow: 0em 0.2em 0.2em rgba(0, 0, 0, 0.3);

    transition: 0.2s ease-out;
}
.DetailedDisplay .ShowMore {
    cursor: pointer;
    margin-top: 1em;
    text-align: center;
    border-radius: 0.5em;
    font: 700 1em Poppins;
    padding: 0.25em 0.75em;
    text-transform: uppercase;
    border: 0.15em solid #000;
    box-shadow: 0em 0.2em 0.2em rgba(0, 0, 0, 0.2);
}


@media screen and (max-aspect-ratio: 0.6) {
    .InputSection {margin: 1em auto 1.5em;}

    .DetailedDisplay .Container {padding: 0.5em;}
}