/* ============================================================================
   Valmier website — recent purchases feed layer (v2, 2026-10-23)
   Shared by the home page #recent section and /recent/. Only the hooks that
   /recent/feed.js produces are styled here: .feed, li.fresh, .k (.stock/.resale),
   b, small, time, .empty and .feed-live — keep those names, the JS and the home
   page depend on them. The /recent/ page chrome below is scoped under .rc- so it
   never touches the home page. Colours/type come from /ui.css tokens.
   ========================================================================== */

/* ---- feed cards ---------------------------------------------------------- */
.feed{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feed li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:13px 16px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(28,28,30,.9),rgba(17,17,19,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),var(--shadow-1);
  transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.feed li:hover{border-color:rgba(242,134,42,.3);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px -36px #000}
.feed li.fresh{animation:feed-in .7s cubic-bezier(.2,.8,.2,1)}
@keyframes feed-in{from{opacity:0;transform:translateY(-8px)}}

/* kind medallion — the JS writes the glyph inside and sets aria-hidden */
.feed .k{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:19px;line-height:1;
  color:var(--gold);border:1px solid rgba(224,56,43,.28);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.14),transparent 62%),
             linear-gradient(135deg,rgba(196,22,58,.34),rgba(74,30,58,.34))}
.feed .k.stock{color:#FFD3A4;border-color:rgba(242,134,42,.34);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.16),transparent 62%),
             linear-gradient(135deg,rgba(242,134,42,.32),rgba(74,30,58,.34))}
.feed .k.resale{color:#8BE3B9;border-color:rgba(63,178,127,.32);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.14),transparent 62%),
             linear-gradient(135deg,rgba(63,178,127,.24),rgba(74,30,58,.34))}
.feed b{display:block;color:var(--bone);font-size:.95rem;font-weight:700;line-height:1.75}
.feed small{display:block;color:var(--ash-dim);font-size:.8rem;line-height:1.7}
.feed time{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:2px 10px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(244,236,230,.05);
  color:var(--ash);font-size:.76rem;line-height:1.5;white-space:nowrap}
.feed .empty{display:grid;place-items:center;min-height:104px;padding:22px;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:rgba(244,236,230,.02);
  color:var(--ash-dim);font-size:.88rem}
.feed .empty::before{content:"";width:26px;height:26px;margin-bottom:8px;border-radius:50%;
  border:2px solid rgba(242,134,42,.3);border-top-color:var(--soul);animation:feed-spin 1.1s linear infinite}
@keyframes feed-spin{to{transform:rotate(360deg)}}

/* live pill */
.feed-live{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:3px 12px;
  border-radius:var(--r-pill);border:1px solid rgba(63,178,127,.28);background:rgba(63,178,127,.1);
  color:#8BE3B9;font-size:.78rem;font-weight:700;line-height:1.6;white-space:nowrap}
.feed-live::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(63,178,127,.6);animation:feed-pulse 2s infinite}
@keyframes feed-pulse{70%{box-shadow:0 0 0 9px rgba(63,178,127,0)}100%{box-shadow:0 0 0 0 rgba(63,178,127,0)}}

/* ---- /recent/ page chrome (scoped, never on the home page) --------------- */
.rc-hero{position:relative;overflow:hidden;isolation:isolate;
  padding:calc(var(--nav-h) + clamp(24px,4.4vw,46px)) 0 clamp(32px,5vw,52px);
  background:
    radial-gradient(110% 100% at 88% -42%,rgba(122,44,102,.42),transparent 62%),
    radial-gradient(92% 82% at 4% -30%,rgba(179,18,46,.34),transparent 58%),
    radial-gradient(60% 46% at 50% 118%,rgba(242,134,42,.12),transparent 72%)}
.rc-hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(242,134,42,.5) 32%,rgba(255,217,168,.8) 50%,rgba(242,134,42,.4) 68%,transparent);
  box-shadow:0 0 20px 1px rgba(242,134,42,.2)}
