/* ============================================================================= * CarParts — Mobile List View (≤600 px) v1.1.9 * * Card architecture (DOM order = visual order once guarantee is pulled out): * * ┌─────────────────────────────────────────┐ * │ IMAGE 4:3 (white bg, skeleton while │ * │ loading) [جدید] ←── absolute │ * │ [گارانتی] ←── absolute │ * └─────────────────────────────────────────┘ * پک کامل جلوبندی پراید 18px bold ← IDENTITY GROUP * جلوبندی 12px #888 ← * * تومان ۳،۷۸۰،۰۰۰ 17px bold ← ACTION GROUP * ┌─────────────────────────────────────────┐ * │ 🛒 افزودن به سبد خرید │ flat black CTA * └─────────────────────────────────────────┘ * * Load order * ---------- * loop-cards.css priority 100 * cards.css priority 101 * guarantee.css priority 100 (text-align:center on the link — overridden below) * mobile.css priority 120 (border-width, margin-top:auto — overridden below) * listview.css priority 121 ← this file * * Bump $ver in carparts-listview.php after editing so wp-rocket refetches. * ========================================================================== */ /* Skeleton shimmer keyframe — declared at top level so @media can reference it */ @keyframes cp-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 600px) { /* ══════════════════════════════════════════════════════════════════════ * LAYOUT FOUNDATION * ══════════════════════════════════════════════════════════════════════ */ /* Single-column grid. * padding-bottom: 96px clears the fixed «بازگشت به بالا» scroll button * so it never overlaps the last card's CTA. */ .woocommerce-shop ul.products, .tax-product_cat ul.products, .tax-product_tag ul.products, .post-type-archive-product ul.products { grid-template-columns: 1fr !important; gap: 16px !important; padding-bottom: 96px !important; } /* Neutralise Xtra's body class that forces li.product to 48%. */ body.xtra-woo-two-col-mobile .woocommerce ul.products li.product, body.xtra-woo-two-col-mobile ul.products[class*="columns-"] li.product { width: auto !important; float: none !important; margin: 0 !important; } /* guarantee.css sets text-align:center on the link wrapper (no !important). * Flip to right so title/category/price text starts at the right edge. */ .woocommerce ul.products li.product a.woocommerce-loop-product__link { text-align: right !important; } /* ══════════════════════════════════════════════════════════════════════ * IMAGE — skeleton loader + 4:3 wide-format * ══════════════════════════════════════════════════════════════════════ */ /* Skeleton: visible before the paints; covered once image loads. * min-height: 220px prevents layout shift (CLS) on slow connections. */ .woocommerce ul.products li.product .xtra-product-thumbnail { min-height: 220px !important; background: linear-gradient( 90deg, #f0f0f0 25%, #e4e4e4 37%, #f0f0f0 63% ) !important; background-size: 400% 100% !important; animation: cp-skeleton 1.4s ease infinite !important; position: relative !important; overflow: hidden !important; } /* 4:3 wide-format. object-fit:contain = no cropping; every bolt visible. * White background fills the letterbox gaps cleanly. */ .woocommerce ul.products li.product .xtra-product-thumbnail img, .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail { aspect-ratio: 4 / 3 !important; height: auto !important; object-fit: contain !important; object-position: center !important; background: #ffffff !important; color: transparent !important; /* suppress broken-image alt text */ } /* ══════════════════════════════════════════════════════════════════════ * BADGE ZONE — discount at top-right, guarantee at top-left * * li.product already has position:relative (WooCommerce default for * the sale badge). cards.css adds overflow:hidden, which clips both * badges cleanly to the card edge. * ══════════════════════════════════════════════════════════════════════ */ /* Discount / sale badge — percentage only, compact and refined. */ .woocommerce ul.products li.product .onsale, .woocommerce ul.products li.product .cz_new_badge { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; font-size: 10px !important; padding: 4px 8px !important; z-index: 12 !important; } .woocommerce ul.products li.product .cz_new_badge { display: none !important; } /* Guarantee pill — keep in text flow under category to avoid overlap. */ .woocommerce ul.products li.product .cp-guarantee--loop { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; margin: 0 !important; font-size: 10px !important; padding: 4px 8px !important; gap: 4px !important; display: inline-flex !important; white-space: nowrap !important; box-shadow: 0 6px 16px rgba(15, 138, 67, .14), 0 1px 2px rgba(16, 16, 16, .1) !important; max-width: calc(100% - 32px) !important; } .woocommerce ul.products li.product .cp-guarantee--loop svg { width: 12px !important; height: 12px !important; font-size: 12px !important; flex-shrink: 0; } .woocommerce ul.products li.product:has(.onsale) .cp-guarantee--loop, .woocommerce ul.products li.product:has(.cz_new_badge) .cp-guarantee--loop { top: 10px !important; } /* ══════════════════════════════════════════════════════════════════════ * IDENTITY GROUP — Title + Category as a single visual unit * * DOM order after guarantee is pulled out of flow: * .xtra-product-thumbnail → image * .woocommerce-loop-product__title → title (hook priority 10) * .cp-loop-cat → category (hook priority 8, renders first * in after_shop_loop_item_title, so appears * ABOVE the title in DOM — wait, let me verify) * * Actually hook order: category priority 8 → guarantee priority 9 → * title at woocommerce_shop_loop_item_title (default, before after_*). * So DOM is: image → title → category → guarantee → price. * Category sits immediately below title — perfect for tight grouping. * ══════════════════════════════════════════════════════════════════════ */ /* Title: large, bold, right-aligned RTL start. display:block (not the flex inherited from cards.css) — a flex row with a single wrapped-text item shrinks to a "shrink-to-fit" width instead of filling the line, which broke 2-line titles unevenly (short first line). Block gives normal full-width greedy wrapping. */ .woocommerce ul.products li.product .woocommerce-loop-product__title { display: block !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: right !important; text-wrap: pretty; /* test kon*/ width: 100% !important; padding: 14px 16px 0 !important; margin-top: 0 !important; min-height: unset !important; box-sizing: border-box !important; } /* Category: subtle sub-title, zero gap below title */ .woocommerce ul.products li.product .cp-loop-cat { font-size: 12px !important; font-weight: 400 !important; color: #888888 !important; text-align: right !important; padding: 3px 16px 0 !important; margin-top: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* ══════════════════════════════════════════════════════════════════════ * ACTION GROUP — Price + CTA button * ══════════════════════════════════════════════════════════════════════ */ /* Price: right-aligned, clear 12px gap from category. * margin-top:12px !important overrides mobile.css's margin-top:auto * (which pushed the price to the bottom of the flex link). * border:none removes mobile.css's grey top divider line. */ .woocommerce ul.products li.product .price { font-size: 17px !important; font-weight: 700 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; text-align: left !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 16px 12px !important; margin: 0 !important; border: none !important; border-top: 0 !important; box-shadow: none !important; white-space: normal !important; } /* «تومان» — de-emphasised denomination label */ .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol { font-size: 11px !important; font-weight: 400 !important; color: #888888 !important; margin: 0 3px !important; vertical-align: middle; letter-spacing: 0; } /* Numeric amount inherits font-weight:700 from .price */ .woocommerce ul.products li.product .price .woocommerce-Price-amount { font-weight: 700 !important; } /* CTA button — flat solid black (matches desktop cards.css; red stays * reserved for price + sale badge), no 3D effects of any kind. * * border:none kills the grey top border from mobile.css. * box-shadow:none = zero glow, lift, or inset effect. * The only feedback is background lightening + scale on :active. */ .woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce ul.products li.product .button[class*="product_type_"] { background: #101010 !important; color: #ffffff !important; border: none !important; border-top: 0 !important; border-radius: 0 !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; font-size: 15px !important; font-weight: 700 !important; min-height: 52px !important; padding: 14px 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; letter-spacing: 0.3px; box-shadow: none !important; transition: background 0.18s ease, transform 0.1s ease !important; text-decoration: none !important; } /* SVG icon inside button — force white regardless of fill/stroke attr */ .woocommerce ul.products li.product .button.add_to_cart_button svg, .woocommerce ul.products li.product .button[class*="product_type_"] svg { fill: #ffffff !important; stroke: #ffffff !important; color: #ffffff !important; flex-shrink: 0; } /* Tap feedback: lighter black + subtle scale. Still flat — no shadow. */ .woocommerce ul.products li.product .button.add_to_cart_button:active, .woocommerce ul.products li.product .button[class*="product_type_"]:active { background: #1f1f1f !important; box-shadow: none !important; transform: scale(0.98) !important; } }