/* Homepage "Shop by player" band (players-v1 design, file v4: accordion look WITHOUT layout shift, 8 Nov 2026). Own stylesheet, no Tailwind recompile. Bump -vN on every edit.
   Template: Magento_Cms/templates/elements/players-block.phtml (printed by players-head.phtml, same gate as the category pages).
   Accordion (as in the sketch/video): the open card widens and the cards after it move right. Build rule: no in-flow size or position ever changes.
   A card is a fixed SLOT (li). Its FACE is always laid out at the EXPANDED width (absolute, left-anchored) and revealed by an animated clip-path;
   the cards after the open one get transform: translateX(--ex). Only transform, clip-path and opacity animate (compositor). The row keeps a constant
   trailing spacer of --ex so the last card can open fully and the scroll width never changes. Two fixed layers (narrow/wide) cross-fade with opacity.
   Cards never overlap (each one occupies its own strip), so the face is the hit target. Heading font = theme stack var(--font-heading); bold weights only. */
.ds-pb { position: relative; isolation: isolate; container-type: inline-size; background: #120B22; color: #fff; padding: 26px 0; overflow: hidden; }
.ds-pb::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(60% 80% at 15% 0%, rgba(123,85,255,.28), transparent 60%), radial-gradient(50% 70% at 95% 100%, rgba(191,255,0,.10), transparent 60%); }
.ds-pb-court { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .09; pointer-events: none; }
.ds-pb-in { position: relative; max-width: 1280px; margin: 0 auto; padding-inline: var(--pin);
  /* phone defaults; the sizes below follow the width of the band */
  --pin: 14px; --pad: 8px; --gap: 12px; --h: 420px;
  --rw: calc(min(100cqw, 1280px) - 2 * var(--pin));
  --w: calc((var(--rw) - 2 * var(--pad)) * .4);
  --ex: calc((var(--rw) - 2 * var(--pad)) * .34); }
