/* An opened product's sections and its action bar, as the prototype draws them (A2.html details.sec, .sb, .ract, .blkline).
   Every value is a token. The owner's spacing rule: the parts of a section a gap apart, a coloured box keeps a gap from
   the text and the button near it. */
.prowexp details.sec {
  margin-top: 0;
  border-block: 0;
  border-top: 1px solid var(--app-line-strong);
}

.prowexp details.sec > summary {
  gap: var(--spacing-row);
  padding-inline: var(--spacing-md);
}

.prowexp details.sec > summary .sect {
  flex: 1 1 auto;
  min-width: 0;
}

.prowexp details.sec > summary svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--app-ink-soft);
  transform: rotate(-90deg); /* the drawn chevron points left; folded, a section points down, open it points up */
}

.prowexp details.sec[open] > summary svg {
  transform: rotate(90deg);
}

.prowexp details.sec > .sb {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  padding: var(--spacing-md);
}

.prowexp details.sec > .sb.flush {
  gap: 0;
  padding: 0;
}

.prowexp details.sec > .sb:empty {
  display: none;
}

/* the supplier's photos, one strip; the variants' text as read */
.srcstrip {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  padding-block: var(--spacing-xs);
}

.srct {
  flex: none;
  width: 72px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
}

.srct img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the category's path: the drawn arrow between its parts, sized to the text */
[data-part="path-arrow"] {
  display: inline-grid;
  place-items: center;
  margin-inline: var(--spacing-xs);
  vertical-align: middle;
}

[data-part="path-arrow"] svg {
  width: 14px;
  height: 14px;
}

.sbnote {
  padding: var(--spacing-gap) var(--spacing-md) var(--spacing-md);
}

.sbnote .oneline,
.prowexp .sb .oneline {
  margin: 0;
}

/* «التكرار»: ours beside the nearest Nexa products */
.nxours,
.nxt {
  display: flex;
  align-items: center;
  gap: var(--spacing-row);
}

.nxtrio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap);
}

.nxt {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--font-size-meta);
}

.nxours img,
.nxim img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-thumb);
  object-fit: cover;
}

.nxim {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-thumb);
  background-color: var(--app-raise);
}

.prowexp .ic-b {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* «يحتاج قراراً»: a card per open issue (A2.html .icards .icard .ic-t .ic-q .ic-r .ic-n .ic-b). The cards a gap apart, the
   parts of a card a gap apart and a gap in from its edge, so the filled button and the marked words never touch text. */
.icards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
}

.icard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  padding: var(--spacing-gap);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--app-surface);
  color: var(--app-ink);
  font-family: Almarai, sans-serif;
}

/* a price card before «النشر»: the same card with a dashed edge, its button the quiet one (it does not stop «قبول») */
.icard.later {
  border-style: dashed;
}

.icard .ic-t {
  font-size: var(--font-size-title);
  font-weight: 800;
  line-height: 1.6;
}

.icard .ic-q,
.icard .ic-r,
.icard .ic-n {
  font-size: var(--font-size-meta);
  line-height: 1.7;
  color: var(--app-ink-soft);
}

/* the marked part of the quote: the words the card is about, set apart without a box that touches the line */
.icard .ic-q mark {
  padding-inline: var(--spacing-xs);
  border-radius: var(--radius-sm);
  background-color: var(--app-note-bg);
  color: var(--app-note-ink);
  font-weight: 800;
}

.icard .ic-b {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.icard .ic-b .mbtn {
  width: auto;
  min-height: 44px;
  padding-inline: var(--spacing-md);
}

.icard.done .ic-t {
  font-weight: 700;
}

/* the actions: the primary button, then the quiet one, then the delete icon, each a 44 px target */
.ract {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--app-line-strong);
}

.ract .mbtn {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

.ract .mbtn.icon {
  flex: 0 0 48px;
  padding: 0;
}

.ract .mbtn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* a blocked primary button stays a button, dimmed; its line sits a gap under the row of buttons (FR-032) */
.blkline {
  margin: 0;
  padding: 0 var(--spacing-md) var(--spacing-md);
  font-size: var(--font-size-meta);
  line-height: 1.7;
  color: var(--app-ink-soft);
}