/* --- Anchor offset for cards (fix scroll to anchor under fixed header) --- */
/* --- Anchor offset for cards (fix scroll to anchor under fixed header) --- */
/* ===== Header layout (баннер сверху, nav+title в ряд) ===== */
.wrap header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  /* главный зазор под шапкой, чтобы контент не прилипал */
  margin-bottom: 16px;
}

/* баннер всегда отдельной строкой сверху */
.wrap header .banner{ flex-basis: 100%; }

/* навигация слева, заголовок справа в той же строке */
.wrap header nav.nav{ order: 1; }
.wrap header h1{
  order: 2;
  margin: 0 0 0 auto;   /* <<< прижать заголовок вправо */
}

/* если на главной осталась “подзаголовочная” строка — спрячем */
.wrap header > .muted{ display: none; }
/* --- Шапка: баннер + кнопки слева + заголовок справа --- */
.wrap > header{
  display:flex;            /* одна линия для кнопок и заголовка */
  flex-wrap:wrap;          /* баннер занимает всю строку */
  align-items:center;
  gap:12px;
  margin-bottom:16px;      /* ЕДИНЫЙ отступ снизу шапки на всех страницах */
}
.wrap > header .banner{ flex:0 0 100%; }  /* баннер всегда на всю ширину */
.wrap > header nav{ order:1; }            /* кнопки слева */
.wrap > header h1{ order:2; margin:0 0 0 auto; } /* заголовок справа */
:root{--w:1024px;--pad:16px;--radius:14px}
*{box-sizing:border-box}
body{margin:0;background:#0f1115;color:#e7e7e7;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:#9ecbff;text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:var(--w);margin:32px auto;padding:0 var(--pad)}
header{margin:0 0 16px}
h1{margin:0 0 6px;font-size:28px}
.nav{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0}
.nav a{padding:8px 12px;background:#171a21;border:1px solid #2a2f3a;border-radius:999px}
.card{background:#171a21;border:1px solid #2a2f3a;border-radius:var(--radius);padding:16px;margin:0 0 16px}
.grid{display:grid;gap:16px}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}
.muted{color:#a9b2be;font-size:14px}
footer{margin-top:12px;color:#8a93a3;font-size:13px}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid #2a2f3a;background:#151922;text-decoration:none}
.btn:hover{background:#1a1f29}
.input{background:#12151b;border:1px solid #2a2f3a;border-radius:12px;padding:10px 12px;color:#e7e7e7;width:100%}

/* === Sticky header + banner slot ======================================= */
.wrap > header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0f1115;           /* фон как у страницы */
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
}

/* слот под баннер (если добавим в разметку) */
.banner{
  margin-top: 10px;
}
.banner img{
  display: block;
  width: 100%;
  height: 140px;                 /* можно менять позже */
  object-fit: cover;             /* подрезаем по краю без искажений */
  border-radius: var(--radius);
}

/* === Fixed header ======================================================= */
:root{ --header-h: 120px; } /* базовая высота шапки (подправим позже под баннер) */

.wrap > header{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--w));
  z-index: 1000;
  background: #0f1115;
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
  min-height: var(--header-h);
}

/* отступ, чтобы контент не уезжал под фикс-шапку */
body{ padding-top: calc(var(--header-h) + 24px); }

/* === FIXED HEADER (forced) ============================================ */
:root{ --header-h: 120px; } /* при необходимости подправим позже */

body .wrap > header{
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--w));
  z-index: 9999;
  background: #0f1115;
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
  min-height: var(--header-h);
}

body{ padding-top: calc(var(--header-h) + 24px) !important; }

/* === Fixed header — universal fallback (включая страницы без .wrap) === */
:root{ --header-h: 120px; } /* подправим потом под баннер */

body > header,
body .wrap > header{
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, var(--w));
  z-index: 9999;
  background: #0f1115;
  border-bottom: 1px solid #2a2f3a;
  padding-top: 12px;
  padding-bottom: 10px;
  min-height: var(--header-h);
}

