#page.site .c-sidebar {
  transform        : translate(-301px);
  background-color : white;
  border-right     : 1px solid var(--c-border);
}
@media(min-width: 1024px) {
  #page.site .c-sidebar {
  transform : translate(0px);
  }
}
#page.site .c-sidebar.c-sidebar-open {
  transform  : translate(0px);
}
#page.site .c-sidebar.c-open {
  transition : transform 0.1s;
}
#page.site .c-sidebar.c-close {
  transition : transform 0.1s;
}

/* Button */
#page.site .c-sidebar > button {
  position            : relative;
  left                : 270px;
  top                 : 6px;
  width               : 24px;
  height              : 24px;
  padding             : 0;
  background-image    : url(/wp-content/plugins/custom/assets/pin-icon.svg);
  background-repeat   : no-repeat;
  background-color    : white;
  background-position : center center;
  background-size     : 16px;
  border-radius       : 50%;
}
#page.site .c-sidebar.c-sidebar-open-fixed > button {
  background-image : url(/wp-content/plugins/custom/assets/pin-icon-active.svg);
}

/* Menu */
#page.site .c-sidebar > nav ul {
  list-style    : none;
  margin        : 16px 0 0 8px;
}
#page.site .c-sidebar > nav li a {
  font-size       : 14px;
  line-height     : 20px;
  font-weight     : 500;
  font-family     : var(--c-font-familiy-title);
  color           : var(--c-text-title);
  border-radius   : var(--c-radius);
  padding         : 8px 12px;
  margin          : 0 8px 8px 0;
  display         : block;
}
#page.site .c-sidebar > nav li a:hover {
  background-color : var(--c-background);
  color            : var(--c-text-title) !important;
}
.post-type-archive-product 
#page.site .c-sidebar > nav.c-main .c-menu-shop a {
  background-color : var(--c-background-dark);
}
.page-id-35 
#page.site .c-sidebar > nav.c-main .c-menu-order-list a {
  background-color : var(--c-background-dark);
}
.page-id-16 
#page.site .c-sidebar > nav.c-main .c-menu-cart a {
  background-color : var(--c-background-dark);
}
.page-id-17 
#page.site .c-sidebar > nav.c-main .c-menu-checkout a {
  background-color : var(--c-background-dark);
}
body:has(.woocommerce-MyAccount-navigation-link--dashboard.is-active) 
#page.site .c-sidebar > nav.c-side-account li:nth-child(2) a {
  background-color : var(--c-background-dark);
}
body:has(.woocommerce-MyAccount-navigation-link--orders.is-active) 
#page.site .c-sidebar > nav.c-side-account li:nth-child(3) a {
  background-color : var(--c-background-dark);
}
body:has(.woocommerce-MyAccount-navigation-link--downloads.is-active) 
#page.site .c-sidebar > nav.c-side-account li:nth-child(4) a {
  background-color : var(--c-background-dark);
}
body:has(.woocommerce-MyAccount-navigation-link--edit-customer-address.is-active) 
#page.site .c-sidebar > nav.c-side-account li:nth-child(5) a {
  background-color : var(--c-background-dark);
}
body:has(.woocommerce-MyAccount-navigation-link--edit-account.is-active) 
#page.site .c-sidebar > nav.c-side-account li:nth-child(6) a {
  background-color : var(--c-background-dark);
}
body:has(.woocommerce-MyAccount-navigation-link--edit-preferences.is-active) 
#page.site .c-sidebar > nav.c-side-account li:nth-child(7) a {
  background-color : var(--c-background-dark);
}

#page.site .c-sidebar > nav li a::before {
  content             : '';
  display             : inline-block;
  height              : 16px;
  width               : 16px;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  margin-right        : 12px;
  vertical-align      : text-bottom;
}


#page.site .c-sidebar > nav.c-main li:nth-child(1) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/ham-icon.svg);
}
#page.site .c-sidebar > nav.c-main li:nth-child(2) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/list-icon.svg);
}
#page.site .c-sidebar > nav.c-main li:nth-child(3) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/cart2-icon.svg);
}
#page.site .c-sidebar > nav.c-main li:nth-child(4) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/coins-icon.svg);
}
#page.site .c-sidebar > nav.c-main li:nth-child(5) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/delivery-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(1) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/arrow-left-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(2) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/dashboard-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(3) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/cart2-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(4) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/download-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(5) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/map-pinned-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(6) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/user-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(7) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/settings-icon.svg);
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(8) a::before {
  background-image    : url(/wp-content/plugins/custom/assets/log-out-icon2.svg);
}

