input:checked + .menu-panel {
  transform: translateX(0);
  pointer-events: initial;
}
input:checked + .menu-panel > .menu-panel-bg {
  opacity: 0.2;
  pointer-events: initial;
}

@media (max-width: 767px) {
  .menu--main > .menu-panel > header {
    border: initial;
  }
  .menu--main > .menu-panel > header:before {
    --d: 5.1rem;
    content: "";
    width: var(--d);
    height: calc(var(--d) * 1.0253623188);
    display: block;
    background: url("/themes/irca/logo.svg") no-repeat center center;
    background-size: contain;
  }
}

.menu-panel {
  --menu--padding: clamp(var(--spacing--4), 10vw, var(--spacing--6));
  transition: transform 0.45s ease-in-out;
  transform: translateX(100%);
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  width: 600px;
  max-width: 100vw;
  background-color: white;
  border-left: 1px solid var(--c--gray--light);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
@media (max-width: 767px) {
  .menu-panel {
    width: 100vw;
    --menu--padding: var(--spacing--2);
  }
}
.menu-panel > .menu-panel-bg {
  position: absolute;
  top: 0;
  right: 100%;
  width: 100vw;
  height: 100%;
  background-color: var(--c--black);
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
  pointer-events: none;
}
.menu-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--menu--padding);
}
.menu-panel > header > .btn-icon {
  margin-left: auto;
}
.menu-panel > header .account-menu-label {
  width: 100%;
}
.menu-panel > header .account-menu-label > label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: auto;
  font-size: var(--menu--font-size);
  font-weight: 600;
}
.menu-panel > header .account-menu-label > label i {
  font-size: 1.8rem;
}
@media (max-width: 767px) {
  .menu-panel > header {
    width: 100vw;
    padding: 0 var(--spacing--2);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid var(--c--gray--light);
    gap: var(--spacing--2);
  }
  .menu-panel > header .account-menu-label {
    width: initial;
    display: flex;
    flex: 1 1;
    min-width: 0;
  }
  .menu-panel > header .account-menu-label label {
    flex: 1 1;
    min-width: 0;
  }
  .menu-panel > header .account-menu-label label span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .menu-panel > header .btn-close-menu i {
    font-size: 1.4rem;
  }
}
@media (min-width: 768px) {
  .menu-panel > header {
    padding: var(--header-height) 0 0 var(--spacing--6);
    height: initial;
    justify-content: flex-start;
  }
  .menu-panel > header > .btn {
    margin-right: initial;
    position: absolute;
    top: var(--spacing--3);
    right: var(--spacing--3);
    z-index: 1;
  }
  .menu-panel > header .account-menu-label {
    border-bottom: 1px solid var(--c--gray--light);
  }
  .menu-panel > header .account-menu-label label {
    gap: 1rem;
    padding-right: var(--spacing--6);
    padding-top: var(--spacing--3);
    padding-bottom: var(--spacing--3);
    margin-top: calc(var(--spacing--3) * -1);
  }
}
.menu-panel .menu-panel-container {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 0 0 var(--menu--padding);
}
.menu-panel .menu-panel-container > a {
  color: var(--c--primary);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--spacing--3) var(--spacing--3) var(--spacing--3) 0;
  border-bottom: 1px solid var(--c--gray--light);
  text-decoration: none;
}
.menu-panel .menu-panel-container > a span {
  flex: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: underline;
}
.menu-panel .menu-panel-container > a > i {
  flex: 2.4rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--c--white);
  background-color: var(--c--primary);
  border-radius: 50%;
}

.menu-sub-label {
  text-transform: uppercase;
  font-size: 1.2rem;
}
.menu-sub-label ~ .menu-sub {
  padding-left: 1.6rem;
}
.menu-sub-label ~ .menu-sub a {
  height: 3.6rem;
}

.menu-highlight {
  background-color: var(--c--white);
  margin-right: var(--menu--padding);
  margin-bottom: var(--spacing--2);
  padding: 1.6rem;
  flex-direction: column;
  gap: var(--spacing--2);
  border-radius: var(--radius--2);
}
.menu-highlight > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing--1);
}
.menu-highlight > header > a {
  font-size: 1.4rem;
  text-decoration: underline;
}
.menu-highlight h2 {
  font-size: 1.2rem;
  color: var(--text--secondary);
  text-transform: uppercase;
}
.menu-highlight ul {
  display: grid;
  margin: 0 auto;
  max-width: 95%;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--spacing--1), 5vw, var(--spacing--3));
}
.menu-highlight ul li {
  border: 0;
}
.menu-highlight ul li > a {
  display: flex;
  min-width: 100%;
  height: initial;
  flex-direction: column;
  gap: var(--spacing--1);
  text-align: center;
  padding: 0;
  font-size: 1.4rem;
  transition: color 0.45s ease-in-out;
}
.menu-highlight ul li > a .menu-highlight--image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius--2);
}
.menu-highlight ul li > a .menu-highlight--image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease-in-out;
}
.menu-highlight ul li > a.active-trail {
  color: var(--c--primary);
  pointer-events: none;
}
.menu-highlight ul li > a:hover, .menu-highlight ul li > a:active {
  color: var(--c--primary);
}
.menu-highlight ul li > a:hover .menu-highlight--image > img, .menu-highlight ul li > a:active .menu-highlight--image > img {
  transform: scale(1.1);
}
.menu-highlight:has(> ul > li) {
  display: flex;
}

.menu-default,
.menu-boxed {
  background-color: var(--c--white);
  margin-right: var(--menu--padding);
  padding: 1.6rem;
  flex-direction: column;
  gap: var(--spacing--2);
  border-radius: var(--radius--2);
}
.menu-default + .menu-default, .menu-default + .menu-boxed,
.menu-boxed + .menu-default,
.menu-boxed + .menu-boxed {
  margin-top: var(--spacing--2);
}
.menu-default > header,
.menu-boxed > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing--1);
}
.menu-default > header > a,
.menu-boxed > header > a {
  font-size: 1.4rem;
  text-decoration: underline;
}
.menu-default h2,
.menu-boxed h2 {
  font-size: 1.2rem;
  color: var(--text--secondary);
  text-transform: uppercase;
}
.menu-default ul,
.menu-boxed ul {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin: 0 auto;
  gap: var(--spacing--1);
}
.menu-default ul li,
.menu-boxed ul li {
  border: 0;
  padding: 0;
}
.menu-default ul li > a,
.menu-boxed ul li > a {
  display: block;
  height: initial;
  font-size: 1.6rem;
  padding: var(--spacing--1) 0;
}
.menu-default ul li > a.active-trail,
.menu-boxed ul li > a.active-trail {
  color: var(--c--primary);
  pointer-events: none;
}
.menu-default ul li > a:hover, .menu-default ul li > a:active,
.menu-boxed ul li > a:hover,
.menu-boxed ul li > a:active {
  color: var(--c--primary);
}
.menu-default:has(> ul > li),
.menu-boxed:has(> ul > li) {
  display: flex;
}

.menu-boxed ul {
  padding-left: var(--spacing--2);
}
/*# sourceMappingURL=menu-panel.css.map */