/* Free eCommerce Tools - the skin on top of the shared platform-tools.css
 * shell: a two-across grid of compact cards (icon, name, description, one
 * facts line), the whole card one link. Copied from the Twitter page's
 * simplified 2026-09-10 card (prefix ftt- there, fet- here) with a warm
 * amber accent instead of X blue. No profile header: the cards sit above
 * the fold. */

:root {
    --ec-ink:        #1f2430;
    --ec-muted:      #6b7280;
    --ec-border:     #e5e7eb;
    --ec-border-hov: #f0c27a;
    --ec-accent:     #b45309;
    --ec-accent-dark:#92400e;
    --ec-tint:       #fff4e5;

    --pp-h1:    var(--ec-accent-dark);
    --pp-muted: var(--ec-muted);
    --pp-link:  var(--ec-accent-dark);
    --pp-faq-highlight: #fff4e5;
}

/* -------------------------------------------------------------------
 * Grid: two cards across on desktop, one on phones
 * ------------------------------------------------------------------- */
.fet-feed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    color: var(--ec-ink);
}

/* -------------------------------------------------------------------
 * Card: icon | name + description + facts. The name is the only anchor;
 * its ::after is stretched over the card so the whole card is one click
 * target and screen readers hear one link per tool.
 * ------------------------------------------------------------------- */
.fet-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--ec-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 24px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.fet-card:hover,
.fet-card:focus-within {
    background: #fffaf3;
    border-color: var(--ec-border-hov);
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.10);
}
.fet-card:focus-within {
    outline: 2px solid var(--ec-accent);
    outline-offset: 2px;
}

.fet-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ec-tint);
    color: var(--ec-accent-dark);
    font-size: 24px;
}

.fet-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fet-card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ec-ink);
}
.fet-card-name a {
    color: inherit;
    text-decoration: none;
    outline: none;
}
.fet-card-name a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
}
.fet-card:hover .fet-card-name a {
    color: var(--ec-accent-dark);
}
.fet-card-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ec-ink);
}
.fet-card-facts {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ec-muted);
    font-feature-settings: var(--tnum);
}

/* -------------------------------------------------------------------
 * Mobile (project breakpoints: 640px, 420px)
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .fet-feed { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fet-card { padding: 16px; gap: 14px; }
    .fet-card-icon { width: 42px; height: 42px; font-size: 21px; }
}
@media (max-width: 420px) {
    .fet-card { padding: 14px; gap: 12px; }
    .fet-card-text { font-size: 14px; }
}