/* ============================================================================
   ltd.ninja shell and homepage skin.

   Three layers, deliberately kept apart:

     1. .ltdn-shell / .ltdn-rail / .ltdn-main   the frame, on every page
     2. [data-fly]                              the scroll-in animation
     3. #ltdn                                   homepage content only

   Layer 3 carries element resets (h1..h3 and p margins), so it must never wrap
   an app page: those still run on Bootstrap 3 and the Corporate theme and
   would lose their spacing. #ltdn wraps the homepage's own markup and nothing
   else. Layers 1 and 2 are safe everywhere because they only ever match our
   own class names.
   ========================================================================= */

:root {
  --ltdn-accent: #3E2A4A;   /* ninja plum, taken off the hood in the logo */
  --ltdn-brand:  #702772;   /* the accent proper: theme, favicon and mark all carry it */
  --ltdn-ink:    #1b1a1d;
  --ltdn-muted:  #8d8a93;
  --ltdn-hair:   #e8e7ea;
  --ltdn-page:   #f4f5f6;
  --ltdn-rail-w: 260px;
}

/* The theme reserves space for a fixed header we no longer render. */
body.ltdn-shell-on { padding-top: 0 !important; }

/* A clipping ancestor would kill position:sticky further down. */
body.ltdn-shell-on .c-layout-page { margin: 0; padding: 0; overflow: visible; }

/* ------------------------------------------------------------------ rail --- */

.ltdn-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--ltdn-rail-w);
  z-index: 1030;
  background: #fff;
  border-right: 1px solid var(--ltdn-hair);
  padding: 34px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: Poppins, "Segoe UI", Helvetica, Arial, sans-serif;

  /* A short rail should not reserve a gutter it never uses, and a tall one
     should not show the platform's default chunky bar against a white panel.
     Firefox takes the two-value form, Chrome and Safari take the pseudo
     elements below. */
  scrollbar-width: thin;
  scrollbar-color: #d6d3da transparent;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ltdn-ink);
}

.ltdn-rail a { text-decoration: none; }
.ltdn-brand { display: block; }
.ltdn-logo { width: 128px; height: auto; display: block; max-width: 100%; }

.ltdn-tag {
  margin: 18px 0 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ltdn-muted);
  text-align: center;
}

.ltdn-search { width: 100%; margin-top: 22px; }

.ltdn-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--ltdn-hair);
  border-radius: 3px;
  background: #fafafb;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ltdn-ink);
  box-shadow: none;
}

.ltdn-search input:focus {
  outline: none;
  border-color: var(--ltdn-accent);
  background: #fff;
}

.ltdn-nav { margin-top: 26px; width: 100%; border-top: 1px solid var(--ltdn-hair); }

.ltdn-nav a {
  display: block;
  padding: 13px 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f6c76;
  border-bottom: 1px solid var(--ltdn-hair);
  transition: color .16s;
}

.ltdn-nav a:hover,
.ltdn-nav a.on { color: var(--ltdn-accent); }
.ltdn-nav a.on { font-weight: 700; }

.ltdn-spacer { flex: 1 1 auto; min-height: 24px; }

.ltdn-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ltdn-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 10px;
  border-radius: 3px;
  transition: filter .16s;
}

