/* ==========================================================================
   CATEGORY CARD — the shared browse tile  (fp-catcard-*)
   --------------------------------------------------------------------------
   Label on top, product shot (or a tinted line icon) in the middle, lime
   discount bar at the bottom. Rendered by fp_category_card() in
   inc/category-card.php; used by the coupon archive and the deal archive.

   It lived in archive-fp_coupon.css as `fp-cag-catcard-*`, which meant any
   other page wanting the same tile had to either copy 130 lines or load that
   page's whole stylesheet. Extracted so "category tile" means one thing.

   Migrated to tokens on the way out — the original hardcoded 11px/8px/12px,
   #fff and three raw rgba shadows. Two of those sizes were also below the
   12px floor the design DNA sets, which is why the card is wider now: the
   badge reads "Up to 54% off" at 12px, and 100px could not hold that.
   ========================================================================== */

.fp-catcard {
    flex: 0 0 auto;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 116px;
    padding: 0;
    border: 0;
    border-radius: var(--fp-radius-md);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    background: var(--fp-surface);
    box-shadow: var(--fp-shadow-sm);
    /* A slight overshoot on the way up — this is a browse tile in a consumer
       app, one of the few places the DNA allows a spring. */
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
}
.fp-catcard:hover { transform: translateY(-2px); box-shadow: var(--fp-shadow-md); }
.fp-catcard:active { transform: scale(0.97); }

.fp-catcard-label {
    display: block;
    font-size: var(--fp-role-meta);
    font-weight: 700;
    color: var(--fp-text-main);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: left;
    padding: var(--fp-space-15) var(--fp-space-15) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The shot sits low and slides up on hover — the crop is what makes the tile
   feel like an object rather than a thumbnail in a box. */
.fp-catcard-imgwrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    min-height: 62px;
    overflow: hidden;
    position: relative;
}
.fp-catcard-img {
    width: 100%;
    max-height: 72px;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    transform: translateY(30%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fp-catcard:hover .fp-catcard-img { transform: translateY(0); }

/* Fallback when a category has no product shot yet. Held back at 0.55 opacity
   so a photo tile and an icon tile carry the same visual weight in one row. */
.fp-catcard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--fp-slate-600);
    opacity: 0.55;
}
.fp-catcard-icon svg { width: 26px; height: 26px; }

.fp-catcard-badge {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: var(--fp-space-075) var(--fp-space-1);
    font-size: var(--fp-role-meta);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: var(--fp-lime);
    color: var(--fp-lime-ink);
}

/* Theme tints the fallback icon only — the card itself stays white on every
   page. Eight coloured cards in one row is a paint chart, not a hierarchy. */
.fp-catcard--indigo  .fp-catcard-icon { color: var(--fp-brand-indigo); }
.fp-catcard--coral   .fp-catcard-icon { color: #E11D48; }
.fp-catcard--rose    .fp-catcard-icon { color: #DB2777; }
.fp-catcard--sky     .fp-catcard-icon { color: #0369A1; }
.fp-catcard--teal    .fp-catcard-icon { color: #0D9488; }
.fp-catcard--amber   .fp-catcard-icon { color: var(--fp-amber-dark); }
.fp-catcard--purple  .fp-catcard-icon { color: #9333EA; }
.fp-catcard--emerald .fp-catcard-icon { color: var(--fp-lime-deep); }
.fp-catcard--orange  .fp-catcard-icon { color: #EA580C; }
.fp-catcard--fuchsia .fp-catcard-icon { color: #C026D3; }
.fp-catcard--slate   .fp-catcard-icon { color: var(--fp-slate-600); }

/* Selected, for filter-style usage. */
.fp-catcard--active {
    box-shadow: 0 0 0 2px var(--fp-lime-deep), var(--fp-shadow-sm);
}
.fp-catcard--active .fp-catcard-label { color: var(--fp-lime-text); }

@media (min-width: 768px) {
    .fp-catcard { width: 124px; }
    .fp-catcard-label { font-size: var(--fp-role-label); }
    .fp-catcard-icon svg { width: 28px; height: 28px; }
}