/* ========================================================================== TYPOGRAPHY — Readex Pro, self-hosted -------------------------------------------------------------------------- Before this project the store had NO Arabic font at all: every family the theme configured was Latin-only (Lato, Open Sans, Arial), so on an entirely Arabic storefront none of them applied and every visitor saw whatever face their device happened to ship — different on iPhone, Android and Windows. Readex Pro was chosen from a specimen of five set in the shop's own product names at real card size. It is a contemporary face drawn for Arabic and Latin together rather than a Latin design with Arabic bolted on, which is why the two scripts hold the same weight and colour on a line mixing a name with a price. ONE FILE PER SCRIPT, NOT ONE PER WEIGHT. Readex Pro is a VARIABLE font: Google serves byte-identical files for 400 and 600 (verified by md5), so shipping both would have doubled the payload for nothing. Declared with a weight RANGE, the single file covers every weight used. 53 KB total. Self-hosted, not linked from Google: a CDN link makes the storefront's appearance depend on a third party being reachable and discloses every visitor's IP to it. The theme's own Google Fonts request is removed in class-drop-google-fonts.php. Paths are RELATIVE. This stylesheet lives under plugins/ on staging and mu-plugins/ on production; a relative URL resolves in both. ========================================================================== */ @font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 100 700; /* variable axis; only 400 and 600 are used */ font-display: swap; src: url('../fonts/readexpro-400-arabic.woff2') format('woff2'); /* Arabic subset */ unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('../fonts/readexpro-400-latin.woff2') format('woff2'); /* Latin subset */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Woodmart drives its typography from these variables, so overriding them reaches the whole theme — headings, body, header elements — without chasing individual selectors. Two weights only: a third is usually someone avoiding a hierarchy decision. */ :root, body { --wd-text-font: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif; --wd-title-font: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif; --wd-header-el-font: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif; --wd-alternative-font: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif; --wd-entities-font: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif; } body, input, button, select, textarea, .wd-entities-title, h1, h2, h3, h4, h5, h6 { font-family: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif; } /* Prices sit in a grid and must align on the decimal. Cheapest typographic win on the whole site. Arabic is NEVER letter-spaced — it breaks the joins between letters — so no tracking is introduced anywhere here. */ .price, .wrap-price, .amount, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /** * Storefront visual direction — myroork.com * * Implements the palette + component system approved in * docs/design/proposal.html (gulf-water teal anchor, warm sand ground, a * single brass CTA colour, coral reserved for sale badges). CSS only: no * markup/template changes. Scoped to override Woodmart cleanly, RTL-first * (this store is dir="rtl" — logical properties throughout). * * See docs/design/proposal.html for the rationale and the full palette. */ :root { /* Ground + ink — warm sand, never the current pale blue-grey */ --myr-sand: #F5F1E8; --myr-sand-2: #EFE9DC; --myr-surface: #FFFDF9; --myr-ink: #0A2226; --myr-ink-2: #3B5359; /* Darkened from the proposal's #6E858A (3.46:1 on sand — fails AA for * text) to #586A6E, which clears 4.5:1 on both sand and surface. See the * contrast measurements in the delivery report. */ --myr-ink-3: #586A6E; --myr-line: #DCD3C2; /* Gulf water — the anchor */ --myr-deep: #0F3B42; --myr-deep-2: #14515A; --myr-aqua: #2E8B8B; /* Brass — the single CTA colour. --myr-brass is the proposal's swatch * value, kept for decorative (non-text) accents such as the heading * underline. Measured contrast of white text on #C07C2C is only 3.41:1 — * below AA for normal-size button labels — so actual button fills use * the darker --myr-brass-btn (5.0:1 with white) instead. */ --myr-brass: #C07C2C; --myr-brass-btn: #9A6323; --myr-brass-ink: #8A5514; /* Semantic — deliberately separate from the CTA colour */ --myr-coral: #C4442E; --myr-good: #2F7D5B; --myr-shadow-1: 0 1px 2px rgba(10, 34, 38, .06), 0 2px 8px rgba(10, 34, 38, .05); --myr-shadow-2: 0 2px 4px rgba(10, 34, 38, .07), 0 12px 28px -8px rgba(10, 34, 38, .18); --myr-r-s: 6px; --myr-r-m: 12px; } /* ── Ground ───────────────────────────────────────────────────────────── */ /* Woodmart's own root variables are set inline in with normal * specificity; !important guarantees this stylesheet wins regardless of * enqueue order relative to that inline block. */ :root { --wd-primary-color: var(--myr-deep) !important; --btn-default-bgcolor: var(--myr-surface) !important; --btn-default-bgcolor-hover: var(--myr-sand-2) !important; --btn-default-color: var(--myr-deep) !important; --btn-default-color-hover: var(--myr-deep) !important; --btn-accented-bgcolor: var(--myr-brass-btn) !important; --btn-accented-bgcolor-hover: var(--myr-brass-ink) !important; --btn-accented-color: #fff !important; --btn-accented-color-hover: #fff !important; } body { background-color: var(--myr-sand); color: var(--myr-ink); } /* The pale blue-grey ground lives on this wrapper (Woodmart's page-background * option), not on — override it directly. */ body .wd-page-wrapper.website-wrapper, body .wd-page-content.main-page-wrapper { background-color: var(--myr-sand) !important; } /* ── Focus visibility (a11y) ──────────────────────────────────────────── */ /* Woodmart already ships a site-wide :focus-visible rule (style-rtl.min.css) * driven by these custom properties, applied with !important. Retinting the * variables — rather than writing a competing selector — reaches every * focusable element the theme already covers, and actually wins the * cascade against its own !important declaration. */ :root { --wd-otl-color: var(--myr-aqua) !important; --wd-otl-color-scheme: var(--myr-aqua) !important; --wd-otl-width: 3px !important; --wd-otl-style: solid !important; } /* ── Buttons: brass CTA everywhere Woodmart marks "accented" ─────────── */ .button, .add_to_cart_button, .single_add_to_cart_button, a.added_to_cart, input[type="submit"], .wd-add-btn a, .checkout-button, .wc-proceed-to-checkout a.checkout-button, .woocommerce-form-login button, .woocommerce-form-register button { background-color: var(--myr-brass-btn) !important; border-color: var(--myr-brass-btn) !important; color: #fff !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background-color .15s ease, transform .12s ease; } .button:hover, .add_to_cart_button:hover, .single_add_to_cart_button:hover, input[type="submit"]:hover, .wd-add-btn a:hover, .checkout-button:hover { background-color: var(--myr-brass-ink) !important; border-color: var(--myr-brass-ink) !important; } .button:active, .add_to_cart_button:active, .single_add_to_cart_button:active, .wd-add-btn a:active { transform: translateY(1px); } /* Disabled state (e.g. "Update cart" before the quantity changes) must read * as unavailable, not as a muted brass — otherwise it looks like a second, * confusing call to action. */ .button:disabled, .button.disabled, .button[disabled] { background-color: var(--myr-sand-2) !important; border-color: var(--myr-line) !important; color: var(--myr-ink-3) !important; box-shadow: none; cursor: not-allowed; } /* Secondary / ghost buttons (e.g. "reset variations", quantity +/-) stay * on the deep-teal ink so brass is reserved for the one primary action. */ .reset_variations, .wd-scroll-up, .quantity .plus, .quantity .minus { color: var(--myr-deep-2); } /* ── Product cards: real elevation, RTL-safe hover lift ─────────────── */ .wd-product-wrapper { background-color: var(--myr-surface); border-radius: var(--myr-r-m); box-shadow: var(--myr-shadow-1); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .wd-product-wrapper:hover, .wd-product:hover .wd-product-wrapper { transform: translateY(-3px); box-shadow: var(--myr-shadow-2); } .wd-product-thumb { border-radius: var(--myr-r-m) var(--myr-r-m) 0 0; overflow: hidden; background: linear-gradient(135deg, var(--myr-sand-2), var(--myr-surface)); } .product-element-bottom { padding-inline: 4px; } /* ── Sale badges: coral, not red-on-green ────────────────────────────── */ body .product-labels .product-label.onsale, body span.onsale { background-color: var(--myr-coral); color: #fff; border-radius: var(--myr-r-s); box-shadow: var(--myr-shadow-1); } /* ── Prices: tabular numerals, sale price prominent, muted strike ──── */ .price, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; } .price { color: var(--myr-ink); font-weight: 700; } .price del { color: var(--myr-ink-3); font-weight: 400; opacity: 1; /* logical margin: space goes on the "start" side, correct in RTL */ margin-inline-start: .5em; } .price ins { color: var(--myr-ink); font-weight: 700; text-decoration: none; } /* ── Section headings: stronger hierarchy than the current small type ── */ .woodmart-title-container.title, .wd-el-title.title { color: var(--myr-deep); font-weight: 700; position: relative; padding-bottom: .3em; } .woodmart-title-container.title::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--myr-brass); } .wd-entities-title { color: var(--myr-ink); } .wd-entities-title a { color: inherit; } /* ── Cart table: align quantities/prices, keep RTL column order intact ── */ .woocommerce-cart-form .product-price, .woocommerce-cart-form .product-subtotal, .woocommerce-cart-form .product-quantity { font-variant-numeric: tabular-nums; } .cart-collaterals .cart_totals .amount { font-variant-numeric: tabular-nums; color: var(--myr-ink); } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .wd-product-wrapper, .button, .add_to_cart_button, .single_add_to_cart_button { transition: none !important; } .wd-product-wrapper:hover, .wd-product:hover .wd-product-wrapper { transform: none; } } /* ========================================================================== PRODUCT CARD — uniform geometry -------------------------------------------------------------------------- Observed on staging with real photography: cards in the same row ended at different heights, so the "add to cart" buttons sat on a ragged line and the grid read as broken. Two independent causes, both fixed here: 1. Titles run 1-3 lines. Nothing reserved space for the longest, so every card below the title shifted by a different amount. 2. Product photographs have wildly different aspect ratios — square packs, long rods, wide lure sets. The image box took each image's own shape. The fix is a fixed-ratio image box plus a two-line title reservation, with the CTA pushed to the bottom of whatever space remains. Cards in a row then share one height and one baseline for every element. `contain`, not `cover`: fishing tackle is long and thin, and `cover` would crop the ends off rods and jigs — the part that identifies the product. ========================================================================== */ /* Stretch each grid cell so its card can fill the row's height. */ .wd-products .wd-product, .wd-products-element .wd-product, ul.products > li.product { display: flex; } .wd-product > .wd-product-wrapper, .wd-product > .product-wrapper { display: flex; flex-direction: column; width: 100%; } .wd-product .wd-product-card-bg { display: flex; flex-direction: column; flex: 1 1 auto; } /* One shape for every photograph, whatever its native ratio. */ .wd-product .wd-product-thumb, .wd-product .product-element-top { aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--myr-surface); } .wd-product .wd-product-thumb img, .wd-product .product-element-top img { width: 100%; height: 100%; object-fit: contain; object-position: center; } /* The lower half becomes the flexible part, so the CTA can be pinned. */ .wd-product .product-element-bottom { display: flex; flex-direction: column; flex: 1 1 auto; } /* Reserve two lines for the title and clamp to them. Arabic product names run long; without this the tallest name in a row set the height for that card alone. */ .wd-product .wd-entities-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.4em); line-height: 1.4; } /* Whatever space is left, the button takes the bottom of it. */ .wd-product .wd-add-btn, .wd-product .wd-add-btn-replace { margin-top: auto; } /* -------------------------------------------------------------------------- Top bar — the stock Woodmart blue (#3b5bdb) was left untouched by the first pass and fought everything below it: a saturated cool blue directly above a warm sand ground, with brass CTAs. Re-grounded in the palette's own deep teal so the eye travels down the page instead of stopping at the band. -------------------------------------------------------------------------- */ .whb-top-bar .whb-color-dark, .whb-top-bar-inner, .whb-top-bar { background-color: var(--myr-deep) !important; } /* ========================================================================== HOMEPAGE DENSITY -------------------------------------------------------------------------- The homepage is 24 stacked sections and runs past 16,000px on a phone — roughly sixteen screens of scrolling. Twelve of those sections are subcategory carousels that duplicate category pages which already exist. Nothing is removed here. The goal is to make the same content short enough to scan, so that deciding what to remove becomes optional rather than urgent. ========================================================================== */ /* --- 1. Masonry off ------------------------------------------------------ Five homepage grids use Woodmart's masonry, which is isotope: it sets `position:absolute` plus left/top on every item and an explicit pixel height on the container, all inline. CSS alone loses to that, so the positioning is neutralised as well as the layout replaced. This is not only cosmetic. On a phone, isotope's RTL coordinates push the start-side column PARTLY OFF SCREEN — those cards are clipped by the viewport edge and cannot be read or tapped. Masonry also deliberately staggers card heights, which reads as the ragged grid we just finished straightening everywhere else. `position: static` does the real work: left/top are ignored on a static element, so isotope's coordinates stop applying without having to out-specify each one. `padding: 0` matters as much. Woodmart's `wd-col` carries horizontal padding that its own flex layout compensates for. Left in place inside a grid track it shrinks each card to roughly 130px on a 390px screen, with titles truncated to two words and the button label collapsed to an ellipsis. Spacing comes from `gap` instead. */ .wd-products.grid-masonry { display: grid !important; grid-template-columns: repeat(var(--wd-col-lg, 4), minmax(0, 1fr)); gap: var(--wd-gap-lg, 30px); height: auto !important; } .wd-products.grid-masonry > .wd-product { position: static !important; transform: none !important; inset: auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } @media (max-width: 1024px) { .wd-products.grid-masonry { grid-template-columns: repeat(var(--wd-col-md, 3), minmax(0, 1fr)); } } @media (max-width: 768.98px) { .wd-products.grid-masonry { grid-template-columns: repeat(var(--wd-col-sm, 2), minmax(0, 1fr)); gap: var(--wd-gap-sm, 10px); } } /* --- 2. Mobile carousels show 2.1 cards --------------------------------- At exactly two cards a rail is indistinguishable from a short two-column grid, so nobody swipes and the rest of the row is never seen. Cutting the third card at about a tenth of the viewport makes the overflow visible without shrinking the two real cards below comfortable tapping size. Woodmart already drives carousel item width from --wd-col-sm, so this is a single variable rather than a layout rewrite. */ @media (max-width: 768.98px) { .wd-carousel-wrap:has(.wd-product), .wd-carousel:has(.wd-product) { --wd-col-sm: 2.1; } } /* --- 3. A single product must not span a four-column row ----------------- Three sections contain exactly one product but keep the multi-column layout, leaving roughly 70-75% of the row empty. Constrain the track instead of stretching the card. */ .wd-products:has(> .wd-product:only-child) { grid-template-columns: minmax(0, 300px) !important; } /* --- 4. Vertical rhythm -------------------------------------------------- Section padding was tuned for a page with a handful of sections, not twenty-four. Tightened, and tightened further on phones where the cost of whitespace is paid in scrolling. */ .wd-products-element, .wd-products-element + .wd-products-element { margin-bottom: 24px; } @media (max-width: 768.98px) { .vc_row .wpb_column > .vc_column-inner { padding-top: 6px; padding-bottom: 6px; } .wd-products-element { margin-bottom: 14px; } } /* ========================================================================== MOBILE: 2.15 CARDS PER VIEW, AND SMALLER TITLES ========================================================================== */ /* --- 1. The peek actually applying this time ----------------------------- Woodmart prints the column count as an INLINE style on each carousel: style="--wd-col-lg:3;--wd-col-md:3;--wd-col-sm:2" An inline custom property beats any stylesheet rule regardless of specificity, so the earlier override was silently ignored and the rails still showed exactly 2. `!important` is the only thing that wins here — it is load-bearing, not decoration, so do not "tidy" it away. Item width comes from the theme's own formula, flex: 0 0 calc(100% / var(--wd-col)) which accepts a fraction, so 2.15 yields 46.5% and the third card is cut at roughly a seventh of the viewport: enough to read as "there is more here" without stealing width from the two real cards. */ @media (max-width: 768.98px) { .wd-carousel:has(.wd-product), .wd-carousel-wrap:has(.wd-product), .wd-products-element .wd-carousel { --wd-col-sm: 2.15 !important; --wd-col: 2.15 !important; } } /* --- 2. Arrows must not sit on the product ------------------------------ The prev/next buttons are large filled circles overlapping the first and last card, covering part of the photograph. With a visible peek the swipe is already discoverable, so on touch widths they step back to a quiet overlay rather than competing with the product. */ @media (max-width: 768.98px) { .wd-carousel-arrows .wd-btn-arrow, .wd-btn-arrow { width: 30px; height: 30px; background: rgba(15, 59, 66, .55); color: #fff; box-shadow: none; opacity: .75; } .wd-btn-arrow:hover { background: var(--myr-deep); opacity: 1; } } /* --- 3. Product titles are too large for a two-up grid ------------------- At 390px each card is about 175px wide. The title was inheriting a size tuned for a four-column desktop grid, so long Arabic names ate the card and pushed the price and button down. Reduced and tightened; the two-line clamp set earlier still caps the worst case. */ .wd-product .wd-entities-title { font-size: 13.5px; line-height: 1.35; min-height: calc(2 * 1.35em); font-weight: 500; } @media (max-width: 768.98px) { .wd-product .wd-entities-title { font-size: 12.5px; line-height: 1.3; min-height: calc(2 * 1.3em); } /* Keep the price prominent — it is the thing being scanned. */ .wd-product .wrap-price, .wd-product .price { font-size: 13px; } } /* ========================================================================== MOBILE: RECLAIM THE WASTED WIDTH, DROP THE ARROWS -------------------------------------------------------------------------- On a 390px screen the rails were spending roughly 60px — about 15% of the viewport — on container padding, inter-card gutters and two arrow buttons that sat on top of the products. All of it came from defaults designed for a 1440px grid. ========================================================================== */ @media (max-width: 768.98px) { /* Arrows go. With a visible 2.15 peek the swipe is self-evident, and on a touch screen nobody taps a 30px circle to page a carousel — they swipe. They were also overlapping the first and last card's photograph. */ .wd-carousel-arrows, .wd-btn-arrow, .wd-nav-arrows { display: none !important; } /* Gutters: 30px between cards is a desktop measure. 8px is enough to separate two cards that already have borders and shadows. */ .wd-carousel, .wd-carousel-wrap, .wd-products, .wd-products.grid-masonry { --wd-gap-sm: 8px !important; --wd-gap: 8px !important; } .wd-products.grid-masonry { gap: 8px !important; } /* Side padding: the theme reserves room for arrows that no longer exist. */ .wd-carousel-container, .wd-products-element, .container, .wd-rs-inner-cont { padding-inline-start: 10px !important; padding-inline-end: 10px !important; } /* Card internals were also padded for a wide card. */ .wd-product .product-element-bottom { padding-inline: 8px; } /* The CTA must never truncate. Smaller label, no ellipsis, and it may wrap to a second line rather than losing words — a button reading "إضافة إلى الـ…" tells a shopper nothing. */ .wd-product .wd-add-btn > a, .wd-product .button { font-size: 12px; padding-inline: 6px; white-space: normal; text-overflow: clip; overflow: visible; line-height: 1.3; min-height: 34px; display: flex; align-items: center; justify-content: center; } } /* --- The CTA label must never be clipped -------------------------------- The theme clips it in two places at once: `.wd-add-btn-replace > a` sets `overflow: hidden`, and the hover variants add `white-space: nowrap`. With a 2.15-card rail the card is ~135px and the label lost its last word, leaving "أضف للس…" — a button that names no action. Both the wrapper and the anchor have to be released, which is why this is `!important` on three properties rather than one tidy rule. */ @media (max-width: 768.98px) { .wd-product .wd-add-btn, .wd-product .wd-add-btn-replace, .wd-product .wd-add-btn > a, .wd-product .wd-add-btn-replace > a, .wd-product .wd-add-btn-replace > a span { overflow: visible !important; white-space: normal !important; text-overflow: clip !important; max-width: none !important; } /* Squeeze the last of the dead margin. The theme reserved room for arrows that are now hidden. */ .wd-carousel-container, .wd-products-element, .container, .wd-rs-inner-cont { padding-inline-start: 6px !important; padding-inline-end: 6px !important; } } /* ========================================================================== MOBILE, FINAL PASS: 2.2 CARDS, MINIMAL CHROME, EVERY SECTION A RAIL ========================================================================== */ @media (max-width: 768.98px) { /* 2.2 rather than 2.15 — a slightly larger sliver of the third card, which reads more clearly as "scrollable" at a glance. Still !important: the column count is printed inline on the element by the theme. */ .wd-carousel:has(.wd-product), .wd-carousel-wrap:has(.wd-product), .wd-products-element .wd-carousel { --wd-col-sm: 2.2 !important; --wd-col: 2.2 !important; } /* Page edge: 4px. The card's own border and shadow already separate it from the page, so anything more is spent for nothing on a 390px screen. */ .wd-carousel-container, .wd-products-element, .container, .wd-rs-inner-cont, .vc_row .wpb_column > .vc_column-inner { padding-inline-start: 4px !important; padding-inline-end: 4px !important; } /* Between cards: 6px. */ .wd-carousel, .wd-carousel-wrap, .wd-products, .wd-products.grid-masonry { --wd-gap-sm: 6px !important; --wd-gap: 6px !important; } .wd-products.grid-masonry { gap: 6px !important; } /* Inside the card: the theme pads for a 300px desktop card. */ .wd-product .product-element-bottom { padding: 6px 7px 8px !important; } .wd-product .wd-entities-title { margin-bottom: 3px; } .wd-product .wrap-price { margin-bottom: 5px; } /* --- Every section becomes a swipeable rail ------------------------- The static grids (العروض, باكجات, قسم الرحلات, قسم الشاطئ, متفرقات) were the only sections still stacking rows vertically, which is what made the homepage run past 16,000px. As rails they match the twelve carousels and each section costs one row instead of three. Done in CSS rather than by switching the shortcode to layout="carousel", because that is a content edit to the page and would need rebuilding in WPBakery for each of the five. This achieves the same result and is reversible by deleting a rule. */ .wd-products.grid-masonry { display: grid !important; grid-auto-flow: column !important; grid-template-columns: none !important; grid-auto-columns: calc((100% - 6px) / 2.2) !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .wd-products.grid-masonry::-webkit-scrollbar { display: none; } .wd-products.grid-masonry > .wd-product { scroll-snap-align: start; } } /* --- "Show more" link, appended to each section ------------------------- */ /* The WPBakery column this sits in does NOT inherit the page's RTL direction, so logical alignment resolved to the left edge and the link lost its first letter behind the 4px page padding. Direction is therefore stated explicitly rather than inherited — `text-align` on a block, not flex logical keywords, because that is unambiguous regardless of the parent's direction. */ .myr-more { direction: rtl; display: block; text-align: right; margin-block: 4px 20px; padding-inline: 12px; } .myr-more a { font-size: 13px; font-weight: 600; color: var(--myr-deep); border-bottom: 2px solid var(--myr-brass); padding-bottom: 2px; text-decoration: none; } .myr-more a:hover { color: var(--myr-btn); } /* --- Product name: smaller, quieter, more elegant ----------------------- The title was competing with the price for attention when it should be introducing it. Three changes, none of them just "make it smaller": weight 400, not 500 — Arabic at small sizes gains nothing from semibold and loses the openness of its counters; a slightly muted ink rather than full black, so the price (which stays full-strength and bold) becomes the strongest thing in the card; more line-height, not less — tight leading is what makes dense Arabic feel cramped, and two short lines with air read as considered. No letter-spacing anywhere: it severs the joins between Arabic letters. */ .wd-product .wd-entities-title { font-size: 12.5px; font-weight: 400; line-height: 1.55; min-height: calc(2 * 1.55em); color: var(--myr-ink-2); } .wd-product .wd-entities-title a { color: inherit; } @media (max-width: 768.98px) { .wd-product .wd-entities-title { font-size: 11.5px; line-height: 1.5; min-height: calc(2 * 1.5em); } /* The price now carries the card. */ .wd-product .wrap-price, .wd-product .price { font-size: 13px; font-weight: 700; color: var(--myr-ink); } } /* Section headings need a little more room than the cards do. The 4px page padding is right for a rail that should bleed to the edge, but it leaves a title sitting hard against the screen. */ @media (max-width: 768.98px) { .wd-title-wrapp, .woodmart-title-container, .title-wrapper { padding-inline: 12px !important; } } /* ========================================================================== TYPOGRAPHY, ACTUALLY APPLIED -------------------------------------------------------------------------- Measured with getComputedStyle on the live page rather than judged by eye: body family 'Readex Pro' <- applied --wd-title-font Arial <- NOT applied title family Arial <- product names were never 'Readex Pro' Woodmart prints its font variables in an INLINE