/* ============================================================
   utilities.css — 单一用途工具类（Task 3 · Direction D）
   全部包在 @layer utilities；颜色走 var(--*)，0 处硬编码 hex。
   ============================================================ */

@layer utilities {

  /* ---- 文字截断 ---- */
  .u-text-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

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

  /* ---- Flex 快捷 ---- */
  .u-flex            { display: flex; }
  .u-items-center    { align-items: center; }
  .u-justify-between { justify-content: space-between; }
  .u-justify-center  { justify-content: center; }
  .u-flex-col        { flex-direction: column; }
  .u-flex-wrap       { flex-wrap: wrap; }

  /* ---- Gap ---- */
  .u-gap-xs  { gap: var(--space-xs); }
  .u-gap-sm  { gap: var(--space-sm); }
  .u-gap-md  { gap: var(--space-md); }
  .u-gap-lg  { gap: var(--space-lg); }

  /* ---- Margin top ---- */
  .u-mt-xs   { margin-top: var(--space-xs); }
  .u-mt-sm   { margin-top: var(--space-sm); }
  .u-mt-md   { margin-top: var(--space-md); }
  .u-mt-lg   { margin-top: var(--space-lg); }
  .u-mt-xl   { margin-top: var(--space-xl); }

  /* ---- Margin bottom ---- */
  .u-mb-xs   { margin-bottom: var(--space-xs); }
  .u-mb-sm   { margin-bottom: var(--space-sm); }
  .u-mb-md   { margin-bottom: var(--space-md); }
  .u-mb-lg   { margin-bottom: var(--space-lg); }
  .u-mb-xl   { margin-bottom: var(--space-xl); }

  /* ---- 颜色语义工具 ---- */
  .u-text-primary   { color: var(--color-primary); }
  .u-text-accent    { color: var(--color-accent); }
  .u-text-muted     { color: var(--color-text-muted); }
  .u-text-strong    { color: var(--color-text-strong); }
  .u-text-success   { color: var(--color-success); }
  .u-text-danger    { color: var(--color-danger); }

  /* ---- 字号 ---- */
  .u-text-xs   { font-size: var(--font-size-xs); }
  .u-text-sm   { font-size: var(--font-size-sm); }
  .u-text-base { font-size: var(--font-size-base); }
  .u-text-md   { font-size: var(--font-size-md); }
  .u-text-lg   { font-size: var(--font-size-lg); }

  /* ---- 字重 ---- */
  .u-font-medium   { font-weight: var(--font-weight-medium); }
  .u-font-semibold { font-weight: var(--font-weight-semibold); }
  .u-font-bold     { font-weight: var(--font-weight-bold); }

  /* ---- 其他常用 ---- */
  .u-w-full  { width: 100%; }
  .u-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;
  }

  /* ---- 供应商没传 logo 时的首字母方块（components/supplier-logo.phtml）----
     尺寸、圆角沿用调用方那个 logo 类（pages 层的 .pdp-supplier-bar__logo 等）；
     放在 utilities 层是因为那些类在 pages 层写了白底和边框，components 层压不过它们。
     底色由模板经 --supplier-mono-bg 传入（这家店的旺铺主色），字号按 48~60px 的盒子取一个值。 */
  .supplier-mono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--supplier-mono-bg, var(--color-primary));
    border-color: transparent;
    color: var(--color-bg-white);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
  }
  .supplier-mono__icon {
    width: 55%;
    height: 55%;
  }

} /* end @layer utilities */