/* «Путник — Восточные дюны» (/putnik1/): страница модели в подаче «Путник Спорт», песочная гамма.
   Классы sport-*, hero-section, gallery-scroller и т. п. берутся из style.css, здесь — цвета, свои блоки (.dunes-*)
   и правки раскладки. Порядок — как блоки на странице. Телефон: ≤576 px, планшет: ≤820 px. */

.dunes {
  --sand: #cfb089;
  --sand-l: #e6d2b3;
  --sand-grad: linear-gradient(to bottom, #e3c79f, #2b2116);
  --gap: clamp(.5rem, 2vw, 2rem);     /* зазор между карточками и колонками */
  overflow-x: clip;
  /* первый экран сразу под меню: убираем нижнее поле общей шапки (.main-header) */
  margin-top: calc(-1 * clamp(1.25rem, 0.6818181818rem + 2.8409090909vw, 2.8125rem));
}

/* ---------- заголовки разделов ---------- */
/* шрифт — как у классического «Путника» (Bahnschrift, жирный), а не Siegra от «Путник Спорт» */
.dunes .siegra,
.dunes .sport-title,
.dunes .putnic-sport__loader {
  font-family: "Bahnschrift", sans-serif;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.01em;
}
/* сплошные буквы: у вариативного Bahnschrift обводка рисует внутренние контуры */
.dunes .sport-title__gradient {
  background: var(--sand-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
}
.dunes .sport-title__outline { color: var(--sand-l); -webkit-text-stroke: 0; }
/* «Сталь» стоит на бежевом фото — заливка светлее, без тёмного низа, и мягкая тень от фона */
.dunes .sport-compass .sport-title__gradient {
  background: linear-gradient(to bottom, #fff7ea, #ecd6b0 55%, #d4b483);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-filter: drop-shadow(0 .04em .14em rgba(0, 0, 0, .45));
          filter: drop-shadow(0 .04em .14em rgba(0, 0, 0, .45));
}
.dunes .sport-title__line { padding-top: .05em; }
.dunes .sport-title__line::after { background: var(--sand); }
/* линия после второй строки — из белых букв уходит в песок и растворяется */
.dunes .sport-title__line_right::after {
  width: clamp(8rem, 42vw, 42rem);
  background: linear-gradient(90deg, #fff 0%, var(--sand-l) 35%, var(--sand) 65%, rgba(207, 176, 137, 0) 100%);
}

/* ---------- кнопки ---------- */
/* сдержанная классическая: ровная песочная заливка */
.dunes .button_dunes,
.dunes-buy__btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  height: 3.25rem; padding: 0 2.5rem; border: 0; border-radius: 4px;
  background: var(--sand); color: #16110b;
  font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .25s ease;
}
@media (any-hover: hover) {
  .dunes .button_dunes:hover,
  .dunes-buy__btn:hover { background: #dcc29e; color: #16110b; }
}

/* ---------- первый экран ---------- */
.dunes .hero-section { padding-bottom: 0; }
.dunes .hero-section .container {
  isolation: isolate;
  background-image: url("../img/dunes/hero-bg.webp");
  background-position: center 30%;
  background-size: 100% auto;
  padding-bottom: clamp(2rem, 4vw, 4rem);
}
/* живые дюны (js/dunes-bg.js) поверх статичного фона; снизу короткий переход в следующий блок */
.dunes .hero-section .container.dunes-live { background-image: none; }
.dunes-hero-canvas {
  position: absolute; top: 0; left: 50%; z-index: -1;
  width: 100vw; margin-left: -50vw; height: 100%;   /* на всю ширину окна, а не только контейнера */
  opacity: 0; transition: opacity 1.6s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0, black 90%, transparent 100%);
}
.dunes-hero-canvas.is-ready { opacity: 1; }
.dunes-storm { background: transparent; }   /* песчаная буря (dunes-bg.js) — прозрачный холст поверх дюн */

/* часы по центру целиком; сами идущие часы — css/dunes-watch.css, js/dunes-watch.js */
.dunes .hero-section .watch-bulder { max-width: 40%; }

/* слева от часов — тираж, справа — часовой пояс; подписи на одной линии, ниже центра циферблата */
.dunes-edition,
.dunes-zone { position: absolute; top: 55%; transform: none; display: flex; flex-direction: column; width: 11rem; }
.dunes-edition { right: calc(100% + clamp(1.5rem, 5vw, 5rem)); align-items: flex-end; gap: .35rem; text-align: right; }
.dunes-zone { left: calc(100% + clamp(1.5rem, 5vw, 5rem)); gap: .6rem; }
.dunes-zone__label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand);
}
.dunes-zone__label::after { content: ""; flex: 1; height: 1px; background: var(--sand); opacity: .4; }
.dunes-zone__label_left { width: 100%; flex-direction: row-reverse; margin-bottom: .25rem; }
.dunes-edition__num { font-family: "Bahnschrift", sans-serif; font-weight: 700; font-size: 2.5rem; line-height: 1; color: #fff; letter-spacing: .02em; }
.dunes-edition__text { font-size: .75rem; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-l); }
.dunes .dunes-zone__toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dunes .dunes-zone__city { flex: 1; font-size: 1rem; letter-spacing: .02em; color: #fff; text-align: center; white-space: nowrap; }
.dunes .arrow-button.dunes-zone__btn {
  width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
  border: 1px solid rgba(207, 176, 137, .45); color: var(--sand-l); background: none; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.dunes .arrow-button.dunes-zone__btn::before { width: .4rem; height: .4rem; border-width: 0 0 1.5px 1.5px; left: 57%; }
@media (any-hover: hover) {
  .dunes .arrow-button.dunes-zone__btn:hover { border-color: var(--sand); color: #fff; }
}

/* под часами — центрированный текст на мягкой подложке */
.dunes .hero-section__info {
  position: relative; bottom: auto; width: auto; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin: 0 auto; text-align: center;
}
.dunes .hero-section__info::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -18% -18%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .35) 55%, transparent 75%);
  pointer-events: none;
}
.dunes .hero-section__descr { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.dunes .hero-section__tite.siegra {
  font-size: clamp(38px, 6.6vw, 104px); line-height: .95; font-weight: 700; text-transform: uppercase;
  margin: 0 0 .8rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.dunes .hero-section__subtitle {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .9em;
  font-size: clamp(14px, 1.45vw, 21px); letter-spacing: .1em; line-height: 1.4; color: var(--sand-l);
}
.dunes-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sand); flex-shrink: 0; }
.dunes .hero-section__actions {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem); margin-top: clamp(1.5rem, 2.6vw, 2.5rem);
}
.dunes .hero-section__actions .button_dunes { width: auto; min-width: 15rem; }
/* часы заходят в надпись «ПУТНИК» до середины букв, текст — на ремешок */
@media only screen and (min-width: 821px) {
  .dunes .hero-section__watch { margin-top: -21%; }
  .dunes .hero-section__info { margin-top: -12%; }
}