.rc-hero .crumbs{margin-bottom:18px}
.rc-hero .kicker{margin-bottom:12px}
.rc-hero h1{margin:0 0 14px;max-width:18ch}
.rc-hero .lead{max-width:58ch;margin:0 0 22px;color:var(--ash);font-size:var(--fs-lead);line-height:1.95}
.rc-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.rc-hero__stats{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;
  color:var(--ash);font-size:.84rem}
.rc-hero__stats li{display:inline-flex;align-items:center;gap:8px;min-height:26px}
.rc-hero__stats svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--soul);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.rc-feed{padding-block:clamp(26px,4vw,40px) 0}
.rc-feed__inner{max-width:840px;margin-inline:auto}
.rc-feed__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;color:var(--ash-dim);font-size:.82rem}
.rc-feed__bar strong{color:var(--ash);font-size:.85rem}
.rc-feed .feed{gap:12px}
.rc-feed .feed li{padding:15px 18px}
.rc-feed .feed .k{width:46px;height:46px;font-size:21px}
.rc-feed__note{margin:16px 0 0;color:var(--ash-dim);font-size:.8rem;line-height:1.9;text-align:center}

/* what the feed shows / never shows */
.privacy{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px;margin-inline:auto}
.privacy__card{padding:clamp(18px,2.6vw,26px)}
.privacy__card h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:1.02rem}
.privacy__card h3 svg{width:21px;height:21px;flex:none;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.privacy__card--yes h3 svg{stroke:var(--ok)}
.privacy__card--no h3 svg{stroke:var(--ash-dim)}
.privacy__card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.privacy__card li{display:flex;gap:9px;color:var(--ash);font-size:.88rem;line-height:1.85}
.privacy__card li svg{width:17px;height:17px;flex:none;margin-top:4px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.privacy__card--yes li svg{stroke:var(--ok)}
.privacy__card--no li svg{stroke:var(--ash-dim)}

/* CTA band */
.rc-band{position:relative;overflow:hidden;isolation:isolate;max-width:940px;margin-inline:auto;
  border-radius:var(--r-xl);padding:clamp(36px,5.4vw,64px) clamp(20px,4vw,44px);text-align:center;
  background:
    radial-gradient(600px 300px at 16% 0%,rgba(242,134,42,.3),transparent 70%),
    linear-gradient(125deg,#C4163A,#8E1B45 38%,#4A1E3A 64%,#7A1B43);
  box-shadow:0 50px 120px -54px rgba(196,22,58,.95)}
.rc-band::after{content:"";position:absolute;inset:auto 0 0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,217,168,.85),var(--soul),transparent);
  box-shadow:0 0 22px rgba(242,134,42,.8)}
.rc-band h2{margin:0 0 12px;color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.rc-band p{margin:0 auto 26px;max-width:52ch;color:rgba(255,255,255,.86);font-size:1rem;line-height:1.9}
.rc-band .row{justify-content:center;gap:10px}
.rc-band .btn--ghost{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff}
.rc-band .btn--ghost:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}

/* ---- responsive ---------------------------------------------------------- */
@media(max-width:760px){
  .privacy{grid-template-columns:1fr}
  .rc-band .btn{width:100%}
}
@media(max-width:520px){
  .feed li{gap:10px;padding:12px}
  .feed .k{width:37px;height:37px;font-size:17px;border-radius:11px}
  .feed b{font-size:.9rem}
  .feed small{font-size:.78rem}
  .feed time{font-size:.72rem;padding:2px 8px}
  .rc-feed .feed li{padding:13px}
  .rc-feed .feed .k{width:39px;height:39px;font-size:18px}
  .rc-hero__stats{font-size:.8rem}
}
@media(max-width:400px){
  .feed li{grid-template-columns:auto minmax(0,1fr)}
  .feed time{grid-column:2;justify-self:start;margin-top:2px}
  .feed .empty{grid-column:1/-1}
}

/* ---- motion + js-off safety --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .feed li.fresh,.feed-live::before,.feed .empty::before{animation:none}
}
@media (scripting:none){
  .feed .empty::before{display:none}
}