/*
 * Per-piece variant selection — the multi-piece quantity-offer block
 * (headline feature). Layout only: the pill / swatch controls reuse
 * .da-pills / .da-pill-opt / .da-swatch from main.css (UI-SPEC §3.5), so this
 * file adds just the block shell, the per-piece rows, and the multi-piece
 * receipt lines. Tokens + logical properties only — matches the order card
 * band and reads identically in LTR/RTL (ARCH §7.2).
 *
 * Enqueue: assets/css/pieces.css (integrator — see report).
 */

/* =========================================================================
   Block shell — revealed by app.js when an N>1 offer is active on a
   variable product. Sits right after the offer cards, before the countdown.
   ========================================================================= */

.da-pieces{
  margin-block-start:var(--da-s4);
  padding:var(--da-s4);
  background:var(--da-bg-tint);
  border:1.5px solid var(--da-brand-100);
  border-radius:var(--da-r-card);
  display:flex;
  flex-direction:column;
  gap:var(--da-s3);
}
.da-pieces[hidden]{ display:none; }

.da-pieces__title{
  font-size:16px;
  font-weight:700;
  color:var(--da-ink-900);
}
.da-pieces__hint{
  font-size:13px;
  line-height:1.5;
  color:var(--da-ink-500);
  margin-block-start:calc(-1 * var(--da-s2));
}
.da-pieces__rows{
  display:flex;
  flex-direction:column;
  gap:var(--da-s3);
}
.da-pieces__error{
  font-size:13px;
  font-weight:600;
  color:var(--da-error);
}
.da-pieces__error[hidden]{ display:none; }

/* =========================================================================
   One piece row — «القطعة N» + its own size pills / color swatches.
   ========================================================================= */

.da-piece{
  padding:var(--da-s3);
  background:var(--da-bg);
  border:1.5px solid var(--da-line-strong);
  border-radius:var(--da-r-input);
  display:flex;
  flex-direction:column;
  gap:var(--da-s3);
  transition:border-color var(--da-dur-1) var(--da-ease-out);
}
/* Resolved to a real in-stock variation → calm success frame. */
.da-piece.is-resolved{
  border-color:var(--da-success);
  background:var(--da-success-50);
}
/* Chosen combination is out of stock → error frame (mirrors the pill hatch). */
.da-piece.is-oos{
  border-color:var(--da-error);
  background:var(--da-error-50);
}

.da-piece__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--da-s2);
}
.da-piece__num{
  font-size:15px;
  font-weight:700;
  color:var(--da-ink-900);
}
.da-piece__status{
  font-size:13px;
  font-weight:700;
  min-block-size:1em;
}
.da-piece__status[data-state="ok"]{ color:var(--da-success); }
.da-piece__status[data-state="oos"]{ color:var(--da-error); }

.da-piece__group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.da-piece__grouplabel{
  font-size:14px;
  font-weight:600;
  color:var(--da-ink-700);
}

/* =========================================================================
   Multi-piece receipt lines (inside .da-receipt) — one per piece, replacing
   the single «product × N» row. Inherits .da-receipt__row rhythm from main.css.
   ========================================================================= */

.da-receipt__pieces[hidden]{ display:none; }

.da-receipt__piece{
  align-items:baseline;
}
.da-receipt__piece-label{
  min-inline-size:0;
}
.da-receipt__piece-num{
  font-weight:700;
  color:var(--da-ink-900);
}
.da-receipt__piece-desc{
  color:var(--da-ink-500);
  font-size:14px;
}