:root{
  --parchment:#F4E9C9;
  --parchment-soft:#FBF3DD;
  --parchment-dark:#E9DCAF;
  --emerald:#0F332E;
  --emerald-light:#1B4A42;
  --wine:#7C2430;
  --wine-light:#9A3140;
  --gold:#C6982F;
  --gold-light:#E7C878;
  --ink:#2A2013;
  --ink-soft:#5B4B32;
  --shadow:rgba(15,51,46,0.28);
  --radius-card:10px;
}

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

body{
  margin:0;
  font-family:'Vazirmatn',sans-serif;
  background-color:var(--parchment);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%230F332E' stroke-opacity='0.055' stroke-width='2'%3E%3Cpath d='M25 115C25 70 48 25 105 25c-9 17-12 28-3 36s25 5 32-7' stroke-linecap='round'/%3E%3Ccircle cx='105' cy='42' r='2.2' fill='%230F332E' fill-opacity='0.06' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
  color:var(--ink);
  min-height:100vh;
}

h1,h2,h3{font-family:'Noto Naskh Arabic',serif;margin:0;}
a,button{font-family:inherit;}
::selection{background:var(--gold-light);color:var(--emerald);}

button:focus-visible, .tab:focus-visible, .icon-btn:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
}

/* ---------- Header ---------- */
header.site-header{
  position:relative;
  background:linear-gradient(180deg,var(--emerald) 0%,var(--emerald-light) 100%);
  padding:52px 20px 40px;
  text-align:center;
  border-top:6px solid var(--gold);
  border-bottom:6px solid var(--gold);
  box-shadow:0 6px 18px var(--shadow);
}
header.site-header::before{
  content:"";
  position:absolute;inset:10px;
  border:1px solid rgba(230,200,120,0.35);
  pointer-events:none;
}
.brand-title{
  color:var(--gold-light);
  font-size:clamp(2rem,5vw,3.4rem);
  letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,0.35);
}
.brand-tagline{
  margin-top:10px;
  color:var(--parchment);
  font-weight:300;
  letter-spacing:3px;
  font-size:0.95rem;
  opacity:0.85;
}
.brand-divider{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:18px auto 0; max-width:220px;
}
.brand-divider .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.brand-divider svg{width:16px;height:16px;flex:none;transform:rotate(45deg);color:var(--gold);}

/* ---------- Category nav ---------- */
nav.cat-nav{
  position:sticky;top:0;z-index:20;
  background:var(--emerald);
  border-bottom:3px solid var(--gold);
  overflow-x:auto;
  white-space:nowrap;
  padding:10px 14px;
  scrollbar-width:thin;
}
nav.cat-nav::-webkit-scrollbar{height:6px;}
nav.cat-nav::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px;}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--emerald-light);
  color:var(--gold-light);
  border:1px solid rgba(230,200,120,0.4);
  padding:9px 20px;
  border-radius:3px;
  margin-inline-end:10px;
  cursor:pointer;
  font-size:0.92rem;
  transition:background .25s ease, color .25s ease, transform .15s ease;
}
.tab svg{width:16px;height:16px;color:currentColor;flex:none;}
.tab:hover{transform:translateY(-2px);}
.tab.active{
  background:var(--gold);
  color:var(--emerald);
  border-color:var(--gold);
  font-weight:600;
}

/* ---------- Layout ---------- */
main{max-width:1120px;margin:0 auto;padding:44px 20px 100px;}
.loading-msg, .empty-msg{text-align:center;color:var(--ink-soft);padding:40px 0;}

.category-section{margin-bottom:56px;}
.category-heading{text-align:center;color:var(--emerald);font-size:1.7rem;margin-bottom:6px;}
.category-sub{text-align:center;color:var(--ink-soft);font-size:0.85rem;margin-bottom:18px;}
.section-divider{display:flex;align-items:center;gap:12px;max-width:320px;margin:0 auto 30px;}
.section-divider .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--wine),transparent);}
.section-divider svg{width:14px;height:14px;color:var(--wine);flex:none;transform:rotate(45deg);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;}

/* ---------- Card ---------- */
.card{
  position:relative;
  background:var(--parchment-soft);
  border:1.5px solid var(--gold);
  border-radius:var(--radius-card);
  padding:26px 18px 20px;
  text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px var(--shadow);}

.corner{position:absolute;width:26px;height:26px;color:var(--gold);pointer-events:none;}
.corner svg{width:100%;height:100%;display:block;}
.corner.tl{top:-2px;left:-2px;}
.corner.tr{top:-2px;right:-2px;transform:scaleX(-1);}
.corner.bl{bottom:-2px;left:-2px;transform:scaleY(-1);}
.corner.br{bottom:-2px;right:-2px;transform:scale(-1,-1);}

.medallion{
  width:78px;height:78px;border-radius:50%;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold-light);
  box-shadow:inset 0 0 0 4px var(--parchment-soft), 0 3px 8px rgba(0,0,0,0.15);
  overflow:hidden;
}
.medallion svg{width:36px;height:36px;stroke-width:2.4;fill:none;stroke:currentColor;}
.medallion img{width:100%;height:100%;object-fit:cover;}

