/* ==========================================================================
   06-NAVIGATION.CSS — Al Aliyah Supermarket implementation kit
   Status: PENDING REVIEW.

   Covers: header, mega menu, mobile drawer, mobile bottom tab bar,
   breadcrumbs, filter chips, pagination.

   RTL note per the logo rules in the brand foundation doc: the horizontal
   lockup's internal order (mark-then-wordmark) never flips — only its
   position on the header (inset-inline-start) changes with direction. This
   file positions the logo slot with logical properties only, so it needs
   no [dir="rtl"] override at all; the browser's own bidi handling of
   inset-inline-start does the work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.aly-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky-header);
  block-size: var(--nav-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-inline: var(--space-5);
  background-color: var(--color-surface);
  box-shadow: var(--elevation-hairline);
}

.aly-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.aly-header__logo img {
  block-size: 32px; /* minimum digital size per brand foundation doc */
  inline-size: auto;
}

.aly-header__search {
  flex: 1;
  max-inline-size: 480px;
}

/* The YITH search block ships with Gutenberg's `alignwide` class, and the
   parent theme (hello-elementor theme.css) styles `.alignwide` with
   `margin-inline: -80px` for editorial content. In the header that made
   the block 160px wider than its container at every width: at ≤767px it
   bled 50px past both viewport edges and forced horizontal scroll
   (found 26 September 2026). Three classes beat that one-class rule. */
.elementor-location-header .wp-block-yith-search-block.alignwide { margin-inline: 0; inline-size: 100%; max-inline-size: 100%; }

.aly-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.aly-header__icon-btn {
  position: relative;
}

.aly-header__badge-count {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  min-inline-size: 1.1rem;
  block-size: 1.1rem;
  padding-inline: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-error-strong);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-content: center;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Primary nav + mega menu
   -------------------------------------------------------------------------- */
.aly-primary-nav {
  display: none;
}

@media (min-width: 1024px) {
  .aly-primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
}

.aly-primary-nav__item {
  position: relative;
}

.aly-primary-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--touch-target-min);
  padding-inline: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  border-block-end: 2px solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.aly-primary-nav__link:hover,
.aly-primary-nav__link[aria-expanded="true"] {
  color: var(--gold-text-on-white);
  border-block-end-color: var(--gold-500);
}

.aly-primary-nav__link:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: -2px;
}

.aly-mega-menu {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  min-inline-size: 640px;
  background-color: var(--color-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  z-index: var(--z-dropdown);
}

.aly-mega-menu[hidden] {
  display: none;
}

.aly-mega-menu__group-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-2);
}

.aly-mega-menu__link {
  display: block;
  padding-block: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text);
  border-radius: var(--radius-xs);
}

.aly-mega-menu__link:hover {
  color: var(--gold-text-on-white);
}

.aly-mega-menu__link:focus-visible,
.aly-mega-menu a:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.aly-drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(32 22 8 / 0.45);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}

.aly-drawer-backdrop--open {
  opacity: 1;
  visibility: visible;
}

.aly-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(85vw, 360px);
  background-color: var(--color-surface);
  z-index: var(--z-drawer);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-decel);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

[dir="rtl"] .aly-drawer {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(100%);
}

.aly-drawer--open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .aly-drawer,
  .aly-drawer-backdrop {
    transition: none;
  }
}

.aly-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-border);
}

.aly-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.aly-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--touch-target-min);
  padding-inline: var(--space-2);
  font-size: var(--fs-base);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.aly-drawer__item:hover,
.aly-drawer__item:focus-visible {
  background-color: var(--color-surface-sunk);
}

/* Directional chevron: this genuinely needs a [dir="rtl"] flip — it is a
   navigational affordance ("expand toward reading-end"), not a numeral or
   the logo, so it is exactly the kind of icon the brief calls out as an
   exception to "logical properties make RTL free." */
.aly-drawer__item .aly-icon-chevron {
  transition: transform var(--duration-base) var(--ease-standard);
}

[dir="rtl"] .aly-drawer__item .aly-icon-chevron {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Mobile bottom tab bar
   -------------------------------------------------------------------------- */
.aly-tab-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-sticky-header);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background-color: var(--color-surface);
  border-block-start: var(--border-width) solid var(--color-border);
  padding-block-end: env(safe-area-inset-bottom, 0);
}

@media (min-width: 1024px) {
  .aly-tab-bar {
    display: none;
  }
}

.aly-tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-block-size: var(--touch-target-min);
  padding-block: var(--space-1);
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.aly-tab-bar__item[aria-current="page"] {
  color: var(--gold-text-on-white);
}

