/* Brand stories row (dunkshop.rs test), Instagram-story look. Unlayered overlay: no Tailwind recompile. Bump -vN on every edit.
   Font: theme stack var(--font-heading) = MADE Outer Sans (+ fallback). Mitja 4 Nov: everything in MADE Outer Sans, so all text here uses the bold weights
   (700/800 = real MADE; weights <= 500 are Montserrat by the site font setup, memory project_font_architecture). */
.ds-bs-track { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; padding: 16px 0; scrollbar-width: none; }
.ds-bs-track::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .ds-bs-track { grid-auto-columns: calc((100% - 1rem) / 2.2); gap: 16px; } }
@media (min-width: 1024px) { .ds-bs-track { grid-auto-columns: calc((100% - 3rem) / 4); } }
.ds-bs-card { position: relative; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff; background: #3a3238; font-family: var(--font-heading); }
.ds-bs-frame { position: absolute; inset: 0; opacity: 0; z-index: 0; pointer-events: none; transition: opacity .4s; }
.ds-bs-frame.is-on { opacity: 1; z-index: 10; }
.ds-bs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.ds-bs-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 32%, rgba(0,0,0,0) 58%), linear-gradient(to bottom, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 6rem); }
/* tap zones: left third = back, rest = forward (like Instagram); links (caption, tags) sit above them */
.ds-bs-zone { position: absolute; top: 0; bottom: 0; z-index: 5; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ds-bs-zone--prev { left: 0; width: 33%; }
.ds-bs-zone--next { right: 0; width: 67%; }
.ds-bs-zone:focus-visible { outline: 3px solid #BFFF00; outline-offset: -3px; }
.ds-bs-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; pointer-events: none; }
.ds-bs-cap-link { display: flex; flex-direction: column; align-items: flex-start; color: #fff; text-decoration: none; pointer-events: auto; }
.ds-bs-cap-link:focus-visible { outline: 3px solid #BFFF00; outline-offset: 4px; border-radius: 6px; }
.ds-bs-title { display: block; margin: 0 0 6px; color: #fff; font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: break-word; }
.ds-bs-title--long { font-size: 22px; }
.ds-bs-text { display: block; margin-bottom: 12px; max-width: 30ch; font-size: 14px; font-weight: 700; line-height: 1.35; }
.ds-bs-btn { display: inline-block; margin-top: 6px; padding: 11px 16px; border-radius: 8px; background: #BFFF00; color: #1A1A1A; font-weight: 700; font-size: 13px; }
.ds-bs-text + .ds-bs-btn { margin-top: 0; }
.ds-bs-tag { position: absolute; z-index: 16; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px 4px 9px; border-radius: 999px; background: rgba(255,255,255,.94); color: #1A1A1A; font-size: 12px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ds-bs-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2A1857; box-shadow: 0 0 0 3px rgba(42,24,87,.25); }
.ds-bs-tag:focus-visible, .ds-bs-tag:hover { outline: 2px solid #BFFF00; }
.ds-bs-progress { position: absolute; top: 4px; left: 12px; right: 12px; z-index: 20; display: flex; gap: 3px; }
.ds-bs-progress button { flex: 1; height: 24px; padding: 10px 0; border: 0; border-radius: 3px; cursor: pointer; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) center / 100% 3px no-repeat; } /* 24 px hit area (WCAG 2.5.8), 3 px bar */
.ds-bs-progress button span { display: block; height: 3px; border-radius: 3px; background: #fff; transition: width .1s linear; }
.ds-bs-progress button:focus-visible { outline: 2px solid #BFFF00; outline-offset: 1px; }
.ds-bs-head { position: absolute; top: 28px; left: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.ds-bs-avatar { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px #BFFF00; display: block; overflow: hidden; background: #fff; }
.ds-bs-avatar img { display: block; width: 100%; height: 100%; }
.ds-bs-who { font-size: 13px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ds-bs-who span { display: block; font-size: 12px; font-weight: 700; opacity: .9; }
.ds-bs-count { position: absolute; top: 32px; right: 12px; z-index: 20; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 11px; font-weight: 700; line-height: 1.2; pointer-events: none; }
.ds-bs-round { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #2A1857; background: none; color: #2A1857; display: grid; place-items: center; font-size: 13px; cursor: pointer; }
.ds-bs-round--solid { background: #2A1857; color: #fff; font-size: 22px; line-height: 1; }
.ds-bs-round:focus-visible { outline: 2px solid #2A1857; outline-offset: 2px; }
.ds-bs-round:disabled { opacity: .3; cursor: default; }
.ds-bs-arrow { display: none; }
@media (min-width: 640px) { .ds-bs-arrow { display: grid; } }
@media (prefers-reduced-motion: reduce) { .ds-bs-frame, .ds-bs-progress button span { transition: none; } }
.ds-bs-tag--l { left: 12px; }
.ds-bs-tag--r { right: 12px; }