.ltdn-cta:hover,
.ltdn-cta:focus { filter: brightness(1.18); color: #fff; }

.ltdn-account {
  width: 100%;
  display: flex;
  gap: 8px;
}

.ltdn-account a {
  flex: 1 1 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 6px;
  border: 1px solid var(--ltdn-hair);
  border-radius: 3px;
  color: #6f6c76;
  transition: color .16s, border-color .16s;
}

.ltdn-account a:hover,
.ltdn-account a.on { color: var(--ltdn-accent); border-color: var(--ltdn-accent); }

.ltdn-legal {
  margin: 20px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: #a9a6ae;
  text-align: center;
}

.ltdn-legal a { color: #a9a6ae; }
.ltdn-legal a:hover { color: var(--ltdn-accent); }
.ltdn-legal span { color: #bcb9c1; }

/* ---------------------------------------------------- rail scrollbar --- */

.ltdn-rail::-webkit-scrollbar { width: 8px; }
.ltdn-rail::-webkit-scrollbar-track { background: transparent; }

.ltdn-rail::-webkit-scrollbar-thumb {
  background: #d6d3da;
  border-radius: 99px;
  /* Inset the thumb without changing the track width, so the bar does not
     jump sideways when it appears. */
  border: 2px solid #fff;
  background-clip: padding-box;
}

.ltdn-rail::-webkit-scrollbar-thumb:hover { background: #b9b5c0; background-clip: padding-box; }
.ltdn-rail:not(:hover)::-webkit-scrollbar-thumb { background: #e4e2e7; background-clip: padding-box; }

/* ------------------------------------------------------------------ main --- */

.ltdn-main { margin-left: var(--ltdn-rail-w); min-width: 0; }

/* App pages keep their own look. They only need the space the old fixed
   header used to occupy, since nothing sits above them now. */
body.ltdn-shell-on:not(.ltdn-home) .ltdn-main { padding-top: 18px; }

/* The theme positions the footer absolutely, which is what produced both the
   overflow and the odd gap above it: taken out of the flow, it could not sit
   where the content ended. Putting it back in the flow fixes the spacing and
   makes the width behave, so no offsets are needed. Styled to match the rail:
   white, one hairline rule, quiet tracked type. */
body.ltdn-shell-on .c-layout-footer {
  position: static;
  left: auto;
  right: auto;
  width: auto;
  max-width: none;
  margin: 0 0 0 var(--ltdn-rail-w);
  padding: 0;
  background: #fff;
  border-top: 1px solid var(--ltdn-hair);
  font-family: Poppins, "Segoe UI", Helvetica, Arial, sans-serif;
}

body.ltdn-shell-on .c-layout-footer .c-postfooter {
  background: none;
  border: 0;
  padding: 26px 48px 30px;
  text-align: center;
}

.ltdn-foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  margin-bottom: 12px;
}

.ltdn-foot-links a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6c76;
  text-decoration: none;
  transition: color .16s;
}

.ltdn-foot-links a:hover { color: var(--ltdn-accent); }

.ltdn-foot-legal {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: #a9a6ae;
}

.ltdn-foot-legal a { color: #a9a6ae; text-decoration: none; }
.ltdn-foot-legal a:hover { color: var(--ltdn-accent); }

/* ------------------------------------------------------------- animation --- */

[data-fly] {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}

[data-fly].fly-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.22,.75,.3,1);
}

/* The rail slides in from the left instead of up from below. */
.ltdn-rail[data-fly] { transform: translateX(-18px); }
.ltdn-rail[data-fly].fly-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-fly],
  [data-fly].fly-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* If the script never runs, nothing may stay invisible. */
.no-js [data-fly] { opacity: 1; transform: none; }

/* ============================================================== homepage === */

#ltdn {
  background: var(--ltdn-page);
  color: var(--ltdn-ink);
  font-family: Poppins, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

#ltdn *,
#ltdn *::before,
#ltdn *::after { box-sizing: border-box; }

#ltdn h1, #ltdn h2, #ltdn h3, #ltdn p { margin: 0; font-family: inherit; }
#ltdn a { text-decoration: none; }
#ltdn img { max-width: 100%; }

#ltdn .ltdn-hero {
  background: #fff;
  border-bottom: 1px solid var(--ltdn-hair);
  padding: 46px 48px 40px;
}

#ltdn .ltdn-eyebrow {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ltdn-accent);
  font-weight: 700;
  margin-bottom: 16px;
}

#ltdn .ltdn-herorow {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}

#ltdn .ltdn-hero h1 {
  font-size: 42px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  max-width: 14ch;
}

#ltdn .ltdn-sub { color: #6f6c76; max-width: 52ch; }

#ltdn .ltdn-stats { margin-left: auto; display: flex; gap: 14px; flex: none; }

#ltdn .ltdn-stat {
  border: 1px solid var(--ltdn-hair);
  border-radius: 4px;
  padding: 14px 20px;
  min-width: 116px;
}

#ltdn .ltdn-stat b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#ltdn .ltdn-stat span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ltdn-muted);
}

/* ----- the sticky filter bar ----- */

/* IntersectionObserver never reports a zero-area target, so the sentinel
   needs real height. One pixel, pulled back out of the flow. */
