/*
 * The Sell an Item form: items/new, items/edit, items/_form and its aside
 * (items/_sell_aside). Design: Sell an Item.
 *
 * Shares the --cm-* tokens, the .cm-page wrapper and the no-shadow/no-transition
 * rules from community.css. The animated boost gradient (.np-boost-border) lives
 * in boost.css. Picked up automatically by `stylesheet_link_tag :app`.
 *
 * Three states are CSS-only, so they survive with scripting off: the condition
 * and price-type pills (:checked), whether the price field or the FREE note
 * shows (.sf-pricing:has), and whether the drop zone or the photo tiles show
 * (.sf-photos:has). sell_form_controller only adds polish on top.
 */

.sf-page {
  --sf-peach: #FFC2A6;
  --sf-blue-tint: #E6F7FF;
  --sf-peach-tint: #FFF1EA;
  --sf-field-border: #DCD5B4;
}

/* ------------------------------------------------------------- page shell */

.sf-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.sf-page :is(textarea, select):focus-visible {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.sf-sponsored { margin-top: 20px; }

.sf-title { margin-top: 22px; }
.sf-title--top { margin-top: 20px; }

.sf-title h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.05;
  color: var(--cm-ink);
}

.sf-title p {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
  text-wrap: pretty;
}

.sf-title a {
  font-weight: 700;
  color: var(--cm-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------- grid */

.sf-grid {
  margin-top: 20px;
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.sf-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sf-aside {
  display: grid;
  gap: 12px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .sf-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1020px) {
  .sf-grid { grid-template-columns: minmax(0, 1fr) 340px; }

  .sf-aside {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------- notices */

.sf-errors {
  border: 1.5px solid var(--cm-orange);
  background: var(--sf-peach-tint);
  border-radius: 14px;
  padding: 14px 16px;
}

.sf-errors__title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #B23A0E;
}

.sf-errors__list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333333;
}

.sf-note {
  border: 1px solid var(--cm-border-sage);
  background: #EDF2D8;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #333333;
}

/* ---------------------------------------------------------- admin tools */

.sf-admin {
  background: var(--cm-band);
  border: 1px solid var(--cm-border-band);
  border-radius: 14px;
  overflow: hidden;
}

.sf-admin__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--cm-ink);
}

.sf-admin__head::-webkit-details-marker { display: none; }

.sf-admin__chip {
  flex: none;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--cm-ink);
  color: var(--cm-yellow);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.sf-admin__title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
}

.sf-admin__summary {
  font-size: 13px;
  color: var(--cm-ink-muted);
}

.sf-admin__summary:empty { display: none; }

.sf-admin[open] .sf-admin__head svg { transform: rotate(180deg); }

.sf-admin__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px 16px;
}

.sf-admin__search { position: relative; }

.sf-admin__results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 10px;
}

.sf-admin__chosen {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 8px 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--cm-ink);
  background: var(--cm-surface);
  font-size: 14px;
  font-weight: 600;
}

.sf-admin__chosen span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-admin__chosen button {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--cm-border-band);
  background: var(--cm-surface);
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-admin__chosen button:hover { border-color: var(--cm-ink); }

/* -------------------------------------------------- section card and step */

.sf-card {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sf-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-card__head > div {
  flex: 1;
  min-width: 0;
}

.sf-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-card__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--cm-ink-muted);
}

.sf-step {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  border: 1.5px solid var(--cm-ink);
  background: var(--sf-step-color);
  color: var(--cm-ink);
}

.sf-step--1 { --sf-step-color: var(--cm-blue-light); }
.sf-step--2 { --sf-step-color: var(--cm-yellow); }
.sf-step--3 { --sf-step-color: var(--sf-peach); }

.sf-step--done {
  background: var(--cm-ink);
  color: var(--sf-step-color);
}

/* Only after List it! has been pressed early — it points at the section to fix. */
.sf-step--missing {
  background: #D92D0B;
  border-color: var(--cm-ink);
  color: #FFFFFF;
}

/* ----------------------------------------------------------- form fields */

.sf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sf-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.sf-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  padding: 0;
}

.sf-label--count {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sf-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.sf-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cm-ink-muted);
}

.sf-mini-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cm-ink-muted);
}

