/* * Zino UI Components (from Figma design system) * Reusable across header, panels, forms, etc. */ :root { --zino-green: #00ae5e; --zino-green-hover: #009952; --zino-green-light: #bfe3c9; --zino-green-art: #0bb06c; /* Figma decorative swoosh / star (42% opacity) */ --zino-green-chapter: #a3d6b1; /* About chapter subheads (Figma 110:24445) */ --zino-green-tint: #eaf6ed; /* pale green fill (fiscal-year dropdown) */ --zino-academy-cats-bg: #dcefe1; /* academy categories bar (Figma) */ --zino-green-fold: #8fca9e; /* darker fold strip on green ribbon badges/tags */ --zino-blue: #0ea2ea; /* price-history link, AI accents */ --zino-cash-bg: #ceeffd; /* نقدی (cash) badge — light blue */ --zino-cash-fold: #a8dcf5; /* darker fold strip on the نقدی ribbon */ --zino-cash-text: #0a6aa1; /* readable text on the نقدی badge */ --zino-cash: #84d6fa; /* نقدی accent (cart settlement breakdown) */ --zino-warn: #f47a5b; --zino-warn-hover: #e0663f; --zino-warn-bg: #fff6f4; --zino-warn-bg-soft: #fdece7; --zino-warn-border: #f9c4b7; /* "تحویل با تاخیر" delayed-delivery badge (pale yellow + darker fold) */ --zino-delay-bg: #fbf3cf; --zino-delay-fold: #ecdf9c; --zino-delay-text: #8a7a2e; /* Account tier badges (سطح طلایی / نقره‌ای) — ribbon body + darker fold + text */ --zino-gold: #f3e2a9; --zino-gold-fold: #e0c873; --zino-gold-text: #8a6d1f; --zino-silver: #e2e2e2; --zino-silver-fold: #c4c4c4; --zino-silver-text: #6b6b6b; --zino-ink: #000; /* pure black — Figma "تومان"/per-unit micro-labels */ --zino-text: #5b5b5b; --zino-text-heading: #575756; /* Figma headings, academy category tiles */ --zino-text-sub: #939598; /* muted sub-text gray (≈ Figma #929497); already used across home-v2 */ --zino-text-meta: #646668; /* likes/comments stats by the breadcrumb (Figma) */ --zino-text-muted: #c3c3c3; --zino-text-placeholder: #dddddd; --zino-search-bg: #f7f7f7; --zino-surface: #f6f6f6; /* flat light-gray panel bg (product desc/specs/reviews tabs) */ --zino-surface-2: #ebebeb; /* inset panel a shade darker (cart وضعیت تسویه box) */ --zino-surface-3: #f2f2f2; /* panel bg for account/analysis cards (Figma 110:3861) */ /* Annual-analysis chart series (Figma 110:10178 pastel bars) */ --zino-chart-1: #f6d45a; --zino-chart-2: #84d6fa; --zino-chart-3: #f4a4b6; --zino-chart-4: #8fca9e; --zino-chart-5: #c9b6f2; --zino-chart-6: #f9c4b7; --zino-chart-7: #c3c3c3; --zino-border: #eeeeee; --zino-border-soft: #f5f5f5; /* fainter hairline (e.g. table header underline that reads heavy under bold text) */ --zino-excel: #217346; /* Microsoft Excel green — export-to-excel button */ --zino-border-strong: #dddddd; /* slightly darker card border (product card, variant modal) */ --zino-disabled: #d6d6d6; /* grey fill for disabled CTAs (unavailable / pending-supply product) */ /* ===== Homepage v2 design tokens ======================================= rem is relative to (16px — the legacy body:14px does NOT affect it), so 1rem = 16px. Figma px shown in comments for traceability. */ /* ---- Spacing — 4/8px grid --------------------------------------------- Round odd Figma values to the nearest step (e.g. Figma 13px → --space-3, 18px → between --space-4/5). Use these for margins/padding/gaps. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ /* ---- Section vertical rhythm ------------------------------------------ */ --zino-section-gap: clamp(4rem, 8.64vw + 1.975rem, 9.75rem); /* 64 → 156px */ } /* Links: drop Bootstrap 5's default underline across the whole site. This file loads right after bootstrap.rtl.min.css, so (equal specificity, later source order) this wins. Components keep text-decoration-none utilities redundantly but harmlessly. */ a { text-decoration: none; } .text-danger { color: var(--zino-warn) !important; } /* Inline-SVG icon (Figma/Iconify sprite — see Views/Shared/_ZinoIcons.cshtml). Sizes to 1em and follows the element's `color` via currentColor, so it drops in wherever a Bootstrap `bi` icon used to sit. */ .zi { width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -0.125em; fill: none; } /* Brand highlight */ .zino-brand-mark { color: var(--zino-green); font-weight: 700; } .zino-logo { height: 34px; width: auto; display: block; } /* Green account / CTA button (Figma: slanted left edge, name + user icon) */ .zino-pill-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 12px 6px 16px; border: none; border-radius: 0; background: transparent; color: #fff !important; font-size: 0.875rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; direction: ltr; transition: color 0.2s ease; cursor: pointer; z-index: 0; } .zino-pill-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zino-green); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); transition: background 0.2s ease; } .zino-pill-btn:hover, .zino-pill-btn:focus { color: #fff !important; } .zino-pill-btn:hover::before, .zino-pill-btn:focus::before { background: var(--zino-green-hover); } .zino-pill-btn__icon { width: 18px; height: 20px; flex-shrink: 0; display: block; } .zino-pill-btn__text { overflow: hidden; text-overflow: ellipsis; direction:rtl; } .zino-pill-btn--ghost { padding: 6px 16px; color: var(--zino-text) !important; font-weight: 400; } .zino-pill-btn--ghost::before { display: none; } .zino-pill-btn--ghost:hover, .zino-pill-btn--ghost:focus { background: var(--zino-search-bg); color: var(--zino-text) !important; } /* Search bar (Figma: #f7f7f7, 48px, icon left, placeholder right) */ .zino-search-field { position: relative; width: 100%; } .zino-search-field .search-input, .zino-search-field .form-control { width: 100%; height: 48px; border: none; border-radius: 0; background: var(--zino-search-bg); color: var(--zino-text); direction: rtl; text-align: right; font-size: 1rem; font-weight: 700; padding: 12px 16px 12px 52px; } .zino-search-field .search-input::placeholder, .zino-search-field .form-control::placeholder { color: var(--zino-text-placeholder); font-weight: 700; } .zino-search-field .search-input:focus, .zino-search-field .form-control:focus { outline: 1px solid #dddddd; box-shadow: none; border: none; } .zino-search-field .search-btn { position: absolute; top: 0; bottom: 0; left: 16px; right: auto; margin-top: auto; margin-bottom: auto; transform: none; background: transparent !important; box-shadow: none !important; border: none; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .zino-search-field .search-btn i { color: var(--zino-green) !important; font-size: 1.5rem; line-height: 1; display: block; } /* Horizontal nav menu (Persian reading order, right → left) */ .zino-menu-list { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; direction: rtl; } /* Nav item: label then icon (icon on the right in Figma) */ .zino-nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--zino-text); font-size: 0.875rem; font-weight: 400; text-decoration: none; white-space: nowrap; direction: ltr; padding: 4px 0; transition: color 0.2s ease; } .zino-nav-link:hover { color: var(--zino-green); } .zino-nav-link i { font-size: 1.25rem; color: var(--zino-text); flex-shrink: 0; } .zino-nav-link-icon { width: 20px; height: 20px; flex-shrink: 0; display: block; } .zino-nav-link:hover i { color: var(--zino-green); } .zino-nav-link--promo { color: var(--zino-green); font-weight: 700; line-height: 1; align-items: center; } .zino-nav-link--promo .zino-nav-link-icon { width: 20px; height: 20px; } /* ── Trapezoid hover highlight ────────────────────────────────────────────── Same shape as .zino-pill-btn::before. Apply to any clickable element that needs the slanted green hover from the Figma design system. Usage: add class="zino-trap-hover" alongside your own layout classes. ────────────────────────────────────────────────────────────────────────── */ .zino-trap-hover { position: relative; isolation: isolate; } .zino-trap-hover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 90%; z-index: -1; background: var(--zino-green); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity 0.18s ease; } .zino-trap-hover:hover::before { opacity: 1; } .zino-trap-hover:hover { color: #fff; } /* ========================================================= Product card (v2 — Figma node 4:2645 / 4:2697) Used by Views/Shared/_Product.cshtml ========================================================= */ /* The card keeps ONE fixed height in every state. Width still flexes with the responsive column, so the card is responsive in width but never changes height when an element (stock note / 2nd price / similar pill) shows or hides. Height is tuned to the actual content stack (~433px) plus a small bottom margin — NOT the literal Figma 486px, which assumed much looser vertical spacing and left dead space under the button. */ .product-col { display: flex; flex-direction: column; } .swiper-wrapper { align-items: stretch; } .swiper-slide { height: auto; display: flex; flex-direction: column; } /* don't let the column/slide stretch override the fixed card height */ .product-col > .pc-card, .swiper-slide > .pc-card { flex: 0 0 auto; } .product-box.pc-card { --pc-card-height: 486px; display: flex; flex-direction: column; width: 100%; height: var(--pc-card-height); padding: 12px; border: 1px solid #dddddd; border-radius: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease; overflow: hidden; } .product-box.pc-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .pc-card .pc-link { display: flex; flex-direction: column; flex-grow: 0; text-decoration: none; color: inherit; } /* --- Top badge row --- */ .pc-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 22px; margin-bottom: 4px; } .pc-card .pc-top-start, .pc-card .pc-top-end { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pc-card .pc-top-end { align-items: flex-end; } .pc-card .pc-badge, .cart-card-v2 .pc-badge, .resources-file-card .pc-badge, .cv2-notice-modal .pc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 0; font-size: 0.625rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } /* Ribbon badges (Figma: light body + darker fold, slanted banner top) */ .pc-card .pc-badge--discount, .pc-card .pc-badge--settle, .pc-card .pc-badge--warn, .pc-card .pc-badge--cash, .cart-card-v2 .pc-badge--settle, .cart-card-v2 .pc-badge--cash, .resources-file-card .pc-badge--discount, .resources-file-card .pc-badge--settle, .cv2-notice-modal .pc-badge--cash { position: relative; padding-right: 14px; clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%); } .pc-card .pc-badge--discount::after, .pc-card .pc-badge--settle::after, .pc-card .pc-badge--warn::after, .pc-card .pc-badge--cash::after, .cart-card-v2 .pc-badge--settle::after, .cart-card-v2 .pc-badge--cash::after, .resources-file-card .pc-badge--discount::after, .resources-file-card .pc-badge--settle::after, .cv2-notice-modal .pc-badge--cash::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 5px; } /* Green ribbon: discount (+ catalog badge on resources page) */ .pc-card .pc-badge--discount, .resources-file-card .pc-badge--discount { background: var(--zino-green-light); /* #bfe3c9 */ color: var(--zino-text); } .pc-card .pc-badge--discount::after, .resources-file-card .pc-badge--discount::after { background: var(--zino-green-fold); } /* Coral ribbon: cash-only / delayed-supply / settlement (+ price list on resources page) */ .pc-card .pc-badge--warn, .pc-card .pc-badge--settle, .cart-card-v2 .pc-badge--settle, .resources-file-card .pc-badge--settle { background: #fcece7; color: var(--zino-warn); } .pc-card .pc-badge--warn::after, .pc-card .pc-badge--settle::after, .cart-card-v2 .pc-badge--settle::after, .resources-file-card .pc-badge--settle::after { background: #fbdad1; } /* نقدی cash badge: light blue */ .pc-card .pc-badge--cash, .cart-card-v2 .pc-badge--cash, .cv2-notice-modal .pc-badge--cash { background: var(--zino-cash-bg); color: var(--zino-cash-text); } .pc-card .pc-badge--cash::after, .cart-card-v2 .pc-badge--cash::after, .cv2-notice-modal .pc-badge--cash::after { background: var(--zino-cash-fold); } .pc-card .pc-badge--groupb { background: #fff3e0; color: #e65100; } /* --- Image (sizing/hover handled by .product-image in style2.css) --- */ .pc-card .pc-image { margin: 6px 0; align-items: center; justify-content: center; } /* Override style2.css height (loaded after us, equal specificity) */ .product-box.pc-card .product-image { height: 175px; } /* the site-logo fallback (no product/brand image) should sit smaller in the image slot and never be cropped. Selector kept specific enough to beat style2.css's `.product-box .product-image img { height:100%; object-fit:cover }`. */ .product-box .product-image img.pc-image-fallback { width: auto; max-width: 55%; max-height: 70%; height: auto; object-fit: contain; opacity: 0.85; } /* --- Title + meta (reserve both lines so the price never shifts up) --- */ .pc-card .pc-info { flex-shrink: 0; min-height: 39px; margin-bottom: 4px; margin-top: 49px; } .pc-card .pc-name { margin: 0 0 4px; font-weight: 700; font-size: 0.8125rem; line-height: 1.5; color: var(--zino-text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-card .pc-meta { margin: 0; font-size: 0.6875rem; line-height: 1.4; color: var(--zino-text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-card .pc-meta-sep { margin: 0 4px; } /* --- Buy section: packed directly under the title (no gap) --- */ .pc-card .pc-buy { flex-grow: 0; padding-top: 4px; } /* Guest: placeholder price/CTA (fake digits only) — blur is cosmetic; real prices are never rendered in the markup for anonymous users. */ .pc-card .pc-buy--guest { position: relative; display: block; text-decoration: none; color: inherit; user-select: none; -webkit-user-select: none; cursor: pointer; } .pc-card .pc-buy-guest-blur { filter: blur(0.45rem); pointer-events: none; } .pc-card .pc-buy-guest-reveal { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 0.5rem); padding: var(--space-3, 0.75rem); text-align: center; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.72) 35%, rgba(255, 255, 255, 0.88) 100% ); } .pc-card .pc-buy-guest-reveal__ico { font-size: 1.125rem; line-height: 1; color: var(--zino-green); } .pc-card .pc-buy-guest-reveal__copy { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; } .pc-card .pc-buy-guest-reveal__cta { position: relative; font-size: 0.8125rem; font-weight: 700; line-height: 1.4; color: var(--zino-text-heading); padding-bottom: 0.25rem; } .pc-card .pc-buy-guest-reveal__cta::after { content: ""; position: absolute; right: 10%; left: 10%; bottom: 0; height: 2px; background: var(--zino-green); transform: scaleX(0.55); transform-origin: center; transition: transform 0.2s ease; } .pc-card .pc-buy--guest:hover .pc-buy-guest-reveal__cta::after, .pc-card .pc-buy--guest:focus .pc-buy-guest-reveal__cta::after { transform: scaleX(1); } .pc-card .pc-buy--guest:hover .pc-buy-guest-reveal__ico, .pc-card .pc-buy--guest:focus .pc-buy-guest-reveal__ico { color: var(--zino-green-hover); } .pc-card .pc-price { margin-bottom: 6px; min-height: 83px; /* reserve the 2-row height so 1-price cards don't shrink */ } .pc-card .pc-unit { margin: 0 0 4px; font-size: 0.6875rem; color: var(--zino-text-muted); text-align: right; } .pc-card .pc-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .pc-card .pc-price-row--single { justify-content: flex-start; } .pc-card .pc-tag { flex-shrink: 0; padding: 2px 10px; border-radius: 0; font-size: 0.8125rem; font-weight: 600; } /* نقدی: green ribbon (light body + darker fold, slanted banner top) */ .pc-card .pc-tag--cash { position: relative; padding-right: 14px; background: var(--zino-green-light); /* #bfe3c9 */ color: var(--zino-text); clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%); } .pc-card .pc-tag--cash::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 5px; background: var(--zino-green-fold); } /* اعتباری / قبلی: plain dark text, no background */ .pc-card .pc-tag--credit { background: transparent; color: var(--zino-text); padding: 2px 0; } .pc-card .pc-tag--groupb { background: #fff3e0; color: #e65100; } .pc-card .pc-val { display: inline-flex; align-items: baseline; gap: 3px; color: var(--zino-text); } .pc-card .pc-val--cash { color: var(--zino-green); } .pc-card .pc-amount { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; } .pc-card .pc-amount--strike { text-decoration: line-through; font-weight: 400; color: var(--zino-text-muted); } .pc-card .pc-cur { font-size: 0.5rem; font-weight: 400; opacity: 0.85; color: var(--zino-text); } /* Credit/list price row: smaller amount to distinguish from cash price */ .pc-card .pc-price-row--secondary .pc-amount { font-size: 0.875rem; font-weight: 700; } .pc-card .pc-unavailable { font-weight: 700; font-size: 0.9375rem; color: var(--zino-warn); } /* Stop-supply variant (supply page) — grey slanted ribbon (same shape as the .pc-badge ribbons: slanted banner top + darker fold strip on the right) */ .pc-card .pc-unavailable--stop { position: relative; display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; color: var(--zino-text-sub); background: var(--zino-surface-2); padding: 4px 12px 4px 16px; clip-path: polygon(0 8%, 30% 0, 100% 0, 100% 100%, 0 100%); } .pc-card .pc-unavailable--stop::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 5px; background: var(--zino-disabled); } /* sit the ribbon at the bottom of the reserved price area, right above the action row (keep the reserved height so buttons still align across the row) */ .pc-card .pc-price:has(.pc-unavailable--stop) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } /* --- Stock / info messages: reserved slot so the CTA never shifts --- */ .pc-card .pc-notes { min-height: 18px; margin-bottom: 6px; } .pc-card .pc-stock { margin: 0; font-size: 0.6875rem; line-height: 1.5; text-align: right; } /* one-line messages keep the slot height fixed */ .pc-card p.pc-stock { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-card .pc-stock--danger { color: var(--zino-warn); } .pc-card .pc-stock--info { color: var(--main-color-two, #275fe0); } .pc-card .pc-stock--micro { color: var(--zino-warn); font-size: 0.6875rem; line-height: 1.5; text-align: right; } .pc-card .pc-microorder-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 8px; border: none; border-radius: 0; background: var(--zino-green); color: #fff; font-size: 0.6875rem; cursor: pointer; } /* --- Actions row: CTA (grows) beside compact similar chip --- */ .pc-card .pc-actions { display: flex; align-items: stretch; gap: 8px; min-width: 0; } .pc-card .pc-cart-btn { position: relative; isolation: isolate; z-index: 0; flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 16px; border: none; background: transparent; color: #fff !important; font-size: 0.75rem !important; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden; cursor: pointer; transition: filter 0.2s ease; max-width:150px; } .pc-card .pc-cart-btn > span { overflow: hidden; text-overflow: ellipsis; } .pc-card .pc-cart-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--zino-green); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); transition: background 0.2s ease; } .pc-card .pc-cart-btn:hover::before, .pc-card .pc-cart-btn:focus::before { background: var(--zino-green-hover); } .pc-card .pc-cart-btn--supply::before { background: var(--main-color-two, #275fe0); } .pc-card .pc-cart-btn--reserve::before { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } /* Disabled CTA — unavailable / pending-supply items (supply page). Grey fill, not clickable, no hover shift. */ .pc-card .pc-cart-btn--disabled { cursor: default; } .pc-card .pc-cart-btn--disabled::before, .pc-card .pc-cart-btn--disabled:hover::before, .pc-card .pc-cart-btn--disabled:focus::before { background: var(--zino-disabled); } .pc-card .pc-cart-btn i { font-size: 1rem; line-height: 1; } /* Similar-products pill (Figma: count + sparkle, label wraps to 2 lines) */ .pc-card .pc-similar { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 0; background: #ebebeb; color: var(--zino-text) !important; font-size: 0.625rem; text-decoration: none; transition: background 0.2s ease; } .pc-card .pc-similar-text { width: min-content; line-height: 1.15; text-align: center; } .pc-card .pc-similar:hover { background: #e0e0e0; } .pc-card .pc-similar-ico { width: 16px; height:21px; } .pc-card .pc-similar-count { font-weight: 700; font-size: 0.875rem; color: #706f6f; } /* CTA icon: desktop keeps the text-only button, the icon only shows on phones */ .pc-card .pc-cart-btn .pc-cart-ico { display: none; } /* --- Tablet grid (576–991px): cap card width -------------------------------- Below lg, columns that only declare col-lg-* become full width; limit the card so it matches the ~4-col desktop footprint instead of stretching edge to edge. Markup should also use col-sm-6; this rule is the backstop. */ @media (min-width: 576px) and (max-width: 991.98px) { .product-col > .product-box.pc-card { max-width: 22.5rem; /* 360px */ width: 100%; margin-inline: auto; } } /* --- Compact product card on phones (Figma 1130-17797 mobile view) --------- ~2.3 cards per slider view: smaller image/prices, 2-line title, and the CTA collapses to an icon-only green button beside the sparkle chip. */ @media (max-width: 575.98px) { .product-box.pc-card { --pc-card-height: 386px; } .product-box.pc-card .product-image { height: 118px; } .pc-card .pc-info { margin-top: 8px; min-height: 52px; } /* title wraps to two lines like the design instead of 1-line ellipsis */ .pc-card .pc-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.75rem; } .pc-card .pc-meta { font-size: 0.625rem; } .pc-card .pc-price { min-height: 66px; margin-bottom: 4px; } .pc-card .pc-tag { font-size: 0.6875rem; padding: 2px 8px; } .pc-card .pc-tag--cash { padding-right: 12px; } .pc-card .pc-amount { font-size: 0.875rem; } .pc-card .pc-price-row--secondary .pc-amount { font-size: 0.75rem; } .pc-card .pc-stock { font-size: 0.625rem; } /* icon-only CTA + sparkle-only similar chip */ .pc-card .pc-actions { justify-content: start; } .pc-card .pc-cart-btn { flex: 0 0 auto; min-width: 54px; min-height: 32px; padding: 4px 10px 4px 14px; } .pc-card .pc-cart-btn .pc-cart-ico { display: inline; } .pc-card .pc-cart-btn > span { display: none; } .pc-card .pc-similar-text, .pc-card .pc-similar-count { display: none; } }