/* TOP LEVEL — NATIVE STORE PREMIUM */

body{
    --shop-navy:#071e33;
    --shop-deep:#041523;
    --shop-orange:#f77928;
    --shop-orange2:#ff984f;
    --shop-bg:#f4f6f8;
    --shop-line:#e2e8ec;
    --shop-muted:#73818d;
}


/* PAGE */

body:has(.storeLayout){
    background:var(--shop-bg);
}


/* OLD HERO -> PREMIUM HERO */

body:has(.storeLayout) .pageHero{
    position:relative;
    min-height:520px;

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

    overflow:hidden;

    padding:
        130px
        max(24px,calc((100vw - 1200px)/2))
        85px !important;

    color:#fff;

    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(247,121,40,.33),
            transparent 27%
        ),
        radial-gradient(
            circle at 70% 70%,
            rgba(40,126,180,.18),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #041523,
            #071e33 58%,
            #0b3558
        );
}

body:has(.storeLayout) .pageHero::before{
    content:"TOP LEVEL";

    position:absolute;

    inset-inline-end:-30px;
    bottom:-35px;

    color:rgba(255,255,255,.035);

    font-size:clamp(90px,15vw,230px);
    line-height:.8;

    font-weight:900;
    letter-spacing:-.08em;

    pointer-events:none;
}

body:has(.storeLayout) .pageHero::after{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    inset-inline-end:-100px;
    top:-160px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:50%;

    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 140px rgba(255,255,255,.015);

    pointer-events:none;
}

body:has(.storeLayout) .pageHero .eyebrow{
    position:relative;
    z-index:2;

    color:var(--shop-orange2);

    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
}

body:has(.storeLayout) .pageHero h1{
    position:relative;
    z-index:2;

    max-width:850px;

    margin:18px 0 20px;

    color:#fff;

    font-size:
        clamp(48px,7vw,92px);

    line-height:.95;
    letter-spacing:-.055em;

    font-weight:900;
}

body:has(.storeLayout) .pageHero p{
    position:relative;
    z-index:2;

    max-width:650px;

    margin:0;

    color:rgba(255,255,255,.70);

    font-size:16px;
    line-height:1.9;
}


/* STORE LAYOUT */

body:has(.storeLayout) .storeLayout{
    width:min(1240px,calc(100% - 42px));

    margin:0 auto !important;

    padding:70px 0 100px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        350px !important;

    align-items:start;

    gap:28px !important;
}


/* PRODUCT SIDE */

body:has(.storeLayout)
.storeLayout > div:first-child{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;
}


/* NOTICE */

body:has(.storeLayout) .notice{
    grid-column:1/-1;

    position:relative;

    margin:0 0 5px !important;

    padding:19px 22px !important;

    border:
        1px solid
        rgba(247,121,40,.18) !important;

    border-radius:18px !important;

    color:#6d4a33 !important;

    background:#fff8f2 !important;

    font-size:12px;
    line-height:1.8;
}


/* PRODUCT */

body:has(.storeLayout) article.product{
    position:relative;

    min-width:0;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden;

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

    border:
        1px solid
        rgba(7,30,51,.08) !important;

    border-radius:25px !important;

    background:#fff !important;

    box-shadow:
        0 12px 35px
        rgba(7,30,51,.055) !important;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease !important;
}

body:has(.storeLayout)
article.product:hover{
    transform:translateY(-8px);

    border-color:
        rgba(247,121,40,.28) !important;

    box-shadow:
        0 26px 65px
        rgba(7,30,51,.13) !important;
}


/* IMAGE */

body:has(.storeLayout)
article.product .productImage{
    order:1;

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

    margin:0 !important;

    padding:30px !important;

    object-fit:contain !important;

    border:0 !important;
    border-radius:0 !important;

    background:
        linear-gradient(
            145deg,
            #fbfcfc,
            #edf1f3
        ) !important;

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1);
}

body:has(.storeLayout)
article.product:hover .productImage{
    transform:scale(1.06);
}


/* INDEX */

body:has(.storeLayout)
article.product .productIndex{
    position:absolute;

    z-index:3;

    top:16px;
    inset-inline-start:16px;

    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:var(--shop-navy) !important;

    background:
        rgba(255,255,255,.92) !important;

    box-shadow:
        0 8px 22px
        rgba(7,30,51,.09);

    font-size:10px !important;
    font-weight:900;
}


/* PRODUCT CONTENT */

body:has(.storeLayout)
article.product > div{
    order:2;

    flex:1;

    display:flex;
    flex-direction:column;

    padding:22px 22px 8px;
}

body:has(.storeLayout)
article.product h2{
    margin:0 0 8px !important;

    color:var(--shop-navy) !important;

    font-size:21px !important;
    line-height:1.35 !important;

    font-weight:900 !important;
}

