:root {
  /* === Font === */
  --font-primary: 'KalamehWebFaNum', sans-serif;

  /* === Colors === */
  --color-primary: #00A693;
  --color-secondary: #F25637;
  --color-dark: #1a1a1a;
  --color-light: #f9f9f9;
  --color-gray: #888888;
  --color-white: #ffffff;

  /* === Layout === */
  /*--container-width: 1200px;*/
  --border-radius: 16px;
  --transition: all 0.3s ease-in-out;
  --boarder: 1px solid #EDEDED;

  /* === Typography === */
  --font-size-base: 16px;
  --font-size-small: 14px;
  --font-size-large: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}
.lion-mega-trigger:hover {
    color: white;
    padding-right: 10px;
    padding-left: 8px;
}

* {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
  }
  *::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: 'KalamehWebFaNum';
  src: url('../font/KalamehWebFaNum-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KalamehWebFaNum';
  src: url('../font/KalamehWebFaNum-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KalamehWebFaNum';
  src: url('../font/KalamehWebFaNum-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KalamehWebFaNum';
  src: url('../font/KalamehWebFaNum-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KalamehWebFaNum';
  src: url('../font/KalamehWebFaNum-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
button:hover {
  background-color: none !important;
  color: black;
}
button:focus {
  background-color: inherit !important;
}

/* Apply globally */
html, body, p, a, span, div, input, button, select, textarea,
h1, h2, h3, h4, h5, h6, strong, b, i, label, ul, li {
  font-family: 'KalamehWebFaNum', sans-serif !important;
}
body {
  background: #EFF3FC;
}
p {
    padding: 0px;
    margin: 0px !important;
    line-height: 2;
}
a {
    /* display: flex; */
    align-items: center;
    /* color: #9d02ff; */
}


@media (max-width: 992px) {
    h1 {
    line-height: 1.7;
    font-size: 18px !important;
}
p {
    padding: 0px;
    margin: 0px !important;
    line-height: 2;
    font-size: 16px;
}
div {
    line-height: 2;
}
}
.lion-mob-popover input[type="search"],
.lion-mobile-search-overlay input[type="search"] {
  -webkit-text-size-adjust: 100%;
}

main#content {
    display: flex;
    justify-content: center;
    padding: 0px 4%;
}
.page-content {
    /* padding: 0px 2%; */
    max-width: 1400px;
    width: 100%;
}
.mood-switch-icon {
    border: 1px solid #DFE0E5;
    background: white;
    border-radius: 100px;
    width: 32px;
    height: 32px;
    display: flex
;
    align-items: center;
    justify-content: center;
}
a.discount-section {
    display: flex
;
    gap: 6px;
    background: #F25637;
    border-radius: 100px;
    color: white;
    font-size: 14px;
    align-items: center;
    width: 98px;
    justify-content: center;
    height: 32px;
}

.fa-solid {
    font-family: "Font Awesome 6 Free" !important;
}

[type=button]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    border: none;
}

/* === lion Header === */
.lion-header {
    direction: rtl;
    width: 100%;
    background: #F5F8FD;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-family: "IRANSans", sans-serif;
}

/* === Blog Header Variant (menu id 56) === */
.lion-header--blog {
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.lion-header--blog .lion-blog-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0.9rem 3%;
  flex-direction: row-reverse; /* logo right, actions left */
  position: sticky;
  top: 0;
  z-index: 1200;
  background: #F5F8FD;
  transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.lion-header--blog.header-scrolled .lion-blog-header-bar {
  padding: 0.65rem 3%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  animation: lionFadeDown 0.45s cubic-bezier(0.55, 0.1, 0.3, 1);
}
.lion-header--blog .lion-blog-header-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.lion-header--blog .lion-blog-header-nav {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}
.lion-header--blog .lion-blog-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow: visible;
}
.lion-header--blog .lion-blog-nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 16px;
  gap:10px
}
.lion-header--blog .lion-blog-nav__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}
.lion-header--blog .lion-blog-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr; /* keep icons order like UI (left-to-right) */
}
.lion-header--blog .lion-blog-actions-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lion-header--blog .lion-blog-actions-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lion-header--blog .lion-blog-icon-btn {
  border: 1px solid #DFE0E5;
  background: #fff;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #1a1a1a;
  text-decoration: none;
}
.lion-header--blog .lion-blog-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.lion-header--blog .lion-blog-discount {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #DFE0E5;
  background: #fff;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  direction: rtl;
}
.lion-header--blog .lion-blog-discount img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.lion-header--blog .lion-blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #F25637; /* default color */
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  direction: rtl;
}
.lion-header--blog .lion-blog-pill--shop {
  background: #00A693;
}
.lion-header--blog .lion-blog-pill img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

@media (max-width: 992px) {
  .lion-header--blog .lion-blog-header-bar {
    padding: 0.65rem 4%;
    gap: 12px;
    display:none;
  }
  .lion-header--blog .lion-blog-nav {
    justify-content: flex-start;
    gap: 18px;
  }
  .lion-header--blog .lion-blog-nav a {
    font-size: 14px;
  }
  .lion-header--blog .lion-blog-icon-btn {
    width: 40px;
    height: 40px;
  }
  .lion-header--blog .lion-blog-pill {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }
}

/* === Simple "waterfall" dropdowns for WP menus (blog + simple menu) === */
.lion-header--blog .lion-blog-nav > li,
.lion-nav > li {
  position: relative;
}

.lion-header--blog .lion-blog-nav,
.lion-nav,
.lion-header--blog .lion-blog-nav .sub-menu,
.lion-nav .sub-menu {
  list-style: none;
}

.lion-header--blog .lion-blog-nav .sub-menu,
.lion-nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(223, 224, 229, 0.95);
  border-radius: 16px;
  padding: 10px;
  margin: 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 3000;
}

.lion-header--blog .lion-blog-nav li:hover > .sub-menu,
.lion-nav li:hover > .sub-menu,
.lion-header--blog .lion-blog-nav li:focus-within > .sub-menu,
.lion-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.lion-header--blog .lion-blog-nav .sub-menu li,
.lion-nav .sub-menu li {
  position: relative;
}

.lion-header--blog .lion-blog-nav .sub-menu a,
.lion-nav .sub-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #0D2546;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.lion-header--blog .lion-blog-nav .sub-menu a:hover,
.lion-nav .sub-menu a:hover {
  background: #F5F8FD;
}

/* Nested submenus cascade to the left in RTL (waterfall) */
.lion-header--blog .lion-blog-nav .sub-menu .sub-menu,
.lion-nav .sub-menu .sub-menu {
  top: 0;
  right: calc(100% + 10px);
  transform: translateX(-8px);
}

.lion-header--blog .lion-blog-nav .sub-menu li:hover > .sub-menu,
.lion-nav .sub-menu li:hover > .sub-menu,
.lion-header--blog .lion-blog-nav .sub-menu li:focus-within > .sub-menu,
.lion-nav .sub-menu li:focus-within > .sub-menu {
  transform: translateX(0);
}

/* Small caret for items with children */
.lion-header--blog .lion-blog-nav li.menu-item-has-children > a::after,
.lion-nav li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  margin-inline-start: 6px;
  opacity: 0.75;
}

