:root{--red:#e3262b;--red-d:#b81c20;--navy:#22263a;--ink:#1d2030;--mute:#6b6f80;--line:#ececf0;--bg:#fbf8f4;--card:#fff;--cream:#fff3e6}
*{box-sizing:border-box}
html{scroll-padding-top:118px}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.4 Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[dir=rtl] body,[dir=rtl] input{font-family:Cairo,Montserrat,system-ui,sans-serif}
.top{max-width:720px;margin:0 auto;padding:14px 16px 10px;text-align:center}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{width:150px;height:auto}
.lang{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{border:0;background:none;font:800 14px Montserrat,Cairo,sans-serif;color:var(--mute);padding:7px 13px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--navy);color:#fff}
.tag{margin:6px 0 10px;color:var(--mute);font-size:14px;text-align:start}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badges span,.badges a{font-size:13px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--ink);text-decoration:none}
.badges a{background:var(--red);border-color:var(--red);color:#fff}
.sticky{position:sticky;top:0;z-index:10;background:rgba(251,248,244,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.search{display:flex;align-items:center;gap:8px;max-width:688px;margin:10px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 12px;margin-inline:16px}
@media(min-width:720px){.search{margin-inline:auto}}
.search svg{width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:2.2;stroke-linecap:round;flex:none}
.search input{border:0;outline:0;background:none;font:500 16px Montserrat,Cairo,sans-serif;padding:11px 0;width:100%;color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 11px;max-width:720px;margin:0 auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;font-weight:700;font-size:14px;color:var(--navy);text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);transition:.2s}
.chips a.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 12px rgba(227,38,43,.28)}
main{max-width:720px;margin:0 auto;padding:6px 16px 10px}
.cat{background:var(--card);border-radius:20px;margin:18px 0;box-shadow:0 1px 2px rgba(20,20,40,.05),0 8px 24px rgba(20,20,40,.06);overflow:hidden}
.cat-head{position:relative;display:block;width:100%;height:96px;border:0;padding:0;margin:0;background:var(--navy);cursor:pointer;text-align:start;font:inherit;color:#fff;-webkit-tap-highlight-color:transparent;transition:height .25s}
.cat.open .cat-head{height:150px}
.cat-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cat-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,18,30,.82),rgba(16,18,30,.25) 75%)}
[dir=rtl] .cat-head::after{background:linear-gradient(270deg,rgba(16,18,30,.82),rgba(16,18,30,.25) 75%)}
.ttl{position:absolute;inset-inline-start:18px;bottom:14px;z-index:1}
.ttl small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-top:3px}
.cat-head h2{margin:0;color:#fff;font:italic 900 28px/1.1 Montserrat,sans-serif;letter-spacing:.3px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
[dir=rtl] .cat-head h2{font:800 30px/1.2 Cairo,sans-serif}
.cat-head h2::before{content:"";display:block;width:34px;height:5px;border-radius:3px;background:var(--red);margin-bottom:7px}
.list,.pz{list-style:none;margin:0;padding:6px 18px 12px}
.list li,.pz li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line)}
.row{flex:1;min-width:0}
.line{display:flex;align-items:baseline;gap:8px}
.list li:last-child,.pz li:last-child{border-bottom:0}
.nm{font-weight:700;font-size:16px}
.nm small,.pz-name small{display:block;font:500 13px Cairo,sans-serif;color:var(--mute);margin-top:1px}
[dir=rtl] .nm small,[dir=rtl] .pz-name small{font-family:Montserrat,sans-serif;font-size:12px}
.dots{flex:1;border-bottom:2px dotted #d9d9e0;transform:translateY(-4px);min-width:12px}
.pr{font-weight:800;color:var(--red-d);white-space:nowrap;font-size:16px}
.pr i{font-style:normal;font-weight:700;font-size:12px;color:var(--mute)}

.pz-name{font-weight:800;font-size:17px;margin-bottom:8px}
.pz-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(min-width:520px){.pz-sizes{grid-template-columns:repeat(6,1fr)}}
.pz-sizes span{display:flex;flex-direction:column;align-items:center;background:var(--cream);border-radius:10px;padding:6px 4px}
.pz-sizes em{font-style:normal;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.4px}
[dir=rtl] .pz-sizes em{text-transform:none;font-size:12px}
.pz-sizes b{font-size:15px;color:var(--red-d)}
.empty{text-align:center;color:var(--mute);padding:40px 0}
.foot{text-align:center;padding:10px 24px 40px;color:var(--mute);font-size:13px;max-width:560px;margin:0 auto}
.foot img{opacity:.9}
.small{font-size:12px}
.cat-head.plain{aspect-ratio:auto;height:110px;background:var(--red) repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px)}
.cat-head.plain::after{display:none}.cat-head.plain h2::before{background:#fff}
.chev{position:absolute;inset-inline-end:16px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:#fff;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.chev::before{content:"";position:absolute;left:12px;top:10px;width:8px;height:8px;border:solid var(--red);border-width:0 3px 3px 0;transform:rotate(45deg);transition:transform .25s}
.cat.open .chev::before{transform:translateY(4px) rotate(225deg)}
.cat-body{display:none}
.cat.open .cat-body{display:block}
.cat{margin:12px 0}
.cat-head h2{font-size:24px}
[dir=rtl] .cat-head h2{font-size:26px}
.thumb{flex:none;width:64px;height:64px;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--cream);cursor:zoom-in}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ds{display:block;font-size:13px;font-weight:500;color:var(--mute);margin-top:3px;line-height:1.35}
.pz-name .nm{font-size:17px;font-weight:800}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,12,20,.88);display:flex;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}.lb img{max-width:100%;max-height:100%;border-radius:14px}