/* =========================================================
   DS Market – pás značek na homepage (brands-strip.css)
   Nekonečně běžící řada log, pauza při najetí myší,
   bez JavaScriptu. Barvy upravíš v proměnných níže.
   ========================================================= */

.dsm-brands-strip {
  --dsm-bs-bg: #ffffff;          /* pozadí pásu */
  --dsm-bs-text: #2b2b2b;        /* nadpis */
  --dsm-bs-muted: #6b6b6b;       /* podtitulek, odkaz */
  --dsm-bs-accent: #3f7d3a;      /* barva odkazu / focus – sjednoť s barvou webu */
  --dsm-bs-line: #e6e6e6;        /* jemné linky nahoře a dole */
  --dsm-bs-logo-h: 56px;         /* výška loga */
  --dsm-bs-gap: 56px;            /* mezera mezi logy */
  --dsm-bs-speed: 60s;           /* délka jednoho kola (víc = pomaleji) */

  background: var(--dsm-bs-bg);
  border-top: 1px solid var(--dsm-bs-line);
  border-bottom: 1px solid var(--dsm-bs-line);
  padding: 32px 0 36px;
  margin: 40px 0;
  overflow: hidden;
}

.dsm-brands-strip__head {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dsm-brands-strip__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--dsm-bs-text);
}

.dsm-brands-strip__sub {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--dsm-bs-muted);
}

.dsm-brands-strip__all {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dsm-bs-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.dsm-brands-strip__all:hover { border-bottom-color: transparent; }

/* okno, ve kterém logy běží – okraje se jemně ztrácí */
.dsm-brands-strip__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.dsm-brands-strip__track {
  display: flex;
  width: max-content;
  animation: dsm-bs-scroll var(--dsm-bs-speed) linear infinite;
}

/* pauza při najetí myší nebo při procházení klávesnicí */
.dsm-brands-strip__viewport:hover .dsm-brands-strip__track,
.dsm-brands-strip__viewport:focus-within .dsm-brands-strip__track {
  animation-play-state: paused;
}

.dsm-brands-strip__list {
  display: flex;
  align-items: center;
  gap: var(--dsm-bs-gap);
  padding: 0 calc(var(--dsm-bs-gap) / 2);
  margin: 0;
  list-style: none;
  flex-shrink: 0;
}

.dsm-brands-strip__list li {
  margin: 0;
  padding: 0;
}
.dsm-brands-strip__list li::before { content: none !important; } /* Shoptet odrážky pryč */

.dsm-brands-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--dsm-bs-logo-h);
  padding: 6px 4px;
  border-radius: 6px;
  text-decoration: none;
}

.dsm-brands-strip__item img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.dsm-brands-strip__item:hover img,
.dsm-brands-strip__item:focus-visible img {
  filter: grayscale(0%);
  opacity: 1;
}

.dsm-brands-strip__item:focus-visible {
  outline: 2px solid var(--dsm-bs-accent);
  outline-offset: 4px;
}

/* záložní varianta, když značka zatím nemá logo – jen název */
.dsm-brands-strip__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dsm-bs-muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.dsm-brands-strip__item:hover .dsm-brands-strip__name,
.dsm-brands-strip__item:focus-visible .dsm-brands-strip__name {
  color: var(--dsm-bs-text);
}

@keyframes dsm-bs-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* mobil */
@media (max-width: 600px) {
  .dsm-brands-strip {
    --dsm-bs-logo-h: 42px;
    --dsm-bs-gap: 36px;
    padding: 24px 0 28px;
  }
  .dsm-brands-strip__title { font-size: 1.25rem; }
}

/* kdo má v systému vypnuté animace: žádný pohyb, jen ruční posun */
@media (prefers-reduced-motion: reduce) {
  .dsm-brands-strip__track { animation: none; }
  .dsm-brands-strip__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .dsm-brands-strip__list[aria-hidden="true"] { display: none; }
}