.aly-tab-bar__item:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.aly-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding-block: var(--space-3);
}

.aly-breadcrumbs a {
  color: var(--color-text-muted);
}

.aly-breadcrumbs a:hover {
  color: var(--gold-text-on-white);
  text-decoration: underline;
}

.aly-breadcrumbs__sep {
  color: var(--color-border-strong);
}

[dir="rtl"] .aly-breadcrumbs__sep {
  transform: scaleX(-1);
  display: inline-block;
}

.aly-breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   Filter chips
   -------------------------------------------------------------------------- */
.aly-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.aly-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--touch-target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.aly-chip:hover {
  border-color: var(--color-border-strong);
}

.aly-chip:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.aly-chip--active {
  background-color: var(--gold-100);
  border-color: var(--gold-500);
  color: var(--ink-900);
  font-weight: var(--fw-medium);
}

.aly-chip__remove {
  display: inline-flex;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.aly-chip__remove:hover {
  background-color: var(--color-border-strong);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.aly-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-block: var(--space-5);
}

.aly-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--touch-target-min);
  block-size: var(--touch-target-min);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.aly-pagination__link:hover {
  background-color: var(--color-surface-sunk);
}

.aly-pagination__link:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.aly-pagination__link[aria-current="page"] {
  background-color: var(--gold-500);
  color: var(--ink-900); /* rule 2 applies here too — gold fill, ink label */
  font-weight: var(--fw-semibold);
}

.aly-pagination__ellipsis {
  color: var(--color-text-muted);
  padding-inline: var(--space-1);
}

/* Prev/Next arrows are directional and DO flip in RTL — a documented
   exception alongside the drawer chevron and breadcrumb separator. */
.aly-pagination__arrow svg {
  transition: transform var(--duration-fast) var(--ease-standard);
}

[dir="rtl"] .aly-pagination__arrow svg {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   Header account control — the two states from `05-components.md`
   §Header/Navigation: "logged-out (account icon opens OTP popup)" and
   "logged-in (account icon shows a small avatar-initial badge)".

   Markup comes from inc/header-account.php, which replaces the header's
   Elementor Icon widget. It deliberately drops Elementor's own
   `.elementor-icon-wrapper` / `.elementor-icon` classes, so the per-widget CSS
   Elementor writes for that element no longer matches and cannot fight these
   rules over icon size or colour.
   -------------------------------------------------------------------------- */
.aly-account__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  block-size: var(--control-height);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.aly-account__btn:hover {
  background-color: var(--gold-50);
  color: var(--gold-text-on-white);
}

.aly-account__btn:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.aly-account__icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  display: block;
}

.aly-account__label { display: block; }

/* Signed in: the badge is the whole control, so it loses the surrounding
   chrome and becomes a circle. Gold wash with gold-800 text — the pairing
   00-tokens.css marks as safe on a light ground (6.06:1); the raw brand gold
   would fail as text here. */
.aly-account__btn--signed-in {
  padding-inline: 0;
  inline-size: var(--control-height);
  justify-content: center;
  border-radius: var(--radius-circle);
  background-color: var(--gold-100);
  border-color: var(--gold-200);
}

.aly-account__btn--signed-in:hover {
  background-color: var(--gold-200);
  color: var(--gold-text-on-cream);
}

.aly-account__initials {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--gold-text-on-cream);
  text-transform: uppercase;
}

/* Below the tablet breakpoint the header is tight and the icon cluster has to
   give way first. The label goes, the button becomes a square icon control,
   and the accessible name still carries "Sign in" through the link text — it
   is clipped, not removed. */
