/* Глобально отключаем анимации, если выключены в настройке */

html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Липкий header */
.por-sticky-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--header-bg, #ffffff) 60%, transparent);
  transition: transform .3s ease, box-shadow .2s ease;
}
.por-sticky-header.has-shadow { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.por-sticky-header.is-hidden { transform: translateY(-100%); }

/* Базовый reveal для любых карточек, которые мы пометили */
.por-card {
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.por-card.revealed { transform: none; opacity: 1; }

/* Hover‑zoom для изображений внутри карточек Newtone */
.por-card .product-preview__photo img,
.por-card .img-ratio__inner img {
  transition: transform .5s ease;
}
.por-card:hover .product-preview__photo img,
.por-card:hover .img-ratio__inner img {
  transform: scale(1.05);
}

/* Если позже добавим overlay/meta вручную в сниппет — эти стили пригодятся */
.por-img { position: relative; overflow: hidden; }
.por-overlay {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
  transition: opacity .3s ease;
}
.por-card:hover .por-overlay { opacity:1; }
.por-meta {
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.3);
  transform: translateY(6px); transition: transform .3s ease;
}
.por-card:hover .por-meta { transform: translateY(0); }

/* выше: ваш существующий css */

/* Сделаем шапку поверх всего */
.por-sticky-header { z-index: 1000; }

/* Прятать шапку только на ≥768px (мобилам не прячем) */
@media (max-width: 767.98px) {
  .por-sticky-header { transform: none !important; }
  .por-sticky-header.is-hidden { transform: none !important; }
}

/* Когда меню открыто — шапка фиксирована и не прячется */
html.menu-open .por-sticky-header,
body.menu-open .por-sticky-header,
html.mobile-menu-open .por-sticky-header,
body.mobile-menu-open .por-sticky-header,
html.nav-open .por-sticky-header,
body.nav-open .por-sticky-header,
.por-sticky-header.menu-is-open {
  transform: none !important;
}

/* === POR: мобильная боковая панель с вертикальными пунктами === */
@media (max-width: 767.98px) {
  .por-mm__backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px);
  }
  .por-mm {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 84px; /* узкая вертикальная панель */
    background: #111; color: #fff; z-index: 1100;
    transform: translateX(-100%); transition: transform .3s ease;
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px;
    box-shadow: 2px 0 16px rgba(0,0,0,.25);
  }
  .por-mm__close {
    align-self: flex-end; width: 36px; height: 36px;
    display: grid; place-items: center; background: transparent; color: #fff;
    border: 0; font-size: 20px; opacity: .8;
  }
  .por-mm__nav {
    margin-top: 8px; display: flex; flex-direction: column; gap: 16px; width: 100%;
  }
  .por-mm__nav a {
    display: block; width: 100%;
    writing-mode: vertical-rl;        /* вертикальное письмо */
    text-orientation: mixed;
    white-space: nowrap;
    text-align: center;
    font-weight: 600; letter-spacing: .02em;
    color: #fff; text-decoration: none; opacity: .9;
  }
  .por-mm__nav a:active, .por-mm__nav a:focus, .por-mm__nav a:hover { opacity: 1; }

  /* Активное состояние */
  html.por-mm-open #por-mm           { transform: translateX(0); }
  html.por-mm-open #por-mm-backdrop  { display: block; }
  html.por-mm-open, html.por-mm-open body { overflow: hidden; }
}

@media (max-width: 767.98px) {
  html.por-mm-open .header-mobile-panel { display: none !important; }
}