@charset "UTF-8"; /* bosch.css — build 15 (هیرو: بدون برش، فاصله در هر عرضی) ⚠ خودآزمون. F12 → Console → این یک خط را بچسبانید: (h=>({عرض:innerWidth,فاصله:getComputedStyle(h).gap, برش:(i=>Math.abs(i.width/i.height-i.naturalWidth/i.naturalHeight)>.02) (Object.assign(h.querySelector('img').getBoundingClientRect(), {naturalWidth:h.querySelector('img').naturalWidth, naturalHeight:h.querySelector('img').naturalHeight}))})) (document.querySelector('.herox')) انتظار: فاصله «28px» (زیر ۹۰۰px: «24px») و برش «false». اگر «14px» یا «16px» داد → فایل آپلود نشده یا کش سرور مانده. ⚠ «عرض» را هم نگاه کنید: اگر زیر ۹۰۰ بود، شما اصلاً نسخهٔ دسکتاپ را نمی‌بینید — لپ‌تاپِ ۱۳۶۶ با مقیاسِ ۱۵۰٪ ویندوز ۹۱۰ CSS px است و با ۱۷۵٪ می‌شود ۷۸۰px. سه دورِ «فاصله نیست» علتش همین بود. */ /* ========================================================================== بوش تهران — لایهٔ هویت برند ترتیب لود: app → rtl → nav → card → [CSS صفحه] → bosch → mobile این فایل بعد از همهٔ کامپوننت‌ها می‌آید، پس هر چیزی که «امضای بصری سایت» است اینجا نوشته می‌شود و بقیه فایل‌ها ساختار خالص می‌مانند. ⚠ mobile.css بعد از این لود می‌شود؛ هر قاعده‌ای که باید در موبایل هم برنده باشد یا باید در mobile.css نوشته شود یا اینجا با تخصصِ بالاتر بیاید. (بخش موبایلِ همین طرح در انتهای mobile.css است.) ── سه تصمیمِ هویتی ──────────────────────────────────────────────────── ۱. نوارِ بالاییِ تیره. تنها سطحِ تیرهٔ ثابتِ سایت و اولین چیزی که کاربر می‌بیند؛ همان نقشی را دارد که تابلوی فروشگاه در بازار امیرکبیر. ۲. قابِ خاکستریِ عکس. عکس‌های محصولِ سایت قدیم پس‌زمینهٔ سفید دارند؛ روی کارتِ سفید، لبهٔ یخچالِ سفید ناپدید می‌شد. ۳. سبزآبی = اطمینان. چون ۵۸٪ محصولات قیمت ندارند، «موجود / اصل / گارانتی» باید سیگنالِ رنگیِ خودش را داشته باشد. ========================================================================== */ /* ══════════════════════════════════════════════════════════ ۱. نوار بالایی تنها سطحِ تیرهٔ ثابتِ سایت. چون .topbar بیرون از
و بیرون از جریانِ sticky است، تیره‌کردنش هیچ ریسکی برای هدرِ چسبان ندارد. */ /* ⚠ رنگِ متن اینجا عمداً روشن است، نه «خاکستریِ ثانویه». قبلاً --c-on-dark-2 (#98A2AC) بود. آن رنگ از حدِ AA رد می‌شد (۷:۱) ولی «قابلِ خواندن» با «تیز» یکی نیست: روی نوارِ تیره خاکستری محو به نظر می‌رسد. حالا #EDF1F4 است → ۱۶٫۰:۱، و وزنِ ۵۰۰ لبهٔ حروفِ فارسی را در سایزِ ۱۳ پیکسل پررنگ‌تر می‌کند. */ .topbar{ background:var(--c-dark); border-bottom:0; color:var(--c-on-dark); font-weight:500; } .topbar a{color:var(--c-on-dark)} .topbar a:hover{color:#fff} /* نامِ سایت، اولین لینکِ نوار — سفیدِ کامل و ضخیم، لنگرِ بصریِ سمت راست */ .topbar-links > li:first-child > a{color:#fff;font-weight:700} /* ساعتِ کاری اطلاعاتِ درجه‌دوم است — ولی «درجه‌دوم» را با وزنِ سبک‌تر نشان می‌دهیم، نه با رنگِ کم‌رنگ‌تر. همان روشناییِ لینک‌ها را دارد. ⚠ اول یک خاکستریِ میانی (#C9D4DE) گذاشتم و checkdesign رد کرد: رنگِ خارج از پالت. درست هم بود — «کمی محوتر» دقیقاً همان چیزی است که کارفرما رویش انگشت گذاشت. */ .topbar-hours{color:var(--c-on-dark);font-weight:400} /* آیکن تلفن قرمز می‌ماند: تنها لکهٔ رنگ روی نوار تیره */ .topbar svg{color:var(--c-primary)} /* ── دو راهِ تماس در نوارِ بالایی ──────────────────────────────────────── ⚠ نسخهٔ قبلی دو «چیپِ دوخطی» بود: در نوارِ ۳۴ پیکسلیِ بالا جا نمی‌شد و روی موبایل دو جعبهٔ تپیده کنارِ هم می‌ساخت. نوارِ بالایی یک نوارِ *کمکی* است، پس اینجا فقط دو لینکِ تک‌خطیِ آرام می‌نشیند با یک جداکنندهٔ مویی. شمارهٔ پررنگ و رنگی جای خودش را در دکمهٔ قرمزِ هدر دارد (.header-cta) — یک CTA رنگی در صفحه، نه سه تا. */ .topbar-contact{display:flex;align-items:center;gap:0;flex:none;min-width:0} .tcall{ display:inline-flex;align-items:center;gap:6px; padding:0 10px;line-height:1;white-space:nowrap; transition:color var(--t-fast); } .tcall svg{width:15px;height:15px;flex:none;stroke-width:1.9;color:var(--c-primary)} .tcall-t{display:inline-flex;align-items:baseline;gap:5px;min-width:0} .tcall-t b{font-size:15px;font-weight:700;unicode-bidi:isolate;letter-spacing:.01em} /* برچسب («مشاوره و سفارش») در نوارِ باریک جا نمی‌شود و ارزشش را ندارد؛ آیکنِ تلفن همان معنا را می‌رساند و برچسبِ کامل روی دکمهٔ هدر هست. */ .tcall-t i{display:none} .tcall--mob{color:#fff} .tcall--mob:hover{color:#fff} /* تلفنِ ثابت هم روشن می‌شود؛ فقط موبایل ضخیم‌تر می‌ماند تا سلسله‌مراتب حفظ شود، نه با محوکردنِ دومی. */ .tcall--tel{color:var(--c-on-dark)} .tcall--tel:hover{color:#fff} /* جداکنندهٔ مویی بین دو شماره */ .tcall + .tcall{border-inline-start:1px solid rgba(255,255,255,.28)} /* ── دکمهٔ قرمزِ تماس در هدر ───────────────────────────────────────────── برچسبِ ریز بالای شمارهٔ درشت — همان الگویی که در فروشگاه‌های تلفن‌محور جواب می‌دهد: کاربر هم می‌فهمد برای چیست، هم شماره را می‌بیند. */ .header-cta{padding-inline:16px} .hcta-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0} .hcta-t i{font-style:normal;font-size:15px;font-weight:400;opacity:.85} .hcta-t b{font-size:16px;font-weight:700;unicode-bidi:isolate;letter-spacing:.01em} .topbar-contact a:hover{color:#fff} .topbar-links li+li::before{background:rgba(255,255,255,.32)} .topbar a:focus-visible{outline-color:#fff} /* ═══════════════════════════════════════════════════════════════ ۲. هدر */ /* خطِ باریکِ قرمز زیرِ هدر — امضای برند، بدون اشغال ارتفاع */ .site-header{border-bottom:1px solid var(--c-line)} .site-header.is-stuck{box-shadow:var(--sh-1)} .header-search input{background:var(--c-bg);border-color:transparent} .header-search input:hover{border-color:var(--c-line)} .header-search input:focus{background:var(--c-surface);border-color:var(--c-primary)} .hact-count{background:var(--c-primary)} /* ⚠ ورود، علاقه‌مندی و سبد از هدر حذف شدند (خواستهٔ کارفرما). سایت فعلاً خرید آنلاین ندارد و تبدیلِ اصلی تماس است؛ سه آیکنِ خنثی کنارِ دکمهٔ قرمزِ تماس فقط توجه را می‌دزدیدند. کدشان حذف نشده و با برداشتنِ همین قاعده برمی‌گردند. */ .hact--user, .hact--wish, .hact--cart{display:none} /* نویگیشنِ دسته‌ها حالا هفت نیتِ خرید است، نه فهرستِ انبار — پس باید وزن بصریِ بیشتری از بقیهٔ هدر بگیرد. */ .mainnav > li > a{font-weight:700} .mainnav > li > a[aria-current="page"]{color:var(--c-primary)} /* ═══════════════════════════════════ ۲.۵ گرید محصولات (PLP و ریل‌ها) ۳ ستون در دسکتاپ به‌جای ۴: عنوان‌های فارسیِ لوازم خانگی بلندند («ماشین ظرفشویی بوش مدل SMS6ZCI37Q») و در ستونِ ۴تایی سه خط می‌شوند. */ @media (min-width:1024px){ .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} } @media (min-width:1440px){ .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* ════════════════════════════════════════════════════════ ۳. کارت محصول ترتیب اطلاعات: قابِ عکس → نام → کد مدل → وضعیت اعتماد → قیمت → دکمه */ .pcard{border-radius:var(--r-lg);border-color:var(--c-line-2)} @media (hover:hover){ .pcard:hover{border-color:var(--c-line);box-shadow:var(--sh-2)} } /* قابِ خاکستریِ عکس — عکس‌های پس‌زمینه‌سفیدِ لوازم خانگی روی این زمینه لبه پیدا می‌کنند. حاشیهٔ داخلی هم می‌گذاریم تا محصول به لبه نچسبد. */ .pcard-img{ background:var(--c-panel); border-radius:var(--r-md); margin:8px 8px 0; padding:10px; } .pcard-img img{mix-blend-mode:multiply} .pcard.is-oos .pcard-img{background:var(--c-line-2)} /* برچسب‌ها — گوشهٔ قابِ عکس، نه گوشهٔ کارت */ .pcard-flags{inset-block-start:16px;inset-inline-start:16px} .pcard-flag{border-radius:var(--r-sm);font-weight:700;letter-spacing:0} .pcard-flag.new{background:var(--c-trust);color:#fff;border-color:var(--c-trust)} .pcard-flag.hot{background:var(--c-ink);color:#fff;border-color:var(--c-ink)} .pcard-quick{inset-block-start:16px;inset-inline-end:16px} /* کدِ مدل به‌صورت چیپ — خریدارِ لوازم خانگی با کد مدل جستجو می‌کند (SMS46MI01B)، پس باید خوانا و قابلِ کپیِ چشمی باشد. */ .pcard-sku{ background:var(--c-bg); border:1px solid var(--c-line-2); border-radius:var(--r-sm); padding:2px 8px; font-weight:500; color:var(--c-ink-2); letter-spacing:.02em; unicode-bidi:isolate; } /* خطِ اعتماد — جایگزینِ چیزی که در سایتِ تک‌رنگ اصلاً وجود نداشت */ .pcard-trust{ display:flex;align-items:center;gap:5px; margin-block-start:2px; font-size:15px;font-weight:500;line-height:1.6; color:var(--c-success); } .pcard-trust svg{width:15px;height:15px;flex:none;stroke-width:2} .pcard.is-oos .pcard-trust{color:var(--c-ink-2)} /* خطِ مویی بالای بلوکِ قیمت — قیمت را از متن جدا می‌کند */ .pcard-foot{border-block-start:1px solid var(--c-line-2);padding-block-start:10px;margin-block-start:auto} .pcard .price-now{font-size:21px;letter-spacing:-.01em} /* بَج سری بوش — سیگنالِ اصلیِ خریدارِ لوازم خانگی («سری ۶ بخرم یا ۸؟») */ .pcard-flag.series{ background:var(--c-ink);color:#fff;border-color:var(--c-ink); font-weight:700;letter-spacing:.01em; } .pcard-flag.new{background:var(--c-trust);color:#fff;border-color:var(--c-trust)} /* دو ویژگیِ کوتاه زیر کد مدل */ .pcard-feat{ display:flex;flex-direction:column;gap:3px; margin-block-start:6px;min-width:0; } .pcard-feat li{ display:flex;align-items:flex-start;gap:6px; font-size:15px;line-height:1.55;color:var(--c-ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pcard-feat li::before{ content:"";flex:none; width:5px;height:5px;margin-block-start:8px; border-radius:var(--r-full);background:var(--c-trust); } .pcard-rating .rc{color:var(--c-ink-3);font-size:15px} /* ردیفِ اقدام: دکمهٔ اصلی + دکمهٔ مربعیِ مقایسه */ .pcard-actions{display:flex;gap:6px;align-items:stretch;margin-block-start:8px} .pcard-actions .pcard-cta{flex:1 1 auto;min-width:0;margin:0} .pcard-cmp{ flex:0 0 auto;width:42px; display:grid;place-items:center; border:1px solid var(--c-line);border-radius:var(--r-md); /* --c-ink-3 روی سفید ۳٫۳۳:۱ می‌دهد و AA را رد می‌کند؛ این آیکن تنها نشانهٔ دکمه است (متن ندارد) پس باید خوانا باشد. */ background:var(--c-surface);color:var(--c-ink-2); transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast); } .pcard-cmp svg{width:18px;height:18px;stroke-width:1.8} @media (hover:hover){ .pcard-cmp:hover{color:var(--c-ink);border-color:var(--c-ink-3)} } .pcard-cmp[aria-pressed="true"]{ background:var(--c-ink);border-color:var(--c-ink);color:#fff; } /* دکمهٔ کارت رنگش را از وضعیتِ محصول می‌گیرد. ⚠ همچنان یک لینکِ ساده است (نه فرم): صفحهٔ دستهٔ ۲۴تایی هیچ
اضافه و هیچ توکنِ CSRF اضافه‌ای در DOM ندارد. فقط برچسب و رنگ عوض می‌شود تا کاربر پیش از کلیک بداند آن‌طرف «خرید» است یا «تماس». */ .pcard-cta--buy, .pcard-cta--quote, .pcard-cta--oos{border-radius:var(--r-md);font-weight:700} /* قابل خرید → قرمزِ اقدام */ .pcard-cta--buy{background:var(--c-primary);border-color:var(--c-primary);color:#fff} @media (hover:hover){ .pcard-cta--buy:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);color:#fff} } /* استعلامی → سبزآبیِ اطمینان (تماس است، نه خرید) */ .pcard-cta--quote{background:var(--c-trust);border-color:var(--c-trust);color:#fff} @media (hover:hover){ .pcard-cta--quote:hover{background:var(--c-trust-dark);border-color:var(--c-trust-dark);color:#fff} } /* ناموجود → خنثی، تا با محصولِ قابلِ‌خرید اشتباه نشود */ .pcard-cta--oos{background:var(--c-surface);border-color:var(--c-line);color:var(--c-ink-2)} @media (hover:hover){ .pcard-cta--oos:hover{background:var(--c-bg);border-color:var(--c-ink-3);color:var(--c-ink)} } .pcard-cta svg{width:17px;height:17px;flex:none;stroke-width:1.9} /* ═════════════════════════════════════════════════════ ۴. عنوانِ بخش‌ها خطِ کوتاهِ قرمز بالای تیتر — ریتمِ بصریِ تکرارشوندهٔ صفحه اصلی و دسته */ .section-head h2, .sec-title, .home-sec > h2{position:relative} .section-head h2::before, .sec-title::before, .home-sec > h2::before{ content:"";display:block; width:34px;height:3px;border-radius:2px; background:var(--c-primary); margin-block-end:10px; } /* ═══════════════════════════════════════════════════ ۵. قیمت و استعلام */ .price-now{color:var(--c-ink);font-weight:700} .price-now .unit{color:var(--c-ink-2);font-weight:400} .price-old{color:var(--c-ink-3)} .price-off{background:var(--c-primary);color:#fff;border-radius:var(--r-sm)} /* باکسِ استعلام — سبزآبی، نه قرمز. «تماس بگیر» یک اقدامِ کم‌ریسک است و نباید هم‌وزنِ بصریِ «خرید» باشد. */ .quotebox{ background:var(--c-trust-soft); border:1px solid rgba(var(--c-trust-rgb),.22); border-radius:var(--r-lg); } .quotebox .qtitle{color:var(--c-trust-dark)} .quotebox .qphone{ background:var(--c-trust);color:#fff;border-color:var(--c-trust); border-radius:var(--r-md); } .quotebox .qphone:hover{background:var(--c-trust-dark);border-color:var(--c-trust-dark)} /* ═══════════════════════════════════════════════════ ۶. سیگنالِ اطمینان */ .trust-bar{background:var(--c-surface);border-radius:var(--r-lg);border:1px solid var(--c-line-2)} .trust-bar svg, .trust-item svg{color:var(--c-trust)} /* متنِ سبزآبی روی زمینهٔ سبزآبیِ روشن باید نسخهٔ تیره باشد (۶٫۱۳:۱)، وگرنه ۴٫۱۴:۱ می‌شود و AA رد می‌شود. */ .badge-stock, .stock-in, .in-stock{color:var(--c-success);background:var(--c-trust-soft)} .alert-success{background:var(--c-trust-soft);border-color:rgba(var(--c-trust-rgb),.25);color:var(--c-trust-dark)} /* ═════════════════════════════════════════════════ ۷. جدول مشخصات فنی */ .spec-row:nth-child(odd){background:var(--c-bg)} .specs-group > h3{ color:var(--c-ink); border-inline-start:3px solid var(--c-trust); padding-inline-start:10px; } /* ══════════════════════════════════════════════════════ ۸. نوار خرید */ .sticky-buy{border-block-start:1px solid var(--c-line);box-shadow:var(--sh-3)} .sticky-buy .sb-price .now{color:var(--c-ink)} /* ══════════════════════════════════════════ ۹. بردکرامب و نوار پایین */ .breadcrumb a:hover{color:var(--c-primary)} .mobile-bar .mb-count{background:var(--c-primary)} /* دکمهٔ برجستهٔ «تماس» وسط نوار پایین. تنها عنصرِ رنگیِ نوار است؛ در سایتی بدون درگاه، این خودِ دکمهٔ خرید است. */ .mobile-bar .mb-fab > a{ position:relative; color:var(--c-primary); } .mobile-bar .mb-fab .mb-ico{ width:46px;height:46px; margin-top:-16px; /* از لبهٔ بالای نوار بیرون بزند */ border-radius:var(--r-full); background:var(--c-primary); color:#fff; display:grid;place-items:center; /* برجستگی از خودِ حلقهٔ سفید می‌آید، نه از سایهٔ رنگی — سیستمِ سایهٔ سایت فقط سه سطحِ توکن‌شده دارد و سایهٔ رنگیِ اختصاصی از آن بیرون می‌زد. */ box-shadow:var(--sh-2); border:3px solid var(--c-surface); } .mobile-bar .mb-fab .mb-ico svg{width:21px;height:21px;stroke-width:2} .mobile-bar .mb-fab .mb-label{color:var(--c-primary);font-weight:700} /* ══════════════════════════════ ۱۰. ایزوله‌سازی جهت برای اعداد و کدها در متنِ RTL، «۱۲۰٬۰۰۰٬۰۰۰ تومان» و «۰۲۱-۳۳۱۲۷۶۴۲» و کد مدل «SMS46MI01B» با الگوریتم دوجهته جابه‌جا می‌شوند (۰۲۱ می‌پرد آخر). isolate این را می‌بندد. */ .price-now,.price-old,.pcard-amount, .sb-price,.p-price,.sum-row .v, .pcard-sku,.p-sku,.tel-num,.tel-link, .num,.order-number{ unicode-bidi:isolate; } /* عدد و واحد باید کنار هم بمانند ولی هرکدام جزیرهٔ خودش باشد */ .price-now .unit{unicode-bidi:isolate;margin-inline-start:4px} /* ═══════════════════════════════ ۱۱. حالت استعلامی روی کارت محصول ⚠ کارتِ بی‌قیمت نباید «سوراخ» داشته باشد. اگر بلوکِ قیمت را حذف کنیم و جایش چیزی نگذاریم، ارتفاعِ کارت‌ها در گرید نامساوی می‌شود و کارتِ استعلامی «ناقص» به‌نظر می‌رسد — نه «عمدی». این بلوک دقیقاً همان جای قیمت را می‌گیرد و با لحنِ اطمینان (سبزآبی) نوشته شده. */ .pcard-quote{ display:flex;align-items:center;gap:6px; min-height:30px; font-size:15px;font-weight:700;line-height:1.5; color:var(--c-success); } .pcard-quote svg{width:16px;height:16px;flex:none;stroke-width:2} /* ═══════════════════════════════════════════════════ ۱۰. بازگشت به بالا */ .to-top{ background:var(--c-surface);color:var(--c-ink); border:1px solid var(--c-line);box-shadow:var(--sh-2); border-radius:var(--r-full); } .to-top:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)} /* ══════════════════════════════════════════════════════ ۱۱. فرم‌ها */ .input:focus,input:focus,select:focus,textarea:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.10); } .btn{border-radius:var(--r-md)} .btn-primary{background:var(--c-primary);border-color:var(--c-primary)} .btn-primary:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)} /* دکمهٔ سبزآبی — برای «تماس»، «استعلام» و «مشاوره» */ .btn-trust{ background:var(--c-trust);border:1px solid var(--c-trust);color:#fff; } .btn-trust:hover{background:var(--c-trust-dark);border-color:var(--c-trust-dark);color:#fff} /* ═══════════════════════════════════════════ ۱۱.۵ هیروِ دوقسمتی ستونِ ۶۰٪ اسلایدر + ستونِ ۴۰٪ با دو بنرِ روی‌هم. نسبتِ ابعادِ هر دو ستون یکی است (۱۶:۹ برای اسلایدر، دو تا ۱۶:۵ برای بنرها) تا ارتفاعشان بخواند و ردیف صاف بماند. */ /* هیرو باید از هدرِ بالا و بخشِ بعدی هم فاصله بگیرد، نه فقط اجزایش از هم */ .hsec--hero{background:var(--c-surface);padding-block:clamp(20px,2.6vw,32px)} .herox{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr); /* ⚠ عددِ صریح، نه var(--sp-5). دو دور این فاصله «کم» گزارش شد. توکن در هر فایلی قابلِ بازنویسی است (mobile.css همین حالا چند توکنِ فاصله را در :root عوض می‌کند)، پس برای چیزی که کارفرما مستقیم رویش انگشت گذاشته، عددِ ثابت امن‌تر است. ۲۸px هم‌اندازهٔ فاصلهٔ ستون‌های بقیهٔ صفحه است. */ gap:28px; /* ⚠ چرا دو ردیف و چرا اسلایدر هر دو را می‌گیرد — این «ترازِ خودکار» است. تا اینجا اسلایدر و ستونِ بنرها دو جعبهٔ مستقل بودند که ارتفاعشان از نسبتِ تصویرِ خودشان می‌آمد، پس فقط وقتی ته‌شان یک خط می‌شد که نسبت‌ها *دقیقاً* حساب‌شده باشند — آن هم فقط در یک عرضِ صفحه، چون فاصلهٔ ۲۸px ثابت است ولی عرضِ ستون‌ها با صفحه تغییر می‌کند. یعنی هم‌ترازی با «ابعادِ درست» هم شکننده بود. حالا هر دو بنر عضوِ همین گریدِ بیرونی‌اند (display:contents روی .herox-side) و اسلایدر با grid-row دو ردیف را می‌پوشاند. پس: ارتفاعِ اسلایدر = بنر۱ + ۲۸ + بنر۲ این یک اتحاد است، نه یک تنظیم. در هر عرضی و با هر تصویری برقرار است. */ grid-template-rows:auto auto; align-items:stretch; } .herox-main{grid-column:1;grid-row:1 / span 2} .herox-side{display:contents} /* تمام‌عرض (بنری در کار نیست) → ارتفاع دوباره از خودِ تصویر */ .herox.is-wide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto} .herox.is-wide .herox-main{grid-row:auto} /* ⚠ اگر ادمین فقط یک بنر بگذارد، ردیفِ دوم خالی می‌ماند و اسلایدر ۲۸px بلندتر از بنر می‌شود. :has در همهٔ مرورگرهای امروزی هست و اگر نبود، رفتار به همین حالتِ فعلی برمی‌گردد — یعنی خرابی‌ای نمی‌سازد. */ .herox:has(.herox-banner:only-child) .herox-main{grid-row:auto} .herox:has(.herox-banner:only-child) .herox-side{display:block} /* ⚠ هیچ بُرشی: نه aspect-ratio، نه object-fit:cover. این دو با هم یعنی «هر تصویری که دقیقاً ۱۶:۹ نباشد بریده شود» — و روی بنری که متنِ فارسی رویش پخته شده، بریدن یعنی نصفِ عنوان می‌رود. دقیقاً همین شد: «بوش تهران» از سمت راست قیچی شد. حالا ارتفاع را خودِ تصویر تعیین می‌کند؛ هر نسبتی بدهید کامل دیده می‌شود. */ .herox-main{ position:relative;overflow:hidden; border-radius:var(--r-xl);background:var(--c-panel); } /* ⚠ ترک مطلق می‌شود تا ارتفاعِ اسلایدر را *گرید* تعیین کند، نه تصویر. اگر در جریانِ عادی بماند، ارتفاعش را از تصویر می‌گیرد و همان ناهم‌ترازی برمی‌گردد. سه حالتِ استثنا پایین‌تر به جریانِ عادی برمی‌گردند (تمام‌عرض، تک‌بنر، موبایل) چون آنجا گرید ارتفاعی نمی‌دهد و مطلق‌بودن یعنی ارتفاعِ صفر — یعنی اسلایدرِ نامرئی. */ .herox-main .hero-track{position:absolute;inset:0;display:flex; transition:transform .45s var(--ease)} .herox-main .hero-slide{flex:0 0 100%;position:relative} .herox-main .hero-slide a{height:100%} /* ⚠ home.css این را روی `.hero-slider.is-single` نوشته، ولی کلاسِ is-single در مارک‌آپ روی `.herox-main` است — یعنی هرگز اجرا نمی‌شد و تک‌اسلاید می‌توانست جابه‌جا بماند. */ .herox-main.is-single .hero-track{transform:none!important} .herox-main .hero-slide a{display:block} /* ⚠ contain و نه cover. حالا که ارتفاع را گرید می‌دهد، تصویر باید خودش را با جعبه وفق دهد — و بینِ دو راه، cover می‌بُرَد و contain نوارِ نازک می‌گذارد. نوار برگشت‌پذیر است، برش نه؛ و متنِ فارسی روی این بنرها پخته شده. با نسبت‌های پیشنهادی نوار عملاً صفر است. object-fit صریح نوشته می‌شود چون home.css خط ۶۱ روی همین تصویر `object-fit:cover` دارد و بی‌صدا برنده می‌شد. */ .herox-main .hero-slide img{display:block;width:100%;height:100%; object-fit:contain;object-position:center;max-height:none;min-height:0} /* ── درورِ موبایل: گروهِ دومِ لینک‌ها ─────────────────────────────────── دسته‌بندی‌ها بالا، صفحه‌های اطلاعاتی پایین با یک مرزِ روشن بینشان — کاربر نباید «درباره ما» را لای هفت دستهٔ محصول بگردد. */ .mp-nav--more{ margin-block-start:10px; border-top:1px solid var(--c-line); } .mp-nav--more a{color:var(--c-ink-2);font-weight:500} /* ── بنرهای میانی و عریض ────────────────────────────────────────────── همان قاعدهٔ هیرو: هیچ برشی. ارتفاع را خودِ تصویر می‌دهد. */ .hsec--band{padding-block:clamp(18px,2.4vw,30px)} .bband{display:grid;grid-template-columns:minmax(0,1fr);gap:24px} .bband--2{grid-template-columns:repeat(2,minmax(0,1fr))} .bband-i, .bwide{ display:block;position:relative;overflow:hidden; background:var(--c-panel); transition:transform var(--t-fast),box-shadow var(--t-fast); } .bband-i{border-radius:var(--r-xl)} .bband-i img, .bwide img{display:block;width:100%;height:auto;object-fit:fill} @media (hover:hover){ .bband-i:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} } /* عریض = لبه‌به‌لبه، بدون قاب و بدون گوشهٔ گرد */ .bwide{margin-block:clamp(18px,2.4vw,30px)} @media (max-width:767px){ .bband--2{grid-template-columns:minmax(0,1fr)} .bband-i{border-radius:var(--r-lg)} } /* ── متنِ روی اسلاید و بنر ──────────────────────────────────────────── ⚠ چرا متنِ HTML و نه متنِ پخته در تصویر: · در هر رزولوشن و هر زومی تیز است؛ متنِ داخلِ jpg با بزرگ‌شدنِ صفحه نرم و پیکسلی می‌شود. · گوگل می‌خواندش. متنِ داخلِ تصویر برای سئو صفر است و سئو مهم‌ترین خواستهٔ این پروژه بود. · از پنل عوض می‌شود؛ برای اصلاحِ یک کلمه لازم نیست تصویر را دوباره بسازید. · ابزارهای تصویرسازی فارسی را درست نمی‌نویسند — حروف را جدا می‌چینند یا برعکس. ⚠ اگر «عنوان» در پنل خالی باشد هیچ روکشی رندر نمی‌شود، پس تصویری که متنش داخلِ خودش پخته شده دست‌نخورده می‌ماند. هر دو راه باز است. جای متن سمت راستِ تصویر است — همان‌جا که در پرامپت‌ها بلوکِ رنگیِ خالی ساخته می‌شود. در RTL، inset-inline-start یعنی لبهٔ راست. */ .hcap{ position:absolute;inset-block:0;inset-inline-start:0; inline-size:36%;min-inline-size:170px; display:flex;flex-direction:column;justify-content:center;align-items:flex-start; gap:clamp(6px,.8vw,12px); padding:clamp(14px,2.2vw,34px); color:#fff;text-align:start; /* پردهٔ ملایم تا اگر روزی تصویری بدونِ بلوکِ رنگی آپلود شد هم متن خوانا بماند. روی بلوکِ قرمز تقریباً نامرئی است. */ background:linear-gradient(to left,rgba(16,22,28,.42),rgba(16,22,28,.10) 60%,transparent); /* کلِ اسلاید یک لینک است؛ روکش نباید کشیدنِ اسلایدر را بگیرد */ pointer-events:none; } .hcap-t{ margin:0;font-size:clamp(19px,2.4vw,36px);font-weight:800;line-height:1.3; text-shadow:0 2px 12px rgba(0,0,0,.38); } .hcap-s{ margin:0;font-style:normal; font-size:clamp(11.5px,1.1vw,17px);font-weight:500;line-height:1.75; text-shadow:0 1px 8px rgba(0,0,0,.32); } .hcap-b{ margin-block-start:clamp(4px,.8vw,10px); padding:clamp(7px,.8vw,11px) clamp(14px,1.5vw,22px); border-radius:var(--r-full); background:var(--c-primary);color:#fff; font-weight:700;font-size:clamp(11.5px,1.05vw,15px);line-height:1; /* ⚠ اول یک هالهٔ قرمزِ دست‌ساز گذاشتم و checkdesign رد کرد: سایهٔ خارج از سیستم. حق داشت — دکمه‌های اصلیِ سایت همین توکن را دارند و یک استثنا یعنی شروعِ واگراییِ بصری. */ box-shadow:var(--sh-2); } /* بنرهای کناری کوچک‌ترند، پس سهمِ بیشتری از عرض می‌گیرند */ .hcap--sm{inline-size:46%} .hcap--sm .hcap-t{font-size:clamp(14px,1.35vw,20px)} .hcap--sm .hcap-s{font-size:clamp(10.5px,.85vw,13px);line-height:1.6} @media (max-width:639px){ /* ⚠ ۳۶٪ از عرضِ یک گوشیِ ۳۹۰ پیکسلی می‌شود ۱۴۰px — برای یک تیترِ فارسی خیلی باریک است. روی موبایل روکش تمام‌عرض و چسبیده به پایین می‌شود، با پردهٔ عمودی. */ .hcap,.hcap--sm{ inset-block:auto 0;inset-inline:0;inline-size:auto; justify-content:flex-end; padding:14px 16px 16px; background:linear-gradient(to top,rgba(16,22,28,.78),rgba(16,22,28,.25) 55%,transparent); } } /* ── بازگشت به جریانِ عادی، هر جا که گرید ارتفاعی نمی‌دهد ────────────── بدونِ این، ترکِ مطلق ارتفاعِ صفر می‌گیرد و اسلایدر ناپدید می‌شود. */ .herox.is-wide .hero-track, .herox:has(.herox-banner:only-child) .hero-track{position:static} .herox.is-wide .hero-slide img, .herox:has(.herox-banner:only-child) .hero-slide img{height:auto} /* ⚠ این بلوک فقط برای موبایل و حالت‌های استثنا معنی دارد؛ در دسکتاپ .herox-side با display:contents ناپدید می‌شود و دو بنر مستقیماً عضوِ گریدِ بیرونی‌اند. */ .herox-side{grid-template-rows:auto auto;gap:28px;min-width:0;align-content:start} .herox:has(.herox-banner:only-child) .herox-side{gap:0} .herox-banner{ /* ⚠ position:relative لازم است وگرنه روکشِ متن (.hcap) نسبتِ به نزدیک‌ترین جدِ موقعیت‌دار جا می‌گیرد — یعنی کلِ گریدِ هیرو. */ display:block;position:relative;overflow:hidden; border-radius:var(--r-lg);background:var(--c-panel); transition:transform var(--t-fast),box-shadow var(--t-fast); } /* همان قاعده: بنر هم بریده نمی‌شود */ .herox-banner img{display:block;width:100%;height:auto;object-fit:fill} @media (hover:hover){ .herox-banner:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} } @media (max-width:899px){ /* موبایل: اسلایدر بالا، دو بنر زیرش کنار هم — ستونِ باریکِ عمودی روی گوشی بنرها را به نوارِ نازکِ ناخوانا تبدیل می‌کرد. */ /* ⚠ اینجا بود که «فاصله» گم می‌شد. ۱۶px بود، و لپ‌تاپِ ۱۳۶۶ با مقیاس ۱۵۰٪ ویندوز = ۹۱۰ CSS px، با ۱۷۵٪ = ۷۸۰px → کاربر اصلاً نسخهٔ دسکتاپ را نمی‌دید و ۲۸px هیچ‌وقت اعمال نمی‌شد. */ .herox{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:24px} .herox-main{border-radius:var(--r-lg);grid-column:auto;grid-row:auto} /* ⚠ روی موبایل چیدمان تک‌ستونی است، پس گرید دیگر ارتفاعی به اسلایدر نمی‌دهد. ترک باید به جریانِ عادی برگردد و ارتفاع از تصویر بیاید، وگرنه اسلایدر ارتفاعِ صفر می‌گیرد و کلاً محو می‌شود. */ .herox-main .hero-track{position:static} .herox-main .hero-slide img{height:auto;object-fit:fill} /* ⚠ display:contents باید پس گرفته شود، وگرنه دو بنر مستقیم داخلِ گریدِ تک‌ستونیِ بیرونی می‌افتند و زیرِ هم می‌چینند، نه کنار هم. */ /* ⚠ minmax(0,1fr) و نه 1fr: در گرید، 1fr حداقلِ ضمنیِ auto دارد و تصویرِ پهنِ بنر ستون را از عرضِ صفحه بیرون می‌زند. */ .herox-side{display:grid;grid-template-rows:none; grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} } @media (max-width:479px){ .herox-side{grid-template-columns:minmax(0,1fr)} } /* ══════════════════════════════ ۱۱.۶ بنرهای دسته‌بندیِ سایت قدیم نامِ دسته داخلِ خودِ تصویر پخته شده، پس هیچ متنی رویش نمی‌گذاریم و کاشی فقط قابِ تصویر است. نسبتِ ثابت ۱۶:۶ چون همهٔ هشت بنر افقی‌اند. */ .catbn{ display:grid;gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1023px){.catbn{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:479px){.catbn{grid-template-columns:minmax(0,1fr);gap:10px}} /* ⚠ بدون aspect-ratio و بدون object-fit:cover. این بنرها طراحیِ آماده‌اند و نامِ دسته داخلشان پخته شده؛ cover لبه‌ها را می‌بُرید و متن ناقص می‌شد. حالا تصویر ابعادِ خودش را دیکته می‌کند و کامل دیده می‌شود. هر هشت بنر یک نسبت دارند، پس ردیف‌ها هم‌قد می‌مانند. */ .catbn-item{ display:block;overflow:hidden; border-radius:var(--r-lg); background:var(--c-panel); transition:transform var(--t-fast),box-shadow var(--t-fast); } .catbn-item img{ display:block;width:100%;height:auto; transition:transform .35s var(--ease); } @media (hover:hover){ .catbn-item:hover{box-shadow:var(--sh-2)} .catbn-item:hover img{transform:scale(1.04)} } /* ════════════════════════════════ ۱۱.۷ قفسهٔ محصول — یک قاب، سه تب ⚠ تب‌ها با رادیوی مخفی + :checked کار می‌کنند، نه جاوااسکریپت. یعنی اگر JS نرسد باز هم هر سه گروه در دسترس‌اند و هیچ محصولی پنهان نمی‌ماند. ترتیبِ DOM: همهٔ رادیوها و لیبل‌ها *قبل* از پنل‌ها هستند، چون سلکتور ~ فقط رو به جلو کار می‌کند. */ .shelf{ background:var(--c-bg); border:1px solid var(--c-line-2); border-radius:var(--r-xl); padding:clamp(14px,2.4vw,26px); } .shelf-head{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px;margin-block-end:16px; } .shelf-head h2{font-size:clamp(19px,2.2vw,26px);line-height:1.5;color:var(--c-ink)} .shelf-tabs{ display:flex;gap:4px;flex-wrap:wrap; padding:4px;border-radius:var(--r-full); background:var(--c-surface);border:1px solid var(--c-line-2); } .shelf-tabs label{ padding:8px 16px;border-radius:var(--r-full); font-size:15px;font-weight:700;color:var(--c-ink-2); cursor:pointer;white-space:nowrap; transition:background var(--t-fast),color var(--t-fast); } @media (hover:hover){.shelf-tabs label:hover{color:var(--c-ink)}} /* رادیوها فرزندِ مستقیمِ .shelf‌اند و قبل از head و پنل‌ها می‌آیند، پس «~» هم به لیبل (داخلِ head) می‌رسد و هم به پنل. */ .shelf-pane{display:none} #shelf-a:checked ~ .shelf-pane--a, #shelf-b:checked ~ .shelf-pane--b, #shelf-c:checked ~ .shelf-pane--c{display:block} #shelf-a:checked ~ .shelf-head label[for="shelf-a"], #shelf-b:checked ~ .shelf-head label[for="shelf-b"], #shelf-c:checked ~ .shelf-head label[for="shelf-c"]{background:var(--c-primary);color:#fff} .shelf-radio:focus-visible ~ .shelf-head .shelf-tabs{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-full)} .shelf .rail{padding-block-end:4px} .shelf .pcard{background:var(--c-surface)} /* ════════════════════════════════════════ ۱۱.۸ فروشگاه (تک‌شعبه) */ .store1{ display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(20px,3vw,40px);align-items:center; background:var(--c-surface); border:1px solid var(--c-line-2);border-radius:var(--r-xl); padding:clamp(18px,2.6vw,32px); } .store1-say h2{font-size:clamp(19px,2.2vw,26px);color:var(--c-ink)} .store1-say > p{margin-block-start:8px;color:var(--c-ink-2);font-size:15px;line-height:1.9} .store1-row{ display:flex;align-items:flex-start;gap:8px; margin-block-start:14px;font-size:15px;line-height:1.9;color:var(--c-ink); } .store1-row svg{width:18px;height:18px;flex:none;margin-block-start:5px;color:var(--c-primary)} .store1-row address{font-style:normal} .store1-do{display:flex;flex-direction:column;gap:8px;min-width:0} .store1-do .btn{width:100%} .store1-do .num{unicode-bidi:isolate;font-weight:700} .store1-map{border-radius:var(--r-lg);overflow:hidden;min-width:0;line-height:0} .store1-map iframe{display:block;width:100%;height:250px;border:0} @media (max-width:1023px){ .store1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .store1-map{grid-column:1 / -1;order:3} .store1-map iframe{height:220px} } @media (max-width:767px){ .store1{grid-template-columns:minmax(0,1fr);gap:18px} } /* ═════════════════════════════════════ ۱۲. ریل گروه‌های دسته‌بندی (خانه) */ .grp-sec{padding-block:var(--sp-6)} .grp-rail{ display:flex;gap:12px; overflow-x:auto;scroll-snap-type:x proximity; scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-block-end:4px; } .grp-rail::-webkit-scrollbar{display:none} .grp{ scroll-snap-align:start; flex:0 0 auto;width:132px; display:flex;flex-direction:column;align-items:center;gap:6px; padding:14px 10px; background:var(--c-surface); border:1px solid var(--c-line-2); border-radius:var(--r-lg); text-align:center; transition:border-color var(--t-fast),box-shadow var(--t-fast); } @media (hover:hover){ .grp:hover{border-color:var(--c-primary);box-shadow:var(--sh-1)} } .grp-ic{ width:64px;height:64px; display:grid;place-items:center; /* مربعِ گردگوشه، نه دایره — لوازم خانگی جعبه‌ای‌اند */ border-radius:var(--r-md); background:var(--c-panel); color:var(--c-ink-2); overflow:hidden; } .grp-ic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .grp-ic svg{width:26px;height:26px;stroke-width:1.5} .grp b{font-size:15px;font-weight:700;line-height:1.5;color:var(--c-ink)} .grp-n{font-size:15px;color:var(--c-ink-3)} /* قرمزِ روشن روی صورتیِ کم‌رنگ ۴٫۳۹:۱ می‌دهد و AA را با اختلافِ کم رد می‌کند؛ نسخهٔ تیره روی همان زمینه راحت از حد می‌گذرد. */ .grp--all .grp-ic{background:var(--c-primary-soft);color:var(--c-primary-dark)} /* ═══════════════════════════════════════ ۱۳. چیپ‌های فیلترِ سریع */ .quick-filters{display:flex;gap:8px;flex-wrap:wrap;min-width:0} .chip--toggle{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--c-line); background:var(--c-surface); color:var(--c-ink-2); border-radius:var(--r-md); font-size:15px;font-weight:500; } .chip--toggle svg{width:16px;height:16px;stroke-width:1.9} @media (hover:hover){ .chip--toggle:hover{border-color:var(--c-ink-3);color:var(--c-ink)} } /* روشن = سبزآبیِ اطمینان، نه قرمز: این‌ها «محدودکننده»اند نه «اقدام» */ .chip--toggle.is-on{ background:var(--c-trust-soft); border-color:rgba(var(--c-trust-rgb),.35); color:var(--c-success); font-weight:700; } /* ═════════════════════════════ ۱۴. شکلِ امضاییِ برچسب («بلیتی») یک هندسه، سه معنا — تمایزِ ارزان و یکدست. گوشهٔ بالا-شروع و پایین-پایان بزرگ، دو گوشهٔ دیگر ریز. */ .pcard-flag, .gal-flags .pcard-flag, .price-off, .badge-ticket{ border-start-start-radius:var(--r-md); border-end-end-radius:var(--r-md); border-start-end-radius:4px; border-end-start-radius:4px; } /* ═══════════════════════════════ ۱۵. گالری — اورلیِ «+N» روی بندانگشتی */ .gal-thumbs.has-more .gal-thumb.is-hidden{display:none} .gal-thumbs .gal-thumb.is-more{position:relative} .gal-thumbs .gal-thumb.is-more::after{ content:attr(data-more); position:absolute;inset:0; display:grid;place-items:center; background:rgba(16,22,28,.62); color:#fff;font-weight:700;font-size:15px; border-radius:inherit; unicode-bidi:isolate; } /* بعد از باز شدن، اورلی می‌رود و بقیه دیده می‌شوند */ .gal-thumbs.is-open .gal-thumb.is-hidden{display:block} .gal-thumbs.is-open .gal-thumb.is-more::after{display:none} /* ══════════════════════════ ۱۶. جدول مشخصات — دو ستونه در دسکتاپ محصولات این سایت تا ۱۹ ردیفِ مشخصات دارند؛ تک‌ستونه یعنی یک ستونِ باریکِ بلند و کلی فضای خالی سمت مقابل. */ @media (min-width:1024px){ .specs-group{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--sp-6); } .specs-group > h3{grid-column:1 / -1} /* راه‌راهِ زوج/فرد در دو ستون به هم می‌ریزد؛ به‌جایش خطِ جداکنندهٔ افقی */ .specs-group .spec-row:nth-child(odd){background:transparent} .specs-group .spec-row{border-block-end:1px solid var(--c-line-2)} } /* ══════════════════════════ ۱۷. لینک واتس‌اپ در باکس مشاوره ⚠ کلاس .is-wa در call-cta.php بود ولی هیچ قاعده‌ای نداشت، پس دقیقاً شبیه لینک‌های تلفنِ کنارش دیده می‌شد و کاربر تفکیکشان نمی‌کرد. این پارشال در صفحهٔ اصلی، دسته، محصول و جستجو تکرار می‌شود — یعنی همه‌جا. سبزآبیِ اطمینان می‌گیرد، نه سبزِ برندِ واتس‌اپ، تا از پالت بیرون نزند. */ .consult-tels a.is-wa{ background:var(--c-trust-soft); border-color:rgba(var(--c-trust-rgb),.30); color:var(--c-success); font-weight:700; } .consult-tels a.is-wa svg{color:var(--c-trust)} .consult-tels a.is-wa:hover{border-color:var(--c-trust);color:var(--c-trust-dark)} /* ══════════════════════════ ۱۸. مگامنو — بازشدن با کیبورد پنل فقط با کلاسِ .is-open (از app.js) باز می‌شد. اگر جاوااسکریپت نرسد یا کاربر با Tab حرکت کند، پنل هرگز باز نمی‌شد. لینکِ والد همچنان به صفحهٔ گروه می‌رود، پس ناوبری نمی‌شکست — ولی این یک خطِ CSS همان را با کیبورد هم قابل استفاده می‌کند. */ .mainnav > li.has-mega:focus-within > .mega{ opacity:1;visibility:visible;transform:none; transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s; } /* ══════════════════════════════════ ۱۹. نوار شناور مقایسه app.js وقتی حداقل یک کالا انتخاب شده باشد این نوار را می‌سازد. بالای نوار پایینِ موبایل می‌نشیند تا رویش نیفتد. */ .cmp-bar{ position:fixed;z-index:860; inset-inline:16px;inset-block-end:16px; display:none;align-items:center;gap:10px; padding:10px 12px; background:var(--c-dark);color:var(--c-on-dark); border-radius:var(--r-lg);box-shadow:var(--sh-3); } .cmp-bar.is-on{display:flex} .cmp-bar .cmp-n{flex:1 1 auto;min-width:0;font-size:15px;font-weight:500} .cmp-bar .cmp-x{ flex:none;width:32px;height:32px; display:grid;place-items:center;border-radius:var(--r-full); color:var(--c-on-dark-2);font-size:20px;line-height:1; } .cmp-bar .cmp-x:hover{background:rgba(255,255,255,.10);color:#fff} @media (min-width:900px){ .cmp-bar{inset-inline:auto 24px;inset-block-end:24px;min-width:320px} } @media (max-width:899px){ .cmp-bar{inset-block-end:calc(var(--mbar-h,62px) + 12px + env(safe-area-inset-bottom,0px))} } /* ══════════════════════════ ۲۰. کانال دومِ فروش روی محصولِ قیمت‌دار */ .buybox-alt{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;margin-block-start:10px; } .buybox-alt .btn{min-height:44px;font-size:15px} .buybox-alt:only-child, .buybox-alt:has(.btn:only-child){grid-template-columns:minmax(0,1fr)} /* ══════════════════════════════════════════ ۲۱. احترام به کاهش حرکت */ @media (prefers-reduced-motion:reduce){ .pcard,.pcard-img img,.btn,.to-top,.grp{transition:none !important} } /* ══════════════════════════════════════ ۲۲. لیست‌باکسِ مرتب‌سازی با
/ ساخته شده نه