/* مناسباتي — مائدة الزيتون
   Cool limestone + deep olive + date saffron. System fonts only. */
:root{
  --stone:#EEF2EE;
  --panel:#FBFCFB;
  --ink:#1A2B22;
  --ink-soft:#5A6B62;
  --line:#CDD6CF;
  --olive:#2D5A3D;
  --olive-mid:#3F7350;
  --olive-soft:rgba(45,90,61,.1);
  --saffron:#B8942E;
  --saffron-soft:#D4B85A;
  /* aliases for existing blades */
  --paper:var(--stone);
  --cream:var(--panel);
  --gold:var(--saffron);
  --gold-deep:var(--olive);
  --gold-soft:var(--saffron-soft);
  --shadow:none;
  --shadow-lift:0 10px 28px rgba(26,43,34,.1);
  --radius:12px;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic","Segoe UI Historic",sans-serif;
  line-height:1.75;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(45,90,61,.07), transparent 55%),
    radial-gradient(700px 380px at 0% 100%, rgba(184,148,46,.05), transparent 50%),
    linear-gradient(180deg, var(--stone) 0%, #E6EBE6 100%);
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%; height:auto}
.display{font-family:inherit; font-weight:700}
.latin{font-family:inherit}
.soft{color:var(--ink-soft)}
.foil{color:var(--olive); background:none; -webkit-background-clip:unset; background-clip:unset}
.eyebrow{
  letter-spacing:.03em; font-size:.72rem; color:var(--olive-mid);
  font-weight:700; margin:0 0 .3rem;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.15rem 3.25rem}

