/* ركن الخرطوم — customer site
   Clean retail layout on white; one brand colour (karkade red) used for actions and the hero;
   warm greys for surfaces; saffron only for small highlights. Kufi for headings, Plex for text. */
:root{
  --bg:#ffffff; --soft:#f6f4f1; --soft2:#efebe6; --line:#e8e3dd;
  --ink:#1b1715; --ink2:#4b4440; --muted:#8a817a;
  --brand:#7a1d2b; --brand-2:#5e1420; --brand-soft:#f8ecee;
  --saffron:#e3a21a; --ok:#1d7f55; --bad:#c0392b; --info:#2f6fb5;
  --fh:"Noto Kufi Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;
  --fb:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px; --r-lg:24px; --shadow:0 1px 2px rgba(27,23,21,.05),0 8px 24px -12px rgba(27,23,21,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
body.lock{overflow:hidden}
h1,h2,h3{font-family:var(--fh);font-weight:700;line-height:1.3;margin:0;text-wrap:balance}
h1{font-size:clamp(24px,3.4vw,32px)} h2{font-size:clamp(18px,2.4vw,22px)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:12px 20px;font-weight:600;font-size:14.5px;transition:background .2s,border-color .2s,transform .1s;white-space:nowrap;background:none}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--brand)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-outline{border-color:var(--line);background:#fff}.btn-outline:hover{border-color:var(--ink2)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.danger{color:var(--bad)!important}
.link{border:0;background:none;color:var(--brand);font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px}

/* ---------- announcement + header */
.ann{background:var(--ink);color:#f4efe9;text-align:center;font-size:13px;padding:7px 16px}
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-color:var(--line)}
.top-in{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo b{display:block;font-family:var(--fh);font-size:17px;line-height:1.2}
.logo small{display:block;font-size:11.5px;color:var(--muted);line-height:1.2}
.search{flex:1;max-width:460px;position:relative;margin-inline-start:12px}
.search svg{position:absolute;right:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2}
.search input{width:100%;height:44px;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:0 42px 0 14px;outline:none;transition:border-color .2s,background .2s}
.search input:focus{border-color:var(--ink2);background:#fff}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:10px;font-weight:500;color:var(--ink2)}
.nav a:hover{background:var(--soft);color:var(--ink)}
.icon-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;position:relative;font-weight:500;font-size:14px}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.acc{margin-inline-start:auto}
.count{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}

/* ---------- hero */
.hero{padding-top:20px}
.hero-card{position:relative;overflow:hidden;border-radius:var(--r-lg);background:radial-gradient(120% 140% at 15% 80%,#9b2a3a 0%,#6f1a27 45%,#3e0c15 100%);color:#fff;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:440px}
.hero-card::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 28% 70%,rgba(255,190,120,.18),transparent 70%);pointer-events:none}
.hero-text{position:relative;z-index:1;padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.hero-kicker{display:inline-flex;align-self:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:5px 12px;font-size:12.5px}
.hero h1{font-size:clamp(38px,6vw,68px);font-weight:800;line-height:1.12}
.hero p{color:rgba(255,255,255,.82);max-width:42ch;font-size:16px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-usp{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.75)}
.hero-usp li::before{content:"✓";color:var(--saffron);margin-inline-end:6px;font-weight:700}
.hero-art{position:relative;min-height:320px}
.hero-poster,.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-art canvas{opacity:0;transition:opacity .8s;touch-action:pan-y;cursor:grab}
.hero-art canvas.live{opacity:1}
.hero-art canvas.live~.hero-poster,.hero-art:has(canvas.live) .hero-poster{opacity:0}
.hero-poster{transition:opacity .8s;padding:6%}

/* ---------- sections */
.sec{padding-top:40px}
.page{padding-top:24px;padding-bottom:40px;min-height:60vh}
.narrow{max-width:820px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head a{color:var(--brand);font-weight:600;font-size:14px}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a:hover{color:var(--ink)}
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cat{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:14px;text-align:center}
.cat-img{aspect-ratio:1;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;display:block}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.cat:hover .cat-img img{transform:scale(1.05)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;padding-bottom:2px}
.chips a{white-space:nowrap;border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13.5px;font-weight:500}
.chips a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sort select{border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:#fff}

/* ---------- product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:18px 14px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.card{display:flex;flex-direction:column;min-width:0;background:#fff}
.card-img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.noimg{width:100%;height:100%;display:grid;place-items:center;font-family:var(--fh);font-size:28px;color:var(--muted);background:var(--soft2)}
.badge{position:absolute;top:10px;right:10px;background:#fff;color:var(--ink);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;box-shadow:var(--shadow)}
.badge.sale{background:var(--brand);color:#fff}
.badge.low{top:auto;bottom:10px;background:rgba(27,23,21,.78);color:#fff}
.card-body{padding:10px 2px 0;display:flex;flex-direction:column;gap:2px;flex:1}
.card-name{font-weight:600;font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-unit{font-size:12.5px;color:var(--muted)}
.card-price{display:flex;align-items:baseline;gap:4px;margin-top:4px}
.card-price b{font-size:17px;font-weight:700}
.card-price small{font-size:12px;color:var(--muted)}
.card-price s{font-size:12.5px;color:var(--muted);margin-inline-start:6px}
.card-ctl{margin-top:10px}
.add{width:100%;height:40px;border:1px solid var(--ink);border-radius:10px;background:#fff;font-weight:600;font-size:13.5px;transition:background .2s,color .2s}
.add:hover{background:var(--ink);color:#fff}
.stepper{display:flex;align-items:center;justify-content:space-between;height:40px;border-radius:10px;background:var(--brand);color:#fff;overflow:hidden}
.stepper button{width:44px;height:100%;border:0;background:none;color:#fff;font-size:18px}
.stepper button:hover{background:rgba(255,255,255,.12)}
.stepper span{font-weight:700}
.soldout{display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;background:var(--soft);color:var(--muted);font-size:13px;font-weight:600}
.sk .card-img{animation:sk 1.4s infinite}
.sk i{display:block;height:12px;border-radius:6px;background:var(--soft);margin-top:10px;animation:sk 1.4s infinite}
.sk i+i{width:50%}
@keyframes sk{50%{opacity:.5}}
.empty{text-align:center;color:var(--muted);padding:48px 16px}
.empty a{color:var(--brand);font-weight:600}

/* ---------- product page */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.pdp-img{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line)}
.pdp-img img{width:100%;height:100%;object-fit:cover}
.pdp-info{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.pdp-price{display:flex;align-items:baseline;gap:6px}
.pdp-price b{font-size:30px;font-weight:700}
.pdp-price s{color:var(--muted);margin-inline-start:8px}
.pdp-desc{color:var(--ink2)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.facts div{background:var(--soft);border-radius:12px;padding:10px 12px}
.facts dt{font-size:12px;color:var(--muted)}.facts dd{margin:0;font-weight:600}
.pdp-ctl .add,.pdp-ctl .stepper{height:50px;font-size:15px}

/* ---------- bands & info */
.band-tour,.band-share{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--soft);border-radius:var(--r-lg);padding:28px}
.band-tour p,.band-share p{color:var(--ink2);margin-top:4px}
.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:48px}
.info>div{background:var(--soft);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.info span{font-size:13px;color:var(--ink2)}

/* ---------- panels & forms */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:14px}
.panel h2{margin-bottom:12px}
.form{display:grid;gap:12px}
.form.two{grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
.form label,.panel>label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink2)}
input:where(:not([type=radio]):not([type=checkbox])),select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;outline:none;font-size:15px;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--ink2)}
input:disabled{background:var(--soft);color:var(--muted)}
.row{display:flex;gap:8px;align-items:center}.row .grow,.row input{flex:1;min-width:0}
.wrap-row{flex-wrap:wrap}
.err{color:var(--bad);font-size:13px;min-height:1em}
.notice{background:#fff7e6;border:1px solid #f3dca8;color:#6b4a07;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.notice.bad{background:#fdecea;border-color:#f5c2bc;color:#7a1b12}
.auth{max-width:440px;margin:0 auto}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:12px;padding:4px;margin-bottom:16px}
.tabs button{border:0;background:none;border-radius:9px;padding:9px;font-weight:600;color:var(--muted)}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth .btn-outline{width:100%}
.opts{display:grid;gap:8px;margin-bottom:12px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.opt input{margin-top:5px;accent-color:var(--brand)}
.opt b{display:block;font-size:14.5px}.opt small{color:var(--muted)}
.opt.soon{opacity:.6;cursor:not-allowed;background:var(--soft)}
.soon-tag{font-style:normal;font-size:11px;font-weight:700;background:var(--saffron);color:#fff;border-radius:99px;padding:1px 8px;margin-inline-start:6px;vertical-align:middle}
.mysr-form{max-width:420px}
.checkout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}
.co-side{position:sticky;top:90px}
.li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.li:last-of-type{border-bottom:0}
.li.total{font-weight:700;font-size:16px;border-top:1px solid var(--ink);border-bottom:0;margin-top:4px;padding-top:12px}
.addr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.addr b{display:block}
.order-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.order-row:last-child{border-bottom:0}
.order-row b{display:block}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--soft);color:var(--ink2);white-space:nowrap}
.s-new{background:#eaf1fb;color:var(--info)} .s-confirmed,.s-ready{background:#fff4dd;color:#8a5a00}
.s-picked,.s-onway{background:var(--brand-soft);color:var(--brand)} .s-delivered{background:#e6f4ee;color:var(--ok)} .s-cancelled{background:#f3f1ef;color:var(--muted)}
.track{list-style:none;margin:8px 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.track li{font-size:12.5px;color:var(--muted)}
.track i{display:block;height:5px;border-radius:99px;background:var(--soft2);margin-bottom:8px}
.track li.done{color:var(--ink);font-weight:600}.track li.done i{background:var(--brand)}

/* ---------- cart drawer */
.scrim{position:fixed;inset:0;background:rgba(20,16,14,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.cart{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(420px,100vw);background:#fff;display:flex;flex-direction:column;transform:translateX(-101%);transition:transform .35s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.cart.on{transform:none;box-shadow:0 0 60px rgba(0,0,0,.2)}
.cart header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.cart-body{flex:1;overflow:auto;padding:6px 18px}
.line{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
.line-img{grid-row:span 2;width:64px;height:80px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.line-img img{width:100%;height:100%;object-fit:cover}
.line-info{display:flex;flex-direction:column;font-size:14px}
.line-info a{font-weight:600}
.line .stepper,.line .add{height:34px;width:140px}
.cart footer{border-top:1px solid var(--line);padding:14px 18px;display:flex;flex-direction:column;gap:6px}
.cart-zone{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:4px}
.cart-zone select{padding:8px 10px}
.hint{font-size:12.5px;color:var(--ok);min-height:1em;margin:0}

/* ---------- footer & bottom nav */
.foot{background:var(--soft);margin-top:48px;padding:36px 0 24px;font-size:13.5px;color:var(--ink2)}
.foot-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.foot b{display:block;color:var(--ink);font-family:var(--fh);margin-bottom:6px}
.foot a{color:var(--brand)}
.copy{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.bnav{display:none}
.toast{position:fixed;z-index:100;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.3s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast[data-kind=bad]{background:var(--bad)}

@media (max-width:1000px){
  .nav{display:none}
  .cats{grid-template-columns:repeat(5,minmax(110px,1fr));overflow-x:auto;scrollbar-width:none}
  .pdp{grid-template-columns:1fr;gap:20px}.pdp-info{position:static}
  .checkout{grid-template-columns:1fr}.co-side{position:static}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .top-in{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .search{order:3;flex-basis:100%;max-width:none;margin:0}
  .acc span{display:none}
  .hero{padding-top:12px}
  .hero-card{grid-template-columns:1fr;min-height:0}
  .hero-art{min-height:250px;order:-1;margin-bottom:-6px}
  .hero-text{padding:0 22px 26px}
  .info{grid-template-columns:1fr}
  .form.two{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr 1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .rail{grid-auto-columns:46%}
  .bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:50;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);padding:4px 0}
  .bnav a.on{color:var(--brand)}
  .bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
  .bnav .count{top:-2px;left:calc(50% - 22px)}
  .top .cart-btn{display:none}
  .order-row{grid-template-columns:1fr auto}
  .order-row>b{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}