#page.site .c-sidebar > nav.c-side-account li:nth-child(1) {
  padding-bottom : 8px ;
  border-bottom  : 1px solid var(--c-border);
  margin         : 0 8px 16px 0;
}
#page.site .c-sidebar > nav.c-side-account li:nth-child(8) {
  padding-top : 8px ;
  border-top  : 1px solid var(--c-border);
  margin      : 16px 8px 16px 0;
}



/* Categories */
#page.site .c-sidebar .c-categories h3 {
  font-size        : 14px;
  line-height      : 20px;
  font-weight      : 500;
  font-family      : var(--c-font-familiy-title);
  color            : var(--c-text-title);
  border-top       : 1px solid var(--c-border);
  background-color : white;
  padding          : 20px 12px 8px 12px;
  margin           : 16px 8px 8px 8px;
}
#page.site .c-sidebar .c-categories h3::before {
  content             : '';
  display             : inline-block;
  height              : 16px;
  width               : 16px;
  background-repeat   : no-repeat;
  background-size     : 16px;
  background-position : center center;
  margin-right        : 12px;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/category-icon.svg);
}


#page.site .c-sidebar .c-categories ul {
  list-style    : none;
  margin        : 0 0 0 47px;
  margin-bottom : 24px;
}
#page.site .c-sidebar .c-categories li a{
  display     : block;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
  margin      : 0 16px 12px 0;
}

/* Account Manager */
#page.site .c-sidebar .c-account-manager {
  border-top            : 1px solid var(--c-border);
  padding               : 24px 16px;
  margin                : 0 8px 0 8px;
  display               : grid;
  grid-template-columns : 40px 1fr;
  align-items           : center;
  column-gap            : 12px;
  grid-template-areas: 
    "image name"
    "image role"
    "phone phone"
    "mail mail";
}
#page.site .c-sidebar .c-account-manager img {
  grid-area     : image;
  height        : 40px;
  width         : auto;
  border-radius : 50%;
}
#page.site .c-sidebar .c-account-manager div:nth-child(1) {
  grid-area        : image;
  height           : 40px;
  width            : 40px;
  border-radius    : 50%;
  background-color : var(--c-button);
  justify-self     : left;
  display          : grid;
  align-items      : center;
  justify-items    : center;
  font-size        : 21px;
  font-weight      : 400;
  font-family      : var(--c-font-familiy-text);
  color            : white;

}

#page.site .c-sidebar .c-account-manager div:nth-child(2) {
  grid-area   : name;
  font-size   : 14px;
  line-height : 20px;
  font-weight : 500;
  font-family : var(--c-font-familiy-title);
  color       : var(--c-text-title);
}
#page.site .c-sidebar .c-account-manager div:nth-child(3) {
  grid-area     : role;
  font-size     : 12px;
  line-height   : 18px ;
  font-weight   : 400;
  font-family   : var(--c-font-familiy-text);
  color         : var(--c-text-secondary);
  margin-bottom : 12px;
}
#page.site .c-sidebar .c-account-manager a {
  font-size   : 12px;
  line-height : 18px ;
  font-weight : 400;
  font-family : var(--c-font-familiy-text);
  color       : var(--c-text-secondary);
}
#page.site .c-sidebar .c-account-manager a.c-phone {
  grid-area     : phone;
  margin-bottom : 12px;
}
#page.site .c-sidebar .c-account-manager a.c-phone::before {
  content             : '';
  display             : inline-block;
  height              : 16px;
  width               : 16px;
  background-size     : 16px;
  background-repeat   : no-repeat;
  background-position : center center;
  margin-right        : 8px;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/phone-icon.svg);
}
#page.site .c-sidebar .c-account-manager a.c-mail {
  grid-area: mail;
}
#page.site .c-sidebar .c-account-manager a.c-mail::before {
  content             : '';
  display             : inline-block;
  height              : 16px;
  width               : 16px;
  background-size     : 16px;
  background-repeat   : no-repeat;
  background-position : center center;
  margin-right        : 8px;
  vertical-align      : text-bottom;
  background-image    : url(/wp-content/plugins/custom/assets/mail-icon.svg);
}