/* Home "Spotlight: new businesses" carousel (inc/homespot.php, assets/js/parts/homespot.js) · 2026-11-11 */
.hsp .sec-head{align-items:center}
.hsp .eyebrow i{color:#FFB01A}
.hsp-nav{display:flex;gap:8px}
.hsp-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#E7E2D6);background:#fff;color:var(--forest,#11502B);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,opacity .15s,transform .12s}
.hsp-btn:hover:not(:disabled){background:var(--forest,#11502B);color:#fff}
.hsp-btn:active:not(:disabled){transform:scale(.94)}
.hsp-btn:disabled{opacity:.35;cursor:default}
.hsp-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 54px) / 4);gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 14px;margin:0 -2px;outline-offset:4px}
.hsp-track::-webkit-scrollbar{display:none}
.hsp-item{position:relative;scroll-snap-align:start;min-width:0;display:flex;flex-direction:column}
.hsp-item>.lcard{flex:1;height:100%}
.hsp-when{position:absolute;z-index:2;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(17,80,43,.92);color:#fff;font:600 12px/1 var(--ui);pointer-events:none}
.hsp-when i{color:#BEF264;font-size:11px}
.hsp-add{align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px 18px;min-height:220px;border:2px dashed var(--line,#D6D3D1);border-radius:18px;color:var(--ink,#1C1917);text-decoration:none;background:var(--paper,#FAF9F5)}
.hsp-add:hover{border-color:var(--leaf-2,#15803D);color:var(--ink,#1C1917)}
.hsp-add-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--forest,#11502B);color:#BEF264;font-size:18px;margin-bottom:6px}
.hsp-add b{font-size:16.5px}
.hsp-add span:last-child{font-size:14px;color:var(--muted,#78716C)}
@media (max-width:1100px){.hsp-track{grid-auto-columns:calc((100% - 36px) / 3)}}
@media (max-width:760px){
  .hsp-track{grid-auto-columns:78%;gap:12px;margin:0 -16px;padding:4px 16px 12px;scroll-padding:0 16px}
  .hsp-nav{display:none}   /* phones: swipe */
}
@media (prefers-reduced-motion:reduce){.hsp-track{scroll-behavior:auto}}

/* Category tiles (home, .cat-tile) · 2026-11-11: a flat badge in ONE colour per category with a soft light-to-dark gradient inside it,
   like an app icon. White symbol. No shadow, no glow, no gloss, not tilted. Colours: $catCol in pages/home.php (twelve different ones). */
.cat-tile .ico{position:relative;color:#fff;box-shadow:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--c) 62%,#fff) 0%,var(--c) 48%,color-mix(in srgb,var(--c) 84%,#000) 100%);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.cat-tile .ico i,.cat-tile .ico .ico-svg{position:relative;z-index:1}
.cat-tile .ico .ico-svg{width:1.4em;height:1.4em}
.cat-tile:hover .ico,.cat-tile:focus-visible .ico{transform:scale(1.1)}
@media (min-width:1021px){.cat-tile .ico{width:48px;height:48px;border-radius:15px;font-size:20px}}
@media (prefers-reduced-motion:reduce){.cat-tile .ico{transition:none}}

/* "Find your vegan friends" member cards (inc/homelive.php .hm-mc) · 2026-11-11: on desktop they were six tall centred boxes in a 3 × 2 block.
   Now tidy rows, two per line: photo on the left, name with the place beside it, the tag underneath. Phones keep their swipe row. */
@media (min-width:861px){
  .hm-mcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .hm-mc{display:grid;grid-template-columns:54px minmax(0,auto) minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:5px;align-items:center;justify-items:start;padding:12px 14px;border-radius:16px;text-align:left}
  .hm-mc-av{grid-column:1;grid-row:1 / 3;margin:0;align-self:center}
  .hm-mc-av img,.hm-mc-av .avatar{width:54px!important;height:54px!important;box-shadow:0 0 0 2px #fff,0 0 0 4px #BBF7D0}
  .hm-mc-n{grid-column:2;grid-row:1;font-size:15.5px;align-self:end}
  .hm-mc-p{grid-column:3;grid-row:1;align-self:end;justify-self:start;font-size:12.5px;padding-bottom:1px}
  .hm-mc-t{grid-column:2 / 4;grid-row:2;margin-top:0;align-self:start}
  .hm-mc:not(:has(.hm-mc-p)) .hm-mc-n{grid-column:2 / 4}
}