/* TAQA Outdoor route CSS. Keep this AFTER every original Outdoor stylesheet. */
/* The geometric media rules prevent a wrong-experience flash before JS runs. */
@media not ((min-width:901px) and (min-height:600px) and
            (min-aspect-ratio:6/5) and (orientation:landscape)) {
  #outdoorHeroSection { display:none !important; }
  #outdoorHeroMobileSection { display:block !important; }
}
@media (orientation:landscape) and (min-width:901px) and
       (min-height:600px) and (min-aspect-ratio:6/5) {
  #outdoorHeroSection { display:block !important; }
  #outdoorHeroMobileSection { display:none !important; }
}
:root.taqa-outdoor-mobile #outdoorHeroSection { display:none !important; }
:root.taqa-outdoor-mobile #outdoorHeroMobileSection { display:block !important; }
:root.taqa-outdoor-desktop #outdoorHeroSection { display:block !important; }
:root.taqa-outdoor-desktop #outdoorHeroMobileSection { display:none !important; }

/* EasyOrders' global header also switches to its existing Phone controls. */
:root.taqa-outdoor-mobile header.default_header nav[aria-label="Top"]
  > div:first-child > div:first-child > button[class~="lg:hidden"] {
  display:grid !important;
}
:root.taqa-outdoor-mobile header.default_header nav[aria-label="Top"]
  > div:nth-child(2) { display:none !important; }
:root.taqa-outdoor-mobile [role="dialog"][class~="lg:hidden"] {
  display:flex !important;
}

/* Give the mobile hero a 30vh scroll runway while its artwork stays full screen. */
:root.taqa-outdoor-mobile #outdoorHeroMobileSection {
  width:100vw !important;
  height:130vh !important;
  height:130svh !important;
  height:130dvh !important;
  min-height:130vh !important;
  min-height:130svh !important;
  min-height:130dvh !important;
  overflow:visible !important;
}
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-hero {
  position:sticky !important;
  top:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100svh !important;
  height:100dvh !important;
  min-height:100vh !important;
  min-height:100svh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}
/* The mobile assets already use a 720:1280 coordinate system. Keep it intact. */
:root.taqa-outdoor-mobile #outdoorHeroMobileSection :is(
  .outdoor-mobile-hero__frame,
  .outdoor-mobile-front-layer,
  .outdoor-mobile-frame-stack__img,
  .outdoor-mobile-detail-front,
  .outdoor-mobile-facade-frame-stack__img,
  .outdoor-mobile-facade-detail-front
) { object-fit:fill !important; }

