/* And More — "تسوّق بالفيديو" (cards + viewer) */
:root{--amv-teal:#0ABAB5}

/* ---------- home section ---------- */
.amvs{padding:44px 0 36px;font-family:inherit}
.amvs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 auto 22px;max-width:1240px}
.amvs-head small{display:block;color:var(--amv-teal);font-size:13px;font-weight:700;letter-spacing:.2px;margin-bottom:4px}
.amvs-head h2{margin:0;font-size:26px;font-weight:800;color:#1b1f1f}
.amvs-tools{display:flex;align-items:center;gap:8px}
.amvs-all{border:1px solid #d6e6e6;border-radius:30px;padding:7px 16px;font-size:13px;font-weight:700;color:#1b1f1f!important;text-decoration:none!important;white-space:nowrap}
.amvs-all:hover{border-color:var(--amv-teal);color:var(--amv-teal)!important}
.amvs-arrow{width:36px;height:36px;border-radius:50%;border:1px solid #d6e6e6;background:#fff;color:#1b1f1f;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.amvs-arrow:hover{border-color:var(--amv-teal);color:var(--amv-teal)}
[dir=rtl] .amvs-arrow svg{transform:scaleX(-1)}
.amvs-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:1240px;margin:0 auto;padding:2px 2px 6px}
.amvs-track::-webkit-scrollbar{display:none}
.amvs-track:has(.amvs-card:nth-child(-n+4):last-child){justify-content:center}

.amvs-card{position:relative;flex:0 0 calc((100% - 42px)/4);max-width:300px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111;scroll-snap-align:start;cursor:pointer;border:0;padding:0;display:block;color:#fff;text-align:start;box-shadow:0 10px 26px rgba(0,0,0,.12);transition:transform .25s ease,box-shadow .25s ease}
.amvs-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.amv-media{position:absolute;inset:0;overflow:hidden;background:#0d0d0d}
.amv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a 16:9 (or vertical Shorts) YouTube frame cropped to fill a 9:16 box */
.amv-media>iframe,.amv-yt{position:absolute;top:0;left:50%;height:100%;width:316.05%;transform:translateX(-50%);border:0;pointer-events:none}
.amvs-card .amv-media>iframe{opacity:0;transition:opacity .45s ease}
.amvs-card.is-live .amv-media>iframe{opacity:1}
.amvs-card::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
.amvs-rail{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.amvs-rail span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.amvs-rail svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.amvs-play{position:absolute;top:12px;inset-inline-start:12px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.amvs-card.is-live .amvs-play{opacity:0}
.amvs-foot{position:absolute;inset:auto 12px 12px 12px;z-index:2;display:flex;align-items:center;gap:8px}
.amvs-foot img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#fff;flex:0 0 auto}
.amvs-foot b{display:block;font-size:13px;line-height:1.35;font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.amvs-foot em{display:block;font-style:normal;font-size:12px;font-weight:800;color:#9ff1ee;margin-top:1px}

@media (max-width:991px){.amvs-card{flex-basis:calc((100% - 28px)/3)}}
@media (max-width:767px){
  .amvs{padding:30px 0 22px}
  .amvs-head{padding:0 14px;margin-bottom:16px}
  .amvs-head h2{font-size:21px}
  .amvs-arrow{display:none}
  .amvs-track{padding:0 14px 6px;gap:10px}
  .amvs-card{flex-basis:46%;border-radius:14px}
}

/* ---------- viewer ---------- */
html.amv-lock,html.amv-lock body{overflow:hidden!important}
.amv{position:fixed;inset:0;z-index:2147483000;display:none;color:#fff;font-family:"Cairo",system-ui,sans-serif}
.amv.is-open{display:block;animation:amvIn .2s ease}
@keyframes amvIn{from{opacity:0}to{opacity:1}}
.amv *{box-sizing:border-box}
.amv button{font-family:inherit;cursor:pointer;color:inherit}
.amv a{text-decoration:none!important;color:inherit}
.amv-bg{position:absolute;inset:0;background:rgba(8,10,10,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.amv-top{position:absolute;top:18px;z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:background .2s}
.amv-top:hover{background:rgba(255,255,255,.26)}
.amv-x{inset-inline-start:18px}
.amv-snd{inset-inline-end:18px}
.amv-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px;pointer-events:none}
.amv-main{--h:min(88vh,860px);position:relative;height:var(--h);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;pointer-events:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.amv-side{pointer-events:auto;height:min(58vh,560px);aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:0;padding:0;background:#111;opacity:.35;transition:opacity .2s,transform .2s;flex:0 0 auto}
.amv-side:hover{opacity:.6;transform:scale(1.02)}
.amv-side img{width:100%;height:100%;object-fit:cover;display:block}
.amv-side.is-empty{visibility:hidden}
.amv-poster{transition:opacity .3s}
.amv.is-playing .amv-poster{opacity:0}
.amv-yt{opacity:0;transition:opacity .3s}
.amv.is-playing .amv-yt{opacity:1}
.amv-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.amv-tap{position:absolute;inset:0;z-index:1}
.amv-shade{position:absolute;inset:auto 0 0 0;height:50%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0))}
.amv-rail{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:18px}
.amv-act{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.amv-act svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.amv-act span{font-size:12px;font-weight:700;min-height:14px}
.amv-act.is-on{color:#ff3b5c}
.amv-act.is-on svg{animation:amvPop .35s ease}
@keyframes amvPop{50%{transform:scale(1.3)}}
.amv-ctrl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:22px;opacity:0;transition:opacity .2s}
.amv-main:hover .amv-ctrl,.amv.is-paused .amv-ctrl{opacity:1}
.amv-ctrl button{border:0;background:rgba(0,0,0,.4);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.amv-ctrl .amv-pp{width:62px;height:62px}
.amv-info{position:absolute;inset:auto 14px 18px 14px;z-index:3}
.amv-title{margin:0 0 10px;font-size:15px;font-weight:700;line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.amv-prod{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);color:#1b1f1f!important;border-radius:14px;padding:8px}
.amv-prod-img{flex:0 0 46px;width:46px;height:46px;border-radius:10px;overflow:hidden;background:#f2f2f2;display:block}
.amv-prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.amv-prod-txt{flex:1;min-width:0;color:#1b1f1f!important}
.amv-prod-txt b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amv-prod-txt em{display:block;font-style:normal;font-size:13px;font-weight:800;color:var(--amv-teal)}
.amv-prod-txt s{color:#9aa;font-weight:400;font-size:12px}
.amv-btn{flex:0 0 auto;border:0;background:var(--amv-teal);color:#fff!important;font-size:12px;font-weight:800;border-radius:10px;padding:9px 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.amv-btn.is-off{background:#c9d3d3}
.amv-btn.is-loading{opacity:.6;pointer-events:none}
.amv-bar{position:absolute;inset:auto 0 0 0;height:3px;z-index:4;background:rgba(255,255,255,.2)}
.amv-bar i{display:block;height:100%;background:var(--amv-teal);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.amv[dir=rtl] .amv-bar i{transform-origin:right}
.amv-toast{position:absolute;left:50%;bottom:40px;transform:translate(-50%,20px);z-index:6;background:#fff;color:#1b1f1f;font-size:14px;font-weight:700;padding:10px 18px;border-radius:30px;opacity:0;transition:all .25s;pointer-events:none}
.amv-toast.is-on{opacity:1;transform:translate(-50%,0)}
.amv.is-embedded .amv-bg{background:#080a0a}

@media (max-width:767px){
  .amv-side{display:none}
  .amv-row{gap:0}
  .amv-main{--h:100dvh;height:100dvh;width:100vw;aspect-ratio:auto;border-radius:0}
  .amv-main .amv-yt{width:max(100%,calc(100dvh * 16 / 9))}
  .amv-top{top:max(14px,env(safe-area-inset-top))}
  .amv-ctrl{opacity:0}
  .amv.is-paused .amv-ctrl{opacity:1}
  .amv-ctrl [data-amv-go]{display:none}
  .amv-info{bottom:max(18px,env(safe-area-inset-bottom))}
}

/* sound hint when the browser started the video muted */
.amv-snd.is-hint{background:var(--amv-teal);animation:amvPulse 1.2s ease-in-out infinite}
@keyframes amvPulse{0%,100%{box-shadow:0 0 0 0 rgba(10,186,181,.6)}50%{box-shadow:0 0 0 10px rgba(10,186,181,0)}}