.ds-pb-probe { position: absolute; left: 0; top: 0; width: var(--ex); height: 0; visibility: hidden; pointer-events: none; }
.ds-pb-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.ds-pb-top h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.ds-pb-top h2 em { font-style: normal; color: #BFFF00; }
.ds-pb-top p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #BDB6D4; }
.ds-pb-nav { display: flex; align-items: center; gap: 10px; }
.ds-pb-pos { min-width: 7ch; text-align: right; font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: .06em; color: #BDB6D4; font-variant-numeric: tabular-nums; }
.ds-pb-arr { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.ds-pb-arr:hover:not([aria-disabled="true"]) { background: #BFFF00; border-color: #BFFF00; color: #1A1A1A; }
.ds-pb-arr[aria-disabled="true"] { opacity: .3; cursor: default; }
.ds-pb-arr:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* the row: room for the focus ring on both sides and for the glow below */
.ds-pb-row { position: relative; display: flex; gap: var(--gap); list-style: none; margin: 0 0 -26px; padding: 6px calc(var(--pad) + var(--ex)) 30px var(--pad); scroll-padding-inline: var(--pad);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ds-pb-row::-webkit-scrollbar { display: none; }
@media (hover: none) { .ds-pb-row { scroll-snap-type: x mandatory; } .ds-pb-row.is-centring { scroll-snap-type: none; } }

/* SLOT: fixed size, never changes. contain keeps everything inside from dirtying the rest of the page */
.ds-pb-card { position: relative; flex: 0 0 var(--w); width: var(--w); height: var(--h); margin: 0; padding: 0; list-style: none; z-index: 1; scroll-snap-align: start; contain: layout style; isolation: isolate; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
/* accordion: everything after the open card (hover, tap or keyboard focus) moves right by the extra width */
.ds-pb-card.is-on ~ .ds-pb-card, .ds-pb-card:has(.ds-pb-link:focus-visible) ~ .ds-pb-card { transform: translateX(var(--ex)); }
/* the hit area reaches into the gap, so the pointer never falls through between two cards */
.ds-pb-card::after { content: ""; position: absolute; inset: 0 calc(var(--gap) / -2); z-index: -1; }
.ds-pb-card.is-on, .ds-pb-card:has(.ds-pb-link:focus-visible) { z-index: 3; }
.ds-pb-glow { position: absolute; left: 8%; right: 8%; bottom: -14px; height: 28px; z-index: -1; background: var(--c); filter: blur(22px); opacity: .55; pointer-events: none; }

/* LINK: slot-sized box; FACE: always the expanded width, clip-path shows only the slot part until the card is opened (clip-path also clips the hit area, so closed faces never catch a neighbour's pointer) */
.ds-pb-link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; font-family: var(--font-heading); -webkit-tap-highlight-color: transparent; outline: none; }
.ds-pb-face { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + var(--ex)); display: block; border-radius: 18px; background: #1d1430;
  clip-path: inset(0 var(--ex) 0 0 round 18px); transition: clip-path .55s cubic-bezier(.2,.8,.2,1); }
.ds-pb-card.is-on .ds-pb-face, .ds-pb-card:has(.ds-pb-link:focus-visible) .ds-pb-face { clip-path: inset(0 0 0 0 round 18px); }
/* the focus ring sits inside the face (outside it would be clipped) */
.ds-pb-link:focus-visible .ds-pb-face { outline: 3px solid #fff; outline-offset: -5px; }
.ds-pb-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -3px 0 var(--c); }

/* the two layers */
.ds-pb-n, .ds-pb-x { position: absolute; top: 0; bottom: 0; border-radius: inherit; overflow: hidden; transition: opacity .4s ease; }
.ds-pb-n { left: 0; width: var(--w); opacity: 1; }
.ds-pb-x { left: 0; right: 0; opacity: 0; }
.ds-pb-card.is-on .ds-pb-n, .ds-pb-card:has(.ds-pb-link:focus-visible) .ds-pb-n { opacity: 0; }
.ds-pb-card.is-on .ds-pb-x, .ds-pb-card:has(.ds-pb-link:focus-visible) .ds-pb-x { opacity: 1; }

.ds-pb-ph { position: absolute; inset: 0; background: #1d1430; }
.ds-pb-card.is-lower .ds-pb-ph { background: var(--bg, #EBEAE6); }
.ds-pb-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); filter: saturate(.9) contrast(1.05); transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ds-pb-card.is-lower .ds-pb-ph img { transform: scale(.9); transform-origin: 50% 100%; }
.ds-pb-card.is-on .ds-pb-ph img, .ds-pb-card:has(.ds-pb-link:focus-visible) .ds-pb-ph img { transform: scale(1.06); }
.ds-pb-card.is-lower.is-on .ds-pb-ph img, .ds-pb-card.is-lower:has(.ds-pb-link:focus-visible) .ds-pb-ph img { transform: scale(.88); }
/* overlays: dark top-to-bottom gradient + the player colour tint from the left (weaker on bright colours, so the white text keeps its contrast) */
.ds-pb-ph::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(18,11,34,.42) 0%, rgba(18,11,34,0) 34%, rgba(18,11,34,.55) 62%, rgba(18,11,34,.96) 100%),
  linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent), transparent 55%); }
.ds-pb-card.is-bright .ds-pb-ph::after { background:
  linear-gradient(180deg, rgba(18,11,34,.5) 0%, rgba(18,11,34,.08) 34%, rgba(18,11,34,.62) 62%, rgba(18,11,34,.96) 100%),
  linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 55%); }

.ds-pb-num { position: absolute; right: 8px; top: 10px; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 70%, #fff); opacity: .8; pointer-events: none; }
.ds-pb-x .ds-pb-num { font-size: 104px; opacity: 1; -webkit-text-stroke-color: var(--c); }
.ds-pb-tx { position: absolute; left: var(--tx-pad, 14px); right: var(--tx-pad, 14px); bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
/* names: shrink to fit the longer row, never below --fmin (hub 8 Nov: ~11 px phone, ~13 px desktop). Long names (12+ letters in a row): tighter letter-spacing and
   a wider text box first (--fr = width of one letter in em incl. spacing); a row that still does not fit breaks only at its hyphen (no break inside a word) */
.ds-pb-nm { --fs: 20px; --fmin: 11px; --fr: .92; display: block; font-weight: 700; line-height: 1.05; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,.5);
  font-size: max(var(--fmin), min(var(--fs), calc((var(--w) - 2 * var(--tx-pad, 14px)) / (var(--nl, 10) * var(--fr))))); }
.ds-pb-x .ds-pb-nm { --fs: 26px; font-size: max(var(--fmin), min(var(--fs), calc((var(--w) + var(--ex) - 2 * var(--tx-pad, 14px)) / (var(--nl, 10) * var(--fr))))); }
.ds-pb-nm.ds-pb-long { --fr: .86; letter-spacing: -.05em; }
.ds-pb-card.has-longname { --tx-pad: 9px; }
.ds-pb-n1, .ds-pb-n2 { display: block; }   /* first name on row 1, the rest on row 2 (Mitja 8 Nov) */

.ds-pb-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.ds-pb-bar i { display: block; width: 100%; height: 100%; background: #BFFF00; transform-origin: 0 50%; transform: scaleX(.3); will-change: transform; }

/* tablet: 4 visible, 440 px */
@container (min-width: 700px) {
  .ds-pb { padding: 34px 0 30px; }
  .ds-pb-in { --pin: 24px; --h: 440px; --w: calc((var(--rw) - 2 * var(--pad) - 36px) / 4); --ex: var(--w); }
  .ds-pb-top h2 { font-size: 28px; }
  .ds-pb-num { font-size: 92px; right: 12px; top: 4px; -webkit-text-stroke-width: 2px; }
  .ds-pb-x .ds-pb-num { font-size: 150px; }
  .ds-pb-nm { --fs: 22px; --fmin: 12px; }
  .ds-pb-in { --tx-pad: 16px; }
  .ds-pb-x .ds-pb-nm { --fs: 30px; }
}
/* desktop: 6 visible, 500 px */
@container (min-width: 1100px) {
  .ds-pb { padding: 44px 0 36px; }
  .ds-pb-in { --pin: 40px; --gap: 16px; --h: 500px; --w: calc((var(--rw) - 2 * var(--pad) - 80px) / 6); --ex: calc(var(--w) * 1.2); }
  .ds-pb-top h2 { font-size: 34px; }
  .ds-pb-num { font-size: 110px; }
  .ds-pb-x .ds-pb-num { font-size: 190px; }
  .ds-pb-nm { --fs: 22px; --fmin: 13px; }
  .ds-pb-x .ds-pb-nm { --fs: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ds-pb *, .ds-pb *::before, .ds-pb *::after { transition: none !important; } }

/* phone: the Home pill sits top-left and the narrow card is ~140 px wide, so the number moves under the pill instead of overlapping it */

/* bold display weights: Č Ć Š Ž Đ Ă Ș Ț fallback glyphs, copied from latin-ext-display.css (that file is only loaded on si/hr/me/ro/rs; without it
   "DONČIĆ" / "JOKIĆ" render the missing letters in a system font on eu/at/bg). unicode-range = only those letters download, only when used. */
@font-face{font-family:'MADE Outer Sans';src:url(../fonts/montserrat900-latin-ext.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0106-0107,U+010C-010D,U+0110-0111,U+0118-0119,U+0141-0142,U+0150-0151,U+015E-0163,U+0170-0171,U+017D-017E,U+0218-021B}
@font-face{font-family:'MADE Outer Sans';src:url(../fonts/montserrat900-latin-ext.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0106-0107,U+010C-010D,U+0110-0111,U+0118-0119,U+0141-0142,U+0150-0151,U+015E-0163,U+0170-0171,U+017D-017E,U+0218-021B}
@font-face{font-family:'MADE Outer Sans Alt';src:url(../fonts/montserrat900-latin-ext.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0106-0107,U+010C-010D,U+0110-0111,U+0118-0119,U+0141-0142,U+0150-0151,U+015E-0163,U+0170-0171,U+017D-017E,U+0218-021B}
@font-face{font-family:'MADE Outer Sans Outline';src:url(../fonts/montserrat900-latin-ext.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0106-0107,U+010C-010D,U+0110-0111,U+0118-0119,U+0141-0142,U+0150-0151,U+015E-0163,U+0170-0171,U+017D-017E,U+0218-021B}

/* browsers without container query units (Safari <= 15, Chrome < 105) would get zero-width cards: hide the band there (the rest of the homepage is unaffected) */
@supports not (width: 1cqw) { .ds-pb { display: none; } }
/* the newest signature shoe under the name (Ester 8 Nov; Kobe = the whole line): body font (the display font has no "·"), one line */
.ds-pb-sig { display: block; margin-top: 4px; font-family: var(--font-body, sans-serif); font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-pb-x .ds-pb-sig { font-size: 12px; color: var(--c); }
@supports (color: color-mix(in srgb, red, blue)) { .ds-pb-x .ds-pb-sig { color: color-mix(in srgb, var(--c) 60%, #fff); } }