/* --- Top Bar --- */
.lion-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 3%;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
}
.lion-cart-icon {
    border: 1px solid #DFE0E5;
    padding: 8px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    border-radius: 56px;
    width: 44px;
    height: 44px;
    position: relative;
    overflow: visible;
    z-index: 1000;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background: white;
}

.lion-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: #ff2d2d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    display: flex
;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    opacity: 1;
    transition: all 0.25s ease;
}

.lion-cart-count.active {
  opacity: 1;
  transform: scale(1);
}



.lion-cart-icon img {
    width: 26px;
    height: 26px;
    z-index: 2;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: none;
}

/* Wave layer — hidden by default */
.lion-cart-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #00A693;
    background-size: 100% 200%;
    transform: translateY(100%);  /* below the icon */
    opacity: 0;                   /* fully hidden */
    z-index: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    pointer-events: none;
}

/* Hover state — wave fills up smoothly */
.lion-cart-icon:hover::before {
    opacity: 1;
    transform: translateY(0);
}

/* Optional smooth exit (optional but nice) */
.lion-cart-icon:active::before,
.lion-cart-icon:not(:hover)::before {
    opacity: 0;
    transform: translateY(100%);
}

/* Image hover style */
.lion-cart-icon:hover img {
    transform: scale(1.1);
    filter: brightness(0) invert(1);
}


.lion-login-icon {
    display: flex
;
    align-items: center;
    gap: 5px;
    background: #00A693;
    height: 44px;
    padding: 12.5px 16px;
    color: white;
    border-radius: 100px;
    font-size: 14px;
}
.lion-top-left,
.lion-top-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.lion-support {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.lion-support i {
    color: #7b3ef9;
}
.lion-discount {
    display: flex;
    align-items: center;
    color: #7b3ef9;
    font-weight: 500;
    cursor: pointer;
}
.lion-account a,
.lion-cart a {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #333;
    text-decoration: none;
    transition: all .3s ease;
}
.lion-account a:hover,
.lion-cart a:hover {
    color: #7b3ef9;
}

/* --- Main Header --- */
.lion-header-main {
    display: flex;
    padding: .4rem 3%;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.lion-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.lion-logo img {
    width: 150px;
    
}
.lion-logo span {
    font-size: 22px;
    font-weight: 700;
    color: #1c1c1c;
}

/* --- Search --- */
.lion-search {
    flex: 1;
    max-width: 450px;
    position: relative;
}
.lion-search input {
    width: 100%;
    padding: .7rem 1rem .7rem 2.5rem;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    background: #fafafa;
    font-size: 14px;
    outline: none;
    transition: all .3s;
}
.lion-search input:focus {
    background: #fff;
    border-color: #7b3ef9;
}
.lion-search button {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
}

/* --- Navigation --- */
.lion-menu {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}
.lion-menu li a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color .3s;
}
.lion-menu li a:hover {
    color: #7b3ef9;
}

/* ======================================================
   lion MEGA MENU — FINAL FIX CLEAN VERSION (RTL)
   ====================================================== */

.lion-header-main {
  position: relative;
  z-index: 999;
  direction: rtl;
  font-family: "IRANSans", sans-serif;
}

/* === Trigger === */
.lion-mega-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0px;
  border-radius: 12px;
  background: #f9f9fb;
  color: #0D2546;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.lion-mega-trigger:hover {
  /* background: #f0efff; */
  /* color: #6b63ff; */
}
.lion-mega-trigger i {
  transition: transform 0.3s ease;
}
.lion-mega-menu.active .lion-mega-trigger i {
  transform: rotate(180deg);
}

/* === Dropdown container === */
.lion-mega-content {
  position: absolute;
  top: calc(100% + 0px);
  right: 0;
  width: 100%;
  max-width: calc(100vw - 0px);
  height: 380px;
  padding: .4rem 3%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: #EFF3FC;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  z-index: 1200;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.lion-mega-menu:hover .lion-mega-content,
.lion-mega-menu.active .lion-mega-content {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* === Mega Menu Structure (Right Parents + Left Panel) === */
.lion-mega-parents {
  height: 100%;
  width: 220px;
  overflow-y: auto;
  border-inline-end: 1px solid #EEF0F4;
  padding: 12px 0;
}

.lion-mega-parent-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #1F2937;
  text-decoration: none;
  font-size: 14px;
  border-inline-end: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  height: 42px;
}

.lion-mega-parent-title {
  flex: 1;
  font-weight: 500;
}

.lion-mega-parent-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.lion-mega-parent-icon--placeholder {
  display: inline-block;
  background: #EEF0F4;
  border-radius: 6px;
}

.lion-mega-parent-item:hover > .lion-mega-parent-link,
.lion-mega-parent-item:focus-within > .lion-mega-parent-link {
  background: #F5F7FA;
  /* color: #00A693; */
  border-right: 3px solid #00A693;
  border-inline-start-color: #00A693; 
}

.lion-mega-parents:not(:hover):not(:focus-within) > .lion-mega-parent-item:first-child > .lion-mega-parent-link {
  background: #F5F7FA;
  color: #00A693;
  border-inline-start-color: #00A693;
}

.lion-mega-panel {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 260px; /* must match .lion-mega-parents width */
  left: 0;
  padding: 18px 20px 20px;
  overflow: hidden;
  flex-direction: column;
}

.lion-mega-parent-item:hover > .lion-mega-panel,
.lion-mega-parent-item:focus-within > .lion-mega-panel {
  display: flex;
}

.lion-mega-parents:not(:hover):not(:focus-within) > .lion-mega-parent-item:first-child > .lion-mega-panel {
  display: flex;
}

.lion-mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #0D2546;
  text-decoration: none;
  margin-bottom: 34px;
}

.lion-mega-panel-body {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
}
ul.lion-mega-col-list {
    padding-right: 11px;
}
li.lion-mega-parent-item {
    margin-bottom: 10px;
}

.lion-mega-cols {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-content: flex-start;
  overflow: auto;
  min-height: 0;
  padding-inline-start: 4px; /* keep scrollbar away from content */
}

.lion-mega-col {
  min-width: 160px;
}

.lion-mega-col-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0D2546;
  text-decoration: none;
  margin-bottom: 10px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid #00A693;
}

.lion-mega-col-list a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #3B4453;
  text-decoration: none;
  transition: color 0.2s ease;
}

.lion-mega-col-list a:hover {
  color: #00A693;
}

.lion-mega-image {
  width: 280px;
  flex: 0 0 280px;
}

.lion-mega-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 1200px) {
  .lion-mega-content {
    width: 980px;
    height: 440px;
  }
  .lion-mega-image {
    display: none;
  }
}

/* === Hide duplicate “محصولات” === */
.lion-mega-content .lion-mega-nav > li > a {
  display: none !important;
}

/* === Level 1 visible list === */
.lion-mega-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lion-mega-nav > li {
  position: relative;
}
.lion-mega-nav > li > .sub-menu {
  position: static;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
}

