:root {
  --site-menu-height: 3rem;
  --site-menu-wrapper-height: var(--site-menu-height);
}

html {
  scroll-padding-top: var(--scroll-padding-top, 0.5rem);
}

html.site-menu-pane-open {
    margin-right: var(--scrollbar-width);
    overflow: hidden;
  }

html.site-menu-pane-open #menubar {
      width: calc(100% - var(--scrollbar-width));
      padding-right: var(--scrollbar-width);
    }

.twk-site-menu-wrapper {
  min-width: 20rem;
  height: var(--site-menu-wrapper-height);
}

.twk-site-menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-site-menu);
  width: 100%;
  height: var(--site-menu-height);
  background-color: var(--brand-color);
  transition: transform .3s;
}

body.header-hidden .twk-site-menu-bar {
    transform: translateY(calc(-1 * var(--site-menu-wrapper-height)));
  }

twk-site-menu {
  --icon-size: 1rem;
  --icon-color: var(--text-always-light-color);
  --menu-item-padding: 0.375rem;

  box-sizing: border-box;
  display: flex;
  max-width: 89rem;
  height: 100%;
  padding-inline: var(--menu-item-padding);
  margin-inline: auto;
}

twk-site-menu .unread {
    --icon-color: var(--surface-notification-counter-highlight-color);
    --counter-background: var(--surface-notification-counter-highlight-color);
  }

twk-site-menu .responsive-navigation-trigger {
    display: inline-flex;
    align-items: center;
    line-height: 2.75rem;
  }

:is(twk-site-menu .responsive-navigation-trigger) a {
      display: block;
      height: 100%;
      padding-inline: var(--menu-item-padding);
    }

:is(twk-site-menu .responsive-navigation-trigger):hover {
      background: var(--brand-dark-color);
    }

.dropdown:is(twk-site-menu .responsive-navigation-trigger) {
      --icon-color: var(--base-paragraph-text-color);

      background: var(--surface-card-color);
    }

twk-site-menu .site-logo {
    flex-basis: 9.75rem;
  }

:is(twk-site-menu .site-logo):hover {
      background: var(--brand-dark-color);
    }

:is(twk-site-menu .site-logo) a {
      display: block;
      height: 100%;
      padding-inline: var(--menu-item-padding);
    }

:is(:is(twk-site-menu .site-logo) a) .logo {
        --icon-color: white;
        --icon-height: 3rem;
        --icon-width: 100%;
      }

:is(twk-site-menu .site-logo) + .site-name {
      position: absolute;
      overflow: hidden;
      text-indent: -1000px;
    }

/* Generic list styling */

twk-site-menu menu,twk-site-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

/* Hierarchic list styling */

twk-site-menu > menu {
    display: flex;
  }

:is(twk-site-menu > menu) > li {
      box-sizing: border-box;
      height: 100%;
      padding-top: 1px;
      line-height: 2.75rem;
    }

:is(:is(twk-site-menu > menu) > li):hover {
        background: var(--brand-dark-color);
      }

.blackFriday:is(:is(twk-site-menu > menu) > li) {
        background: var(--surface-black-friday);
      }

:is(:is(twk-site-menu > menu) > li) > a {
        display: block;
        height: 100%;
        padding-inline: var(--menu-item-padding);
        font-family: var(--font-family-heading);
        font-size: var(--font-size-menu);
        font-weight: var(--font-weight-menu);
        white-space: nowrap;
        -webkit-font-smoothing: antialiased;
      }

:is(:is(twk-site-menu > menu) > li) > a,:is(:is(twk-site-menu > menu) > li) > a:hover {
        color: var(--text-always-light-color);
        -webkit-text-decoration: none;
        text-decoration: none;
      }

/* Dropdown menu's */

.more:is(:is(twk-site-menu > menu) > li) {
        position: relative;
      }

.more:is(:is(twk-site-menu > menu) > li):not(.icon) > a.trigger::after {
          display: inline-block;
          width: 0.625rem;
          height: 0.625rem;
          margin-left: 0.25rem;
          vertical-align: middle;
          content: '';
          background: var(--navbar-main-chevron-state-closed) no-repeat center / contain;
          transform: rotate(90deg);
        }

.more:is(:is(twk-site-menu > menu) > li) > .dropdown-menu {
          position: absolute;
          top: 2.5rem;
          z-index: 99;
          box-sizing: border-box;
          display: none; /* Only show on desktop grade */
          min-width: max(8rem, 100%);
          border-top: 0;
        }