/* Отступ под фикс-шапку */
body{ padding-top: calc(var(--header-h) + 24px) !important; }
#admin-tabs a.active{ background:#1a1f29; border-color:#3a4150; }

/* Карточки всегда под контент */
.card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Нормальные отступы у текста внутри карточек */
.card p { margin: 8px 0; }
.card ul, .card ol { margin: 8px 0 8px 20px; }

/* Картинки в карточках — по ширине контейнера */
.card img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Guides: карточки под размер текста */
.guide-article,
.guide-article .card,
.guide-list .card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Нормальные отступы и картинки */
.guide-article p { margin: 8px 0; }
.guide-article ul, .guide-article ol { margin: 8px 0 8px 20px; }
.guide-article img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Guides: список карточек в 1–2 колонки */
.guide-list{display:grid;gap:16px}
@media(min-width:760px){.guide-list{grid-template-columns:1fr 1fr}}
.guide-list .card{margin:0}

/* Карточка-ссылка должна вести себя как блок и не «ломаться» по краям */
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{background:#1a1f29}

/* --- header image (safe for ad-blockers) --- */
.header-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  border-radius:12px;
  margin:12px 0;
}

/* ===== Ряд с меню и заголовком ===== */
.head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* меню слева, заголовок вправо */
  gap:16px;
  margin:8px 0 10px;
}
.head-row .nav{ flex:0 1 auto; }
.head-row h1{
  margin:0;
  font-size:24px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:720px){
  .head-row{ flex-wrap:wrap; }
  .head-row h1{ width:100%; order:2; margin-top:6px; text-align:left; }
}

/* --- spacing under header (универсально для всех страниц) --- */
.wrap > header{
  margin-bottom: 14px;   /* одинаковая "воздушность" под шапкой */
}

/* если первая секция/карточка идёт сразу за header — не даём ей прилипнуть */
.wrap > .card:first-of-type,
.wrap > section.card:first-of-type{
  margin-top: 8px;
}

/* custom overrides */
.wrap header{margin:0 0 16px 0;}
.wrap header .nav{margin:8px 0 0;}
.wrap header .page-title{margin-left:auto;padding:6px 0 0;}
/* баннер всегда блочный и не даёт «проседать» высоте */
.wrap header .banner img{display:block;width:100%;height:auto;}
/* --- header layout: banner -> (nav | title) in one row --- */
.wrap > header{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.wrap > header .banner{grid-column:1/-1}
.wrap > header .nav{grid-column:1/2}
.wrap > header h1{grid-column:2/3;justify-self:end;margin:0}

/* баннер стабильно занимает место и не "проваливается" */
.wrap > header .banner img{
  display:block;width:100%;height:auto;max-height:220px;
  object-fit:cover;border-radius:12px;margin:12px 0;
}

/* первый блок контента не заезжает под шапку */
.wrap > .card:first-of-type,
.wrap > section:first-of-type{margin-top:0}
/* --- header layout: banner -> (nav | title) in one row --- */
.wrap > header{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.wrap > header .banner{grid-column:1/-1}
.wrap > header .nav{grid-column:1/2}
.wrap > header h1{grid-column:2/3;justify-self:end;margin:0}

/* баннер стабильно занимает место и не "проваливается" */
.wrap > header .banner img{
  display:block;width:100%;height:auto;max-height:220px;
  object-fit:cover;border-radius:12px;margin:12px 0;
}

/* первый блок контента не заезжает под шапку */
.wrap > .card:first-of-type,
.wrap > section:first-of-type{margin-top:0}
/* --- header layout: banner -> (nav | title) in one row --- */
.wrap > header{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:16px}
.wrap > header .banner{grid-column:1/-1}
.wrap > header .nav{grid-column:1/2}
.wrap > header h1{grid-column:2/3;justify-self:end;margin:0}

/* баннер стабильно занимает место и не "проваливается" */
.wrap > header .banner img{
  display:block;width:100%;height:auto;max-height:220px;
  object-fit:cover;border-radius:12px;margin:12px 0;
}

/* первый блок контента не заезжает под шапку */
.wrap > .card:first-of-type,
.wrap > section:first-of-type{margin-top:0}

/* === FIX: Header layout (banner top, nav+title in one row) === */
.wrap header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;     /* зазор от контента */
}
.wrap header .banner{
  flex:1 0 100%;          /* баннер — отдельной строкой на всю ширину */
}
.wrap header .banner img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:12px;
  margin:0 0 8px 0;       /* небольшой отступ снизу баннера */
}
.wrap header .nav{
  order:1;                /* сначала кнопки */
}
.wrap header h1{
  order:2;                /* справа от кнопок */
  margin:0 0 0 auto;      /* прижать к правому краю */
}
/* небольшой вертикальный зазор под строкой кнопок/заголовка */
.wrap header .nav + h1,
.wrap header .nav { margin-bottom:8px; }

