/* ==========================================================================
   ProjectFlow 2.8 – the look of the Toopix Creative theme
   --------------------------------------------------------------------------
   Every value comes from the theme's variables (--tx-*), so the Customizer
   colours, fonts, radii, buttons and dark sections apply to the projects too.
   Without the theme the same defaults are used.
   ========================================================================== */

.pfps-tx {
  --pfps-accent: var(--tx-accent, #00aca2);
  --pfps-ink: var(--tx-fg, #231f20);
  --pfps-text: var(--tx-fg, #231f20);
  --pfps-muted: var(--tx-muted, #625d5e);
  --pfps-line: var(--tx-line, rgba(35, 31, 32, .12));
  --pfps-surface: var(--tx-surface, #ffffff);
  --pfps-soft: color-mix(in srgb, var(--pfps-ink) 4%, transparent);
  --pfps-media: #1d1a1b;
  --pfps-radius: var(--tx-radius, 22px);
  --pfps-radius-lg: var(--tx-radius-lg, 34px);
  --pfps-radius-sm: var(--tx-radius-sm, 12px);
  --pfps-btn-radius: var(--tx-btn-radius, 999px);
  --pfps-ease: var(--tx-ease, cubic-bezier(.22, 1, .36, 1));
  --pfps-display: var(--tx-font-display, "Unbounded", "Manrope", system-ui, sans-serif);
  --pfps-body: var(--tx-font-body, "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --pfps-accent-soft: color-mix(in srgb, var(--pfps-accent) 14%, transparent);
  --pfps-accent-ink: var(--tx-accent-deep, color-mix(in srgb, var(--pfps-accent) 70%, #000));
  --pfps-white: var(--tx-white, #ffffff);
  --pfps-black: var(--tx-black, #231f20);
  --pfps-shadow: none;
  --pfps-shadow-hover: none;
  color: var(--pfps-text);
  font-family: var(--pfps-body);
}

/* Dark sections of the theme (and the plugin's own dark style) */
.tx-dark .pfps-tx,
.pfps-tx.pfps-style-dark {
  --pfps-accent-ink: var(--tx-accent-bright, color-mix(in srgb, var(--pfps-accent) 72%, #fff));
  --pfps-soft: rgba(255, 255, 255, .05);
}

.pfps-tx.pfps-style-dark {
  --tx-fg: #f4f2ee;
  --tx-muted: rgba(244, 242, 238, .64);
  --tx-line: rgba(255, 255, 255, .12);
  --tx-surface: #1b1819;
}

.pfps-wrap.pfps-tx.pfps-style-dark,
.pfps-single.pfps-tx.pfps-style-dark {
  background: var(--tx-ink, #121011);
  border-radius: var(--pfps-radius-lg);
}

.pfps-tx h1,
.pfps-tx h2,
.pfps-tx h3,
.pfps-tx h4 {
  font-family: var(--pfps-display);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* The theme gives every picture inside the plugin a radius – the frames have their own. */
.tx-projects-plugin .pfps-tx img,
.tx-projects-plugin .pfps-tx svg image {
  border-radius: 0;
}

/* Inside the theme's "Проекти" section the theme already shows the heading. */
.tx-projects-plugin .pfps-tx .pfps-head {
  display: none;
}

.tx-projects-plugin .pfps-wrap.pfps-tx {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   Eyebrows and section heads (like .tx-eyebrow / .tx-label)
   -------------------------------------------------------------------------- */

.pfps-tx .pfps-eyebrow {
  gap: .75em;
  margin: 0 0 1.2rem;
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
}

.pfps-tx .pfps-eyebrow::before {
  width: 22px;
  height: 1px;
  background: var(--pfps-accent);
}

.pfps-tx .pfps-head {
  align-items: flex-end;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
}

.pfps-wrap.pfps-tx .pfps-head h2 {
  margin: 0 0 .4em;
  color: var(--pfps-ink);
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.pfps-wrap.pfps-tx .pfps-head p {
  color: var(--pfps-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.pfps-tx .pfps-head-stats div {
  min-width: 112px;
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius);
  background: transparent;
}

.pfps-tx .pfps-head-stats dt {
  font-family: var(--pfps-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pfps-tx .pfps-head-stats dd {
  font-family: var(--pfps-display);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Search and filters
   -------------------------------------------------------------------------- */

.pfps-tx .pfps-toolbar {
  gap: 1rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.pfps-wrap.pfps-tx .pfps-search input[type="search"] {
  min-height: 54px;
  border-color: var(--pfps-line);
  background: transparent;
  color: var(--pfps-ink);
  font-family: var(--pfps-body);
  box-shadow: none;
}

.pfps-wrap.pfps-tx .pfps-search input[type="search"]::placeholder {
  color: var(--pfps-muted);
}

.pfps-wrap.pfps-tx .pfps-search input[type="search"]:focus {
  border-color: var(--pfps-accent);
  box-shadow: 0 0 0 4px var(--pfps-accent-soft);
}

.pfps-tx .pfps-result-count {
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pfps-wrap.pfps-tx .pfps-chip {
  min-height: 42px;
  padding: .55em 1.1em;
  border-color: var(--pfps-line);
  background: transparent;
  color: var(--pfps-ink);
  font-family: var(--pfps-display);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .4s var(--pfps-ease), color .4s var(--pfps-ease), border-color .4s var(--pfps-ease);
}

.pfps-wrap.pfps-tx .pfps-chip span {
  background: var(--pfps-soft);
  color: var(--pfps-muted);
  font-family: var(--pfps-body);
  font-weight: 700;
}

.pfps-wrap.pfps-tx .pfps-chip:hover {
  border-color: var(--pfps-accent);
  color: var(--pfps-ink);
}

.pfps-wrap.pfps-tx .pfps-chip.is-active {
  border-color: var(--pfps-ink);
  background: var(--pfps-ink);
  color: var(--tx-bg, var(--tx-paper, #f5f3ef));
}

.pfps-wrap.pfps-tx .pfps-chip.is-active span {
  background: color-mix(in srgb, var(--tx-bg, #f5f3ef) 18%, transparent);
  color: inherit;
}

/* --------------------------------------------------------------------------
   Project cards (like .tx-work)
   -------------------------------------------------------------------------- */

.pfps-tx .pfps-grid {
  gap: clamp(2rem, 4vw, 3.4rem) clamp(1.25rem, 2.6vw, 2.4rem);
}

/* Two columns: every second card a little lower, as on the theme's home page. */
@media (min-width: 900px) {
  .pfps-tx[data-columns="2"] .pfps-grid > .pfps-card:nth-child(even) {
    margin-top: clamp(0rem, 7vw, 6rem);
  }
}

.pfps-tx .pfps-card,
.pfps-tx .pfps-card:hover,
.pfps-tx .pfps-card.is-featured {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.pfps-tx .pfps-card.pfps-reveal.is-visible:hover {
  transform: none;
}

.pfps-tx .pfps-card-media {
  aspect-ratio: 4 / 3.2;
  border-radius: var(--pfps-radius-lg);
  background: var(--pfps-media);
  transform: translateZ(0);
}

/* The stage grows slowly on hover (like the pictures of the theme). */
.pfps-tx .pfps-card-media > .pfps-browser,
.pfps-tx .pfps-card-media > .pfps-stage,
.pfps-tx .pfps-card-media > .pfps-image-visual,
.pfps-tx .pfps-card-media > .pfps-placeholder {
  transform: scale(1.02);
  transition: transform 1.2s var(--pfps-ease);
}

.pfps-tx .pfps-card:hover .pfps-card-media > .pfps-browser,
.pfps-tx .pfps-card:hover .pfps-card-media > .pfps-stage,
.pfps-tx .pfps-card:hover .pfps-card-media > .pfps-image-visual,
.pfps-tx .pfps-card:hover .pfps-card-media > .pfps-placeholder {
  transform: scale(1.07);
}

.pfps-tx .pfps-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .38));
  pointer-events: none;
}

/* Glass badges on the picture */
.pfps-tx .pfps-card-status,
.pfps-tx .pfps-card-category {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: .5em 1em;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  background: rgba(18, 16, 17, .32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--pfps-body);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
}

.pfps-tx .pfps-card-status {
  top: 1.1rem;
  left: 1.1rem;
}

.pfps-tx .pfps-card-category {
  left: 1.1rem;
  bottom: 1.1rem;
  max-width: calc(100% - 2.2rem - 22%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfps-tx .pfps-card-flag {
  top: 1.1rem;
  right: 1.1rem;
  min-height: 0;
  padding: .5em 1em;
  background: var(--pfps-accent);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  box-shadow: none;
}

.pfps-tx .pfps-card-flag .pfps-icon {
  width: 1em;
  height: 1em;
}

.pfps-tx .pfps-card-status i,
.pfps-tx .pfps-badge-status i {
  background: var(--pfps-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pfps-accent) 25%, transparent);
}

.pfps-tx.pfps-status-completed .pfps-card-status i,
.pfps-tx .pfps-status-completed .pfps-card-status i,
.pfps-tx .pfps-status-completed .pfps-badge-status i,
.pfps-tx.pfps-status-completed .pfps-badge-status i {
  background: #3ad29f;
  box-shadow: 0 0 0 3px rgba(58, 210, 159, .22);
}

.pfps-tx .pfps-status-coming_soon .pfps-card-status i,
.pfps-tx.pfps-status-coming_soon .pfps-badge-status i {
  background: #f5b54a;
  box-shadow: 0 0 0 3px rgba(245, 181, 74, .25);
}

/* Text under the picture */
.pfps-tx .pfps-card-body {
  padding: 1.3rem .3rem 0;
}

.pfps-tx .pfps-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pfps-tx .pfps-card-heading {
  min-width: 0;
}

.pfps-tx .pfps-card-meta {
  margin: 0 0 .55rem;
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
}

.pfps-tx .pfps-card-meta {
  gap: .2em .6em;
}

.pfps-tx .pfps-card-meta span + span {
  color: var(--pfps-muted);
}

.pfps-tx .pfps-card-meta span + span::before {
  content: "·";
  position: static;
  display: inline;
  width: auto;
  height: auto;
  margin-right: .6em;
  border-radius: 0;
  background: none;
  color: var(--pfps-accent);
}

.pfps-tx .pfps-card-meta .pfps-icon {
  width: 1.15em;
  height: 1.15em;
  margin-right: .35em;
  color: var(--pfps-accent);
}

.pfps-wrap.pfps-tx .pfps-card-title,
.pfps-tx .pfps-card-title {
  position: relative;
  display: inline-block;
  margin: 0 0 .45rem;
  color: var(--pfps-ink);
  font-family: var(--pfps-display);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.pfps-tx .pfps-card-title a {
  background: none;
}

/* Accent line that runs under the title on hover */
.pfps-tx .pfps-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--pfps-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--pfps-ease);
}

.pfps-tx .pfps-card:hover .pfps-card-title::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pfps-tx .pfps-card-year {
  flex-shrink: 0;
  margin-top: 1.3rem;
  padding: .4em .9em;
  border: 1px solid var(--pfps-line);
  border-radius: 99px;
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .72rem;
  line-height: 1.2;
}

.pfps-tx .pfps-card-text {
  margin: .2rem 0 1rem;
  color: var(--pfps-muted);
  font-size: .95rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
}

.pfps-tx ul.pfps-tags {
  gap: .4rem;
  margin: 0 0 1.1rem;
}

.pfps-tx ul.pfps-tags li {
  padding: .32em .85em;
  border-color: var(--pfps-line);
  background: transparent;
  color: var(--pfps-muted);
  font-size: .74rem;
  font-weight: 600;
}

.pfps-tx ul.pfps-tags a:hover {
  color: var(--pfps-accent);
}

.pfps-tx .pfps-card-footer {
  padding-top: .2rem;
  border-top: 0;
}

.pfps-tx .pfps-card-link {
  gap: .7em;
  color: var(--pfps-ink) !important;
  font-family: var(--pfps-display);
  font-size: .78rem;
  font-weight: 500;
}

/* Round arrow like .tx-btn__icon */
.pfps-tx .pfps-card-link-icon,
.pfps-tx .pfps-btn-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.2em;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pfps-accent);
  color: #fff;
  transition: background-color .45s var(--pfps-ease), color .45s var(--pfps-ease);
}

.pfps-tx .pfps-card-link-icon .pfps-icon,
.pfps-tx .pfps-btn-icon .pfps-icon {
  grid-area: 1 / 1;
  place-self: center;
  width: 1.05em;
  height: 1.05em;
  transition: transform .5s var(--pfps-ease);
}

.pfps-tx .pfps-card-link-icon .pfps-icon:last-child,
.pfps-tx .pfps-btn-icon .pfps-icon:last-child {
  transform: translate(-150%, 150%);
}

.pfps-tx .pfps-card:hover .pfps-card-link-icon .pfps-icon:first-child,
.pfps-tx .pfps-btn:hover .pfps-btn-icon .pfps-icon:first-child,
.pfps-tx .pfps-btn:focus-visible .pfps-btn-icon .pfps-icon:first-child {
  transform: translate(150%, -150%);
}

.pfps-tx .pfps-card:hover .pfps-card-link-icon .pfps-icon:last-child,
.pfps-tx .pfps-btn:hover .pfps-btn-icon .pfps-icon:last-child,
.pfps-tx .pfps-btn:focus-visible .pfps-btn-icon .pfps-icon:last-child {
  transform: none;
}

.pfps-tx .pfps-card:hover .pfps-card-link .pfps-icon {
  transform: none;
}

.pfps-tx .pfps-card-live {
  padding: .5em 1em;
  border: 1px solid var(--pfps-line);
  background: transparent;
  color: var(--pfps-ink) !important;
  font-size: .76rem;
  font-weight: 600;
}

.pfps-tx .pfps-card-live:hover {
  border-color: var(--pfps-accent);
  background: transparent;
  color: var(--pfps-accent) !important;
}

/* Deadline under the card text */
.pfps-tx .pfps-card-deadline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  margin: 0 0 1.1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--pfps-line);
  border-radius: var(--pfps-radius-sm);
}

.pfps-tx .pfps-card-deadline > span:first-child {
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pfps-tx .pfps-countdown.is-compact b {
  color: var(--pfps-ink);
  font-family: var(--pfps-display);
  font-size: 1rem;
  font-weight: 600;
}

.pfps-tx .pfps-countdown.is-compact small {
  color: var(--pfps-muted);
}

.pfps-tx .pfps-countdown.is-done {
  color: var(--pfps-accent-ink);
  font-family: var(--pfps-display);
  font-size: .85rem;
}

.pfps-tx .pfps-card-coming {
  color: var(--pfps-accent-ink);
}

/* Progress */
.pfps-tx .pfps-progress-head {
  font-family: var(--pfps-display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pfps-tx .pfps-progress-track {
  height: 4px;
  background: var(--pfps-line);
  box-shadow: none;
}

.pfps-tx .pfps-progress-track i {
  background: var(--pfps-accent);
  animation: none;
}

/* Wide single card */
.pfps-tx .pfps-card.pfps-card-wide .pfps-card-body {
  padding: clamp(1.3rem, 3vw, 2.4rem);
}

/* --------------------------------------------------------------------------
   Buttons (like .tx-btn)
   -------------------------------------------------------------------------- */

.pfps-wrap.pfps-tx .pfps-load-more,
.pfps-tx .pfps-btn {
  --btn-bg: var(--pfps-accent);
  --btn-fg: #fff;
  --btn-border: var(--pfps-accent);
  --btn-hover-bg: var(--pfps-black);
  --btn-hover-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85em;
  min-height: 0;
  padding: .85em .9em .85em 1.5em;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--btn-border);
  border-radius: var(--pfps-btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font-family: var(--pfps-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: color .45s var(--pfps-ease), border-color .45s var(--pfps-ease), background-color .45s var(--pfps-ease);
}

/* Colour that grows from below on hover */
.pfps-wrap.pfps-tx .pfps-load-more::after,
.pfps-tx .pfps-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 100%;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-hover-bg);
  transform: translate(-50%, 0) scale(.2);
  transition: transform .6s var(--pfps-ease), top .6s var(--pfps-ease);
}

.pfps-wrap.pfps-tx .pfps-load-more:hover:not(:disabled),
.pfps-tx .pfps-btn:hover,
.pfps-tx .pfps-btn:focus-visible {
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-fg) !important;
  transform: none;
  box-shadow: none;
}

.pfps-wrap.pfps-tx .pfps-load-more:hover:not(:disabled)::after,
.pfps-tx .pfps-btn:hover::before,
.pfps-tx .pfps-btn:focus-visible::before {
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.pfps-tx .pfps-btn .pfps-btn-icon,
.pfps-wrap.pfps-tx .pfps-load-more .pfps-btn-icon {
  background: var(--btn-fg);
  color: var(--btn-bg);
}

.pfps-tx .pfps-btn:hover .pfps-btn-icon,
.pfps-wrap.pfps-tx .pfps-load-more:hover .pfps-btn-icon {
  background: var(--btn-hover-fg);
  color: var(--btn-hover-bg);
}

.pfps-tx .pfps-btn-ghost,
.pfps-wrap.pfps-tx .pfps-load-more {
  --btn-bg: transparent;
  --btn-fg: var(--pfps-ink);
  --btn-border: var(--pfps-line);
  --btn-hover-bg: var(--pfps-ink);
  --btn-hover-fg: var(--tx-bg, #f5f3ef);
}

.pfps-tx .pfps-btn-ghost .pfps-btn-icon,
.pfps-wrap.pfps-tx .pfps-load-more .pfps-btn-icon {
  border: 1px solid var(--pfps-line);
  background: transparent;
  color: currentColor;
}

.tx-dark .pfps-tx .pfps-btn-primary,
.pfps-tx.pfps-style-dark .pfps-btn-primary {
  --btn-hover-bg: #fff;
  --btn-hover-fg: var(--pfps-black);
}

.pfps-wrap.pfps-tx .pfps-load-more.is-loading::before {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
}

.pfps-wrap.pfps-tx .pfps-load-more.is-loading .pfps-btn-icon {
  display: none;
}

.pfps-tx .pfps-load-more-wrap {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pfps-tx .pfps-empty {
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius-lg);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Project page
   -------------------------------------------------------------------------- */

.pfps-single.pfps-tx {
  max-width: var(--tx-container, 1320px);
}

.pfps-toopix-page {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.pfps-toopix-page > .tx-container > .pfps-wrap {
  margin-top: 0;
}

.pfps-tx .pfps-single-hero {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.pfps-tx .pfps-back {
  color: var(--pfps-muted) !important;
  font-family: var(--pfps-display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pfps-tx .pfps-badge {
  min-height: 0;
  padding: .5em 1em;
  border-color: var(--pfps-line);
  background: transparent;
  color: var(--pfps-ink);
  font-size: .76rem;
  font-weight: 700;
}

.pfps-tx .pfps-badge .pfps-icon {
  color: var(--pfps-accent);
}

.pfps-tx .pfps-badge-featured {
  border-color: var(--pfps-accent);
  background: var(--pfps-accent);
  color: #fff;
}

.pfps-tx .pfps-badge-featured .pfps-icon {
  color: #fff;
}

.pfps-single.pfps-tx .pfps-single-title {
  font-family: var(--pfps-display);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.pfps-tx .pfps-single-lead {
  color: var(--pfps-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
}

.pfps-tx dl.pfps-facts > div {
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius-sm);
  background: transparent;
}

.pfps-tx dl.pfps-facts .pfps-icon {
  border-radius: 50%;
  background: var(--pfps-accent-soft);
  color: var(--pfps-accent-ink);
}

.pfps-tx dl.pfps-facts dt,
.pfps-tx .pfps-launch > span:first-child {
  font-family: var(--pfps-display);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pfps-tx dl.pfps-facts dd {
  font-weight: 700;
}

.pfps-tx .pfps-countdown > span {
  border-radius: var(--pfps-radius-sm);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--pfps-line);
}

.pfps-tx .pfps-countdown b {
  font-family: var(--pfps-display);
  font-weight: 600;
}

.pfps-tx .pfps-single-visual {
  position: relative;
  border: 0;
  border-radius: var(--pfps-radius-lg);
  background: var(--pfps-media);
  box-shadow: var(--tx-shadow, 0 30px 60px -30px rgba(18, 16, 17, .35));
}

.pfps-tx .pfps-result {
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius);
  background: transparent;
}

.pfps-tx .pfps-result strong {
  color: var(--pfps-accent-ink);
  font-family: var(--pfps-display);
  font-weight: 600;
}

.pfps-single.pfps-tx .pfps-block h2,
.pfps-single.pfps-tx .pfps-section-head h2,
.pfps-tx .pfps-section-head h2 {
  font-family: var(--pfps-display);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.03em;
}

.pfps-tx .pfps-rich-content {
  color: var(--pfps-text);
  font-size: 1.06rem;
  line-height: 1.75;
}

.pfps-tx .pfps-rich-content h2,
.pfps-tx .pfps-rich-content h3,
.pfps-tx .pfps-rich-content h4 {
  margin: 1.8em 0 .6em;
  color: var(--pfps-ink);
  font-family: var(--pfps-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}

.pfps-tx .pfps-rich-content li::marker {
  color: var(--pfps-accent);
}

.pfps-tx .pfps-rich-content a {
  color: var(--pfps-accent-ink);
}

.pfps-tx ul.pfps-feature-list li,
.pfps-tx dl.pfps-spec-grid > div {
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius);
  background: transparent;
}

.pfps-tx ul.pfps-feature-list .pfps-icon {
  background: var(--pfps-accent);
}

.pfps-tx dl.pfps-spec-grid dt {
  font-family: var(--pfps-display);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pfps-tx .pfps-testimonial {
  border-radius: var(--pfps-radius-lg);
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pfps-accent) 32%, transparent), transparent 62%),
    var(--tx-ink, #121011);
  color: #f4f2ee;
}

.pfps-tx .pfps-testimonial blockquote {
  font-family: var(--pfps-display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
}

.pfps-tx .pfps-panel {
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius);
  background: transparent;
  box-shadow: none;
}

.pfps-single.pfps-tx .pfps-panel h3 {
  font-family: var(--pfps-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pfps-muted);
}

.pfps-tx dl.pfps-info dd {
  font-weight: 700;
}

.pfps-tx dl.pfps-info a,
.pfps-tx ul.pfps-service-list li::before {
  color: var(--pfps-accent-ink);
}

.pfps-tx ul.pfps-service-list li::before {
  background: var(--pfps-accent);
}

.pfps-tx .pfps-share-links a,
.pfps-single.pfps-tx .pfps-share-links button {
  border-color: var(--pfps-line);
  background: transparent;
  color: var(--pfps-ink) !important;
  font-size: .76rem;
}

.pfps-tx .pfps-share-links a:hover,
.pfps-single.pfps-tx .pfps-share-links button:hover {
  border-color: var(--pfps-accent);
  color: var(--pfps-accent) !important;
}

.pfps-tx .pfps-switcher-tabs {
  border-color: var(--pfps-line);
  background: transparent;
}

.pfps-single.pfps-tx .pfps-switcher-tabs button {
  font-family: var(--pfps-display);
  font-size: .74rem;
  font-weight: 500;
}

.pfps-single.pfps-tx .pfps-switcher-tabs button.is-active {
  background: var(--pfps-ink);
  color: var(--tx-bg, #f5f3ef);
}

.pfps-tx .pfps-switcher-stage,
.pfps-tx .pfps-slider-stage {
  border-radius: var(--pfps-radius-lg);
  background:
    radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--pfps-accent) 24%, transparent), transparent 70%),
    linear-gradient(180deg, #2a2526, #141112);
}

.pfps-single.pfps-tx .pfps-slider-controls button {
  border-color: var(--pfps-line);
  background: transparent;
  color: var(--pfps-ink);
}

.pfps-single.pfps-tx .pfps-slider-controls button:hover {
  border-color: var(--pfps-accent);
  background: var(--pfps-accent);
  color: #fff;
}

.pfps-single.pfps-tx .pfps-slider-thumbs button {
  border-radius: var(--pfps-radius-sm);
}

.pfps-single.pfps-tx .pfps-slider-thumbs button.is-active {
  border-color: var(--pfps-accent);
}

.pfps-tx .pfps-slide figcaption {
  background: rgba(18, 16, 17, .55);
  font-family: var(--pfps-body);
}

.pfps-tx .pfps-gallery {
  gap: clamp(1rem, 2vw, 1.6rem);
}

.pfps-tx .pfps-gallery-item {
  border-radius: var(--pfps-radius);
  background: var(--pfps-media);
  box-shadow: none;
}

.pfps-tx .pfps-project-nav a {
  border-color: var(--pfps-line);
  border-radius: var(--pfps-radius);
  background: transparent;
}

.pfps-tx .pfps-project-nav a:hover {
  border-color: var(--pfps-accent);
  transform: none;
}

.pfps-tx .pfps-project-nav span {
  font-family: var(--pfps-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pfps-tx .pfps-project-nav strong {
  font-family: var(--pfps-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.02em;
}

.pfps-tx .pfps-related {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--pfps-line);
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.pfps-lightbox.pfps-tx .pfps-lightbox-backdrop {
  background: rgba(18, 16, 17, .94);
}

.pfps-lightbox.pfps-tx .pfps-lightbox-figure img {
  border-radius: var(--pfps-radius-sm);
}

.pfps-lightbox.pfps-tx button:hover {
  border-color: var(--pfps-accent);
  background: var(--pfps-accent);
}

.pfps-lightbox.pfps-tx .pfps-lightbox-figure figcaption,
.pfps-lightbox.pfps-tx .pfps-lightbox-count {
  font-family: var(--pfps-display);
  font-size: .74rem;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pfps-tx .pfps-single-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfps-tx .pfps-card-year {
    margin-top: 1.2rem;
  }
}

@media (max-width: 600px) {
  .pfps-tx .pfps-card-media {
    border-radius: var(--pfps-radius);
  }

  .pfps-tx .pfps-card-category {
    display: none;
  }

  .pfps-wm-badge {
    min-width: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfps-tx .pfps-card-media > *,
  .pfps-tx .pfps-btn::before,
  .pfps-tx .pfps-card-title::after {
    transition: none !important;
  }
}

/* ==========================================================================
   2.8.1 – the theme's own markup: work grid (.tx-work), filter bar
   (.pfps-fbar: search + small menus) and button (.tx-btn). With the theme active its
   own rules style them; the same rules are here for sites without the theme.
   ========================================================================== */

.pfps-tx .tx-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.pfps-tx .pfps-tx-cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

.pfps-tx .pfps-tx-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pfps-tx .pfps-tx-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Every second card a little lower – only in the two columns of the work grid. */
.pfps-tx .pfps-tx-cols-2 > .tx-work:nth-child(even) {
  margin-top: clamp(0rem, 8vw, 7rem);
}

.pfps-tx .pfps-tx-cols-1 > .tx-work:nth-child(even),
.pfps-tx .pfps-tx-cols-3 > .tx-work:nth-child(even),
.pfps-tx .pfps-tx-cols-4 > .tx-work:nth-child(even),
.pfps-tx .pfps-grid > .tx-work:nth-child(even) {
  margin-top: 0;
}

.pfps-tx .pfps-tx-grid > .pfps-empty {
  grid-column: 1 / -1;
}

/* The theme underlines links inside page content (.tx-prose a) – not the whole card. */
.pfps-tx .tx-work__link,
.pfps-tx .tx-work__link:hover,
.pfps-tx .tx-work__link:focus {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

.pfps-tx .tx-work__link:focus-visible {
  outline: 2px solid var(--pfps-accent);
  outline-offset: 6px;
  border-radius: var(--pfps-radius-lg);
}

.pfps-tx .pfps-tx-media {
  position: relative;
  overflow: hidden;
}

/* The category on the picture, like the theme (above the shade of the picture). */
.pfps-tx .pfps-tx-media .tx-work__badge {
  position: absolute;
  z-index: 6;
  left: 1.2rem;
  bottom: 1.2rem;
  max-width: calc(100% - 2.4rem - 22%);
  overflow: hidden;
  padding: .5em 1em;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 99px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--pfps-body);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pfps-tx .tx-work__info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem .3rem 0;
}

.pfps-tx .pfps-tx-info {
  min-width: 0;
}

.pfps-tx .pfps-tx-kicker {
  display: block;
  margin: 0 0 .5rem;
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pfps-wrap.pfps-tx .tx-work__title,
.pfps-tx .tx-work__title {
  position: relative;
  display: inline-block;
  margin: 0 0 .35rem;
  color: var(--pfps-ink);
  font-family: var(--pfps-display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.pfps-tx .tx-work__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--tx-accent, var(--pfps-accent));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--pfps-ease);
}

.pfps-tx .tx-work__link:hover .tx-work__title::after,
.pfps-tx .tx-work__link:focus-visible .tx-work__title::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pfps-tx .tx-work__excerpt {
  margin: 0;
  color: var(--pfps-muted);
  font-size: .95rem;
  line-height: 1.6;
}

.pfps-tx .tx-work__year {
  flex-shrink: 0;
  padding: .4em .9em;
  border: 1px solid var(--pfps-line);
  border-radius: 99px;
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .75rem;
  line-height: 1.2;
}

.pfps-tx .pfps-tx-card .pfps-card-deadline,
.pfps-tx .pfps-tx-card .pfps-progress {
  margin: .9rem 0 0;
}

.pfps-tx .pfps-tx-card .pfps-card-coming {
  margin: .7rem 0 0;
}

/* Compact filter bar: search + small menus (category, status, type) + count */
.pfps-tx .pfps-fbar {
  position: relative;
  z-index: 20;
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.8rem);
}

.pfps-tx .pfps-fbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}

.pfps-tx .pfps-fbar__search {
  position: relative;
  display: flex;
  flex: 0 1 300px;
  align-items: center;
  margin: 0;
}

.pfps-tx .pfps-fbar__search .pfps-icon {
  position: absolute;
  left: 1rem;
  width: 17px;
  height: 17px;
  color: var(--pfps-muted);
  pointer-events: none;
}

.pfps-wrap.pfps-tx .pfps-fbar__search input[type="search"] {
  width: 100%;
  height: 46px;
  min-height: 0;
  margin: 0;
  padding: 0 1rem 0 2.6rem;
  border: 1px solid var(--pfps-line);
  border-radius: 999px;
  background: var(--pfps-surface);
  color: var(--pfps-ink);
  font: inherit;
  font-size: .92rem;
  box-shadow: none;
  transition: border-color .3s, box-shadow .3s;
}

.pfps-wrap.pfps-tx .pfps-fbar__search input[type="search"]::placeholder {
  color: var(--pfps-muted);
}

.pfps-wrap.pfps-tx .pfps-fbar__search input[type="search"]:focus {
  border-color: var(--pfps-accent);
  outline: 0;
  box-shadow: 0 0 0 4px var(--pfps-accent-soft);
}

.pfps-tx .pfps-fbar__drops {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.pfps-tx .pfps-drop {
  position: relative;
}

.pfps-wrap.pfps-tx .pfps-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 46px;
  min-height: 0;
  margin: 0;
  padding: 0 1rem 0 1.15rem;
  border: 1px solid var(--pfps-line);
  border-radius: 999px;
  background: var(--pfps-surface);
  color: var(--pfps-ink);
  font-family: var(--pfps-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .3s, background-color .3s, color .3s;
}

.pfps-wrap.pfps-tx .pfps-drop__btn:hover,
.pfps-wrap.pfps-tx .pfps-drop.is-open .pfps-drop__btn {
  border-color: var(--pfps-ink);
}

.pfps-wrap.pfps-tx .pfps-drop__btn:focus-visible {
  border-color: var(--pfps-accent);
  outline: 0;
  box-shadow: 0 0 0 4px var(--pfps-accent-soft);
}

.pfps-wrap.pfps-tx .pfps-drop.has-value .pfps-drop__btn {
  border-color: var(--pfps-ink);
}

.pfps-tx .pfps-drop__value {
  max-width: 150px;
  overflow: hidden;
  padding: .3em .7em;
  border-radius: 99px;
  background: var(--pfps-accent-soft);
  color: var(--pfps-accent-ink);
  font-size: .8rem;
  font-weight: 700;
  text-overflow: ellipsis;
}

.pfps-tx .pfps-drop__value[hidden] {
  display: none;
}

.pfps-tx .pfps-drop__chevron {
  flex: 0 0 auto;
  color: var(--pfps-muted);
  transition: transform .3s var(--pfps-ease);
}

.pfps-tx .pfps-drop.is-open .pfps-drop__chevron {
  transform: rotate(180deg);
}

.pfps-tx .pfps-drop__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 250px;
  max-width: min(330px, calc(100vw - 32px));
  max-height: 340px;
  overflow: auto;
  padding: .4rem;
  border: 1px solid var(--pfps-line);
  border-radius: 18px;
  background: var(--pfps-surface);
  box-shadow: 0 26px 60px -24px rgba(18, 16, 17, .38);
  animation: pfps-drop-in .22s var(--pfps-ease);
}

.pfps-tx .pfps-drop__panel[hidden] {
  display: none;
}

@keyframes pfps-drop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.pfps-wrap.pfps-tx .pfps-drop__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: .62rem .8rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--pfps-ink);
  font-family: var(--pfps-body);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s, color .2s;
}

.pfps-wrap.pfps-tx .pfps-drop__opt:hover,
.pfps-wrap.pfps-tx .pfps-drop__opt:focus-visible {
  background: var(--pfps-soft);
  outline: 0;
}

.pfps-wrap.pfps-tx .pfps-drop__opt.is-active {
  color: var(--pfps-accent-ink);
  font-weight: 700;
}

.pfps-wrap.pfps-tx .pfps-drop__opt:disabled {
  cursor: default;
  opacity: .4;
}

.pfps-tx .pfps-drop__count {
  flex: 0 0 auto;
  min-width: 2em;
  padding: .15em .55em;
  border-radius: 99px;
  background: var(--pfps-soft);
  color: var(--pfps-muted);
  font-size: .76rem;
  font-weight: 700;
  text-align: center;
}

.pfps-tx .pfps-drop__opt.is-active .pfps-drop__count {
  background: var(--pfps-accent-soft);
  color: var(--pfps-accent-ink);
}

.pfps-tx .pfps-fbar__count {
  margin-left: auto;
  color: var(--pfps-muted);
  font-family: var(--pfps-display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pfps-tx .pfps-fbar__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
}

.pfps-tx .pfps-fbar__active[hidden] {
  display: none;
}

.pfps-tx .pfps-fbar__tags {
  display: contents;
}

.pfps-wrap.pfps-tx .pfps-fbar__tag {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 0;
  margin: 0;
  padding: .4em .5em .4em .9em;
  border: 0;
  border-radius: 99px;
  background: var(--pfps-ink);
  color: var(--tx-bg, var(--tx-paper, #f5f3ef));
  font-family: var(--pfps-body);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
}

.pfps-wrap.pfps-tx .pfps-fbar__tag span {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 1.05em;
  line-height: 1;
}

.pfps-wrap.pfps-tx .pfps-fbar__tag:hover span {
  background: var(--pfps-accent);
}

.pfps-wrap.pfps-tx .pfps-fbar__clear {
  min-height: 0;
  margin: 0 0 0 .3rem;
  padding: .3em .2em;
  border: 0;
  background: none;
  color: var(--pfps-muted);
  font-family: var(--pfps-body);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  box-shadow: none;
}

.pfps-wrap.pfps-tx .pfps-fbar__clear:hover {
  color: var(--pfps-ink);
}

/* Dark sections of the theme and the dark style */
.tx-dark .pfps-wrap.pfps-tx .pfps-fbar__search input[type="search"],
.tx-dark .pfps-wrap.pfps-tx .pfps-drop__btn,
.pfps-wrap.pfps-tx.pfps-style-dark .pfps-fbar__search input[type="search"],
.pfps-wrap.pfps-tx.pfps-style-dark .pfps-drop__btn {
  background: rgba(255, 255, 255, .05);
}

.tx-dark .pfps-tx .pfps-drop__panel,
.pfps-tx.pfps-style-dark .pfps-drop__panel {
  background: #1d1a1b;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .7);
}

.tx-dark .pfps-wrap.pfps-tx .pfps-fbar__tag,
.pfps-wrap.pfps-tx.pfps-style-dark .pfps-fbar__tag {
  background: #f4f2ee;
  color: #121011;
}

.tx-dark .pfps-wrap.pfps-tx .pfps-fbar__tag span,
.pfps-wrap.pfps-tx.pfps-style-dark .pfps-fbar__tag span {
  background: rgba(18, 16, 17, .1);
}

/* "Load more" as the theme's ghost button */
.pfps-tx .pfps-load-more-wrap {
  display: flex;
  justify-content: center;
}

.pfps-tx .pfps-load-more-wrap[hidden] {
  display: none;
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more {
  --btn-bg: transparent;
  --btn-fg: var(--pfps-ink);
  --btn-border: var(--pfps-line);
  --btn-hover-bg: var(--pfps-ink);
  --btn-hover-fg: var(--tx-bg, #f5f3ef);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85em;
  min-height: 0;
  padding: 1.05em 1.15em 1.05em 1.6em;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--btn-border);
  border-radius: var(--pfps-btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--pfps-display);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: color .45s var(--pfps-ease), border-color .45s var(--pfps-ease);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 100%;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-hover-bg);
  transform: translate(-50%, 0) scale(.2);
  transition: transform .6s var(--pfps-ease), top .6s var(--pfps-ease);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:hover:not(:disabled),
.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:focus-visible {
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:hover:not(:disabled)::before,
.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:focus-visible::before {
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more .tx-btn__icon {
  position: relative;
  display: inline-grid;
  width: 2.2em;
  height: 2.2em;
  overflow: hidden;
  border: 1px solid var(--pfps-line);
  border-radius: 50%;
  background: transparent;
  color: currentColor;
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more .tx-btn__icon .pfps-icon {
  grid-area: 1 / 1;
  place-self: center;
  width: 1.05em;
  height: 1.05em;
  transition: transform .5s var(--pfps-ease);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more .tx-btn__icon .pfps-icon:last-child {
  transform: translateY(-150%);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:hover .tx-btn__icon .pfps-icon:first-child {
  transform: translateY(150%);
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:hover .tx-btn__icon .pfps-icon:last-child {
  transform: none;
}

.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more.is-loading,
.pfps-wrap.pfps-tx .tx-btn.pfps-tx-more:disabled {
  cursor: progress;
  opacity: .7;
}

.tx-dark .pfps-wrap.pfps-tx .tx-btn.pfps-tx-more {
  --btn-hover-bg: var(--tx-white, #fff);
  --btn-hover-fg: var(--tx-black, #231f20);
}

@media (max-width: 1100px) {
  .pfps-tx .pfps-tx-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pfps-tx .pfps-tx-cols-3,
  .pfps-tx .pfps-tx-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pfps-tx .pfps-fbar__search {
    flex: 1 1 100%;
  }

  .pfps-tx .pfps-fbar__count {
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .pfps-tx .tx-work-grid,
  .pfps-tx .pfps-tx-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pfps-tx .pfps-tx-cols-2 > .tx-work:nth-child(even) {
    margin-top: 0;
  }

  .pfps-tx .pfps-tx-media .tx-work__badge {
    display: none;
  }

  /* Phones: the three menus share one row, a menu opens under the whole row. */
  .pfps-tx .pfps-fbar__drops {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    flex: 1 1 100%;
  }

  .pfps-tx .pfps-drop {
    position: static;
  }

  .pfps-wrap.pfps-tx .pfps-drop__btn {
    justify-content: center;
    width: 100%;
    padding: 0 .7rem;
    font-size: .84rem;
  }

  .pfps-tx .pfps-drop__value {
    display: none;
  }

  .pfps-tx .pfps-drop__panel {
    right: 0;
    max-width: none;
    min-width: 0;
  }
}