/*
 * Listing page (items/show).
 *
 * Shares tokens (--cm-*, --pf-*), the page wrapper (.cm-page) and the badges and
 * chips (listing_card.css) with the other redesigned pages. Same rules: no
 * shadows, no transitions, secondary text #666666. Values are the item page
 * handoff's.
 */

.ip-page ::selection { background: var(--cm-blue-light); }
.ip-page a { text-decoration: none; }

.ip-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* main supplies the handoff's 20px under the header. */
.ip-sponsored { padding-top: 0; }

.ip-card {
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  border-radius: 14px;
}

/* ------------------------------------------------------------- breadcrumb */

.ip-crumbs {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.ip-crumbs a { color: var(--cm-link); }
.ip-crumbs a:hover { color: var(--pf-link-hover); }
.ip-crumbs__back { display: flex; align-items: center; gap: 5px; }
.ip-crumbs__trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ip-crumbs__trail[hidden], .ip-crumbs__results[hidden], .ip-step[hidden] { display: none; }

/* Previous / next listing, opened from the feed (item_stepper_controller). */
.ip-step { margin-left: auto; display: flex; gap: 6px; }

.ip-crumbs .ip-step__btn {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  color: var(--cm-ink);
}

.ip-crumbs .ip-step__btn:hover { background: var(--cm-blue-light); color: var(--cm-ink); }
.ip-crumbs .ip-step__btn[aria-disabled] { border-color: var(--cm-border); color: #B8B29A; cursor: default; background: var(--cm-surface); }

/* ----------------------------------------------------------------- columns */

.ip-columns {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

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

.ip-aside {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Stacked (one column), the panel follows the photos directly: title, price and
   Message come before the description, not after it and the map.
   A one-column grid rather than a flex column: sized as a flex item, the
   gallery's 4:3 stage is measured before its width is known and the whole
   gallery collapses to its border. */
@media (max-width: 815px) {
  .ip-columns { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ip-main { display: contents; }
  .ip-gallery { order: 1; }
  .ip-aside { order: 2; }
  .ip-desc { order: 3; }
}

/* The panel stays in view beside the photos once there's room for two columns.
   The top offset clears the sticky header: one row from 1020px, two below. */
@media (min-width: 816px) {
  .ip-aside { position: sticky; top: 120px; }
}

@media (min-width: 1020px) {
  .ip-aside { top: 76px; }
}

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

.ip-gallery { overflow: hidden; }

.ip-gallery__stage {
  position: relative;
  /* Sideways drags are swipes (media_gallery_controller); vertical ones still
     scroll the page. */
  touch-action: pan-y pinch-zoom;
  aspect-ratio: 4 / 3;
  background: var(--pf-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-gallery__slide {
  position: absolute;
  inset: 0;
}

.ip-gallery__slide.hidden { display: none; }

.ip-gallery__slide--video { background: #000000; }

.ip-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.ip-gallery__badges {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.ip-gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--cm-ink);
  color: var(--cm-ground);
  font-size: 12px;
  font-weight: 700;
}

.ip-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-border);
  color: var(--cm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ip-gallery__nav:hover { border-color: var(--cm-ink); }
.ip-gallery__nav--prev { left: 12px; }
.ip-gallery__nav--next { right: 12px; }

.ip-gallery__thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  border-top: 1px solid var(--cm-divider);
  background: var(--pf-surface-warm);
}

.ip-gallery__thumb {
  width: 72px;
  height: 54px;
  flex: none;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--pf-placeholder);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

.ip-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ip-gallery__thumb[aria-current="true"] { border-color: var(--cm-ink); }

.ip-lightbox__btn {
  position: absolute;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ip-lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.ip-lightbox__btn--close { top: 16px; right: 16px; }
.ip-lightbox__btn--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ip-lightbox__btn--next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------- description */

.ip-desc { padding: 18px 20px; }

.ip-desc__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cm-ink);
}

.ip-desc__body {
  margin: 10px 0 0;
  max-width: 65ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cm-ink);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.ip-desc__body p { margin: 0 0 10px; }
.ip-desc__body p:last-child { margin-bottom: 0; }
.ip-desc__body--empty { color: var(--cm-ink-muted); }

.ip-facts {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--cm-divider);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pf-surface-warm);
}

/* Each cell draws its right and bottom rules and hangs 1px past the grid, which
   clips the ones on the outer edge. However the cells wrap, only the inner rules
   show, and a part-empty last row stays the cells' colour. */
.ip-facts__cell {
  padding: 11px 14px;
  margin: 0 -1px -1px 0;
  border-right: 1px solid var(--cm-divider);
  border-bottom: 1px solid var(--cm-divider);
}

.ip-facts dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cm-ink-muted);
}

.ip-facts dd {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
}

.ip-facts dd a { color: var(--cm-link); }

.ip-map { margin-top: 14px; }

.ip-map__canvas {
  position: relative;
  z-index: 0;
  height: 150px;
  border-radius: 10px;
  border: 1px solid var(--cm-border);
  overflow: hidden;
}

.ip-map__note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--cm-ink-muted);
}

