
/* header */
.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   height: 65px; /*130px;*/
   padding: 0 60px;
   background-color: var(--clr-white);
   /*border-bottom: 1px solid #333;*/
}

@media (max-width: 767px) {
   .header {
      padding: 10px 20px;  /*10px 20px; ********************************************************************************* */
   }
}

.header.sticky {
   position: sticky;
   z-index: 999;
   top: 0;
}

.header .header__logo {
   color: var(--clr-dark);
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   min-width: 150px;
   flex-basis: 150px;
}

.header__logo > img {
   max-width: 100%;
}

.header .cart__login__search {
   min-width: 150px;
   flex-basis: 150px;
}

.header .cart__login__search .list__icon {
   display: flex;
   flex-flow: row;
   justify-content: flex-end;
   gap: 10px;
   list-style: none;
}

.header .cart__login__search .list__icon li a {
   padding: 5px;
   font-size: 18px;
   color: var(--clr-dark);
   transition: 0.25s;
}

.header .cart__login__search .list__icon li a:hover {
   color: var(--clr-dark);   /*ff5722*/
}

.header .menu__horizontal {
   width: 100%;
   position: initial;
   justify-content: center;
   display: flex;
   align-items: center;
}

.header .menu__horizontal .menu__horizontal__wrapper {
   overflow: hidden;
   max-height: 65px;
}

.header .menu__horizontal .header__menu {
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

@media (max-width: 767px) {
   .header .menu__horizontal .menu__horizontal__btn {
      display: none;
   }
}

.header .menu__horizontal .menu__horizontal__btn .menuBtn__wrapper {
   display: flex;
   flex-flow: row nowrap;
}

.header .menu__horizontal .menu__horizontal__btn .menu__prev,
.header .menu__horizontal .menu__horizontal__btn .menu__next {
   width: 35px;
   height: 35px;
   font-size: 14px;
   border: 0;
   color: var(--clr-dark);  /*FFF*/
   background-color: transparent;
   cursor: pointer;
   transition: 0.25s;
}

.header .menu__horizontal .menu__horizontal__btn .menu__prev:hover,
.header .menu__horizontal .menu__horizontal__btn .menu__next:hover {
   color: var(--clr-dark); /*ff5722*/
}

.header .menu__horizontal .menu__horizontal__btn button.disabled {
   cursor: default;
   opacity: 0.25;
}

.header__menu .main__menu {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   overflow-x: auto;
   overflow-y: hidden;
   height: 100%;
   max-width: 100%;
   width: 100%;
}

@media (max-width: 767px) {
   .header__menu .main__menu {
      position: fixed;
      top: 65px;
      left: 0;
      width: 85%;
      display: block;
      padding-top: 10px;
      padding-bottom: 120px;
      background: var(--clr-light); /*000*/
      box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
      overflow-y: auto;
      transform: translateX(-100%);
      transition: 0.3s ease-out;
   }

   .header__menu .main__menu.open {
      transform: translateY(0);
   }
}

.header__menu .main__menu > .menu__item {
   position: initial;
}
@media (max-width: 767px) {
   .header__menu .main__menu > .menu__item {
      border-bottom: 1px solid var(--clr-lighter); /*222*/
   }
}

@media (min-width: 768px) {
   .header__menu .main__menu > .menu__item > .menuItem__link {
      display: flex;
      align-items: center;
      height: 65px;
      padding: 1rem;
   }
}

@media (max-width: 767px) {
   .header__menu .main__menu > .menu__item > .menuItem__link {
      padding: 1rem 2rem 1rem 1rem;
      font-weight: 500;
   }
}

.header__menu .main__menu .menu__item:hover .mega__menu {
   opacity: 1;
   visibility: visible;
}

@media (min-width: 767px) {
   .header__menu .main__menu > .menu__item:not(.visible-row):hover > .sub__menu {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
   }
}

.header__menu .menu__item {
   position: relative;
}

@media (min-width: 768px) {
   .header__menu .menu__item:hover > .sub__menu {
      opacity: 1;
      visibility: visible;
   }
   .header__menu .menu__item:hover > .expand-btn:after {
      transform: translateY(-50%) rotate(180deg);
   }
}

@media (min-width: 768px) {
   .header__menu .menu__item .sub__menu--right .expand-btn:after,
.header__menu .menu__item .sub__menu--left .expand-btn:after {
      right: 0.625rem;
   }
}

@media (min-width: 768px) {
   .header__menu .sub__menu {
      position: absolute;
      z-index: 99;
      top: 100%;
      width: 190px;
      padding: 5px 0;
      border-radius: 0 0 5px 5px;
      background-color: var(--clr-light); /*000*/
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
   }
   .header__menu .sub__menu .menuItem__link {
      padding: 0.5rem 1.5rem 0.5rem 1rem;
   }
   .header__menu .sub__menu .menuItem__link.expand-btn::after {
      right: 10px;
   }
}

@media (max-width: 767px) {
   .header__menu .sub__menu {
      display: none;
      position: relative;
      z-index: 999;
      top: 0;
      padding: 10px 0;
      width: 100%;
      overflow: hidden;
      background-color: var(--clr-lighter); /*111*/
   }
   .header__menu .sub__menu .menu__item {
      border-bottom-color: #ECECEC;
   }
}

.header__menu .sub__menu--right {
   top: 0;
   left: 100%;
}

@media (max-width: 767px) {
   .header__menu .sub__menu--right {
      top: 0;
      left: 0;
      right: auto;
      width: 100%;
      padding-left: 1rem;
   }
   .header__menu .sub__menu--right:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 17px;
      width: 1px;
      height: calc(100% - 25px);
      background-color: rgba(255, 255, 255, 0.1);
      transform: translateY(-50%);
   }
}

