/* ============================================================
 * MIXORA — mixora-header.css (Desktop header layout + mega menu position)
 * Mixora Theme Support 2.2.1 | 2026-10-07
 * ------------------------------------------------------------
 * HOW TO EDIT LATER:
 * - :root e site er SHARED maap: --mixora-shell-width (1370px) ar gutter.
 *   Footer, category, product page o ei variable use kore — muchben NA,
 *   noile footer puro screen chowra hoye jabe.
 * - Header container er width / rong, menu link, logo size — egulo ekhane
 *   NEI. Shob Elementor / ElementsKit widget er setting theke ashe.
 * - Header search + cart icon: assets/css/site-polish.css ("HEADER SEARCH",
 *   "HEADER CART" section).
 * - Elementor ID ekhane nei: includes/elementor-class-map.php dekhun.
 * - Elementor editor-e ei file load hoy na (editor skip).
 * ============================================================ */

/* ---------- EDIT ME: brand tokens ---------- */
:root {
  --mixora-shell-width: 1370px;      /* EDIT ME: header width (1370px) = footer = search = mega */
  --mixora-shell-gutter: 32px;       /* EDIT ME: desktop left/right gap */
  --mixora-shell-gutter-mobile: 12px;/* EDIT ME: mobile left/right gap */
  --mixora-header-height: 72px;      /* EDIT ME: desktop header height */
  --mixora-header-radius: 0px;       /* EDIT ME: header corner — 0 = sharp/square */
  --mixora-ink: #111111;             /* EDIT ME: text black */
  --mixora-muted: #64666d;           /* EDIT ME: secondary text */
  --mixora-line: rgba(17, 17, 17, 0.1); /* EDIT ME: soft grey border */
  --mixora-panel: rgba(255, 255, 255, 0.94);
  --mixora-shadow: 0 18px 48px rgba(15, 18, 25, 0.12);
  --mixora-z-header: 100100;
  --mixora-z-mega: 100110;
  --mixora-z-search: 100120;
}

/* ---------- Body er uporer padding (floating header er jonno) ----------
 * Header ta fixed + float kore, tai shadharon page e oto ta jayga chere dite hoy.
 * JE PAGE e hero ke EKDOM upore chan (header ta hero er upor bhashbe),
 * shei page er body class ta niche "flush" list e add korun.
 *
 * NOTE: ei rule ta age site-polish.css-eo chilo, ALADA value te
 * (68px + 24px vs 72px + 18px). Duplicate ta shorano hoyeche —
 * ekhon body padding er EKMATRO malik ei file. */
body:not(.elementor-editor-active) {
  padding-top: var(--mixora-header-height);
}

/* EDIT ME: ei page gulo te upore kono fak thakbe na (hero full-bleed) */
body.home:not(.elementor-editor-active),
body.mx-flush-top:not(.elementor-editor-active),          /* Shop page */
body.woocommerce-shop:not(.elementor-editor-active),
body.post-type-archive-product:not(.elementor-editor-active) {
  padding-top: 0;
}

/* WP admin bar login thakle 32px beshi lage */
body.admin-bar:not(.elementor-editor-active) {
  padding-top: calc(var(--mixora-header-height) + 32px);
}
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: 32px;
}

/* Category archive: reduce gap between floating header and banner */
.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,
.mx-archive-template .elementor-element.mx-archive-banner,
.mx-archive-template .elementor-element.mx-archive-banner > .e-con-inner {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  --padding-top: 0px !important;
  --padding-block-start: 0px !important;
}
.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,
.mx-archive-template .elementor-element.mx-archive-banner-inner,
.mx-archive-template .elementor-element.mx-archive-banner-inner > .e-con-inner {
  padding-top: 10px !important;
  padding-block-start: 10px !important;
  margin-top: 0 !important;
  margin-block-start: 0 !important;
  --padding-top: 10px !important;
  --padding-block-start: 10px !important;
}

