/* src/web/static/css/store_logo.css
   Shared storefront-logo chip.

   The backplate is deliberately constant across [data-theme] values. Retailer
   marks are overwhelmingly dark-on-transparent; theming the backplate dark
   makes them vanish. Sourcing per-theme variants for 16 stores is not viable
   (most do not publish one), and a neutral plate is the conventional way to
   present third-party marks. */
/* The chip is height-locked and width-flexible: a square mark gets a square
   chip, a wordmark-shaped mark gets a wider one. Retailers overwhelmingly
   publish wide wordmarks even as their "square" apple-touch-icon (ist and
   hamilton both do), so forcing every mark into a square box letterboxed the
   wide ones down to a 6-10px sliver -- less legible than the monogram
   fallback they were meant to improve on. Width follows the asset's intrinsic
   aspect, which is why to_chip_mark() must not pad marks onto a square canvas.
   The max-width cap keeps the widest mark from crowding the store name in the
   ~195px edition rail; anything past it letterboxes as before, by design. */
.store-logo {
  --store-logo-size: 1.75rem;
  /* Derived from the height, not a literal, so surfaces that shrink the chip
     by overriding --store-logo-size alone (sales.css drops it to 1.1rem) keep
     the same shape budget instead of allowing a mark twice as wide relative
     to its own height. 2x = 3.5rem at the default 1.75rem, which is the value
     tuned against every committed mark at real edition-rail width. */
  --store-logo-max-width: calc(var(--store-logo-size) * 2);
  --store-logo-backplate: #fff;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: var(--store-logo-size);
  max-width: var(--store-logo-max-width);
  height: var(--store-logo-size);
  padding: 2px;
  border-radius: 0.375rem;
  background: var(--store-logo-backplate);
  border: 1px solid rgb(0 0 0 / 0.12);
  overflow: hidden;
}

.store-logo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-logo--wordmark {
  width: auto;
  min-width: var(--store-logo-size);
  max-width: 7rem;
  padding-inline: 0.25rem;
}

.store-logo--mono {
  background: hsl(var(--store-logo-hue, 210) 45% 42%);
  border-color: transparent;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Dark theme adjusts only the border, never the backplate. */
[data-theme="dark"] .store-logo {
  border-color: rgb(255 255 255 / 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .store-logo img { transition: transform 120ms ease; }
  a:hover > .store-logo img,
  a:hover .store-logo img { transform: scale(1.04); }
}