/* ============================================================
 * fx-redesign.css — FinXCart light-first design tokens + primitives
 * Scope: everything under .fx (old UI untouched). Additive only.
 * Font rule: Apple system stack ONLY. No webfonts imported.
 * Spec: tokens, primitives, states, motion, RTL, responsive.
 * ============================================================ */

/* ---------- 1. Design tokens ---------- */
.fx {
  --fx-canvas: #F7F8FA;
  --fx-surface: #FFFFFF;
  --fx-text: #172B42;
  --fx-muted: #5B6674;
  --fx-border: #E1E6EB;
  --fx-navy: #203F60;
  --fx-amber: #F3A329;
  --fx-s1: 4px;
  --fx-s2: 8px;
  --fx-s3: 12px;
  --fx-s4: 16px;
  --fx-s6: 24px;
  --fx-s8: 32px;
  --fx-s12: 48px;
  --fx-s16: 64px;
  --fx-radius-sm: 8px;
  --fx-radius-md: 12px;
  --fx-radius-lg: 16px;
  --fx-radius-pill: 999px;
  --fx-maxw: 1280px;
  --fx-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* derived (still per spec palette) */
  --fx-navy-hover: #1a334e;
  --fx-amber-hover: #e0941f;
  --fx-danger: #B3261E;
  --fx-danger-bg: #FDECEA;
  --fx-skeleton: #EBEEF1;
}

.fx,
.fx * {
  font-family: var(--fx-font);
}

