.breadcrumb {
  padding-top: var(--header-height);
  padding-inline: 2.5rem;
}
.breadcrumb > ul {
  color: var(--color-black);
}
.breadcrumb ul li a {
  font-weight: 300;
}
.breadcrumb ul li p {
  font-weight: 700;
}

section.hero {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
}

section.hero h1 {
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-black);

  margin-bottom: 30px;
}

section.hero .media {
  display: grid;
  gap: 40px;
}
section.hero .media .main,
section.hero .media .thumb {
  width: 100%;
}

section.hero .media .main {
  position: relative;
  height: 450px;
}

section.hero .media .main .swiper-wrapper {
  height: 100%;
}
section.hero .media .main .swiper-wrapper .swiper-slide {
  border-radius: 20px;
  overflow: clip;
  display: flex;
  align-items: center;
}
section.hero .media .main .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: auto;
}
section.hero .media .main .swiper-button-next,
section.hero .media .main .swiper-button-prev {
  width: 50px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.hero .media .main .swiper-button-next {
  right: 0px;
}
section.hero .media .main .swiper-button-prev {
  left: 0px;
}

section.hero .media .thumb .swiper-wrapper .swiper-slide {
  border-radius: 20px;
  overflow: clip;
  border: 1px solid transparent;

  transition: 0.3s var(--ease);
}
section.hero .media .thumb .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
  border: 1px solid var(--color-primary);
}
section.hero .media .thumb .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

section.hero .content {
  display: grid;
  gap: 1rem;
}

section.hero .content > div:not(.readmore) {
  border-radius: 20px;
  border: 1px solid var(--border-gray);
  border-top-color: transparent;
  overflow: hidden;
  min-width: 270px;
}
section.hero .content > div:not(.readmore) > p {
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);

  font-weight: 700;
  font-size: var(--text-20);
  line-height: 1;
  padding: 11px 30px;
}

section.hero .content > div:not(.readmore) ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 11px 30px;
}
section.hero .content > div:not(.readmore) ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
section.hero .content > div:not(.readmore) ul li > p {
  font-weight: 300;
  font-size: var(--text-md);
}
section.hero .content > div:not(.readmore) ul li > p:last-child {
  font-weight: 700;
  text-align: right;
}

section.hero .content .specs button,
section.hero .content .price a {
  border: none;
  background-color: transparent;
  color: var(--color-link);
  cursor: pointer;

  transition: 0.3s var(--ease);
}
@media (hover: hover) {
  section.hero .content .specs button:hover,
  section.hero .content .price a:hover {
    color: var(--hover-primary);
  }
}
section.hero .content .specs button:active,
section.hero .content .price a:active {
  color: var(--active-primary);
}

section.hero .content .price div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  height: calc(100% - var(--text-20) - 30px);

  padding: 30px;
}
section.hero .content .price div a {
  text-align: center;
}
section.hero .content .price div p {
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-link);
}
section.hero .content .price div .btn {
  width: 100%;
  justify-content: center;
}

section.hero .content > div:not(.readmore) form {
  padding: 30px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  height: calc(100% - var(--text-20) - 30px);
}
section.hero .content > div:not(.readmore) form label > input:not([type="checkbox"]):has(+ span):not(:focus):placeholder-shown + span,
section.hero .content > div:not(.readmore) form label > textarea:not([type="checkbox"]):has(+ span):not(:focus):placeholder-shown + span {
  transform: translateY(2.2em) translateX(1em) scale(1.25);
}

section.hero .content > div:not(.readmore) form input {
  border: 1px solid var(--border-gray);
  background-color: transparent;
  border-radius: 1rem;
  font-size: 1rem;
  padding: 12px 20px;
  color: var(--color-black);
}

section.hero .content > div:not(.readmore) form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
}

section.hero .content .vin form .btn {
  margin-bottom: -0.5rem;
}

section.hero .content .readmore__box {
  padding: 30px;

  max-height: calc((var(--text-sm) * 2) * 4);

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--border-gray); /* thumb, track */

  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%);
}
section.hero .content .readmore__box.is-expanded {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}
section.hero .content .readmore__box:has(.readmore__content:empty) + .readmore__toggle {
  display: none;
}

