/* =========================================================
   FACADE FRAME 13 — PRODUCT CARDS + INTRO
   Separate visual layer only.
   Exact anchors derived from the supplied 1920×1080 FrontlayerFrame13:
   LEFT  lamp: x 101–408  => center 13.26%
   CENTER lamp: x 804–1106 => center 49.74%
   RIGHT lamp: x 1513–1816 => center 86.69%
   Lamp vertical alpha: y ≈ 400–640.
   ========================================================= */

@media (min-width:901px){

  #outdoorHeroSection .facade-frame13-ui{
    position:absolute;
    inset:0;
    z-index:130;

    width:100%;
    height:100%;

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

    overflow:hidden;
    border-radius:inherit;
    contain:layout paint style;

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

  /*
    Only show this layer once the 13-frame facade transition has reached
    its final detail state. It disappears automatically during reverse.
  */
  #outdoorHeroSection.is-facade-detail .facade-frame13-ui{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* ======================================================
     WIDE HEADING ABOVE THE THREE LAMPS
     Position is based on the supplied 1903×922 screenshot:
     header/navigation occupies roughly the upper 0–13%,
     while the timber canopy begins around 19%.
     The title is centered safely in the gap between them.
     ====================================================== */

  #outdoorHeroSection .facade-frame13-ui__heading{
    position:absolute;
    z-index:2;

    left:50%;
    top:20.8%;
    width:min(72%,980px);

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

    padding:14px 28px 16px;

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

    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,.56),rgba(14,24,34,.36));

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

    box-shadow:
      0 18px 38px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.15),
      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(24px,1.75vw,34px);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.018em;
    white-space:nowrap;

    text-shadow:
      0 2px 18px rgba(0,0,0,.38),
      0 0 24px rgba(255,177,95,.05);

    pointer-events:none;
  }

  /* ======================================================
     THREE BLANK GLASS CARDS
     They begin around the middle/lower half of each lamp so
     the lamp body overlaps their top edge.
     ====================================================== */

  #outdoorHeroSection .facade-frame13-ui__card{
    position:absolute;
    z-index:1;

    top:44.6%;
    width:17.2%;
    height:43.5%;

    transform:translateX(-50%);

    border:1px solid rgba(255,255,255,.15);
    border-radius:clamp(18px,1.45vw,27px);

    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,.46),
        rgba(15,24,32,.28)
      );

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

    box-shadow:
      0 28px 60px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.20);

    overflow:visible;
    pointer-events:auto;
  }

  #outdoorHeroSection .facade-frame13-ui__card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:inherit;
    pointer-events:none;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.54),
        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:.45;
  }

  /* Exact lamp centers from the supplied transparent 1920×1080 layer. */
  #outdoorHeroSection .facade-frame13-ui__card--left{
    left:13.26%;
  }

  #outdoorHeroSection .facade-frame13-ui__card--center{
    left:49.74%;
  }

  #outdoorHeroSection .facade-frame13-ui__card--right{
    left:86.69%;
  }



  /* =========================
     FRAME 13 CARD INTRO
     CSS-only: no RAF / interval / polling.
     ========================= */

  #outdoorHeroSection.is-facade-detail .facade-frame13-ui__card--left{
    animation:facadeCardInLeft 880ms cubic-bezier(.16,1,.30,1) 50ms both;
  }

  #outdoorHeroSection.is-facade-detail .facade-frame13-ui__card--center{
    animation:facadeCardInRight 900ms cubic-bezier(.16,1,.30,1) 100ms both;
  }

  #outdoorHeroSection.is-facade-detail .facade-frame13-ui__card--right{
    animation:facadeCardInRight 920ms cubic-bezier(.16,1,.30,1) 155ms both;
  }

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

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


  /* ======================================================
     FRONT LAYER — ALWAYS ABOVE THE CARDS
     Exact 1920×1080 coordinate system.
     ====================================================== */

  #outdoorHeroSection .facade-frame13-ui__front{
    position:absolute;
    inset:0;
    z-index:3;

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

    object-fit:cover;
    object-position:center;

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

  /*
    Don't keep GPU hints alive outside the final frame.
    There are no animations/polling in this file.
  */
  #outdoorHeroSection:not(.is-facade-detail) .facade-frame13-ui__card{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  #outdoorHeroSection:not(.is-facade-detail) .facade-frame13-ui__heading{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  #outdoorHeroSection:not(.is-facade-detail) .facade-transition-close::after{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }


  /* ======================================================
     REVERSE HELPER LABEL
     Sits directly under the existing X button.
     Visual only — does not change reverse logic.
     ====================================================== */

  #outdoorHeroSection .facade-transition-close{
    overflow:visible !important;
  }

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

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

    transform:translateX(-50%);

    min-width:170px;
    padding:8px 16px;

    display:block;

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

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

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

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

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

    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.35;

    pointer-events:none;
  }


  /* Raise the existing reverse control + helper so neither touches the bottom edge. */
  #outdoorHeroSection.is-facade-detail .facade-transition-close{
    bottom:42px !important;
  }

  #outdoorHeroSection.is-facade-detail .facade-transition-close::after{
    top:calc(100% + 7px) !important;
    padding:7px 14px !important;
    min-width:164px !important;
  }



  /* ======================================================
     PRODUCT CONTENT — 100W / 150W / 200W
     ====================================================== */

  #outdoorHeroSection .facade-frame13-ui__card-content{
    position:absolute;
    inset:0;
    z-index:2;

    padding:51% 18px 14px;

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

    text-align:center;
    direction:rtl;

    color:#f6f2eb;
  }

  #outdoorHeroSection .facade-frame13-ui__power{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:58px;
    padding:5px 9px;

    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 10px/1 "DM Sans","Cairo",sans-serif;
    letter-spacing:.04em;
  }

  #outdoorHeroSection .facade-frame13-ui__title{
    margin:5px 0 0;

    color:#fffaf3;

    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(13px,.92vw,17px);
    font-weight:700;
    line-height:1.35;
  }

  #outdoorHeroSection .facade-frame13-ui__description{
    margin:6px 0 0;

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

    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(9px,.66vw,11px);
    font-weight:400;
    line-height:1.6;
  }

  #outdoorHeroSection .facade-frame13-ui__price{
    margin-top:auto;

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

    direction:rtl;
  }

  #outdoorHeroSection .facade-frame13-ui__price strong{
    color:#fff7ed;
    font:700 clamp(27px,1.9vw,34px)/1 "DM Sans","Cairo",sans-serif;
    letter-spacing:-.04em;
  }

  #outdoorHeroSection .facade-frame13-ui__price span{
    color:rgba(255,194,128,.86);
    font:700 11px/1 "Cairo",sans-serif;
  }

  #outdoorHeroSection .facade-frame13-ui__actions{
    width:100%;
    margin-top:8px;

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

  /* Same tube ON/OFF CTA logic/style used in the working Codex card. */
  #outdoorHeroSection .facade-frame13-ui__product-link{
    position:relative;

    width:min(100%,210px);
    height:42px;
    padding:0 14px;

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

    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,.085),
      rgba(8,24,37,.16)
    );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -1px 0 rgba(0,0,0,.25),
      0 9px 22px rgba(0,0,0,.18),
      0 0 18px rgba(192,96,36,.11);

    isolation:isolate;
    overflow:visible;

    transition:
      transform .3s cubic-bezier(.22,1,.36,1),
      border-color .3s ease,
      box-shadow .35s ease;
  }

  #outdoorHeroSection .facade-frame13-ui__tube{
    position:absolute;
    z-index:2;

    left:50%;
    top:-13px;

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

    transform:translateX(-50%);

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

  #outdoorHeroSection .facade-frame13-ui__tube-img{
    position:absolute;
    inset:0;

    width:100%;
    height:auto;

    display:block;
    object-fit:contain;

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

  #outdoorHeroSection .facade-frame13-ui__tube-img--on{
    opacity:1;
  }

  #outdoorHeroSection .facade-frame13-ui__tube-img--off{
    opacity:0;
  }

  #outdoorHeroSection.outdoor-light-is-off
  .facade-frame13-ui__tube-img--on{
    opacity:0;
  }

  #outdoorHeroSection.outdoor-light-is-off
  .facade-frame13-ui__tube-img--off{
    opacity:1;
  }

  #outdoorHeroSection .facade-frame13-ui__product-link-label{
    position:relative;
    z-index:3;

    width:100%;

    color:inherit;
    text-align:center;

    font:700 10px/1 "Cairo",Tahoma,Arial,sans-serif;

    text-shadow:
      0 1px 2px rgba(0,0,0,.28),
      0 0 10px rgba(232,174,88,.15);
  }

  #outdoorHeroSection.outdoor-light-is-off
  .facade-frame13-ui__product-link{
    color:rgba(220,234,240,.76);
    border-color:rgba(132,187,214,.17);

    background:linear-gradient(
      180deg,
      rgba(190,225,240,.06),
      rgba(8,24,37,.16)
    );

    box-shadow:
      inset 0 1px 0 rgba(201,232,246,.10),
      inset 0 -1px 0 rgba(0,0,0,.30),
      0 10px 26px rgba(0,0,0,.18);
  }

  #outdoorHeroSection.outdoor-light-is-off
  .facade-frame13-ui__product-link-label{
    text-shadow:none;
  }

  #outdoorHeroSection .facade-frame13-ui__add{
    width:min(100%,180px);
    height:44px;
    padding:0 14px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

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

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

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -1px 0 rgba(0,0,0,.16),
      0 9px 22px rgba(0,0,0,.18),
      0 0 16px rgba(192,96,36,.09);

    cursor:pointer;

    transition:
      transform .28s cubic-bezier(.22,1,.36,1),
      background .28s ease,
      border-color .28s ease,
      color .28s ease;
  }

  #outdoorHeroSection .facade-frame13-ui__add svg{
    width:16px;
    height:16px;

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

  #outdoorHeroSection .facade-frame13-ui__add span{
    font:700 9px/1 "DM Sans",sans-serif;
    letter-spacing:.10em;
    white-space:nowrap;
  }

  #outdoorHeroSection .facade-frame13-ui__add.is-loading{
    opacity:.72;
    pointer-events:none;
  }

  #outdoorHeroSection .facade-frame13-ui__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)
    );
  }

  #outdoorHeroSection .facade-frame13-ui__add.is-error{
    color:#ffd2a1;
    border-color:rgba(255,177,95,.42);
  }

  @media (hover:hover) and (pointer:fine){
    #outdoorHeroSection .facade-frame13-ui__product-link:hover,
    #outdoorHeroSection .facade-frame13-ui__add:hover{
      transform:translateY(-2px);
      border-color:rgba(255,216,170,.40);
    }
  }

  @media (max-width:1180px) and (min-width:901px){
    #outdoorHeroSection .facade-frame13-ui__heading{
      top:21.5%;
      width:68%;
      font-size:clamp(22px,2.15vw,30px);
    }

    #outdoorHeroSection .facade-frame13-ui__card{
      width:18%;
      height:41.5%;
    }
  }

  @media (prefers-reduced-motion:reduce){
    #outdoorHeroSection.is-facade-detail .facade-frame13-ui__card{
      animation:none !important;
      opacity:1 !important;
      transform:translateX(-50%) !important;
    }
  }

}

@media (max-width:900px){
  #outdoorHeroSection .facade-frame13-ui{
    display:none !important;
  }
}