.mega_menu_anim {

  -webkit-animation-name: animateside;
  -webkit-animation-duration: 0.4s;
   animation-name: animateside;
   animation-duration: 0.4s
}
@media only screen and (min-width:768px)
{
    .mega_menu_anim {

      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
    }
}


/*//..............................................................................................................
//.....AAAA......NNNN....NNN..III..MMMMM...MMMMM.......DDDDDDDDD.......OOOOOO....WWW...WWWWW...WWW.NNNN....NNN..
//.....AAAAA.....NNNN....NNN..III..MMMMM...MMMMM.......DDDDDDDDDD....OOOOOOOOOO..WWW...WWWWW...WWW.NNNN....NNN..
//.....AAAAA.....NNNNN...NNN..III..MMMMM...MMMMM.......DDDDDDDDDDD..OOOOOOOOOOOO.WWWW..WWWWW..WWWW.NNNNN...NNN..
//....AAAAAA.....NNNNN...NNN..III..MMMMM...MMMMM.......DDD....DDDD..OOOO....OOOO.WWWW..WWWWW..WWWW.NNNNN...NNN..
//....AAAAAAA....NNNNNN..NNN..III..MMMMMM.MMMMMM.......DDD.....DDD..OOO......OOO..WWW.WWWWWWW.WWW..NNNNNN..NNN..
//...AAAA.AAA....NNNNNNN.NNN..III..MMMMMM.MMMMMM.......DDD.....DDDDOOOO......OOOO.WWW.WWW.WWW.WWW..NNNNNNN.NNN..
//...AAA..AAAA...NNN.NNN.NNN..III..MMMMMM.MMMMMM.......DDD.....DDDDOOOO......OOOO.WWWWWWW.WWW.WWW..NNN.NNN.NNN..
//...AAAAAAAAA...NNN.NNNNNNN..III..MMMMMMMMMMMMM.......DDD.....DDDDOOOO......OOOO.WWWWWWW.WWWWWWW..NNN.NNNNNNN..
//..AAAAAAAAAA...NNN..NNNNNN..III..MMM.MMMMM.MMM.......DDD.....DDD..OOO......OOO...WWWWWW..WWWWW...NNN..NNNNNN..
//..AAAAAAAAAAA..NNN..NNNNNN..III..MMM.MMMMM.MMM.......DDD....DDDD..OOOO....OOOO...WWWWW...WWWWW...NNN..NNNNNN..
//..AAA.....AAA..NNN...NNNNN..III..MMM.MMMMM.MMM.......DDDDDDDDDDD..OOOOOOOOOOOO...WWWWW...WWWWW...NNN...NNNNN..
//.AAAA.....AAAA.NNN....NNNN..III..MMM..MMMM.MMM.......DDDDDDDDDD....OOOOOOOOOO....WWWWW...WWWWW...NNN....NNNN..
//.AAA......AAAA.NNN....NNNN..III..MMM..MMM..MMM.......DDDDDDDDD.......OOOOOO......WWWW.....WWWW...NNN....NNNN..
//..............................................................................................................
*/


/*@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
*/
@keyframes animatetop {
  from {top:-320px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animateclose {
  from {top:0; opacity:1}
  to {top:-320px; opacity:0}
}

@keyframes animateside{
  from {right:-300px; opacity:0}
  to {right:0; opacity:1}
}

.close_anim
{
  -webkit-animation-name: animateclose;
   -webkit-animation-duration: 0.4s;
   animation-name: animateclose;
   animation-duration: 0.4s
}


@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.panel {
  animation: fadein .4s;
}
.nav_button {
  animation: fadein 0.8s;
  box-shadow: none; 
  animation-duration: 0.5s
}
.nav_button-product {
  animation-duration: 0.5s,
}

/* Keep product mega-menu scrollbars discoverable across browsers and panels. */
#mega_menu_products_modal :is(
  #product,
  #product > .tw-gap-1 > div:first-child,
  #product .panel,
  #product [class*="tw-overflow-y-auto"],
  #product [class*="tw-overflow-y-scroll"],
  #product [class*="tw-overflow-scroll"]
) {
  min-height: 0;
  scrollbar-color: #94a3b8 #f1f5f9;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

#mega_menu_products_modal :is(
  #product,
  #product > .tw-gap-1 > div:first-child,
  #product .panel,
  #product [class*="tw-overflow-y-auto"],
  #product [class*="tw-overflow-y-scroll"],
  #product [class*="tw-overflow-scroll"]
)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

#mega_menu_products_modal :is(
  #product,
  #product > .tw-gap-1 > div:first-child,
  #product .panel,
  #product [class*="tw-overflow-y-auto"],
  #product [class*="tw-overflow-y-scroll"],
  #product [class*="tw-overflow-scroll"]
)::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}