/* ---------- вступление и крупный план ---------- */
.dunes .hero-section + .sport-section-space { position: relative; z-index: 1; padding-top: clamp(1.5rem, 3vw, 3rem); padding-bottom: 0; }
/* верх кадра уходит под текст вступления, низ (ремешок) растворяется до карточек */
.dunes-big {
  max-width: 1440px; margin: clamp(-13rem, -12vw, -2rem) auto 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
}
.dunes-big img { display: block; width: 100%; height: auto; }
.dunes .dunes-big + .sport-section-space { position: relative; z-index: 1; padding-top: 0; margin-top: clamp(-4rem, -4vw, -.5rem); }

/* ---------- карточки: высокий кадр, подпись на кадре, под ним — текст ---------- */
.dunes-cards { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); }
.dunes-card { width: calc(50% - var(--gap) / 2); max-width: 560px; }
.dunes-card__media { position: relative; margin: 0; overflow: hidden; background: #111; }
.dunes-card__media picture { display: block; }
.dunes-card__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) { .dunes-card:hover .dunes-card__media img { transform: scale(1.03); } }
.dunes-card__text { padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 2.4vw, 2rem) 0; }
.dunes-card__text p + p { margin-top: .75rem; }
.dunes .dunes-card .dunes-person__role,
.dunes .dunes-card__text { font-size: 15px; line-height: 1.4; color: #fff; }
/* волна песка при наведении (js/dunes.js): холст поверх кадра, подпись над холстом */
.dunes-card__fx { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 4; pointer-events: none; }
.dunes-card__media .dunes-person { z-index: 2; }
.dunes-card__media.is-fx img { transform: none !important; transition: none; }

/* подпись на кадре: имя/заголовок и строка пояснения, снизу затемнение под текст */
.dunes-person {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: .45rem;
  padding: 4.5rem clamp(1rem, 2.4vw, 2rem) clamp(1rem, 2.4vw, 1.75rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 55%, transparent);
  pointer-events: none;
}
.dunes-person__name {
  font-family: "Bahnschrift", sans-serif; font-weight: 700;
  font-size: clamp(1.125rem, .8rem + 1.1vw, 1.75rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .02em; color: #fff;
}
.dunes-person__role { font-size: clamp(.75rem, .65rem + .35vw, .9375rem); line-height: 1.35; color: var(--sand-l); max-width: 24em; }

/* ---------- карта 11 поясов (SVG из Figma): с востока на запад проходит песочный свет, как рассвет ---------- */
.dunes .sport-time-zones { margin-block: 0; }
.dunes .sport-time-zones img { display: block; width: 100%; height: auto; }
/* карта сразу за карточками: пустой верх SVG подтянут, клики сквозь него проходят */
.dunes .sport-section-space + .sport-time-zones { margin-top: clamp(-7rem, -7vw, -1rem); pointer-events: none; }
.dunes .sport-section-space + .sport-time-zones .sport-time-zones__content { pointer-events: auto; }
.dunes-map { position: relative; width: 100%; aspect-ratio: 1438 / 809; }
.dunes-map__light {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url("../img/dunes/russia.svg?v=2") center / 100% 100% no-repeat;
          mask: url("../img/dunes/russia.svg?v=2") center / 100% 100% no-repeat;
}
.dunes-map__light::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(100deg,
    rgba(230, 210, 179, 0) 36%, rgba(230, 210, 179, .07) 43%, rgba(244, 226, 196, .24) 50%,
    rgba(230, 210, 179, .07) 57%, rgba(230, 210, 179, 0) 64%);
  transform: translate3d(0, 0, 0);
  animation: dunes-map-dawn 10s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes dunes-map-dawn {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-66.667%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .dunes-map__light { display: none; } }

/* ---------- видео Семихатова (сразу под картой: низ SVG пустой) ---------- */
.dunes .sport-time-zones + .sport-section-space { position: relative; padding-top: 0; margin-top: clamp(-4rem, -4vw, -1rem); }
.dunes-videos { display: flex; justify-content: center; gap: var(--gap); }
.dunes-videos__item { position: relative; margin: 0; width: calc(50% - var(--gap) / 2); max-width: 560px; }
.dunes-videos video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #111; }
/* затемнение под подписью — на весь кадр и в одном слое с видео: иначе Safari ставит видео по целому пикселю,
   а плашку по дробному, и по краю плашки виден шов */
.dunes-videos__item { overflow: hidden; isolation: isolate; transform: translateZ(0); }
.dunes-videos__item .dunes-person {
  top: -1px; right: -1px; bottom: -1px; left: -1px; justify-content: flex-end;
  padding-right: calc(clamp(1rem, 2.4vw, 2rem) + 1px); padding-bottom: calc(clamp(1rem, 2.4vw, 1.75rem) + 1px); padding-left: calc(clamp(1rem, 2.4vw, 2rem) + 1px);
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 6rem, rgba(0, 0, 0, 0) 11rem);
}

/* ---------- 3D: как у «Сенеки II» — часы на фоне живой пустыни, вращение, кнопка «Приблизить» ---------- */
.dunes .putnic-sport.dunes-show { background: #000; overflow: hidden; height: min(888px, 61.6667vw); }   /* 1440 × 888 */
.dunes .putnic-sport__loader-bar:before { background: var(--sand); }
.dunes-show__sand {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.6s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, black 12%, black 88%, transparent 100%);
}
.dunes-show__sand.is-ready { opacity: 1; }
.dunes-show .putnic-sport__canvas { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; cursor: grab; }
.dunes-show.is-3d .putnic-sport__canvas { touch-action: none; }
.dunes-show.is-drag .putnic-sport__canvas { cursor: grabbing; }
.dunes-show .putnic-sport__loader { z-index: 3; }
.dunes-show .dunes-show__head {
  position: absolute; top: 0; bottom: auto; left: 0; right: auto; z-index: 2;
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 6vw, 6rem);
  background: none;
}
.dunes-show__ui {
  position: absolute; left: 50%; top: 89.98%; z-index: 2;   /* как у «Сенеки»: 799 из 888 */
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  transition: opacity .6s ease .4s, transform .6s ease .4s;
}
.dunes-show.is-3d .dunes-show__ui { opacity: 1; transform: translate(-50%, 0); }
.dunes-show__zoom {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px 0 14px;
  border: 1px solid var(--sand); border-radius: 50px; background: rgba(20, 15, 10, .7); color: #fff;
  font: 700 12px/1 "Bahnschrift", Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; pointer-events: auto; transition: background-color .3s ease, color .3s ease;
}
.dunes-show__zoom:hover, .dunes-show__zoom:focus-visible { background: var(--sand); color: #000; outline: none; }
.dunes-show__zoom-plus { transition: opacity .2s ease; }
.dunes-show__zoom[aria-pressed="true"] .dunes-show__zoom-plus { opacity: 0; }

/* ---------- амбассадор: три кадра во всю ширину, по очереди сменяются (js/dunes.js) ---------- */
.dunes-amb { padding-block: clamp(2rem, 4vw, 4rem); }
.dunes-amb__band { position: relative; display: flex; gap: 4px; max-width: 1440px; margin: 0 auto; }
.dunes-amb__slot { position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #111; }
/* новый кадр «срезает» старый светящейся песчаной кромкой, старый уходит в сторону и темнеет */
.dunes-amb__slot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.77, 0, .18, 1), filter 1.2s ease;
}
.dunes-amb__slot img.is-in {
  -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); transform: scale(1.22);
  transition: -webkit-clip-path 1.05s cubic-bezier(.77, 0, .18, 1), clip-path 1.05s cubic-bezier(.77, 0, .18, 1), transform 2.2s cubic-bezier(.2, .7, .2, 1);
}
.dunes-amb__slot img.is-in.is-l { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
.dunes-amb__slot img.is-in.is-on { -webkit-clip-path: inset(0); clip-path: inset(0); transform: scale(1); }
.dunes-amb__slot img.is-out { transform: translateX(-14%) scale(1.08); filter: brightness(.35); }
.dunes-amb__slot img.is-out.is-l { transform: translateX(14%) scale(1.08); }
.dunes-amb__edge {
  position: absolute; top: 0; bottom: 0; left: 100%; z-index: 1; width: 3px; opacity: 0; pointer-events: none;
  background: #f3e2c4; box-shadow: 0 0 18px 6px rgba(230, 196, 146, .55), 0 0 60px 18px rgba(207, 176, 137, .25);
}
.dunes-amb__edge.is-go { animation: dunes-amb-edge 1.05s cubic-bezier(.77, 0, .18, 1) forwards; }
.dunes-amb__edge.is-go.is-l { animation-name: dunes-amb-edge-l; }
@keyframes dunes-amb-edge { 0% { left: 100%; opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes dunes-amb-edge-l { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.dunes-amb__caption.dunes-person { z-index: 2; padding-top: 7rem; }

/* ---------- «Сталь и компас» ---------- */
.dunes .sport-compass { padding-bottom: 0; }
.dunes .sport-compass__image {
  margin-top: 0; margin-bottom: -12%; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 80%, transparent 100%);
}
.dunes .sport-compass__image img { display: block; width: 100%; height: auto; }
.dunes .sport-compass .sport-text-block__text-cols { display: block; max-width: none; column-count: 2; }
.dunes .sport-compass .sport-text-block__text-cols p { -webkit-column-break-inside: avoid; break-inside: avoid; }

/* ---------- роза ветров — широкий кадр по сетке пары карточек под ним (ремешок, стекло) ---------- */
.dunes .sport-compass + .dunes-minor { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.dunes-rosecard { width: 100%; max-width: calc(1120px + var(--gap)); margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); }
.dunes-rosecard .dunes-card__media img,
.dunes-rosecard .dunes-card__fx { aspect-ratio: 16 / 9; }
.dunes-rosecard .dunes-card__media img { object-position: 50% 40%; }
.dunes-rosecard__text { display: flex; gap: var(--gap); }
.dunes-rosecard__text p { flex: 1 1 0; min-width: 0; margin: 0; }
.dunes .dunes-rosecard__text p + p { margin-top: 0; }   /* колонки на одной линии */

/* ---------- галерея: кадры листаются прокруткой, смена — волной песка (js/dunes.js) ---------- */
.dunes-gallery .gallery-scroller__image picture { display: block; width: 100%; height: 100%; }
.dunes-gallery.is-fx { -webkit-clip-path: inset(0); clip-path: inset(0); }   /* холст не вылезает на характеристики */
.dunes-gallery__fx { position: sticky; top: 0; z-index: 20; height: 100vh; margin-bottom: -100vh; pointer-events: none; }
.dunes-gallery__fx canvas { display: block; width: 100%; height: 100%; }
.dunes-gallery.is-fx .gallery-scroller__image { filter: none; }
.dunes-gallery.is-fx .gallery-scroller__image::after { display: none; }
.dunes-gallery__m { display: none; }   /* кадр только для телефона: на десктопе его место занимает пара в соседнем кадре */
@media only screen and (max-width: 576px) { .dunes-gallery__m { display: block; } }
@media (hover: none) { .dunes-gallery .gallery-scroller__image { filter: none; } }   /* размытие уходящего кадра на телефоне тормозит прокрутку */

/* ---------- характеристики ---------- */
.dunes .dunes-tech { padding-bottom: 0; }
.dunes .putnik-sport-tech { border-color: #8a6d47; }
.dunes .sport-section-space:has(.putnik-sport-tech)::after { background: #8a6d47; }
.dunes .putnik-sport-tech .tech-table { margin-bottom: 0; }
.dunes .tech-table_green td:first-child { color: var(--sand); }

/* ---------- покупка ---------- */
.dunes-buy {
  background: radial-gradient(ellipse 55% 60% at 30% 50%, #4a3a26 0%, #17110b 60%, #000 100%);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 1rem + 6vw, 6.25rem);
}
.dunes .dunes-buy__title {
  font-family: "Bahnschrift", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 6.6vw, 104px); line-height: .95; letter-spacing: 0;
  text-align: center; color: #fff; margin-bottom: clamp(2rem, 1rem + 4vw, 4rem);
}
.dunes .dunes-buy__title::after {
  content: ""; display: block; width: 3rem; height: 1px;
  margin: clamp(1.25rem, 2vw, 2rem) auto 0; background: var(--sand);
}
.dunes-buy__row { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 7rem); }
.dunes-buy__image { flex: 0 0 auto; width: min(34%, 420px); }
.dunes-buy__image img {
  display: block; width: 100%; height: auto;
  /* ремешок на фото уходит за край кадра — растворяем, а не обрезаем */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* на десктопе — идущие часы первого экрана поменьше (копию ставит js/dunes.js), на телефоне — фото */
.dunes-buy__photo { display: none; }
.dunes-buy__live { width: 82%; margin: 0 auto; }
.dunes-buy__live .pl-live { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.dunes-buy__info { display: flex; flex-direction: column; align-items: flex-start; max-width: 480px; }
.dunes-buy__kicker { color: var(--sand); letter-spacing: .08em; }
.dunes .dunes-buy__name { margin-top: .5rem; font-family: "Bahnschrift", sans-serif; font-weight: 600; font-size: 2rem; line-height: 1.1; text-transform: uppercase; }
.dunes .dunes-buy__price { margin-block: clamp(1rem, .8rem + .9vw, 1.5rem); font-family: "Bahnschrift", sans-serif; font-weight: 300; font-size: clamp(2.5rem, 2rem + 2.3vw, 3.75rem); }
.dunes-buy__props { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; color: #d8d0c4; }
.dunes-buy__props li { display: flex; gap: .5rem; }
.dunes-buy__props li::before { content: "—"; flex-shrink: 0; color: var(--sand); }
.dunes-buy__note { margin-top: 1rem; font-size: .875rem; color: #9c8f7d; }


/* ======================= планшет и телефон (≤820 px) ======================= */
@media only screen and (max-width: 820px) {
  .dunes .hero-section .container {
    background-image: url("../img/dunes/hero-bg-1200.webp");
    background-size: 160% auto;
    background-position: center 15%;
  }
  /* тираж и пояс — в ряд под часами (абсолютно: слои стрелок привязаны к высоте фото) */
  .dunes-edition, .dunes-zone { top: 100%; margin-top: 1.25rem; width: 8rem; }
  .dunes-edition { right: auto; left: -12%; align-items: flex-start; text-align: left; }
  .dunes-zone { left: auto; right: -12%; }
  .dunes-zone__label_left { flex-direction: row; }
  .dunes-edition__num { font-size: 1.75rem; }
  .dunes-edition__text { font-size: .625rem; }
  /* пояс: длинные названия (Екатеринбург, Петропавловск-Камчатский) переносятся на вторую строку, кнопки не уходят за край */
  .dunes-edition { width: 7.5rem; }
  .dunes-zone { width: 10.5rem; }
  .dunes .dunes-zone__toggle { gap: .35rem; }
  .dunes .dunes-zone__city { font-size: .8125rem; line-height: 1.15; white-space: normal; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
  .dunes .arrow-button.dunes-zone__btn { width: 1.625rem; height: 1.625rem; flex-basis: 1.625rem; }
  .dunes .hero-section__info { margin-top: 8.25rem; }
  .dunes .hero-section__actions { flex-direction: column; gap: 1rem; width: 100%; }
  .dunes .hero-section__actions .button_dunes { width: 100%; }

  .dunes .sport-compass__image { margin-bottom: -20%; }
  .dunes .sport-compass .sport-text-block__text-cols { column-count: 1; display: grid; gap: 1rem; }

  .dunes-buy__row { flex-direction: column; text-align: center; }
  .dunes-buy__image { width: min(70%, 360px); }
  .dunes-buy__info, .dunes-buy__props { align-items: center; }
}

/* ======================= телефон (≤767 px — 3D, ≤576 px — остальное) ======================= */
@media only screen and (max-width: 767px) {
  .dunes .putnic-sport.dunes-show { height: 104.865vw; }   /* как у «Сенеки» на телефоне: 370 × 388 */
  .dunes-show__ui { top: 88.4%; }
  .dunes-show__zoom { height: 30px; padding: 0 12px 0 10px; font-size: 10px; }
}

@media only screen and (max-width: 576px) {
  .dunes { --gap: .5rem; }
  /* длинные слова («Путешествие», «Одиннадцать») не вылезают за экран */
  .dunes .sport-text-block__title { font-size: 8.2vw; }
  .dunes .sport-text-block__text-cols,
  .dunes .dunes-card__text { font-size: 15px; line-height: 1.45; }

  /* первый экран: значок Чайкина — маленький, слева под «ПУТНИК», не заходит на ремешок */
  .dunes .product-header__logo-chaykin { width: 17%; top: 68%; left: 4%; }
  .dunes .hero-section .watch-bulder { max-width: 72%; }
  .dunes .hero-section__subtitle { flex-direction: column; }
  .dunes .hero-section__subtitle > span:not(.dunes-dot) { display: block; }
  .dunes .hero-section__subtitle .dunes-dot { display: none; }

  /* крупный план — свой вертикальный кадр, часы во всю ширину экрана */
  .dunes-big { margin-top: -1.5rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 72%, transparent 98%); }
  .dunes .dunes-big + .sport-section-space { margin-top: -3rem; }

  /* подписи: на кадре карточки — как на карточке; у видео — под кадром */
  .dunes-person { position: static; padding: .75rem 0 0; gap: .3rem; background: none; }
  .dunes-videos__item .dunes-person { background: none; }
  .dunes-person__name { font-size: 1.125rem; }
  .dunes-person__role { font-size: .8125rem; }
  .dunes-cards { flex-direction: column; align-items: stretch; gap: 2.5rem; }
  .dunes-card { width: 100%; max-width: none; }
  .dunes-card .dunes-person,
  .dunes-amb .dunes-amb__caption.dunes-person {
    position: absolute; padding: 4.5rem 1rem 1rem; gap: .35rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 55%, transparent);
  }
  .dunes-card .dunes-person__name { font-size: 1.375rem; }
  .dunes .dunes-card .dunes-person__role { font-size: .875rem; }
  .dunes-card__text { padding: 1rem 0 0; }

  /* карта: заголовок начинается у южного края карты, текст целиком, видео ниже текста */
  .dunes .sport-time-zones__content { position: relative; left: auto; top: auto; z-index: 1; margin-top: -12%; }   /* над картой: она позиционирована */
  .dunes .sport-time-zones + .sport-section-space { margin-top: 0; padding-top: 2rem; }

  /* видео — лента с перелистыванием пальцем, второй ролик выглядывает справа */
  .dunes-videos {
    justify-content: flex-start; gap: .5rem;
    margin: 0 -16px; padding: 0 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .dunes-videos::-webkit-scrollbar { display: none; }
  .dunes-videos__item { flex: 0 0 80%; width: auto; max-width: none; scroll-snap-align: start; }

  /* 3D: только заголовок, часы занимают почти весь кадр */
  .dunes-show .dunes-show__head { position: absolute; padding: 1.25rem 1rem; }
  .dunes-show .dunes-show__head .dunes-person__name { font-size: 1rem; }
  .dunes-show .dunes-show__head .dunes-person__role { display: none; }

  /* амбассадор: один кадр во всю ширину */
  .dunes-amb { padding-block: 2.5rem; }
  .dunes-amb__slot:nth-child(n+2) { display: none; }
  .dunes-amb__slot { aspect-ratio: 4 / 5; }

  /* роза ветров на телефоне — такой же высокий кадр, как остальные карточки */
  .dunes .sport-compass + .dunes-minor { padding-top: 2.5rem; }
  .dunes-rosecard { margin-bottom: 2.5rem; }
  .dunes-rosecard .dunes-card__media img,
  .dunes-rosecard .dunes-card__fx { aspect-ratio: 4 / 5; }
  .dunes-rosecard__text { flex-direction: column; gap: .75rem; }

  /* покупка: пункты по центру без тире */
  .dunes-buy__props li { justify-content: center; }
  .dunes-buy__props li::before { content: none; }
  .dunes .dunes-buy__name { font-size: 1.625rem; }
  /* часы лёжа, как на десктопе по высоте: кадр во всю ширину, ремешок растворяется у краёв экрана */
  .dunes-buy__row { gap: 1.25rem; }
  .dunes-buy__image { width: calc(100% + 32px); margin-inline: -16px; }
  .dunes-buy__live { display: none; }
  .dunes-buy__photo { display: block; }
  .dunes-buy__image img {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  }
}