/* Brand logo — one fixed-size box for every brand mark on the storefront.
   Markup comes from templates/partials/brand_logo.html (server) and
   BrandLogo.html() in /assets/js/brand-logo.js (client) — keep in sync.
   .has-img = a logo <img> is (still) present; when every source fails the
   script removes the <img> and the class, revealing the initials. */
.bl{
  --bl:40px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:var(--bl); height:var(--bl); box-sizing:border-box;
  border-radius:calc(var(--bl) * .26); overflow:hidden; vertical-align:middle;
  background:linear-gradient(135deg,var(--bl-a,#475569),var(--bl-b,#1e293b));
  color:#fff; line-height:1;
}
.bl.has-img{ background:#fff; box-shadow:inset 0 0 0 1px #e8edf3; }
.bl img{
  position:absolute; inset:0; width:100%; height:100%; display:block; box-sizing:border-box;
  object-fit:contain; padding:calc(var(--bl) * .12); border:0;
}
/* `.bl .bl-ini` (not just .bl-ini) so host rules like `.list span{flex:1}` can't stretch it */
.bl .bl-ini{ flex:none; overflow:visible; font-weight:800; font-size:calc(var(--bl) * .38); letter-spacing:.02em; white-space:nowrap; user-select:none; color:#fff; text-transform:none; }
.bl .bl-ini.n3{ font-size:calc(var(--bl) * .3); letter-spacing:0; }
.bl.has-img .bl-ini{ visibility:hidden; }

.bl-xs{ --bl:20px; }
.bl-sm{ --bl:28px; }
.bl-md{ --bl:40px; }
.bl-lg{ --bl:72px; }
@media (max-width:480px){ .bl-lg{ --bl:60px; } }

/* Initials colours — tone = brand id % 8, so a brand is the same colour everywhere. */
.bl[data-tone="0"]{ --bl-a:#3b82f6; --bl-b:#1d4ed8; }
.bl[data-tone="1"]{ --bl-a:#8b5cf6; --bl-b:#6d28d9; }
.bl[data-tone="2"]{ --bl-a:#ec4899; --bl-b:#be185d; }
.bl[data-tone="3"]{ --bl-a:#f97316; --bl-b:#c2410c; }
.bl[data-tone="4"]{ --bl-a:#10b981; --bl-b:#047857; }
.bl[data-tone="5"]{ --bl-a:#06b6d4; --bl-b:#0e7490; }
.bl[data-tone="6"]{ --bl-a:#f59e0b; --bl-b:#b45309; }
.bl[data-tone="7"]{ --bl-a:#6366f1; --bl-b:#4338ca; }

/* "[logo] Name" inline pairing used in compact spots. */
.bl-inline{ display:inline-flex; align-items:center; gap:6px; min-width:0; vertical-align:middle; }
.bl-inline > .bl-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }