/* ====== Обновлённые отступы ====== */
:root{
  --pcdna-header-h: 72px;
  --pcdna-header-pad-x: 56px; /* было 28px, теперь в 2 раза больше */
  --pcdna-header-pad-y: 28px; /* было 14px */
}

@media (max-width: 782px){
  :root{
    --pcdna-header-h: 64px;
    --pcdna-header-pad-x: 20px;
    --pcdna-header-pad-y: 12px;
  }
}

:root{
  /* можно крутить эти цифры под вкус */
  --pcdna-glass-alpha-rest: 0.02;    /* почти невидимо на старте (но включает blur) */
  --pcdna-glass-alpha-solid: 0.60;   /* плотнее после прокрутки */
  --pcdna-glass-blur: 18px;          /* сила блюра */
  --pcdna-glass-sat: 140%;           /* чуть насыщеннее, как у Apple */
}

/* фиксированный хедер */
.pcdna-header{
  position: fixed;
  inset: 0 0 auto 0;
  height: calc(var(--pcdna-header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  z-index: 9999;

  /* ВАЖНО: микроскопическая альфа, чтобы браузер применил backdrop-filter,
     визуально почти прозрачный на чёрном фоне */
  background: rgba(18,18,18,var(--pcdna-glass-alpha-rest));
  -webkit-backdrop-filter: saturate(var(--pcdna-glass-sat)) blur(var(--pcdna-glass-blur));
  backdrop-filter: saturate(var(--pcdna-glass-sat)) blur(var(--pcdna-glass-blur));

  /* никаких линий и теней */
  border: 0;
  box-shadow: none;
}

/* без декоративной дымки и бордеров — ты просил “чистое” стекло */
.pcdna-header::before{ content:none; }

/* после лёгкой прокрутки добавляем плотности */
.pcdna-header.is-solid{
  background: rgba(18,18,18,var(--pcdna-glass-alpha-solid));
}

/* Фолбэк для браузеров без backdrop-filter:
   делаем просто прозрачный фон, чтобы не выглядел “грязно” */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pcdna-header{
    background: transparent;
  }
}

.pcdna-header__safe{ width: 100%; }
.pcdna-header__bar{
  height: var(--pcdna-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pcdna-header-pad-y) var(--pcdna-header-pad-x);
}


/* ====== ЛОГО: разные версии для desktop/mobile ====== */
.pcdna-header__logo img{
  display: block;
  width: 35px;
  height: auto;
}

/* На больших экранах – используем новый логотип */
@media (min-width: 783px){
  .pcdna-header__logo img{
    content: url("https://pc-dna.com/wp-content/uploads/2025/11/Frame-226.svg");
    width: 152px;
  }
}


/* Кнопки справа */
.pcdna-header__actions{
  display: inline-flex;
  align-items: center;
  gap: 14px;                          /* расстояние между иконками */
}

.pcdna-iconbtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;                       /* «клик-зона» */
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Иконки через mask (белые) */
.pcdna-icon{
  width: 28px;
  height: 28px;
  display: inline-block;
  background-color: #fff;             /* цвет иконки */
}

/* корзина */
.pcdna-icon--bag{
  -webkit-mask: url("https://pc-dna.com/wp-content/uploads/2025/11/shopping-bag.svg") no-repeat center / contain;
          mask: url("https://pc-dna.com/wp-content/uploads/2025/11/shopping-bag.svg") no-repeat center / contain;
}

/* бургер */
.pcdna-icon--menu{
  -webkit-mask: url("https://pc-dna.com/wp-content/uploads/2025/11/menu-svgrepo-com-3-1.svg") no-repeat center / contain;
          mask: url("https://pc-dna.com/wp-content/uploads/2025/11/menu-svgrepo-com-3-1.svg") no-repeat center / contain;
}

/* Отступ для контента, чтобы не залезал под фиксированный хедер */
body:not(.admin-bar) .site-main,
body:not(.admin-bar) main#content{
  padding-top: calc(var(--pcdna-header-h) + env(safe-area-inset-top));
}
body.admin-bar .site-main,
body.admin-bar main#content{
  padding-top: calc(var(--pcdna-header-h) + env(safe-area-inset-top) + 32px);
}

