/*
Pharaohms storefront layout.
Logical CSS properties throughout (margin-inline-*, border-start-*, text-align: start)
so the layout mirrors correctly under RTL (Arabic, the default language) without a
separate stylesheet. Direction itself comes from <html dir="rtl"|"ltr">, set by WordPress
per the active Polylang language — never hardcoded here.
*/

/* ALF-410: a real puppeteer scrollWidth check at 1440px found the homepage
   (not the shop page — same cards, same CSS) overflowing by ~97px, traced
   to Astra's closed mini-cart flyout (`.widget_shopping_cart`) rendering
   with `left: 13855px` — an off-canvas-until-toggled element positioned via
   plain absolute offset rather than `position: fixed` or a clipped
   ancestor, which inflates `document.documentElement.scrollWidth` even
   though the element is genuinely invisible. Pre-existing Astra behavior,
   not something this stylesheet's own rules position — this is a narrow,
   standard safeguard against exactly that class of off-canvas-drawer
   overflow rather than a fix aimed at the drawer itself. */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--phm-font-arabic);
  color: var(--phm-color-text);
  background: var(--phm-color-bg);
}

html[lang^="en"] body {
  font-family: var(--phm-font-latin);
}

a {
  color: var(--phm-color-primary);
}

/* ---------- Header ---------- */
.site-header {
  border-block-end: 1px solid var(--phm-color-border);
}

/* Mega menu (Max Mega Menu) — align with brand tokens, keep native plugin structure */
.mega-menu-wrap {
  background: var(--phm-color-bg);
  border-block-start: 1px solid var(--phm-color-border);
}
.mega-menu-wrap .mega-menu-link {
  font-family: var(--phm-font-arabic);
  color: var(--phm-color-text);
}
.mega-menu-wrap .mega-menu-item.mega-menu-item-type-megamenu > .mega-menu-link:hover,
.mega-menu-wrap .mega-current-menu-item > .mega-menu-link {
  color: var(--phm-color-primary);
}

/* Mini-cart drawer */
.phm-cart-count {
  background: var(--phm-color-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  min-inline-size: 18px;
  text-align: center;
  display: inline-block;
  line-height: 18px;
  inset-inline-end: -6px;
  inset-block-start: -6px;
  position: absolute;
}

/* ---------- Homepage hero / trust strip / category tiles ---------- */
.phm-hero {
  text-align: center;
  padding-block: var(--phm-space-5) var(--phm-space-4);
}
.phm-hero__title {
  font-size: 1.75rem;
  margin-block-end: var(--phm-space-2);
}
.phm-hero__subtitle {
  color: var(--phm-color-text-muted);
  max-width: 640px;
  margin-inline: auto;
  /* ALF-410 item 15: balance line lengths so the last line is never a
     short orphan like "حساسات وأدوات" on its own — purely a layout
     property, doesn't touch the bidi-wrapped text itself, so it can't
     reintroduce the ALF-398 scramble. */
  text-wrap: balance;
}
.phm-hero__cta {
  display: inline-block;
  margin-block-start: var(--phm-space-3);
  padding: var(--phm-space-2) var(--phm-space-5);
  background: var(--phm-color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--phm-radius);
  text-decoration: none;
}
.phm-hero__cta:hover {
  background: var(--phm-color-primary-dark);
}

.phm-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--phm-space-2) var(--phm-space-4);
  list-style: none;
  padding: var(--phm-space-2) 0;
  margin-block-end: var(--phm-space-4);
  border-block: 1px solid var(--phm-color-border);
}
.phm-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--phm-space-1);
  color: var(--phm-color-text-muted);
  font-size: 0.9rem; /* ALF-410 item 10: already ≥14px, kept */
  font-weight: 500;
}
.phm-trust-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ALF-410 item 4: a compact, one-row, horizontally-scrollable chip strip —
   replaces the old 2/4-column grid of 96px-tall solid-colour tiles, which
   ate too much vertical space on a 390px phone to keep products visible
   above the fold. Each category's brand colour survives as a small dot
   instead of filling the whole chip, so 8 differently-coloured blocks no
   longer compete for attention the way the owner's "random squares"
   complaint described. */
.phm-category-tiles {
  display: flex;
  gap: var(--phm-space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--phm-space-1);
  margin-block-end: var(--phm-space-4);
  scrollbar-width: thin;
}
.phm-category-tile {
  display: inline-flex;
  align-items: center;
  gap: var(--phm-space-1);
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: var(--phm-space-1) var(--phm-space-3);
  border: 1px solid var(--phm-color-border);
  border-radius: 999px;
  background: var(--phm-color-surface);
  color: var(--phm-color-text);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: none;
}
.phm-category-tile:hover {
  border-color: var(--phm-color-primary);
}
.phm-category-tile__dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--phm-tile-color, var(--phm-color-primary));
  flex-shrink: 0;
}

/* ---------- Homepage curated product rows ---------- */
.phm-home-row {
  margin-block-end: var(--phm-space-5);
}
.phm-home-row__title {
  font-size: 1.25rem;
  margin-block-end: var(--phm-space-3);
  padding-inline-start: var(--phm-space-2);
  border-inline-start: 4px solid var(--phm-color-accent);
}

/* ---------- Header language switcher ---------- */
.phm-lang-switch {
  display: flex;
  align-items: center;
  gap: var(--phm-space-1);
  margin-inline-start: var(--phm-space-2);
}
.phm-lang-switch-link {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px var(--phm-space-1);
  border: 1px solid var(--phm-color-border);
  border-radius: var(--phm-radius);
  text-decoration: none;
  color: var(--phm-color-text-muted);
}
.phm-lang-switch-link--current {
  color: #fff;
  background: var(--phm-color-primary);
  border-color: var(--phm-color-primary);
}

/* ---------- Shop / category listing ---------- */
/* ALF-410 item 7: denser grid — WC/Astra already default to columns-4 at
   desktop and this file already forces 2 columns ≤768px below; this just
   tightens padding and removes the ~48px default WC bottom margin between
   rows, which read as empty vertical space between the card border and the
   next row. */
.woocommerce ul.products[class*="columns-"] li.product {
  border: 1px solid var(--phm-color-border);
  border-radius: var(--phm-radius);
  padding: var(--phm-space-2);
  margin-block-end: var(--phm-space-3) !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button {
  background: var(--phm-color-primary);
  border-color: var(--phm-color-primary);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
  background: var(--phm-color-primary-dark);
}

/* ALF-410 item 1: fixed 1:1 image box with object-fit:cover — the grid
   looks consistent today (same square box, neutral SVG fallback) and a
   real photo "just works" the moment set_post_thumbnail() points at one,
   cropped/scaled into the same box with no template change needed. */
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  display: block;
}

/* ALF-410 item 8/17: Astra's own category-above-title label
   (`.ast-woo-product-category`) duplicates the context the chip strip
   above already gives — the owner's explicit preference was to remove it
   on cards rather than make it readable. */
.ast-woo-product-category {
  display: none;
}

/* ALF-410 item 11: one-line factual spec under the title. */
.phm-card-spec {
  font-size: 0.78rem;
  color: var(--phm-color-text-muted);
  margin: 2px 0 var(--phm-space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ALF-410 item 11: third stock state ("كمية محدودة"/"Limited stock"),
   between the existing in-stock/out-of-stock colours. */
.woocommerce .stock.phm-limited-stock {
  color: var(--phm-color-warning);
}

/* ALF-410 item 3: the sale price (`ins`) prominent — larger, bolder, brand
   colour; the old price (`del`) small, muted, struck through (browser
   default). `order` (not DOM order — the HTML must stay del-then-ins so a
   screen reader still announces "was X, now Y") moves the new price to the
   *visual* start of the row (right, in RTL) so it reads first, per the
   ticket. The exact order values below (`del: 1`, `ins: 2`) were picked by
   screenshotting a real sale-price card and checking which side the new
   price landed on, not derived from the RTL flex spec on paper — the first
   attempt (the "obvious" `ins: 1`/`del: 2` reading of the spec) actually
   put the new price on the *left* instead. */
.woocommerce .price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--phm-space-1);
  color: var(--phm-color-text);
  font-weight: 600;
}
.woocommerce .price del {
  order: 1;
  color: var(--phm-color-text-muted);
  font-size: 0.8em;
  font-weight: 400;
  text-decoration: line-through;
}
.woocommerce .price ins {
  order: 2;
  color: var(--phm-color-primary-dark);
  font-size: 1.2em;
  font-weight: 700;
  text-decoration: none;
}

.woocommerce .widget_layered_nav,
.woocommerce .widget_price_filter,
.woocommerce .widget_product_categories,
.woocommerce .widget_layered_nav_filters {
  border-block-end: 1px solid var(--phm-color-border);
  padding-block-end: var(--phm-space-3);
  margin-block-end: var(--phm-space-3);
}

.woocommerce .price_slider_amount .button {
  background: var(--phm-color-primary);
}

/* stock badges */
/* WooCommerce core's own base `.stock{color:#958e09}` (ALF-385 UX audit:
   measured 2.89:1 against the card background, below WCAG AA's 4.5:1) only
   gets overridden by our `.in-stock`/`.out-of-stock` rules below for those
   two states — anything else (e.g. backorder) falls through to that
   low-contrast default. Cover the generic class too, as a fallback. */
.woocommerce .stock { color: var(--phm-color-text-muted); }
.woocommerce .stock.in-stock { color: var(--phm-color-success); }
.woocommerce .stock.out-of-stock { color: var(--phm-color-error); }

/* ---------- Cart/checkout block RTL offset ---------- */
/* The cart/checkout page content (ALF-385 UX audit, round 2) renders 20px
   right of the page container at 360-768px, flush against the viewport
   edge — confirmed by measuring getBoundingClientRect(): the container is
   at 20..370 (390px viewport) but `.wp-block-woocommerce-cart`/
   `-checkout.alignwide` sat at 40..390. Root cause, found by reading
   Astra's actual injected CSS (astra-theme-css-inline-css), not guessed:
   `.ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide
   { margin-left: calc(-1 * min(...,20px)); margin-right: calc(...); }` — a
   physical, non-logical bleed rule Astra applies to every direct
   alignwide/alignfull child of the content area (meant for full-bleed hero
   sections). With both margins non-auto and the child's own width fixed
   (not auto), the box is over-constrained; per the CSS2 spec the UA
   resolves that by recomputing whichever margin is on the layout *end*
   side — `margin-right` under LTR (harmless, matches the authored bleed)
   but `margin-left` under RTL, silently turning the authored -20px into a
   solved +20px instead. The wrapper's width was never actually auto here,
   so it was never really using the bleed anyway — zeroing both margins
   restores its normal, correctly-centered position with no loss of layout.
   `!important` because Astra's selector has 4 class/attribute components
   (0,4,0) to this rule's 3 — needed to actually win the cascade, not
   stylistic. */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-checkout .wp-block-woocommerce-checkout.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- "New in store" cross-sell block on the empty cart page ---------- */
/* The empty-cart block (ALF-385 UX audit) renders its "جديد في المتجر"
   suggestions through WooCommerce's classic Grid block markup
   (`.wc-block-grid__product*`), a different DOM/class family from the
   `ul.products li.product` shop-loop markup styled above — confirmed by
   reading the rendered cart page HTML directly, not guessed. Give it the
   same card treatment (border, radius, 2-line title clamp, full-width
   button) so it doesn't look like a separate, unfinished feature. */
.wc-block-grid.wp-block-product-new .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--phm-space-3);
  list-style: none;
  padding: 0;
}
@media (min-width: 769px) {
  .wc-block-grid.wp-block-product-new .wc-block-grid__products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product {
  border: 1px solid var(--phm-color-border);
  border-radius: var(--phm-radius);
  padding: var(--phm-space-2);
  margin: 0;
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product-link {
  text-decoration: none;
  color: var(--phm-color-text);
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product-title {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  margin-block-start: var(--phm-space-1);
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product-price {
  font-weight: 600;
  color: var(--phm-color-text);
  margin-block: var(--phm-space-1);
}
/* Core wc_price() wraps "EGP 50.00" in a <bdi> so it reads in a fixed order
   regardless of surrounding RTL context (confirmed in the shop-grid price
   markup) — this block's price HTML (ALF-385 UX audit: "EGP 150.00"
   formatting flagged as inconsistent) omits that wrapper, so the browser's
   bidi algorithm is free to flip "EGP 50.00" to "50.00 EGP" even though the
   DOM order is identical to the correctly-isolated shop grid. Recreate the
   isolation in CSS since we can't add the missing <bdi> tag ourselves. */
.wc-block-grid.wp-block-product-new .woocommerce-Price-amount {
  unicode-bidi: isolate;
  direction: ltr;
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--phm-color-primary);
  border-radius: var(--phm-radius);
}
.wc-block-grid.wp-block-product-new .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--phm-color-primary-dark);
}

/* The "···" divider between the empty-cart message and "New in store" is
   WordPress core's own dots-style separator (`is-style-dots`) — a real
   decorative element, not debris, but its default grey renders as a stray
   mark with no brand treatment. Give it brand color and breathing room. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  color: var(--phm-color-border);
  margin-block: var(--phm-space-4);
}

/* ---------- Product page ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-color: var(--phm-color-primary);
}
.woocommerce div.product form.cart .button {
  background: var(--phm-color-primary);
  border-color: var(--phm-color-primary);
}

/* Colour swatches (pa_color variation attribute, ALF-403). WooCommerce's own
   <select> stays in the DOM for wc-add-to-cart-variation.js — only visually
   hidden — so keyboard/AT users interacting with our buttons still drive a
   real, accessible form control underneath. */
.phm-color-swatches-wrap .phm-color-select-hidden select {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.phm-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--phm-space-2);
  margin-block-end: var(--phm-space-2);
}
.phm-color-swatch {
  --phm-swatch-hex: #ccc;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background-color: var(--phm-swatch-hex);
  border: 2px solid var(--phm-color-border);
  cursor: pointer;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}
.phm-color-swatch:hover:not(:disabled) {
  border-color: var(--phm-color-text-muted);
}
.phm-color-swatch:focus-visible {
  outline: 2px solid var(--phm-color-primary);
  outline-offset: 2px;
}
.phm-color-swatch--selected {
  border-color: var(--phm-color-primary);
  box-shadow: 0 0 0 2px var(--phm-color-bg), 0 0 0 4px var(--phm-color-primary);
}
.phm-color-swatch--disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.phm-color-swatch--disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom right, transparent 46%, var(--phm-color-error) 46%, var(--phm-color-error) 54%, transparent 54%);
}