.sf-input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--sf-field-border);
  background: var(--cm-card);
  font-family: inherit;
  font-size: 15.5px;
  color: var(--cm-ink);
}

.sf-input::placeholder { color: #8A8162; }

.sf-input:focus {
  outline: none;
  border-color: var(--cm-blue);
  background: var(--cm-surface);
}

.sf-input--area {
  height: auto;
  min-height: 120px;
  padding: 11px 12px;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
}

.sf-input--white { background: var(--cm-surface); }

.sf-select {
  font-size: 15px;
  padding-right: 38px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ai-autofill flashes this on a field it just wrote into. */
.sf-filled {
  border-color: var(--cm-blue);
  background: var(--sf-blue-tint);
}

.sf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------- photos & video */

.sf-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-drop {
  width: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 22px 20px;
  cursor: pointer;
  border-radius: 14px;
  border: 1.5px dashed var(--cm-dashed);
  background: linear-gradient(135deg, var(--sf-blue-tint) 0%, var(--cm-card) 55%, var(--sf-peach-tint) 100%);
}

.sf-drop:hover { border-color: var(--cm-ink); }

.sf-drop--over {
  border-color: var(--cm-blue);
  background: var(--sf-blue-tint);
}

.sf-drop__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cm-yellow);
  border: 1px solid var(--cm-yellow-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-drop__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-drop__hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cm-ink-muted);
}

.sf-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}

/* Empty: the drop zone does the asking. With any photo: the tiles take over. */
.sf-tiles--new { display: none; }
.sf-photos:has(.sf-tile) .sf-tiles--new { display: grid; }
.sf-photos:has(.sf-tile) .sf-drop { display: none; }

.sf-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  background-color: var(--cm-band);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--cm-border);
}

.sf-tile--dragging { border: 2px solid var(--cm-blue); }
.sf-tile--ghost { opacity: 0.4; }

.sf-tile__cover {
  display: none;
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--cm-yellow);
  border: 1px solid var(--cm-yellow-border);
  color: var(--cm-ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* The cover is the first photo overall: the first existing one while any
   remain, otherwise the first newly added one. */
.sf-tiles--existing .sf-tile:first-child,
.sf-photos:not(:has(.sf-tiles--existing .sf-tile)) .sf-tiles--new .sf-tile:first-child {
  border: 2px solid var(--cm-ink);
}

.sf-tiles--existing .sf-tile:first-child .sf-tile__cover,
.sf-photos:not(:has(.sf-tiles--existing .sf-tile)) .sf-tiles--new .sf-tile:first-child .sf-tile__cover {
  display: inline-flex;
}

.sf-tile__remove,
.sf-tile__crop {
  position: absolute;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border-band);
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-tile__remove { top: 6px; right: 6px; }
.sf-tile__crop { bottom: 6px; right: 6px; }

.sf-tile__remove:hover,
.sf-tile__crop:hover { border-color: var(--cm-ink); }

.sf-tile__crop:hover { background: var(--cm-blue-light); }

.sf-tile-add {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1.5px dashed var(--cm-dashed);
  background: var(--cm-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-tile-add:hover { border-color: var(--cm-ink); }

.sf-tile-add__count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

/* --------------------------------------------------------- the crop pop-up */

/* image-cropper swaps `hidden` for Tailwind's `flex`, so display stays off this. */
.sf-crop {
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(34, 34, 34, 0.55);
}

.sf-crop__panel {
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 16px;
  overflow: hidden;
}

.sf-crop__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cm-divider);
}

.sf-crop__head > div {
  flex: 1;
  min-width: 0;
}

.sf-crop__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sf-crop__count {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.sf-crop__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--cm-border-band);
  background: var(--cm-surface);
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-crop__close:hover { border-color: var(--cm-ink); }

.sf-crop__stage {
  flex: 1;
  min-height: 0;
  padding: 12px 16px;
  background: var(--cm-band);
}

.sf-crop__stage img {
  display: block;
  max-width: 100%;
  max-height: 52dvh;
}

.sf-crop__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--cm-divider);
}

.sf-crop__skip {
  padding: 0 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-link);
  background: none;
  border: 0;
  cursor: pointer;
}