.more.dropdown:is(:is(twk-site-menu > menu) > li) {
          --icon-color: var(--base-paragraph-text-color);

          background: var(--surface-card-color);
        }

.more.dropdown:is(:is(twk-site-menu > menu) > li) > a.trigger {
            color: var(--base-paragraph-text-color);
            text-shadow: none;
          }

:is(.more.dropdown:is(:is(twk-site-menu > menu) > li) > a.trigger)::after {
              background-image: var(--navbar-main-chevron-state-open);
              transform: rotate(-90deg);
            }

:is(.more.dropdown:is(:is(twk-site-menu > menu) > li) > a.trigger) > twk-counter {
              display: none;
            }

.active:is(:is(twk-site-menu > menu) > li) > a {
        color: var(--text-link-highlight-color);
      }

/* Site navigation */

twk-site-menu .site-navigation {
    display: none;
  }

/* User navigation */

twk-site-menu .user-navigation {
    justify-content: flex-end;
    margin-left: auto;
  }

.search:is(:is(twk-site-menu .user-navigation) li):has(a[aria-expanded="true"]) {
        --icon-color: var(--base-paragraph-text-color);

        background: var(--surface-card-color);
      }

.icon:is(:is(twk-site-menu .user-navigation) li) {
        position: relative;
      }

.icon:is(:is(twk-site-menu .user-navigation) li) > a.trigger > twk-counter {
          position: absolute;
          top: 6px;
          right: 1px;
        }

/* Hide the user name / Inloggen text */

.account:is(:is(twk-site-menu .user-navigation) li) > a span {
          display: none;
        }

/* Hide the dropdown chevron */

.account.more:is(:is(twk-site-menu .user-navigation) li) > a.trigger::after {
            display: none;
          }

/* Dropdown menu flexible width base on content */

.account.more:is(:is(twk-site-menu .user-navigation) li) > .dropdown-menu {
            width: fit-content;
            min-width: 10rem;
            max-width: 12.5rem;
          }

/* Dropdown submenu, show on the left by default */

.account.more:is(:is(twk-site-menu .user-navigation) li) .more > .dropdown-menu {
            position: absolute;
            top: -0.3125rem;
            left: -7.8rem;
            width: 8rem;
          }

.settings:is(:is(twk-site-menu .user-navigation) li) .flag {
          --icon-width: 12px;
          --icon-height: 9px;
          --icon-vertical-align: top;

          position: absolute;
          top: 24px;
          right: 2px;
          pointer-events: none;
        }

/* Dropdowns right-aligned */

:is(.compare:is(:is(twk-site-menu .user-navigation) li),.messages:is(:is(twk-site-menu .user-navigation) li),.notifications:is(:is(twk-site-menu .user-navigation) li),.settings:is(:is(twk-site-menu .user-navigation) li)) > .dropdown-menu {
          right: 0;
        }

@media screen and (min-width: 360px) {
  twk-site-menu {
    --menu-item-padding: 0.5rem;
  }
}

@media screen and (min-width: 500px) {
  html {
    scroll-padding-top: calc(var(--site-menu-height) + var(--scroll-padding-top, 0.5rem));
  }

  twk-site-menu {
    --menu-item-padding: 0.5rem;
  }
}

@media screen and (min-width: 800px) {
  twk-site-menu {
    --menu-item-padding: 0.375rem;

    padding-left: 0;
  }

    twk-site-menu .responsive-navigation-trigger {
      display: none;
    }

    /* Site navigation */
    twk-site-menu .site-navigation {
      display: flex;
      flex-grow: 2;
      min-width: 0;
    }

      :is(twk-site-menu .site-navigation) li.frontpage {
        display: none;
      }

    /* Show normal dropdown menu's */
    twk-site-menu > menu > li.more.dropdown {
      box-shadow: inset 0.0625rem 0 var(--border-card-color), inset -0.0625rem 0 var(--border-card-color);
    }

      :is(twk-site-menu > menu > li.more.dropdown) > .dropdown-menu {
        display: block;
      }
}

@media screen and (min-width: 840px) {
  twk-site-menu {
    --menu-item-padding: 0.5rem;
  }
}

@media screen and (min-width: 1160px) {
  twk-site-menu {
    --menu-item-padding: 0.5rem;
  }
        /* Show the user name / Inloggen text */
        :is(:is(twk-site-menu .user-navigation) li.account) > a span {
          display: initial;
        }

        /* Hide the icon */
        :is(:is(twk-site-menu .user-navigation) li.account) .icon {
          display: none;
        }
          /* Show the dropdown chevron */
          .more:is(:is(twk-site-menu .user-navigation) li.account) > a.trigger::after {
            display: inline-block;
          }
}