/* Add-to-cart AJAX success/error notice injected by product-swatches.js,
   reusing WooCommerce's own .woocommerce-message/.woocommerce-error look. */
.phm-cart-notice {
  margin-block-end: var(--phm-space-3);
}

/* ---------- WhatsApp floating button (Social Chat plugin) ---------- */
/* Egypt is RTL-default, float the button to the inline-end so it never
   collides with a mirrored mini-cart/scroll-to-top button on the other side. */
#wh-chat-widget-container,
.wh-chat-widget {
  inset-inline-end: var(--phm-space-3) !important;
  inset-inline-start: auto !important;
}

/* The live plugin's real fixed bubble is `.qlwapp__container` (Quick Link
   for WhatsApp), not `.wh-chat-widget` above — confirmed by bounding-rect
   measurement that it sits in the viewport's last ~88px, overlapping the
   footer's final line on any page short enough to end near the fold (cart,
   checkout, my-account, 404 — ALF-385 live audit, 2026-10-10). Give the
   footer enough bottom room that its text is never the thing the bubble
   covers. */
.site-footer {
  padding-block-end: calc(var(--phm-space-3) + 96px);
}

/* `qlwapp_button['layout'] = 'bubble'` (pharaohms_shrink_whatsapp_bubble(),
   mu-plugins/pharaohms-setup.php) only shrinks the *clickable* button to an
   icon-sized circle — the plugin's own CSS (`.qlwapp__button--bubble
   .qlwapp__text`) still renders the greeting label as a permanently-visible,
   absolutely-positioned sibling next to it, with no hover-gating. Confirmed
   live at 390px: the container's real bounding box was still 430px wide
   (overflowing the 390px viewport) and covered two product cards' title/
   price/add-to-cart areas on /shop/ and /?s=arduino (ALF-385 round-3 UX
   audit, re-verified 2026-10-11 — the PHP-only fix did not actually achieve
   icon-only). The label is decorative, not interactive (the whole button is
   one click target regardless), so hiding it is safe. */
.qlwapp__button--bubble .qlwapp__text {
  display: none !important;
}

/* ALF-410 item 19: at rest (unscrolled) the fixed bubble's default bottom
   offset lands it right on top of a product card's "إضافة إلى السلة"
   button in the viewport's first/last visible row — confirmed with a real
   390px screenshot of /shop/, not guessed: the default offset (raised to
   90px in an earlier pass of this same fix) still overlapped the second
   column's price/button cluster. There is no horizontal "safe side" in a
   full-bleed 2-column grid with no gutter at this width (moving it to the
   other inline edge just overlaps the *other* column instead), so this
   raises it well clear of the grid's bottom action row instead, scoped to
   shop/category/search pages only (`.phm-product-grid-page`,
   functions.php) — other pages (cart/checkout/single-product) keep the
   original ALF-385/391 footer-safe position, which already works there. */
.phm-product-grid-page .qlwapp__container {
  inset-block-end: 220px !important;
}
.qlwapp__button--bubble {
  inline-size: 44px !important;
  block-size: 44px !important;
}

/* ---------- Desktop category nav ---------- */
/* 8 Arabic category names don't fit one row alongside the search box and
   cart icon (ALF-385 round 1) — `overflow-x: auto` on the shared row hid 2
   of 8 categories off-screen with no visible scrollbar/affordance
   (ALF-385 round 2 UX audit: confirmed by screenshot, not guessed). Fixed
   by giving the nav its own full-width row (below the logo/search/cart) in
   pharaohms_move_nav_to_own_row() instead — this just styles that row so it
   reads as a deliberate category bar, not a leftover empty builder row. */
.ast-below-header-wrap {
  border-block-start: 1px solid var(--phm-color-border);
  background: var(--phm-color-surface);
}
/* round 1's `flex-wrap: wrap` still split the 8 items onto two rows at both
   1024 and 1440 (ALF-385 round-2 UX audit) — the 1200px container is ~90px
   narrower than the items' combined width at Astra's default 16px link
   padding + 16px column-gap. Measured against the live site (not guessed):
   shrinking link padding/gap/font just enough closes that gap with room to
   spare at the narrowest desktop width this row applies at (984px available
   at 1024px viewport) while staying readable — verified single-row, no
   overflow, at 1024/1200/1280/1440 before shipping this. */
@media (min-width: 922px) {
  .ast-below-header-wrap .main-header-menu {
    flex-wrap: nowrap;
    justify-content: center;
    column-gap: 2px;
  }
  .ast-below-header-wrap .main-header-menu .menu-link {
    padding: 0 7px;
    font-size: 13.5px;
  }
}

/* ---------- Mobile / tablet shop grid ---------- */
@media (max-width: 768px) {
  /* Astra's shop loop is CSS grid (`display: grid`); grid-template-columns
     on ul.products sizes the cells (2 cols <=544px, 3 cols 545-921px via
     Astra's own Customizer-driven responsive CSS). The old `width: calc(50%
     - gap)` rule here sized li.product to half of its *cell*, not half of
     the row, which is what produced the ~70px cards with a big gap next to
     them (ALF-385). Force a clean 2-column grid through the whole ≤768px
     range instead of fighting Astra's 544px cutoff, and let cards fill
     their cell. */
  .woocommerce ul.products:not(.elementor-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .woocommerce ul.products[class*="columns-"] li.product {
    width: 100%;
    max-width: 100%;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    min-block-size: calc(1.3em * 2);
  }
  .woocommerce ul.products li.product .price {
    white-space: nowrap;
  }
  .woocommerce ul.products li.product a.button.add_to_cart_button {
    display: block;
    inline-size: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center;
  }
}

/* Add-to-cart buttons measured at 39px tall on the live shop grid (ALF-385
   UX audit P2: tap targets under 44px) — pad up to the touch-target
   minimum without changing the button's visual weight. */
.woocommerce ul.products li.product a.button.add_to_cart_button {
  min-block-size: 44px;
  box-sizing: border-box;
}

/* ---------- Footer content (pharaohms_enrich_footer()) ---------- */
/* The category/meta links are concatenated with no whitespace in PHP
   (`<a>...</a><a>...</a>`), relying entirely on this CSS for spacing — with
   none written, the default inline rendering ran every link together into
   one unreadable Arabic string (ALF-391 live verification, 2026-10-10).
   Make each row a wrapping flex row with an explicit gap instead. */
.phm-footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--phm-space-2);
}
/* The footer row's ancestor chain (`ast-builder-grid-row-full`/`-mobile-full`)
   is configured edge-to-edge with zero inline padding anywhere up to
   `.site-footer` (ALF-385 round-2 UX audit: measured every ancestor's
   computed padding on the live site at 360/390px — all 0px), so footer text
   runs flush to the screen edge on mobile. Match the 20px gutter the rest of
   the mobile page content uses (see the cart/checkout RTL-offset fix above). */
@media (max-width: 768px) {
  .phm-footer-content {
    padding-inline: 20px;
    box-sizing: border-box;
  }
}
.phm-footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--phm-space-3);
  row-gap: var(--phm-space-1);
}
.phm-footer-link {
  display: inline-block;
}

/* ---------- Header: bigger logo + 44x44 touch targets (ALF-410 item 14) ---------- */
.ast-site-identity .custom-logo-link img,
.custom-logo {
  max-block-size: 56px;
  inline-size: auto;
}

/* ALF-441: Astra's own dynamic CSS gives `.site-logo-img` (the span wrapping
   the logo link) a *physical* `padding-right` — confirmed live via
   getComputedStyle diffing, same value in both languages — instead of a
   logical `padding-inline-end`, so it never flips under RTL. In English
   that padding sits harmlessly between the logo and the next header zone
   (absorbed into the existing column-gap). In Arabic, the mirrored header
   grid puts the logo zone on the right, and this same physical
   padding-right lands on the row's *outer* edge instead — pushing the logo
   away from the edge it should sit flush against, unlike every other
   header item, which is exactly the "Arabic logo position looks off" the
   owner reported. Confirmed (real-browser before/after screenshots, both
   widths) that zeroing it is visually inert in English and makes the
   Arabic logo sit flush with the header's edge, matching English's own
   flush-left placement. */
.site-logo-img {
  padding: 0;
}
.ast-header-search .ast-search-menu-icon .astra-search-icon,
.ast-site-header-cart .ast-icon,
.ast-mobile-menu-trigger-minimal {
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Sort dropdown Arabic font (ALF-410 item 18) ---------- */
/* Astra's own base CSS sets a hardcoded Latin-only font stack directly on
   `select` (`body,button,input,select,textarea{font-family:-apple-system,
   ...}`, no Arabic fallback) — an element-level rule always wins over our
   `body{font-family:var(--phm-font-arabic)}` inherited value regardless of
   stylesheet order, confirmed by reading Astra's compiled inline CSS
   directly. Re-declaring it here (same specificity, later in the cascade
   since this stylesheet loads after Astra's) restores the Arabic font
   stack on every form control, not just the sort dropdown. Also give the
   `<select>` room for its own longer Arabic option text next to the
   dropdown-arrow icon instead of a fixed width that clips it. */
select,
input,
textarea,
button {
  font-family: inherit;
}
.woocommerce-ordering select.orderby {
  inline-size: auto;
  max-inline-size: 100%;
  padding-inline-end: var(--phm-space-4);
}

/* ---------- Shop filters (ALF-410 item 9) ---------- */
/* Rendered directly in the shop-loop flow (functions.php
   pharaohms_render_shop_filters()), not through Astra's sidebar-column
   layout (which measurably didn't turn on — see that function's comment) —
   styled here as a plain filter bar/box above the grid instead of a
   classic side column, visible by default on every width; the mobile
   breakpoint below hides it behind the "فلترة" toggle specifically. */
/* min-width-scoped (not a bare `#secondary.phm-shop-filters{display:flex}`)
   so it never out-specificities the mobile `#secondary{display:none}`
   default below — both would otherwise apply at once under 768px, and the
   two-class selector's higher specificity would win regardless of media
   query order, undoing the mobile hide. */
@media (min-width: 769px) {
  #secondary.phm-shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phm-space-4);
    padding: var(--phm-space-3);
    margin-block-end: var(--phm-space-4);
    border: 1px solid var(--phm-color-border);
    border-radius: var(--phm-radius);
    background: var(--phm-color-surface);
  }
  #secondary.phm-shop-filters .widget {
    flex: 1 1 200px;
    min-inline-size: 0;
  }
}
#secondary.phm-shop-filters .widget-title {
  font-size: 0.95rem;
  margin-block-end: var(--phm-space-1);
}

.phm-filter-toggle {
  display: none;
  margin-inline-start: auto;
  padding: var(--phm-space-1) var(--phm-space-3);
  min-block-size: 44px;
  border: 1px solid var(--phm-color-border);
  border-radius: var(--phm-radius);
  background: var(--phm-color-surface);
  color: var(--phm-color-text);
  font-weight: 600;
  cursor: pointer;
}
.woocommerce-ordering {
  display: flex;
  align-items: center;
  gap: var(--phm-space-2);
}
@media (max-width: 768px) {
  .phm-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #secondary {
    display: none;
  }
  #secondary.phm-sidebar-open {
    display: block;
    margin-block-end: var(--phm-space-4);
    padding: var(--phm-space-3);
    border: 1px solid var(--phm-color-border);
    border-radius: var(--phm-radius);
    background: var(--phm-color-surface);
  }
}
.phm-stock-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.phm-stock-filter-active {
  font-weight: 700;
  color: var(--phm-color-primary);
}

/* ---------- "Load more" pagination (ALF-410 item 12) ---------- */
/* The numbered pagination stays in the DOM for the no-JS case; JS
   (assets/js/shop-ux.js) adds this class once it has actually inserted a
   working "Load more" button, so a failed/blocked script never hides real,
   working pagination links behind nothing. */
nav.woocommerce-pagination.phm-pagination--js-enhanced {
  display: none;
}
.phm-load-more {
  display: block;
  margin: var(--phm-space-4) auto 0;
  padding: var(--phm-space-2) var(--phm-space-5);
  min-block-size: 44px;
  border: 0;
  border-radius: var(--phm-radius);
  background: var(--phm-color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.phm-load-more:hover {
  background: var(--phm-color-primary-dark);
}
.phm-load-more:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* ---------- RTL "next" pagination arrow (ALF-410 item 13) ---------- */
/* Verified already correct: WooCommerce/Astra's own paginate_links() output
   renders "&larr;" for "next" under dir="rtl" and "&rarr;" under LTR with
   no code here — confirmed by reading the live rendered markup on a seeded
   Playground boot. No change needed; left as a marker comment so a future
   pass doesn't re-investigate it from scratch. */

/* =====================================================================
   ALF-489 — desktop layout fixes (owner: "items not side by side or
   aligned" on a laptop)
   ===================================================================== */

/* Product grid, root cause: Astra's base rule is
   `ul.products:not(.elementor-grid) { grid-template-columns: repeat(4, 1fr) }`
   and `1fr` is `minmax(auto, 1fr)` — a track may never shrink below its
   items' min-content. Our cards contain `white-space: nowrap` text (price,
   the `<bdi>` Latin runs in titles) so one wide card inflated its column
   and the row came out 313/306/371/300px (live, 1366px, measured). With
   `minmax(0, 1fr)` the tracks are truly equal and the content has to fit
   the card (it clamps/ellipsizes instead). Breakpoints: 4 cols ≥1200px,
   3 cols ≥900px, 2 below. */
.woocommerce ul.products[class*="columns-"]:not(.elementor-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: var(--phm-space-3);
  align-items: stretch;
}
@media (max-width: 1199px) {
  .woocommerce ul.products[class*="columns-"]:not(.elementor-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 899px) {
  .woocommerce ul.products[class*="columns-"]:not(.elementor-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--phm-space-2);
  }
}

/* Equal-height cards with a pinned button: the card is a flex column, the
   product link (image/title/description/price/stock) grows to fill it, and
   the add-to-cart button sits at the bottom so buttons line up per row. */
.woocommerce ul.products[class*="columns-"] li.product {
  display: flex;
  flex-direction: column;
  inline-size: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
  float: none;
  margin-inline: 0;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--phm-color-surface);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-block-size: calc(1.3em * 2);
  overflow-wrap: anywhere;
}
/* the title's Latin runs are `<bdi style="white-space:nowrap">`; let them
   wrap rather than force the card wider than its column */
.woocommerce ul.products li.product .woocommerce-loop-product__title bdi {
  white-space: normal !important;
}
.woocommerce ul.products li.product .phm-card-spec {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-block-size: calc(1.4em * 2);
}
.woocommerce ul.products li.product .price {
  white-space: nowrap;
}
.woocommerce ul.products li.product > .add_to_cart_button,
.woocommerce ul.products li.product > .button {
  margin-block-start: auto;
}

/* Homepage rows: a row with fewer cards than columns (e.g. 2 deals) keeps
   the same card width as a full row and is centred, never a lopsided half
   row. `--phm-nN` = min(card count, columns at that breakpoint), set inline
   by pharaohms_homepage_product_row(). Cards stay exactly (100% - gaps) /
   columns wide. */
.woocommerce ul.products.phm-home-row__grid[class*="columns-"]:not(.elementor-grid) {
  grid-template-columns: repeat(var(--phm-n4, 4), calc((100% - 3 * var(--phm-space-3)) / 4)) !important;
  justify-content: center;
  padding: 0;
}
@media (max-width: 1199px) {
  .woocommerce ul.products.phm-home-row__grid[class*="columns-"]:not(.elementor-grid) {
    grid-template-columns: repeat(var(--phm-n3, 3), calc((100% - 2 * var(--phm-space-3)) / 3)) !important;
  }
}
@media (max-width: 899px) {
  .woocommerce ul.products.phm-home-row__grid[class*="columns-"]:not(.elementor-grid) {
    grid-template-columns: repeat(var(--phm-n2, 2), calc((100% - var(--phm-space-2)) / 2)) !important;
  }
}

/* Header language switcher: Astra's `.menu-item` is a flex column, which
   stacked AR over EN as two tall pills and stretched the nav band to
   ~140px. Force a compact horizontal pair. */
.main-header-menu .menu-item.phm-lang-switch,
.ast-nav-menu .menu-item.phm-lang-switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  gap: var(--phm-space-1);
  inline-size: auto;
  block-size: auto;
}
.phm-lang-switch .phm-lang-switch-link {
  display: inline-block;
  inline-size: auto;
  line-height: 1.4;
  padding: 3px var(--phm-space-2);
  white-space: nowrap;
}

/* Category chips: wrap and centre on desktop (8 chips don't fit one
   1200px row and the old scroller clipped the last one with no
   affordance); keep the single-row scroller on small screens with a fade
   on the trailing edge as the "there is more" cue. */
@media (min-width: 769px) {
  .phm-category-tiles {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
  }
}
@media (max-width: 768px) {
  .phm-category-tiles {
    --phm-fade-to: right;
    -webkit-mask-image: linear-gradient(to var(--phm-fade-to), #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to var(--phm-fade-to), #000 calc(100% - 32px), transparent);
  }
  [dir="rtl"] .phm-category-tiles {
    --phm-fade-to: left;
  }
}

/* =====================================================================
   ALF-494 — round 2 site-wide polish (ALF-488 #18 #19 #22 #25 #26 #28)
   Owned by this section only; the product-card / grid / PDP / search rules
   live in the sibling ticket's section. Logical properties throughout so
   AR (RTL) and EN (LTR) are exact mirrors.
   ===================================================================== */

/* #28 Container: 1280px content width at >=1280 (was Astra's 1200 + 20px
   gutters), with the audit's inline padding per breakpoint. Content widths:
   1232 @1280, 1280 @1366+, 976 @1024, 728 @768, 358 @390. */
:root {
  --phm-cta-bg: #274fa5;
  --phm-cta-bg-hover: #1e3f86;
  --phm-container-pad: 16px;
}
@media (min-width: 768px) {
  :root { --phm-container-pad: 20px; }
}
@media (min-width: 1024px) {
  :root { --phm-container-pad: 24px; }
}
/* Astra emits `.ast-woo-shop-archive .site-content > .ast-container {max-width:
   1240px}` and `.ast-separate-container #content .ast-container {padding:
   0 .54em}` from its own settings, so the content selectors below match their
   specificity (an #id) instead of using !important. */
.site .ast-container,
.site .ast-container-fluid,
#page #content > .ast-container {
  max-inline-size: calc(1280px + 2 * var(--phm-container-pad));
  padding-inline: var(--phm-container-pad);
  box-sizing: border-box;
}

/* Header and footer rows are Astra Builder grid rows, not `.ast-container`:
   the header rows cap at 1240px (1200 + 20px gutters) and the footer's inner
   grid at 1200px, so without this they stay narrower than the page content. */
.site-header .ast-builder-grid-row-container,
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row {
  max-inline-size: calc(1280px + 2 * var(--phm-container-pad));
  padding-inline: var(--phm-container-pad);
  box-sizing: border-box;
  margin-inline: auto;
}

/* #18 One primary CTA: #274FA5, hover #1E3F86, >=44px tall, 8px radius,
   16px/600. Covers PDP add-to-cart, My Account login/register, and the
   Blocks cart "Proceed to checkout" / checkout "Place order" buttons (which
   fell back to Astra's default #046BD2). */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-account .woocommerce-Button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--phm-cta-bg) !important;
  border-color: var(--phm-cta-bg) !important;
  color: #fff !important;
  min-block-size: 44px;
  border-radius: var(--phm-radius) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  padding-block: 10px;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-account .woocommerce-Button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
  background-color: var(--phm-cta-bg-hover) !important;
  border-color: var(--phm-cta-bg-hover) !important;
  color: #fff !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  opacity: 0.5;
}

/* #19 Trust strip: its own box spans the full container, items centred with
   a 32px gap, no one-sided margin. */
.phm-trust-strip {
  inline-size: 100%;
  box-sizing: border-box;
  margin-inline: 0;
  padding-inline: 0;
  gap: var(--phm-space-2) 32px;
}

/* #22 Empty search + 404: pills under the message; white page, footer stuck
   to the bottom so no grey band shows beneath it. */
.phm-empty-state-pills {
  justify-content: safe center;
  margin-block: var(--phm-space-4);
}
body.error404,
body.error404 .site-content,
body.error404 #page {
  background: #fff;
}
body.error404 #page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}
body.error404 .site-content {
  flex: 1 0 auto;
}

/* #26 Footer: three labelled columns at desktop (Shop / Help / Contact),
   stacked on mobile. */
.phm-footer-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--phm-space-4) var(--phm-space-5);
  text-align: start;
}
.phm-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--phm-space-1);
}
.phm-footer-col > p {
  /* wpautop wraps the links in one (unclosed) <p>, which would otherwise
     become a single flex item with the links flowing inline (ALF-498). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--phm-space-1);
  margin: 0;
}
.phm-footer-heading {
  margin: 0 0 var(--phm-space-1);
  font-size: 16px;
  font-weight: 600;
  color: inherit;
}
.phm-footer-col .phm-footer-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
}
@media (max-width: 767px) {
  .phm-footer-meta {
    grid-template-columns: 1fr;
    gap: var(--phm-space-3);
  }
}

/* #25 Mobile tap targets >= 44px. */
@media (max-width: 767px) {
  .phm-footer-col .phm-footer-link {
    min-block-size: 44px;
    padding-block: 10px;
  }
  .phm-lang-switch .phm-lang-switch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
  }
  .woocommerce-ordering select.orderby {
    min-block-size: 44px;
  }
  .woocommerce .quantity input.qty,
  .woocommerce-page .quantity input.qty {
    block-size: 44px;
    min-block-size: 44px;
    min-inline-size: 56px;
  }
  /* ALF-499: Cart/Checkout block quantity stepper was 30x43. */
  .wc-block-components-quantity-selector {
    min-block-size: 44px;
    inline-size: auto;
    min-inline-size: 148px; /* 2 x 44px buttons + 60px input */
  }
  .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
  .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
    min-block-size: 44px;
  }
}

/* =====================================================================
   ALF-493 — ALF-487 round 2 (listings, search, home/PDP/archive/
   order-received/empty-cart templates). Everything below this banner is
   this ticket's; keep edits to it inside the block so it merges cleanly
   with the sibling ALF-494 branch, which appends its own block.
   ===================================================================== */

/* ---- Product card anatomy (ALF-488 design spec: card anatomy) ---------- */
/* Astra prints `ul.products::before/::after` clearfix pseudo-elements; in a
   `display: grid` container they become real grid items, which is the 54px
   "phantom track" the audit measured on the EN related-products row. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}
.woocommerce ul.products[class*="columns-"] {
  column-gap: 24px;
  row-gap: 24px;
}
.woocommerce ul.products[class*="columns-"] li.product {
  position: relative;
  padding: 12px;
  margin-block-end: 0 !important;
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.15s ease;
}
.woocommerce ul.products[class*="columns-"] li.product:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
/* 1:1 image box, 8px radius, neutral fill, artwork inset 12% */
.woocommerce ul.products li.product a img {
  border-radius: 8px;
  padding: 12%;
  box-sizing: border-box;
  margin: 0 0 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  min-block-size: 2.7em;
  margin: 0;
  padding: 0;
}
/* spec: one line, ellipsis (needs min-width:0 up the chain, set above) */
.woocommerce ul.products li.product .phm-card-spec {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  min-block-size: 1.4em;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}
/* price: 18/700; sale = new price in brand blue, old price 14px muted,
   struck through, same line, 8px gap */
.woocommerce ul.products li.product .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--phm-color-text);
  white-space: normal;
}
.woocommerce ul.products li.product .price ins {
  order: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--phm-color-primary);
  text-decoration: none;
  background: none;
}
.woocommerce ul.products li.product .price del {
  order: 1;
  font-size: 14px;
  font-weight: 400;
  color: var(--phm-color-text-muted);
  opacity: 1;
  text-decoration: line-through;
}
.woocommerce ul.products li.product .price bdi {
  white-space: nowrap;
}
.woocommerce ul.products li.product .stock {
  font-size: 13px;
  margin: 4px 0 12px;
}
.woocommerce ul.products li.product > a.button.add_to_cart_button,
.woocommerce ul.products li.product > a.button.product_type_variable {
  margin-block-start: auto;
  inline-size: 100%;
  box-sizing: border-box;
  min-block-size: 44px;
  font-size: 15px;
  font-weight: 600;
  line-height: 44px;
  padding-block: 0;
  text-align: center;
  border-radius: 8px;
}
/* sale badge pinned to the image's inline-start corner (mirrors in RTL) */
.woocommerce ul.products li.product .ast-onsale-card,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  inset-inline-end: auto;
  left: auto;
  right: auto;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
}
[dir="rtl"] .woocommerce ul.products li.product .ast-onsale-card,
[dir="rtl"] .woocommerce ul.products li.product .onsale {
  right: 20px;
}
[dir="ltr"] .woocommerce ul.products li.product .ast-onsale-card,
[dir="ltr"] .woocommerce ul.products li.product .onsale {
  left: 20px;
}

/* ---- Mobile cards (<544px): 3-line title, no spec line ------------------ */
@media (max-width: 543px) {
  .woocommerce ul.products[class*="columns-"] {
    column-gap: 12px;
    row-gap: 12px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    -webkit-line-clamp: 3;
    min-block-size: 4.05em;
  }
  .woocommerce ul.products li.product .phm-card-spec {
    display: none;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .price ins {
    font-size: 16px;
  }
}
@media (min-width: 544px) and (max-width: 1023px) {
  .woocommerce ul.products[class*="columns-"] {
    column-gap: 16px;
    row-gap: 16px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .woocommerce ul.products[class*="columns-"] {
    column-gap: 20px;
    row-gap: 20px;
  }
}

/* ---- Home: compact hero, trust strip below it, never a partial row ------ */
.phm-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: start;
  padding-block: 24px 16px;
}
.phm-hero__text {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.phm-hero__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 4px;
}
.phm-hero__subtitle {
  margin: 0;
  max-inline-size: none;
  margin-inline: 0;
}
.phm-hero__cta {
  flex: none;
  margin: 0;
  min-block-size: 44px;
  box-sizing: border-box;
  line-height: 28px;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .phm-hero {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 12px;
    padding-block: 16px 12px;
  }
  .phm-hero__cta {
    align-self: center;
  }
}
@media (max-width: 767px) {
  .phm-hero__title {
    font-size: 24px;
  }
}
.phm-category-tiles {
  margin-block-end: 16px;
}
.phm-trust-strip {
  margin-inline: 0;
  padding: 8px 0;
  margin-block: 0 24px;
}
.phm-home-row {
  margin-block-end: 48px;
}
.phm-home-row__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-block-end: 16px;
}
@media (max-width: 767px) {
  .phm-home-row {
    margin-block-end: 32px;
  }
}
/* 3-column band (900–1199px): keep rows full — 8-card rows show 6, the
   4-card deals row shows 3. */
@media (min-width: 900px) and (max-width: 1199px) {
  .woocommerce ul.products.phm-home-row__grid--8 > li.product:nth-child(n + 7),
  .woocommerce ul.products.phm-home-row__grid--4 > li.product:nth-child(n + 4) {
    display: none !important;
  }
}

/* ---- Archive header + one-row filter toolbar ---------------------------- */
/* Astra gives `#primary` a 64px top margin (4em) — on the listing pages that
   alone pushed the first product row ~60px lower than the fold allows. */