/* === Level 2 items === */
.lion-mega-nav > li > .sub-menu > li {
  position: relative;
  border-radius: 8px;
  transition: background 0.25s ease;
}
.lion-mega-nav > li > .sub-menu > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #222;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  transition: all 0.25s ease;
}
.lion-mega-nav > li > .sub-menu > li:hover > a {
  background: #f4f3ff;
  color: #6b63ff;
}

/* === Submenu (level 3) === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu {
  position: absolute;
  top: 0;
  right: calc(100% + -10px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1200;
}
.lion-mega-nav > li > .sub-menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* === Level 3 links === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > a {
  display: block;
  color: #444;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li:hover > a {
  background: #f4f3ff;
  color: #6b63ff;
}

/* === Level 4 container === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li {
  position: relative;
}

/* === Level 4 submenu === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu {
  position: absolute;
  top: 0;
  right: calc(100% + -10px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1300;
}
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* === Level 4 links === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
  display: block;
  color: #444;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li:hover > a {
  background: #f4f3ff;
  color: #6b63ff;
}

/* === Level 5 submenu === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu {
  position: absolute;
  top: 0;
  right: calc(100% + 6px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  padding: 10px 14px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1400;
}
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* === Level 5 links === */
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
  display: block;
  color: #444;
  font-size: 13.5px;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li:hover > a {
  background: #f4f3ff;
  color: #6b63ff;
}
.lion-mega-nav > li > .sub-menu > li > .sub-menu > li > .sub-menu > li {
    position: relative;
}


/* ======================================================
   KEEP PARENT ACTIVE WHILE CHILD IS HOVERED
   ====================================================== */
.lion-mega-nav li.menu-item-has-children:hover > a {
  background: #f4f3ff;
  color: #6b63ff;
  border-radius: 8px;
  transition: all 0.25s ease;
}




/* ======================================================
   HEADER MENU 2
   ====================================================== */

ul#menu-header-menu-2 {
    display: flex;
    gap: 40px;
}


/* ======================================================
   contact MENU 
   ====================================================== */
.lion-contact-menu {
    display: flex;
    gap: 20px;
    align-items: center;
}
.lion-contact-menu p {
    color: #141929;
}
span.pipe-line {
    border: 0.8px solid #EDEDED;
    display: none;
}
a.discount-section {
    display: flex
;
    gap: 6px;
}
.lion-platform-section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #434965;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.lion-platform-section img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.discount-section p {
    font-size: 16px;
    font-weight: 500;
}
a.call-to-us {
    display: flex
;
    gap: 10px;
    text-align: left;
}
.call-to-us-text p:nth-of-type(2) {
    color: #5F6788;
    font-size: 14px;
    font-weight: 300;
}
.call-to-us-text p:nth-of-type(1) {
    direction: ltr;
}
.lion-header-main-right {
    display: flex
;
    align-items: center;
    gap: 20px;
}
.lion-simple-menu a {
    color: #0D2546;
    font-size: 14px;
}
.lion-header-main-right span.pipe-line {
    border: 0.8px solid #EDEDED;
    height: 40px;
}





/* ======================================================
    lion Mini Cart
   ====================================================== */


/* === Mini Cart Popup under cart icon === */
.lion-cart-icon {
  position: relative;
    z-index: 100; /* keep lower */

}
a.remove.remove_from_cart_button {
    padding: 0px !important;
    margin: 0px !important;
    width: 2%;
}
.mini_cart_item a {
    width: -webkit-fill-available;
    margin: 0px !important;
    padding: 0px !important;
}
#lion-mini-cart {
  position: absolute;
  top: calc(100% + 10px);
  left: -50px;
  width: 420px;
  background: #EFF3FC;
  border-radius: 26px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  padding: 14px 16px 0;
  z-index: 10000;
  overflow: inherit;
}
.swiper,
.swiper-wrapper,
.swiper-slide {
  z-index: 1 !important;
}



#lion-mini-cart.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#lion-mini-cart::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.mini-cart-header {
  border-bottom: 0;
  color: #111;
  padding: 6px 0 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.mini-cart-body {
  max-height: 540px;
  overflow-y: auto;
  font-size: 13px;
  padding-bottom: 110px; /* space for .mini-cart-footer */
}
.mini-cart-total span.woocommerce-Price-currencySymbol {
    margin-right: 5px;
    font-size: 12px;
    color: gray;
}
.mini-cart-total bdi {
    font-weight: 600;
}

.widget_shopping_cart_content ul.cart_list:not(.lion-mini-cart-list) li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}

.widget_shopping_cart_content ul.cart_list:not(.lion-mini-cart-list) img {
  width: 45px;
  height: 45px;
  border-radius: 6px;
  filter: brightness(1) !important;
}
a.added_to_cart.wc-forward {
    display: none;
}

.widget_shopping_cart_content .total {
      font-weight: 600;
    color: #333;
    text-align: left;
    padding-top: 20px;;
}

.widget_shopping_cart_content .buttons a {
  display: block;
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 6px;
}
.widget_shopping_cart_content .buttons a.checkout {
  background: #00A693;
  color: #fff;
}
.mini-cart-header h3 {
  font-size: 14px;
  font-weight: 500;
  color: #111;
  margin: 0;
}

/* === New mini-cart item UI (cards) === */
.widget_shopping_cart_content .lion-mini-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.widget_shopping_cart_content .lion-mini-cart-item {
  display: block;
  padding: 0;
  border: 0;
}

.widget_shopping_cart_content .lion-mini-cart-item__wrap {
  background: #fff;
  border-radius: 24px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: stretch;
}

.widget_shopping_cart_content .lion-mini-cart-item__media {
  width: 80px;
  background: #EFF3FC;
  border-radius: 22px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  flex-shrink: 0;
  flex-direction: column;
}

.widget_shopping_cart_content .lion-mini-cart-item__badge {
  position: absolute;
  top: -5px;
  z-index: 10;
  background: #F25637;
  color: #fff;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.widget_shopping_cart_content .lion-mini-cart-item__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.widget_shopping_cart_content .lion-mini-cart-item__media img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 12px;
  filter: brightness(1) !important;
}

.widget_shopping_cart_content .lion-mini-cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}

.widget_shopping_cart_content .lion-mini-cart-item__title {
  color: #0D2546;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  text-align: right;
  display: block;
}

.widget_shopping_cart_content .lion-mini-cart-item__meta {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
  text-align: right;
}

.lion-mini-cart-section {
    display: flex;
}
.widget_shopping_cart_content .lion-mini-cart-item__meta dl {
  margin: 0;
  display: flex;
  align-items: center;
}
.widget_shopping_cart_content .lion-mini-cart-item__meta dt {
  display: inline;
}
.widget_shopping_cart_content .lion-mini-cart-item__meta dd {
  display: inline;
  margin: 0 4px 0 0;
}

.widget_shopping_cart_content .lion-mini-cart-item__prices {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}

.widget_shopping_cart_content .lion-mini-cart-item__price-current {
  font-size: 12px;
  font-weight: 800;
  color: #0D2546;
}
.lion-mini-cart-item__price-regular span.woocommerce-Price-currencySymbol {
    display: none;
}

.widget_shopping_cart_content .lion-mini-cart-item__price-regular {
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  text-decoration: line-through;
}

