/* Free eBay Tools - the eBay-seller skin on top of the shared
 * platform-tools.css shell: search-result style rows (icon tile, blue
 * name, description, grey fact chips, a blue "Open tool" pill), the
 * whole row one link. Palette = the four eBay wordmark colours (red,
 * blue, yellow, green) rotating over the icon tiles, eBay blue for the
 * H1, links, and the pill (operator request 2026-09-15: "the eBay page
 * does not have any theme with eBay colors"). The profile block is the
 * shared brand strip (.pp-brand) with the eBay wordmark. */

:root {
    --eb-ink:        #191919;
    --eb-muted:      #707070;
    --eb-border:     #e5e5e5;
    --eb-chip:       #f4f4f4;
    --eb-chip-ink:   #333;
    --eb-hover:      #f3f7fd;

    /* The wordmark colours (e / b / a / y) and a readable glyph shade
     * for each on its own tint. */
    --eb-red:         #e53238;
    --eb-red-ink:     #c8262d;
    --eb-red-tint:    #fdecec;
    --eb-blue:        #0064d2;
    --eb-blue-ink:    #0064d2;
    --eb-blue-tint:   #e6f0fb;
    --eb-yellow:      #f5af02;
    --eb-yellow-ink:  #a86e00;
    --eb-yellow-tint: #fff4d6;
    --eb-green:       #86b817;
    --eb-green-ink:   #567f0a;
    --eb-green-tint:  #eef7dc;

    --eb-btn:        #3665f3;
    --eb-btn-hov:    #2b55d6;

    --pp-h1:    var(--eb-blue);
    --pp-muted: var(--eb-muted);
    --pp-link:  var(--eb-blue);
    --pp-faq-highlight: #e6f0fb;
    --pp-brand-border:  var(--eb-border);
}

/* -------------------------------------------------------------------
 * List: one row per tool, hairlines between, on a single white card
 * ------------------------------------------------------------------- */
.feb-feed {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--eb-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    color: var(--eb-ink);
}

/* -------------------------------------------------------------------
 * Row: icon | name + description + chips | pill. The name is the only
 * anchor; its ::after is stretched over the row so the whole row is one
 * click. The pill is decorative (aria-hidden), the visible affordance.
 * ------------------------------------------------------------------- */
.feb-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    border-top: 1px solid var(--eb-border);
    scroll-margin-top: 24px;
    transition: background 0.15s ease;
}
.feb-row:first-child {
    border-top: 0;
}
.feb-row:hover,
.feb-row:focus-within {
    background: var(--eb-hover);
}
.feb-row:focus-within {
    outline: 2px solid var(--eb-blue);
    outline-offset: -2px;
}

/* Icon tile: the four wordmark colours in turn (row 1 red, 2 blue,
 * 3 yellow, 4 green, then repeat). */
.feb-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: var(--eb-red-tint);
    color: var(--eb-red-ink);
    font-size: 34px;
}
.feb-row:nth-child(4n+2) .feb-row-icon {
    background: var(--eb-blue-tint);
    color: var(--eb-blue-ink);
}
.feb-row:nth-child(4n+3) .feb-row-icon {
    background: var(--eb-yellow-tint);
    color: var(--eb-yellow-ink);
}
.feb-row:nth-child(4n+4) .feb-row-icon {
    background: var(--eb-green-tint);
    color: var(--eb-green-ink);
}

.feb-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feb-row-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.feb-row-name a {
    color: var(--eb-blue);
    text-decoration: none;
    outline: none;
}
.feb-row-name a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.feb-row:hover .feb-row-name a {
    color: var(--eb-blue);
    text-decoration: underline;
}
.feb-row-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--eb-ink);
}
.feb-row-facts {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.feb-row-facts li {
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--eb-chip);
    color: var(--eb-chip-ink);
    font-size: 12.5px;
    line-height: 1.4;
    font-feature-settings: var(--tnum);
}

/* "Open tool" pill: eBay's rounded blue button, vertically centred on
 * the row, darker when the row is hovered. */
.feb-row-cta {
    align-self: center;
    flex-shrink: 0;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--eb-btn);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.feb-row:hover .feb-row-cta,
.feb-row:focus-within .feb-row-cta {
    background: var(--eb-btn-hov);
}

/* -------------------------------------------------------------------
 * Mobile (project breakpoints: 640px, 420px)
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .feb-row { padding: 16px; gap: 14px; }
    .feb-row-icon { width: 52px; height: 52px; font-size: 26px; }
    .feb-row-name { font-size: 16px; }
    .feb-row-cta { display: none; }
}
@media (max-width: 420px) {
    .feb-row { padding: 14px; gap: 12px; }
    .feb-row-text { font-size: 14px; }
}