.header__menu .sub__menu--left {
   top: 0;
   left: -100%;
}

@media (max-width: 767px) {
   .header__menu .sub__menu--left {
      top: 0;
      left: 0;
      width: 100%;
      padding-left: 1rem;
   }
   .header__menu .sub__menu--left:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 17px;
      width: 1px;
      height: calc(100% - 25px);
      background-color: rgba(255, 255, 255, 0.1);
      transform: translateY(-50%);
   }
}

.header__menu .menuItem__link {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 1rem;
   font-size: 14px;
   transition: 0.25s;
}

.header__menu .menuItem__link:hover {
   color: var(--clr-black); /*ff5722*/
}

@media (max-width: 768px) {
   .header__menu .menuItem__link.expand-btn::after {
      right: 15px;
   }
}

.header__menu ul li {
   list-style: none;
   transition: 0.3s ease;
}

.header__menu ul li a {
   position: relative;
   text-decoration: none;
   color: var(--clr-dark); /*FFF*/
}

@media (min-width: 768px) {
   .header__menu .menu__item:has(.mega__menu) {
      position: inherit !important;
   }
}

@media (min-width: 768px) {
   .header__menu .mega__menu {
      position: absolute;
      top: 65px;
      left: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      padding-top: 0;
      background-color: transparent;
      box-shadow: none;
      border-radius: 0;
      transition: all 0.4s ease-out 0s, visibility 0.1s linear 0s;
   }
}

@media (max-width: 767px) {
   .header__menu .mega__menu {
      position: relative;
      display: none;
      padding-left: 0;
      padding: 0;
   }
}

.header__menu .megaMenu__wrap {
   padding: 30px;
}

@media (max-width: 767px) {
   .header__menu .megaMenu__wrap {
      padding: 1rem;
   }
}

.header__menu .megaMenu__inner {
   display: flex;
   flex-flow: row wrap;
   gap: 20px;
}

.header__menu .megaMenu__inner .megaMenu__item .megaMenuTitle {
   display: flex;
}

.header__menu .megaMenu__inner .megaMenu__item .megaMenuTitle a {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-weight: 700;
   transition: 0.25s;
}

.megaMenuTitle, .megaMenuTitle a {  /* added ************************************************* */
   color: var(--clr-darkl);
   font-weight: 500;
   /*text-transform: uppercase;*/
}


@media (max-width: 1023px) {
   .header__menu .megaMenu__inner .megaMenu__item .megaMenuTitle a {
      padding-left: 0;
   }
}