.widget_shopping_cart_content .lion-mini-cart-item__controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  width: 100%;
}

.widget_shopping_cart_content .lion-mini-cart-qty {
  background: #EFF3FC;
  border-radius: 999px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 0px;
  direction: ltr;
}

.widget_shopping_cart_content .lion-mini-cart-qty__input {
  width: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #0D2546;
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #0D2546;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn:hover {
  background: rgba(13, 37, 70, 0.06);
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn--plus {
  background: #00A693;
  color: #fff;
  border-radius: 999px;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn--plus:hover {
  background: #009b88;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn--plus:disabled {
  background: #DDE6F1;
  color: #fff;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn--plus:disabled:hover {
  background: #DDE6F1;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn i {
  font-size: 20px;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn--remove {
  background: transparent;
  color: #0D2546;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.widget_shopping_cart_content .lion-mini-cart-qty__btn:disabled:hover {
  background: transparent;
}

.widget_shopping_cart_content .lion-mini-cart-item__stock {
  color: #F25637;
  font-weight: 700;
  font-size: 14px;
  margin-inline-start: 10px;
}

.widget_shopping_cart_content .lion-mini-cart-empty {
  padding: 26px 0;
  text-align: center;
  color: #6b7280;
}
.widget_shopping_cart_content .lion-mini-cart-empty i {
  display: block;
  font-size: 30px;
  color: #c0c6d4;
  margin-bottom: 12px;
}




/* === Mobile === */
@media (max-width: 992px) {
    input,
  select,
  textarea,
  button {
    font-size: 16px !important; /* 👈 must be ≥16px */
  }

  /* Optional: stabilize page layout on focus */
  input:focus,
  select:focus,
  textarea:focus {
    zoom: 1 !important;          /* neutralizes zoom change */
    transform: none !important;
  }

  html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin-top: 70px;
  }
  
  .lion-mobile-bottom-nav.glassy-nav.pinned {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: none !important; /* prevents flicker while a sheet is open */
}

 

  .lion-mega-nav li {
    position: static;
  }

  .lion-mega-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 6px 10px;
  }

  .lion-mega-nav li a {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 12px;
  }


  .lion-cart-toast {
    bottom: 40px;
    right: 50%;
    transform: translateX(50%) translateY(10px);
  }
  .lion-cart-toast.visible {
    transform: translateX(50%) translateY(0);
  }
  .lion-cart-toast {
    position: absolute;
    bottom: 72px !important;
    right: -215px !important;
    background: #00A693;
    color: #fff;
    font-size: 16px;
    padding: 8px 14px;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transform: translateY(8px);
    transition: all 0.4s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    height: 40px;
    display: flex;
        align-items: center;
}
}


/* =========================================
   MODERN SMOOTH HEADER ANIMATIONS
   ========================================= */

/* Hide top bar smoothly */
.lion-header-top {
  transition: transform 0.5s cubic-bezier(0.55, 0.1, 0.3, 1), opacity 0.4s ease;
  transform: translateY(0);
  opacity: 1;
}

.header-scrolled .lion-header-top {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Sticky main header */
.lion-header-main {
  transition: all 0.2s cubic-bezier(0.55, 0.1, 0.3, 1);
  will-change: transform, background, box-shadow;
}

.lion-header-main.sticky {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  z-index: 1;
  animation: lionFadeDown 0.45s cubic-bezier(0.55, 0.1, 0.3, 1);
}

/* Subtle scale effect */
@keyframes lionFadeDown {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Smooth cart icon move visual correction */
.lion-cart-icon {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-scrolled .lion-cart-icon {
  transform: scale(0.95);
  opacity: 0.95;
}


/* ============================
   lion MINI CART (Custom)
   ============================ */
.lion-mini-cart {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  direction: rtl;
  z-index: 100;
}

/* optional: ensure header sections don’t overlap */
.lion-header,
.lion-header-main,
.lion-header-top {
  z-index: 10000000;
  position: relative;
}
.lion-header-main {
    z-index: 1;
}
img.attachment-thumbnail.size-thumbnail {
    filter: brightness(1);
}
.lion-mini-cart.active {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}

/* Header */

/* Empty cart */
.mini-cart-empty {
  padding: 40px 0;
  text-align: center;
  color: #999;
}
.mini-cart-empty i {
  font-size: 38px;
  color: #ccc;
  margin-bottom: 10px;
}

/* Cart items */
.lion-mini-cart-items {
    list-style: none;
    margin: 0;
    padding: 10px 15px;
    /* max-height: 320px; */
    overflow-y: auto;
    margin-bottom: 120px;
}
.lion-mini-cart-items::-webkit-scrollbar {
  width: 6px;
}
.lion-mini-cart-items::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 10px;
}

.lion-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f3f3;
  transition: all 0.2s ease;
}
.lion-cart-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.lion-cart-item:hover {
  transform: scale(1.02);
}

.item-thumb img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
}
.item-info {
  flex: 1;
}
.item-title {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: #222;
    text-decoration: none;
    margin-bottom: 4px;
    line-height: 1.4;
}
.item-meta {
  font-size: 13px;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.item-remove {
  color: #bbb;
  transition: color 0.3s;
  font-size: 16px;
}
.item-remove:hover {
  color: #ff4d4d;
}

/* Footer */
.mini-cart-footer {
        border-top: 1px solid #eee;
    background: #fafafa;
    text-align: center;
    bottom: 1px;
    width: 100%;
    z-index: 10;
    background: white;
    padding-top: 10px;
    box-shadow: 0px -10px 10px -5px #b9b9b942;
    position: absolute;
    right: 0px;
    padding: 10px 10px;
    border-radius: 0px 0px 10px 10px;
}
.mini-cart-buttton {
    display: flex
;
    justify-content: space-between;
}
.mini-cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
.mini-cart-total span {
    font-weight: 500;
    font-size: 14px;
}
.lion-mini-cart a {
    font-size: 12px;
    color: black;
    line-height: 2;
}
p.woocommerce-mini-cart__buttons.buttons {
    display: none;
}
.widget_shopping_cart_content {
    /* margin-bottom: 70px; */
}

.lion-mini-cart span.quantity {
    display: flex
;
    font-size: 12px;
    gap: 10px;
    align-items: center;
}
.quantity span.quantitty {
    background: #00A693;
    color: white;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10000px;
    width: 20px;
    height: 20px;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.lion-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: #00A693;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
} 

.lion-mini-cart span.quantity {
    display: flex
;
    font-size: 12px;
}
.lion-mini-cart bdi {
    font-size: 14px;
    color: black;
    font-weight: 500;
}
.lion-mini-cart span.woocommerce-Price-currencySymbol {
    font-size: 12px;
    color: gray;
    margin-right: 10px;
}
.view-cart-btn,
.checkout-btn {
      display: block;
    margin: 0px 0;
    padding: 8px 10px;
    border-radius: 7px;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 140px;
}
.view-cart-btn {
  background: #e2fefb;
  color: #00A693 !important;
}
.checkout-btn {
  background: #00A693;
  color: #fff !important;
}
.view-cart-btn:hover {
  background: #c0f9f3;
}
.checkout-btn:hover {
  filter: brightness(1.1);
}



/* 🛍️ Mini Cart Styling */
#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  direction: rtl;
  font-family: "KalamehWebFaNum", sans-serif;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item):last-child {
  border-bottom: none;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) img {
  width: 44px;
  height: 44px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) a {
  font-weight: 500;
  color: #111;
  text-decoration: none;
  display: flex;
  gap: 20px;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) a:hover {
  color: #a82eff;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) .quantity {
  font-size: 14px;
  color: #888;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) .remove_from_cart_button {
  color: #999 !important;
  font-size: 14px;
  margin-right: auto;
}

#lion-mini-cart .woocommerce-mini-cart-item:not(.lion-mini-cart-item) .remove_from_cart_button:hover {
  color: #ff3b3b !important;
}

