/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   JoDealz Premium Mobile Design System                      ║
 * ║   Version: 1.0.0                                            ║
 * ║   Single source of truth for all design tokens.             ║
 * ║   Load this FIRST before any other mobile stylesheet.       ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * Token naming convention:
 *   --ds-{category}-{variant}
 *
 * Categories: color, radius, shadow, space, text, font, anim, icon, size
 */

/* ════════════════════════════════════════════════════════════════
   §1  DESIGN TOKENS — LIGHT MODE (default)
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── §1.1  Brand & Semantic Colors ─────────────────────────── */

  /* Primary — Deals Red */
  --ds-color-primary:           #FF4D4D;
  --ds-color-primary-hover:     #E63E3E;
  --ds-color-primary-active:    #CC3535;
  --ds-color-primary-light:     rgba(255, 77, 77, 0.10);
  --ds-color-primary-glow:      rgba(255, 77, 77, 0.20);

  /* Secondary — Warm Amber / Gold */
  --ds-color-secondary:         #FF9F0A;
  --ds-color-secondary-hover:   #E08800;
  --ds-color-secondary-light:   rgba(255, 159, 10, 0.12);
  --ds-color-secondary-glow:    rgba(255, 159, 10, 0.20);

  /* Success / Savings */
  --ds-color-success:           #10B981;
  --ds-color-success-light:     rgba(16, 185, 129, 0.10);

  /* Backgrounds */
  --ds-color-bg:                #F8F9FA;
  --ds-color-bg-alt:            #F1F5F9;
  --ds-color-card:              #FFFFFF;
  --ds-color-card-hover:        #FAFAFA;
  --ds-color-overlay:           rgba(15, 23, 42, 0.60);

  /* Text Hierarchy */
  --ds-color-text-primary:      #222222;
  --ds-color-text-secondary:    #777777;
  --ds-color-text-disabled:     #999999;
  --ds-color-text-inverse:      #FFFFFF;
  --ds-color-text-price:        #FF4D4D;
  --ds-color-text-price-old:    #999999;

  /* Borders */
  --ds-color-border:            #EEEEEE;
  --ds-color-border-light:      rgba(241, 245, 249, 0.80);
  --ds-color-border-focus:      #FF4D4D;

  /* ── §1.2  Border Radius ────────────────────────────────────── */

  --ds-radius-xs:               4px;
  --ds-radius-sm:               8px;
  --ds-radius-md:               12px;
  --ds-radius-lg:               16px;
  --ds-radius-xl:               20px;
  --ds-radius-2xl:              24px;
  --ds-radius-pill:             999px;

  /* Semantic component aliases */
  --ds-radius-button:           var(--ds-radius-md);   /* 12px */
  --ds-radius-card:             var(--ds-radius-lg);   /* 16px */
  --ds-radius-card-sm:          var(--ds-radius-md);   /* 12px — category cards */
  --ds-radius-search:           var(--ds-radius-lg);   /* 16px */
  --ds-radius-badge:            var(--ds-radius-pill);
  --ds-radius-input:            var(--ds-radius-lg);   /* 16px */
  --ds-radius-bottom-nav:       var(--ds-radius-xl);   /* 20px */
  --ds-radius-sheet:            var(--ds-radius-2xl);  /* 24px */

  /* ── §1.3  Shadow Elevation ─────────────────────────────────── */

  /* Raw levels */
  --ds-shadow-sm:               0 2px 8px rgba(0, 0, 0, 0.08);
  --ds-shadow-md:               0 4px 16px rgba(0, 0, 0, 0.12);
  --ds-shadow-lg:               0 8px 32px rgba(0, 0, 0, 0.16);
  --ds-shadow-xl:               0 16px 48px rgba(0, 0, 0, 0.20);

  /* Semantic component aliases */
  --ds-shadow-card:             var(--ds-shadow-sm);   /* Cards, buttons */
  --ds-shadow-float:            var(--ds-shadow-md);   /* Floating elements, bottom nav */
  --ds-shadow-modal:            var(--ds-shadow-lg);   /* Modals, search overlay */
  --ds-shadow-overlay:          var(--ds-shadow-xl);   /* Full-screen overlays */
  --ds-shadow-primary-glow:     0 4px 12px rgba(255, 77, 77, 0.20);
  --ds-shadow-secondary-glow:   0 4px 12px rgba(255, 159, 10, 0.20);

  /* ── §1.4  8-Point Spacing Scale ───────────────────────────── */

  --ds-space-1:                 4px;    /* 0.5 unit  */
  --ds-space-2:                 8px;    /* 1 unit    */
  --ds-space-3:                 12px;   /* 1.5 units */
  --ds-space-4:                 16px;   /* 2 units   */
  --ds-space-5:                 20px;   /* 2.5 units */
  --ds-space-6:                 24px;   /* 3 units   */
  --ds-space-8:                 32px;   /* 4 units   */
  --ds-space-10:                40px;   /* 5 units   */
  --ds-space-12:                48px;   /* 6 units   */

  /* Semantic spacing aliases */
  --ds-space-page:              var(--ds-space-4);     /* 16px — page horizontal padding */
  --ds-space-section:           var(--ds-space-6);     /* 24px — gap between sections */
  --ds-space-card:              var(--ds-space-3);     /* 12px — card internal padding */
  --ds-space-card-lg:           var(--ds-space-4);     /* 16px — large card padding */
  --ds-space-grid:              var(--ds-space-3);     /* 12px — grid / card gap */
  --ds-space-button:            var(--ds-space-4);     /* 16px — button horizontal padding */

  /* ── §1.5  Typography ───────────────────────────────────────── */

  /* Font families */
  --ds-font-arabic:             'Cairo', 'Droid Arabic Naskh', system-ui, sans-serif;
  --ds-font-english:            'Inter', 'Poppins', system-ui, sans-serif;

  /* Font weights */
  --ds-fw-regular:              400;
  --ds-fw-medium:               500;
  --ds-fw-semibold:             600;
  --ds-fw-bold:                 700;
  --ds-fw-extrabold:            800;

  /* Font sizes */
  --ds-text-display:            24px;   /* Hero / Large Title */
  --ds-text-page-title:         20px;   /* Page / screen title */
  --ds-text-section:            18px;   /* Section title */
  --ds-text-product:            15px;   /* Product / deal title */
  --ds-text-price:              clamp(18px, 5vw, 20px);
  --ds-text-price-old:          13px;
  --ds-text-merchant:           13px;
  --ds-text-button:             14px;
  --ds-text-meta:               12px;   /* Metadata / supporting */
  --ds-text-nav:                12px;   /* Navigation labels */
  --ds-text-badge:              12px;

  /* Line heights */
  --ds-lh-display:              32px;
  --ds-lh-page-title:           28px;
  --ds-lh-section:              24px;
  --ds-lh-product:              20px;
  --ds-lh-price:                24px;
  --ds-lh-price-old:            18px;
  --ds-lh-merchant:             18px;
  --ds-lh-button:               20px;
  --ds-lh-meta:                 16px;
  --ds-lh-nav:                  16px;

  /* Letter spacing */
  --ds-ls-tight:                -0.01em;
  --ds-ls-normal:                0;
  --ds-ls-wide:                  0.01em;

  /* ── §1.6  Animation / Motion ───────────────────────────────── */

  /* Duration levels */
  --ds-anim-fast:               150ms;   /* Button press, favorite toggle */
  --ds-anim-standard:           250ms;   /* Expand/collapse, nav changes */
  --ds-anim-large:              300ms;   /* Modals, search overlay */
  --ds-anim-spring:             500ms;   /* Spring transitions */

  /* Easing curves */
  --ds-ease-linear:             linear;
  --ds-ease-standard:           cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-decelerate:         cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-accelerate:         cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-smooth:             cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-spring:             cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transition shorthands */
  --ds-transition-fast:         var(--ds-anim-fast) var(--ds-ease-standard);
  --ds-transition-standard:     var(--ds-anim-standard) var(--ds-ease-smooth);
  --ds-transition-large:        var(--ds-anim-large) var(--ds-ease-decelerate);
  --ds-transition-spring:       var(--ds-anim-spring) var(--ds-ease-spring);

  /* ── §1.7  Icon Sizing ──────────────────────────────────────── */

  --ds-icon-sm:                 16px;
  --ds-icon-md:                 24px;
  --ds-icon-lg:                 32px;
  --ds-icon-nav:                26px;

  /* ── §1.8  Component Sizing ─────────────────────────────────── */

  --ds-height-header:           60px;
  --ds-height-header-lg:        64px;
  --ds-height-button:           48px;
  --ds-height-button-sm:        36px;
  --ds-height-input:            48px;
  --ds-height-bottom-nav:       60px;
  --ds-touch-target:            44px;
}

