/* ========================================================================== Herbelo — storefront stylesheet Design language: apothecary/pharmacy rather than soft-wellness. Crisp hairlines and small radii instead of pillowy cards; one native system font throughout (weight/size carry hierarchy, not typeface) with mono reserved for data — prices, barcodes, quantities; neutrals biased toward the brand green sampled from the logo. Light-only by design — product photography assumes a white ground. ========================================================================== */ /* Noto Sans Arabic — self-hosted (not Google Fonts CDN), Arabic subset only. The Latin-subset files (400/600/700-latin.woff2) were removed: Latin characters within Arabic-direction text (brand names, prices, numbers) fall back to the next font in the --sans stack instead — visually indistinguishable from Noto's own Latin glyphs in practice, so keeping them was ~32KB of dead weight (3 files, ~10.7KB each) on every Arabic page load for no visible benefit. Replaces an earlier attempt at IBM Plex Sans Arabic + three alternates (Cairo/Tajawal/Almarai) — all four removed (files deleted, these @font-face rules replaced) in favor of settling on this one. Self-hosted rather than linked from fonts.googleapis.com so there's no third-party DNS/TLS round-trip on every first visit, and so it's cached by the exact same LiteSpeed/CDN path as every other theme asset. font-display: swap — text renders immediately in the fallback stack and re-flows once this loads, rather than staying invisible (font-display: block) until it does. STATIC per-weight instances (400/600/700 — the weights actually used site-wide per a grep of font-weight declarations; 500 dropped, unused enough to just fall back to 400), not Google's default variable font. Confirmed live: the variable file covers the full 100–900 range in one ~166KB download, paid on every page regardless of which weight(s) that page actually renders. Forcing static delivery (an old-Chrome User-Agent makes Google's API fall back to per-weight instances instead) means each file is ~50KB, and — since @font-face is only ever fetched per weight actually used on a given page, not the whole family — a typical page using 1–2 weights now transfers less than half of what the always-166KB variable file cost regardless. Flagged by a real PageSpeed Insights mobile run on the product page after the font was first added. */ @font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-arabic-400-arabic.woff2") format("woff2"); 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; } @font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-arabic-600-arabic.woff2") format("woff2"); 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; } @font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-arabic-700-arabic.woff2") format("woff2"); 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; } :root { /* Ground + neutrals, biased green so they read as chosen, not inherited */ --paper: #ffffff; --mist: #f1f4ef; --mist-deep: #e4eae1; --hairline: #d3dbd0; --stone: #676e66; --ink: #101a13; /* Brand green, hue-matched to the Herbelo logo mark (#A5B183, ~76° hue). The logo's own sage tone is too light for AA text/button contrast (~2.3:1 on white), so --leaf keeps its hue but is darkened/saturated to clear 4.5:1; --leaf-logo is the raw sampled swatch for decorative use. */ --leaf-logo: #a5b183; --leaf: #55642b; /* 6.47:1 vs white */ --leaf-deep: #3e4a1c; --leaf-wash: #f0f3e7; /* Single warm signal: price, savings, low stock. Never decorative. */ --amber: #b25a08; /* WCAG AA vs white: 4.82:1 */ --amber-deep: #a35204; /* for text on --amber-wash specifically: 4.96:1 — --amber itself only reaches 4.29:1 there */ --amber-wash: #fbf0e4; --crit: #a32219; --crit-wash: #fdf1f0; /* One native system-font family throughout — San Francisco on Mac/iOS, Segoe UI on Windows, Roboto on Android/Chrome OS. No web fonts, no flash-of-unstyled-text, and it renders equally polished everywhere rather than relying on a serif fallback chain that only really looks right on one OS. Headings are set apart by weight/size, not typeface. */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --display: var(--sans); --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Type scale for UI chrome (labels, meta, list text) — everything below body size now steps through these five values instead of dozens of one-off sizes a hundredth of a rem apart. */ --fs-2xs: .6875rem; /* 11px — tiny mono labels, chips */ --fs-xs: .75rem; /* 12px — meta, captions */ --fs-sm: .8125rem; /* 13px — secondary text, list items */ --fs-base: .875rem; /* 14px — default UI text */ --fs-md: .9375rem; /* 15px — emphasized small text */ --shell: 1400px; --r: 3px; --r-lg: 4px; --shadow: 0 1px 3px rgba(16, 26, 19, .07); --shadow-lg: 0 12px 34px rgba(16, 26, 19, .16); --t: 140ms ease; /* hover/focus micro-interactions */ --t-slow: 240ms ease; /* sliding panels: mini-cart, mobile nav, sticky bar */ --z-header: 100; --z-overlay: 200; --z-drawer: 210; --z-toast: 300; } /* Arabic pages: a deliberately-chosen popular Arabic web font (Noto Sans Arabic, self-hosted — see the @font-face block up top) leading the stack, with the same native-system fonts as before kept as the fallback chain for the brief window before it loads (font-display: swap) or on the rare chance it fails to load at all — Noto Sans Arabic is also named explicitly in that fallback chain itself, since it's the one Linux/Android already ship as their own native Arabic default. Overriding the --sans custom property here (not a new variable) means every existing var(--sans)/var(--display) usage site-wide picks this up automatically, scoped to [dir="rtl"] so French is completely unaffected. Source order matters: this must come after :root{} above to win the specificity tie (:root and [dir="rtl"] both resolve to the same element here). */ [dir="rtl"] { --sans: "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI Arabic", Tahoma, Arial, sans-serif; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { max-width: 100%; overflow-x: hidden; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Belt-and-suspenders: forces the system-font stack on every element, even if a plugin (e.g. Elementor's global kit CSS) sets its own font-family somewhere with higher specificity. --sans above is the source of truth; this just guarantees it wins everywhere. .star-rating below carries its own !important — a class selector beats the universal one even under equal !important — so WooCommerce's "star" icon font still renders. var(--sans), not a hardcoded literal list — this rule's own !important would otherwise outrank the [dir="rtl"] --sans override above (a plain custom-property reassignment has no !important of its own to fight back with), silently keeping the Latin-only stack on Arabic pages despite that override existing. Confirmed live before this fix. */ * { font-family: var(--sans) !important; } body.mini-cart-open, body.nav-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } table { width: 100%; border-collapse: collapse; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; } /* Excludes radio/checkbox — applying text-field padding+border+background to those turns the native circle/square into a large filled rectangle (this is what was happening to the shipping method options, and to every other radio/checkbox on the site: payment methods, "ship to a different address", terms, coupon "have a discount code" toggles). Sized/colored properly just below instead. Also excludes .header-search-bar-input by name: each :not() here counts toward specificity the same as a class does, so adding the radio/checkbox exclusions raised this rule above .header-search-bar-input's own (single class) rule and started overriding its padding/border/background — excluding it explicitly means it's never a specificity contest at all. */ input:not([type="radio"]):not([type="checkbox"]):not(.header-search-bar-input), select, textarea { font-family: inherit; font-size: 1rem; padding: 11px 13px; /* --stone, not --hairline: --hairline (#d3dbd0) is barely visible against the white/paper field background — fine for decorative card borders, too faint for a field boundary someone actually needs to see. */ border: 1px solid var(--stone); border-radius: var(--r); background: var(--paper); color: var(--ink); } input[type="radio"], input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--leaf); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--leaf); color: var(--paper); padding: 10px 16px; z-index: 10000; } .skip-link:focus { top: 0; } /* Utility: mono figures wherever digits line up */ .num, .woocommerce-Price-amount, .price, .amount { font-variant-numeric: tabular-nums; } /* Belt-and-suspenders alongside the wrapper wc_price() already emits (see herbelo_allow_bdi_in_kses()): keeps "5 800 DA" from having its digit groups visually reordered by the page's bidi context, even for any price string that reaches the page through a path doesn't cover. */ .woocommerce-Price-amount { unicode-bidi: isolate; direction: ltr; display: inline-block; padding-right: 5px; } /* The Arabic currency symbol "دج" broke the assumption above: with no explicit dir auto-detects its OWN direction from its content's first "strong" character, skipping digits (direction-neutral) — so "5 800 دج" sees "د" first among strong characters and auto-detects RTL internally, silently overriding the direction: ltr set on the wrapping span above and reversing the whole amount to "دج 800 5". Forcing it on the itself, not just its wrapper, is what actually reaches the auto-detection. */ .woocommerce-Price-amount bdi { unicode-bidi: isolate; direction: ltr; } /* Requested layout for Arabic: currency on the left, amount on the right ("دج 4 500", not "4 500 دج"). Tried direction: rtl on the bdi first — reverted, confirmed live it corrupts the NUMBER itself: wc_price() separates thousands with a plain space ("4 500"), spaces are bidi- neutral, and inside an RTL run that doesn't reliably keep "4" and "500" together — the bidi algorithm reordered them into "500 4" independently of the currency symbol. herbelo_wrap_price_number_span() (PHP) now wraps the number in its own span so this can reorder the two segments as flex items instead — a purely visual reposition that never re-runs bidi resolution on either span's own text, so the number's internal order is never at risk regardless of which side it's drawn on. */ .woocommerce-Price-amount bdi { display: inline-flex; align-items: baseline; /* The currency symbol's own text is " دج" — a leading space meant to separate it from the number in normal (row) order. row-reverse below flips which ITEM comes first without touching either item's own text, so that space ends up on the outer edge of "دج" instead of between it and the number, leaving them touching. An explicit gap provides real separation that holds regardless of flex order. */ gap: 3px; } .woocommerce-Price-amount .herbelo-price-number { unicode-bidi: isolate; direction: ltr; } [dir="rtl"] .woocommerce-Price-amount bdi { flex-direction: row-reverse; } /* Same 5px breathing room as the French version above, mirrored to the side the currency symbol actually sits on for Arabic ("دج" on the left, vs "DA" on the right for French) — not additive with it, so this has to reset padding-right back to 0 or Arabic would end up with both. */ [dir="rtl"] .woocommerce-Price-amount { padding-left: 5px; padding-right: 0; } /* ---------- Shared containers ---------- */ .header-inner, .footer-inner, .footer-newsletter-inner, .site-main, .post-grid, .archive-header, .band-inner { max-width: var(--shell); margin: 0 auto; padding: 0 24px; } /* ========================================================================== Buttons ========================================================================== */ .button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-block; /* Buttons that are actual tags (Voir le panier, Valider la commande…) render inside .entry-content on cart/checkout/account (shortcodes on plain Pages — see the Cart section below), and ".entry-content a" underlines links for article body text. Nothing before this rule was more specific for text-decoration specifically, so that underline was winning on every button built from a link rather than a