.sf-crop__skip:hover { color: #0A5477; }

.sf-crop__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------------------------- video */

.sf-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* video-upload shows one state at a time by toggling `hidden`. Tailwind keeps
   .hidden in @layer utilities, and an unlayered rule beats a layered one at any
   specificity — so these must stand aside for it rather than set display flat. */
.sf-video__row:not(.hidden),
.sf-video__state:not(.hidden),
.sf-video__ready:not(.hidden) {
  display: flex;
}

.sf-video__row {
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cm-border);
}

.sf-video__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--cm-band);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-video__text {
  flex: 1;
  min-width: 0;
}

.sf-video__label {
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-video__hint {
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--cm-ink-muted);
}

.sf-video__state {
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--cm-border);
}

.sf-video__state--error {
  border-color: var(--cm-orange);
  background: var(--sf-peach-tint);
}

.sf-video__state-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sf-video__state-head > div {
  flex: 1;
  min-width: 0;
}

.sf-video__pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sf-video__ready {
  flex-direction: column;
  gap: 8px;
}

.sf-video__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cm-ink);
}

.sf-video__duration {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(34, 34, 34, 0.8);
  color: var(--cm-ground);
  font-size: 11.5px;
  font-weight: 700;
}

.sf-video__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sf-video__ok {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-link);
}

.sf-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--cm-band);
  border: 1px solid var(--cm-border-band);
  overflow: hidden;
}

.sf-progress__bar {
  height: 100%;
  background: linear-gradient(115deg, var(--cm-blue) 0%, var(--cm-blue-light) 50%, var(--cm-yellow) 100%);
}

/* ------------------------------------------------------------ AI strip */

.sf-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #EDF2D8;
  border: 1px solid #C9D8B4;
}

.sf-ai__icon { flex: none; }

.sf-ai__text {
  flex: 1 1 200px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #333333;
}

.sf-ai__btn {
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-ai__btn:hover:not(:disabled) { background: var(--cm-blue-light); }

.sf-ai__btn:disabled {
  border-color: #C9D8B4;
  color: #8A9A7A;
  cursor: default;
}

/* ------------------------------------------------------- pills and checks */

.sf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-pill { cursor: pointer; }

.sf-pill span {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-border);
  background: var(--cm-surface);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-pill input:checked + span {
  border-color: var(--cm-ink);
  background: var(--cm-ink);
  color: var(--cm-ground);
}

.sf-pill input:focus-visible + span {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.sf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.sf-check--inline { align-items: center; }

.sf-check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sf-check__box {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cm-dashed);
  background: var(--cm-surface);
  color: transparent;
}

.sf-check--inline .sf-check__box { margin-top: 0; }

.sf-check input:checked + .sf-check__box,
.sf-boost__toggle input:checked + .sf-check__box {
  border-color: var(--cm-ink);
  background: var(--cm-blue);
  color: var(--cm-blue-ink);
}

.sf-check input:focus-visible + .sf-check__box,
.sf-boost__toggle input:focus-visible + .sf-check__box {
  outline: 2px solid var(--cm-blue);
  outline-offset: 2px;
}

.sf-check__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-check--inline .sf-check__title { font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- pricing */

.sf-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
}

.sf-price__field { flex: 0 1 200px; }

.sf-money {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--sf-field-border);
  background: var(--cm-card);
  font-size: 20px;
  font-weight: 700;
  color: var(--cm-ink-muted);
}

.sf-money:focus-within {
  border-color: var(--cm-blue);
  background: var(--cm-surface);
}

.sf-money input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding-left: 4px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-free-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #444444;
}

.sf-free-note strong { color: var(--cm-ink); }

/* "It's free" swaps the price field for the note, with or without scripting. */
.sf-pricing:has(input[name="item[is_free]"][value="true"]:checked) .sf-price { display: none; }
.sf-free-note { display: none; }
.sf-pricing:has(input[name="item[is_free]"][value="true"]:checked) .sf-free-note { display: block; }

/* ------------------------------------------------------------------ boost */

