/* =========================================================
   OUTDOOR PRODUCT FRAME ENGINE V6
   Desktop only — one persistent stack, decoded before input
   ========================================================= */

@media (min-width:901px){
  #outdoorHeroSection,
  #outdoorHeroSection .outdoor-hero{
    position:relative;
  }

  #outdoorHeroSection .outdoor-frame-stack{
    position:absolute;
    inset:0;
    z-index:20;
    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);
  }


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

  #outdoorHeroSection .outdoor-frame-stack__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }

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

  /*
    Explicit state classes are cheaper and easier to reason about than :has()
    while the current frame changes 12 times in each direction.
  */
  #outdoorHeroSection.is-product-zooming .outdoor-hero__frame,
  #outdoorHeroSection.is-product-detail .outdoor-hero__frame{
    visibility:hidden !important;
  }

  /* Remove expensive glass/blur/filter layers before revealing the sequence. */
  #outdoorHeroSection.is-product-zooming .outdoor-fx-viewport,
  #outdoorHeroSection.is-product-detail .outdoor-fx-viewport,
  #outdoorHeroSection.is-product-zooming .outdoor-light-switch,
  #outdoorHeroSection.is-product-detail .outdoor-light-switch{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #outdoorHeroSection.is-product-zooming .outdoor-fx-card-arrow,
  #outdoorHeroSection.is-product-detail .outdoor-fx-card-arrow{
    animation:none !important;
    filter:none !important;
    will-change:auto !important;
  }


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

  .outdoor-product-close{
    position:absolute;
    z-index:2147482000;
    left:clamp(22px,2vw,34px);
    bottom:clamp(22px,2vw,34px);
    width:50px;
    height:50px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    color:#fff;
    background:rgba(7,14,22,.70);
    box-shadow:
      0 12px 28px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.20);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:scale(.90);
    transition:
      opacity .18s ease,
      transform .22s cubic-bezier(.22,1,.36,1),
      visibility .18s ease;
  }

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

  .outdoor-product-close:hover{
    transform:translateY(-1px) scale(1.02);
    border-color:rgba(255,255,255,.34);
  }

  .outdoor-product-close:active{
    transform:scale(.95);
  }

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

  .outdoor-product-close svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }


  /* =========================
     FRAME 13 PRODUCT DETAIL UI
     ========================= */

  #outdoorHeroSection .outdoor-product-detail-layer{
    position:absolute;
    inset:0;
    z-index:26;
    overflow:hidden;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .32s ease, visibility .32s ease;
  }

  #outdoorHeroSection.is-product-detail .outdoor-product-detail-layer{
    opacity:1;
    visibility:visible;
  }

  /*
    The card sits BEHIND the separated Frame-13 foreground.
    This is the Photoshop composition: glass panel behind the street-light pole.
  */
  #outdoorHeroSection .outdoor-product-detail-card{
    --od-warm:#ffb15f;
    --od-cream:#f4eee5;
    --od-deep:#091827;

    position:absolute;
    z-index:2;
    left:17%;
    right:10%;
    top:50%;
    width:auto;
    min-width:0;
    min-height:60%;
    padding:30px 40px 30px;

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

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

    background:
      radial-gradient(circle at 88% 10%,rgba(255,177,95,.105),transparent 31%),
      linear-gradient(145deg,rgba(12,29,44,.68),rgba(5,17,28,.52));

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 28px 72px rgba(0,0,0,.26),
      0 0 52px rgba(255,177,95,.045);

    opacity:0;
    transform:translate3d(26px,-47%,0) scale(.988);
    pointer-events:none;

    transition:
      opacity .34s ease .08s,
      transform .62s cubic-bezier(.22,1,.36,1) .04s;
  }

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

  #outdoorHeroSection .outdoor-product-detail-card::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:27px;
    pointer-events:none;
    background:linear-gradient(
      128deg,
      rgba(255,255,255,.08),
      transparent 28%,
      transparent 72%,
      rgba(255,177,95,.035)
    );
  }

  #outdoorHeroSection .outdoor-product-detail-card__content{
    position:relative;
    z-index:2;
    width:min(70%,650px);
    max-width:650px;
    min-width:455px;
    margin-left:auto;
    margin-right:0;
    padding-top:44px;
    text-align:right;
  }

  /*
    This image is truly the FRONT layer.
    It overlaps the card exactly like the Photoshop reference.
  */
  #outdoorHeroSection .outdoor-product-detail-front{
    position:absolute;
    inset:0;
    z-index:5;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center;
    /* Keep the complete pole in front of the card, without cutting the image. */
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    opacity:0;
    transform:translate3d(-5px,0,0);
    transition:opacity .34s ease .05s, transform .6s cubic-bezier(.22,1,.36,1);
  }

  #outdoorHeroSection.is-product-detail .outdoor-product-detail-front{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  #outdoorHeroSection .outdoor-product-detail-card__eyebrow{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-bottom:15px;
    direction:ltr;
    color:rgba(255,213,166,.76);
    font:600 10px/1 "DM Sans","Cairo",sans-serif;
    letter-spacing:.18em;
  }

  #outdoorHeroSection .outdoor-product-detail-card__eyebrow i{
    width:34px;
    height:1px;
    background:linear-gradient(90deg,var(--od-warm),rgba(255,177,95,.06));
    box-shadow:0 0 10px rgba(255,177,95,.20);
  }

  #outdoorHeroSection .outdoor-product-detail-card__title{
    margin:0;
    max-width:100%;
    color:#fffaf3;
    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(27px,2.15vw,39px);
    font-weight:700;
    line-height:1.28;
    letter-spacing:-.025em;
  }

  #outdoorHeroSection .outdoor-product-detail-card__description{
    max-width:100%;
    margin:14px 0 0;
    color:rgba(240,237,232,.70);
    font-family:"Cairo",Tahoma,Arial,sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.72;
  }

  #outdoorHeroSection .outdoor-product-detail-card__specs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px;
    margin-top:12px;
  }

  #outdoorHeroSection .outdoor-product-detail-card__specs span{
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    color:rgba(255,245,232,.84);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(0,0,0,.08);
    font:600 10px/1 "Cairo",sans-serif;
    white-space:nowrap;
  }


  #outdoorHeroSection .outdoor-product-variant-picker{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    width:100%;
    margin-top:19px;
    direction:rtl;
  }

  #outdoorHeroSection .outdoor-product-variant{
    min-height:42px;
    padding:8px 11px;
    display:flex;
    align-items:center;
    justify-content:center;

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

    color:rgba(249,245,238,.83);
    background:linear-gradient(180deg,rgba(255,255,255,.072),rgba(7,21,33,.12));

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 7px 17px rgba(0,0,0,.13);

    cursor:pointer;
    transition:
      transform .26s cubic-bezier(.22,1,.36,1),
      border-color .26s ease,
      color .26s ease,
      box-shadow .32s ease,
      background .26s ease;
  }

  #outdoorHeroSection .outdoor-product-variant span{
    font:700 10px/1.15 "DM Sans","Cairo",sans-serif;
    letter-spacing:.025em;
    white-space:nowrap;
  }

  #outdoorHeroSection .outdoor-product-variant.is-selected{
    color:#fff8ef;
    border-color:rgba(255,196,132,.58);
    background:linear-gradient(180deg,rgba(255,193,126,.16),rgba(135,73,31,.055));
    box-shadow:
      inset 0 1px 0 rgba(255,244,229,.20),
      inset 0 -1px 0 rgba(113,56,20,.16),
      0 9px 23px rgba(0,0,0,.16),
      0 0 19px rgba(218,126,54,.18),
      0 0 38px rgba(232,174,88,.07);
  }

  @media (hover:hover) and (pointer:fine){
    #outdoorHeroSection .outdoor-product-variant:hover{
      transform:translateY(-1px);
      color:#fff9f1;
      border-color:rgba(255,216,170,.30);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 9px 22px rgba(0,0,0,.13),
        0 0 16px rgba(232,174,88,.07);
    }
  }

  #outdoorHeroSection .outdoor-product-detail-card__bottom{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    margin-top:20px;
    padding-top:18px;
    width:100%;
    border-top:1px solid rgba(255,255,255,.10);
  }

  #outdoorHeroSection .outdoor-product-detail-card__price{
    display:flex;
    align-items:baseline;
    gap:7px;
    flex:0 0 auto;
    justify-content:flex-start;
    direction:rtl;
  }

  #outdoorHeroSection .outdoor-product-detail-card__price strong{
    color:#fff7ed;
    font:700 clamp(33px,2.5vw,44px)/1 "DM Sans","Cairo",sans-serif;
    letter-spacing:-.045em;
  }

  #outdoorHeroSection .outdoor-product-detail-card__price span{
    color:rgba(255,194,128,.86);
    font:700 13px/1 "Cairo",sans-serif;
  }

  #outdoorHeroSection .outdoor-product-detail-card__actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    direction:ltr;
    flex-wrap:wrap;
    width:100%;
    margin-top:18px;
  }

  /*
    Compact CTA: same hero proportions, not full-width.
  */
  #outdoorHeroSection .outdoor-product-detail-cta{
    position:relative;
    width:clamp(208px,14.5vw,242px);
    height:58px;
    margin-top:6px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    isolation:isolate;

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

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

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.19),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 10px 24px rgba(0,0,0,.21),
      0 0 22px rgba(192,96,36,.12);

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

  #outdoorHeroSection .outdoor-product-detail-cta__tube{
    position:absolute;
    z-index:2;
    left:50%;
    top:-16px;
    width:84%;
    max-width:84%;
    aspect-ratio:1416 / 402;
    transform:translateX(-50%);
    pointer-events:none;
    user-select:none;
  }

  #outdoorHeroSection .outdoor-product-detail-cta__tube-img{
    position:absolute;
    inset:0;
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    pointer-events:none;
    transition:opacity .28s ease;
  }

  #outdoorHeroSection .outdoor-product-detail-cta__tube-img--on{opacity:1;}
  #outdoorHeroSection .outdoor-product-detail-cta__tube-img--off{opacity:0;}

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

  #outdoorHeroSection .outdoor-product-detail-cta__label{
    position:relative;
    z-index:3;
    width:100%;
    display:block;
    text-align:center;
    direction:rtl;
    font:700 .72rem/1 "Cairo",Tahoma,Arial,sans-serif;
    letter-spacing:0;
    text-shadow:0 1px 2px rgba(0,0,0,.28),0 0 10px rgba(232,174,88,.16);
  }

  #outdoorHeroSection.outdoor-light-is-off .outdoor-product-detail-cta{
    color:rgba(220,234,240,.74);
    border-color:rgba(132,187,214,.17);
    background:linear-gradient(180deg,rgba(190,225,240,.065),rgba(8,24,37,.16));
    box-shadow:
      inset 0 1px 0 rgba(201,232,246,.10),
      inset 0 -1px 0 rgba(0,0,0,.34),
      inset 0 -14px 28px rgba(42,112,145,.055),
      0 12px 32px rgba(0,0,0,.18);
  }

  #outdoorHeroSection.outdoor-light-is-off .outdoor-product-detail-cta__label{
    text-shadow:none;
  }

  #outdoorHeroSection .outdoor-product-detail-add{
    height:56px;
    min-width:164px;
    margin-top:6px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

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

    color:rgba(247,243,236,.94);
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(8,24,37,.18));

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.19),
      inset 0 -1px 0 rgba(0,0,0,.18),
      0 10px 24px rgba(0,0,0,.21),
      0 0 20px rgba(192,96,36,.10);

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

  #outdoorHeroSection .outdoor-product-detail-add svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #outdoorHeroSection .outdoor-product-detail-add span{
    font:700 10px/1 "DM Sans",sans-serif;
    letter-spacing:.13em;
    white-space:nowrap;
  }

  #outdoorHeroSection .outdoor-product-detail-add.is-added{
    color:#fff8ef;
    border-color:rgba(255,235,207,.50);
    background:linear-gradient(180deg,rgba(255,193,126,.16),rgba(135,73,31,.055));
  }

  #outdoorHeroSection .outdoor-product-detail-add.is-loading{
    pointer-events:none;
    opacity:.72;
  }

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

  @media (hover:hover) and (pointer:fine){
    #outdoorHeroSection .outdoor-product-detail-cta:hover{
      transform:translateY(-2px);
      border-color:rgba(255,216,170,.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.23),
        inset 0 -1px 0 rgba(0,0,0,.26),
        0 13px 29px rgba(0,0,0,.24),
        0 0 26px rgba(192,96,36,.17);
    }

    #outdoorHeroSection .outdoor-product-detail-add:hover{
      transform:translateY(-2px);
      border-color:rgba(255,216,170,.42);
      background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(8,24,37,.17));
    }
  }

  /* A dedicated back row prevents the X from colliding with product identity. */
  #outdoorHeroSection .outdoor-product-back{
    position:absolute;
    z-index:8;
    top:18px;
    right:20px;
    display:flex;
    align-items:center;
    gap:8px;
    direction:ltr;
    color:rgba(255,232,205,.66);
    pointer-events:none;
  }

  #outdoorHeroSection .outdoor-product-back__label{
    font:600 10px/1 "Cairo",Tahoma,Arial,sans-serif;
    white-space:nowrap;
  }

  #outdoorHeroSection .outdoor-product-back__line{
    width:38px;
    height:1px;
    background:linear-gradient(90deg,rgba(255,177,95,.08),rgba(255,204,148,.58));
  }

  #outdoorHeroSection .outdoor-product-back__arrow{
    width:17px;
    height:12px;
    fill:none;
    stroke:rgba(255,210,161,.72);
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #outdoorHeroSection .outdoor-product-back > .outdoor-product-close{
    position:relative;
    inset:auto;
    width:44px;
    height:44px;
    z-index:8;
    background:rgba(10,25,38,.42);
    border-color:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 9px 24px rgba(0,0,0,.20);
    pointer-events:none;
  }

  #outdoorHeroSection.is-product-detail .outdoor-product-back{
    pointer-events:auto;
  }

  #outdoorHeroSection.is-product-detail .outdoor-product-back > .outdoor-product-close.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  @media (max-width:1180px) and (min-width:901px){
    #outdoorHeroSection .outdoor-product-detail-card{
      left:17%;
      right:3.5%;
      width:auto;
      min-width:0;
      padding:30px 32px 28px;
    }

    #outdoorHeroSection .outdoor-product-detail-card__content{
      width:min(78%,620px);
      min-width:430px;
      margin-left:auto;
      margin-right:auto;
      padding-top:46px;
    }

    #outdoorHeroSection .outdoor-product-detail-card__description{
      font-size:12px;
      line-height:1.82;
    }

    #outdoorHeroSection .outdoor-product-detail-card__bottom{
      align-items:flex-start;
      flex-direction:column;
      gap:0;
    }
  }

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

@media (max-width:900px){
  .outdoor-frame-stack,
  .outdoor-product-close,
  .outdoor-product-detail-layer{
    display:none !important;
  }
}