/* ============================================================
 * MIXORA — mixora-mobile.css (Mobile header + right drawer menu)
 * Version: 1.8.8 | Last updated: 2026-09-05 (search popup: icon + clear btn inline)
 * ------------------------------------------------------------
 * HOW TO EDIT LATER:
 * - Drawer width: --mixora-drawer-width (85vw default, Shopify style).
 * - Gutter: --mixora-shell-gutter-mobile (equal left/right, never touch edge).
 * - Menu items (Home/About/New Arrivals/Shop/Contact) Elementor-e edit hoy;
 *   ekhane shudhu design (divider, font, spacing).
 * ============================================================ */

:root {
  --mixora-drawer-width: min(80vw, 400px);            /* EDIT ME: drawer width (~80% screen) */
  --mixora-drawer-speed: 0.42s;                         /* EDIT ME: drawer slide speed */
  --mixora-drawer-ease: cubic-bezier(0.16, 1, 0.3, 1);  /* EDIT ME: drawer easing */
  --mixora-burger-box: 46px;                            /* EDIT ME: hamburger tap area */
  --mixora-burger-w: 26px;                              /* EDIT ME: hamburger daag er chowra */
  --mixora-burger-h: 18px;                              /* EDIT ME: tin daag er mot uchchota */
}

@media (max-width: 1024px) {  /* <- age 767px chilo. ElementsKit hamburger/drawer 1024px porjonto ashe (data-responsive-breakpoint=1024), tai tablet-eo ei style gulo dorkar. */
  :root {
    --mixora-header-height: 60px;
    --mixora-header-radius: 0; /* square — header radius removed */
  }

  /* ---------- Body er uporer jayga (mobile) ----------
   * Header ekhon FIXED (niche dekhun), tai shadharon page e jayga chere dite hoy.
   * Hero-wala page gulo te 0 — banner ta ekdom upor theke shuru hobe. */
  body:not(.elementor-editor-active) {
    padding-top: var(--mixora-header-height);
  }
  body.home:not(.elementor-editor-active),
  body.mx-flush-top:not(.elementor-editor-active),
  body.woocommerce-shop:not(.elementor-editor-active),
  body.post-type-archive-product:not(.elementor-editor-active) {
    padding-top: 0;
  }
  body.admin-bar:not(.elementor-editor-active) {
    padding-top: calc(var(--mixora-header-height) + 46px);
  }
  body.admin-bar.home:not(.elementor-editor-active),
  body.admin-bar.mx-flush-top:not(.elementor-editor-active),
  body.admin-bar.woocommerce-shop:not(.elementor-editor-active),
  body.admin-bar.post-type-archive-product:not(.elementor-editor-active) {
    padding-top: 0;
  }

  /* Category archive: reduce gap between header and banner on mobile / tablet */
  body.tax-product_cat:not(.elementor-editor-active) {
    padding-top: var(--mixora-header-height) !important;
  }
  body.admin-bar.tax-product_cat:not(.elementor-editor-active) {
    padding-top: calc(var(--mixora-header-height) + 46px) !important;
  }
  @media (min-width: 783px) and (max-width: 1024px) {
    body.admin-bar.tax-product_cat:not(.elementor-editor-active) {
      padding-top: calc(var(--mixora-header-height) + 32px) !important;
    }
  }

  /* Wipe out all top padding/margin from outer & inner banner containers on mobile/tablet */
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-banner,
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-banner > .e-con-inner,
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-banner-inner,
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-banner-inner > .e-con-inner,
  .tax-product_cat .mx-archive-template .elementor-element.mx-archive-banner-item,
  .mx-archive-template .elementor-element.mx-archive-banner,
  .mx-archive-template .elementor-element.mx-archive-banner > .e-con-inner,
  .mx-archive-template .elementor-element.mx-archive-banner-inner,
  .mx-archive-template .elementor-element.mx-archive-banner-inner > .e-con-inner,
  .mx-archive-template .elementor-element.mx-archive-banner-item,
  .tax-product_cat [data-elementor-type="product-archive"] > .elementor-element:first-child,
  .tax-product_cat [data-elementor-type="product-archive"] > .elementor-element:first-child > .e-con-inner,
  .tax-product_cat [data-elementor-type="product-archive"] > .elementor-element:first-child .elementor-element:first-child,
  .tax-product_cat [data-elementor-type="product-archive"] > .elementor-element:first-child .elementor-element:first-child > .e-con-inner {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
    padding-block-start: 0 !important;
    --margin-top: 0px !important;
    --margin-block-start: 0px !important;
    --padding-top: 0px !important;
    --padding-block-start: 0px !important;
  }

  /* ---------- Floating pill — desktop er motoi FIXED ----------
   * KENO bodlano holo: age eta `position: sticky` chilo. Sticky element
   * document flow-e JAYGA NEY — 10px margin + 60px height + 14px margin = 84px.
   * Tai home banner ta oto ta niche neme jeto (hero er -40px margin baad
   * diyeo ~44px fak thakto). Ekhon fixed, tai flow-e kono jayga ney na ar
   * banner ekdom upor theke shuru hoy — thik desktop er motoi.
   *
   * NOTE: left:0/right:0 + margin:auto na dile header dan-e/bam-e sore jabe
   * (desktop-e left:50% + translateX use hoy, mobile-e sheta kaj kore na). */
  .elementor-location-header > .e-con[data-settings*='"position":"fixed"'],
  .elementor-location-header > .elementor-element[data-settings*='"position":"fixed"'],
  .mx-header .mx-header-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important; /* upore kono fak nei */
    transform: none !important;
  }
  body.admin-bar .elementor-location-header > .e-con[data-settings*='"position":"fixed"'],
  body.admin-bar .elementor-location-header > .elementor-element[data-settings*='"position":"fixed"'],
  body.admin-bar .mx-header .mx-header-bar {
    top: 46px !important; /* WP admin bar mobile (<=782px) */
  }
  @media (min-width: 783px) and (max-width: 1024px) {
    body.admin-bar .elementor-location-header > .e-con[data-settings*='"position":"fixed"'],
    body.admin-bar .elementor-location-header > .elementor-element[data-settings*='"position":"fixed"'],
    body.admin-bar .mx-header .mx-header-bar {
      top: 32px !important; /* WP admin bar tablet (783-1024px) */
    }
  }
  .mx-header .elementor-element.mx-header-bar {
    min-height: var(--mixora-header-height) !important;
    height: var(--mixora-header-height) !important;
    margin: 0 auto !important;   /* flow-e ar kono margin lage na */
    border-radius: 0 !important;
  }
  .mx-header .mx-header-bar > .e-con-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: var(--mixora-header-height) !important;
    height: var(--mixora-header-height) !important;
    max-height: var(--mixora-header-height) !important;
    padding-inline: 16px !important;
    padding-block: 0 !important;
    box-sizing: border-box !important;
  }
  /* ---------- MOBILE / TABLET HEADER ROW ----------
   *   [ logo ]  ......................  [ search ] [ cart ] [ hamburger ]
   *
   * `.mx-header-actions` (search + cart er parent) logo/menu er row er
   * bhitore-i ache. `order` diye shajano holo: logo bame, tarpor search +
   * cart, ar hamburger sobar dane. Markup kichu bodlay ni.
   *
   * NOTE: Kon device e search/cart dekhabe ta Elementor theke thik korun —
   * widget/container select kore Advanced → Responsive → Hide On Tablet /
   * Mobile. Niche `display: flex/block !important` thakleo Elementor er toggle
   * jite (includes/site-polish.php → mixora_ts_elementor_responsive_hide_css). */
  .mx-header .mx-header-actions {
    display: flex !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    margin: 0 0 0 auto !important;   /* logo theke dure, dan dike thele */
    padding: 0 !important;
    height: 100% !important;
  }
  .mx-header .mx-header-cart-col,
  .mx-header .mx-header-search-col {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  /* Maap (44px icon box) site-polish.css theke ashe — ekhane width likhben NA */
  .mx-header .mx-header-search,
  .mx-header .mx-header-cart {
    display: block !important;
    flex: 0 0 auto !important;
  }
  .mx-header .mx-header-logo-col { order: 0 !important; }
  /* Menu column desktop er chowra (~370px) dhore rakhto, tai tablet e
   * search/cart majhkhane chole jeto. Ekhon shudhu hamburger er maap. */
  .mx-header .mx-header-menu-col {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  /* ---------- Header row: [ logo ] ............ [ cart ][ menu ] ----------
   * Elementor e header notun kore banano hoyeche (notun element ID), tai
   * upore ID-r class (mx-header-actions, mx-header-menu-col) ar pore na.
   * Ekhane column gulo ID diye na, BHITORE KI WIDGET ACHE ta diye dhora hoy
   * (`:has()`), tai header abar notun kore banaleo layout thik thakbe.
   * Kon device e ki dekhabe ta Elementor er Hide On toggle theke-i hoy —
   * ekhane `display` likha nei. */
  .mx-header .mx-header-bar :is(.e-con, .e-con-inner):has(> .e-con > .mx-header-menu) {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .mx-header .mx-header-bar .e-con:has(> .elementor-widget-theme-site-logo) {
    order: 0 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 auto 0 0 !important;   /* logo bame, baki shob dane thele */
  }
  .mx-header .mx-header-bar .e-con:has(> .mx-header-cart),
  .mx-header .mx-header-bar .e-con:has(> .mx-header-menu) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mx-header .mx-header-bar .e-con:has(> .mx-header-cart) { order: 1 !important; }
  .mx-header .mx-header-bar .e-con:has(> .mx-header-menu) { order: 2 !important; }

  /* Drawer khola thakle search/cart lukano (logo-r motoi) — drawer er upore bhashe na */
  body.mixora-mobile-menu-open .mx-header .mx-header-search,
  body.mixora-mobile-menu-open .mx-header .mx-header-cart,
  body.mixora-mobile-menu-open .mx-header .mx-header-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* ---------- Logo BAM e, menu DAN e ----------
   * KENO center hoye jacchilo: mixora-header.css e `.mx-header-nav-row`
   * (logo + menu er parent) e `justify-content: center` deya ache — desktop e
   * oi container ta menu ke majhkhane rakhe. Mobile e tar fole logo ar
   * hamburger duitai ek shathe majhkhane chole ashto, dupashe khali jayga.
   * Mobile e space-between kore deya holo. */
  .mx-header .mx-header-nav-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hamburger ke absolute theke normal flow e ana hoyeche.
   * Absolute thakle shetar height row er align-items er bahire chole jeto,
   * tai vertically thik majhkhane boshto na. */
  .mx-header .mx-header-menu-col {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* ---------- Home banner ekdom upor theke ----------
   * Elementor-e hero container e `--margin-top: -40px` set kora ache.
   * Header ekhon fixed, tai oi negative margin banner er upor er 40px
   * kete felto. Mobile e sheta 0 kore deya holo — banner puro dekha jabe.
   * EDIT ME: banner ke aro upore/niche nite chaile ei value bodlan. */
  .mx-home .mx-home-hero {
    --margin-top: 0px !important;
    margin-top: 0 !important;
  }

  /* Logo: bam pashe, vertically center, kono baseline gap nei */
  .mx-header .mx-header-logo-col {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mx-header .mx-header-logo,
  .mx-header .mx-header-logo .elementor-widget-container,
  .mx-header .mx-header-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 0 !important;
    line-height: 0 !important;   /* img er niche baseline fak shorai */
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
  }
  .mx-header .mx-header-logo img {
    display: block !important;   /* inline img = baseline gap = off-center */
    height: auto !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    align-self: center !important;
  }

  .mx-header .mx-header-menu,
  .mx-header .mx-header-menu .elementor-widget-container,
  .mx-header .mx-header-menu .ekit-wid-con {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* ============================================================
   * MOBILE MENU HAMBURGER (Modern luxury icon with smooth animation)
   * ============================================================ */
  .mx-header .elementskit-menu-hamburger {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    align-self: center !important;
    gap: 5.5px !important;
    width: var(--mixora-burger-box, 44px) !important;
    height: var(--mixora-burger-box, 44px) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease !important;
  }

  .mx-header .elementskit-menu-hamburger::before,
  .mx-header .elementskit-menu-hamburger::after {
    display: none !important;
    content: none !important;
  }

  /* 3 sleek minimalist bars */
  .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
    display: block !important;
    position: relative !important;
    height: 1.6px !important;
    border-radius: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-origin: center center !important;
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s ease,
                width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.2s ease !important;
    will-change: transform, opacity, width;
  }

  /* Modern luxury asymmetrical proportions */
  .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) {
    width: 22px !important;
  }
  .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) {
    width: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) {
    width: 22px !important;
  }

  /* Hover micro-interaction: smooth subtle expansion */
  @media (hover: hover) {
    .mx-header .elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon:nth-child(2) {
      width: 22px !important;
    }
  }

  .mx-header .elementskit-menu-hamburger:active {
    transform: scale(0.92) !important;
  }

  /* Smooth Morph Animation into Close 'X' when Open/Active */
  .mx-header .elementskit-menu-hamburger.active .elementskit-menu-hamburger-icon:nth-child(1),
  body.mixora-mobile-menu-open .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(1) {
    transform: translateY(7.1px) rotate(45deg) !important;
    width: 22px !important;
  }

  .mx-header .elementskit-menu-hamburger.active .elementskit-menu-hamburger-icon:nth-child(2),
  body.mixora-mobile-menu-open .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
    width: 0 !important;
  }

  .mx-header .elementskit-menu-hamburger.active .elementskit-menu-hamburger-icon:nth-child(3),
  body.mixora-mobile-menu-open .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(3) {
    transform: translateY(-7.1px) rotate(-45deg) !important;
    width: 22px !important;
  }

  /* ---------- Theme er button style shorano (hamburger, close, chevron) ----------
   * Hello Elementor theme protita <button> e gol-pink border dey, ar
   * hover/focus/tap e PINK background (#c36). Tai hamburger ar drawer er
   * close (X) button e box + pink dekhato. Ekhane shob state e porishkar. */
  .mx-header .elementskit-menu-hamburger,
  .mx-header .elementskit-menu-hamburger:hover,
  .mx-header .elementskit-menu-hamburger:focus,
  .mx-header .elementskit-menu-hamburger:active,
  .mx-header button.elementskit-menu-close,
  .mx-header button.elementskit-menu-close:hover,
  .mx-header button.elementskit-menu-close:focus,
  .mx-header button.elementskit-menu-close:active,
  .mx-header .elementskit-navbar-nav .elementskit-submenu-indicator,
  .mx-header .elementskit-navbar-nav .elementskit-submenu-indicator:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    color: var(--mixora-ink, #111111) !important;
  }
  .mx-header .elementskit-menu-hamburger .elementskit-menu-hamburger-icon {
    background-color: var(--mixora-ink, #111111) !important;
  }
  /* Keyboard e focus korle shudhu ekta patla ring (accessibility) */
  .mx-header .elementskit-menu-hamburger:focus-visible,
  .mx-header button.elementskit-menu-close:focus-visible {
    outline: 1.5px solid var(--mixora-ink, #111111) !important;
    outline-offset: 2px;
  }

  /* ---------- Drawer er menu item: porishkar list ----------
   * Kono divider line nei (age protita item er niche chilo — bhir lagto).
   * Shob item ek maap, chevron dane; jayga diye-i item gulo alada. */
  /* NOTE: `.elementskit-menu-overlay` (pichoner kalo porda) eo ei class ta pay,
   * tai shudhu drawer (`.elementskit-menu-container`) target kora holo. */
  .mx-header .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    background: #ffffff !important;
  }
  .mx-header .elementskit-nav-identity-panel,
  .mx-header .elementskit-navbar-nav > li,
  .mx-header .elementskit-navbar-nav > li > a {
    border: 0 !important;
    box-shadow: none !important;
  }
  .mx-header .elementskit-navbar-nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 50px !important;
    padding: 0 !important;
    font-size: var(--mixora-drawer-item, 17px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: var(--mixora-ink, #111111) !important;
    background: transparent !important;
  }
  .mx-header .elementskit-navbar-nav > li > a:hover,
  .mx-header .elementskit-navbar-nav > li > a:focus {
    color: var(--mixora-muted, #5f646d) !important;
    background: transparent !important;
  }
  /* Choto submenu (WordPress dropdown) — ektu bhitore, halka */
  .mx-header .elementskit-navbar-nav .elementskit-dropdown {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 10px 14px !important;
  }
  .mx-header .elementskit-navbar-nav .elementskit-dropdown a {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: var(--mixora-muted, #5f646d) !important;
    background: transparent !important;
  }

  /* ============================================================
   * MOBILE MENU DRAWER  (ElementsKit offcanvas)
   * ------------------------------------------------------------
   * Elementor structure (hate lekha hoy ni - ElementsKit banay):
   *   .elementskit-menu-container            <- drawer
   *     ul.elementskit-navbar-nav
   *       li.nav-item > a.ekit-menu-nav-link
   *       li.elementskit-megamenu-has > a > i.elementskit-submenu-indicator
   *                                    > div.elementskit-megamenu-panel
   *     .elementskit-nav-identity-panel > button.elementskit-menu-close
   *
   * Elementor er kono markup bodlano hoy ni - shudhu class target kore
   * CSS. Tai menu item gulo Elementor/WordPress menu theke-i edit hobe.
   * ============================================================ */
  :root {
    --mixora-drawer-pad-left: 16px;   /* EDIT ME: bam padding (komano holo) */
    --mixora-drawer-pad-right: 22px;  /* EDIT ME: dan padding */
    --mixora-drawer-pad-x: 16px;      /* fallback */
    --mixora-drawer-pad-top: 22px;    /* EDIT ME: upor er padding */
    --mixora-drawer-item: 18px;       /* EDIT ME: menu item font size */
  }

  /* ---------- Fullscreen Global Backdrop ---------- */
  .mixora-menu-global-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100200 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mixora-drawer-speed, 0.42s) ease,
                visibility var(--mixora-drawer-speed, 0.42s) ease;
  }
  body.mixora-mobile-menu-open .mixora-menu-global-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ---------- When Mobile Menu Open: Hide outside header pill & outside logo ---------- */
  body.mixora-mobile-menu-open .mx-header,
  body.mixora-mobile-menu-open .elementor-location-header,
  body.mixora-mobile-menu-open .mx-header .mx-header-bar {
    z-index: 100250 !important;
  }
  body.mixora-mobile-menu-open .mx-header .mx-header-bar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.mixora-mobile-menu-open .mx-header .mx-header-logo-col,
  body.mixora-mobile-menu-open .mx-header .elementor-widget-theme-site-logo {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* ---------- Overlay ---------- */
  .mx-header .elementskit-menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100200 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mixora-drawer-speed, 0.42s) ease,
                visibility var(--mixora-drawer-speed, 0.42s) ease;
  }
  .mx-header .elementskit-menu-overlay.active,
  body.mixora-mobile-menu-open .mx-header .elementskit-menu-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  /* ---------- Drawer: DAN dik theke slide, 80% chowra ---------- */
  .mx-header .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    position: fixed !important;
    inset-block: 0 !important;
    right: 0 !important;
    left: auto !important;
    z-index: 100260 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;  /* item gulo UPORE thakbe */
    align-items: stretch !important;
    gap: 0 !important;
    width: var(--mixora-drawer-width) !important;
    max-width: var(--mixora-drawer-width) !important;
    height: 100dvh !important;
    padding: var(--mixora-drawer-pad-top) var(--mixora-drawer-pad-right, 22px)
             calc(24px + env(safe-area-inset-bottom, 0px)) var(--mixora-drawer-pad-left, 16px) !important;
    border-radius: 0 !important;   /* puro sada */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* SHUDHU transform animate hoy - GPU te chole, tai smooth */
    transform: translateX(104%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform;
    transition: transform var(--mixora-drawer-speed, 0.42s)
                var(--mixora-drawer-ease, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  }
  .mx-header .elementskit-menu-container.elementskit-menu-offcanvas-elements.active,
  body.mixora-mobile-menu-open .mx-header .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    transform: translateX(0) !important;
  }

  /* ---------- Identity Panel (Logo on Left, Close Button on Right at very TOP) ---------- */
  .mx-header .elementskit-nav-identity-panel {
    order: -1 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 0 24px 0 !important;   /* logo row ar menu er majhe shudhu jayga, line nei */
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .mx-header .elementskit-nav-identity-panel .elementskit-site-title {
    display: none !important;
  }
  .mx-header .elementskit-nav-identity-panel .elementskit-nav-logo,
  .mx-header .elementskit-nav-identity-panel .mixora-drawer-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 130px !important;
  }
  .mx-header .elementskit-nav-identity-panel .elementskit-nav-logo img,
  .mx-header .elementskit-nav-identity-panel .mixora-drawer-logo img {
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Modern minimalist drawer close button */
  .mx-header button.elementskit-menu-close {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    cursor: pointer;
    position: relative !important;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .mx-header button.elementskit-menu-close::before,
  .mx-header button.elementskit-menu-close::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 8px !important;
    width: 22px !important;
    height: 1.6px !important;
    background: currentColor !important;
    border-radius: 1px !important;
    transition: background-color 0.2s ease !important;
  }
  .mx-header button.elementskit-menu-close::before {
    transform: rotate(45deg) !important;
  }
  .mx-header button.elementskit-menu-close::after {
    transform: rotate(-45deg) !important;
  }
  .mx-header button.elementskit-menu-close:hover,
  .mx-header button.elementskit-menu-close:focus-visible {
    opacity: 1 !important;
    transform: rotate(90deg) scale(1.06) !important;
  }
  .mx-header button.elementskit-menu-close:active {
    transform: rotate(90deg) scale(0.92) !important;
  }

  /* ---------- Menu items: BAM prante, divider soho ---------- */
  .mx-header .elementskit-navbar-nav {
    order: 0 !important;
    display: block !important;
    align-content: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
  }
  .mx-header .elementskit-navbar-nav > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* ---------- Chevron: tap kore mega menu khole ----------
   * Shop LEKHA e tap = /shop/ page, CHEVRON e tap = accordion.
   * Tai chevron er tap area boro rakha hoyeche (44px), jate bhul kore
   * lekhatay tap na lage. Padding die area barano hoyeche - icon er
   * dekha maap (font-size) bodlay ni. */
  .mx-header .elementskit-navbar-nav .elementskit-submenu-indicator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 -12px 0 auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.34s var(--mixora-drawer-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .mx-header .elementskit-navbar-nav > li.elementskit-dropdown-open > a .elementskit-submenu-indicator {
    transform: rotate(180deg);
  }

  /* ---------- Mega submenu: smooth accordion ----------
   * `display: none -> block` animate kora jay NA. Tai grid-row trick:
   * grid-template-rows 0fr -> 1fr animate hoy, ar child e overflow:hidden.
   * Eta modern browser e smooth height animation dey, kono JS maap lage na. */
  .mx-header .elementskit-megamenu-panel {
    position: static !important;
    display: grid !important;
    grid-template-rows: 0fr;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: hidden !important;
    transition: grid-template-rows 0.38s var(--mixora-drawer-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .mx-header .elementskit-megamenu-panel > * {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .mx-header .elementskit-navbar-nav > li.elementskit-dropdown-open > .elementskit-megamenu-panel,
  .mx-header .elementskit-megamenu-panel.elementskit-dropdown-open {
    grid-template-rows: 1fr;
  }

  /* Panel er bhitore: bam prante, porishkar spacing, kono gray box noy */
  .mx-header .elementskit-megamenu-panel .e-con,
  .mx-header .elementskit-megamenu-panel .e-con-inner {
    --content-width: 100% !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --border-color: transparent !important;
    text-align: left !important;
  }
  /* Categories heading - shudhu Categories title e dark color */
  .mx-header .elementskit-megamenu-panel .mx-mega-cat-heading .elementor-heading-title {
    margin: 4px 0 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }
  /* Category link gulo - bam prante, tap kora shohoj */
  .mx-header .elementskit-megamenu-panel .elementor-icon-list-items {
    padding: 0 !important;
    margin: 0 !important;
  }
  .mx-header .elementskit-megamenu-panel .elementor-icon-list-item {
    margin: 0 !important;
  }
  .mx-header .elementskit-megamenu-panel .elementor-icon-list-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--mixora-muted, #5f646d) !important;
    text-align: left !important;
  }
  .mx-header .elementskit-megamenu-panel .elementor-icon-list-text {
    text-align: left !important;
  }
  /* Desktop e category list duita pashapashi column (109px chowra) — drawer e
   * oi maap thakle "Short sleeve shirt" er moto naam bhenge 2 line hoto.
   * Drawer e list puro chowra, ek column. */
  .mx-header .elementskit-megamenu-panel .elementor-widget-icon-list {
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
    margin: 0 !important;
  }
  /* Elementor container er 20px gap "Categories" heading er niche boro fak
   * banato. Drawer e gap 0 — jayga ashe heading/item er nijer maap theke.
   * (Banner card er gap .mx-mega-promos e alada kore deya.) */
  .mx-header .elementskit-megamenu-panel :is(.e-con, .e-con-inner):not(.mx-mega-promos) {
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --widgets-spacing: 0px !important;
  }
  /* Panel er upor/niche shas — SHUDHU khola obosthay. Bondho obosthay padding
   * thakle 0fr grid-o oi 22px dhore rakhto, tai "Shop" er niche fak dekhato. */
  .mx-header .elementskit-megamenu-panel .mx-megamenu {
    padding: 0 !important;
    transition: padding 0.38s var(--mixora-drawer-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .mx-header .elementskit-navbar-nav > li.elementskit-dropdown-open > .elementskit-megamenu-panel .mx-megamenu,
  .mx-header .elementskit-megamenu-panel.elementskit-dropdown-open .mx-megamenu {
    padding: 2px 0 14px 14px !important;   /* bam e 14px — Shop er nicher item bujha jay */
  }

  /* Promotional Banner Cards container (Classic, Best Sellers & New Arrivals) - STACKED (niche niche) */
  .mx-header .elementskit-megamenu-panel .mx-mega-promos {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  /* Two banner cards stacked vertically (niche niche) */
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-1,
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-2 {
    min-height: 180px !important;
    height: 180px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;  /* Desktop style: bottom aligned */
    align-items: flex-start !important;    /* Desktop style: left aligned */
    text-align: left !important;
    padding: 18px 20px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Card er overlay rong: Elementor e container -> Style -> Background Overlay theke din.
   * Card er content overlay er upore thakbe. */
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-1 > *,
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-2 > * {
    position: relative !important;
    z-index: 2 !important;
    text-align: left !important;
  }

  /* Desktop-matched Typography: Classic & New Arrivals (Subtitle) */
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-1-subtitle,
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-2-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-1-subtitle .elementor-heading-title,
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-2-subtitle .elementor-heading-title {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    opacity: 0.95;
  }

  /* Desktop-matched Typography: Best Sellers & Shop Now (Title) */
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-1-title,
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-2-title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-1-title .elementor-heading-title,
  .mx-header .elementskit-megamenu-panel .mx-mega-promo-2-title .elementor-heading-title {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.9px !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- Choto phone (320px - 375px) ---------- */
  @media (max-width: 380px) {
    :root {
      --mixora-drawer-pad-left: 14px;
      --mixora-drawer-pad-right: 18px;
      --mixora-drawer-pad-x: 14px;
      --mixora-drawer-pad-top: 20px;
      --mixora-drawer-item: 17px;
    }
    .mx-header .elementskit-megamenu-panel .mx-mega-promo-1,
    .mx-header .elementskit-megamenu-panel .mx-mega-promo-2 {
      min-height: 160px !important;
      height: 160px !important;
      padding: 16px 16px !important;
    }
    .mx-header .elementskit-megamenu-panel .mx-mega-promo-1-subtitle .elementor-heading-title,
    .mx-header .elementskit-megamenu-panel .mx-mega-promo-2-subtitle .elementor-heading-title {
      font-size: 12px !important;
      letter-spacing: 2.2px !important;
    }
    .mx-header .elementskit-megamenu-panel .mx-mega-promo-1-title .elementor-heading-title,
    .mx-header .elementskit-megamenu-panel .mx-mega-promo-2-title .elementor-heading-title {
      font-size: 18px !important;
    }
  }

  /* EDIT ME: mobile e search open holey koto chowra hobe.
   * Form ta absolute (right:0), tai khulley logo er upor diye BAM dike bare —
   * header er layout e kichu nore na, kono overflow o hoy na. */
  .mx-header .mx-header-search {
    --mx-hs-open-w: 260px;
  }
  @media (max-width: 767px) {
    /* Phone e 260px hole input screen er bame kete jeto. Icon theke logo
     * porjonto jayga = 100vw - 200px (390px phone e ~190px). */
    .mx-header .mx-header-search {
      --mx-hs-open-w: calc(100vw - 200px);
    }
  }
  .mx-header .mx-header-search:hover .e-search-form,
  .mx-header .mx-header-search:focus-within .e-search-form,
  .mx-header .mx-header-search.is-search-open .e-search-form {
    min-width: 0 !important;
  }

  /* Mobile live search: matches header edges */
  .mx-header .mixora-live-search {
    top: 68px !important; /* header (60px) + 8px */
    left: var(--mixora-shell-gutter-mobile) !important;
    right: var(--mixora-shell-gutter-mobile) !important;
    max-height: calc(100dvh - 104px);
    padding: 10px !important;
    border-radius: 16px !important;
  }
  .mx-header .mixora-live-search__item {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
  }
  .mx-header .mixora-live-search__item img {
    width: 64px !important;
    height: 64px !important;
  }

  /* Disable body scroll when open (JS toggles class) */
  body.mixora-mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
    overscroll-behavior: contain;
  }

  /* ============================================================
   * MOBILE BOTTOM BAR — Home | Search | Cart | Shop
   * Footer template (post 242) er `.mx-bottom-bar`.
   *
   * KENO center hoto na: Elementor-e protita column e `--width: 20%`
   * deya chilo (4 x 20% = 80%), ar bar e `justify-content: space-between`.
   * Tar fole faak gulo oshoman hoto ar cart column er maap alada hoto.
   * Ekhon char ta column-i `flex: 1 1 0` — mane HUBOHU shoman char bhag,
   * protitar bhitore icon + label column-e center kora.
   * ============================================================ */
  .mx-footer .mx-bottom-bar {
    --mixora-tab-icon: 22px;   /* EDIT ME: bottom bar icon maap */
    --mixora-tab-label: 11px;  /* EDIT ME: label font size */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 99990 !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--mixora-line, rgba(17, 17, 17, 0.1)) !important;
    border-radius: 0 !important;
    /* Modern: glass + halka line, bhari shadow NEI (age 0 0 5px rgba(0,0,0,.3) chilo) */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: none !important;
  }
  .mx-footer .mx-bottom-bar > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    /* iPhone er niche home-indicator er jonno bad-deya jayga */
    padding: 7px 2px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Char ta column HUBOHU shoman — eta-i center align er ashol chabi */
  .mx-footer .mx-bottom-bar-item-1,
  .mx-footer .mx-bottom-bar-item-2,
  .mx-footer .mx-bottom-bar-item-cart,
  .mx-footer .mx-bottom-bar-item-4 {
    flex: 1 1 0 !important;
    width: 25% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 5px !important;
  }
  .mx-footer .mx-bottom-bar .elementor-widget,
  .mx-footer .mx-bottom-bar .elementor-widget-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Protita item: icon upore, label niche — duitai center */
  .mx-footer .mx-bottom-bar .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mx-footer .mx-bottom-bar .elementor-icon-box-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    line-height: 1 !important;
  }
  .mx-footer .mx-bottom-bar .elementor-icon-box-icon,
  .mx-footer .mx-bottom-bar .elementor-menu-cart__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mixora-tab-icon) !important;
    height: var(--mixora-tab-icon) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  /* display:block na dile SVG baseline e boshe -> icon niche neme jay.
   *
   * !! `fill: #111` DEBEN NA !!
   * Outline (stroke-wala) icon er bhitore `fill="none"` thake. Jor kore fill
   * dile sheta bhorat kalo blob hoye jay — Search ar Shop icon ta thik
   * sheivabe-i kalo chouko hoye giyechilo. Shudhu `color` set kora hoy,
   * SVG nijer fill/stroke (currentColor) theke rong ta niye ney. */
  .mx-footer .mx-bottom-bar .elementor-icon-box-icon svg,
  .mx-footer .mx-bottom-bar .elementor-icon-box-icon i,
  .mx-footer .mx-bottom-bar .elementor-menu-cart__icon svg,
  .mx-footer .mx-bottom-bar .elementor-menu-cart__icon i {
    display: block !important;
    width: var(--mixora-tab-icon) !important;
    height: var(--mixora-tab-icon) !important;
    font-size: var(--mixora-tab-icon) !important;
    line-height: 1 !important;
    color: #111 !important;
    stroke-width: 1.6px;   /* outline icon gulo aro halka, modern dekhabe */
  }
  /* EDIT ME: label (Home / Search / Cart / Shop) */
  .mx-footer .mx-bottom-bar .elementor-icon-box-title,
  .mx-footer .mx-bottom-bar .elementor-icon-box-title a,
  .mx-footer .mx-bottom-bar-cart-label .elementor-heading-title,
  .mx-footer .mx-bottom-bar-cart-label .elementor-heading-title a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111 !important;
    font-size: var(--mixora-tab-label) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    text-transform: none !important;
  }
  .mx-footer .mx-bottom-bar .elementor-icon-box-description {
    display: none !important;
  }

  /* Cart column: widget ta icon er motoi 22px shoman, tar niche "Cart" label shoman baseline e */
  .mx-footer .mx-bottom-bar-item-cart .mx-bottom-bar-cart,
  .mx-footer .mx-bottom-bar-item-cart .elementor-widget-container,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__wrapper,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle_wrapper,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle_button,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle_button.elementor-button {
    width: var(--mixora-tab-icon, 22px) !important;
    min-width: 0 !important;
    max-width: var(--mixora-tab-icon, 22px) !important;
    height: var(--mixora-tab-icon, 22px) !important;
    min-height: var(--mixora-tab-icon, 22px) !important;
    max-height: var(--mixora-tab-icon, 22px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle:hover,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle:focus,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle_button:hover,
  .mx-footer .mx-bottom-bar-item-cart .elementor-menu-cart__toggle_button:focus,
  .mx-footer .mx-bottom-bar-cart .elementor-menu-cart__toggle:hover,
  .mx-footer .mx-bottom-bar-cart .elementor-menu-cart__toggle:focus,
  .mx-footer .mx-bottom-bar-cart .elementor-menu-cart__toggle_button:hover,
  .mx-footer .mx-bottom-bar-cart .elementor-menu-cart__toggle_button:focus {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .mx-footer .mx-bottom-bar-item-cart .elementor-button-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--mixora-tab-icon, 22px) !important;
    height: var(--mixora-tab-icon, 22px) !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .mx-footer .mx-bottom-bar-item-cart .mx-bottom-bar-cart-label {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .mx-footer .mx-bottom-bar .elementor-menu-cart__toggle_button .elementor-button-text {
    display: none !important;   /* dam ta bar e dekhabe na */
  }
  .mx-footer .mx-bottom-bar .elementor-button-icon-qty {
    top: -6px !important;
    right: -10px !important;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #111 !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 12px !important;
    font-weight: 700;
  }
}

/* ============================================================
 * SEARCH POPUP (Elementor Popup #1507) - premium, minimal
 *
 * KIVABE ELEMENTOR ER SEARCH WIDGET KAJ KORE (eta jana MUST):
 *   .e-search-label > svg          -> position: absolute, bam pashe
 *   .e-search-input-wrapper > svg  -> position: absolute, dan pashe (clear x)
 *   .e-search-input                -> nijer padding-inline diye oi duitar
 *                                     jonno jayga chere dey:
 *       padding-inline-start = --e-search-input-padding-inline-start
 *                            + --e-search-icon-label-absolute-width
 *                            + --e-search-input-gap
 *       padding-inline-end   = --e-search-input-padding-inline-end
 *                            + --e-search-icon-clear-absolute-width
 *                            + --e-search-input-gap
 *
 * Tai form/label/wrapper er layout e HAT DEYA HOY NA - shudhu Elementor er
 * NIJER variable set kora hoy. Age flex banate giye icon ta placeholder er
 * upore uthe giyechilo.
 *
 * ITIHAS: ei popup e ~5,500 character er Elementor Custom CSS chilo,
 * sheta muche deya hoyeche. Backup:
 * plugins/mixora-elementor-polish/_elementor-custom-css-backup-1507.txt
 *
 * MODAL SELECTOR: `.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep)`
 *   - Age `#elementor-popup-modal-{popup ID}` selector chilo. Modal ta Elementor
 *     JS banay, tai PHP diye class deya jay na — `:has(.mx-search-popup)` diye
 *     bhitorer popup ta dhore modal ke target kora hoy.
 *   - `:not(#mx-id-keep)` MUCHBEN NA: eta ID-level specificity rakhe, jate
 *     Elementor er nijer `#elementor-popup-modal-…` rule er kache na hare.
 * ============================================================ */
/* ---------- 1. Outer Backdrop & Top-Anchored Modal Position ---------- */
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(20px, 5vh, 48px) 16px 24px !important;
  background: rgba(10, 10, 10, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: mixoraModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-widget-content {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  height: min(76vh, 620px) !important;
  min-height: min(68vh, 500px) !important;
  max-height: min(86vh, 680px) !important;
  border-radius: 0 !important;
  border: 1.5px solid #111111 !important;
  background: #ffffff !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
  padding: 22px 20px 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  animation: mixoraModalSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Animations */
@keyframes mixoraModalFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes mixoraModalFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mixoraModalSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mixoraModalSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.98);
  }
}

.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep).mixora-popup-closing {
  animation: mixoraModalFadeOut 0.2s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep).mixora-popup-closing .dialog-widget-content {
  animation: mixoraModalSlideUp 0.2s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

/* Hide Elementor's native floating close button — we use the clean dedicated header close button */
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-close-button {
  display: none !important;
}

/* ---------- 2. Dialog Message & Reset Inner Elementor Containers ---------- */
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-message {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-message > .elementor,
.mx-search-popup,
.mx-search-popup .elementor-element.mx-search-popup-box,
.mx-search-popup .elementor-element.mx-search-popup-box > .e-con-inner,
.mx-search-popup .elementor-element.mx-search-popup-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
}

/* Remove any legacy ::before or ::after pseudo-elements */
.mx-search-popup .elementor-element.mx-search-popup-inner::before,
.mx-search-popup .elementor-element.mx-search-popup-inner::after {
  display: none !important;
  content: none !important;
}

/* ---------- 3. Dedicated Popup Header (Title + Close Button) ---------- */
.mx-search-popup .mixora-search-popup-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid #eeeeee !important;
  flex-shrink: 0 !important;
}

.mx-search-popup .mixora-search-popup-title {
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.mx-search-popup .mixora-search-popup-close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid #111111 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.mx-search-popup .mixora-search-popup-close-btn:hover,
.mx-search-popup .mixora-search-popup-close-btn:active {
  background: #111111 !important;
  color: #ffffff !important;
}

.mx-search-popup .mixora-search-popup-close-btn svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
}

/* ---------- 4. Search Input Bar (0px Border-Radius, Crisp & Spacious) ---------- */
.mx-search-popup .elementor-element.mx-search-popup-search {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.mx-search-popup .elementor-element.mx-search-popup-search .e-search-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

.mx-search-popup .e-search-input-wrapper {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 52px !important;
  background: #ffffff !important;
  border: 1.5px solid #111111 !important;
  border-radius: 0 !important;
  padding: 0 12px 0 14px !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.15s ease !important;
}

.mx-search-popup .e-search-input-wrapper:focus-within {
  box-shadow: 0 0 0 1px #111111 !important;
}

.mx-search-popup .e-search-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111111 !important;
  margin-right: 12px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.mx-search-popup .e-search-label svg,
.mx-search-popup .e-search-label i {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  color: #111111 !important;
  fill: currentColor !important;
}

.mx-search-popup .e-search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #111111 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mx-search-popup .e-search-input::placeholder {
  color: #888888 !important;
  font-weight: 400 !important;
}

/* Clear Button inside Input */
.mixora-search-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #888888;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.mixora-search-clear-btn:hover {
  color: #111111;
}

/* Hide native Elementor search results dropdown — we use custom AJAX live-results */
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-results-container,
.mx-search-popup .e-search-icon-clear {
  display: none !important;
}

/* ---------- 5. User-Friendly Helper Hint (Empty State) ---------- */
.mx-search-popup .mixora-search-popup-hint {
  display: flex !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding: 11px 14px !important;
  background: #f9fafb !important;
  border: 1px solid #eeeeee !important;
  border-radius: 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
  transition: opacity 0.2s ease !important;
}

.mx-search-popup .mixora-search-popup-hint .mixora-search-hint-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.mx-search-popup .mixora-search-popup-hint svg {
  width: 14px !important;
  height: 14px !important;
  color: #9ca3af !important;
  flex-shrink: 0 !important;
}

.mx-search-popup.has-search-active .mixora-search-popup-hint {
  display: none !important;
}

/* ---------- 6. Live Search Result List (0px Border-Radius Luxury Cards) ---------- */
.mixora-live-search--inline {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 14px 0 0 !important;
  padding: 0 4px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  display: none;
  opacity: 0;
  visibility: hidden;
}

.mixora-live-search--inline.is-visible {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mixora-live-search--inline .mixora-live-search__item {
  --mixora-search-img: 56px;
  display: grid !important;
  grid-template-columns: var(--mixora-search-img) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin-bottom: 6px !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.mixora-live-search--inline .mixora-live-search__item:hover,
.mixora-live-search--inline .mixora-live-search__item.is-active {
  background: #f8f9fa !important;
  border-color: #111111 !important;
}

.mixora-live-search--inline .mixora-live-search__item img {
  width: var(--mixora-search-img) !important;
  height: var(--mixora-search-img) !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  background: #f1f1f1 !important;
  display: block !important;
}

.mixora-live-search--inline .mixora-live-search__meta {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.mixora-live-search--inline .mixora-live-search__meta strong {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mixora-live-search--inline .mixora-live-search__meta small {
  color: #111111 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.mixora-live-search__status {
  padding: 20px 14px;
  text-align: center;
  color: #6b7280;
  font-size: 13.5px;
}

.mixora-live-search__status--empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 24px 16px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
}

.mixora-live-search__status--empty svg {
  color: #6b7280;
}

.mixora-live-search__status--empty strong {
  color: #111111;
  font-size: 14px;
  font-weight: 600;
}

.mixora-live-search__status--empty span {
  color: #6b7280;
  font-size: 13px;
}

.mixora-live-search__status--loading {
  color: #6b7280;
  font-size: 13.5px;
}

/* ---------- 7. Mobile Viewport Refinements (max-width: 767px) ---------- */
@media (max-width: 767px) {
  .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) {
    padding: 16px 12px 24px !important;
    align-items: flex-start !important;
  }
  .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-widget-content {
    width: 100% !important;
    max-width: 100% !important;
    height: min(78vh, 620px) !important;
    min-height: min(70vh, 500px) !important;
    max-height: min(88vh, 680px) !important;
    padding: 18px 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
  .mx-search-popup .mixora-search-popup-head {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }
  .mx-search-popup .mixora-search-popup-title {
    font-size: 13.5px !important;
  }
  .mx-search-popup .mixora-search-popup-close-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .mx-search-popup .e-search-input-wrapper {
    height: 48px !important;
    padding: 0 10px 0 12px !important;
  }
  .mx-search-popup .e-search-input {
    font-size: 14px !important;
  }
  .mx-search-popup .mixora-search-popup-hint {
    margin-top: 10px !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
  }
}

/* ============================================================
 * SEARCH POPUP - LAYOUT FIX (ei block ta shob shesh e, tai jete)
 * ------------------------------------------------------------
 * TINTA SOMOSSA ar tader karon:
 *
 * 1) SEARCH ICON lekhar UPORE uthe jacchilo
 *    Elementor er markup e `.e-search-label` ta `.e-search-input-wrapper`
 *    er BHITORE noy - tar BHAI (duitai form er child):
 *        form > label.e-search-label
 *             > div.e-search-input-wrapper > input
 *    Kintu border/box ta wrapper e deya chilo, tai icon ta box er BAIRE
 *    pore jeto. Tar upor Elementor `.e-search-label > svg` ke
 *    `position: absolute` kore input er padding er upor boshay.
 *    -> Ekhon FORM take box banano holo (icon + input duitai bhitore),
 *       ar svg er absolute positioning batil kore normal flow e ana holo.
 *
 * 2) CLEAR (x) button MAJHKHANE bhaschilo
 *    Elementor `.e-search-input-wrapper` ke `flex-direction: column` dey.
 *    Tai flex item hishebe button ta input er NICHE stack hoye jeto.
 *    -> `flex-direction: row` kore deya holo.
 *
 * 3) Input e ojotha padding
 *    Elementor input er padding calc kore icon er jonno jayga rakhe.
 *    Icon ekhon normal flow e ache, tai oi calc ta 0 kore deya holo.
 *
 * EDIT ME: box er uchchota / rong niche-r variable gulo te.
 * ============================================================ */
.mx-search-popup .elementor-element.mx-search-popup-search {
  --mx-sp-box-h: 52px;        /* EDIT ME: search box uchchota */
  --mx-sp-box-border: #111111;/* EDIT ME: border rong */
  --mx-sp-icon: 18px;         /* EDIT ME: search icon maap */
  --mx-sp-pad-x: 14px;        /* EDIT ME: box er bam/dan padding */

  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;

  /* Elementor er nijer padding calc puro nishkriyo - icon ekhon flow e ache */
  --e-search-input-padding-inline-start: 0px;
  --e-search-input-padding-inline-end: 0px;
  --e-search-input-padding-block-start: 0px;
  --e-search-input-padding-block-end: 0px;
  --e-search-input-gap: 0px;
  --e-search-icon-label-absolute-width: 0px;
  --e-search-icon-clear-absolute-width: 0px;
}

/* FORM = dekha jaoa box (icon + input + clear, ek line e) */
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: var(--mx-sp-box-h) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 var(--mx-sp-pad-x) !important;
  border: 1.5px solid var(--mx-sp-box-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: box-shadow 0.16s ease !important;
}
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-form:focus-within {
  box-shadow: 0 0 0 1px var(--mx-sp-box-border) !important;
}

/* ICON: normal flow e, absolute positioning batil */
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-label {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--mx-sp-icon) !important;
  width: var(--mx-sp-icon) !important;
  height: var(--mx-sp-icon) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mx-sp-box-border) !important;
}
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-label > svg,
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-label > i {
  position: static !important;   /* <- Elementor er absolute batil */
  transform: none !important;
  inset: auto !important;
  display: block !important;
  width: var(--mx-sp-icon) !important;
  height: var(--mx-sp-icon) !important;
  font-size: var(--mx-sp-icon) !important;
  margin: 0 !important;
  fill: currentColor !important;
}

/* WRAPPER: shudhu input er jayga - kono border/box noy */
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-input-wrapper {
  display: flex !important;
  flex-direction: row !important;   /* <- Elementor column dey, tai x niche jeto */
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mx-search-popup .elementor-element.mx-search-popup-search .e-search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #111 !important;
  /* 16px MUST - er theke choto hole iPhone input e zoom kore dey */
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* CLEAR (x): input er DAN pashe, ek line e */
.mx-search-popup .mixora-search-clear-btn {
  order: 9;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #9ca3af !important;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color 0.16s ease;
}
.mx-search-popup .mixora-search-clear-btn:hover {
  background: transparent !important;
  color: #111 !important;
}

/* Elementor er nijer clear icon ar results dropdown - duitai off */
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-input-wrapper > svg,
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-input-wrapper > i,
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-icon-clear,
.mx-search-popup .elementor-element.mx-search-popup-search .e-search-results-container {
  display: none !important;
}

/* ---------- Popup uchchota: Boro, spacious height (User request) ----------
 * Content ebong live search results er jonno boro height provide kore. */
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-widget-content {
  height: min(76vh, 600px) !important;
  min-height: min(65vh, 480px) !important;
  max-height: min(88vh, 760px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-message {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-message > .elementor,
.mx-search-popup,
.mx-search-popup .elementor-element.mx-search-popup-box,
.mx-search-popup .elementor-element.mx-search-popup-box > .e-con-inner,
.mx-search-popup .elementor-element.mx-search-popup-inner {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.mx-search-popup .elementor-element.mx-search-popup-search {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Result list ta flex grow kore boro jayga nibe ebong scroll korbe */
.mx-search-popup .mixora-live-search--inline {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Popup ta header er niche theke shuru hobe ----------
 * Age `height: auto` deyar por popup ta upore uthe FIXED header er
 * shathe lege jacchilo. Elementor popup ta by default screen er
 * majhkhane boshe; ekhane upor theke shuru kore header er jonno
 * jayga chere deya holo.
 *
 * Hisheb: header top (10px) + header height (60px) + fak (18px) = 88px
 * EDIT ME: fak barate/komate --mx-sp-top bodlan. */
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) {
  --mx-sp-top: 88px;
  align-items: flex-start !important;
  padding-top: var(--mx-sp-top) !important;
  padding-bottom: 16px !important;
  box-sizing: border-box !important;
}
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-widget-content {
  margin-top: 0 !important;
  max-height: calc(100dvh - var(--mx-sp-top) - 24px) !important;
}
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-message {
  max-height: calc(100dvh - var(--mx-sp-top) - 24px) !important;
}
/* WP admin bar thakle aro niche */
body.admin-bar .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) {
  --mx-sp-top: 134px;
}

/* ---------- Popup puro bondho (backdrop soho) ----------
 * site-polish.js -> hardClose() ei class ta boshay.
 * KENO `!important`: age inline `style.display=none` deya hoto, kintu
 * Elementor er nijer CSS/JS shetake overwrite kore dito - tar fole
 * bondho korar por-o backdrop ar ekta SHADA khali box screen-e theke jeto.
 * Class + !important ke keu harate pare na. */
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep).mixora-popup-hidden,
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep).mixora-popup-hidden .dialog-widget-content,
.elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep).mixora-popup-hidden .dialog-message {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Mobile: search popup PURO SCREEN (full screen) ----------
 * Mobile e popup ta ar card noy — puro screen jure shada page.
 * Border, shadow, backdrop er fak shob batil; header/bottom bar er
 * upore boshe. Uporer "header er niche theke shuru" (--mx-sp-top) rule
 * shudhu desktop/tablet e kaj kore.
 * EDIT ME: bhitorer fak --mx-sp-fs-pad e. */
@media (max-width: 767px) {
  .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep),
  body.admin-bar .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) {
    --mx-sp-top: 0px;
    --mx-sp-fs-pad: 16px;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    /* Header (--mixora-z-header 100100) ar mega menu (100110) er upore,
     * mobile drawer (100200+) er niche — noile header close button dheke dey */
    z-index: 100150 !important;
  }
  .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-widget-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(var(--mx-sp-fs-pad) + env(safe-area-inset-top, 0px)) var(--mx-sp-fs-pad)
             calc(var(--mx-sp-fs-pad) + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .elementor-popup-modal:has(.mx-search-popup):not(#mx-id-keep) .dialog-message {
    max-height: none !important;
  }
}