:root{
  --paper:#f6efdd;          /* warm parchment base */
  --paper-2:#efe4c9;        /* deeper card surface */
  --paper-3:#e8dcbd;
  --ink:#20291a;            /* deep forest ink (text) */
  --forest:#33432a;         /* secondary green */
  --honey:#c8871e;          /* honey amber accent */
  --honey-lit:#e0a63a;
  --honey-deep:#9b6510;
  --wax:#93412a;            /* terracotta wax — used sparingly */
  --line:rgba(32,41,26,0.14);
  --line-soft:rgba(32,41,26,0.08);
  --radius:22px;
  --shadow:0 20px 46px -18px rgba(60,44,10,0.32);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'IBM Plex Sans Arabic',sans-serif;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  background-color:var(--paper);
  /* Signature: faint honeycomb texture across the whole page */
  background-image:
    radial-gradient(ellipse 90% 60% at 80% -5%, rgba(224,166,58,0.20), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2320291a' stroke-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' /%3E%3C/g%3E%3C/svg%3E");
}
.disp{font-family:'Amiri',serif; font-weight:700;}
.eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.72rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--honey-deep);
  display:flex; align-items:center; gap:8px;
}
.eyebrow svg{flex-shrink:0;}

/* Hexagon comb signature */
.comb-row{display:flex; gap:6px; margin:0 0 0.5rem;}
.comb-row span{
  width:11px;height:11px;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  background:var(--honey); opacity:0.5;
}
.comb-row span:nth-child(2){opacity:0.85; transform:scale(1.15);}

