/* =========================================================
   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 (max-width:900px){

  /* =======================================================
     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 (max-width:900px){
  #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:901px){
  #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 (max-width:900px) 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;
  }
}