#ltdn-sticky-sentinel { height: 1px; margin-bottom: -1px; }

#ltdn .ltdn-stickybar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ltdn-hair);
  transition: box-shadow .2s;
}

/* Set by the page once it has scrolled past the hero, so the bar only lifts
   off the page when it is actually floating over content. */
#ltdn .ltdn-stickybar.stuck { box-shadow: 0 6px 20px rgba(27,26,29,.07); }

#ltdn .ltdn-tabs {
  display: flex;
  gap: 4px;
  padding: 0 48px;
  overflow-x: auto;
  scrollbar-width: none;
}

#ltdn .ltdn-tabs::-webkit-scrollbar { display: none; }

#ltdn .ltdn-tab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6f6c76;
  border-bottom: 2px solid transparent;
  padding: 16px 14px;
  white-space: nowrap;
  transition: color .16s, border-color .16s;
}

#ltdn .ltdn-tab em { font-style: normal; color: #b8b5bd; margin-left: 7px; font-weight: 400; }

/* A dot rather than a filled pill in the tab strip: eight saturated pills in
   a row would shout over the deals they are meant to be filtering. */
#ltdn .ltdn-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--tag, var(--ltdn-muted));
  vertical-align: middle;
  position: relative;
  top: -1px;
}
#ltdn .ltdn-tab:hover { color: var(--ltdn-ink); }
#ltdn .ltdn-tab.on { color: var(--ltdn-accent); border-bottom-color: var(--ltdn-accent); }
#ltdn .ltdn-tab.on em { color: var(--ltdn-accent); opacity: .55; }

#ltdn .ltdn-sortbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 48px;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ltdn-muted);
}

#ltdn .ltdn-sortbar a { color: #6f6c76; }
#ltdn .ltdn-sortbar a:hover { color: var(--ltdn-ink); }
#ltdn .ltdn-sortbar a.on { color: var(--ltdn-accent); font-weight: 700; }
#ltdn .ltdn-sortbar .ltdn-count { margin-left: auto; letter-spacing: 0.08em; }

/* ----- cards ----- */

#ltdn .ltdn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 28px;
  padding: 28px 48px 56px;
}

#ltdn .ltdn-card {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(27,26,29,.05);
}

/* The hover lift and the arrival animation both want transform, so the
   transition lives on .fly-in and the hover only adds its own offset once the
   element has landed. */
#ltdn .ltdn-card.fly-in {
  transition: opacity .55s ease,
              transform .7s cubic-bezier(.22,.75,.3,1),
              box-shadow .2s;
}

#ltdn .ltdn-card.fly-in:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(27,26,29,.13);
  color: inherit;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}

#ltdn .ltdn-media { aspect-ratio: 26 / 15; background: #efeff1; overflow: hidden; }

#ltdn .ltdn-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}

#ltdn .ltdn-card.fly-in:hover .ltdn-media img { transform: scale(1.04); }

#ltdn .ltdn-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* The marketplace tag. Its two colors arrive as inline custom properties
   from ltdn_tag_style(), one the marketplace's own brand color and one the
   readable ink for it, so the palette lives in _markets.php and the styling
   lives here. */
#ltdn .ltdn-market {
  align-self: flex-start;
  background: var(--tag, var(--ltdn-muted));
  color: var(--tag-ink, #fff);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px 3px;
  border-radius: 3px;
  line-height: 1.4;
}

#ltdn .ltdn-card h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.34;
  margin-top: 10px;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#ltdn .ltdn-blurb {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #85828b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#ltdn .ltdn-foot {
  margin-top: auto;
  padding-top: 15px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#ltdn .ltdn-price { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }

#ltdn .ltdn-once {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ltdn-muted);
}

#ltdn .ltdn-go {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ltdn-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s, transform .18s;
}

#ltdn .ltdn-card.fly-in:hover .ltdn-go { opacity: 1; transform: none; }

/* A deal with a price but no picture keeps the card shape and gets a
   typographic tile built from its initials. The compact row that used to
   handle title-only deals is gone with them: nothing without a price is
   listed any more, so every card has something to say. */
#ltdn .ltdn-media.mono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f3f7;
}

