/* ============================================================================
   دفترچه قیمت های‌برق — McMaster-Carr interface, mirrored to RTL.

   Tokens, geometry and component rules are lifted from the local mirror at
   ~/Desktop/Folders/McMasterCarr (site/.../ScriptCombiner/*.css + reference/
   mcm.css). The brand-card block is the `_t8yku_` CSS module from the
   production bundle; its inline dimensions are not in the bundle, so they were
   measured off the reference screenshot (2x): card 641x222 image-px -> 320x111
   CSS px, 22px gutter -> 11px.

   Persian glyphs come from the family named in --font-fa (currently Dana);
   every Latin glyph and figure comes from McMaster's own four faces *on
   localhost only* — package.sh strips those, so the shipped site draws
   Latin and figures from --font-fa too.
   ========================================================================= */

/* ── McMaster's four faces (local reference use — licensed, do not deploy) ── */
/* ── فونتِ فارسی ──────────────────────────────────────────────────────────
   دانا (fontiran.com، پروانهٔ تجاری). از میانِ پنج نامزدِ سنجیده‌شده انتخاب
   شد: از همه به وزیرمتنِ قبلی نزدیک‌تر بود — همان بلندای حرف (۳۱٫۸) و
   تقریباً همان پهنا (+۰٫۶٪) — پس جدولِ ۱۳۳ ردیفی سرِ جایش ماند.

   ⚠️ وزیرمتن حذف نشود. دانا این سه نویسه را ندارد و هر سه در صفحه چاپ
   می‌شوند: «—» (U+2014) یعنی «قیمت ندارد»، «·» (U+00B7) جداکنندهٔ
   «کد · برند · کد کارخانه»، و «–» (U+2013). وزیرمتن پوششان می‌دهد، و
   مرورگر فایلش را فقط وقتی می‌گیرد که به یکی از آن‌ها بربخورد. اگر روزی
   وزیرمتن هم برود، اول باید «·» را با «•» عوض کرد — آن یکی در دانا هست. */
/* ⚠️ فقط وزنِ ۴۰۰ می‌ماند و همین کافی است: بعد از برداشتنِ بولد، هیچ قاعده‌ای
   در هیچ‌کدام از دو شیوه‌نامه وزنِ دیگری نمی‌خواهد (بررسی شد: صفر اعلانِ
   غیر۴۰۰). فایل‌های ۳۰۰ و ۵۰۰ و ۶۰۰ و ۷۰۰ برداشته شدند — ۳۸۰ کیلوبایتی که
   هرگز دانلود نمی‌شد ولی در هر بسته می‌رفت. اگر روزی وزنی لازم شد، فایلش از
   همان آرشیوِ فونت برمی‌گردد و یک سطر @font-face اضافه می‌شود. */
@font-face{font-family:Dana;src:url(../fonts/dana-400.woff2) format('woff2');font-weight:400;font-display:swap}
/* وزیرمتن، فقط برای نُه نویسه‌ای که دانا ندارد.
   ⚠️ فایلِ کامل ۵۰٬۶۸۴ بایت بود و در عمل **روی هر صفحه** دانلود می‌شد: «·»
   جداکنندهٔ سرصفحهٔ حساب، پنلِ کالا، سبد و پاورقیِ مدیریت است، و «—» یعنی
   «قیمت ندارد». پس آن جملهٔ «فقط وقتی گرفته می‌شود که یکی از سه نویسه
   بیاید» درست بود ولی معنایش «همیشه» از آب درمی‌آمد.
   زیرمجموعه ۱٬۰۷۲ بایت است — ۴۹٫۶ کیلوبایت کمتر — و متریکِ هر نُه گلیف
   بیت‌به‌بیت همان است، پس هیچ‌چیز روی صفحه تکان نمی‌خورد.
   `unicode-range` کاری می‌کند که وعده بالاخره راست باشد: مرورگر این فایل
   را فقط وقتی می‌آورد که واقعاً یکی از این نویسه‌ها روی صفحه باشد.
   ⚠️ نامِ فایل تازه است، چون آروان‌کلاود به ?v= اعتنا نمی‌کند و بایتِ تازه
   زیرِ نامِ کهنه یک سالِ تمام از کش می‌آید. */