body.phm-product-grid-page #primary,
body.home #primary {
  margin-block-start: 16px;
}
.ast-archive-description {
  padding: 0;
  margin: 24px 0 16px; /* ALF-577 G-6: one page-H1 spacing rule */
  border: 0;
  text-align: start;
}
html body.archive .ast-archive-description .ast-archive-title,
html body.search .ast-archive-description .ast-archive-title,
html body .woocommerce-products-header__title.page-title {
  font-size: var(--phm-fs-h1);
  font-weight: 700;
  line-height: var(--phm-lh-h1);
  margin: 0;
  text-align: start;
}
.ast-archive-description p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--phm-color-text-muted);
}
.woocommerce-products-header {
  margin: 24px 0 16px; /* ALF-577 G-6 */
  padding: 0;
}
/* the search banner's one-line filler description costs a row of the fold */
body.search .ast-archive-description p {
  display: none;
}
.phm-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-block-size: 48px;
  margin: 0 0 16px;
}
.phm-toolbar .woocommerce-result-count {
  order: 3;
  margin: 0;
  margin-inline-start: auto;
  font-size: 14px;
  color: var(--phm-color-text-muted);
}
.phm-toolbar .woocommerce-ordering {
  order: 4;
  margin: 0;
  float: none;
}
.phm-toolbar .woocommerce-ordering select.orderby {
  block-size: 40px;
  min-block-size: 40px;
  padding-block: 0;
  font-size: 14px;
  border: 1px solid var(--phm-color-border);
  border-radius: 8px;
  background-color: #fff;
}
.phm-toolbar .phm-filter-toggle {
  order: 2;
  margin: 0;
}
@media (min-width: 769px) {
  .phm-toolbar #secondary.phm-shop-filters {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    border-radius: 0;
    inline-size: auto;
    float: none;
  }
  .phm-toolbar #secondary.phm-shop-filters .widget {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
}
.phm-filter-pop {
  position: relative;
}
.phm-filter-pop > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 40px;
  box-sizing: border-box;
  padding-inline: 14px;
  margin: 0;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--phm-color-text);
  border: 1px solid var(--phm-color-border);
  border-radius: 8px;
  background: #fff;
}
.phm-filter-pop > summary::-webkit-details-marker {
  display: none;
}
.phm-filter-pop > summary::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.phm-filter-pop[open] > summary {
  border-color: var(--phm-color-primary);
  color: var(--phm-color-primary);
}
.phm-filter-pop__body {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  min-inline-size: 260px;
  max-block-size: 360px;
  overflow: auto;
  padding: 12px 16px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--phm-color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.phm-filter-pop__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phm-filter-pop__body li a {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  color: var(--phm-color-text);
}
.phm-filter-pop__body li a:hover {
  color: var(--phm-color-primary);
}
.phm-filter-pop__body li.current-cat > a {
  font-weight: 700;
  color: var(--phm-color-primary);
}
.phm-stock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  block-size: 40px;
  box-sizing: border-box;
  padding-inline: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--phm-color-text);
  border: 1px solid var(--phm-color-border);
  border-radius: 8px;
  background: #fff;
}
.phm-stock-toggle__track {
  position: relative;
  inline-size: 32px;
  block-size: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}
.phm-stock-toggle__track::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: #fff;
  transition: inset-inline-start 0.15s ease;
}
.phm-stock-toggle.is-on {
  border-color: var(--phm-color-primary);
}
.phm-stock-toggle.is-on .phm-stock-toggle__track {
  background: var(--phm-color-primary);
}
.phm-stock-toggle.is-on .phm-stock-toggle__track::after {
  inset-inline-start: 16px;
}
@media (max-width: 768px) {
  .phm-toolbar .woocommerce-result-count {
    order: 1;
    flex: 1 1 100%;
    margin-inline-start: 0;
  }
  .phm-toolbar .phm-filter-toggle {
    order: 2;
    margin-inline-start: 0;
    block-size: 40px;
    min-block-size: 40px;
    padding-block: 0;
  }
  .phm-toolbar .woocommerce-ordering {
    order: 3;
    margin-inline-start: auto;
  }
  .phm-toolbar #secondary.phm-sidebar-open {
    order: 5;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #secondary .phm-filter-pop > summary {
    inline-size: 100%;
    justify-content: space-between;
  }
  #secondary .phm-filter-pop__body {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 8px 4px;
    max-block-size: none;
  }
  #secondary .phm-stock-toggle {
    inline-size: 100%;
    box-sizing: border-box;
  }
}

/* ---- Empty search / empty cart ------------------------------------------ */
.phm-empty-search {
  margin-block-start: 24px;
}
.phm-empty-search__title {
  font-size: 22px;
  font-weight: 600;
  margin: 24px 0 12px;
}
.phm-empty-search .phm-category-tiles {
  justify-content: flex-start;
}
.wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding-block: 48px;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
}
/* `!important`: Astra's `.woocommerce a.button` / link rules (specificity
   0,2,1+) otherwise repaint the CTA in Astra's default blue, underlined. */
a.phm-cta,
.woocommerce a.button.phm-cta {
  display: inline-block;
  min-block-size: 44px;
  box-sizing: border-box;
  padding: 0 28px;
  line-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  background: var(--phm-color-primary) !important;
  border-radius: 8px;
  text-decoration: none !important;
}
a.phm-cta:hover,
.woocommerce a.button.phm-cta:hover {
  background: var(--phm-color-primary-dark) !important;
}
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
  inline-size: 64px;
  block-size: 64px;
  -webkit-mask-size: 64px;
  mask-size: 64px;
  margin-block-end: 16px;
  background-color: var(--phm-color-text-muted);
}

/* ---- Product page ------------------------------------------------------- */
.single-product div.product .product_title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}
.single-product div.product .single-product-category {
  display: block;
  font-size: 13px;
  margin: 0 0 4px;
}
.single-product div.product .single-product-category a {
  color: var(--phm-color-text-muted);
  text-decoration: none;
}
.single-product div.product p.price {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}
.single-product div.product .woocommerce-product-gallery {
  max-inline-size: 560px;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  background: var(--phm-color-surface);
  border-radius: 12px;
  overflow: hidden;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
}
@media (min-width: 922px) {
  .single-product div.product .summary.entry-summary {
    position: sticky;
    inset-block-start: 24px;
    align-self: flex-start;
  }
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-size: 22px;
  font-weight: 600;
  margin-block: 32px 16px;
}
@media (max-width: 767px) {
  .single-product div.product .product_title {
    font-size: 22px;
  }
}

/* ---- Order received ------------------------------------------------------ */
.woocommerce-order .woocommerce-thankyou-order-received {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
}
.woocommerce-order .woocommerce-thankyou-order-received::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.phm-continue-shopping {
  margin: 24px 0 0;
  text-align: start;
}
html body.woocommerce-order-received h1.entry-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

/* ---- WhatsApp bubble on small screens (ALF-488 #17) --------------------- */
@media (max-width: 1023px) {
  .qlwapp__button--bubble {
    inline-size: 48px !important;
    block-size: 48px !important;
  }
  .qlwapp__container,
  .phm-product-grid-page .qlwapp__container {
    /* the plugin's container has 24px of internal bottom padding around the
       48px bubble, so -8px puts the bubble itself 16px from the viewport edge */
    inset-block-end: -8px !important;
  }
  .site-footer {
    padding-block-end: 80px;
  }
}

/* =====================================================================
   ALF-510 — round 3 CSS (ALF-507 N2 N3 N6 N7 N8)
   ===================================================================== */

/* N2: pharaohms_bdi_latin_runs() writes `<bdi style="white-space:nowrap">`
   around every Latin run so part numbers stay on one line. Inside a PDP
   title that makes a long EN name (PLA filament, MPU6050...) run past the
   column and the viewport. Titles wrap; nowrap stays on card specs. */
.single-product h1.product_title,
.single-product h1.product_title bdi,
.single-product .entry-title,
.single-product .entry-title bdi {
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

/* N3: between 922 and 1279 the 8 category links + switcher are wider than
   the row. Never break inside a link; tighten padding/font so the row fits
   in one line, and if a language still overflows, wrap between items. */
@media (min-width: 922px) and (max-width: 1279px) {
  .ast-below-header-wrap .main-header-menu {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .ast-below-header-wrap .main-header-menu .menu-item,
  .ast-below-header-wrap .main-header-menu .menu-link {
    white-space: nowrap;
  }
  .ast-below-header-wrap .main-header-menu .menu-link {
    padding: 0 5px;
    font-size: 13px;
  }
}

/* N6: the WhatsApp bubble is fixed to the physical right at <1024; Astra's
   scroll-to-top is on the physical right in EN (left in AR) and sat under
   it. Pin scroll-to-top to the physical left in both directions. */
@media (max-width: 1023px) {
  html body #ast-scroll-top.ast-scroll-top-icon {
    left: 16px !important;
    right: auto !important;
    inset-block-end: 16px !important;
  }
}

/* N7: flex `center` on an overflowing scroller pushes the first pill off the
   start edge, out of reach of scrolling. Start-align on small screens. */
@media (max-width: 768px) {
  .phm-empty-state-pills {
    justify-content: flex-start;
  }
}

/* N8: Astra paints its default #046BD2 as a 2px border on the header cart
   box; use the brand blue. */
.ast-site-header-cart .ast-addon-cart-wrap {
  border-color: var(--phm-color-primary);
}
/* ALF-516a: AR labels are wider than EN; at 1024-1119 the switcher wrapped to
   a second row. Drop the link padding + switcher margin so all 9 items fit
   on one row (measured: no wrap at 1024/1060/1099/1100). */
@media (min-width: 922px) and (max-width: 1119px) {
  html[dir="rtl"] .ast-below-header-wrap .main-header-menu {
    column-gap: 0;
  }
  html[dir="rtl"] .ast-below-header-wrap .main-header-menu .menu-link {
    padding: 0 5px;
    font-size: 12.5px;
  }
}

/* ALF-516b: scroll-to-top was 32x31 on mobile; 44x44 tap target, still in the
   opposite corner from the WhatsApp bubble. */
@media (max-width: 1023px) {
  html body #ast-scroll-top.ast-scroll-top-icon {
    inline-size: 44px;
    block-size: 44px;
    /* Astra's JS toggles inline display:block/none, so flex centering never applies; centre via line-height. */
    line-height: 44px;
    text-align: center;
  }
}

/* ALF-516a: balance the home hero heading so "مصر" isn't orphaned. */
.home h1 {
  text-wrap: balance;
}

/* ---------- ALF-562: mobile header (<= Astra's 921px breakpoint) ----------
   Row 1: logo at the start edge (right in AR, left in EN), cart + hamburger
   at the end edge. Row 2: a real full-width FiboSearch field instead of a
   lone magnifier on a grey band. Total height ~112px at 390px. Desktop
   header is untouched (everything is scoped to #ast-mobile-header). */
@media (max-width: 921px) {
  #ast-mobile-header .ast-primary-header-bar {
    min-block-size: 56px;
  }
  #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row {
    min-block-size: 56px;
    align-items: center;
  }
  #ast-mobile-header .site-header-primary-section-left {
    justify-content: flex-start;
    align-items: center;
  }
  #ast-mobile-header .site-header-primary-section-right {
    align-items: center;
    gap: 0;
  }
  #ast-mobile-header .site-branding {
    padding-block: 0;
  }
  /* Astra re-applies a responsive 14.6px inline padding to the logo span on
     mobile that beats the ALF-385 `.site-logo-img` reset above. */
  #ast-mobile-header .site-branding .site-logo-img {
    display: block;
    padding: 0;
    line-height: 0;
  }
  #ast-mobile-header .ast-primary-header-bar {
    border-block-end: 0;
  }
  #ast-mobile-header .custom-logo {
    display: block;
    inline-size: 188px;
    block-size: auto;
    max-inline-size: none;
  }
  /* The lockup SVG carries ~23% empty canvas after the wordmark. In RTL that
     blank lands on the start (right) edge, so the wordmark floated ~50px off
     the edge; pull the box out so the wordmark itself sits flush. */
  html[dir="rtl"] #ast-mobile-header .custom-logo {
    margin-inline-start: -43px;
  }
  #ast-mobile-header {
    overflow-x: clip;
  }

  /* Cart: Astra's "outline" style paints the count as a bordered bag (a
     stuck-looking blue box with an invisible white count). Replace with a
     plain cart glyph + count badge, 44x44 tap target. */
  #ast-mobile-header .ast-site-header-cart .cart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 8px;
  }
  /* Live Astra 4.14 markup: a.cart-container > div.ast-addon-cart-wrap >
     i.astra-icon[data-cart-total] (badge is i::after, content from the
     attribute). The wrap carries Astra's 2px outline-style border. */
  #ast-mobile-header .ast-site-header-cart .ast-addon-cart-wrap,
  #ast-mobile-header .ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap {
    position: relative;
    display: block;
    inline-size: 44px;
    block-size: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  #ast-mobile-header .ast-site-header-cart i.astra-icon {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }
  #ast-mobile-header .ast-site-header-cart i.astra-icon > svg {
    display: none;
  }
  #ast-mobile-header .ast-site-header-cart i.astra-icon::before {
    content: "";
    position: absolute;
    inset: 10px;
    background-color: var(--phm-color-primary);
    -webkit-mask: var(--phm-cart-icon) center / contain no-repeat;
    mask: var(--phm-cart-icon) center / contain no-repeat;
  }
  #ast-mobile-header .ast-site-header-cart i.astra-icon::after {
    content: attr(data-cart-total);
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: auto;
    inset-inline-end: 1px;
    inset-block-end: auto;
    left: auto;
    right: auto;
    top: 3px;
    min-inline-size: 18px;
    block-size: 18px;
    margin: 0;
    padding: 0 5px;
    border: 0;
    border-radius: 9px;
    box-shadow: none;
    background: var(--phm-color-primary);
    color: #fff;
    font: 600 11px/18px var(--phm-font-latin);
    text-align: center;
    box-sizing: border-box;
  }
  html[dir="rtl"] #ast-mobile-header .ast-site-header-cart i.astra-icon::after {
    inset-inline-end: auto;
    left: 1px;
  }
  html:not([dir="rtl"]) #ast-mobile-header .ast-site-header-cart i.astra-icon::after {
    right: 1px;
  }
  /* No badge on an empty cart. */
  #ast-mobile-header .ast-site-header-cart i.astra-icon[data-cart-total="0"]::after,
  #ast-mobile-header .ast-site-header-cart i.astra-icon[data-cart-total=""]::after {
    display: none;
  }
  /* Astra paints a `thin dotted` border on the hamburger's :focus (any tap,
     not just keyboard) — the stray box. Keyboard focus keeps a real ring. */
  #ast-mobile-header .ast-site-header-cart .cart-container,
  #ast-mobile-header .menu-toggle,
  #ast-mobile-header .menu-toggle:focus,
  #ast-mobile-header .ast-site-header-cart .cart-container:focus {
    outline: 0;
    border: 0;
    box-shadow: none;
  }
  #ast-mobile-header .ast-site-header-cart .cart-container:focus-visible,
  #ast-mobile-header .menu-toggle:focus-visible {
    outline: 2px solid var(--phm-color-primary);
    outline-offset: 2px;
  }

  /* Row 2: the search field, visible and full width. */
  #ast-mobile-header .ast-below-header-wrap,
  #ast-mobile-header .ast-below-header,
  #ast-mobile-header .ast-below-header-bar {
    border: 0;
  }
  #ast-mobile-header .ast-below-header-bar {
    min-block-size: 0;
    background: var(--phm-color-bg);
    border: 0;
    padding-block: 0 10px;
  }
  #ast-mobile-header .ast-below-header-bar .ast-builder-grid-row {
    min-block-size: 0;
  }
  #ast-mobile-header .ast-below-header-bar .site-header-section {
    inline-size: 100%;
  }
  #ast-mobile-header .ast-below-header-bar .ast-search-menu-icon {
    display: block;
    inline-size: 100%;
  }
  #ast-mobile-header .ast-below-header-bar .ast-search-icon {
    display: none;
  }
  #ast-mobile-header .ast-below-header-bar .ast-search-menu-icon .search-form {
    position: relative;
    inset: auto;
    display: block;
    inline-size: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0;
    background: none;
  }
  #ast-mobile-header .dgwt-wcas-search-wrapp {
    visibility: visible;
    max-inline-size: none;
    inline-size: 100%;
  }
  #ast-mobile-header .ast-below-header-bar .ast-header-search {
    inline-size: 100%;
    flex: 1 1 100%;
  }
  #ast-mobile-header .dgwt-wcas-search-form,
  #ast-mobile-header .dgwt-wcas-sf-wrapp {
    inline-size: 100%;
    max-inline-size: none;
    padding: 0;
    background: none;
  }
  #ast-mobile-header .dgwt-wcas-search-input {
    visibility: visible;
    block-size: 44px;
    border: 1px solid var(--phm-color-border);
    border-radius: 22px;
    background: var(--phm-color-bg);
    color: var(--phm-color-text);
    font: normal 400 14px/1.4 var(--phm-font-arabic);
    padding-block: 0;
    padding-inline: 44px 16px;
    box-shadow: none;
  }
  #ast-mobile-header .dgwt-wcas-search-input::placeholder {
    color: var(--phm-color-text-muted);
    opacity: 1;
  }
  #ast-mobile-header .dgwt-wcas-search-input:focus {
    border-color: var(--phm-color-primary);
    outline: 0;
    box-shadow: 0 0 0 1px var(--phm-color-primary);
  }
  #ast-mobile-header .dgwt-wcas-search-submit {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0 auto;
    inline-size: 44px;
    block-size: 44px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #ast-mobile-header .dgwt-wcas-search-submit::before,
  #ast-mobile-header .dgwt-wcas-search-submit::after {
    display: none;
  }
  #ast-mobile-header .dgwt-wcas-ico-magnifier {
    inline-size: 18px;
    block-size: 18px;
    opacity: 1;
    fill: var(--phm-color-primary);
  }
  #ast-mobile-header .dgwt-wcas-ico-magnifier path {
    fill: var(--phm-color-primary);
  }
  #ast-mobile-header .dgwt-wcas-search-input::placeholder {
    font-style: normal;
  }
}
:root {
  --phm-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 11.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 7H6'/%3E%3C/svg%3E");
}

