/* =========================================================
   TAQA ELSWEDY — SAFE HEADER
   CSS-only styling. No DOM injection. No innerHTML replacement.
   Built against the native EasyOrders header markup.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --taqa-ui-fg:#11161D;
  --taqa-ui-glass:rgba(255,255,255,.46);
  --taqa-ui-glass-soft:rgba(220,229,232,.14);
  --taqa-ui-border:rgba(17,22,29,.09);
  --taqa-ui-shadow:0 8px 22px rgba(18,28,38,.06);
  --taqa-ui-hover:rgba(192,96,36,.07);
  --taqa-ui-hover-border:rgba(192,96,36,.14);
}

/* Global theme module can override these variables safely. */
body.taqa-theme-dark{
  --taqa-ui-fg:#F4F7F8;
  --taqa-ui-glass:rgba(7,12,20,.34);
  --taqa-ui-glass-soft:rgba(77,113,131,.09);
  --taqa-ui-border:rgba(244,247,248,.09);
  --taqa-ui-shadow:0 10px 24px rgba(0,0,0,.13);
  --taqa-ui-hover:rgba(255,255,255,.055);
  --taqa-ui-hover-border:rgba(255,255,255,.075);
}

/* =========================================================
   NATIVE EASYORDERS HEADER SHELL
========================================================= */

.app_container > div.sticky.top-0.w-full.z-30{
  position:sticky !important;
  top:0 !important;
  z-index:30 !important;
  width:100% !important;

  background:transparent !important;
  background-color:transparent !important;

  border:0 !important;
  box-shadow:none !important;

  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Kill the native white layers only inside the header. */
.app_container > div.sticky.top-0.w-full.z-30,
.app_container > div.sticky.top-0.w-full.z-30 > header.default_header,
.app_container > div.sticky.top-0.w-full.z-30 nav.default_header_container{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

header.default_header{
  color:var(--taqa-ui-fg) !important;
}

nav.default_header_container{
  position:relative !important;
  font-family:"Space Grotesk","Manrope",sans-serif !important;
}

/* =========================================================
   TRUE CENTER LOGO
========================================================= */

nav.default_header_container > div:first-child{
  position:relative !important;
}

nav.default_header_container .default_header_logo{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;

  width:auto !important;
  max-width:none !important;
  z-index:5 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

nav.default_header_container .default_header_logo a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

nav.default_header_container .default_header_logo img{
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.08));
}

/* =========================================================
   SEARCH + CART GLASS PILL
   Uses the EXISTING native <a> and <button>.
========================================================= */

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
  width:max-content !important;
  flex:0 0 auto !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  gap:10px !important;
  padding:4px !important;

  border-radius:15px !important;
  border:1px solid var(--taqa-ui-border) !important;

  background:
    linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)) !important;

  box-shadow:var(--taqa-ui-shadow) !important;

  -webkit-backdrop-filter:blur(15px) saturate(125%) !important;
  backdrop-filter:blur(15px) saturate(125%) !important;
}

/* Native Search */
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid transparent !important;
  border-radius:10px !important;

  color:var(--taqa-ui-fg) !important;
  background:transparent !important;
  opacity:1 !important;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .3s ease !important;
}

/* Native Cart: direct button in the same action row */
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid transparent !important;
  border-radius:10px !important;

  color:var(--taqa-ui-fg) !important;
  background:transparent !important;
  opacity:1 !important;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .3s ease !important;
}

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]:hover,
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button:hover{
  background:var(--taqa-ui-hover) !important;
  border-color:var(--taqa-ui-hover-border) !important;
  opacity:1 !important;
}

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"] svg{
  width:20px !important;
  height:20px !important;
  color:currentColor !important;
}

/* Keep the native cart counter visible and positioned correctly. */
nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button > div.absolute{
  z-index:3 !important;
  color:#C06024 !important;
}

nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button > div.absolute > span{
  color:#C06024 !important;
}

/* =========================================================
   DESKTOP NAV GLASS PILL
========================================================= */

nav.default_header_container > .hidden.lg\:block{
  width:max-content !important;
  margin:4px auto 0 !important;
  padding:5px !important;

  border-radius:16px !important;
  border:1px solid var(--taqa-ui-border) !important;

  background:
    linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)) !important;

  box-shadow:var(--taqa-ui-shadow) !important;

  -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
  backdrop-filter:blur(14px) saturate(125%) !important;
}

nav.default_header_container > .hidden.lg\:block > div{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}

nav.default_header_container > .hidden.lg\:block a{
  min-height:34px !important;
  padding:0 13px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:11px !important;
  border:1px solid transparent !important;

  color:var(--taqa-ui-fg) !important;

  font-family:"Space Grotesk","Manrope",sans-serif !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.018em !important;

  text-decoration:none !important;
  opacity:.86 !important;

  transition:
    color .30s ease,
    background-color .22s ease,
    border-color .22s ease,
    opacity .22s ease !important;
}

nav.default_header_container > .hidden.lg\:block a:hover{
  opacity:1 !important;
  text-decoration:none !important;
  background:var(--taqa-ui-hover) !important;
  border-color:var(--taqa-ui-hover-border) !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:1023px){
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    gap:4px !important;
    padding:3px !important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"],
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  /* Native menu button remains untouched functionally. */
  nav.default_header_container > div:first-child > div:first-child > button{
    position:relative!important;
    color:var(--taqa-ui-fg) !important;
  }
}

/* =========================================================
   MOBILE HEADER — UNIFIED 44PX CONTROL SYSTEM
========================================================= */
@media (max-width:767px){
  nav.default_header_container{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  nav.default_header_container > div:first-child{
    height:48px!important;
    min-height:48px!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    width:84px!important;
    height:44px!important;
    min-width:84px!important;
    min-height:44px!important;
    gap:4px!important;
    padding:3px!important;
    border-radius:14px!important;
    border:1px solid var(--taqa-mobile-control-border,var(--taqa-ui-border))!important;
    background:var(--taqa-mobile-control-bg,linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)))!important;
    box-shadow:var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow))!important;
    -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
    backdrop-filter:blur(18px) saturate(128%)!important;
    isolation:isolate!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"],
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
    color:var(--taqa-header-fg,var(--taqa-ui-fg))!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"] svg{
    width:19px!important;
    height:19px!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button svg{
    width:21px!important;
    height:21px!important;
  }

  nav.default_header_container > div:first-child > div:first-child > button{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--taqa-mobile-control-border,var(--taqa-ui-border))!important;
    border-radius:14px!important;
    color:var(--taqa-header-fg,var(--taqa-ui-fg))!important;
    background:var(--taqa-mobile-control-bg,linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)))!important;
    box-shadow:var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow))!important;
    -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
    backdrop-filter:blur(18px) saturate(128%)!important;
    transition:border-color .22s ease,background .28s ease,box-shadow .28s ease!important;
  }

  nav.default_header_container > div:first-child > div:first-child > button svg{
    width:22px!important;
    height:22px!important;
    transform:none!important;
    opacity:0!important;
  }

  /* Clean, equal hamburger strokes with exact optical centering. */
  nav.default_header_container > div:first-child > div:first-child > button::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }

  nav.default_header_container .default_header_logo{
    width:110px!important;
    height:44px!important;
    max-width:110px!important;
  }

  nav.default_header_container .default_header_logo a,
  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:110px!important;
    height:44px!important;
    max-width:110px!important;
    max-height:44px!important;
    object-fit:contain!important;
  }

  body.taqa-theme-dark nav.default_header_container .default_header_logo img,
  body.taqa-theme-light nav.default_header_container .default_header_logo img{
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.14))!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end::before,
  nav.default_header_container > div:first-child > div:first-child > button::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 34%,transparent 72%,rgba(192,96,36,.055));
    opacity:.72;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    position:relative!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > *,
  nav.default_header_container > div:first-child > div:first-child > button > *{
    position:relative;
    z-index:1;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]:active,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button:active,
  nav.default_header_container > div:first-child > div:first-child > button:active{
    background:var(--taqa-mobile-control-active,rgba(192,96,36,.10))!important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo,
  nav.default_header_container .default_header_logo a,
  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:104px!important;
    max-width:104px!important;
  }
}


