.ec-dir-wrap {
    --dir-ink:#15181B;
    --dir-body:#565D65;
    --dir-muted:#87909A;
    --dir-line:#E3E7EA;
    --dir-green:#24802B;
    --dir-green-dd:#1C6622;
    --dir-orange:#F2811D;
    font-family:'Montserrat', sans-serif;
    margin:30px 0 0;
}
.ec-dir-wrap--page { margin:8px 0 40px; }
.ec-dir-wrap *, .ec-dir-wrap *::before, .ec-dir-wrap *::after { box-sizing:border-box; }

.ec-dir-wrap .ec-dir-hint {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px !important;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--dir-muted);
}
.ec-dir-wrap .ec-dir-hint__arrows {
    flex:none;
    width:26px; height:10px;
    background:
        linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
    position:relative;
    color:var(--dir-orange);
    animation:ec-dir-nudge 1.8s ease-in-out infinite;
}
.ec-dir-wrap .ec-dir-hint__arrows::before,
.ec-dir-wrap .ec-dir-hint__arrows::after {
    content:'';
    position:absolute;
    top:1px;
    width:6px; height:6px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
}
.ec-dir-wrap .ec-dir-hint__arrows::before { left:0; transform:rotate(-135deg); }
.ec-dir-wrap .ec-dir-hint__arrows::after  { right:0; transform:rotate(45deg); }
@keyframes ec-dir-nudge {
    0%, 100% { transform:translateX(0); }
    50%      { transform:translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .ec-dir-wrap .ec-dir-hint__arrows { animation:none; }
}
.ec-dir-wrap.is-scrolled .ec-dir-hint { opacity:0; transition:opacity .3s ease; pointer-events:none; }

.ec-dir {
    display:flex;
    justify-content:safe center;
    gap:26px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 16px;
    margin:0;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#C9D0D6 transparent;
}
.ec-dir:focus-visible { outline:3px solid var(--dir-orange); outline-offset:4px; border-radius:8px; }
.ec-dir::-webkit-scrollbar { height:6px; }
.ec-dir::-webkit-scrollbar-track { background:#EEF1F3; border-radius:99px; }
.ec-dir::-webkit-scrollbar-thumb { background:#C9D0D6; border-radius:99px; }
.ec-dir::-webkit-scrollbar-thumb:hover { background:#AEB7BF; }

.ec-dir .ec-dir__group {
    flex:0 0 268px;
    width:268px;
    min-width:0;
    margin:0;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
    scroll-snap-align:start;
}

.ec-dir img.ec-dir__thumb {
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    border:0;
    border-radius:12px;
    margin:0 0 14px;
    max-width:100%;
}
.ec-dir img.ec-dir__thumb.ec-dir__thumb--logo {
    height:auto;
    aspect-ratio:3/2 !important;
    object-fit:contain;
    padding:26px;
}

.ec-dir h3.ec-dir__title {
    font-family:'Montserrat', sans-serif;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.78rem !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    line-height:1.3 !important;
    color:var(--dir-ink) !important;
    margin:0 !important;
    padding:0;
    border:0;
}
.ec-dir .ec-dir__label { min-width:0; }
.ec-dir .ec-dir__count {
    font-size:.72rem; font-weight:600; color:var(--dir-muted);
    letter-spacing:0; text-transform:none;
}
.ec-dir .ec-dir__bar { display:block; width:26px; height:2px; background:var(--dir-orange); margin:10px 0 14px; }

.ec-dir .ec-dir__list, .ec-dir ul.ec-dir__list {
    list-style:none !important; margin:0 !important; padding:0 !important;
}
.ec-dir .ec-dir__list li {
    list-style:none !important; list-style-type:none !important;
    padding-left:0 !important; background:none !important;
    margin:0 0 8px; line-height:1.45;
}
.ec-dir .ec-dir__list li::before, .ec-dir .ec-dir__list li::marker { content:none !important; display:none !important; }
.ec-dir .ec-dir__list a {
    display:inline-block;
    font-size:.9rem; font-weight:500;
    color:var(--dir-body); text-decoration:none;
    transition:color .16s ease, transform .16s ease;
}
.ec-dir .ec-dir__list a:hover, .ec-dir .ec-dir__list a:focus { color:var(--dir-green-dd); transform:translateX(3px); }
.ec-dir .ec-dir__list a:focus-visible { outline:2px solid var(--dir-orange); outline-offset:3px; border-radius:3px; }

.ec-dir--single { display:block; overflow:visible; padding-bottom:0; }
.ec-dir--single .ec-dir__group { flex:none; width:100%; }
.ec-dir--single .ec-dir__list { columns:3; column-gap:34px; }
.ec-dir--single .ec-dir__list li { break-inside:avoid; }
.ec-dir-wrap--page .ec-dir-hint { display:none; }

@media (max-width:900px) { .ec-dir--single .ec-dir__list { columns:2; } }

@media (max-width:767px) {
    .ec-dir { gap:16px; }
    .ec-dir .ec-dir__group { flex:0 0 62vw; width:62vw; max-width:280px; }
    .ec-dir img.ec-dir__thumb { border-radius:10px; margin-bottom:12px; }
    .ec-dir img.ec-dir__thumb--logo { padding:18px; }
    .ec-dir .ec-dir__list a { padding:3px 0; }
    .ec-dir .ec-dir__list a:hover, .ec-dir .ec-dir__list a:focus { transform:none; }
    .ec-dir--single .ec-dir__list { columns:1; }
    .ec-dir-wrap { margin-top:24px; }
}

.ec-dir a.ec-dir__group--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease;
}
.ec-dir a.ec-dir__group--link:hover { transform: translateY(-3px); }
.ec-dir a.ec-dir__group--link:hover .ec-dir__label { color: var(--dir-green); }
.ec-dir a.ec-dir__group--link:focus-visible { outline: 3px solid var(--dir-orange); outline-offset: 4px; border-radius: 12px; }
.ec-dir a.ec-dir__group--link .ec-dir__title { transition: color .16s ease; }

.ec-dir-wrap.is-static .ec-dir-hint { display: none; }

.ec-dir-wrap.is-static .ec-dir { justify-content:center; }

.ec-dir .ec-dir__group--logo .ec-dir__title { justify-content:center; text-align:center; }
.ec-dir .ec-dir__group--logo .ec-dir__bar { margin-left:auto; margin-right:auto; }
.ec-dir .ec-dir__group--logo .ec-dir__list { text-align:center; }

.ec-dir.ec-dir--centered h3.ec-dir__title { justify-content:center; text-align:center; }
.ec-dir.ec-dir--centered .ec-dir__bar { margin-left:auto; margin-right:auto; }
.ec-dir.ec-dir--centered .ec-dir__list { text-align:center; }