/* ------------------------------------------------------------------- panel */

/* Not overflow:hidden — the Share menu has to be able to hang outside the card.
   The seller zone rounds its own bottom corners instead. */
.ip-panel { position: relative; }

.ip-summary { padding: 20px 20px 18px; }

.ip-status {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ip-status--sold { background: var(--cm-orange); color: #FFFFFF; }
.ip-status--muted { background: var(--cm-divider); color: var(--cm-ink-muted); }
.ip-status--pending { background: var(--cm-yellow); color: var(--cm-ink); }
.ip-status--dark { background: var(--cm-ink); color: var(--cm-ground); }

.ip-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: var(--cm-ink);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.ip-price {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.ip-price__amount {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--cm-ink);
}

.ip-price__amount--free { color: var(--cm-link); }

.ip-price__was {
  font-size: 15px;
  color: var(--cm-ink-muted);
  text-decoration: line-through;
}

.ip-price__off {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--pf-danger-soft);
  color: var(--pf-danger);
  font-size: 12px;
  font-weight: 700;
}

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

.ip-meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--cm-ink-muted);
}

.ip-admin {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--cm-dashed-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.ip-admin__note { margin: 0; }
.ip-admin__buttons { display: flex; flex-wrap: wrap; gap: 8px; }

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

.ip-actions {
  border-top: 1px solid var(--cm-divider);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ip-primary {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--cm-blue);
  border: 1.5px solid var(--cm-blue);
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-blue-ink);
  text-align: left;
  cursor: pointer;
}

.ip-primary:hover { background: var(--cm-blue-light); border-color: var(--cm-blue-light); color: var(--cm-blue-ink); }
.ip-primary svg { flex: none; }
.ip-primary[hidden] { display: none; }

.ip-closed {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--pf-surface-warm);
  border: 1px solid var(--cm-divider);
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

/* Composer */

.ip-composer__box {
  border: 1.5px solid var(--cm-ink);
  border-radius: 12px;
  padding: 12px;
  background: var(--cm-surface);
}

.ip-composer__box[hidden],
.ip-composer__form[hidden] { display: none; }

.ip-composer__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ip-composer__caption {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cm-ink-muted);
}

.ip-composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ip-chip {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--cm-ground);
  border: 1px solid var(--cm-border-band);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cm-ink);
  text-align: left;
  cursor: pointer;
}

.ip-chip:hover { border-color: var(--cm-ink); }

.ip-composer__draft {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--cm-border-band);
  border-radius: 9px;
  padding: 10px 12px;
  /* 14.5px in the handoff; 16px keeps iOS Safari from zooming on focus. */
  font-size: 16px;
  line-height: 1.45;
  color: var(--cm-ink);
  background: var(--pf-surface-warm);
}

.ip-composer__draft:focus-visible { outline: 2px solid var(--cm-blue); outline-offset: 1px; }

.ip-composer__error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-danger);
}

.ip-composer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ip-composer__spacer { flex: 1; }

.ip-send {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  background: var(--cm-blue);
  border: 1.5px solid var(--cm-blue);
  color: var(--cm-blue-ink);
  cursor: pointer;
}

.ip-send:hover { background: var(--cm-blue-light); border-color: var(--cm-blue-light); }

.ip-send:disabled,
.ip-send:disabled:hover {
  background: var(--cm-divider);
  border-color: var(--cm-divider);
  color: var(--fd-empty-text);
  cursor: not-allowed;
}

.ip-offer {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--cm-border-band);
  background: var(--pf-surface-warm);
  font-size: 16px;
  font-weight: 700;
  color: var(--cm-ink-muted);
}

.ip-offer input::-webkit-outer-spin-button,
.ip-offer input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ip-offer input {
  -moz-appearance: textfield;
  appearance: textfield;
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  color: var(--cm-ink);
}

.ip-offer:has(input:focus-visible) { outline: 2px solid var(--cm-blue); outline-offset: 1px; }

.ip-textbtn {
  background: none;
  border: 0;
  padding: 6px 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-link);
  cursor: pointer;
  text-align: left;
}

.ip-textbtn:hover { color: var(--pf-link-hover); }
.ip-textbtn--muted { color: var(--cm-ink-muted); font-weight: 600; }
.ip-textbtn--muted:hover { color: var(--cm-ink); }
.ip-textbtn--danger { color: var(--pf-danger); }
.ip-textbtn--danger:hover { color: #8A2A08; }

.ip-sent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--fd-free-tint);
  border: 1.5px solid var(--cm-blue);
}

.ip-sent svg { flex: none; }

.ip-sent__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
}

.ip-sent__link { font-size: 13px; font-weight: 700; color: var(--cm-link); }

/* Save / Share / Hide, and the seller's two-up */

/* auto-fit rather than a fixed three: at 360px three columns leave 104px each,
   and "Mark as sold" needs 134px, so the labels used to collide and clip. Three
   across returns around 480px. */
.ip-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.ip-tools--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ip-tool-slot,
.ip-share { display: flex; min-width: 0; }

.ip-share { position: relative; }

.ip-tool {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cm-ink);
  text-align: left;
  cursor: pointer;
}

.ip-tool:hover { border-color: var(--cm-ink); color: var(--cm-ink); }
.ip-tool svg { flex: none; }

.ip-tool--saved,
.ip-tool--saved:hover {
  background: var(--pf-danger-soft);
  border-color: var(--cm-orange);
  color: var(--pf-danger);
}

.ip-tool--saved svg { color: var(--cm-orange); }

.ip-tool--on,
.ip-tool--on:hover {
  background: var(--cm-ink);
  border-color: var(--cm-ink);
  color: var(--cm-ground);
}

.ip-share__menu { left: 0; right: auto; top: 48px; }

.ip-watch {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-link);
  text-align: left;
  cursor: pointer;
}

.ip-watch:hover { color: var(--pf-link-hover); }
.ip-watch--on { color: var(--cm-ink); font-weight: 700; }

.ip-review-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-ink);
}

/* Seller's view */