/* =========================================================
   MOBILE MENU — MATCH SEARCH/CART GLASS SURFACE
========================================================= */
@media (max-width:767px){
  nav.default_header_container > div:first-child > div:first-child > button{
    background:
      var(--taqa-mobile-control-bg,
        linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft))
      ) !important;

    border:1px solid
      var(--taqa-mobile-control-border,var(--taqa-ui-border)) !important;

    box-shadow:
      var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow)) !important;

    -webkit-backdrop-filter:blur(18px) saturate(128%) !important;
    backdrop-filter:blur(18px) saturate(128%) !important;
  }
}


/* =========================================================
   TAQA HEADER — DUAL LOGO LOCKUP
   Original TAQA logo + ESP logo side by side
========================================================= */

nav.default_header_container .default_header_logo{
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
}

nav.default_header_container .default_header_logo a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:40px !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
}

nav.default_header_container .default_header_logo a::after{
  content:"" !important;
  display:block !important;
  flex:0 0 auto !important;

  width:118px !important;
  height:50px !important;

  background-image:url("https://pub-e9715f44ef4d4ff88751fb3c934ea86e.r2.dev/esplogolightmode.webp") !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;

  pointer-events:none !important;
}

@media (max-width:1023px){
  nav.default_header_container .default_header_logo a{
    gap:24px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:92px !important;
    height:42px !important;
  }
}

