/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Vazirmatn',sans-serif;background:linear-gradient(180deg,#efe6dd 0%, #f6f2ef 100%);color:#2b1d16;line-height:1.4;}

/* Background decorative */
.page-bg{
  position:fixed;inset:0;z-index:-2;
  background-image: radial-gradient( circle at 10% 20%, rgba(92,61,46,0.06) 0%, transparent 12% ),
                    radial-gradient( circle at 85% 80%, rgba(92,61,46,0.04) 0%, transparent 12% );
  backdrop-filter: blur(0.5px);
}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:18px}
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));box-shadow:0 8px 30px rgba(17,12,10,0.08);border-bottom:1px solid rgba(17,12,10,0.04);z-index:30}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand h1{color:#5c3d2e;font-size:20px;letter-spacing:0.6px;margin-bottom:2px}
.brand .tag{font-size:13px;color:#7b5a4b}

/* header actions */
.header-actions{display:flex;gap:10px;align-items:center}
#search{padding:10px 12px;border-radius:10px;border:1px solid rgba(90,60,45,0.12);min-width:220px;box-shadow:inset 0 2px 6px rgba(0,0,0,0.03)}
.btn{border:0;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.subtle{background:transparent;color:#5c3d2e;border:1px solid rgba(90,60,45,0.06)}
.btn.primary{background:#5c3d2e;color:#fff;box-shadow:0 8px 24px rgba(92,61,46,0.18)}

/* main grid */
.main{display:grid;grid-template-columns:260px 1fr 320px;gap:22px;align-items:start;padding-top:18px}

/* sidebar */
.sidebar{position:sticky;top:90px}
.cats{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.cat{padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,#fff,#f7efe9);border:1px solid rgba(90,60,45,0.06);cursor:pointer;color:#5a3b2c;box-shadow:0 6px 18px rgba(17,12,10,0.04)}
.cat.active{background:#5c3d2e;color:#fff;box-shadow:0 10px 30px rgba(92,61,46,0.18);transform:translateY(-2px)}
.about-card{padding:14px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbf6f2);box-shadow:0 8px 30px rgba(17,12,10,0.05);border:1px solid rgba(90,60,45,0.04)}

/* products */
.products-section{min-height:60vh}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{
  background:linear-gradient(180deg,#ffffff,#fbf7f4);
  border-radius:14px;padding:12px;overflow:hidden;position:relative;
  box-shadow: 0 10px 30px rgba(17,12,10,0.08);
  transition: transform .28s ease, box-shadow .28s ease;
  border:1px solid rgba(90,60,45,0.04);
}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(17,12,10,0.12)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block;margin-bottom:10px;box-shadow:inset 0 -20px 60px rgba(92,61,46,0.02)}
.card h3{color:#4b2f24;margin-bottom:6px;font-size:18px}
.card p{color:#6c4f44;font-size:13px;margin-bottom:10px;min-height:36px}
.card .meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-weight:700;color:#2b1d16}
.add{background:#8a5f4e;color:#fff;padding:8px 10px;border-radius:10px;border:0;cursor:pointer;box-shadow:0 8px 20px rgba(138,95,78,0.18)}

/* cart */
.cart-panel{position:sticky;top:90px;background:linear-gradient(180deg,#fff,#fbf7f4);padding:16px;border-radius:12px;box-shadow:0 12px 40px rgba(17,12,10,0.06);border:1px solid rgba(90,60,45,0.04)}
.cart-items{max-height:320px;overflow:auto;padding-right:6px}
.cart-items .item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(90,60,45,0.06)}
.cart-footer{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}

/* modal */
.modal{display:none;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:20px}
.modal.active{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.35);backdrop-filter:blur(2px)}
.modal-card{position:relative;background:#fff;border-radius:12px;max-width:920px;width:100%;display:flex;gap:20px;z-index:90;overflow:hidden;box-shadow:0 30px 80px rgba(17,12,10,0.2)}
.modal-card img{width:48%;height:100%;object-fit:cover}
.modal-body{padding:18px;flex:1}
.modal-body h2{margin-bottom:8px;color:#5c3d2e}
.modal-meta{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:18px}
.close{position:absolute;top:10px;left:10px;background:transparent;border:0;font-size:28px;color:#fff;z-index:100}

/* footer */
.site-footer{margin-top:40px;padding:26px 0;background:linear-gradient(180deg,#efe5dc,#f6f1ec);text-align:center;color:#5c3d2e;border-top:1px solid rgba(90,60,45,0.03)}

/* responsive */
@media (max-width:980px){
  .main{grid-template-columns:1fr;gap:14px}
  .sidebar{order:2;position:relative;top:0}
  .cart-panel{order:3}
  .modal-card{flex-direction:column}
  .modal-card img{width:100%;height:240px}
  #search{min-width:120px}
}