.MenuItem__item--RBDdx {
    list-style: none;
    display: flex;
    align-items: stretch;
    position: relative;
}
.MenuItem__item--RBDdx.MenuItem__hidden--fYG6j {
        opacity: 0.4;
}
.MenuItem__link--KOGKL {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--primary-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--primary-color-contrast, #ffffff);
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.MenuItem__link--KOGKL:hover {
        background-color: color-mix(in srgb, var(--primary-color-contrast, #ffffff) 14%, transparent);
        color: var(--primary-color-contrast, #ffffff);
        text-decoration: none;
}
.MenuItem__icon--v1_KL :deep(svg) {
        width: 14px;
        height: 14px;
        display: block;
}
.MenuItem__title--_YxxP {
    display: inline-block;
}
.MenuItem__caret--krgm1 :deep(svg) {
        width: 14px;
        height: 14px;
        display: block;
        transition: transform 0.15s ease;
}
.MenuItem__open--Gk3dw .MenuItem__caret--krgm1 :deep(svg) {
    transform: rotate(180deg);
}
.MenuItem__item--RBDdx[aria-current="page"] .MenuItem__link--KOGKL {
        background-color: var(--primary-color-contrast, #ffffff);
        color: var(--primary-color, #1976d2);
        font-weight: 500;
}
.MenuItem__item--RBDdx[aria-current="page"] .MenuItem__link--KOGKL:hover {
        background-color: var(--primary-color-contrast, #ffffff);
        color: var(--primary-color, #1976d2);
}
.MenuItem__dropdown--d0joa {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background-color: var(--secondary-color, #ffffff);
    color: var(--body-text-color, #0f172a);
    border: 1px solid color-mix(in srgb, var(--body-text-color, #0f172a) 12%, transparent);
    border-radius: 12px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--body-text-color, #0f172a) 14%, transparent);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.MenuItem__dropdownLink--vlv5d {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--primary-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13px;
    color: var(--body-text-color, #0f172a);
    text-decoration: none;
    white-space: nowrap;
}
.MenuItem__dropdownLink--vlv5d:hover {
        background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 6%, transparent);
        color: var(--body-text-color, #0f172a);
        text-decoration: none;
}
.MenuItem__dropdownLink--vlv5d[aria-current="page"] {
        font-weight: 600;
}


.WordmarkLink__wordmark--KrqqY {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color-contrast, #ffffff);
    text-decoration: none;
    font-family: var(--primary-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Browsers draw the alt text in the logo's place while the image downloads. */
.WordmarkLink__logo--_74Y1 {
    max-height: 32px;
    width: auto;
    display: block;
    color: transparent;
}
.WordmarkLink__text--yCL40 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}


.ShoppingCartCountLabel__badge--hYkH9 {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--primary-color-contrast, #ffffff);
    color: var(--primary-color, #1976d2);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    display: grid;
    place-items: center;
}


.BasketButton__button--IwcXR {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-color-contrast, #ffffff) 22%, transparent);
    background-color: var(--primary-color, #1976d2);
    color: var(--primary-color-contrast, #ffffff);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.BasketButton__button--IwcXR:hover {
        background-color: color-mix(in srgb, var(--primary-color-contrast, #ffffff) 14%, var(--primary-color, #1976d2));
}
.BasketButton__icon--m6YG7 :deep(svg) {
        width: 16px;
        height: 16px;
        display: block;
}


.MobileSheet__hamburger--qNLzx {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-color-contrast, #ffffff) 22%, transparent);
    background-color: var(--primary-color, #1976d2);
    color: var(--primary-color-contrast, #ffffff);
    display: grid;
    grid-template-rows: repeat(3, 2px);
    align-content: center;
    justify-items: center;
    cursor: pointer;
    gap: 4px;
    padding: 0;
}
.MobileSheet__hamburger--qNLzx:hover {
        background-color: color-mix(in srgb, var(--primary-color-contrast, #ffffff) 14%, var(--primary-color, #1976d2));
}
@media (width >= 768px) {
.MobileSheet__hamburger--qNLzx {
        display: none
}
}
.MobileSheet__bar--QBRWD {
    grid-column: 1;
    width: 18px;
    height: 2px;
    background-color: var(--primary-color-contrast, #ffffff);
    border-radius: 1px;
}
.MobileSheet__bar1--IY4vs { grid-row: 1;
}
.MobileSheet__bar2--EEcHc { grid-row: 2;
}
.MobileSheet__bar3--pADvb { grid-row: 3;
}
.MobileSheet__backdrop--pTp7_ {
    position: fixed;
    inset: 0;
    background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 45%, transparent);
    z-index: 1000;
    animation: MobileSheet__w-header-fade-in--pd4mb 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.MobileSheet__sheet--bUvwc {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 84vw;
    max-width: 360px;
    background-color: var(--secondary-color, #ffffff);
    color: var(--body-text-color, #0f172a);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 24px color-mix(in srgb, var(--body-text-color, #0f172a) 14%, transparent);
    animation: MobileSheet__w-header-slide-in--cpH9l 260ms cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--primary-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.MobileSheet__sheetHeader--Z_u2B {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--body-text-color, #0f172a) 12%, transparent);
}
.MobileSheet__sheetTitle--8lESM {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.MobileSheet__closeButton--THQFy {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background-color: transparent;
    color: var(--body-text-color, #0f172a);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.MobileSheet__closeButton--THQFy:hover {
        background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 6%, transparent);
}
.MobileSheet__closeButton--THQFy :deep(svg) {
        width: 18px;
        height: 18px;
        display: block;
}
.MobileSheet__sheetList--N43Ns {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
}
.MobileSheet__row--a1cf3 {
    position: relative;
}
.MobileSheet__row--a1cf3.MobileSheet__rowActive--fqwEY::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--primary-color, #1976d2);
}
.MobileSheet__row--a1cf3.MobileSheet__rowActive--fqwEY .MobileSheet__rowLink--EJ9qV {
        background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 6%, transparent);
        font-weight: 600;
}
.MobileSheet__rowFlex--SYUrw {
    display: flex;
    align-items: stretch;
}
.MobileSheet__rowLink--EJ9qV {
    display: block;
    flex: 1 1 auto;
    padding: 14px 22px;
    font-size: 16px;
    font-weight: 400;
    color: var(--body-text-color, #0f172a);
    text-decoration: none;
}
.MobileSheet__rowLink--EJ9qV:hover {
        background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 6%, transparent);
}
.MobileSheet__expandButton--ukweg {
    flex: 0 0 auto;
    width: 44px;
    display: grid;
    place-items: center;
    border: 0;
    background-color: transparent;
    color: var(--body-text-color, #0f172a);
    cursor: pointer;
}
.MobileSheet__expandButton--ukweg:hover {
        background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 6%, transparent);
}
.MobileSheet__expandIcon--oUpQL :deep(svg) {
        width: 20px;
        height: 20px;
        display: block;
        transition: transform 0.15s ease;
}
.MobileSheet__expandIconOpen--ag6z5 :deep(svg) {
    transform: rotate(180deg);
}
.MobileSheet__subList--CaVti {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 6%, transparent);
}
.MobileSheet__subRow--KGjC4 {
    position: relative;
}
.MobileSheet__subRow--KGjC4.MobileSheet__rowActive--fqwEY::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background-color: var(--primary-color, #1976d2);
}
.MobileSheet__subRow--KGjC4.MobileSheet__rowActive--fqwEY .MobileSheet__subRowLink--BZzfp {
        font-weight: 600;
}
.MobileSheet__subRowLink--BZzfp {
    display: block;
    padding: 12px 22px 12px 38px;
    font-size: 15px;
    font-weight: 400;
    color: var(--body-text-color, #0f172a);
    text-decoration: none;
}
.MobileSheet__subRowLink--BZzfp:hover {
        background-color: color-mix(in srgb, var(--body-text-color, #0f172a) 10%, transparent);
}
@keyframes MobileSheet__w-header-fade-in--pd4mb {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes MobileSheet__w-header-slide-in--cpH9l {
from { transform: translateX(-100%);
}
to { transform: translateX(0);
}
}


.AccountMenu__root--hISLC {
    display: inline-flex;
}
.AccountMenu__trigger--mPhzb {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-color-contrast, #ffffff) 22%, transparent);
    background-color: var(--primary-color, #1976d2);
    color: var(--primary-color-contrast, #ffffff);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.AccountMenu__trigger--mPhzb:hover {
        background-color: color-mix(in srgb, var(--primary-color-contrast, #ffffff) 14%, var(--primary-color, #1976d2));
}
.AccountMenu__trigger--mPhzb :deep(svg) {
        width: 18px;
        height: 18px;
        display: block;
}
.AccountMenu__backdrop--iGbFf {
    position: fixed;
    inset: 0;
    background: rgb(15, 23, 42, 0.35);
    z-index: 1000;
}
.AccountMenu__panel--JRNyF {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    width: min(420px, 100vw);
    height: 100vh;
    background: var(--mediabank-paper, #ffffff);
    color: var(--mediabank-ink, var(--body-text-color, #0f172a));
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgb(15, 23, 42, 0.18);
}
.AccountMenu__header--C5i28 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mediabank-line, rgb(15, 23, 42, 0.09));
    font-size: 16px;
}
.AccountMenu__close--UNyrL {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
}
.AccountMenu__tabs--AWtdh {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
}
.AccountMenu__tab--fBaZL {
    flex: 1;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
    cursor: pointer;
}
.AccountMenu__tabActive--OfJTR {
    color: var(--mediabank-accent-text, var(--primary-color));
    border-bottom-color: var(--mediabank-accent, var(--primary-color));
}
.AccountMenu__body--ajcVd {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 24px;
}
.AccountMenu__muted--_wouB {
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
    font-size: 14px;
    padding: 16px 0;
}
.AccountMenu__list--NrPgt {
    list-style: none;
    margin: 0;
    padding: 0;
}
.AccountMenu__item--qHpZX {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mediabank-line, rgb(15, 23, 42, 0.06));
}
.AccountMenu__itemMain--vXQt5 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.AccountMenu__itemTitle--UOld3 {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.AccountMenu__itemMeta--g44en {
    font-size: 12px;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
}
.AccountMenu__note--RJSkX {
    font-size: 12px;
    color: var(--mediabank-accent-text, var(--primary-color));
}
.AccountMenu__action--Zdc33 {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--mediabank-accent-line, rgb(25, 118, 210, 0.4));
    border-radius: var(--mediabank-radius-md, 8px);
    background: none;
    color: var(--mediabank-accent-text, var(--primary-color));
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.AccountMenu__action--Zdc33:disabled {
        opacity: 0.55;
        cursor: default;
}
.AccountMenu__delete--sMwcP {
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.AccountMenu__delete--sMwcP:disabled {
        opacity: 0.55;
        cursor: default;
}
.AccountMenu__pending--RExzg {
    font-size: 12px;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
    white-space: nowrap;
}
.AccountMenu__topActions--pqSve {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--mediabank-line, rgb(15, 23, 42, 0.09));
}
.AccountMenu__profileLink--Dc_2H {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mediabank-accent-text, var(--primary-color));
    text-decoration: none;
}
.AccountMenu__profileLink--Dc_2H:hover {
        text-decoration: underline;
}
.AccountMenu__profileLink--Dc_2H :deep(svg) {
        width: 18px;
        height: 18px;
        display: block;
}
.AccountMenu__signOut--G6Yd9 {
    margin-left: auto;
    padding: 8px 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
    cursor: pointer;
}
.AccountMenu__signOut--G6Yd9:hover {
        text-decoration: underline;
}
.AccountMenu__signedOut--KD5qA {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}
.AccountMenu__signedOutText--NUO85 {
    margin: 0;
    font-size: 14px;
    color: var(--mediabank-ink-soft, var(--body-text-color-secondary, #64748b));
}
.AccountMenu__signInButton--gS3RI {
    min-height: 44px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--mediabank-radius-md, 8px);
    background: var(--mediabank-accent, var(--primary-color, #1976d2));
    color: var(--primary-color-contrast, #ffffff);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.AccountMenu__signInButton--gS3RI:hover {
        filter: brightness(0.95);
}
.AccountMenu__signedOutLink--NJ3tt {
    align-self: center;
    font-size: 14px;
    color: var(--mediabank-accent-text, var(--primary-color));
    text-decoration: none;
}
.AccountMenu__signedOutLink--NJ3tt:hover {
        text-decoration: underline;
}

body {
    /* The header bar's own height. */
    --w-header-bar-height: 60px;

    /* Total viewport-top offset to "below the header" — consumed by overlays
       (filter drawer, backdrops) that fix-position against the viewport. */
    --w-header-height: 60px;

    /* Left offset for the admin shell's fixed side rail. position:fixed box
       chrome (header, filter, paginator, …) ignores the body padding the admin
       shell applies, so they must consume this var explicitly to clear the rail. */
    --w-admin-rail-width: 0px;
}

body.has-admin-shell {
    --w-header-height: 101px;
}

body.has-admin-left-menu {
    --w-admin-rail-width: 59px;
}

/* The admin shell collapses its side rail (padding-left: 0) at <= 768px. */
@media (width <= 768px) {
    body.has-admin-left-menu {
        --w-admin-rail-width: 0px;
    }
}

/* The header bar (.header) is position:fixed so it stays pinned while the page
   scrolls. Reserve its height in normal flow so page content starts below it
   (the fixed bar itself is out of flow). The Vue mount replaces #W-header with
   the component root .w_header_tokens, so reserve on both: the id before mount,
   the class after. (The admin shell's top bar is reserved separately via the
   body's own padding-top.) */
#W-header,
.w_header_tokens {
    min-height: var(--w-header-bar-height);
}

@font-face {
    font-family: fotobank-ikoner;
    src: url(/dist/all/static/9be68cc3cdacc5704872.woff2) format("woff2"), url(/dist/all/static/d1490ba97afaa8237cbf.woff) format("woff"), url(/dist/all/static/f39b58c4cd3a2d7ad27a.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

/*
------------------------------------------
 KEYBOARD FOCUS (WCAG 2.4.7)
------------------------------------------ */
#W-header :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.page-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mediabank-focus, #0f172a);
    outline-offset: 2px;
}

.mediabank--dark :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: #ffffff;
}

.box-skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 10000;
    padding: 10px 16px;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.box-skip-link:focus-visible {
    transform: none;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/*
------------------------------------------
 FONT SETTINGS
------------------------------------------ */
html body {
    font-family: var(--primary-font, sans-serif), sans-serif !important;
}

/*
------------------------------------------
 BODY TEXT COLOR
------------------------------------------ */

/* COLOR 1 */
dl.inline > dt::before,
a.wrap,
label.main,
.WipsForm select, .WipsForm select option,
.ui-menu .ui-menu-item a,
button,
address a
{
    color: var(--primary-body-color);
    /* YOU CAN CHANGE THIS, BUT ... MUST ALWAYS WORK WITH WHITE-BACKGROUND COLOR */
}

/* COLOR 2 */
html,
h1,
h2,
h3,
h4,
h5,
h6,
dt,
body .context,
body .context p,
body .context dt,
#WIPSMAINCONTENTS article h1 a
{
    color: var(--secondary-body-color);
    /* YOU CAN CHANGE THIS, BUT ... MUST ALWAYS WORK WITH WHITE-BACKGROUND COLOR */
}

/*
------------------------------------------
 PRIMARY COLOR
------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6,
a,
.wips_module_name_feedback_2#WIPSMAINCONTENTS form button[type="submit"]:hover,
.page-footer ul, .page-footer li > a,
button.link,
.admin-menu .L1 > li.active a,
.button:hover,
.plugin-projects .contents form~h1,
.plugin-normal:not(.homepage) .wips_module_name_none h1~h1,
.plugin-normal:not(.homepage) .wips_module_name_none table th,
.plugin-projects .contents form label,
.contents #WIPSMAINCONTENTS h1,
.admin-menu .L1 > li > a:hover,
.plugin-map .island button:hover,
.WipsForm--edit > fieldset,
.common-form > fieldset > legend,
.common-form > fieldset fieldset legend,
.WipsForm small,
a,
.submit.danger{
    color: var(--primary-color);
    /* YOU CAN CHANGE THIS, BUT ... MUST ALWAYS WORK WITH WHITE-BACKGROUND COLOR */
}

/*
------------------------------------------
 PRIMARY COLOR BACKGROUND
------------------------------------------ */
html body,
.wips_module_name_feedback_2#WIPSMAINCONTENTS form button[type="submit"]:hover,
.admin-menu .L1 > li.active a,
.main.content-area,
.button:hover,
.context,
.admin-menu, .homepage .admin-menu,
.admin-menu .L1 > li > a:hover,
.plugin-map .island button:hover,
body .ui-autocomplete,
.fullscreen-iframe,
.fullscreen-iframe iframe{
    background-color: var(--primary-color-contrast);
    /* DO NOT CHANGE - ALWAYS-BACKGROUND-WHITE */
}

/*
------------------------------------------
 SECONDARY COLOR
------------------------------------------ */
.wips_module_name_feedback_2#WIPSMAINCONTENTS form .attachment::after,
.wips_module_name_feedback_2#WIPSMAINCONTENTS form button[type="submit"],
.plugin-map .island button.link,
.button,
.submit.bold,
.submit.bold,
.plugin-normal:not(.homepage) .wips_module_name_none table button,
.admin-menu .L1 > li > a,
.homepage .wips_module_name_none h1,
.homepage .wips_module_name_none p,
.contents #WIPSMAINCONTENTS article h1.item-title
{
    color: var(--secondary-color);
    /* DO NOT CHANGE - ALWAYS-COLOR-WHITE */
}


/*
------------------------------------------
 SECONDARY COLOR BACKGROUND
------------------------------------------ */
.wips_module_name_feedback_2#WIPSMAINCONTENTS form .attachment::after,
.wips_module_name_feedback_2#WIPSMAINCONTENTS form button[type="submit"],
.plugin-map .island button.link,
.button,
.submit.bold,
.submit.bold,
.plugin-normal:not(.homepage) .wips_module_name_none table button,
.plugin-projects .contents form button.submit,
.plugin-projects .contents form button.submit.delete{
    background-color: var(--secondary-color-contrast);
    /* YOU CAN CHANGE THIS, BUT ... MUST ALWAYS WORK WITH WHITE-BACKGROUND COLOR */
}

/*
 * Mediabank design tokens — scoped to `.mediabank` roots.
 *
 * Applied by wrapping the feature root (filter, grid, lightbox, readmore)
 * with the `.mediabank` class. Add `.mediabank--dark` on the lightbox root
 * to switch to dark chrome.
 *
 * Accent + ink roles reuse the site-configured box-template theme vars
 * (--primary-color, --body-text-color) so per-site theming still applies.
 * Everything else is fixed (neutrals, license tiers, dark surfaces).
 */

.mediabank {
    --mediabank-accent: var(--primary-color);
    --mediabank-accent-ink: var(--primary-color-contrast);
    --mediabank-accent-text: var(--primary-color-text, var(--primary-color));
    --mediabank-accent-soft: color-mix(in srgb, var(--primary-color) 9%, transparent);
    --mediabank-accent-line: color-mix(in srgb, var(--primary-color) 27%, transparent);

    --mediabank-ink: var(--body-text-color, #0f172a);
    --mediabank-ink-soft: var(--body-text-color-secondary, #64748b);
    --mediabank-focus: #0f172a;

    --mediabank-paper: #ffffff;
    --mediabank-paper-soft: #f5f7fa;

    --mediabank-line: rgb(15, 23, 42, 0.09);
    --mediabank-line-strong: rgb(15, 23, 42, 0.22);
    --mediabank-hover: rgb(15, 23, 42, 0.04);

    --mediabank-license-unrestricted: #2e9e3d;
    --mediabank-license-restricted: #f0b200;
    --mediabank-license-owner: #d43a2f;

    --mediabank-radius-sm: 4px;
    --mediabank-radius-md: 8px;
    --mediabank-radius-lg: 10px;
    --mediabank-radius-pill: 999px;

    --mediabank-shadow-hover: 0 8px 24px rgb(0, 0, 0, 0.15);
    --mediabank-shadow-card: 0 1px 3px rgb(0, 0, 0, 0.08), 0 4px 16px rgb(0, 0, 0, 0.06);
    --mediabank-shadow-panel: 0 20px 60px rgb(0, 0, 0, 0.15);
}

.mediabank--dark {
    --mediabank-accent-text: var(--primary-color-text-dark, var(--primary-color));
    --mediabank-focus: #ffffff;
    --mediabank-paper: #0c0c0e;
    --mediabank-paper-soft: #141416;
    --mediabank-ink: #ffffff;
    --mediabank-ink-soft: rgb(255, 255, 255, 0.55);
    --mediabank-line: rgb(255, 255, 255, 0.07);
    --mediabank-line-strong: rgb(255, 255, 255, 0.15);
    --mediabank-hover: rgb(255, 255, 255, 0.08);
    --mediabank-shadow-panel: 0 40px 100px rgb(0, 0, 0, 0.6);
}


.WHeader__header--J74F4 {
    /* Fixed (not sticky): the header lives in its own header-height box that is
       a sibling of the scrolling content, so position:sticky has no travel room
       and scrolls away immediately. Fixed pins it like the filter bar does.
       top resolves to 0 normally and to the admin-bar height under the admin
       shell (--w-header-height = adminbar + headerbar). #W-header reserves the
       flow space (see tokens.css) so content doesn't jump. */
    position: fixed;
    top: calc(var(--w-header-height) - var(--w-header-bar-height));
    left: var(--w-admin-rail-width, 0);
    right: 0;
    z-index: 10;
    height: var(--w-header-bar-height);
    display: flex;
    align-items: center;
    gap: 28px;
    background-color: var(--primary-color, #1976d2);
    color: var(--primary-color-contrast, #ffffff);
    font-family: var(--primary-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
@media (width >= 768px) {
.WHeader__header--J74F4 {
        padding: 0 40px
}
}
@media (width <= 767px) {
.WHeader__header--J74F4 {
        padding: 0 16px;
        border-bottom: 1px solid color-mix(in srgb, var(--primary-color-contrast, #ffffff) 22%, transparent)
}
}
.WHeader__slotStart--PXjKE {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.WHeader__slotEnd--VMOVm {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.WHeader__pillNav--nxAKT {
    display: flex;
    align-items: center;
    min-width: 0;
}
.WHeader__pillList--FFIql {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}
@media (width >= 768px) {
.WHeader__mobileSheet--ST2dw {
        display: none
}
}
@media (width <= 767px) {
.WHeader__desktopOnly--QBy7M {
        display: none
}
}