/* Страхуемся от горизонтального скролла */
html, body { overflow-x: hidden; }

/* ---- Auto-hide header on scroll ---- */
.pcdna-header{ transition: transform .28s ease; will-change: transform; }
.pcdna-header.is-hidden{
  transform: translateY(calc(-1 * (var(--pcdna-header-h) + env(safe-area-inset-top))));
}

/* ===== Off-canvas: контейнер на весь экран ===== */
.pcdna-offcanvas{
  position: fixed;
  inset: 0;                          /* занимает весь экран */
  z-index: 10060;                    /* должно быть выше прогресс-бара/хедера */
  visibility: hidden;
  pointer-events: none;              /* в закрытом состоянии клики проходят сквозь */
}

/* когда открыто — контейнер видим и кликабелен */
.pcdna-offcanvas.is-open{
  visibility: visible;
  pointer-events: auto;
}

/* Полупрозрачный фон под панелью */
.pcdna-offcanvas__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
  z-index:1;
}

/* фон виден только когда открыто */
.pcdna-offcanvas.is-open .pcdna-offcanvas__backdrop{
  opacity: 1;
}

/* ===== Панель справа (выезжает transform-ом) ===== */
.pcdna-offcanvas__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 88vw;
  height: 100vh;                     /* избегаем 100dvh, чтобы не чудило на моб. FF */
  overflow: auto;
  background: #121212; color: #eee;
  padding: 16px;
  box-shadow: -20px 0 40px rgba(0,0,0,.35);
  transform: translateX(100%);       /* спрятана за правым краем */
  transition: transform .28s ease;
  z-index:2;
}

/* ===== Responsive width for off-canvas panel ===== */

/* Десктоп — увеличиваем ширину примерно на 40–50% */
@media (min-width: 1024px) {
  .pcdna-offcanvas__panel {
    width: 480px; /* раньше было 320px — увеличили на 50% */
    max-width: 50vw; /* можно ограничить, если хочешь */
  }
}

/* Мобильные — панель на весь экран */
@media (max-width: 767px) {
  .pcdna-offcanvas__panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0; /* убираем возможные скругления */
  }
}

/* открыто — на экране */
.pcdna-offcanvas.is-open .pcdna-offcanvas__panel{
  transform: translateX(0);
}

/* Крестик в левом верхнем углу панели */
.pcdna-offcanvas__close{
  position: absolute;
  top: 12px;
  left: 20px;   /* ← слева */
  right: auto;  /* ← чтобы точно не прижимало вправо */
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
/* ===== На мобильных крестик справа ===== */
@media (max-width: 767px) {
  .pcdna-offcanvas__close {
    left: auto;     /* отключаем левую привязку */
    right: 13px;    /* прижимаем к правому краю */
  }
}
/* 2) Делаем сверху запас под крестик, чтобы пункты не наезжали */
.pcdna-offcanvas__panel{
  /* твои паддинги остаются, просто увеличим верхний */
  padding-top: calc(env(safe-area-inset-top) + 85px);
}


/* список пунктов в панели */
/* ===== UL ===== */
.pcdna-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 25px; /* ← добавили */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== LI и A ===== */
.pcdna-menu > li > a {
  display: block;
  font-weight: 700; /* толстый шрифт как у Apple */
  font-size: clamp(28px, 5vw, 30px);
  color: #eaeaea;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}

/* hover / active / current item */
.pcdna-menu > li > a:hover,
.pcdna-menu > li > a:focus-visible,
.pcdna-menu > li.current-menu-item > a {
  color: #FF5300; /* твой брендовый акцент */
}

/* ===== Подменю (если depth > 1) ===== */
.pcdna-menu .sub-menu {
  list-style: none;
  margin-top: 8px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcdna-menu .sub-menu a {
  font-weight: 500;
  font-size: clamp(18px, 3vw, 22px);
  color: rgba(234,234,234,0.8);
  text-decoration: none;
  transition: color 0.15s ease;
}
.pcdna-menu .sub-menu a:hover {
  color: #FF5300;
}