#ltdn .ltdn-media.mono span {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ltdn-accent);
  opacity: .82;
}

/* ----- paging ----- */

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

/* The whole card used to be one anchor. It now wraps a link plus a row of
   buttons, because a button cannot live inside an anchor and still be
   clickable on its own. .ltdn-face is the link half. */
#ltdn .ltdn-face {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  min-height: 0;
}

#ltdn .ltdn-actions {
  display: flex;
  gap: 6px;
  padding: 0 14px 14px;
  margin-top: auto;
}

#ltdn .ltdn-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 9px 10px;
  border: 1px solid var(--ltdn-hair);
  border-radius: 3px;
  background: #fff;
  color: #6f6c76;
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}

#ltdn .ltdn-act svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* "I own this" is the decision people are looking for, so it takes the width
   and keeps its label. The other two are icon-only and sit at a fixed size. */
#ltdn .ltdn-own  { flex: 1 1 auto; }
#ltdn .ltdn-save,
#ltdn .ltdn-skip { flex: 0 0 40px; padding: 9px 0; }

#ltdn .ltdn-own:hover  { color: #167c4a; border-color: #167c4a; background: #f2fbf6; }
#ltdn .ltdn-save:hover { color: #b07d05; border-color: #b07d05; background: #fffaef; }
#ltdn .ltdn-skip:hover { color: #c0392b; border-color: #c0392b; background: #fdf3f2; }

#ltdn .ltdn-act:disabled { opacity: .45; cursor: default; }

/* Filed away: the card collapses out of the grid rather than vanishing, so
   the row does not jump while you are still deciding on its neighbours. */
#ltdn .ltdn-card.ltdn-filed {
  animation: ltdn-file-away .32s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}

@keyframes ltdn-file-away {
  to { opacity: 0; transform: scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  #ltdn .ltdn-card.ltdn-filed { animation: none; opacity: 0; }
}

#ltdn .ltdn-sortbar .ltdn-clear { color: var(--ltdn-accent); font-weight: 700; }

/* "Put it back" on the skipped list: same row, but it is the primary action
   there, so it takes the width the way "I own this" does on the feed. */
#ltdn .ltdn-restore { flex: 1 1 auto; }
#ltdn .ltdn-restore:hover { color: var(--ltdn-accent); border-color: var(--ltdn-accent); background: #f8f5fb; }

/* A card whose request failed keeps the button visible and marked, rather
   than disappearing as though it had worked. */
#ltdn .ltdn-act.ltdn-failed { color: #c0392b; border-color: #c0392b; }

/* The bookmarked and skipped lists have a bar but no tabs, so the row needs
   its own breathing room rather than inheriting the tab strip's. */
#ltdn .ltdn-stickybar > .ltdn-sortbar:only-child { padding-top: 18px; padding-bottom: 18px; }

#ltdn .ltdn-sortbar a { text-decoration: none; }

/* /owned keeps its own list below, so the wrapper only carries the header and
   must not paint a full-height page behind it. */
/* /owned now holds its own list too, so it is a full page again rather
   than a header sitting above the theme container. */
#ltdn.ltdn-owned .ltdn-stickybar { position: sticky; }

#ltdn .ltdn-owned-actions { margin: 0 0 0 auto; }

#ltdn .ltdn-owned-actions select {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6c76;
  background: #fff;
  border: 1px solid var(--ltdn-hair);
  border-radius: 3px;
  padding: 7px 10px;
  height: auto;
  width: auto;
  box-shadow: none;
}

#ltdn .ltdn-owned-actions select:focus { outline: none; border-color: var(--ltdn-accent); }

#ltdn.ltdn-owned + .container { background: var(--ltdn-page); padding-top: 28px; }

/* The theme's breadcrumb bar still carries the sub-navigation on /owned and
   /other, where the rail has no room for it. Quietened so it sits under the
   new header instead of looking like something left behind. */
body.ltdn-shell-on .c-layout-breadcrumbs-1 {
  background: #fff;
  border-bottom: 1px solid var(--ltdn-hair);
  padding: 14px 0;
  min-height: 0;
}

body.ltdn-shell-on .c-layout-breadcrumbs-1 .c-page-breadcrumbs > li > a {
  font-family: Poppins, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #6f6c76;
}

