/* ============================================================
   KOLODA — نظام التصميم النوبي / الماندالا
   "قرية نوبية وقت الغروب"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  /* --- ألوان اللوجو (قبلي دافئ على أسود) --- */
  --orange:     #e8842a;   /* برتقالي اللوجو */
  --amber:      #e5a92b;   /* ذهبي / كهرماني */
  --amber-soft: #f2c766;
  --red:        #cf3a2b;   /* أحمر قبلي */
  --red-deep:   #a52a1e;
  --teal:       #1f9e83;   /* تركوازي / أخضر اللوجو */
  --teal-deep:  #12463c;
  --clay:       var(--orange);   /* توافق قديم */
  --clay-dark:  #c25e18;
  --nubian-blue:var(--teal);     /* توافق قديم */
  --nubian-blue-2:var(--teal-deep);
  --ochre:      var(--amber);
  --ochre-soft: var(--amber-soft);
  --nile:       var(--teal);
  --palm:       #4e9e5f;

  /* --- خلفيات غامقة --- */
  --black:      #0c0a09;   /* أسود اللوجو */
  --bg:         #100d0b;
  --bg-2:       #16120f;
  --surface:    #1c1712;   /* بطاقات */
  --surface-2:  #241d17;
  --night:      #0c0a09;
  --ink:        #f2e7d3;   /* نص فاتح على غامق */

  /* --- دلالات --- */
  --bg-warm:    var(--surface);
  --sand:       #f2e7d3;   /* نص/عناصر فاتحة */
  --sand-deep:  #2a221b;
  --fg:         var(--ink);
  --muted:      #a8977c;
  --accent:     var(--orange);
  --accent-2:   var(--teal);
  --gold:       var(--amber);
  --line:       #322820;   /* حدود على غامق */

  /* --- خطوط --- */
  --font-display: 'Cairo', system-ui, sans-serif;
  --font-head:    'Reem Kufi', sans-serif;
  --font-body:    'Cairo', sans-serif;

  /* --- إيقاع --- */
  --radius: 10px;
  --shadow-soft: 0 20px 50px -24px rgba(0,0,0,.7);
  --shadow-card: 0 28px 60px -28px rgba(0,0,0,.8);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.7;
  direction: rtl;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ملمس حبيبي على الصفحة كلها */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* توهّج دافئ خافت على الأسود (زي إضاءة اللوجو) */
body{
  background-image:
    radial-gradient(1100px 620px at 80% -10%, rgba(232,132,42,.14), transparent 60%),
    radial-gradient(900px 560px at 5% 108%, rgba(31,158,131,.10), transparent 55%);
  background-attachment: fixed;
}

::selection{ background: var(--orange); color: var(--black); }

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

/* ---------- تخطيط عام ---------- */
.wrap{ width:min(1200px, 92vw); margin-inline:auto; }
.section{ padding: clamp(4rem, 9vw, 8rem) 0; position:relative; }

/* ---------- الهيدر ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  backdrop-filter: blur(12px);
  background: linear-gradient(to bottom, rgba(12,10,9,.9), rgba(12,10,9,.65));
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  font-family: var(--font-display);
  font-weight:700; font-size:1.7rem; letter-spacing:.5px;
  color: var(--clay-dark);
}
.brand .mark{ width:38px; height:38px; }
.brand .mark svg{ width:100%; height:100%; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; font-family:var(--font-head); }
.nav-links a{
  font-size:1.02rem; font-weight:500; color:var(--ink);
  position:relative; padding:.2rem 0; transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; inset-inline:0; bottom:-3px; height:2px;
  background: var(--clay); transform:scaleX(0); transform-origin:right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--clay-dark); }
.nav-links a:hover::after{ transform:scaleX(1); }

.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  background: var(--nubian-blue); color:var(--sand);
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  padding:.55rem 1.1rem; border-radius:40px; border:none; cursor:pointer;
  transition: transform .25s var(--ease), background .3s;
}
.cart-btn:hover{ transform: translateY(-2px); background: var(--nubian-blue-2); }
.cart-count{
  position:absolute; top:-8px; inset-inline-start:-8px;
  background: var(--ochre); color:var(--night);
  min-width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:.75rem; font-weight:700;
  font-family:var(--font-body);
}

/* ---------- أزرار ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-head); font-weight:600; font-size:1.02rem;
  padding:.85rem 1.9rem; border-radius:44px; border:2px solid transparent;
  cursor:pointer; transition: all .3s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--clay); color:var(--sand); box-shadow: 0 12px 30px -14px var(--clay-dark); }
.btn-primary:hover{ background:var(--clay-dark); transform:translateY(-3px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--muted); }
.btn-ghost:hover{ background:var(--ink); color:var(--black); border-color:var(--ink); }
.btn-blue{ background:var(--nubian-blue); color:var(--sand); }
.btn-blue:hover{ background:var(--nubian-blue-2); transform:translateY(-3px); }

/* ---------- عناوين الأقسام ---------- */
.eyebrow{
  font-family:var(--font-head); font-weight:600; letter-spacing:3px;
  text-transform:uppercase; font-size:.8rem; color:var(--clay);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:"✦"; color:var(--ochre); }
