/* ═══════════════════════════════════════════════════════════════════════════
   Sell Landing — single stylesheet (.sl- BEM namespace)
   All rules are scoped under .sl-page to avoid leaking into other templates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page reset / typography ────────────────────────────────────────────── */

/* prevent horizontal overflow caused by .sl-hero's full-bleed (100vw + scrollbar).
   Use `clip` (not `hidden`) so html/body don't become a scroll container, which
   would break `position: sticky` on .header-wrapper. */
html, body { overflow-x: clip; }

.sl-page {
  box-sizing: border-box;
  color: #000;
  margin-bottom: 50px;
  line-height: normal;
  overflow-x: clip;
}
.sl-page * { box-sizing: inherit; }
/* kill bootstrap clearfix pseudo-elements ONLY on our flex/grid containers
   (they become flex items and break space-between/etc). Do NOT apply to all .row,
   because float-based bootstrap grids in other blocks rely on the clearfix. */
.sl-page .sl-steps__header:before,
.sl-page .sl-steps__header:after,
.sl-page .sl-steps__grid:before,
.sl-page .sl-steps__grid:after,
.sl-page .sl-video__layout:before,
.sl-page .sl-video__layout:after { display: none; }
.sl-page p,
.sl-page h1,
.sl-page h2,
.sl-page h3 { margin: 0; }
.sl-page a { text-decoration: none; }
.sl-page ul { list-style: none; }
.sl-page img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.sl-page .sl-grey,
.sl-page .grey { color: grey; }

.sl-page h2 {
  text-align: left;
  font-size: 30px;
  font-family: Times;
}

/* ─── Hero Section ────────────────────────────────────────────────────────── */

.sl-page .sl-hero {
  background: #f5f5f5;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  /* Clip at viewport edges so the hero bg image can extend past the
     .container bounds without producing a page-level horizontal scrollbar.
     z-index:0 establishes a stacking context so any overflow stays visually
     beneath following blocks. */
  position: relative;
  z-index: 0;
  overflow-x: clip;
  overflow-y: visible;
}
.sl-page .sl-hero .container {
  display: flex;
  align-items: stretch;
}
.sl-page .sl-hero__bg { display: none; }

.sl-page .sl-hero__content {
  padding: 50px 0 30px;
  text-align: center;
  width: 100%;
}
.sl-page .sl-hero__tab-subtitle p {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.sl-page .sl-hero__title {
  font-family: 'Times New Roman', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  color: #000;
  margin: 0 0 32px;
}

.sl-page .sl-hero__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.sl-page .sl-hero__tab {
  flex: 1;
  min-width: 0;
  height: 154px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 4px;
  row-gap: 16px;
  align-items: center;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid #E8E8E8;
  cursor: pointer;
  transition: border-color 0.2s;
  font-family: inherit;
  text-align: left;
}
.sl-page .sl-hero__tab:hover,
.sl-page .sl-hero__tab.is-active { border-color: #000; }

.sl-page .sl-hero__tab-icon {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-page .sl-hero__tab-icon svg { width: 100%; height: 100%; }

.sl-page .sl-hero__tab-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-family: 'Times New Roman', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 22px;
  color: #000;
}
.sl-page .sl-hero__tab-subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #656565;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Mobile-first: hide the desktop copy below the desktop breakpoint */
.sl-page .sl-hero__tab-subtitle--desktop { display: none; }
/* nudge mobile subtitle 1px past the right edge to avoid a tail glyph wrapping
   onto its own line at certain widths */
.sl-page .sl-hero__tab-subtitle--mobile { margin-right: -1px; }

.sl-page .sl-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #000;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  border: 1px solid #000;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 8px;
}
.sl-page .sl-hero__cta:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-decoration: none;
}

.sl-page .sl-hero__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #fff;
  border: 1px solid #000;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.sl-page .sl-hero__contact:hover { color: #000; }

/* ─── Steps (How it works) ───────────────────────────────────────────────── */

.sl-page .sl-steps { padding: 50px 0; }

