@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --burg:#7A1F2B; --burg-d:#4A1018; --gold:#C9A24A; --gold-2:#E8D5A3;
  --ink:#2C1810; --muted:#7a6558; --paper:#FFFBF3; --cream:#F7F0E4;
  --line:rgba(74,16,24,.12); --ok:#2f7d5f; --danger:#b33a2b;
  --shadow:0 18px 40px rgba(44,24,16,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
a{color:var(--burg);text-decoration:none}
button{cursor:pointer}

.sh-boot{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(800px 400px at 50% -10%,rgba(122,31,43,.18),transparent),var(--paper)}
.sh-boot img{width:96px;height:96px;border-radius:24px}
.sh-boot div{color:var(--burg);font-weight:700;font-size:22px}

.wrap{width:min(1120px,calc(100% - 32px));margin:0 auto}
.shop-head{position:sticky;top:0;z-index:40;background:rgba(255,251,243,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.shop-head .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;min-height:56px}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;padding:0;min-width:0}
.brand img{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);flex-shrink:0;object-fit:cover}
.brand-txt{min-width:0}
.brand b{display:block;font-size:16px;color:var(--burg-d);white-space:nowrap}
.brand small{color:var(--muted);font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.hnav{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex-shrink:0}
.hnav button{background:transparent;border:0;color:var(--ink);padding:8px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap}
.hnav button:hover,.hnav button.on{background:rgba(122,31,43,.08);color:var(--burg)}
.cart-btn{position:relative;background:linear-gradient(180deg,#e3c56a,#c49a3a)!important;color:#2c1810!important;padding:8px 14px!important}
.cart-btn .n{position:absolute;top:-6px;left:-6px;background:var(--burg);color:#fff;border-radius:99px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center}
.shop-bottom{display:none}

.hero{position:relative;min-height:420px;border-radius:0 0 36px 36px;overflow:hidden;color:#fff;margin-bottom:28px}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
.hero .copy{position:relative;z-index:1;width:min(1120px,calc(100% - 32px));margin:0 auto;padding:72px 0 56px}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 8px;font-weight:700}
.hero p{margin:0 0 22px;color:var(--gold-2);max-width:520px;line-height:1.9}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:12px 18px;font-weight:700;font-size:14px}
.btn-gold{background:linear-gradient(180deg,#e3c56a,#c49a3a);color:#2c1810}
.btn-burg{background:linear-gradient(180deg,#9a2a38,#6b1a24);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-block{width:100%}
.btn-sm{padding:8px 12px;font-size:12px;border-radius:10px}

.h2{font-size:22px;margin:8px 0 4px;color:var(--burg-d)}
.sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 28px}
.cat{border:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);text-align:right;padding:0;color:inherit}
.cat img{height:92px;width:100%;object-fit:cover}
.cat span{display:block;padding:10px 12px;font-weight:700}
.cat.on{outline:2px solid var(--gold)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding-bottom:40px}
 .pcard{position:relative;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;border:1px solid var(--line)}
.pcard .pic{height:160px;background:#eee;cursor:pointer}
.pcard .pic img{width:100%;height:100%;object-fit:cover}
.pcard .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{margin:0;font-size:16px}
.pcard .desc{color:var(--muted);font-size:12px;line-height:1.7;min-height:2.4em}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.price{font-weight:800;color:var(--burg)}
.prep{font-size:11px;color:var(--muted);background:var(--cream);border-radius:999px;padding:4px 8px}
.feat{position:absolute;margin:10px;background:var(--burg);color:#fff;font-size:11px;padding:4px 8px;border-radius:999px}

.page{padding:24px 0 80px}
.back{background:none;border:0;color:var(--burg);font-weight:700;margin-bottom:12px}
.p-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.p-hero img{width:100%;height:100%;min-height:280px;object-fit:cover}
.p-info{padding:24px}
.p-info h1{margin:0 0 8px;font-size:28px}
.feeling{background:var(--cream);border-radius:16px;padding:12px;font-size:13px;line-height:1.8;margin:12px 0}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:12px;color:var(--burg)}
.field input,.field textarea,.field select{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;outline:none
}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.card{background:#fff;border-radius:22px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)}

.cart-list .row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);align-items:center}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff}

.drawer{position:fixed;inset:0;background:rgba(20,12,11,.45);z-index:50;display:flex;justify-content:flex-start}
.drawer .box{width:min(420px,100%);background:var(--paper);height:100%;padding:18px;overflow:auto}

.thanks{text-align:center;padding:24px 0 60px}
.timer{width:min(280px,80vw);aspect-ratio:1;margin:18px auto;border-radius:50%;background:
  conic-gradient(var(--burg) calc(var(--p,0)*1%), var(--cream) 0);
  display:grid;place-items:center}
.timer span{background:var(--paper);width:78%;height:78%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.timer b{font-size:34px;color:var(--burg-d)}
.phases{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px auto;width:min(520px,100%)}
.ph{background:#fff;border-radius:16px;padding:14px;border:1px solid var(--line)}
.ph.on{border-color:var(--gold);box-shadow:var(--shadow)}
.ph b{display:block;margin-bottom:4px}

.otp{display:flex;gap:8px;justify-content:center;direction:ltr}
.otp input{width:46px;height:52px;text-align:center;font-size:22px;border-radius:12px;border:1px solid var(--line)}

.foot{margin-top:40px;background:var(--burg-d);color:var(--gold-2);padding:28px 0 22px;font-size:13px}
.foot .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tiny{font-size:12px;color:var(--muted);line-height:1.7}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#2c1810;color:#fff;padding:10px 16px;border-radius:12px;z-index:80;font-size:13px}
.toast.err{background:var(--danger)}
.empty{text-align:center;padding:40px 12px;color:var(--muted)}

@media(max-width:800px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .p-hero{grid-template-columns:1fr}
  .hero{min-height:340px;border-radius:0 0 24px 24px}
  .shop-head .inner{justify-content:center;padding:8px 0;min-height:52px}
  .brand{justify-content:center}
  .brand-txt,.hnav{display:none !important}
  .brand img{width:52px;height:52px;border-radius:16px}
  .shop-bottom{
    display:flex;
    position:fixed;
    bottom:0;right:0;left:0;
    z-index:60;
    background:rgba(255,251,243,.96);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(44,24,16,.08);
  }
  .shop-bottom button{
    flex:1;
    position:relative;
    background:transparent;
    border:0;
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 2px 4px;
    min-width:0;
    line-height:1.2;
  }
  .shop-bottom button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .shop-bottom button.on,.shop-bottom button:active{color:var(--burg)}
  .shop-bottom svg{width:22px;height:22px;flex-shrink:0}
  .shop-bottom .n{
    position:absolute;
    top:2px;
    left:50%;
    margin-left:8px;
    background:var(--burg);
    color:#fff;
    border-radius:99px;
    min-width:16px;
    height:16px;
    font-size:10px;
    font-style:normal;
    display:grid;
    place-items:center;
    padding:0 4px;
  }
  #shop{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .page{padding-bottom:24px}
  .pgrid{padding-bottom:16px}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
}