/* ================================================================
   ZWIPKART UTILITY CLASSES
   Lightweight helpers used across all pages.

   RULES:
   - Utilities are single-purpose, immutable classes.
   - Use sparingly — prefer component classes for complex layouts.
   - All responsive utilities use the standard breakpoints from tokens.
   ================================================================ */


/* ================================================================
   TEXT TRUNCATION
   ================================================================ */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ================================================================
   VISUALLY HIDDEN (accessible screen-reader only)
   ================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ================================================================
   RESPONSIVE DISPLAY
   ================================================================ */

/* Hidden on mobile (below 768px) */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

/* Hidden on desktop (768px and above) */
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* Show ONLY on mobile */
@media (min-width: 768px) {
  .show-mobile-only { display: none !important; }
}


/* ================================================================
   WIDTH UTILITIES (useful for skeletons, flex items)
   ================================================================ */

.w-full  { width: 100%; }
.w-3\/4  { width: 75%; }
.w-1\/2  { width: 50%; }
.w-1\/4  { width: 25%; }
.w-1\/3  { width: 33.333%; }
.w-2\/3  { width: 66.666%; }


/* ================================================================
   TEXT ALIGNMENT
   ================================================================ */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }


/* ================================================================
   FLEX HELPERS
   ================================================================ */

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1, 4px); }
.gap-2 { gap: var(--sp-2, 8px); }
.gap-3 { gap: var(--sp-3, 12px); }
.gap-4 { gap: var(--sp-4, 16px); }
.gap-6 { gap: var(--sp-6, 24px); }
.gap-8 { gap: var(--sp-8, 32px); }