.sf-boost {
  --np-boost-speed: 6s;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sf-boost:has(input:checked) {
  --np-boost-speed: 2.5s;
  border-width: 3px;
}

.sf-boost__tile {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-boost__optional {
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.sf-boost__toggle {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: 12px;
  border: 1.5px solid var(--cm-border);
  background: var(--cm-surface);
}

.sf-boost__toggle:has(input:checked) {
  border-color: var(--cm-ink);
  background: var(--cm-card);
}

.sf-boost__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-boost__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-boost__sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: #555555;
}

.sf-boost__price {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sf-boost__price s {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.sf-boost__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-ink);
  background: linear-gradient(115deg, var(--cm-blue) 0%, var(--cm-blue-light) 50%, var(--cm-yellow) 100%);
  color: var(--cm-blue-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.sf-boost__badge--sale {
  background: linear-gradient(115deg, var(--cm-yellow) 0%, var(--sf-peach) 100%);
}

.sf-boost__badge small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- actions */

.sf-actions {
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.sf-actions__buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.sf-upload:not(.hidden) {
  display: flex;
}

.sf-upload {
  flex: 1 1 220px;
  flex-direction: column;
  gap: 6px;
}

.sf-upload__status {
  margin: 0;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.sf-cancel {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #555555;
}

.sf-cancel:hover { color: #B23A0E; }

.sf-submit {
  min-width: 180px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid var(--cm-ink);
  background: linear-gradient(115deg, var(--cm-blue) 0%, var(--cm-blue-light) 50%, var(--cm-yellow) 100%);
  box-shadow: 0 3px 0 var(--cm-ink);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cm-blue-ink);
  text-align: left;
  cursor: pointer;
}

/* Not everything is filled in yet. The button still takes a press —
   sell-form#guardSubmit answers with what's missing. */
.sf-submit--waiting,
.sf-submit:disabled {
  background: #B3E3EA;
  border-color: #A9C2BF;
  box-shadow: none;
  color: #4F6E6B;
}

/* ------------------------------------------------------------ small button */

.sf-btn {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-btn:hover { background: var(--cm-blue-light); }

.sf-btn--ink {
  background: var(--cm-ink);
  color: var(--cm-ground);
}

.sf-btn--ink:hover { background: var(--cm-link); }

/* ------------------------------------------------------------------ aside */

.sf-tips {
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sf-tips__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  background: linear-gradient(115deg, var(--cm-blue-light) 0%, var(--cm-yellow) 60%, var(--sf-peach) 100%);
  border-bottom: 1.5px solid var(--cm-ink);
}

.sf-tips__icon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-ink);
}

.sf-tips__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.sf-tips__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 18px 8px;
}

.sf-tip {
  padding: 12px 0;
  border-top: 1px solid var(--cm-divider);
}

.sf-tip:first-child { border-top: 0; }

.sf-tip dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
}

.sf-tip dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #555555;
  text-wrap: pretty;
}

.sf-wanted {
  background: linear-gradient(160deg, #EDF2D8 0%, var(--sf-blue-tint) 100%);
  border: 1.5px solid var(--cm-ink);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sf-wanted__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.sf-wanted__sub {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.sf-wanted__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sf-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-ink);
  cursor: pointer;
}

.sf-chip--0 { background: var(--cm-blue-light); }
.sf-chip--1 { background: var(--cm-yellow); }
.sf-chip--2 { background: var(--sf-peach); }
.sf-chip--3 { background: var(--cm-surface); }
.sf-chip--4 { background: var(--cm-blue); }

.sf-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 var(--cm-ink);
}

/* ------------------------------------------------------ validation warning */

/* guardSubmit's reply when List it! is pressed before the listing is ready. It
   sits in the actions row rather than floating, so it lands where the press
   did and never has to dodge mobile browser chrome or the home indicator. */
.sf-alert-slot { flex: 1 1 100%; }
.sf-alert-slot:empty { display: none; }

.sf-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  border-radius: 12px;
  border: 2px solid var(--cm-ink);
  background: #D92D0B;
  box-shadow: 0 3px 0 var(--cm-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

.sf-alert svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .sf-alert { animation: sf-alert-in 320ms ease-out; }

  @keyframes sf-alert-in {
    0%   { opacity: 0; transform: translateY(-6px); }
    60%  { opacity: 1; transform: translateY(0); }
    75%  { transform: translateX(-4px); }
    90%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
  }
}

/* Phones: no aside (tips, Neighbors are looking for); it pushes the form's
   buttons a long way down. */
@media (max-width: 699px) {
  .sf-aside { display: none; }
}