/* MKStudio — product pages (shared template). Scoped to body.prod */
body.prod{--w:min(1560px,100% - 2*clamp(14px,2.4vw,40px))}
body.prod main{padding-top:calc(max(54px,3.25vw) + clamp(18px,2.4vw,40px))}
body.prod .ph,body.prod .pplans,body.prod .pfs,body.prod .pmore{width:var(--w);margin-inline:auto}

/* ---------- hero: identity | gallery | info ---------- */
.ph{display:grid;grid-template-columns:minmax(180px,14vw) minmax(0,1fr) minmax(360px,30vw);gap:clamp(16px,2vw,34px);align-items:start;direction:ltr}
.ph>*{direction:rtl;text-align:start}
html[lang=en] .ph>*{direction:ltr}

.pid{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.pid-top{display:flex;flex-direction:column;align-items:center;gap:8px}
.plogo{width:clamp(110px,9.5vw,160px);height:auto;border-radius:22%;filter:drop-shadow(0 10px 28px color-mix(in srgb,var(--a) 55%,transparent)) drop-shadow(0 0 18px color-mix(in srgb,var(--a) 40%,transparent))}
.pid-name{font:700 clamp(1.05rem,1.35vw,1.5rem) 'Space Grotesk',sans-serif;color:#fff;direction:ltr}
.pid-os{display:inline-flex;align-items:center;gap:7px;color:#c9cce0;font:500 .95rem 'Space Grotesk',sans-serif;direction:ltr}
.pid-feats{width:100%;margin-top:clamp(10px,1.5vw,24px)}
.idf{display:flex;gap:14px;align-items:flex-start;padding:clamp(12px,1.2vw,20px) 0;border-top:1px solid rgba(255,255,255,.16);text-align:start}
.idf .ic{flex:none;color:var(--gold2);margin-top:3px}
.idf b{display:block;color:#fff;font:800 clamp(.95rem,1.1vw,1.2rem) 'Cairo',sans-serif;line-height:1.35}
.idf small{display:block;color:#aeb4cc;font:500 clamp(.8rem,.88vw,.95rem) 'Tajawal','Cairo',sans-serif;line-height:1.5;margin-top:2px}

/* gallery */
.gal{min-width:0}
.stage{position:relative;display:block;width:100%;padding:0;border:1px solid rgba(214,168,78,.45);border-radius:14px;overflow:hidden;background:#0b0e22;cursor:zoom-in;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 0 40px color-mix(in srgb,var(--a) 22%,transparent);aspect-ratio:16/10;transition:border-color .25s,box-shadow .25s}
.stage:hover{border-color:var(--gold2)}
.stage img{display:block;width:100%;height:100%;object-fit:contain;background:#0b0e22;transition:opacity .22s ease}
.stage img.sw{opacity:0}
.bar{position:absolute;top:0;inset-inline:0;height:0;overflow:hidden}
.cap{margin:10px 2px 8px;text-align:center;color:#c9cce0;font:600 .95rem 'Tajawal','Cairo',sans-serif;min-height:1.5em}
.thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(7px,.8vw,12px)}
.th{padding:0;border:1.5px solid rgba(255,255,255,.14);border-radius:9px;overflow:hidden;background:#0b0e22;cursor:pointer;aspect-ratio:16/10;opacity:.72;transition:.2s}
.th img{display:block;width:100%;height:100%;object-fit:cover}
.th:hover{opacity:1;transform:translateY(-2px)}
.th.on{opacity:1;border-color:var(--gold2);box-shadow:0 0 16px rgba(255,201,40,.35)}

/* info */
.pinfo{padding-top:clamp(0px,.8vw,12px)}
.eyebrow{font:600 clamp(.78rem,.86vw,.95rem) 'Space Grotesk',sans-serif;letter-spacing:.32em;color:#c9cce0;text-transform:none;margin-bottom:4px;direction:ltr;text-align:start}
.pname{font:700 clamp(1.8rem,2.75vw,3.2rem)/1.08 'Space Grotesk',sans-serif;color:#fff;margin:0 0 6px;direction:ltr;text-align:start;letter-spacing:-.01em}
.pname{background:linear-gradient(180deg,#fff 40%,#d9d6ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.ptag{font:800 clamp(1.15rem,1.75vw,2rem)/1.35 'Cairo','Tajawal',sans-serif;margin:0 0 10px;background:linear-gradient(180deg,#ffe58a,#e9a812);-webkit-background-clip:text;background-clip:text;color:transparent}
.pdesc{color:#dfe0ef;font:500 clamp(.92rem,1.02vw,1.12rem)/1.85 'Tajawal','Cairo',sans-serif;margin:0 0 12px}
.ben{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:9px}
.ben li{display:flex;gap:10px;align-items:flex-start;color:#f1f1fa;font:700 clamp(.88rem,.98vw,1.05rem)/1.5 'Cairo',sans-serif}
.ben .ic{flex:none;color:#1a1000;background:var(--gold2);border-radius:50%;padding:3px;width:22px;height:22px;margin-top:1px}
.pcta{display:flex;flex-wrap:wrap;gap:10px}
.pcta .btn{padding:clamp(10px,.9vw,14px) clamp(16px,1.6vw,26px);font-size:clamp(.88rem,1vw,1.08rem);gap:9px;white-space:nowrap}
.pcta .btn.gold{flex:1 1 100%;justify-content:center;font-size:clamp(1rem,1.15vw,1.25rem);box-shadow:0 8px 26px rgba(255,201,40,.28)}
.pcta .btn.ghost{flex:1 1 auto;justify-content:center;background:rgba(8,10,28,.55);border:1.5px solid rgba(214,168,78,.6);color:#fff}
.pcta .btn.ghost:hover{background:rgba(214,168,78,.18)}

/* ---------- plans ---------- */
.pplans{margin-top:clamp(26px,3vw,50px)!important}
.ptitle{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,24px);font:800 clamp(1.15rem,1.55vw,1.7rem) 'Cairo',sans-serif;color:#fff;margin:0 0 clamp(16px,1.8vw,28px)}
.ptitle i{flex:1;max-width:min(300px,22vw);height:1px;background:linear-gradient(90deg,transparent,rgba(214,168,78,.8))}
.ptitle i:last-child{background:linear-gradient(270deg,transparent,rgba(214,168,78,.8))}
.pplans .plans{display:grid;grid-template-columns:repeat(2,minmax(0,min(440px,100%)));justify-content:center;gap:clamp(14px,1.6vw,26px);margin:0}
.pplans .plan{padding:clamp(22px,2vw,32px) 20px 20px;border-radius:16px;background:linear-gradient(180deg,rgba(14,18,44,.85),rgba(8,10,28,.85));border:1.5px solid rgba(255,255,255,.2)}
.pplans .plan.hot{border-color:var(--gold2);box-shadow:0 0 0 1px rgba(255,201,40,.2),0 0 36px rgba(255,201,40,.22)}
.pplans .plan h4{font:800 1.25rem 'Cairo',sans-serif;color:#fff;margin:0 0 4px}
.pplans .plan .price{font:700 clamp(2.4rem,3.2vw,3.5rem) 'Space Grotesk',sans-serif;color:#fff;line-height:1.1;margin:4px 0}
.pplans .plan.hot .price{color:var(--gold2)}
.pplans .plan .muted{color:#c9cce0;font:500 .98rem 'Tajawal','Cairo',sans-serif;margin:0}
.pplans .buy{margin-top:16px;border-radius:10px}
.pnote{text-align:center;color:#aeb4cc;font:500 .92rem/1.8 'Tajawal','Cairo',sans-serif;margin:16px auto 0;max-width:820px}

/* ---------- alternating feature rows ---------- */
.pfs{margin-top:clamp(40px,5vw,84px)!important}
.pf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,56px);align-items:center;margin-bottom:clamp(34px,4.4vw,72px)}
.pf.rev .pf-txt{order:2}
.pf-txt{position:relative}
.pf-n{display:block;font:700 clamp(2.4rem,4vw,4.4rem)/1 'Space Grotesk',sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(214,168,78,.7);margin-bottom:6px;direction:ltr;text-align:start}
.pf-txt h3{font:800 clamp(1.3rem,2vw,2.2rem)/1.3 'Cairo',sans-serif;color:#fff;margin:0 0 10px}
.pf-txt p{color:#d6d8ea;font:500 clamp(.95rem,1.12vw,1.2rem)/1.9 'Tajawal','Cairo',sans-serif;margin:0}
.pf-img{display:block;width:100%;padding:0;border:1px solid rgba(214,168,78,.4);border-radius:14px;overflow:hidden;background:#0b0e22;cursor:zoom-in;box-shadow:0 16px 44px rgba(0,0,0,.5);transition:transform .3s,border-color .3s}
.pf-img:hover{transform:translateY(-4px);border-color:var(--gold2)}
.pf-img img{display:block;width:100%;height:auto}
.pmore{margin-top:clamp(20px,3vw,50px)!important;margin-bottom:clamp(30px,4vw,60px)}
.pmore .grid5.simple{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(4,6,18,.92);backdrop-filter:blur(6px);padding:3vh 3vw;direction:ltr}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1600px,92vw);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb img{max-width:100%;max-height:82vh;border-radius:10px;border:1px solid rgba(214,168,78,.5);box-shadow:0 20px 70px #000;object-fit:contain}
.lb figcaption{color:#e8e9f6;font:700 1rem 'Cairo',sans-serif}
.lb button{position:absolute;background:rgba(14,18,44,.85);border:1.5px solid rgba(214,168,78,.6);color:#fff;border-radius:50%;width:46px;height:46px;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.lb button:hover{background:rgba(214,168,78,.3)}
.lb-x{top:16px;right:16px}.lb-n{left:16px;top:50%;translate:0 -50%}.lb-n.r{left:auto;right:16px}

/* ---------- tablet ---------- */
@media(max-width:1180px){
  .ph{grid-template-columns:minmax(170px,19vw) minmax(0,1fr);}
  .pinfo{grid-column:1/-1;order:3}
  .pinfo .pname,.pinfo .eyebrow{text-align:start}
}
/* ---------- mobile: identity -> description -> actions -> gallery -> features -> pricing ---------- */
@media(max-width:820px){
  body.prod main{padding-top:calc(56px + 14px)}
  .ph{display:flex;flex-direction:column;gap:14px;direction:rtl}
  html[lang=en] .ph{direction:ltr}
  .pid{display:contents}
  .pid-top{order:1;flex-direction:row;gap:14px;align-items:center;justify-content:flex-start}
  .plogo{width:76px}
  .pid-top .pid-name{display:none}
  .pid-os{font-size:1rem}
  .pinfo{order:2;grid-column:auto;padding:0}
  .pinfo .eyebrow{display:none}
  .pname{font-size:1.9rem}
  .gal{order:3;width:100%;max-width:100%;min-width:0;contain:inline-size}
  .ph>*{min-width:0;max-width:100%}
  .pid-feats{order:4;margin-top:0;display:grid;grid-template-columns:1fr;gap:0}
  .idf{padding:12px 0}
  .stage{border-radius:10px}
  .thumbs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .th{flex:0 0 112px;scroll-snap-align:start}
  .pcta .btn{min-height:48px}
  .pcta .btn.ghost{flex:1 1 calc(50% - 5px);font-size:.92rem;padding-inline:12px}
  .pplans .plans{grid-template-columns:1fr}
  .pf,.pf.rev{grid-template-columns:1fr;gap:14px}
  .pf.rev .pf-txt{order:0}
  .pf-n{font-size:2.2rem}
  .ptitle i{max-width:14vw}
  .lb-n{top:auto;bottom:16px;translate:none}.lb-n{left:16px}.lb-n.r{right:16px;left:auto}
  .lb img{max-height:74vh}
}
@media(prefers-reduced-motion:reduce){.stage img,.th,.pf-img{transition:none}}