/* ===== header.css ===== */
/* ==========================================================================
   VAPORS DUBAI — Elementor Header
   --------------------------------------------------------------------------
   Three full-bleed bars, each flush to the viewport with the content kept in a
   centred 1360px shell that carries an inline gutter:
     1. purple  — delivery note | utility links, account, cart, wishlist
     2. smoke   — gold-ringed circular logo | pill search | social + action set
     3. navy    — icon-badged primary menu
   Rows keep their own stacking context; `display:flex` is never put on a
   section because that breaks Elementor's layout engine.
   ========================================================================== */

:root {
  --vd-hdr-font:  "Sora", "Montserrat", sans-serif;
  --vd-hdr-ink:   #0B0D12;
  --vd-hdr-gold:  #F5C451;
  --vd-bar-radius: 16px;
  --vd-bar-inset:  14px;
  /* Inline gutter inside the full-bleed bars — keeps the delivery note, logo,
     search and menu off the viewport edge. */
  --vd-hdr-pad:    26px;
}
@media (max-width: 1024.98px) { :root { --vd-hdr-pad: 16px; } }
@media (max-width: 600px)  { :root { --vd-hdr-pad: 12px; } }

/* Full-bleed bars: edge to edge, square corners, stacked with no gap between
   them. Selector note: HFE renders the template straight inside the theme's
   <header> element, NOT inside `.elementor-location-header` (that's Elementor
   Pro's wrapper). Target the theme-agnostic Elementor root instead. */
.elementor .elementor-section.vd-hdr-top,
.elementor .elementor-section.vd-hdr-main,
.elementor .elementor-section.vd-hdr-nav {
  width: 100%;
  margin: 0;
  border-radius: 0;
}

/* Centre the content shell inside those full-bleed bars and give it an inline
   gutter. Nothing on this build gives `.elementor-container` auto side margins —
   the section computes to `display:block` and no rule touches its container's
   margin — so above the shell width the logo, search and utility links piled
   against the left edge with dead space on the right.
   `!important` because Elementor emits
   `.elementor-16 .elementor-element.elementor-element-xxxx > .elementor-container
   { max-width:1320px }` in post-16.css; the shell moves to 1360px so the nine
   menu items fit on one line (they need ~1270px — see ROW 3). */
.elementor .elementor-section.vd-hdr-top > .elementor-container,
.elementor .elementor-section.vd-hdr-main > .elementor-container,
.elementor .elementor-section.vd-hdr-nav > .elementor-container {
  width: 100%;
  max-width: 1360px !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vd-hdr-pad);
  padding-right: var(--vd-hdr-pad);
}
/* Row 1 and row 3 carry no `_background` in the Elementor template, so without
   this both bars render transparent and their white text sits on the white
   page. Declaring them here also keeps the header intact if the template's
   style panel is ever reset. */
