/*
 * Brand colour overrides (diwan / FE6) — product page (desktop + mobile).
 *
 * Every rule reads a `--brand-<key>` CSS variable defined ONCE, document-wide, in the header
 * (`new_header_revamp.tpl` → :root, from brand_config('theme.colors')), and falls back to the
 * element's ORIGINAL colour so the storefront is byte-identical until diwan supplies a colour.
 * No hardcoded brand colours live in the templates — they all resolve from here.
 *
 *   --brand-primary    → Add-to-Cart, Done button, add-to-cart popup, qty steppers, sale price, write-a-review button
 *   --brand-secondary  → favourite/registry icons, hover border, location radios + links, "View all"
 *   --brand-button_hover_background_color  → fav/registry hover background
 *   --brand-swiper_pagination_bullet_color → carousel bullets
 *   --brand-review_star_color              → review stars
 */

/* ─── PRIMARY ─────────────────────────────────────────────────────────── */

/* Add to Cart button (both buybox states) */
a#button-cart.button {
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}

/* "Notify me when available" (out-of-stock CTA) — logged-in AJAX variant
   (#button-notify) + guest redirect variant (#button-notify-redirect). Both
   are plain `.button`, so without this they inherit the theme's generic red
   button colour instead of the tenant brand. Text stays white from .button. */
a#button-notify.button,
a#button-notify-redirect.button {
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}

/* Write-a-review button (reviews block) — text stays white from .btn */
a.double-submit.btn,
a.double-submit.btn:hover {
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}

/* Write-a-review button (mobile zero-review state) — was hardcoded blue #0e4075 */
#button-zero {
  background-color: var(--brand-primary, #FF3F98) !important;
}