/* ════════════════════════════════════════════════════════════════
   §2  DARK MODE TOKEN OVERRIDES
   ════════════════════════════════════════════════════════════════ */

.dark,
[data-theme="dark"] {
  --ds-color-bg:                #020617;
  --ds-color-bg-alt:            #0f172a;
  --ds-color-card:              #0f172a;
  --ds-color-card-hover:        #1e293b;
  --ds-color-overlay:           rgba(0, 0, 0, 0.70);

  --ds-color-text-primary:      #f1f5f9;
  --ds-color-text-secondary:    #94a3b8;
  --ds-color-text-disabled:     #64748b;
  --ds-color-text-price:        #FF6B6B;
  --ds-color-text-price-old:    #64748b;

  --ds-color-border:            #1e293b;
  --ds-color-border-light:      rgba(30, 41, 59, 0.80);

  --ds-shadow-sm:               0 2px 8px rgba(0, 0, 0, 0.25);
  --ds-shadow-md:               0 4px 16px rgba(0, 0, 0, 0.35);
  --ds-shadow-lg:               0 8px 32px rgba(0, 0, 0, 0.45);
}

/* ════════════════════════════════════════════════════════════════
   §3  RESPONSIVE TOKEN SCALING
   Target breakpoints: 360 / 375 / 390 / 393 / 412 / 430px
   ════════════════════════════════════════════════════════════════ */

/* ── 360px — Very small phones (Samsung J2, older budget phones) */
@media (max-width: 360px) {
  :root {
    --ds-text-display:          20px;
    --ds-text-page-title:       18px;
    --ds-text-section:          16px;
    --ds-text-product:          14px;
    --ds-text-price:            16px;
    --ds-lh-display:            28px;
    --ds-lh-page-title:         24px;
    --ds-lh-section:            22px;
    --ds-lh-product:            19px;
    --ds-lh-price:              22px;
    --ds-space-page:            12px;
    --ds-space-section:         20px;
    --ds-space-card:            10px;
    --ds-space-grid:            10px;
  }
}

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

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

/* ── 412px–430px — Android large & iPhone Pro Max */
@media (min-width: 394px) and (max-width: 767px) {
  :root {
    --ds-text-display:          24px;
    --ds-text-price:            clamp(18px, 5vw, 20px);
    --ds-lh-display:            32px;
  }
}

/* ════════════════════════════════════════════════════════════════
   §4  RTL / ARABIC TYPOGRAPHY ADJUSTMENTS
   Cairo renders best with slightly larger line-heights
   ════════════════════════════════════════════════════════════════ */

[dir="rtl"],
html[lang="ar"] {
  --ds-lh-product:              22px;
  --ds-lh-merchant:             20px;
  --ds-lh-section:              26px;
  --ds-lh-page-title:           30px;
  --ds-lh-display:              34px;
}

/* ════════════════════════════════════════════════════════════════
   §5  GLOBAL BASE — FONT RENDERING & BOX MODEL
   ════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    background-color: var(--ds-color-bg);
    color: var(--ds-color-text-primary);
  }

  /* LTR — English */
  html[lang="en"] body,
  [dir="ltr"] body,
  [dir="ltr"] .mobile-theme-active {
    font-family: var(--ds-font-english);
  }

  /* RTL — Arabic */
  html[lang="ar"] body,
  [dir="rtl"] body,
  [dir="rtl"] .mobile-theme-active {
    font-family: var(--ds-font-arabic);
    line-height: 1.65;
    letter-spacing: var(--ds-ls-wide);
  }
}

/* ════════════════════════════════════════════════════════════════
   §6  TYPOGRAPHY UTILITY CLASSES
   ════════════════════════════════════════════════════════════════ */

/* Display / Large Title */
.ds-text-display {
  font-size:      var(--ds-text-display);
  font-weight:    var(--ds-fw-bold);
  line-height:    var(--ds-lh-display);
  letter-spacing: var(--ds-ls-tight);
  color:          var(--ds-color-text-primary);
}

