/* Edge-specific fixes for SG Petch homepage */

/* Brand logos */
#homepagebrandset.brands {
    display: flex;
    flex-direction: row;
    /* wrap, not nowrap: with 10 brands, nowrap squeezed each logo to 77px at 768px
       portrait. They now fill one line while each can be >=100px and drop to a second
       row below that. Agreed with Darrell 2026-08-03. */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0px;
    background-color: #f5f5f5;
    max-width: 100%;
    box-sizing: border-box;
}
#homepagebrandset.brands img {
    cursor: pointer;
    /* was min-width:0, which let them shrink indefinitely rather than overflow. The
       floor is what makes the wrap above happen: grow to fill the row, but never go
       below 100px - stack instead. */
    flex: 1 1 100px;
    min-width: 100px;
    /* border-box so the 10px padding and 1px border count INSIDE the 100px floor.
       Without it each logo is really 122px wide and the strip wrapped at 1024, where
       10 x 102px does fit on one line. */
    box-sizing: border-box;
    height: 100px !important;
    object-fit: contain;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: white;
    border-radius: 0px;
    /*flex: 0 1 calc(100% / 10);
    max-width: 10%;*/
}

/* Form elements */
#homepageset select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#homepageset .make-model-wrapper {
    margin-right: -6px;
    margin-left: -6px;
}
#homepageset .make-model-wrapper > * {
    margin-right: 6px;
    margin-left: 6px;
}
#homepageset #price-options,
#homepageset #finance-options {
    margin-right: -6px;
    margin-left: -6px;
}
#homepageset #price-options > *,
#homepageset #finance-options > * {
    margin-right: 6px;
    margin-left: 6px;
}

/* Buttons and tabs */
#homepageset .tab,
#homepageset button {
    transition: background-color 0.3s ease, color 0.3s ease;
}
#homepageset #clear {
    text-shadow: none;
}

/* Section item images */
#homepagetilesset.sections .section-row .section-item img {
    -ms-object-fit: contain;
}

/* Media queries for Edge-specific adjustments */
@media only screen and (min-width: 150px) and (max-width: 812px) and (orientation: portrait) {
    #homepagebrandset.brands {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
        gap: 0;
        padding: 10px 20px;
        background-color: #f5f5f5;
        justify-content: center;
        max-width: 100%;
        box-sizing: border-box;
    }
    #homepagebrandset.brands img {
        width: 100%;
        height: 100px !important;
        object-fit: contain;
        border: 1px solid #ddd;
        padding: 10px;
        background-color: white;
        border-radius: 0px;
        max-width: none;
    }
    #homepageset.search-container .search-wrapper .make-model-wrapper select,
    #homepageset #price-options select {
        font-size: 0.75em;
    }
    #homepageset.search-container .search-wrapper #filtertags,
    .main-content label {
        font-size: 0.8em;
    }
    #homepageset .tag {
        font-size: 0.75em;
        padding: 2px 10px;
        margin: 2px;
        line-height: inherit;
    }
}

@media only screen and (max-width: 1050px) {
    #homepageset.search-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        max-width: 100%;
        box-sizing: border-box;
    }
    #homepageset .search-wrapper {
        width: 100%;
        margin: 10px 0;
    }
    #homepageset .welcome {
        width: 100%;
        margin: 10px 0;
    }
}

/* Brand logos: since Lepas took the strip to 9 logos, keep them all on ONE line,
   fluidly scaling down, from iPad/tablet through large phones; only fall back to the
   2-column stack (rule above) on true mobile (<=480px). Overrides that grid for 481-812 portrait. */
@media only screen and (min-width: 481px) and (max-width: 812px) and (orientation: portrait) {
    #homepagebrandset.brands {
        display: flex;
        flex-direction: row;
        /* see the note on the base rule - this override is the 768px portrait case,
           which is where the squeeze was worst */
        flex-wrap: wrap;
        justify-content: center;
    }
    #homepagebrandset.brands img { width: 100%; flex: 1 1 100px; min-width: 100px; }
}