/* === header layout: banner on top; below: nav + title in one row === */
.wrap header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:10px;
  margin-bottom:16px; /* общий отступ от шапки до контента */
}
.wrap header .banner{ flex: 0 0 100%; }         /* баннер всегда на всю ширину, отдельной строкой */
.wrap header .nav{ flex: 1 1 auto; }            /* навигация слева */
.wrap header h1{ margin-left:auto; }            /* заголовок прижат вправо */
@media (max-width: 640px){
  .wrap header h1{ font-size:1.1rem; }
  .wrap header{ margin-bottom:12px; }
}

/* === FIX header layout (banner top, nav + title in one row) === */
.wrap header{
  display:flex;           /* одна строка для nav + h1 */
  flex-wrap:wrap;         /* баннер на всю ширину, остальное переносится ниже */
  align-items:center;
  gap:12px;
  margin-bottom:18px;     /* зазор от контента, чтобы ничего не пряталось */
}

.wrap header .banner{     /* баннер всегда на всю ширину сверху */
  flex-basis:100%;
}

.wrap header .nav{        /* кнопки слева, без позиционирования */
  display:flex;
  gap:8px;
  position:static !important;
}

.wrap header h1{          /* заголовок справа в той же строке */
  margin:0 0 0 auto;      /* прижимаем вправо */
  position:static !important;
}

/* === FIX 2025-09-06: Header layout & spacing === */
/* Баннер — сверху всей строкой; ниже — в ОДНОМ ряду: слева nav, справа h1. */
/* Отступ снизу делаем padding-ом, чтобы исключить схлопывание margin-ов
   (иначе первый блок страницы может «залезать» под нав-кнопки). */

.wrap header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  /* вместо margin-bottom, чтобы не схлопывалось с margin-top следующего блока: */
  padding-bottom:14px;
}

/* Баннер всегда отдельной строкой сверху */
.wrap header .banner{
  flex-basis:100%;
  order:0;
}

/* Навигация слева */
.wrap header .nav{
  order:1;
  margin-right:auto; /* тянет h1 вправо */
}

/* Заголовок страницы — справа в этом же ряду */
.wrap header h1{
  order:2;
  margin-left:auto;
  white-space:nowrap;   /* не переносим заголовок, чтобы был реально «в одну строку» */
}

/* Чуть аккуратнее на узких экранах */
@media (max-width: 720px){
  .wrap header{ gap:8px; }
  .wrap header h1{ font-size:20px; }
}
/*
==============================================================================
SV_D_ — Header Hotfix (2025-09-07)
Назначение: убрать налезание контента под меню и прижать <h1> вправо.
Принцип: поверх любых прежних правил принудительно делаем шапку НЕ фиксированной,
         задаём layout: баннер — на всю ширину, ниже одна строка (nav слева, h1 справа).
============================================================================== */

/* 1) Сбросить fixed/sticky у шапки и отменить искусственный отступ у body */
body > header,
body .wrap > header{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  z-index: auto !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}
body{
  padding-top: 0 !important;
}

/* 2) Универсальный layout шапки */
.wrap header{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px 0; /* нормальный зазор под шапкой */
}

/* Баннер — отдельной строкой на всю ширину */
.wrap header .banner{
  flex: 0 0 100% !important;
}
.wrap header .banner img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}

