/* ============================================================ SAFQA — Homepage Polish Overrides v1 Scoped under body.theme-safqa for child-theme safety. Fixes: price wrapping, out-of-stock labels, promo banner height equalization, and main slider button contrast. ============================================================ */ /* ── Task 1: Inline Currency + Price (no "جنيه" wrapping) ────── */ body.theme-safqa .ut2-gl__price { display: inline-flex !important; align-items: baseline !important; gap: 3px !important; flex-wrap: nowrap !important; white-space: nowrap !important; } body.theme-safqa .ut2-gl__price .ty-price, body.theme-safqa .ut2-gl__price .ty-price-num { display: inline !important; white-space: nowrap !important; } body.theme-safqa .ut2-cost-multi, body.theme-safqa .ut2-cost-base, body.theme-safqa .ut2-cost-opted { display: inline !important; white-space: nowrap !important; } body.theme-safqa .ut2-gl__price .ty-price span, body.theme-safqa .ut2-gl__price bdi { white-space: nowrap !important; display: inline !important; } /* Old price (strikethrough) */ body.theme-safqa .ut2-gl__price .ty-list-price, body.theme-safqa .ut2-gl__price .ty-strike { white-space: nowrap !important; display: inline !important; } /* RTL: keep price numbers reading correctly */ html[dir="rtl"] body.theme-safqa .ut2-gl__price { direction: rtl !important; } /* ── Task 2: Out-of-Stock Label — no cramping ────────────────── */ body.theme-safqa .ut2-gl__out-of-stock, body.theme-safqa .ty-qty-out-of-stock { white-space: nowrap !important; font-size: 11px !important; display: block !important; margin-bottom: 4px !important; color: #b12704 !important; } body.theme-safqa .ut2-gl__price-wrap .ty-price-call { white-space: nowrap !important; font-size: 12px !important; display: block !important; margin-top: 2px !important; } /* ── Task 3: Equalize Promo Banner Heights (عروض الموسم) ─────── */ /* SAFE approach: only target .owl-item inner content, never the carousel container or .owl-stage — those need their absolute/ translate positioning intact for the slider to function. */ body.theme-safqa .owl-item .ut2-banner { height: 100% !important; } body.theme-safqa .owl-item .ut2-banner img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 8px !important; } /* ── Task 4: Main Banner Button Contrast ─────────────────────── */ /* Real class: .ut2-a__button > a.ty-btn.ty-btn__outline Compiled standalone-rtl.css: .ty-btn__outline { background:transparent !important } This file loads via in AFTER compiled CSS, so same !important + higher specificity = we win regardless of JS body class. */ .ut2-a__button .ty-btn__outline, .ut2-a__button .ty-btn__outline.--tc, .ut2-a__button .ty-btn__outline.--bc { background: rgba(255,255,255,0.95) !important; color: #0F1111 !important; box-shadow: inset 0 0 0 2px #888C8C !important; border-radius: 8px !important; padding: 8px 24px !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; backdrop-filter: blur(4px) !important; transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important; } .ut2-a__button .ty-btn__outline:hover { background: #F7F8F8 !important; color: #0F1111 !important; box-shadow: inset 0 0 0 2px #0F1111 !important; } /* ── Bonus: Price container min-height reset ─────────────────── */ /* UniTheme2 sets a min-height on .ut2-gl__price via inline style calculated from JS. When currency doesn't wrap, we don't need the extra vertical space it reserves. */ body.theme-safqa .ut2-gl__price-wrap { min-height: 0 !important; } body.theme-safqa .ut2-gl__price[style*="min-height"] { min-height: auto !important; } /* ══════════════════════════════════════════════════════════════════ PRODUCT GRID CARDS — Amazon-style disciplined alignment Forces price + button to always sit at card bottom regardless of title length. Works on homepage grid blocks. ══════════════════════════════════════════════════════════════════ */ /* ── Task 5: Flex Column Card Layout ────────────────────────────── */ body.theme-safqa .ut2-gl__item > form { display: flex !important; flex-direction: column !important; height: 100% !important; } body.theme-safqa .ut2-gl__body { display: flex !important; flex-direction: column !important; flex: 1 !important; } body.theme-safqa .ut2-gl__content { flex: 1 !important; } body.theme-safqa .ut2-gl__price-wrap { margin-top: auto !important; } /* ── Task 6: Standardize Image Box ──────────────────────────────── */ body.theme-safqa .ut2-gl__image { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 180px !important; margin-bottom: 12px !important; overflow: hidden !important; } body.theme-safqa .ut2-gl__image img { max-height: 180px !important; width: auto !important; object-fit: contain !important; } /* ── Task 7: Title Line-Clamping (exactly 2 lines) ──────────────── */ body.theme-safqa .ut2-gl__name { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 38px !important; line-height: 19px !important; margin-bottom: 8px !important; font-size: 13px !important; font-weight: 500 !important; color: #0F1111 !important; } html[dir="rtl"] body.theme-safqa .ut2-gl__name { text-align: right !important; } /* ── Task 8: Button Alignment + Amazon Gold Style ───────────────── */ body.theme-safqa .ut2-gl__buttons { margin-top: auto !important; width: 100% !important; padding-top: 8px !important; } body.theme-safqa .ut2-gl__buttons .ty-btn__add-to-cart { width: 100% !important; border-radius: 100px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 700 !important; background-color: #FFD814 !important; border: 1px solid #FCD200 !important; color: #0F1111 !important; justify-content: center !important; } body.theme-safqa .ut2-gl__buttons .ty-btn__add-to-cart:hover { background-color: #F7CA00 !important; border-color: #F2C200 !important; } /* ── Task 9: "Show More" Button — clean pill ────────────────────── */ body.theme-safqa .ty-mainbox-body + .ty-center .ty-btn, body.theme-safqa .ut2-show-more-btn, body.theme-safqa .ty-mainbox-body ~ .ty-center .ty-btn { display: inline-flex !important; align-items: center !important; border-radius: 100px !important; border: 1px solid #888C8C !important; background-color: #FFFFFF !important; padding: 8px 32px !important; color: #0F1111 !important; font-weight: 500 !important; font-size: 14px !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; text-decoration: none !important; } body.theme-safqa .ty-mainbox-body + .ty-center .ty-btn:hover, body.theme-safqa .ut2-show-more-btn:hover, body.theme-safqa .ty-mainbox-body ~ .ty-center .ty-btn:hover { background-color: #F7F8F8 !important; border-color: #A2A6AC !important; } /* ══════════════════════════════════════════════════════════════════ AMAZON COMPACT BLOCK SKIN — .sqz-amazon-block Scoped tightly: only affects blocks with user_class="sqz-amazon-block" Target: Amazon.eg "متابعة التسوق" style — dark header bar, borderless compact cards, shadow on hover only. ══════════════════════════════════════════════════════════════════ */ /* Dark section header bar */ body.theme-safqa .sqz-amazon-block .ty-mainbox-title { background: #232f3e !important; border-radius: 8px 8px 0 0 !important; padding: 12px 16px !important; margin: 0 !important; } body.theme-safqa .sqz-amazon-block .ty-mainbox-title, body.theme-safqa .sqz-amazon-block .ty-mainbox-title * { color: #fff !important; } /* "اختياراتنا المميزة" — colored part stays orange-ish, rest white */ body.theme-safqa .sqz-amazon-block .ty-mainbox-title .ty-mainbox-title__colored { color: #febd69 !important; } /* White body area below the dark bar */ body.theme-safqa .sqz-amazon-block .ty-mainbox-body { background: #fff !important; border-radius: 0 0 8px 8px !important; padding: 12px 8px 8px !important; border: 1px solid #e7e7e7 !important; border-top: none !important; } /* Remove card borders — only hover shadow */ body.theme-safqa .sqz-amazon-block .ut2-gl__body { border: none !important; box-shadow: none !important; padding: 10px !important; border-radius: 6px !important; background: #fff !important; transition: box-shadow 0.15s ease !important; } body.theme-safqa .sqz-amazon-block .ut2-gl__item:hover .ut2-gl__body { box-shadow: 0 2px 12px rgba(0,0,0,0.11) !important; } /* Compact image box: 160px tall, centered, contained */ body.theme-safqa .sqz-amazon-block .ut2-gl__image { min-height: 160px !important; max-height: 160px !important; height: 160px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body.theme-safqa .sqz-amazon-block .ut2-gl__image img { max-height: 144px !important; width: auto !important; object-fit: contain !important; } /* Hide rating stars — add height variance between cards */ body.theme-safqa .sqz-amazon-block .ut2-gl__rating, body.theme-safqa .sqz-amazon-block .ut2-stars { display: none !important; } /* Tighter content padding */ body.theme-safqa .sqz-amazon-block .ut2-gl__content { padding: 0 2px !important; } /* Price: compact bold, no extra vertical gap */ body.theme-safqa .sqz-amazon-block .ut2-gl__price-wrap { padding-top: 4px !important; margin-top: auto !important; } body.theme-safqa .sqz-amazon-block .ut2-gl__price .ty-price-num, body.theme-safqa .sqz-amazon-block .ut2-gl__price bdi { font-size: 14px !important; font-weight: 700 !important; color: #0f1111 !important; } /* "Show more" button — tighter margin in this block */ body.theme-safqa .sqz-amazon-block ~ .ty-center, body.theme-safqa .sqz-amazon-block + .ty-center { margin-top: 8px !important; } /* RTL */ html[dir="rtl"] body.theme-safqa .sqz-amazon-block .ty-mainbox-title { text-align: right !important; }