/* SBK-UA-0135: eight explicitly non-transactional sample cards.
   Isolated to the home page; never overrides live Offer/Work contracts. */
.sample-showroom {
  margin: 4px 0 24px;
}
.sample-showroom[hidden] {
  display: none !important;
}
.sample-showroom__intro {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.sample-showroom__intro h3 {
  margin: 0;
  color: #14213a;
  font-size: 14px;
  line-height: 1.35;
}
.sample-showroom__intro p {
  margin: 0;
  flex: 1 1 280px;
  color: #718096;
  font-size: 12px;
  line-height: 1.45;
}
.sample-showroom__skip {
  min-height: 44px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-action-primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sample-showroom__skip:hover,
.sample-showroom__skip:focus-visible { color: var(--color-action-hover); text-decoration: none; }
.sample-showroom__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}
.sample-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(33, 52, 83, .07);
  isolation: isolate;
}
.sample-card__image {
  position: relative;
  aspect-ratio: 1.82 / 1;
  overflow: hidden;
  background: #e8eff9;
}
.sample-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sample-card__ribbon {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: -31px;
  width: 112px;
  padding: 4px 0;
  transform: rotate(45deg);
  background: #176bea;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 4px rgba(25, 65, 112, .18);
}
.sample-card__heart {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 36px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: #345580;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  pointer-events: none;
}
.sample-card__photo-note {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  max-width: 67%;
  gap: 3px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  pointer-events: none;
}
.sample-card__photo-note strong { font: inherit; }
.sample-card__photo-note small { font-size: 10px; font-weight: 500; }
.sample-card__photo-note--green {
  padding: 8px 11px;
  border-radius: 12px;
  color: #fff;
  background: rgba(22, 130, 57, .95);
  box-shadow: 0 3px 9px rgba(0, 60, 20, .2);
}
.sample-card__photo-note--handwritten {
  max-width: 56%;
  color: #16283c;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  font-family: Georgia, serif;
  text-shadow: 0 1px 2px rgba(255,255,255,.85);
}
.sample-card__photo-note--yellow {
  padding: 7px 11px;
  border-radius: 11px;
  color: #171a22;
  background: #ffe47c;
  transform: rotate(-5deg);
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.sample-card__photo-note--mini {
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.93);
  color: #1d2a3e;
  font-size: 12px;
}
.sample-card__photo-note--dark {
  top: auto;
  bottom: 11px;
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(29, 24, 22, .76);
  color: #fff;
  font-size: 13px;
}
.sample-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
}
.sample-card__tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.sample-card__tag {
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef3fb;
  color: #6e7f98;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 650;
  white-space: nowrap;
}
.sample-card__tag--type { color: #0d64da; background: #e7f0ff; }
.sample-card__tag--muted { color: #8190a5; background: #f3f6fa; }
.sample-card__price {
  margin: 0 0 3px;
  color: var(--color-price);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.25;
}
.sample-card__title {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 750;
  color: #12213a;
  min-height: 37px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sample-card__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 6px;
  color: #647893;
  font-size: 11px;
  line-height: 1.3;
}
.sample-card__star { color: #f4a000; font-size: 16px; }
.sample-card__pin { color: #16a36c; font-size: 16px; }
.sample-card__small-icon { color: #899ab0; font-size: 14px; }
.sample-card__provider {
  min-width: 0;
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 0;
  padding-top: 7px;
  margin-bottom: 7px;
}
.sample-card__avatar {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf2ff;
  color: #176be4;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.sample-card__provider-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
}
.sample-card__provider-name strong {
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sample-card__provider-name small { color: #718096; font-size: 10px; line-height: 1.3; }
.sample-card__check { color: #149967; border: 0; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; }
.sample-card__context {
  font-size: 11px;
  color: #8290a4;
  margin: 0 0 7px;
}
.sample-card__chips {
  min-height: 43px;
  margin: 0 0 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: start;
}
.sample-card__chips span {
  padding: 6px 8px;
  border-radius: 99px;
  background: #f1f5fa;
  color: #687d98;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}
.sample-card__actions {
  margin-top: auto;
  border-top: 0;
  padding-top: 8px;
  min-height: 27px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--color-link-secondary);
  font-size: 12px;
  font-weight: 700;
}
.sample-card__action-primary { margin-left: auto; color: var(--color-action-primary); }
.sample-card__actions span { cursor: default; }
.sample-showroom__next {
  margin: 11px 0 18px;
  text-align: center;
}
.sample-showroom__next a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--color-action-primary);
  font-size: 12px;
  text-decoration: none;
  font-weight: 700;
}
.sample-showroom__next a:hover,
.sample-showroom__next a:focus-visible { color: var(--color-action-hover); text-decoration: none; }
.real-feed-divider {
  margin: 0 0 12px;
  scroll-margin-top: 90px;
}
.real-feed-divider h3 { margin: 0 0 3px; font-size: 15px; }
.real-feed-divider p { margin: 0; color: #718096; font-size: 12px; }
@media (min-width: 600px) {
  .sample-showroom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .sample-showroom__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1280px) {
  .sample-showroom__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1720px) {
  .sample-showroom__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* SBK-UA-0136 — one mixed, compact visual feed; genuine items remain actionable.
   Demo samples and real cards share layout, but never share fictitious data. */
.discovery-feed > .sample-card,
.discovery-feed > .feed-card {
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(33, 52, 83, .07);
}
.discovery-feed .feed-card--professional,
.discovery-feed .feed-card--service {
  height: auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
}
.discovery-feed .feed-card__media {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.82 / 1;
  overflow: hidden;
  background: #e8eff9;
}
.discovery-feed .feed-card__image-link,
.discovery-feed .feed-card__image-link img {
  width: 100%;
  height: 100%;
}
.discovery-feed .feed-card__save {
  top: 31px;
  right: 7px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  background: rgba(255,255,255,.96);
  border-radius: 50%;
}
.discovery-feed .feed-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  gap: 0;
}
.discovery-feed .feed-card__tags {
  order: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
}
.discovery-feed .feed-card__price {
  order: 1;
  margin: 0 0 3px;
  color: var(--color-price);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.28;
  white-space: normal;
}
.discovery-feed .feed-card__category {
  order: 2;
  margin: 0 0 3px;
  color: #7c899c;
  font-size: 11px;
  line-height: 1.25;
}
.discovery-feed .feed-card h3 {
  order: 3;
  min-height: 37px;
  max-height: 37px;
  margin: 0 0 5px;
  line-height: 18px;
  font-size: 14px;
  font-weight: 750;
}
.discovery-feed .feed-card__reputation {
  order: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 23px;
  margin: 0 0 4px;
  font-size: 11px;
}
.discovery-feed .feed-card__stars { font-size: 15px; color: #94a3b8; }
.discovery-feed .feed-card__geography {
  order: 5;
  margin: 0 0 5px;
  font-size: 11px;
  line-height: 16px;
  min-height: 16px;
  max-height: none;
}
.discovery-feed .feed-card__geography .material-symbols-rounded { font-size: 15px; }
.discovery-feed .feed-card__professional-name {
  order: 6;
  flex: 1 1 auto;
  margin: 0 0 6px;
  border-top: 0;
  padding: 7px 0 0;
  font-size: 11px;
  line-height: 18px;
  min-height: 31px;
}
.discovery-feed .feed-card__actions {
  order: 8;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 33px;
  margin: auto 0 0;
  border-top: 0;
  padding: 7px 0 0;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}
.discovery-feed .feed-card__profile-link,
.discovery-feed .feed-card__action {
  color: var(--color-link-secondary);
  font-size: 12px;
  line-height: 1.25;
  text-decoration: none;
  background: transparent;
}
.discovery-feed .feed-card__action {
  color: var(--color-action-primary);
}
.discovery-feed .feed-card--service > .feed-card__body > .feed-card__action {
  order: 8;
  margin: auto 0 0;
  border-top: 0;
  padding: 7px 0 0;
  min-height: 33px;
  font-size: 12px;
}
.discovery-feed .feed-card__action .material-symbols-rounded { font-size: 18px; }
.discovery-feed .feed-card__catalog-note {
  display: none;
}
.discovery-feed .feed-card__save:focus-visible,
.discovery-feed .feed-card a:focus-visible,
.discovery-feed .sample-card:focus-within {
  outline-offset: 3px;
}

/* SBK-UA-0137 — one equal-height card contract for all unified feed items.
   The original SBK-UA-0132 464px historical CSS remains untouched; this
   stylesheet is only loaded on the SSR homepage. All measured data below is
   visual geometry, never synthetic reputation or actual service state. */
.discovery-feed {
  --unified-card-height: 428px;
  --unified-image-height: 184px;
}

.discovery-feed > .sample-card,
.discovery-feed > .feed-card--professional,
.discovery-feed > .feed-card--service {
  box-sizing: border-box;
  height: var(--unified-card-height);
  min-height: var(--unified-card-height);
  max-height: var(--unified-card-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The same image geometry applies to examples, real masters, and catalog. */
.discovery-feed > .sample-card > .sample-card__image,
.discovery-feed > .feed-card > .feed-card__media {
  box-sizing: border-box;
  flex: 0 0 var(--unified-image-height);
  height: var(--unified-image-height);
  min-height: var(--unified-image-height);
  max-height: var(--unified-image-height);
  aspect-ratio: auto;
  overflow: hidden;
}

.discovery-feed > .sample-card > .sample-card__body,
.discovery-feed > .feed-card > .feed-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Preserve every footer in the bottom slot irrespective of body length. */
.discovery-feed .sample-card__actions,
.discovery-feed .feed-card__actions,
.discovery-feed .feed-card--service > .feed-card__body > .feed-card__action {
  flex-shrink: 0;
  margin-top: auto;
}

@media (min-width: 600px) {
  .discovery-feed {
    --unified-card-height: 418px;
    --unified-image-height: 182px;
  }
}
@media (min-width: 980px) {
  .discovery-feed {
    --unified-card-height: 408px;
    --unified-image-height: 170px;
  }
}
@media (min-width: 1280px) {
  .discovery-feed {
    --unified-card-height: 404px;
    --unified-image-height: 164px;
  }
}
@media (min-width: 1720px) {
  .discovery-feed {
    --unified-card-height: 404px;
    --unified-image-height: 158px;
  }
}

/* SBK-UA-0139 — semantic content switcher on the SSR home page. */
.card-type-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 0 12px;
  margin: 0;
  scroll-margin-top: 90px;
}
.card-type-tabs__tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navigation-idle);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .17s ease, color .17s ease;
}
.card-type-tabs__tab:hover { background: transparent; color: var(--color-action-hover); }
.card-type-tabs__tab.is-active,
.card-type-tabs__tab[aria-current="page"] {
  background: transparent;
  color: var(--color-navigation-active);
}
.card-type-tabs__tab:focus-visible,
.photo-card__main-link:focus-visible,
.photo-card__overlay a:focus-visible,
.photo-card__icon-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}
@media (max-width: 599px) {
  .card-type-tabs { gap: 5px; margin: 0 -2px; }
  .card-type-tabs__tab { padding: 0 12px; font-size: 12px; }
}

/* All externally identical card tiles. The variants differ only inside.
   Base equal-height responsive tokens are owned by SBK-UA-0137. */
.discovery-feed > .feed-card--photo,
.discovery-feed > .feed-card--work-photo,
.discovery-feed > .sample-card--photo {
  position: relative;
  display: block;
  isolation: isolate;
  color: #fff;
  background: #293140;
}
#discovery-feed > .sample-card--photo > .sample-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  flex: none;
  overflow: hidden;
  aspect-ratio: auto;
  background: #364051;
}
#discovery-feed > .sample-card--photo > .sample-card__image img,
.photo-card__main-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-card__main-link {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  background: #3b4452;
}
.photo-card__main-link:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 32%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.80));
  pointer-events: none;
}
.photo-card__label {
  z-index: 2;
  position: absolute;
  top: 12px;
  left: 12px;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 70px);
  color: #fff;
  background: rgba(14, 20, 28, .66);
  backdrop-filter: blur(10px);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  pointer-events: none;
}
.photo-card__label .material-symbols-rounded {
  font-size: 16px;
  line-height: 16px;
}
.photo-card__overlay {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 70px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  color: #fff;
  background: linear-gradient(0deg, rgba(10,13,19,.89) 0%, rgba(10,13,19,.61) 57%, transparent 100%);
  pointer-events: none;
}
/* Text doesn't steal the underlying primary-card navigation;
   only actual secondary links are independent click targets. */
.photo-card__overlay a { pointer-events: auto; }
.photo-card__overlay h3,
#discovery-feed .feed-card--photo h3,
#discovery-feed .feed-card--work-photo h3 {
  margin: 0 0 5px;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
  max-height: none;
  color: #fff;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 750;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.photo-card__overlay h3 a,
.photo-card__overlay .feed-card__profile-link,
.photo-card__overlay .feed-card__action {
  color: #fff;
  text-decoration: none;
}
.photo-card__overlay p {
  max-width: 100%;
  margin: 0 0 10px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.4;
}
.photo-card__eyebrow {
  font-size: 11px !important;
  color: rgba(255,255,255,.77) !important;
  margin-bottom: 5px !important;
}
.photo-card__copyright {
  font-size: 10px !important;
  color: rgba(255,255,255,.70) !important;
  margin-bottom: 5px !important;
}
.photo-card__explore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.photo-card__explore .material-symbols-rounded { font-size: 17px; }
.photo-card__request {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  font-size: 11px !important;
  color: #bcd7ff !important;
  border-bottom: 0;
  text-decoration: none;
}
.photo-card__interaction {
  z-index: 4;
  position: absolute;
  top: 51px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.photo-card__icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(17,21,29,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 23px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.photo-card__icon-button.saved { color: #ff728a; font-variation-settings: "FILL" 1; }
.photo-card__icon-button:hover { background: rgba(17,21,29,.79); }
/* Illustration controls suggest the future layout, but cannot falsely
   claim to be functional social ledger controls on sample cards. */
.photo-card__illustration-actions {
  position: absolute;
  top: 54px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.photo-card__illustration-actions > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15,19,24,.55);
  font-size: 21px;
  color: rgba(255,255,255,.89);
}
#discovery-feed .sample-card--photo .sample-card__ribbon {
  top: 8px;
  right: -31px;
  z-index: 5;
}
#discovery-feed .sample-card--photo .photo-card__illustration-actions {
  top: 70px;
}
.photo-card__preview-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.photo-card__attribution {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.photo-card__attribution a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.photo-card__work-price { font-size: 12px !important; font-weight: 700; }
#discovery-feed .feed-card--work-photo .feed-card__actions {
  width: 100%;
  margin-top: 5px;
  padding-top: 6px;
  min-height: 31px;
  border-top: 0;
  color: #fff;
  font-size: 12px;
}
#discovery-feed .feed-card--work-photo .feed-card__actions .feed-card__action {
  display: inline-flex;
  align-items: center;
  color: #fff;
}
#discovery-feed .feed-card--work-photo .feed-card__media-placeholder {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  background: #293140;
  color: #fff;
}
#discovery-feed .feed-card--work-photo img[data-professional-cover] {
  position: relative;
  z-index: 1;
}
#discovery-feed .feed-card--work-photo img[data-professional-cover][hidden] { display: none; }
@media (max-width: 599px) {
  .photo-card__overlay { padding: 76px 14px 15px; }
  .photo-card__overlay h3 { font-size: 19px; }
}

/* Self-hosted, font-independent card icons. */
.photo-card__svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  stroke: currentColor;
}
.photo-card__label .photo-card__svg { width: 16px; height: 16px; flex-basis: 16px; }
.photo-card__icon-button .photo-card__svg { width: 23px; height: 23px; flex-basis: 23px; }
.photo-card__explore .photo-card__svg,
.photo-card__overlay .feed-card__action .photo-card__svg { width: 18px; height: 18px; flex-basis: 18px; }
.photo-card__icon-button.saved .photo-card__svg { fill: rgba(255,114,138,.25); }
/* Example icons are an inert visual hint, not fake public like counts. */
.photo-card__illustration-actions > .photo-card__svg {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(15,19,24,.55);
  color: rgba(255,255,255,.89);
}