/* ===== buttons ===== */
.stretch::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1.5px solid transparent; border-radius:12px; padding:11px 18px; font-weight:700; font-size:.9rem; background:var(--surface-2); color:var(--text); transition:transform .12s, filter .2s, background .2s}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.btn--primary{background:linear-gradient(140deg,var(--brand),color-mix(in srgb,var(--brand) 70%,var(--brand-2))); color:#fff}
.btn--teal{background:var(--brand-2); color:#fff}
.btn--ghost{background:transparent; border-color:var(--border); color:var(--text)}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn--danger{background:transparent; border-color:var(--rose); color:var(--rose)}
.btn--danger:hover{background:var(--rose); color:#fff}
.btn--block{width:100%}
.btn--lg{padding:14px 22px; font-size:1rem; border-radius:14px}
.btn--sm{padding:7px 12px; font-size:.8rem; border-radius:9px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.linkish{color:var(--brand); font-weight:700; font-size:.85rem}
.linkish:hover{text-decoration:underline}

/* ===== surfaces & sections ===== */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:18px}
.section{margin-top:26px}
.section__head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.section__head h2{margin:0; display:flex; align-items:center; gap:8px}
.section__head .linkish{margin-inline-start:auto; white-space:nowrap}
.section__bar{width:5px; height:22px; border-radius:99px; background:linear-gradient(var(--brand),var(--brand-2))}
.muted{color:var(--text-2)}
.tiny{font-size:.78rem}
.center{text-align:center}
.row-scroll{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(196px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity}
.row-scroll>*{scroll-snap-align:start}
.grid-p{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}

/* ===== product card ===== */
.pcard{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:12px; transition:transform .18s, box-shadow .18s, border-color .18s}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--brand) 40%,var(--border))}
.pcard__media{position:relative; aspect-ratio:1/1; display:grid; place-items:center; border-radius:12px; background:var(--surface-2); overflow:hidden; margin-bottom:10px}
.pcard__media img,.pcard__media svg{width:82%; height:82%; object-fit:contain}
/* بسته‌بندی عکس محصول: تا وقتی عکس سالم است طرح گرافیکی پنهان می‌ماند و در صورت نبود عکس جایگزین می‌شود */
.devimg{display:contents}
.devimg>svg{display:none}
.devimg.is-fail>img{display:none}
.devimg.is-fail>svg{display:block}
.pcard__off{position:absolute; top:8px; inset-inline-end:8px; background:var(--rose); color:#fff; font-size:.75rem; font-weight:800; padding:2px 8px; border-radius:8px}
.pcard__brand{font-size:.72rem; color:var(--text-2)}
.pcard__name{font-size:.88rem; font-weight:700; line-height:1.6; min-height:2.9em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard__meta{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:.75rem; color:var(--text-2)}
.pcard__foot{margin-top:auto; padding-top:8px}
.pcard__old{font-size:.75rem; color:var(--text-2); text-decoration:line-through}
.pcard__price{font-weight:800; font-size:1.02rem; display:flex; align-items:baseline; gap:4px; justify-content:flex-end}
.pcard__price small{font-size:.72rem; font-weight:600; color:var(--text-2)}
.pcard__soon{color:var(--rose); font-weight:700; font-size:.85rem; text-align:end}
.pcard__add{position:absolute; bottom:12px; inset-inline-start:12px; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; opacity:0; transform:translateY(6px); transition:.18s}
.pcard:hover .pcard__add,.pcard__add:focus-visible{opacity:1; transform:none}
.pcard__add svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.pcard__add:hover{background:var(--brand); color:#fff; border-color:var(--brand)}

/* ===== rating & chips ===== */
.stars{display:inline-flex; align-items:center; gap:3px; color:var(--amber); font-size:.78rem; font-weight:700}
.stars svg{width:14px; height:14px; fill:currentColor; stroke:none}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; border:1px solid var(--border); background:var(--surface); font-size:.78rem; color:var(--text-2)}
.chip--brand{background:var(--brand-soft); border-color:transparent; color:var(--brand); font-weight:700}
.chip--green{color:var(--green); border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.chip--rose{color:var(--rose); border-color:color-mix(in srgb,var(--rose) 35%,transparent)}
.chip--x{cursor:pointer}
.chip--x:hover{border-color:var(--rose); color:var(--rose)}

/* ===== forms ===== */
.field{display:block; margin-bottom:14px}
.field>span{display:block; font-size:.83rem; font-weight:700; margin-bottom:6px}
.field>span i{color:var(--rose); font-style:normal}
.input,.select,.textarea{width:100%; background:var(--surface-2); border:1.5px solid var(--border); border-radius:11px; padding:11px 13px; outline:none; transition:border-color .2s, box-shadow .2s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand); box-shadow:var(--ring)}
.textarea{min-height:92px; resize:vertical}
.select{appearance:none; background-image:linear-gradient(45deg,transparent 49%,var(--text-2) 50%),linear-gradient(-45deg,transparent 49%,var(--text-2) 50%); background-size:6px 6px,6px 6px; background-position:left 14px top 21px,left 19px top 21px; background-repeat:no-repeat; padding-inline-start:34px}
.field--err .input,.field--err .select{border-color:var(--rose)}
.err{display:none; color:var(--rose); font-size:.75rem; margin-top:4px}
.field--err .err{display:block}
.checkline{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.85rem; cursor:pointer}
.checkline input{width:17px; height:17px; accent-color:var(--brand); flex:none}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.ltr{direction:ltr; text-align:left}

/* ===== qty stepper ===== */
.qty{display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:11px; overflow:hidden; background:var(--surface)}
.qty button{width:36px; height:38px; border:0; background:transparent; font-size:1.15rem; font-weight:700; color:var(--brand)}
.qty button:hover{background:var(--surface-2)}
.qty span{min-width:38px; text-align:center; font-weight:800; font-size:.95rem}

/* ===== table ===== */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--surface)}
table.tbl{width:100%; border-collapse:collapse; font-size:.85rem; min-width:640px}
table.tbl th{background:var(--surface-2); text-align:start; font-weight:800; font-size:.8rem; padding:11px 12px; white-space:nowrap; border-bottom:1px solid var(--border)}
table.tbl td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-2)}