/* =====================================================================
   ALF-577 — design batch A (ALF-563 G-1..G-6)
   ===================================================================== */

/* G-5: 16px / 1.65 body everywhere (Astra shipped 14.59px on mobile). */
html body {
  font-size: var(--phm-fs-body);
  line-height: var(--phm-lh-body);
  color: var(--phm-color-text);
}

/* G-6: page H1 — 24/32 mobile, 32/40 >=768, start-aligned on every page
   (search was centred). Wrapper margins are set where each template's
   header lives (.entry-header, .ast-archive-description, products header). */
html body:not(.single-product):not(.home) h1.entry-title,
html body:not(.home) h1.page-title,
html body:not(.home) h1.ast-archive-title {
  font-size: var(--phm-fs-h1) !important;
  line-height: var(--phm-lh-h1) !important;
  font-weight: 700;
  text-align: start;
  margin-block: 0;
}
html body:not(.single-product):not(.home) .entry-header,
html body:not(.home) .ast-archive-description,
html body:not(.home) .woocommerce-products-header {
  margin: 24px 0 16px;
  padding: 0;
}
html body.search .ast-container section.ast-archive-description {
  margin: 24px 0 16px;
  padding: 0;
  text-align: start;
}
html body.search .ast-container section.ast-archive-description h1 {
  font-weight: 700;
}
/* Astra adds 4em above #primary on desktop and ~3em inside the archive header;
   the H1 spacing rule above replaces both. */
html body.page:not(.home) #primary,
html body.archive:not(.home) #primary,
html body.search #primary {
  margin-block-start: 0;
}

/* G-4: the few Astra/Woo colours that are hard-coded rather than tokenised. */
.woocommerce .stock,
.woocommerce div.product p.stock,
.woocommerce ul.products li.product .stock.in-stock,
.woocommerce div.product .stock.in-stock {
  color: var(--phm-color-success);
}
.woocommerce .stock.out-of-stock { color: var(--phm-color-error); }
.ast-breadcrumbs-wrapper,
.ast-breadcrumbs-wrapper a,
.ast-breadcrumbs-wrapper .ast-breadcrumbs,
html .woocommerce-js .woocommerce-breadcrumb,
html .woocommerce-js .woocommerce-breadcrumb a {
  color: #72695a; /* sand-600 */
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--phm-color-text);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--phm-color-primary-dark);
}

/* G-3 / CART-1: WooCommerce Blocks lays each cart row out as a CSS grid with
   fixed tracks (80 + 132 + 52 + 72px + 3x16px gaps = 384px), and the product
   cell spans tracks 2-3. In a 328px column the auto-layout table grows to fit
   that grid, so the row overflows and the line total is clipped. Make the
   product track flexible instead of fixed. */
@media (max-width: 767px) {
  .wc-block-cart table.wc-block-cart-items {
    width: 100%;
    max-width: 100%;
  }
  .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap: 12px;
  }
  .wc-block-cart-items .wc-block-cart-item__image { grid-column: 1; }
  .wc-block-cart-items .wc-block-cart-item__product { grid-column: 2; min-inline-size: 0; }
  .wc-block-cart-items .wc-block-cart-item__total { grid-column: 3; }
  /* ALF-757: Blocks' own rule is `grid-column: 2 / 4` at higher specificity, so
     the name ran under the line price. Pin it to the flexible track and let
     long names break instead of overflowing. */
  html body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2; }
  html body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name { overflow-wrap: anywhere; }
}

/* G-1: WhatsApp bubble. Container is 430px wide with side padding in the
   plugin; on mobile make it a bare 48px circle 16px from the corner, slide it
   away while scrolling down (shop-ux/floating-ui.js toggles .phm-wa-hidden),
   and drop it entirely on cart + checkout (sticky action bars live there). */
@media (max-width: 767px) {
  .qlwapp__container,
  .phm-product-grid-page .qlwapp__container {
    inline-size: auto !important;
    padding: 0 !important;
    left: auto !important;
    right: 16px !important;
    inset-block-end: calc(16px + env(safe-area-inset-bottom)) !important;
    transition: transform 0.2s ease;
  }
  .qlwapp__container .qlwapp__button {
    margin: 0 !important;
  }
  .qlwapp__container.phm-wa-hidden {
    transform: translateY(calc(100% + 32px));
  }
  /* room for the last element to scroll clear of the bubble */
  html body { padding-block-end: 72px; }
  .site-footer { padding-block-end: var(--phm-space-3); }
}

/* G-1 (ALF-608): hidden on cart + checkout at every width — it covers Place
   order / payment fields at >=768 as well. */
body.woocommerce-cart .qlwapp__container,
body.woocommerce-checkout .qlwapp__container {
  display: none !important;
}

/* G-2: Astra's square scroll-to-top is a second floating object that covers
   prices on mobile/tablet; hide it <=921px, restyle it on desktop. */
@media (max-width: 921px) {
  html body #ast-scroll-top { display: none !important; }
}
@media (min-width: 922px) {
  html body #ast-scroll-top.ast-scroll-top-icon {
    inline-size: 40px;
    block-size: 40px;
    line-height: 40px;
    border-radius: 999px;
    background-color: #fff;
    border: 1px solid var(--phm-color-border);
    color: var(--phm-color-primary-dark);
    box-shadow: 0 2px 8px rgba(31, 29, 25, 0.12);
  }
  html body #ast-scroll-top.ast-scroll-top-icon .ast-icon svg,
  html body #ast-scroll-top.ast-scroll-top-icon svg { fill: var(--phm-color-primary-dark); }
}

/* ALF-612: project bundles + genuine/compatible block (logical properties: RTL-safe) */
.phm-bundle,
.phm-auth {
  margin-block: var(--phm-space-3);
  padding: var(--phm-space-3);
  border: 1px solid var(--phm-color-border);
  border-radius: var(--phm-radius);
  background: var(--phm-color-surface);
}
.phm-bundle__title,
.phm-auth__title {
  margin: 0 0 var(--phm-space-2);
  font-size: 18px;
  line-height: 26px;
}
.phm-bundle__table {
  width: 100%;
  margin: 0 0 var(--phm-space-3);
  border: 0;
  border-collapse: collapse;
  font-size: var(--phm-fs-small);
  line-height: 22px;
}
.phm-bundle__table th,
.phm-bundle__table td {
  padding-block: var(--phm-space-2);
  padding-inline: 0 var(--phm-space-2);
  border: 0; /* Astra paints a full grid on content tables */
  border-block-end: 1px solid var(--phm-color-border);
  text-align: start;
  vertical-align: top;
}
.phm-bundle__table .phm-bundle__num {
  text-align: end;
  white-space: nowrap;
  padding-inline: var(--phm-space-3) 0;
}
.phm-bundle__table tfoot th,
.phm-bundle__table tfoot td {
  border-block-end: 0;
  font-weight: 700;
}
.phm-bundle__oos {
  display: inline-block;
  color: var(--phm-color-error);
  font-weight: 600;
}
.phm-bundle__row--oos a { color: var(--phm-color-text-muted); }
.phm-bundle__row--oos .amount { color: var(--phm-color-text-muted); }
.phm-ltr { white-space: nowrap; unicode-bidi: isolate; direction: ltr; }
.phm-bundle__note {
  margin: 0 0 var(--phm-space-3);
  color: var(--phm-color-warning);
  font-size: var(--phm-fs-small);
}
.phm-bundle__form { margin: 0; }
.phm-bundle__add { width: 100%; min-height: 48px; }
.phm-bundle__add[disabled] { opacity: .6; cursor: not-allowed; }
.phm-auth__badge {
  display: inline-block;
  margin: 0 0 var(--phm-space-2);
  padding: 2px var(--phm-space-2);
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: var(--phm-fs-small);
}
.phm-auth--genuine .phm-auth__badge { color: var(--phm-color-success); }
.phm-auth--compatible .phm-auth__badge { color: var(--phm-color-warning); }
.phm-auth--chip .phm-auth__badge { color: var(--phm-color-primary-dark); }
.phm-auth__text,
.phm-auth__note { margin: 0 0 var(--phm-space-1); font-size: var(--phm-fs-small); }
.phm-auth__note { color: var(--phm-color-text-muted); }

/* ALF-598: SKUs / part numbers are Latin tokens — isolate them so surrounding Arabic can't reorder the hyphens/digits. */
.product_meta .sku {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}
/* a table cell must stay display:table-cell, so no inline-block here */
.woocommerce-product-attributes-item--sku .woocommerce-product-attributes-item__value {
	direction: ltr;
	unicode-bidi: isolate;
}

/* =====================================================================
   ALF-578 — design batch B (ALF-563 CARD-1..4, HOME-1..5, LIST-1..3,
   SRCH-1..3). Token sheet values only. Logical properties throughout so AR
   (RTL) and EN (LTR) are exact mirrors.
   ===================================================================== */
:root {
  --phm-sand-100: #eeedec;
  --phm-sand-300: #c5bfb5;
  --phm-sand-600: #72695a;
  --phm-error-50: #faf4f5;
  --phm-warning-50: #fbf8f4;
}

/* ---- CARD-3: compact card (361 -> ~280px at 390) ------------------------ */
html :is(body.woocommerce, body .woocommerce) ul.products[class*="columns-"] {
  column-gap: 12px;
  row-gap: 12px;
}
html :is(body.woocommerce, body .woocommerce) ul.products[class*="columns-"] li.product {
  padding: 10px;
  border: 1px solid var(--phm-color-border);
  border-radius: 12px;
  box-shadow: none;
}
html :is(body.woocommerce, body .woocommerce) ul.products[class*="columns-"] li.product:hover {
  box-shadow: none;
  border-color: var(--phm-sand-300);
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product a img {
  inline-size: 100%;
  block-size: auto;
  box-sizing: border-box;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain;
  padding: 8% 14%;
  margin: 0 0 8px;
  border-radius: 8px;
  background: var(--phm-color-surface);
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  overflow: hidden;
  min-block-size: 42px !important;
  max-block-size: 42px;
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  color: var(--phm-color-text);
  /* ALF-708: Astra left-aligns the title; follow the writing direction so it
     shares the price/badge reading edge under dir=rtl */
  text-align: start;
}
/* CARD-4: the one-line spec was cut mid-word; the title says it. */
html :is(body.woocommerce, body .woocommerce) ul.products li.product .phm-card-spec {
  display: none;
}

/* ---- CARD-2: one price style -------------------------------------------- */
html :is(body.woocommerce, body .woocommerce) ul.products li.product .price,
html :is(body.woocommerce, body .woocommerce) ul.products li.product .price ins {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--phm-color-primary-dark);
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product .price {
  gap: 0 6px;
  margin: 4px 0 8px;
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product .price del,
html :is(body.woocommerce, body .woocommerce) ul.products li.product .price del .woocommerce-Price-amount {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--phm-sand-600);
}
@media (min-width: 768px) {
  html :is(body.woocommerce, body .woocommerce) ul.products li.product .price,
  html :is(body.woocommerce, body .woocommerce) ul.products li.product .price ins {
    font-size: 18px;
  }
}

/* sale badge: computed "خصم N%", error-700 on error-50, top-start of the image */
html :is(body.woocommerce, body .woocommerce) ul.products li.product .onsale,
html :is(body.woocommerce, body .woocommerce) ul.products li.product .ast-onsale-card,
html :is(body.woocommerce, body .woocommerce) span.onsale.phm-sale-badge {
  inset-block-start: 18px;
  min-block-size: 0;
  min-inline-size: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--phm-error-50);
  color: var(--phm-color-error);
  border: 1px solid #ecd9da;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
html[dir="rtl"] :is(body.woocommerce, body .woocommerce) ul.products li.product .onsale { right: 18px; left: auto; }
html[dir="ltr"] :is(body.woocommerce, body .woocommerce) ul.products li.product .onsale { left: 18px; right: auto; }

/* ---- CARD-1: a stock line only for the exceptions ----------------------- */
html :is(body.woocommerce, body .woocommerce) ul.products li.product .stock {
  align-self: flex-start;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 20px;
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product .stock.phm-limited-stock {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--phm-warning-50);
  color: var(--phm-color-warning);
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product .stock.out-of-stock {
  color: var(--phm-sand-600);
}
html :is(body.woocommerce, body .woocommerce) ul.products li.product > a.button {
  margin-block-start: auto;
  min-block-size: 44px;
  font-size: 14px;
  font-weight: 600;
  line-height: 44px;
  border-radius: 8px;
}
/* out of stock: the button switches to the outline style */
html :is(body.woocommerce, body .woocommerce) ul.products li.product.outofstock > a.button {
  background: #fff !important;
  color: var(--phm-color-primary-dark) !important;
  border: 1px solid var(--phm-color-primary-dark) !important;
}

/* ---- HOME-1: hero ------------------------------------------------------- */
html body .phm-hero {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 16px 24px;
  margin-block-end: 12px;
  text-align: start;
  background: var(--phm-color-surface);
  border-radius: 12px;
}
html body .phm-hero__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin: 0 0 8px;
}
html body .phm-hero__subtitle {
  max-inline-size: 36ch;
  font-size: 16px;
  line-height: 26px;
  color: var(--phm-color-text-muted);
  text-wrap: balance;
}
html body .phm-hero__cta {
  align-self: flex-start;
  inline-size: 100%;
  max-inline-size: 320px;
  min-block-size: 48px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  html body .phm-hero {
    padding: 48px 32px 32px;
    align-items: flex-start;
    text-align: start;
  }
  html body .phm-hero__title {
    font-size: 36px;
    line-height: 44px;
  }
  html body .phm-hero__cta {
    inline-size: auto;
    min-inline-size: 200px;
    align-self: flex-start;
  }
}

/* ---- HOME-4: trust strip, 3 columns, line icons -------------------------- */
html body .phm-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 32px;
  padding: 12px;
  list-style: none;
  border: 0;
  border-radius: 12px;
  background: var(--phm-color-surface);
}
html body .phm-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--phm-color-text-muted);
}
html body .phm-trust-icon {
  inline-size: 20px;
  block-size: 20px;
  color: var(--phm-color-primary-dark);
}
@media (min-width: 768px) {
  html body .phm-trust-item {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
  }
}