@media (max-width:767px){
  nav.default_header_container .default_header_logo{
    width:auto !important;
    max-width:none !important;
    height:44px !important;
  }

  nav.default_header_container .default_header_logo a{
    width:auto !important;
    max-width:none !important;
    height:44px !important;
    gap:14px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:74px !important;
    max-width:74px !important;
    height:36px !important;
    max-height:36px !important;
    object-fit:contain !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:74px !important;
    height:34px !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a{
    gap:5px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:66px !important;
    max-width:66px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:66px !important;
    height:32px !important;
  }
}


/* =========================================================
   TAQA HEADER — DUAL LOGO MICRO ALIGNMENT V2
   Desktop: shift full lockup 2px right
   Phone: slightly smaller logos + preserved center gap
========================================================= */

nav.default_header_container .default_header_logo{
  transform:translate(-50%,-50%) !important;
}

@media (max-width:767px){
  nav.default_header_container .default_header_logo a{
    gap:12px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:66px !important;
    max-width:66px !important;
    height:32px !important;
    max-height:32px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:66px !important;
    height:31px !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a{
    gap:10px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:60px !important;
    max-width:60px !important;
    height:30px !important;
    max-height:30px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:60px !important;
    height:29px !important;
  }
}


/* =========================================================
   TAQA HEADER — DESKTOP LOGO LOCKUP RIGHT SHIFT
   Desktop only: move BOTH logos together to the right.
========================================================= */
@media (min-width:1024px){
  nav.default_header_container .default_header_logo{
    left:50% !important;
    transform:translate(calc(-50% + 12px),-50%) !important;
  }
}


/* =========================================================
   TAQA HEADER — MOBILE DUAL LOGO GAP WIDER
========================================================= */
@media (max-width:767px){
  nav.default_header_container .default_header_logo a{
    gap:18px !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a{
    gap:14px !important;
  }
}


/* =========================================================
   TAQA HEADER — MOBILE OPTICAL CENTER AROUND CHAIN
   Keep the pair centered as a group, but move each visible
   logo outward so the chain runs through the visual midpoint.
========================================================= */
@media (max-width:767px){

  /* Keep the whole lockup mathematically centered */
  nav.default_header_container .default_header_logo{
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  /* Original TAQA logo: nudge to the RIGHT */
  nav.default_header_container .default_header_logo a > div{
    transform:translateX(5px) !important;
  }

  /* ESP logo: nudge to the LEFT */
  nav.default_header_container .default_header_logo a::after{
    transform:translateX(-5px) !important;
  }
}

@media (max-width:360px){
  nav.default_header_container .default_header_logo a > div{
    transform:translateX(4px) !important;
  }

  nav.default_header_container .default_header_logo a::after{
    transform:translateX(-4px) !important;
  }
}


/* =========================================================
   TAQA ELSWEDY — MOBILE NAVIGATION V1
   "ENERGY CONTROL PANEL"
   Native EasyOrders / HeadlessUI behavior preserved.
========================================================= */

@media (max-width:1023px){

  /* ---------- OPEN MENU / OVERLAY ---------- */
  #headlessui-portal-root [role="dialog"]{
    direction:rtl !important;
    font-family:"Cairo","Manrope",system-ui,sans-serif !important;
    align-items:stretch !important;
  }

  #headlessui-portal-root [role="dialog"] > div.fixed.inset-0{
    background:
      radial-gradient(circle at 78% 12%,rgba(192,96,36,.13),transparent 30%),
      rgba(2,8,14,.72) !important;

    -webkit-backdrop-filter:blur(14px) saturate(112%) !important;
    backdrop-filter:blur(14px) saturate(112%) !important;
  }

  /* The native drawer itself */
  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    position:relative !important;

    margin:10px 10px 10px auto !important;
    width:min(88vw,360px) !important;
    max-width:min(88vw,360px) !important;
    height:calc(100dvh - 20px) !important;

    padding:0 0 24px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    border:1px solid rgba(244,247,248,.12) !important;
    border-radius:30px 8px 8px 30px !important;

    color:#F4F7F8 !important;

    background:
      radial-gradient(105% 58% at 8% 4%,rgba(192,96,36,.20),transparent 47%),
      radial-gradient(82% 60% at 94% 18%,rgba(77,113,131,.24),transparent 58%),
      linear-gradient(148deg,#17222D 0%,#09121B 52%,#101D28 100%) !important;

    box-shadow:
      -28px 0 76px rgba(0,0,0,.34),
      0 28px 90px rgba(0,0,0,.46),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 1px 0 0 rgba(232,167,111,.09) !important;

    -webkit-backdrop-filter:blur(28px) saturate(124%) !important;
    backdrop-filter:blur(28px) saturate(124%) !important;

    scrollbar-width:none !important;
    isolation:isolate !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::-webkit-scrollbar{
    display:none !important;
  }

  /* Architectural highlight / energy line */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;

    background:
      linear-gradient(126deg,
        rgba(255,255,255,.095) 0%,
        rgba(255,255,255,.024) 19%,
        transparent 19.5%,
        transparent 61%,
        rgba(192,96,36,.055) 82%,
        transparent 100%) !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"ENERGY / NAVIGATION" !important;
    position:absolute !important;
    left:24px !important;
    top:31px !important;
    z-index:3 !important;

    color:rgba(244,247,248,.46) !important;
    font:700 8px/1 "Manrope","DM Sans",sans-serif !important;
    letter-spacing:.20em !important;
    direction:ltr !important;
    pointer-events:none !important;
  }

  /* ---------- TOP / CLOSE ---------- */
  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end{
    position:sticky !important;
    top:0 !important;
    z-index:10 !important;

    min-height:84px !important;
    padding:18px 18px 12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    background:
      linear-gradient(to bottom,rgba(10,18,27,.94),rgba(10,18,27,.72) 72%,transparent) !important;

    -webkit-backdrop-filter:blur(12px) !important;
    backdrop-filter:blur(12px) !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end::after{
    content:"TAQA ELSWEDY" !important;
    position:absolute !important;
    right:22px !important;
    top:25px !important;

    color:#F4F7F8 !important;
    font:700 11px/1 "Manrope","DM Sans",sans-serif !important;
    letter-spacing:.11em !important;
    direction:ltr !important;
    opacity:.84 !important;
    pointer-events:none !important;
  }

  #headlessui-portal-root [role="dialog"] button:has(.sr-only){
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#F4F7F8 !important;

    border:1px solid rgba(244,247,248,.14) !important;
    border-radius:15px !important;

    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.14),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)) !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.09) !important;

    -webkit-backdrop-filter:blur(18px) !important;
    backdrop-filter:blur(18px) !important;
  }

  #headlessui-portal-root [role="dialog"] button:has(.sr-only) svg{
    width:21px !important;
    height:21px !important;
    stroke-width:1.35 !important;
  }

  /* ---------- SECTION GROUPS ---------- */
  #headlessui-portal-root [role="dialog"] .divide-y{
    border:0 !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.divide-y.py-4{
    padding:10px 16px 4px !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.divide-y.pb-8{
    padding:8px 16px 8px !important;
  }

  /* Section titles */
  #headlessui-portal-root [role="dialog"] p.font-bold,
  #headlessui-portal-root [role="dialog"] p.text-lg{
    position:relative !important;

    margin:8px 6px 12px !important;
    padding:0 14px 0 0 !important;

    color:rgba(244,247,248,.62) !important;

    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    letter-spacing:.06em !important;
  }

  #headlessui-portal-root [role="dialog"] p.font-bold::before,
  #headlessui-portal-root [role="dialog"] p.text-lg::before{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    top:50% !important;

    width:5px !important;
    height:5px !important;

    border-radius:50% !important;
    transform:translateY(-50%) !important;

    background:#C06024 !important;
    box-shadow:0 0 10px rgba(192,96,36,.48) !important;
  }

  /* Each EasyOrders menu-row becomes a premium glass card */
  #headlessui-portal-root [role="dialog"] div.font-medium.px-5.py-3,
  #headlessui-portal-root [role="dialog"] .flow-root{
    position:relative !important;

    margin:7px 0 !important;
    padding:0 !important;

    border:1px solid rgba(244,247,248,.09) !important;
    border-radius:17px !important;

    background:
      linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 10px 22px rgba(0,0,0,.08) !important;

    overflow:hidden !important;
  }

  /* Navigation links */
  #headlessui-portal-root [role="dialog"] a[href]{
    position:relative !important;

    min-height:58px !important;
    width:100% !important;

    padding:0 18px 0 50px !important;

    display:flex !important;
    align-items:center !important;

    color:#F4F7F8 !important;
    background:transparent !important;

    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.25 !important;

    text-decoration:none !important;

    transition:
      background .22s ease,
      transform .22s ease,
      color .22s ease !important;
  }

  /* Energy dot / route marker */
  #headlessui-portal-root [role="dialog"] a[href]::before{
    content:"" !important;

    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;

    margin-left:11px !important;

    border-radius:50% !important;

    background:rgba(192,96,36,.72) !important;
    box-shadow:0 0 0 5px rgba(192,96,36,.065) !important;
  }

  /* Directional arrow — no SVG mutation */
  #headlessui-portal-root [role="dialog"] a[href]::after{
    content:"↗" !important;

    position:absolute !important;
    left:17px !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    color:rgba(244,247,248,.46) !important;

    font:500 17px/1 "DM Sans",sans-serif !important;
    direction:ltr !important;

    transition:
      transform .22s ease,
      color .22s ease !important;
  }

  #headlessui-portal-root [role="dialog"] a[href]:active{
    transform:scale(.985) !important;
    background:rgba(192,96,36,.075) !important;
  }

  /* Products gets a slightly stronger primary treatment */
  #headlessui-portal-root [role="dialog"] a[href="/collections/Led-Lights"]{
    background:
      radial-gradient(circle at 88% 50%,rgba(192,96,36,.13),transparent 34%),
      linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.022)) !important;
  }

  #headlessui-portal-root [role="dialog"] a[href="/collections/Led-Lights"]::before{
    background:#E17A39 !important;
    box-shadow:
      0 0 0 5px rgba(225,122,57,.08),
      0 0 14px rgba(225,122,57,.25) !important;
  }

  /* ---------- LIGHT MODE ---------- */
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.fixed.inset-0{
    background:
      radial-gradient(circle at 78% 12%,rgba(192,96,36,.10),transparent 30%),
      rgba(112,134,149,.26) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex{
    color:#112431 !important;

    border-color:rgba(255,255,255,.88) !important;

    background:
      radial-gradient(105% 58% at 8% 4%,rgba(239,177,123,.34),transparent 48%),
      radial-gradient(82% 60% at 94% 18%,rgba(145,188,213,.38),transparent 58%),
      linear-gradient(148deg,#E5ECEF 0%,#F6F7F4 50%,#DFE9EE 100%) !important;

    box-shadow:
      -24px 0 64px rgba(58,76,90,.14),
      0 26px 72px rgba(60,79,93,.16),
      inset 0 1px 0 #fff !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end{
    background:
      linear-gradient(to bottom,rgba(239,244,246,.94),rgba(239,244,246,.72) 72%,transparent) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end::after,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] a[href]{
    color:#112431 !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex::after,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] p.font-bold,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] p.text-lg{
    color:rgba(17,36,49,.54) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] button:has(.sr-only){
    color:#112431 !important;

    border-color:rgba(255,255,255,.82) !important;

    background:
      linear-gradient(145deg,rgba(255,255,255,.80),rgba(222,233,239,.46)) !important;

    box-shadow:
      0 10px 24px rgba(55,76,89,.08),
      inset 0 1px 0 #fff !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] div.font-medium.px-5.py-3,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] .flow-root{
    border-color:rgba(255,255,255,.76) !important;

    background:
      linear-gradient(135deg,rgba(255,255,255,.54),rgba(225,235,240,.28)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 10px 22px rgba(59,78,91,.045) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] a[href]::after{
    color:rgba(17,36,49,.42) !important;
  }

  /* ---------- CLOSED HEADER MICRO-POLISH ---------- */
  nav.default_header_container > div:first-child > div:first-child > button,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end,
  #taqaThemePortal .taqa-theme-panel{
    transition:
      transform .22s ease,
      box-shadow .28s ease,
      border-color .28s ease,
      background .28s ease !important;
  }

  nav.default_header_container > div:first-child > div:first-child > button:active,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end:active{
    transform:scale(.965) !important;
  }
}

/* Very small phones: keep the panel generous but safe */
@media (max-width:380px){
  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    width:calc(100vw - 14px) !important;
    max-width:calc(100vw - 14px) !important;

    margin:7px 7px 7px auto !important;
    height:calc(100dvh - 14px) !important;

    border-radius:25px 7px 7px 25px !important;
  }

  #headlessui-portal-root [role="dialog"] a[href]{
    min-height:54px !important;
    font-size:13px !important;
  }
}