body.ltdn-shell-on .c-layout-breadcrumbs-1 .c-page-breadcrumbs > li > a.active,
body.ltdn-shell-on .c-layout-breadcrumbs-1 .c-page-breadcrumbs > li > a:hover { color: var(--ltdn-accent); }

/* --------------------------------------------------------- exchange --- */

.ltdn-exchange-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
  padding: 28px 48px 0;
}

.ltdn-listing-form {
  background: #fff;
  border-radius: 5px;
  padding: 22px 24px 24px;
  box-shadow: 0 1px 2px rgba(27,26,29,.05);
}

.ltdn-listing-form h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.ltdn-listing-form p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: #85828b;
}

.ltdn-form-row { display: flex; flex-wrap: wrap; gap: 8px; }

.ltdn-input {
  flex: 1 1 180px;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--ltdn-hair);
  border-radius: 3px;
  background: #fafafb;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ltdn-ink);
}

.ltdn-input:focus { outline: none; border-color: var(--ltdn-accent); background: #fff; }
.ltdn-input-price { flex: 0 0 110px; }

.ltdn-submit {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 3px;
  background: var(--ltdn-accent);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .16s;
}

.ltdn-submit:hover { filter: brightness(1.18); }

/* A listing has no picture and no marketplace, so the card is all body. The
   verb takes the place of the market tag. */
#ltdn .ltdn-listing .ltdn-body { padding-top: 18px; }
#ltdn .ltdn-listing .ltdn-foot { padding-top: 12px; }

#ltdn .ltdn-verb-sell { background: #167c4a; color: #fff; }
#ltdn .ltdn-verb-want { background: #3E2A4A; color: #fff; }

/* The contact and report controls are links, not buttons, so they need the
   button's own layout rather than inheriting an anchor's. */
#ltdn .ltdn-listing .ltdn-act { text-decoration: none; }

/* An icon-only button is fixed at 40px. One carrying a label has to take
   the width instead, or the text wraps to three lines inside the square. */
#ltdn .ltdn-act.ltdn-wide { flex: 1 1 auto; padding: 9px 12px; white-space: nowrap; }

#ltdn .ltdn-mine-count { color: var(--ltdn-accent); font-weight: 700; }

@media (max-width: 900px) {
  .ltdn-exchange-forms { padding: 20px 20px 0; gap: 18px; }
}

/* ------------------------------------------------------- owned cards --- */

/* One column of full-width cards. Same card as everywhere else, turned on its
   side: picture on the left, everything else to the right of it. Below the
   grid's own breakpoint it stacks and becomes the ordinary card again, which
   is why the picture keeps the same aspect ratio in both directions. */
#ltdn .ltdn-owned-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 28px 48px 56px;
}

#ltdn .ltdn-owned-card {
  flex-direction: row;
  align-items: stretch;
}

#ltdn .ltdn-owned-card > .ltdn-media {
  flex: 0 0 240px;
  aspect-ratio: 26 / 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f3f7;
}

#ltdn .ltdn-owned-card > .ltdn-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#ltdn .ltdn-owned-mono {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ltdn-accent);
  opacity: .82;
}

#ltdn .ltdn-owned-card .ltdn-body { padding: 16px 20px 18px; }

#ltdn .ltdn-owned-top { display: flex; align-items: flex-start; gap: 10px; }
#ltdn .ltdn-owned-top .ltdn-market { align-self: flex-start; }

/* The old dropdown trigger was a Bootstrap button that inherited the theme's
   look. It borrows the card action styling instead so it matches the buttons
   on every other list. */
#ltdn .ltdn-owned-menu { margin-left: auto; }

#ltdn .ltdn-owned-more {
  flex: 0 0 32px;
  width: 32px;
  padding: 6px 0;
  background: none;
  border-color: transparent;
}

#ltdn .ltdn-owned-more:hover { color: var(--ltdn-accent); border-color: var(--ltdn-hair); background: #fff; }
#ltdn .ltdn-owned-more::after { display: none; }

#ltdn .ltdn-owned-card h3 {
  -webkit-line-clamp: 2;
  margin-top: 10px;
  font-size: 16px;
}