.ip-boost {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
  border: 2px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(115deg, #2DC1FF 0%, #96E0FF 30%, #F8F088 55%, #F86028 100%) border-box;
}

.ip-boost:hover { color: var(--cm-ink); }

.ip-boost--on {
  background:
    linear-gradient(var(--pf-surface-warm), var(--pf-surface-warm)) padding-box,
    linear-gradient(115deg, #2DC1FF 0%, #96E0FF 30%, #F8F088 55%, #F86028 100%) border-box;
}

.ip-manage {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}

/* ------------------------------------------------------------ seller zone */

.ip-seller {
  border-radius: 0 0 13px 13px;
  border-top: 1px solid var(--cm-divider);
  background: var(--pf-surface-warm);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ip-seller__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ip-seller__avatar { display: flex; flex: none; }
.cm-avatar.ip-avatar { border-radius: 11px; }

.ip-seller__who { flex: 1; min-width: 0; }

.ip-seller__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.ip-seller__name > a:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
}

.ip-seller__name > a:first-child:hover { color: var(--cm-link); }

.ip-seller__rep {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ip-seller__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.ip-seller__profile {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-link);
}

.ip-seller__line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.ip-mutual {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.ip-mutual a { color: var(--cm-link); font-weight: 600; }
.ip-mutual__faces { display: flex; flex: none; }
.ip-mutual__face { display: flex; margin-left: -6px; border: 2px solid var(--pf-surface-warm); border-radius: 999px; }
.ip-mutual__face:first-child { margin-left: 0; }

/* ------------------------------------------------------------------ extras */

.ip-extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ip-extra {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  color: var(--cm-ink);
  text-align: left;
  cursor: pointer;
}

.ip-extra:hover { border-color: var(--cm-ink); color: var(--cm-ink); }
.ip-extra--on { background: var(--pf-surface-warm); border-color: var(--cm-ink); }

.ip-extra__tile {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-extra__tile--blue { background: var(--cm-blue-light); color: var(--cm-blue-ink); }
.ip-extra__tile--yellow { background: var(--cm-yellow); color: var(--cm-ink); }
.ip-extra__tile--ink { background: var(--cm-ink); }

.ip-extra__text { flex: 1; min-width: 0; }
.ip-extra__text strong { display: block; font-size: 14px; font-weight: 700; }
.ip-extra__text span { display: block; font-size: 12.5px; color: var(--cm-ink-muted); }

.ip-report {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--cm-ink-muted);
}

.ip-report a { font-weight: 700; color: var(--cm-link); }
.ip-report a:hover { color: var(--pf-link-hover); }

/* Matching requests (seller only), restyled to sit in the aside. */
.ip-aside .matching-wanted-posts { margin: 0; }

/* ------------------------------------------------------------ listing live */

/* items/show/_share_prompt: a modal, once, right after the seller posts.
   Dialogs center themselves with margin: auto, which Tailwind's reset zeroes. */
.ip-live {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: visible;
}

.ip-live::backdrop { background: rgba(20, 20, 20, 0.55); }

.ip-live__panel {
  position: relative;
  padding: 24px 22px 18px;
  border-radius: 18px;
  background: var(--cm-card);
  border: 1.5px solid var(--cm-ink);
  text-align: center;
}

.ip-live__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px solid var(--cm-border);
  background: var(--cm-surface);
  color: var(--cm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ip-live__title {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--cm-ink);
}

.ip-live__sub {
  margin: 6px auto 0;
  max-width: 32ch;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--cm-ink-muted);
  text-wrap: pretty;
}

/* The listing being shared, so it's clear what's going out. */
.ip-live__item {
  margin: 16px 0 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.ip-live__thumb {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
}

.ip-live__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cm-ground);
  color: var(--cm-ink-muted);
}

.ip-live__itemtext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.ip-live__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-live__price { font-size: 14px; font-weight: 800; color: var(--cm-ink); }

.ip-live__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cm-yellow-ink);
}

.ip-live__share {
  margin-top: 16px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: var(--cm-blue);
  border: 1.5px solid var(--cm-blue);
  color: var(--cm-blue-ink);
  font-size: 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.ip-live__share:hover { background: var(--cm-blue-light); border-color: var(--cm-blue-light); }

.ip-live__links {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 26px;
}

.ip-live__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--cm-link);
  text-decoration: none;
}

.ip-live__link:hover { color: #0A5477; text-decoration: underline; }

.ip-live__later {
  margin-top: 12px;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-ink-muted);
  cursor: pointer;
}

.ip-live__later:hover { color: var(--cm-ink); text-decoration: underline; }

/* ------------------------------------------------------------ instagram image */

/* items/show/_insta_image: the seller's branded picture, previewed in the
   listing-live dialog's styles. The preview keeps the image's 4:5 shape. */
.ip-insta [hidden] { display: none; }

.ip-insta__frame {
  margin: 16px auto 0;
  width: min(100%, 300px);
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cm-surface);
  border: 1px solid var(--cm-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-insta__preview { width: 100%; height: 100%; object-fit: cover; display: block; }

.ip-insta__status {
  margin: 0;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink-muted);
}

.ip-insta__download,
.ip-live__social {
  margin-top: 10px;
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: var(--cm-surface);
  border: 1.5px solid var(--cm-ink);
  color: var(--cm-ink);
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.ip-insta__download:hover,
.ip-live__social:hover { background: var(--cm-ground); }

/* In the share prompt: a full-width outline button under the share links. */
.ip-live .ip-tool-slot { margin-top: 14px; }
.ip-live .ip-tool-slot .ip-live__social { margin-top: 0; }
.ip-insta__download:disabled { opacity: 0.5; cursor: default; }