/* ============================================================
   Shop Web — add / edit product and the products list.
   ============================================================ */

.shell--form { padding-bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom)); }

.field__optional { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-sm); }

.field__input--area {
  height: auto;
  min-height: 110px;
  padding: var(--s-3) var(--s-4);
  line-height: var(--lh-base);
  resize: vertical;
}

/* ---------- gallery ---------- */

.gallery { margin-bottom: var(--s-5); }

.gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.gallery__count { color: var(--muted); font-size: var(--fs-sm); direction: ltr; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--surface-2);
}

.thumb img { width: 100%; height: 100%; object-fit: cover; }

.thumb--add {
  display: grid;
  place-items: center;
  font-size: 26px;
  color: var(--muted);
  font-weight: var(--fw-regular);
}

.thumb__badge {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 4px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

.thumb__x {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--veil);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* per-image upload progress */
.thumb__bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--veil);
}

.thumb__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 120ms linear;
}

.thumb[data-busy="1"] img { opacity: 0.45; }

/* ---------- price ---------- */

.price-row {
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--r-field);
  padding-inline-end: var(--s-4);
}

.price-row .field__input { background: none; direction: ltr; text-align: right; }
.price-row__unit { color: var(--muted); font-size: var(--fs-sm); flex: none; }

/* ---------- the currency the price is in ----------

   Two options, both visible, directly under the input they describe.
   A <select> would hide one of them behind a tap and say nothing about
   what the choice is between; with exactly two, showing both costs one
   row and answers the question on sight.

   These are real radios, visually hidden behind their own labels: the
   browser keeps "exactly one" true, the keyboard and a screen reader
   get a proper group, and the form still posts a currency with no
   JavaScript running at all. */

.seg {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: 0;
  border: 0;
}

.seg__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.seg__option { flex: 1 1 0; min-width: 0; }

/* Hidden, not removed: focus still lands on it, and :checked / :focus-visible
   below are what draw the state. */
.seg__option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.seg__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 8px var(--s-3);
  border: 1px solid #DEDAD2;
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.seg__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The symbol reads left-to-right even inside the RTL label: $ belongs
   before its number in every language, including this one. */
.seg__symbol { direction: ltr; unicode-bidi: isolate; flex: none; opacity: 0.75; }

/* Selected. Filled rather than outlined, so which one is on is obvious
   at a glance on a phone in daylight, not a one-pixel border difference. */
.seg__option input:checked + .seg__face {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.seg__option input:checked + .seg__face .seg__symbol { opacity: 1; }

.seg__option input:focus-visible + .seg__face {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Narrow phones: the two labels are long in Sorani, so let the symbol
   carry the meaning rather than truncating both names to nothing. */
@media (max-width: 359px) {
  .seg__face { flex-direction: column; gap: 2px; min-height: 52px; font-size: 12px; }
}

/* Where the symbol goes changes the spacing, so the spacing is set from
   the same fact the server rendered from.

   `25,000 د.ع` wants the gap. `$25` does not — a dollar sign with a
   space after it reads as two things, and the price rows are laid out
   `direction: ltr`, so the symbol is already sitting where it belongs.

   Specificity: these are two classes each, which beats .pdp-price and
   the .card__commercial .card__price gap they would otherwise inherit. */
.card__price[data-currency="USD"],
.pdp-price[data-currency="USD"] { gap: 0; }

/* And the symbol is part of the number, not a note about it.
   .card__currency is 12px next to a 19px amount, which is right for
   `د.ع` — a separate word after the price — and wrong for `$`, where
   it left the dollar sign looking like a footnote marker. */
.card__price[data-currency="USD"] .card__currency,
.pdp-price[data-currency="USD"] .card__currency {
  font-size: inherit;
  font-weight: inherit;
}

.card__price[data-currency="USD"] .card__currency { font-size: 17px; font-weight: var(--fw-bold); }
.pdp-price[data-currency="USD"] .card__currency { font-size: 28px; font-weight: 700; }

/* ---------- inline chips (category, filters) ---------- */

.chips--inline {
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: var(--s-2);
}

.chips--inline .chip { font-size: var(--fs-sm); padding: 8px var(--s-3); }

/* ---------- visibility switch ---------- */

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-5);
}

.switch {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  min-height: 44px;
}

.switch__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--muted);
  transition: background var(--t-fast);
}

.switch[aria-checked="true"] .switch__dot { background: var(--accent); }
.switch[aria-checked="true"] .switch__text { color: var(--accent); font-weight: var(--fw-bold); }

/* ---------- fixed save bar ---------- */

.save-bar {
  position: fixed;
  inset-block-end: calc(var(--nav-h) + env(safe-area-inset-bottom));
  inset-inline: 0;
  z-index: 15;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
}