@media (max-width: 767px) {
  .aly-account__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .aly-account__btn {
    inline-size: var(--control-height);
    padding-inline: 0;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Cart badge — "cart-empty (no count badge shown)", same section.

   Elementor's Menu Cart widget is configured with its empty indicator on, so
   it renders a bubble reading 0 on every page for every visitor. It also
   rewrites `data-counter` over AJAX when the cart changes, which is exactly
   why this is a CSS rule keyed on that attribute rather than a PHP edit: the
   badge reappears on the first add-to-cart with nothing further to do.

   The selector is long because Elementor's own is: it paints the bubble with
   `.elementor-menu-cart--items-indicator-bubble … .elementor-button-icon
   .elementor-button-icon-qty[data-counter]`, five class-weight steps. Naming
   the widget class alongside the indicator class — both sit on the same
   element — takes this to six and settles it without !important. */
.elementor-widget-woocommerce-menu-cart.elementor-menu-cart--items-indicator-bubble
  .elementor-menu-cart__toggle
  .elementor-button-icon
  .elementor-button-icon-qty[data-counter="0"] {
  display: none;
}

/* The header's icon cluster was sized around a bare 20px silhouette.

   Its Elementor container carries an explicit 110px width, which was ample
   for two icons and is not ample for a labelled control: the "Sign in" button
   overflowed it and printed on top of the cart button. Releasing that one
   container's width lets the cluster size to its contents; the search field
   beside it already flexes, so it gives up the difference.

   The override sets `width` rather than Elementor's `--width` custom property,
   which the element carries INLINE — an inline custom property beats any
   stylesheet, so `--width: auto` here silently did nothing. Overriding the
   `width` declaration that consumes it works, because that declaration lives
   in Elementor's own stylesheet where specificity applies normally.

   Selected by :has() on the account control rather than by element id. */
.e-con:has(> .elementor-widget-icon .aly-account) { width: auto; }

.aly-account { display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   LOCKUP B — tree | hairline | Arabic wordmark over the spread caption.
   Rendered by inc/brand.php. Sizes per spec §6.2: desktop tree 74px, mobile
   40px; caption Inter 600 9.4px spread to the wordmark width (156px).
   -------------------------------------------------------------------------- */
.aly-lockup__link { display: inline-flex; text-decoration: none; color: inherit; }
.aly-lockup__link:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 4px; border-radius: var(--radius-xs); }

.aly-lockup {
  --aly-lk-tree: 74px;
  --aly-lk-rule: 64px;
  --aly-lk-width: 156px;
  --aly-lk-caption: 9.4px;
  --aly-lk-gap: 22px;
  --aly-lk-text-gap: 9px;
  display: inline-flex;
  align-items: center;
  gap: var(--aly-lk-gap);
  color: var(--ink-900);
  line-height: 1;
}

.aly-lockup--mobile {
  --aly-lk-tree: 40px;
  --aly-lk-rule: 34px;
  --aly-lk-width: 84px;
  --aly-lk-caption: 5.1px;
  --aly-lk-gap: 12px;
  --aly-lk-text-gap: 5px;
}

.aly-lockup__tree { block-size: var(--aly-lk-tree); inline-size: auto; display: block; }
/* !important is forced here: Elementor emits `.elementor-N .elementor-element-ID img{width:…}`
   from the site-logo widget's own settings, and that per-element rule outranks any
   theme selector. tools/elementor/logo-settings.php strips those settings; this guard
   keeps the lockup at spec size if an editor ever sets a width on the widget again. */
.aly-lockup-slot img.aly-lockup__tree { inline-size: auto !important; block-size: var(--aly-lk-tree) !important; max-inline-size: none !important; }
.aly-lockup__rule { inline-size: 1px; block-size: var(--aly-lk-rule); background: var(--cream-500); flex: none; }
.aly-lockup__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--aly-lk-text-gap); }
.aly-lockup__ar svg { display: block; inline-size: var(--aly-lk-width); block-size: auto; fill: currentColor; }
.aly-lockup__en {
  display: flex;
  justify-content: space-between;
  inline-size: var(--aly-lk-width);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--aly-lk-caption);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-600);
}
.aly-lockup__en i { font-style: normal; }

.aly-lockup--cream { color: var(--cream-50); }
.aly-lockup--cream .aly-lockup__rule { background: rgb(248 246 241 / 0.28); }
.aly-lockup--cream .aly-lockup__en { color: var(--night-ink-2); }

/* Under 120px of width the text drops and the tree runs alone (spec §3).
   Re-keyed onto .aly-lockup: inc/brand.php always renders the "desktop"
   lockup variant (aly_render_lockup('desktop', …)), so .aly-lockup--mobile
   never appears in the DOM and this rule was dead. Kept here beside the
   base .aly-lockup rules rather than moved into 17-mobile.css's ≤767 block,
   since 359px < 767px means it already fires standalone. */
@media (max-width: 359px) {
  .aly-lockup .aly-lockup__rule,
  .aly-lockup .aly-lockup__text { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .aly-lockup__link { transition: opacity var(--duration-fast) linear; }
  .aly-lockup__link:hover { opacity: 0.88; }
}

/* Points pill beside the account control (signed-in only). Gold-wash surface,
   gold-800 text: 5.92:1 on gold-wash (tools/contrast.py). */
.aly-account { display: inline-flex; align-items: center; gap: var(--space-2); }
.aly-points-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-block-size: var(--touch-target-min); padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--gold-wash);
  color: var(--gold-text-on-cream);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