.item-name{font-size:1.15rem;color:var(--ink);margin-bottom:6px;}
.item-desc{font-size:0.83rem;color:var(--ink-soft);line-height:1.6;min-height:1.2em;margin-bottom:14px;padding:0 4px;}

.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}
.price-badge{background:var(--emerald);color:var(--gold-light);padding:6px 12px;border-radius:20px;font-size:0.85rem;font-weight:600;white-space:nowrap;}
.add-btn{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-light), var(--gold) 70%);
  border:1px solid var(--emerald);
  color:var(--emerald);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  transition:transform .18s ease;
  flex:none;
}
.add-btn svg{width:18px;height:18px;stroke:var(--emerald);stroke-width:3;}
.add-btn:active{transform:scale(0.85) rotate(-8deg);}
.add-btn.stamped{animation:stamp .35s ease;}
@keyframes stamp{0%{transform:scale(1);}40%{transform:scale(1.35) rotate(-10deg);}100%{transform:scale(1);}}

/* ---------- Floating cart button ---------- */
.cart-fab{
  position:fixed;bottom:22px;left:22px;z-index:40;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--gold-light), var(--gold) 75%);
  border:2px solid var(--emerald);
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.cart-fab svg{width:26px;height:26px;stroke:var(--emerald);stroke-width:2.4;fill:none;}
.cart-badge{
  position:absolute;top:-4px;left:-4px;
  background:var(--wine);color:#fff;
  min-width:22px;height:22px;border-radius:50%;
  font-size:0.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--parchment-soft);
  padding:0 4px;
}

/* ---------- Cart drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,51,46,0.55);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:45;}
.overlay.show{opacity:1;pointer-events:auto;}

.drawer{
  position:fixed;top:0;left:0;height:100%;
  width:min(380px,92vw);
  background:var(--parchment-dark);
  border-inline-end:5px solid var(--gold);
  box-shadow:8px 0 24px rgba(0,0,0,0.35);
  transform:translateX(-105%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  z-index:50;
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0);}

.drawer-header{
  background:var(--emerald);color:var(--gold-light);
  padding:20px 18px 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:3px solid var(--gold);
}
.drawer-header h2{font-size:1.25rem;}
.close-btn{
  background:none;border:1px solid var(--gold-light);color:var(--gold-light);
  width:32px;height:32px;border-radius:50%;
  cursor:pointer;font-size:1.1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

.drawer-body{flex:1;overflow-y:auto;padding:14px 16px;}
.empty-cart{text-align:center;color:var(--ink-soft);margin-top:60px;padding:0 20px;font-size:0.92rem;line-height:1.8;}
.empty-cart svg{width:48px;height:48px;color:var(--gold);margin-bottom:14px;stroke-width:1.6;}

.cart-row{display:flex;align-items:center;gap:12px;background:var(--parchment-soft);border:1px solid var(--gold-light);border-radius:8px;padding:10px;margin-bottom:12px;}
.cart-row .mini-medal{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gold-light);overflow:hidden;}
.cart-row .mini-medal svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;}
.cart-row .mini-medal img{width:100%;height:100%;object-fit:cover;}
.cart-row-info{flex:1;min-width:0;}
.cart-row-info .name{font-size:0.92rem;color:var(--ink);margin-bottom:4px;}
.cart-row-info .unit{font-size:0.72rem;color:var(--ink-soft);}
.qty-ctrl{display:flex;align-items:center;gap:6px;}
.qty-ctrl button{width:24px;height:24px;border-radius:50%;border:1px solid var(--emerald);background:var(--parchment);color:var(--emerald);cursor:pointer;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;}
.qty-ctrl span{min-width:18px;text-align:center;font-size:0.85rem;}
.remove-btn{background:none;border:none;color:var(--wine);cursor:pointer;padding:4px;flex:none;}
.remove-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;}

.drawer-footer{border-top:3px solid var(--gold);background:var(--emerald);padding:16px 18px 20px;}
.total-row{display:flex;justify-content:space-between;align-items:baseline;color:var(--gold-light);margin-bottom:14px;}
.total-row .label{font-size:0.9rem;opacity:0.85;}
.total-row .amount{font-size:1.3rem;font-weight:700;font-family:'Noto Naskh Arabic',serif;}
.checkout-btn{width:100%;padding:13px;border:none;border-radius:6px;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:var(--emerald);font-weight:700;font-size:0.95rem;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,0.3);}
.clear-link{display:block;text-align:center;margin-top:10px;color:var(--gold-light);opacity:0.75;font-size:0.78rem;background:none;border:none;cursor:pointer;width:100%;text-decoration:underline;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:96px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--emerald);color:var(--gold-light);
  padding:12px 22px;border-radius:30px;
  border:1px solid var(--gold);
  font-size:0.88rem;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  z-index:60;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

footer.site-footer{text-align:center;color:var(--emerald);opacity:0.7;font-size:0.8rem;padding:26px 20px 40px;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}

@media (max-width:520px){
  .brand-title{font-size:1.7rem;}
  main{padding:30px 12px 90px;}
  .grid{gap:18px;}
}