/* HH Porsche Card Slider — flush right, dots below, no shadows, single height source */

/* ==== Card Slider: Header (title/subtitle) ==== */
.CardSlider__root__83f0d{
  --pc-title-max: var(--pc-title-max, 720px);
  --pc-title-gap: clamp(10px, 1.6vw, 18px);
  --pc-title-mb:  clamp(12px, 2.2vw, 24px);
  --pc-title-color: var(--pc-title-color, #1d1d1d);
  --pc-text-color:  var(--pc-text-color,  #1d1d1d);
}

.CardSlider__header{
  padding-right: var(--pc-gutter-right);
  margin-bottom: var(--pc-title-mb);
  max-width: min(90%, 1640px); 
}

.CardSlider__title{
  margin: 0 0 .4em 0;
  color: var(--pc-title-color);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 500;
}

.CardSlider__subtitle{
  max-width: var(--pc-title-max);
  color: var(--pc-text-color);
  opacity: .95;
  line-height: 1.65;
  font-size: clamp(14px, 1.1vw, 18px);
}

@media (max-width: 999.98px){
  .CardSlider__title{ font-size: clamp(22px, 6vw, 30px); }
  .CardSlider__subtitle{ max-width: 92vw; }
}

/* Враппер viewport для позиционирования навигации прямо над треком */
.CardSlider__viewport{
  position: relative;
  padding-left: var(--pc-gutter-left);
  padding-right: var(--pc-gutter-right);
}

/* Когда навигация перемещена — кладём её над viewport справа */
.CardSlider__nav{
  position: absolute;
  right: 0;          /* выравнивание по правому гаттеру */
  top: -48px;        /* сразу над областью слайдера */
  z-index: 5;
  display: flex;
  gap: 14px;
}

/* мобильный зазор чуть меньше */
@media (max-width: 999.98px){
  .CardSlider__nav{ top:-36px; }
}

/* ===== Корень секции и параметры ===== */
.CardSlider__root__83f0d{
  /* высота карточек */
  --pc-h: clamp(var(--pc-h-min,360px), calc(var(--pc-h-vw,36) * 1vw), var(--pc-h-max,600px));

  /* отступ слева оставляем, справа хотим вплотную → компенсируем в .viewport */
  --pc-gutter-left:  clamp(24px,6vw,88px);
  --pc-gutter-right: clamp(24px,5vw,64px);

  /* зона под стрелки сверху, чтобы они не наезжали на изображения */
  --pc-controls-top-pad: 40px;

  padding-top: var(--pc-controls-top-pad);
  padding-left: var(--pc-gutter-left);
  padding-right: var(--pc-gutter-right);
  position: relative;
  margin-inline: auto;
  max-width: 1920px;
}

/* ===== Один источник высоты ===== */
.CardSlider__root__83f0d p-carousel{
  height: var(--pc-h);
  display: grid;
  grid-template-rows: 1fr auto; /* 1) контент, 2) дотсы снизу */
  row-gap: 16px;
}

/* ===== Трек/слайды тянутся на 100% ===== */
p-carousel .viewport,
p-carousel .track,
p-carousel .slide,
.CardSliderItem__root__b2013,
.CardSliderItem__inner__b2013{
  height: 100% !important;
  box-sizing: border-box;
}

/* Вплотную к правому краю: у viewport снимаем правый внутренний отступ секции */
p-carousel .viewport{
  overflow: hidden;
  position: relative;
  /* двигаем контент поверх правого padding секции, визуально — "в край" */
  margin-right: calc(var(--pc-gutter-right, 0px) * -1);
  padding-right: var(--pc-gutter-right, 0px);
}

p-carousel .track{
  display: flex;
  align-items: stretch;
  gap: var(--pc-gap,24px);
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  height: 100%;
}
p-carousel .slide{
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ===== Карточка / изображение ===== */
.CardSliderItem__root__b2013{ display:block; }

.CardSliderItem__inner__b2013{
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: var(--pc-radius,20px);
  background: #000;         /* подложка на время загрузки */
  box-shadow: none;         /* тень убрана */
}

/* потоковая вёрстка без absolute — чтобы размеры считались честно */
.CardSliderItemMedia__root__f55c3{ height: 100%; }
.CardSliderItemMedia__inner__f55c3{ height: 100%; display:block; }
.CardSliderItem__link{ display:block; height:100%; }

.PcomPicture__layout-fit-container__18b61{ position: static; }
.PcomPicture__fit-cover__18b61{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

/* мягкий градиент снизу (без чёрной полосы) */
.CardSliderItem__inner__b2013::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); 
  pointer-events: none;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ===== SVG-иконка (левый нижний угол) ===== */
.CardSliderItem__badge__icon{
  position: absolute; left: 28px; bottom: 26px; z-index: 3;
  background: transparent; padding: 0; pointer-events: none;
}
.CardSliderItem__badge__icon img{
  display: block;
  height: clamp(48px, 12vh, 96px);
  width: auto;
/*  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); */
}

/* ===== Ширины под ~3.5 карточки ===== */
.CardSliderItem__size-large__b2013  { width: clamp(520px, 42vw, 760px); min-width: clamp(520px, 42vw, 760px); }
.CardSliderItem__size-medium__b2013 { width: clamp(360px, 30vw, 560px); min-width: clamp(360px, 30vw, 560px); }
.CardSliderItem__size-small__b2013  { width: clamp(300px, 22vw, 480px); min-width: clamp(300px, 22vw, 480px); }

/* ===== Стрелки и дотсы ===== */
/* стрелки — в правом верхнем углу секции, НЕ на карточках */
p-carousel .controls{
  position: absolute;
  top: -20px;
  right: var(--pc-gutter-right);  /* в белом поле, над каруселью */
  display: flex; gap: 28px;
  z-index: 5; pointer-events: auto;
}
p-carousel .arrow{
  position: relative; width: 36px; height: 28px;
  background: none; border: 0; cursor: pointer;
}
p-carousel .arrow::before{
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: #111; transform: translateY(-50%);
}
p-carousel .arrow::after{
  content: ""; position: absolute; width: 10px; height: 10px;
  border-right: 1px solid #111; border-top: 1px solid #111;
  top: 50%; transform-origin: center;
}
p-carousel .arrow.prev::after{ left: 2px; transform: translateY(-50%) rotate(225deg); border-color: #9aa0a6; }
p-carousel .arrow.next::after{ right: 2px; transform: translateY(-50%) rotate(45deg); }
p-carousel .arrow[disabled]{ opacity: .35; pointer-events: none; }

/* дотсы СНИЗУ, вне картинок */
p-carousel .dots{
  position: static;                 /* больше не absolute */
  display: flex; gap: 10px;
  justify-content: center;
  align-items: center;
  height: 12px;  
  background: #fff;    
}
p-carousel .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: #6f6f6f; opacity: .9;
  transition: width .25s ease, background .2s;
}
p-carousel .dot.active{ width: 26px; background: #111; }

/* ===== Мобайл ===== */
@media (max-width: 1000px){
  p-carousel .track{ gap: calc(var(--pc-gap,24px)/2); }
  .CardSliderItem__size-large__b2013  { width: 88vw; min-width: 88vw; }
  .CardSliderItem__size-medium__b2013 { width: 72vw; min-width: 72vw; }
  .CardSliderItem__size-small__b2013  { width: 62vw; min-width: 62vw; }
  p-carousel .controls{ right: var(--pc-gutter-right); }
}

/* --- Drag / Swipe UX --- */
p-carousel .viewport{
  /* даём системе вертикальный скролл страницы, а горизонталь берём на себя */
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
}
p-carousel .viewport.is-dragging{
  cursor: grabbing;
}
p-carousel .slide,
p-carousel .slide *{
  -webkit-user-drag: none;
}

/* на iOS/Safari иногда помогает убрать выделение при резком свайпе */
p-carousel .track{
  -webkit-tap-highlight-color: transparent;
}



/* === HH Card Slider — единые стрелки управления (scope: только этот модуль) === */
/* ВСТАВЬ ниже текущих стилей плагина, старые правила про .arrow можно не удалять. */

section[data-module-name="Card-Slider"] p-carousel .controls{
  position:absolute;
  top:110px;
  right: var(--pc-gutter-right, 24px);
  display:flex;
  gap:24px;
  z-index:5;
  pointer-events:auto;
}

/* Хит-область кнопки, цвет берём единый из переменной */
section[data-module-name="Card-Slider"] p-carousel .arrow{
  --pc-arrow-color: #111;         /* поменяй здесь, если нужен другой цвет */
  --pc-arrow-thickness: 1px;
  --pc-arrow-head: 10px;
  --pc-arrow-pad: 8px;

  position:relative;
  inline-size: 44px;              /* крупнее зона клика */
  block-size: 36px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color: var(--pc-arrow-color);
}

/* СБРОС разнобоя цветов из прежних правил */
section[data-module-name="Card-Slider"] p-carousel .arrow::before,
section[data-module-name="Card-Slider"] p-carousel .arrow::after{
  content:"";
  position:absolute;
}
section[data-module-name="Card-Slider"] p-carousel .arrow.prev::after,
section[data-module-name="Card-Slider"] p-carousel .arrow.next::after{
  border-color: currentColor !important;
}

/* Стрелка рисуется из двух частей, и обе — currentColor */
/* «Хвост» (горизонтальная линия) */
section[data-module-name="Card-Slider"] p-carousel .arrow::before{
  left: var(--pc-arrow-pad);
  right: var(--pc-arrow-pad);
  top: 50%;
  height: var(--pc-arrow-thickness);
  background: currentColor !important;
  transform: translateY(-50%);
  border-radius: 999px;
}

/* «Головка» (уголок) */
section[data-module-name="Card-Slider"] p-carousel .arrow::after{
  top: 50%;
  inline-size: var(--pc-arrow-head);
  block-size: var(--pc-arrow-head);
  border-top:    var(--pc-arrow-thickness) solid currentColor !important;
  border-right:  var(--pc-arrow-thickness) solid currentColor !important;
  transform-origin: 50% 50%;
}

/* Направления */
section[data-module-name="Card-Slider"] p-carousel .arrow.next::after{
  right: var(--pc-arrow-pad);
  transform: translateY(-50%) rotate(45deg);
}
section[data-module-name="Card-Slider"] p-carousel .arrow.prev::after{
  left: var(--pc-arrow-pad);
  transform: translateY(-50%) rotate(225deg);
}

/* Состояния */
section[data-module-name="Card-Slider"] p-carousel .arrow[disabled]{
  opacity:.35;
  cursor: default;
  pointer-events:none;
}
section[data-module-name="Card-Slider"] p-carousel .arrow:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
section[data-module-name="Card-Slider"] p-carousel .arrow:not([disabled]):hover{
  opacity: .85; /* лёгкий фидбек без смены цвета */
}


.CardSliderItem__inner__b2013::after{ pointer-events: none; }
.CardSliderItem__badge__icon{ pointer-events: none; }
.CardSliderItem__link{ position: relative; z-index: 1; }

/* во время драга — никакого затемнения 
p-carousel .viewport.is-dragging .CardSliderItem__inner__b2013::after{
  opacity: 0 !important; /* или display:none */
}

/* на всякий случай: выключить актив-затемнение от :active/filters */
p-carousel .viewport.is-dragging .CardSliderItem__inner__b2013,
p-carousel .viewport.is-dragging .CardSliderItem__inner__b2013 img,
p-carousel .viewport.is-dragging .PcomPicture__fit-cover__18b61{
  filter: none !important;
  opacity: 1 !important;
}

/* iOS tap highlight на ссылке внутри карточки */
.CardSliderItem__link{
  -webkit-tap-highlight-color: transparent;
}
.CardSliderItem__link:active{
  opacity: 1 !important;
  filter: none !important;
}

p-carousel .viewport{ touch-action: pan-y pinch-zoom; }
/* чтобы анти-копи обработчики на IMG не перехватывали клик */
.CardSliderItem__link img{
  pointer-events: none;
}
.CardSliderItem__inner__b2013::after{ pointer-events: none; }
.CardSliderItem__badge__icon{ pointer-events: none; }
.CardSliderItem__link{ position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; }






/* Hover-scale только на десктопах */
@media (hover:hover) and (pointer:fine){
  .CardSliderItem__inner__b2013{ overflow: hidden; }
  .CardSliderItem__link .PcomPicture__fit-cover__18b61{
    transition: transform .5s ease;
    will-change: transform;
    transform-origin: center center;
  }
  .CardSliderItem__link:hover .PcomPicture__fit-cover__18b61{
    transform: scale(1.04);
  }
}

/* Во время драга никакого скейла */
p-carousel .viewport.is-dragging .CardSliderItem__link .PcomPicture__fit-cover__18b61{
  transform: none !important;
}

/* На всякий случай — не перекрывать ссылку чем-то сверху */
.CardSliderItem__inner__b2013::after{ pointer-events: none; }
.CardSliderItem__badge__icon{ pointer-events: none; }
.CardSliderItem__link{ position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; }


/* Разрешаем вертикальный скролл странице и убираем лишние горизонтальные жесты браузера */
p-carousel .viewport { touch-action: pan-y; }