body:has(.storeLayout)
article.product p{
    margin:0 0 18px !important;

    color:var(--shop-muted) !important;

    font-size:12px !important;
    line-height:1.75 !important;
}


/* PRICE */

body:has(.storeLayout)
article.product .productPrice{
    display:block;

    margin-top:auto;

    padding-top:16px;

    border-top:
        1px solid
        #edf1f3;

    color:var(--shop-navy) !important;

    font-size:27px !important;
    font-weight:900 !important;
}

body:has(.storeLayout)
.productPrice small{
    color:var(--shop-muted) !important;

    font-size:11px !important;
}


/* AVAILABILITY */

body:has(.storeLayout)
article.product .availability{
    display:inline-flex !important;

    align-items:center;

    margin-top:9px !important;

    color:#177a50 !important;

    font-size:10px !important;
    font-weight:800;
}

body:has(.storeLayout)
article.product .availability::before{
    content:"";

    width:7px;
    height:7px;

    margin-inline-end:6px;

    border-radius:50%;

    background:#25a66d;
}


/* CONCEPT */

body:has(.storeLayout)
article.product .conceptLabel{
    margin-top:8px;

    color:#a06b3d !important;

    font-size:9px !important;
    line-height:1.5;
}


/* BUTTON */

body:has(.storeLayout)
article.product button.outline{
    order:3;

    width:calc(100% - 44px) !important;
    min-height:49px;

    margin:13px 22px 22px !important;

    border:0 !important;
    border-radius:100px !important;

    color:#fff !important;

    background:
        var(--shop-navy) !important;

    cursor:pointer;

    font-weight:900 !important;

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

body:has(.storeLayout)
article.product button.outline:hover{
    background:
        var(--shop-orange) !important;

    transform:translateY(-2px);
}


/* ORDER PANEL */

body:has(.storeLayout) .orderPanel{
    position:sticky !important;

    top:105px;

    min-height:260px;

    padding:26px !important;

    border:0 !important;
    border-radius:25px !important;

    color:#fff !important;

    background:
        linear-gradient(
            145deg,
            #071e33,
            #041523
        ) !important;

    box-shadow:
        0 24px 60px
        rgba(7,30,51,.18) !important;
}

body:has(.storeLayout)
.orderPanel::before{
    content:"TOP LEVEL STORE";

    display:block;

    margin-bottom:12px;

    color:var(--shop-orange2);

    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
}

body:has(.storeLayout)
.orderPanel h2{
    color:#fff !important;

    font-size:28px !important;
}

body:has(.storeLayout)
.orderPanel p{
    color:
        rgba(255,255,255,.65) !important;

    line-height:1.7;
}

body:has(.storeLayout)
.orderPanel button{
    border-radius:100px !important;
}


/* FILTER BAR GENERATED BY JS */

.tlNativeFilters{
    grid-column:1/-1;

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

    overflow-x:auto;

    padding-bottom:2px;

    scrollbar-width:none;
}

.tlNativeFilters::-webkit-scrollbar{
    display:none;
}

.tlNativeFilter{
    flex:0 0 auto;

    padding:10px 17px;

    border:
        1px solid
        var(--shop-line);

    border-radius:100px;

    color:var(--shop-navy);

    background:#fff;

    cursor:pointer;

    font:inherit;
    font-size:11px;
    font-weight:900;

    transition:.25s ease;
}

.tlNativeFilter:hover,
.tlNativeFilter.active{
    color:#fff;

    border-color:
        var(--shop-navy);

    background:
        var(--shop-navy);

    transform:translateY(-2px);
}


/* PRODUCT ENTRANCE */

body.tlNativeReady
article.product{
    animation:
        tlProductIn
        .55s both;
}

body.tlNativeReady
article.product:nth-of-type(2){
    animation-delay:.05s;
}

body.tlNativeReady
article.product:nth-of-type(3){
    animation-delay:.10s;
}

body.tlNativeReady
article.product:nth-of-type(4){
    animation-delay:.15s;
}

body.tlNativeReady
article.product:nth-of-type(5){
    animation-delay:.20s;
}

@keyframes tlProductIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* TABLET */

@media(max-width:1000px){

    body:has(.storeLayout)
    .storeLayout{
        grid-template-columns:1fr !important;
    }

    body:has(.storeLayout)
    .orderPanel{
        position:relative !important;

        top:auto;
    }
}


/* MOBILE */

@media(max-width:650px){

    body:has(.storeLayout)
    .pageHero{
        min-height:440px;

        padding:
            110px
            20px
            65px !important;
    }

    body:has(.storeLayout)
    .pageHero h1{
        font-size:
            clamp(46px,14vw,66px);
    }

    body:has(.storeLayout)
    .storeLayout{
        width:calc(100% - 28px);

        padding:
            42px 0
            75px !important;
    }

    body:has(.storeLayout)
    .storeLayout > div:first-child{
        grid-template-columns:1fr;
    }

    body:has(.storeLayout)
    article.product{
        display:grid !important;

        grid-template-columns:
            42% 58%;
    }

    body:has(.storeLayout)
    article.product .productImage{
        grid-column:1;
        grid-row:1 / span 2;

        height:100% !important;
        min-height:230px;

        padding:13px !important;
    }

    body:has(.storeLayout)
    article.product > div{
        grid-column:2;
        grid-row:1;

        padding:
            17px 15px 5px;
    }

    body:has(.storeLayout)
    article.product h2{
        font-size:17px !important;
    }

    body:has(.storeLayout)
    article.product p{
        display:none;
    }

    body:has(.storeLayout)
    article.product .productPrice{
        font-size:22px !important;
    }

    body:has(.storeLayout)
    article.product button.outline{
        grid-column:2;
        grid-row:2;

        width:auto !important;

        min-height:42px;

        margin:
            10px 14px
            15px !important;

        font-size:10px;
    }

    body:has(.storeLayout)
    article.product .productIndex{
        width:31px;
        height:31px;

        top:10px;
        inset-inline-start:10px;
    }
}


@media(prefers-reduced-motion:reduce){

    body.tlNativeReady
    article.product{
        animation:none;
    }

    body:has(.storeLayout)
    article.product{
        transition:none !important;
    }
}


/* ==========================================================
   STORE 7C.1 — PROFESSIONAL CHECKOUT PANEL FIX
   ========================================================== */


/* MAIN STORE PROPORTIONS */

body:has(.storeLayout) .storeLayout{
    grid-template-columns:
        minmax(0,1fr)
        minmax(390px,430px) !important;

    gap:32px !important;
}


/* PRODUCT GRID ALIGNMENT */

body:has(.storeLayout)
.storeLayout > div:first-child{
    align-items:start;
}

body:has(.storeLayout)
article.product{
    align-self:start;
}


/* ==========================================================
   ORDER PANEL
   ========================================================== */

body:has(.storeLayout) .orderPanel{
    position:sticky !important;

    top:90px;

    width:100% !important;
    min-width:0 !important;

    max-height:
        calc(100vh - 110px);

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

    padding:30px 28px !important;

    border-radius:28px !important;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(255,255,255,.22)
        transparent;
}

body:has(.storeLayout)
.orderPanel::-webkit-scrollbar{
    width:5px;
}

body:has(.storeLayout)
.orderPanel::-webkit-scrollbar-thumb{
    border-radius:20px;

    background:
        rgba(255,255,255,.20);
}


/* TITLE */

body:has(.storeLayout)
.orderPanel::before{
    margin-bottom:14px;

    font-size:10px;

    letter-spacing:.16em;
}

body:has(.storeLayout)
.orderPanel h2{
    display:flex;
    align-items:center;
    gap:8px;

    margin:
        0 0 25px !important;

    color:#fff !important;

    font-size:26px !important;
    line-height:1.2 !important;
}

body:has(.storeLayout)
.orderPanel h2 span{
    color:#f77928;

    font-size:22px;
}


/* ==========================================================
   CART ITEM
   Works with current Phase 5J generated markup
   ========================================================== */

body:has(.storeLayout)
.orderPanel > div:not(.tlPaymentHandoff){
    min-width:0;
}


/* prevent flex children overflowing */

body:has(.storeLayout)
.orderPanel *{
    box-sizing:border-box;
}


/* CART ROWS */

body:has(.storeLayout)
.orderPanel [class*="cart"],
body:has(.storeLayout)
.orderPanel [class*="Cart"]{
    max-width:100%;
}


/* Images inside order panel */

body:has(.storeLayout)
.orderPanel img{
    flex:0 0 auto;

    width:58px !important;
    height:58px !important;

    object-fit:contain;

    padding:5px;

    border-radius:12px;

    background:#fff;
}


/* PRODUCT NAME */

body:has(.storeLayout)
.orderPanel strong{
    color:#fff;
}


/* PRICE */

body:has(.storeLayout)
.orderPanel .productPrice{
    color:#ff984f !important;
}


/* ==========================================================
   QUANTITY CONTROLS
   ========================================================== */

body:has(.storeLayout)
.orderPanel button{
    font-family:inherit;
}

body:has(.storeLayout)
.orderPanel button:not([type="submit"]){
    flex-shrink:0;
}


/*
 Quantity buttons generated by existing store cart.
 Covers +/- buttons without changing JS.
*/

body:has(.storeLayout)
.orderPanel button[aria-label*="زيادة"],
body:has(.storeLayout)
.orderPanel button[aria-label*="نقص"],
body:has(.storeLayout)
.orderPanel button[aria-label*="Increase"],
body:has(.storeLayout)
.orderPanel button[aria-label*="Decrease"]{
    width:36px !important;
    height:36px !important;

    min-width:36px !important;

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

    padding:0 !important;

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

    border-radius:50% !important;

    color:#071e33 !important;

    background:#fff !important;

    font-size:18px !important;
    font-weight:900 !important;

    line-height:1 !important;
}


/* Generic small cart controls */

body:has(.storeLayout)
.orderPanel button[type="button"]{
    min-height:36px;
}


/* ==========================================================
   INPUTS
   ========================================================== */

body:has(.storeLayout)
.orderPanel input,
body:has(.storeLayout)
.orderPanel textarea,
body:has(.storeLayout)
.orderPanel select{
    display:block;

    width:100% !important;

    margin:0 0 12px !important;

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

    border-radius:13px !important;

    outline:none !important;

    color:#071e33 !important;

    background:#fff !important;

    font-family:inherit !important;

    font-size:13px !important;

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

body:has(.storeLayout)
.orderPanel input{
    min-height:54px !important;

    padding:0 16px !important;
}

body:has(.storeLayout)
.orderPanel textarea{
    min-height:95px !important;

    padding:15px 16px !important;

    resize:vertical;
}

body:has(.storeLayout)
.orderPanel input:focus,
body:has(.storeLayout)
.orderPanel textarea:focus{
    border-color:#f77928 !important;

    box-shadow:
        0 0 0 3px
        rgba(247,121,40,.14) !important;
}


/* PLACEHOLDER */

body:has(.storeLayout)
.orderPanel input::placeholder,
body:has(.storeLayout)
.orderPanel textarea::placeholder{
    color:#87939d !important;

    opacity:1;
}


/* ==========================================================
   TOTAL AREA
   ========================================================== */

body:has(.storeLayout)
.orderPanel hr{
    margin:20px 0;

    border:0;

    border-top:
        1px solid
        rgba(255,255,255,.12);
}


/* AED text wrapping fix */

body:has(.storeLayout)
.orderPanel{
    word-break:normal;
}

body:has(.storeLayout)
.orderPanel [dir="ltr"]{
    direction:ltr;
}


/* ==========================================================
   PRIMARY ORDER BUTTON
   ========================================================== */

body:has(.storeLayout)
.orderPanel button[type="submit"],
body:has(.storeLayout)
.orderPanel form > button:last-of-type{
    width:100% !important;

    min-height:54px !important;

    margin-top:7px;

    border:0 !important;
    border-radius:100px !important;

    color:#fff !important;

    background:#f77928 !important;

    font-size:12px !important;
    font-weight:900 !important;

    cursor:pointer;

    box-shadow:
        0 12px 30px
        rgba(247,121,40,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

body:has(.storeLayout)
.orderPanel button[type="submit"]:hover,
body:has(.storeLayout)
.orderPanel form > button:last-of-type:hover{
    transform:translateY(-2px);

    box-shadow:
        0 17px 35px
        rgba(247,121,40,.30);
}


/* ==========================================================
   PAYMENT HANDOFF
   ========================================================== */

.tlPaymentHandoff{
    width:100%;
}

.tlPaymentMethods{
    margin-top:12px;
}

.tlPaymentMethod{
    min-height:52px;

    padding:12px 15px !important;
}

.tlPaymentContinue{
    min-height:52px !important;
}


/* ==========================================================
   DESKTOP LARGE
   ========================================================== */

@media(min-width:1350px){

    body:has(.storeLayout)
    .storeLayout{
        width:min(
            1380px,
            calc(100% - 70px)
        );

        grid-template-columns:
            minmax(0,1fr)
            420px !important;
    }

    body:has(.storeLayout)
    .storeLayout > div:first-child{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1050px){

    body:has(.storeLayout)
    .storeLayout{
        grid-template-columns:
            1fr !important;
    }

    body:has(.storeLayout)
    .orderPanel{
        position:relative !important;

        top:auto;

        max-height:none;
    }
}


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

@media(max-width:650px){

    body:has(.storeLayout)
    .orderPanel{
        padding:
            24px 18px !important;

        border-radius:22px !important;
    }

    body:has(.storeLayout)
    .orderPanel h2{
        font-size:23px !important;
    }

    body:has(.storeLayout)
    .orderPanel input{
        min-height:51px !important;
    }

    body:has(.storeLayout)
    .orderPanel textarea{
        min-height:85px !important;
    }
}