/* Page / Screen Title */
.ds-text-page-title {
  font-size:      var(--ds-text-page-title);
  font-weight:    var(--ds-fw-bold);
  line-height:    var(--ds-lh-page-title);
  letter-spacing: var(--ds-ls-tight);
  color:          var(--ds-color-text-primary);
}

/* Section Title */
.ds-text-section {
  font-size:      var(--ds-text-section);
  font-weight:    var(--ds-fw-bold);
  line-height:    var(--ds-lh-section);
  letter-spacing: var(--ds-ls-tight);
  color:          var(--ds-color-text-primary);
}

/* Product Title — 2-line clamp */
.ds-text-product {
  font-size:    var(--ds-text-product);
  font-weight:  var(--ds-fw-semibold);
  line-height:  var(--ds-lh-product);
  color:        var(--ds-color-text-primary);
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp:   2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
  text-overflow: ellipsis;
  text-align:   start;
}

/* Current Price */
.ds-text-price {
  font-size:      var(--ds-text-price);
  font-weight:    var(--ds-fw-bold);
  line-height:    var(--ds-lh-price);
  letter-spacing: var(--ds-ls-tight);
  color:          var(--ds-color-text-price);
}

/* Old / Struck-through Price */
.ds-text-price-old {
  font-size:       var(--ds-text-price-old);
  font-weight:     var(--ds-fw-regular);
  line-height:     var(--ds-lh-price-old);
  color:           var(--ds-color-text-price-old);
  text-decoration: line-through;
}

/* Merchant / Brand Name */
.ds-text-merchant {
  font-size:     var(--ds-text-merchant);
  font-weight:   var(--ds-fw-medium);
  line-height:   var(--ds-lh-merchant);
  color:         var(--ds-color-text-secondary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  text-align:    start;
}

/* Button Label */
.ds-text-button {
  font-size:      var(--ds-text-button);
  font-weight:    var(--ds-fw-semibold);
  line-height:    var(--ds-lh-button);
  letter-spacing: var(--ds-ls-normal);
}

/* Metadata / Supporting */
.ds-text-meta {
  font-size:   var(--ds-text-meta);
  font-weight: var(--ds-fw-medium);
  line-height: var(--ds-lh-meta);
  color:       var(--ds-color-text-secondary);
}

/* Navigation Label */
.ds-text-nav {
  font-size:   var(--ds-text-nav);
  font-weight: var(--ds-fw-medium);
  line-height: var(--ds-lh-nav);
}

.ds-text-nav-active {
  font-size:   var(--ds-text-nav);
  font-weight: var(--ds-fw-semibold);
  line-height: var(--ds-lh-nav);
}

/* ════════════════════════════════════════════════════════════════
   §7  BUTTON SYSTEM
   ════════════════════════════════════════════════════════════════ */

/* Base button reset */
.ds-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--ds-space-2);
  height:          var(--ds-height-button);
  padding:         0 var(--ds-space-button);
  border-radius:   var(--ds-radius-button);
  font-size:       var(--ds-text-button);
  font-weight:     var(--ds-fw-semibold);
  line-height:     var(--ds-lh-button);
  letter-spacing:  var(--ds-ls-normal);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      all var(--ds-transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
  user-select:     none;
  min-width:       var(--ds-touch-target);
}

.ds-btn:active {
  transform: scale(0.96);
}

/* Primary — Main CTA, confirm actions */
.ds-btn-primary {
  background: var(--ds-color-primary);
  color:       var(--ds-color-text-inverse);
  box-shadow:  var(--ds-shadow-primary-glow);
}

.ds-btn-primary:hover {
  background:  var(--ds-color-primary-hover);
  box-shadow:  0 6px 20px rgba(255, 77, 77, 0.30);
}

.ds-btn-primary:active {
  background:  var(--ds-color-primary-active);
  transform:   scale(0.96);
  box-shadow:  var(--ds-shadow-sm);
}

/* Secondary — Alternative actions */
.ds-btn-secondary {
  background:  var(--ds-color-card);
  color:       var(--ds-color-text-primary);
  border:      1px solid var(--ds-color-border);
  box-shadow:  var(--ds-shadow-sm);
}

.ds-btn-secondary:hover {
  background:  var(--ds-color-bg);
  border-color: var(--ds-color-primary);
  color:        var(--ds-color-primary);
}

