/* «هايلايت المتجر» and «تسوّق من خلال ريلز» (every theme): the row of circles, the six covers, and the full-screen viewer.
   Colours come from the theme (--bk = its primary colour, set on .blk). */

/* ---------- the circles ---------- */
.sx-hl{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
.sx-hl::-webkit-scrollbar{display:none}
.sx-hl__i{flex:0 0 auto;display:grid;justify-items:center;gap:6px;width:92px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;position:relative;scroll-snap-align:start}
.sx-hl__ring{width:84px;height:84px;border-radius:50%;padding:3px;display:grid;place-items:center;
  background:conic-gradient(from 210deg,var(--bk,#d42b1e),color-mix(in srgb,var(--bk,#d42b1e) 55%,#ec4899),#ec4899,var(--bk,#d42b1e));   /* the store colour into pink, no orange */transition:transform .25s}
.sx-hl__ring{flex:0 0 auto;box-sizing:border-box}
.sx-hl__ring img{width:78px;height:78px;max-width:none;box-sizing:border-box;border-radius:50%;object-fit:cover;border:3px solid var(--bk-card,#fff);background:#eee;display:block}
.sx-hl__i:hover .sx-hl__ring{transform:scale(1.06) rotate(-4deg)}
.sx-hl__i.is-seen .sx-hl__ring{background:#d1d5db}
.sx-hl__i b{font-size:13px;font-weight:700;line-height:1.4;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-hl__i small{position:absolute;top:0;inset-inline-end:2px;min-width:20px;height:20px;border-radius:99px;background:var(--bk-ink,#1b2433);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bk-card,#fff)}
.sx-hl__i em{position:absolute;top:66px;font-style:normal;font-size:10.5px;font-weight:800;background:var(--bk,#d42b1e);color:#fff;border-radius:99px;padding:1px 8px;border:2px solid var(--bk-card,#fff);animation:sx-pulse 1.8s ease-in-out infinite}
@keyframes sx-pulse{50%{transform:scale(1.1)}}

/* ---------- the six covers ---------- */
.sx-rlw{position:relative}
.sx-rl{--n:6;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;cursor:grab}
.sx-rl::-webkit-scrollbar{display:none}
.sx-rl.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}.sx-rl.is-drag .sx-rl__i{pointer-events:none}
.sx-rl__nav{position:absolute;top:calc(50% - 30px);z-index:3;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--bk-ink,#1b2433);font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:0 6px 20px -6px rgba(0,0,0,.35);transition:transform .15s}
.sx-rl__nav[hidden]{display:none}.sx-rl__nav:hover{transform:scale(1.08)}
.sx-rl__nav--prev{inset-inline-start:-10px}.sx-rl__nav--next{inset-inline-end:-10px}
[dir=rtl] .sx-rl__nav{transform:scaleX(-1)}[dir=rtl] .sx-rl__nav:hover{transform:scaleX(-1) scale(1.08)}
.sx-rl__i{flex:0 0 calc((100% - (var(--n) - 1)*12px)/var(--n));scroll-snap-align:start;position:relative;aspect-ratio:9/16;border-radius:var(--bk-r,16px);overflow:hidden;border:0;padding:0;cursor:pointer;background:#111;color:#fff;font:inherit;isolation:isolate}
.sx-rl__i video,.sx-rl__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sx-rl__i:hover video,.sx-rl__i:hover img{transform:scale(1.06)}
.sx-rl__i img.is-kb{animation:sx-kb 9s ease-in-out infinite alternate}
@keyframes sx-kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.18) translateY(-4%)}}
.sx-rl__i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 45%,rgba(0,0,0,.72));z-index:1}
.sx-rl__play{position:absolute;top:10px;inset-inline-start:10px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;font-size:12px;backdrop-filter:blur(4px)}
.sx-rl__p{position:absolute;inset-inline:10px;bottom:10px;z-index:2;display:grid;gap:2px;text-align:start}
.sx-rl__p b{font-size:13px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-rl__p i{font-style:normal;font-size:12.5px;font-weight:800;opacity:.95}
@media(max-width:980px){.sx-rl{--n:3.4}}
@media(max-width:560px){.sx-rl{--n:2.3}.sx-rl__nav{display:none}}

/* ---------- the viewer ---------- */
.sx-v{position:fixed;inset:0;z-index:99990;background:#000;color:#fff;display:none;direction:rtl;font-family:inherit;-webkit-tap-highlight-color:transparent}
.sx-v.is-open{display:block}
.sx-v button{font:inherit;color:inherit;cursor:pointer}
.sx-v__x{position:absolute;top:14px;inset-inline-start:14px;z-index:30;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);font-size:18px;backdrop-filter:blur(6px)}
.sx-v__bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(40px) brightness(.45);transform:scale(1.2)}

/* stories */
.sx-st{position:absolute;inset:0;display:grid;place-items:center}
.sx-st__card{position:relative;height:min(100dvh,900px);aspect-ratio:9/16;max-width:100vw;border-radius:18px;overflow:hidden;background:#111;touch-action:pan-y}
@media(max-width:600px){.sx-st__card{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}}
.sx-st__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:sx-zoom 6s ease-out both}
@keyframes sx-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.sx-st__card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 22%,transparent 55%,rgba(0,0,0,.78));pointer-events:none}
.sx-st__bars{position:absolute;top:10px;inset-inline:10px;z-index:5;display:flex;gap:4px}
.sx-st__bars i{flex:1;height:3px;border-radius:9px;background:rgba(255,255,255,.35);overflow:hidden}
.sx-st__bars i b{display:block;height:100%;width:0;background:#fff;border-radius:inherit}
.sx-st__head{position:absolute;top:22px;inset-inline:12px;z-index:5;display:flex;align-items:center;gap:10px;padding-inline-start:46px}
.sx-st__head img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.sx-st__head b{font-size:14.5px;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.sx-st__head span{font-size:12px;opacity:.8}
.sx-st__tap{position:absolute;top:70px;bottom:150px;z-index:4;width:38%;background:none;border:0}
.sx-st__tap.is-next{inset-inline-end:0}.sx-st__tap.is-prev{inset-inline-start:0}
.sx-st__txt{position:absolute;inset-inline:16px;bottom:118px;z-index:5;font-size:17px;font-weight:700;line-height:1.7;text-shadow:0 2px 10px rgba(0,0,0,.6);text-align:center}
.sx-st__txt.no-card{bottom:34px}

/* the shoppable card (stories and reels) */
.sx-buy{position:absolute;inset-inline:12px;bottom:16px;z-index:6;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.96);color:#111827;border-radius:16px;padding:8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:sx-up .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes sx-up{from{transform:translateY(40px);opacity:0}}
.sx-buy img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.sx-buy__t{flex:1;min-width:0;display:grid;gap:1px;text-decoration:none;color:inherit}
.sx-buy__t b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-buy__t span{font-size:13px;font-weight:800;color:var(--sx-c,#d42b1e)}.sx-buy__t s{font-weight:500;color:#9ca3af;margin-inline-start:6px;font-size:12px}
.sx-buy__b{flex:0 0 auto;border:0;border-radius:12px;background:var(--sx-c,#d42b1e);color:#fff!important;font-weight:800;font-size:13.5px;padding:10px 14px;text-decoration:none;white-space:nowrap;transition:transform .15s}
.sx-buy__b:active{transform:scale(.94)}.sx-buy__b.is-done{background:#16a34a}.sx-buy__b[disabled]{opacity:.6}
.sx-link{position:absolute;inset-inline:0;bottom:22px;z-index:6;display:flex;justify-content:center}
.sx-link a{background:#fff;color:#111827;font-weight:800;border-radius:99px;padding:11px 26px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* reels */
.sx-rv{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.sx-rv::-webkit-scrollbar{display:none}
.sx-rv__i{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;overflow:hidden}
.sx-rv__m{position:relative;height:min(100dvh,920px);aspect-ratio:9/16;max-width:100vw;border-radius:18px;overflow:hidden;background:#0b0b0b}
@media(max-width:600px){.sx-rv__m{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}}
.sx-rv__m video,.sx-rv__m iframe,.sx-rv__m .sx-kb{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.sx-kb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.sx-kb img.is-on{opacity:1;animation:sx-kb 5s ease-in-out both}
.sx-rv__m::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 58%,rgba(0,0,0,.8));pointer-events:none}
.sx-rv__tap{position:absolute;inset:0;z-index:2;background:none;border:0}
.sx-rv__txt{position:absolute;inset-inline-start:14px;inset-inline-end:70px;bottom:92px;z-index:5;font-size:14.5px;line-height:1.7;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:start}
.sx-rv__txt.no-card{bottom:26px}
.sx-rv__side{position:absolute;inset-inline-end:10px;bottom:104px;z-index:6;display:grid;gap:14px;justify-items:center}
.sx-rv__side button{width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);font-size:20px;backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .2s}
.sx-rv__side button:active{transform:scale(.88)}.sx-rv__side button.is-on{background:#fff;color:#e11d48}
.sx-rv__prog{position:absolute;inset-inline:0;bottom:0;height:3px;z-index:7;background:rgba(255,255,255,.25)}
.sx-rv__prog b{display:block;height:100%;width:0;background:#fff}
.sx-rv__n{position:absolute;top:20px;inset-inline-end:16px;z-index:6;font-size:12.5px;font-weight:700;background:rgba(0,0,0,.35);border-radius:99px;padding:3px 10px}
.sx-heart{position:absolute;top:50%;left:50%;z-index:8;font-size:92px;transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:sx-heart .8s ease-out both;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
@keyframes sx-heart{30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}60%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
.sx-toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:40;background:rgba(17,24,39,.92);color:#fff;border-radius:99px;padding:8px 18px;font-size:13.5px;font-weight:700;white-space:nowrap;animation:sx-up .3s both}
.sx-nav{position:absolute;inset-inline-end:max(18px,calc(50% - 330px));top:50%;z-index:20;display:grid;gap:10px;transform:translateY(-50%)}
.sx-nav button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);font-size:16px}
.sx-nav button[disabled]{opacity:.3}
@media(max-width:820px){.sx-nav{display:none}}
.sx-hint{position:absolute;bottom:170px;left:50%;transform:translateX(-50%);z-index:9;font-size:13px;font-weight:700;background:rgba(0,0,0,.45);border-radius:99px;padding:6px 14px;animation:sx-bob 1.4s ease-in-out infinite;pointer-events:none}
@keyframes sx-bob{50%{transform:translate(-50%,-10px)}}
@media(prefers-reduced-motion:reduce){.sx-st__img,.sx-rl__i img.is-kb,.sx-kb img.is-on,.sx-hl__i em,.sx-hint{animation:none}}

/* «شاهد كل الريلز»: a pill in the store's colour, a play mark and the count in a chip */
.sx-more-w{display:flex;justify-content:center;margin-top:18px}
.sx-more{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:15px;line-height:1;color:#fff;
  padding:8px 20px 8px 8px;border-radius:99px;background:linear-gradient(135deg,var(--bk,#d42b1e),color-mix(in srgb,var(--bk,#d42b1e) 62%,#ec4899));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--bk,#d42b1e) 70%,transparent);transition:transform .2s,box-shadow .2s,filter .2s}
[dir=rtl] .sx-more{padding:8px 8px 8px 20px}
.sx-more:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--bk,#d42b1e) 80%,transparent)}
.sx-more:active{transform:scale(.97)}
.sx-more:focus-visible{outline:3px solid color-mix(in srgb,var(--bk,#d42b1e) 35%,transparent);outline-offset:3px}
.sx-more__ic{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--bk,#d42b1e);display:grid;place-items:center;font-size:12px;flex:0 0 auto;padding-inline-start:2px}
.sx-more__n{background:rgba(255,255,255,.22);border-radius:99px;padding:5px 10px;font-size:12.5px;font-weight:800}
@media (prefers-reduced-motion:reduce){.sx-more{transition:none}}