/* Меню слева, заголовок справа */
.wrap header .nav{
  order: 1;
  margin-right: auto; /* тянет заголовок вправо */
  position: static !important;
}
.wrap header h1{
  order: 2;
  margin: 0 0 0 auto !important; /* ПРИЖАТЬ ВПРАВО */
  position: static !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Мобильная аккуратность */
@media (max-width: 720px){
  .wrap header{ gap: 8px; }
  .wrap header h1{ font-size: 20px; }
}
/*
==============================================================================
SV_D_ — Head row layout fix (2025-09-07)
Цель: держать <nav> слева, <h1> справа в ОДНОЙ строке (на широких экранах).
Примечание: работает с текущей разметкой .header-image + .head-row.
============================================================================== */

.wrap header .head-row{
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;           /* не переносить на вторую строку */
}

.wrap header .head-row .nav{
  margin-right: auto;          /* отталкивает заголовок вправо */
  display: flex;
  flex-wrap: wrap;             /* кнопки могут переноситься сами внутри */
  gap: 12px;
}

.wrap header .head-row h1{
  margin: 0 0 0 auto !important;  /* прижать к правому краю */
  white-space: nowrap;            /* не переносить текст заголовка */
  overflow: hidden;
  text-overflow: ellipsis;        /* на всякий случай усечение в строке */
}

/* На узких экранах позволим перенос (чтобы не ломать верстку) */
@media (max-width: 780px){
  .wrap header .head-row{
    flex-wrap: wrap;
  }
  .wrap header .head-row h1{
    margin: 6px 0 0 0;
    white-space: normal;
  }
}
/*
==============================================================================
SV_D_ — Sticky Header + Right-Aligned Title (2025-09-07)
Цель: фиксировать всю шапку (баннер + меню + h1) сверху и выстроить
      меню слева, заголовок справа в одной строке. Перекрываем старые правила.
============================================================================== */

/* 1) Шапка прилипает сверху на всех страницах */
body .wrap > header,
.wrap > header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #0f1115 !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
}

/* 2) Баннер — отдельной строкой на всю ширину (внутри шапки) */
.wrap > header .header-image{ flex-basis:100% !important; }
.wrap > header .header-image img{
  display:block; width:100%; height:auto; max-height:220px;
  object-fit:cover; border-radius:12px; margin:12px 0;
}

/* 3) Ряд: меню слева, заголовок справа — в одной строке */
.wrap > header .head-row{
  display:flex !important;
  align-items:center;
  gap:12px;
  margin:8px 0 10px;
}
.wrap > header .head-row .nav{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-right:auto !important;            /* тянем h1 вправо */
}
.wrap > header .head-row h1{
  margin:0 0 0 auto !important;            /* прижать вправо */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 4) Унифицируем отступ под шапкой */
.wrap > header{ padding-bottom:12px !important; margin-bottom:14px !important; }

/* 5) Сброс лишнего отступа, если где-то задавался под fixed-шапку */
body{ padding-top:0 !important; }

