/*
 * ============================================================
 *  JoDealz — Mobile Typography System
 *  Inspired by Noon mobile marketplace typography
 *
 *  Hierarchy:
 *    Display / Hero    24px / 700 / 32px lh
 *    Page Title        20px / 700 / 28px lh
 *    Section Title     18px / 700 / 24px lh
 *    Product Title     15px / 600 / 20px lh
 *    Price New         clamp(18px,5vw,20px) / 700 / 24px lh
 *    Price Old         13px / 400 / 18px lh / line-through
 *    Merchant Name     13px / 500 / 18px lh
 *    Supporting Text   12px / 400-500 / 16px lh
 *    Button Text       14px / 600 / 20px lh
 *    Nav Label         12px / 500 (active: 600) / 16px lh
 *
 *  Color Hierarchy:
 *    Primary text      #222222
 *    Secondary text    #777777
 *    Disabled text     #999999
 *
 *  Font Families:
 *    Arabic (RTL)      Cairo, system-ui, sans-serif
 *    English (LTR)     Inter, system-ui, sans-serif
 *
 * ============================================================
 */

/* ============================================================
   1. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* ── Font Families ── */
  --mob-ff-arabic:  'Cairo', 'Droid Arabic Naskh', system-ui, sans-serif;
  --mob-ff-latin:   'Inter', 'Poppins', system-ui, sans-serif;

  /* ── Font Sizes ── */
  --mob-fs-display:     24px;
  --mob-fs-page-title:  20px;
  --mob-fs-section:     18px;
  --mob-fs-product:     15px;
  --mob-fs-price-new:   clamp(18px, 5vw, 20px);
  --mob-fs-price-old:   13px;
  --mob-fs-merchant:    13px;
  --mob-fs-support:     12px;
  --mob-fs-button:      14px;
  --mob-fs-nav:         12px;

  /* ── Font Weights ── */
  --mob-fw-regular:     400;
  --mob-fw-medium:      500;
  --mob-fw-semibold:    600;
  --mob-fw-bold:        700;

  /* ── Line Heights ── */
  --mob-lh-display:     32px;
  --mob-lh-page-title:  28px;
  --mob-lh-section:     24px;
  --mob-lh-product:     20px;
  --mob-lh-price-new:   24px;
  --mob-lh-price-old:   18px;
  --mob-lh-merchant:    18px;
  --mob-lh-support:     16px;
  --mob-lh-button:      20px;
  --mob-lh-nav:         16px;

  /* ── Color Hierarchy ── */
  --mob-color-primary:   #222222;
  --mob-color-secondary: #777777;
  --mob-color-disabled:  #999999;
  --mob-color-price:     #ff3b30;
  --mob-color-price-old: #999999;

  /* ── Letter Spacing ── */
  --mob-ls-tight:  -0.01em;
  --mob-ls-normal:  0;
  --mob-ls-wide:    0.01em;
}

/* ============================================================
   2. FONT RENDERING — GLOBAL MOBILE QUALITY
   ============================================================ */

@media (max-width: 768px) {
  body {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
    font-feature-settings:   "kern" 1;
  }

  /* Arabic-specific rendering improvements */
  html[lang="ar"] body,
  [dir="rtl"] body,
  body[dir="rtl"] {
    -webkit-font-smoothing:  antialiased;
    line-height:             1.65;       /* Arabic needs slightly taller line-height */
    letter-spacing:          0.01em;    /* Subtle tracking improves Arabic readability */
  }
}

/* ============================================================
   3. FONT FAMILY APPLICATION
   ============================================================ */