#mega_menu_products_modal :is(
  #product,
  #product > .tw-gap-1 > div:first-child,
  #product .panel,
  #product [class*="tw-overflow-y-auto"],
  #product [class*="tw-overflow-y-scroll"],
  #product [class*="tw-overflow-scroll"]
)::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border: 2px solid #f1f5f9;
  border-radius: 999px;
}

#mega_menu_products_modal :is(
  #product,
  #product > .tw-gap-1 > div:first-child,
  #product .panel,
  #product [class*="tw-overflow-y-auto"],
  #product [class*="tw-overflow-y-scroll"],
  #product [class*="tw-overflow-scroll"]
)::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}


/*//.......................................................................................................................
//.TTTTTTTTTTT..AAAA.....AABBBBBBBB...........OOOOOOO....OORRRRRRRR...RRDDDDDDD....DDEEEEEEEEE.EERRRRRRRR.....SSSSSSS....
//.TTTTTTTTTTT..AAAA.....AABBBBBBBBB.........OOOOOOOOO...OORRRRRRRRR..RRDDDDDDDDD..DDEEEEEEEEE.EERRRRRRRRR...RSSSSSSSS...
//.TTTTTTTTTTT.AAAAAA....AABBBBBBBBBB....... OOOOOOOOOO..OORRRRRRRRRR.RRDDDDDDDDD..DDEEEEEEEEE.EERRRRRRRRRR..RSSSSSSSS...
//.....TTT.....AAAAAA....AABB....BBBB....... OOO...OOOOO.OORR....RRRR.RRDD....DDDD.DDEE........EERR....RRRR.RRSS...SSSS..
//.....TTT....AAAAAAA....AABB....BBBB...... OO.....OOOO.OORR....RRRR.RRDD.....DDD.DDEE........EERR....RRRR.RRSS.........
//.....TTT....AAA.AAAA...AABBBBBBBBB....... O.......OOO.OORRRRRRRRRR.RRDD.....DDD.DDEEEEEEEE..EERRRRRRRRRR..RSSSSSS.....
//.....TTT....AAA..AAA...AABBBBBBBBB....... O.......OOO.OORRRRRRRRR..RRDD.....DDD.DDEEEEEEEE..EERRRRRRRRR....SSSSSSSS...
//.....TTT...TAAAAAAAAA..AABBBBBBBBBB...... O.......OOO.OORRRRRRR....RRDD.....DDD.DDEEEEEEEE..EERRRRRRR........SSSSSSS..
//.....TTT...TAAAAAAAAA..AABB.....BBB...... OO.....OOOO.OORR..RRRR...RRDD.....DDD.DDEE........EERR..RRRR..........SSSS..
//.....TTT...TAAAAAAAAA..AABB.....BBB....... OOO...OOOOO.OORR...RRRR..RRDD....DDDD.DDEE........EERR...RRRR..RRSS....SSS..
//.....TTT..TTAA....AAAA.AABBBBBBBBBB....... OOOOOOOOOO..OORR...RRRR..RRDDDDDDDDD..DDEEEEEEEEE.EERR...RRRR..RRSSSSSSSSS..
//.....TTT..TTA......AAA.AABBBBBBBBBB........OOOOOOOOO...OORR....RRRR.RRDDDDDDDDD..DDEEEEEEEEE.EERR....RRRR..RSSSSSSSS...
//.....TTT.TTTA......AAAAAABBBBBBBB...........OOOOOOO....OORR.....RRRRRRDDDDDDD....DDEEEEEEEEE.EERR.....RRRR..SSSSSSS....
//.......................................................................................................................
*/