/* ===== toast, modal, misc ===== */
.toasts{position:fixed; inset-block-end:18px; inset-inline-start:18px; z-index:80; display:flex; flex-direction:column; gap:8px}
.toast{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-inline-start:4px solid var(--green); border-radius:12px; box-shadow:var(--shadow-lg); padding:11px 15px; font-size:.86rem; font-weight:600; animation:tin .25s ease}
.toast--err{border-inline-start-color:var(--rose)}
.toast--info{border-inline-start-color:var(--brand)}
@keyframes tin{from{opacity:0; transform:translateY(12px)}}
.overlay{position:fixed; inset:0; z-index:70; background:rgba(8,10,18,.55); backdrop-filter:blur(3px); display:grid; place-items:center; padding:16px; animation:tin .2s}
.sheet{width:min(560px,100%); max-height:88vh; overflow:auto; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:20px}
.sheet__head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.sheet__head h2{margin:0}
.sheet__x{margin-inline-start:auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); font-size:1.1rem; line-height:1}
.empty{text-align:center; padding:52px 18px; color:var(--text-2)}
.empty__ico{font-size:3rem; line-height:1.4}
.crumb{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-2); margin-bottom:14px; flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.pager{display:flex; justify-content:center; gap:6px; margin-top:22px; flex-wrap:wrap}
.pager button{min-width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); font-weight:700; font-size:.85rem}
.pager button[aria-current="page"]{background:var(--brand); color:#fff; border-color:var(--brand)}
.pager button:disabled{opacity:.4}
/* ===== پیام خوش‌آمد ابتدای ورود ===== */
.welcome{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 82%,#000),color-mix(in srgb,var(--brand-2) 78%,#000)); animation:tin .28s ease}
.welcome[hidden]{display:none}
.welcome__card{width:min(520px,100%); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:30px 26px; text-align:center; animation:wpop .3s ease}
@keyframes wpop{from{opacity:0; transform:translateY(16px) scale(.97)}}
.welcome__ico{font-size:2.8rem; line-height:1.2}
.welcome__card h2{font-size:1.3rem; margin:6px 0 12px}
.welcome__card p{color:var(--text-2); line-height:2; font-size:.9rem}
.welcome__agree{display:flex; gap:9px; align-items:flex-start; text-align:start; margin-top:16px; font-size:.83rem; line-height:1.9; color:var(--text); cursor:pointer; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
.welcome__agree input{width:19px; height:19px; accent-color:var(--brand); flex:none; margin-top:2px}
.welcome__btn{margin-top:16px; width:100%; background:var(--text); color:var(--surface); border:0}
.welcome__btn:hover{background:color-mix(in srgb,var(--text) 82%,var(--brand))}
.welcome__btn:disabled{opacity:.45; cursor:not-allowed}
@media(max-width:720px){.grid2{grid-template-columns:1fr}.toasts{inset-inline:12px}}