body.fx {
  font-size: 16px;
  line-height: 1.5;
  background: var(--fx-canvas);
  color: var(--fx-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fx .fx-meta {
  font-size: 14px;
  line-height: 1.43;
  color: var(--fx-muted);
}

.fx h1.fx-hero, .fx .fx-hero {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .fx h1.fx-hero, .fx .fx-hero { font-size: 52px; }
}

/* ---------- 2. Layout: container + grid ---------- */
.fx .fx-container {
  max-width: var(--fx-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fx-s8);
  padding-right: var(--fx-s8);
}

@media (max-width: 767px) {
  .fx .fx-container {
    padding-left: var(--fx-s4);
    padding-right: var(--fx-s4);
  }
}

.fx .fx-grid {
  display: grid;
  gap: var(--fx-s6);
}

@media (max-width: 767px) {
  .fx .fx-grid { gap: var(--fx-s3); }
}

.fx .fx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.fx .fx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.fx .fx-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .fx .fx-grid-3, .fx .fx-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .fx .fx-grid-2, .fx .fx-grid-3, .fx .fx-grid-4 { grid-template-columns: 1fr; }
}

.fx .fx-stack > * + * { margin-top: var(--fx-s4); }

/* ---------- 3. Buttons ---------- */
.fx .fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fx-s2);
  min-height: 44px;
  padding: var(--fx-s2) var(--fx-s4);
  border: 1px solid transparent;
  border-radius: var(--fx-radius-md);
  background: var(--fx-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.fx .fx-btn:hover { background: var(--fx-navy-hover); color: #fff; }

.fx .fx-btn-amber {
  background: linear-gradient(100deg, #ea580c 0%, #f97316 30%, #fbbf24 50%, #f97316 70%, #ea580c 100%);
  background-size: 300% auto;
  animation: fxGradFlow 4s linear infinite;
  color: #1A1A1A; /* contrast-paired: amber never with light text */
  transition: filter .15s ease;
}

.fx .fx-btn-amber:hover { filter: brightness(1.06); color: #1A1A1A; }

/* Same animated gradient as the hero headline; symmetric stops loop seamlessly. */
@keyframes fxGradFlow { from { background-position: 0% center; } to { background-position: 100% center; } }
@media (prefers-reduced-motion: reduce) { .fx .fx-btn-amber { animation: none; } }

.fx .fx-btn-ghost {
  background: transparent;
  color: var(--fx-navy);
}

.fx .fx-btn-ghost:hover { background: rgba(32, 63, 96, 0.08); }

.fx .fx-btn-outline {
  background: transparent;
  border-color: var(--fx-navy);
  color: var(--fx-navy);
}

.fx .fx-btn-outline:hover { background: rgba(32, 63, 96, 0.06); }

.fx .fx-btn-sm { min-height: 36px; padding: var(--fx-s1) var(--fx-s3); font-size: 14px; }

/* ---------- Listing-card actions: bigger primary + 46px icon buttons ----------
   Catalogue and related-product cards render a small primary button plus two
   tiny ghost icon buttons (save/compare). This row gives the primary button
   the full width and both icon buttons a real 46px tap target, without
   touching markup or the save/compare JS hooks. */
.fx .fx-listing-card__actions { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.fx .fx-listing-card__actions > .fx-btn:first-child { flex: 1 1 auto; min-height: 46px; font-size: 15px; }
.fx .fx-listing-card__actions .fx-save-btn,
.fx .fx-listing-card__actions .fx-compare-btn { flex: none; width: 46px; min-height: 46px; padding: 0; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border-color: rgba(15,27,61,.16); }
.fx .fx-listing-card__actions .fx-save-btn:hover { color: #dc2626; border-color: rgba(220,38,38,.45); background: rgba(220,38,38,.08); }
.fx .fx-listing-card__actions .fx-save-btn.is-saved { color: #dc2626; border-color: rgba(220,38,38,.45); background: rgba(220,38,38,.10); }
.fx .fx-listing-card__actions .fx-compare-btn:hover { color: #1d4ed8; border-color: rgba(29,78,216,.45); background: rgba(29,78,216,.08); }

/* ---------- Listing-card media: one uniform 4:3 image box ----------
   The page-level rules set aspect-ratio on the media box but left the image
   link in normal flow, so each image fell back to its own natural ratio:
   the square placeholder rendered tall, wide photos rendered short, and
   cards in the same row ended up different heights. Pinning the link
   absolutely inside the ratio box makes every card's image exactly 4:3;
   contain (not cover) keeps the earlier no-crop rule: whole image, navy
   backing, never stretched. Applies on catalogue and detail-related cards. */
.fx .fx-listing-card .fx-listing-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0b1934; }
.fx .fx-listing-card .fx-listing-card__imglink { position: absolute; inset: 0; display: block; }
.fx .fx-listing-card .fx-listing-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fx .fx-btn-lg { min-height: 52px; padding: var(--fx-s3) var(--fx-s6); font-size: 17px; }

.fx .fx-btn:focus-visible {
  outline: 3px solid rgba(32, 63, 96, 0.45);
  outline-offset: 2px;
}

/* Press feedback (Phase 7 polish): buttons respond on pointer-down.
   Motion-sensitive users are excluded via the no-preference gate. */
@media (prefers-reduced-motion: no-preference) {
  .fx .fx-btn:active { transform: scale(0.97); }
}

.fx .fx-btn-amber:focus-visible {
  outline-color: rgba(243, 163, 41, 0.6);
}

.fx .fx-btn:disabled,
.fx .fx-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fx .fx-btn.is-loading { position: relative; color: transparent; pointer-events: none; }

.fx .fx-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  animation: fx-spin 0.8s linear infinite;
}

.fx .fx-btn-amber.is-loading::after {
  border: 2px solid rgba(26, 26, 26, 0.25);
  border-top-color: #1A1A1A;
}

@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---------- 4. Cards ---------- */
.fx .fx-card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  padding: var(--fx-s4);
}

.fx .fx-card-lg {
  border-radius: var(--fx-radius-lg);
  padding: var(--fx-s6);
}

/* shadow ONLY on hover */
.fx a.fx-card { color: inherit; text-decoration: none; display: block; }

/* ---------- 5. Chips / pills ---------- */
.fx .fx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-s2);
  padding: var(--fx-s1) var(--fx-s3);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-pill);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-size: 14px;
  line-height: 1.43;
}

.fx .fx-chip--active { border-color: var(--fx-navy); color: var(--fx-navy); font-weight: 600; }

.fx .fx-chip__x {
  appearance: none;
  border: 0;
  background: none;
  color: var(--fx-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.fx .fx-chip__x:focus-visible { outline: 2px solid var(--fx-navy); outline-offset: 1px; border-radius: 50%; }

/* ---------- 6. Search ---------- */
.fx .fx-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-pill);
  background: var(--fx-surface);
  overflow: hidden;
  max-width: 640px;
}

.fx .fx-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: var(--fx-s3) var(--fx-s4);
  font-size: 16px;
  min-height: 48px;
  color: var(--fx-text);
}

.fx .fx-search__input::placeholder { color: var(--fx-muted); }

.fx .fx-search__btn {
  border: 0;
  border-radius: 0;
  background: var(--fx-navy);
  color: #fff;
  font-weight: 600;
  padding: 0 var(--fx-s6);
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.fx .fx-search:focus-within {
  border-color: var(--fx-navy);
  box-shadow: 0 0 0 3px rgba(32, 63, 96, 0.15);
}

/* ---------- 7. Price / badge / type-tag ---------- */
.fx .fx-price {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fx-text);
}

.fx .fx-price-old {
  font-size: 14px;
  color: var(--fx-muted);
  text-decoration: line-through;
  margin-inline-start: var(--fx-s2);
}

.fx .fx-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--fx-s1) var(--fx-s2);
  border-radius: var(--fx-radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.fx .fx-badge--neutral {
  background: rgba(32, 63, 96, 0.08);
  color: var(--fx-navy);
}

.fx .fx-type-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-s1);
  padding: var(--fx-s1) var(--fx-s2);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-sm);
  background: var(--fx-canvas);
  color: var(--fx-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- 8. States: empty / error / skeleton ---------- */
.fx .fx-empty {
  text-align: center;
  padding: var(--fx-s12) var(--fx-s4);
  border: 1px dashed var(--fx-border);
  border-radius: var(--fx-radius-lg);
  background: var(--fx-surface);
}

.fx .fx-empty__slot {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--fx-s4);
  border-radius: var(--fx-radius-lg);
  background: var(--fx-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-muted);
}