/* Adapted from taqa-mobile-cards.css; original rules are unchanged. */
@media (min-width:901px) and
       (not ((min-width:901px) and (min-height:600px) and
             (min-aspect-ratio:6/5) and (orientation:landscape))) {
/* =========================================================
   TAQA OUTDOOR — MOBILE CARDS / FRONT LAYER
   Global Header CSS
========================================================= */

@media (min-width:0px){

  #outdoorHeroMobileSection{
    position:relative !important;
    overflow:hidden !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-hero{
    position:relative !important;
    overflow:hidden !important;
  }

  /* Layer order:
     1 = base frame
     2 = glass cards
     3 = front layer
  */

  #outdoorHeroMobileSection .outdoor-mobile-hero__frame{
    position:relative !important;
    z-index:1 !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-cards-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-glass-card{
    position:absolute !important;
    overflow:hidden !important;

    background:
      linear-gradient(
        135deg,
        rgba(18,28,40,.62) 0%,
        rgba(10,17,27,.48) 52%,
        rgba(5,11,18,.56) 100%
      ) !important;

    border:1px solid rgba(255,255,255,.15) !important;

    box-shadow:
      0 18px 44px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.16) !important;

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

  #outdoorHeroMobileSection .outdoor-mobile-glass-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
      linear-gradient(
        150deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.025) 34%,
        transparent 64%
      );
    pointer-events:none;
  }

  /* Card from behind the street pole */
  #outdoorHeroMobileSection .outdoor-mobile-glass-card--pole{
    /* Follows the pole edge in the FILLED front-layer coordinate space.
       Fallback preserves the approved source-relative position before JS syncs. */
    left:var(--street-card-cover-left, calc(13.1% - 5px)) !important;
    top:57.8% !important;
    width:63.2% !important;
    height:22.7% !important;
    border-radius:0 24px 24px 0 !important;
    transform-origin:left center !important;
  }

  /* Card from behind the awning */
  #outdoorHeroMobileSection .outdoor-mobile-glass-card--awning{
    left:32% !important;
    right:-1px !important;
    top:22.9% !important;
    width:calc(68% + 1px) !important;
    height:19.1% !important;

    /* 2D container: facade content scales from the card itself,
       not from the phone viewport. */
    container-type:size;

    /* Rounded ONLY where the card comes out from behind the awning.
       The right side runs straight into the phone edge. */
    border-radius:24px 0 0 24px !important;

    transform-origin:left center !important;
  }


  /* =======================================================
     ONE-SHOT ENTRANCE
     Cards stay visible by default.
     JS only adds the play class when the section enters view.
  ======================================================= */

  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card--pole{
    animation:
      taqaMobileCardRevealFromEdge
      .72s
      cubic-bezier(.16,1,.30,1)
      .04s
      both !important;

    will-change:transform,opacity;
  }

  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card--awning{
    animation:
      taqaMobileCardRevealFromRightEdge
      .78s
      cubic-bezier(.16,1,.30,1)
      .12s
      both !important;

    will-change:transform,opacity;
  }

  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;

    box-shadow:
      0 14px 30px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.13) !important;
  }

  #outdoorHeroMobileSection.mobile-cards-animation-done
  .outdoor-mobile-glass-card{
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;

    box-shadow:
      0 18px 44px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.16) !important;

    will-change:auto;
  }


  /* =======================================================
     MOBILE CARD CONTENT
     Title, CTA and zoom each have their own row. Card dimensions
     and the background -> cards -> front-layer order are preserved.
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-glass-card{
    container-type:inline-size;
    pointer-events:auto !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui{
    position:absolute;
    z-index:1;
    inset:0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(4px,1.5cqw,6px) clamp(10px,4.5cqw,15px);
    direction:rtl;
    text-align:center;
    color:#f4f6f7;
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-eyebrow{
    display:block;
    margin:0 0 clamp(3px,1.2cqw,4px);
    color:#c06024;
    font:800 clamp(8px,3.3cqw,9px)/1.15 "Manrope","DM Sans",sans-serif;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-title{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    justify-content:center;
    gap:clamp(2px,.8cqw,3px);
    width:max-content;
    max-width:100%;
    margin:0;
    direction:rtl;
    white-space:nowrap;
    color:#f4f6f7;
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(12.5px,6.8cqw,18.5px);
    font-weight:700;
    line-height:1.16;
    letter-spacing:-.018em;
    text-shadow:0 1px 14px rgba(0,0,0,.08);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-title > span{
    display:inline-block;
    flex:0 0 auto;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-separator{
    font-size:.78em;
    opacity:.78;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-brand{
    font-size:clamp(10px,.78em,15px);
    font-weight:600;
    color:rgba(244,246,247,.84);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-cta{
    align-self:center;
    display:block;
    margin-top:clamp(6px,2.5cqw,9px);
    color:rgba(244,246,247,.82);
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(10px,4.2cqw,12px);
    font-weight:600;
    line-height:1.25;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-action-row{
    --zoom-size:clamp(31px,15cqw,38px);
    --arrow-width:clamp(62px,27cqw,82px);
    position:relative;
    align-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--zoom-size);
    height:var(--zoom-size);
    margin-top:clamp(5px,2cqw,8px);
    pointer-events:auto;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom{
    position:relative;
    z-index:1;
    top:2px;
    width:var(--zoom-size);
    height:var(--zoom-size);
    flex:0 0 auto;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.30),transparent 34%),
      linear-gradient(150deg,rgba(11,18,25,.34),rgba(255,255,255,.05));
    color:#f6f8f9;
    box-shadow:
      0 12px 30px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -1px 0 rgba(0,0,0,.07);
    -webkit-backdrop-filter:blur(10px) saturate(125%);
    backdrop-filter:blur(10px) saturate(125%);
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    pointer-events:auto;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom::before{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom svg{
    width:44%;
    height:44%;
    display:block;
    overflow:visible;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom:active{
    transform:scale(.95);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom:focus-visible{
    outline:2px solid #c06024;
    outline-offset:4px;
  }

  /* The original SVG path is mirrored. Its tip stops just left of the
     button border so the arrowhead stays visible. */
  #outdoorHeroMobileSection .outdoor-mobile-card-arrow{
    position:absolute;
    z-index:0;
    left:calc(-3px - var(--arrow-width)*.718);
    top:calc(var(--zoom-size)/2 - var(--arrow-width)*.435);
    width:var(--arrow-width);
    height:auto;
    overflow:visible;
    color:#ffb15f;
    pointer-events:none;
    transform-origin:center center;
    transform:scaleX(-1);
    animation:taqaMobileCardArrowGuide 1.65s ease-in-out infinite;
    filter:
      drop-shadow(0 0 3px rgba(255,224,176,.85))
      drop-shadow(0 0 7px rgba(255,177,95,.62));
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-arrow path,
  #outdoorHeroMobileSection .outdoor-mobile-card-arrow polyline{
    vector-effect:non-scaling-stroke;
    stroke:#ffb15f !important;
    stroke-width:2.5 !important;
  }

  /* =======================================================
     LIGHT SWITCH HOOKS — READY FOR THE FUTURE MOBILE SWITCH
     Add/remove .outdoor-light-is-off on #outdoorHeroMobileSection.
     Current visuals stay unchanged until that state is used.
  ======================================================= */

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow{
    animation:none !important;
    filter:none !important;
    opacity:1 !important;
    transform:scaleX(-1) !important;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow path,
  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow polyline{
    stroke:#ffb15f !important;
  }

  /* =======================================================
     FACADE CARD — TOP 65% SAFE CONTENT ZONE
     The card geometry itself is intentionally untouched.
     The LOWER 35% is the dead zone hidden behind the awning/front layer.
     Typography + hint + zoom control are centered inside the TOP 65%
     using the FULL card width.
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade{
    inset:2% 0 auto 0;
    width:100%;
    height:65%;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    /*
      FIT SYSTEM:
      all spacing is capped by BOTH card width and card height,
      so short/tall phones cannot push the content out of the safe 65%.
    */
    padding:
      clamp(4px, min(1.8cqw,2.6cqh), 7px)
      clamp(10px, min(4.2cqw,5.2cqh), 18px);

    text-align:center;
    overflow:hidden;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-eyebrow{
    align-self:center;
    width:100%;
    margin-bottom:clamp(2px,min(1.4cqw,2.0cqh),5px);
    text-align:center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-eyebrow{
    font-size:clamp(7.5px,min(3.3cqw,4.8cqh),9px);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-title{
    justify-content:center;
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;

    font-size:clamp(10.5px,min(5.5cqw,8.2cqh),15.5px);
    text-align:center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-brand{
    font-size:clamp(8.5px,min(4.2cqw,6.2cqh),13px);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-cta{
    align-self:center;
    width:100%;
    margin-top:clamp(3px,min(1.9cqw,2.8cqh),6px);

    font-size:clamp(8px,min(3.45cqw,5.1cqh),10.5px);
    text-align:center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-action-row{
    --zoom-size:clamp(27px,min(11.22cqw,17cqh),34.7px);
    --arrow-width:clamp(52px,min(23cqw,34cqh),72px);

    align-self:center;
    margin-top:clamp(3px,min(1.7cqw,2.5cqh),6px);
  }

  #outdoorHeroMobileSection .outdoor-mobile-glass-card.is-focus-mode{
    box-shadow:
      0 20px 48px rgba(0,0,0,.34),
      0 0 0 1px rgba(192,96,36,.10),
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.16) !important;
  }

  /* =======================================================
     COMPACT MOBILE NIGHT-MODE TOAST
  ======================================================= */

  #outdoorMobileNightModeToast{
    position:fixed;
    left:50%;
    bottom:max(6px, env(safe-area-inset-bottom,0px));
    z-index:2147483000;
    width:min(calc(100vw - 96px),290px);
    transform:translate3d(-50%,10px,0) scale(.99);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    padding:7px 8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.09),transparent 34%),
      linear-gradient(145deg,rgba(7,14,22,.95),rgba(16,28,39,.90));
    color:#f4f7f8;
    box-shadow:
      0 12px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.11);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);
    transition:
      opacity .28s ease,
      transform .40s cubic-bezier(.22,1,.36,1),
      visibility .28s ease;
    direction:rtl;
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
  }

  #outdoorMobileNightModeToast.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate3d(-50%,0,0) scale(1);
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__row{
    display:flex;
    align-items:center;
    gap:7px;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#f1b063;
    background:rgba(241,176,99,.08);
    border:1px solid rgba(241,176,99,.16);
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__icon svg{
    width:15px;
    height:15px;
    display:block;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__copy{
    min-width:0;
    display:block;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__title{
    display:block;
    color:#fff;
    font-size:clamp(11px,2.7vw,12px);
    font-weight:700;
    line-height:1.25;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__text{
    display:block;
    margin-top:2px;
    color:rgba(244,247,248,.68);
    font-size:clamp(9px,2.2vw,10px);
    font-weight:500;
    line-height:1.35;
  }

  #outdoorHeroMobileSection .outdoor-mobile-front-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

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

    /* Must match the base frame stretch exactly. */
    object-fit:fill !important;
    object-position:center !important;

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


@keyframes taqaMobileCardRevealFromEdge{
  0%{
    opacity:.96;
    transform:translate3d(-18%,0,0) scaleX(.16);
  }

  62%{
    opacity:1;
    transform:translate3d(-2%,0,0) scaleX(.96);
  }

  100%{
    opacity:1;
    transform:translate3d(0,0,0) scaleX(1);
  }
}


@keyframes taqaMobileCardRevealFromRightEdge{
  0%{
    opacity:.96;
    transform:translate3d(18%,0,0) scaleX(.16);
  }

  62%{
    opacity:1;
    transform:translate3d(2%,0,0) scaleX(.96);
  }

  100%{
    opacity:1;
    transform:translate3d(0,0,0) scaleX(1);
  }
}

@media (min-width:0px) and (prefers-reduced-motion:reduce){
  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card--pole,
  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card--awning{
    animation:none !important;
    clip-path:none !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}


@keyframes taqaMobileCardArrowGuide{
  0%,100%{
    opacity:.78;
  }
  50%{
    opacity:1;
  }
}

@media (min-width:0px) and (prefers-reduced-motion:reduce){
  #outdoorHeroMobileSection .outdoor-mobile-card-arrow{
    animation:none !important;
    transform:scaleX(-1);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom{
    transition:none !important;
  }
}

@media (min-width:99999px){
  #outdoorHeroMobileSection .outdoor-mobile-cards-layer,
  #outdoorHeroMobileSection .outdoor-mobile-front-layer{
    display:none !important;
  }
}


/* =========================================================
   MOBILE HERO — FULL SCREEN / REELS STYLE
   No shrink/grow container animation.
   9:16 artwork fills the actual phone viewport using fill.
   No horizontal crop: the complete source remains visible.
========================================================= */

@media (min-width:0px){

  #outdoorHeroMobileSection{
    position:relative !important;
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-hero{
    isolation:isolate;
    width:100vw !important;

    height:100vh !important;
    height:100svh !important;
    height:100dvh !important;

    min-height:100vh !important;
    min-height:100svh !important;
    min-height:100dvh !important;

    aspect-ratio:auto !important;

    background:#081522;
    transform-origin:center top;
    transition:none !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-hero__frame{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:fill !important;
    object-position:center !important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-front-layer{
    object-fit:fill !important;
    object-position:center !important;
  }
}

@media (min-width:99999px){
  #outdoorMobileNightModeToast{
    display:none !important;
  }
}



}

/* Adapted from outdoor-light-switch-mobile.css; original rules are unchanged. */
@media (min-width:901px) and
       (not ((min-width:901px) and (min-height:600px) and
             (min-aspect-ratio:6/5) and (orientation:landscape))) {
/* =========================================================
   TAQA OUTDOOR — MOBILE LIGHT SWITCH
   EXACT DESKTOP SWITCH UI
   Mobile-only implementation.
   Only placement differs: bottom-left on phone.
========================================================= */

@media (min-width:0px){

  #outdoorHeroMobileSection .outdoor-mobile-hero{
    position:relative!important;
  }

  /* =======================================================
     EXACT DESKTOP COMPONENT GEOMETRY / SHELL
     Desktop values copied 1:1:
     78 x 184 outer
     62 x 164 track
     52 x 88 thumb
  ======================================================= */

  #outdoorHeroMobileSection
  .outdoor-mobile-hero>
  .outdoor-mobile-light-switch.tq-hero-light-switch{
    --switch-w:78px!important;
    --switch-h:184px!important;
    --track-w:62px!important;
    --track-h:164px!important;
    --thumb-h:88px!important;

    position:absolute!important;

    /* MOBILE-ONLY POSITION CHANGE */
    left:18px!important;
    right:auto!important;
    top:auto!important;
    bottom:24px!important;

    transform:none!important;

    width:var(--switch-w)!important;
    min-width:var(--switch-w)!important;
    max-width:var(--switch-w)!important;

    height:var(--switch-h)!important;
    min-height:var(--switch-h)!important;
    max-height:var(--switch-h)!important;

    padding:9px!important;
    margin:0!important;
    gap:0!important;

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

    border-radius:999px!important;
    border:1px solid rgba(224,241,249,.20)!important;

    cursor:pointer!important;
    overflow:visible!important;
    isolation:isolate!important;

    color:inherit!important;

    background:
      radial-gradient(
        ellipse at 24% 5%,
        rgba(255,255,255,.18),
        transparent 32%
      ),
      linear-gradient(
        135deg,
        rgba(255,255,255,.085),
        rgba(255,255,255,.018) 38%,
        rgba(5,12,18,.17) 72%
      ),
      rgba(10,18,25,.32)!important;

    -webkit-backdrop-filter:blur(22px) saturate(1.28)!important;
    backdrop-filter:blur(22px) saturate(1.28)!important;

    box-shadow:
      0 24px 56px rgba(0,0,0,.30),
      0 7px 18px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 1px 0 0 rgba(255,255,255,.10),
      inset -1px 0 0 rgba(133,183,211,.07),
      inset 0 -1px 0 rgba(0,0,0,.26)!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;

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

    transition:
      transform .32s cubic-bezier(.22,1,.36,1),
      box-shadow .42s ease,
      border-color .42s ease!important;

    z-index:80!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-hero>
  .outdoor-mobile-light-switch.tq-hero-light-switch::before{
    content:""!important;
    position:absolute!important;
    inset:5px!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    z-index:0!important;

    background:
      radial-gradient(
        ellipse at 22% 8%,
        rgba(255,255,255,.20),
        transparent 27%
      ),
      linear-gradient(
        108deg,
        rgba(255,255,255,.10),
        transparent 24% 69%,
        rgba(138,190,219,.05)
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.045),
        transparent 36%,
        rgba(0,0,0,.09)
      )!important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.055),
      inset 7px 0 16px rgba(255,255,255,.025),
      inset -8px 0 18px rgba(0,0,0,.11)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-hero>
  .outdoor-mobile-light-switch.tq-hero-light-switch::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    bottom:-13px!important;
    width:64%!important;
    height:18px!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    background:
      radial-gradient(
        ellipse,
        rgba(0,0,0,.42),
        transparent 70%
      )!important;
    filter:blur(8px)!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  /* Desktop hover changes are kept visually, but without moving the
     phone control away from its bottom-left anchor. */
  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-hero-light-switch:hover{
    transform:translateX(3px)!important;
    border-color:rgba(235,248,255,.30)!important;

    box-shadow:
      0 30px 66px rgba(0,0,0,.34),
      0 9px 22px rgba(0,0,0,.27),
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 0 22px rgba(175,216,238,.035)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-hero-light-switch:active{
    transform:translateX(1px) scale(.985)!important;
  }

  /* Desktop labels are visually hidden exactly like desktop. */
  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-hero-light-switch>
  .tq-hero-light-switch-label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  /* =======================================================
     STATUS ABOVE SWITCH — EXACT DESKTOP UI
  ======================================================= */

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-status{
    position:absolute!important;
    z-index:12!important;

    left:50%!important;
    top:-31px!important;

    transform:translateX(-50%)!important;

    width:max-content!important;

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

    pointer-events:none!important;
    white-space:nowrap!important;

    font:600 .52rem/1 "DM Sans",sans-serif!important;
    letter-spacing:.18em!important;
    text-indent:.18em!important;

    color:rgba(240,246,249,.82)!important;

    text-shadow:
      0 1px 8px rgba(0,0,0,.50)!important;

    opacity:.88!important;

    transition:
      color .35s ease,
      text-shadow .35s ease,
      opacity .35s ease!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-is-on
  .tq-hero-light-switch-status{
    color:rgba(255,226,182,.98)!important;

    text-shadow:
      0 1px 8px rgba(0,0,0,.46),
      0 0 12px rgba(221,126,47,.34)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch:not(.tq-is-on)
  .tq-hero-light-switch-status{
    color:rgba(199,224,238,.82)!important;

    text-shadow:
      0 1px 8px rgba(0,0,0,.50),
      0 0 10px rgba(72,127,154,.20)!important;
  }

  /* =======================================================
     TRACK — EXACT DESKTOP UI
  ======================================================= */

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-track{
    position:relative!important;
    z-index:2!important;

    width:var(--track-w)!important;
    min-width:var(--track-w)!important;
    max-width:var(--track-w)!important;

    height:var(--track-h)!important;
    min-height:var(--track-h)!important;
    max-height:var(--track-h)!important;

    margin:0!important;
    flex:none!important;

    overflow:hidden!important;

    border-radius:999px!important;
    border:1px solid rgba(228,241,248,.14)!important;

    -webkit-backdrop-filter:blur(13px) saturate(1.35)!important;
    backdrop-filter:blur(13px) saturate(1.35)!important;

    background:
      radial-gradient(
        ellipse at 50% 7%,
        rgba(226,130,52,.48),
        transparent 42%
      ),
      linear-gradient(
        180deg,
        rgba(186,84,24,.36),
        rgba(45,29,23,.20) 42%,
        rgba(8,15,20,.28) 70%,
        rgba(5,11,16,.38)
      )!important;

    box-shadow:
      inset 0 9px 16px rgba(0,0,0,.20),
      inset 0 -8px 15px rgba(0,0,0,.24),
      inset 0 0 0 1px rgba(255,255,255,.035),
      0 0 18px rgba(192,96,36,.08)!important;

    transition:
      background .55s ease,
      box-shadow .55s ease,
      border-color .55s ease!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-track::before{
    content:"ON"!important;

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

    left:50%!important;
    top:19px!important;

    transform:translateX(-50%)!important;

    color:rgba(255,244,224,.96)!important;

    font:600 .56rem/1 "DM Sans",sans-serif!important;
    letter-spacing:.18em!important;
    text-indent:.18em!important;

    text-shadow:
      0 1px 1px rgba(0,0,0,.45),
      0 0 8px rgba(255,191,114,.62),
      0 0 18px rgba(211,102,35,.58)!important;

    pointer-events:none!important;

    transition:
      top .46s cubic-bezier(.22,1,.36,1),
      color .35s ease,
      text-shadow .35s ease!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-track::after{
    content:""!important;

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

    left:7px!important;
    right:7px!important;
    top:6px!important;

    height:54px!important;

    border-radius:999px 999px 46% 46%!important;

    background:
      radial-gradient(
        ellipse at 50% 12%,
        rgba(255,255,255,.26),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(255,163,74,.22),
        rgba(255,86,0,.06)
      )!important;

    filter:blur(.3px)!important;
    opacity:.9!important;

    pointer-events:none!important;

    transition:
      top .46s cubic-bezier(.22,1,.36,1),
      background .45s ease,
      opacity .35s ease!important;
  }

  /* =======================================================
     THUMB — EXACT DESKTOP UI
  ======================================================= */

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-thumb{
    position:absolute!important;
    z-index:5!important;

    top:67px!important;
    left:4px!important;

    width:52px!important;
    height:var(--thumb-h)!important;

    display:block!important;

    border-radius:26px!important;
    overflow:hidden!important;

    color:transparent!important;

    border:1px solid rgba(231,245,252,.13)!important;

    background:
      linear-gradient(
        90deg,
        transparent 0 12%,
        rgba(0,0,0,.42) 12% 17%,
        rgba(255,255,255,.055) 18% 20%,
        transparent 21% 28%,
        rgba(0,0,0,.42) 29% 34%,
        rgba(255,255,255,.055) 35% 37%,
        transparent 38% 45%,
        rgba(0,0,0,.42) 46% 51%,
        rgba(255,255,255,.055) 52% 54%,
        transparent 55% 62%,
        rgba(0,0,0,.42) 63% 68%,
        rgba(255,255,255,.055) 69% 71%,
        transparent 72% 79%,
        rgba(0,0,0,.42) 80% 85%,
        rgba(255,255,255,.055) 86% 88%,
        transparent 89% 100%
      ),
      radial-gradient(
        ellipse at 30% 4%,
        rgba(255,255,255,.13),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(35,45,53,.78),
        rgba(10,16,21,.76)
      )!important;

    background-size:40px 40px,auto,auto!important;
    background-position:center 25px,center,center!important;
    background-repeat:no-repeat!important;

    -webkit-backdrop-filter:blur(10px) saturate(1.15)!important;
    backdrop-filter:blur(10px) saturate(1.15)!important;

    box-shadow:
      0 10px 19px rgba(0,0,0,.39),
      0 3px 5px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.19),
      inset 1px 0 0 rgba(255,255,255,.04),
      inset 0 -1px 0 rgba(0,0,0,.40)!important;

    transition:
      top .48s cubic-bezier(.2,.82,.2,1),
      transform .48s cubic-bezier(.2,.82,.2,1),
      box-shadow .38s ease!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-thumb::before,
  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-thumb::after{
    content:""!important;

    position:absolute!important;
    top:12px!important;

    width:8px!important;
    height:8px!important;

    border-radius:50%!important;
    border:1px solid rgba(0,0,0,.75)!important;

    background:
      radial-gradient(
        circle at 36% 30%,
        #6e757b,
        #24292d 42%,
        #0a0d0f 78%
      )!important;

    box-shadow:
      0 1px 2px rgba(0,0,0,.8),
      inset 0 1px 1px rgba(255,255,255,.15)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-thumb::before{
    left:8px!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-thumb::after{
    right:8px!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch
  .tq-hero-light-switch-thumb svg{
    display:none!important;
  }

  /* =======================================================
     LIGHT ON — EXACT DESKTOP UI
  ======================================================= */

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-is-on{
    border-color:rgba(221,126,47,.24)!important;

    box-shadow:
      0 24px 58px rgba(0,0,0,.50),
      0 0 28px rgba(192,96,36,.12),
      inset 0 1px 0 rgba(255,255,255,.11),
      inset 0 -2px 8px rgba(0,0,0,.72)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-is-on
  .tq-hero-light-switch-track{
    background:
      radial-gradient(
        ellipse at 50% 5%,
        rgba(255,177,94,.72),
        rgba(206,91,26,.30) 32%,
        transparent 60%
      ),
      linear-gradient(
        180deg,
        rgba(211,103,34,.48),
        rgba(116,50,21,.25) 34%,
        rgba(10,16,21,.28) 65%,
        rgba(5,11,16,.38)
      )!important;

    border-color:rgba(246,187,124,.22)!important;

    box-shadow:
      inset 0 9px 16px rgba(0,0,0,.16),
      inset 0 -8px 15px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,240,218,.16),
      0 0 20px rgba(219,106,34,.18),
      0 0 38px rgba(192,96,36,.08)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-is-on
  .tq-hero-light-switch-thumb{
    top:72px!important;
    left:4px!important;
    transform:translateY(0)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.tq-is-on
  .tq-hero-light-switch-thumb::before{
    background:
      radial-gradient(
        circle at 35% 30%,
        #ffe2b0,
        #d66f27 40%,
        #55210c 78%
      )!important;

    box-shadow:
      0 0 7px rgba(231,116,42,.72),
      inset 0 1px 1px rgba(255,255,255,.24)!important;
  }

  /* =======================================================
     LIGHT OFF — EXACT DESKTOP UI
  ======================================================= */

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch:not(.tq-is-on)
  .tq-hero-light-switch-track{
    background:
      radial-gradient(
        ellipse at 50% 95%,
        rgba(72,154,198,.40),
        transparent 42%
      ),
      linear-gradient(
        180deg,
        rgba(5,12,17,.40),
        rgba(11,22,30,.30) 48%,
        rgba(26,82,112,.29) 78%,
        rgba(29,105,144,.37)
      )!important;

    border-color:rgba(138,194,224,.18)!important;

    box-shadow:
      inset 0 9px 16px rgba(0,0,0,.25),
      inset 0 -8px 15px rgba(0,0,0,.14),
      inset 0 -1px 0 rgba(192,229,248,.10),
      0 0 20px rgba(52,131,176,.08)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch:not(.tq-is-on)
  .tq-hero-light-switch-track::before{
    content:"OFF"!important;
    top:132px!important;

    color:rgba(225,242,250,.94)!important;

    text-shadow:
      0 1px 1px rgba(0,0,0,.5),
      0 0 8px rgba(91,184,232,.52),
      0 0 18px rgba(49,131,177,.44)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch:not(.tq-is-on)
  .tq-hero-light-switch-track::after{
    top:104px!important;

    background:
      radial-gradient(
        ellipse at 50% 85%,
        rgba(162,224,255,.18),
        transparent 36%
      ),
      linear-gradient(
        0deg,
        rgba(56,169,225,.17),
        rgba(41,108,149,.04)
      )!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch:not(.tq-is-on)
  .tq-hero-light-switch-thumb{
    top:4px!important;
    left:4px!important;
    transform:translateY(0)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch:not(.tq-is-on)
  .tq-hero-light-switch-thumb::after{
    background:
      radial-gradient(
        circle at 35% 30%,
        #b9e7ff,
        #397fa4 42%,
        #0b2432 78%
      )!important;

    box-shadow:
      0 0 7px rgba(67,158,205,.62),
      inset 0 1px 1px rgba(255,255,255,.20)!important;
  }

  /* =======================================================
     IMAGE CROSSFADE / LOCKED ZOOM / ARROW STATE
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-light-crossfade-layer{
    pointer-events:none!important;
    opacity:1!important;

    transition:
      opacity 420ms cubic-bezier(.22,1,.36,1)!important;

    will-change:opacity!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-crossfade-layer.is-fading{
    opacity:0!important;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow{
    animation:none!important;
    filter:none!important;
    opacity:.34!important;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off :is(
    [data-outdoor-zoom-trigger],
    [data-facade-zoom-trigger]
  ){
    opacity:.55!important;
    filter:saturate(.42) brightness(.76)!important;
    cursor:not-allowed!important;
    pointer-events:auto!important;
  }

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

  .outdoor-mobile-light-alert{
    position:fixed;
    z-index:2147483100;

    left:50%;
    bottom:max(8px,env(safe-area-inset-bottom,0px));

    transform:translate3d(-50%,14px,0) scale(.985);

    width:min(310px,calc(100vw - 74px));
    min-height:54px;

    padding:8px 10px;

    display:flex;
    align-items:center;
    gap:9px;

    direction:rtl;

    color:#f4f7f8;
    background:rgba(7,12,20,.92);

    border:1px solid rgba(220,229,232,.17);
    border-radius:14px;

    box-shadow:0 14px 36px rgba(0,0,0,.32);

    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .22s ease,
      transform .28s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .28s;

    font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  }

  .outdoor-mobile-light-alert.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate3d(-50%,0,0) scale(1);
    transition-delay:0s;
  }

  .outdoor-mobile-light-alert__icon{
    flex:0 0 34px;
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#f3b36d;
    background:rgba(192,96,36,.12);
    border:1px solid rgba(232,174,88,.18);
  }

  .outdoor-mobile-light-alert__icon svg{
    width:18px;
    height:18px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .outdoor-mobile-light-alert__copy{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:2px;

    text-align:right;
  }

  .outdoor-mobile-light-alert__copy strong{
    font:700 clamp(10px,2.8vw,12px)/1.3
      "IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  }

  .outdoor-mobile-light-alert__copy small{
    font:400 clamp(8px,2.1vw,9.5px)/1.4
      "IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;

    color:rgba(244,247,248,.68);
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-light-switch.is-rate-limited{
    cursor:not-allowed!important;
    filter:saturate(.35) brightness(.72)!important;
    opacity:.72!important;
  }

  .outdoor-mobile-light-rate-alert{
    border-color:rgba(255,170,90,.22)!important;
  }

  .outdoor-mobile-light-rate-alert
  .outdoor-mobile-light-alert__icon{
    color:#ffb15f!important;
    background:rgba(192,96,36,.14)!important;
    border-color:rgba(255,177,95,.24)!important;
  }

  @media (prefers-reduced-motion:reduce){
    #outdoorHeroMobileSection .outdoor-mobile-light-crossfade-layer,
    .outdoor-mobile-light-alert{
      transition:none!important;
    }
  }
}

/* MOBILE ONLY — hard separation from desktop. */
@media (min-width:99999px){
  #outdoorHeroMobileSection .outdoor-mobile-light-switch,
  .outdoor-mobile-light-alert{
    display:none!important;
  }
}


/* =========================================================
   MOBILE COMPACT POSITION OVERRIDE
   Keep the EXACT desktop UI proportions, only scale the whole
   control down and anchor it bottom-left like the WhatsApp button.
========================================================= */

@media (min-width:0px){

  #outdoorHeroMobileSection
  .outdoor-mobile-hero>
  .outdoor-mobile-light-switch.tq-hero-light-switch{
    left:auto!important;
    right:3.4%!important;
    top:auto!important;
    bottom:15%!important;

    transform-origin:right bottom!important;
    transform:scale(.52)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-hero>
  .outdoor-mobile-light-switch.tq-hero-light-switch:hover{
    transform:scale(.52)!important;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-hero>
  .outdoor-mobile-light-switch.tq-hero-light-switch:active{
    transform:scale(.50)!important;
  }
}


}

/* Adapted from outdoor-product-frames-mobile.css; original rules are unchanged. */
@media (min-width:901px) and
       (not ((min-width:901px) and (min-height:600px) and
             (min-aspect-ratio:6/5) and (orientation:landscape))) {
/* =========================================================
   TAQA OUTDOOR — MOBILE STREET FRAME ENGINE V1
   Same transition architecture as desktop.
   Mobile only. No product detail card yet.
========================================================= */

@media (min-width:0px){

  #outdoorHeroMobileSection,
  #outdoorHeroMobileSection .outdoor-mobile-hero{
    position:relative;
  }

  /* Persistent decoded stack. */
  #outdoorHeroMobileSection .outdoor-mobile-frame-stack{
    position:absolute;
    inset:0;
    z-index:40;

    width:100%;
    height:100%;

    overflow:hidden;
    border-radius:inherit;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:#081522;

    contain:layout paint style;
    isolation:isolate;
    transform:translateZ(0);
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-frame-stack.is-active{
    opacity:1;
    visibility:visible;
    will-change:contents;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-frame-stack__img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    object-fit:fill;
    object-position:center;

    opacity:0;
    visibility:hidden;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-frame-stack__img.is-current{
    opacity:1;
    visibility:visible;
  }

  /* Final zoom frame only: 5% darker so the separated front layer
     reads with slightly stronger contrast. */
  #outdoorHeroMobileSection
  .outdoor-mobile-frame-stack__img[data-frame-index="12"]{
    filter:brightness(.95);
  }


  /* ---------------------------------------------------------
     During forward/reverse:
     remove the normal mobile presentation from the visual stack.
     The persistent frame engine becomes the entire scene.
  --------------------------------------------------------- */

  #outdoorHeroMobileSection:is(
    .is-mobile-product-zooming,
    .is-mobile-product-detail
  ) .outdoor-mobile-hero__frame{
    visibility:hidden!important;
  }

  #outdoorHeroMobileSection:is(
    .is-mobile-product-zooming,
    .is-mobile-product-detail
  ) .outdoor-mobile-cards-layer,

  #outdoorHeroMobileSection:is(
    .is-mobile-product-zooming,
    .is-mobile-product-detail
  ) .outdoor-mobile-front-layer,

  #outdoorHeroMobileSection.is-mobile-product-zooming
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* On frame 13 keep the switch, but move it into the old X position. */
  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch{
    display:grid!important;

    left:clamp(14px,4vw,20px)!important;
    right:auto!important;
    top:auto!important;
    bottom:clamp(88px,14vh,102px)!important;

    transform-origin:left bottom!important;
    transform:scale(.52)!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;

    z-index:2147481900!important;
  }

  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch:hover{
    transform:scale(.52)!important;
  }

  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch:active{
    transform:scale(.50)!important;
  }

  /* Stop expensive animated/glowing card UI before stack playback. */
  #outdoorHeroMobileSection:is(
    .is-mobile-product-zooming,
    .is-mobile-product-detail
  ) .outdoor-mobile-card-arrow{
    animation:none!important;
    filter:none!important;
    will-change:auto!important;
  }


  /* External floating CTA must not cover the frame-13 product card. */
  html.taqa-mobile-product-focus-active #myAliceWebChat,
  body.taqa-mobile-product-focus-active #myAliceWebChat{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #outdoorHeroMobileSection.is-mobile-product-preparing
  [data-outdoor-zoom-trigger]{
    cursor:progress!important;
  }


  /* =======================================================
     FRAME 13 — MOBILE PRODUCT DETAIL
     Layer order:
     frame 13 stack -> glass card -> separated front layer -> X
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-layer{
    position:absolute;
    inset:0;
    z-index:50;

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .30s ease,
      visibility .30s ease;
  }

  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-product-detail-layer{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-shade{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 56% 30%,
      rgba(3,9,17,.06) 0%, rgba(3,9,17,.15) 62%,
      rgba(3,9,17,.22) 100%);
  }

  /* Card sits BEHIND the pole/front layer.
     Geometry is tuned against the supplied 9:16 frame-13 reference. */
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card{
    --mp-warm:#ffb15f;
    --mp-cream:#f4eee5;

    position:absolute;
    z-index:2;

    /* The left edge meets the pole while the foreground stays above the glass. */
    left:calc(var(--detail-card-fill-left,24.5%) - 6px + 1vw);
    right:4.5%;
    top:calc(44.75% - 10px);
    bottom:max(10px, env(safe-area-inset-bottom, 0px));

    padding:
      46px
      clamp(12px,3.2vw,17px)
      clamp(12px,3vw,16px);

    border:1px solid rgba(255,255,255,.17);
    border-radius:0 23px 23px 0;

    color:var(--mp-cream);
    text-align:right;

    background:
      radial-gradient(
        circle at 86% 9%,
        rgba(255,177,95,.10),
        transparent 31%
      ),
      linear-gradient(
        145deg,
        rgba(12,29,44,.72),
        rgba(5,17,28,.58)
      );

    -webkit-backdrop-filter:blur(19px) saturate(1.12);
    backdrop-filter:blur(19px) saturate(1.12);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.25),
      0 22px 50px rgba(0,0,0,.24),
      0 0 34px rgba(255,177,95,.035);

    opacity:0;
    transform:translate3d(-7%,0,0) scale(.95);
    transform-origin:right center;

    pointer-events:none;
    box-sizing:border-box;
    overflow:visible;

    transition:
      opacity .30s ease .06s,
      transform .60s cubic-bezier(.22,1,.36,1) .03s;
  }

  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-product-detail-card{
    opacity:1;
    transform:translate3d(0,0,0) scale(.96);
    pointer-events:auto;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:inherit;
    pointer-events:none;

    background:
      linear-gradient(
        128deg,
        rgba(255,255,255,.07),
        transparent 28%,
        transparent 72%,
        rgba(255,177,95,.03)
      );
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__content{
    position:relative;
    z-index:2;

    /* Text and variants stay in the clear area to the right of the pole.
       Only the action row uses the free space farther left. */
    width:calc(72% + 9px);
    height:100%;
    min-height:0;

    margin-left:auto;
    margin-right:0;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    /* Card itself is now raised; keep content comfortably inside it. */
    transform:translateY(-8px);

    /* Keep the stack compact with the two actions on one row. */
    gap:8px;

    padding-bottom:30px;
    box-sizing:border-box;

    overflow:visible;

    direction:rtl;
    text-align:right;
  }

  /* Identity stays on the clear right side below the lamp head. */
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__title,
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__specs{
    width:min(100%,150px);
    margin-left:auto;
    margin-right:0;
    text-align:right;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__eyebrow{
    width:min(100%,150px);
    margin-left:auto;
    margin-right:0;
    text-align:center;
    transform:translateX(18px);
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;

    width:min(100%,150px);
    margin-left:auto;
    margin-right:0;
    margin-bottom:6px;

    direction:ltr;
    text-align:center;

    color:rgba(255,213,166,.76);

    font:600 clamp(8px,2.05vw,9px)/1
      "DM Sans","Cairo",sans-serif;

    letter-spacing:.13em;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__title{
    margin:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;

    width:100%;
    text-align:right;
    direction:rtl;

    color:#fffaf3;

    font-family:"Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
    line-height:1.12;
    letter-spacing:-.025em;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__title-main{
    display:block;
    width:100%;
    text-align:right;
    font-size:clamp(17px,4.4vw,20px);
    font-weight:700;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__title-sub{
    display:block;
    width:100%;
    text-align:right;
    color:rgba(255,220,179,.84);
    font-size:clamp(10px,2.55vw,11px);
    font-weight:600;
    letter-spacing:0;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__specs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:4px;

    margin-top:7px;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-detail-card__specs span{
    min-width:0;
    padding:4px 5px;

    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
      );

    color:rgba(255,245,232,.82);

    font:600 clamp(6px,1.65vw,7px)/1
      "Cairo",sans-serif;

    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-variant-picker{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 7px;

    width:100%;
    margin-top:4px;
    flex:0 0 auto;

    direction:rtl;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-variant{
    min-height:33px;
    width:100%;
    min-width:0;
    padding:5px 8px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;

    color:rgba(249,245,238,.82);

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.065),
        rgba(7,21,33,.12)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 4px 10px rgba(0,0,0,.10);

    cursor:pointer;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-variant span{
    font:700 clamp(8.5px,2.3vw,10px)/1.08
      "DM Sans","Cairo",sans-serif;

    white-space:nowrap;
  }

  /* 336px-wide safeguard for the two long SENSOR options only. */
  #outdoorHeroMobileSection
  .outdoor-mobile-product-variant[data-variant="100W DOB + Sensor"],
  #outdoorHeroMobileSection
  .outdoor-mobile-product-variant[data-variant="150W DOB + Sensor"]{
    padding-left:3px;
    padding-right:3px;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-variant[data-variant="100W DOB + Sensor"] span,
  #outdoorHeroMobileSection
  .outdoor-mobile-product-variant[data-variant="150W DOB + Sensor"] span{
    font-size:6.4px;
    letter-spacing:-.04em;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-variant.is-selected{
    color:#fff8ef;

    border-color:rgba(255,196,132,.52);

    background:
      linear-gradient(
        180deg,
        rgba(255,193,126,.15),
        rgba(135,73,31,.055)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,244,229,.17),
      0 0 14px rgba(218,126,54,.13);
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__middle{
    min-height:0;
    flex:0 0 auto;

    display:grid;
    grid-template-columns:minmax(108px,1fr) minmax(90px,112px);
    align-items:center;
    gap:clamp(6px,1.7vw,9px);

    width:calc(100% + var(--detail-middle-extension,56px));
    margin-left:calc(-1 * var(--detail-middle-extension,56px));
    margin-top:0;
    padding:0;
    box-sizing:border-box;
    direction:rtl;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__bottom{
    margin-top:0;
    margin-bottom:6px;
    padding-top:8px;
    padding-bottom:8px;
    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    border-top:0;

    direction:rtl;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__bottom::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:-38%;
    height:1px;
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.13) 28%,
      rgba(255,255,255,.09)
    );
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__price{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    width:calc(100% - 4px);
    min-height:34px;
    margin:0 auto;
    padding:5px 10px;
    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.055),
        rgba(8,24,37,.10)
      );

    text-align:center;
    direction:rtl;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-detail-card__price strong{
    color:#fff7ed;

    font:700 clamp(20px,5.8vw,27px)/1
      "DM Sans","Cairo",sans-serif;

    letter-spacing:-.035em;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-detail-card__price-label{
    color:rgba(255,245,232,.86);
    font:700 clamp(9px,2.25vw,10.5px)/1 "Cairo",sans-serif;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-detail-card__price-currency{
    color:rgba(255,194,128,.85);
    font:700 clamp(7.5px,2vw,9.5px)/1 "Cairo",sans-serif;
  }


  #outdoorHeroMobileSection .outdoor-mobile-product-detail-cta{
    position:relative;

    width:100%;
    min-width:0;
    height:38px;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 clamp(8px,2.7vw,12px);

    overflow:visible;
    isolation:isolate;

    border:1px solid rgba(255,207,153,.30);
    border-radius:999px;

    color:rgba(247,243,236,.96);
    text-decoration:none;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(8,24,37,.18)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 6px 15px rgba(0,0,0,.17),
      0 0 14px rgba(192,96,36,.09);
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-cta__tube{
    position:absolute;
    z-index:2;

    left:50%;
    top:-9px;

    width:82%;
    aspect-ratio:1416 / 402;

    transform:translateX(-50%);
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-cta__tube-img{
    position:absolute;
    inset:0;

    width:100%;
    height:auto;

    object-fit:contain;
    display:block;
    pointer-events:none;

    transition:opacity .28s ease;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-detail-cta__tube-img--on{
    opacity:1;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-detail-cta__tube-img--off{
    opacity:0;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-product-detail-cta__tube-img--on{
    opacity:0;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-product-detail-cta__tube-img--off{
    opacity:1;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-cta__label{
    position:relative;
    z-index:3;

    width:100%;

    display:block;

    text-align:center;
    direction:rtl;

    font:700 clamp(9.5px,2.6vw,11px)/1.2
      "Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;

    white-space:normal;
    overflow-wrap:normal;

    text-shadow:
      0 1px 2px rgba(0,0,0,.27),
      0 0 8px rgba(232,174,88,.12);
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add{
    width:100%;
    min-width:0;
    max-width:none;
    height:38px;

    justify-self:stretch;
    transform:none;

    padding:0 5px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    box-sizing:border-box;

    border:1px solid rgba(255,207,153,.28);
    border-radius:999px;

    color:rgba(247,243,236,.96);

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.09),
        rgba(8,24,37,.20)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 6px 15px rgba(0,0,0,.17),
      0 0 13px rgba(192,96,36,.08);

    cursor:pointer;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add svg{
    width:15px;
    height:15px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add > span{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
    clip-path:none;
    white-space:nowrap;

    font:700 clamp(8.5px,2.35vw,10px)/1.2 "Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
    letter-spacing:0;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add.is-added{
    color:#fff8ef;
    border-color:rgba(255,235,207,.48);

    background:
      linear-gradient(
        180deg,
        rgba(255,193,126,.16),
        rgba(135,73,31,.055)
      );
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add.is-loading{
    pointer-events:none;
    opacity:.70;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add.is-error{
    border-color:rgba(255,177,95,.42);
    color:#ffd2a1;
  }

  /* The supplied separated frame-13 foreground sits above the card. */
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-front{
    position:absolute;
    inset:0;
    z-index:5;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    object-fit:fill;
    object-position:center;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;

    opacity:0;
    transform:none;

    transition:
      opacity .30s ease .04s;
  }

  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-product-detail-front{
    opacity:1;
    transform:none;
  }


  /* Fill-space connector: the front PNG naturally hides its origin. */
  #outdoorHeroMobileSection .outdoor-mobile-product-back__connector{
    position:absolute;
    inset:0;
    z-index:4;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    fill:none;
    stroke:rgba(255,227,190,.62);
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
  }

  /* The control follows a point in the same 720x1280 front image. */

  #outdoorHeroMobileSection .outdoor-mobile-product-back{
    position:absolute;
    z-index:6;

    top:calc(var(--lamp-back-y,206px) - 20px);
    right:auto;
    left:clamp(8px,calc(var(--lamp-back-x,75px) - 47px),calc(100% - 94px));
    bottom:auto;

    width:94px;
    max-width:94px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;

    transform:none;
    direction:ltr;

    color:rgba(255,232,205,.76);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .22s ease .08s,
      visibility .22s ease .08s;
  }

  #outdoorHeroMobileSection.is-mobile-product-detail
  .outdoor-mobile-product-back{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  #outdoorHeroMobileSection .outdoor-mobile-product-back__label{
    position:relative;
    left:0;

    width:max-content;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;

    color:rgba(255,245,233,.92);
    text-shadow:0 1px 3px rgba(0,0,0,.80);

    font:700 clamp(8.5px,2.25vw,10px)/1.3
      "Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;

    white-space:nowrap;
    direction:rtl;
    text-align:center;
  }



  /* =======================================================
     X / REVERSE CONTROL
     X stays above the new frame-13 product detail composition.
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-product-close{
    position:relative;
    z-index:1;

    left:auto;
    right:auto;
    top:auto;
    bottom:auto;

    width:40px;
    height:40px;
    padding:0;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;

    color:#fff;

    background:
      radial-gradient(
        circle at 28% 20%,
        rgba(255,255,255,.12),
        transparent 34%
      ),
      rgba(7,14,22,.66);

    -webkit-backdrop-filter:blur(13px) saturate(120%);
    backdrop-filter:blur(13px) saturate(120%);

    box-shadow:
      0 9px 22px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.17);

    cursor:pointer;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:scale(.92);

    transition:
      opacity .18s ease,
      transform .22s cubic-bezier(.22,1,.36,1),
      visibility .18s ease;

    touch-action:manipulation;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-close.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:scale(1);
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-close:active{
    transform:scale(.94);
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-product-close.is-visible{
    opacity:.58;
    cursor:not-allowed;
    filter:saturate(.55) brightness(.82);
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-product-close.is-visible:active{
    transform:scale(1);
  }


  #outdoorHeroMobileSection
  .outdoor-mobile-product-close:focus-visible{
    outline:2px solid #ffb15f;
    outline-offset:4px;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-product-close svg{
    width:16px;
    height:16px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }

  /* =======================================================
     ADD-TO-CART TOAST
  ======================================================= */

  .outdoor-mobile-cart-toast{
    position:fixed;

    left:50%;
    bottom:max(18px,env(safe-area-inset-bottom,0px));

    z-index:2147483600;

    display:flex;
    align-items:center;
    gap:8px;

    min-width:180px;
    max-width:calc(100vw - 42px);

    padding:9px 12px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:13px;

    background:
      linear-gradient(
        145deg,
        rgba(7,14,22,.96),
        rgba(16,29,40,.92)
      );

    color:#f5f7f8;

    box-shadow:
      0 14px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.10);

    -webkit-backdrop-filter:blur(14px) saturate(120%);
    backdrop-filter:blur(14px) saturate(120%);

    transform:translate3d(-50%,24px,0);
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .24s ease,
      transform .36s cubic-bezier(.22,1,.36,1),
      visibility .24s ease;

    direction:rtl;
  }

  .outdoor-mobile-cart-toast.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate3d(-50%,0,0);
  }

  .outdoor-mobile-cart-toast__icon{
    width:26px;
    height:26px;
    flex:0 0 26px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#ffd39f;
    background:rgba(192,96,36,.14);
    border:1px solid rgba(255,177,95,.20);
  }

  .outdoor-mobile-cart-toast__icon svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .outdoor-mobile-cart-toast__text{
    font:700 11px/1.25 "Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
    white-space:nowrap;
  }


  /* Taller portrait phones adjust only the card's vertical rhythm. */
  @media
    (orientation:portrait)
    and (min-width:360px)
    and (max-width:440px)
    and (min-height:780px)
    and (max-height:960px)
    and (min-aspect-ratio:3/8)
    and (max-aspect-ratio:9/16){

    /* Let the glass end shortly after the price on tall phones. */
    #outdoorHeroMobileSection .outdoor-mobile-product-detail-card{
      bottom:auto;
      height:auto;
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__content{
      height:auto;
      padding-bottom:0;
      gap:clamp(9px,1.05vh,11px);
      transform:translateY(-8px);
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__eyebrow{
      margin-bottom:clamp(5px,.7vh,7px);
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__specs{
      margin-top:clamp(6px,.8vh,8px);
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-variant-picker{
      margin-top:clamp(5px,.7vh,7px);
      gap:clamp(6px,.75vh,8px) 8px;
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-variant{
      min-height:clamp(32px,4vh,35px);
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__bottom{
      margin-top:clamp(2px,.45vh,5px);
      padding-top:clamp(8px,1vh,10px);
    }

    #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__bottom::before{
      left:-40%;
    }
  }


  @media (prefers-reduced-motion:reduce){
    #outdoorHeroMobileSection
    .outdoor-mobile-product-close{
      transition:none!important;
    }

    #outdoorHeroMobileSection

    .outdoor-mobile-cart-toast{
      transition:none!important;
    }
  }
}

/* Hard separation from desktop. */
@media (min-width:99999px){
  .outdoor-mobile-frame-stack,
  .outdoor-mobile-product-close,
  .outdoor-mobile-product-detail-layer{
    display:none!important;
  }
}

}

/* Adapted from facade-product-frames-mobile.css; original rules are unchanged. */
@media (min-width:901px) and
       (not ((min-width:901px) and (min-height:600px) and
             (min-aspect-ratio:6/5) and (orientation:landscape))) {
/* =========================================================
   TAQA OUTDOOR — MOBILE FACADE ZOOM FRAME ENGINE V1
   Independent companion to the street-light transition.

   Same proven presentation logic:
   - persistent full-cover frame stack
   - live hero/cards/front layer disappear during playback
   - final Frame 13 remains on screen
   - temporary X reverses the SAME stack 13 -> 01
========================================================= */

@media (min-width:0px){

  /* =======================================================
     FACADE TRANSITION STAGE
     Frame stack uses fill across the hero.
     No extra blurred Frame 13 background layer is used.
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-facade-morph-stage{
    position:absolute;
    z-index:60;

    left:50%;
    top:50%;

    width:var(--facade-stage-width,100vw);
    height:var(--facade-stage-height,100dvh);

    overflow:hidden;

    transform-origin:center center;
    transform:
      translate(-50%,-50%)
      scale(var(--facade-stage-current-scale,1));

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:#081522;

    contain:layout paint style;
    isolation:isolate;

    /*
      13 frame updates happen every 50ms.
      A slightly longer linear transform bridges those discrete updates,
      making the container contraction/expansion visibly continuous.
    */
    transition:transform 82ms linear;

    will-change:transform;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-morph-stage.is-active{
    opacity:1;
    visibility:visible;
  }


  #outdoorHeroMobileSection,
  #outdoorHeroMobileSection .outdoor-mobile-hero{
    position:relative;
  }

  /* =======================================================
     PERSISTENT FACADE FRAME STACK
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-facade-frame-stack{
    position:absolute;
    inset:0;
    z-index:60;

    width:100%;
    height:100%;

    overflow:hidden;
    border-radius:inherit;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:#081522;

    contain:layout paint style;
    isolation:isolate;
    transform:translateZ(0);
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-frame-stack.is-active{
    opacity:1;
    visibility:visible;
    will-change:contents;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-frame-stack__img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    object-fit:fill;
    object-position:center;

    opacity:0;
    visibility:hidden;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-frame-stack__img.is-current{
    opacity:1;
    visibility:visible;
  }

  /* =======================================================
     WHILE FACADE SEQUENCE OWNS THE HERO
  ======================================================= */

  #outdoorHeroMobileSection:is(
    .is-mobile-facade-zooming,
    .is-mobile-facade-final
  ) .outdoor-mobile-hero__frame{
    visibility:hidden!important;
  }

  #outdoorHeroMobileSection:is(
    .is-mobile-facade-zooming,
    .is-mobile-facade-final
  ) .outdoor-mobile-cards-layer{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #outdoorHeroMobileSection:is(
    .is-mobile-facade-zooming,
    .is-mobile-facade-final
  ) .outdoor-mobile-front-layer{
    opacity:0!important;
    visibility:hidden!important;
  }

  /* Keep the existing LIGHT ON/OFF switch INSIDE the transition. */
  #outdoorHeroMobileSection:is(
    .is-mobile-facade-zooming,
    .is-mobile-facade-final
  ) .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch{
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:95!important;
  }

  /*
    FINAL SWITCH ANCHOR
    The switch is tied directly to the RIGHT product card geometry.

    Right-card center: 84.36%
    Card top:          43.4375%
    Card height:       38.20%
    Card bottom:       81.6375%

    This means the switch always remains directly UNDER the right card,
    regardless of phone height / aspect ratio.
  */
  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch{
    left:84.36%!important;
    right:auto!important;

    top:calc(81.6375% + clamp(10px,1.6dvh,16px))!important;
    bottom:auto!important;

    transform-origin:center top!important;
    transform:translateX(-50%) scale(.52)!important;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch:hover{
    transform:translateX(-50%) scale(.52)!important;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch:active{
    transform:translateX(-50%) scale(.50)!important;
  }


  /* Short-screen safeguard: preserve "under card" relationship
     while keeping the switch inside the visible hero. */
  @media (max-height:640px){
    #outdoorHeroMobileSection.is-mobile-facade-final
    .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch{
      top:calc(81.6375% + 8px)!important;
      transform:translateX(-50%) scale(.48)!important;
    }

    #outdoorHeroMobileSection.is-mobile-facade-final
    .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch:hover{
      transform:translateX(-50%) scale(.48)!important;
    }

    #outdoorHeroMobileSection.is-mobile-facade-final
    .outdoor-mobile-hero > .outdoor-mobile-light-switch.tq-hero-light-switch:active{
      transform:translateX(-50%) scale(.46)!important;
    }
  }

  /* Stop expensive guide-arrow animation before stack playback. */
  #outdoorHeroMobileSection:is(
    .is-mobile-facade-zooming,
    .is-mobile-facade-final
  ) .outdoor-mobile-card-arrow{
    animation:none!important;
    filter:none!important;
    will-change:auto!important;
  }

  #outdoorHeroMobileSection.is-mobile-facade-preparing
  [data-facade-zoom-trigger]{
    cursor:progress!important;
  }

  /* Hide external WhatsApp while the facade sequence owns the viewport. */
  html.taqa-mobile-facade-focus-active #myAliceWebChat,
  body.taqa-mobile-facade-focus-active #myAliceWebChat{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }


  /* =======================================================
     FRAME 13 — FACADE DETAIL COMPOSITION
     Exact mobile front-layer source: 720x1280.
     Measured lamp alpha centers:
       LEFT   x ≈ 114px  = 15.85%
       CENTER x ≈ 360px  = 50.00%
       RIGHT  x ≈ 607px  = 84.36%
     Lamp bottoms sit around y ≈ 622px = 48.6%.
     Layer order:
       frame13 -> heading/cards -> separated front -> X
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-facade-detail-layer{
    position:absolute;
    inset:0;
    z-index:70;

    width:100%;
    height:100%;
    overflow:hidden;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .18s ease,
      visibility .18s ease;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-detail-layer{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* -------------------------------------------------------
     MOBILE HEADLINE
  ------------------------------------------------------- */

  #outdoorHeroMobileSection .outdoor-mobile-facade-detail-heading{
    position:absolute;
    z-index:2;

    left:50%;
    top:26.5625%;
    width:87.22%;

    transform:translate(-50%,-50%);

    padding:9px 12px 10px;
    box-sizing:border-box;

    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;

    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.10),transparent 34%),
      radial-gradient(circle at 88% 100%,rgba(192,96,36,.07),transparent 38%),
      linear-gradient(145deg,rgba(8,19,30,.60),rgba(14,24,34,.40));

    -webkit-backdrop-filter:blur(14px) saturate(122%);
    backdrop-filter:blur(14px) saturate(122%);

    box-shadow:
      0 14px 32px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -1px 0 rgba(0,0,0,.16);

    color:#f5f7f8;
    text-align:center;
    direction:rtl;

    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(13px,3.7vw,17px);
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.018em;

    white-space:nowrap;
    pointer-events:none;

    opacity:0;
    transform:translate(-50%,-50%) translateY(-7px);

    transition:
      opacity .34s ease .14s,
      transform .52s cubic-bezier(.22,1,.36,1) .12s;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-detail-heading{
    opacity:1;
    transform:translate(-50%,-50%) translateY(0);
  }

  /* -------------------------------------------------------
     THREE MOBILE GLASS CARDS
     Start just behind/lower than lamp bodies.
  ------------------------------------------------------- */

  #outdoorHeroMobileSection .outdoor-mobile-facade-detail-cards{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-glass-card{
    position:absolute;
    z-index:1;

    top:43.4375%;
    width:25.21%;
    height:38.20%;

    border:1px solid rgba(255,255,255,.15);
    border-radius:clamp(14px,4vw,20px);

    background:
      radial-gradient(
        90% 52% at 20% 4%,
        rgba(255,255,255,.11),
        transparent 58%
      ),
      radial-gradient(
        82% 65% at 86% 90%,
        rgba(192,96,36,.065),
        transparent 68%
      ),
      linear-gradient(
        145deg,
        rgba(11,23,35,.49),
        rgba(15,24,32,.31)
      );

    -webkit-backdrop-filter:blur(16px) saturate(122%);
    backdrop-filter:blur(16px) saturate(122%);

    box-shadow:
      0 20px 44px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.20);

    overflow:visible;
    pointer-events:auto;

    opacity:0;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-glass-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    pointer-events:none;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.52),
        rgba(255,255,255,.10) 20%,
        transparent 48%,
        rgba(255,177,95,.10) 100%
      );

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;

    opacity:.42;
  }

  /* Exact centers from the supplied 720x1280 mobile foreground. */
  #outdoorHeroMobileSection .outdoor-mobile-facade-glass-card--1{
    left:15.85%;
    transform:translate3d(calc(-50% - 112vw),0,0);
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-glass-card--2{
    left:50%;
    transform:translate3d(calc(-50% + 112vw),0,0);
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-glass-card--3{
    left:84.36%;
    transform:translate3d(calc(-50% + 112vw),0,0);
  }

  /*
    Same entrance direction/timing logic as the desktop facade:
    left card comes from LEFT, center/right come from RIGHT.
  */
  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-glass-card--1{
    animation:
      taqaMobileFacadeCardInLeft
      880ms cubic-bezier(.16,1,.30,1)
      50ms both;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-glass-card--2{
    animation:
      taqaMobileFacadeCardInRight
      900ms cubic-bezier(.16,1,.30,1)
      100ms both;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-glass-card--3{
    animation:
      taqaMobileFacadeCardInRight
      920ms cubic-bezier(.16,1,.30,1)
      155ms both;
  }

  /* -------------------------------------------------------
     MOBILE PRODUCT CONTENT
  ------------------------------------------------------- */

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-content{
    position:absolute;
    inset:0;
    z-index:2;

    padding:
      clamp(52px,14.8vw,66px)
      clamp(5px,1.8vw,8px)
      clamp(8px,2.4vw,11px);

    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
    direction:rtl;
    color:#f6f2eb;

    overflow:visible;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-power{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:42px;
    padding:4px 6px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;

    color:rgba(255,210,164,.88);
    background:rgba(255,255,255,.045);

    font:700 clamp(8px,2.3vw,10px)/1 "DM Sans","Cairo",sans-serif;
    letter-spacing:.03em;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-title{
    margin:5px 0 0;

    color:#fffaf3;

    font-family:"Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
    font-size:clamp(9px,2.65vw,11px);
    font-weight:700;
    line-height:1.3;

    min-height:2.6em;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-description{
    margin:3px 0 0;

    color:rgba(243,239,232,.68);

    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(6.5px,1.9vw,8px);
    font-weight:500;
    line-height:1.45;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-price{
    margin-top:auto;

    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:3px;

    direction:rtl;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-price strong{
    color:#fff7ed;
    font:700 clamp(16px,4.5vw,21px)/1 "DM Sans","Cairo",sans-serif;
    letter-spacing:-.035em;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-price span{
    color:rgba(255,194,128,.86);
    font:700 clamp(6.5px,1.8vw,8px)/1 "Cairo",sans-serif;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-actions{
    width:100%;
    margin-top:6px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-product-link,
  #outdoorHeroMobileSection .outdoor-mobile-facade-add{
    width:100%;
    max-width:94px;
    height:31px;
    min-width:0;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,207,153,.25);
    border-radius:999px;

    color:rgba(247,243,236,.96);

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(8,24,37,.18)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 5px 12px rgba(0,0,0,.16);

    text-decoration:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-product-link{
    position:relative;
    isolation:isolate;
    overflow:visible;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-tube{
    position:absolute;
    z-index:2;
    left:50%;
    top:-7px;

    width:78%;
    aspect-ratio:1416 / 402;

    transform:translateX(-50%);
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-tube-img{
    position:absolute;
    inset:0;

    width:100%;
    height:auto;

    display:block;
    object-fit:contain;

    pointer-events:none;
    transition:opacity .28s ease;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-tube-img--on{
    opacity:1;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-card-tube-img--off{
    opacity:0;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-facade-card-tube-img--on{
    opacity:0;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-facade-card-tube-img--off{
    opacity:1;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-product-link-label{
    position:relative;
    z-index:3;

    width:100%;
    padding:0 3px;

    color:inherit;
    text-align:center;

    font:700 clamp(6.3px,1.9vw,8px)/1.15
      "Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-add{
    gap:3px;
    padding:0 3px;
    cursor:pointer;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-add svg{
    width:11px;
    height:11px;

    flex:0 0 auto;

    fill:none;
    stroke:currentColor;
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-add span{
    min-width:0;
    white-space:nowrap;

    font:700 clamp(6px,1.8vw,7.5px)/1
      "Cairo","IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-add.is-loading{
    opacity:.72;
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-add.is-added{
    color:#fff8ef;
    border-color:rgba(255,235,207,.48);

    background:
      linear-gradient(
        180deg,
        rgba(255,193,126,.15),
        rgba(135,73,31,.05)
      );
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-add.is-error{
    color:#ffd2a1;
    border-color:rgba(255,177,95,.42);
  }

  /* -------------------------------------------------------
     SEPARATED FRONT LAYER — ALWAYS ABOVE THE CARDS
  ------------------------------------------------------- */

  #outdoorHeroMobileSection .outdoor-mobile-facade-detail-front{
    position:absolute;
    inset:0;
    z-index:5;

    width:100%;
    height:100%;
    max-width:none;
    max-height:none;

    display:block;
    object-fit:fill;
    object-position:center;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;

    opacity:0;

    transition:opacity .18s ease .02s;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-detail-front{
    opacity:1;
  }

  /* Avoid carrying expensive blur while this UI is inactive. */
  #outdoorHeroMobileSection:not(.is-mobile-facade-final)
  .outdoor-mobile-facade-glass-card,
  #outdoorHeroMobileSection:not(.is-mobile-facade-final)
  .outdoor-mobile-facade-detail-heading{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }



  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-morph-stage{
    pointer-events:auto;
  }


  #outdoorHeroMobileSection:is(
    .is-mobile-facade-zooming,
    .is-mobile-facade-final
  ) .outdoor-mobile-hero{
    overflow:hidden!important;
  }

  /* =======================================================
     TEMPORARY X / REVERSE CONTROL
     Intentionally simple until facade cards/details are built.
  ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-facade-close{
    position:absolute;
    z-index:90;

    left:50%;
    right:auto;
    top:auto;
    bottom:max(54px, calc(env(safe-area-inset-bottom,0px) + 48px));

    width:44px;
    height:44px;
    padding:0;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;

    color:#fff;

    background:
      radial-gradient(
        circle at 28% 20%,
        rgba(255,255,255,.13),
        transparent 34%
      ),
      rgba(7,14,22,.72);

    -webkit-backdrop-filter:blur(13px) saturate(120%);
    backdrop-filter:blur(13px) saturate(120%);

    box-shadow:
      0 10px 26px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.18);

    cursor:pointer;
    touch-action:manipulation;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateX(-50%) scale(.90);

    transition:
      opacity .18s ease,
      transform .22s cubic-bezier(.22,1,.36,1),
      visibility .18s ease;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-close.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateX(-50%) scale(1);
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-facade-close.is-visible{
    opacity:.62;
    cursor:not-allowed;
    filter:saturate(.60) brightness(.84);
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-facade-close.is-visible:active{
    transform:translateX(-50%) scale(1);
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-close::after{
    content:"اضغط للرجوع مجدداً";

    position:absolute;
    left:50%;
    top:calc(100% + 7px);

    transform:translateX(-50%);

    min-width:122px;
    padding:6px 9px;

    display:block;

    border:1px solid rgba(255,255,255,.15);
    border-radius:11px;

    background:
      radial-gradient(circle at 20% 0%,rgba(255,255,255,.09),transparent 36%),
      linear-gradient(145deg,rgba(8,18,28,.64),rgba(12,22,32,.46));

    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);

    box-shadow:
      0 10px 24px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.12);

    color:#f5f7f8;
    text-align:center;
    direction:rtl;
    white-space:nowrap;

    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(8px,2.35vw,10px);
    font-weight:700;
    line-height:1.3;

    pointer-events:none;

    opacity:0;
    transition:opacity .16s ease .05s;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-close.is-visible::after{
    opacity:1;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-close svg{
    width:19px;
    height:19px;

    display:block;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-close:active{
    transform:translateX(-50%) scale(.94);
  }

  #outdoorHeroMobileSection
  .outdoor-mobile-facade-close:focus-visible{
    outline:2px solid #ffb15f;
    outline-offset:4px;
  }
}



@keyframes taqaMobileFacadeCardInLeft{
  from{
    opacity:0;
    transform:translate3d(calc(-50% - 112vw),0,0);
  }
  to{
    opacity:1;
    transform:translate3d(-50%,0,0);
  }
}

@keyframes taqaMobileFacadeCardInRight{
  from{
    opacity:0;
    transform:translate3d(calc(-50% + 112vw),0,0);
  }
  to{
    opacity:1;
    transform:translate3d(-50%,0,0);
  }
}



/* =========================================================
   FACADE ADD-TO-CART TOAST
   Compact footprint matching the existing mobile notice size.
========================================================= */

@media (min-width:0px){
  #outdoorMobileFacadeCartToast{
    position:fixed;
    left:50%;
    bottom:max(6px, env(safe-area-inset-bottom,0px));
    z-index:2147483100;

    width:min(calc(100vw - 96px),290px);

    transform:translate3d(-50%,calc(100% + 26px),0) scale(.99);
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    padding:7px 8px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;

    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.09),transparent 34%),
      linear-gradient(145deg,rgba(7,14,22,.95),rgba(16,28,39,.90));

    color:#f4f7f8;

    box-shadow:
      0 12px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.11);

    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);

    transition:
      opacity .26s ease,
      transform .44s cubic-bezier(.22,1,.36,1),
      visibility .26s ease;

    direction:rtl;
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
  }

  #outdoorMobileFacadeCartToast.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate3d(-50%,0,0) scale(1);
  }

  #outdoorMobileFacadeCartToast.is-leaving{
    opacity:0;
    visibility:visible;
    transform:translate3d(-50%,calc(100% + 26px),0) scale(.99);
  }

  #outdoorMobileFacadeCartToast .outdoor-mobile-facade-cart-toast__row{
    display:flex;
    align-items:center;
    gap:7px;
  }

  #outdoorMobileFacadeCartToast .outdoor-mobile-facade-cart-toast__icon{
    width:28px;
    height:28px;
    flex:0 0 28px;

    border-radius:8px;

    display:grid;
    place-items:center;

    color:#f1b063;
    background:rgba(241,176,99,.08);
    border:1px solid rgba(241,176,99,.16);
  }

  #outdoorMobileFacadeCartToast .outdoor-mobile-facade-cart-toast__icon svg{
    width:15px;
    height:15px;
    display:block;

    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #outdoorMobileFacadeCartToast .outdoor-mobile-facade-cart-toast__copy{
    min-width:0;
    display:block;
  }

  #outdoorMobileFacadeCartToast .outdoor-mobile-facade-cart-toast__copy strong{
    display:block;
    color:#fff;
    font-size:clamp(11px,2.7vw,12px);
    font-weight:700;
    line-height:1.25;
  }
}


/* Desktop: facade mobile engine has no visual footprint. */
@media (min-width:99999px){
  #outdoorHeroMobileSection .outdoor-mobile-facade-morph-stage,
  #outdoorHeroMobileSection .outdoor-mobile-facade-frame-stack,
  #outdoorHeroMobileSection .outdoor-mobile-facade-detail-layer,
  #outdoorHeroMobileSection .outdoor-mobile-facade-close{
    display:none!important;
  }
}


@media (min-width:0px) and (prefers-reduced-motion:reduce){
  #outdoorHeroMobileSection .outdoor-mobile-facade-morph-stage{
    transition:none!important;
  }

  #outdoorHeroMobileSection .outdoor-mobile-facade-close{
    transition:none!important;
  }

  #outdoorHeroMobileSection.is-mobile-facade-final
  .outdoor-mobile-facade-glass-card{
    animation:none!important;
    opacity:1!important;
    transform:translate3d(-50%,0,0)!important;
  }
}

}

/* Final route-specific corrections, after the adapted legacy rules. */
:root.taqa-outdoor-mobile #outdoorHeroMobileSection { display:block !important; }
/* These nodes have explicit display:none in the legacy >900px safeguards. */
:root.taqa-outdoor-mobile #outdoorHeroMobileSection :is(
  .outdoor-mobile-cards-layer,
  .outdoor-mobile-front-layer,
  .outdoor-mobile-frame-stack,
  .outdoor-mobile-product-detail-layer,
  .outdoor-mobile-facade-morph-stage,
  .outdoor-mobile-facade-frame-stack,
  .outdoor-mobile-facade-detail-layer
) { display:block !important; }
:root.taqa-outdoor-mobile #outdoorHeroMobileSection :is(
  .outdoor-mobile-light-switch,
  .outdoor-mobile-product-close,
  .outdoor-mobile-facade-close
) { display:grid !important; }
:root.taqa-outdoor-mobile .outdoor-mobile-light-alert,
:root.taqa-outdoor-mobile #outdoorMobileNightModeToast { display:block !important; }
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-hero__frame,
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-front-layer,
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-frame-stack__img,
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-facade-frame-stack__img,
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-detail-front,
:root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-facade-detail-front {
  object-fit:fill !important;
}
@media (min-width:901px) and (orientation:portrait) {
  :root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-section-signature {
    width:min(76vw,520px);
  }
  :root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-glass-card,
  :root.taqa-outdoor-mobile #outdoorHeroMobileSection .outdoor-mobile-facade-glass-card {
    box-sizing:border-box;
  }
  /* Scale type and hit areas with the enlarged portrait artwork, not the UI shell. */
  #outdoorHeroMobileSection .outdoor-mobile-card-title { font-size:clamp(22px,2.45vw,30px); }
  #outdoorHeroMobileSection .outdoor-mobile-card-eyebrow { font-size:clamp(11px,1.15vw,15px); }
  #outdoorHeroMobileSection .outdoor-mobile-card-cta { font-size:clamp(14px,1.45vw,18px); }
  #outdoorHeroMobileSection .outdoor-mobile-card-action-row {
    --zoom-size:clamp(44px,4.4vw,56px);
    --arrow-width:clamp(90px,9vw,115px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade .outdoor-mobile-card-title {
    font-size:clamp(18px,2.1vw,26px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade .outdoor-mobile-card-cta {
    font-size:clamp(13px,1.4vw,17px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade .outdoor-mobile-card-action-row {
    --zoom-size:clamp(43px,4vw,52px);
    --arrow-width:clamp(86px,8vw,105px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__title-main {
    font-size:clamp(24px,2.6vw,32px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-card__title-sub {
    font-size:clamp(14px,1.4vw,18px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-variant { min-height:clamp(46px,4.4vw,56px); }
  #outdoorHeroMobileSection .outdoor-mobile-product-variant span {
    font-size:clamp(12px,1.2vw,16px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-variant[data-variant="100W DOB + Sensor"] span,
  #outdoorHeroMobileSection .outdoor-mobile-product-variant[data-variant="150W DOB + Sensor"] span {
    font-size:clamp(10px,1vw,13px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-cta,
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add {
    height:clamp(48px,4.8vw,60px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-cta__label,
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add > span {
    font-size:clamp(13px,1.35vw,17px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-product-detail-add svg {
    width:clamp(19px,1.8vw,23px);
    height:clamp(19px,1.8vw,23px);
  }
  #outdoorHeroMobileSection .outdoor-mobile-facade-card-title {
    font-size:clamp(19px,2.1vw,26px);
  }
}