.jf-brands {
    --jf-brand-blue: #9d1c28;
    --jf-brand-ink: #101216;
    --jf-brand-gap: 22px;
    color: var(--jf-brand-ink);
    font-family: 'Poppins', sans-serif;
    background: #f7f7f7;
    padding: clamp(28px, 4vw, 64px) 24px 26px;
    margin: 32px 0 60px;
    border-radius: 24px;
}
.jf-brands *, .jf-brands *::before, .jf-brands *::after { box-sizing: border-box; }
.jf-brands [hidden] { display: none !important; }
.jf-brands__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 14px 30px; }
.jf-brands__title::before { content: ''; display: block; width: 44px; height: 4px; margin-bottom: 14px; background: var(--jf-brand-blue); }
.jf-brands .jf-brands__heading { margin: 0; font-family: inherit; font-size: clamp(30px, 4vw, 62px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; text-transform: uppercase; }
.jf-brands__heading span { color: var(--jf-brand-blue); }
.jf-brands .jf-brands__intro { margin: 12px 0 0; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.5; }
.jf-brands .jf-brands__all { flex-shrink: 0; background: transparent; color: var(--jf-brand-blue); padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: none; cursor: pointer; }
.jf-brands__all::after { content: '\2192'; margin-inline-start: 18px; font-size: 22px; vertical-align: middle; }
.jf-brands__viewport { position: relative; }
.jf-brands .jf-brands__track { display: flex; gap: var(--jf-brand-gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 22px 8px 30px; margin: 0; list-style: none; scroll-padding-inline: 8px; }
.jf-brands__track::-webkit-scrollbar { display: none; }
.jf-brands .jf-brands__item { flex: 0 0 calc((100% - 3 * var(--jf-brand-gap)) / 3.55); min-width: 0; padding: 0; margin: 0; scroll-snap-align: start; }
.jf-brands__card { position: relative; display: block; height: clamp(340px, 33vw, 490px); isolation: isolate; border-radius: 18px; overflow: hidden; color: #fff !important; background: #242729; text-decoration: none !important; transform: translateY(0); transition: transform .3s ease, box-shadow .3s ease; }
.jf-brands__card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.15) 52%, rgba(0,0,0,.88) 100%); }
.jf-brands__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.jf-brands__photo img, img.jf-brands__photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jf-brands__content { position: absolute; inset-inline: 20px; bottom: 24px; display: flex; align-items: center; flex-direction: column; gap: 16px; text-align: center; }
.jf-brands__logo { display: block; width: 85%; height: 58px; }
.jf-brands__logo img, img.jf-brands__logo { width: 100%; height: 58px; object-fit: contain; }
.jf-brands__detail { display: block; color: #fff; font-size: 10px; line-height: 1.6; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.jf-brands__explore { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: var(--jf-brand-blue); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; box-shadow: 0 4px 14px #0003; transition: background .2s ease; }
.jf-brands__card:hover .jf-brands__explore, .jf-brands__card:focus-visible .jf-brands__explore { background: #76151e; }
.jf-brands__explore::after { content: '\2197'; margin-inline-start: 8px; }
.jf-brands__item.is-active .jf-brands__card { transform: translateY(-14px); box-shadow: 0 18px 25px -20px rgba(0,0,0,.5); }
.jf-brands__card:hover .jf-brands__photo img, .jf-brands__card:hover img.jf-brands__photo { transform: scale(1.035); }
.jf-brands .jf-brands__arrow { position: absolute; top: 46%; width: 52px; height: 52px; border: 1px solid #eee; border-radius: 50%; padding: 0; background: #fff; color: #151515; box-shadow: 0 4px 24px #0002; cursor: pointer; z-index: 2; }
.jf-brands__arrow::before { content: ''; display: block; width: 11px; height: 11px; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); margin: auto; }
.jf-brands__arrow--previous { inset-inline-start: -19px; }
.jf-brands__arrow--previous::before { transform: rotate(-135deg); }
.jf-brands__arrow--next { inset-inline-end: -19px; }
.jf-brands .jf-brands__arrow:disabled { opacity: .4; cursor: default; }
.jf-brands button:focus-visible, .jf-brands a:focus-visible { outline: 3px solid var(--jf-brand-blue); outline-offset: 3px; }
.jf-brands__pagination { display: flex; justify-content: center; align-items: center; gap: 14px; }
.jf-brands__progress { width: 106px; height: 3px; background: #ddd; overflow: hidden; border-radius: 3px; }
.jf-brands__progress-fill { display: block; height: 100%; background: var(--jf-brand-blue); transition: width .3s ease; }
.jf-brands__dots { display: flex; }
.jf-brands .jf-brands__dot { display: grid; place-items: center; width: 32px; height: 36px; border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; cursor: pointer; }
.jf-brands__dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #d3d3d3; }
.jf-brands__dot[aria-current='true']::after { background: var(--jf-brand-blue); }
.jf-brands.is-expanded .jf-brands__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.jf-brands.is-expanded .jf-brands__card { transform: none; }
[dir='rtl'] .jf-brands__arrow::before { transform: rotate(-135deg); }
[dir='rtl'] .jf-brands__arrow--previous::before { transform: rotate(45deg); }
[dir='rtl'] .jf-brands__heading { letter-spacing: 0; }
[dir='rtl'] .jf-brands__all::after { content: '\2190'; }
@media (max-width: 991px) {
    .jf-brands__header { align-items: flex-start; flex-direction: column; gap: 14px; }
    .jf-brands .jf-brands__item { flex-basis: calc((100% - 2 * var(--jf-brand-gap)) / 2.35); }
    .jf-brands__card { height: 390px; }
    .jf-brands.is-expanded .jf-brands__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .jf-brands { --jf-brand-gap: 14px; padding: 28px 16px 18px; border-radius: 16px; margin: 24px 0 36px; }
    .jf-brands__header { padding: 0 4px 16px; }
    .jf-brands .jf-brands__heading { font-size: clamp(28px, 8vw, 42px); }
    .jf-brands .jf-brands__item { flex-basis: 84%; }
    .jf-brands__card { height: 400px; }
    .jf-brands .jf-brands__arrow { width: 44px; height: 44px; }
    .jf-brands__arrow--previous { inset-inline-start: -12px; }
    .jf-brands__arrow--next { inset-inline-end: -12px; }
    .jf-brands.is-expanded .jf-brands__track { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .jf-brands *, .jf-brands *::before, .jf-brands *::after { transition: none !important; }
}