.crecima-menu {
  width: 386px !important;
  height: 100dvh;
}

@media (min-width: 991px) {
  .logged-in #crecima-menu {
    top: 32px;
  }

  .logged-in .crecima-menu {
    height: calc(100dvh - 32px);
  }
}

.btn-segundario.btn-orden-ml {
  margin: 0 31px;
  width: calc(100% - 62px);
  height: 56px;
}

/* offcanvas-header */

.crecima-menu .offcanvas-header {
  padding: 24px 31px;
  background: var(--red-700, #9b0b0b);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
}

.crecima-menu .offcanvas-header > a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
}

.crecima-menu .offcanvas-header h5 {
  color: var(--neutral-0, #fff);
  font-family: var(--fuente-principal);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  margin: 0;
}

.crecima-menu .offcanvas-header p {
  margin: 0;
  color: var(--neutral-0, #fff);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

.crecima-menu .offcanvas-header > div:nth-child(2) {
  width: calc(100% - 32px - 7px);
}

/* offcanvas-subheader */

.crecima-menu .offcanvas-subheader {
  padding: 12px 31px;
  background: var(--neutral-400, #d9d9d9);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crecima-menu .offcanvas-subheader a {
  color: var(--neutral-950, #1f1f1f);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--gap-gap-4, 12px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 64px;
  gap: 3px;
}

/* offcanvas-body */

.crecima-menu .offcanvas-body {
  background: var(--neutral-300, #f0f0f0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
  padding-bottom: 54px;
}

.crecima-menu .offcanvas-body ul {
  list-style: none;
}

.crecima-menu .offcanvas-body li.list-menu-pm {
  border-bottom: solid 1px var(--neutral-500, #bfbfbf);
}

.crecima-menu .offcanvas-body li.list-menu-pm > a,
.crecima-menu .offcanvas-body li.list-menu-pm > button {
  display: flex;
  color: var(--neutral-950, #1f1f1f);
  font-family: var(--fuente-principal);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 90%;
  padding: 24px 31px;
  width: 100%;
}

.crecima-menu .offcanvas-body li.list-menu-pm > button:focus {
  outline: none;
  box-shadow: none;
}

/* desplegable categorias padres */

.crecima-menu .offcanvas-body .btn-menu-acordeon {
  position: relative;
}

.crecima-menu .offcanvas-body .btn-menu-acordeon svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  transition: transform 0.5s ease-in-out;
}

.crecima-menu .offcanvas-body .btn-menu-acordeon:not(.collapsed) svg {
  transform: translateY(-50%) rotate(180deg);
}

.crecima-menu .ul-cate-padres {
  list-style: none;
  margin: 0;
  padding: 0 31px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-bottom: 27px;
}

.crecima-menu .ul-cate-padres li {
  width: 100%;
}

.crecima-menu .ul-cate-padres li a {
  color: #262626;
  font-family: var(--fuente-principal);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 15px 0;
  width: 100%;
}

.crecima-menu .ul-cate-padres li a svg path {
  fill: #c70e0e;
}

.crecima-menu .ul-cate-padres li a:hover span,
.crecima-menu .ul-cate-padres li a:focus span {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.crecima-menu .offcanvas-body {
  overflow-y: auto;
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* WebKit (Chrome, Edge, Safari) */
.crecima-menu .offcanvas-body::-webkit-scrollbar {
  width: 6px;
}

.crecima-menu .offcanvas-body::-webkit-scrollbar-track {
  background: transparent;
}

.crecima-menu .offcanvas-body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.crecima-menu .btn-segundario.btn-ordenrapida {
  margin-top: 20px;
  margin-bottom: 5px;
}

.crecima-menu .ul-cate-padres li a.link-ofertas {
  border-radius: var(--size-3, 8px);
  background: var(--destaques-color, #fdca33);
  width: fit-content;
  padding: 6px 14px 6px 10px;
  height: 42px;
  margin-left: -8px;
  color: var(--red-900, #5c0606);
  font-weight: 700;
}

/* movil */
@media (max-width: 969px) {
  .crecima-menu {
    width: 345px;
    max-width: 90%;
  }

  .crecima-menu .offcanvas-header {
    padding: 24px;
  }

  .crecima-menu .offcanvas-subheader {
    padding: 12px 24px;
  }

  .crecima-menu .offcanvas-body li.list-menu-pm > a,
  .crecima-menu .offcanvas-body li.list-menu-pm > button {
    padding: 24px 32px;
    font-size: 16px;
  }
}

/* Barra de carga superior */
.barracarga {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0; /* arranca vacía */
  display: none; /* oculta por defecto */
  opacity: 0;
  background: linear-gradient(270deg, #fdca33 0%, #e0cc91 100%);
  z-index: 999999;
}

.barracarga.is-active {
  display: block;
  opacity: 1;
  animation: barra-llenar 2s ease-out forwards; /* 0 → 100% */
}

@keyframes barra-llenar {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}