/* =========================================================
   TAQA MOBILE MENU — WATERMARK LOGO THEME SWAP
   Remove top text brand, use subtle full-panel watermark.
========================================================= */

@media (max-width:1023px){

  /* Remove TAQA ELSWEDY text beside the close button */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:none !important;
    display:none !important;
  }

  /*
    Watermark sits behind all menu content.
    We use a dedicated pseudo layer so it never blocks clicks.
  */
  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    position:relative !important;
    isolation:isolate !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    content:"" !important;

    position:absolute !important;
    z-index:-1 !important;

    left:50% !important;
    top:52% !important;

    width:min(72%,260px) !important;
    aspect-ratio:1.75 / 1 !important;

    transform:translate(-50%,-50%) rotate(-7deg) !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;

    opacity:.055 !important;

    filter:grayscale(.1) contrast(.95) !important;

    pointer-events:none !important;
    user-select:none !important;
  }

  /* Keep the architecture sheen as a separate foreground overlay */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;

    pointer-events:none !important;

    background:
      linear-gradient(126deg,
        rgba(255,255,255,.07) 0%,
        rgba(255,255,255,.018) 18%,
        transparent 18.5%,
        transparent 64%,
        rgba(192,96,36,.045) 84%,
        transparent 100%) !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    background-image:url("https://files.easy-orders.net/1789757057237954383.png") !important;
    opacity:.060 !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    background-image:url("https://files.easy-orders.net/1789767999797447976.png") !important;
    opacity:.070 !important;
  }
}

/* Slightly smaller watermark on very narrow phones */
@media (max-width:380px){
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    width:min(68%,230px) !important;
    top:54% !important;
  }
}


/* =========================================================
   TAQA MOBILE MENU — WATERMARK V2
   Move watermark into the lower visual breathing space.
   Cleaner, larger, straighter, and more visible in Light Mode.
========================================================= */

@media (max-width:1023px){

  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    left:50% !important;
    top:72% !important;

    width:min(82%,290px) !important;
    aspect-ratio:1.9 / 1 !important;

    transform:translate(-50%,-50%) rotate(-2deg) !important;

    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;

    pointer-events:none !important;
    user-select:none !important;

    filter:saturate(.88) contrast(.96) !important;

    /* soft fade so it feels embedded in the panel */
    -webkit-mask-image:
      radial-gradient(ellipse at center,
        #000 0%,
        rgba(0,0,0,.96) 56%,
        rgba(0,0,0,.60) 76%,
        transparent 100%) !important;
    mask-image:
      radial-gradient(ellipse at center,
        #000 0%,
        rgba(0,0,0,.96) 56%,
        rgba(0,0,0,.60) 76%,
        transparent 100%) !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.095 !important;
    mix-blend-mode:screen !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.135 !important;
    mix-blend-mode:multiply !important;
  }

  /* Keep the architectural sheen subtle and separate */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    background:
      linear-gradient(126deg,
        rgba(255,255,255,.065) 0%,
        rgba(255,255,255,.015) 18%,
        transparent 18.5%,
        transparent 64%,
        rgba(192,96,36,.038) 84%,
        transparent 100%) !important;
  }
}

@media (max-width:380px){
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    top:74% !important;
    width:min(78%,255px) !important;
    transform:translate(-50%,-50%) rotate(-1deg) !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.145 !important;
  }
}


/* =========================================================
   TAQA MENU — RIGHT-EDGE BRAND TYPOGRAPHY WATERMARK
   Large branded graphic emerging from the RIGHT and lower area,
   intentionally cropped by the panel and sitting behind menu cards.
========================================================= */

@media (max-width:1023px){

  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    content:"" !important;

    position:absolute !important;
    z-index:-1 !important;

    left:auto !important;
    right:-92px !important;
    top:auto !important;
    bottom:7% !important;

    width:360px !important;
    height:190px !important;
    aspect-ratio:auto !important;

    transform:none !important;

    background-repeat:no-repeat !important;
    background-position:right center !important;
    background-size:contain !important;

    pointer-events:none !important;
    user-select:none !important;

    -webkit-mask-image:
      linear-gradient(
        to left,
        #000 0%,
        rgba(0,0,0,.96) 50%,
        rgba(0,0,0,.72) 72%,
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        to left,
        #000 0%,
        rgba(0,0,0,.96) 50%,
        rgba(0,0,0,.72) 72%,
        transparent 100%
      ) !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.115 !important;
    mix-blend-mode:multiply !important;
    filter:saturate(.82) contrast(.98) !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.085 !important;
    mix-blend-mode:screen !important;
    filter:saturate(.72) contrast(.94) !important;
  }

  /* Keep cards visually above the typography */
  #headlessui-portal-root [role="dialog"] div.font-medium.px-5.py-3,
  #headlessui-portal-root [role="dialog"] .flow-root{
    position:relative !important;
    z-index:2 !important;
  }
}

@media (max-width:380px){
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    right:-86px !important;
    bottom:8% !important;
    width:320px !important;
    height:170px !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.125 !important;
  }
}


/* =========================================================
   TAQA MENU — TOP LEFT BRAND + ROTATED RIGHT WATERMARK
========================================================= */

@media (max-width:1023px){

  /* Brand title opposite the close button */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:"EL SEWEDY" !important;
    display:block !important;

    position:absolute !important;
    left:22px !important;
    right:auto !important;
    top:28px !important;

    color:rgba(17,36,49,.72) !important;

    font-family:"Manrope","DM Sans",sans-serif !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.16em !important;

    direction:ltr !important;
    white-space:nowrap !important;

    pointer-events:none !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    color:rgba(244,247,248,.68) !important;
  }

  /* Pull the watermark left a little and rotate it */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    right:-48px !important;
    bottom:6.5% !important;

    width:360px !important;
    height:190px !important;

    transform:rotate(-8deg) !important;
    transform-origin:center !important;
  }
}