.fx .fx-empty__slot svg { width: 48px; height: 48px; }

.fx .fx-empty__title { font-size: 18px; font-weight: 700; margin: 0 0 var(--fx-s2); }
.fx .fx-empty__body { color: var(--fx-muted); font-size: 14px; margin: 0 0 var(--fx-s4); max-width: 420px; margin-inline: auto; }

.fx .fx-error {
  border: 1px solid var(--fx-danger);
  background: var(--fx-danger-bg);
  color: var(--fx-text);
  border-radius: var(--fx-radius-md);
  padding: var(--fx-s4);
}

.fx .fx-error__title { font-weight: 700; margin: 0 0 var(--fx-s1); color: var(--fx-danger); }
.fx .fx-error__body { font-size: 14px; margin: 0 0 var(--fx-s3); }

.fx .fx-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--fx-skeleton);
  border-radius: var(--fx-radius-sm);
  min-height: 14px;
  color: transparent;
  user-select: none;
}

.fx .fx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-100%);
}

html[dir="rtl"] .fx .fx-skeleton::after {
  transform: translateX(100%);
}

/* ---------- 9. Modal / drawer ---------- */
.fx .fx-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 43, 66, 0.5);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fx-s4);
}

.fx .fx-modal {
  background: var(--fx-surface);
  border-radius: var(--fx-radius-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: var(--fx-s6);
}

.fx .fx-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 43, 66, 0.5);
  z-index: 90;
}

.fx .fx-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(420px, 92vw);
  background: var(--fx-surface);
  z-index: 91;
  padding: var(--fx-s6);
  overflow: auto;
  border-start-start-radius: var(--fx-radius-lg);
  border-end-start-radius: var(--fx-radius-lg);
}

.fx .fx-modal[hidden], .fx .fx-overlay[hidden], .fx .fx-drawer[hidden] { display: none; }

.fx .fx-modal__close, .fx .fx-drawer__close {
  appearance: none;
  border: 0;
  background: none;
  color: var(--fx-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: var(--fx-s1);
  float: inline-end;
}

.fx .fx-modal__close:focus-visible, .fx .fx-drawer__close:focus-visible {
  outline: 2px solid var(--fx-navy);
  outline-offset: 2px;
}

/* ---------- 10. Toast ---------- */
.fx .fx-toast-zone {
  position: fixed;
  bottom: var(--fx-s4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--fx-s2);
  align-items: center;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.fx .fx-toast {
  background: var(--fx-text);
  color: #fff;
  border-radius: var(--fx-radius-md);
  padding: var(--fx-s3) var(--fx-s4);
  font-size: 14px;
  max-width: 480px;
  box-shadow: 0 8px 24px rgba(23, 43, 66, 0.25);
}

/* ---------- 11. Breadcrumb / pagination / tabs / accordion ---------- */
.fx .fx-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fx-s2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--fx-s4);
  font-size: 14px;
  color: var(--fx-muted);
}

.fx .fx-breadcrumb a { color: var(--fx-navy); text-decoration: none; }
.fx .fx-breadcrumb a:hover { text-decoration: underline; }
.fx .fx-breadcrumb [aria-current="page"] { color: var(--fx-text); font-weight: 600; }

