:root{
  --bg:#0b0f0d;--surface:#121714;--card:#151a18;--text:#ecedea;--muted:#b7bcb5;
  --primary:#dacfad;--primary-ink:#212121;--line:#2a2f2c;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.35)
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 700px at 10% 0%,#0d1411 0%,#0b0f0d 50%,#0b0f0d 100%);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* === Глобально запрещаем выделение текста === */
html, body, * {
  -webkit-user-select: none; /* Safari / iOS */
  -ms-user-select: none;     /* старый Edge/IE */
  user-select: none;
  -webkit-touch-callout: none; /* убирает long-press меню на iOS */
}

/* Не показываем подсветку «виртуального» выделения */
::selection { background: transparent; }

/* === Точечно разрешаем выделение там, где это необходимо === */
input, textarea, select, button,
[contenteditable="true"],
pre, code,
.selectable {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.container{width:min(1100px,92%);margin:0 auto}
.header{position:sticky;top:0;backdrop-filter:blur(8px);background:color-mix(in oklab,var(--bg) 80%,transparent);border-bottom:1px solid var(--line);z-index:50}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:inline-flex;gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.brand__logo{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
/* Мобайл: позволяем вертикальный скролл, даже если палец на логотипе/хедере */
@media (max-width: 980px){
  .header,
  .brand,
  .brand__logo{
    /* Явно разрешаем вертикальный pan для iOS/Android */
    -ms-touch-action: pan-y; /* старый IE/Edge */
    touch-action: pan-y;
  }

  /* На всякий случай отключаем drag у изображения логотипа */
  .brand__logo{
    -webkit-user-drag: none;
    user-drag: none;
  }
}
.brand__name{letter-spacing:.04em;font-weight:700}
.nav__toggle{display:none;font-size:22px;background:none;border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--text)}
.nav__list{display:flex;gap:16px;list-style:none;padding:0;margin:0}
.nav__list a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:10px}
.nav__list a:not(.btn):hover{background:#121815}
/* Активный пункт меню: визуальная подсветка + запрет клика */
.nav__list a.is-active,
.nav__list a[aria-current="page"]{
  background: #121815;           /* совпадает с hover, но постоянным стилем */
  color: var(--primary);
  pointer-events: none;          /* отключаем клики по текущей странице */
  cursor: default;               /* обычный курсор */
  text-decoration: none;
  opacity: 1;
}

/* На случай, если активный пункт — кнопка */
.nav__list .btn.is-active,
.nav__list .btn[aria-current="page"]{
  filter: none;
  opacity: .95;
}

/* Страховка: hover не перекрашивает активный пункт */
.nav__list a.is-active:hover,
.nav__list a[aria-current="page"]:hover{
  background: #121815;     /* совпадает с активным фоном */
  color: var(--primary);
}

/* Вариант для кнопки в меню, когда она активна */
.nav__list .btn.is-active,
.nav__list .btn[aria-current="page"]{
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  pointer-events: none;    /* дубль защиты от клика */
  cursor: default;
}

/* И hover по активной «кнопке» не меняет стиль */
.nav__list .btn.is-active:hover,
.nav__list .btn[aria-current="page"]:hover{
  filter: none;
  opacity: .95;
}

/* Улучшаем доступность: видимая рамка на клавиатуре */
.nav__list a:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 10px;
}


.hero{padding:56px 0 24px}.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero__text h1{margin:0 0 8px;font-size:clamp(28px,3.8vw,44px);line-height:1.1}
.lead{color:var(--muted);font-size:1.1rem}.hero__cta{display:flex;gap:12px;margin-top:16px}
.badges{display:flex;gap:12px;flex-wrap:wrap;padding:0;margin:18px 0 0;list-style:none}
.badges li{font-size:.9rem;color:var(--muted);border:1px dashed var(--line);padding:6px 10px;border-radius:999px}
.mockup{display:flex;justify-content:center}

/* Футболка как изображение */
.tee{position:relative;width:240px;height:300px;border-radius:var(--radius);background:radial-gradient(250px 180px at 50% 30%,#e9efe9 0%,#d9e3da 45%,#cbd5cc 70%);box-shadow:var(--shadow);overflow:hidden}
.tee--large{width:360px;height:440px}
.tee__base{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.30))}

/* === ОБНОВЛЕНО: принт двигаем через CSS-переменные + быстрый слой === */
.tee__print{
  position:absolute;
  left:50%;
  top:50%;

  /* управляем сдвигом от центра */
  --dx: 0px;
  --dy: 0px;
  --scale: 1;

  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--scale));
  max-width:70%;
  max-height:60%;
  object-fit:contain;

  will-change: transform;
  touch-action: none;        /* отключаем нативный скролл/зум при drag */
  -webkit-user-drag: none;
  user-select: none;
}
.tee__print--draggable{cursor: grab;}
.tee__print--draggable.grabbing{cursor: grabbing;}

