/* تصفّح المتجر والصالة (v5 كما هو، المرحلة ١٣): الرأس والبحث والفلتر والعروض والكتالوجات والصنف. البطاقة والشريط في app.css */
@font-face{font-family:Oi;font-weight:400;font-display:swap;src:url(../fonts/oi-400-latin.woff2);unicode-range:U+0000-00FF,U+2013-2193}
.stp{flex:none;gap:.4375rem;height:1.75rem;padding:0 .75rem;border-radius:999px;color:var(--ok);background:linear-gradient(150deg,#f0fdf4f2,#dcfce7d9);box-shadow:inset 2px 2px 4px #ffffffe6,inset -2px -3px 5px #15803d1f,0 .375rem .875rem -.5rem #15803d73}
.stp b{font:700 .71875rem/1 var(--ar);white-space:nowrap}
.stp .dot{width:.5rem;height:.5rem}
.stp.shut{background:linear-gradient(150deg,#fef2f2f2,#fee2e2d9);box-shadow:inset 2px 2px 4px #ffffffe6,inset -2px -3px 5px #c628281f,0 .375rem .875rem -.5rem #c6282866}
.top{padding-top:.5rem}
.hd{display:flex;align-items:center;justify-content:space-between;gap:.625rem}
.hlf{position:relative;flex:none;width:8.625rem;margin-top:2px}
.hlf img{width:100%;height:auto;filter:drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 3px 0 #E2650C) drop-shadow(0 9px 9px #8c3c0047)}
.hlt{width:auto;font:700 1.5rem var(--name);color:var(--orange)}
.hsp,.spk{position:absolute;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.hsp{top:-.5625rem;left:-.5625rem;width:.625rem;height:.625rem;background:var(--yellow);animation:oftw 2.4s ease-in-out infinite}
.hsp+.hsp{top:auto;left:auto;bottom:-.375rem;right:-.5rem;width:.5rem;height:.5rem;background:var(--orange);animation-delay:1.2s}
.sbar{display:flex;align-items:center;gap:.5rem;margin:.875rem 0}
.search{display:flex;flex:1;align-items:center;gap:.5rem;min-width:0;height:3rem;padding:0 .875rem;border:1.5px solid #ea73174d;border-radius:999px;background:#fff;box-shadow:var(--clay-w)}
.search .ic{width:1.125rem;height:1.125rem;color:var(--orange)}
.cust .search input{flex:1;min-width:0;min-height:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:500 .78125rem var(--ar);color:var(--navy);outline:0}
.search:focus-within{box-shadow:var(--clay-w),0 0 0 2px var(--orange)}
.fl{display:grid;place-items:center;flex:none;width:3rem;height:3rem;border-radius:1.125rem;background:var(--g-orange);box-shadow:var(--clay-o);color:#fff;transition:transform var(--t)}
.fl .ic{width:1.25rem;height:1.25rem}
.fl:active{transform:translateY(1px) scale(.985)}
.slider-wrap{--ofh:10.125rem;display:grid;gap:.5rem;margin:0 0 .875rem}
.ofs{position:relative;height:var(--ofh);border-radius:1.75rem;overflow:hidden;overflow:clip;box-shadow:var(--clay-o);isolation:isolate;touch-action:pan-y}
.slide{position:absolute;inset:0;padding:1rem 1rem .875rem;padding-inline-end:8rem;color:#fff;background:linear-gradient(140deg,var(--b1,#FF9F55),var(--b2,#E2650C));opacity:0;visibility:hidden;transform:translateX(-26px);transition:opacity .3s var(--e),transform .3s var(--e),visibility 0s .3s}
.slide.on{z-index:2;opacity:1;visibility:visible;transform:none;transition-delay:0s}
.slide.out{z-index:1;visibility:visible;transform:translateX(26px)}
.slide:nth-child(3n+2){--b1:#2E3858;--b2:#13192A}
.slide:nth-child(3n){--b1:#6ACBFF;--b2:#1F8FD6;--h:#fff}
.slide .el{position:absolute;left:-2.125rem;top:-2.5rem;width:13.125rem;height:11.875rem;color:#ffce2238}
.tag,.slide h3,.slide p,.slide .btn,.until{position:relative}
.tag{display:inline-block;padding:.1875rem .625rem;border-radius:999px;background:var(--g-yellow);box-shadow:var(--clay-y);color:var(--navy);font-size:.625rem;font-weight:800;line-height:1.2}
.slide h3{margin:.375rem 0 0;max-height:2.4em;overflow:hidden;font:700 1.4375rem/1.15 var(--name);color:var(--h,var(--yellow));text-shadow:0 2px 0 #13192a2e}
.slide h3 span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.slide h3 small{display:block;margin-top:.1875rem;font:400 .5625rem/1.3 var(--oi);letter-spacing:.5px;color:#fff;text-shadow:none}
@media (max-width:599px){.slide h3.lg{font-size:1.1875rem}}
.slide p{display:flex;align-items:baseline;gap:.25rem;margin:.25rem 0 .5625rem;font-weight:600;line-height:1.3;white-space:nowrap}
.slide p b{font:800 1rem var(--ar)}
.slide p s{font:600 .6875rem var(--ar);opacity:.7}
.slide .btn{display:inline-flex;align-items:center;height:2rem;padding:0 .875rem;border-radius:999px;background:linear-gradient(150deg,#FFF,#FFF1D8);box-shadow:var(--clay-w);color:var(--orange);font-size:.75rem;font-weight:700}
.until{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.slide .art{position:absolute;left:.125rem;bottom:-.5rem;width:7.75rem;height:7.75rem;filter:drop-shadow(0 .625rem .875rem #00000047)}
.slide .ph{position:absolute;left:.5rem;bottom:.625rem;width:6.75rem;aspect-ratio:1}.save~.ph{width:5.25rem}.ph~.spk{display:none}
.slide .stk{position:absolute;left:5.5rem;bottom:.5rem;z-index:2;font-size:.625rem}
.save{position:absolute;left:6rem;top:.75rem;z-index:3;display:grid;place-items:center;align-content:center;width:3.125rem;height:3.125rem;border-radius:50%;font:800 .75rem/1 var(--ar);color:var(--navy);background:linear-gradient(150deg,#FFF6B0,#FFCE22 55%,#FFBA08);box-shadow:var(--clay-y);transform:rotate(-10deg)}
.save small{margin-bottom:2px;font-size:.5625rem;font-weight:700}
.spk{left:1.5rem;top:1.375rem;width:.625rem;height:.625rem;opacity:0;background:#fff}
.spk+.spk{left:7.375rem;top:auto;bottom:1.875rem;width:.4375rem;height:.4375rem}
.on .spk{animation:oftw 1.6s .5s ease-in-out infinite}
.on .spk+.spk{animation-delay:1.2s}
.on .art{animation:offloat 3s .5s ease-in-out infinite}
.in .tag{animation:ofpop .28s .06s var(--e) both}
.in h3{animation:ofin .3s .12s var(--e) both}
.in p{animation:ofin .3s .18s var(--e) both}
.in .btn{animation:ofin .3s .24s var(--e) both,ofnudge .3s 1.6s ease-in-out 2}
.in .el{animation:ofel .3s var(--e) both}
.in .art{animation:ofart .3s .08s cubic-bezier(.34,1.56,.64,1) both,offloat 3s .5s ease-in-out infinite}
.in .save{animation:ofstamp .25s .36s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ofpop{from{opacity:0;transform:scale(.6)}}
@keyframes ofin{from{opacity:0;transform:translateX(-16px)}}
@keyframes ofel{from{opacity:0;transform:rotate(-18deg) scale(.82)}}
@keyframes ofart{from{opacity:0;transform:translateX(-36px) rotate(-28deg) scale(.6)}}
@keyframes offloat{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes ofstamp{from{opacity:0;transform:rotate(-30deg) scale(1.7)}}
@keyframes ofnudge{50%{transform:scale(1.07)}}
@keyframes oftw{0%,to{opacity:0;transform:scale(.4)}50%{opacity:1;transform:none}}
.ofb{display:flex;justify-content:center;gap:.375rem;margin-bottom:-.25rem}
.ofb button{width:1.5rem;height:1.5rem;padding:.625rem 0;border:0;background:none;cursor:pointer}
.ofb i{display:block;height:.25rem;border-radius:2px;background:#ea73172e;overflow:hidden}
.ofb i::after{content:"";display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:right}
.ofb .done i::after{transform:none}
.ofb .on i::after{animation:ofbar 5s linear forwards}
.paused .ofb .on i::after{animation-play-state:paused}
@keyframes ofbar{to{transform:none}}
@media (prefers-reduced-motion:reduce){.ofb .on i::after{transform:none}}
.cats{position:relative;display:flex;gap:.625rem;margin:0 -1rem .875rem;padding:.125rem 1rem .375rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1rem;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{scroll-snap-align:start;flex:0 0 4.375rem;display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.5rem .125rem .4375rem;border-radius:1.375rem;background:linear-gradient(150deg,#FFF,#FFF3DA);box-shadow:var(--clay-w);color:var(--navy);transition:transform var(--t)}
.cat.on{box-shadow:var(--clay-w),0 0 0 2px var(--orange)}
.cat-ic{display:grid;place-items:center;width:3rem;height:2.5rem;border-radius:50%;background:var(--tint,var(--tint-o));box-shadow:inset 3px 4px 7px #ffffffe6,inset -3px -5px 9px #8c501424;font-size:1.5rem;line-height:1}
.cat-ic img{width:2.5rem;height:2.5rem;object-fit:contain;filter:drop-shadow(0 4px 5px #13192a2e);transform:translateY(-.25rem)}
.cat-n{font:600 .78125rem/1 var(--name);white-space:nowrap}
.cats-ind{position:absolute;bottom:0;right:0;width:4rem;height:3px;border-radius:2px;background:var(--orange);opacity:0;transition:transform var(--t),opacity var(--t)}
.js .cats-ind.show{opacity:1}
@media (hover:hover){.cat:hover{transform:translateY(-2px)}}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:.25rem 0 .625rem}
.sec-h h2{margin:0;font:700 1rem/1.2 var(--name)}
.all{font-size:.75rem;font-weight:700}
.all.n{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;padding:.25rem 0 .875rem}
.row{display:flex;gap:.625rem;margin:0 -1rem;padding:.25rem 1rem .875rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 1rem;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row .card{flex:0 0 calc(50% - .3125rem);scroll-snap-align:start}
.card{position:relative;display:flex;flex-direction:column;padding:.625rem;border:1px solid var(--glass-b);border-radius:1.25rem;background:var(--card);box-shadow:var(--g-sh);transition:transform var(--t)}
.card:active{transform:scale(.97)}
.card-a{display:flex;flex:1;flex-direction:column;gap:.3125rem;color:var(--ink)}
.card .ph{aspect-ratio:5/4;box-shadow:inset 4px 5px 10px #ffffffd9,inset -5px -7px 14px #aa641424}
.card .ph .art{position:absolute;inset:3.5% 0;height:93%;margin:auto}
.card .stk{position:absolute;top:-.375rem;right:-.375rem;z-index:1}
.card-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:.125rem 0 0;font:600 .9375rem/1.25 var(--name)}
.card-en{display:block;margin-top:-.125rem;font:400 .53125rem/1.3 var(--oi);letter-spacing:.4px;color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-p{display:block;margin:auto 0 0;padding-top:.125rem;padding-inline-end:2.375rem;font-size:.9375rem;font-weight:800;line-height:2rem;color:var(--navy);white-space:nowrap}
.card .add-wrap{position:absolute;left:.625rem;bottom:.625rem}
.card .add{width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:var(--g-orange);box-shadow:var(--clay-o);color:#fff;font-size:0;cursor:pointer;transition:transform var(--t)}
.card .add::before{content:"+";font:800 1.125rem/1 var(--ar)}
.card .add:active{transform:scale(.92)}
.card .add:disabled{width:auto;padding:0 .625rem;border-radius:999px;background:#EDE6D3;box-shadow:none;color:var(--muted);font-size:.6875rem;font-weight:700}
.card .add:disabled::before{content:none}
@media (hover:hover){.card:hover{transform:translateY(-2px)}}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.875rem}.row .card{flex-basis:180px}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.row .card{flex-basis:200px}}
@media (min-width:1024px){
.top{display:flex;align-items:center;gap:1rem;padding:1rem 0 .5rem}
.top .hd{flex:none;gap:1rem}
.top .sbar{flex:1;margin:0}
}
@media (min-width:600px){
.slider-wrap{--ofh:11.25rem}
.cats{margin:0 0 .875rem;padding:.125rem 0 .375rem}
.row{margin:0;padding:.25rem 0 .875rem}
}
@media (min-width:1024px){
.slider-wrap{--ofh:12.5rem}
.slide{padding-inline-end:12rem}
.slide .art{width:11.25rem;height:11.25rem}
.slide .ph{width:10rem}.save~.ph{width:8.5rem}
.slide .save{left:9.5rem}
}