section.hero .content .readmore__toggle {
  border: none;
  background-color: transparent;
  color: var(--color-black);
  cursor: pointer;
  font-weight: 700;
  margin-inline: auto;
  display: block;
}
section.hero .content .readmore__toggle span {
  color: var(--color-primary);
}
@media (hover: hover) {
  section.hero .content .readmore__toggle:hover {
    color: var(--hover-primary);
  }
  section.hero .content .readmore__toggle:hover span {
    color: var(--hover-primary);
  }
}
section.hero .content .readmore__toggle:active {
  color: var(--active-primary);
}
section.hero .content .readmore__toggle:active span {
  color: var(--active-primary);
}

/* Chrome / Edge / Safari */
section.hero .content .readmore__box::-webkit-scrollbar {
  width: 8px; /* толщина вертикального скролла */
  height: 8px; /* толщина горизонтального (если появится) */
}
section.hero .content .readmore__box::-webkit-scrollbar-track {
  background: var(--border-gray); /* цвет «дорожки» */
}
section.hero .content .readmore__box::-webkit-scrollbar-thumb {
  background: var(--color-primary); /* жёлтый бегунок */
  border-radius: 999px; /* «пилюля» */
  /* создаём небольшой зазор, чтобы бегунок не лип к краям */
  box-shadow: inset 0 0 0 2px var(--border-gray);
}
section.hero .content .readmore__box::-webkit-scrollbar-thumb:hover {
  background: var(--hover-primary);
}
section.hero .content .readmore__box::-webkit-scrollbar-thumb:active {
  background: var(--active-primary);
}

/* если нужен совсем тонкий бегунок */
section.hero .content .readmore__box.--thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

section.hero .content .readmore__content h1,
section.hero .content .readmore__content h2,
section.hero .content .readmore__content h3,
section.hero .content .readmore__content h4,
section.hero .content .readmore__content h5,
section.hero .content .readmore__content h6 {
  color: var(--color-secondary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

section.hero .content .readmore__content p {
  margin-bottom: 1.5rem;
}

section.hero .content .readmore__content ul,
section.hero .content .readmore__content ol {
  list-style-type: disc;
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

section.hero .content .readmore__content ul li,
section.hero .content .readmore__content ol li {
  margin-bottom: 0.5rem;
}

section.hero .content .readmore__content blockquote {
  padding: 1rem;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

section.hero .content .readmore__content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

section.hero .content .readmore__content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

section.hero .content .readmore__content th,
section.hero .content .readmore__content td {
  padding: 0.75rem;
  border: 1px solid var(--color-gray);
}

@media screen and (min-width: 768px) {
  section.hero .media .main .swiper-button-next,
  section.hero .media .main .swiper-button-prev {
    width: 60px;
    height: 40px;
  }
  section.hero .media .main .swiper-button-next {
    right: 20px;
  }
  section.hero .media .main .swiper-button-prev {
    left: 20px;
  }
}

@media screen and (min-width: 1024px) {
  section.hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
  section.hero h1 {
    grid-column: span 2;
  }

  section.hero .content {
    grid-template-columns: var(--auto-fit);
  }
  section.hero .content .readmore {
    grid-column: span 2;
  }

  section.hero .media {
    display: flex;
    flex-direction: column;
  }
}


/* === Lightbox === */
.lb[hidden] { display: none !important; }
.lb {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.85);
  display: grid; place-items: center;
}
.lb__inner { position: relative; width: min(96vw, 1280px); height: min(92vh, 820px); }
.lb__close {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 10px;
  padding: 8px 12px; cursor: pointer; font-size: 18px;
}
.lb__prev, .lb__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; z-index: 4; cursor: pointer;
}
.lb__prev { left: 8px; }
.lb__next { right: 8px; }
.lb__prev::after, .lb__next::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: rgba(255,255,255,.8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 1.5 1.75 6 6.5 10.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/16px 24px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 1.5 1.75 6 6.5 10.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/16px 24px no-repeat;
  border-radius: 10px;
}
.lb__next::after {
  transform: scaleX(-1);
}
.lb__swiper { width: 100%; height: 100%; }
.lb__swiper .swiper-slide { display: grid; place-items: center; }
.lb__swiper img {
  max-width: 100%; max-height: 100%;
  width: auto; height: min(92vh, 820px); object-fit: contain; border-radius: 8px;
  /* чтобы на мобиле не прыгала верстка при масштабировании адресной строки */
  -webkit-transform: translateZ(0);
}
@media (hover:hover) {
  .lb__prev:hover::after, .lb__next:hover::after, .lb__close:hover { background: rgba(255,255,255,.2); }
}