/* Кнопка удаления принта (крестик) */
.tee__remove{
  position:absolute;
  top:8px;                  /* как раньше, можно 10px */
  right:auto;
  width:18px;               /* размер кружка — меняй при необходимости */
  height:18px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(18,23,20,.85);
  color:var(--text);
  /* отключаем влияние глифа "×" */
  font-size:0;
  line-height:0;
  /* без трансформаций и паддингов */
  transform:none;
  padding:0;

  cursor:pointer;
  z-index:5;
  box-shadow:var(--shadow);
}

.tee__remove::before,
.tee__remove::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:2px;                /* толщина штриха крестика */
  height:60%;               /* длина штриха */
  background:var(--text);
  border-radius:2px;
  transform-origin:center;
}

.tee__remove::before{ transform: translate(-50%,-50%) rotate(45deg); }
.tee__remove::after { transform: translate(-50%,-50%) rotate(-45deg); }



.tee__remove:hover{ background:rgba(18,23,20,.95); }
.tee__remove:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.tee__remove[hidden]{ display:none !important; }


.tee__hint{position:absolute;inset:0;display:grid;place-items:center;color:#8a9188;text-align:center;font-size:.95rem;pointer-events:none}

.canvas{display:flex;align-items:center;justify-content:center;background:#0f1512;border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-height:480px}
.builder{padding:56px 0}.builder__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}.grid-2{display:grid;gap:12px;grid-template-columns:1fr 1fr}.grid-2--stack{grid-template-columns:1fr 1fr}
.label{display:block;color:var(--muted);font-size:.9rem;margin-bottom:6px}
input[type=file],input[type=text],input[type=email],input[type=tel],textarea,input:not([type]){width:100%;background:#0e1411;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
input[type=range]{width:100%}
.cards{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-height:120px;box-shadow:var(--shadow)}
.price-grid{
  display: grid;
  gap: 16px;
  /* авто-подбор колонок по ширине, не меньше 260px */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.price-card__image{
  display: block;
  max-width: 100%;  /* не шире карточки */
  width: 100%;      /* растянуть по доступной ширине */
  height: auto;     /* сохраняем пропорции */
  margin-top: 12px;
  border-radius: 8px;     /* под твой дизайн */
  object-fit: contain;    /* на всякий случай */
}

.price-list{margin:10px 0 0;padding-left:18px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:10px 0}
.footer{border-top:1px solid var(--line);padding:20px 0 40px}.footer__inner{display:flex;align-items:center;justify-content:space-between}
.brand--footer .brand__logo{width:28px;height:28px}

.btn{display:inline-block;text-decoration:none;text-align:center;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:#121815;color:var(--text);cursor:pointer;transition:transform .08s ease}
.btn:hover{transform:translateY(-1px)}.btn--primary{background:var(--primary);color:var(--primary-ink);border-color:color-mix(in oklab,var(--primary) 70%,#000 30%)}.btn--secondary{background:#1a221d}.btn--ghost{background:transparent}.btn--sm{padding:8px 12px}
.lead,.muted{color:var(--muted)}.xs{font-size:.88rem}.h4{font-size:1.1rem;margin:0 0 8px}.divider{height:1px;background:var(--line);margin:14px 0}
@media (max-width:980px){.hero__grid,.builder__grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.price-grid{grid-template-columns:1fr}.nav__toggle{display:inline-block}.nav__list{display:none;position:absolute;top:56px;right:4%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}.nav__list.show{display:block}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.tee--large{width:300px;height:380px}}

#heroTee .tee__print{max-width:88%;max-height:88%}
#heroTee{width:300px;height:360px}

.nav__list .btn--primary{
  color:#000;
  background:var(--primary);
  border-color:color-mix(in oklab,var(--primary) 70%, #000 30%);
}
.nav__list .btn--primary:hover,
.nav__list .btn--primary:focus{
  color:#000;
  background:var(--primary);
}
.nav__list a:not(.btn):hover{background:#121815}

/* === ДОБАВЛЕНО: идеальное выравнивание кнопки в меню === */
.nav__list{align-items:center;}                 /* элементы меню по центру */
.nav__list .btn{display:inline-flex;align-items:center;} /* кнопка не «садится» на baseline */
.nav__list .btn--sm{padding:10px 14px;}        /* высота ~ как у ссылок */
.nav__list a{line-height:1.1;}                  /* страховка против перепадов */
/* Увеличенные тап-зоны для мобильного меню */
@media (max-width: 980px){
  /* сама кнопка гамбургера — чуть крупнее и удобнее */
  .nav__toggle{
    font-size: 28px;
    padding: 10px 14px; /* было 6px 10px */
  }

  /* пункты меню — выше строка и отступы */
  .nav__list a{
    display: block;
    padding: 14px 16px; /* было 10px 12px */
    line-height: 1.25;
  }

  /* вертикальный зазор между пунктами, если они в столбик */
  .nav__list li + li{
    margin-top: 6px;
  }
}

/* Мобильный блок масштаба под холстом */
@media (max-width: 980px) {
  /* scaleField становится общей «карточкой» */
  .field--scale-mobile{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
    margin-top: 12px;

    display: grid;
    gap: 10px;              /* единый интервал между элементами внутри */
  }
  /* Внутренние поля внутри общей карточки — без внешних отступов и без своих рамок */
  .field--scale-mobile .field{
    margin: 0;
    border: 0;
    padding: 0;
  }
  .center-btn--mobile{
    width: 100%;
    margin: 0;              /* отступ управляется через gap */
  }
}

/* Скрываем подсказку, когда в tee есть принт */
.tee.has-print .tee__hint {
  display: none;
}

/* если хочешь плавность — опционально */
.tee .tee__hint { transition: opacity .15s linear; }
.tee.has-print .tee__hint { opacity: 0; }
.hero .tee__print {
  pointer-events: none;
  touch-action: pan-y;
}

/* === Под логотипом: сетка из 9 фото (адаптивная) === */
.logo-gallery{padding:10px 0 0}
.logo-gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.logo-gallery__item{margin:0;border-radius:var(--radius,12px);overflow:hidden;background:var(--card,#151a18);box-shadow:var(--shadow,0 10px 30px rgba(0,0,0,.35))}
.logo-gallery__item img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;-webkit-user-drag:none}
@media (min-width:768px){.logo-gallery__grid{grid-template-columns:repeat(5,1fr);gap:10px}.logo-gallery{padding-top:14px}}
@media (min-width:1200px){.logo-gallery__grid{grid-template-columns:repeat(5,1fr);gap:12px}.logo-gallery{padding-top:16px}}


/* === Gallery modal === */
.gallery-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);padding:24px;z-index:1000}
.gallery-modal[hidden]{display:none}
.gallery-modal__img{max-width:min(92vw,1200px);max-height:92vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.gallery-modal__close{position:fixed;top:16px;right:16px;width:44px;height:44px;line-height:44px;text-align:center;font-size:32px;color:#fff;background:rgba(0,0,0,.45);border:0;border-radius:50%;cursor:pointer}
.gallery-modal__close:hover{background:rgba(0,0,0,.6)}
@media (pointer:coarse){
  .gallery-modal__close{top:12px;right:12px;width:48px;height:48px;font-size:36px}
}

.logo-gallery__item img{cursor:zoom-in}