@media screen and (min-width: 1540px) {
      /* Show sub-submenu on the right when there is plenty room */
      :is(twk-site-menu .user-navigation) li.account.more .more > .dropdown-menu {
        right: -7.8rem;
        left: auto;
      }
}

twk-site-menu-pane {
  position: fixed;
  top: var(--site-menu-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

twk-site-menu-pane .pane__container {
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: 100%;
    background: var(--surface-card-color);
  }

:is(twk-site-menu-pane .pane__container) .pane__body {
      flex: 1;
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

twk-site-menu-pane.open {
    display: flex;
    justify-content: flex-end;
    animation: open-site-menu-pane 150ms forwards;

    /* The site navigation menu pane is aligned left */
  }

twk-site-menu-pane.open.align-left {
      justify-content: flex-start;
    }

@keyframes open-site-menu-pane {
  100% { background: var(--overlay-background-color); }
}

/**
 * Additional pane styling
 */
twk-site-menu-content-navigation {
  display: block;
  padding: 0.5rem 1rem;
}


  twk-site-menu-pane .site-menu-pane-navigation {
    font-size: var(--font-size-medium-plus);
    line-height: var(--line-height-large);
  }:is(twk-site-menu-pane .site-menu-pane-navigation),:is(twk-site-menu-pane .site-menu-pane-navigation) ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }:is(twk-site-menu-pane .site-menu-pane-navigation) a {
      display: block;
      padding-block: 0.5rem;
      -webkit-text-decoration: none;
      text-decoration: none;
    }:is(:is(twk-site-menu-pane .site-menu-pane-navigation) > li.more) a.trigger::after {
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 0.25rem;
        vertical-align: middle;
        content: '';
        background: var(--navbar-sub-chevron-state-closed) no-repeat center / contain;
        transform: rotate(90deg);
      }:is(:is(twk-site-menu-pane .site-menu-pane-navigation) > li.more) div {
        display: none;
      }:is(:is(twk-site-menu-pane .site-menu-pane-navigation) > li.more) ul {
        padding-left: 1rem;
      }.open:is(:is(twk-site-menu-pane .site-menu-pane-navigation) > li.more) a.trigger::after {
          transform: rotate(-90deg);
        }.open:is(:is(twk-site-menu-pane .site-menu-pane-navigation) > li.more) div {
          display: initial;
        }

.user-info {
  padding: 0.5rem 0.5rem 0;
  background: var(--surface-card-color);
}

.user-info a {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--font-size-small-plus);
    line-height: 2rem;
  }

:is(.user-info a) img {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
    }

:is(.user-info a) span {
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
    }

:is(.user-info a),:is(.user-info a):hover {
      color: var(--text-link-color);
    }

.divider:is(.user-links li) {
      padding-top: 0.25rem;
      margin-top: 0.25rem;
      border-top: 0.0625rem solid var(--border-card-color);
    }

.indent:is(.user-links li) > a {
      text-indent: 1rem;
    }

/* Submenu chevron */

.more:is(.user-links li) > a.trigger {
        background: var(--navbar-sub-chevron-state-closed) no-repeat right 0.5rem center / 6px 10px;
      }

/**
 * Additional pane styling
 */
twk-site-menu-user-navigation {
  display: block;
  padding: 0.5rem 1rem;
}
twk-site-menu-user-navigation .user-info {
    padding: 0.5rem 0;
    border: 0;
  }
:is(twk-site-menu-user-navigation .user-info) a {
      font-size: var(--font-size-medium-plus);
      line-height: var(--line-height-large);
    }
:is(:is(twk-site-menu-user-navigation .user-info) a) img {
        width: 3rem;
        height: 3rem;
      }
.indent:is(:is(twk-site-menu-user-navigation .user-links) li) {
        padding-left: 1rem;
      }
.indent:is(:is(twk-site-menu-user-navigation .user-links) li) > a {
          text-indent: 0;
        }
.more:is(:is(twk-site-menu-user-navigation .user-links) li) > a.trigger {
          background: none;
        }

twk-site-menu-user-settings {
  box-sizing: border-box;
  display: block;
  padding: 1rem;
  line-height: initial;
}

twk-site-menu-user-settings .loading-message {
    line-height: var(--line-height-extra-large);
  }

:is(twk-site-menu-user-settings .loading-message) twk-spinner {
      margin-left: 0.25rem;
    }

twk-site-menu-user-settings .user-settings-form {
    position: relative;
  }

:is(twk-site-menu-user-settings .user-settings-form) h3,:is(twk-site-menu-user-settings .user-settings-form) p {
      margin-bottom: 0.5rem;
    }

:is(twk-site-menu-user-settings .user-settings-form) form[inert] {
      opacity: 0.1;
    }

:is(:is(twk-site-menu-user-settings .user-settings-form) form[inert]) + .loading-message {
        position: absolute;
        top: 40%;
        right: 0;
        left: 0;
        text-align: center;
      }

:is(twk-site-menu-user-settings .user-settings-form) .header:nth-of-type(n + 2) {
      padding-top: 0.5rem;
      border-top: 0.0625rem solid var(--border-card-color);
    }

:is(twk-site-menu-user-settings .user-settings-form) .setting {
      padding-block: 0.5rem;
      line-height: var(--line-height-medium-plus);
    }

:is(:is(twk-site-menu-user-settings .user-settings-form) .setting) label {
        font-weight: var(--font-weight-normal);
      }

:is(:is(twk-site-menu-user-settings .user-settings-form) .setting) .option {
        color: var(--tertiary-paragraph-text-color);
      }

:is(:is(:is(twk-site-menu-user-settings .user-settings-form) .setting) .option) input {
          margin-right: 0.25rem;
          vertical-align: -0.0625rem;
        }

/* Dropdown styling */
.dropdown twk-site-menu-user-settings {
  width: 16rem;
  padding: 0.5rem;
}
:is(.dropdown twk-site-menu-user-settings) .loading-message {
    margin: 0 0.5rem;
  }


          :is(:is(:is(:is(twk-site-menu-user-direct-messages .listing-content) .list-items) > .list-item) .post-info) .poster {
            font-weight: var(--font-weight-bold);
          }:is(:is(:is(:is(twk-site-menu-user-direct-messages .listing-content) .list-items) > .list-item) .post-info) .post-title {
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
          }:is(:is(:is(:is(twk-site-menu-user-direct-messages .listing-content) .list-items) > .list-item) .post-info) .post-excerpt {
            --line-clamp-lines: 2;

            color: var(--tertiary-paragraph-text-color);
          }:is(:is(:is(:is(twk-site-menu-user-direct-messages .listing-content) .list-items) > .list-item) .post-info) twk-counter {
            --counter-font-size: inherit;

            box-shadow: none;
          }:is(twk-site-menu-user-direct-messages .listing-content) twk-flash-message {
      margin: 0 0.5rem;
    }/* Overrule base styling, so match specificity */twk-site-menu-user-direct-messages.site-menu-pane-listing .listing-content .list-items > .list-item + .list-item {
    border-color: var(--border-card-color);
  }

.site-menu-pane-listing {
  display: block;
  padding-block: 0.5rem;
  line-height: initial;
}

.site-menu-pane-listing .loading-message {
    line-height: var(--line-height-extra-large);
  }

:is(.site-menu-pane-listing .loading-message) twk-spinner {
      margin-left: 0.25rem;
    }

.site-menu-pane-listing twk-flash-message {
    display: block;
  }

.site-menu-pane-listing .loading-message,.site-menu-pane-listing > twk-flash-message {
    margin: var(--spacing-small) var(--spacing-large);
  }

.site-menu-pane-listing .listing-content {
    font-size: var(--font-size-small);
    line-height: var(--line-height-compact);
  }

:is(.site-menu-pane-listing .listing-content) .header,:is(.site-menu-pane-listing .listing-content) .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem;
    }