#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel,
#four:checked ~ .panels #four-panel,
#five:checked ~ .panels #five-panel,
#six:checked ~ .panels #six-panel
{
  display: flex;
}

#one:checked ~ .tab_nav #one-tab,
#two:checked ~ .tab_nav #two-tab,
#three:checked ~ .tab_nav #three-tab,
#four:checked ~ .tab_nav #four-tab,
#five:checked ~ .tab_nav #five-tab,
#six:checked ~ .tab_nav #six-tab
{
}

.fc-sanitary-filter {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 16px 24px 24px;
  color: #334155;
}

.fc-sanitary-filter__heading {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.fc-sanitary-filter__heading h2 {
  margin: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.fc-sanitary-filter__grid,
.fc-sanitary-filter__options {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fc-sanitary-filter__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.fc-sanitary-filter__column {
  min-width: 0;
}

.fc-sanitary-filter__category,
.fc-sanitary-filter__option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #334155;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.fc-sanitary-filter__category {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  padding: 0;
  border: 1px solid #dbe3ec;
  border-radius: 8px 8px 0 0;
  background: #ffffff;
  overflow: hidden;
}

.fc-sanitary-filter__category-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f5f9;
}

.fc-sanitary-filter__category-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
}

.fc-sanitary-filter__category-label {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.fc-sanitary-filter__category:hover,
.fc-sanitary-filter__category:focus-visible {
  border-color: #cbd5e1;
}

.fc-sanitary-filter__category:hover .fc-sanitary-filter__category-image img,
.fc-sanitary-filter__category:focus-visible .fc-sanitary-filter__category-image img {
  transform: scale(1.04);
}

.fc-sanitary-filter__category:hover .fc-sanitary-filter__category-label,
.fc-sanitary-filter__category:focus-visible .fc-sanitary-filter__category-label {
  color: #b42318;
}

.fc-sanitary-filter__options {
  border-right: 1px solid #dbe3ec;
  border-bottom: 1px solid #dbe3ec;
  border-left: 1px solid #dbe3ec;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background: #ffffff;
}

.fc-sanitary-filter__option {
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-bottom: 1px solid #e8edf2;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.fc-sanitary-filter__option-label {
  min-width: 0;
}

.fc-sanitary-filter__arrow {
  flex: 0 0 auto;
  color: #d92d20;
  font-size: 24px;
  font-weight: 400;
  line-height: 0.8;
}

.fc-sanitary-filter__options li:last-child .fc-sanitary-filter__option {
  border-bottom: 0;
}

.fc-sanitary-filter__option:hover,
.fc-sanitary-filter__option:focus-visible {
  background: #f8fafc;
  color: #b42318;
}

.fc-sanitary-filter__option:hover .fc-sanitary-filter__arrow,
.fc-sanitary-filter__option:focus-visible .fc-sanitary-filter__arrow {
  color: #b42318;
}

.fc-sanitary-filter__category:focus-visible,
.fc-sanitary-filter__option:focus-visible {
  outline: 3px solid rgba(180, 35, 24, 0.24);
  outline-offset: 2px;
}

@media (max-width: 1199px) {
  .fc-sanitary-filter__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .fc-sanitary-filter {
    padding: 16px;
  }

  .fc-sanitary-filter__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .fc-sanitary-filter__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-sanitary-filter__category,
  .fc-sanitary-filter__option,
  .fc-sanitary-filter__category-image img {
    transition: none;
  }
}