/* ==========================================================================
   UTILITIES — small, single-purpose helpers.
   Kept deliberately short: reach for a component before a stack of these.
   ========================================================================== */

/* Display */
.d-none    { display: none !important; }
.d-block   { display: block !important; }
.d-inline  { display: inline !important; }
.d-iblock  { display: inline-block !important; }
.d-flex    { display: flex !important; }
.d-iflex   { display: inline-flex !important; }
.d-grid    { display: grid !important; }

/* Flex */
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; min-width: 0; }
.flex-auto    { flex: 0 0 auto; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch{ align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }
.mx-auto { margin-inline: auto; }

/* Gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }

/* Margin / padding — t/b/y only, the axes that actually vary */
.mt-0 { margin-top: 0; }    .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--space-1); }  .mb-1 { margin-bottom: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }  .mb-2 { margin-bottom: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }  .mb-3 { margin-bottom: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }  .mb-4 { margin-bottom: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }  .mb-5 { margin-bottom: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }  .mb-6 { margin-bottom: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }  .mb-7 { margin-bottom: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }  .mb-8 { margin-bottom: var(--space-8); }
.mt-10{ margin-top: var(--space-10); } .mb-10{ margin-bottom: var(--space-10); }

.p-0 { padding: 0; }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-10{ padding-block: var(--space-10); }

/* Text */
.text-start  { text-align: start; }
.text-center { text-align: center; }
.text-end    { text-align: end; }
/* Physical on purpose — for content whose alignment is not about reading direction,
   such as a numeric table column that stays right-aligned in Arabic too. */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-upper  { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.text-cap    { text-transform: capitalize; }
.fw-light    { font-weight: var(--fw-light); }
.fw-normal   { font-weight: var(--fw-normal); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.text-primary { color: var(--color-primary); }
.text-heading { color: var(--color-heading); }
.text-body    { color: var(--color-body); }
.text-muted   { color: var(--color-muted); }
.text-meta    { color: var(--color-meta); }
.text-white   { color: var(--color-white); }
.text-sale    { color: var(--color-sale); }
.text-success { color: var(--color-success); }
.text-accent  { color: var(--color-accent); }

/* Truncation */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clamp-1, .clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Background */
.bg-white   { background-color: var(--color-surface); }
.bg-alt     { background-color: var(--color-surface-alt); }
.bg-tint    { background-color: var(--color-surface-tint); }
.bg-primary { background-color: var(--color-primary); color: var(--color-primary-fg); }
.bg-accent  { background-color: var(--color-accent); color: var(--color-accent-fg); }
.bg-dark    { background-color: var(--color-inverse-surface); color: var(--color-inverse-content); }

/* Border & radius */
.border      { border: 1px solid var(--color-border-soft); }
.border-top  { border-top: 1px solid var(--color-border-soft); }
.border-bot  { border-bottom: 1px solid var(--color-border-soft); }
.border-none { border: 0; }
.rounded      { border-radius: var(--radius); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow      { box-shadow: var(--shadow); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }

/* Aspect ratio & object fit */
.ratio-1  { aspect-ratio: 1; }
.ratio-4-3{ aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.fit-cover   { object-fit: cover; width: 100%; height: 100%; }
.fit-contain { object-fit: contain; width: 100%; height: 100%; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky-top { position: sticky; top: var(--space-5); }
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-sm { max-width: 420px; }
.max-w-md { max-width: 620px; }
.max-w-lg { max-width: 820px; }

/* Responsive show/hide */
@media (max-width: 575px)  { .hide-xs { display: none !important; } }
@media (max-width: 767px)  { .hide-sm { display: none !important; } }
@media (max-width: 991px)  { .hide-md { display: none !important; } }
@media (max-width: 1199px) { .hide-lg { display: none !important; } }
@media (min-width: 576px)  { .only-xs { display: none !important; } }
@media (min-width: 768px)  { .only-sm { display: none !important; } }
@media (min-width: 992px)  { .only-md { display: none !important; } }

/* Scroll snap row — horizontal product rails without a JS carousel */
.scroll-row {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--space-3);
}
.scroll-row > * { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

/* Entrance animations — add .animate and one of the modifiers */
.animate { animation-duration: 0.6s; animation-fill-mode: both; animation-timing-function: var(--ease-out); }
.fade-in { animation-name: fadeIn; }
.fade-up { animation-name: fadeUp; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }