/* ==========================================================================
   AlterSmoke Utilities
   Sitewide Lot B partie 1 — display, spacing, text, flex.
   Loaded after alter-tokens.css, before alter-components.css (priority 51).
   Mobile-first responsive variants : default = all viewports ;
   `.u-md-*` = ≥ 768px ; `.u-lg-*` = ≥ 1024px.
   ========================================================================== */

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

/* ── Flex helpers ───────────────────────────────────────────────────────── */
.u-flex-row    { flex-direction: row !important; }
.u-flex-col    { flex-direction: column !important; }
.u-flex-wrap   { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }
.u-flex-1      { flex: 1 1 0 !important; }
.u-flex-auto   { flex: 0 0 auto !important; }

.u-justify-start   { justify-content: flex-start !important; }
.u-justify-center  { justify-content: center !important; }
.u-justify-end     { justify-content: flex-end !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-around  { justify-content: space-around !important; }

.u-items-start    { align-items: flex-start !important; }
.u-items-center   { align-items: center !important; }
.u-items-end      { align-items: flex-end !important; }
.u-items-baseline { align-items: baseline !important; }
.u-items-stretch  { align-items: stretch !important; }

.u-gap-xs { gap: var(--as-spacing-xs) !important; }
.u-gap-sm { gap: var(--as-spacing-sm) !important; }
.u-gap-md { gap: var(--as-spacing-md) !important; }
.u-gap-lg { gap: var(--as-spacing-lg) !important; }

/* ── Spacing — margin ───────────────────────────────────────────────────── */
.u-m-0  { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-ml-0 { margin-left: 0 !important; }
.u-mr-0 { margin-right: 0 !important; }

.u-mt-xs { margin-top: var(--as-spacing-xs) !important; }
.u-mt-sm { margin-top: var(--as-spacing-sm) !important; }
.u-mt-md { margin-top: var(--as-spacing-md) !important; }
.u-mt-lg { margin-top: var(--as-spacing-lg) !important; }

.u-mb-xs { margin-bottom: var(--as-spacing-xs) !important; }
.u-mb-sm { margin-bottom: var(--as-spacing-sm) !important; }
.u-mb-md { margin-bottom: var(--as-spacing-md) !important; }
.u-mb-lg { margin-bottom: var(--as-spacing-lg) !important; }

.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ── Spacing — padding ──────────────────────────────────────────────────── */
.u-p-0  { padding: 0 !important; }
.u-p-xs { padding: var(--as-spacing-xs) !important; }
.u-p-sm { padding: var(--as-spacing-sm) !important; }
.u-p-md { padding: var(--as-spacing-md) !important; }
.u-p-lg { padding: var(--as-spacing-lg) !important; }

.u-px-md { padding-left: var(--as-spacing-md) !important; padding-right: var(--as-spacing-md) !important; }
.u-py-md { padding-top: var(--as-spacing-md) !important; padding-bottom: var(--as-spacing-md) !important; }
.u-px-lg { padding-left: var(--as-spacing-lg) !important; padding-right: var(--as-spacing-lg) !important; }
.u-py-lg { padding-top: var(--as-spacing-lg) !important; padding-bottom: var(--as-spacing-lg) !important; }

/* ── Text ───────────────────────────────────────────────────────────────── */
.u-text-left      { text-align: left !important; }
.u-text-center    { text-align: center !important; }
.u-text-right     { text-align: right !important; }
.u-text-uppercase { text-transform: uppercase !important; }
.u-text-nowrap    { white-space: nowrap !important; }
.u-text-truncate  {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.u-fw-medium   { font-weight: var(--as-fw-medium) !important; }
.u-fw-semibold { font-weight: var(--as-fw-semibold) !important; }
.u-fw-bold     { font-weight: var(--as-fw-bold) !important; }

.u-text-amaranth   { color: var(--as-amaranth) !important; }
.u-text-grey-900   { color: var(--as-grey-900) !important; }
.u-text-grey-500   { color: var(--as-grey-500) !important; }
.u-text-grey-300   { color: var(--as-grey-300) !important; }
.u-text-white      { color: var(--as-white) !important; }
.u-text-success    { color: var(--as-success-fg) !important; }
.u-text-danger     { color: var(--as-danger) !important; }

/* ── Visibility ─────────────────────────────────────────────────────────── */
.u-invisible { visibility: hidden !important; }
.u-visible   { visibility: visible !important; }

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

/* ── Responsive — ≥ 768px ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  .u-md-d-none        { display: none !important; }
  .u-md-d-block       { display: block !important; }
  .u-md-d-flex        { display: flex !important; }
  .u-md-d-grid        { display: grid !important; }
  .u-md-flex-row      { flex-direction: row !important; }
  .u-md-flex-col      { flex-direction: column !important; }
  .u-md-text-left     { text-align: left !important; }
  .u-md-text-center   { text-align: center !important; }
  .u-md-text-right    { text-align: right !important; }
}

/* ── Responsive — ≥ 1024px ──────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .u-lg-d-none  { display: none !important; }
  .u-lg-d-block { display: block !important; }
  .u-lg-d-flex  { display: flex !important; }
  .u-lg-d-grid  { display: grid !important; }
}

/* ── Missing/broken product image → neutral box ─────────────────────────────
   When a product cover exists in DB but the image file is absent (404/403), the
   browser renders a broken-image icon plus the alt text. The catalog miniature
   and the product-page cover <img> add this class on `onerror` (inline JS strips
   srcset/src/alt) so the slot degrades to a calm neutral box instead — same
   intent as the order-confirmation `.li-img` fallback. `aspect-ratio` keeps the
   box from collapsing once `src` is removed (img-fluid forces height:auto). */
img.img-missing {
  background: var(--as-grey-100, #EDEDF3);
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
}