/* Free Etsy Tools - the Etsy-seller skin on top of the shared
 * platform-tools.css shell: a 3-across grid of rounded cream "shop"
 * cards (round icon, name, description, one facts line), the whole card
 * one link. Warm colours. The profile block is the shared brand strip
 * (.pp-brand, retinted cream below) with the Etsy wordmark. */

:root {
    --es-ink:        #222;
    --es-muted:      #6f6a64;
    --es-cream:      #fdf6ee;
    --es-border:     #f0e2d3;
    --es-border-hov: #e9a67e;
    --es-orange:     #c9480c;
    --es-orange-tint:#fbe4d6;

    --pp-h1:    var(--es-orange);
    --pp-muted: var(--es-muted);
    --pp-link:  var(--es-orange);
    --pp-faq-highlight: #fbe4d6;
    --pp-brand-bg:      var(--es-cream);
    --pp-brand-border:  var(--es-border);
    --pp-brand-radius:  20px;
}

/* -------------------------------------------------------------------
 * Grid: three cards across on desktop, two on tablets, one on phones
 * ------------------------------------------------------------------- */
.fes-feed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    color: var(--es-ink);
}

/* -------------------------------------------------------------------
 * Card: round icon over name, description, facts. The name is the only
 * anchor; its ::after is stretched over the card so the whole card is
 * one click target.
 * ------------------------------------------------------------------- */
.fes-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 22px;
    background: var(--es-cream);
    border: 1px solid var(--es-border);
    border-radius: 20px;
    scroll-margin-top: 24px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fes-card:hover,
.fes-card:focus-within {
    background: #fff;
    border-color: var(--es-border-hov);
    box-shadow: 0 4px 16px rgba(201, 72, 12, 0.12);
}
.fes-card:focus-within {
    outline: 2px solid var(--es-orange);
    outline-offset: 2px;
}

.fes-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--es-orange-tint);
    color: var(--es-orange);
    font-size: 30px;
    margin-bottom: 4px;
}
.fes-card-name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--es-ink);
}
.fes-card-name a {
    color: inherit;
    text-decoration: none;
    outline: none;
}
.fes-card-name a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
}
.fes-card:hover .fes-card-name a {
    color: var(--es-orange);
}
.fes-card-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--es-ink);
}
.fes-card-facts {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--es-muted);
    font-feature-settings: var(--tnum);
}

/* -------------------------------------------------------------------
 * Breakpoints: 1024 (shared footer step), 640, 420
 * ------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .fes-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .fes-feed { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fes-card { padding: 18px 16px; }
    .fes-card-icon { width: 50px; height: 50px; font-size: 25px; }
}
@media (max-width: 420px) {
    .fes-card { padding: 16px 14px; }
    .fes-card-text { font-size: 14px; }
}