.header__menu .megaMenu__inner .megaMenu__item .megaMenuTitle a:hover {
   color: var(--clr-black); /*ff5722*/
}

.header__menu .megaMenu__inner .megaMenu__item .megaMenuContent .sub__menu--static {
   padding-left: 0;
}

.header__menu .megaMenu__inner .megaMenu__item .megaMenuContent .sub__menu--static .menu__item .menuItem__link {
   padding-left: 0;
   padding-right: 0;
}

@media (min-width: 768px) {
   .header__menu .menu__category {
      display: flex;
      justify-content: center;
   }
}

.header__menu .menu__category .megaMenu__wrap {
   min-width: 100%;
   flex-basis: 100%;
   border-radius: 0 0 5px 5px;
   background-color: var(--clr-light); /*111*/
   box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
}

@media (min-width: 1024px) {
   .header__menu .menu__category .megaMenu__wrap {
      min-width: 85%;
      flex-basis: 85%;
      background-color: var(--clr-light); /*000*/
   }
}

.header__menu .menu__category .megaMenu__inner .megaMenu__item {
   display: flex;
   flex-flow: column;
   min-width: calc(18% - 10px); /*calc(33.333333% - 13.333333px)*/
   flex-basis: calc(18% - 10px);
}

@media (max-width: 767px) {
   .header__menu .menu__category .megaMenu__inner .megaMenu__item {
      min-width: calc(50% - 13.333333px);
      flex-basis: calc(50% - 13.333333px);
   }
}

@media (max-width: 575px) {
   .header__menu .menu__category .megaMenu__inner .megaMenu__item {
      min-width: 100%;
      flex-basis: 100%;
   }
}

@media (min-width: 768px) {
   .header__menu .menu__catalogue {
      display: flex;
      justify-content: center;
   }
}

.header__menu .menu__catalogue .megaMenu__wrap {
   display: flex;
   flex-flow: row wrap;
   gap: 0;
   min-width: 100%;
   flex-basis: 100%;
   border-radius: 0 0 5px 5px;
   background-color: var(--clr-lighter); /*111*/
   box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.15);
}

@media (min-width: 1024px) {
   .header__menu .menu__catalogue .megaMenu__wrap {
      min-width: 85%;
      flex-basis: 85%;
      background-color: var(--clr-light); /*000*/
   }
}

@media (max-width: 767px) {
   .header__menu .menu__catalogue .megaMenu__wrap {
      row-gap: 15px;
   }
}

.header__menu .menu__catalogue .megaMenu__inner {
   flex-basis: 50%;
   min-width: 50%;
}

@media (max-width: 767px) {
   .header__menu .menu__catalogue .megaMenu__inner {
      flex-basis: 100%;
      min-width: 100%;
   }
}

.header__menu .menu__catalogue .megaMenu__inner .megaMenu__item {
   display: flex;
   flex-flow: column;
   min-width: calc(33.333333% - 13.333333px);
   flex-basis: calc(33.333333% - 13.333333px);
}

@media (max-width: 767px) {
   .header__menu .menu__catalogue .megaMenu__inner .megaMenu__item {
      min-width: calc(50% - 13.333333px);
      flex-basis: calc(50% - 13.333333px);
   }
}

@media (max-width: 575px) {
   .header__menu .menu__catalogue .megaMenu__inner .megaMenu__item {
      min-width: 100%;
      flex-basis: 100%;
   }
}

.header__menu .menu__catalogue .menuMega__catalogue {
   display: flex;
   flex-flow: row wrap;
   flex-basis: 50%;
   min-width: 50%;
   gap: 10px;
}

@media (max-width: 767px) {
   .header__menu .menu__catalogue .menuMega__catalogue {
      flex-basis: 100%;
      min-width: 100%;
   }
}

.header__menu .menu__catalogue .menuMega__catalogue .col--left,
.header__menu .menu__catalogue .menuMega__catalogue .col--right {
   flex-basis: calc(50% - 5px);
   min-width: calc(50% - 5px);
}

.header__menu .menu__catalogue .menuMega__catalogue .col--left {
   display: flex;
   flex-flow: column;
   gap: 10px;
}