/* Floating wrapper — never overlap content, proper z-index.
 * NOTE (2026-09-04 fix): Elementor centers this pill with
 * left:50% + translateX(-50%). inset:0 override korle header LEFT-e sore jay,
 * tai ekhane Elementor-er centering preserve kora hoyeche. */
.elementor-location-header {
  position: relative;
  z-index: var(--mixora-z-header);
}
.elementor-location-header > .e-con[data-settings*='"position":"fixed"'],
.elementor-location-header > .elementor-element[data-settings*='"position":"fixed"'],
.mx-header .mx-header-bar {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: 0 !important; /* upore kono fak nei — header ekdom top-e */
  z-index: var(--mixora-z-header) !important;
  margin-inline: 0 !important;
}
/* Header bar SOB screen e FIXED (bhashe).
 * Age eta header bar er Elementor Custom CSS e chilo (`position: fixed`).
 * Body er padding-top (upore "Body er uporer padding") ei bhasha header er
 * jonno jayga rakhe — header fixed na thakle header + padding duita mile
 * protita page er upore SHADA fak dekhay. Tai position ekhane-i rakha holo. */
.mx-header .mx-header-bar {
  position: fixed !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: 32px !important; /* shudhu WP admin bar er niche */
}

/* Premium floating pill — width EXACTLY matches site container.
 * Centering: left:50% + translateX(-50%) (uporer rule). margin:0 rakha MUST,
 * nahole margin:auto + left:50% mile header left-e sore jabe. */
.mx-header .elementor-element.mx-header-bar {
  min-height: var(--mixora-header-height) !important;
  height: var(--mixora-header-height) !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  /* Elementor tablet e (@media max-width:1024px) `--border-radius: 16px`
   * set kore rekhechilo, tai tab-e header er kona gol hoye jeto.
   * Elementor er variable ta-o ekhane 0 kore deya holo. */
  --border-radius: 0px !important;
  border-radius: var(--mixora-header-radius) !important;
  backdrop-filter: none !important; /* blur bondho — header er pichone jhapsa background dekhato */
  -webkit-backdrop-filter: none !important;
  pointer-events: auto;
  overflow: visible !important; /* mega menu must not clip */
}
/* ---------- HEADER RADIUS: shob breakpoint e 0 ----------
 * Elementor er dik theke TINTA jaygay radius ashe:
 *   1. post-237.css : `--border-radius: 16px` @media(max-width:1024px)
 *   2. post-237.css : Custom CSS e `border-radius: 14px !important` @media(max-width:767px)
 *   3. widget style : `--border-radius` variable
 * Egulor specificity (0,3,0). Niche `body` jog kore (0,3,1) kora holo,
 * tai ei rule tinta-kei harabe — media query lagbe na, sob width e chole.
 *
 * EDIT ME: header gol korte chaile --mixora-header-radius (uporer :root) bodlan. */
body .mx-header .elementor-element.mx-header-bar,
body .mx-header .elementor-element.mx-header-bar > .e-con-inner {
  --border-radius: var(--mixora-header-radius) !important;
  border-radius: var(--mixora-header-radius) !important;
}

/* Desktop row: logo left | nav centered | icons right.
 * NOTE: Elementor flex respect kora hoyeche (grid force kora hoy na),
 * nahole inner % width + grid mile logo/menu/icons misalign hoy. */