.sl-page .sl-steps__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
.sl-page .sl-steps__header:before,
.sl-page .sl-steps__header:after { display: none; }
.sl-page .sl-steps__header h2 {
  font-family: 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 100%;
  color: #000;
  margin: 0 0 10px;
  text-align: center;
}
.sl-page .sl-steps__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
  background: #000;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  border: 1px solid #000;
  cursor: pointer;
  transition: background-color 0.2s;
}
.sl-page .sl-steps__cta:hover { background: rgba(0,0,0,0.8); color: #fff; text-decoration: none; }

.sl-page .sl-steps__pane {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sl-page .sl-steps__pane.is-active {
  display: block;
  opacity: 1;
}

.sl-page .sl-steps__grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.sl-page .sl-steps__item {
  display: flex;
  flex-direction: column;
}
.sl-page .sl-steps__item-image {
  width: 100%;
  aspect-ratio: 360 / 280;
  overflow: hidden;
  margin-bottom: 16px;
}
.sl-page .sl-steps__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-x-mobile, 50%) var(--bg-y-mobile, 50%);
}
@media screen and (min-width: 992px) {
  .sl-page .sl-steps__item-image img {
    object-position: var(--bg-x-desktop, 50%) var(--bg-y-desktop, 50%);
  }
}
.sl-page .sl-steps__item-step {
  font-family: 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: #000;
  margin: 0 0 16px;
  text-decoration: none;
}
.sl-page .sl-steps__item-step span {
  font-weight: 400;
  text-decoration: underline;
}
.sl-page .sl-steps__item-desc {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  color: #656565;
  margin: 0;
}
.sl-page .sl-steps__bottom-cta { margin-top: 36px; }
.sl-page .sl-steps__bottom-cta .sl-hero__cta { margin-bottom: 0; }
.sl-page .sl-steps__bottom-cta.container .sl-hero__cta.sell-form-show-event {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Mobile Sticky CTA ──────────────────────────────────────────────────── */

.sl-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  padding: 8px 15px;
  border-top: 1px solid #E8E8E8;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: none;
}
.sl-sticky-cta.is-visible { transform: translateY(0); }
.sl-sticky-cta .sl-hero__cta {
  margin-bottom: 0;
  height: 44px;
}

/* ─── Contact Modal (bottom-sheet mobile, centered desktop) ─────────────── */

.sl-contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sl-contact-overlay.is-open { opacity: 1; }

.sl-contact-modal {
  position: fixed;
  z-index: 10001;
  background: #F5F5F5;
  display: none;
  flex-direction: column;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: none;
}
.sl-contact-modal.is-open { transform: translateY(0); }

/* Drag handle — mobile only */
.sl-contact-modal__handle {
  display: flex;
  justify-content: center;
  padding: 7px 0 6px;
  cursor: grab;
}
.sl-contact-modal__handle-bar {
  width: 80px;
  height: 3px;
  background: rgba(155, 155, 155, 0.3);
  border-radius: 2px;
}

.sl-contact-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px 16px;
  position: relative;
}
/* Close button hidden on mobile, shown on desktop */
.sl-contact-modal__close { display: none; }

.sl-contact-modal__title {
  font-family: 'Times New Roman', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: #000;
  text-align: center;
}

.sl-contact-modal__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 15px 15px;
  overflow-y: auto;
  overscroll-behavior-y: none;
}