.lion-breadcrumb {
  font-size: 12px;
  margin: 1rem 3%;
  color: #555;
  max-width: 1400px;
  font-weight: 300;
}

.lion-breadcrumb ol {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
}

.lion-breadcrumb a {
  color:inherit;
  text-decoration:none;
}
.lion-breadcrumb a:hover {
  opacity:0.75;
}

.crumb-home-icon {
  width:18px;
  height:18px;
  vertical-align:middle;
  object-fit:contain;
}

.crumb-arrow-icon {
  width:10px;
  height:10px !important;
  opacity:0.6;
}

.top-bar-inner img {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(87deg) brightness(119%) contrast(1000%);
    height: 10px;
    margin-right: 10px;
    padding: 0px;
}
.crumb-sep {
  display:flex;
  align-items:center;
}
.lion-breadcrumb ol {
    direction: rtl; /* ✅ force RTL flow */
}

.lion-breadcrumb li,
.lion-breadcrumb .crumb-sep {
    direction: ltr; /* ✅ icons/text inside stay normal */
    display: flex;
    align-items: center;
}
.lion-header.header-scrolled .lion-header-main .lion-logo {
  display: flex;
  align-items: center;
  margin-inline-end: 16px;
}

.lion-header.header-scrolled .lion-header-main .lion-logo img {
  height: 36px;
  width: auto;
  transition: height .3s ease;
}
.lion-mega-menu {
    display: flex
;
    align-items: center;
}
.lion-nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.lion-header-search {
  position: relative;
  margin-inline-start: 24px;
  flex: 1;
  max-width: 920px;
  width: 920px;
}
form#lion-header-search-form {
    margin: 0px;
}

.lion-header-search input {
    width: 100%;
    height: 44px;
    border-radius: 42px;
    border: 1px solid #DFE0E5;
    background: white;
    padding: 0 16px 0 16px;
    font-size: 12px;
    outline: none;
    transition: box-shadow .25s ease;
}
input#lion-header-search-input::placeholder {
    color: #6D7187;
    font-weight: 400;
}

.lion-header-search input:focus {
  box-shadow: 0 0 0 2px #00A693;
  border: none;
}

.lion-header-search .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
}

.lion-header-search .loader {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-top-color: #00A693;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  animation: spin .7s linear infinite;
}

.lion-header-search .loader.active {
  opacity: 1;
  visibility: visible;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.lion-header-search-results {
  position: absolute;
  top: calc(100% + 6px);
  width: 100%;
  background: #fff;
  border-radius: 22px;
  border: 1px solid #E6E7EC;
  box-shadow: 0 10px 44px rgba(0,0,0,.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all .25s ease;
  z-index: 99;
  padding: 20px;
  max-height: 560px;
  overflow: auto;
}

.lion-header-search-results.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lion-search-dropdown {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lion-search-block {
  display: block;
}

.lion-search-block.is-empty {
  display: none;
}

.lion-search-block--banner {
  order: 1;
}

.lion-search-block--my {
  order: 2;
}

.lion-search-block--popular {
  order: 3;
}

.lion-search-block--live {
  display: none;
  order: 4;
}

.lion-header-search-results.is-typing .lion-search-block--my {
  display: none;
}

.lion-header-search-results.is-typing .lion-search-block--popular {
  order: 1;
}

.lion-header-search-results.is-typing .lion-search-block--live {
  display: block;
  order: 2;
}

.lion-header-search-results.is-typing .lion-search-block--banner {
  order: 3;
}

.lion-search-banner {
  display: block;
  text-decoration: none;
}

.lion-search-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
}

.lion-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lion-search-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #141414;
}

.lion-search-section-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #00A693;
}

i.lion-search-section-icon {
  font-size: 22px;
  line-height: 1;
}

.lion-search-clear {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #141414;
  padding: 6px;
  line-height: 1;
}

.lion-search-clear i {
  font-size: 20px;
}

.lion-search-tags {
      display: flex
;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

.lion-search-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid #141414;
  border-radius: 999px;
  text-decoration: none;
  color: #141414;
  font-size: 14px;
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.lion-search-pill:hover {
  background: #F6F7F9;
  border-color: #0F0F0F;
}

.lion-search-live-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lion-search-live-results li a {
  display: flex;
  align-items: center;
  padding: 10px 6px;
  gap: 12px;
  text-decoration: none;
  border-radius: 12px;
  transition: background .15s ease;
}

.lion-search-live-results li a:hover {
  background: #F6F7F9;
}

.lion-search-live-results img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}

.lion-search-live-results .title {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.lion-search-live-results .type {
  font-size: 12px;
  color: #666;
}

.lion-search-see-all {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  color: #00A693;
  padding: 10px 12px;
  border-radius: 14px;
  background: #F6FFFD;
}

.lion-search-see-all:hover {
  background: #ECFFFB;
}



/* --- Responsive --- */
@media (max-width: 992px) {
    .lion-header-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .lion-search {
        width: 100%;
        order: 2;
    }
    .lion-menu {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .lion-top-center,
  .lion-header-main,
  .lion-contact-menu,
  .lion-cart-icon,
  .lion-login-icon {
    width: 32px;
    height: 32px;
    padding: 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding-left: 3px;
  }
.lion-mobile-icon-btn--login img {
    width: 20px !important;
    height: 20px !important;
}

  .lion-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
  }

  .lion-top-left,
  .lion-top-right {
    flex: unset;
  }

  /* ✅ Mobile Logo Center */
  .lion-top-left {
    order: 2;
    flex: 1;
    text-align: center;
  }

  /* ✅ Mega Menu Right */
  .lion-header-main-right,
  .lion-mega-trigger {
    order: 1;
  }

  /* ✅ Login + Search icons Left */
  .lion-mobile-actions {
    order: 3;
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .lion-mobile-search-btn,
  .lion-mobile-login-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #444;
    cursor: pointer;
  }

  .lion-mobile-login-btn img {
    width: 24px;
    height: auto;
  }


  /* ✅ Fullscreen Search Overlay */
  .lion-mobile-search-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
  }
  .lion-mobile-search-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .lion-mobile-search-overlay form {
    display: flex;
    align-items: center;
    padding: 14px;
    gap: 12px;
    background: #F5F6F7;
    margin: 12px;
    border-radius: 12px;
  }
  #lion-mobile-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
  }

  .mobile-search-results {
    padding: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .mobile-close-search i {
    font-size: 20px;
  }
   .lion-mega-content {
    position: fixed;
    top: 0;
    right: 0;
    width: 82vw;
    max-width: 360px;
    height: 100vh;
    background: #FFFFFF;
    box-shadow: -4px 0 32px rgba(0,0,0,0.08);
    padding: 24px 16px;
    z-index: 1002;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: all .32s ease-in-out;
    overflow-y: auto;
  }

  /* ✅ When active: slide in from right */
  .lion-mega-menu.active .lion-mega-content {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* ✅ Disable hover style text and arrow */
  .lion-mega-trigger span,
  .lion-mega-trigger i {
    font-size: 0; 
    display: none;
  }

  /* ✅ Keep only hamburger icon centered */
  .lion-mega-trigger img {
    width: 26px;
    height: auto;
  }
  
  /* ✅ Background Dimmer */
  .lion-mega-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
    z-index: 1001;
  }

  .lion-mega-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  .lion-mobile-topbar,
  .lion-mobile-bottom-nav {
    display: flex !important;
    flex-direction: row-reverse;
  }
  .lion-header-top,
  .lion-header-main {
    display: none;
  }
  .lion-blog-header-bar {
    display: none;
  }
  img.lion_mobile_logo {
    width: 130px !important;
}
img.lion_mobile_call {
    width: 30px;
}

.lion-mega-trigger {
    display: flex
;
    align-items: center;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: none;
    background: none;
}

.lion-mobile-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.45s ease, opacity 0.35s ease;
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
  justify-content: space-between;
  padding: 5px 18px;
}

