/* HotSki — templates 7 «Магазины» (magaziny.html) and 8 «О магазине, отзывы, опт» (o-magazine.html).
   Skeleton: coolzone about (B1 head · B2 manifest panel + photo · B3 narrow text) and home B8 (photo + panel).
   Colour: red panels + white, ink text; motion lives in js/about.js (transform/opacity only). */

.ab { padding-top: var(--hdr); }

/* ---------- page head: crumbs, H1 44 centred in 820, a quiet line under it (coolzone about B1) ---------- */
.ab-head { padding-top: 26px; padding-bottom: 118px; text-align: center; }
.ab-head--short { padding-bottom: 54px; }
.ab-head__crumbs { text-align: left; }
.ab-head__title { max-width: 820px; margin: 108px auto 0; text-wrap: balance; }
.ab-head--short .ab-head__title { margin-top: 62px; }
.ab-head__meta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 34px; }
.ab-head__meta .dot { width: 6px; height: 6px; }
.ab-head__lead { max-width: 560px; margin: 26px auto 0; }
.ab-head__meta a, .can__list a { position: relative; }
.ab-head__meta a::after, .can__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--tr);
}
.ab-head__meta a:hover::after, .ab-head__meta a:focus-visible::after,
.can__list a:hover::after, .can__list a:focus-visible::after { transform: scaleX(1); }

