بود → ۱۶ تا ۱۷ پیکسل (درست) • متنی که داخل
، برای همین
بعضی صفحات ریزتر دیده می شدند. حالا خود بلاک هم روی مقیاس نشسته و
عناصر بلوکی داخلش هم صریح تنظیم شده اند، پس دیگر فرقی نمی کند
محتوا با چه تگی نوشته شده باشد.
================================================================== */
.article-intro.rich-content,
.article-intro,
.article-body.rich-content{
font-size:var(--fs-body);
line-height:var(--lh-body);
}
/* عناصر بلوکی متن، با هر تگی که ادیتور ساخته باشد */
.article-intro > div,
.article-intro > p,
.article-intro > span,
.content-block > div,
.content-block > p,
.rich-content > div,
.rich-content > p,
.rich-content div:not([class]),
.article-intro div:not([class]),
.content-block div:not([class]){
font-size:var(--fs-body);
line-height:var(--lh-body);
}
/* لیست ها هم همین اندازه */
.article-intro li,.article-intro ul li,.article-intro ol li{
font-size:var(--fs-body);
line-height:var(--lh-body);
}
@media(max-width:860px){
.article-intro.rich-content,
.article-intro,
.article-body.rich-content{font-size:var(--fs-body);line-height:1.95}
.article-intro > div,
.article-intro > p,
.content-block > div,
.content-block > p,
.rich-content > div,
.rich-content > p,
.rich-content div:not([class]),
.article-intro div:not([class]),
.article-intro li{font-size:var(--fs-body);line-height:1.95}
}
/* همان مقدار ثابت ۱۴ پیکسلی روی پنج بلاک دیگر هم بود — بررسی خودکار
پیدایشان کرد. اینها هم روی همان مقیاس نشستند تا متن سایت همه جا
یک اندازه باشد. */
.content-block.rich-content,
.section-content.rich-content,
.page-content.rich-content,
.about-lead.rich-content,
.about-more__inner.rich-content,
.section-text .section-content.rich-content{
font-size:var(--fs-body);
line-height:var(--lh-body);
}
@media(max-width:860px){
.content-block.rich-content,
.section-content.rich-content,
.page-content.rich-content,
.about-lead.rich-content,
.about-more__inner.rich-content{font-size:var(--fs-body);line-height:1.95}
}
/* دو مورد آخر: بخش های متنی که ادمین به صفحه اضافه می کند */
.section-content,
.section-text .section-content{font-size:var(--fs-body);line-height:var(--lh-body)}
@media(max-width:860px){
.section-content,
.section-text .section-content{font-size:var(--fs-body);line-height:1.95}
}
/* ==================================================================
جدول خدمات و قیمت + جعبه نویسنده
================================================================== */
.lg-prices{margin:34px 0 30px}
.lg-prices__title{
font-size:var(--fs-h2);font-weight:900;color:var(--lg-ink);line-height:1.7;
margin:0 0 16px;padding:0 0 10px;position:relative;border-bottom:1px solid var(--lg-line);
}
.lg-prices__title::after{
content:"";position:absolute;bottom:-1px;inset-inline-start:0;
width:52px;height:3px;background:var(--lg-red);
}
.lg-prices__wrap{
border:1px solid var(--lg-line);border-radius:var(--radius);overflow:hidden;background:#fff;
}
.lg-prices__table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.lg-prices__table th{
background:var(--lg-ink);color:#fff;font-weight:800;text-align:start;
padding:13px 16px;font-size:var(--fs-sm);white-space:nowrap;
}
.lg-prices__table td{
padding:13px 16px;border-top:1px solid var(--lg-line);
color:#241d20;line-height:1.85;vertical-align:middle;
}
.lg-prices__table tbody tr:nth-child(even) td{background:var(--lg-paper-2)}
.lg-prices__table tbody tr:hover td{background:var(--lg-red-tint)}
.lg-prices__price{font-weight:800;color:var(--lg-red-ink);white-space:nowrap}
.lg-prices__price small{font-weight:600;color:var(--text-soft);font-size:.85em}
.lg-prices__ask{color:var(--text-soft);font-weight:700}
.lg-prices__foot{
margin:12px 0 0;font-size:var(--fs-xs);color:var(--text-soft);line-height:1.9;
padding-inline-start:14px;border-inline-start:2px solid var(--lg-red-line);
}
.lg-prices__cta{margin-top:16px}
.lg-prices__cta .btn{width:auto}
/* موبایل: جدول به کارت تبدیل می شود تا اسکرول افقی لازم نباشد */
@media(max-width:620px){
.lg-prices__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lg-prices__table,.lg-prices__table tbody,.lg-prices__table tr,.lg-prices__table td{display:block;width:100%}
.lg-prices__table tr{border-top:1px solid var(--lg-line);padding:6px 0}
.lg-prices__table tr:first-child{border-top:0}
.lg-prices__table td{
border:0;padding:7px 16px;display:flex;justify-content:space-between;gap:14px;
}
.lg-prices__table td::before{
content:attr(data-label);font-weight:800;color:var(--text-soft);flex:none;
}
.lg-prices__table td:empty,
.lg-prices__table td.lg-prices__note-col:empty{display:none}
.lg-prices__table tbody tr:nth-child(even) td{background:transparent}
.lg-prices__table tbody tr:nth-child(even){background:var(--lg-paper-2)}
.lg-prices__cta .btn{width:100%;justify-content:center}
}
/* ---------------------------- جعبه نویسنده ----------------------- */
.lg-author{
display:flex;gap:16px;align-items:flex-start;
margin:30px 0 8px;padding:20px 22px;
background:var(--lg-paper-2);border:1px solid var(--lg-line);
border-radius:var(--radius-lg);border-inline-start:3px solid var(--lg-red);
}
.lg-author__badge{
flex:none;width:46px;height:46px;border-radius:50%;
background:var(--lg-red);color:#fff;display:grid;place-items:center;font-size:1.05rem;
}
.lg-author__body{min-width:0;flex:1}
.lg-author__by{margin:0;font-size:var(--fs-sm);color:var(--text-soft);line-height:1.9}
.lg-author__by b{color:var(--lg-ink);font-weight:900}
.lg-author__role{color:var(--text-soft)}
.lg-author__bio{margin:6px 0 0;font-size:var(--fs-sm);color:var(--text-soft);line-height:1.95}
.lg-author__facts{
list-style:none;margin:12px 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:8px 18px;
}
.lg-author__facts li{
font-size:var(--fs-xs);color:var(--text-soft);line-height:1.8;
position:relative;padding-inline-start:14px;
}
.lg-author__facts li::before{
content:"";position:absolute;inset-inline-start:0;top:.7em;
width:6px;height:6px;border-radius:50%;background:var(--lg-red);
}
.lg-author__facts b{color:var(--lg-ink);font-weight:900}
.lg-author__facts a{color:var(--lg-red-ink);font-weight:700}
@media(max-width:620px){
.lg-author{flex-direction:column;gap:12px;padding:16px 16px}
.lg-author__facts{flex-direction:column;gap:6px}
}
/* ==================================================================
کارت مقالات — بازطراحی نهایی
------------------------------------------------------------------
⚠ چرا این بلاک لازم شد و چرا اینقدر صریح نوشته شده:
قالب پایه در مدیا کوئری ۷۶۸ پیکسل، کارت ها را افقی می کرد و به عکس
اندازه ثابت ۵۲×۵۲ می داد. بازطراحی دور قبل من روی همان عکس
aspect-ratio: 16/10 گذاشته بود ولی عرض را دست نزده بود. نتیجه:
عرض ۵۲ پیکسل از قاعده قدیم + نسبت ۱۶:۱۰ از قاعده من = عکسی به
ارتفاع ۳۲ پیکسل، یعنی همان نوار باریک بی معنی در تصویر.
درس این ماجرا: وقتی قاعده قدیمی width می دهد و قاعده جدید
aspect-ratio، هر دو با هم اعمال می شوند و نتیجه اش هیچ کدام نیست.
پس اینجا هر دو بعد صریح تعیین شده اند.
طرح نهایی:
دسکتاپ → کارت عمودی، عکس ۱۶:۱۰ بالا، عنوان دو خط
موبایل → کارت افقی با بندانگشتی ۹۶×۹۶ و عنوان سه خط
(الگوی رایج سایت های خبری و مجله ای برای فهرست مطالب)
================================================================== */
/* ---------------------------- شبکه ------------------------------- */
.children-block .child-grid,
.children-block--suggest .child-grid,
.children-block--inline .child-grid,
.children-block--tail .child-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:18px;
align-items:stretch;
}
/* ---------------------------- کارت ------------------------------- */
.children-block .child,
.children-block--suggest .child,
.children-block--inline .child,
.children-block--tail .child{
display:flex;flex-direction:column;height:100%;
padding:0;gap:0;
background:#fff;
border:1px solid var(--lg-line);
border-radius:var(--radius);
overflow:hidden;position:relative;
transition:var(--transition);
box-shadow:none;transform:none;
}
/* نوار قرمز بالای کارت هنگام hover */
.children-block .child::before{
content:"";position:absolute;top:0;inset-inline:0;height:3px;
background:var(--lg-red);z-index:2;
transform:scaleX(0);transform-origin:inline-start;
transition:transform .25s ease;
}
/* ---------------------------- عکس -------------------------------- */
.children-block .child .child-media,
.children-block--suggest .child--cover .child-media,
.children-block--inline .child--cover .child-media,
.children-block--tail .child--cover .child-media{
flex:none;
width:100%;
height:auto;
aspect-ratio:16/10;
border-radius:0;
overflow:hidden;
background:var(--lg-paper-2);
position:relative;
}
.children-block .child .child-media img,
.children-block--suggest .child--cover .child-media img,
.children-block--inline .child--cover .child-media img{
width:100%;height:100%;
object-fit:cover;object-position:center;
display:block;
transition:transform .45s ease;
}
.children-block .child-media-accent{display:none}
/* ---------------------------- متن -------------------------------- */
.children-block .child .child-body,
.children-block--suggest .child--cover .child-body,
.children-block--inline .child--cover .child-body,
.children-block--tail .child--cover .child-body{
padding:14px 16px 34px;
display:flex;flex-direction:column;gap:6px;
flex:1;min-width:0;
}
.children-block .child__title,
.children-block .child b,
.children-block--suggest .child b,
.children-block--inline .child b{
margin:0;
font-size:var(--fs-sm);
font-weight:800;
color:var(--lg-ink);
line-height:1.8;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(2 * 1.8em);
}
/* ---------------------------- فلش -------------------------------- */
/* کاراکتر ‹ در RTL برعکس می شود، پس با بوردر کشیده می شود */
.children-block .child .arr,
.children-block--suggest .child--cover .arr,
.children-block--inline .child--cover .arr,
.children-block--tail .child--cover .arr{
position:absolute;
bottom:12px;inset-inline-end:16px;
width:auto;height:auto;margin:0;
font-size:0;line-height:0;opacity:1;
}
.children-block .child .arr::before{
content:"";display:block;width:8px;height:8px;
border-top:2px solid var(--lg-red);
border-inline-start:2px solid var(--lg-red);
transform:rotate(-45deg);
opacity:.6;transition:opacity .2s ease;
}
/* --------------------------- hover ------------------------------- */
.children-block .child:hover{
background:#fff;
border-color:var(--lg-red-line);
box-shadow:0 10px 26px rgba(23,18,21,.10);
transform:none;
}
.children-block .child:hover::before{transform:scaleX(1)}
.children-block .child:hover .child-media img{transform:scale(1.05)}
.children-block .child:hover .arr::before{opacity:1}
/* ==================================================================
موبایل — کارت افقی با بندانگشتی
================================================================== */
@media(max-width:768px){
.children-block .child-grid,
.children-block--suggest .child-grid,
.children-block--inline .child-grid,
.children-block--tail .child-grid{
grid-template-columns:1fr;
gap:10px;
}
.children-block .child,
.children-block--suggest .child,
.children-block--inline .child,
.children-block--tail .child{
flex-direction:row;align-items:stretch;
height:auto;min-height:96px;
padding:0;gap:0;
border-radius:var(--radius);
}
/* هر دو بعد صریح — تا ترکیب width قدیمی و aspect-ratio جدید
دوباره نوار باریک نسازد */
.children-block .child .child-media,
.children-block--suggest .child--cover .child-media,
.children-block--inline .child--cover .child-media,
.children-block--tail .child--cover .child-media{
flex:none;
width:104px;
height:auto;
min-height:96px;
aspect-ratio:auto;
align-self:stretch;
}
.children-block .child .child-body,
.children-block--suggest .child--cover .child-body,
.children-block--inline .child--cover .child-body,
.children-block--tail .child--cover .child-body{
padding:12px 14px 12px 30px;
justify-content:center;
}
.children-block .child__title,
.children-block .child b,
.children-block--suggest .child b,
.children-block--inline .child b{
-webkit-line-clamp:3;
min-height:0;
line-height:1.75;
}
.children-block .child .arr,
.children-block--suggest .child--cover .arr,
.children-block--inline .child--cover .arr,
.children-block--tail .child--cover .arr{
position:absolute;
top:50%;bottom:auto;
inset-inline-end:12px;
transform:translateY(-50%);
}
}
/* روی دستگاه لمسی، رنگ hover بعد از tap نچسبد */
@media (hover:none){
.children-block .child:hover{box-shadow:none;border-color:var(--lg-line)}
.children-block .child:hover::before{transform:scaleX(0)}
.children-block .child:hover .child-media img{transform:none}
.children-block .child:active{border-color:var(--lg-red-line)}
}
/* ==================================================================
⚠ عکس کارت ها داخل .rich-content قرار می گیرند
------------------------------------------------------------------
بلاک «مطالب مرتبط» داخل ظرف .article-intro.rich-content رندر می شود،
و آنجا قاعده ای با !important روی همه عکس ها هست:
.rich-content img { margin:28px auto !important;
height:auto !important; ... }
این قاعده برای عکس های داخل متن نوشته شده و کاملاً درست است، ولی
روی عکس کارت ها هم می افتاد: حاشیه ۲۸ پیکسلی می ساخت و ارتفاع
۱۰۰٪ را خنثی می کرد. نتیجه اش همان فاصله سفید دور عکس داخل کارت.
چون قاعده اصلی !important دارد، خنثی کردنش هم به !important نیاز
دارد — اینجا استثنا موجه است.
================================================================== */
.rich-content .children-block .child-media img,
.rich-content .child-media img,
.children-block .child-media img{
margin:0 !important;
width:100% !important;
height:100% !important;
max-width:none !important;
border-radius:0 !important;
display:block !important;
float:none !important;
object-fit:cover;
}
/* ظرف عکس هم نباید از قواعد figure/img متن تاثیر بگیرد */
.rich-content .children-block .child-media,
.children-block .child-media{margin:0 !important}
/* ==================================================================
جهت فلش ها — اصلاح
------------------------------------------------------------------
فلش ها با بوردر کشیده می شوند. راس فلش در امتداد نیمساز گوشه ای
است که دو بوردر می سازند:
بوردر بالا + چپ ، چرخش -۴۵ درجه → راس به سمت چپ (‹)
بوردر بالا + راست، چرخش -۴۵ درجه → راس به سمت بالا (^) ← اشتباه
در حالت راست به چپ، border-inline-start همان border-right است، پس
ترکیب قبلی به جای فلش چپ، یک «^» رو به بالا می ساخت.
این سایت فقط راست به چپ است و «جلو» یعنی سمت چپ، پس از بوردر
فیزیکی استفاده می شود تا نتیجه قطعی و قابل پیش بینی باشد.
================================================================== */
.children-block .child .arr::before,
.lg-related__link .lg-related__cta::after,
.lg-otherserv__go{
border-top:2px solid currentColor;
border-inline-start:0;
border-left:2px solid currentColor;
border-right:0;
transform:rotate(-45deg);
}
.children-block .child .arr::before{border-color:var(--lg-red)}
.lg-otherserv__go{border-color:var(--lg-red)}
/* دکمه های کروسل: «قبلی» به راست، «بعدی» به چپ */
.lg-carousel__btn.prev::before{
border-top:2px solid var(--lg-ink);border-left:0;
border-right:2px solid var(--lg-ink);border-inline-start:0;
transform:rotate(45deg);margin:0;
}
.lg-carousel__btn.next::before{
border-top:2px solid var(--lg-ink);border-right:0;
border-left:2px solid var(--lg-ink);border-inline-start:0;
transform:rotate(-45deg);margin:0;
}
.lg-carousel__btn:hover::before{border-color:#fff}
/* =================================================================
مطالب مرتبط انتهای صفحه — کروسل
(افزوده شد؛ هیچ قاعده قبلی حذف یا بازنویسی نشده)
================================================================= */
.lg-relbox__head{margin-bottom:18px}
.lg-relbox__head .sec-head{margin:0;flex:1 1 auto;text-align:start}
.lg-relbox .lg-carousel__viewport{
list-style:none;margin:0;padding:4px 2px 16px;
grid-auto-columns:minmax(230px,270px);
align-items:stretch;
}
.lg-relbox .lg-related__body{
display:flex;flex-direction:column;gap:7px;padding:14px 15px 16px;flex:1;
}
.lg-relbox .lg-related__name{
padding:0;min-height:0;font-size:var(--fs-sm);font-weight:800;line-height:1.75;
}
.lg-relbox .lg-related__date{font-size:.74rem;font-weight:700;color:var(--lg-red-strong,#a50034)}
.lg-relbox .lg-related__desc{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:.82rem;line-height:1.9;color:var(--text-soft);
}
.lg-relbox .lg-related__more{
margin-top:auto;padding-top:8px;font-size:.82rem;font-weight:700;
color:var(--lg-red-strong,#a50034);
}
.lg-relbox .lg-related__more::after{content:" ‹"}
/* کارت بدون تصویر: به جای بلوک رنگی بزرگ، فقط یک نوار باریک بالای کارت */
.lg-related__link--noimg{padding-top:4px;background:
linear-gradient(var(--lg-red-tint,#f6e6ec),var(--lg-red-tint,#f6e6ec)) top/100% 4px no-repeat,#fff}
.lg-related__link--noimg .lg-related__body{padding-top:16px}
@media (max-width:640px){
.lg-relbox .lg-carousel__viewport{grid-auto-columns:minmax(210px,78%)}
}
/* دفاعی: هر جای دیگری از سایت که هنوز کارت .post دارد، عکس از کاور
بیرون نزند و روی متن نیفتد */
.post .cover{overflow:hidden}
.post .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* =================================================================
جدول تعرفه — خط بازه، دکمه «نمایش بیشتر»، تاریخ به روزرسانی
(افزوده شد؛ قواعد قبلی .lg-prices دست نخورده اند)
================================================================= */
.lg-prices__range{
margin:0 0 16px;padding:13px 16px;border-radius:var(--radius);
background:var(--lg-red-tint,#f6e6ec);border:1px solid var(--lg-red-line,#e6c3d0);
font-weight:800;line-height:2;color:var(--lg-ink);font-size:var(--fs-sm);
}
.lg-prices__morewrap{text-align:center;margin-top:14px}
.lg-prices__more{
display:inline-block;cursor:pointer;font:inherit;font-weight:800;font-size:.86rem;
padding:11px 22px;border-radius:999px;color:var(--lg-red-strong,#a50034);
background:#fff;border:1px solid var(--lg-red-line,#e6c3d0);transition:var(--transition);
}
.lg-prices__more:hover{background:var(--lg-red-strong,#a50034);border-color:var(--lg-red-strong,#a50034);color:#fff}
.lg-prices__more::after{content:" ▾";font-size:.8em}
.lg-prices__more[aria-expanded="true"]::after{content:" ▴"}
.lg-prices__updated{
margin:12px 0 0;font-size:.78rem;color:var(--text-soft);
}
/* =================================================================
قاب تعرفه خدمات (.lg-pricebox) — بالای متن صفحه
قواعد قدیمی .lg-prices دست نخورده مانده اند و اگر جایی هنوز از
آن مارکاپ استفاده شود، همچنان کار می کند.
================================================================= */
.lg-pricebox{
margin:0 0 30px;border:1px solid var(--lg-line);border-radius:16px;
background:#fff;overflow:hidden;
box-shadow:0 10px 30px rgba(23,18,21,.07);
position:relative;
}
.lg-pricebox::before{
content:"";position:absolute;top:0;inset-inline:0;height:4px;
background:linear-gradient(90deg,var(--lg-red,#a50034),#d81f57);
}
/* ---- سر قاب ---- */
.lg-pricebox__head{
display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
padding:20px 20px 14px;flex-wrap:wrap;
}
.lg-pricebox__eyebrow{
display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:0;
color:var(--lg-red-strong,#a50034);background:var(--lg-red-tint,#f9e9ef);
padding:4px 10px;border-radius:999px;margin-bottom:8px;
}
.lg-pricebox__title{
margin:0;font-size:1.18rem;font-weight:900;line-height:1.7;color:var(--lg-ink,#1b1518);
}
.lg-pricebox__stamp{
font-size:.74rem;font-weight:700;color:var(--text-soft);
background:var(--lg-paper-2,#f6f4f5);border:1px solid var(--lg-line);
padding:5px 11px;border-radius:999px;white-space:nowrap;margin-top:4px;
}
/* ---- بازه کلی ---- */
.lg-pricebox__range{
margin:0 20px 16px;padding:14px 16px;border-radius:12px;
background:linear-gradient(135deg,#fbf0f4,#f7e4ea);
border:1px solid var(--lg-red-line,#eccdd8);
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.lg-pricebox__range-label{font-weight:800;color:#3a2129;font-size:.92rem;line-height:1.9}
.lg-pricebox__range-nums{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.lg-pricebox__range-nums b{
font-size:1.14rem;font-weight:900;color:var(--lg-red-strong,#a50034);
font-variant-numeric:tabular-nums;
}
.lg-pricebox__range-nums i{font-style:normal;font-size:.84rem;color:var(--text-soft);font-weight:700}
.lg-pricebox__range-nums small{font-size:.76rem;color:var(--text-soft);font-weight:700}
/* ---- جدول ---- */
.lg-pricebox__tablewrap{position:relative}
.lg-pricebox__table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.lg-pricebox__table th{
text-align:start;font-weight:800;font-size:.78rem;color:var(--text-soft);
padding:10px 20px;background:var(--lg-paper-2,#f6f4f5);
border-top:1px solid var(--lg-line);border-bottom:1px solid var(--lg-line);
}
.lg-pricebox__table th:last-child{text-align:end}
.lg-pricebox__table td{
padding:13px 20px;border-top:1px solid var(--lg-line-soft,#f0ebed);
vertical-align:middle;line-height:1.8;
}
.lg-pricebox__table tbody tr:first-child td{border-top:0}
.lg-pricebox__table tbody tr:hover td{background:#fdf7f9}
.lg-pricebox__name{display:block;font-weight:700;color:#241d20}
.lg-pricebox__hint{display:block;font-size:.76rem;color:var(--text-soft);margin-top:3px;line-height:1.8}
.lg-pricebox__price{
text-align:end;font-weight:900;color:var(--lg-red-ink,#7d0027);white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.lg-pricebox__ask{color:var(--text-soft);font-weight:700;font-size:.85rem}
.lg-pricebox__free{
display:inline-block;color:#0a7a3d;background:#e8f7ee;border:1px solid #bfe6cd;
padding:3px 12px;border-radius:999px;font-size:.8rem;font-weight:800;
}
/* ---- محو شدن انتهای جدول وقتی بسته است ---- */
.lg-pricebox__fade{display:none}
.lg-pricebox.is-collapsed .lg-pricebox__fade{
display:block;position:absolute;inset-inline:0;bottom:0;height:56px;pointer-events:none;
background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
}
/* ---- دکمه بیشتر ---- */
.lg-pricebox__morewrap{text-align:center;padding:12px 20px 0}
.lg-pricebox__more{
display:inline-block;cursor:pointer;font:inherit;font-weight:800;font-size:.85rem;
padding:10px 22px;border-radius:999px;color:var(--lg-red-strong,#a50034);
background:#fff;border:1px solid var(--lg-red-line,#eccdd8);transition:var(--transition);
}
.lg-pricebox__more:hover{background:var(--lg-red-strong,#a50034);border-color:var(--lg-red-strong,#a50034);color:#fff}
.lg-pricebox__more::after{content:" ▾";font-size:.8em}
.lg-pricebox__more[aria-expanded="true"]::after{content:" ▴"}
/* ---- پای قاب ---- */
.lg-pricebox__foot{
margin-top:14px;padding:16px 20px 20px;border-top:1px solid var(--lg-line-soft,#f0ebed);
background:var(--lg-paper-2,#f9f7f8);
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.lg-pricebox__note{
margin:0;flex:1 1 260px;font-size:.79rem;line-height:1.95;color:var(--text-soft);
padding-inline-start:12px;border-inline-start:2px solid var(--lg-red-line,#eccdd8);
}
.lg-pricebox__cta{flex:0 0 auto}
@media (hover:none){
.lg-pricebox__table tbody tr:hover td{background:transparent}
.lg-pricebox__more:hover{background:#fff;color:var(--lg-red-strong,#a50034);border-color:var(--lg-red-line,#eccdd8)}
}
/* ---- موبایل: جدول به سطرهای دو ستونی جمع و جور تبدیل می شود ---- */
@media (max-width:620px){
.lg-pricebox{border-radius:14px}
.lg-pricebox__head{padding:18px 15px 12px}
.lg-pricebox__title{font-size:1.06rem}
.lg-pricebox__range{margin:0 15px 14px;padding:13px 14px}
.lg-pricebox__range-nums b{font-size:1.05rem}
.lg-pricebox__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lg-pricebox__table,.lg-pricebox__table tbody,.lg-pricebox__table tr{display:block;width:100%}
.lg-pricebox__table tr{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:12px 15px;border-top:1px solid var(--lg-line-soft,#f0ebed);
}
.lg-pricebox__table tbody tr:first-child{border-top:0}
.lg-pricebox__table td{display:block;border:0;padding:0}
.lg-pricebox__table td:first-child{flex:1 1 auto;min-width:0}
.lg-pricebox__price{flex:0 0 auto;padding-top:2px}
.lg-pricebox__foot{padding:14px 15px 18px}
.lg-pricebox__cta{width:100%;justify-content:center}
}
/* ---- اصلاح قاب تعرفه: بدون سرتیتر و بدون فاصله اضافه ----------- */
.lg-pricebox{margin:0 0 18px}
.lg-pricebox > *:last-child{margin-bottom:0}
.lg-pricebox__head,
.lg-pricebox__eyebrow,
.lg-pricebox__title{display:none} /* سرتیتر قاب حذف شد */
.lg-pricebox__range{margin:18px 20px 14px}
.lg-pricebox__range--plain{justify-content:flex-start}
.lg-pricebox__range-label{font-size:.95rem}
.lg-pricebox__foot{
margin-top:0;align-items:center;
}
.lg-pricebox__footinfo{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1 1 220px;min-width:0;
}
.lg-pricebox__footinfo .lg-pricebox__stamp{margin-top:0}
.lg-pricebox__footinfo .lg-pricebox__note{flex:1 1 200px}
@media (max-width:620px){
.lg-pricebox__range{margin:15px 15px 12px}
.lg-pricebox__footinfo{width:100%}
}
/* ---- قاب تعرفه: بستن هر فاصله اضافه در بالای قاب ---------------- */
.lg-pricebox{padding-top:0}
.lg-pricebox__head{display:none !important} /* هدر قدیمی قاب، اگر جایی مانده باشد */
.lg-pricebox__range{margin-top:14px}
.lg-pricebox__tablewrap:first-child{margin-top:14px}
/* =================================================================
هدر صفحه (h1) در دسکتاپ
قبلاً h1 تمام عرض را می گرفت و دکمه ها زیرش می افتادند؛ روی مانیتور
عریض، سمت چپ هدر خالی می ماند و تیتر دو خطی می شد. حالا از ۹۹۲
پیکسل به بالا تیتر و دکمه ها کنار هم می نشینند.
================================================================= */
@media (min-width:992px){
.page-hero{padding:22px 0 22px}
.page-hero-head{
display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:center;column-gap:36px;
}
.page-hero-head h1{
grid-column:1;margin:0;max-width:24ch;
font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1.55;
text-wrap:balance;
}
.page-hero-head .page-meta{grid-column:1;margin-top:8px}
.page-hero-actions{
grid-column:2;grid-row:1 / span 2;margin-top:0;
flex-direction:column;align-items:stretch;min-width:232px;
}
.page-hero-actions .btn{width:100%;justify-content:center;white-space:nowrap}
}
/* تیترهای خیلی بلند (تیترهای سئویی با | ) روی تبلت هم نباید سه خطی شوند */
@media (min-width:620px) and (max-width:991px){
.page-hero-head h1{font-size:clamp(1.3rem,2.6vw,1.65rem);line-height:1.6;max-width:30ch}
}
/* ---- ریشه فاصله های الکی قاب تعرفه -----------------------------
در lg.css یک قاعده سراسری هست: section{padding:var(--lg-gap) 0}
و چون قاب تعرفه خودش یک