#ltdn .ltdn-owned-card .ltdn-blurb { -webkit-line-clamp: 3; }
#ltdn .ltdn-owned-card .your-description-block { margin-top: 8px; }

#ltdn .ltdn-owned-card .description-textarea textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--ltdn-hair);
  border-radius: 3px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  margin-bottom: 8px;
}

#ltdn .ltdn-owned-card .faded { color: #b8b5bd; }

/* Tag pills the theme prints inline after the title. */
#ltdn .ltdn-owned-card .label,
#ltdn .ltdn-owned-card .badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin: 8px 4px 0 0;
}

@media (max-width: 900px) {
  #ltdn .ltdn-owned-list { padding: 20px; gap: 14px; }

  /* Stacks into the same shape as a card on any other page. */
  #ltdn .ltdn-owned-card { flex-direction: column; }
  #ltdn .ltdn-owned-card > .ltdn-media { flex: none; width: 100%; }
}

/* ------------------------------------------------- list beside a form --- */

/* Two thirds list, one third form. Adding an item is the reason to be on
   these pages, so the form sits next to the list rather than behind a
   Select Action dropdown that opened a modal. */
#ltdn .ltdn-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  gap: 28px;
  padding: 28px 48px 56px;
}

#ltdn .ltdn-split-main {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(27,26,29,.05);
  overflow: hidden;
}

#ltdn .ltdn-split-side .ltdn-listing-form { position: sticky; top: 96px; }

/* Source order puts the form first on pages that render a table, so it is
   ordered back to the right here. See the note in subscriptions.php. */
#ltdn .ltdn-split-main { order: 1; }
#ltdn .ltdn-split-side { order: 2; }

#ltdn .ltdn-form-stack { display: flex; flex-direction: column; gap: 8px; }
#ltdn .ltdn-form-stack .ltdn-input { flex: none; width: 100%; }

#ltdn .ltdn-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6f6c76;
  font-weight: 400;
  margin: 2px 0 4px;
}

#ltdn .ltdn-check input { margin: 0; }

/* ----- plain rows, for lists that are not deals ----- */

#ltdn .ltdn-rows { display: flex; flex-direction: column; }

#ltdn .ltdn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ltdn-hair);
}

#ltdn .ltdn-row:last-child { border-bottom: 0; }
#ltdn .ltdn-row-main { flex: 1 1 auto; min-width: 0; }

#ltdn .ltdn-row h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

#ltdn .ltdn-row h3 a { color: inherit; }
#ltdn .ltdn-row h3 a:hover { color: var(--ltdn-accent); }
#ltdn .ltdn-row .ltdn-blurb { margin-top: 3px; -webkit-line-clamp: 2; }

#ltdn .ltdn-row-actions {
  display: flex;
  gap: 6px;
  flex: none;
  margin-left: auto;
}

#ltdn .ltdn-row-actions .ltdn-act,
#ltdn td .ltdn-row-actions .ltdn-act {
  flex: 0 0 34px;
  width: 34px;
  padding: 8px 0;
  text-decoration: none;
}

/* ----- the shared icon ----- */

#ltdn .ltdn-i { width: 15px; height: 15px; fill: currentColor; display: block; }
#ltdn .ltdn-act .ltdn-i { margin: 0 auto; }
#ltdn .ltdn-sortbar .ltdn-i { display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* The datatable inside a split panel keeps the theme's markup but not its
   striping, which fought the card surface it now sits on. */
#ltdn .ltdn-split-main table { width: 100%; margin: 0; font-size: 14px; }
#ltdn .ltdn-split-main thead th,
#ltdn .ltdn-split-main thead td {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ltdn-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--ltdn-hair);
  padding: 12px 14px;
}
#ltdn .ltdn-split-main tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--ltdn-hair);
  vertical-align: middle;
}
#ltdn .ltdn-split-main tbody tr:first-child td { border-top: 0; }
#ltdn .ltdn-split-main tbody td a { color: inherit; }
#ltdn .ltdn-split-main tbody td a:hover { color: var(--ltdn-accent); }

@media (max-width: 1100px) {
  #ltdn .ltdn-split { grid-template-columns: 1fr; }
  #ltdn .ltdn-split-side .ltdn-listing-form { position: static; }
}