:is(:is(.site-menu-pane-listing .listing-content) .header,:is(.site-menu-pane-listing .listing-content) .footer) h3 {
        margin: 0;
        font-size: var(--font-size-small-plus);
      }

:is(.site-menu-pane-listing .listing-content) .no-items {
      padding: 0.75rem;
      background: var(--surface-base-color);
      border-top: 0.0625rem solid var(--border-card-color);
      border-bottom: 0.0625rem solid var(--border-card-color);
    }

:is(.site-menu-pane-listing .listing-content) .list-items {
      padding: 0;
      margin: 0;
      list-style: none;
      border-top: 0.0625rem solid var(--border-card-color);
      border-bottom: 0.0625rem solid var(--border-card-color);
    }

:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item {
        display: flex;
        gap: var(--spacing-small);
        align-items: center;
        padding: 0.75rem 0.5rem;
        color: var(--base-paragraph-text-color);
      }

:is(:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item):hover {
          -webkit-text-decoration: none;
          text-decoration: none;
          background: var(--surface-dropdown-hover-color);
        }

:is(:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item) .thumb {
          box-sizing: content-box;
          display: flex;
          align-items: center;
          width: 2rem;
          height: 2rem;
          padding: 0.25rem;
        }

:is(:is(:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item) .thumb) > img {
            width: 100%;
            height: auto;
            margin: 0;
          }

