:root{
    --bg:#f6f7f9;
    --card:#ffffff;
    --text:#222;
    --muted:#6b7280;
    --brand:#5bc6e0;
    --brand-700: #3dccef;
    --ring: 0 10px 30px rgba(0,0,0,.08);
    --radius: 22px;
}

*{box-sizing:border-box}



.container{
    max-width:1100px; margin-inline:auto;
}
.product{
    margin: 200px auto;
    display:grid; gap:28px; align-items:stretch;
    grid-template-columns: 1.2fr 1fr;
    background:var(--card); border-radius:var(--radius);
    box-shadow: var(--ring);
    padding: clamp(14px, 3vw, 26px);
    position: relative;
}
.moreInfo {
    color: #033945;
    cursor: pointer;
}
/* ========== Gallery ========== */
.gallery{ position:relative; border-radius:calc(var(--radius) - 6px); overflow:hidden; background:#fff; }
.slides{ display:flex; transition: transform .6s cubic-bezier(.22,.61,.36,1); touch-action: pan-y; }
.slide{ min-width:100%; aspect-ratio: 4 / 3; display:grid; place-items:center; background:#fafafa }
.slide img{ width:100%; height:100%; object-fit:cover; display:block }

/* arrows */
.arrow{ position:absolute; top:50%; translate:0 -50%; border:none; width:42px; height:42px; border-radius:50%;
    background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center; cursor:pointer;
    backdrop-filter: blur(4px); outline:none }
.arrow:hover{ background:rgba(0,0,0,.6) }
.arrow:active{ scale:.96 }
.arrow.prev{ right:10px }
.arrow.next{ left:10px }

/* dots */
.dots{ position:absolute; inset:auto 0 10px 0; display:flex; gap:8px; justify-content:center; align-items:center }
.dot{ width:8px; height:8px; border-radius:999px; background:#d1d5db; border:none; padding:0; cursor:pointer }
.dot[aria-current="true"]{ background:var(--brand) }

/* thumbs */
.thumbs{ display:flex;width: 100%;   gap:10px; margin-top:12px; overflow:auto; padding-bottom:2px }
.thumb{ flex:0 0 90px; height:70px; border-radius:14px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:#f3f4f6 }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.thumb[aria-current="true"]{ border-color:var(--brand) }

/* ========== Details ========== */
.details{ display:flex; flex-direction:column; gap:14px; padding-inline: 6px }
.badge{ align-self:flex-start; background:#111827; color:#fff; font-size:.78rem; padding:6px 10px; border-radius:999px }
.title{ font-size: clamp(1.4rem, 2.6vw, 2rem); margin:6px 0 2px; line-height:1.3 }
.desc{ color:var(--muted); line-height:1.9; font-size:1rem }

.price-row{ display:flex; align-items:baseline; gap:12px; margin-top:4px }
.price{ font-weight:800; font-size: clamp(1.4rem, 3vw, 2rem); color:var(--brand);display: block;width: 100%;    }
.old{ color:#9ca3af; text-decoration: line-through }
.price-calc{
    display: flex;
    flex-wrap: wrap;
    justify-content : start;
}
.unit select{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px;
    width: 130px;
    text-align: center;
    margin:  10px auto  ;
}
.qty{ display:flex; align-items:center; gap:8px; margin-top:6px }
.stepper{ display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:14px; padding:4px }
.stepper button{ width:32px; height:32px; border:none; background:#f3f4f6; border-radius:10px; cursor:pointer }
.stepper input{ width:48px; border:none; text-align:center; font-weight:700; font-size:1rem; background:transparent }
.measure{
    display: inline-flex
;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px;
    width: 130px;
    text-align: center;
    margin: 10px auto;
}
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.btn{ appearance:none; border:none; border-radius:14px; padding:12px 18px; font-weight:700; cursor:pointer }
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:var(--brand-700) }
.btn-ghost{ background:#111827; color:#fff }

.meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px }
.meta div{ background:#f9fafb; border:1px solid #eef2f7; border-radius:14px; padding:10px 12px; font-size:.95rem }


.vr-holder {
    position: relative;
}
.vr-option {
    display: flex;
    position: absolute;
    background: #022a2a1c;
    height: 100px;
    overflow: hidden;
    gap: 6px;
    border-radius: 20px;
    img{
        height: 100%;
    }

}
.message{
    transition: all 0.5s ease-in-out;
    opacity: 0;
    z-index: -3;
}
.message.show {
    opacity: 1;
    z-index: 5;
}

/* Responsive */
@media (max-width: 920px){
    .product{ grid-template-columns: 1fr; }
    .gallery{ order: -1 }
    .measure{width: 100%}
}
.moreDetail {
    display: flex;
    position: fixed;
    z-index: -1;
    opacity: 0;
    background: #051f27d1;
    color: white;
    padding: 20px;
    border-radius: 20px;
    height: 90%;
    top: 5%;
    left: 5%;
    width: 90%;
    margin: 0 auto;
    align-items: center;
    align-self: center;
    font-size: 24px;
    overflow: auto;
    transition: all 1s ease;
    transform: rotateY(180deg);

}
.moreDetail.show {
    opacity: 1;
    z-index: 999;            /* أعلى */
    transform: rotateY(0deg);
}
#panorama {
    width: 90%;
    height: 500px;
    margin: 30px auto;
    border-radius: 20px;
    border: 2px inset #5bc6e0;

}