.aly-points-pill svg { inline-size: 15px; block-size: 15px; }
.aly-points-pill span { font-weight: var(--fw-regular); font-size: var(--fs-xs); }
.aly-points-pill:hover { background: var(--gold-200); }
.aly-points-pill:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.aly-lockup-slot { display: flex; }
@media (max-width: 767px) { .aly-points-pill span { display: none; } }

/* Top bar and delivery strip live in the one header template and show on Home only. */
body:not(.aly-home) .aly-topbar,
body:not(.aly-home) .aly-strip { display: none !important; } /* !important: beats Elementor's generated display rules on the container */
.aly-topbar .elementor-icon-list-item a, .aly-strip .elementor-icon-list-item a { text-decoration: none; }
.aly-strip .elementor-icon-list-text { font-weight: var(--fw-semibold); }

/* --------------------------------------------------------------------------
   MEGA-MENU — Elementor nav dropdown as a full-width panel (desktop).
   -------------------------------------------------------------------------- */
.aly-mega-dot { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: var(--radius-circle); background: var(--aly-dept-tint, var(--gold-500)); margin-inline-end: 8px; vertical-align: 1px; }
li[data-aly-dept="grocery"]     { --aly-dept-tint: var(--dept-grocery-fg); }
li[data-aly-dept="fresh"]       { --aly-dept-tint: var(--dept-fresh-fg); }
li[data-aly-dept="home"]        { --aly-dept-tint: var(--dept-home-fg); }
li[data-aly-dept="apparel"]     { --aly-dept-tint: var(--dept-apparel-fg); }
li[data-aly-dept="electronics"] { --aly-dept-tint: var(--dept-electronics-fg); }
li[data-aly-dept="new"]         { --aly-dept-tint: var(--gold-500); }

@media (min-width: 1025px) {
  .elementor-widget-nav-menu .elementor-nav-menu--main { position: static; }
  .elementor-widget-nav-menu .elementor-nav-menu--main > li { position: static; }
  .elementor-widget-nav-menu .elementor-nav-menu--main > li > ul.sub-menu.aly-mega {
    position: absolute; inset-inline: 0; inline-size: 100%; min-inline-size: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 260px; gap: 4px var(--space-6);
    padding: var(--space-5) var(--space-6); background: var(--surface-white);
    border-block-start: 2px solid var(--gold-500); box-shadow: var(--shadow-lg);
  }
  .elementor-widget-nav-menu .aly-mega > li { margin: 0; }
  .elementor-widget-nav-menu .aly-mega > li > a { padding: 6px 0; font-size: var(--fs-sm); color: var(--color-text-body); background: transparent; }
  .elementor-widget-nav-menu .aly-mega > li > a:hover { color: var(--gold-text-on-white); background: transparent; }
  .elementor-widget-nav-menu .aly-mega > .aly-mega__title { grid-column: 1 / -2; }
  .elementor-widget-nav-menu .aly-mega > .aly-mega__title > a { font-weight: var(--fw-semibold); color: var(--color-text); font-size: var(--fs-base); display: flex; justify-content: space-between; border-block-end: 1px solid var(--cream-300); padding-block-end: var(--space-2); margin-block-end: var(--space-2); }
  .elementor-widget-nav-menu .aly-mega > .aly-mega__title span { font-size: var(--fs-sm); color: var(--gold-text-on-white); font-weight: var(--fw-semibold); }
  .elementor-widget-nav-menu .aly-mega > .aly-mega__feature { grid-column: 4; grid-row: 1 / span 20; }
  .elementor-widget-nav-menu .aly-mega > .aly-mega__feature > a { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--cream-50); border-radius: var(--radius-md); box-shadow: var(--elevation-hairline); }
  .elementor-widget-nav-menu .aly-mega__feature img { inline-size: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
  .elementor-widget-nav-menu .aly-mega__feature-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); }
  .elementor-widget-nav-menu .aly-mega__feature-price { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text); font-variant-numeric: tabular-nums; }
}

/* Footer payment methods */
.aly-pay__label { font-size: var(--fs-xs); letter-spacing: 0.09em; text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--ink-600); margin: 0 0 var(--space-2); }
.aly-pay { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aly-pay li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--ink-900); font-size: var(--fs-xs); }
.aly-pay svg { inline-size: 16px; block-size: 16px; stroke: currentColor; }