/* HotSki — info templates: 6 «Доставка и оплата» (coolzone payment) and 9 «404» (coolzone page404).
   Skeleton coolzone: white sheet, crumbs, H1 44 caps centred, anchor menu left + narrow column, 1 px lines.
   Ours on top: red dot-numbers (brand sign), ice glass R13 for the free-delivery threshold with 3D ice flakes
   behind it (gl.js [data-snowflakes]), Alumni Sans numbers, a red sale panel cut by the page edge.
   Motion lives in js/info.js: transform/opacity only; HS.STATIC shows final states. */

/* ======================================================================
   6 · ДОСТАВКА И ОПЛАТА
   ====================================================================== */
.dv { --line: #e4e4e4; --menu: 200px; }

/* ---------- B1 · title + promise (cz payment B1 · R13 ice) ---------- */
.dv-top {
  position: relative; overflow: hidden; text-align: center;
  padding: calc(var(--hdr) + 30px) var(--pad) 78px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 54%, #ffffff 100%);
}
/* gl.js lays its 9 flakes out in world units with a fixed vertical FOV, so a flake's pixel offset from the centre
   depends only on the canvas height (px = X · (H/2) / (tan 17.5° · distance)), not on the page width.
   H 700 · top 80: the two far flakes (±5.9 / 6.2 at z −6) sit on the plate's left and right edges (±340 px),
   big ones frame the title from the sides, the red crystal falls below the section (y ≈ 660) — red is carried by the number */
.dv-top__gl { position: absolute; left: 0; top: 80px; width: 100%; height: 700px; pointer-events: none; }
/* flakes sink into white snow at the bottom edge instead of being cut by it */
.dv-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 88%);
}
.dv-top__crumbs { position: relative; z-index: 1; }
.dv-top__title { position: relative; z-index: 1; margin-top: 72px; }
.dv-top__title .ln { overflow: hidden; padding-bottom: 0.06em; }

.dv-promise {
  position: relative; z-index: 1; width: calc(2 * var(--col) + var(--gap)); max-width: 100%; margin: 42px auto 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 32px;
  padding: 24px 28px 26px; text-align: left; overflow: hidden; will-change: transform;
}
.dv-promise.ice {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.64), rgba(232, 240, 248, 0.3));
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(160, 196, 228, 0.5), 0 30px 60px rgba(60, 100, 140, 0.14);
}
.dv-promise .dots { position: absolute; left: 28px; top: 24px; }
.dv-promise__num {
  margin-top: 30px; font-family: var(--f-disp); font-weight: 800; font-size: 132px; line-height: 0.8;
  letter-spacing: -0.01em; color: var(--red); white-space: nowrap; text-transform: uppercase;
}
.dv-promise__num small { font-size: 0.32em; letter-spacing: 0.03em; margin-left: 8px; color: var(--ink); }
.dv-promise__num .ch { display: inline-block; }
.dv-promise__text { position: relative; padding: 0 0 4px 22px; font-size: 15px; line-height: 1.45; }
.dv-promise__text::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 6px; width: 1px; background: rgba(21, 21, 21, 0.18); }
/* a glint that crosses the ice (transform only): ice-blue halo round a white core — pure white would vanish on
   the frosted white glass */
.dv-promise__glint {
  position: absolute; top: -40%; bottom: -40%; left: 0; width: 130px; pointer-events: none;
  background: linear-gradient(100deg, rgba(178, 208, 238, 0) 0%, rgba(178, 208, 238, 0.42) 36%, rgba(255, 255, 255, 0.96) 50%,
    rgba(178, 208, 238, 0.42) 64%, rgba(178, 208, 238, 0) 100%);
  transform: translateX(-160px) rotate(12deg); opacity: 0;
}

/* ---------- B2 · anchor menu left + content right (cz payment B2) ---------- */
/* the text column is centred like coolzone's (370–1070 on 1440); the menu (200 px, as coolzone) keeps the left
   gutter, min 290 px so it never touches the column on narrower screens */
.dv-body {
  display: grid; grid-template-columns: minmax(290px, 1fr) minmax(0, 820px) minmax(0, 1fr);
  padding: 0 var(--pad) 120px;
}
.dv-menu {
  grid-column: 1; align-self: start; position: sticky; top: calc(var(--hdr) + 34px);
  width: var(--menu); padding-top: 26px;
}
.dv-menu__rule, .dv-menu__prog { position: absolute; left: 0; right: 0; top: 0; height: 1px; transform-origin: 0 50%; }
.dv-menu__rule { background: var(--ink); }
.dv-menu__prog { top: -1px; height: 3px; background: var(--red); transform: scaleX(0); }
.dv-menu__list { position: relative; display: grid; }
.dv-menu__list a {
  position: relative; display: block; padding: 9px 0 9px 20px; font-size: 13px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray); transition: color var(--tr);
}
.dv-menu__list a:hover, .dv-menu__list a:focus-visible, .dv-menu__list a.is-on { color: var(--ink); }
.dv-menu__list a:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
.dv-menu__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--red); pointer-events: none; }