@media (max-width: 900px) {
  #ltdn .ltdn-split { padding: 20px; gap: 18px; }
}

#ltdn .ltdn-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 48px 64px;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#ltdn .ltdn-pager a,
#ltdn .ltdn-pager span {
  padding: 11px 20px;
  border-radius: 3px;
  background: #fff;
  color: #6f6c76;
  box-shadow: 0 1px 2px rgba(27,26,29,.05);
}

#ltdn .ltdn-pager a:hover { color: var(--ltdn-accent); }
#ltdn .ltdn-pager .ltdn-pos { background: none; box-shadow: none; color: var(--ltdn-muted); }

#ltdn .ltdn-empty { padding: 60px 48px 90px; color: var(--ltdn-muted); text-align: center; }

/* -------------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .ltdn-rail {
    position: static;
    width: auto;
    padding: 26px 20px 20px;
  }

  .ltdn-logo { width: 96px; }
  .ltdn-nav { display: flex; flex-wrap: wrap; justify-content: center; border-top: 0; }
  .ltdn-nav a { border-bottom: 0; padding: 10px 14px; }
  .ltdn-spacer { display: none; }
  .ltdn-search { max-width: 320px; }
  .ltdn-cta, .ltdn-account { max-width: 320px; margin-top: 8px; }

  .ltdn-main { margin-left: 0; }
  body.ltdn-shell-on .c-layout-footer { margin-left: 0; }
  body.ltdn-shell-on .c-layout-footer .c-postfooter { padding: 22px 20px 26px; }

  .ltdn-rail[data-fly] { transform: translateY(-14px); }

  #ltdn .ltdn-hero { padding: 30px 20px 28px; }
  #ltdn .ltdn-hero h1 { font-size: 30px; max-width: none; }
  #ltdn .ltdn-stats { margin-left: 0; }
  #ltdn .ltdn-tabs { padding: 0 20px; }
  #ltdn .ltdn-sortbar { padding: 12px 20px; }
  #ltdn .ltdn-grid { padding: 20px; gap: 18px; }
  #ltdn .ltdn-pager { padding: 0 20px 48px; }
}

/* The same marketplace tag on /unseen. That page is not inside #ltdn, since
   it still runs on Bootstrap and the Corporate theme, so this is scoped to
   its own class instead. Position and size are the ones the old inline label
   used, only the colors have changed. */
.ltdn-market-tag {
  background: var(--tag, #f3f3f3);
  color: var(--tag-ink, #aaa);
  padding: 3px 10px 2px;
  border-radius: 4px;
  position: absolute;
  top: -54px;
  right: 8px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: Poppins, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* The theme drew a panel and a rule around every owned row. The card is the
   panel now, so both are removed rather than sitting behind it. */
body.ltdn-shell-on .owned-deals { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }

/*
    Subscriptions rows.

    The list used to be a Bootstrap datatable. Nothing after that table
    reached the DOM, modals and footer included: the theme's markup kept
    the HTML parser in table insertion mode and everything that followed
    was discarded. Rows fix that and match the wishlist, which is what
    uniformity wanted anyway.
*/
#ltdn .ltdn-favicon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 6px;
    object-fit: contain;
}
#ltdn .ltdn-favicon-blank {
    background: var(--ltdn-line);
}

/*
    Support Board's accent.

    The chat widget ships its own teal, #3cc6d3, and it is the last teal
    left on the site. It is not in supportboard/ anywhere, in the repo or
    on the server, so it is a runtime default inside the vendor bundle
    with nothing to edit. That folder is untracked vendor code in any
    case, so overriding it from our own sheet is the only version of this
    fix that survives an update.
*/
.sb-header-main,
.sb-chat-btn {
    background-color: var( --ltdn-brand ) !important;
}
.sb-btn-new-conversation,
.sb-btn-all-conversations,
.sb-icon-send.sb-submit,
.sb-active {
    color: var( --ltdn-brand ) !important;
    border-color: var( --ltdn-brand ) !important;
}
[class^="sb-"] input,
[class^="sb-"] textarea,
[class*=" sb-"] input,
[class*=" sb-"] textarea {
    border-color: var( --ltdn-brand ) !important;
}