/* ---- HOME-5: section titles + "view all" --------------------------------- */
html body .phm-home-row {
  margin-block-end: 32px;
}
html body .phm-home-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 16px;
}
html body .phm-home-row__title {
  margin: 0;
  padding-inline-start: 8px;
  border-inline-start: 4px solid #257e7a;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--phm-color-text);
}
html body .phm-home-row__all {
  flex: none;
  font-size: 14px;
  line-height: 22px;
  color: var(--phm-color-primary-dark);
  text-decoration: none;
}
html body .phm-home-row__all:hover { text-decoration: underline; }
html body .phm-home-row__all::after {
  content: " \2190";
}
html[dir="ltr"] body .phm-home-row__all::after {
  content: " \2192";
}
@media (min-width: 768px) {
  html body .phm-home-row { margin-block-end: 48px; }
  html body .phm-home-row__title { font-size: 24px; line-height: 32px; }
}

/* ---- HOME-3: category tile grid ------------------------------------------ */
html body .phm-cat-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  html body .phm-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
html body .phm-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-block-size: 120px;
  block-size: 100%;
  padding: 16px 8px;
  box-sizing: border-box;
  border: 1px solid var(--phm-color-border);
  border-radius: 12px;
  background: var(--phm-color-surface);
  text-align: center;
  text-decoration: none;
}
html body .phm-cat-tile:hover { border-color: var(--phm-color-primary-dark); }
html body .phm-cat-tile__icon {
  inline-size: 64px;
  block-size: 64px;
  color: var(--phm-color-primary-dark);
}
html body .phm-cat-tile__name {
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--phm-color-text);
}
html body .phm-cat-tile__count {
  font-size: 13px;
  line-height: 20px;
  color: var(--phm-sand-600);
}

/* ---- shared empty state for product grids -------------------------------- */
html body .phm-empty-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  color: var(--phm-color-primary-dark);
}
html body .phm-empty-grid__msg {
  margin: 0;
  font-size: 16px;
  color: var(--phm-color-text-muted);
}

/* ---- LIST-1/2: one archive header + compact toolbar ---------------------- */
/* search term: lapis-700, quoted per language, isolated from the RTL run */
html body .ast-archive-title > span,
html body .phm-search-term {
  unicode-bidi: isolate;
  color: var(--phm-color-primary-dark);
}
html[lang^="ar"] body .ast-archive-title > span::before,
html[lang^="ar"] body .phm-search-term::before { content: "\00AB"; }
html[lang^="ar"] body .ast-archive-title > span::after,
html[lang^="ar"] body .phm-search-term::after { content: "\00BB"; }
html:not([lang^="ar"]) body .ast-archive-title > span::before,
html:not([lang^="ar"]) body .phm-search-term::before { content: "\201C"; }
html:not([lang^="ar"]) body .ast-archive-title > span::after,
html:not([lang^="ar"]) body .phm-search-term::after { content: "\201D"; }

html body .phm-toolbar {
  gap: 8px 12px;
  min-block-size: 0;
  margin: 0 0 16px;
}
html body .phm-toolbar .woocommerce-result-count {
  font-size: 13px;
  line-height: 20px;
  color: var(--phm-sand-600);
}
html body .phm-toolbar .phm-filter-toggle,
html body .phm-toolbar .woocommerce-ordering select.orderby {
  block-size: 44px;
  min-block-size: 44px;
  padding-block: 0;
  border: 1px solid var(--phm-sand-300);
  border-radius: 8px;
  background-color: #fff;
  color: var(--phm-color-text);
  font-size: 14px;
}

/* ---- LIST-3: category description + sibling chips ------------------------ */
html body .phm-cat-desc {
  max-inline-size: 60ch;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 24px;
  color: var(--phm-color-text-muted);
}
html body .phm-cat-chips {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding-block-end: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
html body .phm-cat-chip {
  flex: none;
  scroll-snap-align: start;
  padding: 0 14px;
  border: 1px solid var(--phm-color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--phm-color-text);
  font-size: 14px;
  line-height: 38px;
  white-space: nowrap;
  text-decoration: none;
}
html body .phm-cat-chip.is-current {
  background: var(--phm-color-primary-dark);
  border-color: var(--phm-color-primary-dark);
  color: #fff;
}

/* ---- SRCH-2: the single empty-search block -------------------------------- */
html body .phm-empty-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-block: 8px 32px;
  text-align: center;
}
html body .phm-empty-search > * { max-inline-size: 100%; }
html body .phm-empty-search__icon {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--phm-color-surface);
  color: var(--phm-color-primary-dark);
}
html body .phm-empty-search__heading {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
html body .phm-empty-search__hint {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--phm-color-text-muted);
}
html body .phm-empty-search__form {
  display: flex;
  gap: 8px;
  inline-size: 100%;
  max-inline-size: 480px;
}
html body .phm-empty-search__form input[type="search"] {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 48px;
  padding-inline: 12px;
  border: 1px solid var(--phm-sand-300);
  border-radius: 8px;
  font-size: 16px;
}
html body .phm-empty-search__form button {
  flex: none;
  block-size: 48px;
  padding-inline: 20px;
  border: 0;
  border-radius: 8px;
  background: var(--phm-color-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
html body .phm-empty-search__title {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
html body .phm-empty-search .phm-category-tiles { margin-block-end: 0; }
html body .phm-empty-search .products { inline-size: 100%; text-align: start; }

/* LIST-3 acceptance: first product image top <= 300px at 390. On a phone the
   category page keeps the title + sibling chips + filter/sort row above the
   fold; the description and the result count (still read by screen readers)
   give way to the products. Desktop keeps both. */
@media (max-width: 768px) {
  html body.tax-product_cat .phm-cat-desc {
    display: none;
  }
  html body.tax-product_cat .phm-toolbar .woocommerce-result-count {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html body.tax-product_cat .woocommerce-products-header {
    margin-block-end: 6px;
  }
  html body.tax-product_cat .phm-toolbar {
    margin-block-end: 6px;
  }
  html body.tax-product_cat .phm-cat-chips {
    margin-block-end: 8px;
  }
  html body.tax-product_cat .phm-cat-chip {
    line-height: 34px;
  }
}

/* =====================================================================
   ALF-579 — design batch C: product page (ALF-563 PDP-1..9). Token sheet
   values only; logical properties so AR (RTL) and EN (LTR) mirror exactly.
   ===================================================================== */
:root {
  --phm-sand-500: #8f8470;
  --phm-success-50: #f5f9f7;
}

/* PDP-6: the category already sits in the breadcrumb (and the meta line) */
html body.single-product div.product div.summary .single-product-category { display: none; }

/* ---- PDP-3: one price style, simple + variable --------------------------- */
html body.single-product div.product p.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: var(--phm-color-primary-dark);
}
html body.single-product div.product p.price ins,
html body.single-product div.product p.price > .woocommerce-Price-amount {
  color: var(--phm-color-primary-dark);
  font-weight: 700;
  text-decoration: none;
  background: none;
}
html body.single-product div.product p.price ins,
html body.single-product div.product p.price > .woocommerce-Price-amount { order: 1; font-size: inherit; line-height: inherit; }
html body.single-product div.product p.price ins .woocommerce-Price-amount { font-size: inherit; }
html body.single-product div.product p.price del { order: 2; opacity: 1; }
html body.single-product div.product p.price del,
html body.single-product div.product p.price del .woocommerce-Price-amount {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--phm-sand-600);
}
html body.single-product div.product p.price .phm-save-chip {
  order: 3;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--phm-color-success);
  background: var(--phm-success-50);
}
@media (min-width: 768px) {
  html body.single-product div.product p.price { font-size: 30px; line-height: 36px; }
}

/* ---- PDP-5: swatches — 40px disc inside a 44px hit area ------------------- */
.phm-color-swatches { gap: 12px; }
.phm-color-swatch {
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  background: none;
  border-radius: 50%;
  box-shadow: none;
}
.phm-color-swatch::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: var(--phm-swatch-hex);
  border: 1px solid var(--phm-color-border);
}
.phm-color-swatch:hover:not(:disabled)::before { border-color: var(--phm-sand-600); }
.phm-color-swatch--selected { box-shadow: none; }
.phm-color-swatch--selected::before {
  border-color: transparent;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--phm-color-primary-dark);
}
.phm-color-swatch--disabled { opacity: 1; }
.phm-color-swatch--disabled::before { opacity: 0.45; }
.phm-color-swatch--disabled::after {
  inset: 2px;
  background: linear-gradient(to bottom right, transparent 46%, var(--phm-sand-500) 46%, var(--phm-sand-500) 54%, transparent 54%);
}
.single-product form.variations_form table.variations th.label {
  padding-block-end: 4px;
  font-weight: 400;
}
.single-product .phm-swatch-value {
  font-weight: 600;
  color: var(--phm-color-text);
}
/* hint under a disabled Add to cart (hidden otherwise); flashes when the sticky bar sends the user to the swatches */
.single-product .phm-atc-hint {
  display: none;
  flex-basis: 100%;
  margin: -4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--phm-sand-600);
}
.single-product .single_add_to_cart_button.disabled ~ .phm-atc-hint { display: block; }
.single-product .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
.single-product form.phm-needs-choice .phm-color-swatches { outline: 2px solid var(--phm-color-primary-dark); outline-offset: 4px; border-radius: 8px; }
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed { opacity: 0.5; }

/* ---- PDP-7: quantity stepper ---------------------------------------------- */
.single-product form.cart .quantity.phm-qty {
  display: inline-flex;
  align-items: stretch;
  direction: ltr; /* − always left, + always right, in both languages */
  inline-size: 132px;
  block-size: 44px;
  margin: 0;
  border: 1px solid var(--phm-sand-300);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.single-product .phm-qty input.qty {
  flex: 1 1 auto;
  min-inline-size: 0;
  inline-size: auto;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  text-align: center;
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.single-product .phm-qty input.qty::-webkit-outer-spin-button,
.single-product .phm-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .phm-qty__btn {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--phm-color-primary-dark);
  background: var(--phm-color-surface);
  cursor: pointer;
}
.single-product .phm-qty__btn:hover { background: var(--phm-sand-100); }
.single-product .phm-qty__btn:focus-visible { outline: 2px solid var(--phm-color-primary-dark); outline-offset: -2px; }

/* the form row: qty + button (+ hint) on one line */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.single-product form.cart .single_add_to_cart_button { min-block-size: 44px; border-radius: 8px; }

/* ---- PDP-1: trust box ------------------------------------------------------ */
.phm-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--phm-color-border);
  border-radius: 12px;
  display: grid;
  gap: 12px;
}
.phm-trust li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--phm-color-text);
}
.phm-trust__icon { flex: none; margin-block-start: 1px; color: var(--phm-color-primary-dark); }
.phm-trust__more { display: block; }
.phm-trust a { color: var(--phm-color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.phm-trust a:hover { color: #183167; }
html body.single-product div.product div.summary .product_meta { margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--phm-sand-100); }

/* ---- PDP-4: tabs — accordion on phones, underline tabs from 768 ---------- */
html body.single-product #content div.product .woocommerce-tabs { margin-block-start: 32px; }
@media (max-width: 767px) {
  html body.single-product #content div.product .woocommerce-tabs.wc-tabs-wrapper {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--phm-color-border);
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs { display: contents; }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-block-end: 1px solid var(--phm-color-border);
    background: none;
    border-radius: 0;
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li::before,
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li::after { display: none; }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 52px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--phm-color-text);
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li a::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li.active a { color: var(--phm-color-text); }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li.active a::after { transform: rotate(-135deg); }
  html body.single-product #content div.product .woocommerce-tabs .wc-tab {
    padding: 0 0 16px;
    margin: 0;
    border-block-end: 1px solid var(--phm-color-border);
  }
  /* tab title, then its panel: description, additional information, reviews */
  html body.single-product #content div.product .woocommerce-tabs .description_tab { order: 1; }
  html body.single-product #content div.product .woocommerce-tabs .wc-tab--description,
  html body.single-product #content div.product .woocommerce-tabs #tab-description { order: 2; }
  html body.single-product #content div.product .woocommerce-tabs .additional_information_tab { order: 3; }
  html body.single-product #content div.product .woocommerce-tabs #tab-additional_information { order: 4; }
  html body.single-product #content div.product .woocommerce-tabs .reviews_tab { order: 5; }
  html body.single-product #content div.product .woocommerce-tabs #tab-reviews { order: 6; }
}
@media (min-width: 768px) {
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs {
    display: flex;
    gap: 24px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    border-block-end: 1px solid var(--phm-color-border);
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs::before,
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs::after { display: none; }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li::before,
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li::after { display: none; }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li a {
    display: block;
    padding: 12px 0;
    margin-block-end: -1px;
    border-block-end: 2px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--phm-color-text);
  }
  html body.single-product #content div.product .woocommerce-tabs ul.wc-tabs li.active a {
    color: var(--phm-color-primary-dark);
    border-block-end-color: var(--phm-color-primary-dark);
  }
}