@media (max-width:380px){
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    left:18px !important;
    top:27px !important;
    font-size:9px !important;
    letter-spacing:.14em !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    right:-42px !important;
    bottom:7% !important;

    width:320px !important;
    height:170px !important;

    transform:rotate(-7deg) !important;
  }
}


/* =========================================================
   TAQA MENU — HERO HEADLINE TYPOGRAPHY
   Replace tiny top label with a proper premium menu headline.
========================================================= */

@media (max-width:1023px){

  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end{
    min-height:118px !important;
    padding:18px 18px 14px !important;
  }

  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:"EL SEWEDY" !important;
    white-space:pre-line !important;

    display:block !important;
    position:absolute !important;

    left:22px !important;
    right:auto !important;
    top:24px !important;

    width:190px !important;

    color:#112431 !important;

    font-family:"Space Grotesk","Manrope","DM Sans",sans-serif !important;
    font-size:24px !important;
    font-weight:700 !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;

    text-transform:uppercase !important;
    text-align:left !important;
    direction:ltr !important;

    pointer-events:none !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    color:#F4F7F8 !important;
    text-shadow:0 1px 18px rgba(0,0,0,.14) !important;
  }

  /* Small orange energy accent under headline */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::before{
    content:"LIGHTING / ELECTRICAL / CONTROL" !important;

    position:absolute !important;
    left:23px !important;
    top:78px !important;

    color:#C06024 !important;

    font-family:"Manrope","DM Sans",sans-serif !important;
    font-size:7px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.14em !important;

    direction:ltr !important;
    white-space:nowrap !important;
    pointer-events:none !important;
  }

  /* Close button stays aligned with the new headline */
  #headlessui-portal-root [role="dialog"] button:has(.sr-only){
    align-self:flex-start !important;
  }
}

@media (max-width:380px){

  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end{
    min-height:108px !important;
  }

  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    left:18px !important;
    top:23px !important;

    width:165px !important;

    font-size:21px !important;
    line-height:.94 !important;
  }

  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::before{
    left:19px !important;
    top:71px !important;
    font-size:6.4px !important;
    letter-spacing:.12em !important;
  }
}


/* =========================================================
   TAQA MENU — BACKGROUND ARTWORK CLEAN RE-ADD
   Single source of truth: one clipped layer at exactly 20%.
========================================================= */
@media (max-width:1023px){

  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    background-image:url("https://pub-e9715f44ef4d4ff88751fb3c934ea86e.r2.dev/ChatGPT%20Image%2027%20%D8%B3%D8%A8%D8%AA%D9%85%D8%A8%D8%B1%202026%D8%8C%2012_27_48%20%D8%B5.webp") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;

    opacity:.20 !important;

    pointer-events:none !important;
    user-select:none !important;

    filter:none !important;
    mix-blend-mode:normal !important;

    border-radius:inherit !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > *{
    position:relative !important;
    z-index:2 !important;
  }
}


/* =========================================================
   TAQA MENU V7 — FULL-PANEL ENGRAVED ENERGY ART
   - No separate top wrapper background
   - Artwork spans the entire menu
   - 20deg rotation
   - Very subtle engraved visibility
========================================================= */

@media (max-width:1023px){

  /* Remove the visual cut behind headline / exit area */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end,
  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end,
  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end{
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    border:0 !important;
  }

  /* Full-panel background artwork */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    z-index:0 !important;

    /* oversize so rotation never exposes empty corners */
    inset:-16% !important;

    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;

    transform:rotate(20deg) scale(1.08) !important;
    transform-origin:center center !important;

    opacity:.06 !important;

    pointer-events:none !important;
    user-select:none !important;

    mix-blend-mode:normal !important;
    filter:
      saturate(.72)
      contrast(.92)
      brightness(.90) !important;

    border-radius:0 !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.075 !important;
    filter:
      saturate(.62)
      contrast(.88)
      brightness(.94) !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.055 !important;
    filter:
      saturate(.58)
      contrast(.90)
      brightness(.78) !important;
  }

  /* Real UI always above artwork */
  #headlessui-portal-root [role="dialog"] > div.relative.flex > *{
    position:relative !important;
    z-index:2 !important;
  }

  /* Existing brand watermark stays under UI, above artwork if present */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    z-index:1 !important;
  }
}

@media (max-width:380px){
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    inset:-18% !important;
    transform:rotate(20deg) scale(1.10) !important;
  }
}


/* =========================================================
   TAQA MENU — ENGRAVED ART OPACITY TUNE
========================================================= */
@media (max-width:1023px){
  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.10 !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.12 !important;
  }
}


/* =========================================================
   TAQA MENU — FINAL ENGRAVED ART OPACITY
========================================================= */
@media (max-width:1023px){
  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.10 !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.15 !important;
  }
}


/* =========================================================
   TAQA PORTRAIT ROUTE BRIDGE
   Why this exists:
   - Outdoor router treats large Portrait as the Mobile route.
   - Original menu CSS was viewport-width gated.
   - Re-apply the exact existing phone/tablet rules in Portrait
     without changing the approved phone UI.
========================================================= */


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    gap:4px !important;
    padding:3px !important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"],
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  /* Native menu button remains untouched functionally. */
  nav.default_header_container > div:first-child > div:first-child > button{
    position:relative!important;
    color:var(--taqa-ui-fg) !important;
  }

}


/* Original source condition: @media (max-width:767px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  nav.default_header_container > div:first-child{
    height:48px!important;
    min-height:48px!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    width:84px!important;
    height:44px!important;
    min-width:84px!important;
    min-height:44px!important;
    gap:4px!important;
    padding:3px!important;
    border-radius:14px!important;
    border:1px solid var(--taqa-mobile-control-border,var(--taqa-ui-border))!important;
    background:var(--taqa-mobile-control-bg,linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)))!important;
    box-shadow:var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow))!important;
    -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
    backdrop-filter:blur(18px) saturate(128%)!important;
    isolation:isolate!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"],
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
    color:var(--taqa-header-fg,var(--taqa-ui-fg))!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"] svg{
    width:19px!important;
    height:19px!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button svg{
    width:21px!important;
    height:21px!important;
  }

  nav.default_header_container > div:first-child > div:first-child > button{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--taqa-mobile-control-border,var(--taqa-ui-border))!important;
    border-radius:14px!important;
    color:var(--taqa-header-fg,var(--taqa-ui-fg))!important;
    background:var(--taqa-mobile-control-bg,linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft)))!important;
    box-shadow:var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow))!important;
    -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
    backdrop-filter:blur(18px) saturate(128%)!important;
    transition:border-color .22s ease,background .28s ease,box-shadow .28s ease!important;
  }

  nav.default_header_container > div:first-child > div:first-child > button svg{
    width:22px!important;
    height:22px!important;
    transform:none!important;
    opacity:0!important;
  }

  /* Clean, equal hamburger strokes with exact optical centering. */
  nav.default_header_container > div:first-child > div:first-child > button::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    width:18px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }

  nav.default_header_container .default_header_logo{
    width:110px!important;
    height:44px!important;
    max-width:110px!important;
  }

  nav.default_header_container .default_header_logo a,
  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:110px!important;
    height:44px!important;
    max-width:110px!important;
    max-height:44px!important;
    object-fit:contain!important;
  }

  body.taqa-theme-dark nav.default_header_container .default_header_logo img,
  body.taqa-theme-light nav.default_header_container .default_header_logo img{
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.14))!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end::before,
  nav.default_header_container > div:first-child > div:first-child > button::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 34%,transparent 72%,rgba(192,96,36,.055));
    opacity:.72;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end{
    position:relative!important;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > *,
  nav.default_header_container > div:first-child > div:first-child > button > *{
    position:relative;
    z-index:1;
  }

  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > a[href="/search"]:active,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end > button:active,
  nav.default_header_container > div:first-child > div:first-child > button:active{
    background:var(--taqa-mobile-control-active,rgba(192,96,36,.10))!important;
  }

}