/* Header */
header{
  position:sticky; top:0; z-index:500;
  background:rgba(246,239,221,0.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1120px; margin:0 auto; padding:0.9rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-mark{display:flex; align-items:center; gap:11px;}
.hex-badge{
  width:40px;height:40px;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  background:linear-gradient(155deg, var(--honey-lit), var(--honey-deep));
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  box-shadow:0 6px 16px -4px rgba(155,101,16,0.5);
}
.logo-text{font-size:1.3rem; font-weight:700; color:var(--ink); letter-spacing:0.2px;}
.logo-text b{color:var(--honey-deep); font-weight:800;}
nav{display:flex; align-items:center; gap:1.9rem;}
nav a{color:var(--forest); text-decoration:none; font-size:0.92rem; font-weight:600; transition:color .2s;}
nav a:hover{color:var(--honey-deep);}
@media (max-width:720px){ nav{display:none;} }
.cart-btn{
  position:relative; background:transparent; border:1px solid var(--line); color:var(--ink);
  width:42px;height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;
}
.cart-btn:hover{border-color:var(--honey); color:var(--honey-deep); background:rgba(200,135,30,0.08);}
.cart-badge{
  position:absolute; top:-5px; left:-5px;
  background:var(--wax); color:var(--paper);
  font-size:0.62rem; font-weight:700; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  display:none; align-items:center; justify-content:center; border:2px solid var(--paper);
}
.cart-badge.show{display:flex;}

.wrap{max-width:1120px; margin:0 auto; padding:0 1.4rem;}

/* HERO */
.hero{
  position:relative; margin:1.8rem auto 0;
  border-radius:var(--radius); overflow:hidden; min-height:580px;
  display:flex; align-items:center; background:var(--forest);
  box-shadow:var(--shadow);
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 65%;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,26,15,0.92) 12%, rgba(20,26,15,0.55) 52%, rgba(20,26,15,0.12) 100%);
}
.hero-content{position:relative; z-index:2; padding:3.6rem 2.2rem; max-width:580px;}
.hero-title{
  font-family:'Amiri',serif; font-weight:700; font-size:3.5rem; line-height:1.5;
  color:#fbf5e6; margin:0.8rem 0 0.4rem;
}
.hero-title em{font-style:normal; color:var(--honey-lit);}
/* honey-drip underline under the accent word */
.drip{
  display:inline-block; position:relative; color:var(--honey-lit);
}
.drip::after{
  content:""; position:absolute; right:0; left:0; bottom:-6px; height:5px; border-radius:4px;
  background:linear-gradient(90deg, var(--honey-lit), var(--honey-deep));
  box-shadow:0 0 18px rgba(224,166,58,0.6);
}
.hero-sub{font-size:1.02rem; color:#e6dcc2; line-height:1.9; max-width:450px; margin:1.4rem 0 1.9rem;}
.hero-ctas{display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap;}
.btn-primary{
  background:linear-gradient(150deg, var(--honey-lit), var(--honey)); color:#241800;
  font-weight:700; font-size:0.96rem; padding:0.95rem 2.1rem; border-radius:12px;
  text-decoration:none; display:inline-block; box-shadow:0 12px 30px -8px rgba(224,166,58,0.6);
  transition:all .25s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(224,166,58,0.7);}
.btn-ghost{color:#fbf5e6; font-size:0.92rem; font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--honey-lit);}

@media (max-width:760px){
  .hero{min-height:600px; align-items:flex-end;}
  .hero-scrim{background:linear-gradient(0deg, rgba(20,26,15,0.96) 32%, rgba(20,26,15,0.5) 70%, rgba(20,26,15,0.12) 100%);}
  .hero-content{padding:2rem 1.4rem 2.4rem; max-width:100%;}
  .hero-title{font-size:2.4rem; line-height:1.45;}
}

/* TRUST STRIP */
.trust-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:2.4rem 0 0;}
.trust-item{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:16px;
  padding:1.2rem 1.3rem; display:flex; align-items:center; gap:13px; transition:all .2s;
}
.trust-item:hover{border-color:rgba(200,135,30,0.4); transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(60,44,10,0.4);}
.trust-hex{
  width:46px;height:46px; flex-shrink:0;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  background:rgba(200,135,30,0.16); display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.trust-item strong{display:block; font-size:0.92rem; color:var(--ink); margin-bottom:2px;}
.trust-item span{font-size:0.78rem; color:var(--forest);}

/* SECTION HEADS */
.sec-head{text-align:center; max-width:620px; margin:4.5rem auto 2rem;}
.sec-head .eyebrow{justify-content:center; margin-bottom:0.6rem;}
.sec-head h2{font-family:'Amiri',serif; font-weight:700; font-size:2.3rem; color:var(--ink); line-height:1.4;}
.sec-head p{color:var(--forest); font-size:0.95rem; line-height:1.8; margin-top:0.5rem;}

/* PROCESS — a real 3-step sequence, so numbering is meaningful */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:1rem;}
.step{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:18px; padding:1.7rem 1.4rem;
  position:relative; overflow:hidden;
}
.step-num{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:2.6rem;
  color:var(--honey); opacity:0.35; line-height:1; margin-bottom:0.6rem;
}
.step h4{font-family:'Amiri',serif; font-weight:700; font-size:1.35rem; color:var(--ink); margin-bottom:0.4rem;}
.step p{font-size:0.85rem; color:var(--forest); line-height:1.75;}
@media (max-width:760px){ .process{grid-template-columns:1fr;} }

/* STORY */
.story{
  display:grid; grid-template-columns:1fr 1.15fr; gap:2.6rem; align-items:center;
  margin:4.5rem 0 0; padding:2.8rem;
  background:linear-gradient(150deg, var(--forest), #232f1c); color:#f1ead6;
  border-radius:var(--radius); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.story-img{border-radius:16px; overflow:hidden; height:330px; position:relative; background:#1a2413;}
.story-img img{width:100%; height:100%; object-fit:cover;}
.story .comb-row span{opacity:0.7;}
.story-quote{
  font-family:'Amiri',serif; font-weight:700; font-size:1.7rem; line-height:1.85;
  color:#fbf5e6; border-right:3px solid var(--honey-lit); padding-right:1.1rem; margin:0.8rem 0 1.3rem;
}
.story p.lead{color:#d9d0b8; font-size:0.94rem; line-height:1.95;}
@media (max-width:760px){ .story{grid-template-columns:1fr; padding:1.7rem;} .story-img{height:220px;} }

/* CATALOG */
.catalog-head{display:flex; justify-content:space-between; align-items:flex-end; margin:0 0 1.6rem;}
.catalog-head h2{font-family:'Amiri',serif; font-weight:700; font-size:2rem; color:var(--ink);}
.catalog-head span{font-size:0.82rem; color:var(--honey-deep); font-weight:700;}

.filters{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:1.8rem; scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.filter-pill{
  white-space:nowrap; background:transparent; border:1px solid var(--line); color:var(--forest);
  padding:0.55rem 1.25rem; border-radius:50px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.filter-pill.active,.filter-pill:hover{background:var(--honey); border-color:var(--honey); color:#241800;}

.grid{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:1rem;}
.jar-card{max-width:100%;}
@media (min-width:480px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:640px){ .grid{grid-template-columns:repeat(3,1fr); gap:20px;} }
@media (min-width:992px){ .grid{grid-template-columns:repeat(4,1fr); gap:22px;} }
.jar-card{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column; transition:all .3s cubic-bezier(.16,1,.3,1);
}
.jar-card:hover{border-color:var(--honey); transform:translateY(-6px); box-shadow:var(--shadow);}
.jar-img{
  height:210px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, #d8bd85, #c19a55); display:flex; align-items:center; justify-content:center;
}
.jar-img::after{content:"🍯"; font-size:2.6rem; opacity:0.35;}
.jar-img img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .6s;}
.jar-card:hover .jar-img img{transform:scale(1.06);}
.origin-tag{
  position:absolute; z-index:2; top:11px; right:11px;
  background:rgba(20,26,15,0.82); color:var(--honey-lit);
  font-size:0.68rem; font-weight:700; padding:0.32rem 0.72rem; border-radius:20px;
  border:1px solid rgba(224,166,58,0.4); backdrop-filter:blur(4px);
}
.jar-body{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex-grow:1;}
.jar-body h4{font-size:1.06rem; font-weight:700; color:var(--ink); margin-bottom:0.3rem;}
.jar-body p{font-size:0.82rem; color:var(--forest); line-height:1.6; margin-bottom:1rem; min-height:38px;}
.jar-foot{display:flex; justify-content:space-between; align-items:center; padding-top:0.9rem; border-top:1px solid var(--line-soft); margin-top:auto;}
.price{font-family:'Plus Jakarta Sans',sans-serif; font-size:1.28rem; font-weight:800; color:var(--ink);}
.price span{font-size:0.72rem; color:var(--honey-deep); font-weight:700;}
.add-btn{
  background:transparent; border:1px solid var(--honey); color:var(--honey-deep);
  padding:0.55rem 1.15rem; border-radius:10px; font-size:0.8rem; font-weight:700; cursor:pointer; transition:all .2s;
}
.add-btn:hover{background:var(--honey); color:#241800;}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:2.8rem 1.4rem 1.6rem; margin-top:4rem; background:var(--paper-2);}
.foot-grid{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; margin-bottom:1.7rem;}
.foot-grid h5{font-size:0.92rem; color:var(--honey-deep); margin-bottom:0.7rem; font-weight:700; letter-spacing:0.2px;}
.foot-grid p,.foot-grid li{font-size:0.82rem; color:var(--forest); line-height:1.9;}
.foot-grid ul{list-style:none;}
.foot-grid li{cursor:pointer; transition:color .2s;}
.foot-grid li:hover{color:var(--honey-deep);}
.foot-bottom{max-width:1120px;margin:0 auto; text-align:center; font-size:0.75rem; color:#8a7c5c; padding-top:1.3rem; border-top:1px solid var(--line);}
@media (max-width:760px){
  footer{padding:1.8rem 1.2rem 1.2rem;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:1.1rem 1rem; margin-bottom:1.1rem;}
  .footer-brand{grid-column:1 / -1;}
  .footer-brand p{margin-top:0.2rem;}
  .foot-grid h5{margin-bottom:0.4rem; font-size:0.86rem;}
  .foot-grid p,.foot-grid li{font-size:0.78rem; line-height:1.55;}
  .foot-bottom{padding-top:0.9rem; font-size:0.7rem;}
}

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:var(--paper); padding:0.9rem 1.5rem; border-radius:14px;
  font-size:0.88rem; font-weight:600; display:flex; align-items:center; gap:8px;
  box-shadow:0 14px 34px rgba(0,0,0,0.3); z-index:99998; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.toast.show{transform:translateX(-50%) translateY(0);}

/* Cart Drawer */
.drawer-backdrop{position:fixed; inset:0; background:rgba(20,26,15,0.5); backdrop-filter:blur(3px); z-index:99997; display:none; align-items:flex-end; justify-content:center;}
.drawer{
  background:var(--paper); width:100%; max-width:480px; border-radius:22px 22px 0 0; padding:1.7rem;
  max-height:82vh; overflow-y:auto; animation:slideUp .3s cubic-bezier(.16,1,.3,1);
  border:1px solid var(--line); border-bottom:none;
}
@keyframes slideUp{from{transform:translateY(100%)} to{transform:translateY(0)}}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem;}
.drawer-head h3{font-weight:800; font-size:1.2rem; color:var(--ink);}
.drawer-head button{background:none; border:none; color:var(--forest); font-size:1.4rem; cursor:pointer;}
.cart-row{display:flex; justify-content:space-between; align-items:center; padding:0.9rem 0; border-bottom:1px solid var(--line-soft); color:var(--ink);}
.finish-btn{width:100%; background:linear-gradient(150deg, var(--honey-lit), var(--honey)); color:#241800; border:none; padding:1rem; border-radius:14px; font-weight:700; font-size:0.95rem; margin-top:1.2rem; cursor:pointer;}

/* عنصر عام لعرض السعر القديم مشطوباً (يُستخدم بصفحة تفاصيل المنتج وبطاقات المنتج) */
.old-price{text-decoration:line-through;color:var(--forest);opacity:.65;font-size:0.8em;}

/* ---------- زر واتساب العائم (موضع متجاوب: فوق شريط السلة بالجوال، أسفل بالديسكتوب) ---------- */
.wa-float{
  position:fixed; bottom:62px; left:14px; background:#25D366; color:#fff; border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.18); z-index:1200;
}
@media (min-width:992px){ .wa-float{ bottom:20px; } }

/* ---------- تباعد إضافي أسفل الفوتر حتى ما يتغطى خلف الأزرار العائمة (واتساب/شريط السلة) ---------- */
@media (max-width:991.98px){
  footer{ padding-bottom: 50px; }
}
@media (min-width:992px){
  footer{ padding-bottom: 26px; }
}

/* ---------- زر حسابي بجانب زر السلة بالهيدر (نفس أسلوب cart-btn) ---------- */
.account-btn{
  position:relative; background:transparent; border:1px solid var(--line); color:var(--ink);
  width:42px;height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;
  text-decoration:none;
}
.account-btn:hover{border-color:var(--honey); color:var(--honey-deep); background:rgba(200,135,30,0.08);}