.fx .fx-breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--fx-s2);
  color: var(--fx-border);
}

.fx .fx-pagination {
  display: flex;
  align-items: center;
  gap: var(--fx-s2);
  list-style: none;
  padding: 0;
  margin: var(--fx-s6) 0 0;
}

.fx .fx-pagination a,
.fx .fx-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--fx-s3);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-size: 14px;
  text-decoration: none;
}

.fx .fx-pagination [aria-current="page"] {
  background: var(--fx-navy);
  border-color: var(--fx-navy);
  color: #fff;
  font-weight: 700;
}

.fx .fx-pagination a:hover { border-color: var(--fx-navy); }

.fx .fx-tabs {
  display: flex;
  gap: var(--fx-s1);
  border-bottom: 1px solid var(--fx-border);
  margin: 0 0 var(--fx-s4);
}

.fx .fx-tabs button, .fx .fx-tabs a {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--fx-s3) var(--fx-s4);
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}

.fx .fx-tabs [aria-selected="true"], .fx .fx-tabs .is-active {
  color: var(--fx-navy);
  border-bottom-color: var(--fx-amber);
}

.fx .fx-accordion details {
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  background: var(--fx-surface);
  margin-bottom: var(--fx-s2);
}

.fx .fx-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--fx-s3) var(--fx-s4);
  font-weight: 600;
  font-size: 15px;
}

.fx .fx-accordion summary::-webkit-details-marker { display: none; }

.fx .fx-accordion summary:focus-visible { outline: 2px solid var(--fx-navy); outline-offset: 2px; border-radius: var(--fx-radius-md); }

.fx .fx-accordion summary::after {
  content: "+";
  float: inline-end;
  color: var(--fx-muted);
  font-weight: 400;
}

.fx .fx-accordion details[open] summary::after { content: "–"; }

.fx .fx-accordion .fx-accordion__body {
  padding: 0 var(--fx-s4) var(--fx-s4);
  color: var(--fx-muted);
  font-size: 15px;
}

/* ---------- 12. Forms ---------- */
.fx .fx-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--fx-s1);
  color: var(--fx-text);
}

.fx .fx-form input[type="text"],
.fx .fx-form input[type="email"],
.fx .fx-form input[type="password"],
.fx .fx-form input[type="number"],
.fx .fx-form input[type="tel"],
.fx .fx-form input[type="url"],
.fx .fx-form input[type="date"],
.fx .fx-form select,
.fx .fx-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--fx-s2) var(--fx-s3);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius-md);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-size: 16px;
  line-height: 1.5;
}

.fx .fx-form input:focus, .fx .fx-form select:focus, .fx .fx-form textarea:focus {
  outline: 0;
  border-color: var(--fx-navy);
  box-shadow: 0 0 0 3px rgba(32, 63, 96, 0.15);
}

.fx .fx-form .fx-field { margin-bottom: var(--fx-s4); }

.fx .fx-form .fx-help {
  font-size: 13px;
  color: var(--fx-muted);
  margin-top: var(--fx-s1);
}

.fx .fx-form .fx-field-error {
  font-size: 13px;
  color: var(--fx-danger);
  margin-top: var(--fx-s1);
  font-weight: 600;
}

.fx .fx-form .is-invalid { border-color: var(--fx-danger); }
.fx .fx-form .is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); }

.fx .fx-form textarea { min-height: 110px; resize: vertical; }

/* ---------- 13. Timeline (order status) ---------- */
.fx .fx-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fx .fx-timeline li {
  position: relative;
  padding-inline-start: var(--fx-s8);
  padding-bottom: var(--fx-s6);
}

.fx .fx-timeline li:last-child { padding-bottom: 0; }

.fx .fx-timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--fx-border);
}

.fx .fx-timeline li:last-child::before { display: none; }

.fx .fx-timeline__dot {
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fx-surface);
  border: 2px solid var(--fx-border);
}

.fx .fx-timeline li.is-done .fx-timeline__dot {
  background: var(--fx-navy);
  border-color: var(--fx-navy);
}

.fx .fx-timeline li.is-current .fx-timeline__dot {
  background: var(--fx-amber);
  border-color: var(--fx-amber);
}

.fx .fx-timeline__title { font-weight: 600; font-size: 15px; margin: 0; }
.fx .fx-timeline__desc { font-size: 14px; color: var(--fx-muted); margin: var(--fx-s1) 0 0; }