.sl-contact-modal__channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color 0.2s;
}
.sl-contact-modal__channel:hover {
  border-color: #000;
  text-decoration: none;
}
.sl-contact-modal__channel-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sl-contact-modal__channel-icon img { width: 55%; height: 55%; }
.sl-contact-modal__channel-icon--telegram  { background: #48A4F1; }
.sl-contact-modal__channel-icon--viber     { background: #7360F2; }
.sl-contact-modal__channel-icon--instagram { background: #EF2373; }
.sl-contact-modal__channel-icon--phone     { background: #58A55D; }

.sl-contact-modal__channel-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  color: #000;
}
/* Phone number hidden on mobile, shown on desktop (added in @media >=992) */
.sl-contact-modal__channel-label--phone-number { display: none; }

/* ─── Video block ────────────────────────────────────────────────────────── */

.sl-page .sl-video {
  background: #f5f5f5;
  padding: 50px 0;
  font-size: 18px;
}
.sl-page .sl-video > .container {
  max-width: 1280px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.sl-page .sl-video__layout {
  display: flex;
  flex-direction: column;
  /* Mobile: 30px between title (above) and video (below) — flex gap is the
     single source of spacing so we don't double-up with title padding. The
     desktop ≥992px breakpoint overrides this via `gap: 0` since columns
     handle their own horizontal spacing. No negative side margin on mobile —
     the layout stays inside the container's 15px side padding, matching the
     rest of the page. Desktop adds the Bootstrap-row negative margin. */
  gap: 30px;
}
/* Mobile defaults: title centered above the video, description hidden — only
   title + video remain. The full prod-style layout (Times 38px title on the
   left, description below, video on the right) kicks in at ≥992px. */
.sl-page .sl-video__title {
  font-family: Times, serif;
  font-size: 28px;
  line-height: 1.1;
  text-align: center;
}
.sl-page .sl-video__text {
  display: block;
  float: none;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  margin-bottom: 0;
}
.sl-page .sl-video__desc { display: none; }
.sl-page .sl-video__desc > p { margin-bottom: 16px; line-height: normal; }
.sl-page .sl-video__desc > p.grey { color: #808080; }
.sl-page .sl-video__desc > div {
  margin-bottom: 16px;
  font-family: Times, serif;
  font-size: 18px;
}
.sl-page .sl-video__desc > div span {
  display: block;
  margin-top: 6px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.sl-page .sl-video__desc > div span.grey { color: #808080; }
.sl-page .sl-video__player-wrap {
  width: 100%;
  float: none;
}
.sl-page .sl-video__player {
  width: 100%;
  padding-bottom: 155.25%;
  position: relative;
}
.sl-page .sl-video__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Full-width video (no html text — landscape, full block width) */
.sl-page .sl-video--full .sl-video__layout {
  display: flex;
  justify-content: center;
}
.sl-page .sl-video--full .sl-video__layout > * {
  width: 100%;
  max-width: 1100px;
  float: none;
}
.sl-page .sl-video--full .sl-video__player {
  width: 100%;
  max-width: 100%;
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  position: relative;
}
.sl-page .sl-video--full .sl-video__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Sold (Successfully sold) ───────────────────────────────────────────── */

.sl-page .sl-sold__head { margin-bottom: 24px; text-align: center; }
.sl-page .sl-sold__head h2 { font-family: Times; }

.sl-page .sl-sold {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-bottom: 40px;
}
.sl-page .sl-sold__item {
  width: calc(50% - 5px);
  margin-bottom: 30px;
  font-size: 18px;
}
/* Fixed-aspect picture frame keeps cards aligned regardless of source image
   dimensions. Mobile target 175×265 (≈0.66 ratio); desktop 244×368 same ratio.
   Width fills the .sl-sold__item slot so cards stay shoulder-to-shoulder. */
.sl-page .sl-sold__media {
  position: relative;
  width: 100%;
  aspect-ratio: 175 / 265;
  margin: 0 0 10px;
  background: #f3f3f3;
  overflow: hidden;
}
.sl-page .sl-sold__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sold-x-mobile, 50%) var(--sold-y-mobile, 50%);
  margin: 0;
  display: block;
}
.sl-page .sl-sold__desc span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-page .sl-sold__desc span:first-child { text-transform: uppercase; }
.sl-page .sl-sold__desc span.sl-grey,
.sl-page .sl-sold__desc span.grey {
  font-size: 14px;
  margin-bottom: 10px;
}

/* ─── Why Us ─────────────────────────────────────────────────────────────── */

.sl-page .sl-why {
  background: #f9f9f9;
  padding: 40px 0 10px;
  font-size: 14px;
  margin-bottom: 40px;
}
.sl-page .sl-why h2 {
  margin-bottom: 40px;
  font-family: Times;
}
.sl-page .sl-why__item {
  max-width: 240px;
  margin: 0 auto 40px;
}
.sl-page .sl-why__num {
  font-size: 40px;
  line-height: 40px;
  font-family: Times;
}
.sl-page .sl-why__num span {
  color: #97e74b;
  vertical-align: top;
  margin-top: -3px;
  display: inline-block;
  font-size: 30px;
}

/* ─── Reviews carousel ───────────────────────────────────────────────────── */

.sl-page .sl-reviews {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 60px;
}
.sl-page .sl-reviews__title { margin-bottom: 12px; font-family: Times; }

.sl-page .sl-reviews__nav {
  display: block;
  position: absolute;
  top: initial !important;
  bottom: 0;
  width: 36px;
  height: 36px;
  opacity: 1;
  cursor: pointer;
  transform: translate(-50%);
}
.sl-page .sl-reviews__nav--prev {
  left: calc(50% - 30px);
  background: url(/catalog/view/image/sell/leftIcon.svg) center center no-repeat;
}
.sl-page .sl-reviews__nav--next {
  left: calc(50% + 30px);
  background: url(/catalog/view/image/sell/rightIcon.svg) center center no-repeat;
}

.sl-page .sl-reviews .item {
  justify-content: space-between;
  gap: 20px;
  display: none;
}
.sl-page .sl-reviews .item.active { display: flex; }

.sl-page .sl-reviews__item {
  background-color: #f5f5f5;
  padding: 24px 20px;
  width: 100%;
  font-size: 14px;
  margin-top: 24px;
}
.sl-page .sl-reviews__text {
  font-size: 20px;
  padding-left: 14px;
  position: relative;
  min-height: 170px;
  font-family: Times;
}
.sl-page .sl-reviews__text:before {
  content: "“";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.sl-page .sl-reviews__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: grey;
}

/* ─── Commission banner ──────────────────────────────────────────────────── */

.sl-page .sl-commission {
  background: url(/image/catalog/comBanner.png) left bottom / 49% auto no-repeat,
    #f5f5f5;
  padding: 40px 0;
  font-size: 24px;
  margin-bottom: 50px;
}
.sl-page .sl-commission .container { padding-left: 48%; }
.sl-page .sl-commission__title {
  font-family: Times;
}
.sl-page .sl-commission__cta {
  margin: 32px 0 0 !important;
  width: 190px !important;
}

/* ─── Not accept ─────────────────────────────────────────────────────────── */

.sl-page .sl-not-accept {
  margin-bottom: 50px;
  font-size: 20px;
}
.sl-page .sl-not-accept h2 {
  margin-bottom: 24px;
  font-family: Times;
  text-align: center;
}
.sl-page .sl-not-accept__cta {
  width: 210px !important;
  margin: 30px auto 50px !important;
}
.sl-page .sl-not-accept__item {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 275px;
  margin: 0 auto 16px;
}
.sl-page .sl-not-accept__item img {
  width: 24px;
  height: 24px;
}

/* ─── FAQ accordion ──────────────────────────────────────────────────────── */

.sl-page .sl-faq { margin-top: 24px; }
.sl-page .sl-faq__title {
  font-family: Times;
  margin-bottom: 24px;
  text-align: center;
}
.sl-page .sl-faq__item {
  border-bottom: 1px solid #d9d9d9;
  padding: 20px 0;
  font-size: 14px;
  line-height: normal;
}
.sl-page .sl-faq__item:first-of-type { padding-top: 0; }
.sl-page .sl-faq__question {
  cursor: pointer;
  font-size: 20px;
  font-family: Times;
}
.sl-page .sl-faq__question > * {
  display: inline-block;
  vertical-align: middle;
}
.sl-page .sl-faq__question p {
  width: calc(100% - 36px);
  line-height: normal;
  margin: 0;
}
.sl-page .sl-faq__icon {
  width: 28px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14' fill='none'><path d='M20.3231 2.86065L21.5598 4.09848L14.8199 10.8407C14.7119 10.9493 14.5835 11.0356 14.4421 11.0944C14.3006 11.1533 14.1489 11.1836 13.9957 11.1836C13.8425 11.1836 13.6908 11.1533 13.5493 11.0944C13.4079 11.0356 13.2794 10.9493 13.1714 10.8407L6.4281 4.09848L7.66477 2.86182L13.9939 9.18982L20.3231 2.86065Z' fill='black'/></svg>") no-repeat center / cover;
  transition: transform 0.3s ease;
}
/* grid-template-rows trick: animate from 0fr → 1fr to expand without JS height calc.
   inner row uses min-height: 0; overflow: hidden so the content can be clipped/grow. */
.sl-page .sl-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sl-page .sl-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}
.sl-page .sl-faq__answer-content {
  padding-top: 12px;
  padding-bottom: 4px;
}
.sl-page .sl-faq__answer a { color: #000; }
.sl-page .sl-faq__item.is-open .sl-faq__icon { transform: rotate(180deg); }
.sl-page .sl-faq__item.is-open .sl-faq__answer { grid-template-rows: 1fr; }

/* ─── Custom: Text block ─────────────────────────────────────────────────── */

.sl-page .sl-text {
  padding: 50px 15px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.sl-page .sl-text__title {
  font-family: 'Times New Roman', serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 100%;
  color: #000;
  text-align: center;
  margin: 0 0 16px;
}
.sl-page .sl-text__body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  color: #656565;
}

/* ─── Custom: Banner block (giveItems) ───────────────────────────────────── */

/* Banner — mirrors .giveItems from landing.css */
.sl-page .sl-banner {
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.sl-page .sl-banner__inner {
  background-color: #F5F5F5;
  padding: 30px 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 179px;
}
@media screen and (min-width: 992px) {
  .sl-page .sl-banner__inner {
    min-height: 229px;
  }
}
/* Mobile order: h2 (1) → date (2) → button (3) */
.sl-page .sl-banner__title {
  font-family: Times, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 24px;
  z-index: 4;
  padding-right: 0;
  max-width: 220px;
  order: 1;
  margin: 0;
}
.sl-page .sl-banner__cta {
  margin-left: 0;
  z-index: 4;
  margin-top: 11px;
  order: 3;
  align-self: flex-start;
  width: 240px;
}
.sl-page .sl-banner__cta-desktop { display: none; }
.sl-page .sl-banner__cta-mobile  { display: inline; }
.sl-page .sl-banner__date {
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  display: block;
  text-align: left;
  z-index: 5;
  margin-top: 36px;
  margin-left: 0;
  margin-right: auto;
  order: 2;
}
.sl-page .sl-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: unset !important;
  object-fit: cover;
  object-position: var(--bg-x-mobile, 50%) var(--bg-y-mobile, 50%);
}
@media screen and (min-width: 992px) {
  .sl-page .sl-banner__bg {
    object-position: var(--bg-x-desktop, 50%) var(--bg-y-desktop, 50%);
  }
}

/* ─── Banner: promo variant (image + bulleted list + CTA) ────────────────── */

.sl-page .sl-banner--promo { overflow: hidden; }
.sl-page .sl-banner--promo .sl-banner-promo__inner {
  display: flex;
  flex-direction: column;
}
.sl-page .sl-banner-promo__media {
  width: 100%;
  aspect-ratio: 360 / 208;
  overflow: hidden;
}
.sl-page .sl-banner-promo__img {
  width: 100%;
  height: 100%;
  max-height: unset !important;
  object-fit: cover;
  object-position: var(--bg-x-mobile, 50%) var(--bg-y-mobile, 50%);
}
.sl-page .sl-banner-promo__info {
  padding: 35px 5px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sl-page .sl-banner-promo__title {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 29px;
  margin: 0 0 21px;
  max-width: 252px;
  text-align: center;
}
.sl-page[lang="en"] .sl-banner-promo__title,
html[lang="en"] .sl-page .sl-banner-promo__title { max-width: unset; }
.sl-page .sl-banner-promo__list {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sl-page .sl-banner-promo__list li {
  color: #656565;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.sl-page .sl-banner-promo__list li::before {
  content: "• ";
}
.sl-page .sl-banner-promo__list li:not(:last-child) { margin-bottom: 16px; }
.sl-page .sl-banner-promo__cta {
  height: 48px;
  width: 240px;
  padding: 0;
}

@media screen and (min-width: 992px) {
  .sl-page .sl-banner--promo .sl-banner-promo__inner { flex-direction: row; }
  .sl-page .sl-banner-promo__media {
    width: 48%;
    aspect-ratio: 625 / 323;
  }
  .sl-page .sl-banner-promo__img {
    object-position: var(--bg-x-desktop, 50%) var(--bg-y-desktop, 50%);
  }
  .sl-page .sl-banner-promo__info {
    width: 52%;
    padding: 11.5px 0px 21.5px 59px;
    text-align: left;
    align-items: flex-start;
  }
  .sl-page .sl-banner-promo__title {
    font-size: 42px;
    line-height: 1.2;
    max-width: none;
    margin: 0 0 31px;
    text-align: left;
  }
  .sl-page .sl-banner-promo__list {
    list-style: disc;
    padding-left: 15px;
    margin: 0 0 42px;
    align-items: stretch;
  }
  .sl-page .sl-banner-promo__list li { font-size: 18px; }
  .sl-page .sl-banner-promo__list li::before { content: none; }
  .sl-page .sl-banner-promo__list li:not(:last-child) { margin-bottom: 16px; }
  .sl-page .sl-banner-promo__cta { width: auto; min-width: 240px; }
}

/* ─── Generic black button (для CTA внутри лендинга) ─────────────────────── */

.sl-page .sl-btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: #000;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.sl-page .sl-btn-black:hover {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  text-decoration: none;
}

/* ─── Responsive: ≥500px ─────────────────────────────────────────────────── */

@media screen and (min-width: 500px) {
  .sl-page .sl-commission { background-position: left top 20%; }
}

/* ─── Responsive: ≥768px (tablet) ────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  .sl-page h2 { text-align: left; font-size: 38px; }
  .sl-page .sl-sold__item { width: 30%; }
  .sl-page .sl-sold__media {
    aspect-ratio: 244 / 368;
  }
  .sl-page .sl-sold__image {
    object-position: var(--sold-x-desktop, 50%) var(--sold-y-desktop, 50%);
  }

  .sl-page .sl-not-accept { font-size: 24px; margin-bottom: 80px; }
  .sl-page .sl-not-accept h2 {
    text-align: left;
    margin-bottom: 40px;
  }
  .sl-page .sl-not-accept__cta {
    width: 240px !important;
    margin: 40px 0 0 !important;
  }
  .sl-page .sl-not-accept__item {
    gap: 20px;
    max-width: initial;
    margin: 0 0 24px;
  }
  .sl-page .sl-not-accept__item img { width: 28px; height: 28px; }

  .sl-page .sl-banner__title {
    font-size: 28px !important;
    line-height: 32px !important;
    max-width: 470px;
  }
  .sl-page .sl-banner__date { font-size: 16px; }
}

/* ─── Responsive: ≥992px (desktop) ───────────────────────────────────────── */

@media screen and (min-width: 992px) {

  /* ── Hero ─ */
  .sl-page .sl-hero {
    background: #fafafa;
  }
  .sl-page .sl-hero .container {
    min-height: 512px;
    align-items: stretch;
  }
  /* Bg slot: fills remaining row width with flex-basis:0 so the natural image
     size never expands the flex item. Image is absolute inside, so horizontal
     overflow has no effect on the layout and the content column stays put.
     Vertical is clipped; horizontal is visible (and already bounded at viewport
     by .sl-hero's overflow-x: clip). */
  .sl-page .sl-hero__bg {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 512px;
    position: relative;
    overflow-x: visible;
    overflow-y: clip;
  }
  .sl-page .sl-hero__bg img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    max-width: none;
    object-position: var(--bg-x-desktop, 50%) var(--bg-y-desktop, 50%);
    z-index: 0;
  }
}

@media screen and (min-width: 992px) {
  /* placeholder to keep following desktop overrides inside @media */
  .sl-page .sl-hero__content {
    flex: 0 0 auto;
    width: 621px; /* 586 + 35 padding-left */
    padding: 40px 0 40px 35px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Stack above the hero image so any right-side overflow from the image
       passes behind the title/tabs/CTA instead of over them. */
    position: relative;
    z-index: 1;
  }
  .sl-page .sl-hero__title {
    font-family: 'Times New Roman', serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 44px;
    letter-spacing: 0;
    text-align: left;
    margin: 0 0 24px;
  }
  .sl-page .sl-hero__tabs {
    gap: 8px;
    margin-bottom: 36px;
  }
  .sl-page .sl-hero__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    height: auto;
    min-height: 133px;
    padding: 18px 20px 22px;
    justify-content: flex-start;
    text-align: center;
  }
  .sl-page .sl-hero__tab-icon {
    grid-column: auto;
    grid-row: auto;
  }
  .sl-page .sl-hero__tab-title {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin-top: 4px;
    text-align: center;
    display: block;
    line-height: 20px;
    white-space: nowrap;
    word-break: break-word;
  }
  .sl-page .sl-hero__tab-subtitle {
    grid-column: auto;
    grid-row: auto;
    display: block;
    width: 100%;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    line-height: 17px;
    color: #656565;
  }
  /* Desktop: show desktop copy, hide mobile copy */
  .sl-page .sl-hero__tab-subtitle--desktop { display: block; }
  .sl-page .sl-hero__tab-subtitle--mobile  { display: none; }
  .sl-page .sl-hero__cta {
    font-size: 16px;
    line-height: 100%;
    border: none;
    margin-bottom: 0;
  }
  .sl-page .sl-hero__contact {
    display: block;
    width: 100%;
    height: 48px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-align: center;
    padding: 17.5px 0 0;
  }

  /* ── Steps ─ */
  .sl-page .sl-steps { padding: 100px 0 80px; }
  .sl-page .sl-steps__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 64px;
    max-width: 1280px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .sl-page .sl-steps__header:before,
  .sl-page .sl-steps__header:after { display: none; }
  .sl-page .sl-steps__header h2 {
    font-family: Times, 'Times New Roman', serif;
    font-size: 42px;
    line-height: 56px;
    text-align: left;
    margin: 0;
  }
  .sl-page .sl-steps__cta {
    width: auto;
    padding: 0 40px;
  }
  .sl-page .sl-steps__grid {
    flex-direction: row;
    gap: 64px;
    max-width: 1280px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .sl-page .sl-steps__item { flex: 1 1 0; min-width: 0; }
  .sl-page .sl-steps__grid--3 .sl-steps__item-image { aspect-ratio: 464 / 280; }
  .sl-page .sl-steps__grid--2 .sl-steps__item-image { aspect-ratio: 728 / 280; }
  .sl-page .sl-steps__item-image { margin-bottom: 32px; }
  .sl-page .sl-steps__item-step {
    font-size: 24px;
    line-height: 22px;
  }
  .sl-page .sl-steps__item-desc {
    font-size: 18px;
    line-height: 100%;
  }
  .sl-page .sl-steps__bottom-cta { display: none; }

  /* ── Text block ─ */
  .sl-page .sl-text { padding: 100px 15px 80px; }
  .sl-page .sl-text__title {
    font-family: Times, 'Times New Roman', serif;
    font-size: 42px;
    line-height: 56px;
    text-align: left;
    margin: 0 0 16px;
  }
  .sl-page .sl-text__body {
    font-size: 18px;
    line-height: 100%;
  }

  /* Sticky CTA hidden on desktop */
  .sl-sticky-cta { display: none !important; }

  /* ── Contact modal centered on desktop ─ */
  .sl-contact-modal {
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    border-radius: 0;
    width: 466px;
    max-height: 80vh;
    touch-action: auto;
  }
  .sl-contact-modal.is-open { transform: translate(-50%, -50%) scale(1); }
  .sl-contact-modal__handle { display: none; }
  .sl-contact-modal__header {
    justify-content: space-between;
    padding: 22px 24px 16px;
  }
  .sl-contact-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    align-self: flex-end;
  }
  .sl-contact-modal__close:hover { opacity: 1; }
  .sl-contact-modal__body { padding: 0 24px 24px; }
  .sl-contact-modal__title { font-size: 24px; }
  .sl-contact-modal__channel-label--phone-number { display: inline; }

  /* ── Video block (≥992px) — match legacy "sellRoute" two-column layout ── */
  .sl-page .sl-video {
    background: #f9f9f9;
    padding: 60px 0 100px;
    margin: 50px 0 70px;
    font-size: 18px;
  }
  .sl-page .sl-video__layout {
    flex-direction: row;
    align-items: flex-start;
    /* Bootstrap col-md-8 / col-md-4 split. Negative side margins mirror the
       Bootstrap row → so the col widths track the container outer (1280)
       rather than the inner (1250), matching prod exactly. !important
       overrides a baseline rule on `.basel-page *` that sets margins to 0. */
    gap: 0;
    margin: 0 -15px !important;
  }
  .sl-page .sl-video__text {
    flex: 0 0 auto;
    width: 66.6667%;
    padding: 0 15px;
    font-size: 18px;
  }
  /* Cap the description below the title at 630px wide — prod has a similar
     "narrow column" feel on the long copy under the heading. */
  .sl-page .sl-video__text > .sl-video__desc { max-width: 630px; }
  .sl-page .sl-video__player-wrap {
    flex: 0 0 auto;
    width: 33.3333%;
    padding: 0 15px;
  }
  /* Title styled to match prod: Times 38px / line-height 43px / 40px vertical
     padding. Sits in the left column with the text. The --full variant
     (no html) keeps the standalone centered title. */
  .sl-page .sl-video__title {
    font-family: Times, serif;
    font-size: 38px;
    line-height: 43px;
    padding: 40px 0;
    text-align: left;
  }
  .sl-page .sl-video--full .sl-video__title { text-align: center; padding: 40px 0; }
  .sl-page .sl-video__desc { display: block; }
  .sl-page .sl-video__desc > p { margin-bottom: 24px; line-height: normal; }
  .sl-page .sl-video__desc > div {
    margin-bottom: 30px;
    font-family: Times, serif;
    font-size: 24px;
  }
  .sl-page .sl-video__desc > div span {
    display: block;
    margin-top: 8px;
    font-family: Arial, sans-serif;
    font-size: 18px;
  }

  /* ── Sold ─ */
  .sl-page .sl-sold {
    flex-wrap: nowrap;
    margin-bottom: 70px;
    margin-top: 60px;
  }
  .sl-page .sl-sold__item { width: 18%; }

  /* ── Why us ─ */
  .sl-page .sl-why {
    padding: 100px 0;
    font-size: 16px;
    margin-bottom: 70px;
  }
  .sl-page .sl-why h2 {
    margin-bottom: 0;
    text-align: left;
    height: 84px;
    line-height: 84px;
    border-right: 1px solid rgba(155, 155, 155, 0.35);
    max-width: 95%;
  }
  .sl-page .sl-why__item { max-width: 100%; margin: 0; }

  /* ── Commission ─ */
  .sl-page .sl-commission {
    background-size: 34% auto;
    padding: 30px 0;
    font-size: 36px;
    margin-bottom: 70px;
  }
  .sl-page .sl-commission .container { padding-left: 32%; }
  .sl-page .sl-commission .container > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .sl-page .sl-commission__cta { margin: 0 !important; min-width: 200px; }
  .sl-page .sl-commission__title {
    border-right: 1px solid rgba(155, 155, 155, 0.6);
    padding-right: 50px;
    margin-right: 50px;
    min-width: 340px;
  }

  /* ── Not accept ─ */
  .sl-page .sl-not-accept h2 { margin-top: 40px; }

  /* ── Sold: hide 6th if we already have 5 ─ */
  .sl-page .sl-sold__item:nth-child(6) { display: none; }

  /* ── Banner: desktop reorder h2(1)→cta(2)→date(3), show desktop text ─ */
  .sl-page .sl-banner { margin-top: 80px; margin-bottom: 10px; }
  .sl-page .sl-banner__title { order: 1; }
  .sl-page .sl-banner__cta { order: 2; margin-top: 25px; }
  .sl-page .sl-banner__cta-desktop { display: inline; }
  .sl-page .sl-banner__cta-mobile  { display: none; }
  .sl-page .sl-banner__date {
    order: 3;
    text-align: right;
    margin-right: 0;
    margin-left: auto;
    margin-top: 0;
    max-width: 160px;
  }
}

/* ─── Responsive: ≥1200px ────────────────────────────────────────────────── */

@media screen and (min-width: 1200px) {

  .sl-page .sl-hero__content {
    width: 661px; /* 586 + 75 padding-left */
    padding-left: 75px;
  }

  .sl-page .sl-banner__title {
    font-size: 36px !important;
    line-height: 40px !important;
    max-width: 600px;
  }
  .sl-page .sl-banner__date { max-width: 170px; }

  .sl-page .sl-why__item { padding-left: 20px; }
  .sl-page .sl-why__num { font-size: 64px; line-height: 64px; }
  .sl-page .sl-why__num span { margin-top: -3px; font-size: 44px; }
  .sl-page .sl-why h2 { max-width: 85%; }

  .sl-page .sl-reviews__item {
    padding: 40px;
    font-size: 16px;
    margin-top: 60px;
    margin-bottom: 70px;
  }
  .sl-page .sl-reviews__text { font-size: 24px; min-height: 230px; }
  .sl-page .sl-reviews { padding-bottom: 0; margin-bottom: 70px; }
  .sl-page .sl-reviews__nav--next {
    left: initial;
    right: 0;
    transform: none;
  }
  .sl-page .sl-reviews__nav--prev { left: initial; right: 40px; }

  .sl-page .sl-commission {
    background-size: 43% auto;
    background-position-y: 16%;
  }
}

/* ─── Responsive: ≥1370px ────────────────────────────────────────────────── */

@media screen and (min-width: 1370px) {
  .sl-page .sl-banner__inner { padding: 30px; }
  .sl-page .sl-banner__title {
    font-size: 43px !important;
    line-height: 48px !important;
    max-width: 777px;
  }
}

/* ─── Responsive: ≥1400px ────────────────────────────────────────────────── */

@media screen and (min-width: 1400px) {
  .sl-page .sl-commission {
    padding: 50px 0;
    background-position-y: 18%;
  }
  .sl-page .sl-commission .container { padding-left: 40%; }
}

/* ─── Responsive: ≥992px FAQ ─────────────────────────────────────────────── */

@media screen and (min-width: 992px) {
  .sl-page .sl-faq { margin-top: 40px; }
  .sl-page .sl-faq__item {
    border-width: 2px;
    font-size: 18px;
    padding: 24px 0;
  }
  .sl-page .sl-faq__question { font-size: 24px; }
}


/* ─── Responsive: <= 768px ─────────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
  .sl-page .sl-hero__tab-subtitle p {
      display: inline;
  }
}