/* Hidden state (when scrolling down) */
.lion-mobile-topbar.hide {
  transform: translateY(-100%);
  opacity: 0;
}
.lion-logo {
    align-items: center;
    gap: .5rem;
    display: none;
}

button.mnav-item {
    border: none;
}

.lion-cart-count {
    position: absolute;
    top: -20px;
    right: 5px;
    min-width: 20px;
    height: 20px;
    background: #ff2d2d;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    opacity: 1;
    transition: all 0.25s ease;
}


/* =======================================================
   🍎 lion CATEGORY SHEET (Mobile)
   Clean modern UI/UX for category popover
======================================================= */

#lion-cats-sheet {
          backdrop-filter: blur(24px) saturate(180%);
        border-radius: 24px;
        box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.08);
        padding-bottom: 16px;
        height: auto;
        margin: 10px;
        padding: 0px;
        max-height: 50%;
        transition: 0.5s;
    }
    .mob-cats-nav li.menu-item ul.sub-menu {
    margin-top: 8px;
    margin-right: 0px;
    border-right: none;
    padding-right: 10px;
}


@keyframes catsSheetFade {
  from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0);}
}

/* Header */
#lion-cats-sheet .mob-popover-header {
  padding: 16px 20px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-align: right;
}
#lion-cats-sheet .mob-popover-header h3 {
  font-family: 'KalamehWebFaNum', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #1c1c1c;
  margin: 0;
}

/* Search box */
#lion-cats-sheet .mob-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 14px;
  position: relative;
}
#lion-cats-sheet .mob-search input[type="search"] {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #fff;
  padding: 10px 38px 10px 12px;
  font-family: 'KalamehWebFaNum', sans-serif;
  font-size: 15px;
  box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.1);
  transition: all .25s ease;
}
#lion-cats-sheet .mob-search input[type="search"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(0 167 147 / 30%);
}
#lion-cats-sheet .mob-search-btn {
  position: absolute;
  top: 16px;
  background: none;
  border: none;
  color: #00A693;
  font-size: 16px;
  cursor: pointer;
}

/* Category list */
.mob-cats-nav {
  padding: 4px 12px 24px;
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(0 167 147) transparent;
}
.mob-cats-nav::-webkit-scrollbar {
  width: 6px;
}
.mob-cats-nav::-webkit-scrollbar-thumb {
  background: rgb(0 167 147);
  border-radius: 3px;
}
.mob-cats-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mob-cats-nav li.menu-item {
  position: relative;
  padding: 10px 14px;
  margin-bottom: 4px;
  font-size: 15px;
  border-radius: 10px;
  background: rgba(255,255,255,0.5);
  transition: background .25s ease, transform .15s ease;
}
.mob-cats-nav li.menu-item:hover {
  background: rgb(0 168 147 / 14%);
  transform: translateX(-3px);
}
.mob-cats-nav li.menu-item a {
  display: block;
  color: #1a1a1a;
  text-decoration: none;
}
.mob-cats-nav li.menu-item a:hover {
  color: #00A693;
}

/* Nested submenus */
.mob-cats-nav li.menu-item ul.sub-menu {
  margin-top: 4px;
  margin-right: 2px;
  border-right: none;
  padding-right: 10px;
}

/* Small badge feel for nested depth */
.mob-cats-nav li.menu-item ul.sub-menu li {
  font-size: 14px;
  opacity: 0.9;
}

/* Smooth entrance for each li */
.mob-cats-nav li {
  animation: catItemIn .3s ease both;
}
@keyframes catItemIn {
  from {opacity: 0; transform: translateY(8px);}
  to {opacity: 1; transform: translateY(0);}
}
/* ===========================================================
   🌳 lion CATEGORY TREE STYLES
=========================================================== */
.mob-cats-nav li.menu-item-has-children {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  margin-bottom: 6px;
  padding-right: 16px; /* space for toggle icon */
  transition: background 0.25s ease, transform 0.2s ease;
}
.mob-cats-nav li.menu-item-has-children.open {
  background: rgb(0 168 147 / 6%);
}

.mob-cats-nav li.menu-item-has-children > .cat-toggle {
  position: absolute;
  top: 25px;
  left: 10px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: #00A693;
  font-size: 13px;
  transition: transform 0.3s ease;
}
.mob-cats-nav li.menu-item-has-children.open > .cat-toggle i {
  transform: rotate(180deg);
}

.mob-cats-nav ul.sub-menu {
  margin-top: 4px;
  padding-right: 16px;
  border-right: 1px dashed rgba(157, 0, 255, 0.15);
  display: none;
  animation: catSlide .25s ease forwards;
}
@keyframes catSlide {
  from {opacity: 0; transform: translateY(-6px);}
  to {opacity: 1; transform: translateY(0);}
}
.mob-cats-nav ul.sub-menu li {
  background: rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 16px 12px;
  font-size: 14px;
  margin: 3px 0;
  margin-bottom: 10px;
}
.mob-cats-nav ul.sub-menu li:hover {
  background: rgb(0 168 147 / 14%);
  transform: translateX(-2px);
}
.mob-cats-nav ul.sub-menu a {
  color: #1a1a1a;
  text-decoration: none;
}
.mob-cats-nav ul.sub-menu a:hover {
  color: #00A693;
}


    
}


/* ================================================
   ✅ Mobile Topbar
================================================ */
/* .lion-mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 5px 18px;
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  position: sticky;
  top: 0;
  z-index: 900;
} */

.lion-mobile-topbar img {
  width: 28px;
  height: auto;
}

.lion-mobile-cart-btn {
  position: relative;
}