/*
==============================================================================
SV_D_ — Head-row full width (2025-09-07)
Цель: .head-row должна занимать всю строку под баннером, чтобы h1 мог
прижаться к правому краю; меню остаётся слева.
============================================================================== */
.wrap header .head-row{
  flex: 0 0 100% !important;   /* ВЕСЬ ряд под баннером */
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.wrap header .head-row .nav{
  margin-right: auto;          /* отталкиваем h1 вправо */
}
.wrap header .head-row h1{
  margin-left: auto;           /* прижать к правому краю строки */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
SV_D_ — Tight banner gap (2025-09-07)
Цель: уменьшить расстояние между баннером и рядом с меню/заголовком.
*/
.wrap > header .header-image img{
  margin-bottom: 4px !important;   /* было ~12px, делаем плотнее */
}
.wrap > header .head-row{
  margin-top: 0 !important;        /* убираем верхний отступ у ряда с меню */
}
/* SV_D_ — ещё плотнее под баннером */
.wrap > header .header-image img{
  margin-bottom: 0 !important;    /* было 4px */
}
.wrap > header .head-row{
  margin-top: -4px !important;    /* чуть подтягиваем ряд вверх */
}

/* Модальное окно увеличения картинки */
#img-zoom-modal {
  animation: fadeInZoom 0.2s;
}
#img-zoom-modal img {
  box-shadow: 0 4px 32px #000b;
  cursor: zoom-out;
  transition: transform 0.15s;
}
@keyframes fadeInZoom {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =======================================================================
   === THEME OVERRIDES START (grandeetoile.pro) ===========================
   Назначение: мягкие правки поверх сетки с использованием переменных темы.
   Секции:
   # 1. Шапка / навигация
   # 2. Кнопки
   # 3. Карточки / панели
   # 4. Футер
   # 5. Формы
   ======================================================================= */

/* # 1. Шапка / навигация ------------------------------------------------ */
header, .site-header{
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border);
}
header a, .site-header a{
  color: var(--text);
  text-decoration: none;
}
header nav a, .site-header nav a{
  color: var(--link);
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
}
header nav a:hover, .site-header nav a:hover{
  color: var(--link-hover);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* # 2. Кнопки ------------------------------------------------------------ */
button, .btn, input[type="button"], input[type="submit"]{
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid color-mix(in oklab, var(--accent) 60%, var(--border));
  border-radius: var(--radius-sm);
  padding: .5rem .9rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .06s ease, background .2s ease, color .2s ease;
}
button:hover, .btn:hover,
input[type="button"]:hover, input[type="submit"]:hover{
  background: color-mix(in oklab, var(--accent) 85%, black);
  transform: translateY(-1px);
}
button:active, .btn:active,
input[type="button"]:active, input[type="submit"]:active{
  transform: translateY(0);
}

/* # 3. Карточки / панели ------------------------------------------------- */
.card, .panel, .box{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* # 4. Футер ------------------------------------------------------------- */
footer, .site-footer{
  background: var(--surface);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: .8rem;
}
footer a, .site-footer a{
  color: var(--link);
}
footer a:hover, .site-footer a:hover{
  color: var(--link-hover);
}

/* # 5. Формы ------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], textarea, select{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
}
label{ color: var(--text); }

/* === THEME OVERRIDES END =============================================== */


/* NAV PILLS (SEA-LITE) */
.site-header nav a{
  display:inline-block;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .45rem .9rem;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
  background: transparent;
}
.site-header nav a:hover{
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--text);
}

/* LAYOUT CONTAINER (SEA-LITE) */
:root{ --container-max: 1100px; }

.site-header, main, .site-footer, .wrap, .grid{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* HERO placeholder (заменим позже на реальный баннер) */
.site-hero{
  max-width: var(--container-max);
  margin: 0 auto 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 200px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 30%, transparent) 0%,
      transparent 60%) ,
    var(--surface);
}
.site-hero h1{ margin: 0; }
.site-hero p{ margin: .3rem 0 0 0; color: var(--text-muted); }

/* LAYOUT CONTAINER (SEA-LITE) */
:root{ --container-max: 1100px; }

.site-header, main, .site-footer, .wrap, .grid{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* HERO placeholder */
.site-hero{
  max-width: var(--container-max);
  margin: 0 auto 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 200px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 30%, transparent) 0%,
      transparent 60%),
    var(--surface);
}
.site-hero h1{ margin: 0; }
.site-hero p{ margin: .3rem 0 0 0; color: var(--text-muted); }

