/* 16.59px text + padding + borders keeps the source 50px single-line control. */
.action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15.705px 24px; border: 1px solid transparent; color: var(--color-accent); background: transparent; font: 500 14px/1.185 var(--font-body); text-decoration: none; text-align: center; overflow-wrap: anywhere; }
.action--primary { background: var(--color-accent); color: white; }
.action--outline { border-color: var(--color-outline); color: var(--color-outline); }
.action--inverse { background: white; color: var(--color-outline); }
.action--light { border-color: rgb(255 255 255 / .4); color: white; --action-image-filter: brightness(0) invert(1); }
.action--light-outline { border-color: white; color: white; }
.action--accent-marker { border-color: white; }
.action--accent-marker .action__marker { background: #0095c6; }
.action--compact { padding: 11.705px 10px; font-weight: 500; }
.action--card-link { gap: 5px; padding: 11.205px 10px; }
.action--navigation { padding: 10px; font: 600 14px/1.366 'Manrope', sans-serif; }
.action--navigation.action--light { font-weight: 400; }
.action--icon { padding: 0; width: 42px; height: 42px; flex-shrink: 0; font-size: 28px; font-weight: 400; }
.action--card-control { width: 40px; height: 40px; }
.action--rail { width: 53px; height: 53px; }
.action--hero-control { width: 40px; height: 40px; background: var(--color-accent); border-color: transparent; }
.action--navigation-icon { width: 40px; height: 40px; }
.action--text { padding: 6.705px 0; justify-content: start; border-bottom-color: currentColor; }
.action__marker { display: inline-block; flex-shrink: 0; width: 8px; height: 9px; background: currentColor; mask: url('../../media/web/icon-star.svg') center / contain no-repeat; font-size: 0; }
.action__image { width: 40px; height: 40px; object-fit: contain; filter: var(--action-image-filter, none); }
.action__arrow { display: block; width: 24px; height: 24px; background: currentColor; }
.action--rail .action__arrow { width: 31.8px; height: 31.8px; }
.action__arrow--card { mask: url('../../media/web/icon-arrow-card.svg') center / contain no-repeat; }
.action__arrow--prev { mask: url('../../media/web/icon-arrow-rail-prev.svg') center / contain no-repeat; }
.action__arrow--next { mask: url('../../media/web/icon-arrow-rail-next.svg') center / contain no-repeat; }
.action__label { min-width: 0; }
.action:disabled { cursor: not-allowed; }
.action:disabled:not(.action--hero-control) { opacity: .4; }
.action--hero-control:disabled { background: transparent; border-color: rgb(255 255 255 / .4); }
.action[hidden] { display: none; }
.action:focus-visible { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-ink); }
@media (hover: hover) {
 .action:not(:disabled):hover { background: var(--color-ink); border-color: var(--color-ink); color: white; }
 .action--light:not(:disabled):hover, .action--inverse:not(:disabled):hover { background: #d9eef4; border-color: var(--color-ink); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); --action-image-filter: none; }
 .action--icon:not(:disabled):hover { background: #d9eef4; border-color: var(--color-ink); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
 .action--text:not(:disabled):hover { background: transparent; color: var(--color-ink); border-color: transparent; border-bottom-color: currentColor; text-decoration: underline; text-underline-offset: .2em; }
}
.action:not(.action--text):not(:disabled):active { background: #123d49; border-color: #123d49; color: white; box-shadow: inset 0 0 0 2px #ffffff80; }
.action--text:not(:disabled):active { background: transparent; border-color: transparent; border-bottom-color: currentColor; color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1170px) { .action--navigation { background: var(--color-accent); color: white; font: 400 14px/1.185 var(--font-body); min-height: 60px; } .action--navigation-icon { width: 60px; height: 60px; border-color: var(--color-accent); background: transparent; color: var(--color-accent); --action-image-filter: none; } }
@media (max-width: 600px) { .action--rail { width: 45px; height: 45px; } .action--rail .action__arrow { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: no-preference) { .action { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; } }