.btn--danger { color: #A2402F; }
.btn--compact { width: auto; min-height: 44px; padding-inline: var(--s-4); font-size: var(--fs-sm); }

/* ---------- crop sheet ---------- */

.crop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.crop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  padding-block-start: calc(var(--s-4) + env(safe-area-inset-top));
}

.crop__title { font-family: var(--font-head); font-weight: var(--fw-bold); }
.crop__action { color: var(--muted); font-size: var(--fs-md); min-height: 44px; padding-inline: var(--s-2); }
.crop__action--go { color: var(--accent); font-weight: var(--fw-bold); }

.crop__stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #100F0B;
  touch-action: none;          /* we handle drag and pinch ourselves */
}

.crop__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the 4:5 window, drawn as a ring rather than a border on the image */
.crop__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(16, 15, 11, 0.55);
  margin: auto;
  aspect-ratio: 4 / 5;
  width: min(86vw, 86%);
  max-height: 86%;
}

.crop__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  padding-block-end: calc(var(--s-4) + env(safe-area-inset-bottom));
}

.crop__hint { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.crop__tools .btn { width: auto; min-height: 46px; padding-inline: var(--s-5); }

/* The seller's inventory list lived here: .rows / .row / .manager-*,
   styling worker/render/product-list.js. Both are gone — /app is the
   one list of a seller's products now, and it uses the marketplace
   card the rest of the app uses. */

/* PASS 2 — seller publishing only. Existing profile cropper/list styles stay intact. */
.publish-page { max-width: var(--page-max); padding: 18px 16px 24px; }
.publish-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.publish-head h1 { font-size: 18px; line-height: 1.6; text-align: center; }
.publish-head .icon-btn { background: transparent; }
.publish-help { position: relative; font-size: 12px; }
.publish-help summary { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border: 1px solid #D9D5CC; border-radius: 9px; cursor: pointer; list-style: none; }
.publish-help summary::-webkit-details-marker { display: none; }
.publish-help p { position: absolute; inset-inline-end: 0; top: 40px; width: min(270px, 80vw); z-index: 4; background: var(--surface); padding: 14px; border: 1px solid var(--surface-2); border-radius: 12px; line-height: 1.9; }
.publish-sub { text-align: center; color: var(--muted); font-size: 12px; margin: 6px 0 22px; }
.publish-page .gallery { margin-bottom: 22px; }
.publish-page .gallery__head { align-items: center; margin-bottom: 8px; }
.publish-page .gallery__head small { font-size: 12px; font-weight: 400; }
.publish-page .field__label { margin-bottom: 6px; }
.publish-page .thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 4px; scroll-snap-type: x proximity; margin: 0; }
.publish-photo { flex: 0 0 91px; min-width: 0; scroll-snap-align: start; }
.publish-page .thumb { border-radius: 10px; aspect-ratio: 1; width: 100%; }
.publish-page .thumb.is-cover { outline: 2px solid var(--accent); outline-offset: -2px; }
.publish-page .thumb__select { display: block; padding: 0; width: 100%; height: 100%; }
.publish-page .thumb__select img { width: 100%; height: 100%; object-fit: cover; }
.publish-page .thumb__select:focus-visible { outline-offset: -4px; }
.publish-page .thumb--add { flex: 0 0 72px; height: 114px; border: 1px dashed #CDC8BC; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--text); }
.publish-page .thumb--add svg { background: var(--accent); color: white; width: 32px; height: 32px; padding: 6px; border-radius: 50%; }
.publish-page .thumb__x { width: 32px; height: 32px; top: 2px; inset-inline-end: 2px; background: var(--surface); font-size: 21px; }
.publish-page .thumb__badge { pointer-events: none; bottom: 6px; inset-inline-start: auto; left: 5px; font-size: 11px; padding: 1px 6px; background: var(--surface); color: var(--accent); }
.thumb__number { pointer-events: none; position: absolute; bottom: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; background: var(--text); color: white; border-radius: 50%; font-size: 12px; }
.is-cover .thumb__number { background: var(--accent); }
.photo-order { display: flex; justify-content: space-between; }
.photo-order button { min-width: 40px; min-height: 32px; color: var(--accent); }
.photo-order button:disabled { color: #C8C3B9; cursor: default; }
.gallery-hint { margin: 3px 0 0; padding: 7px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 11px; text-align: center; }
.publish-page .field { margin-bottom: 14px; }
.publish-page .field__input { border: 1px solid #DEDAD2; border-radius: 9px; background: var(--surface); min-height: 46px; height: 46px; padding-inline: 12px; font-family: var(--font-body); }
.publish-page select.field__input { padding-inline-end: 8px; }
.publish-page .field__hint { font-size: 11px; margin: 5px 0 0; line-height: 1.7; }
.publish-page .price-row { border: 1px solid #DEDAD2; background: var(--surface); border-radius: 9px; padding-inline-end: 12px; }
.publish-page .price-row .field__input { border: none; background: transparent; color: var(--accent); font-size: 21px; font-weight: 700; }
.publish-page .price-row__unit { color: var(--text); }
/* A new section is made here, in the form. Nothing navigates away, so
   the typed fields and the prepared images survive it. */
.category-inline { margin-top: 6px; }
.category-inline__open { display: flex; gap: 5px; align-items: center; justify-content: flex-start; min-height: 36px; font-size: 11px; color: var(--accent); }
.category-inline__form { display: flex; align-items: center; gap: 6px; }
.category-inline__form .field__input { flex: 1; min-width: 0; }
.category-inline__form .btn { flex: none; width: auto; min-height: 46px; height: 46px; padding: 8px 12px; border-radius: 9px; font-size: 12px; }
.category-inline__error { margin: 6px 0 0; color: #A2402F; font-size: 11px; line-height: 1.7; }
.publish-page .field__input--area { display: block; min-height: 88px; height: auto; padding: 10px 12px; resize: vertical; }
.description-count { display: block; color: var(--muted); font-size: 11px; text-align: left; margin-top: 3px; }
.publish-save .btn { min-height: 48px; border-radius: 9px; font-family: var(--font-body); font-size: 18px; }
.publish-save p { margin: 5px 0 0; font-size: 11px; text-align: center; color: var(--muted); }
.publish-message { background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
.publish-page [disabled] { cursor: wait; }
.publish-page--edit .gallery--cover-only { padding: 12px; border: 1px solid #DEDAD2; border-radius: 12px; background: var(--surface); }
.publish-page--edit .gallery--cover-only .thumbs { padding-block: 3px 6px; }
.publish-page--edit .gallery--cover-only .publish-photo { flex-basis: 84px; }
.publish-page--edit .gallery--cover-only .thumb__number { display: none; }
.publish-page--edit .cover-change { flex-basis: 84px; height: 84px; }
.edit-price__value { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #DEDAD2; border-radius: 9px; background: var(--surface-2); }
.edit-price__value > span { direction: ltr; color: var(--accent); font-size: 18px; font-weight: 700; }
.edit-price__value small { color: var(--muted); font-size: 11px; }
/* Dedicated product dialog, separate from the profile image cropper. */
.cover-editor { border: 0; padding: 16px; margin: 0 auto; inset: 0; width: 100%; max-width: var(--page-max); height: 100dvh; max-height: 100dvh; background: var(--bg); color: var(--text); overflow-y: auto; overscroll-behavior: contain; }
.cover-editor:not([open]) { display: none; }
.cover-editor::backdrop { background: var(--bg); }
.cover-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.cover-head h2 { text-align: center; font-size: 18px; line-height: 1.6; }
.cover-head button { min-height: 44px; }
#cover-back { font-size: 32px; }
.cover-intro { margin: 8px 0 16px; text-align: center; font-size: 12px; line-height: 1.8; color: var(--muted); }
.cover-stage { position: relative; width: 100%; height: clamp(280px, 52dvh, 460px); background: var(--surface-2); overflow: hidden; border-radius: 10px; touch-action: none; cursor: grab; }
.cover-stage:active { cursor: grabbing; }
#cover-canvas { width: 100%; height: 100%; display: block; }
.cover-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px; }
.cover-zoom { display: flex; direction: ltr; align-items: center; flex: 1; min-width: 0; }
.cover-zoom button { min-width: 44px; min-height: 44px; font-size: 22px; }
.cover-zoom input { width: 100%; min-width: 0; height: 36px; accent-color: var(--accent); }
.cover-footer { padding-bottom: env(safe-area-inset-bottom); }
#cover-cancel { display: block; margin: auto; min-height: 44px; color: var(--accent); font-size: 12px; }
#cover-save { min-height: 48px; border-radius: 9px; font-family: var(--font-body); font-size: 17px; }
@media (max-width: 350px) {
  .publish-head h1, .cover-head h2 { font-size: 16px; }
  .publish-head, .cover-head { gap: 4px; }
}
#cover-rotate { flex: none; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }

/* ---------- the free trial's product allowance ---------- */

.publish-free-left {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

/* The refusal is a page, not an inline error: it has to say the limit,
   promise the existing products are safe, and offer a way forward. */
.trial-limit .btn { width: auto; min-width: 200px; }