.fpd-featured-suppliers {
    --fpd-card-height: 328px;
    --fpd-card-text: #fff;
    --fpd-card-surface: #191919;
    --fpd-overlay: linear-gradient(180deg, #0004, #0002 22%, #000e 77%, #000 100%);
    --fpd-module-bg: #000;
    --fpd-module-fg: #fff;
    --fpd-columns: 3;
    --fpd-peek: 35;
    --fpd-gap: 20;
    background: var(--fpd-module-bg);
    color: var(--fpd-module-fg);
    font-family: Poppins, sans-serif;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    contain: inline-size;
}
.fpd-featured-suppliers--light {
    --fpd-module-bg: #fff;
    --fpd-module-fg: #000;
}
.fpd-featured-suppliers--compact { --fpd-card-height: 260px; }
.fpd-featured-suppliers--tall { --fpd-card-height: 410px; }
.fpd-featured-suppliers__header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 20px;
    max-inline-size: min(100%, var(--fpd-edge-header-width, 100%));
}
.fpd-featured-suppliers .fpd-featured-suppliers__header h2 {
    font: 400 22px/1.25 Poppins, sans-serif;
    color: inherit;
    letter-spacing: normal;
    margin: 0;
}
.fpd-featured-suppliers__controls:not([hidden]) { display: flex; gap: 10px; align-items: center; margin-inline-start: auto; padding-inline-end: 4px; }
.fpd-featured-suppliers__progress {
    box-sizing: border-box; display: flex; align-items: center;
    width: 150px; height: 28px; padding: 0 12px; margin-inline-end: 10px;
    border-radius: 20px; background: #f5f5f5;
}
.fpd-featured-suppliers__controls button {
    box-sizing: border-box; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
    margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f4f4f4; color: #000;
    box-shadow: none; font: 400 30px/1 Arial, sans-serif;
}
.fpd-featured-suppliers__controls button:disabled { opacity: .35; cursor: default; }
.fpd-featured-suppliers__controls button:hover:not(:disabled) { background: #ddd; color: #000; }
@media (max-width: 600px) {
    .fpd-featured-suppliers__progress { width: 110px; margin-inline-end: 0; }
}
.fpd-featured-suppliers .fpd-featured-suppliers__track {
    --gap: calc(var(--fpd-gap-effective) * 1px);
    --columns: min(var(--fpd-columns-effective), var(--fpd-card-count));
    --peek: clamp(0, (var(--fpd-card-count) - var(--columns)) * 100, var(--fpd-peek-effective));
    --visible: calc(var(--columns) + var(--peek) / 100);
    background: var(--fpd-module-bg);
    display: grid;
    grid-auto-flow: column;
    /* Fix each track width so extra cards scroll instead of shrinking to fit. */
    grid-auto-columns: max(0px, calc((100% - (var(--columns) - clamp(0, 1 - var(--peek), 1)) * var(--gap)) / var(--visible)));
    gap: var(--gap);
    width: var(--fpd-edge-width, 100%);
    max-width: none;
    overscroll-behavior-inline: contain;
    box-sizing: border-box;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}
.fpd-featured-suppliers__track::-webkit-scrollbar { display: none; }
.fpd-featured-suppliers__card { min-width: 0; scroll-snap-align: start; border-radius: var(--fpd-card-radius, 5px); overflow: hidden; background: var(--fpd-card-surface); }
.fpd-featured-suppliers__card .fpd-featured-suppliers__link {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
    box-sizing: border-box; min-height: var(--fpd-card-height-effective); height: 100%;
    padding: 58px 18px 18px; color: var(--fpd-card-text); text-decoration: none;
}
.fpd-featured-suppliers__link:focus-visible { outline: 3px solid currentColor; outline-offset: -4px; }
.fpd-featured-suppliers__card .fpd-featured-suppliers__cover,
.fpd-featured-suppliers__link::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.fpd-featured-suppliers__card .fpd-featured-suppliers__cover { object-fit: cover; z-index: -2; border-radius: 0; }
.fpd-featured-suppliers__link::before { content: ""; z-index: -1; background: var(--fpd-overlay); }
.fpd-featured-suppliers__badge {
    position: absolute; inset: 13px auto auto 13px; padding: 4px 8px; border: 1px solid #fff;
    border-radius: 4px; background: #18181bcc; color: #fff; font-size: 11px; text-transform: uppercase;
}
.fpd-featured-suppliers__details { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.fpd-featured-suppliers__logo { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; background: #fff; }
.fpd-featured-suppliers__identity { grid-column: 2; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.fpd-featured-suppliers .fpd-featured-suppliers__identity h3 { color: inherit; margin: 0 0 4px; font-family: inherit; font-size: 15px; line-height: 1.25; font-weight: 600; }
.fpd-featured-suppliers__identity span { display: block; }
.fpd-featured-suppliers__identity .fpd-featured-suppliers__location { display: flex; align-items: baseline; gap: 4px; }
.fpd-featured-suppliers__location svg { width: 12px; flex: 0 0 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.fpd-featured-suppliers__cta {
    grid-column: 1 / -1; justify-self: start;
    margin-top: 8px;
    padding: 10px 16px;
    border-radius: 24px;
    background: #444;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
}
@media (max-width: 1024px) { .fpd-featured-suppliers { --fpd-columns: 2; --fpd-peek: 25; --fpd-gap: 16; } }
@media (max-width: 620px) { .fpd-featured-suppliers { --fpd-columns: 1; --fpd-peek: 14; --fpd-gap: 12; } }

.fpd-featured-suppliers__identity:first-child { grid-column: 1 / -1; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .fpd-featured-suppliers__card .fpd-featured-suppliers__cover { transition: transform 450ms ease; }
    .fpd-featured-suppliers__card:hover .fpd-featured-suppliers__cover { transform: scale(1.06); }
}
.fpd-featured-suppliers__identity .fpd-featured-suppliers__meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.fpd-featured-suppliers__identity .fpd-featured-suppliers__verified {
    display: inline-grid; place-items: center; vertical-align: middle;
    width: 15px; height: 15px; margin-inline-start: 4px;
    border-radius: 50%; background: #007da0; color: #fff; font-size: 11px;
}
.fpd-featured-suppliers__identity .fpd-featured-suppliers__phone-icon { display: inline; }

.fpd-featured-suppliers {
    --fpd-columns-effective: var(--fpd-columns-saved, var(--fpd-columns));
    --fpd-peek-effective: var(--fpd-peek-saved, var(--fpd-peek));
    --fpd-gap-effective: var(--fpd-gap-saved, var(--fpd-gap));
    --fpd-card-height-effective: var(--fpd-card-height-saved, var(--fpd-card-height));
}

@media (max-width: 1024px) {
    .fpd-featured-suppliers {
        --fpd-columns-effective: var(--fpd-columns-saved-tablet, var(--fpd-columns));
        --fpd-peek-effective: var(--fpd-peek-saved-tablet, var(--fpd-peek));
        --fpd-gap-effective: var(--fpd-gap-saved-tablet, var(--fpd-gap));
        --fpd-card-height-effective: var(--fpd-card-height-saved-tablet, var(--fpd-card-height));
    }
}

@media (max-width: 620px) {
    .fpd-featured-suppliers {
        --fpd-columns-effective: var(--fpd-columns-saved-mobile, var(--fpd-columns));
        --fpd-peek-effective: var(--fpd-peek-saved-mobile, var(--fpd-peek));
        --fpd-gap-effective: var(--fpd-gap-saved-mobile, var(--fpd-gap));
        --fpd-card-height-effective: var(--fpd-card-height-saved-mobile, var(--fpd-card-height));
    }
}

/* Give image-free listings an intentional cover without borrowing another club’s artwork. */
.fpd-featured-suppliers__card--placeholder .fpd-featured-suppliers__link {
    background-color: #202c2a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 150' fill='none' stroke='%23739187' stroke-opacity='.4' stroke-width='1.5'%3E%3Cpath d='M14 14h212v122H14zM120 14v122M14 46h33v58H14M226 46h-33v58h33M14 61h13v28H14M226 61h-13v28h13'/%3E%3Ccircle cx='120' cy='75' r='21'/%3E%3C/svg%3E");
    background-position: center 20%;
    background-size: 85% auto;
    background-repeat: no-repeat;
}
.fpd-featured-suppliers__card .fpd-featured-suppliers__fallback-logo {
    position: absolute;
    inset: 14% 20% auto;
    width: 60%;
    height: 36%;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
}

.fpd-featured-suppliers .fpd-featured-suppliers__meter {
    display: block;
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 3px;
    min-height: 3px;
    max-height: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #d5d5d5;
}
.fpd-featured-suppliers .fpd-featured-suppliers__meter::before {
    content: "";
    display: block;
    width: var(--fpd-progress-fill, 0%);
    height: 100%;
    background: #000;
}