.mx-header .mx-header-bar > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: var(--mixora-header-height) !important;
  height: var(--mixora-header-height) !important;
  padding-inline: 26px !important;
}
/* LEFT: logo — fixed auto width, vertically centered */
.mx-header .mx-header-logo-col {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* CENTER: menu — takes free space, truly centered */
.mx-header .mx-header-menu-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* RIGHT: icons — fixed auto width, right aligned */
.mx-header .mx-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mx-header .mx-header-nav-row,
.mx-header .mx-header-search-col,
.mx-header .mx-header-cart-col {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mx-header .mx-header-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(34px, 4vw, 88px) !important;
}
.mx-header .mx-header-cart-col {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* Logo — no extra baseline gap, vertically centered */
.mx-header .mx-header-logo,
.mx-header .mx-header-logo .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mx-header .mx-header-logo img {
  height: auto !important;
  display: block !important;
}
.mx-header .elementskit-navbar-nav {
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

/* Right icons column: search */
.mx-header .mx-header-search-col {
  display: flex !important;
  align-items: center !important;
}

/* Header search + cart icon er design: assets/css/site-polish.css e
 * ("HEADER SEARCH" ar "HEADER CART" section). Ekhane abar likhben NA —
 * age ei duita file e same jinish lekha chilo, tai ekta arekta ke kete dito. */
.mx-header .mx-header-cart-col {
  display: flex !important;
  align-items: center !important;   /* <- middle align er ashol line */
  justify-content: flex-end !important;
  /* NOTE: gap ekhane set kora hoy NI — Elementor container er nijer gap tai thakbe.
   * Duita icon er majher fak bodlate chaile Elementor editor e container gap bodlan. */
}

/* ---------- Mega menu: aligned to header width ---------- */
/* KENO `position: fixed`:
 * ElementsKit panel ta default e `position: absolute` — tokhon shetar
 * containing block hoy nearest positioned ancestor, mane menu er <li>.
 * Tai panel ta SHOP button er shathe boshto, header er shathe NA — misalign.
 *
 * Header pill (.mx-header-bar) e `transform: translateX(-50%)` ache.
 * CSS spec onujayi transform-wala element tar bhitorer `position: fixed`
 * descendant der containing block hoye jay. Tai `fixed` + `left:0; right:0`
 * dile panel ta HUBOHU header pill er maap ney.
 * Bonus: header er width (--mixora-shell-width) bodlale panel nije theke
 * shei maap e chole jabe — alada formula maintain korte hobe na. */
.mx-header .elementskit-megamenu-panel {
  position: fixed !important;
  top: calc(100% + 12px) !important;  /* 100% = header pill er height */
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  z-index: var(--mixora-z-mega) !important;
  /* padding 0 — bhitorer Elementor container er nijer padding (23px) ache */
  padding: 0 !important;
  border-radius: var(--mixora-header-radius) !important; /* header er motoi sharp */
  /* Mega menu er background / border / shadow: Elementor e mega menu template
   * (post 2210) er container -> Style -> Background theke din. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* left:0/right:0 die align hocche, tai ar translateX(-50%) lage NA */
  transform: translateY(8px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0.18s !important; /* Grace period when cursor leaves */
}

/* Seamless bridge extending 32px UP from panel to header pill across entire panel width */
@media (min-width: 1025px) {
  .mx-header .elementskit-megamenu-panel::before {
    content: "";
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
    pointer-events: auto !important;
    z-index: 10;
  }
}

.mx-header .elementskit-navbar-nav > li:hover > .elementskit-megamenu-panel,
.mx-header .elementskit-navbar-nav > li:focus-within > .elementskit-megamenu-panel,
.mx-header .elementskit-navbar-nav > li.is-megamenu-open > .elementskit-megamenu-panel,
.mx-header .elementskit-megamenu-panel.elementskit-dropdown-open,
.mx-header .elementskit-megamenu-panel.is-active,
.mx-header .elementskit-megamenu-panel:hover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition-delay: 0s !important;
  pointer-events: auto !important;
}

/* ---------- HOVER BRIDGE: mega menu porjonto mouse jete parbe ----------
 * Wide seamless funnel connecting "Shop" down to the panel */
.mx-header .elementskit-navbar-nav > li {
  position: relative;
}
@media (min-width: 1025px) {
  .mx-header .elementskit-navbar-nav > li.elementskit-megamenu-has::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -250px;
    right: -250px;
    height: 40px;
    display: none;
    z-index: var(--mixora-z-mega);
    pointer-events: auto !important;
  }
  .mx-header .elementskit-navbar-nav > li.elementskit-megamenu-has:hover::after,
  .mx-header .elementskit-navbar-nav > li.elementskit-megamenu-has:focus-within::after,
  .mx-header .elementskit-navbar-nav > li.elementskit-megamenu-has.is-megamenu-open::after {
    display: block;
  }
}

/* ---------- Mega menu ALIGNMENT ----------
 * Duita column (bam e category list, dan e image tile) ek line theke shuru
 * hobe ar ek shoman uchchota nebe. Age dan er grid e `--min-height: 385px`
 * chilo, tar fole chobir UPORE boro khali jayga toiri hoto. */
.mx-header .elementskit-megamenu-panel .e-con-inner {
  align-items: stretch !important;
  align-content: start !important;
}
/* Image tile grid: forced min-height batil, tile gulo puro jayga nebe */
.mx-header .elementskit-megamenu-panel .e-con.e-grid {
  --min-height: 0 !important;
  align-content: stretch !important;
  align-items: stretch !important;
  height: 100% !important;
}
.mx-header .elementskit-megamenu-panel .e-con.e-grid > .e-con,
.mx-header .elementskit-megamenu-panel .e-con.e-grid > a.e-con {
  min-height: 0 !important;
  height: 100% !important;
}
/* EDIT ME: panel er bhitorer padding (bam/dan/upor/niche ek shoman) */
.mx-header .elementskit-megamenu-panel > .e-con > .e-con-inner {
  padding: 26px !important;
  gap: 26px !important;
}
/* Category list: text bam prante, ek shoman line height */
.mx-header .elementskit-megamenu-panel .elementor-icon-list-item > a,
.mx-header .elementskit-megamenu-panel .elementor-icon-list-text {
  text-align: left !important;
  line-height: 1.9 !important;
}

/* Header search er result: Elementor Search widget er "Autocomplete" +
 * loop template theke ashe. Plugin er nijer live-search panel header e
 * ar chole na (age duita dropdown ek shathe khulto). */

/* ---------- Tablet (768–1024px): keep premium, tighter ---------- */
@media (max-width: 1024px) and (min-width: 768px) {
  :root { --mixora-header-height: 64px; }
  .mx-header .mx-header-bar > .e-con-inner {
    gap: 14px;
    padding-inline: 18px !important;
  }
  .mx-header .elementskit-megamenu-panel {
    padding: 18px !important;
  }
}

/* ---------- Mobile (≤767px): logo + menu icon vertically centered with bottom padding ---------- */
@media (max-width: 767px) {
  :root { --mixora-header-height: 62px; }
  .mx-header .mx-header-bar > .e-con-inner {
    min-height: var(--mixora-header-height) !important;
    height: var(--mixora-header-height) !important;
    padding-top: 8px !important;
    padding-bottom: 14px !important;
    padding-inline: 14px !important;
    align-items: center !important;
    align-content: center !important;
    gap: 12px !important;
  }
  .mx-header .mx-header-logo-col,
  .mx-header .mx-header-menu-col,
  .mx-header .mx-header-actions,
  .mx-header .mx-header-menu,
  .mx-header .mx-header-cart-col {
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 2px !important;
    padding-bottom: 6px !important;
    margin: 0 !important;
  }
  .mx-header .mx-header-logo-col {
    display: flex !important;
    align-items: center !important;
    padding-bottom: 6px !important;
  }
  .mx-header .mx-header-logo,
  .mx-header .mx-header-logo .elementor-widget-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }
  .mx-header .mx-header-logo img {
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    top: 2px !important;
  }
  .mx-header .mx-header-menu,
  .mx-header .mx-header-menu .elementskit-menu-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-bottom: 4px !important;
  }
  .mx-header .mx-header-menu .elementskit-menu-hamburger,
  .mx-header .mx-header-menu button.elementskit-menu-hamburger {
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 0 4px 0 !important;
    position: relative !important;
    top: 1px !important;
  }
}