#lion-cart-count-mobile {
  position: absolute;
  top: -4px;
  right: -8px;
  background: #ff0059;
  color: #fff;
  width: 18px;
  height: 18px;
  font-size: 11px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ============================================================
   🍎 lion Liquid-Glass Mobile UI
   Files using these classes: header.php (glassy-nav, glassy-sheet)
   Notes:
   - Mobile only (<= 992px) unless noted
   - Uses safe-area insets (iOS)
   - Smooth hide/show + bounce on open
============================================================ */

/* -----------------------------
   Layering + helpers
------------------------------*/
:root{
  --glass-bg: rgba(255,255,255,.55);
  --glass-nav-bg: rgba(255,255,255,.25);
  --glass-border: rgba(255,255,255,.35);
  --glass-shadow: 0 8px 28px rgba(0,0,0,.15);
  --ring: 0 0 0 3px rgba(157,0,255,.12);
  --grad-1: #00A693;
  --grad-2: #00A693;
  --text-strong:#111;
  --text:#222;
  --text-dim:#555;
}

body.no-scroll{ overflow:hidden; }

/* optional utility (if you want to fade body behind sheets) */
html.has-sheet-open body::after{
  content:"";
  position:fixed;inset:0;
  background:rgba(0,0,0,.25);
  z-index:998; /* below sheets (1000) */
  opacity:1; pointer-events:none;
  transition:opacity .25s ease;
}

/* -----------------------------
   Desktop vs Mobile visibility
------------------------------*/
@media (min-width: 993px){
  .lion-mobile-bottom-nav,
  .lion-mob-popover,
  .lion-mobile-topbar{ display:none !important; }
}

/* ============================================================
   🍎 Bottom Navigation (glassy-nav)
============================================================ */
@media (max-width: 992px){
  .lion-mobile-bottom-nav.glassy-nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    position:fixed;
    right:16px; left:16px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    height:64px;
    border-radius:22px;
    background:var(--glass-nav-bg);
    box-shadow:var(--glass-shadow);
    
    z-index:999;
    transition:transform .35s ease, opacity .35s ease;
    backdrop-filter: blur(6px) saturate(180%);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
            flex-direction: row;
  }
  .lion-breadcrumb {
    font-size: 12px;
    margin: 18px 0 20px;
    color: #555;
    max-width: 1400px;
    font-weight: 300;
    padding: 0px 10px;
}

  /* Fallback if backdrop-filter unsupported */
  @supports not (backdrop-filter: blur(10px)){
    .lion-mobile-bottom-nav.glassy-nav{
      background:#ffffffcc;
    }
  }

  /* hide/show hooks (JS toggles .hide/.show) */
  .lion-mobile-bottom-nav.glassy-nav.hide{
    transform:translateY(120%) !important;
    opacity:0 !important;
  }
  .lion-mobile-bottom-nav.glassy-nav.show{
    transform:translateY(0);
    opacity:1;
  }

  .mnav-item{
    position:relative;
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;
    font-size:12px;
    color:rgba(20,20,20,.85);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .25s ease, transform .25s ease;
            background: unset;
  }
  .mnav-item i{ font-size:20px; transition:transform .2s ease; }
    .mnav-item:hover, .mnav-item:focus {
    color: black;
    transform: translateY(0px);
    /* backdrop-filter: blur(16px) saturate(100%); */
    background: none;
    box-shadow: 1px 1px 15px 1px #00000012;
    border-radius: 15px;
    height: 50px;
}
.mnav-item {
 transition: 0.6s;   
}
.mnav-item img {
    transition: 0.6s;
}
.mnav-item:hover, .mnav-item:focus .mnav-item-img {
    scale: 1.2;
}
  .mnav-item:hover i{ transform:scale(1.12); }

  /* badge (cart count) */
  .mnav-item .badge{
    position:absolute;
    top:6px; right:calc(50% - 20px);
    width:18px;height:18px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#ff3b30,#ff004f);
    box-shadow:0 0 8px rgba(255,0,79,.35);
  }
}

/* ============================================================
   🍎 Glassy Sheets (cats/search/cart)
============================================================ */
@media (max-width: 992px){
  .lion-mob-popover.glassy-sheet{
    position: fixed;
        left: 0;
        right: 0;
        bottom: -100%;
        height: 75vh;
        max-height: calc(100vh - 80px);
        z-index: 1000;
        padding: 10px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 24px;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .15);
        overflow: auto;
        transition: bottom .45s cubic-bezier(.23,1,.32,1);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        max-height: 50%;
        margin: 10px;
                transition: 0.5s;
                z-index: 99;
  }
  @supports not (backdrop-filter: blur(10px)){
    .lion-mob-popover.glassy-sheet{ background:#ffffffee; }
  }

  /* visible state + bounce (spring) */
  .lion-mob-popover.glassy-sheet.visible{
    bottom:80px;
    animation: sheet-bounce .5s cubic-bezier(.18,.89,.32,1.28);
  }

  @keyframes sheet-bounce{
    0%{ transform:translateY(18px); }
    60%{ transform:translateY(-6px); }
    100%{ transform:translateY(0); }
  }

  /* header */
  .mob-popover-header {
        display: flex
;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        color: var(--text-strong);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        text-align: right;
        padding: 0px 10px;
        flex-direction: row-reverse;
    }
  .mob-popover-header h3{ font-size:16px;font-weight:800; }

  .mob-popover-close{
    /* background:rgba(255,255,255,.25); */
    /* border:1px solid rgba(255,255,255,.45); */
    /* border-radius:10px; */
    padding:6px 0px;
    color:#333;
    transition:background .2s ease, transform .2s ease;
  }
  .mob-popover-close:active{ transform:scale(.98); }
  .mob-popover-close:hover{ background:rgba(255,255,255,.45); }
  .mob-popover-close:focus{ outline:2px solid var(--grad-1); outline-offset:3px; }

  /* search bar */
  .mob-search{ position:relative; margin-bottom:14px; }
  .mob-search input{
    width:100%;
    padding:12px 54px 12px 14px;
    font-size:14px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.66);
    color:#333; outline:none;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .mob-search input:focus{
    border-color:var(--grad-1);
    background:rgba(255,255,255,.95);
    box-shadow:var(--ring);
    border: none;
  }
  .mob-search-btn{
    position:absolute; right:12px; top:8px;
    background:transparent;border:0;color:#666;font-size:18px;
  }

  /* tabs */
  .mob-search-tabs{
    display:flex; gap:0; margin-bottom:14px; overflow:hidden;
    border-radius:14px; background:rgba(255,255,255,.45);
  }
  .mob-search-tabs .tab-btn{
    flex:1; padding:10px 0; border:0; background:transparent;
    font-size:13px; color:var(--text-dim);
    transition:background .25s ease, color .25s ease;
  }
  .mob-search-tabs .tab-btn.is-active{
    background:linear-gradient(130deg,var(--grad-1) 0%, var(--grad-2) 100%);
    color:#fff; font-weight:700;
  }

  /* categories list */
  .mob-cats-nav ul{ list-style:none; margin:0; padding:0; }
  .mob-cats-nav li{
    display:grid; align-items:center;
    padding:14px 8px; font-size:15px; color:var(--text);
    border-bottom:1px solid rgba(0,0,0,.05);
    border-radius:10px; transition:background .2s ease;
  }
  .mob-cats-nav li:hover{ background:rgba(157,0,255,.06); }
  .mob-cats-nav a{ color:inherit; text-decoration:none; }

  /* cart footer sticks inside sheet */
  .mob-popover-footer{
    position: sticky;
        bottom: 0;
        display: flex
;
        gap: 10px;
        padding: 12px 0;
        bottom: 11px;
        width: 100%;
        justify-content: space-between;
  }
  .mob-popover-footer a{ 
        flex: 1;
        text-align: center;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        padding: 11px 14px;
        border-radius: 6px;
        border: 1px solid #00a793;
        transition: transform .2s ease;
        text-align: center;
        display: block;
        font-weight: 500;
        color: black;
        backdrop-filter: blur(6px) saturate(180%);
        
    }
    .woocommerce-mini-cart__total.total:nth-child(2) {
        display: none;
    }
    .woocommerce-mini-cart .woocommerce-mini-cart__total.total {
        display: block;
    }
  .mob-popover-footer a:hover{ transform:translateY(-2px); }
}

