height so empty-state doesn't reflow when a message lands. */ .ps-3 { padding-inline-start: 0.75rem; } .ps-4 { padding-inline-start: 1rem; } .pe-1 { padding-inline-end: 0.25rem; } @media (min-width: 768px) { .md\:ps-6 { padding-inline-start: 1.5rem; } .md\:pe-2 { padding-inline-end: 0.5rem; } } .min-h-\[1\.25rem\] { min-height: 1.25rem; } /* ---- Lang-aware static spans (Phase 3.5.4) ---------------------------- * For static markup that ships both AR + EN copy in the same DOM * (e.g. header partial utility links). The active language is set on * by templateEngine.updateDocumentAttributes(); these * rules show only the matching copy. Use sparingly — anything more * complex than 1-2 strings should route through Se3roKamI18n or a JS * renderer (nav.js, languageSwitcher.js) instead. */ [lang="ar"] .se3ro-en, [lang="en"] .se3ro-ar { display: none; } /* ---- Phase 0.5: Odometer digits render LTR inside RTL body ------------- * Parents set dir="ltr" per docs/UI-RTL-CONVENTIONS.md §6; this belt-and- * suspenders rule enforces it for Odometer's internal digit spans. */ .odometer, .odometer-inside, .odometer-digit, .odometer-digit-spacer, .odometer-digit-inner, .odometer-ribbon, .odometer-ribbon-inner, .odometer-value, .odometer-formatting-mark { direction: ltr !important; unicode-bidi: embed; } /* Tier-0 promo slider dims (Phase 0.5 header). * * Bug 2026-04-28: Swiper in vertical mode under Chrome mobile-device * emulation (Android UA → .swiper-android code path) computed * style="height: 16777216px" on each .swiper-slide, pushing main 16M * px below the viewport. The JS-side fix flipped autoHeight off and * disabled loop. This belt-and-suspenders CSS rule pins slide heights * to 1.5rem regardless of any inline style Swiper still tries to set * (!important wins over inline style, which the runaway bug exploited). */ .se3ro-promo-slider { height: 1.5rem; } .se3ro-promo-slider .swiper-wrapper { height: 1.5rem !important; } .se3ro-promo-slider .swiper-slide { height: 1.5rem !important; display: flex; align-items: center; justify-content: center; } /* ---- Phase 1: Swiper + carousel RTL fixes ------------------------------ * Swiper auto-mirrors when its root has dir="rtl", but the custom nav * buttons Cashora uses (.custombutton-prev / .custombutton-next, and the * .customers-button-* variants) are positioned with absolute left/right — * flip them for RTL so "prev" sits on the visually-start (right) side. */ html[dir="rtl"] .custombutton-prev, html[dir="rtl"] .customers-button-prev { left: auto; right: 0; } html[dir="rtl"] .custombutton-next, html[dir="rtl"] .customers-button-next { right: auto; left: 0; } /* Swiper prev/next content icons are chevrons; invert their X for RTL */ html[dir="rtl"] .swiper-button-prev i, html[dir="rtl"] .swiper-button-next i, html[dir="rtl"] .custombutton-prev i, html[dir="rtl"] .custombutton-next i { transform: scaleX(-1); } /* Mobile sidebar: Cashora slides in from the visual-left (translateX(-100%)); * for the Phase 0 Arabic sidebar (end-[-100%]), this is already handled by * Tailwind logical positioning. Any Cashora inline markup that still uses * left-[-100%] gets mirrored here. */ html[dir="rtl"] .mobile-sidebar.left-\[-100\%\] { left: auto; right: -100%; } html[dir="rtl"] .mobile-sidebar.left-0 { left: auto; right: 0; } /* Detail-page two-column layout (Phase B Day 8c-* responsiveness fix). * * The brand / category / store detail shells use a Cashora 12-col grid at * lg+ with a sticky col-span-4 sidebar + col-span-8 main content. The * Cashora-frozen index.css doesn't ship `max-lg:flex` / `max-lg:flex-col` * utilities, so we drive the mobile collapse via a real CSS rule on the * `.se3ro-detail-grid` class. * * < lg : flex column (sidebar stacks above main content), gap-6 * ≥ lg : the inline `lg:grid grid-cols-12 gap-6` takes over, hiding * this rule's display:flex. */ @media (max-width: 1023px) { .se3ro-detail-grid { display: flex; flex-direction: column; gap: 1.5rem; } .se3ro-detail-grid > .content-sidebar, .se3ro-detail-grid > .col-span-8 { width: 100%; } } /* ---- Wave 6: TopProductsRanked logical positioning (2026-05-01) ------- * Heart overlay (start-2), rank circle (-start-4 / lg:-start-5), and * discount badge (end-10 / xxl:start-10) on the side banner. The bundle * ships zero logical positioning utilities, so each one lands here. * * Also re-introduces the tier-badge / Flash Deal pill paddings as logical * (ps-1/ps-2/pe-2/pe-4 + md: variants) — Cashora source uses pl-/pr- * directional, our renderer flips them to mirror in Arabic. */ .start-2 { inset-inline-start: 0.5rem; } .-start-4 { inset-inline-start: -1rem; } .end-4 { inset-inline-end: 1rem; } .end-10 { inset-inline-end: 2.5rem; } @media (min-width: 640px) { .sm\:end-10 { inset-inline-end: 2.5rem; } } @media (min-width: 1024px) { .lg\:-start-5 { inset-inline-start: -1.25rem; } } @media (min-width: 1400px) { .xxl\:start-10 { inset-inline-start: 2.5rem; } } /* ---- Wave 8 — ProductsWithStores arbitrary values (2026-05-02) ------- * Cashora reference at home-2.html:4895-5247 uses these arbitrary-value * tokens that aren't in the frozen bundle. Renderer is at * assets/js/widgets/products-with-stores.js. * * - top-[9px] / start-[-3px] : the 8px PRIME-pill notch dot, anchored * slightly off the pill's top-start corner. start-[-3px] uses an * escaped-bracket-and-minus selector form that matches Tailwind JIT. * - top-[25%] / sm:top-[25%] : the discount badge's vertical anchor on * sm+. Below sm, the badge anchors to bottom-1 (already in bundle). * - size-30 / lg:size-30 : 7.5rem (120px) discount badge at lg+. * Cashora hard-codes this; size-* utilities cap at 96 in default Tailwind. */ .top-\[9px\] { top: 9px; } .start-\[-3px\] { inset-inline-start: -3px; } .top-\[25\%\] { top: 25%; } @media (min-width: 640px) { .sm\:top-\[25\%\] { top: 25%; } } .size-30 { width: 7.5rem; height: 7.5rem; } @media (min-width: 1024px) { .lg\:size-30 { width: 7.5rem; height: 7.5rem; } } .ps-1 { padding-inline-start: 0.25rem; } .ps-2 { padding-inline-start: 0.5rem; } .pe-2 { padding-inline-end: 0.5rem; } .pe-4 { padding-inline-end: 1rem; } @media (min-width: 768px) { .md\:ps-2 { padding-inline-start: 0.5rem; } .md\:pe-4 { padding-inline-end: 1rem; } } /* ---- Wave 6 polish: side-banner CTA height (2026-05-01) -------------- * .btn-primary2 from the Cashora bundle hard-codes height:100%. That's * fine when the button sits in a content-sized parent (Cashora's home-2 * had a tall woman image filling the wrapper, so 100% resolved to a * normal size). After we removed img3.png and added h-full to the * side-banner-wrapper, height:100% resolves to the full stretched * column height (~480px at xxl) and the CTA elongates into a giant * pill. Scoped override pins the CTA to content-height inside the * side banner only — global .btn-primary2 behaviour is untouched. */ .side-banner-wrapper .btn-primary2 { height: auto; } /* ---- rtl: variant unblock (Wave 6 — discovered 2026-05-01) ------------ * Bundle compiles no rtl: variants. Several widgets since Wave 2 have * used to flip directional * arrows in Arabic — that class has been inert (no compiled selector, * no rule here) until this single rule. Adding it retroactively * activates See-All arrow direction in TrendingProducts, ExclusiveOffers, * TopStores, TopProductsRanked, and any future widget using the pattern. */ html[dir="rtl"] .rtl\:rotate-180 { transform: rotate(180deg); } /* ---- Wave 6 sweep audit (2026-05-02) --------------------------------- * Logical and rtl:/ltr: classes used in widget renderers + page partials * that had no rule in this file. Each entry below is paired with the * file that introduced the dependency, so future audits can keep the * source of truth straight. * * - start-0 / end-0 — CategorySlider prev/next arrows + header dropdown. * - start-4 — HeroBanner discount-ribbon (top-4 start-4). * - end-[-100%] — mobile-sidebar offscreen state in header.html. * Replaces Cashora's directional left-[-100%]; the * legacy `html[dir="rtl"] .mobile-sidebar.left-...` * overrides above this block are dead code if no * markup still uses them, but kept for defence. * - pe-3 — HeroBanner ribbon (ps-2 pe-3). * - md:ps-5 — footer.html social icons rail (ps-3 md:ps-5). * - ps-6 — header.html search bar (ps-6 pe-2). * - rtl:right-3 / ltr:left-3 — ExclusiveOffers tier ribbon (left-3 in * LTR, right-3 in RTL). Cashora bundle ships .left-3 * and .right-3 but no rtl:/ltr: variants. */ .start-0 { inset-inline-start: 0; } .start-4 { inset-inline-start: 1rem; } .end-0 { inset-inline-end: 0; } .end-\[-100\%\] { inset-inline-end: -100%; } .pe-3 { padding-inline-end: 0.75rem; } .ps-6 { padding-inline-start: 1.5rem; } @media (min-width: 768px) { .md\:ps-5 { padding-inline-start: 1.25rem; } } html[dir="rtl"] .rtl\:right-3 { right: 0.75rem; } html:not([dir="rtl"]) .ltr\:left-3 { left: 0.75rem; } /* ---- CategorySlider min-slide-width (2026-05-02) --------------------- * Bug user-reported as "swiper not working in /ar-eg/". The CategorySlider * widget (`.hero-slider` class) renders each tile with `!w-auto` so width * is determined by the label content. Arabic labels render measurably more * compactly than the English equivalents — under the same 11-categories * dataset, AR slides total ~1463px and EN slides total ~1775px. With a * 1704px container, EN overflows (Swiper unlocks pagination, dots show, * swipe works) while AR fits entirely (Swiper auto-applies * `swiper-pagination-lock`, dots hidden, swipe is a no-op). * * Forcing a min-width per slide ensures the strip overflows in both * directions regardless of label length, so Swiper always has somewhere * to swipe to. 160px is wide enough to push the 11-category total past * the lg viewport (160 × 11 = 1760 > 1704) without making short labels * look awkwardly padded. */ .hero-slider .swiper-slide { min-width: 160px; } /* ---- Newsletter focus ring — intentionally NOT styled (2026-05-01) ----- * Both newsletter inputs (homepage `.newsletter-form` + footer * `#se3ro-newsletter-form`) ship `outline-none` and have no replacement * focus indicator. A pre-launch audit flagged this as an a11y gap and * a custom box-shadow ring landed briefly, but the inner rounded * rectangle showed through Chrome's autofill-focus state and broke the * pill silhouette — divergence from the Cashora reference, which shows * a clean borderless caret with no ring. Decision: strict Cashora * visual parity wins here. Do NOT re-add a focus ring without a paired * design decision on the pill aesthetic. */ /* ========================================================================= * Price-comparison row layout (Phase D pre-launch refinement — 2026-05-05) * * The Cashora-frozen index.css bundle does NOT include the modern * Tailwind utilities `md:flex-row`, `md:flex-1`, `md:flex-shrink-0`. * Confirmed via getComputedStyle audit on /ar-eg/product/...: * `flex-direction: column` at a 1710px viewport when the markup uses * `flex flex-col md:flex-row`. The pattern Cashora ships and that the * bundle DOES carry is `flex flex-wrap md:flex-nowrap` — verified in * deals-details.html and home-3.html. * * Rather than fight the purge per-utility, this section defines a small * `.se3ro-price-row` component that owns the responsive layout for the * product-detail price-comparison table. The JS template applies the * class; the layout rules below take care of the breakpoints. * * Behaviour: * < 768px : Logo + name block on top, price + CTA on next line. * CTA pushes to the row end via justify-between on the * inner action container (set by the markup, not here). * >= 768px : Logo + name fills the row start (flex-grow), price + * CTA pinned to the row end at fixed width. * ========================================================================= */ .se3ro-price-row { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; } .se3ro-price-row__info, .se3ro-price-row__action { width: 100%; } @media (min-width: 768px) { .se3ro-price-row { flex-direction: row; align-items: center; gap: 1rem; } .se3ro-price-row__info { flex: 1 1 auto; min-width: 0; width: auto; } .se3ro-price-row__action { flex: 0 0 auto; width: auto; justify-content: flex-end; } } /* ========================================================================= * Related Products carousel — visual parity with Cashora stores-slider * (Phase D pre-launch refinement, follow-up — 2026-05-05) * * The first transcription pass left three visible regressions vs the * Cashora reference (image squashed flat at 270×48px, pagination dots * defaulting to Swiper's iOS-blue, slides not honouring slidesPerView * "auto" on mobile). All three are rooted in classes/utilities that * either aren't in the frozen index.css bundle or are styled by the * Swiper bundle's defaults rather than by Cashora. * * Real CSS here keeps the JS template free of arbitrary-value Tailwind * classes that the bundle wouldn't carry anyway. * ========================================================================= */ /* Image: cap height + center, preserve natural aspect. Without this the * Tailwind `max-h-full object-contain` was producing 270×48 stretches * (parent f-center collapsed the height while h-[192px] gave the * container space — the img used "auto" sizes and lost vertical room). */ .se3ro-related-img { max-height: 156px; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: center; } /* Title: 2-line clamp + min-height so cards line up at the bottom even * when one product has a one-line name and another wraps to two. */ .se3ro-related-title { min-height: 2.8rem; } @media (min-width: 768px) { .se3ro-related-title { min-height: 3.2rem; } } /* Slide widths for slidesPerView:'auto'. On mobile Swiper picks the * width from the slide itself; without this the slide would be 100% of * the wrapper which kills the "next card peeks" affordance the carousel * exists for. 85vw - 16px gives a clear peek without crushing content. */ .related-stores-slider .swiper-slide { width: 85%; max-width: 320px; height: auto; } @media (min-width: 576px) { .related-stores-slider .swiper-slide { width: auto; max-width: none; } } /* Pagination dots — match Cashora's compact dark dots (iOS-blue defaults * are a Swiper-bundle styling that overrides the visual we want). * Cashora puts the pagination element in a sibling `

` * AFTER the swiper wrapper (home-3.html line 5740-5742) — we mirror that * structure with a `.related-stores-pagination` class on the dots div. */ .related-stores-pagination { /* Swiper bundle's default `.swiper-pagination` rule sets * `position: absolute` — fine when the element lives inside the * swiper container, but our pagination is a sibling now (matching * home-3.html line 5740-5742 where Cashora puts it in a separate * `
`). Without this override the dots fly off * to the top of the page (verified live: y = -1258px). */ position: relative !important; text-align: center; } .related-stores-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 8px; height: 8px; background: #d1d5db; /* n300-ish */ opacity: 1; margin: 0 4px !important; transition: background 200ms ease, transform 200ms ease; } .related-stores-pagination .swiper-pagination-bullet-active { background: #134d3b; /* primary green */ transform: scale(1.2); } /* `mt-15` (60px) isn't in standard Tailwind v3 scale — Cashora ships it * via their custom config. We replicate the rule here so the * `
` wrapper around the swiper pagination renders * with the same gap as Cashora. */ .mt-15 { margin-top: 60px; } /* Make sure the slider wrapper has overflow visible hover-shadow space * so the hover:border-secondary glow on cards isn't clipped at the * carousel edge. */ .related-stores-slider { overflow: hidden; padding-bottom: 4px; } /* Group B (2026-05-05) — the Cashora-purist pass restored: * - heart icon position via Tailwind `top-2 right-2` (in the bundle, * verified live via the reference's own usage) * - bare brand-circle overlay via `size-12 md:size-15 rounded-full * absolute -bottom-6 right-4` Tailwind classes * - body-div uses `mt-4 md:mt-8` directly (clears the -bottom-6 * overlay); space-y-3 on the card outer handles cross-child rhythm * Therefore the previous `.se3ro-related-fav`, `.se3ro-related-store-logo` * + `__fallback` real CSS rules and the `.se3ro-related-slide` * margin-top !important hack are all gone — the bundle covers the * positions and Cashora's own `space-y-3` covers the spacing. * * `size-15` and the brand-circle `-bottom-6 right-4` ARE in the * Cashora bundle (verified by their direct usage in home-3.html * line 5224); only `size-15` needs an RTL override below since * Tailwind's `right-4` doesn't auto-flip. */ [dir="rtl"] .related-stores-slider .h-\[192px\] > .absolute.-bottom-6.right-4 { right: auto; left: 16px; } [dir="rtl"] .related-stores-slider .h-\[192px\] > .absolute.top-2.right-2 { right: auto; left: 8px; } /* ============================================================ * FIX-07 (2026-05-10) — Cashora fidelity pass. * * Backfills Tailwind arbitrary utilities that the JIT-compiled * Cashora bundle silently drops because they only appear inside * dynamic JS template strings. Same rationale as the earlier * Wave 4 / Wave 7 backfills: no Tailwind build step on the * public site, so anything not in the static Cashora HTML must * be hand-rolled here. * ============================================================ */ /* ---- Arbitrary heights / widths used by widget cards ---- */ .h-\[132px\] { height: 132px; } .h-\[180px\] { height: 180px; } .h-\[200px\] { height: 200px; } .h-\[220px\] { height: 220px; } .h-\[340px\] { height: 340px; } .md\:h-\[132px\] { /* default for sm */ } @media (min-width: 768px) { .md\:h-\[132px\] { height: 132px; } .md\:h-\[200px\] { height: 200px; } .md\:h-\[340px\] { height: 340px; } } .w-\[600px\] { width: 600px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[636px\] { max-width: 636px; } .max-w-\[856px\] { max-width: 856px; } .lg\:max-w-\[300px\] { /* default */ } @media (min-width: 1024px) { .lg\:max-w-\[300px\] { max-width: 300px; } } .md\:w-\[600px\] { /* default */ } @media (min-width: 768px) { .md\:w-\[600px\] { width: 600px; } } /* ---- aspect-square: countdown-promo gallery tiles ---- */ .aspect-square { aspect-ratio: 1 / 1; } /* ---- backdrop-blur-sm: countdown-promo digit panels ---- */ .backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* ---- text sizes used by widgets ---- */ .text-\[10px\] { font-size: 10px; line-height: 1.2; } .text-\[32px\] { font-size: 32px; line-height: 1.1; } .lg\:text-\[32px\] { /* default */ } @media (min-width: 1024px) { .lg\:text-\[32px\] { font-size: 32px; line-height: 1.1; } } /* ---- positional arbitrary values ---- */ .top-\[50\%\] { top: 50%; } .-top-\[50\%\] { top: -50%; } .-left-\[25\%\] { left: -25%; } .-right-\[25\%\] { right: -25%; } /* ---- line-height utilities used in copy ---- */ .leading-\[160\%\] { line-height: 160%; } .leading-\[180\%\] { line-height: 180%; } /* ============================================================ * .prose typography (FIX-07 consolidation). * * Used by article/content pages + RichContent widget. RTL-aware * list indents — Tailwind .pl-6 used inside admin-authored prose * doesn't flip in RTL, so we mirror with logical padding-inline- * start. Other rules match what article.html previously had as * inline