/* Review FORM page (JS-rendered via formpage.ejs) — desktop + mobile */
/* Rating stars: outline (stroke) + filled star (fill) */
.svg-box-form .empty2 path {
  stroke: var(--brand-primary, #FF3F98) !important;
}
.svg-box-form svg.fill,
.svg-box-form svg.empty {
  fill: var(--brand-primary, #FF3F98) !important;
}
/* (points checkmark → primary lives in the REVIEW FORM section below) */
/* Submit-review button — was hardcoded pink #ff3399 */
.add-review-box #button {
  background-color: var(--brand-primary, #FF3F98) !important;
}

/* Special (sale) price */
.product-page-price--has-sale .price-new-ux .integer,
.product-page-price--has-sale .price-new-ux .decimal,
.product-page-price--has-sale .price-new-ux .currency-new {
  color: var(--brand-primary, rgb(255, 51, 153)) !important;
}

/* Delivery "Join now" (membership prompt) */
.delivery-card__join-link {
  color: var(--brand-primary, rgb(255, 51, 153)) !important;
}

/* ─── DISCOUNT BADGES (price area) ────────────────────────────────────────
   "8%" percentage pill (.discount-badge) + "Save X" savings pill (.price-savings).
   Each exposes a TEXT colour and a BACKGROUND colour from diwan. The border auto-derives
   as a 30% tint of text-over-background via color-mix; on browsers without color-mix the
   border declaration is dropped and the original product_page.css border shows through. */
.discount-badge {
  color: var(--brand-discount_percentage_text_color, #b91c1c) !important;
  background: var(--brand-discount_percentage_background_color, #fef2f2) !important;
  border-color: color-mix(in srgb, var(--brand-discount_percentage_text_color, #b91c1c) 30%, var(--brand-discount_percentage_background_color, #fef2f2)) !important;
}
.price-savings {
  color: var(--brand-discount_savings_text_color, #047857) !important;
  background: var(--brand-discount_savings_background_color, #ecfdf5) !important;
  border-color: color-mix(in srgb, var(--brand-discount_savings_text_color, #047857) 30%, var(--brand-discount_savings_background_color, #ecfdf5)) !important;
}

/* ─── SECONDARY ───────────────────────────────────────────────────────── */

/* Add to Favorites — heart icon. FULL styling here (not just colour) so Arabic/RTL renders
   identically to English: the base stroke-width + transparent-fill outline trick lives only in
   product.css (LTR) — product-rtl.css lacks it, so the AR heart looked solid. Replicating it here
   (loaded for both languages) makes both an outline heart in the brand secondary colour when not
   favourited, and a solid secondary heart when favourited. Text untouched. */
.ms-fav-heart {
  -webkit-text-stroke: 1.3px var(--brand-secondary, rgb(255, 51, 153)) !important;
}
.ms-fav-heart:not(.is-fav) {
  color: transparent !important;                 /* transparent fill → outline heart */
}
.ms-fav-heart.is-fav {
  color: var(--brand-secondary, rgb(255, 51, 153)) !important;
  -webkit-text-stroke-width: 0 !important;        /* solid fill when favourited */
}

/* Add to Registry — gift icon (inline SVG). Text untouched. */
#addToRegistry svg,
#addToRegistry svg path {
  fill: var(--brand-secondary, rgb(255, 51, 153)) !important;
}

/* Favorites + Registry hover — border = secondary, background = brand hover colour. Text untouched. */
#addToFavorites:hover,
#addToRegistry:hover {
  border-color: var(--brand-secondary, rgb(229, 231, 235)) !important;
  background-color: var(--brand-button_hover_background_color, #ffffff) !important;
}

/* ─── NEW ACCENTS ─────────────────────────────────────────────────────── */

/* Carousel (swiper) pagination — active bullet */
.swiper-pagination-bullet-active {
  background: var(--brand-swiper_pagination_bullet_color, #FF3F98) !important;
}
/* Carousel pagination bullet — hover (non-active) → same brand hover colour as the buttons
   (theme default for this hover is blue #3866DF). Scoped :not(active) so the active dot keeps
   its swiper colour even while hovered. */
.swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
  background: var(--brand-button_hover_background_color, #3866DF) !important;
}

/* Review stars (reviews block) + product-card rating stars (carousels / "Frequently bought
   together"). Both draw the filled rating as the SAME SVG image (new_star_pink.svg) overlaid on
   an empty-star base. We keep each ORIGINAL star exactly — same SVG, same repeat-x — and only swap
   its fill for the brand colour by masking to the star shape and painting --brand-review_star_color.
   mask-size mirrors each widget's own background-size so shape/spacing are unchanged. */
.reviewed-stars span,
.stars-img {
  background-color: var(--brand-review_star_color, #FFD700) !important;
  background-image: none !important;
  -webkit-mask: url("/catalog/view/theme/journal2/image/new_star_pink.svg") repeat-x;
          mask: url("/catalog/view/theme/journal2/image/new_star_pink.svg") repeat-x;
}
.reviewed-stars span {                 /* reviews block — background-size: 30px 23px */
  -webkit-mask-size: 30px 23px;
          mask-size: 30px 23px;
}
.stars-img {                           /* carousel product cards — background-size: 22px 16px */
  -webkit-mask-size: 22px 16px;
          mask-size: 22px 16px;
}
/* Mobile: the empty-star base (product.css / product-rtl.css @760px) shrinks to 26px per star.
   The branded fill mask must track it, else the overlay tiles at 30px over a 26px base and the
   fill lands mid-star (clipped half-star + drift). Same breakpoint as the base sizing. */
@media (max-width: 760px) {
  .reviewed-stars span {                 /* reviews block — mobile background-size: 26px 19px */
    -webkit-mask-size: 26px 19px;
            mask-size: 26px 19px;
  }
}

/* ─── "Choose your location" popup ────────────────────────────────────── */
.user-location__location-item input[type="radio"] {
  accent-color: var(--brand-secondary, #FF3F98) !important;
}
.user-location__address-btn {                 /* "See all addresses" */
  color: var(--brand-secondary, #FF3F98) !important;
}
.user-location__btn,
.user-location__signin {                       /* base pill + "Sign in to see your addresses" */
  background-color: var(--brand-primary, #FF3F98) !important;
}
.user-location__submit {                      /* "Done" button */
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}

/* Reviews — "View all" link */
a.View {
  color: var(--brand-secondary, #FF3F98) !important;
}

/* ─── Add-to-cart: qty stepper + "View cart" (post-add state) → primary ── */
.ms-bb-counter {                                  /* bordered "− 1 +" container */
  border-color: var(--brand-primary, #FF3F98) !important;
}
.ms-bb-btn {                                      /* the − / + buttons */
  color: var(--brand-primary, #FF3F98) !important;
}
/* − / + hover background → same brand hover colour as favourites/registry hover (ms-buybox.css default = pink) */
.ms-bb-btn:hover:not(:disabled) {
  background: var(--brand-button_hover_background_color, rgba(255, 51, 153, 0.10)) !important;
}
/* "View cart" — buybox state. Doubled class beats Journal's deeper `.button` rule. */
a.ms-bb-gotocart.ms-bb-gotocart.button {
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}
/* "View cart" — add-to-cart success popup link */
.continue-shopping {
  color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}
/* Add-to-cart success popup — "Added to cart" title text → primary */
.notification-title {
  color: var(--brand-primary, #FF3F98) !important;
}
/* Add-to-cart success popup — "Proceed to buy" button → primary */
.checkout-button-notification {
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}
/* Add-to-cart success popup — the round check icon's disc → primary (white tick path untouched) */
.custom-notification__check svg circle {
  fill: var(--brand-primary, #FF3F98) !important;
}

/* ─── ACCOUNT INFORMATION PAGE ────────────────────────────────────────────
   Account dashboard (/account/account): the card + edit buttons use one brand colour, the card
   icons another. Button hover auto-darkens 12% via color-mix (falls back to the original slate
   hover if unsupported). Raster <img> card icons can't be recoloured; the <i> font icons can. */
.btn-card,
.user-actions .btn-edit,
.submit-btn:not(:disabled),                       /* account "Edit info" Save button (edit.tpl) */
.btn-view-order-compact,                          /* order list — "View" (عرض) button */
.btn-start-shopping {                             /* order list — empty-state "Start shopping" */
  background: var(--brand-account_button_color, #54759C) !important;
  border-color: var(--brand-account_button_color, #54759C) !important;
}
.btn-card:hover,
.user-actions .btn-edit:hover,
.submit-btn:not(:disabled):hover,
.btn-view-order-compact:hover,
.btn-start-shopping:hover {
  background: color-mix(in srgb, var(--brand-account_button_color, #54759C) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--brand-account_button_color, #54759C) 88%, #000) !important;
}
.card-icon i {
  color: var(--brand-account_icon_color, #54759C) !important;
}
/* Order list — "Reorder" (إعادة الطلب) OUTLINE button. Outline variant of the account button
   colour: coloured text + border, fills solid on hover (default was pink = dumyah primary). */
.btn-reorder-compact {
  color: var(--brand-account_button_color, #FF3F98) !important;
  border-color: var(--brand-account_button_color, #FF3F98) !important;
}
.btn-reorder-compact i {
  color: var(--brand-account_button_color, #FF3F98) !important;
}
.btn-reorder-compact:hover:not(:disabled) {
  background: var(--brand-account_button_color, #FF3F98) !important;
  border-color: var(--brand-account_button_color, #FF3F98) !important;
  color: #fff !important;
}

/* ─── BEST SELLERS / NEW ARRIVALS pages (promoted_products) ────────────────
   The top banner (.best-seller-banner) and the "#1/#2…" rank pill (.price-slide-label) both use
   the .bg-main utility (theme --main-color = dumyah magenta). Point them at the brand primary. */
.bg-main {                                        /* #1/#2… rank pills → primary */
  background-color: var(--brand-primary, #aa146b) !important;
}
/* The top banner gets its OWN diwan colour (falls back to primary, then the original magenta).
   Higher specificity than .bg-main so the banner and the rank pills can differ. */
.best-seller-banner.bg-main {
  background-color: var(--brand-promoted_banner_background_color, var(--brand-primary, #aa146b)) !important;
}
/* NOTE: product-card rating stars (.product-rating .stars-img) are sized by journal.css at
   background-size: 22px 16px (same as the carousels), so the generic ".stars-img { mask-size:
   22px 16px }" rule above already matches their base. An earlier override forced 16x12 here on a
   stale "common.css 16x12" assumption — that pitch didn't exist, so the masked fill tiled at 16px
   over a 22px base and clipped/misaligned the stars (e.g. category listing cards). Removed. */
/* Active Best Sellers / New Arrivals tab: the underline (span:before) + the active tab text
   (theme default --main-color = magenta) → its own diwan colour. */
.best-link-list li a span:before {
  background-color: var(--brand-promoted_tab_underline_color, #aa146b) !important;
}
.best-link-list li.active a {
  color: var(--brand-promoted_tab_underline_color, #aa146b) !important;
}
/* #1/#2… rank pill gets its OWN diwan colour (falls back to primary, then the original magenta) —
   higher specificity than the generic .bg-main → primary above so the badge can differ. */
.price-slide-label.bg-main {
  background-color: var(--brand-promoted_rank_badge_color, var(--brand-primary, #aa146b)) !important;
}

/* ─── Multi-supplier "other sellers" drawer (ms-drawer) ────────────────────
   Per-offer Add-to-cart → primary; favourite heart → secondary; highlighted winner
   card background → button-hover colour. Defaults keep the original pink. */
.ms-drawer-row__add-btn {
  background: var(--brand-primary, rgb(255, 51, 153)) !important;
  border-color: var(--brand-primary, rgb(255, 51, 153)) !important;
}
.ms-drawer-row__add-btn:hover {
  background: color-mix(in srgb, var(--brand-primary, rgb(255, 51, 153)) 88%, #000) !important;
  border-color: color-mix(in srgb, var(--brand-primary, rgb(255, 51, 153)) 88%, #000) !important;
}
/* In-cart state = the Add button morphed into a qty counter → primary too */
.ms-drawer-row__counter { border-color: var(--brand-primary, rgb(255, 51, 153)) !important; }
.ms-counter-btn { color: var(--brand-primary, rgb(255, 51, 153)) !important; }
.ms-counter-btn:hover:not(:disabled) {
  background: var(--brand-button_hover_background_color, rgba(255, 51, 153, 0.10)) !important;
}
/* Per-offer favourite heart → secondary (outline default, solid when favourited) */
.ms-drawer-row__fav { color: var(--brand-secondary, rgb(255, 51, 153)) !important; }
.ms-drawer-row__fav .icon-heart { -webkit-text-stroke-color: var(--brand-secondary, rgb(255, 51, 153)) !important; }
.ms-drawer-row__fav.is-fav {
  background: var(--brand-secondary, rgb(255, 51, 153)) !important;
  border-color: var(--brand-secondary, rgb(255, 51, 153)) !important;
}
/* Highlighted winner offer card → background = button-hover colour; accent bar = secondary */
.ms-drawer-row--winner {
  background: var(--brand-button_hover_background_color, #fff0f6) !important;
  border-inline-start-color: var(--brand-secondary, rgb(255, 51, 153)) !important;
}

/* ─── Subscription ("Subscribe & Save") accents → primary ──────────────────
   product_page.css is loaded AFTER this file (by the product controller) and pins these pink with
   !important at equal/higher specificity. We mirror its exact selectors + a leading `body` so ours
   out-specify it (one extra element beats the tied class count) and win the cascade. */
/* Selected card border. Putting the radio's ID inside :has() gives these ID-level specificity,
   so they beat ANY class-only pink border rule regardless of load order. Covers both the
   .product-page-scoped and bare variants. */
body .product-page .subscription-container:has(#display-subscription:checked),
body .product-page .product-options.light-border:has(#display-one-time:checked),
body .subscription-container:has(#display-subscription:checked),
body .product-options.light-border:has(#display-one-time:checked) {
  border-color: var(--brand-primary, rgb(255, 51, 153)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, rgb(255, 51, 153)) 12%, transparent) !important;
}
body .product-page .subs-header .input-display,
body .product-page .one-time-header .input-display {      /* native radio accent */
  accent-color: var(--brand-primary, rgb(255, 51, 153)) !important;
}
body .product-page .subscription-container #button-cart[data-type="subscription"] {  /* Subscribe btn */
  background: var(--brand-primary, rgb(255, 51, 153)) !important;
  border-color: var(--brand-primary, rgb(255, 51, 153)) !important;
}
body .product-page #one-time-body #button-cart[data-type="default"],
body .product-page #one-time-body .cart a.button {        /* one-time "Add to Cart" button */
  background: var(--brand-primary, rgb(255, 51, 153)) !important;
  border-color: var(--brand-primary, rgb(255, 51, 153)) !important;
}
body .product-page #one-time-body .cart select.pretty-select:focus,
body .product-page #one-time-body .cart select.pretty-select:focus-visible,
body .product-page .subs-select.pretty-select:focus,
body .product-page .subs-select.pretty-select:focus-visible {   /* dropdown focus glow */
  border-color: var(--brand-primary, rgb(255, 51, 153)) !important;
}
.add-to-cart {                                    /* legacy coral #FF4259 subscribe variant */
  background: var(--brand-primary, #FF4259) !important;
  border-color: var(--brand-primary, #FF4259) !important;
}

/* ─── SUCCESS PAGES — "Continue" button → primary ─────────────────────────
   Shared common/success.tpl (account success/logout/voucher/return, contact,
   franchise, affiliate). The generic .button gets the theme's magenta; tag it
   so the confirmation CTA follows the tenant colour. Text stays white. */
a.button.success-continue-btn {
  background-color: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}

/* ─── FOOTER PAYMENT ICONS ────────────────────────────────────────────── */

.footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.footer-payment-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 25px;
  border-radius: 2px;
  background: #fff;
  border: 0.88px solid #7A8AB2;
  overflow: hidden;
}

.footer-payment-card--cash {
  background: var(--brand-primary, #FF3F98) !important;
  border-color: var(--brand-primary, #FF3F98) !important;
}

/* ─── HEADER CART ICON ────────────────────────────────────────────────── */

/* Cart SVG icon → primary color */
.cart-container svg {
  color: var(--brand-primary, #FF3F98);
}

/* Cart item-count badge → secondary color */
.cart-number {
  color: var(--brand-secondary, #CE1181) !important;
}

/* ─── LISTING & CMS BLOCK DISCOUNT BADGES ─────────────────────────────────
   .sale-badge = "X% OFF" pill on product listing cards and home page brand-grouped tiles.
   .carousel-special-label = "X% OFF" pill on branding/carousel/super-filter pages (product.css).
   CMS home blocks (.home-block-card) use a separate variable for independent control. */
.sale-badge {
  background-color: var(--brand-discount_badge_background, #CC0C39) !important;
  color: #fff !important;
}
.carousel-special-label {
  background-color: var(--brand-discount_badge_background, #D31583) !important;
  color: #fff !important;
}
.home-block-card .sale-badge {
  background-color: var(--brand-cms_discount_badge_background, #CC0C39) !important;
}

/* ─── ACTIVE FILTER CHIPS ─────────────────────────────────────────────────
   .background-color-pink = selected chip/button state (applied by main_listing.js) —
   the "Filter / Sort By / ★★★★ & Up" selection chips on listing pages.
   Diwan-driven: filter_active_background/_text (set per-tenant in the branding editor).
   Falls back to button_hover_background / secondary so tenants that haven't set the
   dedicated colour keep today's look — no visual change until ops sets them. */
.background-color-pink {
  background: var(--brand-filter_active_background, var(--brand-button_hover_background_color, #fbbbd9)) !important;
  color: var(--brand-filter_active_text, var(--brand-secondary, #FF3F98)) !important;
}

/* Filter-chip close "×" — brand-coloured to match the chip text (was a hardcoded pink
   www.dumyah.com/…/xIcon.png raster that leaked cross-tenant). Rendered as a masked <span> by
   main_listing.js / category_page.js; the X shape is an inline SVG mask so there is no per-tenant
   image dependency, and the fill follows the chip's active-filter text colour. */
.filter-chip-x {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  cursor: pointer;
  background-color: var(--brand-filter_active_text, var(--brand-secondary, #FF3F98));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─── SCROLL-TO-TOP BUTTON ────────────────────────────────────────────── */

.scroll-top rect {
  fill: var(--brand-primary, #FF3F98);
}

/* ─── REVIEW FORM — points reward "check" badge → primary ──────────────────
   The review form (formpage.ejs) marks earnable points with a disc + white
   tick. The disc reads the brand primary (white tick untouched), same pattern
   as the add-to-cart success check icon above. Replaces the old hardcoded
   dumyah green points_icon.png, which was off-brand on every other tenant. */
.points-check circle {
  fill: var(--brand-primary, #FF3F98) !important;
}

.scroll-top path {
  fill: none;
}

/* ─── HEADER "Deliver to" location text → per-brand header text colour ────────
   The header location bar (desktop `.current-location-text-in-header` + mobile
   `.current-location-text`) rendered with the theme's default dark text, which is
   invisible on a dark `header_background` (e.g. dimitris #6b6869 / #2d2d2d). The
   brand already injects `--brand-location_text_in_header` on :root but nothing
   consumed it — wire it here so the "Deliver to:" label + the address value use it
   (white on a dark header, dark on a light one, per tenant). Scoped to the header
   location text, so the shared `.color-grey` utility elsewhere is untouched; the
   pin icon fill is a separate property and unaffected. */
.current-location-text-in-header,
.current-location-text-in-header * {
  color: var(--brand-location_text_in_header, #333745) !important;
}

/* The MOBILE location strip is a separate element on its own (light) background —
   `.categories-menu` — not the dark header bar. Sharing
   `--brand-location_text_in_header` with the desktop bar made a dark-header tenant
   choose between a readable desktop bar and a readable mobile strip. It gets its own
   key, defaulting to the theme's dark text so every tenant renders as before. */
.current-location-text,
.current-location-text * {
  color: var(--brand-location_text_mobile, #333745) !important;
}

/* ─── HEADER BAR FOREGROUNDS (dark-bar tenants) ───────────────────────────────
   `.header-elements-first` is the header bar, and its background is brand data
   (`header_bg_color_revamp`), so a tenant can make it dark. These two foregrounds
   were hardcoded for a light bar.

   They deliberately use their OWN keys rather than `mobile_header_icon` /
   `header_cart_icon`: diwan's BrandConfigComposer injects platform DEFAULTS for
   those two on every tenant, so a `var(--brand-header_cart_icon, …)` fallback can
   never fire — wiring them here silently repainted felo's cart from its primary
   (#48A0A0) to the platform default. `header_bar_text` / `header_bar_cart` are
   absent unless a tenant sets them, so the fallbacks below are what every existing
   tenant keeps rendering. */
.header-elements-first .m-item {
  color: var(--brand-header_bar_text, #545F73) !important;
}

.header-elements-first .cart-container svg,
.header-elements-first .cart-container svg path {
  color: var(--brand-header_bar_cart, var(--brand-primary, #FF3F98)) !important;
  stroke: var(--brand-header_bar_cart, currentColor) !important;
}

/* ─── DESKTOP: controls inside the WHITE pill keep dark paint ─────────────────
   `.c_nav-current-language` (and `.language-design`) is a WHITE pill — but only
   above 930px; `revamp_header.css` makes it `background: transparent` below that,
   where the controls sit straight on the header bar. So the same icons need light
   paint on mobile and dark paint on desktop, and a dark-bar tenant painting them
   from `header_bar_*` / `mobile_header_icon` turned the desktop set white-on-white.

   Re-assert the theme's original dark values inside the pill, above the pill's own
   breakpoint only. `[fill]:not([fill="none"])` / `[stroke]:not([stroke="none"])`
   so a path that paints via the other property is never given a spurious one.
   Overridable per tenant with `header_pill_icon` / `header_pill_text` (NOT keys the
   diwan composer defaults, so an unset tenant renders exactly as before). */
@media (min-width: 931px) {
  .header-elements-first .c_nav-current-language svg path[fill]:not([fill="none"]),
  .header-elements-first .language-design svg path[fill]:not([fill="none"]) {
    fill: var(--brand-header_pill_icon, #2A2C2F) !important;
  }

  .header-elements-first .c_nav-current-language svg path[stroke]:not([stroke="none"]),
  .header-elements-first .language-design svg path[stroke]:not([stroke="none"]) {
    stroke: var(--brand-header_pill_icon, #2A2C2F) !important;
  }

  .header-elements-first .c_nav-current-language .m-item,
  .header-elements-first .language-design .m-item {
    color: var(--brand-header_pill_text, #545F73) !important;
  }

  /* Same pill, the LOGGED-IN account block — the line that greets the customer BY
     NAME ("مرحبا, Laith"). `new_revamp_header.tpl` gives it an inline
     `color: var(--brand-location_text_in_header, #545F73)`. That variable is the
     header-BAR location colour — #FFFFFF on a dark-bar tenant like dimitris — so
     inside the white pill the customer's own name rendered white on white. The
     sibling spans carry no inline colour, inherit #545F73 and stayed readable,
     which is why only that one line vanished.

     Fallback #545F73 matches what those siblings already compute in the logged-in
     DOM, so this repaints the broken line and leaves the working ones untouched.
     (Measured in a real logged-in session: #333745 — which a logged-OUT probe
     appears to inherit — would have shifted both working spans.)

     Inline styles need `!important` to be overridden. */
  .header-elements-first .c_nav-current-language .menu-link-header,
  .header-elements-first .language-design .menu-link-header {
    color: var(--brand-header_pill_text, #545F73) !important;
  }
}