@font-face{font-family:Vazirmatn;src:url(../fonts/vazirmatn-punct-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0060,U+00A7,U+00B7,U+2012-2015,U+2113,U+2116}

/* ── tokens ───────────────────────────────────────────────────────────────
   ساختار و اندازه‌ها از CSS تولیدیِ مرجع‌اند، ولی رنگِ کنش دیگر سبزِ آن نیست:
   مشکیِ خودِ های‌برق نشسته (#0B0B0D، همان مشکیِ حروفِ نشان).
   نامِ توکن‌ها (green) عوض نشده تا ارجاع‌های موجود نشکنند. */
:root{
  --color-black:#000; --color-white:#fff;
  --color-green:#0b0b0d; --color-hovergreen:#33333a; --color-activegreen:#000000;
  --color-hovertilegreen:#f1f1f2;
  --color-yellow:#fed700; --color-hoveryellow:#ffffb5;
  --color-blue:#006699; --color-lightblue:#4499dd; --color-purple:#8C00C8;
  --color-hibarghblue:#134AFF; /* آبیِ نقطهٔ نشانِ های‌برق */
  --color-hibarghblue-hover:#0e3ad1;
  --color-charcoal:#333; --color-darkgrey:#666; --color-grey:#878787;
  --color-mediumgrey:#999; --color-lightgrey:#cbcbcb; --color-ultralightgrey:#eee;
  --color-cardline:#c4c4c4;              /* _outerContainer_t8yku_1 inset ring */
  /* ⚠️ تنها پیچِ فونتِ فارسی. نامزدِ بعدی که آمد، همین یک سطر عوض می‌شود.
     چهار پشتهٔ زیر همه به همین می‌رسند، و چهار جای پراکنده‌ای که قبلاً
     مستقیم «Vazirmatn» می‌نوشتند هم حالا همین را صدا می‌زنند — وگرنه
     تعویضِ فونت چهار جا را جا می‌گذاشت و کسی تا دیدنِ صفحه نمی‌فهمید.

     ⚠️ و این را در ارزیابی یادت باشد: tools/package.sh چهار فونتِ لاتینِ
     مرجع را موقعِ بسته‌بندی از همین پشته‌ها بیرون می‌کشد (پروانهٔ تجاری).
     یعنی روی سایتِ واقعی *همه‌چیز* — لاتین، رقم، نقطه‌گذاری — از همین
     فونتِ فارسی می‌آید، نه فقط حروفِ فارسی.

     نامزدهای بازنده (IRANSansX، IRANYekanX، IRANYekan) هم از این‌جا و هم
     از fonts/ برداشته شدند؛ ماندنشان یعنی ۴۰۰ کیلوبایتِ بی‌مصرف در هر بسته. */
  --font-fa:Dana,Vazirmatn,arial,sans-serif;
  --font-body:var(--font-fa);
  --font-med:var(--font-fa);
  --font-din:var(--font-fa);
  --font-cond:var(--font-fa);
}
/* ⚠️ <b> و <strong> وزنِ پیش‌فرضِ مرورگر را دارند و هیچ قاعده‌ای در این فایل
   جلوشان را نمی‌گیرد. طرح هیچ‌جا بولد ندارد، پس این‌جا خنثی می‌شوند —
   وگرنه نامِ برند و مبلغِ سبد باز هم ضخیم درمی‌آمدند. */
b,strong{font-weight:inherit}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:12px/16px var(--font-body);color:var(--color-black);
  background:var(--color-white);direction:rtl;overflow-x:hidden;
  /* حاشیهٔ امنِ گوشی‌های ناچ‌دار — در حالتِ نصب‌شده نوار مرورگر نیست */
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  -webkit-text-size-adjust:100%}
a{color:var(--color-green);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── masthead (mirrored) ─────────────────────────────────────────────────── */
/* دو ردیف، مثلِ مرجع: بالا تماس و ورود، پایین نشان و جستجو و سبد.
   ارتفاعِ کلْ اندازه‌گیری شده است، نه حدسی — نشان از ۴۴ به ۳۰ آمد و سطرِ
   «دفترچه قیمت · بانک برق اصفهان» زیرِ نشان برداشته شد؛ آن سطر همان چیزی
   را می‌گفت که خودِ صفحه است. */
/* ستونِ میانی با دو ۱fr در دو سو محاصره شده، نه با `auto` در کنارها:
   دو ستونِ ۱fr همیشه هم‌اندازه‌اند، پس جعبهٔ جستجو دقیقاً وسطِ صفحه می‌افتد
   حتی وقتی نشان (۱۱۴px) و «سبد سفارش» (~۱۲۰px) هم‌عرض نیستند — همان کاری
   که مرجع می‌کند: نشانش ۲۲۲px است و نوارِ راستش ۱۸۷px، ولی جستجو سرِ ۷۰۴ از
   ۱۴۰۸ می‌نشیند. با `auto` در کنارها جستجو وسطِ *فضای باقی‌مانده* می‌افتد،
   نه وسطِ صفحه، و اختلافشان همان کجیِ دیده‌شده بود.
   ارتفاع: ۰ + ۳۳ + ۴۲ + ۵ = ۸۰px، به‌علاوهٔ خطِ ۲px — عددِ اندازه‌گیری‌شدهٔ
   مرجع، نه تخمین. */
.masthead{padding:calc(0px + env(safe-area-inset-top, 0px)) 16px 5px;display:grid;
  grid-template-columns:1fr minmax(0,700px) 1fr;grid-template-rows:33px 42px;
  column-gap:24px;align-items:center;max-width:1600px;margin-inline:auto;min-width:0}
.masthead>*{min-width:0}

/* ── ردیفِ بالا ───────────────────────────────────────────────────────────
   flex-end در RTL یعنی چپ — همان جایی که مرجع تماس و ورود را گذاشته. */
.mh-top{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:12px;
  justify-content:flex-end;min-height:22px;font-size:13px;line-height:22px}
.mh-tel{color:var(--color-charcoal);font-family:var(--font-fig,inherit);
  direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.mh-tel:hover{color:var(--color-hibarghblue);text-decoration:none}
.mh-bar{width:1px;height:13px;background:var(--color-lightgrey)}

.mh-acct{position:relative;display:flex;align-items:center;gap:12px}
/* ⚠️ [hidden] پیش از display می‌آید و !important دارد.
   `display:flex` قاعدهٔ پیش‌فرضِ مرورگر (`[hidden]{display:none}`) را
   می‌بازاند، پس «حسابِ من» و «مدیریت» که باید تا لحظهٔ ورود پنهان باشند،
   روی هر صفحه‌ای به مهمان هم نشان داده می‌شدند. */
.mh-acct-b[hidden]{display:none!important}
.mh-acct-b{font:400 13px/22px var(--font-body);color:var(--color-green);
  display:flex;align-items:center;gap:5px;padding:0}
.mh-acct-b:hover{text-decoration:none;color:var(--color-hibarghblue)}
.mh-acct-b .caret{width:0;height:0;border:4px solid transparent;
  border-top-color:currentColor;margin-top:3px}
.mh-acct-b[aria-expanded="true"] .caret{transform:rotate(180deg);margin-top:-3px}

/* ── جعبهٔ ورود ───────────────────────────────────────────────────────────
   روی همان دکمه باز می‌شود و از لبهٔ صفحه بیرون نمی‌زند: در RTL نقطهٔ اتکا
   چپِ دکمه است، پس left:0. */
.mh-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:320px;
  max-width:calc(100vw - 32px);background:var(--color-white);
  border:1px solid var(--color-lightgrey);box-shadow:0 6px 24px rgba(0,0,0,.16);
  padding:18px 20px 20px;text-align:right;border-radius:10px}
.mh-pop h2{margin:0 0 14px;font:400 17px/1.3 var(--font-body);color:var(--color-green)}
.mh-pop-x{position:absolute;top:8px;left:10px;font-size:20px;line-height:1;
  color:var(--color-darkgrey);padding:4px}
.mh-pop-x:hover{color:var(--color-green)}
.mh-pop input[type=tel],.mh-pop input[type=password],.mh-pop input[type=text]{
  width:100%;height:40px;padding:0 11px;font:14px var(--font-body);
  border:1px solid var(--color-lightgrey);border-radius:6px;background:#fff;
  color:var(--color-charcoal);-webkit-appearance:none;margin:0 0 10px}
/* ⚠️ اینجا قبلاً هم border-color عوض می‌شد و هم یک box-shadow ِ inset یک‌پیکسلی
   می‌نشست — روی هم دو پیکسلِ مشکی، که دورِ جعبه را کلفت نشان می‌داد. حالا
   فقط رنگِ همان یک خط عوض می‌شود. */
.mh-pop input:focus{outline:none;border-color:var(--color-charcoal)}
.mh-pw{position:relative}
.mh-show{position:absolute;top:0;left:0;height:40px;padding:0 11px;
  font-size:13px;color:var(--color-hibarghblue)}
.mh-show:hover{text-decoration:underline}
.mh-row{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin:2px 0 14px;font-size:13px}
.mh-stay{display:flex;align-items:center;gap:6px;color:var(--color-charcoal);cursor:pointer}
.mh-stay input{width:15px;height:15px;accent-color:var(--color-hibarghblue);margin:0}
.mh-row a{color:var(--color-green);text-decoration:underline}
.mh-err{margin:0 0 10px;font-size:13px;color:#b00020}
.mh-go{display:block;width:100%;height:42px;background:var(--color-hibarghblue);
  color:#fff;font:400 15px/42px var(--font-body);text-align:center;border-radius:6px}
.mh-go:hover{background:var(--color-hibarghblue-hover);text-decoration:none}
.mh-go[disabled]{opacity:.6;cursor:default}
.mh-new{display:block;width:100%;height:42px;margin-top:10px;
  border:1px solid var(--color-lightgrey);color:var(--color-charcoal);
  font:400 15px/40px var(--font-body);text-align:center;border-radius:6px}
.mh-new:hover{background:var(--color-hovertilegreen);border-color:var(--color-grey);
  text-decoration:none}

/* ⚠️ min-width اجباری است. `.masthead>*{min-width:0}` کفِ خودکارِ گرید را
   برمی‌دارد، و آن‌وقت در باندِ ۹۰۰–۱۰۰۰px که ۷۰۰pxِ جستجو جا نمی‌شد، ستونِ
   نشان تا ۸۰px فشرده می‌شد در حالی که ارتفاعش ۴۰px قفل بود — یعنی نشان
   پهنایش را از دست می‌داد و کشیده می‌شد، بی هیچ خطایی. حالا ستونِ میانی
   کوتاه می‌آید، نه نشان. object-fit تورِ دومِ همان است. */
.logo{grid-column:1;grid-row:2;display:block;justify-self:start;min-width:max-content}
.logo img{height:40px;width:auto;max-width:100%;display:block;object-fit:contain}
.searchwrap{grid-column:2;grid-row:2;position:relative;width:100%}
/* ⚠️ ۱۶px عمدی است و کوچک‌تر نشود: سافاریِ iOS روی هر ورودیِ زیرِ ۱۶px
   هنگامِ فوکوس کلِ صفحه را زوم می‌کند و دیگر برنمی‌گرداند.
   گردیِ ۱۶px = نصفِ ارتفاع، یعنی قرص. مرجع خودش گوشهٔ تیز دارد
   (border-radius: 0px، اندازه‌گیری‌شده)؛ این یکی خواستهٔ صریح بود. */
.search{width:100%;height:32px;padding:0 14px 0 38px;font:16px var(--font-body);
  border:1px solid var(--color-lightgrey);outline:none;color:var(--color-charcoal);
  border-radius:16px;-webkit-appearance:none;background:#fff}
.search::placeholder{color:var(--color-mediumgrey)}
.search:hover,.search:focus{border-color:var(--color-grey)}
.search-icons{position:absolute;left:12px;top:0;height:32px;display:flex;
  align-items:center;gap:10px;color:var(--color-darkgrey)}
.search-icons img,.search-icons svg{display:block;width:17px;height:17px;cursor:pointer;opacity:.85}
.masthead-nav{grid-column:3;grid-row:2;display:flex;gap:20px;justify-self:end;
  align-items:center;min-width:max-content}
.masthead-nav a:hover{text-decoration:none;color:var(--color-hibarghblue)}
.masthead-nav a{font:19px/1 var(--font-cond);letter-spacing:.02em;
  text-transform:uppercase;color:var(--color-green);font-family:var(--font-fa);
  font-weight:400;font-size:15px}
/* دکمهٔ سه‌خطِ «فهرست» برداشته شد: هیچ‌وقت چیزی را باز نمی‌کرد و دسته‌ها
   همان بالای صفحه به‌صورتِ کاشی هستند. */
/* ۲px، همان ضخامتی که مرجع دارد (border-bottom: 2px #fed700). ۳px بود. */
.rule-yellow{height:2px;background:var(--color-hibarghblue);margin-top:0}

/* فقط برای صفحه‌خوان */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);align-items:start}
/* صفحه‌هایی که ریلِ دسته‌بندی ندارند تمامِ عرض را می‌گیرند */
.shell-solo{grid-template-columns:minmax(0,1fr)}
.rail{border-left:1px solid var(--color-lightgrey);padding:14px 0 40px;min-height:70vh}
/* ⚠️ هر دو انتخابگر لازم‌اند. ورودی‌های ریل «دکمه» شدند تا با Tab و
   Enter کار کنند — پیش از این <a>ِ بی href بودند، یعنی نه در ترتیبِ
   Tab می‌آمدند نه به Enter جواب می‌دادند، و کاربرِ صفحه‌کلید اصلاً
   نمی‌توانست دسته‌بندی را فیلتر کند. `a` نگه داشته شده تا اگر جایی
   هنوز لنگر باشد ظاهرش نشکند. دکمه ارثِ فونت و رنگ نمی‌برد، پس
   reset لازم دارد. */
.rail a,.rail button{padding:5px 16px;color:var(--color-charcoal);font-size:13px}
.rail button{appearance:none;-webkit-appearance:none;background:none;border:0;
  width:100%;text-align:start;font-family:inherit;line-height:inherit;cursor:pointer}
.rail a:hover,.rail button:hover{background:var(--color-hovertilegreen);color:var(--color-green);
  text-decoration:none}
.rail a.is-active,.rail button.is-active{background:var(--color-hovertilegreen);color:var(--color-green);
  font-family:var(--font-med);font-weight:400}
.rail .rail-h{padding:0 16px 6px;font:11px/14px var(--font-med);
  color:var(--color-darkgrey);text-transform:uppercase;letter-spacing:.06em}
.content{padding:18px 24px 60px;min-width:0}
h1{margin:0 0 14px;font:27px/1.1 var(--font-din);color:var(--color-green);
  font-weight:normal;font-family:var(--font-fa)}
h2{margin:22px 0 10px;font:18px/1.5 var(--font-body);color:var(--color-charcoal);
  font-weight:normal}
.crumbs{font-size:12px;color:var(--color-darkgrey);margin:0 0 10px}
.crumbs a{color:var(--color-green)}
.crumbs .sep{padding:0 6px;color:var(--color-lightgrey)}

/* ── category tiles — .tiles/.tile/.tile-img verbatim ────────────────────── */
/* هفت دسته؛ روی دسکتاپ کلِ عرض را پر می‌کنند، روی تلفن چهارتا در ردیف */
.tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;
  margin:0 0 22px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tile{display:block;text-align:center;padding:8px 4px 10px;color:var(--color-charcoal);
  font-size:12px;line-height:14px;cursor:pointer}
.tile:hover{background:var(--color-hovertilegreen);color:var(--color-green);
  text-decoration:none}
.tile.is-active{background:var(--color-hovertilegreen);color:var(--color-green)}
.tile.is-active .tile-img{border-color:var(--color-green)}
/* مربعِ دقیق با گوشهٔ کمی گرد — مثل کاشی‌های مرجع */
.tile-img{width:80px;height:80px;aspect-ratio:1;margin:0 auto 6px;
  border:1px solid var(--color-lightgrey);border-radius:4px;background:var(--color-white);
  display:flex;align-items:center;justify-content:center;padding:7px}
.tile-img svg{width:70px;height:70px;display:block}

/* ── brand cards — CSS module _t8yku_, measured geometry ─────────────────── */
.tile-grid{margin:0 auto;display:grid;grid-auto-rows:1fr;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.tile-card{display:flex;flex-direction:row;min-width:0;box-shadow:inset 0 0 0 1px var(--color-cardline);
  border-radius:4px;box-sizing:border-box;height:111px;overflow:hidden;
  background:var(--color-white);color:var(--color-black)}
.tile-card:hover{background:var(--color-hovertilegreen);text-decoration:none}
.tile-card:hover .tc-title{color:var(--color-black)}
.tc-img{display:flex;flex:0 0 115px;justify-content:center;align-items:center;
  padding:6px;overflow:hidden}
/* --lw: هر لوگو حجم بصری خودش را دارد؛ این تنها تنظیمِ دستیِ طرح است */
.tc-img img{width:var(--lw,100%);height:auto;max-height:87px;object-fit:contain;
  mix-blend-mode:multiply}
.tc-text{height:100%;flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:space-between;padding:12px 2px 8px 10px;min-width:0;overflow:hidden}
.tc-title{font-family:var(--font-med);font-weight:400;color:var(--color-charcoal);
  font-size:13px;line-height:16px;display:inline-block;text-align:right}
.tc-copy{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin-bottom:auto;overflow:hidden;font-size:12px;line-height:15px;
  color:var(--color-black);margin-top:2px}
.tc-count{display:block;font-family:var(--font-body);color:var(--color-darkgrey);
  font-size:12px}
.tc-wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:100%}
.tc-wordmark b{font:400 15px/1.25 var(--font-fa);color:var(--color-darkgrey);
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.no-hits{grid-column:1/-1;padding:26px 0;color:var(--color-darkgrey);font-size:13px}

/* برندی که هنوز لیستش نرسیده — همان کارت، فقط ساکت‌تر */
.tile-card.is-pending{box-shadow:inset 0 0 0 1px var(--color-ultralightgrey)}
.tile-card.is-pending:hover{box-shadow:inset 0 0 0 1px var(--color-lightgrey)}
.tile-card.is-pending .tc-title{color:var(--color-darkgrey)}
.tile-card.is-pending .tc-wordmark b{color:var(--color-mediumgrey)}
.tc-wait{color:var(--color-mediumgrey);font-style:italic}

.tally{color:var(--color-darkgrey);font-size:13px;margin-right:8px}
.rail a,.rail button{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rail-n{color:var(--color-mediumgrey);font-size:11px}
.rail a.is-active .rail-n,.rail button.is-active .rail-n{color:var(--color-green)}

/* ── brand sheet ─────────────────────────────────────────────────────────── */
.sheet-head{display:flex;gap:18px;align-items:flex-start;margin:0 0 16px}
.sheet-head .fig{flex:0 0 180px;height:112px;border:1px solid var(--color-lightgrey);
  display:flex;align-items:center;justify-content:center;padding:10px;background:#fff}
.sheet-head .fig img{max-width:var(--lw,100%);max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.sheet-head p{margin:0 0 10px;font-size:12px;line-height:16px;max-width:66ch}
.sheet-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;
  color:var(--color-darkgrey)}
/* سه گزارهٔ متنی در یک جعبه: با هم می‌شکنند، پس دکمهٔ PDF می‌تواند به سطرِ
   خودش برود بی‌آنکه سطرِ گزاره‌ها را وسط پاره کند. نقطه از ::before می‌آید
   و به گزارهٔ بعدی چسبیده است — جداکننده هرگز تنها ته سطر نمی‌ماند. */
.sheet-facts{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;min-width:0}
.sheet-facts>span+span::before{content:'·';padding-inline-end:8px;
  color:var(--color-lightgrey)}
.button-primary,.button-secondary{font:12px var(--font-din);text-transform:uppercase;
  border-radius:2px;padding:3px 15px;cursor:pointer;box-shadow:none;
  transition:background-color .3s ease;font-family:var(--font-fa);text-transform:none}
.button-primary{color:#fff;border:1px solid var(--color-hibarghblue);
  background-color:var(--color-hibarghblue);border-radius:6px}
.button-primary:hover{border-color:var(--color-hibarghblue-hover);
  background-color:var(--color-hibarghblue-hover);
  transition:background-color .1s ease;text-decoration:none}
.button-secondary{color:var(--color-charcoal);border:1px solid var(--color-lightgrey);
  background:#fff;border-radius:6px}
.button-secondary:hover{background:var(--color-hovertilegreen);
  border-color:var(--color-grey);text-decoration:none}

table.spec{border-collapse:collapse;width:100%;font-size:12px;line-height:14px}
/* جدول‌های کم‌ستون هم کلِ عرض را می‌گیرند. تا قیمت چند وجب از مشخصات دور
   نیفتد، فضای اضافه به ستونِ آخر (چپ‌ترین) می‌رود، نه میانِ ستون‌ها. */
table.spec.narrow{width:100%;min-width:480px;max-width:none}
table.spec th{font:11px/14px var(--font-med);font-weight:normal;text-align:right;
  color:var(--color-charcoal);padding:6px 8px;border-bottom:1px solid var(--color-black);
  vertical-align:bottom;white-space:nowrap}
table.spec td{padding:5px 8px;border-bottom:1px solid var(--color-lightgrey);
  height:20px;vertical-align:middle}
table.spec tbody tr:hover{background:var(--color-hoveryellow)}
/* کلِ ردیف بازشدنی است، پس اشاره‌گر هم همان را بگوید. ردیفِ بی‌قیمت دکمهٔ
   SKU ندارد و :has آن را بیرون می‌گذارد؛ مرورگرِ قدیمی‌تر فقط اشاره‌گرِ
   پیش‌فرض می‌دهد و کارکرد دست‌نخورده می‌ماند. */
table.spec tbody tr[data-sku]:has(.sku){cursor:pointer}
.pn{font-family:var(--font-med);color:var(--color-blue);white-space:nowrap}
.rowno{color:var(--color-mediumgrey);width:1%;white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.spec+.table-scroll,.table-scroll+.table-scroll{margin-top:26px}
/* ستون قیمت به‌اندازهٔ محتوایش عرض بگیرد، نه کلِ عرضِ خالیِ جدول: وگرنه
   عنوانِ ستون (راست‌چین) و خودِ قیمت‌ها (چپ‌چین) دو سرِ یک بیابان می‌افتادند. */
.num,.price{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
table.spec th.num,table.spec th.price{text-align:right}
table.spec .price{width:1%;padding-inline-start:22px;font-family:var(--font-med)}
/* ستونِ «قیمت شما» همان قالبِ ستونِ قیمت را دارد و ته‌رنگی نمی‌گیرد؛
   سرستون خودش تفکیکش می‌کند. کلاس می‌ماند چون هر دو فایلِ JS رویش
   تکیه دارند و جای گرفتنِ استایلِ بعدی است. */
table.spec .num{width:1%;padding-inline-start:18px}
/* عددِ خط‌خوردهٔ درونِ سلولِ «قیمت شما». روی دسکتاپ پنهان است چون ستونِ
   قیمتِ لیست خودش سرِ جایش هست؛ فقط روی گوشی که آن ستون می‌رود، این
   می‌آید. (قاعده‌اش پایین، در بلوکِ ۶۴۰.) */
table.spec .mine-was{display:none}
.grouphdr td{background:var(--color-ultralightgrey);font-family:var(--font-med);
  font-weight:400;border-bottom:1px solid var(--color-lightgrey)}
.note{margin:0 0 16px;padding:8px 10px;background:#fffde7;
  border-right:3px solid var(--color-yellow);font-size:12px;color:var(--color-charcoal)}

/* ── footer ──────────────────────────────────────────────────────────────── */
/* ⚠️ فاصلهٔ کناریِ پاورقی همان فاصلهٔ .content است، وگرنه سطرِ پاورقی از
   هر سطرِ دیگرِ صفحه تورفته‌تر می‌افتد: ۱۶ (خودِ پاورقی) + ۱۰ (فاصلهٔ
   پیوند) = ۲۶ در برابرِ ۱۲ِ متن روی گوشی — چهارده پیکسل اختلاف، دیده
   می‌شود. فاصلهٔ آغازِ پیوندِ اول هم صفر می‌شود تا خودِ نویسه سرِ خط
   بنشیند، نه جعبه‌اش. */
.foot{border-top:1px solid var(--color-lightgrey);margin-top:10px;
  padding:8px 24px calc(8px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;font-size:12px;color:var(--color-charcoal)}
.foot a{padding:0 10px;border-left:1px solid var(--color-lightgrey);
  color:var(--color-charcoal)}
.foot a:first-of-type{padding-inline-start:0}
.foot a:last-of-type{border-left:0}
.foot .legal{margin-right:auto;color:var(--color-darkgrey)}

/* ── phone ───────────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  /* تلفن: نشان در وسط، بعد یک ردیف: جستجو + سفارش + فهرست — مثل تصویر مرجع */
  /* ⚠️ سه ردیف، نه دو. .mh-top در قاعدهٔ پایه grid-row:1 دارد و نشان هم
     این‌جا row:1 می‌گرفت — هر دو با ستونِ 1/-1، یعنی شمارهٔ تلفن و نشان
     دقیقاً روی هم چاپ می‌شدند. */
  .masthead{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;
    gap:8px 10px;padding:calc(8px + env(safe-area-inset-top, 0px)) 12px 6px;align-items:center}
  .mh-top{grid-column:1/-1;grid-row:1}
  .logo{grid-column:1/-1;grid-row:2;width:auto;text-align:center;justify-self:center}
  .logo img{height:38px;margin:0 auto}
  /* ⚠️ max-width:none بود و روی ۹۰۰px جعبهٔ جستجو ۷۹۳px می‌شد — پهن‌تر از
     سقفِ ۷۰۰pxِ خودِ دسکتاپ، آن هم در چیدمانِ گوشی. سقف همان ۷۰۰ می‌ماند؛
     روی گوشیِ واقعی اثری ندارد چون ردیف از این باریک‌تر است. */
  .searchwrap{grid-column:1;grid-row:3;width:100%;max-width:700px;min-width:0}
  .masthead-nav{grid-column:2;grid-row:3;justify-self:end;gap:12px;padding-bottom:0}
  .content{padding:12px 12px 48px}
  .foot{padding-inline:12px}
  h1{font-size:22px;margin-bottom:10px}
  /* ⚠️ این‌جا قبلاً یک ستون بود و باندِ ۶۴۱ تا ۹۰۰ (تبلت، گوشیِ خوابیده،
     پنجرهٔ نصفه) هر برند را یک نوارِ ۷۴۴×۹۶ می‌کرد: یک نشانِ ۹۶ پیکسلی و
     دو سطرِ کوتاه در سمتِ راست، و باقیِ نوار خالی. اندازه‌گیری‌شده روی
     ۷۶۸ و ۹۰۰. حالا قاعدهٔ ۱۱۰۰ (دو ستون) تا همین‌جا می‌آید و زیرِ ۶۴۰
     خودش کاشی می‌شود. */
  .tile-grid{gap:8px}
  .tile-card{height:96px}
  .tc-img{flex-basis:96px;padding:5px}
  .tc-img img{max-height:74px}
  .tc-text{padding:10px 2px 7px 8px}
  .sheet-head{flex-direction:column}
  .sheet-head .fig{flex:0 0 auto;width:100%;height:92px}
}
/* ── تلفن: دیوار برندها هم کاشی می‌شود، مثل دسته‌ها ─────────────────────── */
/* روی گوشی نوارِ بالا باید یک سطر بماند. شمارهٔ دوم می‌رود؛ جعبهٔ ورود
   همان absoluteِ زیرِ دکمه می‌ماند و فقط عرضش به صفحه بسته می‌شود —
   position:fixed این‌جا غلط بود: با اسکرول روی صفحه گیر می‌کرد. */
@media (max-width:640px){
  .mh-tel-2{display:none}
  .mh-pop{width:calc(100vw - 32px)}
  .mh-top{gap:10px}
}

/* ── تلفن: دو شبکهٔ کاشی باید یک زبان باشند ──────────────────────────────
   دسته‌ها و دیوارِ برندها درست زیرِ هم می‌نشینند و قرار است یک چیز به نظر
   بیایند، ولی هر کدام minmaxِ خودش را داشت (۸۴ و ۱۰۰) و شمارِ ستونشان در
   هیچ عرضی یکی درنمی‌آمد — اندازه‌گیری‌شده: دسته‌ها ۳/۳/۴/۴ و برندها
   ۲/۳/۳/۴ روی ۳۲۰/۳۶۰/۳۹۰/۴۳۰. حالا هر دو یک minmax دارند، و زیرِ ۵۲۰
   هر دو چهارتا (پایین‌تر آمده). */
@media (max-width:640px){
  .tile-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:2px}
  .tile-card{display:block;height:auto;padding:8px 4px 10px;text-align:center;
    box-shadow:none;border-radius:0;overflow:visible}
  .tile-card:hover{background:var(--color-hovertilegreen)}
  .tc-img{display:flex;flex:none;width:100%;height:auto;aspect-ratio:1;padding:9px;
    margin:0 0 6px;border:1px solid var(--color-lightgrey);border-radius:4px;
    background:var(--color-white)}
  .tc-img img{max-height:100%}
  .tile-img{width:100%;height:auto}
  .tc-text{display:block;height:auto;padding:0;overflow:visible}
  .tc-title{display:block;font-family:var(--font-body);font-weight:400;font-size:12px;
    line-height:14px;color:var(--color-charcoal);text-align:center}
  .tc-copy{display:none}
  .tc-count{display:block;margin-top:3px;font-size:11px;line-height:13px;
    color:var(--color-mediumgrey)}
  .tile-card.is-pending{box-shadow:none}
  .tile-card.is-pending .tc-img{border-color:var(--color-ultralightgrey)}
  .tc-wordmark b{font-size:13px}
}

@media (max-width:520px){
  .masthead-nav a{font-size:12px}
  /* ⚠️ «چهار کاشی در عرض» خواستهٔ طرح بود ولی auto-fill با کفِ ۸۴px روی
     ۳۲۰ و ۳۶۰ فقط سه‌تا جا می‌داد و کاشیِ هفتم تنها در یک ردیف می‌ماند.
     شمارِ ثابت هم آن را درست می‌کند و هم دیوارِ برندها را با دسته‌ها
     هم‌ستون نگه می‌دارد. */
  .tiles,.tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile{font-size:11px;padding:6px 2px 8px}
  /* ⚠️ این‌جا قبلاً `height:72px` بود و بلوکِ ۶۴۰ هم `width:100%;height:auto`
     می‌داد — دوتایی aspect-ratio را می‌کُشتند و کاشیِ «مربعِ دقیق» در عمل
     ۹۳×۷۲ و ۱۰۷×۷۲ و ۸۶×۷۲ درمی‌آمد (اندازه‌گیری‌شده روی ۳۲۰/۳۶۰/۳۹۰).
     حالا فقط پهنا گفته می‌شود و بلندی از aspect-ratio می‌آید. */
  .tile-img svg{width:78%;height:auto}
  .masthead-nav{gap:10px}
  .masthead-nav a{font-size:14px}
}


/* روی گوشی، ستون‌های کمکی (کد کالا، رنگ نور) پنهان می‌شوند تا نام و قیمت
   بدون اسکرولِ افقی جا شوند — قیمت مهم‌ترین ستون است و نباید بیرون بیفتد. */
@media (max-width:640px){
  table.spec .col-aux{display:none}
  table.spec th,table.spec td{padding:9px 6px}
  /* روی گوشی جدولِ کم‌ستون هم باید تمام‌عرض بماند، وگرنه min-width سرریز می‌کند */
  table.spec.narrow{width:100%;min-width:0;max-width:none}
  table.spec .price{padding-inline-start:10px}
  table.spec .num{padding-inline-start:8px}
  /* ⚠️ سرستون‌ها روی گوشی می‌شکنند. nowrap عرضِ هر ستون را به پهنای
     سرستونِ نشکسته‌اش می‌بَرد، نه به پهنای داده‌اش: «نرخ مصرف‌کننده
     (ریال)» ۱۰۰px می‌گرفت در حالی که عددهایش ۵۸px بودند. با ستونِ
     «قیمت شما» همین ۴۰px، ستونِ قیمت را از لبهٔ صفحه بیرون می‌انداخت. */
  table.spec th{white-space:normal}
  /* ⚠️ تنها ستونی که فاصلهٔ آغازش این‌جا کم نشده بود — .price از ۲۲ به ۱۰
     می‌رفت و .num از ۱۸ به ۸، ولی .sku-cell روی ۱۸ می‌ماند. */
  table.spec .sku-cell{padding-inline-start:8px}
  /* ── دو ستونِ قیمت در یکی ───────────────────────────────────────────
     با «قیمت شما» جدول شش ستون می‌شود و سه‌تایشان عددِ هفت‌رقمی‌اند. روی
     ۳۳۶px جا نمی‌شود، و چون در RTL آغازِ اسکرول سمتِ راست است، همیشه
     ستونِ آخر بیرون می‌ماند — یعنی دقیقاً همان قیمتی که همکار برایش وارد
     شده. اندازه‌گیری‌شده روی ۳۶۰px پیش از این تغییر: «قیمت شما» از
     x=−۸۹ شروع می‌شد.

     پس ستونِ قیمتِ لیست پنهان می‌شود و عددش خط‌خورده کنارِ قیمتِ خریدار
     می‌نشیند — همان زبانی که پنل (panel-price.is-was) و سبد (c-was) از
     پیش دارند، نه الگوی تازه. هر دو عدد می‌مانند.

     :has پشتیبانی نشود، ستون سرِ جایش می‌ماند و جدول مثل قبل می‌لغزد —
     بی خطا، همان تنزلی که قاعدهٔ tr[data-sku]:has(.sku) هم دارد. */
  table.spec:has(.price-mine) .price:not(.price-mine){display:none}
  table.spec .mine-was{display:block;margin-top:2px;font-size:11px;
    line-height:14px;color:var(--color-mediumgrey);font-family:var(--font-body)}

  /* ⚠️ پنل درونِ یک <td colspan> است، پس `flex:1 1 100%` عرضش را از خودِ
     جدول می‌گیرد، نه از صفحه. وقتی جدول از گوشی پهن‌تر بود (با ستونِ
     «قیمت شما» تقریباً همیشه)، پنل ۴۲۹px می‌شد و از x=−۸۱ شروع: ضربدرِ
     بستن روی ۷۳− می‌افتاد، یعنی اصلاً در دسترس نبود، و «افزودن به سفارش»
     و «قیمت شما» نیمه بیرون می‌ماندند. sticky پنل را به لبهٔ آغازِ همان
     جعبهٔ اسکرول می‌چسباند و عرضش را به خودِ صفحه می‌بندد. */
  /* عرضِ گوشی پایین‌تر، کنارِ بقیهٔ قواعدِ پنل، اعمال می‌شود — همان‌جا که
     بعد از قاعدهٔ پایه می‌آید. ⚠️ اگر این‌جا نوشته شود بی‌اثر است: این بلوک
     بالاتر از `.panel{width:465px}` است و با هم‌وزنیِ گزینشگرها، دومی
     می‌برد. یک بار همین اتفاق افتاد و پنل روی ۳۲۰px از x=−۱۶۹ شروع شد. */
}
/* گوشی‌های خیلی باریک (۳۲۰px): سیمکان دو ستون قیمت دارد و جا تنگ می‌شود */
@media (max-width:360px){
  table.spec{font-size:11.5px}
  table.spec th,table.spec td{padding:8px 4px}
  table.spec th{font-size:10.5px}
}

/* ── نوارِ «نصب روی صفحهٔ اصلی» ─────────────────────────────────────────── */
/* ── کارتِ «نصب روی صفحهٔ اصلی» ─────────────────────────────────────────
   کارت، نه نوار: همان قابِ کارت‌های برند (حلقهٔ ۱px و گوشهٔ ۴px) تا بیگانه
   نباشد؛ با فاصلهٔ نفس‌کشیدن، دو دکمهٔ واقعی به‌جای یک ضربدرِ ریز، و خطِ زردِ
   بالای کارت به‌عنوان همان امضای آشنا. */
.install-card[hidden]{display:none}
.install-card{
  position:fixed;z-index:60;inset-inline:0;bottom:0;margin:0 auto;
  max-width:430px;background:var(--color-white);
  box-shadow:0 -6px 24px rgba(0,0,0,.16);
  animation:install-in .22s ease-out both;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  padding-inline-start:calc(18px + env(safe-area-inset-left));
  padding-inline-end:calc(18px + env(safe-area-inset-right));
}
@keyframes install-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.install-card{animation:none}}

.install-head{display:flex;align-items:flex-start;gap:13px}
.install-head img{width:52px;height:52px;border-radius:12px;flex:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.install-head h3{margin:0 0 3px;font:14px/1.45 var(--font-med);font-weight:400;
  color:var(--color-black)}
.install-head p{margin:0;font-size:12.5px;line-height:17px;color:var(--color-darkgrey)}
.install-actions{display:flex;align-items:center;gap:10px;margin-top:14px}
.install-actions .button-primary{padding:8px 26px;font-size:13.5px}
.install-later{background:none;border:0;cursor:pointer;padding:8px 6px;
  font:13px var(--font-body);color:var(--color-darkgrey)}
.install-later:hover{color:var(--color-charcoal);text-decoration:underline}
.install-actions .spacer{flex:1}

/* روی دسکتاپ کارت گوشه می‌نشیند، نه چسبیده به کفِ صفحه */
@media (min-width:720px){
  .install-card{inset-inline:auto;inset-inline-start:24px;bottom:24px;
    border:1px solid var(--color-cardline);
    border-radius:10px;box-shadow:0 6px 26px rgba(0,0,0,.17)}
}

/* پیوندِ همیشگیِ پاورقی */
#install-link{color:var(--color-green);font-family:var(--font-med)}

/* آیکونِ «هم‌رسانی»ِ آیفون، درونِ متنِ راهنما */
.ios-share{width:15px;height:15px;vertical-align:-3px;margin:0 2px;color:#0a7cff}
.install-head p b{color:var(--color-black);font-family:var(--font-med)}

/* ── SKU و پنلِ کالا ────────────────────────────────────────────────────────
   بلوکِ مرکزیِ رابطِ مک‌مستر: شمارهٔ کالا در ستونِ خودش آبی و قابلِ ضربه است،
   و ضربه‌زدن رویش یک پنل را همان‌جا لای جدول باز می‌کند — نه صفحهٔ تازه، نه
   مودال. کاربر جای خودش را در جدولِ ۶۰۰ ردیفی از دست نمی‌دهد.

   نوارِ لبه در RTL سمتِ راست است، نه چپ: در مک‌مستر لبهٔ آغازِ خط است و
   لبهٔ آغاز در فارسی راست است. رنگش آبیِ نشانِ های‌برق است، چون زردِ مک‌مستر
   جای دیگری در این طرح جانشین شده. */

.sku{font-family:var(--font-med);color:var(--color-blue);white-space:nowrap;
  background:none;border:0;padding:2px 4px;cursor:pointer;font-size:12px;
  border-radius:2px}
.sku:hover{text-decoration:underline}
.sku[aria-expanded=true]{color:var(--color-black);font-weight:400;
  box-shadow:inset 0 0 0 1px var(--color-charcoal);text-decoration:none}
table.spec .sku-cell{width:1%;white-space:nowrap;text-align:center;
  padding-inline-start:18px}
/* ردیفی که پنلش باز است نباید زیرِ پنل زردِ hover بماند */
table.spec tbody tr.is-open:hover{background:transparent}

/* ⚠️ وزنِ گزینشگر: `.panel-row td` (۰,۱,۱) از `table.spec td` (۰,۱,۲) سبک‌تر
   است، پس padding:5px 8px آن یکی برنده می‌شد و پنل ۸px از لبهٔ جدول تو
   می‌افتاد — در مرجع لبه‌به‌لبه است. با tr در گزینشگر وزن می‌رسد به (۰,۲,۲). */
table.spec tr.panel-row td{padding:0 0 4px;border-bottom:1px solid var(--color-lightgrey);
  background:var(--color-white)}

/* ── اندازه‌های پنل، مستقیم از مرجع ────────────────────────────────────────
   روی صفحهٔ زندهٔ مک‌مستر با getBoundingClientRect خوانده شد، نه از روی عکس.
   هر عددِ زیر یک اندازهٔ واقعی است؛ اگر خواستی عوضشان کنی، دوباره اندازه بگیر:

     قابِ بیرونی   ۴۶۶ عرض · خطِ ۱px خاکستریِ ‎#878787 · بی‌سایه · بی‌گردی
     نوارِ کناری   ۸px  (مرجع زرد است؛ اینجا آبیِ کنش — بند ۲ CLAUDE.md)
     ستونِ هویت    ۲۰۶ = ۱۲ + ۱۸۲ + ۱۲
     خطِ جداکننده  ۱px ‎#bbb با ۲۰px تورفتگی از بالا و پایین
     ستونِ کنش     ۲۴۸ = ۱۲ + ۲۲۴ + ۱۲
     تصویر         تا ۱۰۰px بلندی، ۲۰px فاصله تا متن
     جعبهٔ تعداد   ۶۴×۳۰ · گردیِ ۶px · برچسبِ شناورِ ۱۰px روی خطِ بالا
     دکمهٔ سفارش   ۲۲۴×۲۳ · گردیِ ۲px
     نوارِ پایین   ۳۰px، تمام‌عرض، زیرِ هر دو ستون

   سه انحراف، هر سه عمدی:
     • عرض ۴۶۵ است نه ۴۶۶: نوارِ ۸px اینجا خودِ border است و مرجع یک ۱px هم
       بیرونِ آن دارد. با ۴۶۵ سه ستونِ درونی دقیقاً ۲۰۶/۲/۲۴۸ درمی‌آیند —
       و همین سه عدد است که دیده می‌شود، نه عرضِ کل.
     • ارتفاعِ سطرِ ۱۴٫۴px مرجع برای فارسی کم است؛ دنبالهٔ «ج» و «ی» به خطِ
       بعد می‌خورد. ۱۷px شد.
     • ⚠️ عرضِ مرجع ۴۶۶ است ولی سرستون‌های فارسی جای بیشتری می‌خواهند؛ عرض
       اینجا با ۴۶۵ ثابت ماند و فقط ستونِ کنش کشسان است.

   ── پنل زیرِ همان ستونی باز می‌شود که کلیک شد ─────────────────────────────
   مرجع پنل را به لبهٔ *پایانِ* سطر می‌چسباند: در چپ‌به‌راست یعنی راست، درست
   زیرِ ستونِ «شمارهٔ کالا» و «قیمت» که آخرِ جدول‌اند. اینجا هم همان دو ستون
   آخرند، ولی در راست‌به‌چپ «آخر» یعنی چپ — پس margin-inline-start:auto.

   ⚠️ نسخهٔ اولِ این فایل پنل را به لبهٔ *شروع* (راست) چسبانده بود، از ترسِ
   اسکرولِ افقی. نتیجه این شد که کاربر روی SK1001 در سمتِ چپ می‌زد و جعبه
   آن سرِ جدول، سمتِ راست، باز می‌شد — بی هیچ ربطِ دیداری به چیزی که زده
   بود. آن ترس با sticht دو طرفه حل می‌شود، نه با جابه‌جا کردنِ پنل:

     inset-inline-start ‏(=راست) پنل را از بیرون‌زدن به راست نگه می‌دارد،
     inset-inline-end   ‏(=چپ)  از بیرون‌زدن به چپ.

   دو قید با هم تضاد ندارند چون بالای ۶۴۰px جعبهٔ اسکرول دستِ‌کم ۶۱۶px است
   و پنل ۴۶۵؛ پایین‌تر هم پنل دقیقاً هم‌عرضِ جعبه می‌شود. یعنی روی جدولِ
   جاافتاده پنل زیرِ ستونِ کلیک‌شده می‌ماند، و روی جدولِ اسکرول‌شده هر جا که
   باشی کامل در دید است.
   ───────────────────────────────────────────────────────────────────────── */
.panel{width:465px;max-width:100%;
  margin-inline-start:auto;
  position:sticky;inset-inline-start:0;inset-inline-end:0;
  background:var(--color-white);
  border:1px solid var(--color-grey);
  border-inline-start:8px solid var(--color-hibarghblue)}
.panel-close{position:absolute;inset-inline-end:2px;top:2px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;color:var(--color-darkgrey);
  font-size:15px;line-height:1;border-radius:2px}
.panel-close:hover{background:var(--color-ultralightgrey);color:var(--color-black)}

/* دو ستون کنارِ هم، و نوارِ «مشخصات» زیرِ هر دو — همان دو سطرِ مرجع */
.panel-main{display:flex;align-items:stretch;position:relative}

/* ستونِ هویت: تصویر، نام، برند، قیمت. ستونِ کنش: تعداد، شرط، دکمه. */
.panel-id{flex:0 0 206px;min-width:0;padding:20px 12px}
.panel-act{flex:1 1 auto;min-width:0;padding:20px 12px;
  position:relative;margin-inline-start:2px}
/* خطِ عمودی از بالا و پایین ۲۰px تو رفته است، مثلِ مرجع — نه border که تا
   لبه می‌رود و ستون را قاب می‌کند. */
.panel-act::before{content:'';position:absolute;inset-block:20px;
  inset-inline-start:-2px;width:1px;background:var(--color-lightgrey)}


.panel-name{font:400 12px/17px var(--font-body);color:var(--color-charcoal);
  margin:0 0 8px;padding-inline-end:12px}
.panel-brand{font:400 11px/15px var(--font-body);color:var(--color-darkgrey);
  margin:0 0 10px;padding-inline-end:12px}
.panel-brand b{font-weight:inherit;color:var(--color-charcoal)}
.panel-price{font:400 12px/16px var(--font-body);color:var(--color-charcoal);margin:0}
.panel-price .u{font-size:11px;color:var(--color-darkgrey);padding-inline-start:4px}
/* برگهٔ تومانی: معادلِ ریالی زیرِ قیمت. جمعِ سبد ریال بسته می‌شود، و اگر
   این تبدیل نوشته نشود عددِ سبد ده برابرِ عددِ جدول به نظر می‌آید. */
.panel-conv{font-size:11px;line-height:15px;color:var(--color-darkgrey);margin:4px 0 0}

/* ── نوارِ «مشخصات فنی» ────────────────────────────────────────────────────
   مرجع زیرِ دو ستون یک نوارِ تمام‌عرضِ بازشو دارد («Compatible Products…»).
   مشخصات همان‌جا می‌نشیند: در پنلِ ۲۰۶پیکسلیِ باز، فهرستِ مشخصات ستون را
   سه برابر بلند می‌کرد و شکلِ مرجع را از بین می‌برد — ولی حذفش هم روی گوشی
   اطلاعات را می‌برد، چون جدول آن‌جا افقی اسکرول شده و ستون‌ها دیده نمی‌شوند.
   بسته باز می‌شود، نه پاک. */
.panel-more{border-top:1px solid var(--color-lightgrey)}
.panel-more>summary{display:flex;align-items:center;justify-content:space-between;
  gap:8px;min-height:30px;padding:0 12px;list-style:none;cursor:pointer;
  font:400 12px/30px var(--font-body);color:var(--color-charcoal)}
.panel-more>summary::-webkit-details-marker{display:none}
/* ⚠️ پیکانِ ▾ (U+25BE) نه در دانا هست نه در وزیرمتن؛ با کاراکتر نوشتنش یک
   مربعِ خالی می‌دهد. این یکی از دو خطِ border ساخته می‌شود. */
.panel-more>summary::after{content:'';flex:none;width:7px;height:7px;
  margin-bottom:3px;border-right:1px solid var(--color-darkgrey);
  border-bottom:1px solid var(--color-darkgrey);transform:rotate(45deg)}
.panel-more[open]>summary::after{margin:3px 0 0;transform:rotate(-135deg)}
.panel-specs{margin:0;padding:0 12px 10px}
.panel-specs div{display:flex;gap:10px;padding:4px 0;font-size:12px;line-height:16px;
  border-top:1px solid var(--color-ultralightgrey)}
.panel-specs dt{flex:0 0 42%;color:var(--color-darkgrey);margin:0}
.panel-specs dd{flex:1 1 auto;margin:0;color:var(--color-black)}

/* ── ستونِ کنش ─────────────────────────────────────────────────────────────
   مرجع: جعبهٔ ۶۴×۳۰ با برچسبِ شناور روی خطِ بالا، واحد کنارش، بعد پیامِ
   تحویل، بعد دکمهٔ تمام‌عرض. «شرط» معادلی در مرجع ندارد و در ۲۲۴px کنارِ
   جعبهٔ تعداد جا نمی‌شود، پس خطِ خودش را می‌گیرد. */
.qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0}
.qty-field{position:relative;flex:0 0 auto;margin-top:6px;padding-inline-end:8px}
.qty-field label{position:absolute;top:-6px;inset-inline-start:7px;padding:0 3px;
  background:var(--color-white);font:400 10px/12px var(--font-body);
  color:var(--color-charcoal)}
.qty-field input{width:64px;height:30px;text-align:center;font:12px var(--font-body);
  border:1px solid var(--color-grey);border-radius:6px;padding:0 4px;
  font-variant-numeric:tabular-nums;color:var(--color-charcoal);background:var(--color-white)}
.qty-field input:focus,.qty-field select:focus{outline:0;border-color:var(--color-charcoal)}
.qty-note{font:400 12px/14px var(--font-body);color:var(--color-darkgrey)}
.term-field{flex:1 1 100%;margin-top:14px;padding-inline-end:0}
.term-field select{width:100%;min-width:0;height:30px;padding:0 6px;
  font:12px var(--font-body);color:var(--color-charcoal);background:var(--color-white);
  border:1px solid var(--color-grey);border-radius:6px}

.panel-add{display:block;width:100%;height:23px;margin-top:20px;
  font:12px/21px var(--font-din);letter-spacing:.06em;color:#fff;
  background:var(--color-hibarghblue);border:1px solid var(--color-hibarghblue);
  border-radius:2px;cursor:pointer}
.panel-add:hover{background:var(--color-hibarghblue-hover);border-color:var(--color-hibarghblue-hover)}
.panel-add:disabled{background:var(--color-lightgrey);border-color:var(--color-lightgrey);
  color:var(--color-white);cursor:not-allowed}
.panel-add.is-done{background:var(--color-blue);border-color:var(--color-blue)}
.panel-msg{margin:6px 0 0;font:400 12px/14px var(--font-body);min-height:14px;
  color:var(--color-darkgrey)}
.panel-msg.is-err{color:#b00020}

/* ── نشانِ سبد در سربرگ ─────────────────────────────────────────────────── */
.m-cart{position:relative;display:inline-flex;align-items:center;gap:6px}
.m-cart .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--color-hibarghblue);color:#fff;font:400 11px/18px var(--font-med);
  text-align:center;font-variant-numeric:tabular-nums}
.m-cart .badge[hidden]{display:none}

/* ── صفحهٔ سفارش ────────────────────────────────────────────────────────────
   چیدمان از صفحهٔ سفارشِ زندهٔ مرجع (mcmaster.com/orders/) با
   getBoundingClientRect خوانده شده. عددها:

     نوارِ سربرگ    ارتفاع ۳۹ · خطِ زیرش ۲px (مرجع: سبزِ خودش، اینجا آبیِ کنش)
     عنوان          ۲۱px/۳۶ · ۱۰px فاصله تا ابزارها
     ابزارها        ۱۲px/۱۵٫۶ · خاکستریِ ۶۶۶ · ۳۲px بینشان
     ستونِ خط‌ها    ۹۴۸ · فاصله ۲۷ · ریل ۳۵۴
     یک خطِ سفارش   ۲۵ / ۱۱۰ / ۳۳۲ / ۵۵ / ۸۶ / ۸۶ / ۱fr / ۱۵  · حاشیه ۱۰ ۰ ۲۵
     جمع            برچسب ۱۴px/۱۸٫۲ · ۲۴px تا عدد
     زیرنویسِ جمع   ۱۰٫۷px/۱۳٫۹
     تیترِ ریل      ۱۶px/۲۰٫۸

   سه انحراف، هر سه از خودِ کار می‌آید نه از سلیقه:

     • ⚠️ مرجع ستونِ ۹۴۸پیکسلی را ثابت گرفته چون کلِ صفحه‌اش ثابت است
       (‏<meta viewport width=1024>‎). این‌جا `.rail` سمتِ چپ حدود ۲۶۰px
       می‌گیرد، پس ۹۴۸+۲۷+۳۵۴ در ۱۴۰۸ جا نمی‌شود. ستونِ خط‌ها کشسان شد و
       ریل روی ۳۵۴ ثابت ماند؛ چهار ستونِ عددی هم عرضِ مرجع را نگه داشتند.
       چیزی که کوتاه می‌آید، همان فضای خالیِ پیش از ✕ است.
     • «شرط» در مرجع همتا ندارد و در خانهٔ ۵۵پیکسلیِ تعداد جا نمی‌شود؛ به
       ستونِ هویت رفت. با این کار عرضِ ستون‌های عددی دست‌نخورده ماند.
     • فرمِ ثبت تمامِ ۳۵۴ را می‌گیرد، نه ۲۶۲ ِ جعبهٔ ورودِ مرجع: آن یک فرمِ
       دو فیلدی است و این یکی نام و تلفن و توضیح و دو گروه رادیو و بلوکِ
       چک دارد. ۲۶۲ در ۳۵۴ هم ناهموار می‌شد.
   ───────────────────────────────────────────────────────────────────────── */
.cart-empty{padding:40px 0;color:var(--color-darkgrey);font-size:13px}

.op-bar{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 32px;
  padding-bottom:1px;margin:0 0 8px;border-bottom:2px solid var(--color-hibarghblue)}
.op-bar h1{margin:0;padding-inline-end:10px;font:400 21px/36px var(--font-din);
  color:var(--color-green)}
.op-tools{display:flex;align-items:baseline;gap:32px;margin-inline-start:auto}
.op-tool{font:400 12px/20px var(--font-body);color:var(--color-darkgrey);
  padding:2px 0;border-radius:2px;cursor:pointer;background:none;border:0}
.op-tool:hover{color:var(--color-hibarghblue);text-decoration:underline}

.op-body{display:flex;align-items:flex-start;gap:27px}
/* ⚠️ زیرِ ۱۱۰۰px ریل می‌رود پایین، نه این‌که باریک شود.
   شبکهٔ هشت‌ستونی ۴۰۵px از عرض را ثابت می‌گیرد (۲۵+۱۱۰+۵۵+۸۶+۸۶+۱۵ به‌علاوهٔ
   هفت فاصلهٔ ۴تایی)، پس هرچه کم بیاید از ستونِ نام برداشته می‌شود — یعنی
   مهم‌ترین چیزِ خط اولین قربانی است. اندازه‌گیری‌شده پیش از این قاعده:
   نام روی ۱۲۰۰px ‏۱۳۰px، روی ۹۰۰px ‏۹۰px، و روی ۷۰۰px صفر. */
.op-lines{flex:1 1 auto;min-width:0;padding-top:10px}
/* ریل با خطِ عمودی از خط‌ها جدا می‌شود، مثلِ مرجع */
.op-rail{flex:0 0 354px;max-width:354px;min-width:0;padding:10px 0 20px 0;
  border-inline-start:1px solid var(--color-lightgrey);padding-inline-start:27px}

/* ── یک خطِ سفارش ─────────────────────────────────────────────────────────
   ⚠️ عرضِ ستون‌ها با minmax نوشته شده، نه با عددِ خالی. با عددِ ثابت، روی
   ۹۰۰px شبکه از ظرف می‌زد بیرون و کلِ صفحه اسکرولِ افقی می‌گرفت — چیزی که
   مرجع هرگز نمی‌بیند چون صفحه‌اش اصلاً واکنش‌گرا نیست. */
/* مرجع یک خانهٔ تصویرِ ۱۱۰×۷۳ بینِ شماره و نام دارد؛ عکسی در کار نیست و
   حذف شد. عرضِ آزادشده به ستونِ نام رسید، که در فارسی همیشه کم می‌آورَد.

   فاصلهٔ پیش از ✕ عددِ خودِ مرجع است: جمعِ خط آن‌جا در ۷۴۱ تمام می‌شود و ✕
   از ۸۳۰ شروع — ۸۹px. با ۱fr به‌جای این عدد، ✕ تا لبهٔ سطر عقب می‌رفت و
   ۲۸۰px از هیچ‌چیز فاصله می‌گرفت. */
.op-line{display:grid;align-items:start;column-gap:4px;
  grid-template-columns:25px minmax(0,1fr) 55px 86px 86px 89px 15px;
  margin:10px 0 25px}
.ol-n{font:400 12px/16px var(--font-body);color:var(--color-charcoal)}

.ol-info{min-width:0}
.ol-title{font:400 12px/17px var(--font-body);color:var(--color-black)}
/* ⚠️ dir="ltr" روی خودِ بلوک، جهتش را عوض می‌کند و text-align:start ِ آن
   می‌شود چپ — شمارهٔ کالا می‌افتاد آن سرِ ستون. جداسازیِ دوسویه باید روی یک
   span درونی باشد، نه روی بلوک. */
.ol-sku{font:400 12px/16px var(--font-med);color:var(--color-blue);margin-top:3px}
/* ⚠️ تا امروز تنها قاعدهٔ این کلاس `table.cart .c-meta` بود، یعنی بیرونِ آن
   جدول بی‌اثر: js/searchpage.js چهار جا از همین کلاس استفاده می‌کند و
   .cheque-ro هم. هیچ‌کدام هرگز استایل نگرفته بودند. حالا قاعدهٔ پایه هست. */
.c-meta{font:400 11px/15px var(--font-body);color:var(--color-darkgrey)}
.ol-info .c-meta{margin-top:2px}
.ol-termrow{margin-top:6px}
.ol-term{height:30px;max-width:100%;padding:0 6px;font:12px var(--font-body);
  color:var(--color-charcoal);background:var(--color-white);
  border:1px solid var(--color-grey);border-radius:6px}
.ol-term:disabled{opacity:.6}

/* چهار خانهٔ عددی: هم‌تراز با لبهٔ پایانِ خودشان، دقیقاً مثلِ مرجع */
.ol-qty,.ol-price,.ol-total{text-align:end;font-variant-numeric:tabular-nums}
.ol-qty input{width:55px;height:30px;text-align:center;font:12px var(--font-body);
  border:1px solid var(--color-grey);border-radius:6px;padding:0 4px;
  font-variant-numeric:tabular-nums;color:var(--color-charcoal);background:var(--color-white)}
.ol-qty input:focus{outline:0;border-color:var(--color-charcoal)}
.ol-per{display:block;margin-top:2px;font:400 11px/14px var(--font-body);
  color:var(--color-darkgrey)}
.ol-price .c-unit,.ol-total{font-family:var(--font-med);color:var(--color-black);
  font-size:12px;line-height:16px}
/* ⚠️ خط‌خورده باید خطِ خودش را بگیرد. کنارِ عدد که بیاید، الگوریتمِ دوسویه
   دو دنبالهٔ رقمی را یکی می‌کند و margin به لبهٔ بیرونیِ جفت می‌خورد. */
.ol-price .c-was{display:block;margin-top:3px;font:400 11px/14px var(--font-body);
  color:var(--color-mediumgrey);text-decoration:line-through;
  text-decoration-color:var(--color-lightgrey)}
.op-x{width:15px;height:17px;font-size:15px;line-height:1;color:var(--color-mediumgrey);
  background:none;border:0;cursor:pointer;padding:0}
.op-x:hover{color:#b00020}
/* «از وقتی گذاشتیدش گران شده» — کلِ دلیلِ وجودِ این دفترچه این بوده که قیمتِ
   کاغذی بعدِ دو هفته غلط است؛ پنهان‌کردنِ تغییر بدترین کارِ ممکن است. */
.moved{display:block;margin-top:4px;font:400 11px/15px var(--font-body);color:#8a5a00}
.moved s{color:var(--color-mediumgrey)}

.op-add{margin:0;font-size:12px}
.op-add a{color:var(--color-hibarghblue)}

@media (max-width:1100px){
  .op-body{display:block}
  .op-rail{max-width:none;margin-top:22px;padding:16px 0 0;
    border-inline-start:0;padding-inline-start:0;
    border-top:2px solid var(--color-hibarghblue)}
  /* ریلِ تمام‌عرض، فرمِ تمام‌عرض نمی‌خواهد */
  .op-rail .order-form{max-width:520px}
  .op-rail .op-totals{max-width:520px}
  .op-rail .cheque-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── ریلِ جمع و ثبت ───────────────────────────────────────────────────────── */
.op-totals{padding-bottom:20px}
/* برچسب و عدد کنارِ هم با ۲۴px فاصله، نه دو سرِ ریل — مرجع «Merchandise»
   را در ۱۰۰۵ و «$19.64» را در ۱۰۸۵ می‌گذارد، در ریلی که تا ۱۳۵۹ ادامه دارد. */
.op-charge{display:flex;align-items:baseline;gap:24px;
  font:400 14px/19px var(--font-body);color:var(--color-charcoal);padding-bottom:4px}
.op-charge b{font-weight:400;font-family:var(--font-med);color:var(--color-black);
  font-variant-numeric:tabular-nums}
.op-cur{font-size:11px;color:var(--color-darkgrey)}
.op-note{margin:0;font:400 11px/15px var(--font-body);color:var(--color-charcoal)}
.op-h{margin:0 0 12px;padding-top:16px;font:400 16px/21px var(--font-body);
  color:var(--color-green);border-top:1px solid var(--color-lightgrey)}
.op-rail .order-form{max-width:none}
.op-rail .cheque-grid{grid-template-columns:minmax(0,1fr)}

.order-form{max-width:520px;display:grid;gap:12px}
.order-form label{display:block;font-size:11px;color:var(--color-darkgrey);
  margin-bottom:4px}
.order-form input,.order-form textarea{width:100%;height:38px;padding:0 10px;
  font:13px var(--font-body);border:1px solid var(--color-grey);border-radius:2px;
  background:var(--color-white);color:var(--color-black)}
.order-form textarea{height:auto;min-height:70px;padding:8px 10px;line-height:1.6;
  resize:vertical}
.order-form input:focus,.order-form textarea:focus{outline:0;border-color:var(--color-charcoal)}
.order-done{padding:18px 20px;border:1px solid var(--color-lightgrey);
  border-right:4px solid var(--color-hibarghblue);max-width:520px}
.order-done h2{margin:0 0 8px;font:400 15px/1.4 var(--font-med)}
.order-done .code{font:400 20px/1.3 var(--font-med);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;margin:6px 0 10px}

@media (max-width:640px){
  /* عرضِ ۴۶۵ مرجع روی ۳۶۰px جا نمی‌شود: دو ستون روی هم می‌روند و پنل
     تمام‌عرض می‌شود. تناسب‌های درونی (فاصله‌ها، جعبهٔ تعداد، دکمه) همان
     می‌ماند؛ فقط چیدمانِ دو ستون عمودی می‌شود. */
  .panel{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}
  .panel-main{flex-wrap:wrap}
  .panel-id{flex:1 1 100%;padding:16px 16px 14px;
    display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 12px}
  .panel-act{flex:1 1 100%;padding:16px;margin-inline-start:0;
    border-top:1px solid var(--color-lightgrey)}
  .panel-act::before{display:none}
  .panel-id>*{flex:1 1 100%}
  /* نام تا لبهٔ پایانِ پنل می‌رود — همان‌جا که ضربدرِ بستن است. بدونِ این
     فاصله، خطِ اولِ نام زیرِ ✕ می‌رود. */
  .panel-id>.panel-name{padding-inline-end:30px}
  /* ── خطِ سفارش روی گوشی ────────────────────────────────────────────────
     ⚠️ مرجع این‌جا چیزی برای کپی ندارد: صفحه‌اش <meta viewport width=1024>
     دارد و روی گوشی همان صفحهٔ ۱۰۲۴پیکسلیِ کوچک‌شده را می‌دهد؛ باید زوم کرد.

     شبکهٔ هفت‌ستونی در ۳۲۰px یعنی ستونِ نام ۴۰px، پس دو سطر می‌شود:

       ۱ [تصویر] نام · کد · برند · شرط
         ۲۵ عدد    ۱۷۰,۴۳۶ ریال    ۴,۲۶۰,۹۰۰ ریال            ✕

     ⚠️ نسخهٔ اولِ این بلوک به هر چهار خانهٔ عددی `grid-column:1/-1` داده
     بود؛ هر کدام سطرِ خودش را گرفت و خط چهار سطرِ اضافه بلند شد —
     اندازه‌گیری‌شده روی ۳۶۰px: تعداد در ۳۴۰، قیمت در ۳۹۴، جمع در ۴۳۷،
     ✕ در ۴۶۳. با flex-wrap هر پنج‌تا در یک سطر می‌نشینند و `.ol-gap` که
     تنها کارش پرکردنِ فاصله است ✕ را به لبهٔ پایان می‌راند. */
  .op-body{display:block}
  /* ⚠️ دو بار اشتباه شد، هر دو بار چون جای عنصرها *استنتاج* می‌شد نه گفته:
       ۱) `grid-column:1/-1` روی هر چهار خانهٔ عددی → هر کدام سطرِ خودش را
          گرفت. اندازه‌گیری روی ۳۶۰px: ۳۴۰ / ۳۹۴ / ۴۳۷ / ۴۶۳.
       ۲) flex-wrap → تعداد تنها روی یک سطر افتاد و بقیه سطرِ بعد:
          ۲۴۱ / ۳۶۱ / ۳۶۱ / ۳۶۱.
     حالا هر خانه جای دقیقِ خودش را دارد. شش ستون، دو سطر:

       ۱ | ← نام و کد و برند و شرط، تا لبهٔ پایان →
       ←   تعداد   → | قیمت واحد | جمع خط | (فاصله) | ✕

     ستونِ پنجم ‏1fr است و تنها کارش این است که ✕ را به لبهٔ پایان براند. */
  .op-line{display:grid;align-items:start;
    grid-template-columns:22px auto auto auto minmax(0,1fr) 15px;
    column-gap:8px;row-gap:14px;
    margin:0 0 18px;padding-bottom:18px;
    border-bottom:1px solid var(--color-lightgrey)}
  .ol-n    {grid-area:1/1/2/2;font-size:11px;line-height:18px}
  .ol-info {grid-area:1/2/2/7;min-width:0}
  .ol-qty  {grid-area:2/1/3/3}
  .ol-price{grid-area:2/3/3/4}
  .ol-total{grid-area:2/4/3/5}
  .ol-gap  {grid-area:2/5/3/6;display:block}
  .ol-del  {grid-area:2/6/3/7}
  .ol-qty,.ol-price,.ol-total{text-align:start}
  .ol-per{display:inline;margin:0;padding-inline-start:4px}
  .ol-price .c-was{display:block;padding:0}

  .op-rail{max-width:none;padding-inline-start:0;border-inline-start:0;
    border-top:2px solid var(--color-hibarghblue);margin-top:8px;padding-top:16px}
  .op-rail .order-form,.op-rail .op-totals{max-width:none}
  .op-rail .cheque-grid{grid-template-columns:minmax(0,1fr)}
  .op-tools{margin-inline-start:0;gap:20px}}

/* ── ورود / ثبت‌نام / بازیابیِ رمز ──────────────────────────────────────────
   فرم‌ها همان .order-form صفحهٔ سبدند — همان گرید، همان اندازهٔ میدان‌ها؛
   تنها چیزِ تازه تب‌ها و پیوندهایی‌اند که بینِ سه پنل (ورود/ثبت‌نام/بازیابی)
   سوییچ می‌کنند، بی‌آنکه صفحه تازه شود — همکاری که رمز را غلط زده نباید
   جایش را در فرم از دست بدهد. */
.auth-box{max-width:440px}
.auth-tabs{display:flex;gap:28px;border-bottom:1px solid var(--color-lightgrey);margin:0 0 20px}
.auth-tab{padding:0 0 10px;font:13px var(--font-med);color:var(--color-darkgrey);
  border-bottom:2px solid transparent;cursor:pointer}
.auth-tab.is-active{color:var(--color-green);border-bottom-color:var(--color-hibarghblue)}
.auth-panel[hidden],.auth-step[hidden]{display:none}
.auth-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.auth-link{background:none;border:0;padding:0;color:var(--color-hibarghblue);
  font-size:12px;cursor:pointer}
.auth-link:hover{text-decoration:underline}
.auth-note{font-size:12px;color:var(--color-darkgrey);margin:0 0 14px;line-height:1.6;max-width:60ch}
#panel-forgot .auth-link{margin-top:8px}

/* ── حسابِ همکار ────────────────────────────────────────────────────────── */
.account-card{padding:18px 20px;border:1px solid var(--color-lightgrey);
  border-right:4px solid var(--color-hibarghblue);max-width:480px}
.account-card .panel-specs{margin:0 0 16px;padding:0;border-top:0}
/* طلایی/نقره‌ای همان دو رنگی‌اند که «تغییرِ قیمت» (کهربایی) و کارت‌های
   در‌انتظار (خاکستریِ روشن) در همین فایل دارند — پالتِ تازه‌ای باز نمی‌شود. */
.level-chip{display:inline-block;padding:2px 10px;border-radius:10px;
  font:400 12px/1.7 var(--font-med)}
.level-chip.level-1{background:var(--color-hoveryellow);color:#8a5a00}
.level-chip.level-2{background:var(--color-ultralightgrey);color:var(--color-charcoal)}
.level-chip.level-3{background:var(--color-ultralightgrey);color:var(--color-darkgrey)}

@media (max-width:640px){
  .auth-box,.account-card{max-width:none}
}

/* ── قیمتِ همکار در پنلِ کالا ───────────────────────────────────────────────
   قیمتِ لیست کوچک و خط‌خورده می‌ماند و قیمتِ خودِ خریدار بزرگ می‌شود. هر دو
   می‌مانند چون همکار برگهٔ چاپیِ کارخانه را هم جلوی دستش دارد و باید بتواند
   بگوید کدام عدد کدام است — نشان‌ندادنِ قیمتِ لیست، تخفیف را نامرئی می‌کند. */
/* ⚠️ اندازه‌ها از rem به px آمدند و کوچک شدند. ستونِ هویت حالا ۱۸۲px عرض
   دارد، نه نصفِ پنلِ تمام‌عرض؛ عددِ ۱٫۳۵rem (۲۱٫۶px) در آن ستون از نامِ کالا
   بلندتر می‌شد و کلِ تناسبِ مرجع را به هم می‌زد. ۱۶px هنوز بزرگ‌ترین چیزِ
   ستون است، پس سلسله‌مراتب سرِ جایش می‌ماند. */
.panel-price.is-was{font-size:12px;color:var(--color-mediumgrey);text-decoration:line-through;
  text-decoration-color:var(--color-lightgrey)}
.panel-price.is-was .u{text-decoration:none}
.panel-was-l{margin-inline-start:6px;font-size:11px;color:var(--color-mediumgrey);
  text-decoration:none;display:inline-block}
.panel-mine{margin:2px 0 0;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.panel-mine-l{font-size:11px;color:var(--color-darkgrey)}
.panel-mine-n{font:400 16px/22px var(--font-din);font-variant-numeric:tabular-nums;
  direction:ltr;display:inline-block}
.panel-mine .u{font-size:11px;color:var(--color-darkgrey)}
.panel-off{font-size:11px;line-height:15px;padding:0 6px;border-radius:20px;
  background:var(--color-hoveryellow);border:1px solid var(--color-yellow)}
.panel-mine.is-out{margin-top:6px}
.panel-mine.is-out a{font-size:12px;line-height:16px;color:var(--color-hibarghblue)}
.panel-add[disabled]{opacity:.5;cursor:not-allowed}

/* ── برگهٔ نتیجهٔ پرداخت ──────────────────────────────────────────────────── */
.pay-result{max-width:34rem;margin:3rem auto;padding:0 1.25rem;text-align:center}
.pay-result h1{font-size:1.4rem;margin:0 0 .75rem}
.pay-result.is-ok h1{color:#0a7c42}
.pay-result.is-bad h1{color:#b00020}
.pay-code b{font-family:var(--font-din);font-variant-numeric:tabular-nums;
  display:inline-block;direction:ltr}
.pay-note{color:var(--color-darkgrey);font-size:.9rem}
.pay-back{margin-top:2rem}


/* ── انتخاب‌های ثبتِ سفارش: نحوهٔ ثبت و روشِ تحویل ─────────────────────────
   رادیوی خامِ مرورگر، نه سوییچِ ساخته‌شده: این عنصر فقط یک انتخاب است و
   بهتر است با بقیهٔ فرم‌های همین دفترچه هم‌خانواده بماند، نه ابزارِ تازه. */
.choice-label{display:block;font-size:11px;color:var(--color-darkgrey);margin-bottom:6px}
.choice-row{display:flex;flex-wrap:wrap;gap:16px 22px}
.choice{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--color-charcoal);cursor:pointer}
.choice input{width:15px;height:15px;accent-color:var(--color-hibarghblue);cursor:pointer;margin:0}

/* ── بلوکِ چک — سررسید و مبلغ فقط نمایشی‌اند، در هیچ inputِ نام‌داری
   نیستند، پس هیچ‌وقت سهواً فرستاده نمی‌شوند. */
.cheque-block{min-width:0;border:1px solid var(--color-lightgrey);border-radius:2px;
  padding:14px 16px;margin:0}
.cheque-block+.cheque-block{margin-top:12px}
.cheque-block legend{padding:0 6px;font:400 12px var(--font-med);color:var(--color-charcoal)}
.cheque-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cheque-grid label{display:block;font-size:11px;color:var(--color-darkgrey);margin-bottom:4px}
.cheque-grid input{width:100%;height:38px;padding:0 10px;font:13px var(--font-body);
  border:1px solid var(--color-grey);border-radius:2px;background:var(--color-white);color:var(--color-black)}
.cheque-grid input:focus{outline:0;border-color:var(--color-charcoal)}
.cheque-ro{margin:0;height:38px;display:flex;align-items:center;padding:0 10px;
  border:1px solid var(--color-ultralightgrey);border-radius:2px;background:var(--color-hovertilegreen);
  font:13px var(--font-med);color:var(--color-charcoal);font-variant-numeric:tabular-nums}
@media (max-width:640px){.cheque-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════════
   لمس — دو قاعده که در همهٔ فایل پخش شده بودند و باید در یک جا بنشینند
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ۱. کفِ ۱۶px روی هر میدانِ فوکوس‌پذیر ────────────────────────────────────
   ⚠️ همان قاعده‌ای که .search بالای همین فایل صریح رعایتش می‌کند و
   css/admin.css هم با font-size:1rem تکرارش کرده — ولی هیچ‌کدام از
   میدان‌های خودِ سایت نداشتندش. اندازه‌گیری‌شده: ورودِ سربرگ ۱۴px،
   تعدادِ پنل ۱۴px، تعدادِ سبد ۱۳px، فرمِ سفارش و نشانی و کدپستی ۱۳px،
   میدان‌های چک ۱۳px، انتخابگرِ شرطِ سبد ۱۲px.

   سافاریِ iOS روی هر ورودیِ زیرِ ۱۶px هنگامِ فوکوس کلِ صفحه را زوم می‌کند
   و دیگر برنمی‌گرداند. یعنی همکاری که وسطِ ثبتِ سفارش روی «شمارهٔ تماس»
   می‌زند، بقیهٔ فرم را زوم‌شده و جابه‌جا پر می‌کند.

   فقط جایی که انگشت هست: روی دسکتاپ زومی در کار نیست و چگالیِ مرجع
   دست‌نخورده می‌ماند. */
@media (pointer:coarse),(max-width:900px){
  .mh-pop input[type=tel],.mh-pop input[type=password],.mh-pop input[type=text],
  .qty-field input,.qty-field select,
  .order-form input,.order-form textarea,
  .cheque-grid input,
  .ol-qty input,.ol-term{font-size:16px}
}

/* ── ۲. ناحیهٔ ضربه، بی جابه‌جاییِ چیدمان ────────────────────────────────────
   «سبد سفارش» ۱۴px ارتفاع داشت — کوچک‌ترین هدفِ صفحه و درعین‌حال کنشِ
   اصلیِ سربرگ. «ورود» ۲۲px و شمارهٔ تلفن هم ۲۲px.

   بزرگ‌کردنِ خودِ جعبه سربرگ را بلندتر می‌کرد (اندازه‌ها روی مرجع سنجیده
   شده‌اند و نباید تکان بخورند)، پس ناحیهٔ ضربه با یک شبه‌عنصرِ بیرون‌زده
   پهن می‌شود و متن دقیقاً سرِ جایش می‌ماند. پهنای افقی ۴px است، نصفِ
   فاصلهٔ ۱۲پیکسلیِ .mh-top، تا دو هدف روی هم نیفتند. */
@media (pointer:coarse),(max-width:640px){
  .m-cart,.mh-acct-b,.mh-tel{position:relative}
  .m-cart::after,.mh-acct-b::after,.mh-tel::after{
    content:'';position:absolute;inset:-14px -4px}
  /* رادیوهای «نحوهٔ ثبت سفارش» و «روشِ تحویل» ۱۵px بودند و برچسبشان ۲۰px —
     دو انتخابِ اجباریِ ثبتِ سفارش، روی کوچک‌ترین هدف‌های صفحه. */
  .choice{min-height:44px}
  .install-later{padding:12px 10px}
  /* ⚠️ اندازه‌های مرجع برای موشواره‌اند: دکمهٔ «ADD TO ORDER» آن‌جا ۲۳px است
     و جعبهٔ تعداد ۳۰px. با انگشت هیچ‌کدام قابلِ زدن نیست، و این دکمه تنها
     راهِ سفارش‌دادن است. روی دسکتاپ عددِ مرجع دست‌نخورده می‌ماند. */
  .panel-add{height:44px;line-height:42px}
  .qty-field input,.term-field select{height:44px}
  .panel-close{width:32px;height:32px}
  .panel-close::after{content:'';position:absolute;inset:-6px}
  .panel-more>summary{min-height:44px;line-height:44px}
  /* ✕ ِ هر خطِ سفارش ۱۵×۱۷ است — اندازهٔ مرجع، برای موشواره. با انگشت
     نه. ناحیه با شبه‌عنصر پهن می‌شود تا چیدمان تکان نخورد. */
  .op-x{position:relative}
  .op-x::after{content:'';position:absolute;inset:-14px -12px}
  .ol-qty input,.ol-term{height:44px}
  .op-tool{padding:12px 0}
}