/* products.html — page styles */
.s-lead{max-width:520px;color:var(--muted);font-size:1.05rem}
.medals-sec{background:var(--sand);padding:2rem 0 1.2rem;border-block:6px solid var(--clay)}
.medals{display:flex;gap:1.3rem;overflow-x:auto;padding:.8rem .5rem 1rem;scroll-snap-type:x proximity;scrollbar-width:none}
.medals::-webkit-scrollbar{display:none}
.medals>:first-child{margin-inline-start:auto}
.medals>:last-child{margin-inline-end:auto}
.medal{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:98px;border:0;background:none;color:var(--ink)}
.medal-i{width:84px;height:84px;border-radius:50%;background:var(--c);display:grid;place-items:center;padding:15px;box-shadow:0 0 0 0 var(--lime);transition:box-shadow .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.medal:hover .medal-i{transform:translateY(-7px) rotate(-8deg)}
.medal.active .medal-i{box-shadow:0 0 0 4px var(--sand),0 0 0 8px var(--lime);transform:scale(1.06)}
.medal svg{width:100%;height:100%}
.medal-n{font-size:.88rem;font-weight:500;padding:0 .7rem;border-radius:20px;white-space:nowrap;transition:.3s}
.medal.active .medal-n{background:var(--ink);color:var(--lime)}
.shop-sec{padding:2.2rem 0 clamp(56px,8vw,90px)}
.toolbar{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;background:#fff;border-radius:60px;padding:.6rem;box-shadow:0 8px 24px rgba(59,36,23,.07)}
.s-search{position:relative;flex:1 1 220px}
.s-search i{position:absolute;top:50%;inset-inline-start:1.1rem;transform:translateY(-50%);color:var(--muted)}
.s-search input{border:0;background:var(--paper);border-radius:50px;padding:.7rem 2.8rem .7rem 1rem}
.s-sort{width:auto;flex:0 1 230px;border:0;background-color:var(--paper);border-radius:50px;padding:.7rem 1.2rem .7rem 2.4rem}
.filter-open{position:relative}
.f-badge{background:var(--pink);color:#fff;border-radius:12px;min-width:22px;height:22px;line-height:22px;font-size:.75rem;display:inline-block;text-align:center;margin-inline-start:.3rem}
.f-card{background:#fff;border-radius:26px;padding:1.2rem 1.3rem;margin-bottom:1rem}
.f-card .f-h{font-size:1.3rem;color:var(--lapis);margin-bottom:.7rem}
.f-card .form-check{display:flex;align-items:center;gap:.5rem;padding:0;margin:0 0 .5rem}
.f-card .form-check-input{float:none;margin:0;width:1.2rem;height:1.2rem;cursor:pointer;border-color:var(--clay)}
.f-card .form-switch .form-check-input{width:2.4rem;height:1.3rem}
.form-check-input:checked{background-color:var(--pink);border-color:var(--pink)}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(255,76,255,.3);border-color:var(--pink)}
.form-check-label{flex:1;cursor:pointer}
.cnt{font-size:.78rem;color:var(--muted);background:var(--paper);border-radius:12px;padding:0 .55rem}
.form-range::-webkit-slider-thumb{background:var(--pink)}
.form-range::-moz-range-thumb{background:var(--pink)}
.form-range::-webkit-slider-runnable-track{background:var(--lime)}
.form-range::-moz-range-track{background:var(--lime)}
.price-lab{font-size:.9rem;color:var(--muted)}
.price-lab b{color:var(--ink)}
.res-bar{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;margin-bottom:1.2rem;color:var(--muted)}
.a-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.a-chip{border:0;background:var(--lime);border-radius:30px;padding:.1rem .8rem;font-size:.82rem;font-weight:500;color:var(--ink);transition:.2s}
.a-chip i{margin-inline-start:.4rem;font-size:.65rem}
.a-chip:hover{background:var(--pink);color:#fff}
.a-clear{border:0;background:none;font-size:.82rem;color:var(--pink);text-decoration:underline}
.empty{text-align:center;padding:3rem 1rem}
.empty h2{color:var(--lapis);margin-top:1rem;font-size:1.5rem}
.empty p{color:var(--muted)}
.s-note{background:var(--sand);padding:2.5rem 0}
.s-note i{font-size:1.8rem;color:var(--pink);display:block}
.s-note b{display:block;font-family:'Aref Ruqaa';font-size:1.2rem;color:var(--lapis)}
.s-note span{font-size:.85rem;color:var(--muted)}
@media(max-width:991px){
  .toolbar{border-radius:28px}
  .medals-sec{padding-top:1.4rem}
}
@media(max-width:575px){
  .medal{width:82px}
  .medal-i{width:70px;height:70px;padding:12px}
  .medals{gap:.8rem}
  .toolbar{padding:.5rem}
  .s-note .col-6{padding-inline:.4rem}
}
.s-hero{position:relative;background:var(--paper);padding-top:112px;overflow:hidden}
.s-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:1rem}
.s-text{padding-bottom:clamp(1.8rem,4vw,3rem)}
.s-art{position:relative;display:flex;justify-content:center;align-items:flex-end;min-width:0}
.s-mosque{position:relative;display:block;width:100%;max-width:500px;height:auto;margin-bottom:-10px}
.s-lead{margin-bottom:0}
@media(max-width:991px){
  .s-hero{padding-top:92px}
  .s-hero-grid{grid-template-columns:1fr;gap:0;text-align:center}
  .s-lead{margin-inline:auto}
  .s-art{max-width:400px;width:100%;margin-inline:auto}
}
@media(max-width:575px){
  .s-hero{padding-top:84px}
  .s-lead{font-size:.95rem}
  .s-art{max-width:300px}
  .s-text{padding-bottom:1.2rem}
}
@media(min-width:992px){
  #filters{position:sticky!important;top:96px;align-self:flex-start;max-height:calc(100vh - 110px);overflow-y:auto;scrollbar-width:thin}
}
#filters.offcanvas-start{--bs-offcanvas-width:min(380px,88vw)}
@media(max-width:575px){
  .s-sort,.filter-open{flex:1 1 calc(50% - .4rem);min-width:0}
  
  .res-bar{font-size:.9rem}
}

.f-card .chip:not(.active){background:var(--paper)}

/* sticky filters need the viewport (not <body>) to be the scroll container */
body.shop-page{overflow-x:visible}
/* a pressed toggle must look pressed for keyboard + AT users too */
.chip[aria-pressed="true"]{background:var(--ink);color:var(--lime)}
.f-card .chip[aria-pressed="true"]{background:var(--ink);color:var(--lime)}