.elementor .elementor-section.vd-hdr-top {
  background:
    radial-gradient(58% 220% at 24% 0%, rgba(168, 85, 247, .5) 0%, rgba(168, 85, 247, 0) 62%),
    linear-gradient(100deg, #2E1065 0%, #5B21B6 26%, #7C3AED 52%, #4C1D95 78%, #2E1065 100%) !important;
}
.elementor .elementor-section.vd-hdr-nav {
  background: linear-gradient(90deg, #0A173D 0%, #152A66 50%, #0A173D 100%) !important;
}
/* One hairline seam keeps the flush rows legible against each other. */
.elementor .elementor-section.vd-hdr-nav { border-top: 1px solid rgba(255, 255, 255, .1); }

/* Elementor's defaults inflate the header: every widget-wrap carries 10px
   padding and every button widget a 20px bottom margin. Zero them. */
.vd-hdr-top .elementor-widget-wrap,
.vd-hdr-main .elementor-widget-wrap,
.vd-hdr-nav .elementor-widget-wrap { padding: 0 !important; }

.vd-hdr-top .elementor-element,
.vd-hdr-main .elementor-element,
.vd-hdr-nav .elementor-element { margin-bottom: 0 !important; }
.vd-hdr-top .elementor-column,
.vd-hdr-main .elementor-column,
.vd-hdr-nav .elementor-column { padding: 0 !important; min-width: 0; }

/* ============================================================ ROW 1 ===== */
.vd-hdr-top .elementor-container {
  align-items: center;
  min-height: 46px;
}
/* Same treatment as row 2: the 42 / 58 percentage columns left a wide dead
   pocket in the middle of the bar, so the delivery note and the utility links
   looked bunched against the left. Let both groups size to their content and
   push them to opposite ends of the shell. The announce side keeps
   `flex-shrink: 1` so a tight window squeezes the copy, never the icon set. */
@media (min-width: 1025px) {
  .vd-hdr-top .elementor-container {
    gap: 22px;
    justify-content: space-between;
  }
  .vd-hdr-top .vd-hdr-announce-col {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
  }
  .vd-hdr-top .vd-hdr-utils {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .vd-hdr-top .vd-hdr-utils .elementor-widget-wrap { justify-content: flex-end !important; }
}
/* `display:flex` must sit on the heading title, not the widget wrapper: the
   widget renders a container div around the title, so a flex on the wrapper
   would only ever have one child. */
.vd-hdr-announce .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vd-hdr-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
}
.vd-hdr-announce strong { color: var(--vd-hdr-gold); font-weight: 800; }
.vd-hdr-top .elementor-widget-heading .elementor-heading-title { margin: 0 !important; }
.vd-hdr-top .elementor-widget-container { min-height: 0; }

/* Inline glyphs shared by both bars. Font Awesome ships with Elementor, so a
   ::before with the right family/weight is enough — no extra icon widget. */
.vd-ico {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.vd-ico-truck::before {
  content: "\f0d1";
  font-size: 14px;
  width: 18px;
  text-align: center;
}

/* --- utility links --- */
.vd-hdr-utils .elementor-widget-wrap {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.vd-hdr-utils .elementor-element { flex: 0 0 auto; width: auto; }
.vd-hdr-utils .elementor-widget-button { margin: 0; }
.vd-hdr-utils .elementor-button {
  font-family: var(--vd-hdr-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: none !important;
  border: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, .9) !important;
  padding: 5px 9px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.vd-hdr-utils .elementor-button:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  text-decoration: none;
  transform: none;
}
/* The filled pill for the *current* page. The Elementor template bakes
   `.vd-hdr-util--active` onto Home, so keying off that class left the pill on
   Home wherever you navigated. The body class WordPress prints is what
   actually changes per page (measured live: `/` = `home page-id-12`,
   `/blog/` = `blog`, a post = `single-post`, a blog archive = `category`/`tag`,
   and each Elementor page prints its own `page-id-N`).

   Every link needs a pairing rule here, not just Home and Blog — these are
   plain Elementor Button widgets, not menu items, so WordPress adds no
   "current" class of its own and nothing styles About / FAQ / Contact by
   itself. Page IDs measured from the database: 12 Home, 209 About,
   210 FAQ, 211 Contact. */
body.page-id-12 .vd-hdr-util--home .elementor-button,
body:is(.blog, .single-post, .category, .tag) .vd-hdr-util--blog .elementor-button,
body.page-id-209 .vd-hdr-util--about .elementor-button,
body.page-id-210 .vd-hdr-util--faq .elementor-button,
body.page-id-211 .vd-hdr-util--contact .elementor-button {
  /* Selected chip per the user's reference crop: a solid violet stadium pill
     with bold white text, clearly larger than the plain-text siblings. The
     first attempt (dark gradient, 6px-ish widget radius) read as a lump —
     "not looks beautiful"; the fully-round radius and the brighter violet are
     what make the reference look clean. */
  background: linear-gradient(180deg, #8B5CF6, #7C3AED) !important;
  box-shadow: 0 4px 14px rgba(109, 40, 217, .38);
  border-radius: 999px;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
}
/* On phones the sibling pills are only 4px/6px on 11px type (see the 600px
   block), so this 9px/20px chip stood 13px taller than its neighbours and read
   as a heavy slab. Slimmer padding and a softer shadow bring it back to the
   same optical weight as the row while still clearly reading as selected. */
@media (max-width: 600px) {
  body.page-id-12 .vd-hdr-util--home .elementor-button,
  body:is(.blog, .single-post, .category, .tag) .vd-hdr-util--blog .elementor-button,
  body.page-id-209 .vd-hdr-util--about .elementor-button,
  body.page-id-210 .vd-hdr-util--faq .elementor-button,
  body.page-id-211 .vd-hdr-util--contact .elementor-button {
    padding: 5px 12px !important;
    box-shadow: 0 2px 8px rgba(109, 40, 217, .32);
  }
}
body.page-id-12 .vd-hdr-util--home .elementor-button:hover,
body:is(.blog, .single-post, .category, .tag) .vd-hdr-util--blog .elementor-button:hover,
body.page-id-209 .vd-hdr-util--about .elementor-button:hover,
body.page-id-210 .vd-hdr-util--faq .elementor-button:hover,
body.page-id-211 .vd-hdr-util--contact .elementor-button:hover {
  background: linear-gradient(180deg, #9D70FF, #8B5CF6) !important;
}

/* The account label sits after a hairline divider. The widget must be flex so
   the divider pseudo-element and the button share a row. */
.vd-hdr-util--account-text { display: flex; align-items: center; }
.vd-hdr-util--account-text .elementor-button { padding-left: 16px; }
.vd-hdr-util--account-text::before {
  content: "";
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .3);
  margin-right: 6px;
  flex: 0 0 auto;
}
.vd-hdr-util-icon { display: flex; align-items: center; }
.vd-hdr-util-icon .elementor-icon {
  color: #fff;
  font-size: 14px;
  transition: transform .18s ease, opacity .18s ease;
}
.vd-hdr-util-icon:hover .elementor-icon { transform: translateY(-2px); opacity: .85; }
.vd-hdr-util-icon--user { margin-left: 2px; margin-right: -2px; }

/* --- top-bar cart badge --- */
.vd-hdr-cart--top .hfe-subtotal,
.vd-hdr-cart--top .hfe-menu-cart__title { display: none !important; }
.vd-hdr-cart--top .elementor-button-icon { color: #fff; font-size: 15px; }

/* ============================================================ ROW 2 ===== */
.vd-hdr-main .elementor-container {
  align-items: center;
  min-height: 92px;
}
/* Elementor sizes these three columns by percentage (22 / 46 / 32) from
   post-16.css, so the 78px logo sat alone inside a 290px column and the row
   read as bunched against the left edge. Take the logo and icon groups out of
   the percentage grid and let the search column absorb the leftover width, so
   the three groups spread evenly across the shell. `!important` is needed
   because the generated rule carries three class-levels.
   Scoped to desktop: the `max-width: 1024px` block further down stacks these
   same columns, and an unscoped override here would out-specify it. */
@media (min-width: 1025px) {
  .vd-hdr-main .elementor-container {
    gap: 26px;
    justify-content: space-between;
  }
  .vd-hdr-main .vd-hdr-logo-col,
  .vd-hdr-main .vd-hdr-icons {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .vd-hdr-main .vd-hdr-search {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
  }
}
/* Smoke: layered radial gradients over the indigo base — no image upload, and
   it stays crisp at any size. */
.vd-hdr-main {
  background:
    radial-gradient(46% 130% at 3% 42%, rgba(56, 189, 248, .85) 0%, rgba(56, 189, 248, 0) 58%),
    radial-gradient(40% 120% at 99% 30%, rgba(217, 70, 239, .8) 0%, rgba(217, 70, 239, 0) 56%),
    radial-gradient(34% 110% at 88% 88%, rgba(168, 85, 247, .7) 0%, rgba(168, 85, 247, 0) 60%),
    radial-gradient(30% 100% at 62% 12%, rgba(129, 140, 248, .55) 0%, rgba(129, 140, 248, 0) 62%),
    linear-gradient(100deg, #3730A3 0%, #4F46E5 38%, #6D28D9 72%, #7E22CE 100%) !important;
}

/* --- logo: the artwork already carries its own gold ring, so no CSS ring —
       an added border/padding here read as a second, floating circle --- */
.vd-hdr-logo { padding: 2px; }
.vd-hdr-logo .elementor-widget-container { line-height: 0; }
.vd-hdr-logo img {
  max-height: 78px;
  width: 78px;
  object-fit: contain;
  border: 0 !important;
  background: none;
  box-shadow: none;
  transition: transform .2s ease;
}
.vd-hdr-logo a:hover img { transform: translateY(-2px); }

/* --- pill search (HFE native Search widget, layout "Input Box With Button") ---
   Elementor's per-post CSS for the widget is more specific than anything scoped
   to .vd-hdr-search, so every property it also sets needs !important here. */
.vd-hdr-search { padding: 6px 0; }
.vd-hdr-search .hfe-search-button-wrapper { width: 100%; }
.vd-hdr-search .hfe-search-form__container {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 5px 6px 5px 22px !important;
  box-shadow: 0 8px 26px rgba(11, 13, 18, .22);
  transition: box-shadow .18s ease;
}
/* One magnifier only: the submit button's glyph. The clear "x" stays hidden
   until the field has text (HFE's own JS), then rides left of the button. */
.vd-hdr-search .hfe-search-form__container:focus-within {
  box-shadow: 0 8px 26px rgba(11, 13, 18, .22), 0 0 0 3px rgba(139, 92, 246, .28);
}
.vd-hdr-search .hfe-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: none !important;
  padding: 10px 12px 10px 0 !important;
  font-family: var(--vd-hdr-font);
  font-size: 14.5px;
  color: var(--vd-hdr-ink);
  outline: none;
  box-shadow: none !important;
  appearance: none;
  cursor: text;
}
.vd-hdr-search .hfe-search-form__input::placeholder { color: #9AA0AE; letter-spacing: .01em; }
.vd-hdr-search .hfe-search-form__container button#clear-with-button {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 8px;
  background: none;
  color: #9AA0AE;
  line-height: 1;
}
.vd-hdr-search .hfe-search-form__container button#clear-with-button i:before { font-size: 14px; }
.vd-hdr-search .hfe-search-submit {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  /* Astra's generic `button` rule contributes 12px 24px padding, which floors the
     box at 48px wide no matter what width is set — a circle needs padding: 0. */
  padding: 0 !important;
  width: 40px;
  min-width: 0 !important;
  height: 40px;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #8B5CF6, #6D28D9) !important;
  color: #fff !important;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(109, 40, 217, .34);
  transition: filter .18s ease, transform .18s ease;
}
.vd-hdr-search .hfe-search-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vd-hdr-search .hfe-search-submit i:before { font-size: 15px; line-height: 1; }

/* --- live search suggestions (vaporsdubai-header-helpers vd_search_suggest_js).
       The panel is appended inside form.hfe-search-button-wrapper, so it anchors
       to the pill; everything is scoped to .vd-hdr-search to touch nothing else. --- */
.vd-hdr-search .hfe-search-button-wrapper { position: relative; }
.vd-hdr-search .vd-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  background: #fff;
  border-radius: 16px;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(11, 13, 18, .28);
}
.vd-hdr-search .vd-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--vd-hdr-ink);
}
.vd-hdr-search .vd-suggest__item:hover,
.vd-hdr-search .vd-suggest__item.is-active { background: rgba(139, 92, 246, .10); }
.vd-hdr-search .vd-suggest__thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #F1F2F6;
  display: block;
}
.vd-hdr-search .vd-suggest__box { display: flex; flex-direction: column; min-width: 0; }
.vd-hdr-search .vd-suggest__title {
  font-family: var(--vd-hdr-font);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-hdr-search .vd-suggest__price { font-size: 12px; font-weight: 700; color: #6D28D9; }

/* --- icon cluster: flex lives on the widget-wrap, widgets must not stretch
       or they blow the column apart. --- */
.vd-hdr-icons .elementor-widget-wrap {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.vd-hdr-icons .elementor-element { flex: 0 0 auto; width: auto; }
.vd-hdr-icons .elementor-widget-social-icons { margin-right: 3px; }

/* Each network keeps its own brand gradient, as in the reference.
   Elementor derives the class from the *icon* name (`elementor-social-icon-facebook-f`,
   `-envelope`), not the network slug the old `--facebook` / `--email` selectors
   assumed, so those never matched and the icons rendered as blank white
   circles. Match on a substring instead. */
.vd-hdr-social .elementor-social-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(11, 13, 18, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.vd-hdr-social .elementor-social-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 13, 18, .3); }
.vd-hdr-social .elementor-social-icon i,
.vd-hdr-social .elementor-social-icon svg { width: 1em; height: 1em; }
.vd-hdr-social .elementor-social-icon svg { fill: currentColor; }
.vd-hdr-social [class*="elementor-social-icon-facebook"] { background: linear-gradient(180deg, #3B82F6, #1D4ED8) !important; }
.vd-hdr-social [class*="elementor-social-icon-instagram"] {
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%) !important;
}
.vd-hdr-social [class*="elementor-social-icon-twitter"] { background: linear-gradient(180deg, #38BDF8, #0EA5E9) !important; }
.vd-hdr-social [class*="elementor-social-icon-envelope"],
.vd-hdr-social [class*="elementor-social-icon-email"] { background: linear-gradient(180deg, #60A5FA, #2563EB) !important; }

/* --- round action buttons: wishlist, account, cart --- */
.vd-hdr-round .elementor-button,
.vd-hdr-cart--main .elementor-button {
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border: 0;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(11, 13, 18, .22);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vd-hdr-round .elementor-button:hover,
.vd-hdr-cart--main .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 13, 18, .3); }
.vd-hdr-round .elementor-button i,
.vd-hdr-round .elementor-button svg { width: 15px; height: 15px; display: block; }
.vd-hdr-round--heart .elementor-button { background: linear-gradient(180deg, #FB7185, #E11D48) !important; }
.vd-hdr-round--user  .elementor-button { background: linear-gradient(180deg, #60A5FA, #2563EB) !important; }
.vd-hdr-cart--main .elementor-button { background: linear-gradient(180deg, #A78BFA, #7C3AED) !important; }

/* --- cart count badge --- */
.vd-hdr-cart .hfe-subtotal,
.vd-hdr-cart .hfe-menu-cart__title { display: none !important; }
.vd-hdr-cart .elementor-button-icon {
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}
/* Elementor paints the count on the icon's own ::before as a fixed 16px circle
   anchored at `left: 7px`, i.e. centred *under* the bag glyph, so the digit was
   half-covered and read as a smudge. Lift it clear of the icon, let it grow
   around two-digit counts, and ring it so it separates from either bar. */
.vd-hdr-cart .elementor-button-icon::before {
  content: attr(data-counter) !important;
  position: absolute !important;
  top: -12px !important;
  right: -14px !important;
  left: auto !important;
  z-index: 3;
  width: auto !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px;
  box-sizing: border-box;
  /* Elementor's own counter rule sets `display: flex` and a 100% radius, which
     left the digit top-heavy and turned a two-digit count into an ellipse. */
  display: grid !important;
  place-items: center;
  text-align: center;
  border-radius: 999px !important;
  background: #EF4444 !important;
  color: #fff !important;
  font-family: var(--vd-hdr-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  border: 1.5px solid rgba(11, 13, 18, .5);
  box-shadow: 0 1px 3px rgba(11, 13, 18, .4);
}
/* An empty cart gets no badge at all, and the old 8px dot is retired so a
   non-empty cart can't show two markers at once. */
.vd-hdr-cart .elementor-button-icon::after,
.vd-hdr-cart .elementor-button-icon[data-counter="0"]::before,
.vd-hdr-cart .elementor-button-icon[data-counter=""]::before,
.vd-hdr-cart .elementor-button-icon:not([data-counter])::before { display: none !important; }

/* ============================================================ ROW 3 ===== */
.vd-hdr-nav .elementor-container {
  align-items: center;
  min-height: 56px;
}
.vd-hdr-nav .elementor-column { min-height: 0; }
.vd-hdr-nav .elementor-widget-wrap { min-height: 0; }
/* A flex item's default `min-width:auto` lets a nowrap menu push the column —
   and therefore the whole row — wider than the bar. Clamping the chain to 0
   keeps the menu inside the frame so it has to shrink or wrap instead of
   escaping sideways. */
.vd-hdr-nav .vd-hdr-nav-col,
.vd-hdr-nav .elementor-widget-navigation-menu,
.vd-hdr-nav .hfe-nav-menu-layout,
.vd-hdr-nav ul.hfe-nav-menu { min-width: 0; max-width: 100%; }

/* NOTE: HFE wraps parent links in a `.hfe-has-submenu-container` div, so the
   link is NOT a direct child of <li>. Match it either way.
   Measured footprint of the nine items at the base values below: 1463px — far
   more than the 1308px the shell offers, which is why the row ran past the
   right edge and dropped ACCESSORIES / DELIVERY INFO out of frame. The
   `min-width: 1025px` block further down trims it to 1267px; these base values
   are the small-screen / fallback ones. */
.vd-hdr-nav ul.hfe-nav-menu {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 12px 12px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vd-hdr-nav ul.hfe-nav-menu li {
  position: relative;
  width: auto !important;
  flex: 0 0 auto;
}

.vd-hdr-nav ul.hfe-nav-menu > li > a.hfe-menu-item,
.vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item,
.vd-hdr-nav ul.hfe-nav-menu > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  font-family: var(--vd-hdr-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff !important;
  padding: 12px 0;
  text-decoration: none;
  line-height: 1.2;
}

/* --- round icon badge in front of every label --- */
.vd-hdr-nav ul.hfe-nav-menu > li > a.hfe-menu-item::before,
.vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item::before,
.vd-hdr-nav ul.hfe-nav-menu > li > a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff;
  transition: background .18s ease, color .18s ease;
  /* HFE claims the menu link's ::before for its own hover pointer:
     `.elementor-widget-navigation-menu .hfe-nav-menu-layout:not(.hfe-pointer__framed)
     .menu-item.parent a.hfe-menu-item::before` paints it accent-green, and a
     sibling rule positions it absolutely and sets `opacity:0` unless hovered.
     Those selectors out-specify ours, so every one of those three properties
     needs `!important` — otherwise the badge disappears into the green. */
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
}
/* HFE's ::after is the other half of that pointer; hide it so hovering does
   not drop a green bar across the row. */
.vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item::after { display: none !important; }
.vd-hdr-nav ul.hfe-nav-menu > li:hover > a.hfe-menu-item::before,
.vd-hdr-nav ul.hfe-nav-menu > li:hover a.hfe-menu-item::before {
  background: #fff !important;
  color: #1E3A8A;
}
/* Only badge items get a glyph — items without a marker class keep the badge
   hidden so the menu never shows an empty circle. */
.vd-hdr-nav ul.hfe-nav-menu > li:not([class*="vd-nav-"]) > a.hfe-menu-item::before,
.vd-hdr-nav ul.hfe-nav-menu > li:not([class*="vd-nav-"]) > a::before { display: none; }

.vd-nav-vape-kits     a.hfe-menu-item::before { content: "\f72f"; }
.vd-nav-e-juice       a.hfe-menu-item::before { content: "\f043"; }
.vd-nav-pod-system    a.hfe-menu-item::before { content: "\f3cd"; }
.vd-nav-disposable    a.hfe-menu-item::before { content: "\f06c"; }
.vd-nav-saltnic-juice a.hfe-menu-item::before { content: "\f0c3"; }
.vd-nav-myle          a.hfe-menu-item::before { content: "\f02c"; }
.vd-nav-juul          a.hfe-menu-item::before { content: "\f484"; }
.vd-nav-accessories   a.hfe-menu-item::before { content: "\f013"; }
.vd-nav-delivery-info a.hfe-menu-item::before { content: "\f0d1"; }

/* SHOP is a page menu item and carries no vd-nav-* class, so the guard above
   leaves it label-only. Keyed on its menu-item id so no other item can pick it
   up. `display` has to be re-declared, not just `content`: the guard's
   `display: none` out-specifies the base badge rule, and a pseudo-element with
   content but display:none still shows nothing. */
.vd-hdr-nav ul.hfe-nav-menu > li#menu-item-218 > a.hfe-menu-item::before {
  content: "\f54e";
  display: inline-grid;
}

.vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item:hover,
.vd-hdr-nav ul.hfe-nav-menu > li > a:hover,
.vd-hdr-nav ul.hfe-nav-menu > li.current-menu-item > a,
.vd-hdr-nav ul.hfe-nav-menu > li.current-menu-item a.hfe-menu-item { color: var(--vd-hdr-gold) !important; }

/* --- caret on parents that have sub-categories ---
   HFE already renders `<span class="hfe-menu-toggle sub-arrow"><i class="fa"></i></span>
   inside every parent link, so reuse that span instead of adding an ::after — the
   link's ::before is the icon badge and its ::after is HFE's own hover pointer.
   The <i> is empty markup, so the glyph is ours. */
.vd-hdr-nav ul.hfe-nav-menu .hfe-menu-toggle {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(8px, .62vw, 9px);
  height: 10px;
  margin-left: 3px;
  font-size: clamp(8px, .62vw, 9px);
  line-height: 1;
  color: inherit;
  opacity: .72;
  transition: transform .18s ease, opacity .18s ease;
}
.vd-hdr-nav ul.hfe-nav-menu .hfe-menu-toggle i {
  display: block;
  font-style: normal;
  line-height: 1;
}
.vd-hdr-nav ul.hfe-nav-menu .hfe-menu-toggle i::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  display: block;
  line-height: 1;
}
.vd-hdr-nav ul.hfe-nav-menu > li:hover .hfe-menu-toggle { opacity: 1; transform: rotate(180deg); }

/* The hamburger must never take over — the menu stays inline. */
.vd-hdr-nav .hfe-nav-menu__toggle {
  background: none;
  border: 0;
  display: none !important;
  visibility: hidden !important;
}
.vd-hdr-nav .hfe-nav-menu__layout-horizontal,
.vd-hdr-nav .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* --- sub-category dropdown --- */
.vd-hdr-nav ul.hfe-nav-menu ul.sub-menu,
.vd-hdr-nav ul.hfe-nav-menu .sub-menu,
.vd-hdr-nav ul.hfe-nav-menu .hfe-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  min-width: 232px;
  width: max-content;
  max-width: 300px;
  background: #fff;
  border: 1px solid rgba(11, 13, 18, .07);
  border-radius: 14px;
  box-shadow: 0 22px 46px -14px rgba(11, 13, 18, .38), 0 3px 10px rgba(11, 13, 18, .10);
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  display: block;
}
/* little notch that ties the panel back to its parent label */
.vd-hdr-nav ul.hfe-nav-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 26px;
  width: 9px;
  height: 9px;
  background: #fff;
  border-left: 1px solid rgba(11, 13, 18, .07);
  border-top: 1px solid rgba(11, 13, 18, .07);
  transform: rotate(45deg);
}
.vd-hdr-nav ul.hfe-nav-menu li:hover > ul.sub-menu,
.vd-hdr-nav ul.hfe-nav-menu li:hover > .hfe-submenu,
.vd-hdr-nav ul.hfe-nav-menu li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vd-hdr-nav ul.hfe-nav-menu .sub-menu > li { margin: 0; list-style: none; }
.vd-hdr-nav ul.hfe-nav-menu .sub-menu a,
.vd-hdr-nav ul.hfe-nav-menu .sub-menu .hfe-menu-item {
  display: flex !important;
  align-items: center;
  /* HFE's `justify-content: space-between` on nav anchors flings the label to
     the panel's right edge here — the row's only flex items are the chevron
     ::before and the label. flex-start keeps the label against the chevron. */
  justify-content: flex-start;
  gap: 9px;
  width: auto !important;
  font-family: var(--vd-hdr-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none;
  letter-spacing: .005em;
  line-height: 1.25;
  color: #262B36 !important;
  padding: 9px 12px !important;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}
/* The top-row badge rule reaches these links too (it matches `> li a`), so the
   marker is restated here from scratch rather than merely re-enabled. */
.vd-hdr-nav ul.hfe-nav-menu .sub-menu > li > a::before {
  content: "\f105";
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 auto;
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: #A3AAB8 !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  transition: color .16s ease, transform .16s ease;
}
.vd-hdr-nav ul.hfe-nav-menu .sub-menu a:hover,
.vd-hdr-nav ul.hfe-nav-menu .sub-menu .hfe-menu-item:hover,
.vd-hdr-nav ul.hfe-nav-menu .sub-menu a:focus-visible {
  background: #F4F0FF;
  color: #6D28D9 !important;
  text-decoration: none;
}
.vd-hdr-nav ul.hfe-nav-menu .sub-menu > li:hover > a::before,
.vd-hdr-nav ul.hfe-nav-menu .sub-menu a:hover::before {
  color: #7C3AED !important;
  transform: translateX(2px);
}
.vd-hdr-nav ul.hfe-nav-menu .sub-menu > li + li > a { margin-top: 1px; }

/* ============================================================ RESPONSIVE == */
/* Measured on the live bar, the row's cost is
     65.65 x label-px  +  9 x side-padding  +  9 x (badge + badge-gap)  +  8 x item-gap
   which at the design values (11.5px type, HFE's own 15px side padding, 24px
   badges) is 1393px against a measured 1413px — i.e. the badges and HFE's
   padding, not the labels, are what pushed it past the frame. So:
     * 1320px and up — badges shown. Everything is a vw clamp and the side
       padding is reclaimed from HFE, costing 1211px of the 1268px inner shell.
     * 860–1319px — badges hidden. They are decoration; the labels are the
       menu. Cost is ~916px of the ~975px inner shell at 1022px, so this is ONE
       ROW at every laptop width instead of two lines or a sideways scroll.
   HFE's per-parent caret is reused as the dropdown arrow, so the row's gap and
   side padding are trimmed ~1px to pay for its ~9px on each of 6 parents. */
@media (min-width: 1320px) {
  .vd-hdr-nav nav.hfe-nav-menu__layout-horizontal { justify-content: center !important; }
  .vd-hdr-nav ul.hfe-nav-menu {
    gap: clamp(6px, .73vw, 8px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item,
  .vd-hdr-nav ul.hfe-nav-menu > li > a {
    gap: clamp(5px, .45vw, 6px) !important;
    padding-left: clamp(5px, .7vw, 7px) !important;
    padding-right: clamp(5px, .7vw, 7px) !important;
    font-size: clamp(10px, .84vw, 11.5px) !important;
    letter-spacing: .03em;
  }
  /* the label/caret pair is tighter than the badge/label pair the gap serves */
  .vd-hdr-nav ul.hfe-nav-menu .hfe-menu-toggle { margin-left: -3px; }
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item::before,
  .vd-hdr-nav ul.hfe-nav-menu > li > a::before {
    width: clamp(20px, 1.8vw, 25px);
    height: clamp(20px, 1.8vw, 25px);
    font-size: clamp(10px, .9vw, 12px);
  }
}

@media (min-width: 860px) and (max-width: 1319.98px) {
  /* HFE's <nav> is a flex row and leaves the shrink-to-fit <ul> at its left
     edge, so the centred row sat flush against the gutter. Auto margins centre
     the box itself inside the shell. */
  .vd-hdr-nav nav.hfe-nav-menu__layout-horizontal { justify-content: center !important; }
  .vd-hdr-nav ul.hfe-nav-menu {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(4px, .55vw, 8px) !important;
  }
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item,
  .vd-hdr-nav ul.hfe-nav-menu > li > a {
    /* `gap: 0` here ran the label straight into the badge's circle — measured
       0px between the badge's right edge and the first glyph at every width in
       this band, against 6px in the 1320px+ band above. The band pays for its
       density in the BADGE (they shrink by vw) and in the side padding, not in
       the space inside the label pair. 6px here restores the separation. */
    gap: 6px !important;
    /* Reclaimed here to pay for the restored gap + chevron room: 12px of
       side padding x 8 items was more than this band needs once the badges are
       down to 18-23px. Measured result at 861px: 852px of items inside an 829px
       shell before this, 838px after — fits with room to spare. */
    padding-left: clamp(2px, .32vw, 5px) !important;
    padding-right: clamp(2px, .32vw, 5px) !important;
    font-size: clamp(10px, 1.05vw, 12px) !important;
    letter-spacing: .015em;
  }
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item::before,
  .vd-hdr-nav ul.hfe-nav-menu > li > a::before {
    width: clamp(20px, 1.7vw, 24px);
    height: clamp(20px, 1.7vw, 24px);
    font-size: clamp(9px, .82vw, 11px);
  }
  /* The chevron had 12px of clearance above 1320px but only 6px here (and
     `margin-left: -2px` pulled it tighter still). Give it the same room as
     the 1320px band so the label is not crowded on both sides. */
  .vd-hdr-nav ul.hfe-nav-menu .hfe-menu-toggle { margin-left: 0; }

  /* Restoring the 6px label gap costs ~54px across the six parents, and the
     chevron fix another ~12px, which pushed the row to 914px inside an 868px
     shell at 900px wide. Pay for it in the badge, which is decoration: 1.7vw is
     enough on its own at the narrow end that the gap no longer has to be. The
     floor drops 20 -> 18px and the vw factor 1.7 -> 1.5, recovering ~26px. */
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item::before,
  .vd-hdr-nav ul.hfe-nav-menu > li > a::before {
    width: clamp(18px, 1.5vw, 23px);
    height: clamp(18px, 1.5vw, 23px);
  }
}

/* ==========================================================================
   MOBILE ≤859.98px — REBUILT 2026-10-10
   --------------------------------------------------------------------------
   RECOVERY NOTICE: the original block at this point in header.css was
   destroyed by a bad edit (a brace-search that ran past this media block and
   consumed everything below it, taking the file from 1,326 lines to 854).
   These rules were reconstructed from the surviving desktop rules and the
   widget classes in the header Elementor template (post 16):
     .vd-hdr-top      → .vd-hdr-announce-col, .vd-hdr-utils
     .vd-hdr-main     → .vd-hdr-logo-col, .vd-hdr-search, .vd-hdr-icons
     .vd-hdr-nav      → .vd-hdr-nav-col, .vd-hdr-nav-menu
   Phones get a three-row header — announcement, then [hamburger · centred logo
   · action icons], then search — plus a category drawer. The drawer is HFE's own
   JavaScript: tapping `.hfe-nav-menu__toggle` adds `.menu-is-active` to the nav
   wrapper, and that class is what opens it.
   `.98px` on every max-width that pairs with a min-width band: a fractional
   viewport (browser zoom, Android DPR scaling) can land between two integers,
   where `max-width: 859px` + `min-width: 860px` matches NEITHER band and the
   nav is left with no sizing at all.
   These are reconstructed values, not the originals. Verify against the live
   header and adjust freely.
   ========================================================================== */
@media (max-width: 859.98px) {
  /* The three bars sit flush with the viewport edge; content keeps its gutter. */
  .vd-hdr-top .elementor-container,
  .vd-hdr-main .elementor-container,
  .vd-hdr-nav > .elementor-container {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 0;
  }

  /* --- bar 1: announcement + utility links --------------------------- */
  /* Hamburger lives in the nav bar; on this row we only need the note and the
     utility pills, so the note takes what it needs and the utils sit tight. */
  .vd-hdr-top .elementor-container { gap: 10px; }
  .vd-hdr-top .vd-hdr-announce-col {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
  }
  .vd-hdr-top .vd-hdr-utils {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .vd-hdr-top .vd-hdr-utils .elementor-widget-wrap { gap: 2px !important; }
  .vd-hdr-announce .elementor-heading-title {
    font-size: 10.5px;
    gap: 7px;
  }
  /* Floor the bar's height. Its own content shrank to ~21px once the utility
     pills went to 11px, which pulled the whole bar to 26px — the delivery note
     then wrapped onto three lines at 7px type and stopped being readable at
     all. 34px keeps one comfortable line without giving back the space the
     pill trim saved. */
  .vd-hdr-top .elementor-container { min-height: 34px; }
  .vd-ico-truck::before { font-size: 12px; width: 15px; }

  /* --- bar 2: hamburger · centred logo · action icons ----------------- */
  /* A three-column grid rather than flex: the hamburger slot, the logo and the
     icon slot. The two OUTER columns are both 1fr, so the middle column is
     centred by construction at every width.

     Flex could not do this. The hamburger is absolutely positioned, so it takes
     no space in the layout, yet it covers the left gutter — leaving the free
     space permanently asymmetric and every auto-margin solution stranded the
     logo 66-103px off centre. Reserving an equal 1fr slot for the hamburger in
     the grid gives the logo a symmetric box to sit in, and the absolutely
     positioned button lands inside that reserved slot.

     The search column is excluded: it is `order: 4` with `flex-basis: 100%` and
     wraps to its own full-width line below this row, and grid placement is
     declared explicitly so it cannot be pulled into the first row. */
  .vd-hdr-main .elementor-container {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
    justify-content: stretch !important;
    position: relative;
  }
  /* the hamburger's reserved slot — empty, but it holds the column open.
     Sized to exactly what the right-hand icon column needs, so the two outer
     columns are equal and the logo lands on the true centre. A 42px slot was
     wider than the icon column on a 390px screen and pushed the logo 27px right
     of centre; `1fr` on both sides plus an explicit width here would not match
     either. Matching the icon column's own width is what makes them equal. */
  .vd-hdr-main .elementor-container::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    width: 132px;          /* the icon cluster's measured width on a phone */
    height: 1px;
    justify-self: start;
  }
  .vd-hdr-main .vd-hdr-logo-col {
    grid-column: 2;
    grid-row: 1;
    flex: none !important;
    width: auto !important;
    order: 2;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vd-hdr-logo img {
    width: 56px !important;
    max-height: 44px !important;
  }
  .vd-hdr-main .vd-hdr-icons {
    grid-column: 3;
    grid-row: 1;
    flex: none !important;
    width: auto !important;
    order: 3;
    justify-self: end;
  }
  .vd-hdr-icons .elementor-widget-wrap { gap: 1px 6px !important; }

  /* --- the search pill gets a full-width line below the logo row ------
     The row above is a 3-column grid, so the search takes its own grid row
     spanning all three columns rather than wrapping as a flex item. `flex` no
     longer applies here — `flex-basis: 100%` would be ignored inside a grid and
     the column would default into row 1, sitting beside the logo. */
  .vd-hdr-main .elementor-container { flex-wrap: nowrap !important; }
  /* The middle section's own mobile padding is 14px top and bottom, set in the
     Elementor layout panel — 28px of the header for nothing on a phone, where
     every pixel of the bar is visible screen estate. Trim to 6px; the rows
     carry their own internal padding. */
  .elementor .elementor-section.vd-hdr-main { padding: 6px 0 !important; }
  .vd-hdr-main .vd-hdr-search {
    display: block;
    order: 4;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* The section carries its own mobile padding (14px top/bottom from the
       Elementor layout panel), so this column adds only a thin top gap to
       separate the pill from the logo row — 10px here was half the row's
       height. Trimmed to 4px, and the bottom pad to 4px, which is what took
       the search row from 64px to 52px. */
    padding: 4px 0 4px !important;
  }
  /* HFE's pill is built for a tall desktop bar; trim it to a phone-height
     field so the header does not gain 50px. */
  .vd-hdr-search .hfe-search-form__container { padding: 3px 5px 3px 16px !important; }
  .vd-hdr-search .hfe-search-form__input { font-size: 13px !important; }
  .vd-hdr-search .hfe-search-submit { width: 30px !important; height: 30px !important; }
  /* The suggestion panel hangs off the pill's bottom edge; at the foot of the
     header that runs it off-screen, so anchor it to the pill's top instead and
     let it open upward over the rest of the page. */
  .vd-hdr-search .vd-suggest { top: auto; bottom: calc(100% + 6px); }


  /* --- hamburger moves up onto the logo row, at the far left ---------- */
  /* HFE renders the toggle inside the NAV section, which sits BELOW the logo
     row in the DOM, so anchoring it to the logo row is not possible by
     descendant selectors — the two are in different sections. Instead the nav
     section is made the positioning context and the button is lifted onto the
     logo row by a negative `top`. The nav bar itself collapses to zero height,
     so the close row reads: [menu] logo ..... icons. */
  .elementor .elementor-section.vd-hdr-main { position: relative; }
  /* Only the nav SECTION is a positioning context; every ancestor between it
     and the toggle is forced static, otherwise HFE's widget wrapper becomes the
     offset parent and the button lands relative to the wrong box. */
  .vd-hdr-nav { position: relative; }
  .vd-hdr-nav > .elementor-container,
  .vd-hdr-nav .elementor-column,
  .vd-hdr-nav .elementor-widget-wrap,
  .vd-hdr-nav .elementor-element,
  /* `:not(ul)` matters: HFE puts `hfe-nav-menu` on BOTH the wrapper <div> and
     the menu <ul>. Without the guard this rule also forces the drawer panel
     itself static, which cancels the `position: absolute` below and leaves the
     panel in normal flow — tucked up under the sticky header, hiding its first
     row behind the header bar. */
  .vd-hdr-nav .hfe-nav-menu:not(ul) { position: static !important; }

  .vd-hdr-nav > .elementor-container {
    padding: 0 !important;
    min-height: 0;
    height: 0;
    overflow: visible;
    display: block !important;
  }
  /* The nav bar holds nothing on a phone except the drawer, and the drawer is
     absolutely positioned out of it (see `.menu-is-active ul.hfe-nav-menu`
     below). Its own 9px section padding therefore renders as a bare strip of
     navy gradient plus a border-top directly under the logo row — a visible
     empty bar. The section still has to stay in the flow (not `display:none`):
     it is the positioning context the hamburger and the drawer hang from, and
     measureLift() in vaporsdubai-header-helpers measures nav.top against the
     logo row to place the button. So keep the box, drop the padding and the
     seam. */
  .elementor .elementor-section.vd-hdr-nav {
    padding: 0 !important;
    border-top: 0 !important;
  }
  .vd-hdr-nav .vd-hdr-nav-col { padding: 0 !important; margin: 0 !important; height: 0; }

  .vd-hdr-nav .hfe-nav-menu__toggle {
    position: absolute;
    left: var(--vd-hdr-pad, 12px);
    /* The nav section begins just below the logo row, so the button is lifted
       by the height of that row. The 56px fallback covers first paint; the real
       value is measured at runtime and published as --vd-hdr-lift by
       vaporsdubai-header-helpers (measureLift), because the row's height is not
       a constant — the logo image, the search pill and the announcement bar all
       change with the viewport and are editable in Elementor. */
    top: calc(-1 * var(--vd-hdr-lift, 56px));
    z-index: 6;
    display: inline-flex !important;
    /* The desktop guard hides the toggle with both `display: none` and
       `visibility: hidden !important`; overriding display alone leaves it
       invisible, so both properties have to be re-declared here. */
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    /* Bare glyph: the bars sit straight on the header gradient. The 42x42 box
       stays so the tap target keeps its size — it just no longer paints a chip. */
    border: 0 !important;
    background: none !important;
    border-radius: 0;
    box-shadow: none !important;
    cursor: pointer;
  }

  /* The social set is dropped from this row (it made the icon cluster ~316px
     wide, which no longer fits beside the logo). The three action buttons —
     wishlist, account, cart — stay.
     The logo column takes NO margin here: it is centred by the equal-width grid
     tracks set in the bar-2 block above, and this rule used to re-apply
     `margin-left: 54px` (there to clear the hamburger back when the row was a
     flexbox) which shoved the logo 27px right of centre on every phone. */
  .vd-hdr-main .vd-hdr-icons .elementor-widget-social-icons { display: none !important; }

  /* The "Menu" label is a screen-reader string; the desktop rule that un-clips
     it does not apply here, so re-clip it and show the bars glyph alone. */
  .vd-hdr-nav .hfe-nav-menu__toggle .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  /* HFE ships an EMPTY <div class="hfe-nav-menu-icon"> — no child element and
     no glyph, so only ::before and ::after are available. That is exactly two
     boxes, and the two states need: three bars when closed, two diagonals when
     open. So each state owns one pseudo-element and they hand over:

       closed — ::before alone, ONE 3px rounded bar whose two box-shadows at
                7px and 14px print the other two bars underneath it. Each copy
                inherits the rounded 3px radius, which is what gives the bars
                their pill-shaped caps. (A repeating-linear-gradient stripe
                cannot do this: a gradient has hard 90° ends, no radius.)
       open   — both pseudo-elements, box-shadow dropped, each rotated to ±45°.

     Geometry: a 22x18 box holds a 22x3 bar at the top plus shadows at +7px and
     +14px, so the three bars span 17px and sit centred with even 7px pitch.
     3px weight and 3px radius in both states, so it reads as one glyph
     changing state rather than two different icons. */
  .vd-hdr-nav .hfe-nav-menu-icon {
    position: relative;
    width: 22px;
    height: 18px;
  }
  .vd-hdr-nav .hfe-nav-menu-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
    transition: transform .22s ease, box-shadow .22s ease;
  }

  /* HFE marks the open state in TWO places on two DIFFERENT elements:
       .hfe-active-menu  -> the toggle button itself
       .menu-is-active   -> the <nav> panel
     The toggle is a SIBLING of the nav, not a descendant, so a
     `.menu-is-active .hfe-nav-menu-icon` descendant selector can never match —
     the bars would stay bars when open. Key the morph off the button's own
     `hfe-active-menu` class, with `:has()` as a belt-and-braces fallback. */
  .vd-hdr-nav .hfe-nav-menu-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    /* Shorter than the 22px bars on purpose: a stroke rotated 45° spans
       width x 1.414, so a full-width bar would throw the X ~31px across and
       well outside the 42px button. 16px x 1.414 = 22.6px, which matches the
       bars' own footprint and keeps the X visually the same size as the
       closed state it replaces. */
    width: 16px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
    background: #fff;
    opacity: 0;
    transition: transform .22s ease, opacity .12s ease;
  }
  /* Open: ::before drops its two shadow copies and narrows to the same 16px as
     ::after, then becomes the "\" stroke; ::after fades in as the "/" one.
     Both must be narrowed — a 22px \ against a 16px / is not an X but two
     strokes of different length, off-centre from each other. */
  .vd-hdr-nav .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::before,
  .vd-hdr-nav:has(.menu-is-active) .hfe-nav-menu-icon::before {
    box-shadow: none;
    top: 50%;
    margin-top: -1.5px;
    left: 3px;
    width: 16px;
    transform: rotate(45deg);
  }
  .vd-hdr-nav .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::after,
  .vd-hdr-nav:has(.menu-is-active) .hfe-nav-menu-icon::after {
    opacity: 1;
    transform: rotate(-45deg);
  }

  /* Closed by default: HFE's markup is visible until `.menu-is-active` lands. */
  .vd-hdr-nav nav.hfe-nav-menu__layout-horizontal .hfe-nav-menu {
    display: none !important;
  }
  .vd-hdr-nav .menu-is-active ul.hfe-nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    /* HFE's desktop row is `justify-content: center` (header.css line 538).
       Inherited into the drawer column, that CENTRES the overflow: with more
       content than the panel is tall, flex pushes the overflow off BOTH ends,
       so the top rows land above the panel's own top edge — behind the header.
       A scrolling list must always start at its first item. */
    justify-content: flex-start !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    /* Height is the room left between the header and the bottom of the screen,
       published by measureDrawerRoom() in vaporsdubai-header-helpers. `70vh`
       was wrong on short screens: the header is ~172px of a 500-600px viewport,
       so 70vh left the panel TALLER than the space under it. It overflowed, and
       the resulting scroll meant the first rows were cut off at the top, under
       the header bar. The fallback keeps the old behaviour for first paint. */
    max-height: var(--vd-drawer-max-h, 70vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Near-black through to the header's own navy, so the open drawer reads as a
       continuation of the bar above it rather than a separate black slab.
       Anchored `to top` so the darkest tone sits directly under the header and
       deepens toward the bottom of the screen. */
    background:
      linear-gradient(
        to bottom,
        #0A173D 0%,
        #0B0D12 34%,
        #05070C 100%
      ) !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -14px 34px rgba(5, 7, 12, .55);
    padding: 6px 0 10px;
  }
  .vd-hdr-nav .menu-is-active ul.hfe-nav-menu > li {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* Drawer rows: badge + label, with the chevron pinned right.
     Row height = the badge (30px) plus this padding, twice. 11px gave a 60px
     row with a wide empty band between rows; 7px -> 44px; 4px -> 38px, which
     is the densest that still clears a 30px badge without the label crowding
     it. Keep in mind the whole <li> is the tap target, not just the glyph.
     !important is required: Elementor's generated per-post stylesheet ships
     `.elementor-16 .elementor-element-0000018 .menu-item a.hfe-menu-item`
     with `padding: 15px`, which out-specifies anything scoped to .vd-hdr-nav
     and was silently winning regardless of source order. */
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item,
  .vd-hdr-nav ul.hfe-nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 18px !important;
    font-family: var(--vd-hdr-font, "Sora", sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: none;
  }
  .vd-hdr-nav ul.hfe-nav-menu > li a.hfe-menu-item::before,
  .vd-hdr-nav ul.hfe-nav-menu > li > a::before {
    width: 30px;
    height: 30px;
    font-size: 13px;
    flex: 0 0 auto;
  }
  .vd-hdr-nav ul.hfe-nav-menu .hfe-menu-toggle {
    margin-left: auto;
    margin-right: 0;
  }

  /* Submenus: collapsed under their parent until it is tapped.
     HFE's own JS opens one by adding `menu-active` to the <li> and animating the
     submenu's visibility/opacity/height (frontend.js ~line 620), so the CSS has
     to honour that contract instead of forcing the submenu open:

       .sub-menu                     — collapsed, zero height, no flow impact
       li.menu-active > .sub-menu    — open, auto height, indented and legible

     The previous rule here set `display: block !important` unconditionally,
     which left ALL SIX submenus permanently expanded: 894px of rows inside a
     372px panel, so the list scrolled from the wrong end and the first
     categories were unreachable. `position: static` must be kept once open so
     the submenu sits in flow under its parent — if it stays absolute it leaves
     the flow and the flex column collapses the rows above it. */
  .vd-hdr-nav ul.hfe-nav-menu .sub-menu,
  .vd-hdr-nav .hfe-has-submenu-container + ul {
    display: block;
    position: static !important;
    width: 100%;
    max-height: 0 !important;
    height: 0 !important;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    /* The desktop dropdown rule above leaves an 8px pad and a 1px border on
       .sub-menu, and `box-sizing: border-box` does NOT fold those into
       max-height: 0 — a clamped box keeps its padding and border, leaving a
       ~17px empty strip under EVERY collapsed category. Zero them with the
       rest so the collapsed submenu occupies nothing at all. */
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    background: none;
  }
  /* HFE's open/close marker, in this build's actual markup (verified in the DOM):
       .hfe-has-submenu-container.menu-active   -> the div wrapping the link
       ul.sub-menu.sub-menu-open               -> the submenu itself
     Not `li.menu-active`: HFE's `menu-walker` nests the link inside that div, so
     `$this.parent().parent()` in frontend.js resolves to the DIV, not the <li>.
     The collapsed rule above holds every submenu at max-height 0, so it has to
     be released on whichever class HFE really sets — read both, plus the <li>
     class as a fallback. */
  .vd-hdr-nav ul.hfe-nav-menu .hfe-has-submenu-container.menu-active + ul.sub-menu,
  .vd-hdr-nav ul.hfe-nav-menu ul.sub-menu.sub-menu-open,
  .vd-hdr-nav ul.hfe-nav-menu li.menu-active > .sub-menu {
    max-height: none !important;
    height: auto !important;
    overflow: visible;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 8px !important;
  }
  .vd-hdr-nav ul.hfe-nav-menu .sub-menu > li {
    flex: 0 0 auto;
  }
  .vd-hdr-nav ul.hfe-nav-menu .sub-menu > li > a {
    display: block;
    padding: 9px 18px 9px 60px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .78);
  }
  .vd-hdr-nav ul.hfe-nav-menu .sub-menu > li > a::before { content: none; }
  .vd-hdr-nav ul.hfe-nav-menu .sub-menu::before { content: none; }
}

/* --- narrow-utility tuning -------------------------------------------- */
@media (max-width: 767px) {
  .vd-hdr-announce .elementor-heading-title { font-size: 10.5px; letter-spacing: .03em; gap: 7px; }
  .vd-hdr-utils .elementor-button { font-size: 12.5px !important; padding: 5px 7px; }
  .vd-hdr-main .elementor-container { min-height: 0; }
}

@media (max-width: 600px) {
  .vd-hdr-announce .elementor-heading-title { font-size: 9.5px; letter-spacing: .03em; }
  /* Logo size is owned by the mobile block's own rule (56x44) so the logo
     sizing asked for on phones is not undone here — this rule used to force
     48x38 and silently won on every phone. */
  /* Utility pills: 11px on a 4px/6px pad, down from 12.5px on 5px/7px. The
     five pills share the top bar's 44px with the delivery note, so they are the
     part that can give ground. Note the 767px block below sets 5px/7px and this
     one must beat it on both size AND side padding — the earlier attempt used
     9px sides and made the row WIDER (258px), because these pills are sized by
     their text plus padding. `!important` is needed throughout: Elementor's
     per-post stylesheet sets its own padding with a more specific selector. */
  .vd-hdr-utils .elementor-button {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
  .vd-hdr-utils .elementor-button .elementor-button-text { font-size: 11px !important; }
  .vd-hdr-top .vd-hdr-utils .elementor-widget-wrap { gap: 0 !important; }
  .vd-hdr-nav .menu-is-active ul.hfe-nav-menu { width: min(90vw, 316px); }
}

@media (max-width: 480px) {
  .vd-hdr-nav .hfe-nav-menu__toggle { padding: 0 13px 0 11px; gap: 7px; }
}

/* ≤380: a centred 48px logo leaves room for only two 40px icons beside it, so
   the wishlist chip drops out — its /wishlist/ page does not exist yet. */
@media (max-width: 380px) {
  .vd-hdr-icons .elementor-element:has(a[href*="wishlist"]) { display: none !important; }
}

/* --- tablet (860–1024px keeps the one-row desktop nav, just tighter) ---
   Order matters here. This block is the LAST in the file and its selectors
   match exactly those in the phone blocks above, so at equal specificity it wins
   on source order — it was quietly overriding the 600px pill sizing (11px) back
   to 12.5px on every phone. Scope it to the tablet band only (min-width: 601px)
   so the phone rules below are no longer in competition with it. */
@media (min-width: 601px) and (max-width: 1024.98px) {
  .elementor .elementor-section.vd-hdr-top,
  .elementor .elementor-section.vd-hdr-main,
  .elementor .elementor-section.vd-hdr-nav { margin: 0; }

  .vd-hdr-top .elementor-container { min-height: 44px; }
  .vd-hdr-announce .elementor-heading-title { font-size: 11.5px; }
  .vd-hdr-utils .elementor-widget-wrap { gap: 2px; }
  .vd-hdr-utils .elementor-button { font-size: 12.5px !important; padding: 5px 7px; }

  /* Middle row, tablet band. Measured at 900px: the three columns sat at
     x=16-104 (logo), 104-345 (search), 345-670 (icons) — flush against each
     other with NO gap, because the `justify-content: space-between` + `gap`
     that separates them is scoped to `min-width: 1025px` only. The social icon
     set (175px of it inside the 325px icon column) is what squeezed the search
     pill down to 241px, so the placeholder read "What are you looking for…"
     with the magnifier crowding it.

     Two fixes: restore a real gap between the columns, and drop the social set
     below 1025px — it is decorative, the row is already carrying logo, search
     and three action buttons, and the same set is hidden on phones for exactly
     this reason. That hands ~175px back to the search pill. */
  .vd-hdr-main .elementor-container {
    gap: 14px;
    justify-content: center !important;
  }
  .vd-hdr-main .vd-hdr-search { flex: 1 1 auto !important; min-width: 0; }
  .vd-hdr-main .vd-hdr-icons .elementor-widget-social-icons { display: none !important; }

  /* Top bar, tablet band. Same problem as the middle row: `space-between` and
     the 22px gap that push the delivery note and the utility links apart are
     scoped to `min-width: 1025px` only, so below it the two columns measured
     flush — the note's right edge at 282px and Home's left edge at 282px, i.e.
     zero gap. The pills' own 2px gap is likewise too tight to read as
     separate items. */
  .vd-hdr-top .elementor-container {
    gap: 18px;
    justify-content: space-between;
  }
  .vd-hdr-top .vd-hdr-announce-col {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
  }
  .vd-hdr-top .vd-hdr-utils {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .vd-hdr-utils .elementor-widget-wrap { gap: 6px !important; }
  .vd-hdr-utils .elementor-button { padding: 5px 10px !important; }
}