/* ---------- B2 manifest: red panel 340 + photo 4:3; the brand word sits between the photo and its clipped copy ---------- */
.mf { display: grid; grid-template-columns: 340px 1fr; align-items: stretch; }
.mf__panel { position: relative; overflow: hidden; background: var(--red); color: var(--white); padding: 24px 20px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.mf__panel > :not(.mf__track) { position: relative; z-index: 1; }
/* R18 S-turn as a track of dots (R04, home B4): white on the red panel, between the slogan and the paragraph */
.mf__track { position: absolute; left: 0; right: 0; top: 30%; height: 38%; width: 100%; overflow: visible; pointer-events: none; }
.mf__track circle { fill: var(--white); }
.mf__foot { display: grid; gap: 28px; justify-items: start; }
.mf__photo { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 880px; overflow: hidden; background: #3f86d8; container-type: inline-size; }
/* the stack is always the 4:3 picture (clip-path is in its percent); on screens wider than 1500 the box crops its bottom */
.mf__stack { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; transform-origin: 46% 42%; }
.mf__stack > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.mf__blur { filter: blur(18px) saturate(1.1); transform: scale(1.08); opacity: 0; visibility: hidden; pointer-events: none; }
.mf__wordwrap { position: absolute; left: 0; right: 0; top: 0; height: 31.5%; pointer-events: none; will-change: transform; }
.mf__word {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; white-space: nowrap;
  font-size: 25.5cqw; font-weight: 900; line-height: 0.74; letter-spacing: -0.012em; color: var(--white);
  text-shadow: 0 0.04em 0.18em rgba(20, 50, 110, 0.18);
}
.mf__word .ch { display: inline-block; will-change: transform; }

/* ---------- B3 client text: narrow centred column 660 (coolzone about B3) ---------- */
.ab-text { position: relative; padding-top: 112px; padding-bottom: 96px; }
.ab-text__label { position: absolute; left: var(--pad); top: 116px; display: flex; align-items: center; gap: 12px; }
.ab-text__col { max-width: 660px; margin: 0 auto; display: grid; gap: 16px; }

/* brands: one line of the client's marks, a slow ticker between two rules */
.brands { position: relative; overflow: hidden; margin: 0 var(--pad); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.brands__track { display: flex; width: max-content; will-change: transform; }
.brands__line {
  flex: 0 0 auto; margin: 0; padding: 26px 0 12px; white-space: nowrap;
  font-family: var(--f-disp); font-weight: 700; font-size: 100px; line-height: 0.8; text-transform: uppercase; letter-spacing: 0;
}
.brands__b { display: inline-block; transition: color 0.3s; }
.brands__b:hover { color: var(--red); }
.brands__dot, .brands__line.is-split::after {
  content: ""; display: inline-block; width: 0.13em; height: 0.13em; border-radius: 50%; background: var(--red);
  margin: 0 0.3em; vertical-align: 0.2em;
}

/* ---------- B4 reviews: index of 16 names with dots | the chosen review large ---------- */
.rw { padding-top: 116px; padding-bottom: 104px; scroll-margin-top: var(--hdr); }
.rw__head { margin-bottom: 30px; }
.rw__aside { display: flex; gap: 32px; padding-bottom: 6px; }
.rw__body { display: grid; grid-template-columns: var(--col) 1fr; gap: 0 var(--gap); border-top: 1px solid var(--ink); }
.rw__index { margin: 0; padding: 0; list-style: none; }
.rw__name {
  position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; width: 100%;
  padding: 12px 0 11px; text-align: left; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 1px solid #e2e2e2; transition: color 0.25s;
}
.rw__name:hover, .rw__name:focus-visible { color: var(--red); outline: none; }
.rw__dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: background-color 0.3s, box-shadow 0.3s, transform 0.45s var(--ease-out); }
.rw__name.is-on { color: var(--ink); }
.rw__name.is-on .rw__dot { background: var(--red); box-shadow: inset 0 0 0 1px var(--red); transform: scale(1.35); }
.rw__num { font-size: 10px; letter-spacing: 0.04em; color: var(--gray); }
.rw__fill { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.rw__side { display: flex; flex-direction: column; justify-content: space-between; padding: 30px 0 0 calc(var(--col) * 0.22); min-width: 0; }
.rw__stage { position: relative; display: grid; }
.rw__item { grid-area: 1 / 1; margin: 0; display: grid; align-content: start; gap: 34px; }
.js .rw__item { opacity: 0; visibility: hidden; }
.js .rw__item.is-on, .js .rw__item.is-out { visibility: visible; }
.js .rw__item.is-on { opacity: 1; }
.rw__text { margin: 0; max-width: 940px; font-size: 34px; line-height: 1.24; font-weight: 300; letter-spacing: -0.012em; text-wrap: pretty; }
.rw__who { display: flex; align-items: center; gap: 12px; }
.rw__nav { margin-top: 44px; }
.rw__nav .car__progress { overflow: visible; } /* base clips the 3 px runner to the 1 px line — local fix, see report */
.rw__nav .car__progress i { transition: transform 0.85s var(--ease-out); }
.rw__count { min-width: 70px; text-align: right; }

/* ---------- B5 wholesale: the client's paragraph large | red panel with the phone ---------- */
.opt { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 110px; }
.opt__main { border-top: 1px solid var(--ink); padding: 24px 64px 0 0; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.opt__label { display: flex; align-items: center; gap: 12px; }
.opt__text { max-width: 640px; font-size: 30px; line-height: 1.24; font-weight: 300; letter-spacing: -0.01em; text-wrap: pretty; }
.opt__panel { background: var(--red); color: var(--white); padding: 24px 22px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 430px; }
.opt__tel, .call__tel { display: block; width: max-content; max-width: 100%; white-space: nowrap; line-height: 0.84; letter-spacing: 0; transition: color 0.3s; }
.opt__tel { font-size: min(100px, 7vw); }
.opt__tel:hover { color: var(--ink); }
.opt__foot { display: grid; gap: 18px; justify-items: start; }

/* ---------- magaziny B1: two shops side by side — photo + red panel each (coolzone home B8) ---------- */
.shp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.shp__col { display: grid; grid-template-rows: auto 1fr; scroll-margin-top: calc(var(--hdr) + 16px); }
.shp__photo { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: var(--snow); }
.shp__photo img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; max-width: none; object-fit: cover; object-position: 50% 22%; opacity: 0; transition: opacity 0.85s ease-in-out; will-change: transform; }
.shp__photo img.is-on { opacity: 1; }
.shp__shutter { position: absolute; inset: 0; z-index: 3; background: var(--red); transform: scaleY(0); transform-origin: 50% 0; pointer-events: none; }
.shp__nav { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.shp__nav .arr { border-color: transparent; background: rgba(255, 255, 255, 0.92); }
.shp__dots { display: inline-flex; gap: 7px; }
.shp__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); transition: background-color 0.3s, transform 0.4s var(--ease-out); }
.shp__dots i.is-on { background: var(--red); transform: scale(1.25); }
.shp__panel { background: var(--red); color: var(--white); padding: 24px 22px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 292px; }
.shp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.shp__sign { padding-top: 12px; }
.shp__sign .dot { background: var(--white); }
.shp__info { display: grid; gap: 14px; justify-items: start; max-width: 470px; }
.shp__info .blink { margin-top: 12px; }
.shp__tel { transition: opacity var(--tr); }
.shp__tel:hover { opacity: 0.78; }

/* magaziny B2: what the shop gives — the client's line large, two facts as links */
.can { padding-top: 124px; padding-bottom: 116px; text-align: center; }
.can__text { max-width: 940px; margin: 0 auto; text-wrap: balance; }
.can__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 52px; margin-top: 42px; }
.can__list li { display: inline-flex; align-items: center; gap: 12px; }

/* magaziny B3: call — the client's sentence and the phone | red panel with the call-back form (#zvonok) */
.call { display: grid; grid-template-columns: 2fr 1fr; padding-bottom: 110px; }
.call__main { border-top: 1px solid var(--ink); padding: 24px 64px 0 0; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.call__text { max-width: 900px; }
.call__tel-wrap { display: grid; gap: 16px; justify-items: start; }
.call__tel { font-size: min(132px, 9.2vw); }
.call__tel:hover { color: var(--red); }
.call__panel { background: var(--red); color: var(--white); padding: 24px 22px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 470px; scroll-margin-top: calc(var(--hdr) + 16px); }
.call__form { display: grid; gap: 26px; }
.call__field .field__label { color: rgba(255, 255, 255, 0.78); transition: color 0.25s; }
.call__field input { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.8); transition: border-color 0.25s, box-shadow 0.25s; }
.call__field input:focus { border-bottom-color: var(--white); box-shadow: 0 1px 0 var(--white); }
.call__field input:-webkit-autofill { -webkit-text-fill-color: var(--white); transition: background-color 99999s; }
.call__field.is-err .field__label { color: var(--ink); }
.call__field.is-err input { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.call__btn { justify-self: start; margin-top: 10px; }
.call__done { display: grid; gap: 22px; align-content: end; justify-items: start; }
.call__mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.call__mark .dot { width: 12px; height: 12px; background: var(--white); }
.call__done[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .brands__track, .mf__wordwrap, .shp__photo img { will-change: auto; }
}

/* sky line of img/scene/manifest.webp, measured 26.09: a smooth colour model of the clear sky (2-D polynomial fitted on
   rows 0..285 of 1536), per column the first pixel from the top that leaves it by > 30 in RGB sum (> 70 over the heads,
   x 760..1150, to skip their soft glow), notches <= 7 px closed, Douglas-Peucker 1.6 px -> 262 points, percent of the box.
   Everything below the line — peaks and the couple — is drawn again ABOVE the brand word (R24: the word stands behind them).
   Another photo = another line: the polygon is valid only for this file. */
.mf__fg { clip-path: /*SKY*/polygon(0% 100%, 0% 28.19%, 0.00% 28.19%, 0.59% 28.52%, 0.68% 28.91%, 1.07% 28.39%, 1.86% 27.86%, 2.25% 28.06%, 2.74% 27.54%, 3.03% 27.54%, 3.52% 27.99%, 3.91% 27.86%, 4.01% 27.28%, 4.10% 27.41%, 4.30% 27.15%, 4.89% 27.28%, 5.67% 26.69%, 5.96% 26.17%, 6.16% 26.17%, 7.03% 25.39%, 7.52% 25.52%, 8.40% 26.30%, 9.28% 26.56%, 9.97% 25.65%, 10.36% 25.59%, 10.94% 24.87%, 11.53% 24.80%, 12.41% 23.96%, 13.19% 24.48%, 14.17% 23.96%, 15.14% 24.87%, 15.44% 25.46%, 15.53% 25.20%, 15.63% 25.72%, 15.93% 25.91%, 16.32% 25.78%, 16.71% 26.17%, 16.90% 25.85%, 17.59% 25.98%, 17.68% 26.43%, 17.88% 26.30%, 18.17% 26.43%, 18.66% 27.21%, 18.86% 27.21%, 19.25% 27.67%, 19.64% 27.80%, 19.93% 28.19%, 20.32% 28.26%, 20.52% 28.71%, 21.10% 29.17%, 21.30% 28.97%, 21.79% 29.10%, 23.06% 29.69%, 23.55% 30.08%, 23.64% 29.88%, 23.94% 29.82%, 24.33% 30.27%, 25.60% 30.21%, 26.48% 30.66%, 26.97% 30.66%, 27.06% 30.99%, 28.24% 30.27%, 28.82% 30.27%, 28.92% 29.95%, 29.12% 29.82%, 29.41% 29.75%, 29.51% 30.01%, 29.80% 30.01%, 30.09% 29.56%, 30.68% 29.43%, 30.97% 28.91%, 31.36% 28.71%, 31.75% 28.12%, 31.95% 28.12%, 32.14% 27.86%, 32.63% 27.86%, 33.90% 28.65%, 34.68% 28.65%, 35.76% 29.23%, 36.44% 29.17%, 36.64% 28.97%, 36.74% 29.10%, 37.03% 28.78%, 37.52% 29.23%, 37.62% 29.88%, 37.71% 29.43%, 37.81% 29.75%, 38.01% 29.23%, 38.40% 29.49%, 40.06% 29.10%, 40.35% 28.91%, 40.55% 28.19%, 40.64% 26.82%, 40.84% 26.56%, 41.04% 22.01%, 41.13% 22.33%, 41.33% 22.27%, 41.52% 22.07%, 41.62% 20.90%, 41.91% 20.70%, 42.01% 20.90%, 42.40% 21.03%, 42.79% 19.86%, 43.19% 20.12%, 43.28% 19.79%, 43.87% 20.31%, 44.16% 19.99%, 44.55% 20.05%, 44.65% 20.38%, 45.43% 20.83%, 45.82% 20.96%, 45.92% 20.70%, 46.02% 20.96%, 46.31% 21.16%, 46.70% 21.22%, 46.80% 21.09%, 46.90% 21.48%, 47.39% 21.68%, 48.36% 22.53%, 49.34% 24.02%, 49.63% 25.07%, 49.93% 27.67%, 50.12% 27.47%, 50.22% 26.30%, 50.32% 26.37%, 50.51% 25.85%, 50.81% 25.52%, 51.20% 25.59%, 51.29% 26.50%, 51.39% 26.43%, 51.49% 25.46%, 51.69% 25.26%, 51.88% 26.17%, 51.98% 26.17%, 52.08% 24.87%, 52.17% 26.04%, 52.37% 25.98%, 52.47% 25.26%, 52.56% 25.91%, 52.66% 25.91%, 52.96% 25.20%, 53.05% 25.72%, 53.64% 26.04%, 53.93% 25.78%, 54.52% 26.37%, 55.01% 26.63%, 55.20% 26.56%, 55.59% 27.08%, 55.89% 27.08%, 56.08% 27.60%, 56.18% 27.08%, 56.38% 27.21%, 56.47% 27.08%, 56.67% 27.67%, 56.86% 27.54%, 56.96% 27.73%, 57.35% 27.60%, 57.45% 27.34%, 58.13% 28.26%, 58.33% 28.19%, 58.72% 28.39%, 59.40% 28.32%, 59.50% 28.12%, 59.70% 28.12%, 60.48% 28.58%, 60.77% 28.97%, 60.97% 28.78%, 61.85% 29.43%, 62.24% 29.43%, 62.63% 29.88%, 63.21% 29.95%, 63.41% 29.69%, 63.80% 29.88%, 64.39% 29.75%, 64.97% 30.01%, 65.95% 30.08%, 66.05% 30.34%, 66.63% 30.21%, 67.42% 29.36%, 67.71% 29.17%, 67.90% 29.23%, 68.00% 28.97%, 68.30% 28.78%, 68.49% 28.91%, 69.27% 28.52%, 69.37% 28.91%, 70.15% 28.26%, 70.25% 27.99%, 70.64% 27.99%, 70.74% 28.26%, 70.93% 28.19%, 71.03% 28.32%, 71.23% 27.99%, 71.42% 28.12%, 71.52% 27.99%, 71.62% 28.45%, 72.01% 28.19%, 72.79% 28.39%, 72.89% 28.26%, 73.57% 28.26%, 73.96% 27.99%, 74.06% 28.39%, 75.13% 28.12%, 75.23% 28.52%, 75.62% 28.12%, 75.82% 28.26%, 75.92% 27.86%, 76.21% 28.12%, 76.31% 27.60%, 77.67% 27.47%, 77.77% 27.73%, 78.65% 27.47%, 78.75% 27.15%, 79.14% 27.34%, 79.34% 27.21%, 79.43% 27.60%, 80.31% 27.73%, 80.41% 28.12%, 80.51% 27.73%, 80.61% 27.73%, 80.70% 27.99%, 81.19% 28.26%, 81.78% 29.10%, 82.07% 28.78%, 82.36% 28.78%, 82.46% 28.52%, 84.81% 28.58%, 85.00% 28.39%, 85.39% 28.52%, 85.69% 28.12%, 85.78% 28.39%, 85.98% 28.39%, 86.08% 28.78%, 87.35% 27.80%, 87.64% 27.80%, 88.42% 28.26%, 88.72% 28.65%, 89.11% 28.65%, 90.38% 29.43%, 91.35% 29.30%, 91.55% 29.43%, 91.65% 29.75%, 92.13% 29.95%, 92.23% 29.69%, 92.92% 29.95%, 93.21% 29.56%, 93.50% 29.82%, 93.89% 29.82%, 93.99% 30.08%, 94.38% 29.95%, 95.26% 29.95%, 95.46% 30.08%, 95.75% 29.82%, 96.04% 29.82%, 96.14% 30.08%, 96.53% 30.08%, 96.82% 30.34%, 97.22% 30.40%, 97.31% 30.86%, 98.29% 30.01%, 98.58% 30.14%, 98.78% 29.69%, 98.97% 29.82%, 100.00% 29.82%, 100% 29.82%, 100% 100%); }