/* ============================================================
   🍎 Mobile Topbar (if you keep it visible)
============================================================ */
@media (max-width: 992px){
  .lion-mobile-topbar{
    position:sticky; top:0; z-index:901;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px;
    background:#fff;
    border-bottom:1px solid #eee;
    transition:transform .35s ease, opacity .35s ease, backdrop-filter .25s ease;
    will-change:transform,opacity;
  }
  /* if you want glass here too: add this class from JS when scrolled */
  .lion-mobile-topbar.is-glassy{
    background:rgba(255,255,255,.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .lion_mobile_logo{ height:28px; width:auto; display:block; }
  .lion_mobile_call{ height:24px; width:auto; display:block; }
  
  
  .msc-thumb {
    width: 60px;
}
.msc-info {
    color: black;
    width: 100%;
}
h4.msc-title {
    font-size: 16px;
}
.msc-price {
    text-align: left;
}
.msc-price bdi {
    font-size: 14px;
    text-align: left;
}
a.mob-search-card.product {
    display: flex
;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
    
}
a.mob-search-card.post {
    display: flex
;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
}
.lion-mobile-cart-menu ul.cart_list:not(.lion-mini-cart-list) img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    width: 60px;
    border-radius: 5px !important;
    margin-right: 10px;
}
.lion-mobile-cart-menu ul.cart_list:not(.lion-mini-cart-list) a {
    color: #673afd;
    font-size: 16px;
}
.lion-mobile-cart-menu ul.cart_list:not(.lion-mini-cart-list) li.woocommerce-mini-cart-item.mini_cart_item {
    display: grid;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #d7d7d7;
        padding-bottom: 10px;
}
.lion-mobile-cart-menu ul.cart_list:not(.lion-mini-cart-list) span.quantity {
    display: flex
;
        justify-items: end;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
}
.lion-mobile-cart-menu ul.cart_list:not(.lion-mini-cart-list) a.remove.remove_from_cart_button {
    font-size: 30px;
    position: fixed;
    z-index: 5;
}
.lion-breadcrumb {
    font-size: 12px;
    margin: 18px 10px 20px 0px;
    color: #555;
    max-width: 1400px;
    font-weight: 300;
}
button.mnav-item.custome-mnav-item {
    margin: 0px;
    padding: 0px;
    display: flex
;
    align-items: flex-start;
}
button.mnav-item.custome-mnav-item:hover {
    padding: 0px;
    scale: 1;
    box-shadow: none;
    margin: unset;
    height: auto;
}
.mobile-advanced-search-btn {
  display: block;
  width: 90%;
  margin: 12px auto 8px;
  padding: 12px;
  border-radius: 12px;
  background: #00a793;
  color: #fff;
  border: none;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  transition: .25s;
}

.mobile-advanced-search-btn:hover {
  background: #4b34d6;
}
.lion_mobile_but_seciton {
    display: flex
;
    flex-direction: row-reverse;
    gap: 20px;
}
}

a.top-bar-inner {
    color: white;
    text-align: center;
    width: 100%;
    display: flex
;
    justify-content: center;
    padding: 10px 0px;
}



/* ============================================================
   🍎 Scrollbar polish (inside sheets)
============================================================ */
@media (max-width: 992px){
  .lion-mob-popover::-webkit-scrollbar{ width:6px; }
  .lion-mob-popover::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:3px; }
  .lion-mob-popover::-webkit-scrollbar-track{ background:transparent; }
}

/* ============================================================
   🍎 Backdrop-filter fix on some Android WebViews
============================================================ */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){
  .has-no-backdrop .glassy-nav,
  .has-no-backdrop .glassy-sheet{
    background:#ffffffee; /* force opaque */
  }
}

@media (max-width: 992px){
  .lion-mobile-topbar{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 14px;
    background: #EFF3FC;
    border-bottom: 1px solid #E7EBF5;
    box-shadow: none;
    direction: rtl;
  }

  .lion-mobile-topbar__row{
    width: 100%;
  }

  .lion-mobile-topbar__row--top{
    display: flex
;
        align-items: center;
        gap: 12px;
        direction: ltr;
        justify-items: end;
        justify-content: space-between;
    
  }

  .lion-mobile-topbar__row--bottom{
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
  }

  .lion-mobile-topbar__cluster{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lion-mobile-brand__logo {
    height: 32px !important;
}
  .lion-mobile-brand{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: #141414;
    direction: rtl;
  }

  .lion-mobile-brand__text{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }

  .lion-mobile-brand__logo{
    width: 34px;
    height: auto;
  }

  .lion-mobile-icon-btn{
    width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid #E1E4EA;
        background: #fff;
        display: inline-flex
;
        align-items: center;
        justify-content: center;
        color: #1b1f2a;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
        position: relative;
        padding: 0;
  }
  .mood-switch-icon {
    border: 1px solid #DFE0E5;
    background: white;
    border-radius: 100px;
    width: 44px;
    height: 44px;
    display: flex
;
    align-items: center;
    justify-content: center;
}
  .lion-login-icon {
    background: white;
  }

  .lion-mobile-icon-btn img{
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .lion-mobile-icon-btn i{
    font-size: 20px;
  }

  .lion-mobile-dot{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00A693;
  }

  .lion-mobile-discount{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #F25637;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
            height: 38px;
  }

  .lion-mobile-discount img{
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
  }

  .lion-mobile-discount i{
    font-size: 16px;
  }

  .lion-mobile-search-trigger{
    flex: 1;
    height: 38px;
    border-radius: 999px;
    border: 2px solid #E1E4EA !important;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 0 10px;
  }

  .lion-mobile-search-placeholder{
    flex: 1;
    text-align: right;
    font-size: 16px;
    color: #6D7187;
    direction: rtl;
  }

  .lion-mobile-search-icon{
    width: 36px;
    height: 36px;
    /* border-radius: 50%; */
    /* border: 2px solid #E1E4EA; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6D7187;
  }

  .lion-mobile-search-icon i{
    font-size: 16px;
  }

  .lion-mobile-topbar img{
    width: auto;
    height: auto;
  }
}