.ds-btn-secondary:active {
  transform:   scale(0.96);
  background:  var(--ds-color-bg-alt);
}

/* Text — View All, links */
.ds-btn-text {
  background:     transparent;
  color:          var(--ds-color-primary);
  padding:        0 var(--ds-space-1);
  height:         auto;
  min-height:     var(--ds-touch-target);
  border-radius:  var(--ds-radius-sm);
}

.ds-btn-text:hover {
  background: var(--ds-color-primary-light);
}

/* Small button variant */
.ds-btn-sm {
  height:       var(--ds-height-button-sm);
  padding:      0 var(--ds-space-3);
  font-size:    var(--ds-text-meta);
  border-radius: var(--ds-radius-sm);
}

/* Full-width variant */
.ds-btn-full {
  width: 100%;
}

/* Dark mode buttons */
.dark .ds-btn-secondary {
  background:  var(--ds-color-card);
  border-color: var(--ds-color-border);
  color:        var(--ds-color-text-primary);
}

.dark .ds-btn-secondary:hover {
  background:  var(--ds-color-bg-alt);
}

/* ════════════════════════════════════════════════════════════════
   §8  BADGE SYSTEM
   ════════════════════════════════════════════════════════════════ */

/* Base badge */
.ds-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--ds-space-1);
  padding:         3px 8px;
  border-radius:   var(--ds-radius-badge);
  font-size:       var(--ds-text-badge);
  font-weight:     var(--ds-fw-bold);
  line-height:     var(--ds-lh-nav);
  white-space:     nowrap;
  pointer-events:  none;
}

/* Discount Badge — e.g. "-50%" */
.ds-badge-discount {
  background:  linear-gradient(135deg, var(--ds-color-primary), #FF3B3B);
  color:       var(--ds-color-text-inverse);
  box-shadow:  0 2px 8px rgba(255, 77, 77, 0.25);
  font-size:   11px;
  font-weight: var(--ds-fw-extrabold);
  padding:     3px 7px;
  border-radius: var(--ds-radius-sm);
}

/* Exclusive Badge — "⭐ Exclusive" */
.ds-badge-exclusive {
  background:  linear-gradient(135deg, #7C3AED, #4F46E5);
  color:       var(--ds-color-text-inverse);
  box-shadow:  0 2px 8px rgba(124, 58, 237, 0.25);
}

/* New Badge — "NEW" */
.ds-badge-new {
  background:  var(--ds-color-success);
  color:       var(--ds-color-text-inverse);
  box-shadow:  0 2px 8px rgba(16, 185, 129, 0.25);
  font-size:   10px;
  letter-spacing: var(--ds-ls-wide);
  text-transform: uppercase;
}

/* Flash / Hot badge */
.ds-badge-flash {
  background:  var(--ds-color-secondary);
  color:       var(--ds-color-text-inverse);
  box-shadow:  var(--ds-shadow-secondary-glow);
}

/* ════════════════════════════════════════════════════════════════
   §9  ICON SIZING UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* Enforce consistent icon dimensions — use SVG icons only */
.ds-icon-sm {
  width:      var(--ds-icon-sm);
  height:     var(--ds-icon-sm);
  flex-shrink: 0;
}

.ds-icon-md {
  width:      var(--ds-icon-md);
  height:     var(--ds-icon-md);
  flex-shrink: 0;
}

.ds-icon-lg {
  width:      var(--ds-icon-lg);
  height:     var(--ds-icon-lg);
  flex-shrink: 0;
}

.ds-icon-nav {
  width:      var(--ds-icon-nav);
  height:     var(--ds-icon-nav);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   §10  CARD SYSTEM
   ════════════════════════════════════════════════════════════════ */

/* Deal Card — white bg, 16px radius, small shadow, 1:1 image */
.ds-deal-card {
  background:    var(--ds-color-card);
  border-radius: var(--ds-radius-card);
  box-shadow:    var(--ds-shadow-card);
  border:        1px solid var(--ds-color-border-light);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  position:      relative;
  cursor:        pointer;
  -webkit-tap-highlight-color: transparent;
  transition:    transform var(--ds-transition-fast),
                 box-shadow var(--ds-transition-fast);
}

.ds-deal-card:active {
  transform:  scale(0.975);
  box-shadow: var(--ds-shadow-sm);
}

.ds-deal-card__image {
  position:    relative;
  width:       100%;
  aspect-ratio: 1 / 1;
  overflow:    hidden;
  background:  var(--ds-color-bg);
}

.ds-deal-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--ds-transition-standard);
}

.ds-deal-card__body {
  padding:         var(--ds-space-card);
  display:         flex;
  flex-direction:  column;
  flex:            1;
}

/* Category Card — 12px radius, centered icon, compact */
.ds-category-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  padding:         var(--ds-space-3) var(--ds-space-2);
  border-radius:   var(--ds-radius-card-sm);
  background:      var(--ds-color-bg);
  border:          1px solid var(--ds-color-border-light);
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
  transition:      all var(--ds-transition-fast);
}

