/* bazaar/web/static/shop.css — Shop-specific styles on top of motif.
 *
 * Keep this file narrow. Navbar, buttons, cards, forms, dropdowns, and
 * responsive helpers all live in motif — use those primitives. This
 * file only holds shop-unique overrides.
 */

/* --- Shop header wraps motif's .navbar. The navbar itself supplies
 *     layout + hamburger + link styling; we just re-paint the surface
 *     with the shop's brand gradient. No per-link color overrides:
 *     motif's .navbar already gives us readable text on dark bg
 *     (opacity 0.85, hover to 1.0, active highlight).
 */
.shop-header .navbar {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-600));
}
.shop-header .navbar .navbar-collapse > a {
  color: #fff;
}

/* --- Product card thumbnail --- */
.card-thumb {
  height: 180px;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-neutral-100);
}

/* --- Language switcher inside the navbar (not its own colour scheme —
 *     inherits the navbar's). Kept here because .lang-switcher is a
 *     shop-specific cluster, not a motif component. */
.lang-switcher { display: inline-flex; gap: var(--space-2); align-items: center; }
.lang-switcher a { font-size: var(--text-xs); }
.lang-switcher a.active { font-weight: var(--font-bold); }