/* ========================================================================== نمایش محصولات تومان — استایل بخش کاربری اندازه‌ها از متغیرهایی می‌آیند که پلاگین در تزریق می‌کند. قواعد موبایل به‌صورت پویا (با نقطهٔ شکست دلخواه) تولید می‌شوند. ========================================================================== */ .tps-section{ background: var(--tps-bg, transparent) !important; padding: 22px 0; direction: rtl; font-family: var(--tps-font, Tahoma, sans-serif); box-sizing: border-box; } .tps-section.tps-bare{ background: none !important; padding: 12px 0; } .tps-section *, .tps-section *::before, .tps-section *::after{ box-sizing: border-box; } .tps-section .tps-inner{ max-width: var(--tps-max, 1180px); margin: 0 auto; padding: 0 16px; } /* ---------- سربرگ ردیف ---------- */ .tps-section .tps-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .tps-section .tps-head .tps-heading{ margin: 0; font-size: 17px; font-weight: 800; line-height: 2; color: var(--tps-heading, #2f3349); } .tps-section .tps-head .tps-more{ font-size: 13px; font-weight: 600; color: var(--tps-heading, #2f3349); text-decoration: none; opacity: .85; white-space: nowrap; } .tps-section .tps-head .tps-more:hover{ opacity: 1; text-decoration: underline; } /* ---------- ظرف ---------- */ .tps-section .tps-wrap{ position: relative; } .tps-section .tps-rail{ display: flex; align-items: stretch; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; background: var(--tps-card-bg, #fff); border-radius: var(--tps-radius, 16px); scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .tps-section .tps-rail::-webkit-scrollbar{ display: none; } .tps-section .tps-rail:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; } .tps-section .tps-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tps-card-w, 206px), 1fr)); background: var(--tps-card-bg, #fff); border-radius: var(--tps-radius, 16px); overflow: hidden; } /* ---------- کارت ---------- */ .tps-section .tps-card{ display: flex; flex-direction: column; align-items: var(--tps-align, center); text-align: var(--tps-text-align, center); padding: 12px 11px 14px; border-left: 1px solid var(--tps-divider, #efeff3); background: var(--tps-card-bg, #fff); height: var(--tps-card-h, auto); min-height: 0; overflow: hidden; } .tps-section .tps-rail .tps-card{ flex: 0 0 var(--tps-card-w, 206px); width: var(--tps-card-w, 206px); scroll-snap-align: start; } .tps-section .tps-rail .tps-card:last-child, .tps-section .tps-grid .tps-card:last-child{ border-left: 0; } .tps-section .tps-grid .tps-card{ border-bottom: 1px solid var(--tps-divider, #efeff3); } /* ---------- تصویر ---------- */ .tps-section .tps-thumb{ display: block; width: 100%; height: var(--tps-img-h, 185px); flex: 0 0 auto; overflow: hidden; border-radius: var(--tps-img-r, 16px) !important; background: var(--tps-thumb-bg, transparent); } .tps-section .tps-thumb img, .tps-section .tps-thumb .tps-img{ width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: var(--tps-img-fit, contain); object-position: center; display: block; margin: 0; padding: 0; border: 0; border-radius: var(--tps-img-r, 16px) !important; transition: transform .35s ease; } @media (hover: hover){ .tps-section .tps-card:hover .tps-thumb img{ transform: scale(1.04); } } /* ---------- عنوان ---------- */ .tps-section .tps-title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; margin: 10px 0 0; min-height: calc(1.85em * 2); font-size: var(--tps-title-size, 15px); font-weight: var(--tps-title-weight, 800); line-height: 1.85; color: var(--tps-title, #2f3349); text-decoration: none; } .tps-section .tps-title:hover{ opacity: .78; } /* ---------- امتیاز ---------- */ .tps-section .tps-rating{ display: flex; align-items: center; justify-content: var(--tps-align, center); gap: 4px; margin-top: 3px; min-height: 1.35em; font-size: var(--tps-small-size, 12px); font-weight: 800; line-height: 1; color: var(--tps-title, #2f3349); font-variant-numeric: tabular-nums; } .tps-section .tps-rating .tps-star{ width: 1.15em; height: 1.15em; fill: var(--tps-rating, #f5a524); flex: none; } .tps-section .tps-rate-val{ font-weight: 800; } .tps-section .tps-rate-count{ color: var(--tps-muted, #b9bbc6); font-weight: 700; } .tps-section .tps-rate-empty{ color: var(--tps-muted, #b9bbc6); font-weight: 600; } /* ---------- قیمت ---------- */ .tps-section .tps-prices{ margin-top: auto; padding-top: 4px; width: 100%; } .tps-section .tps-old-row{ display: flex; align-items: center; justify-content: var(--tps-align, center); gap: 7px; min-height: 1.7em; font-size: var(--tps-small-size, 12px); } .tps-section .tps-old{ font-size: inherit; font-weight: 600; color: var(--tps-muted, #b9bbc6); text-decoration: line-through; text-decoration-thickness: 1.4px; } .tps-section .tps-badge{ background: var(--tps-badge-bg, #d53b4b); color: var(--tps-badge-color, #fff); font-size: var(--tps-small-size, 12px); font-weight: 800; line-height: 1.45; border-radius: 999px; padding: 1px 9px 3px; } .tps-section .tps-price-row{ display: flex; align-items: center; justify-content: var(--tps-align, center); gap: 7px; margin-top: 3px; color: var(--tps-price, #2f3349); } .tps-section .tps-price{ font-size: var(--tps-price-size, 17px); font-weight: 800; font-variant-numeric: tabular-nums; } .tps-section .tps-callprice{ font-size: var(--tps-small-size, 12px); font-weight: 700; color: var(--tps-muted, #b9bbc6); } .tps-section .tps-unit{ font-size: var(--tps-small-size, 12px); font-weight: 800; } /* ---------- نشان تومان: «ن» بالای کشیدگی ---------- */ .tps-section .tps-toman{ position: relative; display: inline-block; font-size: var(--tps-small-size, 12px); font-weight: 800; line-height: 1; padding-top: var(--tps-noon-pad, 1.15em); } .tps-section .tps-toman .tps-noon{ position: absolute; top: calc( var(--tps-noon-size, 1.45em) * -0.12 ); left: var(--tps-noon-left, 37%); transform: translateX(-50%); font-size: var(--tps-noon-size, 1.45em); line-height: 1; } /* ---------- دکمه‌های ناوبری ---------- */ .tps-section .tps-nav{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; min-width: 0; min-height: 0; max-width: none; padding: 0 !important; margin: 0; line-height: 0; font-size: 0; -webkit-appearance: none; appearance: none; background: #fff !important; background-image: none !important; color: #111 !important; border: 1px solid rgba(17, 17, 17, .08) !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(17, 17, 17, .16); cursor: pointer; display: grid; place-items: center; transition: box-shadow .2s ease, transform .2s ease; } .tps-section .tps-nav:hover{ box-shadow: 0 8px 22px rgba(17, 17, 17, .22); transform: translateY(-50%) scale(1.06); } .tps-section .tps-nav:active{ transform: translateY(-50%) scale(.96); } .tps-section .tps-nav:focus-visible{ outline: 2px solid #111; outline-offset: 3px; } .tps-section .tps-nav[hidden]{ display: none !important; } .tps-section .tps-nav.tps-prev{ right: -18px; } .tps-section .tps-nav.tps-next{ left: -18px; } .tps-section .tps-nav svg{ width: 16px; height: 16px; fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; } /* دکمه‌ها فقط روی دستگاه‌های بدون لمس معنا دارند */ @media (hover: none), (max-width: 782px){ .tps-section .tps-nav{ display: none !important; } .tps-section .tps-inner{ padding: 0 10px; } } @media (prefers-reduced-motion: reduce){ .tps-section .tps-rail{ scroll-behavior: auto; } .tps-section .tps-thumb img{ transition: none; } }