@media (max-width: 768px) {
  /* LTR (English default) */
  html[lang="en"] body,
  html[lang="en"] .mobile-theme-active,
  [dir="ltr"] .mobile-theme-active {
    font-family: var(--mob-ff-latin);
  }

  /* RTL (Arabic) */
  html[lang="ar"] body,
  html[lang="ar"] .mobile-theme-active,
  [dir="rtl"] .mobile-theme-active {
    font-family: var(--mob-ff-arabic);
  }

  /* Ensure inherited heading/display fonts are consistent */
  html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
  html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
  [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
  [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: var(--mob-ff-arabic);
  }
}

/* ============================================================
   4. UTILITY CLASSES — TYPOGRAPHY SCALE
   Each class applies the complete typographic treatment.
   ============================================================ */

/* Display / Hero — 24px / 700 / 32px */
.mob-text-display {
  font-size:   var(--mob-fs-display);
  font-weight: var(--mob-fw-bold);
  line-height: var(--mob-lh-display);
  color:       var(--mob-color-primary);
  letter-spacing: var(--mob-ls-tight);
}

/* Page Title — 20px / 700 / 28px */
.mob-text-page-title {
  font-size:   var(--mob-fs-page-title);
  font-weight: var(--mob-fw-bold);
  line-height: var(--mob-lh-page-title);
  color:       var(--mob-color-primary);
  letter-spacing: var(--mob-ls-tight);
}

/* Section Title — 18px / 700 / 24px */
.mob-text-section {
  font-size:   var(--mob-fs-section);
  font-weight: var(--mob-fw-bold);
  line-height: var(--mob-lh-section);
  color:       var(--mob-color-primary);
  letter-spacing: var(--mob-ls-tight);
}

/* Product Title — 15px / 600 / 20px / max 2 lines */
.mob-text-product {
  font-size:    var(--mob-fs-product);
  font-weight:  var(--mob-fw-semibold);
  line-height:  var(--mob-lh-product);
  color:        var(--mob-color-primary);
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp:   2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
  text-overflow: ellipsis;
}

/* New Price — clamp(18px, 5vw, 20px) / 700 / 24px */
.mob-text-price-new {
  font-size:   var(--mob-fs-price-new);
  font-weight: var(--mob-fw-bold);
  line-height: var(--mob-lh-price-new);
  color:       var(--mob-color-price);
  letter-spacing: var(--mob-ls-tight);
}

/* Old Price — 13px / 400 / 18px / strikethrough */
.mob-text-price-old {
  font-size:       var(--mob-fs-price-old);
  font-weight:     var(--mob-fw-regular);
  line-height:     var(--mob-lh-price-old);
  color:           var(--mob-color-price-old);
  text-decoration: line-through;
}

/* Merchant Name — 13px / 500 / 18px / secondary color */
.mob-text-merchant {
  font-size:   var(--mob-fs-merchant);
  font-weight: var(--mob-fw-medium);
  line-height: var(--mob-lh-merchant);
  color:       var(--mob-color-secondary);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

/* Supporting Text — 12px / 500 / 16px / secondary */
.mob-text-support {
  font-size:   var(--mob-fs-support);
  font-weight: var(--mob-fw-medium);
  line-height: var(--mob-lh-support);
  color:       var(--mob-color-secondary);
}

/* Supporting Text (lighter) — 12px / 400 */
.mob-text-meta {
  font-size:   var(--mob-fs-support);
  font-weight: var(--mob-fw-regular);
  line-height: var(--mob-lh-support);
  color:       var(--mob-color-disabled);
}

/* Button Text — 14px / 600 / 20px */
.mob-text-button {
  font-size:   var(--mob-fs-button);
  font-weight: var(--mob-fw-semibold);
  line-height: var(--mob-lh-button);
  letter-spacing: var(--mob-ls-normal);
}

/* Nav Label — 12px / 500 / 16px */
.mob-text-nav {
  font-size:   var(--mob-fs-nav);
  font-weight: var(--mob-fw-medium);
  line-height: var(--mob-lh-nav);
}

/* Nav Label Active — 12px / 600 / 16px */
.mob-text-nav-active {
  font-size:   var(--mob-fs-nav);
  font-weight: var(--mob-fw-semibold);
  line-height: var(--mob-lh-nav);
}

/* ============================================================
   5. DARK MODE COLOR OVERRIDES
   ============================================================ */

.dark .mob-text-display,
.dark .mob-text-page-title,
.dark .mob-text-section,
.dark .mob-text-product {
  color: #f1f5f9;
}

.dark .mob-text-merchant,
.dark .mob-text-support {
  color: #94a3b8;
}

.dark .mob-text-meta,
.dark .mob-text-price-old {
  color: #64748b;
}

.dark .mob-text-price-new {
  color: #ff453a;
}

/* ============================================================
   6. COMPONENT TYPOGRAPHY OVERRIDES — DEAL CARDS
   ============================================================ */

/* Product title in deal cards */
.mobile-deal-card-title {
  font-size:    var(--mob-fs-product) !important;
  font-weight:  var(--mob-fw-semibold) !important;
  line-height:  var(--mob-lh-product) !important;
  color:        var(--mob-color-primary) !important;
  letter-spacing: 0;
}

.dark .mobile-deal-card-title {
  color: #f1f5f9 !important;
}

/* Brand / merchant name in deal cards */
.mobile-deal-card-brand {
  font-size:   var(--mob-fs-merchant) !important;
  font-weight: var(--mob-fw-medium) !important;
  line-height: var(--mob-lh-merchant) !important;
  color:       var(--mob-color-secondary) !important;
}

.dark .mobile-deal-card-brand {
  color: #94a3b8 !important;
}

/* Current / new price */
.mobile-deal-current-price {
  font-size:   var(--mob-fs-price-new) !important;
  font-weight: var(--mob-fw-bold) !important;
  line-height: var(--mob-lh-price-new) !important;
}

/* Old / original price */
.mobile-deal-original-price {
  font-size:       var(--mob-fs-price-old) !important;
  font-weight:     var(--mob-fw-regular) !important;
  line-height:     var(--mob-lh-price-old) !important;
  color:           var(--mob-color-price-old) !important;
  text-decoration: line-through !important;
}

.dark .mobile-deal-original-price {
  color: #64748b !important;
}

/* Countdown — supporting text level */
.mobile-deal-card-countdown {
  font-size:   var(--mob-fs-support) !important;
  font-weight: var(--mob-fw-medium) !important;
  line-height: var(--mob-lh-support) !important;
}

/* Views — supporting text / meta level */
.mobile-deal-card-views {
  font-size:   var(--mob-fs-support) !important;
  font-weight: var(--mob-fw-medium) !important;
  line-height: var(--mob-lh-support) !important;
  color:       var(--mob-color-disabled) !important;
}

.dark .mobile-deal-card-views {
  color: #64748b !important;
}

/* Currency label aligned to price weight */
.currency-label {
  font-size:   13px !important;
  font-weight: var(--mob-fw-semibold) !important;
}

/* ============================================================
   7. COMPONENT TYPOGRAPHY OVERRIDES — BOTTOM NAVIGATION
   ============================================================ */

/* Inactive nav label — 12px / 500 */
.mobile-bottom-nav-label {
  font-size:      var(--mob-fs-nav) !important;
  font-weight:    var(--mob-fw-medium) !important;
  line-height:    var(--mob-lh-nav) !important;
  letter-spacing: 0.01em !important;
}

/* Active nav label — 12px / 600 */
.mobile-bottom-nav-item.active .mobile-bottom-nav-label {
  font-weight: var(--mob-fw-semibold) !important;
}

/* ============================================================
   8. COMPONENT TYPOGRAPHY OVERRIDES — CATEGORY CARDS
   ============================================================ */

/* Premium category grid label */
.premium-cat-label {
  font-size:   12px !important;
  font-weight: var(--mob-fw-semibold) !important;
  line-height: 1.35 !important;
  color:       var(--mob-color-primary) !important;
}

.dark .premium-cat-label {
  color: #cbd5e1 !important;
}

/* ============================================================
   9. COMPONENT TYPOGRAPHY OVERRIDES — SECTION HEADERS
   These override any existing section header styles globally.
   ============================================================ */

@media (max-width: 768px) {
  /* Homepage section titles (Flash Deals, Trending Deals, etc.) */
  .mob-section-heading,
  [class*="section"] h2.mob-title,
  .section-title-mob {
    font-size:   var(--mob-fs-section) !important;
    font-weight: var(--mob-fw-bold) !important;
    line-height: var(--mob-lh-section) !important;
    color:       var(--mob-color-primary) !important;
    letter-spacing: var(--mob-ls-tight) !important;
  }

  .dark .mob-section-heading,
  .dark [class*="section"] h2.mob-title,
  .dark .section-title-mob {
    color: #f1f5f9 !important;
  }

  /* "View All" button text */
  .mob-view-all-btn,
  a.mob-view-all {
    font-size:   var(--mob-fs-button) !important;
    font-weight: var(--mob-fw-semibold) !important;
    line-height: var(--mob-lh-button) !important;
  }

  /* Page / screen titles */
  .mob-page-title {
    font-size:   var(--mob-fs-page-title) !important;
    font-weight: var(--mob-fw-bold) !important;
    line-height: var(--mob-lh-page-title) !important;
    color:       var(--mob-color-primary) !important;
    letter-spacing: var(--mob-ls-tight) !important;
  }

  /* Hero / display text */
  .mob-hero-title,
  .mob-display-title {
    font-size:   var(--mob-fs-display) !important;
    font-weight: var(--mob-fw-bold) !important;
    line-height: var(--mob-lh-display) !important;
    color:       var(--mob-color-primary) !important;
  }
}

/* ============================================================
   10. RESPONSIVE SCALING — BREAKPOINT ADJUSTMENTS
   Target: 360 / 375 / 390 / 393 / 412 / 430px
   ============================================================ */

/* ── 360px — very small phones (Samsung J2, older budget phones) ── */
@media (max-width: 360px) {
  :root {
    --mob-fs-display:    20px;  /* Slightly smaller hero on tiny screens */
    --mob-fs-page-title: 18px;
    --mob-fs-section:    16px;
    --mob-fs-product:    14px;
    --mob-fs-price-new:  16px;  /* Fixed — clamp fallback for tiny screens */
    --mob-lh-display:    28px;
    --mob-lh-page-title: 24px;
    --mob-lh-section:    22px;
    --mob-lh-product:    20px;
    --mob-lh-price-new:  22px;
  }
}

/* ── 375px — standard small phones (iPhone SE, 12 mini) ── */
@media (min-width: 361px) and (max-width: 375px) {
  :root {
    --mob-fs-display:    22px;
    --mob-fs-price-new:  18px;
    --mob-lh-display:    30px;
  }
}

/* ── 390px — iPhone 12/13/14 standard ── */
@media (min-width: 376px) and (max-width: 393px) {
  :root {
    --mob-fs-display:    23px;
    --mob-fs-price-new:  clamp(18px, 4.8vw, 20px);
    --mob-lh-display:    32px;
  }
}

/* ── 412px — Android large (Pixel 6, Samsung A54) ── */
@media (min-width: 394px) and (max-width: 430px) {
  :root {
    --mob-fs-display:    24px;
    --mob-fs-price-new:  clamp(18px, 5vw, 20px);
    --mob-lh-display:    32px;
  }
}

/* ── 430px+ — iPhone 14/15 Pro Max, large Androids ── */
@media (min-width: 431px) and (max-width: 767px) {
  :root {
    --mob-fs-display:    24px;
    --mob-fs-page-title: 20px;
    --mob-fs-section:    18px;
    --mob-lh-display:    32px;
  }
}

/* ============================================================
   11. RTL / LTR TYPOGRAPHY ADJUSTMENTS
   ============================================================ */

/* Arabic (RTL) — Cairo optimizations */
[dir="rtl"],
html[lang="ar"] {
  /* Cairo renders best with slightly looser line-height */
  --mob-lh-product:     22px;
  --mob-lh-merchant:    20px;
  --mob-lh-section:     26px;
  --mob-lh-page-title:  30px;
  --mob-lh-display:     34px;
}

[dir="rtl"] .mobile-deal-card-title,
html[lang="ar"] .mobile-deal-card-title {
  font-family: var(--mob-ff-arabic);
  letter-spacing: 0.01em; /* Slight tracking helps Arabic readability */
}

[dir="rtl"] .mobile-deal-card-brand,
html[lang="ar"] .mobile-deal-card-brand {
  font-family: var(--mob-ff-arabic);
}

[dir="rtl"] .mobile-deal-current-price,
html[lang="ar"] .mobile-deal-current-price {
  font-family: var(--mob-ff-arabic);
  /* Numbers in Arabic context should still display LTR */
  unicode-bidi: plaintext;
}

/* Avoid fixed widths that break Arabic text */
[dir="rtl"] .mobile-deal-card-title,
[dir="rtl"] .mobile-deal-card-brand,
[dir="rtl"] .premium-cat-label {
  width: auto;
  max-width: 100%;
}

/* Text alignment: use logical properties */
.mobile-deal-card-title,
.mobile-deal-card-brand,
.mobile-deal-current-price,
.mob-text-product,
.mob-text-merchant {
  text-align: start; /* Respects dir attribute automatically */
}

/* ============================================================
   12. PREVENT TEXT OVERFLOW — ALL BREAKPOINTS
   ============================================================ */

@media (max-width: 768px) {
  /* Ensure no horizontal overflow from text */
  .mobile-deal-card-title,
  .mobile-deal-card-brand,
  .mob-text-product,
  .mob-text-merchant,
  .mob-text-support {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Price row: prevent wrapping issues */
  .mobile-deal-card-price-row {
    max-width: 100%;
  }

  /* Nav labels: prevent overflow in pill container */
  .mobile-bottom-nav-label {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================================
   13. DEAL CARD SIZE OVERRIDES — RESPONSIVE BREAKPOINTS
   Applied after component defaults to properly cascade.
   ============================================================ */

/* ── 360px ── */
@media (max-width: 360px) {
  .mobile-deal-card-title {
    font-size: 14px !important;
    line-height: 19px !important;
    min-height: 38px !important;
  }

  .mobile-deal-current-price {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .mobile-deal-original-price {
    font-size: 11px !important;
  }

  .mobile-deal-card-brand {
    font-size: 11px !important;
  }

  .mobile-deal-card-countdown,
  .mobile-deal-card-views {
    font-size: 10px !important;
  }
}

/* ── 375px ── */
@media (min-width: 361px) and (max-width: 375px) {
  .mobile-deal-card-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .mobile-deal-current-price {
    font-size: 17px !important;
    line-height: 23px !important;
  }
}

/* ── 390px–430px — main target range ── */
@media (min-width: 376px) and (max-width: 430px) {
  .mobile-deal-card-title {
    font-size:  15px !important;
    line-height: 20px !important;
    min-height: 40px !important;
  }

  .mobile-deal-current-price {
    font-size:  clamp(18px, 4.8vw, 20px) !important;
    line-height: 24px !important;
  }
}

/* ── 431px+ large phones ── */
@media (min-width: 431px) and (max-width: 767px) {
  .mobile-deal-card-title {
    font-size:  15px !important;
    line-height: 20px !important;
  }

  .mobile-deal-current-price {
    font-size:  20px !important;
    line-height: 24px !important;
  }
}

/* ============================================================
   14. SECTION HEADER STANDARDIZATION
   Overrides mobile.css section h2 rules with the new scale.
   ============================================================ */

@media (max-width: 768px) {
  /* Flash Deals, Trending Deals, Recommended, Top Stores, etc. */
  #categories-section h2,
  #trending-deals-section h2,
  #today-deals-section h2,
  #ending-soon-section h2,
  #ending-soon-deals-section h2,
  #big-discounts-section h2,
  #featured-deals-section h2,
  #featured-restaurants-section h2,
  #flash-deals-section h2,
  #recommended-section h2,
  #top-stores-section h2,
  #partners-section h2,
  .mobile-section-title,
  .section-heading {
    font-size:      var(--mob-fs-section) !important;
    font-weight:    var(--mob-fw-bold) !important;
    line-height:    var(--mob-lh-section) !important;
    color:          var(--mob-color-primary) !important;
    letter-spacing: -0.01em !important;
  }

  .dark #categories-section h2,
  .dark #trending-deals-section h2,
  .dark #today-deals-section h2,
  .dark #ending-soon-section h2,
  .dark #ending-soon-deals-section h2,
  .dark #big-discounts-section h2,
  .dark #featured-deals-section h2,
  .dark #featured-restaurants-section h2,
  .dark #flash-deals-section h2,
  .dark #recommended-section h2,
  .dark #top-stores-section h2,
  .dark #partners-section h2,
  .dark .mobile-section-title,
  .dark .section-heading {
    color: #f1f5f9 !important;
  }

  /* Screen / page titles (h1 level) */
  .mobile-page-title,
  .mob-screen-title {
    font-size:      var(--mob-fs-page-title) !important;
    font-weight:    var(--mob-fw-bold) !important;
    line-height:    var(--mob-lh-page-title) !important;
    color:          var(--mob-color-primary) !important;
    letter-spacing: -0.01em !important;
  }

  .dark .mobile-page-title,
  .dark .mob-screen-title {
    color: #f1f5f9 !important;
  }

  /* "View All" link / button — button text scale */
  a[href*="deals"],
  .view-all-link,
  .mobile-view-all {
    font-size:   var(--mob-fs-button) !important;
    font-weight: var(--mob-fw-semibold) !important;
    line-height: var(--mob-lh-button) !important;
  }
}

/* ── 360px section heading adjustment ── */
@media (max-width: 360px) {
  #categories-section h2,
  #trending-deals-section h2,
  #today-deals-section h2,
  #ending-soon-section h2,
  #ending-soon-deals-section h2,
  #big-discounts-section h2,
  #featured-deals-section h2,
  #featured-restaurants-section h2,
  .mobile-section-title,
  .section-heading {
    font-size:   16px !important;
    line-height: 22px !important;
  }
}

/* ============================================================
   15. HERO / DISPLAY TYPOGRAPHY
   ============================================================ */

@media (max-width: 768px) {
  .mobile-hero-title,
  .hero-slide-heading,
  .mob-display-text {
    font-size:      clamp(20px, 6vw, 24px) !important;
    font-weight:    var(--mob-fw-bold) !important;
    line-height:    clamp(28px, 8vw, 32px) !important;
    letter-spacing: -0.02em !important;
  }

  .hero-slide-sub {
    font-size:   clamp(13px, 3.5vw, 15px) !important;
    font-weight: var(--mob-fw-medium) !important;
    line-height: 20px !important;
  }

  .hero-slide-cta,
  .mobile-hero-cta {
    font-size:   var(--mob-fs-button) !important;
    font-weight: var(--mob-fw-semibold) !important;
    line-height: var(--mob-lh-button) !important;
  }
}

/* ============================================================
   16. DRAWER / SIDEBAR TYPOGRAPHY STANDARDIZATION
   ============================================================ */

@media (max-width: 768px) {
  /* Section labels (uppercase headers) remain at 9-10px — not part of main scale */
  .drawer-section-label {
    font-size:   10px;
    font-weight: var(--mob-fw-bold);
    letter-spacing: 0.08em;
  }

  /* Nav item text */
  .drawer-nav-item {
    font-size:   14px;
    font-weight: var(--mob-fw-semibold);
    line-height: 20px;
  }

  /* Username */
  .drawer-username {
    font-size:   13px;
    font-weight: var(--mob-fw-bold);
    line-height: 18px;
  }

  /* Greeting */
  .drawer-greeting {
    font-size:   10px;
    font-weight: var(--mob-fw-medium);
    line-height: 14px;
  }
}

/* ============================================================
   17. SEARCH TYPOGRAPHY
   ============================================================ */

@media (max-width: 768px) {
  /* Suggestion items */
  .suggestion-item-text {
    font-size:   13px !important;
    font-weight: var(--mob-fw-medium) !important;
    line-height: 18px !important;
  }

  /* Search tag chips */
  .search-tag-chip {
    font-size:   12px !important;
    font-weight: var(--mob-fw-semibold) !important;
    line-height: 16px !important;
  }
}

/* ============================================================
   18. FILTER CHIP TYPOGRAPHY
   ============================================================ */

@media (max-width: 768px) {
  .mobile-filter-chip {
    font-size:   13px !important;
    font-weight: var(--mob-fw-medium) !important;
    line-height: 18px !important;
  }

  .mobile-filter-chip.active {
    font-weight: var(--mob-fw-semibold) !important;
  }
}

/* ============================================================
   19. ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .mobile-deal-card-title,
  .mobile-deal-current-price,
  .mobile-bottom-nav-label {
    transition: none !important;
  }
}