/* —— chrome —— */
.topbar{
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; justify-content:space-between; align-items:center;
  padding:.45rem 1.15rem; font-size:.7rem;
  background:var(--olive); color:rgba(251,252,251,.88);
}
.topbar a{color:inherit; text-decoration:none}
.topbar a:hover{color:#fff}
.site-header{
  display:flex; flex-wrap:wrap; gap:.85rem 1rem; align-items:center; justify-content:space-between;
  padding:.85rem 1.15rem; max-width:var(--wrap); margin:0 auto;
  position:sticky; top:0; z-index:30;
  background:rgba(238,242,238,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 20px rgba(26,43,34,.06);
}
.brand{display:flex; gap:.7rem; align-items:center; text-decoration:none; color:inherit; min-width:0}
.brand-seal{
  flex:0 0 auto;
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:800; font-size:1.1rem; color:var(--panel);
  background:linear-gradient(145deg, var(--olive-mid), var(--olive));
  box-shadow:0 2px 0 rgba(26,43,34,.1);
}
.brand-name{
  display:block; font-size:clamp(1.4rem, 3vw, 1.65rem); line-height:1.05; font-weight:800;
  color:var(--olive); letter-spacing:-.01em;
}
.brand-sub{display:block; font-size:.7rem; color:var(--ink-soft); margin-top:.15rem}
.nav-chips{display:flex; flex-wrap:wrap; gap:.15rem .55rem; flex:1 1 220px; justify-content:flex-end; align-items:center}
.chip{
  border:0; background:transparent; border-radius:0;
  padding:.35rem .15rem; font-size:.76rem; color:var(--ink-soft);
  text-decoration:none; transition:color .2s, box-shadow .2s;
  box-shadow:inset 0 -2px 0 transparent;
}
.chip:hover,.chip.on{color:var(--olive); box-shadow:inset 0 -2px 0 var(--olive)}
.chip-gold{color:var(--saffron); font-weight:700}
.chip-gold:hover,.chip-gold.on{color:var(--olive); box-shadow:inset 0 -2px 0 var(--saffron)}
.header-actions{display:flex; gap:.45rem; align-items:center; flex-wrap:wrap}
.btn,.btn-gold,.btn-line{
  display:inline-block; text-decoration:none; border:none; cursor:pointer; font:inherit; font-weight:700;
  border-radius:8px; padding:.72rem 1.15rem; transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn{background:var(--ink); color:var(--panel)}
.btn:hover{background:#0F1A14}
.btn-gold{background:var(--olive); color:var(--panel)}
.btn-gold:hover{background:var(--olive-mid)}
.btn-line{border:1.5px solid var(--olive); color:var(--olive); background:transparent}
.btn-line:hover{background:rgba(45,90,61,.06)}

/* —— surfaces & shelves —— */
.surface{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.05rem;
  transition:transform .25s ease, border-color .25s ease;
}
.shelf{margin:0 0 2.2rem}
.shelf-head{display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; justify-content:space-between; margin-bottom:.35rem}
.shelf-head .section-title{margin:0}
.shelf-more{margin-top:.95rem}
.grid-cards{
  display:grid; gap:1.05rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-top:1rem; align-items:stretch;
}
.grid-cards > a.surface,
.grid-cards > article.surface{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
}
.grid-cards > a.surface:hover,
.grid-cards > article.surface:hover{
  transform:translateY(-3px);
  border-color:var(--olive-mid);
}
.card-media{
  aspect-ratio:5/4; overflow:hidden; border-radius:8px;
  border:0; background:var(--line); position:relative;
  margin:-.1rem -.1rem .5rem;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition:transform .5s ease;
}
.grid-cards > a.surface:hover .card-media img{transform:scale(1.04)}
.card-title{margin:.55rem 0 .15rem; font-size:1.02rem; line-height:1.35; font-weight:700}
.card-meta{font-size:.8rem; margin:0; color:var(--ink-soft)}
.price{font-size:1.2rem; color:var(--olive); letter-spacing:.01em; font-weight:800; margin:.45rem 0 0}
.section-title{
  font-size:clamp(1.5rem, 2.8vw, 2rem); margin:.2rem 0; line-height:1.3; font-weight:800; color:var(--ink);
}
.section-head{margin-top:.35rem}
.rule{
  height:1px; border:0;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:2rem 0;
}

/* —— Full-bleed home / occasion hero —— */
.hero-bleed{
  position:relative; isolation:isolate;
  width:100%;
  min-height:min(88vh, 640px);
  display:grid; align-items:end;
  overflow:hidden;
  background:var(--ink);
}
.hero-bleed--page{min-height:min(62vh, 480px)}
.hero-bleed__media{position:absolute; inset:0; z-index:0}
.hero-bleed__media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  animation:heroSettle 1.35s ease-out both;
}
.hero-bleed__shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg, rgba(18,32,24,.88) 0%, rgba(18,32,24,.55) 48%, rgba(18,32,24,.22) 100%),
    linear-gradient(0deg, rgba(18,32,24,.5) 0%, transparent 42%);
}
.hero-bleed__inner{
  position:relative; z-index:2;
  max-width:var(--wrap); width:100%; margin:0 auto;
  padding:clamp(3.25rem, 8vw, 5.25rem) 1.15rem clamp(2.4rem, 5.5vw, 3.4rem);
  color:var(--panel);
  animation:heroRise .85s ease-out both;
}
.hero-bleed__brand{
  display:block; font-size:clamp(2.6rem, 7vw, 4.2rem); font-weight:800;
  line-height:1.05; letter-spacing:-.02em; margin:0 0 .55rem; color:#fff;
}
.hero-bleed__brand span{
  display:inline-block; border-bottom:3px solid var(--saffron); padding-bottom:.08rem;
}
.hero-bleed h1{
  font-size:clamp(1.3rem, 3vw, 1.8rem); font-weight:600;
  line-height:1.35; margin:0 0 .65rem; color:rgba(251,252,251,.96); max-width:22em;
}
.hero-bleed .hero-copy{
  font-size:1rem; max-width:28rem; margin:0 0 1.3rem;
  color:rgba(238,242,238,.82); line-height:1.65;
}
.hero-bleed .hero-cta{display:flex; flex-wrap:wrap; gap:.65rem; margin:0}
.hero-bleed .btn-gold{background:var(--saffron); color:var(--ink)}
.hero-bleed .btn-gold:hover{background:var(--saffron-soft)}
.hero-bleed .btn-line{border-color:rgba(251,252,251,.55); color:#fff}
.hero-bleed .btn-line:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* —— Inner-page hero (product / story) —— */
.hero{
  display:grid; gap:1.75rem; align-items:center;
  padding:1.35rem 0 1rem;
}
@media(min-width:900px){.hero{grid-template-columns:1fr 1fr; gap:2.1rem}}
.hero h1,
.hero-slogan{
  font-size:clamp(1.7rem, 3.5vw, 2.6rem); line-height:1.25;
  margin:.3rem 0 .7rem; font-weight:800; color:var(--olive);
}
.hero-kicker,.hero-brand{display:none} /* home uses hero-bleed */
.hero-copy{font-size:1.02rem; max-width:36rem; margin:0}
.hero-cta{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.2rem 0 .4rem}
.hero-media{
  border-radius:0; overflow:hidden; border:0;
  background:var(--line); min-height:260px; position:relative;
  aspect-ratio:4/3;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; min-height:260px;
}
.hero-media .caption{display:none}
.trust-row{display:none} /* clutter out of first viewport */

/* —— forms / misc —— */
.flash{border-radius:10px; padding:.85rem 1rem; margin:1rem 0}
.flash.ok{background:var(--olive-soft); color:var(--olive)}
.flash.err{background:rgba(139,30,30,.08); color:#8b1e1e}
.alert{
  border-radius:10px; padding:.85rem 1rem;
  background:var(--olive-soft); border:1px solid var(--line); color:var(--ink);
}
label{display:block; margin:.7rem 0 .3rem; font-size:.85rem; font-weight:600}
input,select,textarea{
  font:inherit; width:100%; padding:.7rem .85rem; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:none; border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(45,90,61,.14);
}
table{width:100%; border-collapse:collapse}
th,td{padding:.55rem; border-bottom:1px solid var(--line); text-align:start; font-size:.92rem}
.auth-shell{max-width:460px; margin:1.5rem auto}
.steps{display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem}
.step{
  font-size:.72rem; padding:.35rem .7rem; border-radius:6px;
  border:1px solid var(--line); color:var(--ink-soft);
}
.step.on{border-color:var(--olive); color:var(--olive); background:var(--olive-soft); font-weight:700}
.site-footer{
  border-top:1px solid var(--line); padding:2.25rem 1.15rem 2.5rem; margin-top:1rem;
  font-size:.9rem; background:rgba(251,252,251,.65);
}
.footer-inner{max-width:var(--wrap); margin:0 auto}
.footer-grid{display:grid; gap:1.25rem}
@media(min-width:700px){.footer-grid{grid-template-columns:1.3fr .7fr}}
.site-footer a{display:inline-block; color:var(--olive); text-decoration:none; margin:.2rem .55rem .2rem 0}
.site-footer a:hover{text-decoration:underline}
.serve-seg{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.serve-seg button{
  border:1px solid var(--line); background:var(--panel); border-radius:6px;
  padding:8px 14px; font:inherit; font-size:.78rem; color:var(--ink-soft); cursor:pointer;
}
.serve-seg button.on{border-color:var(--olive); color:var(--olive); background:var(--olive-soft); font-weight:700}
.guest-step{display:flex;align-items:center;gap:8px}
.guest-step input{width:6rem;text-align:center}
.guest-step .btn-line{padding:.4rem .8rem}
.calc-lines{margin-top:.6rem}
.calc-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.65rem 0;border-bottom:1px solid var(--line)}
.calc-line input{width:5.5rem;text-align:center}
pre.mono{
  white-space:pre-wrap; font-family:ui-monospace,monospace; font-size:.8rem;
  background:var(--ink); color:var(--panel); padding:1rem; border-radius:10px; overflow:auto;
}
.empty-state{
  grid-column:1 / -1;
  padding:1.4rem 1.1rem; text-align:center;
  border:1px dashed var(--line); border-radius:var(--radius);
  background:rgba(251,252,251,.7); color:var(--ink-soft);
}
.page-band{margin:0 0 .35rem; max-width:40rem}
.page-band .section-title{margin-top:.15rem}
.filter-row{
  display:flex; flex-wrap:wrap; gap:.55rem .9rem; margin-top:.85rem;
  padding-bottom:.4rem; border-bottom:1px solid var(--line);
}
.cta-band{
  margin-top:1.5rem; padding:1.6rem 1.2rem;
  background:linear-gradient(135deg, rgba(45,90,61,.09), rgba(184,148,46,.07));
  border:1px solid var(--line); border-radius:var(--radius);
}

@keyframes heroSettle{
  from{transform:scale(1.06); opacity:.85}
  to{transform:scale(1); opacity:1}
}
@keyframes heroRise{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}

@media(max-width:720px){
  .nav-chips{
    order:3; width:100%; justify-content:flex-start;
    max-height:2.6rem; overflow-x:auto; flex-wrap:nowrap;
    padding-bottom:.15rem; -webkit-overflow-scrolling:touch;
  }
  .nav-chips .chip{flex:0 0 auto}
  .header-actions{margin-inline-start:auto}
  .hero-bleed{min-height:min(78vh, 520px)}
  .grid-cards{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem}
  .card-title{font-size:.95rem}
  .price{font-size:1.08rem}
}
@media(max-width:420px){
  .grid-cards{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bleed__media img,
  .hero-bleed__inner{animation:none}
  .grid-cards > a.surface:hover,
  .grid-cards > article.surface:hover,
  .grid-cards > a.surface:hover .card-media img{transform:none}
}