/* Original source condition: @media (max-width:767px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container > div:first-child > div:first-child > button{
    background:
      var(--taqa-mobile-control-bg,
        linear-gradient(145deg,var(--taqa-ui-glass),var(--taqa-ui-glass-soft))
      ) !important;

    border:1px solid
      var(--taqa-mobile-control-border,var(--taqa-ui-border)) !important;

    box-shadow:
      var(--taqa-mobile-control-shadow,var(--taqa-ui-shadow)) !important;

    -webkit-backdrop-filter:blur(18px) saturate(128%) !important;
    backdrop-filter:blur(18px) saturate(128%) !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container .default_header_logo a{
    gap:24px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:92px !important;
    height:42px !important;
  }

}


/* Original source condition: @media (max-width:767px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container .default_header_logo{
    width:auto !important;
    max-width:none !important;
    height:44px !important;
  }

  nav.default_header_container .default_header_logo a{
    width:auto !important;
    max-width:none !important;
    height:44px !important;
    gap:14px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:74px !important;
    max-width:74px !important;
    height:36px !important;
    max-height:36px !important;
    object-fit:contain !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:74px !important;
    height:34px !important;
  }

}


/* Original source condition: @media (max-width:767px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container .default_header_logo a{
    gap:12px !important;
  }

  nav.default_header_container .default_header_logo a > div,
  nav.default_header_container .default_header_logo img{
    width:66px !important;
    max-width:66px !important;
    height:32px !important;
    max-height:32px !important;
  }

  nav.default_header_container .default_header_logo a::after{
    width:66px !important;
    height:31px !important;
  }

}


/* Original source condition: @media (max-width:767px) */
@media (min-width:768px) and (orientation:portrait){

  nav.default_header_container .default_header_logo a{
    gap:18px !important;
  }

}