/* ---- PDP-6: description + specs (markup from the ALF-597 mu-plugin) ------- */
.phm-desc { display: grid; gap: 24px; }
.phm-desc:empty,
.phm-desc__specs:empty { display: none; }
.phm-desc__specs { max-inline-size: 640px; }
.phm-desc__intro p { margin: 0; font-size: 16px; line-height: 28px; }
.phm-desc h2, .phm-desc h3 { margin: 0 0 8px; font-size: 18px; line-height: 26px; font-weight: 600; }
.phm-desc ul { margin: 0; padding-inline-start: 20px; }
.phm-desc li { margin-block-end: 4px; }
.phm-specs { inline-size: 100%; border-collapse: collapse; border: 0; }
.phm-specs th,
.phm-specs td {
  block-size: 44px;
  padding: 8px 0;
  border: 0;
  border-block-end: 1px solid var(--phm-sand-100);
  vertical-align: middle;
  text-align: start;
  background: none;
}
.phm-specs th { inline-size: 40%; padding-inline-end: 12px; font-size: 14px; font-weight: 400; color: var(--phm-sand-600); }
.phm-specs td { font-family: var(--phm-font-mono); font-size: 15px; color: var(--phm-color-text); }
.phm-desc__datasheet { margin: 0; }
.phm-desc__datasheet a { color: var(--phm-color-primary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---- PDP-8: gallery 4:3, illustration at most 70% of the well ------------- */
html body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  aspect-ratio: 4 / 3;
}
html body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  padding: 15%;
}
.phm-single-image .woocommerce-product-gallery__image a { pointer-events: none; cursor: default; }
.phm-single-image .woocommerce-product-gallery__trigger { display: none !important; }

/* ---- PDP-2: sticky add-to-cart bar (phones) ------------------------------- */
.phm-sticky-atc { display: none; }
@media (max-width: 767px) {
  .phm-sticky-atc:not([hidden]) {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    block-size: calc(64px + env(safe-area-inset-bottom));
    padding: 0 16px env(safe-area-inset-bottom);
    background: #fff;
    border-block-start: 1px solid var(--phm-color-border);
    box-shadow: 0 -2px 8px rgba(31, 29, 25, 0.08);
  }
  .phm-sticky-atc__price {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--phm-color-primary-dark);
  }
  .phm-sticky-atc__price del { font-size: 13px; font-weight: 400; color: var(--phm-sand-600); }
  .phm-sticky-atc__price ins { text-decoration: none; background: none; }
  .phm-sticky-atc__price .screen-reader-text { display: none; }
  .phm-sticky-atc__btn {
    min-inline-size: 160px;
    block-size: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--phm-color-primary);
    cursor: pointer;
  }
  /* G-1: the bubble would sit on the bar; the trust box has its own WhatsApp link */
  body.phm-sticky-atc-on .qlwapp__container { display: none !important; }
  body.phm-sticky-atc-on { padding-block-end: 88px; }
}

/* ---- ALF-654: PDP follow-ups ---------------------------------------------- */
/* The absolute sale badge pokes 8px above #primary; below 1280 #primary has no top margin, so the header covered it. */
@media (max-width: 1279px) {
  html body.single-product.woocommerce.woocommerce-page #primary { margin-block-start: 24px; }
}
/* Arabic spec values (e.g. "1 كيلوجرام") fall back to a disconnected face in the mono font — use the body font in RTL. */
[dir="rtl"] .phm-specs td { font-family: inherit; }
/* The clearfix ::before/::after of form.cart become flex items, and the 12px gap pushed the qty stepper in from the column edge. */
html body.single-product div.product form.cart::before,
html body.single-product div.product form.cart::after { content: none; display: none; }

/* =====================================================================
   ALF-580 — design batch D: cart, checkout, account, 404, mobile menu,
   trust footer, Contact/About (ALF-563 CART/CO/ACC/404/NAV/FOOT/X-1).
   Token sheet values only; logical properties so AR (RTL) and EN (LTR)
   mirror exactly.
   ===================================================================== */
:root {
  --phm-lapis-50: #f5f6fa;
  --phm-lapis-500: #3063cf;
  --phm-sand-50: #f8f7f7;
  --phm-sand-200: #dddad4;
  --phm-sand-700: #5b5448;
  --phm-sand-800: #474238;
  --phm-sand-900: #332f29;
}

/* ---- CART-2: line item sizes ---------------------------------------------- */
html body .wp-block-woocommerce-cart .wc-block-cart-items .wc-block-cart-item__product .wc-block-components-product-name {
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--phm-sand-900);
  text-decoration: none;
}
html body .wc-block-cart-items .wc-block-components-product-metadata__description { display: none; }
html body .wc-block-cart-items .wc-block-components-product-price,
html body .wc-block-cart-items .wc-block-cart-item__prices { font-size: 14px; line-height: 20px; color: var(--phm-sand-700); }
html body .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  min-inline-size: 44px;
  min-block-size: 44px;
}

/* ---- CART-3: brand empty cart --------------------------------------------- */
html body .wp-block-woocommerce-empty-cart-block { padding-block: 32px 0; }
.phm-empty-cart__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 96px;
  block-size: 96px;
  border-radius: 50%;
  background: var(--phm-lapis-50);
  color: var(--phm-color-primary-dark);
  margin-block-end: 16px;
}
html body .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}
.phm-empty-cart__line {
  font-size: 15px;
  line-height: 22px;
  color: var(--phm-sand-700);
  margin: 0 0 16px;
}
.phm-trending { text-align: start; margin-block-start: 48px; }
.phm-trending__title,
html body .phm-trending__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--phm-sand-900);
  margin: 0 0 16px;
}
.phm-trending ul.products { margin-block-end: 0; }

/* ---- CO-1/3/4: checkout reassurance, guest note, rate preview ----------------- */
.phm-co-assure {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--phm-sand-700);
}
.phm-co-assure li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.phm-co-assure svg { flex: none; color: var(--phm-color-primary-dark); }
.phm-guest-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--phm-sand-700);
}
.phm-rates-preview {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--phm-sand-700);
}
.phm-rates-preview strong { color: var(--phm-sand-900); font-weight: 600; }
/* the "enter your address" placeholder gives way to the rate list above; real rates (radios) replace both */
.wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-shipping-rates-control:not(:has(.wc-block-components-radio-control)) { display: none; }
/* once real rates exist the preview is redundant */
.wp-block-woocommerce-checkout-shipping-methods-block:has(.wc-block-components-radio-control) .phm-rates-preview { display: none; }

/* ---- ACC-1: account forms on brand tokens ------------------------------------ */
html body.woocommerce-account .woocommerce form .form-row,
html body.woocommerce-account .woocommerce form p.woocommerce-form-row { margin-block-end: 16px; padding: 0; }
html body.woocommerce-account .woocommerce form label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--phm-sand-900);
  margin-block-end: 6px;
}
html body.woocommerce-account .woocommerce form .required {
  font-size: 0;
  text-decoration: none;
}
html body.woocommerce-account .woocommerce form .required::after {
  content: "(مطلوب)";
  font-size: 13px;
  font-weight: 400;
  color: var(--phm-color-text-muted);
  margin-inline-start: 4px;
}
html[lang^="en"] body.woocommerce-account .woocommerce form .required::after { content: "(required)"; }
html body.woocommerce-account .woocommerce form input.input-text,
html body.woocommerce-account .woocommerce form input[type="password"],
html body.woocommerce-account .woocommerce form input[type="text"],
html body.woocommerce-account .woocommerce form input[type="email"] {
  block-size: 48px;
  inline-size: 100%;
  box-sizing: border-box;
  padding-inline: 14px;
  font-size: 16px;
  color: var(--phm-sand-900);
  background: #fff;
  border: 1px solid var(--phm-sand-300);
  border-radius: 8px;
  box-shadow: none;
}
html body.woocommerce-account .woocommerce form input:focus {
  outline: 2px solid var(--phm-lapis-500);
  outline-offset: 0;
  border-color: var(--phm-lapis-500);
}
html body.woocommerce-account .woocommerce form .password-input { display: block; }
html body.woocommerce-account .woocommerce form .show-password-input { display: none; }
html body.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  margin: 0;
  font-weight: 400;
  font-size: 15px;
  color: var(--phm-sand-700);
}
html body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] { inline-size: 20px; block-size: 20px; margin: 0; flex: none; }
html body.woocommerce-account .woocommerce-form-login__submit,
html body.woocommerce-account .woocommerce-form-register__submit {
  display: block;
  inline-size: 100%;
  min-block-size: 48px;
  float: none;
}
html body.woocommerce-account .woocommerce-LostPassword { text-align: center; margin: 16px 0 0; font-size: 14px; }
html body.woocommerce-account .woocommerce-LostPassword a { color: var(--phm-color-primary-dark); }

/* ---- ACC-2: login / register as segmented tabs on mobile ----------------------- */
.phm-acct-intro { margin-block-end: 16px; }
.phm-acct-why { margin: 0 0 12px; font-size: 15px; line-height: 22px; color: var(--phm-sand-700); }
.phm-acct-tabs { display: none; }
@media (max-width: 767px) {
  .phm-acct-tabs {
    display: flex;
    border-block-end: 1px solid var(--phm-sand-200);
  }
  .phm-acct-tabs [role="tab"] {
    flex: 1;
    min-block-size: 44px;
    padding: 0 8px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--phm-sand-700);
    background: none;
    border: 0;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    cursor: pointer;
  }
  .phm-acct-tabs [aria-selected="true"] { color: var(--phm-color-primary-dark); border-block-end-color: var(--phm-color-primary-dark); }
  #customer_login.phm-tabs-on > .col-1,
  #customer_login.phm-tabs-on > .col-2 { float: none; inline-size: 100%; max-inline-size: none; }
  #customer_login.phm-tabs-on[data-phm-tab="login"] > .col-2,
  #customer_login.phm-tabs-on[data-phm-tab="register"] > .col-1 { display: none; }
  #customer_login.phm-tabs-on > div > h2 { display: none; }
  /* ALF-737: same layout in the first paint (PHP prints data-phm-tab on the intro; body.woocommerce-js is set before
     first paint, so no-JS visitors keep both forms). Once JS adds .phm-tabs-on the rules above take over. */
  body.woocommerce-js .phm-acct-intro + #customer_login > .col-1,
  body.woocommerce-js .phm-acct-intro + #customer_login > .col-2 { float: none; inline-size: 100%; max-inline-size: none; }
  body.woocommerce-js .phm-acct-intro + #customer_login > div > h2 { display: none; }
  body.woocommerce-js .phm-acct-intro[data-phm-tab="login"] + #customer_login:not(.phm-tabs-on) > .col-2,
  body.woocommerce-js .phm-acct-intro[data-phm-tab="register"] + #customer_login:not(.phm-tabs-on) > .col-1 { display: none; }
}

/* ---- 404-1: brand 404 --------------------------------------------------------- */
.phm-404 { text-align: center; padding-block: 32px 0; }
.phm-404 .page-title { text-align: center; font-size: var(--phm-fs-h1); line-height: var(--phm-lh-h1); font-weight: 700; margin: 0 0 8px; color: var(--phm-sand-900); }
.phm-404__hint { margin: 0 0 24px; font-size: 15px; line-height: 22px; color: var(--phm-sand-700); }
.phm-404__form { max-inline-size: 520px; margin-inline: auto; margin-block-end: 24px; }
.phm-404 .phm-category-tiles { justify-content: center; }
.phm-404 .phm-trending { margin-block-start: 48px; }

/* ---- NAV-1: mobile menu (Astra dropdown under the header) ------------------------- */
@media (max-width: 921px) {
  #ast-mobile-header .ast-mobile-header-content { background: #fff; }
  #ast-mobile-header .main-header-menu { border: 0; }
  #ast-mobile-header .main-header-menu > .menu-item > .menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 52px;
    padding: 0 var(--phm-container-pad);
    font-size: 16px;
    font-weight: 500;
    color: var(--phm-sand-900);
    border-block-end: 1px solid var(--phm-sand-100);
    line-height: 1.3;
  }
  #ast-mobile-header .phm-nav-ico { display: inline-flex; flex: none; color: var(--phm-color-primary-dark); }
  #ast-mobile-header .phm-nav-all > .menu-link { font-weight: 600; }
  /* chevron at the end edge, mirrored in RTL */
  #ast-mobile-header .main-header-menu > .menu-item:not(.phm-lang-switch):not(.phm-nav-label) > .menu-link::after {
    content: "";
    margin-inline-start: auto;
    inline-size: 16px;
    block-size: 16px;
    background: var(--phm-sand-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[dir="rtl"] #ast-mobile-header .main-header-menu > .menu-item > .menu-link::after { transform: scaleX(-1); }
  #ast-mobile-header .phm-nav-label {
    padding: 16px var(--phm-container-pad) 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--phm-color-text-muted);
  }
  #ast-mobile-header .phm-nav-help > .menu-link { font-weight: 400; }
  #ast-mobile-header .phm-lang-switch {
    display: flex;
    margin: 16px var(--phm-container-pad);
    padding: 0;
    border: 1px solid var(--phm-sand-200);
    border-radius: 8px;
    overflow: hidden;
  }
  #ast-mobile-header .phm-lang-switch .phm-lang-switch-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-weight: 600;
    color: var(--phm-sand-700);
    background: #fff;
    text-decoration: none;
  }
  #ast-mobile-header .phm-lang-switch .phm-lang-switch-link--current { color: #fff; background: var(--phm-color-primary-dark); }
  /* dim the page behind the open menu */
  body.ast-main-header-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(31, 29, 25, 0.4);
    z-index: 998;
  }
  body.ast-main-header-nav-open #masthead { position: relative; z-index: 999; }
}

