/*
 * Data-driven supplier catalog.
 * Kept separate from the shared visual system so catalog iteration does not
 * destabilise the homepage. All colours and typography use design tokens.
 */

.catalog-page{
  padding-bottom: 104px;
}

.page-heading--catalog{
  padding-top: 64px;
}

.page-heading--catalog .page-heading__row{
  align-items: flex-start;
}

.catalog-heading-copy{
  max-width: 760px !important;
  margin-top: 24px;
  color: var(--color-text) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

/* Декоративная рамка снята 17.08.2026: блок ничего не разделяет и ни по чему
   не нажимают, фон панели отделяет его сам. */
.catalog-heading-stat{
  display: grid;
  grid-template-columns: auto 145px;
  gap: 4px 15px;
  min-width: 285px;
  padding: 22px 26px;
  background: var(--color-panel);
}

.catalog-heading-stat strong{
  color: var(--color-accent);
  font: 500 32px/1 var(--font-display);
}

.catalog-heading-stat span{
  align-self: center;
  color: var(--color-muted);
  font-size: 12px;
}

.catalog-source-strip{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 12px 0 26px;
  border: 1px solid var(--color-border);
  background: var(--color-border);
  gap: 1px;
}

.catalog-source-strip button{
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  padding: 18px 20px;
  background: var(--color-panel);
  color: var(--color-muted);
  font-size: 11px;
  text-align: left;
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

.catalog-source-strip button:hover,.catalog-source-strip button.is-active{
  z-index: 1;
  background: var(--color-panel-2);
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.catalog-source-strip button:focus-visible{
  z-index: 2;
}

.catalog-source-strip button strong{
  display: block;
  margin-bottom: 5px;
  overflow: hidden;
  color: var(--color-heading);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-source-strip button > span{
  display: block;
}

.catalog-source-strip button i{
  position: absolute;
  right: 17px;
  bottom: 18px;
  color: var(--color-accent);
  font-size: 9px;
  font-style: normal;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s ease, transform .2s ease;
}

.catalog-source-strip button:hover i,.catalog-source-strip button.is-active i{
  opacity: 1;
  transform: translateX(0);
}

.catalog-toolbar--live{
  min-height: 54px;
  margin: 0 0 16px;
  padding-left: 251px;
}

.catalog-toolbar--live > span{
  color: var(--color-text);
  font-size: 13px;
}

.catalog-toolbar--live label{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-muted);
  font-size: 12px;
}

.catalog-toolbar--live .sort-select{
  min-width: 190px;
  font-size: 12px;
}

.catalog-layout--live{
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 0;
}

.filter-panel--live{
  position: sticky;
  top: 115px;
  display: block;
  max-height: calc(100vh - 130px);
  overflow: auto;
}

.filter-panel--live .filter-panel__title{
  font-size: 24px;
}

/* Линия под каждой группой снята 17.08.2026: в панели их было восемь, и они
   не разделяли, а дробили список. Группы держит отступ, а медный заголовок
   группы остаётся единственным ориентиром. */
.catalog-filter-field{
  display: grid;
  gap: 8px;
  padding: 15px 17px;
}

.catalog-filter-field span{
  color: var(--brand-amber);
  font-size: 11px;
  font-weight: 600;
}

.catalog-filter-field input,.catalog-filter-field select{
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--color-border-interactive);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 11px;
}

.catalog-filter-field input:focus,.catalog-filter-field select:focus{
  border-color: var(--color-accent);
}

.catalog-filter-field input::placeholder{
  color: var(--color-muted);
}

.catalog-filter-note{
  padding: 17px;
}

.catalog-filter-note strong{
  color: var(--color-heading);
  font-size: 11px;
}

.catalog-filter-note p{
  margin-top: 7px;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.55;
}

.catalog-grid--live{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.catalog-card--live{
  display: flex;
  min-width: 0;
  min-height: 660px;
  flex-direction: column;
  background: var(--color-panel);
}

.catalog-card--live .catalog-card__image{
  display: block;
  height: 390px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent),
    var(--color-panel-2);
}

.catalog-card--live .catalog-card__image img{
  object-fit: contain;
  object-position: center;
}

/* Заглушка вместо пустого контейнера,когда фотография поставщика не загрузилась. */
.catalog-card__image.has-image-error,.product-main-image.has-image-error{
  background: var(--color-panel-2);
}

.catalog-card__image.has-image-error img,.product-main-image.has-image-error img{
  display: none;
}

.catalog-card__image.has-image-error::after,.product-main-image.has-image-error::after{
  content: "Фотография исполнения временно недоступна — покажем её в салоне или пришлём менеджером";
  position: absolute;
  inset: 14px;
  display: grid;
  padding: 20px;
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  place-items: center;
}

.catalog-card__variant-count{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(200,141,91,.28);
  background: rgba(8,7,6,.78);
  color: var(--color-text);
  font-size: 9px;
  backdrop-filter: blur(8px);
}

.catalog-card--live .catalog-card__body{
  display: flex;
  min-height: 270px;
  padding: 20px;
  flex: 1;
  flex-direction: column;
}

.catalog-card__eyebrow{
  min-height: 16px;
  overflow: hidden;
  color: var(--brand-amber);
  font-size: 9px;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.catalog-card--live h3{
  margin-top: 9px;
  font-size: 29px;
  line-height: 1.05;
}

.catalog-card--live h3 a:hover{
  color: var(--color-accent);
}

.catalog-card--live p{
  min-height: 68px;
  margin: 12px 0 15px;
  font-size: 11px;
  line-height: 1.55;
}

.catalog-swatches{
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.catalog-swatch{
  display: grid;
  width: 31px;
  height: 31px;
  padding: 3px;
  border: 1px solid var(--color-border-interactive);
  background: var(--color-bg);
  place-items: center;
  transition: border-color .2s ease, transform .2s ease;
}

.catalog-swatch:hover,.catalog-swatch.is-active{
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.catalog-swatch span{
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

.catalog-swatches__more{
  color: var(--color-muted);
  font-size: 10px;
}

.catalog-card--live .catalog-card__price{
  min-height: 31px;
  margin: 16px 0 13px;
  color: var(--color-heading);
  font-size: 23px;
}

.catalog-card__request{
  color: var(--brand-amber);
  font-size: 18px;
}

.catalog-card--live .catalog-card__actions{
  display: block;
  margin-top: auto;
}

.catalog-card--live .catalog-card__actions a{
  display: flex;
  min-height: 45px;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.catalog-load-more{
  display: block;
  min-width: 240px;
  min-height: 52px;
  margin: 28px auto 0;
  border: 1px solid var(--color-accent);
  color: var(--color-heading);
  font-size: 12px;
}

.catalog-load-more:hover{
  background: var(--color-accent);
}

.catalog-load-more[hidden]{
  display: none;
}

.catalog-empty,.catalog-noscript,.product-not-found{
  padding: 70px 32px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  text-align: center;
}

.catalog-empty h2,.product-not-found h1{
  color: var(--color-heading);
  font: 500 42px/1 var(--font-display);
}

.catalog-empty p,.product-not-found > p{
  margin: 12px 0 25px;
  color: var(--color-muted);
  font-size: 13px;
}

/* Product model */
.product-page{
  padding-top: 32px;
  padding-bottom: 110px;
}

.product-loading{
  display: grid;
  min-height: 500px;
  color: var(--color-muted);
  font-size: 13px;
  place-items: center;
}

.product-loading span{
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: catalog-spin .8s linear infinite;
}

@keyframes catalog-spin {
  to { transform: rotate(360deg); }
}

.product-layout--dynamic{
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: 38px;
  margin-top: 28px;
}

.product-layout--dynamic .product-gallery{
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-self: start;
}

.product-layout--dynamic .product-thumbs{
  max-height: 650px;
  padding-right: 2px;
  overflow: auto;
}

.product-layout--dynamic .product-thumbs button{
  min-height: 86px;
  height: 86px;
  background: var(--color-panel-2);
}

.product-layout--dynamic .product-thumbs img{
  object-fit: contain;
}

.product-layout--dynamic .product-main-image{
  min-height: 650px;
}

.product-layout--dynamic .product-main-image img{
  object-fit: contain;
  object-position: center;
  transition: opacity .2s ease;
}

.product-layout--dynamic .gallery-statline div{
  min-width: 0;
  padding: 16px 11px;
}

.product-layout--dynamic .gallery-statline strong{
  font-size: 25px;
}

.product-layout--dynamic .gallery-statline small{
  display: block;
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.35;
}

.product-layout--dynamic .product-info{
  min-width: 0;
  padding-top: 4px;
}

.product-layout--dynamic .product-info h1{
  margin-top: 18px;
  overflow-wrap: anywhere;
  font-size: clamp(48px, 4vw, 68px);
}

.product-layout--dynamic .product-info__kind{
  margin-top: 13px;
  color: var(--brand-amber);
  font-size: 12px;
}

.product-layout--dynamic .product-price{
  align-items: baseline;
  flex-wrap: wrap;
  margin: 27px 0 8px;
}

.product-layout--dynamic .product-price strong{
  font-size: 43px;
}

.product-layout--dynamic .product-price small{
  width: 100%;
  color: var(--color-muted);
  font-size: 10px;
}

.product-current-variant{
  min-height: 24px;
  color: var(--color-accent);
  font-size: 12px;
}

.product-layout--dynamic .product-intro{
  margin: 20px 0 24px;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.75;
}

.config-panel--dynamic{
  max-height: 520px;
  padding: 19px;
  overflow: auto;
}

.config-panel__lead{
  margin-bottom: 19px;
  color: var(--color-heading);
  font-size: 12px;
}

.variant-group{
  min-width: 0;
  padding: 17px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.variant-group legend{
  padding-right: 12px;
  color: var(--brand-amber);
  font-size: 11px;
  font-weight: 600;
}

.variant-options{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.variant-option{
  display: inline-flex;
  min-height: 39px;
  max-width: 100%;
  padding: 7px 11px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border-interactive);
  background: var(--color-bg);
  text-align: left;
}

.variant-option:hover,.variant-option.is-active{
  border-color: var(--color-accent);
  color: var(--color-heading);
}

.variant-option b{
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 500;
}

.variant-option--visual span{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--color-border);
  background-position: center;
  background-size: cover;
}

.product-source{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  margin-top: 18px;
  padding: 15px 17px;
  border-left: 2px solid var(--color-accent);
  background: var(--color-panel);
  font-size: 10px;
}

.product-source span,.product-source small{
  color: var(--color-muted);
}

.product-source a{
  color: var(--brand-amber);
}

.product-source small{
  grid-column: 1 / -1;
}

.specs--dynamic{
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: 60px;
  margin-top: 70px;
  padding: 50px 0;
  border-bottom: 1px solid var(--color-border);
}

.specs__heading h2{
  margin-top: 14px;
  color: var(--color-heading);
  font: 500 45px/.98 var(--font-display);
}

.specs__content > p{
  max-width: 850px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.75;
}

.specs--dynamic .spec-table{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 30px;
  margin-top: 20px;
}

.specs--dynamic .spec-table div{
  gap: 20px;
  padding: 13px 0;
  font-size: 10px;
}

.specs--dynamic .spec-table b{
  max-width: 58%;
  color: var(--color-text);
}

.related-products{
  padding-top: 76px;
}

.related-products .section-title h2{
  font-size: 48px;
}

.related-products__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.related-product{
  display: flex;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}

.related-product:hover{
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.related-product > span{
  display: block;
  height: 260px;
  margin: -14px -14px 15px;
  overflow: hidden;
  background: var(--color-panel-2);
}

.related-product img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.related-product small{
  overflow: hidden;
  color: var(--brand-amber);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-product strong{
  margin: 7px 0 13px;
  color: var(--color-heading);
  font: 500 24px/1.05 var(--font-display);
  overflow-wrap: anywhere;
}

.related-product em{
  margin-top: auto;
  color: var(--color-accent);
  font-size: 12px;
  font-style: normal;
}

@media (max-width: 1180px) {
  .catalog-source-strip{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-grid--live{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-layout--dynamic{
    grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
    gap: 25px;
  }

  .product-layout--dynamic .product-main-image{
    min-height: 560px;
  }

  .related-products__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .page-heading--catalog .page-heading__row{
    display: grid;
  }

  .catalog-heading-stat{
    width: 100%;
  }

  .catalog-toolbar--live{
    padding-left: 0;
  }

  .catalog-layout--live{
    grid-template-columns: 1fr;
  }

  .filter-panel--live{
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .filter-panel--live .filter-panel__title,.catalog-filter-note{
    grid-column: 1 / -1;
  }

  .catalog-filter-field{
    border-right: 1px solid var(--color-border);
  }

  .product-layout--dynamic{
    grid-template-columns: 1fr;
  }

  .product-layout--dynamic .product-gallery{
    order: 2;
  }

  .product-layout--dynamic .product-info{
    order: 1;
  }

  .specs--dynamic{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 640px) {
  .catalog-page,.product-page{
    width: min(calc(100% - 28px), var(--container));
  }

  .page-heading--catalog{
    padding-top: 42px;
  }

  .catalog-heading-copy{
    font-size: 13px !important;
  }

  .catalog-source-strip,.catalog-grid--live,.filter-panel--live{
    grid-template-columns: 1fr;
  }

  .catalog-source-strip button{
    padding: 14px 16px;
  }

  .catalog-toolbar--live{
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .catalog-toolbar--live label{
    justify-content: space-between;
  }

  .catalog-toolbar--live .sort-select{
    min-width: 0;
    flex: 1;
  }

  .catalog-filter-field,.catalog-filter-note{
    grid-column: 1;
  }

  .catalog-card--live{
    min-height: 0;
  }

  .catalog-card--live .catalog-card__image{
    height: 350px;
  }

  .product-layout--dynamic .product-gallery{
    grid-template-columns: 1fr;
  }

  .product-layout--dynamic .product-thumbs{
    display: flex;
    max-height: none;
    flex-direction: row;
    order: 2;
    overflow-x: auto;
  }

  .product-layout--dynamic .product-thumbs button{
    width: 74px;
    min-width: 74px;
    min-height: 74px;
    height: 74px;
  }

  .product-layout--dynamic .product-main-image{
    min-height: 430px;
    order: 1;
  }

  .product-layout--dynamic .gallery-statline{
    grid-template-columns: repeat(2, 1fr);
    order: 3;
  }

  .product-layout--dynamic .gallery-statline div:nth-child(2){
    border-right: 0;
  }

  .product-layout--dynamic .gallery-statline div:nth-child(-n+2){
    border-bottom: 1px solid var(--color-border);
  }

  .product-layout--dynamic .product-info h1{
    font-size: 48px;
  }

  .purchase-actions{
    grid-template-columns: 1fr;
  }

  .specs--dynamic .spec-table,.related-products__grid{
    grid-template-columns: 1fr;
  }

  .related-products .section-title{
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-loading span{
    animation: none;
  }
}

/* Prices and discounts managed from the owner dashboard. */
.catalog-card--live .catalog-card__price s{
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
}

.catalog-card__discount{
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  padding: 6px 9px;
  border: 1px solid var(--color-accent);
  background: rgba(12, 10, 9, .9);
  color: var(--color-accent-soft);
  font-size: 12px;
}

.product-discount{
  padding: 5px 9px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-soft);
  font-size: 13px;
}

/* Conversion catalog: scenario presets,multi-select filters and card actions. */
.catalog-scenarios{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:32px;margin:0 0 18px;padding:28px;border:1px solid var(--color-border);background:linear-gradient(120deg,#15110e,#0b0a09)}
.catalog-scenarios h2{max-width:520px;margin-top:12px;color:var(--color-heading);font:500 34px/1.03 var(--font-display)}
.catalog-scenarios__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--color-border);background:var(--color-border)}
.catalog-scenarios__list button{min-height:64px;padding:12px 13px;background:var(--color-panel);color:var(--color-text);font-size:12px;line-height:1.35;text-align:left;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.catalog-scenarios__list button:hover,.catalog-scenarios__list button.is-active{background:#28160f;color:var(--color-heading);box-shadow:inset 0 2px 0 var(--color-accent)}
.catalog-active-filters{display:flex;min-height:58px;margin:0 0 16px;padding:10px 14px;align-items:center;gap:10px;border:1px solid var(--color-border);background:rgba(13,12,11,.86);flex-wrap:wrap}.catalog-active-filters[hidden]{display:none}.catalog-active-filters>strong{margin-right:4px;color:var(--color-heading);font-size:12px}.catalog-active-filters>div{display:flex;gap:7px;flex:1;flex-wrap:wrap}.catalog-active-filters button{padding:7px 10px;border:1px solid rgba(215,101,45,.45);color:var(--color-text);font-size:11px}.catalog-active-filters button span{margin-left:5px;color:var(--color-accent)}.catalog-active-filters>[data-clear-all-filters]{border-color:transparent;color:var(--color-muted);text-decoration:underline}
.catalog-filter-group{border-bottom:1px solid var(--color-border)}.catalog-filter-group summary{position:relative;padding:16px 36px 16px 17px;color:var(--color-heading);font-size:12px;font-weight:600;list-style:none;cursor:pointer}.catalog-filter-group summary::-webkit-details-marker{display:none}.catalog-filter-group summary::after{content:"+";position:absolute;right:17px;color:var(--color-accent)}.catalog-filter-group[open] summary::after{content:"−"}.catalog-filter-options,.catalog-color-options{display:grid;gap:1px;padding:0 13px 15px}.catalog-filter-options label,.catalog-color-options label{display:flex;min-height:37px;padding:8px 7px;align-items:center;gap:9px;color:var(--color-text);font-size:11px;cursor:pointer}.catalog-filter-options label:hover,.catalog-color-options label:hover{background:rgba(215,101,45,.06)}.catalog-filter-options input,.catalog-color-options input{width:16px;height:16px;accent-color:var(--color-accent)}.catalog-filter-options span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-filter-options small{color:var(--color-muted);font-size:9px}.catalog-color-options i{width:20px;height:20px;border:1px solid rgba(255,255,255,.15);background:var(--tone);font-style:normal}.catalog-price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 13px 11px}.catalog-price-inputs label{color:var(--color-muted);font-size:9px}.catalog-price-inputs input{width:100%;min-height:38px;margin-top:4px;padding:0 8px;border:1px solid var(--color-border-interactive);background:var(--color-bg);font-size:11px}
.catalog-card--live{position:relative}.catalog-card__quick{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 10px;border:1px solid var(--color-border);background:var(--color-border)}.catalog-card__quick button{min-height:43px;padding:9px 10px;background:#0b0a09;color:#c7bbb0;font-size:10px;line-height:1.25;text-align:left}.catalog-card__quick button:hover{background:#29160f;color:var(--color-heading)}.catalog-card--live .catalog-card__body{min-height:390px}
.product-choice-tools{display:flex;gap:8px;margin:18px 0 10px}.product-choice-tools button{display:flex;min-height:46px;padding:0 16px;align-items:center;gap:9px;border:1px solid var(--color-border-interactive);color:var(--color-text);font-size:12px}.product-choice-tools button span{color:var(--color-accent);font-size:20px}.product-choice-tools button:hover,.product-choice-tools button.is-active{border-color:var(--color-accent);background:rgba(215,101,45,.1);color:var(--color-heading)}.product-lead-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.product-lead-actions .button{min-height:53px;padding-inline:14px;font-size:11px}.product-lead-actions .button:first-child{grid-column:1/-1}
@media(max-width:1180px){.catalog-scenarios{grid-template-columns:1fr}.catalog-scenarios__list{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.catalog-scenarios__list{grid-template-columns:repeat(2,1fr)}.filter-panel--live{display:block}.catalog-filter-field{border-right:0}.catalog-card--live .catalog-card__body{min-height:350px}}
@media(max-width:640px){.catalog-scenarios{padding:20px 16px}.catalog-scenarios h2{font-size:30px}.catalog-scenarios__list{grid-template-columns:1fr 1fr}.catalog-active-filters{align-items:flex-start;flex-direction:column}.catalog-card__quick,.product-lead-actions{grid-template-columns:1fr}.product-lead-actions .button:first-child{grid-column:auto}.product-choice-tools{flex-direction:column}.catalog-card--live .catalog-card__body{min-height:0}}

/* Readability pass for the catalog,product page and product actions. */
.catalog-heading-copy{
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.catalog-heading-stat{
  grid-template-columns: auto 175px;
  min-width: 330px;
}

.catalog-heading-stat strong{ font-size: 38px; }
.catalog-heading-stat span{ font-size: 15px; line-height: 1.45; }

.catalog-source-strip button{
  min-height: 92px;
  padding: 20px 22px;
  font-size: 15px;
  line-height: 1.45;
}

.catalog-source-strip button strong{ font-size: 17px; }
.catalog-source-strip button i{ font-size: 13px; }

.catalog-toolbar--live{
  min-height: 66px;
  padding-left: 306px;
}

.catalog-toolbar--live > span,.catalog-toolbar--live label,.catalog-toolbar--live .sort-select{ font-size: 16px; }

.catalog-toolbar--live .sort-select{
  min-width: 230px;
  min-height: 46px;
}

.catalog-layout--live{
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 20px;
}

.filter-panel--live .filter-panel__title{ font-size: 31px; }
.filter-panel--live .filter-panel__title button{ font-size: 14px; }

.catalog-filter-field{ gap: 10px; padding: 18px; }
.catalog-filter-field span{ font-size: 15px; }
.catalog-filter-field input,.catalog-filter-field select{
  min-height: 48px;
  padding-inline: 13px;
  font-size: 16px;
}

.catalog-filter-note{ padding: 20px 18px; }
.catalog-filter-note strong{ font-size: 16px; }
.catalog-filter-note p{ font-size: 15px; line-height: 1.55; }

.catalog-scenarios h2{ font-size: 39px; }
.catalog-scenarios__list button{
  min-height: 76px;
  padding: 15px;
  font-size: 16px;
  line-height: 1.4;
}

.catalog-active-filters > strong{ font-size: 16px; }
.catalog-active-filters button{ min-height: 38px; font-size: 14px; }

.catalog-filter-group summary{
  min-height: 54px;
  padding: 17px 42px 17px 18px;
  font-size: 17px;
}

.catalog-filter-options,.catalog-color-options{ padding: 0 14px 18px; }

.catalog-filter-options label,.catalog-color-options label{
  min-height: 44px;
  padding: 10px 8px;
  font-size: 16px;
  line-height: 1.35;
}

.catalog-filter-options input,.catalog-color-options input{ width: 19px; height: 19px; }
.catalog-filter-options small{ font-size: 13px; }
.catalog-color-options i{ width: 24px; height: 24px; }
.catalog-price-inputs{ padding: 0 14px 14px; }
.catalog-price-inputs label{ font-size: 14px; }
.catalog-price-inputs input{ min-height: 44px; font-size: 16px; }

.catalog-card__variant-count,.catalog-card--live .catalog-card__badge,.catalog-card__discount{ font-size: 13px; }

.catalog-card--live .catalog-card__body{
  min-height: 470px;
  padding: 23px;
}

.catalog-card__eyebrow{ min-height: 20px; font-size: 13px; }
.catalog-card--live h3{ font-size: 34px; line-height: 1.04; }
.catalog-card--live p{
  min-height: 92px;
  margin: 14px 0 17px;
  font-size: 16px;
  line-height: 1.6;
}

.catalog-swatches__more{ font-size: 14px; }
.catalog-card--live .catalog-card__price{ font-size: 27px; }
.catalog-card__request{ font-size: 23px; }
.catalog-card--live .catalog-card__price s{ font-size: 15px; }
.catalog-card__quick button{
  min-height: 54px;
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.35;
}

.catalog-card--live .catalog-card__actions a{
  min-height: 52px;
  padding-inline: 17px;
  font-size: 15px;
}

.catalog-load-more{ min-height: 58px; font-size: 16px; }
.catalog-empty p,.catalog-noscript,.product-not-found > p,.product-loading{ font-size: 16px; }

.product-page .breadcrumbs{ font-size: 14px; line-height: 1.5; }
.product-layout--dynamic .product-info__kind{ font-size: 16px; }
.product-layout--dynamic .product-price strong{ font-size: 48px; }
.product-layout--dynamic .product-price small{
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.product-discount{ font-size: 16px; }
.product-current-variant{ min-height: 28px; font-size: 17px; }
.product-layout--dynamic .product-intro{
  font-size: 18px;
  line-height: 1.7;
}

.config-panel__lead{ font-size: 16px; line-height: 1.55; }
.variant-group legend{ font-size: 15px; }
.variant-option{ min-height: 48px; padding: 9px 13px; }
.variant-option b{ font-size: 15px; line-height: 1.35; }

.product-choice-tools button{
  min-height: 52px;
  padding-inline: 18px;
  font-size: 16px;
}

.product-lead-actions .button{
  min-height: 58px;
  padding-inline: 16px;
  font-size: 15px;
  line-height: 1.35;
}

.product-source{
  gap: 8px 12px;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
}

.product-source small{ font-size: 14px; line-height: 1.5; }

.specs__heading h2{ font-size: 52px; }
.specs__content > p{ font-size: 18px; line-height: 1.7; }
.specs--dynamic .spec-table{ gap: 0 38px; margin-top: 28px; }
.specs--dynamic .spec-table div{
  min-height: 58px;
  gap: 24px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.45;
}

.specs--dynamic .spec-table span{ min-width: 0; }
.specs--dynamic .spec-table b{ font-size: 16px; line-height: 1.45; }
.related-product small{ font-size: 13px; }
.related-product strong{ font-size: 28px; }
.related-product em{ font-size: 16px; }

@media (max-width: 1180px) {
  .catalog-toolbar--live{ padding-left: 0; }
  .catalog-layout--live{ grid-template-columns: 270px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .catalog-layout--live{ grid-template-columns: 1fr; }
  .catalog-card--live .catalog-card__body{ min-height: 430px; }
}

@media (max-width: 640px) {
  .catalog-heading-copy{ font-size: 16px !important; }
  .catalog-heading-stat{ grid-template-columns: auto 1fr; min-width: 0; }
  .catalog-toolbar--live > span,.catalog-toolbar--live label,.catalog-toolbar--live .sort-select{ font-size: 15px; }
  .catalog-scenarios h2{ font-size: 34px; }
  .catalog-scenarios__list button{ min-height: 68px; font-size: 15px; }
  .catalog-card--live .catalog-card__body{ min-height: 0; padding: 20px; }
  .catalog-card--live h3{ font-size: 32px; }
  .catalog-card--live p{ min-height: 0; font-size: 16px; }
  .product-layout--dynamic .product-info h1{ font-size: 46px; }
  .product-layout--dynamic .product-intro,.specs__content > p{ font-size: 16px; }
  .specs__heading h2{ font-size: 44px; }
  .specs--dynamic .spec-table div,.specs--dynamic .spec-table b{ font-size: 15px; }
}

/* Contextual lead offers for catalog sections and product pages */
.category-offer{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:38px;margin:0 0 18px;padding:30px;align-items:center;border:1px solid var(--color-border);background:var(--color-panel)}
.category-offer h2{max-width:620px;margin:12px 0;color:var(--color-heading);font:500 clamp(32px,3.5vw,47px)/1 var(--font-display)}
.category-offer [data-category-offer-copy]{max-width:680px;color:var(--color-muted);font-size:var(--type-ui);line-height:1.6}
.category-offer__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.category-offer__actions .button:first-child{grid-column:1/-1}.category-offer__actions .button{min-height:52px;padding-inline:14px;font-size:var(--type-caption)}
.product-lead-hint{margin:12px 0 0;color:var(--color-muted);font-size:var(--type-caption);line-height:1.55}.product-photo-action{grid-column:1/-1;min-height:46px;border:1px dashed var(--color-accent);color:var(--color-accent);font-size:var(--type-ui)}.product-photo-action:hover{background:var(--color-panel-2);color:var(--color-heading)}

@media(max-width:900px){.category-offer{grid-template-columns:1fr}}
@media(max-width:620px){.category-offer{padding:24px 20px}.category-offer__actions{grid-template-columns:1fr}.category-offer__actions .button:first-child{grid-column:auto}.product-lead-actions{grid-template-columns:1fr}.product-lead-actions .button:first-child,.product-photo-action{grid-column:auto}}

/* Витрина: скелетон загрузки,наличие,запрос цены и sticky-блок покупки — 15.08.2026 */

/* 30. Скелетон карточек вместо строки «Загружаем модели…». */
.catalog-skeleton{
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
}

.catalog-skeleton__image{
  height: 390px;
  background: var(--color-panel-2);
}

.catalog-skeleton__body{
  display: grid;
  gap: 14px;
  padding: 23px;
}

.catalog-skeleton__line{
  height: 16px;
  background: var(--color-panel-2);
}

.catalog-skeleton__line--title{ height: 30px; width: 72%; }
.catalog-skeleton__line--short{ width: 45%; }
.catalog-skeleton__line--button{ height: 52px; margin-top: 8px; }

.catalog-skeleton__image,.catalog-skeleton__line{
  animation: catalog-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes catalog-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* 25. Наличие и срок поставки рядом с ценой. */
.availability-line{
  margin: 0 0 12px;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.45;
}

.availability-line::before{
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand-success);
}

.availability-line--order::before{ background: var(--brand-amber); }
.availability-line--unavailable::before{ background: var(--color-muted); }
.availability-line b{ color: var(--color-text); font-weight: 600; }
.catalog-card--live .availability-line{ margin: -6px 0 12px; font-size: 14px; }
.product-layout--dynamic .availability-line{ margin: 10px 0 0; font-size: 16px; }

/* 28. «Цена по запросу» — рабочая кнопка запроса цены,а не мёртвый текст. */
button.catalog-card__request,button.product-price__request{
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--color-accent);
  background: none;
  color: var(--brand-amber);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

button.catalog-card__request:hover,button.product-price__request:hover{ color: var(--color-accent); }

button.product-price__request{
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
}

/* 26. Sticky-блок цены и CTA: при длинной палитре цена уезжала из вида. */
.product-sticky-bar{
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(24px, 5vw, 90px);
  border-top: 1px solid var(--color-border-interactive);
  background: var(--color-surface);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .5);
}

.product-sticky-bar[hidden]{ display: none; }
.product-sticky-bar__info{ min-width: 0; display: grid; gap: 2px; }
.product-sticky-bar__info strong{
  overflow: hidden;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-sticky-bar__info span{ color: var(--color-muted); font-size: 14px; }
.product-sticky-bar__price{
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 30px;
  white-space: nowrap;
}
.product-sticky-bar .button{ min-height: 54px; padding-inline: 26px; white-space: nowrap; }

@media (max-width: 999px) {
  .product-sticky-bar{ display: none !important; }
}

@media (max-width: 900px) {
  .catalog-skeleton__image{ height: 350px; }
}

@media (max-width: 640px) {
  .catalog-skeleton__image{ height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-skeleton__image,.catalog-skeleton__line{ animation: none; }
}

/* ==========================================================================
   Заход 4 — 16.08.2026. Мобильные фильтры,карточка по утверждённому макету,читабельность и размеры целей нажатия.
   ========================================================================== */

/* --- Карточка каталога -----------------------------------------------------
   Макет `assets/reference/client-catalog.jpg`: изображение,название,короткое
   описание,палитра,цена и одна главная кнопка «Подробнее» рядом с сердцем.
   Быстрые заявки и сравнение переехали на страницу модели: в каталоге они
   давали до пятнадцати точек табуляции на карточку. */

/* Специфичность поднята намеренно: базовое правило `.catalog-card__actions a`
   в styles.css задаёт 14 px,а живой карточке нужен более крупный текст. */
.catalog-card--live .catalog-card__actions{
  display: flex;
  grid-template-columns: none;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
}

.catalog-card--live .catalog-card__actions .catalog-card__more{
  display: flex;
  min-height: 54px;
  padding: 0 20px;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  /* Тот же токен, что у главной кнопки сайта: тёмный текст на оранжевом даёт
     5.56 против 3.63 у белого. В макете `client-catalog.jpg` надпись белая, но
     владелец 16.08.2026 выбрал читаемость, а не буквальное соответствие
     макету. То же решение действует для активных вкладок каталога и работ:
     белый текст на оранжевом в проекте больше не используется. */
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}

.catalog-card--live .catalog-card__actions .catalog-card__more:hover{
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

/* Сравнение вернулось в карточку каталога 16.08.2026 по решению владельца.
   Кнопка повторяет избранное: те же 54×54 и то же активное состояние. */
.catalog-card--live .catalog-card__actions .catalog-card__favorite,
.catalog-card--live .catalog-card__actions .catalog-card__compare{
  display: grid;
  width: 54px;
  min-height: 54px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border-interactive);
  background: transparent;
  color: var(--color-heading);
  font-size: 24px;
  place-items: center;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.catalog-card--live .catalog-card__actions .catalog-card__favorite:hover,
.catalog-card--live .catalog-card__actions .catalog-card__favorite.is-active,
.catalog-card--live .catalog-card__actions .catalog-card__compare:hover,
.catalog-card--live .catalog-card__actions .catalog-card__compare.is-active{
  border-color: var(--color-accent);
  background: rgba(215, 101, 45, .12);
  color: var(--color-accent);
}

/* Описание ограничено двумя строками,как в макете: без этого высота карточек
   в ряду расходилась на 40–60 px и сетка «прыгала». */
.catalog-card--live p{
  display: -webkit-box;
  min-height: 52px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.catalog-card--live .catalog-card__body{ min-height: 0; }
.catalog-card--live{ min-height: 0; }

/* Палитра — одна группа радиокнопок с блуждающим tabindex. Размер цели
   поднят до 36 px: WCAG 2.2 SC 2.5.8 требует 24,но пальцем в 31 px
   попадают не все. */
.catalog-swatch{ width: 36px; height: 36px; }
.catalog-swatch:focus-visible{ z-index: 2; }

/* --- Мобильные фильтры ----------------------------------------------------- */

.catalog-filter-toggle,.filter-panel__close,.filter-panel__apply,.filter-panel__backdrop{ display: none; }

/* --- Профиль подбора ------------------------------------------------------- */

.catalog-profile{
  display: flex;
  margin: 0 0 16px;
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--color-border-interactive);
  border-left: 3px solid var(--color-accent);
  background: var(--color-panel);
  flex-wrap: wrap;
}

.catalog-profile[hidden]{ display: none; }
.catalog-profile strong{ color: var(--color-heading); font-size: 18px; }
.catalog-profile p{ margin-top: 6px; color: var(--color-muted); font-size: 15px; line-height: 1.5; }
.catalog-profile__actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.catalog-profile__actions .button{ min-height: 48px; padding-inline: 22px; font-size: 15px; }
.catalog-profile__hide{
  min-height: 48px;
  padding-inline: 16px;
  border: 1px solid var(--color-border-interactive);
  color: var(--color-muted);
  font-size: 15px;
}

.catalog-profile__hide:hover{ border-color: var(--color-accent); color: var(--color-heading); }

/* --- Читабельность: остатки мельче 15 px и цели нажатия меньше 44 px -------- */

.catalog-source-strip button i{ font-size: 15px; }
.filter-panel--live .filter-panel__title button{ min-height: 44px; padding-inline: 10px; font-size: 15px; }
.catalog-active-filters button{ min-height: 44px; padding: 9px 13px; font-size: 15px; }
.catalog-filter-options small{ font-size: 14px; }
.catalog-price-inputs label{ font-size: 15px; }
.catalog-card__variant-count,.catalog-card--live .catalog-card__badge,.catalog-card__discount{ font-size: 14px; }
.catalog-card--live .availability-line{ font-size: 15px; }
.product-page .breadcrumbs{ font-size: 15px; }
.product-source small{ font-size: 15px; }
.related-product small{ font-size: 14px; }
.product-sticky-bar__info span{ font-size: 15px; }

@media (max-width: 900px) {
  /* Панель фильтров выезжает поверх страницы. Раньше на телефоне до первой
     двери нужно было пройти около 2600 px и 72 элемента управления. */
  .catalog-filter-toggle{
    display: inline-flex;
    min-height: 48px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--color-border-interactive);
    background: var(--color-panel);
    color: var(--color-heading);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
  }

  .catalog-filter-toggle b{
    display: grid;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-size: 14px;
    place-items: center;
  }

  .catalog-filter-toggle b[hidden]{ display: none; }

  .filter-panel__backdrop{
    position: fixed;
    z-index: 190;
    display: block;
    inset: 0;
    background: rgba(4, 4, 3, .72);
  }

  .filter-panel__backdrop[hidden]{ display: none; }

  .filter-panel--live{
    position: fixed;
    z-index: 200;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(360px, 92vw);
    /* Явная высота обязательна: базовое `.filter-panel{align-self:start}` из
       styles.css оставляет панель по высоте содержимого даже при top/bottom,
       и кнопка «Показать N моделей» уезжает за пределы экрана.
       100dvh — для мобильных браузеров со скрывающейся адресной строкой. */
    height: 100vh;
    height: 100dvh;
    max-height: none;
    align-self: stretch;
    flex-direction: column;
    border-right: 1px solid var(--color-border-interactive);
    background: var(--color-surface);
    box-shadow: var(--shadow-deep);
    /* Прокручивается только середина: заголовок и кнопка применения всегда
       на экране, поэтому «Показать N моделей» не нужно искать прокруткой. */
    overflow: hidden;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .25s var(--ease), visibility .25s step-end;
  }

  .filter-panel__scroll{
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 8px;
  }

  .filter-panel--live.is-open{
    transform: translateX(0);
    visibility: visible;
    transition: transform .25s var(--ease), visibility 0s;
  }

  .filter-panel--live .filter-panel__title{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
  }

  .filter-panel__close{
    display: grid;
    width: 48px;
    height: 48px;
    margin-left: auto;
    border: 1px solid var(--color-border-interactive);
    color: var(--color-heading);
    font-size: 26px;
    line-height: 1;
    place-items: center;
  }

  .filter-panel__apply{
    display: block;
    flex: 0 0 auto;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border-interactive);
    background: var(--color-surface);
  }

  .filter-panel__apply .button{
    width: 100%;
    min-height: 56px;
    font-size: 16px;
  }

  .filter-panel__apply .button[disabled]{ opacity: .55; }

  body.filters-open{ overflow: hidden; }

  .catalog-toolbar--live{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .catalog-toolbar--live > span{ flex: 1 0 100%; order: 3; }

  /* Полоса поставщиков и восемь сценариев занимали на телефоне 963 px из 2424
     до первой двери. Обе группы полностью сохранены,но выложены в одну
     прокручиваемую строку: содержимое то же,высота меньше втрое. */
  .catalog-source-strip,.catalog-scenarios__list{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Кольцо фокуса не должно срезаться прокруткой. */
    padding-bottom: 6px;
    scroll-padding: 8px;
  }

  .catalog-source-strip > button,.catalog-scenarios__list > button{
    flex: 0 0 auto;
    min-width: 190px;
    scroll-snap-align: start;
  }

  .catalog-source-strip > button{ min-height: 76px; padding: 14px 16px; }
  .catalog-scenarios__list > button{ min-width: 168px; min-height: 56px; }

  .catalog-scenarios{ display: grid; gap: 14px; }
}

@media (max-width: 640px) {
  .catalog-card--live .catalog-card__actions{ flex-wrap: nowrap; }
  .catalog-profile{ align-items: flex-start; flex-direction: column; }
  .catalog-profile__actions{ width: 100%; }
  .catalog-profile__actions .button{ flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-panel--live{ transition: none; }
}

/* ==========================================================================
   Смена гарнитур — 16.08.2026. Межстрочные интервалы заголовков каталога.
   Правила лежат здесь,а не в styles.css: catalog.css подключается позже и
   при равной специфичности перебивает его.
   ========================================================================== */

.catalog-card--live h3,.related-product strong{ line-height: var(--lh-display-card); }

:is(.specs__heading h2,.catalog-scenarios h2,.category-offer h2,.product-not-found h1){ line-height: var(--lh-display); }

/* ==========================================================================
   Каталог на телефоне — 17.08.2026. Только ≤720 px.

   Было: одна колонка, карточка 362×719, из них 350 px одна фотография; на
   экран попадала 1,17 карточки, вся страница 21 029 px. Две колонки дают
   вчетверо больше товара на экран при том же наборе данных в карточке.

   Весь блок целиком лежит в @media (max-width: 720px): десктоп и планшет
   не затрагиваются.
   ========================================================================== */

@media (max-width: 720px) {
  .catalog-grid--live { grid-template-columns: 1fr 1fr; gap: 8px; }

  .catalog-card--live { min-height: 0; }
  .catalog-card--live .catalog-card__image { height: 196px; }
  .catalog-card--live .catalog-card__body { min-height: 0; padding: 10px; }

  .catalog-card__eyebrow { min-height: 14px; font-size: 9px; }
  .catalog-card--live h3 { margin-top: 6px; font-size: 15px; line-height: 1.2; }

  /* Описание в 177 px не читается, и оно есть на странице модели. */
  .catalog-card--live p { display: none; }

  .catalog-swatches { min-height: 26px; gap: 5px; }
  .catalog-swatch { width: 20px; height: 20px; padding: 2px; }
  .catalog-swatches__more { font-size: 9px; }

  .catalog-card--live .catalog-card__price { min-height: 0; margin: 8px 0 10px; font-size: 14px; }
  .catalog-card--live .catalog-card__price s { font-size: 11px; }

  /* Ловушка: «Цена по запросу» — это не .catalog-card__price, а отдельная
     кнопка с кеглем 23 px. Без неё надпись встаёт в две строки и съедает всю
     экономию от двух колонок. */
  .catalog-card__request { font-size: 14px; }

  .catalog-card__badge { padding: 3px 6px; font-size: 9px; }

  /* Счётчик исполнений переезжает вправо вверх: снизу он налезал на бейдж
     поставщика, когда карточка сузилась. */
  .catalog-card__variant-count { right: 8px; top: 8px; bottom: auto; padding: 4px 7px; font-size: 9px; }

  /* Три действия в 177 px в строку не помещаются: на «Подробнее» осталось бы
     49 px. Раскладываем в два ряда, цели нажатия держим 44 px. */
  .catalog-card--live .catalog-card__actions { flex-wrap: wrap; gap: 8px; }
  .catalog-card--live .catalog-card__actions .catalog-card__more {
    flex: 1 0 100%;
    min-height: 44px;
    padding: 0 8px;
    font-size: 13px;
  }
  .catalog-card--live .catalog-card__actions .catalog-card__favorite,
  .catalog-card--live .catalog-card__actions .catalog-card__compare {
    width: calc(50% - 4px);
    min-height: 44px;
    flex: 0 0 auto;
    font-size: 20px;
  }

  /* ---- Путь до первой двери: было 1811 px ---- */

  /* Вводный абзац под вкладками — 109 px до того, как показан хоть один товар. */
  .catalog-heading-copy { display: none !important; }

  /* Карточка счётчиков: то же число дублируется ниже в «Найдено 477 моделей». */
  .catalog-heading-stat {
    grid-template-columns: auto auto auto auto;
    min-width: 0;
    padding: 10px 12px;
    gap: 4px 8px;
    align-items: baseline;
  }
  .catalog-heading-stat strong { font-size: 18px; }
  .catalog-heading-stat span { font-size: 11px; }

  /* Быстрый подбор остаётся — он полезен, но заголовок и пояснение занимают
     место раньше времени. Сами сценарии сворачиваются в ленту с прокруткой. */
  .catalog-scenarios > div:first-child { display: none; }
  .catalog-scenarios { display: block; padding: 0; }
  .catalog-scenarios__list {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .catalog-scenarios__list::-webkit-scrollbar { display: none; }
  .catalog-scenarios__list > button { min-width: auto; min-height: 44px; padding: 0 14px; white-space: nowrap; }

  /* Блок «Не хотите разбираться в сотнях моделей?» уходит под сетку каталога.
     Только порядком показа: разметку не трогаем, блоки — соседи внутри main. */
  .catalog-page { display: flex; flex-direction: column; }
  .catalog-layout--live { order: 1; }
  .category-offer { order: 2; }
}