/* Собственные стили поверх собранного Tailwind.
   Отдельный файл, потому что css/site.css генерируется сборкой и правки в нём затрутся. */

/* --- Просмотр образца цвета крупно (js/obrazec.js) ------------------------- */
.obrazec{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(12,10,9,.92);
  animation:obrazec-in .18s ease-out;
}
.obrazec[hidden]{display:none}

.obrazec__fig{margin:0; max-width:min(1100px,92vw); max-height:88vh; display:flex; flex-direction:column}
.obrazec__img{
  max-width:100%; max-height:80vh; object-fit:contain;
  border-radius:12px; background:#1c1917;
}
.obrazec__cap{
  color:#d6d3d1; font-size:13px; margin-top:10px; text-align:center;
}
.obrazec__close{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px;            /* 44 px — минимальная площадь нажатия на телефоне */
  display:flex; align-items:center; justify-content:center;
  background:rgba(28,25,23,.9); color:#fafaf9;
  border:1px solid #44403c; border-radius:10px;
  font-size:18px; line-height:1; cursor:pointer;
}
.obrazec__close:hover{background:#292524}
.obrazec__close:focus-visible{outline:3px solid #f59e0b; outline-offset:2px}

/* Курсор-подсказка: карточка каталога кликабельна */
#catalog figure, #catalog article{cursor:zoom-in}

@keyframes obrazec-in{from{opacity:0} to{opacity:1}}

/* Уважаем системную настройку «меньше движения»: окно появляется сразу, без затухания. */
@media (prefers-reduced-motion:reduce){
  .obrazec{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* --- Запас под фиксированными панелями ------------------------------------
   Дефект, пойманный приёмкой 30.08: страница кончается ровно там, где стоит
   шапка (запас внизу 63 px при высоте шапки 61 px), и последний блок «Как
   заказать» невозможно выкрутить из-под неё — текст остаётся закрытым.
   Лечится не сдвигом панели, а запасом в конце документа.
   На телефоне запас больше: там снизу ещё липкая кнопка звонка. */
body{ padding-bottom:96px }

@media (max-width:767px){
  body{ padding-bottom:172px }   /* 96 + высота нижней панели с кнопкой */
}

/* Переход по якорю не должен прятать заголовок секции под шапку. */
html{ scroll-padding-top:76px }

/* --- Ролик по клику (js/obrazec.js) ---------------------------------------- */
.rolik-box{max-width:420px; margin-inline:auto; width:100%}
.rolik-play{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:#0c0a09; border-radius:16px; overflow:hidden; line-height:0;
}
.rolik-play img{width:100%; height:auto; display:block; opacity:.85; transition:opacity .2s}
.rolik-play:hover img{opacity:1}
.rolik-play__icon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%;
  background:#f59e0b; color:#1c1917;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; padding-left:5px;   /* треугольник визуально центрируем */
}
.rolik-play__label{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px; text-align:left;
  font-size:14px; line-height:1.3; color:#fafaf9;
  background:linear-gradient(to top, rgba(12,10,9,.85), rgba(12,10,9,0));
}
.rolik-play:focus-visible{outline:3px solid #f59e0b; outline-offset:3px}
.rolik-video{width:100%; height:auto; display:block; border-radius:16px; background:#0c0a09}

/* --- Текст статьи блога ----------------------------------------------------
   Отдельная типографика: в статье длинный текст, и правила для лендинга ему
   не годятся. Ширина колонки ограничена самим контейнером (max-w-3xl),
   здесь — ритм, размеры и списки. */
.statya{color:#e7e5e4; font-size:17px; line-height:1.65}
.statya > * + *{margin-top:1.1em}
.statya h2{
  font-family:'Oswald','system-ui',sans-serif; font-weight:700;
  font-size:28px; line-height:1.15; color:#fff; margin-top:2em;
}
.statya h3{
  font-family:'Oswald','system-ui',sans-serif; font-weight:600;
  font-size:21px; line-height:1.2; color:#fff; margin-top:1.6em;
}
.statya ul, .statya ol{padding-left:1.3em}
.statya li{margin-top:.5em}
.statya ul li{list-style:disc}
.statya ol li{list-style:decimal}
.statya strong{color:#fff}
.statya a{color:#fbbf24; text-decoration:underline; text-underline-offset:3px}
.statya a:hover{color:#fcd34d}
.statya blockquote{
  border-left:3px solid #f59e0b; padding:2px 0 2px 16px; color:#d6d3d1;
}
.statya table{width:100%; border-collapse:collapse; font-size:15px; display:block; overflow-x:auto}
.statya th, .statya td{border-bottom:1px solid #44403c; padding:9px 10px; text-align:left; vertical-align:top}
.statya th{color:#a8a29e; font-weight:500; white-space:nowrap}
.statya code{background:#292524; padding:2px 6px; border-radius:4px; font-size:.9em}

/* <picture> вокруг картинок (AVIF + запасной WebP) не должен участвовать в раскладке:
   классы Tailwind вроде h-full и absolute inset-0 стоят на самом img, а лишняя
   обёртка-блок между ним и родителем ломала бы позиционирование. display:contents
   убирает обёртку из потока, оставляя картинку прямым потомком. */
picture { display: contents; }

/* ── Меню разделов на телефоне ─────────────────────────────────────────────
   Сделано на <details>, а не на скрипте: без навигации на узком экране сайт
   длиной в шесть экранов листается только пальцем, и терять её при отключённом
   JS нельзя. Нативный <details> раскрывается сам, скрипт лишь закрывает список
   после выбора и по нажатию мимо. */
.menu-mob > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;               /* палец промахивается по мелким целям */
  border-radius:.625rem; color:#e7e5e4;
  border:1px solid rgba(120,113,108,.55);
}
.menu-mob > summary::-webkit-details-marker{ display:none }   /* треугольник Safari */
.menu-mob > summary::marker{ content:"" }
.menu-mob > summary svg{ width:22px; height:22px }
.menu-mob[open] > summary{ color:#fbbf24; border-color:rgba(245,158,11,.6) }

.menu-mob__list{
  position:absolute; right:1rem; top:calc(100% + .5rem);
  z-index:60; min-width:14rem;
  display:flex; flex-direction:column;
  background:#292524; border:1px solid #44403c; border-radius:.875rem;
  padding:.375rem; box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.menu-mob__list a{
  padding:.6rem .75rem; border-radius:.5rem;
  color:#e7e5e4; font-weight:500; text-decoration:none;
}
.menu-mob__list a:active{ background:rgba(245,158,11,.16); color:#fbbf24 }
.menu-mob__tel{ margin-top:.25rem; border-top:1px solid #44403c; color:#fbbf24 !important }