/* ==========================================================================
   Design system — matched to the reference screenshots
   Palette aligned with the «خانه» (home) section of the personalised panel: brand green #0a6847, gold #ebb40f,
   bg #f4f5fa, ink #181a22 (dark: bg #0a0908, card #161209, ink #f3efe4).
   ========================================================================== */
@font-face{font-family:"Vazirmatn";src:url("../fonts/Vazirmatn.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --font:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  --primary:#0a6847; --primary-600:#08573c; --primary-100:#dae8e3; --primary-50:#ebf3f0; --primary-glow:#9dc3b5;
  --accent:#ebb40f; --accent-50:#fdf6e2; --cyan:#0a6847; --teal:#0a6847; --sky:#15a350;
  --success:#15a350; --success-50:#e8f6ee; --danger:#e5484d; --danger-50:#fceded; --warn:#ebb40f; --warn-50:#fdf1d9;
  --ink:#0f1117; --ink-2:#363a48; --muted:#636879; --muted-2:#444857;
  --bg-store:#f4f5fa; --bg-admin:#f4f5fa; --card:#fff; --field:#f9fafc; --field-2:#f1f2f8; --line:#e6e8f0; --row-alt:#f9fafc;
  --r-xl:20px; --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 2px 10px rgba(30,34,60,.05);
}
[data-theme="dark"]{
  --primary:#1a8f66; --primary-600:#167856; --primary-glow:#a3d2c2; --cyan:#3fb583; --teal:#3fb583; --sky:#3fa76b;
  --accent:#ebb40f; --success:#3fa76b; --danger:#d6584a;
  --ink:#fbf8ef; --ink-2:#e8e1cd; --muted:#aaa08b; --muted-2:#d2c9b3;
  --bg-store:#0a0908; --bg-admin:#0a0908; --card:#161209; --field:#1e1810; --field-2:#26200f; --line:#332a17; --row-alt:#1e1810;
  --primary-100:#13291d; --primary-50:#10211a; --accent-50:#362a0a; --success-50:#162a1d; --danger-50:#331c13; --warn-50:#362a0a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-store);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.8}
a{color:var(--cyan);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
code,pre,.ltr{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,Menlo,Consolas,monospace}
h1,h2,h3{margin:0;font-weight:800;line-height:1.5}

.ico{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:700;border:0;border-radius:var(--r-lg);padding:.65rem 1.4rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none!important;line-height:1.5}
.btn.primary{background:var(--primary);color:#fff} .btn.primary:hover{background:var(--primary-600)}
.btn.soft{background:var(--primary-100);color:var(--primary)}
.btn.dark{background:var(--ink);color:var(--card)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.block{display:flex;width:100%}
.btn.sm{padding:.35rem .9rem;font-size:.85rem;border-radius:var(--r-md)}
.btn[disabled]{opacity:.55;cursor:wait}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:1/-1}
.field>label{font-weight:700;font-size:.85rem}
.field .opt{font-weight:400;color:var(--muted-2);font-size:.75rem;background:var(--field-2);border-radius:99px;padding:0 .5rem;margin-inline-start:.3rem}
.input,.field input,.field select,.field textarea{font:inherit;padding:.7rem 1rem;border:1px solid transparent;border-radius:var(--r-lg);background:var(--field);color:var(--ink);width:100%;min-height:46px}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--primary-glow);background:var(--card);box-shadow:0 0 0 3px rgba(10,104,71,.12)}
.field input::placeholder{color:var(--muted)}
.field input.ltr{text-align:left}
.hint{color:var(--muted-2);font-size:.78rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.pw{position:relative}
.pw button{position:absolute;inset-block:0;inset-inline-start:.5rem;border:0;background:none;color:var(--muted-2);cursor:pointer;font:inherit;font-size:.78rem;padding:0 .7rem}

/* ---------- alerts / pills ---------- */
.alert{border-radius:var(--r-lg);padding:.8rem 1rem;margin-bottom:1rem;font-size:.9rem}
.alert.err{background:var(--danger-50);color:#c2323a} .alert.warn{background:var(--accent-50);color:#9a6400} .alert.info{background:var(--primary-50);color:var(--primary)} .alert.ok{background:var(--success-50);color:#14805a}
.alert ul{margin:0;padding-inline-start:1.2rem}
.pill{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .65rem;border-radius:99px;white-space:nowrap}
.pill.ok{background:var(--success-50);color:var(--success)} .pill.warn{background:var(--warn-50);color:#b57300} .pill.fail,.pill.bad{background:var(--danger-50);color:var(--danger)} .pill.info{background:var(--primary-50);color:var(--primary)}
.badge-count{background:var(--primary);color:#fff;border-radius:8px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:.72rem;font-weight:700;padding:0 .35rem}
.badge-off{background:var(--accent);color:#fff;border-radius:10px 10px 10px 2px;font-weight:800;font-size:.78rem;padding:.05rem .55rem}

/* ---------- logo wordmark ---------- */
.logo{display:inline-flex;align-items:baseline;font-weight:900;font-size:1.9rem;letter-spacing:-.02em;line-height:1;direction:rtl}
.logo b{color:var(--primary)} .logo span{color:var(--ink)}

/* ---------- auth / installer (login-card look) ---------- */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:3.2rem 1rem 2rem;gap:1.6rem}
.auth-card{background:var(--card);border-radius:var(--r-xl);width:100%;max-width:440px;padding:1.6rem 1.9rem 1.9rem}
.auth-card.wide{max-width:720px}
.auth-card h1{font-size:1.05rem;text-align:center;margin:.4rem 0 1.4rem}
.auth-card h1 em{font-style:normal;color:var(--muted-2);font-weight:400}
.auth-card .back{display:inline-grid;place-items:center;width:32px;height:32px;color:var(--ink)}
.auth-foot{display:flex;gap:1rem;color:var(--muted-2);font-size:.85rem}
.auth-foot span{opacity:.5}
.stepper{display:flex;align-items:center;justify-content:center;gap:.5rem;list-style:none;margin:0 0 1.4rem;padding:0;flex-wrap:wrap}
.stepper li{display:flex;align-items:center;gap:.45rem;color:var(--muted-2);font-size:.82rem}
.stepper .n{width:26px;height:26px;border-radius:9px;background:var(--field-2);display:grid;place-items:center;font-weight:800;font-size:.78rem}
.stepper li.current{color:var(--ink);font-weight:700} .stepper li.current .n{background:var(--primary);color:#fff}
.stepper li.done .n{background:var(--primary-100);color:var(--primary)}
.stepper li+li::before{content:"";width:22px;height:2px;background:var(--line);border-radius:2px}
.stack{display:flex;flex-direction:column;gap:1rem}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;border-radius:var(--r-md)}
.checks li:nth-child(odd){background:var(--row-alt)}
.checks .lbl{flex:1;font-weight:600} .checks .det{color:var(--muted-2);font-size:.8rem}
.checks .pill{min-width:56px;text-align:center}
.kv{display:grid;grid-template-columns:130px 1fr;gap:.55rem 1rem;margin:0}
.kv dt{color:var(--muted-2)} .kv dd{margin:0;font-weight:700;word-break:break-word} .kv dd.ltr{text-align:right}
.copybox{position:relative}
.copybox pre{margin:0;background:var(--ink);color:#e9efff;border-radius:var(--r-md);padding:.9rem 1rem;overflow:auto;font-size:.8rem;line-height:1.7}
[data-theme="dark"] .copybox pre{background:#0a0d14}
.copybox button{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;font:inherit;font-size:.72rem;background:var(--primary);color:#fff;border:0;border-radius:8px;padding:.1rem .7rem;cursor:pointer}
ol.todo{padding-inline-start:1.2rem;margin:0} ol.todo li{margin-bottom:.7rem}
.actions{display:flex;gap:.7rem;align-items:center;margin-top:1.3rem;flex-wrap:wrap}
.actions .btn.primary{flex:1;min-width:160px}

/* ---------- plain / error pages ---------- */
.err-code{font-size:4.5rem;font-weight:900;color:var(--primary);line-height:1;margin:0}

/* ---------- admin shell (sidebar right, topbar, content cards) ---------- */
.panel{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;background:var(--bg-admin)}
.sidebar{background:var(--card);border-inline-end:1px dashed var(--line);padding:1rem .9rem;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.sidebar .head .logo{font-size:1.3rem} .sidebar .head small{color:var(--muted);font-weight:500;margin-inline-start:.4rem;font-size:.75rem}
.sidebar .user{display:flex;align-items:center;gap:.7rem;background:var(--primary-50);border-radius:var(--r-lg);padding:.7rem .8rem;margin-bottom:1rem}
.avatar{width:44px;height:44px;border-radius:14px;background:var(--card);display:grid;place-items:center;font-weight:800;color:var(--primary);border:1px solid var(--line);flex:none}
.sidebar .user b{display:block;line-height:1.4} .sidebar .user small{color:var(--muted-2)}
.nav-title{color:var(--muted-2);font-size:.75rem;margin:1.1rem .4rem .35rem}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:var(--r-lg);color:var(--ink);font-weight:700;text-decoration:none;margin-bottom:2px}
.nav a:hover{background:var(--field)}
.nav a.active{background:var(--primary-100);color:var(--primary)}
.nav a .ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav a .badge-count{margin-inline-start:auto}
.topbar{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.4rem;border-bottom:1px dashed var(--line)}
.topbar .spacer{flex:1}
.topbar .chip{background:var(--card);border-radius:var(--r-md);padding:.35rem .9rem;font-size:.82rem;font-weight:600;color:var(--ink);text-decoration:none}
.topbar .iconbtn{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:transparent;border:0;color:var(--ink);cursor:pointer}
.content{padding:1.2rem 1.4rem 2.5rem}
.crumbs{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.9rem}
.crumbs h1{font-size:1rem}.crumbs span{color:var(--muted-2)}
.box{background:var(--card);border-radius:var(--r-xl);padding:1.2rem 1.3rem;margin-bottom:1.1rem;box-shadow:var(--shadow)}
.box h2{font-size:.95rem;margin-bottom:.9rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.1rem}
.stat{background:var(--card);border-radius:var(--r-xl);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.stat .t{display:flex;justify-content:space-between;align-items:center;font-weight:800}
.stat .t a{font-size:.75rem;font-weight:500;color:var(--muted-2)}
.stat .v{font-size:1.6rem;font-weight:800;margin-top:.4rem} .stat .u{color:var(--muted-2);font-size:.8rem}
.stat.c1 .t b{color:var(--warn)} .stat.c2 .t b{color:var(--teal)} .stat.c3 .t b{color:var(--danger)} .stat.c4 .t b{color:var(--sky)}
.welcome{background:#ebe8e4;border-radius:var(--r-xl);padding:1.3rem 1.5rem;margin-bottom:1.1rem}
.welcome h2{font-size:1rem;margin-bottom:.3rem}
.pills{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.2rem 0 1rem;font-size:.85rem}
.pills .lbl{color:var(--ink);font-weight:600;margin-inline-end:.4rem}
.pills a{padding:.2rem .85rem;border-radius:12px;color:var(--ink-2);text-decoration:none}
.pills a.active{background:var(--ink);color:var(--card);font-weight:800}

/* tables: striped light-blue rows like the reference */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-md)}
table.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
table.tbl th{background:var(--row-alt);color:var(--ink-2);font-weight:700;padding:.65rem .65rem;text-align:start;white-space:nowrap}
table.tbl td{padding:.6rem .65rem;white-space:nowrap}
table.tbl tbody tr:nth-child(even){background:var(--row-alt)}
table.tbl .amt-in{color:var(--success);font-weight:800} table.tbl .amt-out{color:var(--danger);font-weight:800}
table.tbl td b{font-weight:700}
.search{display:flex;gap:.6rem;background:var(--field);border-radius:var(--r-lg);padding:.3rem;margin-bottom:1rem}
.search input{flex:1;border:0;background:transparent;font:inherit;padding:.4rem .8rem;color:var(--ink)} .search input:focus{outline:0}
.search button{background:var(--primary);color:#fff;border:0;border-radius:12px;width:40px;cursor:pointer}
.pager{display:inline-flex;background:var(--card);border-radius:12px;padding:.2rem;box-shadow:var(--shadow);gap:.1rem}
.pager a,.pager span{padding:.2rem .8rem;border-radius:9px;color:var(--ink);text-decoration:none;font-size:.82rem}
.pager .cur{background:var(--primary);color:#fff;font-weight:700}

/* ---------- storefront shell ---------- */
.rates-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.rate{background:var(--card);border-radius:var(--r-lg);padding:.7rem 1rem;box-shadow:var(--shadow)}
.rate small{color:var(--muted-2);display:block} .rate b{font-size:1.05rem}
.rate .up{color:var(--success)} .rate .dn{color:var(--danger)}

html,body{overflow-x:hidden}
.nav-toggle{display:none}
@media (max-width:900px){
  .panel{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-block:0;inset-inline-start:0;width:280px;max-width:86vw;z-index:50;transform:translateX(110%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(10,15,30,.4);z-index:40}
  .nav-toggle{display:grid}
  .stats{grid-template-columns:1fr 1fr} .grid2{grid-template-columns:1fr} .kv{grid-template-columns:1fr}
  .topbar{padding:.6rem .8rem;gap:.3rem} .topbar .user-meta{display:none} .content{padding:1rem .8rem 2rem}
}
@media (max-width:720px){
  .rates-bar{grid-template-columns:1fr 1fr}
  .auth{padding-top:1.6rem} .auth-card{padding:1.2rem 1rem 1.4rem}
  .stats{grid-template-columns:1fr}
}

/* ==========================================================================
   Step 3 — sign-in card (matches the reference login), role matrix
   ========================================================================== */
.auth-card.narrow{max-width:360px;padding:1.1rem 1.9rem 1.7rem;min-height:340px}
.auth-card .back-row{display:flex;justify-content:flex-end;margin-bottom:.6rem}
.auth-card.narrow h1{font-size:.98rem;margin:1.5rem 0 2.6rem}
.auth-logo{margin-top:1.6rem}
.auth-card .field input{border:1px solid var(--line);background:var(--field);font-size:.85rem;min-height:46px;border-radius:var(--r-lg)}
.auth-card .field input:focus{border-color:var(--primary-glow);box-shadow:none;background:var(--card)}
.auth-card .btn.primary{min-height:36px;padding:.45rem 1rem;font-size:.9rem}
.auth-card .pw button{inset-inline-start:.4rem}
.auth-note{text-align:center;font-size:.75rem;margin:1.1rem 0 0;color:var(--ink)}
.auth-note a{font-weight:600}
.auth-alt{text-align:center;margin:1.1rem 0 0;font-size:.8rem;font-weight:800}
.auth-alt a{color:var(--cyan)}
.auth-foot a{color:var(--muted-2);text-decoration:none} .auth-foot a:hover{color:var(--ink)}
.auth-foot span{margin-top:0}
.mobile-chip{display:flex;align-items:center;justify-content:space-between;background:var(--field);border:1px solid var(--line);border-radius:var(--r-lg);padding:.45rem 1rem;margin:-.8rem 0 1rem;font-weight:700}
.mobile-chip a{font-size:.78rem;font-weight:600}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.perm-group{background:var(--bg-admin);border-radius:var(--r-lg);padding:.8rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.perm-group>b{font-size:.82rem;margin-bottom:.2rem}
.check{display:flex;align-items:center;gap:.5rem;font-size:.82rem;cursor:pointer}
.check input{width:16px;height:16px;min-height:0;accent-color:var(--primary)}

/* ==========================================================================
   Step 4 — rates: tab strip (as in the reference settings page), rate table, live widget
   ========================================================================== */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 -1px;position:relative;z-index:1}
.tabs a{background:var(--field-2);color:var(--ink);padding:.4rem 1.3rem;border-radius:12px 12px 0 0;font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap}
.tabs a:hover{background:var(--line)}
.tabs a.active{background:var(--primary);color:#fff;font-weight:800}
.box.tabbed{border-start-start-radius:0;margin-top:0}
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.sec-head h3{font-size:.95rem;margin-bottom:.15rem}.sec-head .hint{margin:0}
.rates-tbl td{vertical-align:middle;white-space:normal}
.rates-tbl th,.rates-tbl td{padding-inline:.45rem}
.rates-tbl td:first-child{min-width:140px}
.cell{font:inherit;font-size:.8rem;background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:.3rem .5rem;width:104px;min-height:36px;text-align:left}
.cell.sm{width:58px}
.cell:focus{outline:0;border-color:var(--primary-glow);background:var(--card);box-shadow:0 0 0 3px rgba(10,104,71,.12)}
.cell[disabled]{opacity:.45}
.cell.bad{border-color:var(--danger)}
.chg{display:block;font-size:.72rem;font-weight:700;min-height:1.1em}
.chg.up{color:var(--success)}.chg.dn{color:var(--danger)}
.jump{display:none;font-size:.72rem;margin-top:.15rem;color:var(--danger)}
.jump.show{display:flex}
input.sw{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:99px;background:var(--field-2);position:relative;cursor:pointer;margin:0;transition:background .15s;border:0;min-height:0}
input.sw::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start .15s}
input.sw:checked{background:var(--primary)}
input.sw:checked::after{inset-inline-start:19px}
input.sw[disabled]{opacity:.5;cursor:default}
.rate-tools{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line)}
.rate-tools form{margin:0}
.chart{background:var(--bg-admin);border-radius:var(--r-lg);padding:.8rem 1rem .5rem;margin-bottom:1rem}
.chart svg{width:100%;height:150px;display:block}
.chart-lbl{display:flex;justify-content:space-between;color:var(--muted-2);font-size:.75rem;direction:rtl}
.rate .dir{font-size:.7rem;margin-inline-start:.3rem}
.rate .tag{font-size:.68rem;font-weight:700;padding:0 .5rem;border-radius:99px;background:var(--warn-50);color:#b57300;margin-inline-start:.3rem}
@media (max-width:900px){.tabs a{padding:.4rem .9rem}}
@media (max-width:720px){.stats.pair{grid-template-columns:1fr 1fr}.stats.pair .stat{padding:.8rem .9rem}.stats.pair .v{font-size:1.2rem}}
.tabbed .field input,.tabbed .field select{border:1px solid var(--line);background:var(--card)}
.tabbed .field input:focus,.tabbed .field select:focus{border-color:var(--primary-glow)}

/* ---------- step 5: price engine UI ---------- */
.calc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem;align-items:start}
.calc-out{background:var(--field);border-radius:var(--r-xl);padding:1rem 1.1rem;position:sticky;top:1rem}
.calc-tbl{font-size:.88rem}
.calc-tbl tbody tr:nth-child(even){background:transparent}
.calc-tbl td{padding:.5rem .4rem;white-space:normal;border-bottom:1px dashed var(--line)}
.calc-tbl td:last-child{text-align:left}
.calc-tbl tr.tot td{font-size:1rem;font-weight:800;color:var(--primary);border-bottom:2px solid var(--primary-100)}
@media (max-width:900px){.calc-grid{grid-template-columns:1fr}.calc-out{position:static}}

/* ---------- step 5 / B-1: category manager (list style of the reference "دسته‌بندی مقالات") ---------- */
details.cat-new{margin-bottom:1.1rem}
details.cat-new>summary{list-style:none;width:max-content;max-width:100%;cursor:pointer;gap:.6rem}
details.cat-new>summary::-webkit-details-marker{display:none}
details.cat-new[open]>summary{margin-bottom:1rem}
.cat-card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
.cat-card.inner{box-shadow:none;border:1px solid var(--line);border-radius:var(--r-lg)}
details.cat>summary{list-style:none;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.2rem;cursor:pointer;border-bottom:1px solid var(--line)}
details.cat>summary::-webkit-details-marker{display:none}
details.cat>summary:hover{background:var(--field)}
.cat-card>details.cat:last-child:not([open])>summary{border-bottom:0}
.cat-mark{color:var(--cyan);display:inline-grid;transform:rotate(180deg);flex:none}
.cat-name{font-weight:800}
.cat-meta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-inline-start:.4rem}
.cat-meta small{color:var(--muted-2)}
.caret{margin-inline-start:auto;color:var(--muted-2);display:inline-grid;transition:transform .15s;flex:none}
details.cat[open]>summary>.caret{transform:rotate(180deg)}
.cat-body{background:var(--field);margin:.9rem 1rem 1rem;border-radius:var(--r-lg);padding:1.1rem}
.cat-form .field input,.cat-form .field select,.cat-form .field textarea,.cat-body .field input,.cat-body .field select,.cat-body .field textarea{border:1px solid var(--line);background:var(--card)}
.cat-form .field input:focus,.cat-form .field select:focus,.cat-form .field textarea:focus,.cat-body .field input:focus,.cat-body .field select:focus,.cat-body .field textarea:focus{border-color:var(--primary-glow)}
.cat-form .field textarea,.cat-body .field textarea{min-height:84px;resize:vertical}
.field input[type=file]{padding:.55rem .8rem}
.field .check input[type=checkbox]{padding:0;min-height:0;width:16px;height:16px}
.cat-img{display:flex;align-items:center;gap:.8rem}
.cat-img img{width:56px;height:56px;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:var(--card);flex:none}
.cat-actions{display:flex;gap:.9rem;align-items:center;margin-top:1.1rem;flex-wrap:wrap}
.cat-actions .grow{flex:1}
.sw-row{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.85rem;cursor:pointer}
.btn.danger-ghost{background:transparent;color:var(--danger);border:1px solid var(--danger-50)}
.btn.danger-ghost:hover{background:var(--danger-50)}
.cat-sub{margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line)}
.cat-sub .sec-head{margin-bottom:.7rem}
@media (max-width:720px){.cat-meta small{display:none}details.cat>summary{padding:.8rem .9rem}.cat-body{margin:.7rem .5rem .8rem;padding:.9rem}}

/* Step 5 / B-6: product list + product form */
.pl-filter{display:grid;grid-template-columns:2fr 1.4fr 1.4fr auto;gap:.8rem 1rem;align-items:end}
.pl-filter .field input,.pl-filter .field select{border:1px solid var(--line);background:var(--card)}
.pl-go{display:flex;gap:.5rem}
.pl-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--field-2);display:grid;place-items:center;color:var(--muted-2)}
.pl-title{font-weight:700;color:var(--ink);text-decoration:none} .pl-title:hover{color:var(--primary)}
.pl-out{color:var(--danger);font-weight:800}
.pl-act{white-space:nowrap;text-align:end} .pl-act .btn{margin-inline-start:.3rem}
.pf-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 250px;gap:1.1rem;align-items:start;border:0;padding:0;margin:0;min-width:0}
.pf-menu{display:flex;flex-direction:column;gap:.2rem;padding:.7rem;position:sticky;top:78px}
.pf-menu button{font:inherit;display:flex;align-items:center;gap:.6rem;border:0;background:transparent;color:var(--ink);padding:.55rem .8rem;border-radius:12px;cursor:pointer;font-size:.85rem;text-align:start}
.pf-menu button:hover{background:var(--field-2)}
.pf-menu button.active{background:var(--primary-100);color:var(--primary);font-weight:800}
.pf-main{min-width:0}
.pf-main .field input,.pf-main .field select,.pf-main .field textarea{border:1px solid var(--line);background:var(--card)}
.pf-main .field input:focus,.pf-main .field select:focus,.pf-main .field textarea:focus{border-color:var(--primary-glow)}
.pf-main .field input[readonly]{background:var(--field-2)}
.pf-main .field textarea{resize:vertical;min-height:70px}
.pf-main .box h2{font-size:.95rem;margin-bottom:.9rem}
.pf [hidden]{display:none!important}
.pf.js .pf-sec{display:none} .pf.js .pf-sec.show{display:block}
.pf-side{display:flex;flex-direction:column;gap:.9rem;position:sticky;top:78px}
.pf-side .field select{border:1px solid var(--line);background:var(--card)}
.pf-state{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--muted-2)}
.pf-state b{color:var(--ink)}
.pf-rows td{padding:.35rem .4rem} .pf-rows input:not(.sw){width:100%;min-width:90px;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:.5rem .65rem;font:inherit}
.pf-rows td.c{text-align:center}
.pf-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem}
.pf-img{border:1px solid var(--line);border-radius:14px;padding:.5rem;display:flex;flex-direction:column;gap:.35rem;font-size:.78rem}
.pf-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.pf-img .del{color:var(--danger)}
.pf-filter{border:1px solid var(--line);border-radius:14px;padding:.6rem .9rem .9rem;margin:0 0 .8rem}
.pf-filter legend{font-weight:800;font-size:.85rem;padding:0 .4rem}
.chip-check{display:inline-block;margin:.25rem .3rem 0 0;cursor:pointer}
.chip-check input{position:absolute;opacity:0;pointer-events:none}
.chip-check span{display:inline-block;padding:.3rem .9rem;border-radius:99px;background:var(--field-2);font-size:.82rem}
.chip-check input:checked+span{background:var(--primary);color:#fff;font-weight:700}
.chip-check input:focus-visible+span{outline:2px solid var(--primary-glow)}
.pf-review{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.pf-reject{display:flex;gap:.5rem;flex:1;min-width:260px} .pf-reject input{flex:1;border:1px solid var(--line);background:var(--card);border-radius:var(--r-lg);padding:.6rem 1rem;font:inherit}
@media (max-width:1100px){.pf-grid{grid-template-columns:minmax(0,1fr) 230px}.pf-menu{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;position:static}.pf-side{position:static}}
@media (max-width:760px){.pf-grid{grid-template-columns:1fr}.pl-filter{grid-template-columns:1fr}}

/* Step 5 / B-7: live price */
.pf-preview{margin-top:1.2rem;padding:1rem 1.1rem;border-radius:var(--r-lg);background:var(--field)}
.pf-preview h3{font-size:.9rem;margin:0 0 .6rem} .pf-preview h3 small{font-weight:400;color:var(--muted-2);font-size:.75rem;margin-inline-start:.4rem}
.pf-preview .kv dd{margin:0;text-align:end}
.pf-warn{margin:.6rem 0 0;padding-inline-start:1.2rem;color:#b57300;font-size:.82rem} .pf-warn:empty{display:none}
.pf-vprice{font-weight:700;white-space:nowrap;font-size:.82rem} .pf-vprice.bad{color:#b57300}
.pf-live td{font-size:.8rem} .pf-live tr.off{opacity:.55}
.pf-main h2 small{font-weight:400;margin-inline-start:.5rem}

/* Step 6 / part 3: media library + picker */
.mlib-top{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.mlib-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;border:2px dashed var(--line);border-radius:16px;padding:1.6rem 1rem;text-align:center;background:var(--card);color:var(--muted-2);cursor:pointer}
.mlib-drop:hover,.mlib-drop:focus-within{border-color:var(--primary);color:var(--primary)}
.mlib-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.mlib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.9rem}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.55rem;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.mthumb{display:block;aspect-ratio:1;border-radius:11px;overflow:hidden;background:var(--field-2)}
.mthumb img{width:100%;height:100%;object-fit:cover;display:block}
.mmeta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.mmeta b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmeta small{color:var(--muted-2);font-size:.74rem}
.mact summary{list-style:none;cursor:pointer;text-align:center;display:flex}
.mact summary::-webkit-details-marker{display:none}
.mact[open] summary{margin-bottom:.5rem}
.mact form .field{margin-bottom:.5rem}
.mtools{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.mtools form{margin:0}
.mlib-modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:1rem}
.mlib-modal[hidden]{display:none}
.mlib-box{background:var(--card);color:var(--ink);border-radius:18px;width:min(920px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.mlib-head,.mlib-foot{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.8rem 1rem}
.mlib-head{border-bottom:1px solid var(--line)} .mlib-foot{border-top:1px solid var(--line)}
.mlib-head input[type=search]{flex:1;min-width:10rem;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:.45rem .7rem;font:inherit}
.mlib-body{padding:1rem;overflow:auto;flex:1}
.mpick{position:relative;border:3px solid transparent;border-radius:14px;padding:0;background:var(--field-2);cursor:pointer;aspect-ratio:1;overflow:hidden}
.mpick img{width:100%;height:100%;object-fit:cover;display:block}
.mpick.on{border-color:var(--primary)}
.mpick .tick{position:absolute;top:.35rem;inset-inline-start:.35rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--primary);color:#fff;display:none;align-items:center;justify-content:center;font-size:.8rem;font-weight:800}
.mpick.on .tick{display:flex}
.mlib-pick{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

/* Step 6 / part 4: rich text editor + rendered rich text */
.rte{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.rte-bar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;padding:.4rem;border-bottom:1px solid var(--line);background:var(--field-2)}
.rte-bar button{font:inherit;font-size:.8rem;font-weight:700;border:0;border-radius:8px;padding:.3rem .6rem;background:var(--card);color:var(--ink);cursor:pointer}
.rte-bar button:hover{background:var(--primary-100);color:var(--primary)}
.rte-bar button.on{background:var(--primary);color:#fff}
.rte-bar button[disabled]{opacity:.45;cursor:default}
.rte-bar .sep{width:1px;height:1.2rem;background:var(--line);margin:0 .2rem}
.rte-area{min-height:220px;max-height:60vh;overflow:auto;padding:.8rem 1rem;outline:none;line-height:1.9}
.rte-area:focus{box-shadow:inset 0 0 0 2px var(--primary-100)}
.rte-src{display:block;width:100%;min-height:220px;border:0;padding:.8rem 1rem;font-family:ui-monospace,Consolas,monospace;font-size:.85rem;background:var(--card);color:var(--ink);resize:vertical}
.rte-src[hidden]{display:none}
.prose{line-height:1.95}
.prose h2{font-size:1.25rem;margin:1.1rem 0 .4rem} .prose h3{font-size:1.08rem;margin:1rem 0 .35rem} .prose h4{margin:.9rem 0 .3rem}
.prose p{margin:.5rem 0} .prose ul,.prose ol{margin:.5rem 0;padding-inline-start:1.6rem}
.prose blockquote{margin:.8rem 0;padding:.4rem 1rem;border-inline-start:4px solid var(--primary);background:var(--field-2);border-radius:8px}
.prose img{max-width:100%;height:auto;border-radius:10px}
.prose table{border-collapse:collapse;width:100%;margin:.8rem 0}
.prose th,.prose td{border:1px solid var(--line);padding:.4rem .6rem;text-align:start} .prose th{background:var(--field-2)}
.prose hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
.prose a{color:var(--primary)}

/* Step 6 / part 5: inventory page — quick stock change inside a table row */
.inv-adj{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;min-width:380px;white-space:normal}
.inv-adj select,.inv-adj input{font:inherit;font-size:.78rem;padding:.3rem .55rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);min-height:34px;width:auto}
.inv-adj input[name=amount]{width:78px}
.inv-adj input[name=note]{width:150px}
.inv-adj select:focus,.inv-adj input:focus{outline:0;border-color:var(--primary-glow)}
.pf-help{margin:0} .pf-help dt{font-weight:800;margin-top:1rem;color:var(--ink)} .pf-help dt:first-child{margin-top:0} .pf-help dd{margin:.25rem 0 0;color:var(--ink-2);font-size:.88rem;line-height:1.9}

/* ==========================================================================
   Step 7-1 — shared storefront frame (announcement, header, category menu, rate strip, footer,
   mobile bottom bar). Measured against the reference at 1280px and 412px.
   ========================================================================== */
.sf-wrap{max-width:1280px;margin:0 auto;padding:0 1.2rem}
.iconbtn{width:38px;height:38px;border-radius:12px;display:inline-grid;place-items:center;background:transparent;border:0;color:var(--ink);cursor:pointer;text-decoration:none!important;padding:0}
.iconbtn:hover{background:var(--field-2)}
.m-only{display:none}
.admin-strip{display:none}

/* announcement bar */
.announce{background:var(--accent);color:#1c1c25;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem 1rem;font-weight:800;min-height:44px}
.announce .at{font-size:.95rem;margin-inline-end:auto;margin-inline-start:auto;flex:0 1 auto;order:0}
.announce .pct{width:26px;height:26px;border-radius:7px;background:#1c1c25;color:#fff;display:grid;place-items:center;flex:none;order:1}
.announce a{background:#fff;color:#1c1c25;border-radius:8px;padding:.05rem .75rem;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:.25rem;order:2;text-decoration:none}

/* header */
.sf-head{display:flex;align-items:center;gap:1rem;padding:1rem 0 .6rem}
.sf-burger{display:none;background:var(--card);box-shadow:var(--shadow)}
.sf-head .logo{font-size:2rem}
.sf-search{flex:1;display:flex;align-items:center;background:var(--field-2);border-radius:var(--r-lg);padding:.4rem .45rem .4rem .45rem;min-width:0;margin:0}
.sf-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);padding:.35rem 1rem}
.sf-search input:focus{outline:0}
.sf-search input::placeholder{color:var(--muted-2)}
.sf-search .sbtn{border:0;background:transparent;color:var(--muted-2);width:34px;height:34px;display:grid;place-items:center;cursor:pointer;border-radius:10px}
.sf-search .archive{background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:.45rem 1.1rem;font-weight:700;font-size:.8rem;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;white-space:nowrap}
.sf-tools{display:flex;align-items:center;gap:.25rem;background:var(--card);border-radius:var(--r-lg);padding:.35rem;flex:none}
.sf-tools .cart-btn{position:relative;gap:.45rem;padding:.4rem .9rem;order:-1}
.sf-tools .cart-btn .badge-count{background:rgba(255,255,255,.28);color:#fff;min-width:20px;height:20px;border-radius:6px;font-size:.7rem}
.sf-tools .cart-btn:not(:has(.badge-count))::after{content:"";width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.28)}

/* main menu row */
.sf-nav{display:flex;align-items:center;gap:1.6rem;padding:.5rem 0 .9rem;border-bottom:1px dashed var(--line);color:var(--ink-2);font-weight:600;position:relative}
.sf-nav>a{color:inherit;text-decoration:none;white-space:nowrap} .sf-nav>a:hover{color:var(--primary)}
.cats-wrap{position:relative;padding-inline-end:1.4rem;margin-inline-end:.2rem;border-inline-end:1px solid var(--line)}
.sf-nav .cats{font:inherit;font-weight:800;color:var(--ink);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:0}
.nav-phone{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem;direction:rtl;color:var(--ink-2)}
.nav-phone .ic{display:inline-flex;padding-inline-start:.7rem;border-inline-start:1px solid var(--line)}

/* category menu: shared markup for the desktop flyout and the mobile drawer */
.cm-panel{position:absolute;top:calc(100% + .6rem);inset-inline-start:0;z-index:30;background:var(--card);border-radius:var(--r-xl);box-shadow:0 12px 40px rgba(20,40,90,.16);padding:.6rem;min-width:260px}
.cm-panel[hidden]{display:none}
.cm-panel ul{list-style:none;margin:0;padding:0}
.cm-panel .cm-l1>li{position:relative}
.cm-panel .cm-l1>li>a{display:flex;align-items:center;justify-content:space-between;padding:.55rem .9rem;border-radius:var(--r-md);color:var(--ink);font-weight:700;text-decoration:none}
.cm-panel .cm-l1>li.has>a::after{content:"‹";font-size:1.3rem;line-height:1;color:var(--muted-2)}
.cm-panel .cm-l1>li:hover>a,.cm-panel .cm-l1>li.open>a{background:var(--primary-50);color:var(--primary)}
.cm-panel .cm-l2{display:none;position:absolute;top:-.6rem;inset-inline-start:calc(100% + .1rem);background:var(--card);border-radius:var(--r-xl);box-shadow:0 12px 40px rgba(20,40,90,.16);padding:.7rem;min-width:240px;margin-inline-start:.4rem}
.cm-panel .cm-l1>li:hover>.cm-l2,.cm-panel .cm-l1>li.open>.cm-l2{display:block}
.cm-panel .cm-l2>li>a{display:block;padding:.4rem .8rem;border-radius:10px;color:var(--ink);font-weight:700;text-decoration:none}
.cm-panel .cm-l2>li>a:hover{background:var(--primary-50);color:var(--primary)}
.cm-panel .cm-l3 a{display:block;padding:.15rem 1.6rem .15rem .8rem;color:var(--muted-2);font-size:.82rem;text-decoration:none}
.cm-panel .cm-l3 a:hover{color:var(--primary)}
.cm-empty{margin:0;padding:.8rem 1rem;color:var(--muted-2);font-size:.85rem}

/* live-rate strip */
.sf-rates{margin:.2rem 0 .4rem}
.rates-bar.compact{display:flex;gap:.5rem;overflow-x:auto;margin:.7rem 0 .2rem;padding-bottom:.2rem;scrollbar-width:none}
.rates-bar.compact::-webkit-scrollbar{display:none}
.rates-bar.compact .rate{flex:none;display:flex;align-items:center;gap:.6rem;padding:.3rem .9rem;border-radius:12px;box-shadow:none;background:var(--card)}
.rates-bar.compact .rate small{display:inline;font-size:.75rem}
.rates-bar.compact .rate b{font-size:.82rem}

.sf-main{min-height:40vh;padding-top:.8rem}

/* breadcrumb + pager */
.crumbs{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-2);margin:.2rem 0 1rem}
.crumbs a{color:var(--ink);font-weight:800;text-decoration:none}
.crumbs .sep{color:var(--muted);display:inline-flex}
.crumbs .cur{color:var(--ink-2);font-weight:500}
.sf-pager{display:inline-flex;align-items:center;background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin:1.2rem 0}
.sf-pager a,.sf-pager span{padding:.45rem 1rem;color:var(--ink);text-decoration:none;font-size:.85rem;min-width:40px;text-align:center;border-inline-start:1px solid var(--line)}
.sf-pager>:first-child{border-inline-start:0}
.sf-pager .cur{background:var(--primary);color:#fff;font-weight:800}
.sf-pager .off{color:var(--muted)}
.sf-pager a:hover{background:var(--primary-50)}

/* placeholder page */
.soon-box{background:var(--card);border-radius:var(--r-xl);padding:2.6rem 1.4rem;text-align:center;box-shadow:var(--shadow);max-width:560px;margin:1.5rem auto}
.soon-box .soon-ico{width:64px;height:64px;border-radius:20px;background:var(--primary-100);color:var(--primary);display:grid;place-items:center;margin:0 auto 1rem}
.soon-box h1{font-size:1.15rem;margin-bottom:.5rem} .soon-box p{color:var(--ink-2);margin:0 0 1.2rem} .soon-box b{color:var(--ink)}

/* footer */
.sf-foot{margin-top:2.4rem;padding-bottom:1.6rem}
.foot-top{display:flex;align-items:center;gap:1.1rem;border:1px dashed var(--line);border-radius:var(--r-lg);padding:.8rem 1.2rem;background:color-mix(in srgb,var(--card) 55%,transparent)}
.foot-top .logo{font-size:1.9rem;padding-inline-end:1.1rem;border-inline-end:1px dashed var(--line)}
.foot-top .hours{margin:0;font-weight:800;font-size:.82rem;flex:1}
.foot-phone{display:flex;align-items:center;gap:.5rem;direction:rtl;color:var(--ink-2)}
.foot-phone .ic{display:inline-flex;padding-inline-start:.7rem;border-inline-start:1px solid var(--line)}
.foot-cols{display:grid;grid-template-columns:minmax(0,2.4fr) 1fr 1fr;gap:2rem;padding:1.6rem .4rem 1.4rem;border-bottom:1px dashed var(--line)}
.foot-cols .about p{margin:1rem 0 0;color:var(--ink-2);font-size:.82rem;line-height:2.2;text-align:justify}
.chip-title{display:inline-block;background:var(--primary);color:#fff;border-radius:var(--r-md);padding:.35rem 1rem;font-size:.9rem}
.foot-cols .col{display:flex;flex-direction:column;gap:.7rem;text-align:center;align-items:center}
.foot-cols .col h4{margin:0 0 .6rem;font-size:.95rem;font-weight:800}
.foot-cols .col a{color:var(--ink-2);font-size:.82rem;text-decoration:none} .foot-cols .col a:hover{color:var(--primary)}
.foot-mid{display:flex;justify-content:space-between;align-items:flex-start;gap:1.4rem;padding:1.4rem .4rem}
.foot-mid .contact p{margin:.2rem 0 .8rem;color:var(--ink-2);font-size:.88rem} .foot-mid .contact b{color:var(--ink);margin-inline-end:.3rem}
.badges small{display:block;color:var(--muted-2);margin-bottom:.6rem;font-size:.75rem}
.badge-row{display:flex;gap:.6rem}
.lic{width:72px;height:72px;border-radius:var(--r-md);background:var(--card);display:grid;place-items:end center;padding-bottom:.9rem;box-shadow:var(--shadow)}
.lic i{font-style:normal;background:rgba(120,130,150,.55);color:#fff;font-size:.72rem;padding:0 .8rem;border-radius:4px}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.foot-links{display:flex;align-items:center;gap:1.8rem;font-weight:700}
.foot-links a{color:var(--ink);text-decoration:none;white-space:nowrap} .foot-links a:hover{color:var(--primary)}
.foot-links a.first{background:var(--card);border-radius:var(--r-md);padding:.5rem 1.4rem;box-shadow:var(--shadow)}
.join{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:.25rem;min-width:320px}
.join input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);padding:.4rem .8rem} .join input:focus{outline:0}
.join .btn{padding:.5rem 1.4rem;border-radius:var(--r-md)}
.foot-copy{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.4rem;font-size:.78rem;color:var(--ink-2)}
.foot-copy .brandname{color:var(--accent)}
.socials{display:flex;gap:.5rem;background:var(--field-2);border-radius:var(--r-md);padding:.4rem .9rem}
.socials a{color:var(--muted-2);display:grid;place-items:center;width:28px;height:28px}

/* mobile bottom bar + drawer (hidden on desktop) */
.bottom-bar,.drawer,.drawer-shade{display:none}

@media (max-width:900px){
  body.store{padding-bottom:78px}
  .admin-strip{display:flex;align-items:center;gap:1.1rem;background:#1c1c25;color:#fff;padding:.45rem .9rem;font-size:.85rem;font-weight:700}
  .admin-strip a{color:#fff;text-decoration:none}
  .admin-strip .avatar{width:26px;height:26px;border-radius:50%;background:#3a3f4d;display:grid;place-items:center;margin-inline-end:auto;order:9}
  .announce{padding:.4rem .6rem;min-height:40px}
  .announce .at{font-size:.8rem}
  .sf-wrap{padding:0 .8rem}
  .sf-head{flex-wrap:wrap;gap:.6rem;padding:.8rem 0 .4rem}
  .sf-burger{display:inline-grid;order:0;width:44px;height:44px;border-radius:14px}
  .sf-head .logo{order:1;font-size:1.7rem;margin-inline-end:auto}
  .sf-tools{order:2;padding:.25rem .4rem}
  .sf-tools .cart-btn{order:3;background:transparent;color:var(--ink);padding:.3rem .5rem}
  .sf-tools .cart-btn .lbl{display:none}
  .sf-tools .cart-btn .badge-count{background:var(--primary);color:#fff;position:absolute;top:-2px;inset-inline-start:-2px;min-width:18px;height:18px;font-size:.65rem}
  .sf-tools .cart-btn:not(:has(.badge-count))::after{display:none}
  .m-only{display:inline-grid}
  .sf-search{order:3;flex:1 1 100%;padding:.3rem}
  .sf-search .sbtn{display:none}
  .sf-nav{display:none}
  .sf-rates{margin-top:.3rem}
  .foot-top{flex-wrap:wrap;gap:.6rem;padding:.8rem 1rem}
  .foot-top .logo{border:0;padding:0;order:1;margin-inline-end:auto}
  .foot-top .foot-phone{order:2}
  .foot-top .hours{order:3;flex:1 1 100%;text-align:center;font-size:.8rem}
  .foot-cols{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
  .foot-cols .about{grid-column:1/-1}
  .foot-mid{flex-direction:column;align-items:stretch;text-align:center}
  .badges{text-align:center} .badge-row{justify-content:center}
  .foot-bar{flex-direction:column;align-items:stretch}
  .foot-links{display:none}
  .join{min-width:0;width:100%}
  .foot-copy{flex-direction:column-reverse;gap:.8rem;text-align:center}

  .bottom-bar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--card);border-radius:20px 20px 0 0;box-shadow:0 -4px 24px rgba(20,40,90,.12);padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom,0px))}
  .bottom-bar a,.bottom-bar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;background:none;border:0;font:inherit;font-size:.68rem;font-weight:700;color:var(--ink-2);text-decoration:none;cursor:pointer;padding:.2rem 0}
  .bottom-bar .on{color:var(--primary)}
  .bottom-bar .on span{background:var(--primary-100);border-radius:99px;padding:0 .8rem}
  .bottom-bar .badge-count{background:var(--primary);color:#fff;min-width:16px;height:16px;font-size:.6rem;border-radius:5px;margin-inline-start:.2rem}

  .drawer-shade{display:block;position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
  .drawer{display:flex;flex-direction:column;position:fixed;inset-block:0;inset-inline-start:0;width:320px;max-width:88vw;background:var(--bg-store);z-index:70;transform:translateX(105%);visibility:hidden;transition:transform .22s,visibility .22s;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.drawer-open .drawer{transform:none;visibility:visible}
  body.drawer-open .drawer-shade{opacity:1;pointer-events:auto}
  body.drawer-open{overflow:hidden}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;background:var(--card)}
  .drawer-body{overflow-y:auto;padding:.6rem 1rem 2rem}
  .drawer-body h4{margin:1rem 0 .4rem;font-size:.8rem;color:var(--muted-2)}
  .drawer-body ul{list-style:none;margin:0;padding:0}
  .drawer-body li>a{display:block;padding:.5rem .4rem;color:var(--ink);font-weight:700;text-decoration:none}
  .drawer-body ul ul{padding-inline-start:1rem;border-inline-start:2px solid var(--line);margin-inline-start:.4rem}
  .drawer-body ul ul a{font-weight:600;font-size:.88rem;color:var(--ink-2)}
  .drawer-body ul ul ul a{font-size:.82rem;color:var(--muted-2)}
}
@media (max-width:720px){
  .rates-bar{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Step 7-2 — product card + card grid. Measured against the reference list page at 1280px
   (cell 230×291, hairline grid, orange discount pill, vertical colour dots, two-line title,
   rating at the start and price at the end of the last row) and the 412px slider cards.
   ========================================================================== */
.pgrid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:1px;background:var(--bg-store);border-radius:var(--r-xl);overflow:hidden}
.pgrid.cols-3{--cols:3} .pgrid.cols-5{--cols:5} .pgrid.cols-6{--cols:6}
:root{--pc-img:156px}
.pcard{background:var(--card);position:relative;min-width:0}
.pcard.solo{border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.pc{display:flex;flex-direction:column;height:100%;padding:.9rem 1rem .8rem;color:var(--ink);text-decoration:none!important}
.pc:hover .pc-title{color:var(--primary)}
.pc-timer{align-self:flex-start;display:inline-flex;align-items:center;gap:.22rem;direction:ltr;unicode-bidi:isolate;font-size:.7rem;font-weight:700;color:var(--ink-2);line-height:1.7;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.pc-timer b{font-weight:700;background:var(--field-2);border-radius:8px;padding:0 .4rem;min-width:1.55rem;text-align:center}
.pc-timer i{font-style:normal;font-weight:700;color:var(--muted-2)}
.pc-timer.done{opacity:.5} .pc-timer[hidden]{display:none}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;min-height:22px}
.pc-dots{display:flex;flex-direction:column;gap:5px;padding:.3rem .1rem 0}
.pc-dots i{width:8px;height:8px;border-radius:50%;display:block}
.pc-dots i.light{box-shadow:inset 0 0 0 1px rgba(60,70,90,.28)}
.pc-off{display:inline-flex;align-items:center;gap:.15rem;background:var(--accent);color:#fff;border-radius:9px;padding:0 .5rem;font-size:.72rem;font-weight:800;line-height:1.75;box-shadow:0 4px 10px rgba(235,180,15,.35);margin-top:-.1rem}
.pc-off[hidden]{display:none}
.pc-off i{font-style:normal;font-weight:800}
.pc-img{position:relative;height:var(--pc-img);margin-top:-.8rem;display:grid;place-items:center}
.pc-img{overflow:hidden}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:.45rem .6rem}
.pc-img img,.lr-img img,.of-img img,.ctile-img img{mix-blend-mode:multiply}
[data-theme="dark"] .pc-img img,[data-theme="dark"] .lr-img img,[data-theme="dark"] .of-img img,[data-theme="dark"] .ctile-img img{mix-blend-mode:normal}
.pc-noimg{width:72%;height:78%;border-radius:var(--r-lg);background:var(--field);color:var(--muted);display:grid;place-items:center}
.pc-chip{position:absolute;z-index:1;inset-inline-start:0;bottom:0;background:var(--field-2);color:var(--ink-2);border-radius:8px;padding:0 .55rem;font-size:.7rem;font-weight:700;line-height:1.9}
.pc-title{font-size:.84rem;font-weight:600;line-height:1.75;margin:.55rem 0 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.5em}
.pc-weight,.lr-weight{display:block;font-size:.76rem;font-weight:500;color:var(--ink-2);line-height:1.6;margin-top:.2rem}
.pc-weight b,.lr-weight b{color:var(--ink);font-weight:700}
.pc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.6rem;min-height:2.3rem}
.pc-rate{display:inline-flex;align-items:center;gap:.25rem;font-weight:800;font-size:.84rem;color:var(--ink);line-height:1.6}
.pc-rate .ico{fill:var(--accent);stroke:var(--accent)}
.pc-price{margin-inline-start:auto;text-align:start;line-height:1.5}
.pc-prices{display:flex;flex-direction:column;align-items:flex-start}
.pc-old{font-size:.72rem;color:var(--muted);text-decoration:line-through;font-weight:600;line-height:1.3}
.pc-now{font-size:.88rem;font-weight:800;color:var(--ink);white-space:nowrap}
.pc-now b{font-weight:800}
.pc-cur{display:inline-flex;flex-direction:column;vertical-align:middle;font-size:.5rem;line-height:1;font-weight:500;color:var(--muted);margin-inline-start:.15rem;text-align:center}
.pc-cur i{font-style:normal;display:block}
.pc-from{font-size:.68rem;font-weight:500;color:var(--muted-2)}
.pc-inq{font-size:.78rem;font-weight:800;color:var(--ink);white-space:nowrap}

@media (max-width:900px){.pgrid{--cols:3}.pgrid.cols-5,.pgrid.cols-6{--cols:3}}
@media (max-width:640px){
  .pgrid,.pgrid.cols-3,.pgrid.cols-5,.pgrid.cols-6{--cols:2;border-radius:var(--r-lg)}
  .pc{padding:.7rem .7rem .65rem}
  :root{--pc-img:132px}
  .pc-title{font-size:.8rem}
  .pc-now{font-size:.76rem}
}

/* design preview page (/_ui/cards) */
.uic h2{font-size:1.05rem;margin:1.6rem 0 .8rem} .uic .note{color:var(--ink-2);font-size:.85rem;margin:-.4rem 0 .8rem}
.uic .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,230px));gap:1rem}

/* ==========================================================================
   Step 7-3 — home page, top half. Measured against the reference mobile screen (412px):
   blue-ringed category circles with an edge arrow · slider ≈ 3:1 with a pill-dot indicator at the start corner ·
   white «پیشنهادات لحظه‌ای» card (orange «بیشتر» pill, tinted inner panel, blue price, tile row) · tinted banner cards.
   Wide screens: slider and offers side by side, banners in two columns.
   ========================================================================== */
.home{display:flex;flex-direction:column;gap:1.1rem;margin-top:.4rem}

/* round categories */
.hm-cats{position:relative}
.hm-cats-row{display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;padding:.5rem .3rem .35rem;scrollbar-width:none}
.hm-cats-row::-webkit-scrollbar{display:none}
.hm-cat{flex:none;width:94px;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none!important}
.hm-cat .ring{width:86px;height:86px;border-radius:50%;border:3px solid #2f6bff;padding:3px;background:var(--card);display:block;box-shadow:0 6px 16px rgba(47,107,255,.16);transition:transform .18s,box-shadow .18s}
.hm-cat:hover .ring{transform:translateY(-2px);box-shadow:0 10px 20px rgba(47,107,255,.26)}
.hm-cat .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.hm-cat .noimg{width:100%;height:100%;border-radius:50%;background:var(--field-2);color:var(--accent);display:grid;place-items:center}
.hm-cat .nm{max-width:100%;font-size:.8rem;font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-arrow{position:absolute;top:30px;z-index:2;width:30px;height:46px;border:0;border-radius:12px;background:var(--card);color:var(--ink);box-shadow:0 4px 14px rgba(20,40,90,.16);display:grid;place-items:center;cursor:pointer}
.hm-arrow[hidden]{display:none}
.hm-arrow.next{inset-inline-end:0} .hm-arrow.prev{inset-inline-start:0} .hm-arrow.prev .ico{transform:scaleX(-1)}

/* top row: slider + offers */
.hm-top{display:flex;flex-direction:column;gap:1.1rem}

/* slider */
.hm-slider{position:relative;aspect-ratio:3/1;border-radius:var(--r-lg);overflow:hidden;background:var(--field-2);isolation:isolate}
.sl-track,.sl-item,.sl-item a,.sl-item picture{display:block;width:100%;height:100%}
.sl-item{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.sl-item.is-on{opacity:1;visibility:visible;transition-delay:0s}
.sl-item img{width:100%;height:100%;object-fit:cover;display:block}
.sl-dots{position:absolute;z-index:2;top:.65rem;inset-inline-end:.9rem;display:flex;gap:.3rem;direction:rtl}
.sl-dots button{position:relative;width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.5);cursor:pointer;transition:width .25s,background .25s}
.sl-dots button::after{content:"";position:absolute;inset:-9px -3px}
.sl-dots button.on{width:20px;background:#fff}
.sl-nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1c1c25;box-shadow:0 4px 14px rgba(0,0,0,.18);display:none;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.sl-nav.next{inset-inline-end:.7rem} .sl-nav.prev{inset-inline-start:.7rem} .sl-nav.prev .ico{transform:scaleX(-1)}
.hm-slider:hover .sl-nav,.sl-nav:focus-visible{opacity:1}
@media (hover:hover) and (min-width:901px){.sl-nav{display:grid}}

/* offers */
.hm-offers{background:var(--card);border-radius:var(--r-xl);padding:1rem 1rem 1.1rem;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.of-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.of-head h2{font-size:.95rem;font-weight:800;line-height:1.6}
.of-head p{margin:0;color:var(--muted-2);font-size:.72rem;line-height:1.7}
.of-more{flex:none;background:var(--accent);color:#fff!important;border-radius:12px;padding:.2rem 1.05rem;font-size:.78rem;font-weight:800;text-decoration:none!important;box-shadow:0 5px 12px rgba(235,180,15,.34)}
.of-more:hover{filter:brightness(.96)}
.of-stage{flex:1}
.of-big{position:relative;background:var(--bg-store);border-radius:var(--r-xl);padding:.8rem .9rem}
.of-big[hidden]{display:none}
.of-big::after{content:"";position:absolute;inset-inline-end:.5rem;top:50%;width:4px;height:26px;margin-top:-13px;border-radius:4px;background:var(--accent)}
.of-link{display:flex;align-items:center;gap:.9rem;padding-inline-end:.8rem;color:inherit;text-decoration:none!important}
.of-img{position:relative;flex:none;width:76px;height:76px;border-radius:18px;background:var(--card);display:grid;place-items:center;overflow:hidden}
.of-img img{width:100%;height:100%;object-fit:contain;display:block;padding:.2rem}
.of-img .pc-noimg{width:70%;height:70%}
.of-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.of-title{font-size:.84rem;font-weight:600;line-height:1.7;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-link:hover .of-title{color:var(--primary)}
.of-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-height:0}
.of-meta:not(:has(*:not([hidden]))){display:none}
.of-meta .pc-timer{margin:0}
.of-price{display:flex;justify-content:flex-end}
.of-price .pc-prices{align-items:flex-end}
.of-price .pc-now{font-size:1.15rem;color:var(--primary);font-weight:800}
.of-price .pc-cur{color:var(--muted-2)}
.of-price .pc-inq{color:var(--ink-2)}
.of-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:calc(25% - .42rem);gap:.55rem;overflow-x:auto;margin-top:.9rem;padding:3px;scrollbar-width:none}
.of-tiles::-webkit-scrollbar{display:none}
.of-tile{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0;padding:0;background:none;border:0;font:inherit;color:var(--ink-2);cursor:pointer}
.of-tile .t-img{width:100%;aspect-ratio:1/.92;border-radius:18px;background:var(--bg-store);display:grid;place-items:center;overflow:hidden;color:var(--muted);transition:box-shadow .15s}
.of-tile .t-img img{width:100%;height:100%;object-fit:contain;display:block;padding:7px}
.of-tile .t-nm{width:100%;font-size:.68rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.of-tile.on .t-img{box-shadow:0 0 0 2px var(--primary)}
.of-tile.on .t-nm{color:var(--ink);font-weight:700}

/* tinted banner cards */
.hm-duo{display:grid;grid-template-columns:1fr;gap:.9rem}
.duo{--duo-bg:color-mix(in srgb,var(--primary) 9%,var(--card));display:flex;align-items:center;gap:.8rem;min-height:132px;padding:.9rem 1.2rem;border-radius:var(--r-xl);background:var(--duo-bg);color:var(--duo-ink,var(--ink));text-decoration:none!important;overflow:hidden;transition:box-shadow .2s}
a.duo:hover{box-shadow:0 8px 22px rgba(20,40,90,.12)}
.duo-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.duo-t{font-size:.95rem;font-weight:800;line-height:1.7}
.duo-s{display:flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:500;line-height:1.7;opacity:.72}
.duo-s .ico{fill:var(--accent);stroke:var(--accent);width:12px;height:12px}
.duo-btn{display:inline-block;margin-top:.15rem;background:var(--primary);color:#fff;border-radius:8px;padding:.15rem .95rem;font-size:.72rem;font-weight:700;line-height:1.9}
.duo-img{flex:0 0 44%;height:112px;display:block}
.duo-img{min-width:0;overflow:hidden}
.duo-img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 12px rgba(20,40,90,.14))}
.hm-hint{margin:0;text-align:center;color:var(--muted-2);font-size:.82rem}

@media (min-width:1000px){
  .hm-top.two{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr);align-items:stretch}
  .hm-top.two .hm-slider{aspect-ratio:auto;min-height:300px;height:100%}
  .hm-top.two .of-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .hm-top:not(.two) .hm-slider{aspect-ratio:16/5}
  .hm-top:not(.two) .hm-offers{max-width:520px}
  .hm-duo{grid-template-columns:1fr 1fr}
  .hm-cats-row{gap:1.4rem}
  .hm-cat{width:104px} .hm-cat .ring{width:96px;height:96px}
  .hm-cat .nm{font-size:.84rem}
  .hm-arrow{top:34px}
}
@media (max-width:700px){
  .hm-cat{width:88px} .hm-cat .ring{width:82px;height:82px}
  .of-img{width:76px;height:76px}
}
@media (prefers-reduced-motion:reduce){.sl-item{transition:none}.hm-cat .ring{transition:none}}

/* banner manager thumbnails (panel) */
.ban-th{height:28px;width:auto;max-width:96px;border-radius:6px;object-fit:cover;border:1px solid var(--line);background:var(--card);flex:none}
.cat-img .ban-th{height:56px;max-width:180px}

/* ==========================================================================
   Step 7-4 — home page, lower half. Measured against the reference mobile screen (412px):
   tinted sections (grey / cream / green: #ecedf4 · #fdf1d9 · #d8e7e2) with a white card strip, a dark arrow pill and a white «مشاهده محصولات» button ·
   white sections with a bar before the title, a blue «بیشتر» pill and pill dots · vertical list with picture at the start ·
   slim strip banner with an orange badge · brand circles · article cards with a white body overlapping the cover.
   ========================================================================== */
:root{--tone-grey:#ecedf4;--tone-cream:#fdf1d9;--tone-blue:#d8e7e2;--nav-bg:#181a22;--dot:#e0e2ec}
[data-theme="dark"]{--tone-grey:#1e1810;--tone-cream:#2a2210;--tone-blue:#142a1f;--nav-bg:#26200f;--dot:#3a3220}

.hs{min-width:0}
.hs-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;min-height:36px}
.hs-head .grow{flex:1}
.hs-title{font-size:.98rem;font-weight:800;line-height:1.6;display:flex;align-items:center;gap:.55rem}
.hs-title.plain{display:block;font-size:.95rem}
.hs-title.bar::before{content:"";flex:none;width:4px;height:20px;border-radius:4px;background:var(--primary)}
.hs-title.bar.orange::before{background:var(--accent)}
.hs-ttl{flex:1;min-width:0}
.hs-sub{display:block;color:var(--muted-2);font-size:.76rem;line-height:1.6;font-weight:500}
.hs-sub.en{direction:ltr;text-align:start;unicode-bidi:isolate}
.hs-ico{flex:none;width:46px;height:46px;border-radius:14px;background:var(--card);color:var(--primary);display:grid;place-items:center;box-shadow:var(--shadow)}
.hs-more{flex:none;display:inline-flex;align-items:center;gap:.2rem;background:var(--primary);color:#fff!important;border-radius:12px;padding:.1rem .85rem;font-size:.78rem;font-weight:800;line-height:1.9;text-decoration:none!important;box-shadow:0 5px 12px rgba(10,104,71,.28)}
.hs-more.orange{background:var(--accent);box-shadow:0 5px 12px rgba(235,180,15,.34)}
.hs-more:hover{filter:brightness(.96)}
/* faint dotted divider between the bar title and its «بیشتر» pill (white category sections and articles, as in the reference) */
.hs-title.bar + .hs-more{position:relative;margin-inline-start:.45rem}
.hs-title.bar + .hs-more::before{content:"";position:absolute;inset-inline-end:calc(100% + .5rem);top:50%;height:18px;transform:translateY(-50%);border-inline-start:2px dotted var(--line)}
.hs-more .ico{width:13px;height:13px}
.hs-list .hs-more,.hs-grid .hs-more{margin-inline-start:auto}
.hs-btn{display:inline-flex;align-items:center;background:var(--card);color:var(--ink)!important;border-radius:12px;padding:.1rem .9rem;font-size:.76rem;font-weight:500;line-height:2;text-decoration:none!important;white-space:nowrap}
.hs-btn .ico{display:none}
.hs-btn:hover{box-shadow:0 4px 12px rgba(20,40,90,.12)}
.hs-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--muted-2)!important;font-size:.8rem;text-decoration:none!important;padding-inline-start:.7rem;border-inline-start:1px dashed var(--line)}
.hs-link .ico{width:13px;height:13px}
.hs-tools{margin-inline-start:auto;display:flex;align-items:center;gap:.6rem}

/* arrow pill and page dots (script: "Step 7-4") */
.ps-nav{display:inline-flex;align-items:center;height:34px;border-radius:12px;background:var(--nav-bg);color:#fff;box-shadow:0 5px 12px rgba(20,24,40,.2)}
.ps-nav button{width:38px;height:100%;border:0;padding:0;background:none;color:inherit;display:grid;place-items:center;cursor:pointer;border-radius:12px}
.ps-nav button[data-ps-prev] .ico{transform:scaleX(-1)}
.ps-nav button:disabled{opacity:.35;cursor:default}
.ps-nav i{width:1px;height:14px;background:rgba(255,255,255,.4)}
.hs-solo .ps-nav{background:var(--primary);box-shadow:0 5px 12px rgba(10,104,71,.3)}
.ps-dots{display:inline-flex;align-items:center;gap:5px;direction:rtl}
.ps-dots:empty{display:none}
.ps-dots b{width:7px;height:7px;border-radius:99px;background:var(--dot);cursor:pointer;position:relative;transition:width .25s,background .25s}
.ps-dots b::after{content:"";position:absolute;inset:-8px -3px}
.ps-dots b.on{width:22px;background:var(--primary)}
.ps-dots.orange b.on{background:var(--accent)}

/* scrolling rows */
.ps-box{background:var(--card);border-radius:var(--r-xl);overflow:hidden}
.ps-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.ps-track::-webkit-scrollbar,.ctile-row::-webkit-scrollbar,.br-row::-webkit-scrollbar,.ar-row::-webkit-scrollbar{display:none}
.ps-track>.pcard{flex:0 0 50%;scroll-snap-align:start}
.ps-track>.pcard+.pcard{border-inline-start:1px solid var(--bg-store)}
.ps-track.solo{gap:.8rem;padding:.2rem .15rem .9rem}
.ps-track.solo>.pcard{flex:0 0 calc(50% - .4rem);border-inline-start:0}
.ps-track.solo>.pcard+.pcard{border-inline-start:0}
.hs-tint{border-radius:var(--r-xl);padding:.9rem .85rem .85rem;background:var(--tone-grey)}
.hs-tint.tone-cream{background:var(--tone-cream)}
.hs-tint.tone-blue{background:var(--tone-blue)}
.hs-tint .hs-head{margin-bottom:.7rem}
.hs-white{background:var(--card);border-radius:var(--r-xl);padding:.95rem .9rem .9rem;box-shadow:var(--shadow)}
.hs-white .ps-track{margin-inline:-.1rem}
.hs-white .ps-track>.pcard{background:linear-gradient(var(--card),var(--bg-store) 220%)}
.hs-white .ps-track>.pcard+.pcard{border-color:var(--bg-store)}

/* compact grid (2×2 on a phone, 4 across on a wide screen) */
.pgrid.compact{--cols:4}
.hs-grid .pgrid{background:var(--bg-store)}

/* vertical list */
.lrows{display:grid;grid-template-columns:1fr;gap:1px;background:var(--bg-store);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
.lrow{background:var(--card);min-width:0}
.lr{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"img title" "dots foot";gap:.35rem .95rem;align-items:center;padding:.85rem 1rem;color:var(--ink);text-decoration:none!important}
.lr:hover .lr-title{color:var(--primary)}
.lr-img{grid-area:img;width:76px;height:76px;display:grid;place-items:center;position:relative}
.lr-img img{width:100%;height:100%;object-fit:contain;display:block;padding:.2rem}
.lr-img .pc-noimg{width:60px;height:60px}
.lr-title{grid-area:title;font-size:.86rem;font-weight:600;line-height:1.75;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lr-dots{grid-area:dots;display:flex;justify-content:center;gap:5px;min-height:8px}
.lr-dots i{width:8px;height:8px;border-radius:50%;display:block}
.lr-dots i.light{box-shadow:inset 0 0 0 1px rgba(60,70,90,.28)}
.lr-foot{grid-area:foot;justify-self:end;display:flex;align-items:center;gap:.55rem}
.lr-foot .lr-weight{margin:0;padding-inline-end:.55rem;border-inline-end:1px solid var(--line)}
.lr-foot .pc-rate{padding-inline-end:.55rem;border-inline-end:1px solid var(--line);font-size:.78rem}
.lr-foot .pc-prices{flex-direction:column;align-items:flex-start}
.lrow.is-out .pc-inq{color:var(--ink)}

/* category tiles */
/* main category tiles: white rounded cards, picture on top, name under it (reference «دسته‌بندی‌های اصلی») */
.ctile-row{display:flex;gap:.65rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:.2rem .1rem .4rem}
.ctile{flex:0 0 calc((100% - 1.95rem) / 4.4);scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:.75rem .3rem .65rem;background:var(--card);border-radius:18px;color:var(--ink);text-decoration:none!important;box-shadow:0 2px 10px rgba(20,40,90,.06);transition:transform .18s,box-shadow .18s}
.ctile:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,40,90,.12)}
.ctile-img{position:relative;width:54px;height:54px;display:grid;place-items:center;color:var(--accent)}
.ctile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ctile-nm{max-width:100%;font-weight:600;font-size:.76rem;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-cats .hs-head{justify-content:center}
.hs-cats .ps-dots{display:none}
.hs-title.dash{justify-content:center;color:var(--ink);font-size:.9rem}
.hs-title.dash::before,.hs-title.dash::after{content:"";flex:none;width:12px;height:4px;border-radius:4px;background:var(--primary)}

/* slim strip banner */
.hs-strip{display:block;position:relative;margin-bottom:.55rem;color:inherit;text-decoration:none!important}
.hs-strip img{display:block;width:100%;aspect-ratio:5/1;object-fit:cover;border-radius:var(--r-lg);background:var(--field-2)}
.strip-badge{position:absolute;bottom:-.65rem;inset-inline-end:1.1rem;background:var(--accent);color:#fff;border-radius:12px;padding:0 .9rem;font-size:1.05rem;font-weight:800;line-height:1.9;box-shadow:0 6px 14px rgba(235,180,15,.4)}

/* part 10: slider blocks (kinds 1 and 4 = the cross-fade slider; 2 and 3 = a scrolling list of pictures) and rows of 2 / 4 slim banners */
.home{overflow-x:clip}
.hs-sl .hm-slider{aspect-ratio:3/1}
.hs-sl.k4{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.hs-sl.k4 .hm-slider{border-radius:0;aspect-ratio:16/6}
.sll-row{display:flex;gap:.7rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.2rem}
.sll-row::-webkit-scrollbar{display:none}
.sll-it{flex:0 0 calc((100% - .7rem) / 2);scroll-snap-align:start;display:block;min-width:0;color:inherit;text-decoration:none!important}
.sll-it picture{display:block}
.sll-it img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);background:var(--field-2)}
.hs-sll.k3 .sll-it img{aspect-ratio:1/1;border-radius:var(--r-xl)}
.sll-foot{display:flex;justify-content:center;margin-top:.5rem}
.hs-banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.hs-banners.n2{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.hb{display:block;position:relative;min-width:0;color:inherit;text-decoration:none!important}
.hb img{display:block;width:100%;aspect-ratio:5/2;object-fit:cover;border-radius:var(--r-lg);background:var(--field-2)}
.hs-banners.n4 .hb img{aspect-ratio:2/1}
.hb .strip-badge{bottom:.5rem;inset-inline-end:.6rem;padding:0 .6rem;font-size:.8rem;line-height:1.7}
@media (min-width:640px){
  .sll-it{flex-basis:calc((100% - 1.4rem) / 3)}
  .hs-banners.n4{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
}
@media (min-width:900px){
  .sll-it{flex-basis:calc((100% - 2.1rem) / 4)}
  .hs-sl.k4 .hm-slider{aspect-ratio:16/5}
}
@media (min-width:1280px){
  .sll-it{flex-basis:calc((100% - 3.5rem) / 6)}
  .hs-sl.k4 .hm-slider{aspect-ratio:16/4.5}
}

/* part 11: product list types 4 (framed slider box), 5 (one big box among small ones) and 6 (category tabs with a filter), brand cards, and the widgets:
   search bar, text box, filter box, info boxes 1 and 2, FAQ accordion. Every colour is a variable, so the dark theme and the style tab apply. */
.hs-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:.9rem .9rem .8rem;box-shadow:var(--shadow)}
.hs-box .hs-head{margin-bottom:.6rem}
.hs-box .ps-box{background:transparent;border-radius:0}
.hs-box .ps-track>.pcard+.pcard{border-color:var(--line)}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;grid-auto-flow:dense}
.mo-it{min-width:0;display:flex}
.mo-it>.pcard{flex:1 1 auto;min-width:0}
.mo-it.big{grid-column:span 2}
.pcard[hidden],.pt-panel[hidden]{display:none}
.pt-bar{display:flex;align-items:center;gap:.5rem .9rem;flex-wrap:wrap;margin-bottom:.8rem}
.pt-tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;flex:1 1 100%;padding-bottom:.15rem}
.pt-tabs::-webkit-scrollbar{display:none}
.pt-tab{flex:none;padding:.1rem .95rem;border-radius:99px;background:var(--bg-store);color:var(--ink-2)!important;font-size:.8rem;line-height:2;text-decoration:none!important;white-space:nowrap;transition:background .18s,color .18s}
.pt-tab:hover{color:var(--primary)!important}
.pt-tab.on{background:var(--primary);color:#fff!important;font-weight:800}
.pt-flt{display:flex;gap:.9rem;flex-wrap:wrap}
.pt-chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--muted-2);cursor:pointer}
.pt-chk input{accent-color:var(--primary)}
.pt-none{margin:1rem 0;text-align:center;color:var(--muted-2);font-size:.82rem}
.pt-all{display:inline-flex;align-items:center;gap:.25rem;margin-top:.8rem;font-size:.8rem;color:var(--primary)!important;text-decoration:none!important}
.pt-all .ico{width:13px;height:13px}
.hs-brands2{background:var(--card);border-radius:var(--r-xl);padding:.9rem .9rem .8rem;box-shadow:var(--shadow)}
.b2-row{display:flex;gap:.7rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.1rem .1rem .3rem}
.b2-row::-webkit-scrollbar{display:none}
.b2{flex:0 0 calc((100% - 1.4rem) / 3);scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.8rem .4rem .7rem;border-radius:var(--r-lg);background:var(--bg-store);color:var(--ink);text-decoration:none!important;transition:transform .18s}
.b2:hover{transform:translateY(-2px)}
.b2-logo{width:100%;height:56px;display:grid;place-items:center}
.b2-logo img{max-width:80%;max-height:100%;object-fit:contain;display:block}
.b2-logo i{width:48px;height:48px;border-radius:50%;background:var(--card);color:var(--primary);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.1rem}
.b2-nm{max-width:100%;font-size:.8rem;font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b2-n{color:var(--muted-2);font-size:.7rem}
.hq{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:.4rem .45rem .4rem .4rem;box-shadow:var(--shadow)}
.hq:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,104,71,.15)}
.hq-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;color:var(--muted-2)}
.hq input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;padding:.55rem .2rem;outline:0}
.hq button{flex:none;border:0;border-radius:var(--r-lg);background:var(--primary);color:#fff;font:inherit;font-weight:800;font-size:.85rem;padding:.6rem 1.3rem;cursor:pointer}
.hs-text,.hs-fbox,.hs-faq{background:var(--card);border-radius:var(--r-xl);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.hs-text.tone-grey,.hs-info.tone-grey{background:var(--tone-grey)}
.hs-text.tone-cream,.hs-info.tone-cream{background:var(--tone-cream)}
.hs-text.tone-blue,.hs-info.tone-blue{background:var(--tone-blue)}
.hs-text .hs-title{margin-bottom:.6rem}
.hs-text .prose>:first-child{margin-top:0}
.hs-text .prose>:last-child{margin-bottom:0}
.fb-grid{display:grid;grid-template-columns:1fr;gap:.9rem}
.fb-t{font-size:.86rem;font-weight:800;margin:0 0 .45rem}
.fb-o{display:flex;flex-wrap:wrap;gap:.4rem}
.fb-o a{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-store);color:var(--ink)!important;border-radius:99px;padding:.1rem .8rem;font-size:.78rem;line-height:2;text-decoration:none!important;transition:background .18s,color .18s}
.fb-o a small{color:var(--muted-2);font-size:.68rem}
.fb-o a:hover{background:var(--primary);color:#fff!important}
.fb-o a:hover small{color:rgba(255,255,255,.85)}
.hs-info{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.in-box{display:grid;grid-template-columns:1fr;gap:1rem;padding:1.1rem}
.in-title{margin:0 0 .4rem;font-size:1.05rem;font-weight:800;line-height:1.7}
.in-text{margin:0 0 .8rem;font-size:.84rem;line-height:2;color:var(--ink-2)}
.in-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.in-stats li{background:var(--bg-store);border-radius:var(--r-lg);padding:.7rem .5rem;text-align:center;display:flex;flex-direction:column;gap:.15rem}
.hs-info:not(.tone-white) .in-stats li{background:var(--card)}
.in-stats b{font-size:1.15rem;font-weight:800;color:var(--primary)}
.in-stats span{font-size:.72rem;color:var(--muted-2)}
.hs-info.k2{padding:1rem}
.in-box2{display:grid;grid-template-columns:1fr;gap:.9rem}
.in-prods{min-width:0}
.in-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hs-info.k2.tone-white .hs-btn{background:var(--bg-store)}
.fq-list{display:grid;gap:.5rem;padding-bottom:.4rem}
.fq{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.fq summary{cursor:pointer;list-style:none;padding:.7rem 1rem;font-size:.86rem;font-weight:600;line-height:1.9;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";flex:none;width:8px;height:8px;border-inline-end:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.fq[open]{border-color:var(--primary)}
.fq[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.fq-a{padding:0 1rem .85rem;font-size:.82rem;line-height:2;color:var(--ink-2)}
@media (min-width:640px){
  .b2{flex-basis:calc((100% - 2.1rem) / 4)}
  .mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .b2{flex-basis:calc((100% - 3.5rem) / 6)}
  .fb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .in-box{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;padding:1.3rem 1.5rem}
  .in-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .in-box2{grid-template-columns:minmax(0,.75fr) minmax(0,2.25fr);align-items:center}
}
@media (prefers-reduced-motion:reduce){.b2,.pt-tab,.fb-o a,.fq summary::after{transition:none}}

/* brands */
.hs-brands{padding-top:.3rem}
.br-row{display:flex;gap:.8rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.2rem .15rem .6rem}
.br{flex:0 0 calc((100% - 2.4rem) / 4);aspect-ratio:1;scroll-snap-align:start;position:relative;border-radius:50%;background:var(--card);box-shadow:0 4px 14px rgba(20,40,90,.07);display:grid;place-items:center;padding:14%;color:var(--ink-2);text-decoration:none!important;transition:transform .18s}
.br:hover{transform:translateY(-2px)}
.br img{position:absolute;inset:18%;width:64%;height:64%;object-fit:contain;display:block}
.br span{font-size:.72rem;font-weight:700;text-align:center;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* articles */
.ar-row{display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.ar{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.ar-cover{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-xl);overflow:hidden;background:var(--field-2)}
.ar-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ar-noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--muted)}
.ar-cat{position:absolute;top:.8rem;inset-inline-end:.8rem;background:rgba(255,255,255,.95);color:var(--ink);border-radius:12px;padding:0 .8rem;font-size:.76rem;font-weight:500;line-height:2}
.ar-body{position:relative;margin:-2.4rem .8rem 0;background:var(--card);border-radius:var(--r-lg);padding:.75rem 1rem .7rem;box-shadow:0 6px 18px rgba(20,40,90,.1)}
.ar-body h3{font-size:.86rem;font-weight:600;line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ar-body h3 a{color:var(--ink)!important;text-decoration:none!important}
.ar-body h3 a:hover{color:var(--primary)!important}
.ar-meta{display:flex;align-items:center;justify-content:flex-start;gap:.6rem;margin:.25rem 0 0;font-size:.72rem;color:var(--muted-2)}
.ar-date{display:inline-flex;align-items:center;gap:.55rem}
.ar-by + .ar-date::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--primary)}
.ar-by{display:inline-flex;align-items:center;gap:.4rem;color:var(--primary);font-weight:500}
.ar-by img,.ar-by i{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--field-2);display:grid;place-items:center;color:var(--muted);font-style:normal}

@media (min-width:640px){
  .ps-track>.pcard{flex-basis:33.3334%} .ps-track.solo>.pcard{flex-basis:calc(33.3334% - .55rem)}
  .ctile{flex-basis:calc((100% - 3.25rem) / 6.4)} .br{flex-basis:calc((100% - 4rem) / 6)}
  .ar{flex-basis:calc((100% - 1rem) / 2)}
  .lrows{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .lrows{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lr{grid-template-columns:60px minmax(0,1fr);gap:.35rem .65rem;padding:.8rem .75rem}
  .lr-img{width:60px;height:60px}
  .lr-title{font-size:.8rem}
  .lr-foot{gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
  .ps-track>.pcard{flex-basis:25%} .ps-track.solo>.pcard{flex-basis:calc(25% - .6rem)}
  .ctile{flex-basis:calc((100% - 5.85rem) / 10)} .ctile-img{width:60px;height:60px} .br{flex-basis:calc((100% - 5.6rem) / 8)}
  .hs-strip img{aspect-ratio:8/1}
  .hs-tint{padding:1.1rem 1.1rem 1.05rem} .hs-white{padding:1.1rem 1.2rem 1.1rem}
}
@media (min-width:1100px){
  .ps-track>.pcard{flex-basis:20%} .ps-track.solo>.pcard{flex-basis:calc(20% - .65rem)}
  .ar{flex-basis:calc((100% - 2rem) / 3)}
}
@media (max-width:640px){
  .pgrid.compact{--cols:2}
  .hs-title{font-size:.94rem}
}
@media (prefers-reduced-motion:reduce){.ct,.br,.ps-dots b{transition:none}}

/* ==========================================================================
   Step 7-5 — product list and search. Measured against the reference list page at 1280px:
   filter column 292px at the start, 22px gap, hairline 4-column grid, black active sort pill, grey toggles,
   dark two-handle price slider. On a phone the column is a drawer opened from the «فیلترها» button.
   ========================================================================== */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lst-top{display:flex;align-items:center;gap:1.6rem;margin:.2rem 0 1rem}
.lst-top .crumbs{margin:0;flex:none;min-width:292px}
.sort-bar{display:flex;align-items:center;gap:.1rem;min-width:0;font-size:.78rem}
.sort-lbl{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--ink);margin-inline-end:.5rem;white-space:nowrap}
.sort{padding:.3rem .62rem;border-radius:12px;color:var(--ink);font-weight:400;text-decoration:none!important;white-space:nowrap}
.sort:hover{color:var(--primary)}
.sort.on{background:#1c1c25;color:#fff;font-weight:800;padding-inline:.85rem}
[data-theme="dark"] .sort.on{background:var(--primary);color:#fff}
.flt-btn{display:none}

.lst{display:grid;grid-template-columns:292px minmax(0,1fr);gap:22px;align-items:start}
.lst-main{min-width:0}
.lst-grid{background:var(--bg-store);border-radius:var(--r-xl)}
.lst-pager{display:flex;justify-content:flex-end}
.lst-note{margin:.8rem 0 0;color:var(--muted-2);font-size:.78rem}
.lst-empty{background:var(--card);border-radius:var(--r-xl);padding:2.8rem 1.4rem;text-align:center;box-shadow:var(--shadow)}
.lst-empty .soon-ico{width:64px;height:64px;border-radius:20px;background:var(--primary-100);color:var(--primary);display:grid;place-items:center;margin:0 auto 1rem}
.lst-empty h2{font-size:1.05rem;margin-bottom:.4rem} .lst-empty p{color:var(--ink-2);margin:0 0 1.1rem}

.lst-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.flt-head,.flt-apply,.flt-shade{display:none}
.flt{display:flex;flex-direction:column;gap:14px}
.fcard{background:var(--card);border-radius:var(--r-xl);padding:1rem 1.1rem}
.fcard h3,.fprice h3{font-size:.88rem;font-weight:800;margin-bottom:.7rem}
.fship{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.9rem 1rem .9rem 1.1rem}
.fship b{display:block;font-size:.85rem;line-height:1.5} .fship small{display:block;color:var(--ink-2);font-size:.72rem;line-height:1.5}
.fship-ico{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);flex:none}
.fsearch-box{display:flex;align-items:center;background:var(--field);border-radius:14px;padding:0 .4rem 0 .9rem;border:1px solid var(--line)}
.fsearch-box input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.8rem;color:var(--ink);padding:.7rem .2rem}
.fsearch-box input:focus{outline:0}
.fsearch-box input::placeholder{color:var(--muted-2)}
.fsearch-box button{border:0;background:transparent;color:var(--ink);width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.fsearch-box button .ico{stroke-width:2.3}
.flt-reset{display:inline-block;margin-top:.6rem;font-size:.76rem;font-weight:700;color:var(--primary)}

.fgroup{display:flex;flex-direction:column;gap:4px;border-radius:var(--r-xl);overflow:hidden}
.facc,.fprice,.ftog{background:var(--card)}
.facc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.1rem;font-weight:800;font-size:.8rem}
.facc>summary::-webkit-details-marker{display:none}
.facc>summary::after{content:"";width:5px;height:5px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);margin-top:-3px;flex:none;transition:transform .15s}
.facc[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.fopts{padding:.2rem 1.1rem .9rem;display:flex;flex-direction:column;gap:.15rem;max-height:260px;overflow-y:auto}
.fopt{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;cursor:pointer;font-size:.82rem}
.fopt input{position:absolute;opacity:0;pointer-events:none}
.fopt .cb{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--muted);flex:none;display:grid;place-items:center;background:var(--card)}
.fopt input:checked+.cb{background:var(--primary);border-color:var(--primary)}
.fopt input:checked+.cb::after{content:"";width:8px;height:4px;border-inline-start:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.fopt input:focus-visible+.cb{outline:2px solid var(--primary);outline-offset:2px}
.fopt span{flex:1;min-width:0;display:flex;align-items:center;gap:.4rem;font-weight:600}
.fopt em,.fcat em{font-style:normal;color:var(--muted-2);font-size:.72rem}
.cdot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.cdot.light{box-shadow:inset 0 0 0 1px rgba(60,70,90,.28)}
.fcat{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;color:var(--ink);font-weight:600;font-size:.82rem;text-decoration:none!important}
.fcat:hover span{color:var(--primary)}
.fwt{flex-direction:row;gap:.6rem}
.fwt label{flex:1;display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ink-2)}
.fwt input,.pr-boxes input{width:100%;min-width:0;border:0;background:var(--field);border-radius:12px;padding:.62rem .5rem;font:inherit;font-size:.78rem;text-align:center;color:var(--ink)}
.pr-boxes label:last-of-type input{background:#f3f3f5}
[data-theme="dark"] .pr-boxes label:last-of-type input{background:var(--field-2)}

.fprice{padding:.9rem 1.1rem 1.1rem}
.rng{position:relative;height:28px;margin:1.7rem .55rem 1.5rem}
.rng-line{position:absolute;inset-inline:0;top:12.5px;height:3px;border-radius:3px;background:var(--field-2)}
.rng-fill{position:absolute;top:0;bottom:0;border-radius:4px;background:#1c1c25;inset-inline-start:0;width:100%}
[data-theme="dark"] .rng-fill{background:var(--primary)}
.rng input[type=range]{position:absolute;inset:0;width:100%;height:28px;margin:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}
.rng input[type=range]::-webkit-slider-runnable-track{background:transparent;height:28px}
.rng input[type=range]::-moz-range-track{background:transparent;height:28px}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:6px;border-radius:50%;background:#1c1c25;border:0;box-shadow:none;cursor:grab}
.rng input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#1c1c25;border:0;box-shadow:none;cursor:grab}
[data-theme="dark"] .rng input[type=range]::-webkit-slider-thumb{background:var(--primary)}
.pr-boxes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:.6rem}
.pr-boxes input.ltr,.fwt input.ltr{font-family:var(--font)}
.pr-boxes label{flex:1;display:flex;flex-direction:column;align-items:center;gap:.95rem;min-width:0}
.pr-boxes label span{font-size:.75rem;font-weight:700;color:var(--muted-2)}
.pr-boxes b{font-size:.78rem;font-weight:500;color:var(--muted-2);padding-top:.6rem}

.ftog{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 1.1rem;font-weight:800;font-size:.8rem;cursor:pointer}
.ftog input{position:absolute;opacity:0;pointer-events:none}
.sw{width:30px;height:16px;border-radius:99px;background:#e9ebef;position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:10px;height:10px;border-radius:50%;background:#8b8f99;transition:inset-inline-start .15s,background .15s}
.ftog input:checked+.sw{background:var(--primary-100)}
.ftog input:checked+.sw::after{inset-inline-start:17px;background:var(--primary)}
.ftog input:focus-visible+.sw{outline:2px solid var(--primary);outline-offset:2px}

/* typing suggestions under the header search */
.sf-search{position:relative}
.sf-suggest{position:absolute;top:calc(100% + .4rem);inset-inline:0;z-index:35;background:var(--card);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(20,40,90,.16);padding:.4rem;list-style:none;margin:0}
.sf-suggest[hidden]{display:none}
.sf-suggest a{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border-radius:10px;color:var(--ink);font-size:.82rem;font-weight:600;text-decoration:none!important}
.sf-suggest a:hover,.sf-suggest a.on{background:var(--primary-50);color:var(--primary)}
.sf-suggest small{margin-inline-start:auto;color:var(--muted-2);font-size:.68rem;font-weight:500}

@media (max-width:1100px){.lst{grid-template-columns:260px minmax(0,1fr)}.lst-top .crumbs{min-width:260px}}
@media (max-width:900px){
  .lst-top{flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}
  .lst-top .crumbs{min-width:0;flex:1 1 auto}
  .flt-btn{display:inline-flex;align-items:center;gap:.4rem;position:relative;background:var(--card);border:0;border-radius:12px;box-shadow:var(--shadow);padding:.4rem .9rem;font:inherit;font-size:.8rem;font-weight:800;color:var(--ink);cursor:pointer}
  .flt-dot{position:absolute;top:4px;inset-inline-end:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .sort-bar{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
  .sort-bar::-webkit-scrollbar{display:none}
  .lst{display:block}
  .lst-side{position:fixed;inset-block:0;inset-inline-start:0;width:340px;max-width:92vw;z-index:70;background:var(--bg-store);overflow-y:auto;padding:0 0 5.5rem;gap:10px;transform:translateX(105%);visibility:hidden;transition:transform .22s,visibility .22s;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.flt-open .lst-side{transform:none;visibility:visible}
  body.flt-open{overflow:hidden}
  .flt-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:var(--card);position:sticky;top:0;z-index:2}
  .lst-side>.fship,.lst-side .flt{margin-inline:.8rem}
  .flt-shade{display:block;position:fixed;inset:0;background:rgba(10,15,30,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
  body.flt-open .flt-shade{opacity:1;pointer-events:auto}
  body.flt-open .flt-apply{display:block;position:fixed;inset-inline-start:0;bottom:0;width:340px;max-width:92vw;z-index:71;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));background:var(--card);box-shadow:0 -4px 24px rgba(20,40,90,.12)}
  .flt-apply .btn{width:100%}
  .lst-pager{justify-content:center}
}
@media (min-width:901px){html.js .flt-apply{display:none}}

/* ===== 50-step roadmap, step 1: product page — top-right column (sale bar, action icons, gallery) ===== */
.pp{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:1.1rem}
.pp-grid{display:grid;grid-template-columns:385px minmax(0,1fr) 290px;gap:1.4rem;align-items:start}
.pp-col{min-width:0}
.pp-sale{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:46px;padding:.4rem .85rem;border-radius:14px;background:color-mix(in srgb,var(--primary) 20%,var(--card));color:var(--primary)}
.pp-sale[hidden]{display:none}
.pp-sale-t{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.pp-sale .pc-timer{margin:0;align-self:center;font-size:.8rem;gap:.3rem}
.pp-sale .pc-timer b{background:var(--card);color:var(--ink);border-radius:9px;padding:.12rem .45rem;min-width:1.9rem;font-size:.82rem;line-height:1.6;box-shadow:0 1px 0 rgba(10,104,71,.08)}
.pp-sale .pc-timer i{color:var(--primary)}
.pp-tools{position:relative;display:flex;align-items:stretch;width:max-content;max-width:100%;margin:.8rem auto .5rem;border-radius:12px;background:var(--row-alt);overflow:hidden}
.pp-tool{display:inline-grid;place-items:center;width:36px;height:34px;border:0;border-inline-start:1px solid var(--card);border-radius:0;background:transparent;color:var(--muted-2);cursor:pointer;transition:background .15s,color .15s}
.pp-tool:first-of-type{border-inline-start:0}
.pp-tool:hover,.pp-tool:focus-visible{background:var(--field-2);color:var(--primary);outline:0}
.pp-tool[aria-pressed="true"]{color:var(--danger)}
.pp-tool[aria-pressed="true"] .ico{fill:currentColor}
.pp-toast{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:5;white-space:nowrap;background:var(--ink);color:var(--card);font-size:.74rem;font-weight:600;padding:.35rem .8rem;border-radius:10px;box-shadow:0 8px 24px rgba(20,40,90,.22)}
.pp-toast[hidden]{display:none}
.pp-tools{overflow:visible}
.pp-tool:first-of-type{border-start-start-radius:12px;border-end-start-radius:12px}
.pp-tool:last-of-type{border-start-end-radius:12px;border-end-end-radius:12px}
.pp-gal{display:flex;flex-direction:column;gap:.7rem}
.pp-stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-height:380px;margin-inline:auto;width:100%}
.pp-main{display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:zoom-in}
.pp-main img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px}
.pp-noimg{display:grid;place-items:center;gap:.5rem;color:var(--muted);text-align:center}
.pp-noimg small{font-size:.76rem;color:var(--muted-2)}
.pp-nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);box-shadow:var(--shadow);cursor:pointer}
.pp-nav.next{inset-inline-end:auto;left:4px}
.pp-nav.prev{inset-inline-start:auto;right:4px}
.pp-nav.prev .ico{transform:scaleX(-1)}
.pp-nav:hover{color:var(--primary)}
.pp-thumbs{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.pp-thumbs li{position:relative}
.pp-th{display:grid;place-items:center;width:56px;height:56px;padding:3px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;overflow:hidden}
.pp-th-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;border:0;border-radius:14px;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.pp-th-more i{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(28,28,37,.35)}
.pp-th-more:hover{background:rgba(255,255,255,.35)}
.pp-th.on+.pp-th-more,.pp-th-more{outline:0}
.pp-th img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.pp-th.on{border-color:var(--primary)}
.pp-th:focus-visible{outline:2px solid var(--primary-glow);outline-offset:2px}
.pp-info{border-inline-start:1px dashed var(--line);padding-inline-start:1.4rem;min-height:100%}
.pp-title{font-size:1.05rem;font-weight:800;line-height:1.9;margin:0}
.pp-title-en{margin:.1rem 0 0;color:var(--muted-2);font-size:.78rem;text-align:right}
.pp-lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(8,12,24,.86);padding:3.5rem 1rem 1.5rem}
.pp-lb[hidden]{display:none}
.pp-lb img{max-width:min(92vw,980px);max-height:84vh;object-fit:contain;border-radius:14px;background:#fff}
.pp-lb-x{position:absolute;top:.9rem;inset-inline-start:1rem;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.pp-lb .pp-nav{width:42px;height:42px}
body.pp-lb-open{overflow:hidden}
@media (max-width:1100px){.pp-grid{grid-template-columns:340px minmax(0,1fr)}.pp-buy{grid-column:1/-1}}
@media (max-width:760px){
  .pp{padding:.8rem;border-radius:var(--r-lg)}
  .pp-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .pp-stage{max-height:320px}
  .pp-th{width:48px;height:48px}
  .pp-info{border-inline-start:0;padding-inline-start:0}
}

/* ===== 50-step roadmap, step 2: product page — middle column (brand, title, rating, colour, size, certificates, highlights, seal, notes) ===== */
.pp-brand{display:inline-block;margin:0 0 .15rem;color:var(--ink-2);font-size:.82rem;font-weight:600;text-decoration:none}
.pp-brand:hover{color:var(--primary)}
.pp-title-en{padding-bottom:.65rem;margin:.15rem 0 .8rem;border-bottom:1px solid var(--line)}
.pp-rec{display:flex;align-items:center;gap:.35rem;margin:0 0 .45rem;color:var(--ink-2);font-size:.76rem;line-height:1.8}
.pp-rec>.ico{color:var(--muted-2);flex:none}
.pp-rec-i{display:inline-grid;place-items:center;color:var(--muted-2);cursor:help}
.pp-rate{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem;font-size:.78rem;line-height:1.8}
.pp-rate a{color:var(--primary);font-weight:700;text-decoration:none}
.pp-rate a:hover{text-decoration:underline}
.pp-rate-s{display:inline-flex;align-items:center;gap:.25rem}
.pp-rate-s .ico{fill:var(--warn);stroke:var(--warn)}
.pp-rate-s b{font-weight:800}
.pp-rate-s small{color:var(--muted-2);font-size:.74rem}
.pp-rate-none{color:var(--muted-2)}
.pp-dot{width:4px;height:4px;border-radius:50%;background:var(--muted);display:inline-block;flex:none}
.pp-opt{margin:0 0 1rem}
.pp-opt-t{margin:0 0 .5rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.pp-opt-t b{font-weight:800}
.pp-sw{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--warn);color:#fff}
.pp-sw .ico{stroke-width:2.6;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.pp-sw.light{color:var(--ink-2)}
.pp-sw.light .ico{filter:none}
.pp-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.pp-chip{position:relative;display:inline-flex;cursor:pointer;font-size:.8rem}
.pp-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:inherit}
.pp-chip>span{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .9rem;border:1.5px solid transparent;border-radius:12px;background:var(--row-alt);color:var(--ink);transition:border-color .15s,background .15s,color .15s}
.pp-chip>span b{font-weight:700}
.pp-chip>span small{color:var(--muted-2);font-size:.72rem;font-weight:500}
.pp-chip>span .ico{flex:none}
.pp-chip:hover>span{border-color:var(--primary-glow)}
.pp-sizes .pp-chip>span{min-width:52px;justify-content:center}
.pp-sizes .pp-chip>span .ico{display:none}
.pp-chip input:checked+span{border-color:var(--primary);background:var(--primary-50);color:var(--primary)}
.pp-chip input:checked+span .ico{display:inline-block}
.pp-chip input:focus-visible+span{outline:2px solid var(--primary-glow);outline-offset:2px}
.pp-chip.off{cursor:not-allowed}
.pp-chip.off>span{opacity:.5;text-decoration:line-through;background:var(--field)}
.pp-chip.off:hover>span{border-color:transparent}
.pp-cert{cursor:default;text-decoration:none}
a.pp-cert{cursor:pointer}
.pp-cert>span{color:var(--ink-2)}
.pp-cert>span .ico{color:var(--success)}
.pp-hint{margin:.5rem 0 0;font-size:.76rem;color:var(--muted-2)}
.pp-hint.bad{color:var(--danger)}
.pp-hl{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.pp-hl li{display:flex;flex-direction:column;gap:.15rem;min-width:84px;padding:.55rem .8rem;border-radius:12px;background:var(--row-alt)}
.pp-hl small{color:var(--muted-2);font-size:.7rem}
.pp-hl b{font-size:.8rem;font-weight:700;color:var(--ink)}
.pp-seal{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 .7rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:12px;font-size:.8rem;color:var(--ink)}
.pp-seal>.ico{flex:none;color:var(--success)}
.pp-seal-d{display:inline-flex;align-items:center;gap:.3rem;margin-inline-start:auto;padding:.2rem .6rem;border-radius:9px;background:var(--row-alt);color:var(--muted-2);font-size:.74rem;direction:ltr;unicode-bidi:isolate}
.pp-seal.off{background:var(--warn-50);border-color:transparent;color:#9a6400}
.pp-seal.off>.ico{color:#b57300}
.pp-note{display:flex;align-items:flex-start;gap:.55rem;margin:0 0 .7rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:12px;font-size:.76rem;line-height:1.95;color:var(--ink-2)}
.pp-note>.ico{flex:none;margin-top:.3rem;color:var(--muted-2)}
.pp-note.warn{background:var(--warn-50);border-color:transparent;color:#9a6400}
.pp-note.warn>.ico{color:#b57300}
@media (max-width:760px){
  .pp-chip>span{min-height:42px}
  .pp-hl li{flex:1 1 calc(50% - .6rem)}
}

/* ===== 50-step roadmap, step 3: product page — purchase box (seller card, views, price, quantity, add to cart, club points, price breakdown) ===== */
.pp-buy{display:flex;flex-direction:column;gap:.9rem;border-inline-start:1px dashed var(--line);padding-inline-start:1.1rem}
.pp-seller{padding:1rem 1.05rem .9rem;border-radius:22px;background:var(--row-alt)}
.pp-seller-t{margin:0 0 .75rem;font-size:.95rem;font-weight:800}
.pp-sl-id{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-bottom:.8rem;border-bottom:1px dashed var(--line)}
.pp-sl-logo{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--card);color:var(--primary);overflow:hidden}
.pp-sl-logo img{width:100%;height:100%;object-fit:cover}
.pp-sl-name{display:inline-flex;align-items:center;gap:.3rem;min-width:0;font-size:.88rem}
.pp-sl-name b{font-weight:800;overflow-wrap:anywhere}
.pp-sl-ok{display:inline-grid;color:var(--sky)}
.pp-sl-ok .ico{fill:currentColor;stroke:var(--row-alt)}
.pp-sl-kind{color:var(--muted-2);font-size:.78rem}
.pp-sl-list{list-style:none;margin:0;padding:0}
.pp-sl-list li{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:.45rem;padding:.7rem 0;border-bottom:1px dashed var(--line);font-size:.8rem}
.pp-sl-list .k{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink)}
.pp-sl-list .k .ico{color:var(--ink);flex:none}
.pp-sl-list .v{color:var(--muted-2);font-size:.76rem}
.pp-sl-list .v.good{color:var(--success);font-weight:800;font-size:.82rem}
.pp-sl-list .v.mid{color:#b57300;font-weight:800;font-size:.82rem}
.pp-sl-list .v.bad{color:var(--danger);font-weight:800;font-size:.82rem}
.pp-sl-list .v.ltr{font-weight:700;color:var(--muted-2);letter-spacing:.02em}
.pp-sl-tags{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem;margin:.8rem 0 0}
.pp-sl-tags span{padding:.1rem .75rem;border-radius:10px;background:var(--success-50);color:var(--success);font-size:.72rem;font-weight:700}
.pp-views{display:flex;align-items:center;gap:.4rem;margin:0 0 .9rem;color:var(--ink-2);font-size:.78rem}
.pp-views .ico{color:var(--muted-2);flex:none}
.pp-views b{font-weight:800;color:var(--ink)}
.pp-pay{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.pp-qty{display:inline-flex;align-items:center;gap:.15rem;padding:.4rem;border-radius:16px;background:var(--row-alt)}
.pp-qty[hidden]{display:none}
.pp-q{display:inline-grid;place-items:center;width:30px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted-2);cursor:pointer}
.pp-q:hover:not(:disabled){color:var(--primary)}
.pp-q:disabled{opacity:.35;cursor:not-allowed}
.pp-qty input{width:52px;height:40px;padding:0;border:0;border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:700;text-align:center;direction:ltr;-moz-appearance:textfield;appearance:textfield}
.pp-qty input::-webkit-outer-spin-button,.pp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-qty input:focus{outline:2px solid var(--primary-glow);outline-offset:1px}
.pp-price{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0;margin-inline-start:auto}
.pp-off-row{display:inline-flex;align-items:center;gap:.5rem;flex-direction:row-reverse}
.pp-off-row[hidden],.pp-now[hidden],.pp-inq[hidden],.pp-sum[hidden],.pp-club[hidden],.pp-buy-note[hidden],.pp-bd-empty[hidden]{display:none}
.pp-off-row .pc-off{margin:0;font-size:.78rem;padding:0 .55rem}
.pp-old{color:var(--accent);font-size:.82rem;font-weight:600;text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.9}
.pp-now{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.pp-now b{font-size:1.5rem;font-weight:900;letter-spacing:-.01em;line-height:1.5}
.pp-now .pc-cur{font-size:.56rem;margin:0}
.pp-inq{font-size:1rem;font-weight:800;color:var(--ink-2)}
.pp-sum{margin:.5rem 0 0;font-size:.76rem;color:var(--muted-2)}
.pp-sum b{color:var(--ink);font-weight:800}
.pp-add{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:50px;margin-top:.8rem;padding:.6rem 1rem;border:0;border-radius:16px;background:var(--primary);color:#fff;font:inherit;font-size:.92rem;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(10,104,71,.28);transition:background .15s,transform .1s}
.pp-add:hover:not(:disabled){background:var(--primary-600)}
.pp-add:active:not(:disabled){transform:translateY(1px)}
.pp-add:disabled{background:var(--field-2);color:var(--muted-2);box-shadow:none;cursor:not-allowed}
.pp-add:focus-visible{outline:2px solid var(--primary-glow);outline-offset:2px}
.pp-buy-note{margin:.6rem 0 0;padding:.5rem .8rem;border-radius:12px;background:var(--primary-50);color:var(--primary);font-size:.76rem;line-height:1.9}
.pp-club{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.9rem 0 0;padding-top:.8rem;font-size:.78rem}
.pp-club .k{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.pp-club-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-50)}
.pp-club .v b{font-weight:800}
.pp-bd{padding:.9rem 1rem;border:1px solid var(--line);border-radius:18px}
.pp-bd-t{margin:0 0 .5rem;font-size:.88rem;font-weight:800}
.pp-bd-table{width:100%;border-collapse:collapse;font-size:.78rem}
.pp-bd-table th,.pp-bd-table td{padding:.42rem 0;border-bottom:1px dashed var(--line);font-weight:500;vertical-align:top}
.pp-bd-table th{text-align:start;color:var(--ink-2)}
.pp-bd-table td{text-align:end;color:var(--ink);font-weight:700;white-space:nowrap}
.pp-bd-table tr.meta th,.pp-bd-table tr.meta td{color:var(--muted-2);font-weight:500}
.pp-bd-table tr.off th,.pp-bd-table tr.off td{color:var(--accent);font-weight:700}
.pp-bd-table tr.sum td{font-weight:800}
.pp-bd-table tr.total th,.pp-bd-table tr.total td{border-bottom:0;padding-top:.65rem;font-size:.86rem;font-weight:800;color:var(--ink)}
.pp-bd-table tr.total td{color:var(--primary)}
.pp-bd-empty{margin:0;color:var(--muted-2);font-size:.76rem}
.pp-bd-note{display:flex;align-items:flex-start;gap:.4rem;margin:.6rem 0 0;color:var(--muted-2);font-size:.72rem;line-height:1.9}
.pp-bd-note .ico{flex:none;margin-top:.35rem}
@media (max-width:1100px){
  .pp-buy{border-inline-start:0;padding-inline-start:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
  .pp-seller{grid-column:1}
  .pp-buyform{grid-column:2;grid-row:1/span 2}
  .pp-bd{grid-column:1}
}
@media (max-width:760px){
  .pp-buy{display:flex}
  .pp-now b{font-size:1.35rem}
}

/* ===== 50-step roadmap, step 4: product page — lower half (related slider, tabs and sections, stones, sticky summary) ===== */
.pp-rel{margin-top:1.1rem}
.pp-low{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.1rem;align-items:start;margin-top:1.1rem}
.pp-lowmain{min-width:0;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:0 1.4rem 1.2rem}
.pp-tabs{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:3;margin:0 -1.4rem;padding:.95rem 1.4rem 0;background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:1px dashed var(--line)}
.pp-tabs::-webkit-scrollbar{display:none}
.pp-tabs a{flex:none;padding:0 .1rem .75rem;border-bottom:2px solid transparent;color:var(--ink-2);font-size:.9rem;font-weight:600;text-decoration:none!important;white-space:nowrap}
.pp-tabs a:hover{color:var(--primary)}
.pp-tabs a.on{color:var(--ink);border-bottom-color:var(--primary);font-weight:800}
.pp-empty{margin:0;padding:1.4rem 0;color:var(--muted-2);font-size:.85rem}
.pp-sec{padding:1.4rem 0 1.2rem;border-bottom:1px dashed var(--line);scroll-margin-top:3.4rem}
.pp-sec:last-child{border-bottom:0;padding-bottom:.2rem}
.pp-sec-t{margin:0;font-size:1.1rem;font-weight:800}
.pp-sec-en{display:block;margin:.1rem 0 .9rem;color:var(--muted);font-size:.7rem;font-weight:600;text-align:end}
.pp-sec-t + .pp-clamp,.pp-sec-t + .pp-scroll{margin-top:.9rem}
.pp-clamp{position:relative}
.pp-clamp.fold:not(.open)::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4.2rem;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--card));pointer-events:none}
[data-theme="dark"] .pp-clamp.fold:not(.open)::after{background:linear-gradient(to bottom,rgba(23,27,37,0),var(--card))}
.pp-clamp.fold:not(.open){overflow:hidden}
.pp-more{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;padding:.2rem 0;border:0;background:transparent;color:var(--cyan);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.pp-more[hidden]{display:none}
.pp-more .ico{transform:rotate(-90deg);transition:transform .15s}
.pp-more.open .ico{transform:rotate(90deg)}
.pp-rich{color:var(--ink-2);font-size:.88rem;line-height:2.1;overflow-wrap:anywhere}
.pp-rich h2,.pp-rich h3,.pp-rich h4{margin:1rem 0 .4rem;color:var(--ink);font-size:.98rem}
.pp-rich p{margin:.45rem 0}
.pp-rich ul,.pp-rich ol{margin:.5rem 0;padding-inline-start:1.4rem}
.pp-rich img{max-width:100%;height:auto;border-radius:12px}
.pp-rich a{color:var(--primary);text-decoration:underline}
.pp-rich blockquote{margin:.8rem 0;padding:.4rem 1rem;border-inline-start:3px solid var(--primary-100);background:var(--row-alt);border-radius:8px}
.pp-rich table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.pp-rich th,.pp-rich td{padding:.4rem .6rem;border:1px solid var(--line)}
.pp-sp-g{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 .5rem;font-size:.9rem;font-weight:800}
.pp-sp-g small{color:var(--muted-2);font-size:.74rem;font-weight:600}
.pp-sp{width:100%;border-collapse:separate;border-spacing:0 1px;font-size:.84rem}
.pp-sp th,.pp-sp td{padding:.7rem 1rem;text-align:start;font-weight:500;vertical-align:top;overflow-wrap:anywhere}
.pp-sp th{width:34%;background:var(--row-alt);color:var(--muted-2);font-weight:700;border-start-start-radius:8px;border-end-start-radius:8px}
.pp-sp td{background:var(--field);color:var(--ink);border-start-end-radius:8px;border-end-end-radius:8px}
.pp-scroll{overflow-x:auto}
.pp-st{width:100%;min-width:420px;border-collapse:collapse;font-size:.82rem}
.pp-st th,.pp-st td{padding:.6rem .8rem;text-align:start;border-bottom:1px dashed var(--line)}
.pp-st th{color:var(--muted-2);font-weight:700;background:var(--row-alt);white-space:nowrap}
.pp-st td{color:var(--ink);font-weight:600}
.pp-certs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.pp-certs li>*{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:.82rem;text-decoration:none!important}
.pp-certs a:hover{border-color:var(--primary);color:var(--primary)}
.pp-certs .ico{color:var(--primary)}
.pp-certs b{font-weight:800}
.pp-certs small{color:var(--muted-2);font-weight:600}
.pp-sticky{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.9rem;padding:1rem 1.05rem 1.1rem;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.pp-mini{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border:1px dashed var(--line);border-radius:16px}
.pp-mini-i{display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:12px;background:var(--row-alt);color:var(--muted);overflow:hidden}
.pp-mini-i img{width:100%;height:100%;object-fit:contain}
.pp-mini-t{min-width:0;font-size:.82rem;font-weight:700;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-ms{padding:.75rem .9rem;border-radius:16px;background:var(--row-alt)}
.pp-ms-top{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.82rem}
.pp-ms-top b{font-weight:800}
.pp-ms-ship{display:flex;align-items:center;gap:.4rem;margin:.5rem 0 0;color:var(--ink-2);font-size:.76rem}
.pp-ms-ship .ico{color:var(--ink);flex:none}
.pp-ms-ship .soft{color:var(--muted-2)}
.pp-ms-ship .bad{color:var(--danger);font-weight:800}
.pp-qn{display:inline-grid;place-items:center;min-width:52px;height:40px;border-radius:12px;background:var(--card);color:var(--ink);font-weight:700}
.pp-sticky .pp-add{margin-top:0}
.pp-sticky .pp-buy-note{margin:0}
.pp-sticky .pp-club{margin:0;padding-top:0}
.pp-sticky .pp-qty[hidden],.pp-sticky .pp-club[hidden],.pp-sticky .pp-buy-note[hidden]{display:none}
@media (max-width:1100px){.pp-low{grid-template-columns:minmax(0,1fr) 260px}}
@media (max-width:900px){
  .pp-low{grid-template-columns:minmax(0,1fr)}
  .pp-sticky{display:none}
  .pp-lowmain{padding:0 1rem 1rem}
  .pp-tabs{margin:0 -1rem;padding:.8rem 1rem 0;gap:1.2rem}
}
@media (max-width:760px){.pp-rel{margin-top:.8rem}.pp-low{margin-top:.8rem}.pp-sec-t{font-size:1rem}.pp-sp th,.pp-sp td{padding:.6rem .75rem}}

/* ---------- 50-step roadmap, step 5: reviews and questions of the product page ---------- */
.fb-sec .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.fb-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:1.2rem}
.fb-side{display:flex;flex-direction:column;gap:.45rem;padding-top:.2rem}
.fb-avg{margin:0;display:flex;align-items:baseline;gap:.5rem;direction:rtl}
.fb-avg b{font-size:2.3rem;line-height:1.2;font-weight:900}
.fb-avg small{color:var(--muted-2);font-size:.85rem}
.fb-avg-s{margin:0;display:flex;align-items:center;gap:.5rem;color:var(--muted-2);font-size:.78rem}
.fb-avg-none{margin:0;color:var(--muted-2);font-size:.85rem}
.fb-ask{margin:.7rem 0 .1rem;font-size:.85rem;font-weight:600}
.fb-note{color:var(--muted-2);font-size:.75rem;line-height:1.7}
.fb-stars{--v:0;display:inline-block;font-size:1.05rem;line-height:1;letter-spacing:.06em;white-space:nowrap;
  background:linear-gradient(to left,var(--accent) calc(var(--v) * 20%),var(--field-2) 0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;direction:rtl}
.fb-stars::before{content:"★★★★★"}
.fb-stars.sm{font-size:.85rem}
.fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:none!important;
  border:1px solid var(--primary);color:var(--primary);background:transparent;border-radius:999px;padding:.5rem 1.4rem;line-height:1.5;text-align:center}
.fb-btn:hover{background:var(--primary-50)}
.fb-btn.solid{background:var(--primary);color:#fff}.fb-btn.solid:hover{background:var(--primary-600)}
.fb-btn.ghost{border-color:var(--line);color:var(--ink-2)}
.fb-btn.sm{padding:.3rem 1rem;font-size:.82rem}
.fb-btn[disabled]{opacity:.55;cursor:wait}
.fb-err{margin:1rem 0 0}
.fb-form{display:none;background:var(--row-alt);border-radius:var(--r-xl);padding:1.1rem 1.2rem;margin-bottom:1rem}
.fb-tg:checked ~ .fb-grid .fb-form{display:block}
.fb-form .field{margin-bottom:.8rem}
.fb-form textarea,.fb-form input:not([type=radio]){width:100%;font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:.55rem .8rem}
.fb-form textarea{resize:vertical;min-height:4.2rem}
.fb-two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fb-form fieldset{border:0;margin:0 0 .8rem;padding:0}
.fb-form legend{font-weight:700;font-size:.85rem;padding:0;margin-bottom:.35rem}
.fb-rate{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem}
.fb-rate legend{width:100%}
.fb-rate input{position:absolute;opacity:0;width:1px;height:1px}
.fb-rate label{cursor:pointer;color:var(--field-2);display:inline-flex;padding:.1rem}
.fb-rate label .ico{fill:currentColor;stroke:none}
.fb-rate input:checked + label,.fb-rate label:has(~ input:checked),.fb-rate label:hover,.fb-rate label:has(~ label:hover){color:var(--accent)}
.fb-rate input:focus-visible + label{outline:2px solid var(--primary);border-radius:6px}
.fb-rec-pick label{display:inline-flex;align-items:center;gap:.35rem;margin-inline-end:1.1rem;font-size:.85rem;cursor:pointer}
.fb-acts{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.fb-sort{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;font-size:.82rem;margin:0 0 .9rem}
.fb-sort b{display:inline-flex;align-items:center;gap:.3rem;font-weight:800}
.fb-sort a{color:var(--ink);text-decoration:none}
.fb-sort a.on{color:var(--cyan);font-weight:800}
.fb-sort a:hover{color:var(--primary)}
.fb-card{background:var(--row-alt);border-radius:var(--r-xl);padding:1rem 1.4rem 0;margin-bottom:.9rem}
.fb-ch{display:flex;align-items:center;gap:.6rem;padding-bottom:.65rem;border-bottom:1px dashed var(--line);margin-bottom:.8rem}
.fb-ch b{font-weight:800}
.fb-ch .grow{flex:1}
.fb-ch time,.fb-qm time{color:var(--muted-2);font-size:.75rem;font-weight:600}
.fb-chip{display:inline-block;background:#d8f1fc;color:#2a8fb6;border-radius:8px;padding:0 .5rem;font-size:.68rem;font-weight:700;line-height:1.7}
.fb-chip.buyer{background:var(--success-50);color:var(--success)}
[data-theme="dark"] .fb-chip{background:#12303d;color:#6cc9ee}
.fb-rec{margin:0 0 .5rem;display:flex;align-items:center;gap:.35rem;color:var(--success);font-size:.82rem;font-weight:700}
.fb-rec.no{color:var(--danger)}.fb-rec.no .ico{transform:scaleY(-1)}
.fb-ct{font-size:.92rem;margin:0 0 .25rem}
.fb-cb{margin:0 0 .7rem;font-size:.85rem;line-height:2;overflow-wrap:anywhere}
.fb-pc{list-style:none;margin:0 0 .8rem;padding:0;font-size:.85rem}
.fb-pc li{display:flex;gap:.55rem;align-items:baseline;line-height:2}
.fb-pc i{font-style:normal;font-weight:900;width:1em;text-align:center}
.fb-pc .pro i{color:var(--success)}.fb-pc .con i{color:var(--danger)}
.fb-reply{background:var(--card);border-radius:var(--r-lg);padding:.7rem 1rem;margin:.4rem 0 .9rem;font-size:.85rem}
.fb-reply p{margin:0;overflow-wrap:anywhere}
.fb-rh{display:flex;align-items:center;gap:.5rem;font-size:.75rem;margin-bottom:.15rem!important}
.fb-rh b{font-weight:600;color:var(--ink-2)}
.fb-cf{border-top:1px dashed var(--line);padding:.55rem 0}
.fb-vote{display:flex;align-items:center;gap:.6rem;color:var(--muted-2);font-size:.75rem;font-weight:600}
.fb-vq{margin-inline-end:.2rem}
.fb-v{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:.1rem .25rem;border-radius:8px}
.fb-v.down .ico{transform:scaleY(-1)}
.fb-v:hover{color:var(--ink)}
.fb-v[aria-pressed="true"].up{color:var(--success)}.fb-v[aria-pressed="true"].down{color:var(--danger)}
.fb-v[aria-pressed="true"] .ico{fill:currentColor}
.fb-v[disabled]{opacity:.5}
.fb-empty{background:var(--row-alt);border-radius:var(--r-xl);padding:1.4rem;text-align:center;color:var(--muted-2);margin:0}
.fb-pager{margin:.4rem 0 0}
.fb-q{padding-bottom:1rem}
.fb-qt{display:flex;gap:.5rem;align-items:flex-start;margin:0;font-size:.88rem;font-weight:600;line-height:2;overflow-wrap:anywhere}
.fb-qt .ico{color:var(--cyan);margin-top:.45rem}
.fb-qm{margin:0 0 .7rem;padding-inline-start:1.5rem;color:var(--muted-2);font-size:.75rem}
.fb-ans{background:var(--card);border-radius:var(--r-md);padding:.7rem 1rem;margin-bottom:.55rem}
.fb-al{margin:0;color:var(--muted-2);font-size:.75rem;font-weight:700}
.fb-at{margin:0 0 .5rem;font-size:.88rem;overflow-wrap:anywhere}
.fb-newans{margin-top:.2rem}
.fb-newans summary,.fb-newans-l{cursor:pointer;color:var(--cyan);font-size:.82rem;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:.2rem;text-decoration:none}
.fb-newans summary::-webkit-details-marker{display:none}
.fb-newans[open] summary .ico{transform:rotate(-90deg)}
.fb-newans form{margin-top:.6rem}
.fb-newans textarea{width:100%;font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:.5rem .8rem;margin-bottom:.5rem}
@media (max-width:900px){.fb-grid{grid-template-columns:1fr}.fb-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}.fb-ask{margin:0}}
@media (max-width:560px){.fb-two{grid-template-columns:1fr}.fb-card{padding-inline:1rem}.fb-vote{flex-wrap:wrap}}

/* admin lists of reviews and questions */
.fbk-pills{margin-bottom:.8rem}
.fbk-search{display:flex;gap:1rem;align-items:end;flex-wrap:wrap}
.fbk-search .field{flex:1;min-width:14rem}
.fbk-search input{border:1px solid var(--line);background:var(--card)}
.fbk-item{display:flex;flex-direction:column;gap:.5rem}
.fbk-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fbk-head .grow{flex:1}
.fbk-who{display:flex;flex-direction:column;line-height:1.5}.fbk-who small{color:var(--muted-2)}
.fbk-stars{color:var(--accent);letter-spacing:.05em}.fbk-stars i{font-style:normal;color:var(--field-2)}
.fbk-chip{border-radius:8px;padding:0 .55rem;font-size:.72rem;font-weight:700;background:var(--field-2);color:var(--ink-2)}
.fbk-chip.warn{background:var(--accent-50);color:#9a6400}.fbk-chip.ok{background:var(--success-50);color:#14805a}.fbk-chip.err{background:var(--danger-50);color:#c2323a}.fbk-chip.info{background:var(--primary-50);color:var(--primary)}
.fbk-prod{margin:0;font-size:.82rem}
.fbk-title{font-size:.95rem;margin:0}
.fbk-body{margin:0;line-height:2;overflow-wrap:anywhere;font-size:.9rem}
.fbk-points{margin:0;padding:0;list-style:none;font-size:.85rem}.fbk-points.ok b{color:var(--success)}.fbk-points.err b{color:var(--danger)}
.fbk-reply{display:grid;gap:.5rem;justify-items:start;background:var(--row-alt);border-radius:var(--r-lg);padding:.8rem 1rem}
.fbk-reply .field{width:100%}.fbk-reply textarea{width:100%;font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-md);padding:.5rem .8rem}
.fbk-answers{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fbk-answers li{background:var(--row-alt);border-radius:var(--r-lg);padding:.7rem 1rem;display:grid;gap:.4rem}
.fbk-acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.2rem}


/* ===== 50-step roadmap, step 7: product page on phones — bottom buy bar, safe areas, tap targets, motion ===== */
.pp-mbar{display:none}
/* the site's own bottom navigation is visible up to 900px: the buy bar sits right on top of it */
@media (max-width:900px){
  .pp-mbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;position:fixed;inset-inline:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:39;padding:.55rem .9rem;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(20,40,90,.10)}
  .pp-mbar-p{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0}
  .pp-mbar-now{white-space:nowrap}
  .pp-mbar-now b{font-size:1.15rem;font-weight:800}
  .pp-mbar-inq{font-weight:800;color:var(--muted-2)}
  .pp-mbar .pp-add.pp-mbar-add{width:auto;flex:1 1 auto;max-width:230px;min-height:46px;margin:0}
  body.store:has(.pp-mbar){padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:720px){
  .pp-tool,.pp-q,.pp-th{min-width:44px;min-height:44px}
  .pp-th{width:52px;height:52px}
  .pp-tabs a,.pp-tabs button{min-height:44px}
  .pp-sale{border-radius:16px}
}
/* the three columns never push the page sideways on a narrow phone (360px and below) */
@media (max-width:420px){
  .pp{padding:.6rem}
  .pp-title{font-size:1.02rem;line-height:1.9}
  .pp-sp{display:block;overflow-x:auto}
  .pp-lowmain{padding:0 .75rem .9rem}
}
@media (prefers-reduced-motion:reduce){.pp-mbar{transition:none}.pp-main img,.pp-th{transition:none}}


/* ===== 50-step roadmap, step 8: cart page (reference «سبد خرید», desktop 1280 and phone 412) ===== */
.ct{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.2rem;align-items:start;margin-top:1rem}
.ct-card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:1.1rem 1.3rem;min-width:0}
.ct-main{padding:0 1.3rem .4rem}
.ct-tab{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.95rem;font-weight:800;border-bottom:1px solid var(--line)}
.ct-tab span{display:inline-block;padding:1rem .2rem .7rem;border-bottom:2px solid var(--primary);margin-bottom:-1px}
.ct-tab .badge-count{background:var(--ink);min-width:20px;height:20px;border-radius:7px;font-size:.68rem}
.ct-list{list-style:none;margin:0;padding:0}
.ct-line{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.2rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.ct-line:last-child{border-bottom:0}
.ct-img{display:grid;place-items:center;width:150px;height:150px;border-radius:var(--r-lg);overflow:hidden;background:var(--row-alt)}
.ct-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
[data-theme="dark"] .ct-img img{mix-blend-mode:normal}
.ct-noimg{color:var(--muted)}
.ct-body{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.ct-title{margin:0;font-size:.98rem;font-weight:800;line-height:2;overflow-wrap:anywhere}
.ct-title a{color:var(--ink)} .ct-title a:hover{color:var(--primary);text-decoration:none}
.ct-meta{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.8rem;color:var(--ink-2)}
.ct-meta li{display:flex;align-items:center;gap:.4rem;min-width:0}
.ct-meta .ico{color:var(--muted-2);flex:none}
.ct-meta .ct-seller{color:var(--cyan);font-weight:700}
.ct-meta .ct-stock{color:var(--muted-2);flex-wrap:wrap;gap:.35rem}
.ct-dots{display:inline-flex;flex:none}
.ct-dots i{width:15px;height:15px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px var(--card)}
.ct-dots i+i{margin-inline-start:-5px}
.ct-dots i.light{box-shadow:0 0 0 1px var(--line)}
.ct-note{display:flex;align-items:flex-start;gap:.4rem;margin:.1rem 0 0;padding:.5rem .8rem;border-radius:var(--r-md);background:var(--danger-50);color:#c2323a;font-size:.8rem;line-height:1.9}
.ct-note.soft{background:var(--warn-50);color:#9a6400}
.ct-note .ico{flex:none;margin-top:.25rem}
.ct-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem 1.2rem;flex-wrap:wrap;margin-top:auto;padding-top:.4rem}
.ct-price{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;margin-inline-end:auto}
.ct-old{font-size:.74rem;color:var(--danger);text-decoration-color:var(--danger)}
.ct-now{display:inline-flex;align-items:flex-end;gap:.3rem;white-space:nowrap}
.ct-now b{font-size:1.28rem;font-weight:900;line-height:1.3}
.ct-qty{display:inline-flex;align-items:center;gap:.1rem;padding:.3rem;border:1px solid var(--line);border-radius:var(--r-lg);margin:0}
.ct-q{display:inline-grid;place-items:center;width:34px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.ct-q:hover:not(:disabled){color:var(--primary);background:var(--primary-50)}
.ct-q:disabled{opacity:.3;cursor:not-allowed}
.ct-n{min-width:38px;text-align:center;font-weight:800;font-size:.95rem}
.ct-rm{margin:0}
.ct-del{display:inline-flex;align-items:center;gap:.3rem;border:0;background:transparent;color:var(--muted-2);font:inherit;font-size:.8rem;cursor:pointer;padding:.5rem .3rem;min-height:40px}
.ct-del:hover{color:var(--danger)}
.ct-line.is-off .ct-img{opacity:.55;filter:grayscale(.6)}
.ct-line.is-off .ct-title{color:var(--muted-2)}
.ct-line.busy{opacity:.6;pointer-events:none}
.ct-side{display:grid;gap:1rem;position:sticky;top:1rem}
.ct-rows{margin:0;display:grid;gap:1rem}
.ct-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.ct-rows dt{color:var(--ink-2);font-size:.86rem}
.ct-rows dd{margin:0;display:inline-flex;align-items:flex-end;gap:.3rem;white-space:nowrap}
.ct-rows dd b{font-size:1.02rem;font-weight:800}
.ct-rows .off dt,.ct-rows .off dd{color:var(--danger)}
.ct-rows .total dt{color:var(--ink);font-weight:700}
.ct-rows .total dd b{font-size:1.15rem;font-weight:900}
.ct-ship-note{margin:1.1rem 0;font-size:.8rem;line-height:2;color:var(--ink-2)}
.ct-go{display:flex;width:100%;min-height:48px;border-radius:14px;font-weight:800;font-size:.92rem;box-shadow:0 8px 20px rgba(10,104,71,.25)}
.ct-go:hover{text-decoration:none}
.btn.is-disabled{background:var(--field-2);color:var(--muted-2);box-shadow:none;cursor:not-allowed;pointer-events:none}
.ct-block{margin:.7rem 0 0;font-size:.78rem;color:#c2323a;line-height:1.9}
.ct-club{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:1rem 0 0;font-size:.82rem}
.ct-club .k{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.ct-club .v{color:var(--ink-2)} .ct-club b{font-weight:800;color:var(--ink)}
.ct-free{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.2rem}
.ct-free-ico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;border:1px solid var(--line);color:var(--ink)}
.ct-free h2{margin:0;font-size:.9rem;font-weight:800}
.ct-free p{margin:.1rem 0 0;font-size:.78rem;color:var(--ink-2)}
.ct-meter{height:6px;border-radius:6px;background:var(--field-2);margin-top:.6rem;overflow:hidden}
.ct-meter i{display:block;height:100%;border-radius:6px;background:var(--success);transition:width .3s}
.ct-free p.ct-free-note{margin-top:.35rem;color:var(--muted-2)}
.ct-empty{grid-column:1/-1;display:grid;justify-items:center;gap:.5rem;text-align:center;padding:2.8rem 1rem}
.ct-empty-ico{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--primary-50);color:var(--primary)}
.ct-empty h1{margin:.4rem 0 0;font-size:1.1rem}
.ct-empty p{margin:0 0 .6rem;color:var(--ink-2);font-size:.86rem}
.ct-mbar{display:none}
@media (max-width:900px){
  .ct{grid-template-columns:minmax(0,1fr)}
  .ct-side{position:static}
  .ct-mbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;position:fixed;inset-inline:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:39;padding:.55rem .9rem;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(20,40,90,.10)}
  .ct-mbar-p{display:flex;align-items:flex-end;gap:.3rem;flex-wrap:wrap;min-width:0}
  .ct-mbar-p span{flex-basis:100%;font-size:.72rem;color:var(--muted-2);line-height:1.4}
  .ct-mbar-p b{font-size:1.1rem;font-weight:800;line-height:1.3}
  .ct-mbar .btn{flex:1 1 auto;max-width:230px;min-height:46px;justify-content:center}
  body.store:has(.ct-mbar){padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:720px){
  .ct-card{padding:1rem}
  .ct-main{padding:0 1rem .2rem}
  .ct-line{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:.7rem}
  .ct-img{width:min(240px,70%);height:auto;aspect-ratio:1/1}
  .ct-body{align-items:center;width:100%}
  .ct-meta{justify-items:center}
  .ct-meta li{justify-content:center}
  .ct-foot{flex-direction:column;align-items:center;width:100%;gap:.4rem}
  .ct-price{align-items:center;margin:0;order:3}
  .ct-qty{order:1} .ct-rm{order:2}
  .ct-q{min-width:44px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){.ct-meter i{transition:none}}
/* step 8: the answer of «افزودن به سبد» under the button */
.pp-buy-note.bad{background:var(--danger-50);color:#c2323a}
.pp-buy-note a{font-weight:800;text-decoration:underline;color:inherit}

/* ===== 50-step roadmap, step 9: price lock — the note in the cart and the checkout entry page ===== */
.ct-lock{display:flex;align-items:flex-start;gap:.4rem;margin:.2rem 0 .6rem;padding:.55rem .8rem;border-radius:var(--r-md);background:var(--primary-50);color:var(--ink-2);font-size:.78rem;line-height:1.9}
.ct-lock .ico{flex:none;margin-top:.3rem;color:var(--primary)}
.ct-lock b{color:var(--ink)}
.ck{display:grid;gap:1rem;margin-top:1rem}
.ck-lock{display:flex;align-items:center;gap:1rem;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:1rem 1.3rem;border-inline-start:4px solid var(--success)}
.ck-lock-ico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--primary-50);color:var(--primary)}
.ck-lock-txt{flex:1;min-width:0}
.ck-lock h1{margin:0;font-size:1rem;font-weight:800;line-height:1.9}
.ck-lock p{margin:.1rem 0 0;font-size:.8rem;color:var(--ink-2);line-height:1.9}
.ck-timer{flex:none;min-width:84px;text-align:center;font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums;direction:ltr;padding:.35rem .8rem;border-radius:var(--r-lg);background:var(--row-alt)}
.ck-expired{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;background:var(--danger-50);color:#c2323a;border-radius:var(--r-xl);padding:.9rem 1.3rem}
.ck-expired[hidden]{display:none}
.ck-expired p{margin:0;font-size:.85rem;font-weight:700}
.ck.is-expired .ck-lock{border-inline-start-color:var(--danger)}
.ck.is-expired .ck-timer{color:var(--danger)}
.ck-moved{margin:0}
.ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.2rem;align-items:start}
.ck-main{padding:0 1.3rem .4rem}
.ck-h{display:flex;align-items:center;gap:.5rem;margin:0;padding:1rem 0 .7rem;font-size:.95rem;font-weight:800;border-bottom:1px solid var(--line)}
.ck-h .badge-count{background:var(--ink);min-width:20px;height:20px;border-radius:7px;font-size:.68rem}
.ck-list{list-style:none;margin:0;padding:0}
.ck-line{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.ck-line:last-child{border-bottom:0}
.ck-img{display:grid;place-items:center;width:76px;height:76px;border-radius:var(--r-md);overflow:hidden;background:var(--row-alt);color:var(--muted)}
.ck-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
[data-theme="dark"] .ck-img img{mix-blend-mode:normal}
.ck-body{min-width:0}
.ck-body h3{margin:0;font-size:.88rem;font-weight:800;line-height:1.9;overflow-wrap:anywhere}
.ck-sub{display:flex;flex-wrap:wrap;gap:.2rem .8rem;margin:0;font-size:.76rem;color:var(--muted-2)}
.ck-calc{margin:.1rem 0 0;font-size:.78rem;color:var(--ink-2)}
.ck-price{display:flex;flex-direction:column;align-items:flex-end;gap:.05rem}
.ck-side{display:grid;gap:1rem;position:sticky;top:1rem}
.ck-back{display:block;margin-top:.7rem;text-align:center;font-size:.82rem;color:var(--muted-2)}
.ck-rates ul{list-style:none;margin:0;padding:0}
.ck-rates li{display:flex;justify-content:space-between;gap:.6rem;padding:.45rem 0;font-size:.8rem;color:var(--ink-2);border-bottom:1px dashed var(--line)}
.ck-rates li:last-child{border-bottom:0}
.ck-rates .ck-h{padding-top:.2rem}
@media (max-width:900px){
  .ck-grid{grid-template-columns:minmax(0,1fr)}
  .ck-side{position:static}
}
@media (max-width:720px){
  .ck-lock{flex-wrap:wrap;padding:1rem}
  .ck-timer{margin-inline-start:auto}
  .ck-main{padding:0 1rem .2rem}
  .ck-line{grid-template-columns:64px minmax(0,1fr);}
  .ck-img{width:64px;height:64px}
  .ck-price{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:flex-end;gap:.6rem}
}

/* ===== 50-step roadmap, step 10: delivery address — steps bar, address cards, pickup centers, parcels ===== */
.ck-steps{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;list-style:none;margin:0;padding:.2rem .3rem;font-size:.8rem;color:var(--muted-2)}
.ck-steps li{display:flex;align-items:center}
.ck-steps li+li::before{content:"";width:22px;height:2px;margin-inline-end:1.1rem;background:var(--line)}
.ck-steps a,.ck-steps span{display:inline-flex;align-items:center;gap:.4rem;color:inherit;text-decoration:none}
.ck-steps b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--field-2);color:var(--muted-2);font-size:.72rem;font-weight:800}
.ck-steps .done{color:var(--success)}
.ck-steps .done b{background:var(--success-50);color:var(--success)}
.ck-steps .now{color:var(--ink);font-weight:800}
.ck-steps .now b{background:var(--primary);color:#fff}
.ck-lock-s{padding:.8rem 1.2rem}
.ck-lock-s .ck-lock-ico{width:44px;height:44px}
.ck-lock-s h1{font-size:.95rem}
.ck-main-col{display:grid;gap:1rem;min-width:0}
.ad-wrap{display:grid;gap:1rem;margin:0}
.ad-card{padding:0 1.3rem 1.1rem}
.ad-card .ck-h{padding-bottom:.8rem}
.ad-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:.9rem}
.ad-head .ck-h{border-bottom:0}
.ad-empty{margin:.4rem 0 0;font-size:.85rem;color:var(--muted-2);line-height:2}
.ad-note{margin:.2rem 0 .9rem}
.ad-list{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.7rem}
.ad-head+.ad-list{margin-top:0}
.ad-item{position:relative;display:flex;align-items:stretch;gap:.5rem}
.ad-pick{position:relative;flex:1;min-width:0;display:block;cursor:pointer}
.ad-pick input{position:absolute;opacity:0;inset-inline-start:0;top:0;width:100%;height:100%;margin:0;cursor:pointer}
.ad-box{display:flex;align-items:flex-start;gap:.7rem;height:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--card);transition:border-color .15s,background .15s}
.ad-pick:hover .ad-box{border-color:var(--primary-glow)}
.ad-pick input:checked+.ad-box{border-color:var(--primary);background:var(--primary-50)}
.ad-pick input:focus-visible+.ad-box{outline:2px solid var(--primary);outline-offset:2px}
.ad-dot{flex:none;width:18px;height:18px;margin-top:.35rem;border-radius:50%;border:2px solid var(--muted);background:var(--card);position:relative}
.ad-pick input:checked+.ad-box .ad-dot{border-color:var(--primary)}
.ad-pick input:checked+.ad-box .ad-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary)}
.ad-info{display:grid;gap:.1rem;min-width:0}
.ad-title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.9rem;font-weight:800}
.ad-badge{font-style:normal;font-size:.68rem;font-weight:700;padding:0 .55rem;border-radius:99px;background:var(--success-50);color:var(--success)}
.ad-line{font-size:.82rem;color:var(--ink-2);line-height:2;overflow-wrap:anywhere}
.ad-meta{font-size:.76rem;color:var(--muted-2);line-height:1.9}
.ad-meta i{font-style:normal;margin:0 .15rem}
.ad-acts{display:flex;flex-direction:column;justify-content:center;gap:.3rem;flex:none}
.ad-act{display:inline-flex;align-items:center;gap:.3rem;font:inherit;font-size:.76rem;font-weight:700;padding:.3rem .65rem;border:0;border-radius:var(--r-md);background:var(--row-alt);color:var(--ink-2);cursor:pointer;text-decoration:none}
.ad-act:hover{background:var(--primary-100);color:var(--primary)}
.ad-act.del:hover{background:var(--danger-50);color:var(--danger)}
.ad-item.is-off{opacity:.55}
.ad-item.is-off .ad-pick,.ad-item.is-off .ad-pick input{cursor:not-allowed}
.ad-formcard{scroll-margin-top:1rem}
.ad-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem;margin-top:.9rem}
.ad-form .full{grid-column:1/-1}
.ad-form textarea{resize:vertical;min-height:90px}
.ad-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;cursor:pointer}
.ad-check input{width:16px;height:16px;margin:0}
.ad-form-acts{display:flex;gap:.6rem;flex-wrap:wrap}
.ad-chosen{display:flex;align-items:flex-start;gap:.5rem;margin:.6rem 0;padding:.6rem .8rem;border-radius:var(--r-md);background:var(--success-50);color:#14805a;font-size:.8rem;line-height:1.9}
.ad-chosen .ico{flex:none;margin-top:.35rem}
.ad-chosen b{display:inline-block;font-weight:800}
.pc-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.pc-item{border:1px solid var(--line);border-radius:var(--r-lg);padding:.8rem 1rem}
.pc-item .pc-top{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;font-size:.84rem}
.pc-item .pc-top>b{font-weight:800}
.pc-seller{display:inline-flex;align-items:center;gap:.3rem;color:var(--ink-2)}
.pc-sum{margin-inline-start:auto;color:var(--muted-2);font-size:.78rem}
.pc-sum i{font-style:normal;margin:0 .2rem}
.pc-sum b{color:var(--ink)}
.pc-goods{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.pc-g{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;width:78px}
.pc-g .pc-img{width:64px;height:64px;margin:0;overflow:hidden}
.pc-g .pc-img img{position:static;inset:auto;padding:0;width:100%;height:100%;object-fit:cover}
.pc-q{position:absolute;top:-6px;inset-inline-start:2px;min-width:20px;height:20px;padding:0 .3rem;border-radius:7px;background:var(--ink);color:var(--card);font-size:.68rem;font-weight:800;display:grid;place-items:center}
.pc-t{font-size:.68rem;line-height:1.6;text-align:center;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pc-t small{display:block;color:var(--muted-2)}
.ck-side .ct-go+.ct-go{margin-top:.5rem}
@media (max-width:720px){
  .ad-card{padding:0 1rem 1rem}
  .ad-item{flex-direction:column}
  .ad-acts{flex-direction:row}
  .ad-form{grid-template-columns:minmax(0,1fr)}
  .pc-sum{margin-inline-start:0;width:100%}
}
/* step 11: shipping method of every parcel (the option cards reuse .ad-pick / .ad-box) */
.ad-head .pc-seller{font-size:.78rem;font-weight:600;margin-inline-start:.6rem}
.ad-head .pc-sum{margin-inline-start:0}
.sh-price{font-size:.85rem}
.sh-price b{font-weight:800;color:var(--ink)}
.sh-price del{color:var(--muted-2);font-size:.78rem;margin-inline-end:.3rem}
.ct-rows .muted{color:var(--muted-2);font-size:.78rem}

/* step 12: payment (ZarinPal), discount code, wallet, result page */
.pay-code{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0}
.pay-code .input{flex:1 1 200px;min-width:0}
.pay-chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem;flex:1 1 220px;min-width:0;padding:.55rem .8rem;border-radius:var(--r-md);background:var(--primary-50);color:var(--ink);font-size:.86rem}
.pay-chip.off{background:var(--field)}
.pay-chip b{font-weight:800}
.pay-mini{font-size:.82rem;color:var(--ink-2)}
.pay-links{margin:.7rem 0 0;font-size:.82rem}
.pay-links a{color:var(--primary)}
.ad-card .field textarea{min-height:84px;resize:vertical}
.pay-result{max-width:640px;margin:1.2rem auto;text-align:center;display:grid;gap:.9rem;padding:1.6rem 1.4rem}
.pay-result h1{margin:0;font-size:1.25rem}
.pay-result p{margin:0;color:var(--ink-2);line-height:1.9;font-size:.9rem}
.pay-ico{display:inline-grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:50%;color:#fff}
.pay-result.is-ok .pay-ico{background:#1a9d57}
.pay-result.is-wait .pay-ico{background:#d98a00}
.pay-result.is-bad .pay-ico{background:#c2323a}
.pay-facts{text-align:start;padding:1rem 0;border-block:1px solid var(--line)}
.pay-result .ck-h{text-align:start;margin:0}
.pay-items{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;text-align:start}
.pay-items li{display:flex;justify-content:space-between;gap:.8rem;font-size:.86rem}
.pay-items li b{white-space:nowrap}
.pay-result .ad-line{text-align:start}
.pay-parcel{display:grid;gap:.5rem;text-align:start;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--field)}
.pay-parcel header{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-size:.9rem}
.pay-parcel small{color:var(--ink-2);font-size:.78rem}
.pay-state{padding:.15rem .6rem;border-radius:999px;background:var(--primary-50);color:var(--ink);font-size:.76rem;font-weight:700;white-space:nowrap}
.nav-sub{display:grid;gap:1px;margin:0 0 .3rem;padding-inline-start:2.2rem}
.nav-sub a{font-size:.8rem;font-weight:600;padding:.3rem .6rem;margin:0;color:var(--ink-2)}
.nav-sub a::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.nav-sub a.active{background:transparent;color:var(--primary)}
.ord-search{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem}
.ord-search input{flex:1;border:0;background:transparent;font:inherit;padding:.4rem;min-width:0;text-align:start}
.ord-search input:focus{outline:0}
.ord-go{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:var(--primary);color:#fff;cursor:pointer;flex:none}
.ord-go .ico{stroke:currentColor;fill:none;stroke-width:2}
.ord-tbl td{vertical-align:middle;white-space:normal}
.ord-parcels{display:flex;flex-wrap:wrap;gap:.5rem}
.ord-parcel{display:grid;gap:.35rem;padding:.5rem .7rem;border-radius:var(--r-md);background:var(--primary-50);font-size:.78rem}
.ord-parcel small{color:var(--ink-2)}
.ord-pager{text-align:start}
/* step 33: transaction list */
table.tbl .amt-bank{color:var(--primary);font-weight:800}
.tx-tbl td{vertical-align:middle;white-space:normal}
.tx-tbl td:nth-child(2){white-space:nowrap}
.tx-unit{color:var(--muted-2);font-weight:400;font-size:.72rem}
.tx-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1rem 0;padding:.7rem 1rem;border-radius:var(--r-md);background:var(--primary-50);font-size:.78rem;color:var(--ink-2)}
.slr-box{padding:1.1rem 1.2rem}
.slr-top{margin-bottom:1rem}
.slr-search{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.slr-search input{flex:1;border:0;background:transparent;font:inherit;padding:.4rem;min-width:0;text-align:start}
.slr-search input:focus{outline:0}
.slr-pills{margin:1rem 0 .9rem;padding-top:1rem;border-top:1px solid var(--line)}
.slr-pills .lbl{display:inline-flex;align-items:center;gap:.35rem}
.slr-tbl td{vertical-align:middle;white-space:nowrap}
.slr-tbl td,.slr-tbl th{text-align:center}
.slr-logo{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);overflow:hidden}
.slr-logo img{width:100%;height:100%;object-fit:cover;display:block}
.slr-logo .ico{stroke:currentColor;fill:none;stroke-width:1.8}
.slr-bal{display:inline-flex;gap:.4rem;align-items:center}
.slr-menu{position:relative;display:inline-block}
.slr-menu summary{list-style:none;cursor:pointer;padding:.1rem .5rem;font-size:1.2rem;line-height:1;border-radius:8px;color:var(--ink-2)}
.slr-menu summary::-webkit-details-marker{display:none}
.slr-menu summary:hover{background:var(--field-2)}
.slr-menu>div{position:absolute;inset-inline-start:0;top:100%;z-index:5;min-width:180px;padding:.5rem .7rem;border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);font-size:.8rem}
.slr-menu>div a{color:var(--ink);text-decoration:none;font-weight:600}
.slp{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1.2rem;align-items:start}
.slp-card{padding:.9rem;display:grid;gap:.8rem}
.slp-cover{position:relative;height:118px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-600) 100%)}
.slp-st{position:absolute;inset-inline-end:1rem;bottom:-.7rem;background:var(--card);box-shadow:var(--shadow)}
.slp-logo{width:96px;height:96px;border-radius:24px;margin:-3.6rem 1.4rem 0 auto;position:relative;box-shadow:var(--shadow)}
.slp-logo img{width:100%;height:100%;object-fit:cover}
.slp-name{margin:0;font-size:1.15rem}
.slp-code{color:var(--muted-2);font-size:.82rem;text-align:start;margin-top:-.5rem}
.slp-bio small{color:var(--ink-2)}
.slp-bio p{margin:.2rem 0 0;color:var(--muted-2);font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slp-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.85rem;padding-top:.7rem;border-top:1px solid var(--line)}
.slp-row>span{display:inline-flex;gap:.35rem;align-items:center}
.slp-owner{color:var(--primary)}
.slp-wallet{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-top:1px solid var(--line);flex-wrap:wrap}
.slp-wico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--field-2);color:var(--ink)}
.slp-wico .ico{stroke:currentColor;fill:none;stroke-width:1.8}
.slp-wallet small{color:var(--ink-2);font-size:.75rem}
.slp-bal{font-size:1.15rem}
.slp-link{margin-inline-start:auto;font-size:.78rem;color:var(--primary);text-decoration:none}
.slp-pop{border:1px solid var(--line);border-radius:var(--r-md);padding:.5rem .8rem}
.slp-pop>summary{cursor:pointer;font-weight:700;font-size:.85rem}
.slp-pop form{display:grid;gap:.7rem;margin-top:.8rem}
.slp-tk{margin-bottom:1rem}
.slp-info{display:grid;gap:.1rem;border-top:1px solid var(--line);padding-top:.4rem}
.slp-info summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;padding:.45rem 0;font-size:.85rem}
.slp-info summary::-webkit-details-marker{display:none}
.slp-info summary em{font-style:normal;color:var(--primary)}
.slp-info .kv{margin:.2rem 0 .6rem;font-size:.8rem}
.slp-direct{display:grid;gap:.6rem;padding:.8rem;border-radius:var(--r-lg);background:var(--primary-50)}
.slp-direct .slp-row{border:0;padding:0}
.slp-check{display:flex;gap:.5rem;align-items:center;font-size:.8rem;color:var(--ink-2)}
.slp-acts{display:flex;gap:.6rem}
.slp-acts>.btn,.slp-acts>form{flex:1;text-align:center}
.slp-off{opacity:.55;cursor:not-allowed}
.slp-pos{color:#14805a}.slp-neg{color:#c2323a}
@media(max-width:900px){.slp{grid-template-columns:minmax(0,1fr)}}
.od-card{display:grid;gap:1rem}
.od-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.od-tools [aria-disabled=true]{opacity:.55;cursor:not-allowed}
.od-facts,.od-addr{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem 1.4rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-lg);font-size:.86rem}
.od-addr{background:var(--field)}
.od-f span{color:var(--ink-2)}
.od-f small{color:var(--ink-2)}
.od-neg{color:var(--danger)}
.od-note{margin:0;font-size:.82rem;color:var(--ink-2);line-height:1.9}
.od-h{font-size:.95rem;margin:.4rem 0 0}
.od-parcel{display:grid;gap:.6rem;padding:1rem;border-radius:var(--r-lg);background:var(--field)}
.od-parcel header{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.od-sub{margin:0;font-size:.8rem;color:var(--ink-2)}
.od-tbl td{vertical-align:middle;white-space:normal}
.od-img{border-radius:8px;object-fit:cover}
.od-chips{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem}
.od-move,.od-status{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.od-move input,.od-status input[name=note]{flex:1;min-width:160px}
.od-refund{font-size:.8rem;color:var(--ink-2)}
.print-body{background:#fff;color:#111;margin:0;padding:1rem}
.lbl-tools{display:flex;gap:.5rem;margin-bottom:1rem}
.lbl-sheet{max-width:148mm;margin:0 auto;border:2px solid #111;border-radius:6px;padding:6mm;display:grid;gap:4mm;font-size:12px}
.lbl-head{display:flex;gap:6mm;justify-content:space-between;border-bottom:2px solid #111;padding-bottom:3mm}
.lbl-head small{display:block;color:#555}
.lbl-head b{font-size:15px}
.lbl-cod{margin:0;padding:2mm 3mm;border:2px dashed #111;font-weight:700}
.lbl-box{border:1px solid #999;border-radius:4px;padding:3mm}
.lbl-box h2{margin:0 0 2mm;font-size:13px}
.lbl-box dl{margin:0;display:grid;gap:1.5mm}
.lbl-box dl div{display:flex;gap:2mm}
.lbl-box dt{color:#555;min-width:22mm}
.lbl-box dd{margin:0;font-weight:700}
.lbl-goods{list-style:none;margin:0;padding:0;display:grid;gap:1mm}
.lbl-goods li{display:flex;justify-content:space-between;gap:3mm}
.lbl-meta{margin:2mm 0 0;color:#333}
@media print{.lbl-tools{display:none}.print-body{padding:0}.lbl-sheet{border-width:1.5px}}


/* ---- step 16: invoice, thermal invoice, pro-forma, certificate of authenticity (print layout, always light) ---- */
.inv-tools{flex-wrap:wrap}
.inv-sheet{max-width:190mm;margin:0 auto;font-size:11px;color:#111;display:grid;gap:4mm;page:a4}
.inv-head{display:flex;justify-content:space-between;gap:6mm;border-bottom:2px solid #111;padding-bottom:3mm}
.inv-shop h1{margin:0 0 1mm;font-size:18px}
.inv-shop p{margin:0;color:#444}
.inv-meta h2{margin:0 0 2mm;font-size:16px;text-align:end}
.inv-meta dl,.inv-buyer,.inv-sums dl{margin:0;display:grid;gap:1mm}
.inv-meta dl div,.inv-buyer div{display:flex;gap:2mm}
.inv-meta dt,.inv-buyer dt{color:#555;min-width:24mm}
.inv-meta dd,.inv-buyer dd{margin:0;font-weight:700}
.inv-box{border:1px solid #999;border-radius:4px;padding:3mm}
.inv-box h3{margin:0 0 2mm;font-size:12px}
.inv-buyer{grid-template-columns:repeat(2,minmax(0,1fr))}
.inv-tbl{width:100%;border-collapse:collapse;font-size:10px}
.inv-tbl th,.inv-tbl td{border:1px solid #888;padding:1.2mm 1.5mm;text-align:center}
.inv-tbl th{background:#eee;font-weight:700}
.inv-tbl .inv-title{text-align:start}
.inv-tbl .inv-title small{display:block;color:#555}
.inv-tbl tfoot td{background:#f5f5f5;font-weight:700}
.inv-empty{color:#555}
.inv-bottom{display:grid;grid-template-columns:1fr 1fr;gap:4mm;align-items:start}
.inv-pay p{margin:0 0 1.5mm}
.inv-warn{border:1px dashed #111;padding:2mm}
.inv-small{color:#555}
.inv-sums dl div{display:flex;justify-content:space-between;gap:3mm;border-bottom:1px dotted #aaa;padding-bottom:1mm}
.inv-sums dd{margin:0;font-weight:700}
.inv-sums .neg dd{color:#b00020}
.inv-sums .grand{border-bottom:2px solid #111;font-size:13px}
.inv-words{margin:0;padding:2mm 3mm;border:1px solid #999;border-radius:4px}
.inv-sign{display:flex;justify-content:space-around;gap:10mm;margin-top:8mm}
.inv-sign div{flex:1;border-top:1px solid #111;padding-top:2mm;text-align:center;color:#444}

.inv-thermal{width:72mm;margin:0 auto;font-size:11px;line-height:1.7;color:#000;page:thermal}
.inv-thermal header{text-align:center;border-bottom:1px dashed #000;padding-bottom:2mm}
.inv-thermal h1{margin:0;font-size:15px}
.inv-thermal h2{margin:1mm 0 0;font-size:13px}
.inv-thermal p{margin:0}
.inv-thermal dl{margin:0}
.th-meta div,.th-sums div{display:flex;justify-content:space-between;gap:2mm}
.th-meta dd,.th-sums dd{margin:0;font-weight:700}
.th-meta{border-bottom:1px dashed #000;padding:2mm 0}
.th-rows{list-style:none;margin:0;padding:2mm 0;border-bottom:1px dashed #000}
.th-rows li{display:grid;padding-bottom:1.5mm}
.th-rows small{color:#333}
.th-sums{padding:2mm 0;border-bottom:1px dashed #000}
.th-sums .grand{font-size:13px;font-weight:700}
.th-words,.th-note{text-align:center;padding-top:2mm}
.th-note{color:#333;font-size:10px}

.crt-sheet{max-width:277mm;margin:0 auto;border:3px double #111;padding:8mm;display:grid;gap:4mm;font-size:12px;color:#111;page:cert}
.crt-head{display:flex;justify-content:space-between;gap:8mm;border-bottom:2px solid #111;padding-bottom:3mm}
.crt-head h1{margin:0 0 1mm;font-size:22px}
.crt-head p{margin:0;color:#444}
.crt-head dl{margin:0;display:grid;gap:1mm}
.crt-head dl div{display:flex;gap:3mm}
.crt-head dt{color:#555;min-width:26mm}
.crt-head dd{margin:0;font-weight:700}
.crt-box{border:1px solid #999;border-radius:4px;padding:3mm}
.crt-box h2{margin:0 0 2mm;font-size:14px}
.crt-grid{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2mm 6mm}
.crt-grid .wide{grid-column:1/-1}
.crt-grid div{display:flex;gap:2mm}
.crt-grid dt{color:#555;min-width:20mm}
.crt-grid dd{margin:0;font-weight:700}
.crt-certs{margin:0;padding-inline-start:5mm}
.crt-warranty{margin:0;line-height:2}

@page a4{size:A4;margin:10mm}
@page thermal{size:80mm auto;margin:3mm}
@page cert{size:A4 landscape;margin:8mm}
@media print{.inv-tools{display:none}.inv-sheet,.crt-sheet{max-width:none}.inv-tbl th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media(max-width:700px){.inv-bottom,.inv-buyer,.crt-grid{grid-template-columns:1fr}.inv-head,.crt-head{flex-direction:column}.inv-sheet,.crt-sheet{overflow-x:auto}.inv-tbl{min-width:600px}}

/* step 19 — approval queues */
.apq-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.apq-title{margin:0;font-size:1.05rem}
.apq-switch{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);margin-bottom:.4rem}
.apq-act{display:flex;align-items:flex-start;justify-content:center;gap:.4rem;flex-wrap:wrap}
.apq-act form{margin:0;display:flex;gap:.4rem;align-items:center}
.apq-rej summary{list-style:none;cursor:pointer}
.apq-rej summary::-webkit-details-marker{display:none}
.apq-rej[open] summary{margin-bottom:.4rem}
.apq-rej form{flex-wrap:wrap;justify-content:center}
.apq-rej input{font:inherit;padding:.3rem .6rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);min-width:160px}
.slr-tbl .apq-act{white-space:normal}
.slp-decide{display:grid;gap:.5rem;padding:.8rem;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--card)}
.slp-decide .apq-act{justify-content:flex-start}

/* step 20 — seller dashboard */
.sd-counters{display:flex;gap:1.6rem;flex-wrap:wrap}
.sd-counters div{display:grid;gap:.1rem;min-width:110px}
.sd-counters b{font-size:1.25rem;font-weight:800;display:inline}
.sd-counters span{font-size:.85rem;font-weight:700;margin-inline-start:.35rem}
.sd-counters small{color:var(--muted-2);font-size:.75rem}
@media (max-width:720px){.sd-counters{gap:.9rem}.sd-counters div{min-width:92px}}
/* step 21: seller wallet */
.wl-in{color:#14805a}.wl-out{color:#c2323a}
.wl-tbl td{white-space:nowrap}.wl-tbl td:nth-child(3){white-space:normal;min-width:220px}
.wl-legend{margin:1rem 0 0;padding:.7rem 1rem;border-radius:var(--r-md);background:var(--primary-50);font-size:.78rem;color:var(--ink-2);line-height:1.9}
.wl-form{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap}.wl-form .field{flex:1;min-width:200px;margin:0}.wl-form .btn{flex:none}
/* step 22: customer account dashboard inside the storefront frame */
.ac-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:1.2rem;align-items:start;margin-bottom:1.5rem}
.ac-side,.ac-main{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:1.2rem}
.ac-who{display:flex;align-items:center;gap:.8rem}.ac-who b{display:block}.ac-who small{color:var(--muted-2)}
.ac-av{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--primary-50);color:var(--primary);font-weight:800;font-size:1.3rem;object-fit:cover;flex:none}
.ac-av.sm{width:40px;height:40px;font-size:1rem}
.ac-facts{margin:1rem 0 .3rem;display:grid;gap:.5rem}.ac-facts div{display:flex;justify-content:space-between;gap:.6rem;font-size:.85rem}.ac-facts dt{color:var(--muted-2)}.ac-facts dd{margin:0;font-weight:700}
.ac-charge{display:block;font-size:.78rem;color:var(--primary);text-decoration:none;margin-bottom:.8rem}
.ac-menu{display:grid;gap:.15rem;border-top:1px solid var(--line);padding-top:.8rem}
.ac-menu a,.ac-menu button{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:12px;color:var(--ink-2);text-decoration:none;font:inherit;font-size:.88rem;background:none;border:0;cursor:pointer;width:100%;text-align:start}
.ac-menu a.active{background:var(--primary-50);color:var(--primary);font-weight:800}.ac-menu a:hover,.ac-menu button:hover{background:var(--field-2)}
.ac-menu form{margin:0}
.ac-top{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.ac-wallet{background:linear-gradient(135deg,#f0194f,#d4103f);color:#fff;border-radius:var(--r-xl);padding:1.1rem 1.3rem;display:flex;flex-direction:column;justify-content:space-between;min-height:170px}
.ac-w-t{display:flex;justify-content:space-between;align-items:center}.ac-dots{opacity:.8;font-size:.8rem;direction:ltr}
.ac-w-b{display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem;flex-wrap:wrap}.ac-w-b strong{font-size:1.5rem;display:block;margin-top:.2rem}.ac-w-b small{opacity:.85}
.ac-plus{display:inline-flex;align-items:center;gap:.4rem;color:#fff;text-decoration:none;font-size:.8rem;background:rgba(255,255,255,.2);border-radius:14px;padding:.5rem .8rem}.ac-plus span{font-size:1.2rem;line-height:1}
.ac-hello{background:#ebe8e4;border-radius:var(--r-xl);padding:1.1rem 1.3rem}
.ac-h-t{display:flex;justify-content:space-between;align-items:center;gap:.6rem}.ac-h-t h2{font-size:1rem;margin:0}
.ac-hello p{font-size:.8rem;color:var(--ink-2);margin:.7rem 0}
.ac-counters{display:flex;gap:1rem;flex-wrap:wrap}.ac-counters div{display:grid;gap:.1rem;min-width:72px;font-size:.8rem}.ac-counters small{color:var(--muted-2);font-size:.7rem}
.ac-sec{margin-bottom:1.2rem}.ac-sec h3{font-size:.95rem;margin:0 0 .7rem;display:flex;justify-content:space-between;gap:.5rem}.ac-sec h3 a{font-size:.75rem;font-weight:500;color:var(--primary);text-decoration:none}
.ac-empty{background:var(--field-2);border-radius:var(--r-lg);padding:2rem 1rem;text-align:center;color:var(--muted-2);font-size:.85rem;margin:0}
.ac-tbl-wrap{overflow-x:auto}.ac-tbl{width:100%;border-collapse:collapse;font-size:.85rem}.ac-tbl th{color:var(--muted-2);font-weight:600;text-align:start;padding:.5rem .6rem}.ac-tbl td{padding:.65rem .6rem;border-top:1px solid var(--line);white-space:nowrap}
.ac-two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.ac-prods{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}.ac-prods li{position:relative;background:var(--field-2);border-radius:var(--r-lg);padding:.7rem}
.ac-x{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;width:26px;height:26px;border-radius:50%;border:0;background:var(--line);color:var(--ink-2);cursor:pointer;line-height:1;z-index:1}
.ac-prods form{margin:0}
.ac-p{display:grid;grid-template-columns:56px 1fr;gap:.2rem .7rem;color:inherit;text-decoration:none}
.ac-p-img{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:var(--card);overflow:hidden}.ac-p-img img{width:100%;height:100%;object-fit:cover}
.ac-p-t{font-size:.82rem;font-weight:700;line-height:1.6;padding-inline-start:1.8rem}
.ac-p-f{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;color:var(--ink-2);align-items:center}
@media (max-width:900px){.ac-grid{grid-template-columns:1fr}.ac-top,.ac-two{grid-template-columns:1fr}}

/* step 23 — «ویرایش پروفایل» (shared by the panels and the customer frame) */
.pf-title{font-size:1.05rem;margin:0 0 1rem}
.pf-box{background:var(--card);border-radius:var(--r-xl);padding:1.2rem}
.ac-main .pf-box{padding:0}
.pf-av-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.pf-av{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--primary-50);color:var(--primary);font-weight:800;font-size:2rem;object-fit:cover;flex:none;border:1px solid var(--line)}
.pf-av-side{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.pf-av-btn{display:inline-flex;align-items:center;gap:.3rem;background:var(--primary-100);color:var(--primary);border-radius:99px;padding:.35rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer}
.pf-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.pf-file:focus-visible+.hint,.pf-av-btn:focus-within{outline:2px solid var(--primary-glow);outline-offset:2px}
.pf-check{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted-2)}
.pf-check input{width:16px;height:16px;min-height:0}
.pf-form{display:flex;flex-direction:column;gap:1rem}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.pf-grid.three{grid-template-columns:1fr 1fr 1fr}
.pf-form .field input,.pf-form .field select,.pf-form .field textarea,.pf-pass .field input{border:1px solid var(--line);background:var(--card)}
.pf-form .field input:focus,.pf-form .field select:focus,.pf-form .field textarea:focus,.pf-pass .field input:focus{border-color:var(--primary-glow)}
.pf-form .field input.pf-ro{background:var(--field-2);color:var(--ink-2)}
.pf-form .field textarea{min-height:140px;resize:vertical}
.pf-actions{margin:.4rem 0 0}
.pf-hr{border:0;border-top:1px dashed var(--line);margin:1.6rem 0}
.pf-pass summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;background:var(--primary-100);color:var(--primary);border-radius:var(--r-lg);padding:.55rem 1.1rem;font-weight:700;font-size:.85rem}
.pf-pass summary::-webkit-details-marker{display:none}
.pf-pass[open] summary{margin-bottom:1rem}
@media (max-width:900px){.pf-grid,.pf-grid.three{grid-template-columns:1fr}.pf-av-row{align-items:flex-start}}
img.avatar{object-fit:cover}

/* step 24 — «سفارشات من»، پیگیری، پیش‌فاکتورها و نشانی‌ها در قاب حساب */
.ao-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.ao-tabs a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:99px;background:var(--field-2);color:var(--ink-2);text-decoration:none;font-size:.82rem}
.ao-tabs a.active{background:var(--primary-50);color:var(--primary);font-weight:800}
.ao-tabs .badge-count{background:var(--ink);min-width:20px;height:20px;border-radius:7px;font-size:.68rem}
.ao-tbl td{vertical-align:middle}.ao-acts{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.ao-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}.ao-head .pf-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ao-meta{font-size:.8rem;color:var(--muted-2);margin:.2rem 0 1rem;line-height:2}.ao-meta i{margin-inline:.3rem;font-style:normal}
.ao-steps{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.ao-steps li{display:grid;justify-items:center;gap:.35rem;font-size:.75rem;color:var(--muted-2);text-align:center}
.ao-steps li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--field-2);border:2px solid var(--line);color:#fff}
.ao-steps li.done b{background:var(--primary);border-color:var(--primary)}.ao-steps li.now b{border-color:var(--primary);background:var(--card)}
.ao-steps li.done,.ao-steps li.now{color:var(--ink);font-weight:700}
.ao-card{background:var(--field-2);border-radius:var(--r-lg);padding:1rem 1.1rem;margin-bottom:1rem}
.ao-card-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}.ao-no{color:var(--muted-2);font-size:.8rem}
.ao-track{margin:0 0 .8rem;font-size:.85rem}
.ao-goods{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ao-goods li{display:grid;grid-template-columns:48px 1fr auto auto;gap:.3rem .8rem;align-items:center;background:var(--card);border-radius:var(--r-lg);padding:.6rem}
.ao-img{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:var(--field-2);overflow:hidden}.ao-img img{width:100%;height:100%;object-fit:cover}
.ao-g-t{display:grid;gap:.1rem;font-size:.82rem;line-height:1.6}.ao-g-t small{color:var(--muted-2)}.ao-g-q,.ao-g-p{font-size:.8rem;white-space:nowrap}
.ao-g-c{grid-column:2/-1;font-size:.75rem;color:var(--primary);text-decoration:none}
.ao-money{margin:0;display:grid;gap:.5rem}.ao-money div{display:flex;justify-content:space-between;gap:.8rem;font-size:.84rem}.ao-money dt{color:var(--muted-2)}.ao-money dd{margin:0;font-weight:700;text-align:end}
.ao-money .sum{border-top:1px solid var(--line);padding-top:.5rem}
.ao-hist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.82rem}.ao-hist li{display:flex;justify-content:space-between;gap:.8rem}
.ao-addr{flex:1;min-width:0}.ac-main .ad-list{margin-top:.2rem}.ac-main .ad-card{margin-top:1rem;padding-top:1.1rem}.ad-acts form{margin:0;display:inline}
@media (max-width:900px){.ao-steps{grid-template-columns:repeat(5,minmax(0,1fr))}.ao-goods li{grid-template-columns:48px 1fr}.ao-g-q,.ao-g-p{grid-column:2}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* step 25: wallet and transactions of the customer account */
.aw-sum{background:var(--field-2);border-radius:var(--r-xl);padding:1.1rem 1.3rem;display:grid;gap:.5rem;align-content:center}.aw-sum div{display:flex;justify-content:space-between;gap:.6rem;font-size:.88rem}.aw-sum small{color:var(--muted-2)}.aw-sum p{margin:.3rem 0 0;font-size:.76rem;color:var(--ink-2);line-height:1.9}
.aw-form{display:grid;gap:.7rem;max-width:560px}.aw-form label{font-size:.85rem;font-weight:700}.aw-form small{color:var(--muted-2);font-size:.76rem;line-height:1.9}
.aw-quick{display:flex;gap:.5rem;flex-wrap:wrap}.aw-row{display:flex;gap:.6rem;flex-wrap:wrap}.aw-row input{flex:1;min-width:160px}
.aw-amt{font-weight:800}.aw-amt.in{color:var(--ok,#0a8f4e)}.aw-amt.out{color:var(--err,#d4103f)}.aw-text{white-space:normal!important;min-width:160px}
@media (max-width:900px){.ac-top{grid-template-columns:1fr}}
/* step 26: active sessions */
.ac-note{color:var(--muted-2);font-size:.85rem;margin:0 0 1rem}
.as-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.as-item{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--field-2);border-radius:var(--r-lg);padding:.9rem 1rem}
.as-item.is-current{outline:1.5px solid var(--primary-50)}
.as-main{display:grid;gap:.25rem}.as-main small{color:var(--muted-2);font-size:.78rem}
.as-actions{display:flex;gap:.6rem;flex-wrap:wrap}
/* step 29: template editor */
.tpl-note{background:#fff7e0;color:#7a5600;border-radius:var(--r-lg);padding:.6rem 1rem;font-size:.82rem;margin:0 0 1rem}
.tpl-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:1rem;align-items:start;margin-top:1rem}
.tpl-side h2{font-size:.95rem;margin:0 0 .5rem}
.tpl-list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.4rem}
.tpl-list li{background:var(--field-2);border-radius:var(--r-lg)}.tpl-list li.is-bad{opacity:.6}
.tpl-list .tpl-row{display:flex;align-items:center;gap:.3rem;padding-inline-end:.4rem}
.tpl-list .tpl-row>label{flex:1;min-width:0}
.tpl-list label{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .8rem;cursor:pointer}
.tpl-list .tpl-grip{display:block;cursor:grab;color:var(--muted-2);padding:.4rem .2rem .4rem .5rem;user-select:none}
.tpl-list .tpl-acts{display:flex;gap:.1rem}.tpl-acts .btn{padding:.15rem .45rem;min-width:0}
.tpl-list li.is-del{opacity:.45}.tpl-list li.is-del .tpl-row>label{text-decoration:line-through}.tpl-list li.is-drag{outline:2px dashed var(--primary)}
.tpl-cfg{display:grid;gap:.5rem;padding:.2rem .8rem .8rem}.tpl-cfg[hidden]{display:none}
.tpl-cfg label{display:grid;gap:.2rem;padding:0;font-size:.78rem;color:var(--ink-2);cursor:default}.tpl-cfg label.chk{display:flex;align-items:center;gap:.4rem}
.tpl-cfg input[type=text],.tpl-cfg input[type=number],.tpl-cfg select{width:100%}
.tpl-cfg textarea:not([data-rte]){width:100%}.tpl-rte{display:grid;gap:.2rem;font-size:.78rem;color:var(--ink-2);min-width:0}
.tpl-list span{display:grid;gap:.1rem;font-size:.85rem}.tpl-list small{color:var(--muted-2);font-size:.75rem}
.tpl-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .7rem}.tpl-tools{display:flex;gap:.3rem;flex-wrap:wrap}
.tpl-frame{margin-inline:auto;max-width:100%;transition:max-width .2s;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.tpl-frame iframe{display:block;width:100%;height:72vh;border:0}
.tpl-save{grid-column:1/-1;position:sticky;bottom:0;display:flex;justify-content:flex-end;align-items:center;gap:.8rem;background:var(--field);border-top:1px solid var(--line);padding:.7rem 1rem;border-radius:var(--r-lg)}
.tpl-save span{color:#b45309;font-size:.82rem}
@media(max-width:900px){.tpl-grid{grid-template-columns:1fr}}
.tpl-lib{border:0;border-radius:var(--r-xl);padding:1.2rem 1.4rem;width:min(760px,94vw);max-height:90vh;overflow:auto;background:var(--card);color:var(--ink)}
.tpl-lib::backdrop{background:rgba(0,0,0,.55)}
.tpl-lib-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.tpl-lib-head p{margin:.2rem 0 0}
.tpl-lib h3{font-size:.9rem;margin:1.2rem 0 .6rem}
.tpl-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem}
.tpl-el{font:inherit;display:grid;gap:.15rem;text-align:center;background:var(--field-2);color:var(--ink);border:0;border-radius:var(--r-lg);padding:.9rem .7rem;cursor:pointer}
.tpl-el b{font-size:.85rem}.tpl-el small{color:var(--muted-2);font-size:.72rem}.tpl-el em{font-style:normal;font-size:.68rem;color:var(--muted-2)}
.tpl-el:hover:not([disabled]){background:var(--primary-100);outline:2px solid var(--primary)}
.tpl-el[disabled]{opacity:.5;cursor:not-allowed}
/* step 32: «ویرایش قالب» — layout tabs and the style tab */
.tpl-sub{font-size:.82rem;color:var(--ink-2);margin:1rem 0 .3rem}
.tpl-style{display:grid;gap:.8rem;margin-top:.8rem}
.tpl-style label{display:grid;gap:.25rem;font-size:.82rem;color:var(--ink-2)}
.tpl-style select{width:100%}
.tpl-pick{display:flex;align-items:center;gap:.6rem}
.tpl-pick input[type=color]{width:46px;height:34px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);cursor:pointer}
.tpl-pick code{font-size:.8rem;color:var(--muted-2)}
.pp-tools[hidden],.pp-sticky[hidden]{display:none}
.pp-low.pp-low-solo{grid-template-columns:minmax(0,1fr)}
/* step 34: payout queue and withdrawals */
.pq-head{display:flex;flex-wrap:wrap;gap:.6rem;padding:.8rem 1rem}
.pq-chip{padding:.5rem .9rem;border-radius:var(--r-md);background:var(--primary-50);color:var(--ink-2);font-size:.82rem}
.pq-chip b{color:var(--ink)}
.pq-search{border:1px solid var(--line);border-radius:var(--r-lg);margin:.6rem 0 1rem}
.pq-tbl td{vertical-align:middle;white-space:normal}
.pq-tbl td:nth-child(4){white-space:nowrap}
/* step 35: settings — finance tab */
.tabs .tab-off{background:var(--field-2);color:var(--muted-2);padding:.4rem 1.3rem;border-radius:12px 12px 0 0;font-size:.82rem;font-weight:600;white-space:nowrap;opacity:.6;cursor:not-allowed}
.fin-box{padding:1.2rem}
.fin-badge{display:inline-block;padding:.05rem .5rem;border-radius:8px;background:var(--primary-50);color:var(--primary);font-size:.74rem;font-weight:700}
.fin-sliders{margin-top:1.2rem}
.fin-slider input[type=range]{width:100%;accent-color:var(--primary)}
.fin-bar{display:flex;gap:.6rem;margin-top:1.4rem}
/* step 36: discount codes */
.dc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.dc-top .hint{flex:1 1 28rem;margin:0}
.dc-code{font-weight:800;letter-spacing:.04em;direction:ltr;unicode-bidi:plaintext}
.dc-tbl td{vertical-align:middle;white-space:normal}.dc-tbl td:nth-child(2),.dc-tbl td:nth-child(5){white-space:nowrap}
input.dc-code{text-transform:uppercase}
/* step 37: «آمار مالی و حسابداری» — five cards and four monthly charts */
.fst-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.1rem}
.fst-card{background:var(--card);border-radius:var(--r-xl);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.fst-card-t{display:flex;justify-content:space-between;align-items:center;font-weight:800}
.fst-card-t small{color:var(--muted-2);font-weight:500;font-size:.75rem}
.fst-card-b{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.7rem}
.fst-spark{flex:0 0 38%;height:44px}.fst-spark svg{width:100%;height:100%;display:block}
.fst-val{text-align:left;direction:rtl;min-width:0}
.fst-val b{font-size:1.25rem;font-weight:800;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.fst-val span{color:var(--muted-2);font-size:.78rem}.fst-val small{display:block;color:var(--muted-2);font-size:.72rem;margin-top:.15rem}
.fst-note{margin:0 0 1rem}
.fst-title{margin:1.2rem 0 .6rem;font-size:.95rem;font-weight:800}
.fst-box{padding:1rem 1.1rem}
.fst-sums{display:flex;justify-content:space-around;gap:1rem;flex-wrap:wrap;text-align:center;margin-bottom:.6rem}
.fst-sums div{display:grid;gap:.15rem}.fst-sums small{color:var(--muted-2);font-size:.78rem;font-weight:600}.fst-sums b{font-size:1.05rem}
.fst-legend{display:flex;justify-content:center;gap:1.2rem;font-size:.78rem;color:var(--ink-2);margin-bottom:.3rem}
.fst-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:.35rem;vertical-align:middle}
.fst-scroll{overflow-x:auto}.fst-svg{width:100%;min-width:640px;height:auto;display:block}
.fst-grid{stroke:var(--line);stroke-width:1}
.fst-dot{fill:var(--ink-2)}.fst-aline{stroke:var(--ink-2);stroke-width:1.5;opacity:.35}.fst-dotk{background:var(--ink-2)}
.fst-tick{fill:var(--muted-2);font-size:11px;direction:ltr}.fst-xl{fill:var(--muted-2);font-size:9.5px;direction:ltr;unicode-bidi:isolate}
@media (max-width:1100px){.fst-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fst-cards{grid-template-columns:1fr}}

/* step 38 — admin dashboard (پیشخوان مدیر) */
.dsh-top{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-bottom:1.1rem;align-items:stretch}
.dsh-top .welcome{margin-bottom:0}
.dsh-hello{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}.dsh-hello h2{margin:0}
.dsh-ava{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;background:var(--primary-100);color:var(--primary);display:grid;place-items:center;font-weight:800}
.dsh-hero{margin-bottom:0;display:grid;align-content:space-between;gap:.2rem;text-align:center;overflow:hidden;padding-bottom:0}
.dsh-hero-v{font-size:1.6rem;font-weight:800}.dsh-hero-l{color:var(--ink-2);font-size:.85rem}
.dsh-hero-viz{height:64px;margin:.4rem -1.3rem 0}.dsh-hero-viz svg{width:100%;height:100%;display:block}
.dsh-stat-b{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.4rem}
.dsh-stat-viz{flex:0 0 42%;height:40px}.dsh-stat-viz svg{width:100%;height:100%;display:block}
.dsh-stat-viz.ring{flex:0 0 52px;height:52px}
.dsh-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1rem;margin-bottom:1.1rem}
.dsh-grid2>.box{margin-bottom:0;min-width:0}
.dsh-cap{display:block;color:var(--muted-2);font-size:.8rem}.dsh-big{font-size:1.7rem;font-weight:800;display:block;margin-bottom:.3rem}
.dsh-svg{width:100%;height:auto;display:block}
.dsh-tbl td{vertical-align:middle}.dsh-ttl{white-space:normal;max-width:420px}
.dsh-star{color:var(--accent);vertical-align:middle}
@media (max-width:1100px){.dsh-top{grid-template-columns:1fr 1fr}.dsh-welcome{grid-column:1/-1}}
@media (max-width:560px){.dsh-top{grid-template-columns:1fr}}

/* ---- 50-step roadmap, step 40: stories — admin list + form with live preview, the round row on the home page and the full-screen viewer ---- */
.req{color:#e0354a;font-weight:700}
.btn.icon-only{width:2.7rem;min-width:2.7rem;padding:0;display:inline-grid;place-items:center}
.st-thumb{display:inline-block;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--field-2);border:2px solid var(--primary-50)}
.st-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.st-layout{display:flex;gap:1.8rem;align-items:flex-start}
.st-form-side{flex:1;min-width:0}
.st-prev-side{width:315px;flex:none;text-align:center}
.st-prev-side .hint{margin-top:.7rem}
.st-pick{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.st-pick input[type=file]{font-size:.8rem;max-width:100%}
.st-wh{margin:1.1rem 0 .5rem;font-size:.95rem}
.st-widget{background:var(--field-2);border-radius:var(--r-md);padding:.9rem 1rem;margin-bottom:.8rem}
.st-prodrow{display:flex;gap:.6rem;align-items:center}
.st-prodrow input{flex:1;min-width:0}
.st-prev{position:relative;aspect-ratio:9/16;border-radius:22px;background:#1b1b24;overflow:hidden;color:#fff;text-align:start}
.st-prev-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.st-prev-bar{position:absolute;z-index:2;top:10px;inset-inline:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.28)}
.st-prev-bar i{display:block;height:100%;width:38%;border-radius:3px;background:#fff}
.st-prev-head{position:absolute;z-index:2;top:22px;inset-inline:12px;display:flex;align-items:center;gap:.6rem}
.st-prev-av{width:34px;height:34px;border-radius:50%;background:#e9ecf2 center/cover no-repeat;flex:none;border:2px solid rgba(255,255,255,.85)}
.st-prev-t{display:flex;flex-direction:column;line-height:1.35;min-width:0;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.st-prev-t b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-prev-t small{font-size:.66rem;opacity:.85}
.st-prev-widgets{position:absolute;z-index:2;bottom:14px;inset-inline:12px;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.st-prev-link,.st-view-link{display:inline-block;max-width:100%;padding:.55rem 1.1rem;border-radius:999px;background:#fff;color:#16181f;font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-prev-prod,.st-view-prod{display:flex;align-items:center;gap:.6rem;max-width:100%;padding:.4rem .7rem .4rem .9rem;border-radius:14px;background:rgba(255,255,255,.94);color:#16181f;font-size:.78rem;text-decoration:none}
.st-prev-prod b,.st-view-prod b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-prev-prod img,.st-view-prod img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none}
@media (max-width:900px){.st-layout{flex-direction:column}.st-prev-side{width:100%;max-width:315px;margin-inline:auto}}

.hm-stories{position:relative;margin:.2rem 0 .4rem}
.hm-st-row{display:flex;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;padding:.5rem .3rem .35rem;scrollbar-width:none}
.hm-st-row::-webkit-scrollbar{display:none}
.hm-st{flex:none;width:82px;display:flex;flex-direction:column;align-items:center;gap:.4rem;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
.hm-st .ring{width:74px;height:74px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#ff9f1c,#e8336d 55%,#6b4dff);display:block}
.hm-st .ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid var(--card);background:var(--card)}
.hm-st.seen .ring{background:var(--line,#cfd6e4)}
.hm-st .nm{max-width:100%;font-size:.74rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-st:focus-visible .ring{outline:3px solid var(--primary);outline-offset:2px}
.st-view{position:fixed;inset:0;z-index:1200;background:rgba(8,10,16,.9);display:flex;align-items:center;justify-content:center;padding:1rem}
.st-view[hidden]{display:none}
.st-view-card{position:relative;height:min(92vh,740px);aspect-ratio:9/16;max-width:100%;border-radius:20px;overflow:hidden;background:#1b1b24;color:#fff}
.st-view-img{position:absolute;inset:0;background-size:cover;background-position:center}
.st-view-bars{position:absolute;z-index:3;top:10px;inset-inline:10px;display:flex;gap:4px}
.st-view-bars span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.st-view-bars span i{display:block;height:100%;width:0;background:#fff}
.st-view-bars span.done i{width:100%}
.st-view-bars span.now i{animation:stfill var(--st-ms,6000ms) linear forwards}
@keyframes stfill{from{width:0}to{width:100%}}
.st-view-head{position:absolute;z-index:3;top:22px;inset-inline:12px;display:flex;align-items:center;gap:.6rem;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.st-view-head img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85)}
.st-view-head div{display:flex;flex-direction:column;line-height:1.35;min-width:0;flex:1}
.st-view-head b{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-view-head small{font-size:.68rem;opacity:.85}
.st-view-x{position:relative;z-index:4;background:rgba(0,0,0,.35);color:#fff;border:0;width:34px;height:34px;border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer}
.st-view-zone{position:absolute;z-index:2;top:0;bottom:0;width:38%;background:none;border:0;cursor:pointer}
.st-view-zone.prev{inset-inline-end:0}.st-view-zone.next{inset-inline-start:0}
.st-view-widgets{position:absolute;z-index:4;bottom:16px;inset-inline:12px;display:flex;flex-direction:column;gap:.5rem;align-items:center}
@media (prefers-reduced-motion:reduce){.st-view-bars span.now i{animation:none;width:100%}}
/* step 41: settings — main tab; storefront: support button, license badges, extra links */
.gs-box{padding:1.2rem}
.gs-sec{padding:1rem 0 1.2rem;border-bottom:1px solid var(--line)}.gs-sec:last-of-type{border-bottom:0}
.gs-sec>h3{margin:0 0 .9rem;font-size:.95rem}
.gs-sec .field.wide{grid-column:1/-1}
.gs-sec textarea{width:100%;min-height:6.5rem;resize:vertical}
.gs-sec textarea.ltr,.gs-sec input.ltr{direction:ltr;text-align:left}
.gs-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.2rem}
@media (max-width:900px){.gs-grid3{grid-template-columns:1fr}}
.gs-switch{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;font-weight:600}
.sf-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lic-live{background:none;border:0;padding:0}.lic-live img{max-height:70px;width:auto}
.foot-more{display:flex;flex-wrap:wrap;gap:.4rem .9rem;padding:.6rem 0;font-size:.8rem}
.foot-more a{color:var(--muted);text-decoration:none}.foot-more a:hover{color:var(--primary)}
.sup-fab{position:fixed;inset-inline-start:1rem;bottom:5.2rem;z-index:60}
.sup-fab>summary{list-style:none;cursor:pointer;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.sup-fab>summary::-webkit-details-marker{display:none}
.sup-list{position:absolute;bottom:3.6rem;inset-inline-start:0;min-width:11rem;display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.18);overflow:hidden}
.sup-list a{padding:.6rem .9rem;color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:600;border-bottom:1px solid var(--line)}.sup-list a:last-child{border-bottom:0}.sup-list a:hover{background:var(--primary-50)}
@media (min-width:901px){.sup-fab{bottom:1.4rem}}

/* step 43: SMS gateway cards */
.sms-card{background:var(--field-2);border-radius:18px;padding:1rem 1.2rem;margin:.9rem 0;border:1px solid transparent}
.sms-card.on{border-color:var(--primary,#0d63ff)}
.sms-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sms-head h4{margin:0;font-size:.95rem}
.sms-state{display:inline-flex;align-items:center;gap:.4rem;background:var(--card,#fff);padding:.3rem .8rem;border-radius:999px;font-size:.8rem;cursor:pointer}
.sms-state .dot{width:8px;height:8px;border-radius:50%;background:#ef4444}.sms-state .dot.ok{background:#16a34a}
.sms-conn{margin:.5rem 0;font-size:.8rem;color:#ef4444}.sms-conn.ok{color:#16a34a}
.sms-ev{margin:0 0 1rem}.sms-ev textarea{width:100%;min-height:3.4rem}
.sms-none{margin-top:.6rem}

/* roadmap step 47a (0.8.36) — «علاقه‌مندی‌ها» in the account frame: the list-page cards with «×» on each */
.fv-n{font-weight:500;color:var(--muted-2);font-size:.8rem}
.fv-grid{--cols:3}
.fv-cell{position:relative;background:var(--card);min-width:0}
.fv-cell form{margin:0}
.fv-x{inset-block-start:.6rem;inset-inline-start:.6rem;z-index:2}
.fv-x:hover,.fv-x:focus-visible{background:var(--danger);color:#fff;outline:0}
.fv-more{text-align:center;margin:1rem 0 0}
@media (max-width:900px){.fv-grid{--cols:2}}


/* ===== roadmap step 47b (0.8.37): compare — the table page and the floating bar ===== */
.pp-tool[data-pp-act="compare"][aria-pressed="true"]{color:var(--primary)}
.cmp{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:1.1rem 1.2rem 1.3rem;min-width:0}
.cmp-title{font-size:1.05rem;margin:0 0 .9rem}
.cmp-n{font-weight:500;color:var(--muted-2);font-size:.8rem}
.cmp-note{background:var(--warn-50);color:var(--ink);border-radius:var(--r-md);padding:.6rem .9rem;font-size:.82rem;margin:0 0 .8rem}
.cmp-more{text-align:center;margin:1rem 0 0}
.cmp-tools{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 0 .7rem;font-size:.82rem}
.cmp-diff{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-weight:600;color:var(--ink-2)}
.cmp-clear{color:var(--muted-2);text-decoration:none}
.cmp-clear:hover,.cmp-clear:focus-visible{color:var(--danger);outline:0}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);-webkit-overflow-scrolling:touch}
.cmp-scroll:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.cmp-tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:620px;font-size:.84rem}
.cmp-tbl[data-cols="3"]{min-width:830px}.cmp-tbl[data-cols="4"]{min-width:1020px}
.cmp-tbl th,.cmp-tbl td{padding:.65rem .8rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;overflow-wrap:anywhere}
.cmp-tbl th[scope="row"],.cmp-corner{width:132px;min-width:132px;background:var(--field-2);color:var(--ink-2);font-weight:700;position:sticky;inset-inline-start:0;z-index:2}
.cmp-tbl tbody tr:last-child>*{border-bottom:0}
.cmp-tbl td{min-width:190px;color:var(--ink)}
.cmp-col{position:relative;min-width:190px;background:var(--card);font-weight:500;text-align:center!important;padding-top:1.9rem!important}
.cmp-x{position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--ink-2);display:grid;place-items:center;line-height:1;text-decoration:none!important;font-size:1rem}
.cmp-x:hover,.cmp-x:focus-visible{background:var(--danger);color:#fff;outline:0}
.cmp-img{display:grid;place-items:center;width:140px;height:140px;margin:0 auto .5rem;border-radius:var(--r-md);background:var(--field-2);overflow:hidden}
.cmp-img img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-noimg{color:var(--muted)}
.cmp-name{display:block;color:var(--ink);font-weight:700;font-size:.84rem;line-height:1.7;text-decoration:none;margin-bottom:.4rem}
.cmp-name:hover,.cmp-name:focus-visible{color:var(--primary);outline:0}
.cmp-price{display:flex;justify-content:center;margin-bottom:.6rem;min-height:2.2rem}
.cmp-price .pc-prices{align-items:center}
.cmp-buy{width:100%}
.cmp-add{vertical-align:middle!important}
.cmp-add a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:150px;border:2px dashed var(--line);border-radius:var(--r-lg);color:var(--muted-2);text-decoration:none;font-weight:700}
.cmp-add a:hover,.cmp-add a:focus-visible{color:var(--primary);border-color:var(--primary);outline:0}
.cmp-plus{font-size:1.8rem;line-height:1}
.cmp-sec th{background:var(--primary-50);color:var(--primary-600);font-weight:800;font-size:.8rem;text-align:start}
.cmp-tbl .cmp-none{color:var(--muted)}
.cmp-blank{background:transparent}
.cmp-tbl.only-diff tr[data-same="1"],.cmp-tbl.only-diff tr.cmp-sec.is-empty{display:none}

.cmp-bar{position:fixed;inset-inline:0;bottom:0;z-index:38;display:flex;justify-content:center;padding:0 .6rem calc(.6rem + env(safe-area-inset-bottom,0px));pointer-events:none}
.cmp-bar[hidden]{display:none}
.cmp-in{pointer-events:auto;display:flex;align-items:center;gap:.8rem;width:min(760px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 10px 36px rgba(20,40,90,.22);padding:.55rem .8rem}
.cmp-items{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;list-style:none;margin:0;padding:0;overflow-x:auto}
.cmp-it{position:relative;flex:none;width:48px;height:48px;border-radius:var(--r-md);background:var(--field-2);display:grid;place-items:center;font-size:.6rem;color:var(--muted-2)}
.cmp-it img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.cmp-it button{position:absolute;inset-block-start:-6px;inset-inline-start:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:var(--card);font-size:.8rem;line-height:1;cursor:pointer;padding:0}
.cmp-it button:hover,.cmp-it button:focus-visible{background:var(--danger);outline:0}
.cmp-info{display:flex;flex-direction:column;gap:.1rem;font-size:.76rem;color:var(--ink-2);min-width:0;flex:none}
.cmp-info b{color:var(--ink);font-size:.82rem}
.cmp-go{flex:none;white-space:nowrap}
.cmp-go[aria-disabled="true"]{opacity:.5;pointer-events:none}
.cmp-off{flex:none;border:0;background:none;color:var(--muted-2);font:inherit;font-size:.76rem;cursor:pointer;padding:.3rem}
.cmp-off:hover,.cmp-off:focus-visible{color:var(--danger);outline:0}
@media (max-width:900px){
  .cmp{padding:.8rem .6rem 1rem;border-radius:var(--r-lg)}
  .cmp-bar{bottom:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:.4rem}
  body.has-mbar .cmp-bar{bottom:calc(122px + env(safe-area-inset-bottom,0px))}
  .cmp-info span{display:none}
  .cmp-tbl th[scope="row"],.cmp-corner{width:92px;min-width:92px;padding-inline:.5rem}
  .cmp-tbl td,.cmp-col{min-width:150px}
  .cmp-tbl,.cmp-tbl[data-cols="3"],.cmp-tbl[data-cols="4"]{min-width:0}
  .cmp-img{width:104px;height:104px}
}

/* ===== 0.8.38 — price alert (product page panel), «هشدار قیمت», «اعلان‌ها» and the header bell ===== */
.sf-tools .bell{position:relative}
.sf-tools .bell .badge-count{position:absolute;top:-3px;inset-inline-start:-3px;min-width:18px;height:18px;border-radius:6px;font-size:.65rem;padding:0 .25rem}
.pp-tool[data-pp-act="alert"][aria-pressed="true"]{color:var(--primary)}
.pp-tool[data-pp-act="alert"][aria-pressed="true"] .ico{fill:currentColor}
.pp-alert{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:.9rem 1rem;margin:.2rem auto .8rem;max-width:380px;font-size:.84rem}
.pp-alert[hidden]{display:none}
.pp-alert form{display:grid;gap:.55rem}
.pp-al-now,.pp-al-cur,.pp-al-guest,.pp-al-msg{margin:0}
.pp-al-now b{color:var(--ink)}
.pp-al-cur{color:var(--primary);font-weight:700}
.pp-al-cur[hidden],.pp-al-msg[hidden],.pp-al-t[hidden],.pp-alert [data-alert-remove][hidden]{display:none}
.pp-al-opt{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.pp-al-t input{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink);padding:.5rem .7rem;font:inherit;text-align:left}
.pp-al-msg{color:var(--danger);font-weight:600}
.pp-al-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pp-al-all{margin-inline-start:auto;font-size:.78rem;color:var(--muted-2)}

.al-list,.nt-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.al-row{display:grid;grid-template-columns:64px 1fr auto;gap:.8rem;align-items:center;background:var(--field-2);border-radius:var(--r-lg);padding:.7rem .8rem}
.al-row.done{opacity:.8}
.al-img{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:var(--card);overflow:hidden;color:var(--muted)}
.al-img img{width:100%;height:100%;object-fit:cover}
.al-body{display:grid;gap:.2rem;min-width:0}
.al-t{font-weight:800;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.al-t:hover{color:var(--primary)}
.al-w,.al-now{font-size:.8rem;color:var(--muted-2)}
.al-now b{color:var(--ink)}
.al-side{display:grid;gap:.3rem;justify-items:end;text-align:end}
.al-side small{color:var(--muted-2);font-size:.72rem}
.al-st{display:inline-block;border-radius:99px;background:var(--line);color:var(--ink-2);font-size:.72rem;font-weight:700;padding:.1rem .7rem}
.al-st.on{background:var(--primary-50);color:var(--primary)}
.al-x{border:0;background:transparent;color:var(--danger);cursor:pointer;font:inherit;font-size:.78rem;padding:.2rem .3rem}
.al-x:hover{text-decoration:underline}

.nt-row{display:flex;align-items:center;gap:.6rem;background:var(--field-2);border-radius:var(--r-lg);padding:.7rem .9rem;border-inline-start:4px solid transparent}
.nt-row.unread{background:var(--primary-50);border-inline-start-color:var(--primary)}
.nt-main{flex:1;min-width:0;display:grid;gap:.15rem;color:var(--ink);text-decoration:none}
.nt-type{font-size:.72rem;color:var(--primary);font-weight:700}
.nt-title{font-size:.88rem}
.nt-row:not(.unread) .nt-title{font-weight:600}
.nt-body{font-size:.8rem;color:var(--ink-2)}
.nt-time{color:var(--muted-2);font-size:.72rem}
@media (max-width:900px){
  .al-row{grid-template-columns:52px 1fr;grid-template-areas:"i b" "s s"}
  .al-img{width:52px;height:52px;grid-area:i}.al-body{grid-area:b}
  .al-side{grid-area:s;grid-auto-flow:column;justify-content:space-between;align-items:center;justify-items:start;text-align:start}
}

/* ---- roadmap «۲۰ بخش», part 4 (0.8.39): تیکت‌های مشتری ---- */
.tk-list{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.tk-row{background:var(--field-2);border-radius:var(--r-lg);border-inline-start:4px solid transparent}
.tk-row.fresh{background:var(--primary-50);border-inline-start-color:var(--primary)}
.tk-main{display:flex;flex-direction:column;gap:.3rem;padding:.75rem .95rem;color:inherit;text-decoration:none}
.tk-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tk-subject{font-size:.9rem;overflow-wrap:anywhere;flex:1 1 12rem}
.tk-meta{color:var(--muted-2);font-size:.75rem}
.tk-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.tk-chips .fbk-chip{display:inline-flex;align-items:center;line-height:1.9;text-decoration:none}
.tk-thread{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.tk-msg{background:var(--field-2);border-radius:var(--r-lg);padding:.8rem 1rem}
.tk-msg.staff{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--primary)}
.tk-msg.fresh{box-shadow:0 0 0 2px var(--primary-glow)}
.tk-msg-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem}
.tk-msg-head small{color:var(--muted-2);margin-inline-start:auto}
.tk-msg-body{margin:.45rem 0 0;font-size:.88rem;line-height:1.9;overflow-wrap:anywhere}
.tk-file{display:inline-flex;align-items:center;margin-top:.5rem;padding:.25rem .8rem;border-radius:99px;background:var(--primary-50);color:var(--primary);font-size:.78rem;font-weight:700;text-decoration:none}
.tk-close{margin-top:.8rem}
@media (max-width:640px){.tk-msg-head small{margin-inline-start:0;width:100%}.tk-subject{flex-basis:100%}}

/* Roadmap part 8 (0.8.43) — «منوساز»: the tree of /admin/menus and the drop-down of the storefront header */
.tabs a small{opacity:.75;font-weight:600;margin-inline-start:.25rem}
.mn-tree,.mn-sub{list-style:none;margin:0;padding:0}
.mn-tree{margin-top:.9rem;display:flex;flex-direction:column;gap:.45rem}
.mn-sub{margin-top:.45rem;margin-inline-start:1.6rem;padding-inline-start:.8rem;border-inline-start:2px dashed var(--line);display:flex;flex-direction:column;gap:.45rem}
.mn-sub:empty{display:none}
.mn-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--field-2);border:1px solid var(--line);border-radius:var(--r-md);padding:.55rem .8rem;cursor:grab;position:relative}
.mn-row:active{cursor:grabbing}
.mn-handle{color:var(--muted-2);display:inline-flex}
.mn-label{display:flex;flex-direction:column;min-width:8rem;flex:1 1 12rem}
.mn-label b{font-size:.9rem}.mn-label small{color:var(--muted-2);font-size:.74rem;overflow-wrap:anywhere}
.mn-act{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.mn-act form{margin:0}
.mn-act .btn[disabled]{opacity:.35;cursor:not-allowed}
.mn-off>.mn-row{opacity:.6}
.mn-dragging>.mn-row{opacity:.4;border-style:dashed}
.mn-drop-before{box-shadow:0 -3px 0 0 var(--primary)}.mn-drop-after{box-shadow:0 3px 0 0 var(--primary)}
.mn-drop-into{outline:2px solid var(--primary);outline-offset:-2px;background:var(--primary-50)}
.mn-save{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.mn-dirty{color:#9a6400;font-weight:700}
.mn-reset{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--line)}
@media (max-width:640px){.mn-sub{margin-inline-start:.6rem}.mn-act{width:100%}}
/* header link with sub-links (menu builder, part 8): the sub-links open under it on hover or keyboard focus */
.sf-nav .nav-dd{position:relative;display:inline-flex;align-items:center}
.sf-nav .nav-dd>a{color:inherit;text-decoration:none;white-space:nowrap} .sf-nav .nav-dd>a:hover{color:var(--primary)}
.sf-nav .nav-dd>a::after{content:"▾";font-size:.7rem;margin-inline-start:.35rem;color:var(--muted-2)}
.sf-nav .nav-sub{display:none;position:absolute;top:100%;inset-inline-start:0;flex-direction:column;min-width:12rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:.4rem;z-index:30}
.sf-nav .nav-dd:hover .nav-sub,.sf-nav .nav-dd:focus-within .nav-sub{display:flex}
.sf-nav .nav-sub a{display:block;padding:.45rem .8rem;border-radius:10px;color:var(--ink);text-decoration:none;white-space:nowrap;font-weight:600}
.sf-nav .nav-sub a:hover{background:var(--primary-50);color:var(--primary)}
.drawer-body ul.plain ul{padding-inline-start:1rem;margin-top:.2rem}

/* Part 12 (قالب): touch sorting in the template editor and the menu builder, the list of older versions */
.tpl-list .tpl-grip,.mn-handle{touch-action:none;-webkit-user-select:none;user-select:none}
.tpl-list li.is-touch-drag{box-shadow:var(--shadow);opacity:.95;outline:2px solid var(--primary)}
html.zs-sorting,html.zs-sorting body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (pointer:coarse){.tpl-list .tpl-grip{padding:.9rem .8rem .9rem .9rem;font-size:1.15rem;line-height:1}.mn-handle{padding:.7rem}}
.tpl-versions{margin-top:1rem}
.tpl-versions h2{font-size:1rem;margin:0 0 .3rem}
.tpl-ver-tbl td{vertical-align:middle;font-size:.82rem}
.tpl-ver-tbl form{margin:0}

/* part 6 (0.8.49): the cashback line of the payment summary */
.ct-cashback{display:flex;align-items:flex-start;gap:.4rem;color:var(--ok,#15803d);}
.ct-cashback svg{flex:none;margin-top:.2rem;}

/* roadmap «۲۰ بخش», part 5 (0.8.50): reviews / questions inbox, «نظرات شما», wage table */
.sfb-list{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.sfb-item{background:var(--field-2);border-radius:var(--r-lg);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.45rem}
.sfb-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem}
.sfb-product{font-weight:700;color:var(--primary);text-decoration:none;overflow-wrap:anywhere}
.sfb-stars{color:#e5a100;letter-spacing:1px}
.sfb-meta{color:var(--muted-2);font-size:.75rem}
.sfb-head .sfb-meta{margin-inline-start:auto}
.sfb-title{font-size:.9rem}
.sfb-body{margin:0;font-size:.88rem;line-height:1.9;overflow-wrap:anywhere}
.sfb-points{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem}
.sfb-points ul{margin:0;padding-inline-start:1.1rem}.sfb-points .pos li::marker{color:#14805a}.sfb-points .neg li::marker{color:#c2323a}
.sfb-reply{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--primary);border-radius:var(--r-md);padding:.6rem .85rem}
.sfb-reply-head{display:flex;gap:.5rem;align-items:center;font-size:.82rem;margin-bottom:.3rem}
.sfb-reply textarea,.sfb-form textarea{width:100%}
.sfb-form .actions,.sfb-reply .actions{margin-top:.4rem}
.sfb-del{margin-top:.4rem}
.sw-tbl td{vertical-align:top;font-size:.82rem}
.sw-out{background:var(--danger-50)}
.sw-err{color:#c2323a}
@media (max-width:640px){.sfb-head .sfb-meta{margin-inline-start:0;width:100%}}

/* roadmap «۲۰ بخش», part 14 (0.8.52): charts of the seller dashboard, the cancel form of a parcel, the seller's notifications */
.sd-charts{display:grid;grid-template-columns:3fr 2fr;gap:1rem;align-items:start}
@media (max-width:900px){.sd-charts{grid-template-columns:1fr}}
.sd-bars{display:flex;align-items:flex-end;gap:.35rem;height:170px;padding-top:.4rem;border-bottom:1px solid var(--line)}
.sd-bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.3rem;position:relative}
.sd-bar i{display:block;width:100%;max-width:26px;border-radius:6px 6px 0 0;background:var(--primary);min-height:0}
.sd-bar span{position:absolute;bottom:-1.5rem;font-size:.62rem;color:var(--muted-2);white-space:nowrap}
.sd-bars{margin-bottom:1.7rem}
@media (max-width:520px){.sd-bar:nth-child(even) span{display:none}}
.sd-hbars{display:grid;gap:.7rem}
.sd-hbar{display:grid;grid-template-columns:7.5rem 1fr 2.2rem;gap:.6rem;align-items:center;color:inherit;text-decoration:none;font-size:.85rem}
.sd-hbar em{display:block;height:10px;border-radius:99px;background:var(--field-2);overflow:hidden}
.sd-hbar i{display:block;height:100%;border-radius:99px;background:var(--primary)}
.sd-hbar i.ok{background:var(--success)} .sd-hbar i.warn{background:var(--warn)} .sd-hbar i.err{background:var(--danger)}
.sd-hbar b{text-align:end}
.od-cancel{margin-top:.8rem}
.od-cancel input{flex:1;min-width:200px}
.btn.danger{background:var(--danger-50);color:var(--danger);border-color:transparent}
.sd-nt-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.sd-nt-head h2 small{font-weight:500;color:var(--muted-2)}
.sd-nt-tabs{display:flex;gap:.5rem;margin:.6rem 0 1rem}
.sd-nt-tabs a{padding:.3rem .9rem;border-radius:99px;background:var(--field-2);color:inherit;text-decoration:none;font-size:.85rem}
.sd-nt-tabs a.active{background:var(--primary);color:#fff}
.sd-nt-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sd-nt-row{display:flex;gap:.8rem;align-items:center;justify-content:space-between;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px}
.sd-nt-row.unread{background:var(--primary-50);border-color:transparent}
.sd-nt-main{display:grid;gap:.25rem;color:inherit;text-decoration:none;min-width:0}
.sd-nt-main .fbk-chip{justify-self:start}
.sd-nt-body{color:var(--muted-2);font-size:.85rem}
.sd-nt-main small{color:var(--muted-2)}
.bell-n{position:absolute;top:-4px;inset-inline-end:-4px}
.topbar .iconbtn{position:relative}

/* roadmap «۲۰ بخش», part 15 (0.8.53): «نقشه» — the small slippy map of public/assets/js/map.js (address form, pickup centers, admin order, shop office) */
.zmap{position:relative;height:280px;min-height:200px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--field-2);overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;direction:ltr}
.zmap.is-pick{cursor:crosshair}.zmap.is-drag{cursor:grabbing}
.zmap:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.zmap-tiles{position:absolute;inset:0;overflow:hidden}
.zmap-tile{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
[data-theme="dark"] .zmap-tile{filter:brightness(.78) contrast(1.05) saturate(.85)}
.zmap-pin{position:absolute;left:0;top:0;width:28px;height:38px;margin:-38px 0 0 -14px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.zmap-pin[hidden]{display:none}
.zmap-pin svg{display:block}
.zmap-ctl{position:absolute;top:.6rem;inset-inline-end:.6rem;display:flex;flex-direction:column;gap:.35rem;z-index:2}
.zmap-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:1.05rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;padding:0}
.zmap-btn:hover{background:var(--primary-50)}.zmap-btn:disabled{opacity:.45;cursor:not-allowed}
.zmap-attr{position:absolute;inset-inline-start:0;bottom:0;z-index:2;padding:.1rem .5rem;font-size:.68rem;line-height:1.6;color:#333;background:rgba(255,255,255,.78);border-top-right-radius:8px;direction:ltr}
.zmap-hint{position:absolute;top:.6rem;inset-inline-start:.6rem;z-index:2;max-width:calc(100% - 4.4rem);padding:.2rem .65rem;border-radius:999px;font-size:.74rem;color:var(--ink-2);background:var(--card);border:1px solid var(--line);direction:rtl;pointer-events:none;opacity:.92}
.zmap-off{display:block;padding:1rem;color:var(--muted-2);font-size:.85rem;direction:rtl}
.zmap-open{display:inline-block;margin-top:.45rem;font-size:.82rem}
.zmap-in{margin-top:.6rem}
.od-map{margin-top:.8rem}.od-map .zmap{height:260px}
@media (max-width:640px){.zmap{height:240px}.zmap-hint{display:none}}
.sms-pat{margin-top:.5rem}.sms-pat input{max-width:20rem}.sms-pat small{display:block;margin-top:.2rem}

/* roadmap «۲۰ بخش», part 16 (0.8.54): «حالت تعمیر و نگهداری» page and the stats pages (visits, products) */
.mnt-card{text-align:center;padding-top:2.2rem}.mnt-ico{color:var(--primary);margin-bottom:.4rem}.mnt-title{font-size:1.25rem!important;margin:.4rem 0 .8rem!important}.mnt-note{margin:0 0 1.4rem}
.stt-range{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:flex-end}.stt-presets{display:flex;flex-wrap:wrap;gap:.4rem;width:100%}.stt-range .field{margin:0;max-width:11rem}.stt-note{width:100%;margin:0}.stt-err{color:var(--danger,#d33);font-weight:700;margin-inline-start:.5rem}
.stt-switch{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center}.stt-switch .hint{width:100%;margin:0}
/* roadmap «۲۰ بخش», part 13 (0.8.51): the customer's own moves on an order, «مرجوعی‌ها» and the admin queue */
.ao-do .ao-acts form{margin:0}.ao-cancel summary,.ao-ret summary{cursor:pointer;list-style:none}.ao-cancel summary::-webkit-details-marker,.ao-ret summary::-webkit-details-marker{display:none}
.ao-form{display:grid;gap:.5rem;margin-top:.7rem;max-width:34rem}.ao-form label{font-size:.8rem;color:var(--ink-2)}.ao-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);padding:.5rem .7rem;font:inherit;resize:vertical}.ao-form .btn{justify-self:start}
.ao-g-r{grid-column:2/-1;font-size:.78rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.ao-g-r a{color:var(--primary);text-decoration:none}
.ao-ret{display:block}.ao-ret summary{color:var(--primary);font-weight:700}.ao-g-no{color:var(--muted-2)}
.rt-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.8rem}.rt-top{display:grid;grid-template-columns:48px 1fr auto;gap:.3rem .8rem;align-items:center}
.rt-reason{margin:.6rem 0 0;font-size:.82rem;line-height:1.9}.rt-reason.ok{color:#14805a;font-weight:700}
.ct-pf{display:flex;justify-content:center;gap:.35rem;margin-top:.6rem}
.rq-note{width:100%;min-width:9rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);padding:.3rem .5rem;font:inherit;font-size:.8rem}
.rq-acts{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}.rq-acts form{margin:0;display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   «خانه»-style skin — page background, cards, bottom bar, fields and tabs follow the
   home section of the personalised panel (islami-bank-trade: personalization.css).
   Appended last on purpose so it wins over the earlier component rules.
   ========================================================================== */
:root{--line-soft:#edeef5;--card-shadow:0 6px 24px -14px rgba(10,104,71,.25);--nav-shadow:0 10px 30px -8px rgba(10,104,71,.22);--r-card:20px;--r-field:14px}
[data-theme="dark"]{--line-soft:#241e11;--card-shadow:0 6px 24px -14px rgba(0,0,0,.6);--nav-shadow:0 10px 30px -8px rgba(0,0,0,.6)}

/* page background: the same soft glows as the home page */
body{
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(235,180,15,.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(10,104,71,.04), transparent 60%),
    var(--bg-store);
  background-repeat:no-repeat;min-height:100vh;
}
[data-theme="dark"] body{
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(235,180,15,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 100%, rgba(235,180,15,.06), transparent 60%),
    var(--bg-store);
  background-repeat:no-repeat;
}
.panel{background:transparent}
::selection{background:var(--accent);color:#141005}

/* cards: white surface, hairline border, 20px corners, soft green shadow */
.box,.stat,.rate,.cat-card,.mcard,.auth-card,.hs-white,.ps-box,.fcard,.ct-card,.pf-box,.soon-box,.cmp,.ad-box,.fst-card{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--card-shadow);
}
.rates-bar.compact .rate{box-shadow:none;border-radius:14px}
.hs-white,.ps-box{overflow:hidden}
.sidebar{border-inline-end:1px solid var(--line-soft);box-shadow:6px 0 30px rgba(30,34,60,.04)}
[data-theme="dark"] .sidebar{box-shadow:none}
.topbar,.sf-nav{border-bottom:1px solid var(--line-soft)}

/* fields: rounded, hairline border, green focus */
.input,.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:var(--r-field);background:var(--card)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus,.cell:focus{border-color:var(--primary);background:var(--card)}
.sf-search{border:1px solid var(--line);background:var(--card);border-radius:var(--r-field)}
.btn{border-radius:var(--r-field)}
.btn.sm{border-radius:12px}

/* tabs and chips keep their original look (primary-coloured active tab, dark active sort pill) */
.pp-tabs{border-bottom:1px solid var(--line-soft)}

/* mobile bottom bar: floating rounded pill like the home navigation */
@media (max-width:900px){
  .bottom-bar{
    inset-inline:auto;left:50%;right:auto;transform:translateX(-50%);
    width:min(calc(100% - 24px),420px);bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:8px 6px;border-radius:26px;border:1px solid var(--line-soft);box-shadow:var(--nav-shadow);
  }
  .bottom-bar a,.bottom-bar button{color:var(--muted-2);font-weight:500;font-size:.7rem}
  .bottom-bar .on{color:var(--primary);font-weight:700}
  .bottom-bar .on span{background:transparent;padding:0}
  body.store{padding-bottom:104px}
}

/* ==========================================================================
   نرخ آنی in the menu row (next to the phone number) — styled like the live-price box of the
   personalised «خانه»: gold-tinted rounded box, blinking live dot, muted label + bold value.
   On mobile the (hidden) menu row only carries this box, full width on every page.
   ========================================================================== */
.sf-nav .sf-rates{
  flex:1;min-width:0;margin:0;display:flex;align-items:center;gap:.5rem;
  padding:.4rem .9rem;border-radius:12px;background:rgba(235,180,15,.10);font-size:12.5px;
}
.sf-rates::before{
  content:"";flex:0 0 auto;position:relative;width:9px;height:9px;margin-inline:.2rem;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent),0 0 8px 1px color-mix(in srgb,var(--accent) 55%,transparent);
  animation:zsLiveBlink 1.05s ease-in-out infinite;
}
@keyframes zsLiveBlink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sf-rates::before{animation:none}}
.sf-rates .rates-bar.compact{flex:1;min-width:0;margin:0;padding:0;gap:1.1rem;background:transparent}
.sf-rates .rates-bar.compact .rate{
  background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;gap:.4rem;
}
.sf-rates .rates-bar.compact .rate small{font-size:12.5px;color:var(--muted-2)}
.sf-rates .rates-bar.compact .rate b{font-size:14px;font-weight:700;color:var(--ink)}
.sf-rates .hint{display:none}

@media (max-width:900px){
  .sf-nav{display:block;padding:0;border:0;margin:.3rem 0 0}
  .sf-nav>*:not(.sf-rates){display:none}
  .sf-nav .sf-rates{width:100%;padding:11px 14px}
}

/* single live price: «قیمت لحظه‌ای طلا ۱۸ عیار:» on the right, price + تومان on the left */
.sf-rates .rates-bar.single{overflow:visible}
.sf-rates .rates-bar.single .rate{flex:1;min-width:0;justify-content:space-between;gap:.6rem;white-space:nowrap}
.sf-rates .rates-bar.single .rate small{flex:0 1 auto}
.sf-rates .rates-bar.single .rate b{margin-inline-start:auto;direction:rtl}
.sf-rates .rates-bar.single .rate .dir{flex:none;min-width:.8rem}
@media (min-width:901px){
  .sf-nav .sf-rates{flex:0 1 460px;margin-inline-start:auto}
  .sf-nav .nav-phone{margin-inline-start:0}
}