:is(:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item) .post-info {
          flex: 1;
          min-width: 0;
        }

:is(:is(:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item) .post-info) .date {
            float: right;
            margin-left: 0.25rem;
            font-size: 0.6875rem;
            color: var(--tertiary-paragraph-text-color);
          }

:is(:is(:is(.site-menu-pane-listing .listing-content) .list-items) > .list-item) + .list-item {
          border-top: 0.0625rem solid var(--border-card-blend-color);
        }

/* Dropdown styling */
.dropdown .site-menu-pane-listing {
  width: 24rem;
  padding: 0;
}
:is(.dropdown .site-menu-pane-listing) > twk-flash-message {
    margin: 0.5rem;
  }
:is(.dropdown .site-menu-pane-listing) .scroll-area {
    max-height: 460px; /* fallback for safari < 16 */
    max-height: min(65dvh, 460px);
    overflow: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
:is(:is(.dropdown .site-menu-pane-listing) .scroll-area)::-webkit-scrollbar {
      width: 7px;
    }
:is(:is(.dropdown .site-menu-pane-listing) .scroll-area)::-webkit-scrollbar-thumb {
      background-color: rgb(0 0 0 / 0.3);
    }


      :is(:is(twk-site-menu-user-notifications .listing-content) .list-items) > .list-item {
        background: var(--surface-base-color);
      }.unread:is(:is(:is(twk-site-menu-user-notifications .listing-content) .list-items) > .list-item) {
          background: var(--surface-info-color);
        }:is(:is(:is(twk-site-menu-user-notifications .listing-content) .list-items) > .list-item) .notificationType {
          margin-top: 0.75rem;
        }:is(twk-site-menu-user-notifications .listing-content) .web-push-container {
      padding: 0.75rem 0.5rem 0.25rem;
    }:is(:is(twk-site-menu-user-notifications .listing-content) .web-push-container) .web-push-toggle {
        display: flex;
        justify-content: space-between;
        font-size: var(--font-size-small);
      }:is(:is(:is(twk-site-menu-user-notifications .listing-content) .web-push-container) .web-push-toggle) .toggleSwitch {
          margin: 0;
        }:is(:is(twk-site-menu-user-notifications .listing-content) .web-push-container) twk-flash-message {
        padding: var(--spacing-small);
        margin: var(--spacing-small) 0 0;
      }


      :is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .no-items {
        padding-block-start: 0.25rem;
        text-align: center;
        background: none;
        border: 0;
      }:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .no-items) p {
          margin-block-end: 0.75rem;
        }:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .no-items) .pw-button {
          display: inline-flex;
        }:is(:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .no-items) .pw-button)::after {
            margin-left: 0.25rem;
            font-size: var(--font-size-large);
            content: '»';
          }:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .list-items) > li {
          background: var(--surface-base-color);
        }:is(:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .list-items) > li) .product-name {
            flex: 1;
          }:is(:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .list-items) > li) .remove-product {
            --icon-size: 1rem;
            --icon-color: var(--button-danger-background-color);

            cursor: pointer;
          }:is(:is(twk-site-menu-user-compare-basket.site-menu-pane-listing .listing-content) .footer) .btn {
          height: 1.75rem;
        }

twk-counter {
  --counter-default-size: 0.9375rem;

  box-sizing: border-box;
  display: inline-block;
  min-width: var(--counter-size, var(--counter-default-size));
  height: var(--counter-size, var(--counter-default-size));
  padding-inline: 0.125rem;
  font-family: var(--font-family-body);
  font-size: var(--counter-font-size, var(--font-size-extra-small-min));
  font-weight: var(--font-weight-bold);
  line-height: var(--counter-size, var(--counter-default-size));
  color: var(--counter-color, var(--text-always-dark-color));
  text-align: center;
  pointer-events: none;
  background-color: var(--counter-background, var(--surface-notification-counter-active-color));
  border-radius: 0.125rem;
  box-shadow: 0 1px 0 1px hsl(0deg 0% 0% / 0.2);
}twk-counter[value="0"] {
    display: none;
  }

/* This file is loaded up-front to provide visible placeholders for some components to prevent FOUC */

twk-thumbs-up-rating {
  display: inline-flex;
  min-width: 3.125rem;
  height: 1.625rem;
}