/* BazaPlay UI layout batch. Loaded after baza.lock.css. Do not put this into lock. */

/* 1. Popups — blur + branded dimming on every overlay */
.product-popup-overlay,
.order-popup-overlay,
.city-overlay,
.mega-menu-overlay,
.page-catalog__filter-backdrop,
.page-configurator__overlay:not(.page-configurator__overlay--error),
.reviews-lightbox,
.pc-quiz::backdrop,
.warranty-dialog::backdrop {
  background: color-mix(in srgb, var(--c-primary) 15%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 2. Delivery / Warranty / Trade-In heroes — more inner padding on PC */
.trade-hero__content {
  padding-left: 0;
  margin-left: 0 !important;
}

@media (max-width: 63.99em) {
  .trade-hero__content {
    margin-left: 0 !important;
  }
}

@media (min-width: 64em) {
  .trade-hero__stage {
    padding: 2.5rem;
  }

  .trade-hero__content {
    padding: 1.5rem 1.75rem;
    padding-left: 0;
    margin-left: -9px !important;
  }
}

/* 3. Trade-In CTA form — comment full-width under name/phone/device */
.cta-form__fields {
  flex-wrap: wrap;
}

.cta-form__field--full,
.cta-form__fields .input:has(textarea) {
  flex: 1 1 100%;
  width: 100%;
}

@media (min-width: 48em) {
  .cta-form__field:not(.cta-form__field--full) {
    flex: 1 1 0;
    min-width: 0;
  }

  .cta-form__submit {
    max-width: 22rem;
  }
}

/* 4. Bestsellers — whole card feels clickable */
.bestsellers .catalog-card {
  cursor: pointer;
}

.bestsellers .catalog-card__media-link {
  z-index: 3;
}

/* 4b. Dark-promo «Лидер продаж» — клик по всей карточке, как у акций */
.shop-slide {
  position: relative;
  cursor: pointer;
}

.shop-slide__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.shop-slide__badge,
.shop-slide__body {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.shop-slide__btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.dark-promo__slide[data-pos="prev"] .shop-slide__btn,
.dark-promo__slide[data-pos="next"] .shop-slide__btn {
  display: none;
}

/* 5. Blog photo-fill tiles — white “читать полностью” */
.article-preview--cover .article-preview__body .link,
.article-preview--cover .link {
  color: #fff !important;
}

.article-preview--cover .article-preview__body .link:hover,
.article-preview--cover .link:hover {
  color: #fff !important;
  opacity: 0.85;
}

.article-preview--cover.article-preview--light .article-preview__body .link,
.article-preview--cover.article-preview--light .link {
  color: var(--c-text-heading) !important;
}

/* 6. Catalog button — X when mega-menu is open */
[data-mega-menu-toggle] .header__catalog-icon--close {
  display: none;
}

[data-mega-menu-toggle][aria-expanded="true"] .header__catalog-icon--open,
[data-mega-menu-toggle].is-open .header__catalog-icon--open {
  display: none;
}

[data-mega-menu-toggle][aria-expanded="true"] .header__catalog-icon--close,
[data-mega-menu-toggle].is-open .header__catalog-icon--close {
  display: block;
}

.header__tool[data-mega-menu-toggle] {
  position: relative;
}

/* 7. Mobile breadcrumbs — one line with horizontal scroll */
@media (max-width: 47.99em) {
  .breadcrumbs-section__inner {
    overflow: hidden;
  }

  .breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding-bottom: 0.125rem;
  }

  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .breadcrumbs__item,
  .breadcrumbs__current {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* 8. Homepage categories — mobile scroll indicator */
.categories__scroll {
  width: 100%;
}

@media (min-width: 64em) {
  .categories__scroll {
    display: none;
  }
}

/* 9. Catalog bento — larger photos on first 3 tiles */
.catalog-bento__tile--wide .catalog-bento__thumb {
  width: 6.5rem;
  height: 6.5rem;
}

.catalog-bento__tile--wide .catalog-bento__text {
  max-width: calc(100% - 7.25rem);
}

.catalog-bento__tile--hero .catalog-bento__thumb {
  width: 10.5rem;
  height: 10.5rem;
}

@media (min-width: 48em) {
  .catalog-bento__tile--wide .catalog-bento__thumb {
    width: 9.5rem;
    height: 9.5rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  .catalog-bento__tile--wide .catalog-bento__text {
    max-width: calc(100% - 10.5rem);
  }

  .catalog-bento__tile--hero .catalog-bento__thumb {
    width: 14rem;
    height: 14rem;
  }

  .catalog-bento__tile--hero .catalog-bento__text {
    max-width: calc(100% - 15rem);
  }
}

@media (min-width: 64em) {
  .catalog-bento__tile--wide .catalog-bento__thumb {
    width: 11rem;
    height: 11rem;
    top: 1rem;
    right: 1rem;
  }

  .catalog-bento__tile--wide .catalog-bento__text {
    max-width: calc(100% - 12.25rem);
  }

  .catalog-bento__tile--hero .catalog-bento__thumb {
    width: 18rem;
    height: 18rem;
    top: 1.25rem;
    right: 1.25rem;
  }

  .catalog-bento__tile--hero .catalog-bento__text {
    max-width: calc(100% - 19.5rem);
  }
}

/* 10. Reviews — smaller logos + switch icon on the toggle */
.testimonials__logo-box {
  height: 2.25rem;
}

@media (min-width: 64em) {
  .testimonials__logo-box {
    height: 2.5rem;
  }
}

.testimonials__switch-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.testimonials__yandex-btn .button__icon[src] {
  display: none;
}

/* 11. Reviews — “Смотреть на …” always visible on mobile */
@media (max-width: 47.99em) {
  .reviews__source {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* 12. Product sticky bar vs footer / cookie; keep bottom nav visible on scroll */
@media (max-width: 63.99em) {
  .nav-bar {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    transition: none !important;
  }

  .nav-bar,
  .nav-bar.is-hidden {
    transform: none !important;
  }

  body:has(.page-product__sticky-bar) .footer__inner,
  body:has(.page-pc-detail__sticky-bar) .footer__inner {
    padding-bottom: calc(12rem + env(safe-area-inset-bottom, 0px));
  }

  body:has(.page-product__sticky-bar) .footer__bottom,
  body:has(.page-pc-detail__sticky-bar) .footer__bottom {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  body:has(.page-product__sticky-bar) .cookie-notice,
  body:has(.page-pc-detail__sticky-bar) .cookie-notice {
    bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Sit flush on nav-bar — height from --baza-nav-bar-height (JS), no extra safe-area */
  .page-product__sticky-bar,
  .page-pc-detail__sticky-bar {
    bottom: var(--baza-nav-bar-height, 3.75rem) !important;
    margin-bottom: 0 !important;
  }

  .page-product__sticky-bar::after,
  .page-pc-detail__sticky-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 2px;
    background: var(--c-bg);
    pointer-events: none;
  }
}

/* 13. Mobile listing cards — photo tap opens product, no thumb swipe */
@media (max-width: 47.99em) {
  .catalog-card__slider {
    pointer-events: none;
  }

  .catalog-card__dots {
    display: none !important;
  }

  .catalog-card__media-link {
    z-index: 4;
  }
}

/* 14. Mobile catalog filters — space above bottom nav */
@media (max-width: 79.99em) {
  .page-catalog__sidebar {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  .page-catalog__sidebar-submit-area {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

/* 15. Trade-In mobile — larger fields and list fonts */
@media (max-width: 47.99em) {
  .trade-in__select,
  .trade-in--mob .trade-in__select {
    height: 2.875rem;
    padding-inline: 1rem;
    font-size: 1rem;
    line-height: 1.3;
  }

  .trade-in__value {
    font-size: 1rem;
  }

  .trade-in__label,
  .trade-in--mob .trade-in__label {
    font-size: 0.9375rem;
    line-height: 1.3;
  }

  .trade-in__option {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.35;
  }

  .trade-in__list {
    max-height: 18rem;
  }

  .trade-calc__input,
  .trade-calc__textarea {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }

  .trade-calc__input {
    height: 2.875rem;
  }
}

/* 16. Mobile product — buy/price block above short specs */
@media (max-width: 79.99em) {
  .product__layout {
    display: flex;
    flex-direction: column;
  }

  .product__primary,
  .product__main {
    display: contents;
  }

  .product__gallery {
    order: 1;
  }

  .product__sidebar {
    order: 2;
  }

  .product__specs {
    order: 3;
  }

  .product__tabs,
  .product-tabs {
    order: 4;
  }
}

/* 17. Mobile PC cards — smaller component fonts, button “Ещё” */
@media (max-width: 47.99em) {
  .catalog-card--pc .catalog-card__charact {
    gap: 0.5rem;
    padding: 0.625rem;
  }

  .catalog-card--pc .charact-cart__label,
  .catalog-card--pc .charact-cart__value {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  .catalog-card__charact-more span {
    font-size: 0;
    line-height: 0;
  }

  .catalog-card__charact-more span::after {
    content: "Ещё";
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: 400;
  }
}

/* Workstations promo tile — full description, no clip */
.page-pc__promo .news--promo {
  overflow: visible;
}

.page-pc__promo .news--promo .news__desc {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  max-width: 100%;
}

/* Bestseller badge: green fill, white text */
.label--green,
.label.label--green,
.label--lg.label--green {
  background-color: #42D370 !important;
  color: #FCFCFC !important;
}

/* Site width 1400px from 1250px (content 1400, outer 1440 with 20px gutters) */
@media (min-width: 1250px) {
  .container,
  .breadcrumbs-section__inner,
  .categories__inner,
  .hero__inner,
  .bestsellers__inner,
  .promo-strip__inner,
  .recent__inner,
  .dark-promo__inner,
  .editorial__inner,
  .testimonials__inner,
  .promo-widget__inner,
  .blog__inner,
  .about__container,
  .articles__inner,
  .article__inner,
  .related-news__inner,
  .about-us__inner,
  .gallery__container,
  .features__container,
  .contact__container,
  .cta-form__inner,
  .error-page__inner,
  .text-content,
  .footer__inner,
  .page-catalog__inner,
  .page-product__inner,
  .page-pc__promo-inner,
  .page-pc__builds-inner,
  .page-pc__optimal-inner,
  .page-pc-detail__inner,
  .page-trade-in__inner,
  .page-guarantee__inner,
  .page-delivery__inner,
  .page-cart__inner,
  .dev-hub__inner,
  .components__inner,
  .icons-page__inner,
  .tokens__inner,
  .contacts__inner,
  .order-success__inner,
  .page-promo__inner,
  .social__inner,
  .avito__inner,
  .catalog-page__inner,
  .catalog-search__inner {
    max-width: 90rem !important;
  }

  .header__top,
  .header__bottom,
  .mega-menu__inner {
    padding-inline: max(1.25rem, calc((100% - 87.5rem) / 2)) !important;
  }
}

/* Homepage hero — text always overlays photo; mobile uses <picture> source when set */
html body .hero__banner {
  overflow: hidden !important;
}

html body .hero__slide {
  display: block !important;
  position: relative !important;
  background: none !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  height: auto !important;
}

html body .hero__slide picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  order: unset !important;
}

html body .hero__img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  order: unset !important;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body .hero__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  order: unset !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 1.25rem !important;
  padding: 1.25rem 1rem !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  background: none !important;
}

html body .hero__content--light,
html body .hero__content--dark {
  background: none !important;
}

html body .hero__texts {
  flex: 1 !important;
}

html body .hero__btn {
  margin-top: auto !important;
}

@media (min-width: 64em) {
  html body .hero__slide {
    aspect-ratio: 1440 / 398;
    min-height: 20rem !important;
  }

  html body .hero__content {
    min-height: 20rem !important;
    max-width: 60% !important;
    padding: 2.625rem !important;
  }
}

@media (min-width: 75em) {
  html body .hero__slide {
    min-height: 24.875rem !important;
  }

  html body .hero__content {
    min-height: 24.875rem !important;
    padding: 4rem !important;
    max-width: 60% !important;
  }
}

/* Subcategory tiles — no card fill behind the photo */
html body .cat-slider .cat-card__media,
html body .cat-card__media {
  background: none !important;
  background-color: transparent !important;
}

html body .page-catalog__header {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body .cat-slider {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  min-height: 180px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
html body .cat-slider .cat-slider__viewport,
html body .cat-slider .cat-slider__viewport.swiper {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 136px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
html body .cat-slider .cat-slider__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
html body .cat-slider .cat-slider__viewport.is-dragging * {
  cursor: grabbing !important;
  pointer-events: none;
}
html body .cat-slider .cat-card,
html body .cat-slider .cat-card__img,
html body .cat-slider img {
  -webkit-user-drag: none;
  user-select: none;
}
html body .cat-slider .cat-slider__track,
html body .cat-slider .cat-slider__track.swiper-wrapper,
html body .cat-slider .swiper-wrapper {
  display: flex !important;
  flex-flow: row nowrap !important;
  height: auto !important;
  min-height: 136px !important;
  width: max-content !important;
  transform: none !important;
}
html body .cat-slider .cat-slider__slide,
html body .cat-slider .cat-slider__slide.swiper-slide,
html body .cat-slider .swiper-slide {
  display: block !important;
  flex: 0 0 136px !important;
  width: 136px !important;
  max-width: 136px !important;
  height: auto !important;
  min-height: 136px !important;
  position: relative !important;
  opacity: 1 !important;
}

html body .cat-slider .cat-card {
  cursor: pointer !important;
  text-decoration: none;
}
html body .cat-slider .cat-card__media {
  transition: transform 0.2s ease;
}
html body .cat-slider .cat-card:hover .cat-card__media,
html body .cat-slider .cat-card:focus-visible .cat-card__media {
  transform: scale(1.06);
}
html body .cat-slider .cat-card:hover .cat-card__title,
html body .cat-slider .cat-card:focus-visible .cat-card__title {
  color: var(--c-primary);
}

html body .cat-slider .cat-slider__arrow,
html body .cat-slider.is-scrollable .cat-slider__arrow,
html body .cat-slider .cat-slider__arrow.swiper-button-lock,
html body .cat-slider .cat-slider__arrow.swiper-button-disabled {
  display: none !important;
}

html body .cat-slider__scroll {
  display: none;
  width: 100%;
  margin-top: 8px;
}