/* ============================================================
   product-edit-pricing.css — worker-5 (t-005, fixed in t-011)
   Owns: the [data-section='pricing'] block — the Price | Compare-at |
   Stock-on-hand 3-up grid, pricing-specific money/stock styling, the
   compare-at + variant-override helper copy, and the Weight (g) field.

   CANONICAL AFFIX (t-008, locked): an affixed money field is
     <div class="pe-field pe-field--money">
       <label class="pe-field__label">…</label>
       <div class="pe-field__affix">                 ← wrapper owns the border
         <span class="pe-field__affix-tag">RM</span>  ← the chip
         <input class="pe-field__input" …>            ← input, border stripped
       </div>
       <span class="pe-field__hint">…</span>
     </div>
   t-008 already styles the wrapper border/radius, the RM chip, the
   stripped input, and the focus-within / error / disabled treatment.
   This partial therefore only adds what is genuinely pricing-specific
   and never re-declares t-008's affix base or focus/error box-shadows.
   Loads after product-edit-fields.css, so these rules layer on top.
   Tokens from product-edit-base.css (t-001). Email-only — no WhatsApp.
   ============================================================ */

/* ---- Section body rhythm ----------------------------------- */
[data-section='pricing'] .pe-section__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- 3-up grid: Price | Compare-at | Stock — alignment fix --
   The three inputs must line up even though only Compare-at and Stock
   carry hint lines. Each field stacks as label → control → (hint/error);
   pinning the label to a fixed band and starting content from the top
   keeps row 2 (the affix wrapper / input) at the same y across all
   three cells. Keys off classes that exist in the real markup:
   the generic .pe-field plus worker-1's .pe-field--money/--stock. */
[data-section='pricing'] .pe-grid--3 {
  align-items: start;
}
[data-section='pricing'] .pe-grid--3 > .pe-field {
  display: grid;
  grid-template-rows: auto auto;   /* label row | control row; rest flows below */
  align-content: start;
  row-gap: 6px;
  min-width: 0;                    /* allow inputs to shrink inside the track */
}
[data-section='pricing'] .pe-grid--3 > .pe-field > .pe-field__label {
  min-height: 1.2em;              /* equalise the label band → controls align */
  align-self: end;
}

/* ---- Money fields (Price, Compare-at) ----------------------
   t-008 owns the affix wrapper + RM chip + focus/error. Add only the
   numeric polish: tabular figures so price columns read like a list,
   and a touch of emphasis on the RM chip within pricing. */
[data-section='pricing'] .pe-field--money .pe-field__input {
  font-variant-numeric: tabular-nums;
}
[data-section='pricing'] .pe-field--money .pe-field__affix-tag {
  letter-spacing: 0.02em;         /* "RM" reads as a unit, not two letters */
}

/* ---- Compare-at helper -------------------------------------
   "Original price — shoppers see it struck through." Echo the
   struck-through treatment in the hint so the meaning is obvious. */
[data-section='pricing'] .pe-field--compare-at .pe-field__hint em,
[data-section='pricing'] .pe-field--compare-at .pe-field__hint .pe-strike {
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint, #C9BEB4);
  color: var(--ink-muted, #7A6F68);
  font-style: normal;
}

/* ---- Stock-on-hand field -----------------------------------
   t-001 owns the input's existence + write wiring. Here: numeric polish
   plus the "per-variant stock overrides this" messaging. */
[data-section='pricing'] .pe-field--stock .pe-field__input {
  font-variant-numeric: tabular-nums;
}
[data-section='pricing'] .pe-field--stock .pe-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
[data-section='pricing'] .pe-field--stock .pe-field__hint::before {
  content: 'ⓘ';
  color: var(--ink-muted, #7A6F68);
  font-size: 12px;
  line-height: 1.45;
  flex: 0 0 auto;
}
/* When variants are active, JS (patch in result md) toggles
   .pe-field--disabled on the stock field + flips the hint copy. t-008
   already dims the input; here we just make the override note prominent. */
[data-section='pricing'] .pe-field--stock.pe-field--disabled .pe-field__hint {
  color: var(--terra-600, #9E3818);
  font-weight: 500;
}
[data-section='pricing'] .pe-field--stock.pe-field--disabled .pe-field__hint::before {
  content: '⛓';
  color: var(--terra-600, #9E3818);
}

/* ---- Weight (g) field --------------------------------------
   Optional, on its own short row — shouldn't stretch full width. */
[data-section='pricing'] .pe-field--weight {
  max-width: 240px;
}
[data-section='pricing'] .pe-field--weight .pe-field__input {
  font-variant-numeric: tabular-nums;
}

/* ---- Responsive: keep the 3-up money row from crushing ------
   Macro breakpoints belong to t-003; this is just a money-row fallback. */
@media (max-width: 560px) {
  [data-section='pricing'] .pe-grid--3 {
    grid-template-columns: 1fr 1fr;   /* Price + Compare-at pair up… */
  }
  [data-section='pricing'] .pe-grid--3 > .pe-field--stock {
    grid-column: 1 / -1;              /* …Stock drops to its own full row */
  }
  [data-section='pricing'] .pe-field--weight {
    max-width: none;
  }
}
@media (max-width: 380px) {
  [data-section='pricing'] .pe-grid--3 {
    grid-template-columns: 1fr;       /* single column on tiny screens */
  }
}