/* «منتج الشهر» (the section under the banner), «⭐ منتج الشهر» / «🔥 الأكثر مبيعًا» on product cards, the numbered
   «الأكثر طلبًا» row, and their editor in the dashboard. Loaded by the store and the dashboard after store.css. */

/* ---- the section ------------------------------------------------------------------------------------------------ */
.potm{padding-top:22px}
.potm-card{--gx:0%;position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:#f7f4ee;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:stretch;
 background:radial-gradient(85% 75% at var(--gx) 0%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 66%),radial-gradient(70% 60% at calc(100% - var(--gx)) 100%,color-mix(in srgb,var(--hot) 20%,transparent),transparent 62%),linear-gradient(160deg,#161c27,#0a0d13 72%);
 box-shadow:0 34px 64px -40px rgba(5,8,14,.85),inset 0 0 0 1px rgba(255,255,255,.07)}
html[dir=ltr] .potm-card{--gx:100%}
.potm-card.tall{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.potm-media{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/3;min-height:100%;background:#dfe3e8;cursor:pointer}
.potm-card.tall .potm-media{aspect-ratio:4/5}
.potm-bg{position:absolute;inset:-12%;z-index:-1;background-size:cover;background-position:center;filter:blur(26px) saturate(1.15);opacity:.95}
.potm-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.potm-initial{position:absolute;inset:0;display:grid;place-items:center;font:800 96px/1 var(--display);color:rgba(15,22,33,.25)}
.potm-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.potm-media.playing .potm-vid{opacity:1}
.potm-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,10,15,.42),transparent 34%),linear-gradient(to bottom,rgba(8,10,15,.22),transparent 26%)}
.potm-badge{position:absolute;top:16px;inset-inline-start:16px;z-index:2;overflow:hidden;padding:7px 15px;border-radius:999px;font-weight:800;font-size:13.5px;line-height:1.35;color:#3a2600;
 background:linear-gradient(135deg,#fff4c9 0%,#f7cf5e 50%,#e6a42d 100%);box-shadow:0 12px 26px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8)}
.potm-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);translate:-130% 0;animation:potm-sheen 5s ease-in-out 1.5s infinite}
@keyframes potm-sheen{0%,62%{translate:-130% 0}82%,100%{translate:130% 0}}
.potm-play{position:absolute;bottom:14px;inset-inline-end:14px;z-index:2;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(10,13,19,.5);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.potm-play:hover{background:rgba(10,13,19,.72)}
.potm-play.ask{width:62px;height:62px;inset:auto;top:50%;left:50%;translate:-50% -50%;background:rgba(10,13,19,.6)}
.potm-play.ask svg{width:26px;height:26px}
.potm-play:focus-visible,.potm-cta:focus-visible{outline:3px solid #f7cf5e;outline-offset:3px}

.potm-copy{padding:clamp(24px,4.4vw,54px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-width:0}
.potm-kicker{margin:0;display:flex;align-items:center;gap:10px;font:700 14.5px/1.5 var(--body);color:#f5ca5f}
.potm-kicker::before{content:"";flex:none;width:28px;height:2px;border-radius:2px;background:currentColor}
.potm-name{margin:0;font:800 clamp(28px,4vw,46px)/1.18 var(--display);color:#fff;text-wrap:balance}
.potm-sub{margin:0;font-size:clamp(15px,1.45vw,17px);line-height:1.8;color:rgba(247,244,238,.8);max-width:44ch}
.potm-points{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:9px}
.potm-points li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.6;font-weight:500}
.potm-points li::before{content:"✓";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--body);color:#3a2600;background:linear-gradient(135deg,#fff4c9,#f2be4a)}
.potm-buy{width:100%;margin-top:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.potm-price{display:flex;flex-direction:column;gap:2px}
.potm-from{font-size:13px;color:rgba(247,244,238,.7)}
.potm-amt b{font:800 clamp(27px,3vw,33px)/1.15 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.potm-amt small{font-size:13px;color:rgba(247,244,238,.72)}
.potm-was{display:flex;align-items:center;gap:8px;font-size:13.5px}
.potm-was s{color:rgba(247,244,238,.58);text-decoration-thickness:1.5px}
.potm-off{font-weight:800;font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;background:#e11d48;color:#fff;font-variant-numeric:tabular-nums}
.potm-cta{min-height:54px;padding:14px 30px;gap:12px;border:0;border-radius:999px;font-size:17px;font-weight:800;background:var(--accent);color:var(--accent-ink);
 box-shadow:0 18px 34px -16px color-mix(in srgb,var(--accent) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.potm-cta:hover{transform:translateY(-2px)}
.potm-arrow{display:inline-block;transition:translate .2s}
.potm-cta:hover .potm-arrow{translate:-4px 0}
html[dir=ltr] .potm-cta:hover .potm-arrow{translate:4px 0}

@media (max-width:760px){
 .potm{padding-top:16px}
 .potm-card,.potm-card.tall{grid-template-columns:1fr;border-radius:22px}
 .potm-card.tall .potm-media{aspect-ratio:4/5;max-height:70vh}
 .potm-badge{top:12px;inset-inline-start:12px;font-size:12.5px;padding:6px 13px}
 .potm-copy{padding:20px 18px 22px;gap:10px}
 .potm-name{font-size:27px}
 .potm-sub{font-size:15px;line-height:1.75}
 .potm-points li{font-size:14.5px}
 .potm-buy{flex-direction:column;align-items:stretch;gap:14px;padding-top:16px;margin-top:8px}
 .potm-price{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
 .potm-cta{width:100%}
}
@media (prefers-reduced-motion:reduce){.potm-badge::after{animation:none;display:none}.potm-vid,.potm-arrow{transition:none}.potm-cta:hover{transform:none}}

/* ---- badges on product cards and in the product's window ---------------------------------------------------------- */
.pflags{display:flex;flex-wrap:wrap;gap:4px}
.pflag{display:inline-flex;align-items:center;white-space:nowrap;font-size:11.5px;font-weight:700;line-height:1;padding:5px 9px;border-radius:999px}
.pflag.potm{color:#3a2600;background:linear-gradient(135deg,#fff4c9,#f2c14e)}
.pflag.hot{color:#b4410c;background:color-mix(in srgb,#f97316 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,#f97316 34%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pflag.hot{color:#fdba74}}
:root[data-theme="dark"] .pflag.hot{color:#fdba74}
.pflags.in-dlg .pflag{font-size:13px;padding:7px 12px}

/* ---- «الأكثر طلبًا» from real orders: every card numbered, a medal for the first three ----------------------------------- */
.rk-head{display:flex;flex-direction:column;gap:2px}
.rk-note{font-size:13px;color:var(--muted);font-weight:500}
.rank{position:absolute;top:10px;inset-inline-start:10px;z-index:2;min-width:36px;height:36px;padding:0 7px;border-radius:999px;display:grid;place-items:center;font:800 17px/1 var(--display);font-variant-numeric:tabular-nums;
 color:#fff;background:rgba(14,17,24,.74);backdrop-filter:blur(6px);box-shadow:0 0 0 2px rgba(255,255,255,.92),0 8px 18px -8px rgba(0,0,0,.55)}
.rank.r1{color:#3a2600;background:linear-gradient(140deg,#fff4c9,#f6c344 52%,#c98a12)}
.rank.r2{color:#1f2630;background:linear-gradient(140deg,#fff,#d6dce4 52%,#99a4b3)}
.rank.r3{color:#2e1600;background:linear-gradient(140deg,#ffe2c2,#e09b55 52%,#a5601f)}
/* the store's own badges that sit in the same corner move over to make room for the number */
.rail.ranked .card .ph>.badge:not(.sale):not(.second){inset-inline-start:56px}

/* ---- dashboard: the «منتج الشهر» editor and the «الأكثر طلبًا» choices --------------------------------------------- */
.potm-ed-status{margin:0;padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:var(--sunk)}
.potm-ed-status.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.potm-ed-status.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.potm-ed-media{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.potm-ed-prev{flex:none;width:168px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font-size:34px;color:var(--muted)}
.potm-ed-prev.wide{aspect-ratio:4/3;width:220px}
.potm-ed-prev video,.potm-ed-prev img{width:100%;height:100%;object-fit:cover;display:block}
.potm-ed-side{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.potm-ed-points{display:grid;gap:6px}
.potm-ed-best{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.potm-rank{margin:0}.potm-rank ol{margin:4px 0 0;padding-inline-start:22px}