/* qitaajo.com — tokens from the design canvas. White ground, hairlines, olive accent, Almarai. */
:root{--bg:#fff;--field:#F2F2F2;--bar:#F7F7F5;--ink:#1A1A1A;--muted:#6E6A64;--border:#E2DDD4;--photo:#E6E1D8;--photo2:#DFD9CE;--accent:#1E5A4A;--tint:#E3EEE9;--danger:#A33A2A;--r-img:6px;--r-ctl:8px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 Almarai,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:700;line-height:1.3}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}
.row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.muted{color:var(--muted)}.small{font-size:12px}.accent{color:var(--accent)}
.btn{height:48px;padding:0 20px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;white-space:nowrap}
.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:#174a3c}
.btn.outline{border:1px solid var(--ink);background:#fff}.btn.outline:hover{background:var(--bar)}
.btn.small{height:40px;padding:0 16px;font-size:14px}
.btn.square{width:48px;padding:0}.btn.square svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
/* header */
.top{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:5}
.top .row{height:64px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:3px;font-weight:700;font-size:22px;line-height:1;flex:none}.logo svg{margin-top:5px}
.search{flex:1 1 200px;min-width:0;height:42px;border-radius:var(--r-ctl);background:var(--field);display:flex;align-items:center;gap:8px;padding:0 12px}
.search svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ink)}
.sections{display:flex;gap:20px;font-size:14px;flex:none}.sections a:hover{color:var(--accent)}
/* hero */
.hero{display:flex;align-items:center;gap:48px;padding:48px 0 40px;flex-wrap:wrap}
.herocopy{flex:1 1 380px;display:flex;flex-direction:column;gap:18px}
.hero h1{font-size:40px;line-height:1.25}
.hero p{margin:0;font-size:16px;color:var(--muted);max-width:520px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.heroimg{flex:0 1 420px;width:100%;max-width:420px;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:var(--r-img);background:var(--photo)}
/* grid */
.grid-head{display:flex;align-items:baseline;justify-content:space-between;padding:24px 0 10px;gap:12px}
.grid-head h2{font-size:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:18px}
.chip{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--border);display:inline-flex;align-items:center;font-size:13px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 14px;padding-bottom:48px}
.card{display:flex;flex-direction:column;gap:3px}
.tile{position:relative;aspect-ratio:3/4;border-radius:var(--r-img);overflow:hidden;background:var(--photo);margin-bottom:5px}
.ph{width:100%;height:100%;object-fit:cover}
.ph.empty{display:flex;align-items:center;justify-content:center;background:var(--photo)}
.ph.empty svg{width:26%;max-width:44px;fill:none;stroke:rgba(26,26,26,.22);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tag{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;padding:3px 7px;border-radius:4px}
.tag.danger{color:var(--danger)}
.sold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(26,26,26,.45);color:#fff;font-weight:700;font-size:14px}
.sold.big{font-size:20px;border-radius:var(--r-img)}
.heart{position:absolute;bottom:8px;left:8px;height:26px;padding:0 8px;border-radius:999px;background:#fff;display:flex;align-items:center;gap:4px;font-size:12px}
.heart svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:1.8}
.price{font-weight:700;font-size:15px}.price s{font-weight:400;font-size:12px;color:var(--muted);margin-inline-start:4px}
.title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font-size:12px;color:var(--muted)}.deliv{font-size:12px;color:var(--accent)}
.empty-msg{color:var(--muted);text-align:center;padding:60px 0}
/* item */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:16px 0 0}.crumbs .here{color:var(--ink)}
.item{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;padding:20px 0 40px}
.gallery{flex:1 1 480px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:relative}
.gallery .ph{border-radius:var(--r-img);aspect-ratio:1;background:var(--photo)}
.gallery .ph.main{grid-column:1/-1;aspect-ratio:4/3}
.panel{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px;position:sticky;top:84px}
.pricehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.bigprice{font-weight:700;font-size:26px}.bigprice s{font-weight:400;font-size:14px;color:var(--muted)}
.panel h1{font-weight:400;font-size:18px;margin-top:-10px}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0}
.facts dt{color:var(--muted)}.facts dd{margin:0}
.desc{margin:0;font-size:14px;line-height:1.8;white-space:pre-line}
.cta{display:flex;gap:10px}.cta .primary{flex:1}
.seller{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--border)}
.avatar{width:48px;height:48px;border-radius:50%;background:#D6D0C4;object-fit:cover;flex:none}.avatar.lg{width:72px;height:72px}
.who{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14px}
.link{font-size:13px;text-decoration:underline}
.more{border-top:1px solid var(--border);padding-top:28px}.more h2{font-size:18px;margin-bottom:16px}
/* profile */
.profile{display:flex;align-items:center;gap:18px;padding:32px 0 20px;flex-wrap:wrap}
.profile h1{font-size:22px}
.stats{margin:0;display:flex;gap:28px;margin-inline-start:auto}
.stats div{display:flex;flex-direction:column-reverse;align-items:center}.stats dt{font-size:12px;color:var(--muted)}.stats dd{margin:0;font-weight:700;font-size:20px}
/* app box + footer */
.appbox{background:var(--bar);border-top:1px solid var(--border)}
.appbox .row{padding:40px 20px;justify-content:space-between}
.appcopy{max-width:620px;display:flex;flex-direction:column;gap:10px}.appcopy h2{font-size:20px}.appcopy p{margin:0;color:var(--muted)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.store{height:44px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--border);display:inline-flex;align-items:center;font-size:13px;color:var(--muted);background:#fff}
footer{border-top:1px solid var(--border)}
footer .row{padding:24px 20px;justify-content:space-between;font-size:13px;color:var(--muted)}
footer .brand{font-weight:700;color:var(--ink);font-size:16px}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
/* info */
.info{max-width:720px;padding:32px 0 48px}.info h1{font-size:26px;margin-bottom:6px}.info h2{font-size:17px;margin:22px 0 6px}.info p{margin:0;line-height:1.9}
@media (max-width:720px){
  .sections{display:none}
  .hero{padding:28px 0 24px;gap:24px}.hero h1{font-size:28px}
  .heroimg{max-width:100%;aspect-ratio:4/3}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .panel{position:static}
}