.header__menu .menu__catalogue .menuMega__catalogue .col--left img {
   aspect-ratio: 4/3;
   -o-object-fit: cover;
       object-fit: cover;
}

.header__menu .menu__catalogue .menuMega__catalogue .col--right .menuCatalogue__item {
   height: 100%;
}

.header__menu .menu__catalogue .menuMega__catalogue .col--right a {
   height: 100%;
}

.header__menu .menu__catalogue .menuMega__catalogue .col--right img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
       object-fit: cover;
}

.header__menu .menu__catalogue .menuMega__catalogue .menuCatalogue__item a {
   display: flex;
   position: relative;
   border-radius: 10px;
   overflow: hidden;
}

.header__menu .menu__catalogue .menuMega__catalogue .menuCatalogue__item a:hover img {
   transform: scale(1.1);
}

.header__menu .menu__catalogue .menuMega__catalogue .menuCatalogue__item a img {
   width: 100%;
   transform: scale(1);
   transition: 0.25s;
}

.header__menu .menu__catalogue .menuMega__catalogue .menuCatalogue__item a p {
   position: absolute;
   z-index: 2;
   bottom: 0;
   width: 100%;
   padding: 20px 10px;
   text-align: center;
   color: #fff;
}

.header__menu .menu__catalogue .menuMega__catalogue .menuCatalogue__item a:before {
   z-index: 1;
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 70%;
   background: black;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.menu__btn {
   position: relative;
   display: none;
   justify-content: center;
   align-items: center;
   width: 1.5rem;
   height: 1.5rem;
   cursor: pointer;
   z-index: 2;
}

@media (max-width: 767px) {
   .menu__btn {
      display: flex;
   }
}

.menu__btn .menu__btn__lines,
.menu__btn .menu__btn__lines::before,
.menu__btn .menu__btn__lines::after {
   width: 1.5rem;
   height: 0.1rem;
   background: var(--clr-black);  /*#fff */
   transition: all 0.4s ease-in-out;
}

.menu__btn .menu__btn__lines::before, .menu__btn .menu__btn__lines::after {
   content: "";
   position: absolute;
}

.menu__btn .menu__btn__lines::before {
   transform: translateY(-0.5rem);
}

.menu__btn .menu__btn__lines::after {
   transform: translateY(0.5rem);
}

.menu__btn.open .menu__btn__lines {
   transform: translateX(1rem);
   background: transparent;
}

.menu__btn.open .menu__btn__lines::before {
   transform: rotate(45deg) translate(-0.5rem, 0.5rem);
   background: var(--clr-black);  /*#fff */
   height: 0.05rem;
}

.menu__btn.open .menu__btn__lines::after {
   transform: rotate(-45deg) translate(-0.5rem, -0.5rem);
   background: var(--clr-black);  /*#fff */
   height: 0.05rem;
}

.expand-btn:after {
   position: absolute;
   top: 50%;
   right: 0;
   content: " ";
   font-family: "Font Awesome 6 Free";
   font-size: 11px;
   font-weight: 900;
   opacity: 0.75;
   transform: translateY(-50%) rotate(0);
   transition: 0.25s;
}

.expand-btn.open {
   color: var(--clr-dark); /*ff5722*/
}

.expand-btn.open:after {
   transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 767px) {
   .overflow {
      overflow: hidden;
   }
}

@media (max-width: 1023px) {
   .overlay {
      position: fixed;
      z-index: 500;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: hsl(from var(--clr-white) h s calc(l + 20%));  /*rgba(0, 0, 0, 0.6) */
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
   }
   .overlay.overlay--active {
      opacity: 1;
      visibility: visible;
   }
}

/* container */
.container {
   margin: 100px auto auto;
   padding: 0 30px;
   max-width: 1200px;
   text-align: center;
}

.container h1 {
   font-size: 24px;
   font-weight: 700;
   line-height: 1.4;
   color: var(--clr-black);  /*fff*/
   text-transform: uppercase;
}

.container ul {
   list-style: none;
}

.container ul li {
   text-align: center;
   padding: 0.625rem 0;
   color: var(--clr-dark);  /*fff*/
}