.ds-category-card:active {
  transform:   scale(0.94);
  background:  var(--ds-color-bg-alt);
}

.ds-category-card__icon {
  width:         36px;
  height:        36px;
  border-radius: var(--ds-radius-sm);
  background:    var(--ds-color-card);
  border:        1px solid var(--ds-color-border-light);
  box-shadow:    var(--ds-shadow-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--ds-color-primary);
  margin-bottom: var(--ds-space-2);
  transition:    transform var(--ds-transition-fast);
  flex-shrink:   0;
}

.ds-category-card:hover .ds-category-card__icon {
  transform: scale(1.06);
}

.ds-category-card__label {
  font-size:    var(--ds-text-meta);
  font-weight:  var(--ds-fw-semibold);
  line-height:  1.35;
  color:        var(--ds-color-text-primary);
  text-align:   center;
  width:        100%;
  overflow:     hidden;
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Store Card — logo, name, deal count */
.ds-store-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--ds-space-2);
  padding:        var(--ds-space-3);
  border-radius:  var(--ds-radius-md);
  background:     var(--ds-color-card);
  border:         1px solid var(--ds-color-border-light);
  box-shadow:     var(--ds-shadow-card);
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
  transition:     all var(--ds-transition-fast);
}

.ds-store-card:active {
  transform:  scale(0.97);
  box-shadow: var(--ds-shadow-sm);
}

.ds-store-card__logo {
  width:         56px;
  height:        56px;
  border-radius: var(--ds-radius-md);
  overflow:      hidden;
  background:    var(--ds-color-bg);
  border:        1px solid var(--ds-color-border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.ds-store-card__logo img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.ds-store-card__name {
  font-size:     var(--ds-text-meta);
  font-weight:   var(--ds-fw-semibold);
  color:         var(--ds-color-text-primary);
  text-align:    center;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     80px;
}

.ds-store-card__count {
  font-size:   10px;
  font-weight: var(--ds-fw-medium);
  color:       var(--ds-color-text-secondary);
  text-align:  center;
}

/* Dark mode card overrides */
.dark .ds-deal-card,
.dark .ds-store-card {
  background:  var(--ds-color-card);
  border-color: var(--ds-color-border);
  box-shadow:  var(--ds-shadow-sm);
}

.dark .ds-category-card {
  background:  rgba(30, 41, 59, 0.40);
  border-color: rgba(51, 65, 85, 0.40);
}

.dark .ds-category-card:active {
  background:  rgba(51, 65, 85, 0.60);
}

.dark .ds-category-card__icon {
  background:  #0f172a;
  border-color: rgba(51, 65, 85, 0.50);
  color:        #FF6B6B;
}

.dark .ds-category-card__label {
  color: #cbd5e1;
}

.dark .ds-store-card__logo {
  background:  #0f172a;
  border-color: var(--ds-color-border);
}

/* ════════════════════════════════════════════════════════════════
   §11  SPACING UTILITIES
   ════════════════════════════════════════════════════════════════ */

.ds-section {
  padding-left:  var(--ds-space-page);
  padding-right: var(--ds-space-page);
  padding-top:   var(--ds-space-section);
  padding-bottom: var(--ds-space-section);
}

.ds-section-gap { gap: var(--ds-space-section); }
.ds-card-gap    { gap: var(--ds-space-grid); }
.ds-page-x      { padding-left: var(--ds-space-page); padding-right: var(--ds-space-page); }

/* Section header — Title + "View All" row */
.ds-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--ds-space-3);
}

