/* +7 Telecom Design Lab — focused review fixes v4. */

/* Release the identity transform after view entry so viewport-fixed sheets remain viewport-fixed. */
.dl-view-enter { animation-fill-mode:none !important; }
#catalogPage.dl-view-enter { animation:none !important; transform:none !important; opacity:1 !important; }

/* 1–2. Filters: compact control surface with clear grouping and real actions. */
.catalog-page .cgw-flex { gap:20px; }
.catalog-page #catFilters {
  width:260px;
  flex-basis:260px;
  padding:0 16px 16px;
  overflow:hidden auto;
  border:1px solid #d9e3ee;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 40px rgba(7,26,49,.075);
  scrollbar-width:thin;
  scrollbar-color:rgba(23,105,224,.28) transparent;
}

.catalog-page #catFilters h3 {
  position:sticky;
  top:0;
  z-index:2;
  min-height:66px;
  margin:0 -16px;
  padding:0 16px;
  border-bottom:1px solid #e3eaf2;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  font-size:16px;
  letter-spacing:-.025em;
}

.catalog-page #catFilters .fx-reset {
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  color:#1769e0;
  background:#eef5ff;
  font-size:11.5px;
}

.catalog-page #catFilters .fx-reset:hover { background:#dfecff; }
.catalog-page .fx-group { padding:12px 0 9px; border-color:#e3eaf2; }
.catalog-page .fx-group > button.fx-head {
  min-height:38px;
  padding:0 2px;
  align-items:center;
  color:#12243b;
  font-size:13px;
}

.catalog-page .fx-head .arr {
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  border-radius:9px;
  color:#60748b;
  background:#f2f6fa;
  font-size:10px;
}

.catalog-page .fx-body { gap:3px; padding:7px 0 2px; }
.catalog-page .fx-price {
  display:grid;
  grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);
  gap:7px;
  margin:0;
}

.catalog-page .fx-price input {
  width:100%;
  min-width:0;
  min-height:40px;
  padding:7px 10px;
  border:1px solid #d6e0eb;
  border-radius:11px;
  background:#fff;
  font-variant-numeric:tabular-nums;
}

.catalog-page .fx-price > span { align-self:center; color:#8493a6; text-align:center; }
.catalog-page .fx-price #fxPgo {
  grid-column:1 / -1;
  min-height:38px;
  margin-top:2px;
  padding:0 12px;
  border-radius:11px;
  color:#fff;
  background:#071a31;
  text-align:center;
  font-size:12px;
  font-weight:800;
}

.catalog-page .fx-price #fxPgo:hover { background:#0f4fae; }
.catalog-page .fx-range { height:26px; margin:8px 3px 2px; }
.catalog-page .fx-range .track,
.catalog-page .fx-range .fill { top:10px; height:6px; border-radius:99px; }
.catalog-page .fx-range .track { background:#e5ecf4; }
.catalog-page .fx-range .fill { background:linear-gradient(90deg,#1769e0,#54a0ff); }
.catalog-page .fx-range input[type=range] { top:1px; height:25px; }
.catalog-page .fx-range input[type=range]::-webkit-slider-thumb {
  width:18px;
  height:18px;
  border:3px solid #fff;
  background:#1769e0;
  box-shadow:0 0 0 1px rgba(23,105,224,.28),0 4px 10px rgba(7,26,49,.18);
}

.catalog-page #catFilters .fx-val {
  min-height:38px;
  padding:6px 8px;
  gap:9px;
  border-radius:10px;
  color:#4e6178;
  font-size:12.5px;
}

.catalog-page #catFilters .fx-val:hover { color:#12243b; background:#f4f8fc; }
.catalog-page #catFilters .fx-val input {
  width:17px;
  height:17px;
  accent-color:#1769e0;
}

.catalog-page #catFilters .fx-val .n {
  min-width:24px;
  padding:2px 7px;
  border-radius:999px;
  color:#667991;
  background:#eef3f8;
  text-align:center;
  font-size:10.5px;
}