/* ---- FOOT-1/2: trust footer ---------------------------------------------------- */
.site-footer { padding-block-end: 0; background: #fff; border-block-start: 1px solid var(--phm-sand-200); }
html body { --phm-footer-bar-pad: 96px; }
.phm-footer-content { gap: 0; padding-inline: 0; }
.phm-footer-row.phm-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px 48px;
  justify-content: stretch;
  text-align: start;
  padding-block: 32px 40px;
}
.phm-footer-brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.phm-footer-logo { display: block; line-height: 0; }
.phm-footer-logo img { display: block; block-size: 28px; inline-size: auto; }
.phm-footer-promise { margin: 0; max-inline-size: 36ch; font-size: 15px; line-height: 22px; color: var(--phm-sand-700); }
.phm-footer-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; text-align: start; }
.phm-footer-col { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.phm-footer-col > .phm-footer-heading,
html body .phm-footer-heading {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--phm-sand-900);
}
.phm-footer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  background: none;
  border: 0;
  cursor: default;
}
.phm-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
html body .phm-footer-col .phm-footer-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  font-size: 15px;
  line-height: 22px;
  color: var(--phm-sand-700);
  text-decoration: none;
}
html body .phm-footer-col .phm-footer-link:hover,
html body .phm-footer-col .phm-footer-link:focus-visible { color: var(--phm-color-primary-dark); text-decoration: underline; }
.phm-footer-wa { gap: 6px; }
.phm-footer-wa__num { font-weight: 600; color: var(--phm-sand-900); unicode-bidi: isolate; }
.phm-footer-row.phm-footer-copyright {
  position: relative;
  isolation: isolate;
  justify-content: flex-start;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  padding-block: 16px var(--phm-footer-bar-pad);
  font-size: 13px;
  line-height: 20px;
  color: var(--phm-color-text-muted);
  text-align: start;
}
/* sand-50 bar runs edge to edge */
.phm-footer-row.phm-footer-copyright::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  background: var(--phm-sand-50);
  border-block-start: 1px solid var(--phm-sand-200);
  z-index: -1;
}
.phm-cod-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--phm-color-success);
  background: #fff;
  border: 1px solid var(--phm-sand-200);
  border-radius: 999px;
}
@media (max-width: 767px) {
  html body { --phm-footer-bar-pad: 88px; padding-block-end: 0; }
  .phm-footer-content { padding-inline: var(--phm-container-pad); }
  .phm-footer-row.phm-footer-top { grid-template-columns: 1fr; gap: 16px; padding-block: 24px 16px; }
  .phm-footer-meta { grid-template-columns: 1fr; gap: 0; }
  .phm-footer-col { border-block-start: 1px solid var(--phm-sand-100); }
  .phm-footer-col > .phm-footer-heading { margin: 0; }
  .phm-footer-toggle { min-block-size: 48px; cursor: pointer; }
  .phm-footer-toggle::after {
    content: "";
    inline-size: 16px;
    block-size: 16px;
    background: var(--phm-sand-600);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s;
  }
  .phm-footer-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .phm-footer-col.is-collapsed .phm-footer-links { display: none; }
  html body .phm-footer-col .phm-footer-link { min-block-size: 44px; }
  .phm-footer-links { padding-block-end: 8px; }
}

/* ---- X-1: Contact / About pages ------------------------------------------------- */
.phm-page-lead { font-size: 18px; line-height: 28px; color: var(--phm-sand-800); margin-block-end: 16px; }
.phm-contact-cta { margin-block: 8px 32px; }
a.phm-cta.phm-wa-cta { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 240px; min-block-size: 52px; line-height: 1.2; font-size: 17px; }
.phm-fact-list { margin: 0 0 24px; padding-inline-start: 20px; }
.phm-fact-list li { margin-block-end: 8px; }
body.page:not(.woocommerce-page) .entry-content { margin-block-end: 32px; }
@media (max-width: 767px) { a.phm-cta.phm-wa-cta { inline-size: 100%; } }
/* ---- NAV-2: desktop category bar --------------------------------------------- */
@media (min-width: 922px) {
  #ast-desktop-header { position: relative; }
  /* ALF-746: the menu copy of the switcher is mobile-drawer only; desktop uses .phm-lang-switch--top in the primary row */
  html body #ast-desktop-header .main-header-menu > .phm-lang-switch { display: none; }
  html body #ast-desktop-header .ast-below-header-wrap,
  html body #ast-desktop-header .ast-below-header-bar,
  html body #ast-desktop-header .site-below-header-wrap,
  html body #ast-desktop-header .site-below-header-wrap .ast-builder-grid-row { background: #fff; }
  html body #ast-desktop-header .ast-below-header-bar { border-block-end: 1px solid var(--phm-sand-200); }
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu { gap: 24px; justify-content: flex-start; }
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu > .menu-item > .menu-link {
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--phm-sand-800);
    border-block-end: 2px solid transparent;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
  }
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu > .menu-item:hover > .menu-link { color: var(--phm-color-primary-dark); }
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu > .current-menu-item > .menu-link,
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu > .current-menu-ancestor > .menu-link,
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu > .current-product_cat-ancestor > .menu-link {
    color: var(--phm-color-primary-dark);
    border-block-end-color: var(--phm-color-primary-dark);
  }
  /* AR/EN sits in the primary row's flex flow before the search (ALF-746): no position, no z-index,
     so Astra's open search form (absolute, z 3) is always drawn above it. */
  html body #ast-desktop-header .phm-lang-switch--top {
    display: flex;
    margin: 0 12px;
    border: 1px solid var(--phm-sand-200);
    border-radius: 8px;
    overflow: hidden;
  }
  html body #ast-desktop-header .phm-lang-switch .phm-lang-switch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 40px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--phm-sand-700);
    text-decoration: none;
    background: #fff;
  }
  html body #ast-desktop-header .phm-lang-switch .phm-lang-switch-link--current { color: #fff; background: var(--phm-color-primary-dark); }
  /* ALF-766: the wrapper clips (rounded corners), so the keyboard ring is drawn inside the link, not outside it */
  html body #ast-desktop-header .phm-lang-switch .phm-lang-switch-link:focus-visible {
    outline: 3px solid #274fa5 !important; /* beats the A-01 global ring (!important) */
    outline-offset: -3px !important;
  }
  html body #ast-desktop-header .phm-lang-switch .phm-lang-switch-link--current:focus-visible { outline-color: #fff !important; }
  /* ALF-766: open slide-search shows one ring (the input pill's), not Astra's rectangular border around .search-form */
  html body #ast-desktop-header .ast-search-menu-icon.slide-search .search-form {
    border: 0;
    box-shadow: none;
    outline: 0;
  }
}
/* the AR labels are long: keep the bar on one row at 922-1199 (smaller type + gap, scrolls if still short) */
@media (min-width: 922px) and (max-width: 1199px) {
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu { gap: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html body #ast-desktop-header .site-below-header-wrap .main-header-menu > .menu-item > .menu-link { font-size: 13px; white-space: nowrap; }
}

/* ALF-599 batch E ---------------------------------------------------- */
/* Out-of-stock PDP text was green: `.woocommerce div.product p.stock` (G-4) out-specified `.stock.out-of-stock`. */
.woocommerce div.product p.stock.out-of-stock { color: var(--phm-color-error); }

/* Touch targets >= 44px on phones/tablets (WCAG 2.5.8 / owner brief). Links that sat at 17-30px tall get a
   44px hit box without changing their look: inline-flex + min-height, text stays visually centred. */
@media (max-width: 921px) {
  .site-branding .custom-logo-link,
  .phm-home-row__all,
  .phm-footer-logo a,
  .wc-block-cart-item__image a,
  .wc-block-components-product-name,
  .wc-block-checkout__login-prompt,
  .wc-block-components-panel__button,
  .wc-block-components-address-form__address_2-toggle {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
  .wc-block-checkout__login-prompt { min-inline-size: 44px; justify-content: center; }
  /* inline text links keep their line box: pad the hit area out and pull it back with a negative margin */
  .woocommerce-breadcrumb a,
  .phm-trust a,
  .product_meta .posted_in a {
    display: inline-block;
    min-inline-size: 44px;
    padding-block: 13px;
    margin-block: -13px;
  }
  html body .phm-footer-toggle,
  html body .phm-footer-link { min-block-size: 44px; display: inline-flex; align-items: center; }
  html body .wc-block-components-quantity-selector__button { min-inline-size: 44px; }
  .woocommerce div.product form.cart .quantity input.qty { min-inline-size: 44px; min-block-size: 44px; }
  .wc-block-components-quantity-selector,
  .wc-block-components-quantity-selector__input,
  .wc-block-components-quantity-selector__button { min-block-size: 44px; }
}

/* ALF-599 batch E, design P2s folded in (ALF-650 / ALF-653 / ALF-659) ---------- */
/* 650-1: a short home row (2 deals) lines up with the title like every other row instead of floating mid-page */
html body ul.products.phm-home-row__grid.phm-home-row__grid[class*="columns-"]:not(.elementor-grid) { justify-content: start; }
/* 650-6: EN hero subtitle filled the 36ch measure under a one-line desktop H1 */
@media (min-width: 1024px) { html body .phm-hero__subtitle { max-inline-size: 60ch; } }
/* 653-hairline: the mobile accordion makes ul.tabs display:contents, so WooCommerce's absolutely positioned
   ul.tabs::before (1px sand line) lands on the gallery's top edge */
@media (max-width: 767px) {
  .single-product .woocommerce-tabs ul.tabs::before,
  .single-product .woocommerce-tabs ul.wc-tabs::before { display: none !important; }
}
/* 659-1: lockup-light.svg is 300 wide but its artwork ends at ~68-70%; in RTL the blank tail sat on the start edge
   (~40px inset). Crop the box to the artwork (80% of 175px) so it sits flush at the start edge in both directions. */
.phm-footer-logo a { display: inline-flex; inline-size: 140px; overflow: hidden; direction: ltr; }
.phm-footer-logo a img { flex: none; max-inline-size: none; inline-size: 175px; }
/* 659-2: 404 reads as one centred hero; Astra's 64px #primary padding + our 32px made ~100px of dead space above the H1 */
html body .phm-404 { padding-block-start: 0; }
html body:not(.home) .phm-404 h1.page-title { text-align: center; margin-block-end: 8px; }
/* 659-3: WooCommerce prints its own English/"كزائر" guest line; ours (phm-guest-note) is the one we keep */
.wc-block-checkout__guest-checkout-notice { display: none; }
/* 659-4: until real rates exist the step has no content; collapse its heading + block margins so the rate preview sits right under it */
.wp-block-woocommerce-checkout-shipping-methods-block:not(:has(.wc-block-components-radio-control)) { margin-block-end: 0; }
.wp-block-woocommerce-checkout-shipping-methods-block:not(:has(.wc-block-components-radio-control)) .wc-block-components-checkout-step__heading-container { margin-block-end: 0; }
/* 659-6: the WooCommerce wrapper carries margin-inline:40px, so account / order-received content started 40px in from the H1 */
.woocommerce-account .entry-content > .woocommerce,
.woocommerce-order-received .entry-content > .woocommerce { margin-inline: 0; max-inline-size: none; }
/* 659-7: Contact / About / policy pages ran the full 1280px column (130-150 characters per line) */
body.page:not(.woocommerce-page) .entry-content { max-inline-size: 72ch; }
/* 659-5: drawer — the menu already has a WhatsApp row, so the bubble goes while it is open; AR/EN segment 14/600; "All products" 600 */
body.ast-main-header-nav-open .qlwapp__container { display: none !important; }
@media (max-width: 921px) {
  html body #ast-mobile-header .phm-lang-switch .phm-lang-switch-link { font-size: 14px; font-weight: 600; }
  html body #ast-mobile-header .phm-nav-all > .menu-link { font-weight: 600; }
}
/* 659-8: order-received overview labels were ~11px */
.woocommerce-order-overview li { font-size: 13px; }
/* 653-768: single-column PDP at 768-921 left the 560px gallery hugging one edge of a 728px column; centre it */
@media (min-width: 600px) and (max-width: 921px) {
  html body.single-product div.product .woocommerce-product-gallery { margin-inline: auto; }
}

/* =====================================================================
   ALF-600 — Batch F: accessibility fixes from the ALF-591 WCAG audit.
   Everything below this banner is this ticket's.
   ===================================================================== */

/* A-01: one visible keyboard focus ring everywhere (3px #274fa5 = 7.6:1 on white; the page and footer are light).
   :focus-visible only, so mouse clicks stay clean. !important because Astra sets a thin dotted outline on a long
   list of :focus-visible selectors that would otherwise win on specificity. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #274fa5 !important;
  outline-offset: 2px !important;
}
/* Filled blue controls: white inner halo + blue outer ring so the indicator clears 3:1 on both sides. */
.single_add_to_cart_button:focus-visible,
.add_to_cart_button:focus-visible,
.wc-block-components-button:focus-visible,
.woocommerce-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

/* A-03: the hidden #pa_color select is also removed from the tab order (JS sets tabindex=-1 + aria-hidden). */

/* A-04: inline links must not rely on colour alone (1.4.1). */
.woocommerce-privacy-policy-text a,
.woocommerce-privacy-policy-link,
.entry-content p a:not(.button),
.woocommerce-Tabs-panel p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A-05: password reveal button target >= 44px (it is display:none on My Account since ALF-580; this covers any
   other form that shows it). */
.show-password-input {
  min-inline-size: 44px;
  min-block-size: 44px;
}
.password-input input {
  padding-inline-end: 48px;
}

/* A-06: cart quantity +/- glyphs were 3.8:1 (reduced opacity). */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  opacity: 1;
  color: #332f29;
  font-size: 18px;
}

/* A-07: checkout "enter a shipping address" hint was 4.38:1. */
.wc-block-components-shipping-rates-control__no-shipping-address-message {
  color: #4a453d;
  opacity: 1;
}

/* A-14: inline "choose your options" message replaces the native alert(). */
.phm-atc-hint[role="alert"] {
  display: block;
  color: #8a1c1c;
  font-weight: 600;
}

/* A-17: honour prefers-reduced-motion (2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- ALF-720: gallery paints before flexslider (WC prints inline opacity:0, lifted by deferred JS = LCP gate) -- */
html body.single-product div.product .woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
}
/* Multi-image galleries: until flexslider has built its viewport, show only the first slide so the un-initialised stack does not collapse (CLS) once the gallery is visible. */
html body.single-product div.product .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:nth-child(n+2) {
  display: none;
}