/* +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; }
.perk {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  min-height:296px; padding:28px 26px 30px;
  background:#fff; border:1px solid var(--fl-line,#e6ecf4);
  border-radius:22px; box-shadow:0 14px 34px rgba(12,34,68,.06);
  text-align:left;
}
html[data-theme="dark"] .perk { background:var(--card-bg) !important; border-color:var(--dl-line,#26394e) !important; }

.perk .ico {
  width:66px; height:66px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:26px; background:var(--pk-tint);
}
.perk .ico .svg-ico { width:30px; height:30px; color:var(--pk); }

.perk > div { display:block; }
.perk b { display:block; margin:0; font-size:17px; line-height:1.3; color:var(--fl-ink,#12243b); }
.perk b::after { content:""; display:block; width:34px; height:3px; border-radius:2px; background:var(--pk); margin:14px 0 16px; }
.perk span:not(.ico) { display:block; max-width:230px; color:var(--fl-muted,#6b7c93); font-size:14px; line-height:1.6; }

.perk::after {
  position:absolute; right:22px; bottom:12px;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:46px; line-height:1;
  letter-spacing:-.03em; color:var(--pk); opacity:.13;
}
.perk::before {
  content:""; position:absolute; left:0; bottom:0;
  width:76px; height:76px; border-radius:0 76px 0 0;
  background:var(--pk-tint); opacity:.7; pointer-events:none;
}
.perk:hover .ico { transform:none; }

.perk:nth-child(1) { --pk:#2f6bff; --pk-tint:rgba(47,107,255,.12); }
.perk:nth-child(2) { --pk:#23c16b; --pk-tint:rgba(35,193,107,.14); }
.perk:nth-child(3) { --pk:#f5a623; --pk-tint:rgba(245,166,35,.16); }
.perk:nth-child(4) { --pk:#7c5cff; --pk-tint:rgba(124,92,255,.13); }
.perk:nth-child(1)::after { content:"01"; }
.perk:nth-child(2)::after { content:"02"; }
.perk:nth-child(3)::after { content:"03"; }
.perk:nth-child(4)::after { content:"04"; }

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

/* 4–5. Restore the self-running 3D hits ring and remove tutorial chrome. */
#carousel3d {
  margin:28px auto 42px;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(520px 260px at 50% 48%,rgba(23,105,224,.12),transparent 72%),
    linear-gradient(145deg,#edf3fa,#f8fafc);
}

#carousel3d > .wrap { padding:38px 36px 28px; }
#carousel3d .section-sub { margin-bottom:2px; }
#carousel3d .c3d-stage {
  display:flex;
  height:350px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
  cursor:default;
}

#carousel3d .c3d-ring {
  position:relative;
  display:block;
  width:196px;
  height:286px;
  padding:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  touch-action:pan-y;
  cursor:grab;
  transition:none !important;
}

#carousel3d .c3d-ring.dragging { cursor:grabbing; }
#carousel3d .c3d-item {
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  padding:12px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px rgba(7,26,49,.13);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

#carousel3d .c3d-item img { height:156px; border-radius:14px; }
#carousel3d .c3d-hint { display:none !important; }

/* 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. Mobile categories become a designed navigation surface, not a list. */
.cats-drawer {
  left:0;
  width:min(92vw,420px);
  max-width:none;
  border-right:1px solid rgba(255,255,255,.7);
  border-radius:0 24px 24px 0;
  background:#f6f9fd;
  box-shadow:24px 0 80px rgba(7,26,49,.24);
  transform:translateX(-105%);
  transition:transform 320ms cubic-bezier(.16,1,.3,1);
}

.cats-drawer.on { left:0; transform:translateX(0); }
.cats-drawer-head {
  min-height:82px;
  padding:16px 18px 14px 22px;
  border-color:#dce5ef;
  background:rgba(246,249,253,.92);
  backdrop-filter:blur(16px);
}

.cats-drawer-head h3 { font-size:18px; letter-spacing:-.04em; }
.cats-drawer-head .x {
  width:44px;
  height:44px;
  border:1px solid #dbe4ee;
  border-radius:14px;
  color:#52667e;
  background:#fff;
}

.cats-drawer-body {
  display:grid;
  align-content:start;
  gap:7px;
  padding:12px 12px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(23,105,224,.25) transparent;
}

.cats-drawer-body a {
  position:relative;
  min-height:56px;
  padding:11px 42px 11px 14px;
  gap:11px;
  border:1px solid #e0e7ef;
  border-radius:14px;
  color:#1c3049;
  background:#fff;
  font-size:14px;
  line-height:1.3;
  box-shadow:0 5px 16px rgba(7,26,49,.035);
}

.cats-drawer-body a::after {
  content:"›";
  position:absolute;
  right:15px;
  top:50%;
  color:#90a0b2;
  font-size:22px;
  font-weight:500;
  transform:translateY(-52%);
}

.cats-drawer-body a:first-child {
  min-height:68px;
  border-color:#123b6e;
  color:#fff;
  background:linear-gradient(135deg,#071a31,#123b6e);
  box-shadow:0 12px 28px rgba(7,26,49,.16);
}

.cats-drawer-body a:first-child::after { color:rgba(255,255,255,.7); }
.cats-drawer-body a:hover,
.cats-drawer-body a:active {
  border-color:rgba(23,105,224,.32);
  color:#0f4fae;
  background:#eef5ff;
  transform:translateX(2px);
}

.cats-drawer-body a:first-child:hover,
.cats-drawer-body a:first-child:active { color:#fff; background:linear-gradient(135deg,#0b2747,#1769e0); }

@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; }

  #carousel3d { width:calc(100% - 24px); margin:20px auto 30px; border-radius:22px; }
  #carousel3d > .wrap { padding:28px 16px 20px; }
  #carousel3d .c3d-stage { height:310px; }
  #carousel3d .c3d-ring { width:170px; height:250px; }
  #carousel3d .c3d-item { border-radius:17px; }
  #carousel3d .c3d-item img { height:128px; }

  #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; }
}

@media (prefers-reduced-motion:reduce) {
  .cats-drawer { transition-duration:.01ms; }
}


/* ── Карточка товара: заголовок выше, бренд с иконкой, скидка у цены (п.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; }