.catalog-page .fx-more { min-height:34px; padding:5px 8px; border-radius:9px; }
.catalog-page .fx-more:hover { background:#eef5ff; }

/* 3. Promotional service cards: shorter, denser and more intentional. */
.promos { padding-top:22px; }
.promo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.promo {
  min-height:136px;
  padding:22px 62px 22px 24px;
  justify-content:flex-start;
  border-radius:22px;
  box-shadow:0 10px 28px rgba(7,26,49,.05);
}

.promo::before {
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:18px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  opacity:.1;
}

.promo::after {
  width:120px;
  height:120px;
  right:-56px;
  top:-54px;
  opacity:.32;
}

.promo b { margin:0 0 8px; font-size:15px; line-height:1.35; }
.promo span:not(.parr) { max-width:280px; font-size:12.5px; line-height:1.45; }
.promo .parr {
  right:20px;
  bottom:18px;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid currentColor;
  border-radius:12px;
  opacity:.45;
  font-size:17px;
}

/* 3b. Perk cards — «карточки преимуществ» по макету:
   белая карточка, цветной кружок под иконку, акцентная чёрточка под
   заголовком, крупный полупрозрачный номер и уголок-заливка снизу-слева.
   Цвет у каждой карточки свой (переменные --pk / --pk-tint). */
.perks .row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }












@media (max-width:1000px) { .perks .row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .perks .row { grid-template-columns:1fr; }  }

/* 4–5. Restore the self-running 3D hits ring and remove tutorial chrome. */








/* 6. Remove the stacked section padding + component margin around the CTA. */
#homeView > section:has(.cta-strip) { padding:20px 0 24px; }
.cta-strip {
  min-height:126px;
  margin:0 auto;
  padding:26px 34px;
  border-radius:24px;
}

/* 7–8. Выезжающее меню категорий переехало в public/category-drawer.css
   (11.08.2026). Здесь оставлены только правила обычной корзины и промо. */

@media (max-width:960px) and (min-width:681px) {
  .promo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .promo:first-child { grid-column:1 / -1; }
}

@media (max-width:900px) {
  .catalog-page #catFilters {
    inset:auto 0 0;
    width:auto;
    height:min(88dvh,760px);
    max-height:none;
    padding:0 18px 96px;
    border:0;
    border-radius:24px 24px 0 0;
    box-shadow:0 -999px 0 999px rgba(4,17,31,.48),0 -20px 60px rgba(7,26,49,.22);
  }

  .catalog-page #catFilters h3 { min-height:70px; margin:0 -18px; padding:0 58px 0 18px; }
  #catFilters .fx-close {
    top:13px;
    right:14px;
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border:1px solid #dbe4ee;
    border-radius:13px;
    background:#f3f7fb;
  }
}

@media (max-width:680px) {
  .promos { padding-top:14px; }
  .promo-grid { grid-template-columns:1fr; gap:10px; }
  .promo,
  .promo:first-child {
    grid-column:auto;
    min-height:118px;
    padding:19px 58px 19px 20px;
    border-radius:18px;
  }

  .promo::before { left:20px; right:20px; bottom:14px; }
  .promo .parr { right:16px; bottom:14px; width:32px; height:32px; }

  


  #homeView > section:has(.cta-strip) { padding:12px 0 16px; }
  .cta-strip {
    min-height:0;
    margin:0 auto;
    padding:24px 20px;
    gap:18px;
    border-radius:20px;
  }

  .cta-actions { width:100%; }
  .cta-actions > * { flex:1 1 100%; text-align:center; }
}

/* ── Карточка товара: заголовок выше, бренд с иконкой, скидка у цены (п.3–5) ── */
.pp-head { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pp-brand { display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--fl-ink,#12243b); }
.pp-brand-ico { width:28px; height:28px; border-radius:8px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; font-weight:800; font-size:14px; line-height:1; }
.pp-brand-ico img { width:100%; height:100%; object-fit:contain; }
.pp-brand-ico.mono { background:hsl(var(--bh,210), 68%, 93%); color:hsl(var(--bh,210), 55%, 40%); }
.pp-head h1 { margin:2px 0 0; }
.pp-price-row .pp-price-badge { align-self:center; margin-bottom:0; }

/* Фон страницы задаётся ТОЛЬКО в public/page-bg.v1.css.
   Здесь он раньше тоже задавался и все эти годы был мёртвым: page-bg.v1.css
   подключён в index.html позже и перебивает всё правилом `background: none
   !important`. Правило убрано, чтобы следующий человек не правил фон здесь,
   не видел изменений и не искал причину полдня (аудит, пункт 43). */
#homeView { background:transparent; }
.perks { background:transparent !important; }