@import url('/landing/landing-styles/variables.css');
@import url('/landing/landing-styles/base.css');
@import url("/landing/landing-styles/navbar.css");
@import url("/landing/landing-styles/top-vendors.css");
@import url("/landing/landing-styles/footer.css");
@import url("/landing/landing-styles/cookie-banner.css");

body{
    background: var(--white);
}
.vendors-grid-section,
.vendors-search{
    padding: 0 2rem;
}

.vendors-header{
    background: inherit;
    border-radius: 12px;
    padding: 40px 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 60px;
}

.content h1{
    font-size: 40px;
    font-family: var(--headers);
    font-weight: 700;
    color: var(--second-color);
    margin: 0 0 5px 0;
}
.content p{
    font-size: 14px;
    color: var(--main-text);
}
.results-count{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #6b6b6b;
    white-space: nowrap;
    margin-top: 45px;
} 


.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 85px 0;
}
.page-btn{
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 600;
}
.page-btn.active{
    background: var(--main-text);
    color: #fff;
    border-color: var(--main-text);
}
.page-arrow{
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 50%;
    cursor: pointer;
}
.page-arrow:disabled{
    opacity: 0.7;
    cursor: not-allowed;
}

.vendor-search{
    margin-bottom: 24px;
}

.search-box-large{
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.search-box-large:focus-within{
    border: 1px solid var(--second-color);
    outline: none;
}
.search-box-large input{
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    font-family: var(--body-font);
    font-weight: 300;
}
.category-buttons{
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.each-button{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 35px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--body-font);
}

.each-button.active{
    background: var(--second-color);
    color: #fff;
}

/* auto-fit/minmax instead of a hardcoded column count: the column count
   adapts to whatever width is actually available so a card is never
   forced narrower than it can comfortably hold its name/tagline/stats.
   A fixed repeat(4, 1fr) was still forcing 4 columns at tablet widths
   (e.g. ~230px/card at 1032px), too narrow for longer shop names. */
.vendors-grid{
    display: grid;
    /* 240px matches the floor top-vendors.css already uses for this same
       .each-vendor card on the landing page — below that, the "Followers"/
       "Trust Rate" stat labels don't have room to fit on one line. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
@media (min-width: 1100px){
    /* A fixed 4 columns, not auto-fit's "as many as comfortably fit" —
       left alone, auto-fit grows past 4 on any monitor wide enough for a
       5th 240px card, which isn't what "4x4" means here. 1100px is
       deliberate, not the 900px breakpoint below: the content area is
       ~1032px wide right at that width (2rem padding either side), which
       is exactly the point 4 real columns stop fitting the 240px floor
       above — the same tablet-width case the auto-fit comment already
       documents. Auto-fit still owns everything under 1100px so that
       case stays fixed. */
    .vendors-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}
.each-vendor{
    /* Grid items default to min-width:auto, which lets a long unbroken
       word force the column itself wider than its 1fr share (the card
       "exceeding" its slot the user saw on tablet). This lets the card
       shrink to its track's actual width and rely on word-break below
       instead of blowing out the column. */
    min-width: 0;
}
.v-name h2,
.tagline{
    overflow-wrap: break-word;
    word-break: break-word;
}
.meta,
.trust-rate,
.followers{
    min-width: 0;
}

@media (max-width: 900px){
    .vendors-header{ padding: 28px 20px; margin-top: 40px; }
    .content h1{ font-size: 28px; }
    .results-count{ margin-top: 0; }
    .vendors-grid-section,
    .vendors-search{ padding: 0 20px; }
    .vendors-grid{ gap: 16px; }
    .v-name h2{ font-size: 19px; }
    .tagline{ font-size: 13px; }
}
@media (max-width: 480px){
    /* Auto-fit already drops to one column around this width (two 220px
       cards no longer fit), so this just tightens padding/text for a
       real phone screen rather than forcing the column count itself.
       Cards are full-width and stacked here, so the gap doubles as the
       breathing room between them — wider than the multi-column gap
       above so consecutive cards don't feel like they're touching. */
    .vendors-grid{ gap: 20px; }
    .each-vendor{ padding: 20px 16px; }
    .each-vendor img,
    .each-vendor .vendor-initials-fallback{ height: 70px; width: 70px; }
    .v-name h2{ font-size: 18px; }
    .tagline{ font-size: 13px; }
    .t-rate p,
    .followers p{ font-size: 12px; }
    .visit-store{ font-size: 13px; padding: 8px; }
}