.title-lg{
  font-family:var(--font-display); font-weight:800;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height:1.1;
  color: var(--ink); margin:.4rem 0 1rem; letter-spacing:-.5px;
}
.title-md{
  font-family:var(--font-display); font-weight:800;
  font-size: clamp(1.8rem, 4vw, 2.8rem); color:var(--ink); letter-spacing:-.3px;
}
.lead{ font-size:1.15rem; color:var(--muted); max-width:56ch; }

/* شريط مثلثات قبلي (بألوان اللوجو) */
.frieze{
  height:22px; width:100%;
  background-size: 44px 22px; background-repeat:repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22'%3E%3Cpath d='M0 22 L11 2 L22 22 Z' fill='%23e8842a'/%3E%3Cpath d='M22 22 L33 2 L44 22 Z' fill='%231f9e83'/%3E%3Cpath d='M11 22 L22 6 L33 22 Z' fill='%23cf3a2b'/%3E%3C/svg%3E");
  opacity:.92;
}

/* ============================================================
   HERO — البوابة
   ============================================================ */
.hero{
  position:relative; min-height: 92vh;
  display:flex; align-items:center;
  background:
    radial-gradient(90% 80% at 78% 42%, rgba(232,132,42,.20), transparent 58%),
    radial-gradient(70% 70% at 20% 100%, rgba(31,158,131,.14), transparent 60%),
    var(--black);
  overflow:hidden;
}
.hero .mandala-bg{
  position:absolute; inset-inline-end:-6vw; top:50%; transform:translateY(-50%);
  width:min(52vw,560px); aspect-ratio:1; opacity:1;
  filter: drop-shadow(0 30px 70px rgba(232,132,42,.28));
  animation: floaty 7s ease-in-out infinite;
}
.hero .mandala-bg img{ width:100%; height:100%; object-fit:contain; }
@keyframes floaty{ 0%,100%{ transform:translateY(-50%) } 50%{ transform:translateY(calc(-50% - 14px)) } }
@keyframes spin{ to{ transform: rotate(360deg); } }
.hero-inner{ position:relative; z-index:3; padding-block: 6rem; }
.hero h1{
  font-family:var(--font-display); font-weight:900;
  font-size: clamp(2.8rem, 8vw, 6rem); line-height:1.08; color:var(--ink);
  letter-spacing:-.5px;
}
.hero h1 .accent{ color:var(--orange); }
.hero p.lead{ margin:1.5rem 0 2.4rem; font-size:1.25rem; color:#cbb99c; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }

/* بوابتان: معرض + متجر */
.gates{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3.5rem; }
.gate{
  position:relative; overflow:hidden; border-radius:var(--radius);
  padding:2.2rem; min-height:210px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid rgba(43,32,22,.12);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.gate:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.gate.gallery{ background: linear-gradient(150deg, var(--nubian-blue), var(--nubian-blue-2)); color:var(--sand); }
.gate.shop{ background: linear-gradient(150deg, var(--clay), var(--clay-dark)); color:var(--sand); }
.gate .g-icon{ position:absolute; inset-block-start:1.4rem; inset-inline-end:1.4rem; width:64px; opacity:.5; }
.gate h3{ font-family:var(--font-display); font-weight:800; font-size:2rem; margin-bottom:.3rem; }
.gate span{ font-family:var(--font-head); font-size:.95rem; opacity:.9; display:inline-flex; gap:.5rem; align-items:center; }
.gate span::after{ content:"←"; transition: transform .3s var(--ease); }
.gate:hover span::after{ transform: translateX(-6px); }

/* ============================================================
   شبكة أعمال / منتجات
   ============================================================ */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }

.grid{ display:grid; gap:1.6rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--bg-warm); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden;
  transition: transform .35s var(--ease), box-shadow .35s;
  display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.card .thumb{ aspect-ratio: 1; overflow:hidden; position:relative; background:var(--sand-deep); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.card:hover .thumb img{ transform: scale(1.06); }
.card .body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card h4{ font-family:var(--font-head); font-weight:600; font-size:1.2rem; color:var(--ink); }
.card .price{ font-family:var(--font-body); font-weight:700; color:var(--clay-dark); font-size:1.25rem; }
.card .price small{ color:var(--muted); font-weight:400; }
.card .tag{
  position:absolute; inset-block-start:.8rem; inset-inline-start:.8rem;
  background:var(--ochre); color:var(--night); font-family:var(--font-head);
  font-size:.75rem; font-weight:700; padding:.25rem .7rem; border-radius:40px;
}
.card .add{
  margin-top:auto; background:var(--nubian-blue); color:var(--sand);
  font-family:var(--font-head); font-weight:600; border:none; cursor:pointer;
  padding:.65rem; border-radius:40px; transition: background .3s, transform .2s;
}
.card .add:hover{ background:var(--nubian-blue-2); transform:translateY(-2px); }

/* بطاقة معرض (بدون سعر) */
.gcard .thumb{ aspect-ratio: 1; }
.gcard .body{ text-align:center; }

/* ============================================================
   قسم شريطي بالطابع النوبي
   ============================================================ */
.band{
  background: var(--night);
  color:var(--sand);
  position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0; opacity:.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23e0a72a' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='24'/%3E%3Ccircle cx='30' cy='30' r='12'/%3E%3Cpath d='M30 0v60M0 30h60M8 8l44 44M52 8L8 52'/%3E%3C/g%3E%3C/svg%3E");
}
.band .title-md{ color:var(--sand); }
.band .lead{ color:#d8c7a5; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.5rem; position:relative; z-index:2; }
.stat b{ font-family:var(--font-display); font-weight:900; font-size:2.8rem; color:var(--ochre); display:block; line-height:1; }
.stat span{ font-family:var(--font-head); color:#cdbb98; }

/* ============================================================
   الفوتر
   ============================================================ */
.site-footer{ background:var(--black); color:var(--sand); padding:4rem 0 2rem; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.site-footer h5{ font-family:var(--font-head); color:var(--ochre); margin-bottom:1rem; font-size:1.05rem; }
.site-footer a{ color:#d8c7a5; display:block; padding:.25rem 0; transition:color .25s; }
.site-footer a:hover{ color:var(--ochre); }
.footer-brand{ font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--sand); margin-bottom:.6rem; }
.footer-bottom{ border-top:1px solid rgba(224,167,42,.25); padding-top:1.5rem; text-align:center; color:#b6a582; font-family:var(--font-head); font-size:.9rem; }

/* ============================================================
   سلة جانبية (drawer)
   ============================================================ */
.cart-overlay{ position:fixed; inset:0; background:rgba(27,21,38,.55); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s; z-index:200; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; bottom:0; right:0; width:min(420px,90vw);
  background:var(--bg-warm); z-index:201; transform:translateX(100%);
  transition: transform .4s var(--ease); display:flex; flex-direction:column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.4);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ padding:1.4rem 1.5rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.cart-head h3{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--clay-dark); }
.cart-close{ background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink); line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.cart-item{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px dashed var(--line); }
.cart-item img{ width:66px; height:80px; object-fit:cover; border-radius:var(--radius); }
.cart-item .ci-body{ flex:1; }
.cart-item h5{ font-family:var(--font-head); font-size:1rem; }
.cart-item .ci-price{ color:var(--clay-dark); font-weight:700; }
.qty{ display:inline-flex; align-items:center; gap:.6rem; margin-top:.4rem; }
.qty button{ width:26px; height:26px; border:1px solid var(--line); background:var(--surface-2); border-radius:6px; cursor:pointer; font-weight:700; color:var(--ink); }
.ci-remove{ background:none; border:none; color:var(--clay); cursor:pointer; font-family:var(--font-head); font-size:.85rem; margin-top:.3rem; }
.cart-empty{ text-align:center; color:var(--muted); padding:3rem 1rem; font-family:var(--font-head); }
.cart-foot{ padding:1.4rem 1.5rem; border-top:1px solid var(--line); background:var(--surface-2); }
.cart-total{ display:flex; justify-content:space-between; font-family:var(--font-head); font-size:1.2rem; margin-bottom:1rem; }
.cart-total b{ color:var(--clay-dark); font-family:var(--font-body); }
.cart-foot .btn{ width:100%; justify-content:center; }

/* ============================================================
   حركات الدخول
   ============================================================ */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* ============================================================
   استجابة الشاشات
   ============================================================ */
@media (max-width: 960px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero .mandala-bg{ opacity:.25; inset-inline-end:-30vw; }
}
@media (max-width: 620px){
  .nav-links{ display:none; }
  .gates{ grid-template-columns:1fr; }
  .grid-4,.grid-3{ grid-template-columns: repeat(2,1fr); gap:1rem; }
  .stats{ grid-template-columns:1fr; gap:1.4rem; }
  .hero{ min-height:auto; }
}

/* شريط تنبيه صغير */
.toast{
  position:fixed; inset-block-end:2rem; inset-inline-start:50%; transform:translateX(50%) translateY(120%);
  background:var(--nile); color:var(--sand); padding:.9rem 1.6rem; border-radius:44px;
  font-family:var(--font-head); font-weight:600; box-shadow:var(--shadow-soft);
  z-index:300; transition: transform .45s var(--ease);
}
.toast.show{ transform:translateX(50%) translateY(0); }