/* Original source condition: @media (max-width:767px) */
@media (min-width:768px) and (orientation:portrait){


  /* Keep the whole lockup mathematically centered */
  nav.default_header_container .default_header_logo{
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  /* Original TAQA logo: nudge to the RIGHT */
  nav.default_header_container .default_header_logo a > div{
    transform:translateX(5px) !important;
  }

  /* ESP logo: nudge to the LEFT */
  nav.default_header_container .default_header_logo a::after{
    transform:translateX(-5px) !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  /* ---------- OPEN MENU / OVERLAY ---------- */
  #headlessui-portal-root [role="dialog"]{
    direction:rtl !important;
    font-family:"Cairo","Manrope",system-ui,sans-serif !important;
    align-items:stretch !important;
  }

  #headlessui-portal-root [role="dialog"] > div.fixed.inset-0{
    background:
      radial-gradient(circle at 78% 12%,rgba(192,96,36,.13),transparent 30%),
      rgba(2,8,14,.72) !important;

    -webkit-backdrop-filter:blur(14px) saturate(112%) !important;
    backdrop-filter:blur(14px) saturate(112%) !important;
  }

  /* The native drawer itself */
  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    position:relative !important;

    margin:10px 10px 10px auto !important;
    width:min(88vw,360px) !important;
    max-width:min(88vw,360px) !important;
    height:calc(100dvh - 20px) !important;

    padding:0 0 24px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    border:1px solid rgba(244,247,248,.12) !important;
    border-radius:30px 8px 8px 30px !important;

    color:#F4F7F8 !important;

    background:
      radial-gradient(105% 58% at 8% 4%,rgba(192,96,36,.20),transparent 47%),
      radial-gradient(82% 60% at 94% 18%,rgba(77,113,131,.24),transparent 58%),
      linear-gradient(148deg,#17222D 0%,#09121B 52%,#101D28 100%) !important;

    box-shadow:
      -28px 0 76px rgba(0,0,0,.34),
      0 28px 90px rgba(0,0,0,.46),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 1px 0 0 rgba(232,167,111,.09) !important;

    -webkit-backdrop-filter:blur(28px) saturate(124%) !important;
    backdrop-filter:blur(28px) saturate(124%) !important;

    scrollbar-width:none !important;
    isolation:isolate !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::-webkit-scrollbar{
    display:none !important;
  }

  /* Architectural highlight / energy line */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;

    background:
      linear-gradient(126deg,
        rgba(255,255,255,.095) 0%,
        rgba(255,255,255,.024) 19%,
        transparent 19.5%,
        transparent 61%,
        rgba(192,96,36,.055) 82%,
        transparent 100%) !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"ENERGY / NAVIGATION" !important;
    position:absolute !important;
    left:24px !important;
    top:31px !important;
    z-index:3 !important;

    color:rgba(244,247,248,.46) !important;
    font:700 8px/1 "Manrope","DM Sans",sans-serif !important;
    letter-spacing:.20em !important;
    direction:ltr !important;
    pointer-events:none !important;
  }

  /* ---------- TOP / CLOSE ---------- */
  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end{
    position:sticky !important;
    top:0 !important;
    z-index:10 !important;

    min-height:84px !important;
    padding:18px 18px 12px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    background:
      linear-gradient(to bottom,rgba(10,18,27,.94),rgba(10,18,27,.72) 72%,transparent) !important;

    -webkit-backdrop-filter:blur(12px) !important;
    backdrop-filter:blur(12px) !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end::after{
    content:"TAQA ELSWEDY" !important;
    position:absolute !important;
    right:22px !important;
    top:25px !important;

    color:#F4F7F8 !important;
    font:700 11px/1 "Manrope","DM Sans",sans-serif !important;
    letter-spacing:.11em !important;
    direction:ltr !important;
    opacity:.84 !important;
    pointer-events:none !important;
  }

  #headlessui-portal-root [role="dialog"] button:has(.sr-only){
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    color:#F4F7F8 !important;

    border:1px solid rgba(244,247,248,.14) !important;
    border-radius:15px !important;

    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.14),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)) !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.09) !important;

    -webkit-backdrop-filter:blur(18px) !important;
    backdrop-filter:blur(18px) !important;
  }

  #headlessui-portal-root [role="dialog"] button:has(.sr-only) svg{
    width:21px !important;
    height:21px !important;
    stroke-width:1.35 !important;
  }

  /* ---------- SECTION GROUPS ---------- */
  #headlessui-portal-root [role="dialog"] .divide-y{
    border:0 !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.divide-y.py-4{
    padding:10px 16px 4px !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > div.divide-y.pb-8{
    padding:8px 16px 8px !important;
  }

  /* Section titles */
  #headlessui-portal-root [role="dialog"] p.font-bold,
  #headlessui-portal-root [role="dialog"] p.text-lg{
    position:relative !important;

    margin:8px 6px 12px !important;
    padding:0 14px 0 0 !important;

    color:rgba(244,247,248,.62) !important;

    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.2 !important;

    letter-spacing:.06em !important;
  }

  #headlessui-portal-root [role="dialog"] p.font-bold::before,
  #headlessui-portal-root [role="dialog"] p.text-lg::before{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    top:50% !important;

    width:5px !important;
    height:5px !important;

    border-radius:50% !important;
    transform:translateY(-50%) !important;

    background:#C06024 !important;
    box-shadow:0 0 10px rgba(192,96,36,.48) !important;
  }

  /* Each EasyOrders menu-row becomes a premium glass card */
  #headlessui-portal-root [role="dialog"] div.font-medium.px-5.py-3,
  #headlessui-portal-root [role="dialog"] .flow-root{
    position:relative !important;

    margin:7px 0 !important;
    padding:0 !important;

    border:1px solid rgba(244,247,248,.09) !important;
    border-radius:17px !important;

    background:
      linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 10px 22px rgba(0,0,0,.08) !important;

    overflow:hidden !important;
  }

  /* Navigation links */
  #headlessui-portal-root [role="dialog"] a[href]{
    position:relative !important;

    min-height:58px !important;
    width:100% !important;

    padding:0 18px 0 50px !important;

    display:flex !important;
    align-items:center !important;

    color:#F4F7F8 !important;
    background:transparent !important;

    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.25 !important;

    text-decoration:none !important;

    transition:
      background .22s ease,
      transform .22s ease,
      color .22s ease !important;
  }

  /* Energy dot / route marker */
  #headlessui-portal-root [role="dialog"] a[href]::before{
    content:"" !important;

    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;

    margin-left:11px !important;

    border-radius:50% !important;

    background:rgba(192,96,36,.72) !important;
    box-shadow:0 0 0 5px rgba(192,96,36,.065) !important;
  }

  /* Directional arrow — no SVG mutation */
  #headlessui-portal-root [role="dialog"] a[href]::after{
    content:"↗" !important;

    position:absolute !important;
    left:17px !important;
    top:50% !important;

    transform:translateY(-50%) !important;

    color:rgba(244,247,248,.46) !important;

    font:500 17px/1 "DM Sans",sans-serif !important;
    direction:ltr !important;

    transition:
      transform .22s ease,
      color .22s ease !important;
  }

  #headlessui-portal-root [role="dialog"] a[href]:active{
    transform:scale(.985) !important;
    background:rgba(192,96,36,.075) !important;
  }

  /* Products gets a slightly stronger primary treatment */
  #headlessui-portal-root [role="dialog"] a[href="/collections/Led-Lights"]{
    background:
      radial-gradient(circle at 88% 50%,rgba(192,96,36,.13),transparent 34%),
      linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.022)) !important;
  }

  #headlessui-portal-root [role="dialog"] a[href="/collections/Led-Lights"]::before{
    background:#E17A39 !important;
    box-shadow:
      0 0 0 5px rgba(225,122,57,.08),
      0 0 14px rgba(225,122,57,.25) !important;
  }

  /* ---------- LIGHT MODE ---------- */
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.fixed.inset-0{
    background:
      radial-gradient(circle at 78% 12%,rgba(192,96,36,.10),transparent 30%),
      rgba(112,134,149,.26) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex{
    color:#112431 !important;

    border-color:rgba(255,255,255,.88) !important;

    background:
      radial-gradient(105% 58% at 8% 4%,rgba(239,177,123,.34),transparent 48%),
      radial-gradient(82% 60% at 94% 18%,rgba(145,188,213,.38),transparent 58%),
      linear-gradient(148deg,#E5ECEF 0%,#F6F7F4 50%,#DFE9EE 100%) !important;

    box-shadow:
      -24px 0 64px rgba(58,76,90,.14),
      0 26px 72px rgba(60,79,93,.16),
      inset 0 1px 0 #fff !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end{
    background:
      linear-gradient(to bottom,rgba(239,244,246,.94),rgba(239,244,246,.72) 72%,transparent) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex > div.flex.justify-end::after,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] a[href]{
    color:#112431 !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] > div.relative.flex::after,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] p.font-bold,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] p.text-lg{
    color:rgba(17,36,49,.54) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] button:has(.sr-only){
    color:#112431 !important;

    border-color:rgba(255,255,255,.82) !important;

    background:
      linear-gradient(145deg,rgba(255,255,255,.80),rgba(222,233,239,.46)) !important;

    box-shadow:
      0 10px 24px rgba(55,76,89,.08),
      inset 0 1px 0 #fff !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] div.font-medium.px-5.py-3,
  body.taqa-theme-light #headlessui-portal-root [role="dialog"] .flow-root{
    border-color:rgba(255,255,255,.76) !important;

    background:
      linear-gradient(135deg,rgba(255,255,255,.54),rgba(225,235,240,.28)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 10px 22px rgba(59,78,91,.045) !important;
  }

  body.taqa-theme-light #headlessui-portal-root [role="dialog"] a[href]::after{
    color:rgba(17,36,49,.42) !important;
  }

  /* ---------- CLOSED HEADER MICRO-POLISH ---------- */
  nav.default_header_container > div:first-child > div:first-child > button,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end,
  #taqaThemePortal .taqa-theme-panel{
    transition:
      transform .22s ease,
      box-shadow .28s ease,
      border-color .28s ease,
      background .28s ease !important;
  }

  nav.default_header_container > div:first-child > div:first-child > button:active,
  nav.default_header_container .ms-auto.flex.items-center.flex-1.justify-end:active{
    transform:scale(.965) !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  /* Remove TAQA ELSWEDY text beside the close button */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:none !important;
    display:none !important;
  }

  /*
    Watermark sits behind all menu content.
    We use a dedicated pseudo layer so it never blocks clicks.
  */
  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    position:relative !important;
    isolation:isolate !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    content:"" !important;

    position:absolute !important;
    z-index:-1 !important;

    left:50% !important;
    top:52% !important;

    width:min(72%,260px) !important;
    aspect-ratio:1.75 / 1 !important;

    transform:translate(-50%,-50%) rotate(-7deg) !important;

    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;

    opacity:.055 !important;

    filter:grayscale(.1) contrast(.95) !important;

    pointer-events:none !important;
    user-select:none !important;
  }

  /* Keep the architecture sheen as a separate foreground overlay */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;

    pointer-events:none !important;

    background:
      linear-gradient(126deg,
        rgba(255,255,255,.07) 0%,
        rgba(255,255,255,.018) 18%,
        transparent 18.5%,
        transparent 64%,
        rgba(192,96,36,.045) 84%,
        transparent 100%) !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    background-image:url("https://files.easy-orders.net/1789757057237954383.png") !important;
    opacity:.060 !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    background-image:url("https://files.easy-orders.net/1789767999797447976.png") !important;
    opacity:.070 !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    left:50% !important;
    top:72% !important;

    width:min(82%,290px) !important;
    aspect-ratio:1.9 / 1 !important;

    transform:translate(-50%,-50%) rotate(-2deg) !important;

    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;

    pointer-events:none !important;
    user-select:none !important;

    filter:saturate(.88) contrast(.96) !important;

    /* soft fade so it feels embedded in the panel */
    -webkit-mask-image:
      radial-gradient(ellipse at center,
        #000 0%,
        rgba(0,0,0,.96) 56%,
        rgba(0,0,0,.60) 76%,
        transparent 100%) !important;
    mask-image:
      radial-gradient(ellipse at center,
        #000 0%,
        rgba(0,0,0,.96) 56%,
        rgba(0,0,0,.60) 76%,
        transparent 100%) !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.095 !important;
    mix-blend-mode:screen !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.135 !important;
    mix-blend-mode:multiply !important;
  }

  /* Keep the architectural sheen subtle and separate */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    background:
      linear-gradient(126deg,
        rgba(255,255,255,.065) 0%,
        rgba(255,255,255,.015) 18%,
        transparent 18.5%,
        transparent 64%,
        rgba(192,96,36,.038) 84%,
        transparent 100%) !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    content:"" !important;

    position:absolute !important;
    z-index:-1 !important;

    left:auto !important;
    right:-92px !important;
    top:auto !important;
    bottom:7% !important;

    width:360px !important;
    height:190px !important;
    aspect-ratio:auto !important;

    transform:none !important;

    background-repeat:no-repeat !important;
    background-position:right center !important;
    background-size:contain !important;

    pointer-events:none !important;
    user-select:none !important;

    -webkit-mask-image:
      linear-gradient(
        to left,
        #000 0%,
        rgba(0,0,0,.96) 50%,
        rgba(0,0,0,.72) 72%,
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        to left,
        #000 0%,
        rgba(0,0,0,.96) 50%,
        rgba(0,0,0,.72) 72%,
        transparent 100%
      ) !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.115 !important;
    mix-blend-mode:multiply !important;
    filter:saturate(.82) contrast(.98) !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    opacity:.085 !important;
    mix-blend-mode:screen !important;
    filter:saturate(.72) contrast(.94) !important;
  }

  /* Keep cards visually above the typography */
  #headlessui-portal-root [role="dialog"] div.font-medium.px-5.py-3,
  #headlessui-portal-root [role="dialog"] .flow-root{
    position:relative !important;
    z-index:2 !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  /* Brand title opposite the close button */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:"EL SEWEDY" !important;
    display:block !important;

    position:absolute !important;
    left:22px !important;
    right:auto !important;
    top:28px !important;

    color:rgba(17,36,49,.72) !important;

    font-family:"Manrope","DM Sans",sans-serif !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.16em !important;

    direction:ltr !important;
    white-space:nowrap !important;

    pointer-events:none !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    color:rgba(244,247,248,.68) !important;
  }

  /* Pull the watermark left a little and rotate it */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    right:-48px !important;
    bottom:6.5% !important;

    width:360px !important;
    height:190px !important;

    transform:rotate(-8deg) !important;
    transform-origin:center !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end{
    min-height:118px !important;
    padding:18px 18px 14px !important;
  }

  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:"EL SEWEDY" !important;
    white-space:pre-line !important;

    display:block !important;
    position:absolute !important;

    left:22px !important;
    right:auto !important;
    top:24px !important;

    width:190px !important;

    color:#112431 !important;

    font-family:"Space Grotesk","Manrope","DM Sans",sans-serif !important;
    font-size:24px !important;
    font-weight:700 !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;

    text-transform:uppercase !important;
    text-align:left !important;
    direction:ltr !important;

    pointer-events:none !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    color:#F4F7F8 !important;
    text-shadow:0 1px 18px rgba(0,0,0,.14) !important;
  }

  /* Small orange energy accent under headline */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::before{
    content:"LIGHTING / ELECTRICAL / CONTROL" !important;

    position:absolute !important;
    left:23px !important;
    top:78px !important;

    color:#C06024 !important;

    font-family:"Manrope","DM Sans",sans-serif !important;
    font-size:7px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.14em !important;

    direction:ltr !important;
    white-space:nowrap !important;
    pointer-events:none !important;
  }

  /* Close button stays aligned with the new headline */
  #headlessui-portal-root [role="dialog"] button:has(.sr-only){
    align-self:flex-start !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  #headlessui-portal-root [role="dialog"] > div.relative.flex{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    background-image:url("https://pub-e9715f44ef4d4ff88751fb3c934ea86e.r2.dev/ChatGPT%20Image%2027%20%D8%B3%D8%A8%D8%AA%D9%85%D8%A8%D8%B1%202026%D8%8C%2012_27_48%20%D8%B5.webp") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;

    opacity:.20 !important;

    pointer-events:none !important;
    user-select:none !important;

    filter:none !important;
    mix-blend-mode:normal !important;

    border-radius:inherit !important;
  }

  #headlessui-portal-root [role="dialog"] > div.relative.flex > *{
    position:relative !important;
    z-index:2 !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){


  /* Remove the visual cut behind headline / exit area */
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end,
  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end,
  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end{
    background:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
    border:0 !important;
  }

  /* Full-panel background artwork */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;
    z-index:0 !important;

    /* oversize so rotation never exposes empty corners */
    inset:-16% !important;

    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;

    transform:rotate(20deg) scale(1.08) !important;
    transform-origin:center center !important;

    opacity:.06 !important;

    pointer-events:none !important;
    user-select:none !important;

    mix-blend-mode:normal !important;
    filter:
      saturate(.72)
      contrast(.92)
      brightness(.90) !important;

    border-radius:0 !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.075 !important;
    filter:
      saturate(.62)
      contrast(.88)
      brightness(.94) !important;
  }

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.055 !important;
    filter:
      saturate(.58)
      contrast(.90)
      brightness(.78) !important;
  }

  /* Real UI always above artwork */
  #headlessui-portal-root [role="dialog"] > div.relative.flex > *{
    position:relative !important;
    z-index:2 !important;
  }

  /* Existing brand watermark stays under UI, above artwork if present */
  #headlessui-portal-root [role="dialog"] > div.relative.flex::before{
    z-index:1 !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.10 !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.12 !important;
  }

}


/* Original source condition: @media (max-width:1023px) */
@media (min-width:768px) and (orientation:portrait){

  body.taqa-theme-dark
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.10 !important;
  }

  body.taqa-theme-light
  #headlessui-portal-root [role="dialog"] > div.relative.flex::after{
    opacity:.15 !important;
  }

}



/* =========================================================
   PRODUCTION BRAND NAME — SINGLE FINAL SOURCE OF TRUTH
   Mobile/portrait menu brand spelling lock.
========================================================= */
@media (max-width:1023px), (min-width:768px) and (orientation:portrait){
  #headlessui-portal-root [role="dialog"]
  > div.relative.flex > div.flex.justify-end::after{
    content:"EL SEWEDY" !important;
    white-space:pre-line !important;
  }
}