/* PERFUME (SEA-LITE) */
/* # 1. Оглавление */
.toc{
  display:grid;
  grid-template-columns: repeat(2, minmax(200px,1fr));
  gap:.4rem .8rem;
  list-style: none;
  padding-left: 0;
  margin: .6rem 0 0 0;
}
.toc a{
  display:inline-block;
  padding:.35rem .6rem;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* # 2. Карточка аромата */
.product-card{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.product-media{
  width: 160px; height: 160px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 22%, transparent) 0%,
      transparent 60%),
    #f9f7f4;
  border: 1px dashed color-mix(in oklab, var(--border) 60%, #000);
}
.product-body h2{ margin: 0 0 .2rem 0; }
.product-body .note{
  margin: 0 0 .6rem 0;
  color: var(--text-muted);
  font-size: .95rem;
}

/* PERFUME TWEAKS (SEA-LITE) */
/* Читаемость описаний + приятный hover по оглавлению, плавная прокрутка */
.product-body p{
  color: var(--text);      /* нормальный цвет текста */
  opacity: 1;              /* убираем полупрозрачность из старых стилей */
}
.product-card{ align-items: center; }  /* картинка и текст по центру по высоте */

.toc a:hover{
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: var(--border);
}

html{ scroll-behavior: smooth; }       /* плавный переход по якорям */

/* COSMETICS (SEA-LITE) */
/* # 1. Сетка мини-карточек */
.mini-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 1rem;
}
@media (min-width: 900px){
  .mini-grid{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* # 2. Мини-карточка категории */
.mini-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.mini-card h3{ margin: 0 0 .25rem 0; }
.mini-card p{ margin: 0; color: var(--text-muted); }

/* TOC2 (rules-like two columns) */
/* Два столбца обычных ссылок, без плашек */
.toc2{
  columns: 2;
  column-gap: 24px;
  list-style: none;
  padding-left: 0;
  margin: .6rem 0 0 0;
}
.toc2 li{ break-inside: avoid; margin: .25rem 0; }
.toc2 a{
  text-decoration: underline;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--link);
}
.toc2 a:hover{ color: var(--link-hover); }

/* =========================================================================
   9. Новый ряд навигации (nav--new)
   Назначение: сделать светлый, контрастный второй ряд кнопок, чтобы хорошо читалось.
   ------------------------------------------------------------------------- */
.nav--new{
  display:flex; flex-wrap:wrap; gap:10px;
  background:#151515;               /* тёмный фон под светлый текст */
  padding:10px 12px; border-radius:12px;
  margin:10px 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.nav--new a{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  padding:9px 14px;
  border-radius:10px;
  background:#2a2a2a;               /* кнопка тёмная */
  border:1px solid #3a3a3a;
  color:#f6f3ef;                     /* ТЕКСТ СВЕТЛЫЙ */
  transition:.15s ease-in-out;
}
.nav--new a:hover { background:#333; transform:translateY(-1px); }
.nav--new a:active { transform:translateY(0); opacity:.95; }

/* Мобильная адаптация */
@media (max-width: 640px){
  .nav--new{ gap:8px; padding:8px 10px; }
  .nav--new a{ padding:8px 12px; font-weight:600; }
}

/* =========================================================================
   9. Новый ряд навигации (nav--new)
   Назначение: сделать светлый, контрастный второй ряд кнопок, чтобы хорошо читалось.
   ------------------------------------------------------------------------- */
.nav--new{
  display:flex; flex-wrap:wrap; gap:10px;
  background:#151515;               /* тёмный фон под светлый текст */
  padding:10px 12px; border-radius:12px;
  margin:10px 0 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.nav--new a{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  padding:9px 14px;
  border-radius:10px;
  background:#2a2a2a;               /* кнопка тёмная */
  border:1px solid #3a3a3a;
  color:#f6f3ef;                     /* ТЕКСТ СВЕТЛЫЙ */
  transition:.15s ease-in-out;
}
.nav--new a:hover { background:#333; transform:translateY(-1px); }
.nav--new a:active { transform:translateY(0); opacity:.95; }

/* Мобильная адаптация */
@media (max-width: 640px){
  .nav--new{ gap:8px; padding:8px 10px; }
  .nav--new a{ padding:8px 12px; font-weight:600; }
}

/* =========================================================================
   9.1 Скрыть старый ряд навигации
   Назначение: убрать с глаз старые кнопки на всех страницах, не ломая разметку.
   Правило: скрываем любой .nav, у которого нет .nav--new.
   ------------------------------------------------------------------------- */
header .nav:not(.nav--new),
.head-row .nav:not(.nav--new),
.nav:not(.nav--new){
  display: none !important;
}