.ds-section-header__title {
  font-size:      var(--ds-text-section);
  font-weight:    var(--ds-fw-bold);
  line-height:    var(--ds-lh-section);
  letter-spacing: var(--ds-ls-tight);
  color:          var(--ds-color-text-primary);
}

.ds-section-header__action {
  font-size:   var(--ds-text-button);
  font-weight: var(--ds-fw-semibold);
  color:       var(--ds-color-primary);
  text-decoration: none;
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-1);
  padding:     var(--ds-space-1) var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  transition:  all var(--ds-transition-fast);
  min-height:  var(--ds-touch-target);
}

.ds-section-header__action:hover {
  background: var(--ds-color-primary-light);
}

.dark .ds-section-header__title {
  color: var(--ds-color-text-primary);
}

/* ════════════════════════════════════════════════════════════════
   §12  SAFE AREA & SCROLL UTILITIES
   ════════════════════════════════════════════════════════════════ */

.ds-safe-top    { padding-top:    env(safe-area-inset-top); }
.ds-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Hide scrollbar utility */
.ds-scroll-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ds-scroll-hide::-webkit-scrollbar {
  display: none;
}

/* Horizontal snap scroll */
.ds-scroll-x {
  display:           flex;
  overflow-x:        auto;
  scroll-snap-type:  x mandatory;
  scroll-behavior:   smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:   none;
  -ms-overflow-style: none;
}

.ds-scroll-x::-webkit-scrollbar { display: none; }
.ds-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   §13  TOUCH TARGETS & ACCESSIBILITY
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* All interactive elements must meet 44px tap target */
  button,
  a[href],
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Minimum touch target enforcement */
  .ds-touch {
    min-height: var(--ds-touch-target);
    min-width:  var(--ds-touch-target);
    display:    flex;
    align-items: center;
    justify-content: center;
  }

  /* Focus rings for keyboard / accessibility */
  :focus-visible {
    outline:        2px solid var(--ds-color-primary);
    outline-offset: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════
   §14  ANIMATION UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* Entrance animations */
@keyframes ds-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ds-scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ds-heartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes ds-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Entrance classes */
.ds-anim-fadein  { animation: ds-fadeIn  var(--ds-anim-standard) var(--ds-ease-decelerate) forwards; }
.ds-anim-slideup { animation: ds-slideUp var(--ds-anim-large)    var(--ds-ease-smooth)     forwards; }
.ds-anim-scalein { animation: ds-scaleIn var(--ds-anim-standard) var(--ds-ease-spring)     forwards; }

/* Skeleton shimmer */
.ds-skeleton {
  background:      linear-gradient(90deg,
                     var(--ds-color-bg-alt) 25%,
                     var(--ds-color-border) 50%,
                     var(--ds-color-bg-alt) 75%);
  background-size: 200% 100%;
  animation:       ds-shimmer 1.4s ease-in-out infinite;
  border-radius:   var(--ds-radius-sm);
}

.dark .ds-skeleton {
  background: linear-gradient(90deg,
                #1e293b 25%,
                #334155 50%,
                #1e293b 75%);
  background-size: 200% 100%;
}

/* ════════════════════════════════════════════════════════════════
   §15  REDUCED MOTION SUPPORT
   ════════════════════════════════════════════════════════════════ */

@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;
  }
}

/* ════════════════════════════════════════════════════════════════
   §16  RTL LOGICAL PROPERTY HELPERS
   ════════════════════════════════════════════════════════════════ */

/* Use logical properties throughout — avoid hard-coding left/right */

/* Section header action arrow flips in RTL */
[dir="rtl"] .ds-section-header__action svg,
html[lang="ar"] .ds-section-header__action svg {
  transform: scaleX(-1);
}

/* Ensure prices display LTR even in RTL context (numbers) */
[dir="rtl"] .ds-text-price,
html[lang="ar"] .ds-text-price {
  unicode-bidi: plaintext;
  direction:    ltr;
  display:      inline-flex;
}

/* ════════════════════════════════════════════════════════════════
   §17  HIGH CONTRAST MODE SUPPORT
   ════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: more) {
  .ds-deal-card {
    border-width: 2px;
  }
  .ds-badge-discount,
  .ds-badge-exclusive,
  .ds-badge-new {
    border: 2px solid currentColor;
  }
  .ds-btn-primary {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .ds-btn-primary:focus-visible {
    outline-color: var(--ds-color-primary);
  }
}