/* ---------- 14. Motion (all gated on no-preference) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fx .fx-btn, .fx .fx-search__btn, .fx .fx-chip, .fx .fx-tabs button,
  .fx .fx-tabs a, .fx .fx-pagination a, .fx .fx-accordion summary {
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
  }

  .fx .fx-search__input:focus,
  .fx .fx-form input:focus, .fx .fx-form select:focus, .fx .fx-form textarea:focus {
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }

  @media (hover: hover) {
    .fx a.fx-card, .fx .fx-card.is-lift {
      transition: transform 140ms ease, box-shadow 140ms ease;
    }
    .fx a.fx-card:hover, .fx .fx-card.is-lift:hover {
      transform: translateY(-2px); /* max 2px lift, hover-capable only */
      box-shadow: 0 8px 24px rgba(23, 43, 66, 0.10);
    }
  }

  .fx .fx-overlay, .fx .fx-drawer-overlay {
    animation: fx-fade 200ms ease;
  }

  .fx .fx-modal { animation: fx-rise 220ms ease; }
  .fx .fx-drawer { animation: fx-slide 220ms ease; }

  .fx .fx-toast { animation: fx-rise 200ms ease; }

  .fx .fx-skeleton::after { animation: fx-shimmer 1.6s ease infinite; }

  html[dir="rtl"] .fx .fx-skeleton::after { animation-name: fx-shimmer-rtl; }

  /* ONE optional hero entrance (250–350ms) */
  .fx .fx-hero-enter { animation: fx-rise 300ms ease; }
}

@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fx-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes fx-shimmer-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* reduced-motion: everything instant (no transitions/animations) */
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 15. RTL mirrors ---------- */
html[dir="rtl"] .fx .fx-breadcrumb li + li::before { content: "/"; }

html[dir="rtl"] .fx .fx-search__btn { padding: 0 var(--fx-s6); }

/* ================= Navy marketplace header (Qmius-style) ================= */
.fx .fxh { background: #1d2a7a; border-bottom: 0; }
.fx .fxh-bar-inner { gap: 14px; }
.fx .fxh-logo { display: inline-flex; align-items: center; background: transparent; border-radius: 0; padding: 0; line-height: 0; flex-shrink: 0; }
.fx .fxh-logo img { height: 34px; width: auto; max-width: 180px; }
.fx .fxh-burger { color: #fff; }
.fx .fxh-burger:hover { background: rgba(255,255,255,.14); color: #fff; }
.fx .fxh-action { color: rgba(255,255,255,.94); }
.fx .fxh-action:hover { background: rgba(255,255,255,.14); color: #fff; }
.fx .fxh-acct-btn { color: #fff; }
.fx .fxh-acct-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.fx .fxh-acct .fx-btn { background: #fff; color: #1d2a7a; font-weight: 700; }
.fx .fxh-acct .fx-btn:hover { background: #f0f2ff; color: #1d2a7a; }
.fx .fxh-nav { background: #16205e; border-top: 1px solid rgba(255,255,255,.14); }
.fx .fxh-navlink { color: rgba(255,255,255,.88); }
.fx .fxh-navlink:hover { color: #fff; }
.fx .fxh-navlink[aria-current="page"] { color: #fff; border-bottom-color: var(--fx-amber); }
.fx .fxh-navtoggle { color: rgba(255,255,255,.72); }
.fx .fxh-navtoggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.fx .fxh-announce { border-bottom: 0; }
@media (max-width: 1023.98px) {
    .fx .fxh-logo img { height: 30px; max-width: 150px; }
    .fx .fxh-action span[aria-hidden="true"] { display: none; }
    .fx .fxh-action { min-width: 44px; }
}

/* Admin-placeable ad slots (backend batch): same look as the homepage strip,
   loaded globally so catalog, detail and shop pages render them too. Slots
   are empty (and render nothing) until admin creates an Ads group with the
   matching slug: homepage-bottom, catalog, product-detail, shop. */
.fx-ads { padding: 8px 0 4px; }
.fx-ads .fx-ad + .fx-ad { margin-top: 12px; }
.fx-ads .fx-ad img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
/* Shop pages have no .fx ancestor, so the slot's container needs literal
   values here (the .fx token vars are undefined there). Same 1280px /
   32px / 16px geometry as .fx .fx-container. */
.fx-ads > .fx-container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 767px) {
  .fx-ads > .fx-container { padding-left: 16px; padding-right: 16px; }
}