.dv-main { grid-column: 2 / 4; min-width: 0; }
.dv-sec { position: relative; max-width: 820px; padding-top: 26px; scroll-margin-top: calc(var(--hdr) + 24px); }
.dv-sec + .dv-sec { margin-top: 104px; }
.dv-sec__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.dv-sec__title { margin: 7px 0 44px; }
.dv-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
/* reading marker: the brand dot appears in the gutter beside the row under the cursor (transform only) */
.dv-tbl__row:not(.dv-tbl__head)::before, .dv-pay__row::before {
  content: ""; position: absolute; left: -22px; top: 29px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); transform: scale(0); transition: transform 0.3s var(--ease-out);
}
.dv-pay__row::before { top: 36px; }
.dv-pay__row:first-child::before { top: 16px; }
.dv-tbl__row:not(.dv-tbl__head):hover::before, .dv-pay__row:hover::before { transform: scale(1); }

/* ---------- B3 · terms table «куда · как · срок · цена» (cz payment B3) ---------- */
.dv-tbl { position: relative; }
.dv-tbl__row {
  position: relative; display: grid; grid-template-columns: 168px 222px 158px minmax(0, 1fr); column-gap: 24px;
  padding: 22px 0 24px; font-size: 15px; line-height: 1.4;
}
.dv-tbl__head { padding: 0 0 16px; font-size: 13px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
.dv-tbl__head .dv-line { background: var(--ink); }
.dv-tbl__where { font-size: 13px; line-height: 1.35; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; padding-top: 2px; }
.dv-tbl__na { color: var(--gray); }
.dv-price { display: grid; gap: 3px; }
.dv-price__v { font-size: 18px; line-height: 1.15; font-weight: 400; }
.dv-price__v.red { font-size: 13px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.dv-price__c { font-size: 12px; line-height: 1.35; color: var(--gray); }
.dv-price__c + .dv-price__v { margin-top: 12px; }

/* ---------- B4 · conditions with red dot-numbers (cz payment B4, our brand dot) ---------- */
.dv-conds { list-style: none; margin: 0; padding: 0; }
.dv-conds li { position: relative; display: grid; grid-template-columns: 94px minmax(0, 640px); padding: 22px 0 24px; }
.dv-conds li:first-child { padding-top: 4px; }
.dv-conds .dots { gap: 5px; padding-top: 7px; align-self: start; }
/* hover: the dot-number runs a small wave. It uses the separate `translate` property, so it never fights the
   GSAP reveal, which writes `transform: scale()` on the same dots */
.dv-conds .dot { width: 7px; height: 7px; transition: translate 0.35s var(--ease-out); }
.dv-conds li:hover .dot { translate: 0 -4px; }
.dv-conds li:hover .dot:nth-child(2) { transition-delay: 0.05s; }
.dv-conds li:hover .dot:nth-child(3) { transition-delay: 0.1s; }
.dv-conds li:hover .dot:nth-child(4) { transition-delay: 0.15s; }
.dv-conds li:hover .dot:nth-child(5) { transition-delay: 0.2s; }
.dv-conds p { font-size: 15px; line-height: 1.45; }
.ilink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--tr); }
.ilink:hover, .ilink:focus-visible { color: var(--red); }

/* ---------- B5 · payment: three ways (cz payment B5) ---------- */
.dv-pay { list-style: none; margin: 0; padding: 0; }
.dv-pay__row { position: relative; display: grid; grid-template-columns: 280px minmax(0, 516px); column-gap: 24px; padding: 24px 0 26px; align-items: start; }
.dv-pay__row:first-child { padding-top: 4px; }
.dv-pay__k { display: flex; align-items: center; gap: 16px; font-size: 13px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.dv-pay__ico { flex: 0 0 auto; width: 44px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 5px; position: relative; }
.dv-pay__ico svg { width: 22px; height: 22px; }
.dv-pay__v { font-size: 15px; line-height: 1.45; padding-top: 5px; }
.dv-pay__v .blink { margin-top: 2px; }

/* ---------- B6 · sale + order by phone: red panel cut by the page edge ---------- */
.dv-sec--wide { max-width: none; }
.dv-sale { position: relative; margin-right: calc(-1 * var(--pad)); color: var(--white); overflow: hidden; }
.dv-sale__bg { position: absolute; inset: 0; background: var(--red); transform-origin: 0 50%; }
.dv-sale__wordbox { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.dv-sale__word {
  position: absolute; left: 36px; bottom: -0.2em; white-space: nowrap;
  font-family: var(--f-disp); font-weight: 900; font-size: 300px; line-height: 0.8; letter-spacing: -0.005em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.1);
}
.dv-sale__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 40px;
  min-height: 470px; padding: 30px 40px 40px;
}
.dv-sale__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dv-sale__head h2 { display: flex; align-items: center; gap: 12px; }
.dv-sale__head .dot { background: var(--white); }
.dv-sale__warn { grid-column: 1 / -1; align-self: start; max-width: 860px; margin-top: 56px; font-size: 44px; line-height: 1.02; text-wrap: balance; }
.dv-sale__rule { grid-column: 1 / -1; align-self: end; height: 1px; margin-top: 60px; background: rgba(255, 255, 255, 0.55); transform-origin: 0 50%; }
.dv-sale__order { align-self: start; padding-top: 22px; font-size: 15px; line-height: 1.45; max-width: 420px; }
.dv-sale__order a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dv-sale__act { align-self: start; padding-top: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 32px; flex-wrap: wrap; }
.dv-sale__tel { font-size: 30px; line-height: 1.1; font-weight: 300; white-space: nowrap; position: relative; }
.dv-sale__tel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }
.dv-sale__tel:hover::after, .dv-sale__tel:focus-visible::after { transform: scaleX(1); }

/* ======================================================================
   9 · 404
   ====================================================================== */
.nf-stage {
  position: relative; overflow: hidden; display: grid; justify-items: center; align-content: start; text-align: center;
  min-height: 836px; padding: calc(var(--hdr) + 92px) var(--pad) 96px;
  background: radial-gradient(60% 55% at 50% 38%, #eef3f8 0%, rgba(238, 243, 248, 0) 100%);
}
/* «4 [skier] 4»: Alumni Sans digits, the cut-out skier instead of the zero (cz page404 · PRIEMY §6) */
.nf-num {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--f-disp); font-weight: 900; font-size: 410px; line-height: 0.8; letter-spacing: 0; color: var(--ink);
  height: 0.8em; user-select: none;
}
.nf-d { position: relative; z-index: 2; display: block; overflow: hidden; padding: 0 0.01em; }
.nf-d > span { display: block; }
/* the zero = the brand mark (red disc cut by the slope line, img/logo/mark.svg) sized like the «O» of the logo:
   diameter ≈ 1.02 × figure height (0.594 em), gap to the digits ≈ 0.1 × figure height; centred on the figures */
.nf-zero { position: relative; z-index: 1; display: block; width: 0.725em; height: 0.8em; }
.nf-mark { position: absolute; left: 50%; top: 0.101em; width: 0.605em; height: 0.605em; margin-left: -0.3025em; max-width: none; }
/* .nf-sk is a point on the centre of the zero; the image is offset so the skier's body (≈46 % · 42 % of the cut-out) sits on it */
.nf-sk { position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.nf-sk__f { position: absolute; width: 1.5em; left: -0.69em; top: -0.35em; transform-origin: 46% 42%; will-change: transform; }
/* static shadow (never animated) lifts the skier off the red disc; the float moves the promoted parent layer */
.nf-skier { display: block; width: 100%; height: auto; max-width: none; transform-origin: 46% 42%; filter: drop-shadow(0 24px 22px rgba(21, 21, 21, 0.2)); }
.nf-shadow {
  position: absolute; z-index: 1; left: 50%; bottom: -0.1em; width: 0.9em; height: 0.07em; margin-left: -0.45em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21, 21, 21, 0.2), rgba(21, 21, 21, 0)); opacity: 0.75;
}
.nf-copy { display: grid; justify-items: center; margin-top: 64px; }
.nf-title { font-size: 20px; }
.nf-search {
  display: flex; align-items: center; gap: 12px; width: 460px; max-width: 100%; margin-top: 40px;
  border-bottom: 1px solid var(--ink); padding-bottom: 10px; transition: border-color var(--tr);
}
.nf-search:focus-within { border-bottom-color: var(--red); }
.nf-search > svg { flex: 0 0 auto; width: 16px; height: 16px; }
.nf-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; padding: 4px 0; }
.nf-search input::placeholder { color: var(--gray); }
.nf-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nf-search .arr { flex: 0 0 auto; }
.nf-act { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 40px; }

@media (max-width: 900px) {
  .dv-body { grid-template-columns: minmax(0, 1fr); }
  .dv-menu { display: none; }
  .dv-main { grid-column: 1; }
  .dv-tbl__row { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .dv-conds li, .dv-pay__row { grid-template-columns: 70px minmax(0, 1fr); }
  .dv-sale__in { grid-template-columns: minmax(0, 1fr); }
  .dv-promise { grid-template-columns: minmax(0, 1fr); }
  .nf-num { font-size: 42vw; }
}