/* ================================================================
   ТЕМА САЙТА — «Чистый еловый»: зелёный фон + мягкая огранка карточек
   (скруглённые фото без рамок). Подключается ПОСЛЕ assets/styles.css.
   Собрано из утверждённых превью: тема A + карточки «огранка».
   ================================================================ */

/* ================================================================
   ВАРИАНТ A — «ЧИСТЫЙ ЕЛОВЫЙ»
   Тот же тёмный характер, но зелёный читается как зелёный,
   а все коричневые вуали от старой палитры переведены в зелёно-чёрные.
   ================================================================ */

:root{
  --bg:#122B21; --bg-2:#18352A; --bg-3:#0C1D16; --bg-4:#0F2419;
  --card:#17332A; --card-2:#1D3D31; --card-3:#234739;
  --line:rgba(217,183,106,.22); --line-soft:rgba(217,183,106,.12);
  --gold:#D9B76A; --gold-2:#EBD5A2; --gold-dim:#A88B4E;
  --text:#EDE7DA; --text-2:#B5BEB4; --text-3:#8A968C;
}

/* --- заглушки фото: были коричневые --- */
.ph{background:
  radial-gradient(120% 90% at 70% 20%,rgba(217,183,106,.14),transparent 55%),
  radial-gradient(90% 80% at 30% 90%,rgba(60,110,80,.16),transparent 60%),
  linear-gradient(160deg,#1B3A2C,#0C1D16 70%)}
.ph--a{background:radial-gradient(120% 90% at 30% 20%,rgba(217,183,106,.16),transparent 55%),linear-gradient(150deg,#1D3E2F,#0D1F17 70%)}
.ph--b{background:radial-gradient(100% 90% at 70% 80%,rgba(90,140,105,.18),transparent 60%),linear-gradient(200deg,#1B392B,#0B1B14 72%)}
.ph--c{background:radial-gradient(120% 100% at 50% 10%,rgba(217,183,106,.12),transparent 55%),linear-gradient(160deg,#193425,#0A1811 70%)}

/* --- шапка: была коричневая полоса на зелёном сайте --- */
header.scrolled{background:rgba(11,27,20,.92)}

/* --- герой: убираем коричневую вуаль, добавляем мягкий стык со следующей секцией --- */
.hero-bg::after{background:linear-gradient(90deg,var(--bg) 0%,rgba(9,24,18,.93) 34%,rgba(9,24,18,.40) 62%,rgba(9,24,18,.58) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,53,42,0),var(--bg-2))}
.subhero::after{background:linear-gradient(90deg,var(--bg) 0%,rgba(9,24,18,.93) 42%,rgba(9,24,18,.45) 100%)}

/* --- карточки услуг / портфолио / команда: зелёно-чёрные градиенты вместо коричневых --- */
.svc-card .grad{background:linear-gradient(to top,rgba(7,19,14,.93) 8%,rgba(7,19,14,.15) 55%,transparent)}
.pf-item .meta{background:linear-gradient(to top,rgba(7,19,14,.92),transparent)}
.pf-arrow{background:rgba(11,27,20,.72)}
.team-card .pic .grad{background:linear-gradient(to top,rgba(7,19,14,.72),transparent 55%)}
.tier .pic .badge{background:linear-gradient(to bottom,rgba(9,24,18,.5),rgba(9,24,18,.82))}

/* --- карточки коллекций: текст читается плотнее --- */
.collections .col-cards .tier .tname{background:linear-gradient(to bottom,rgba(6,17,12,.72),rgba(6,17,12,0))}
.collections .col-cards .tier .body{background:linear-gradient(to bottom,rgba(6,17,12,0) 0%,rgba(6,17,12,.62) 16%,rgba(6,17,12,.93) 42%,rgba(6,17,12,.98) 100%)}
.page-arenda .col-cards .tier .tname{background:linear-gradient(to bottom,rgba(6,17,12,.72),rgba(6,17,12,0))}
.page-arenda .col-cards .tier .body{background:linear-gradient(to bottom,rgba(6,17,12,0) 0%,rgba(6,17,12,.6) 14%,rgba(6,17,12,.92) 40%,rgba(6,17,12,.98) 100%)}
.elki-cell::after{background:linear-gradient(to top,rgba(6,17,12,.6),transparent 45%)}
.elki-tag{background:rgba(6,17,12,.6)}

/* --- CTA: мягкий переход от формы к фото вместо резкой границы --- */
.cta-right-grad{background:linear-gradient(90deg,var(--bg-3) 0%,rgba(12,29,22,.72) 22%,rgba(12,29,22,.28) 48%,transparent 72%)}

/* --- прочее --- */
.mobile-menu{background:rgba(10,25,19,.98)}
.btn-gold{background:linear-gradient(135deg,#EBD5A2,#C29A55);color:#0F241B}
.btn-outline:hover{border-color:var(--gold)}
.smi-badge{background:rgba(7,19,14,.78)}
.smi-play{background:rgba(217,183,106,.94);color:#0F241B}
.pf-arrow:hover,.projm-arw:hover{background:var(--gold);color:#0F241B}
.projm-arw{background:rgba(11,27,20,.75)}


/* ВАРИАНТ 1 — «МЯГКАЯ ОГРАНКА»
   скругление + световая кромка сверху + глубокая мягкая тень + виньетка на фото */

.svc-card,.pf-item,.tier,.team-card,.smi-vcard,.smi-acard,.elki-cell,.rev-card{
  border-radius:10px;
  border-color:rgba(235,213,162,.16);
  box-shadow:
    0 26px 50px -26px rgba(0,0,0,.9),
    0 6px 16px -10px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* виньетка: края фото мягко тонут в фоне, граница перестаёт «резать» */
.svc-card::after,.pf-item::after,.team-card .pic::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 70px 14px rgba(6,17,12,.55);
}
.collections .col-cards .tier::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 80px 16px rgba(6,17,12,.5);
}

.svc-card:hover,.pf-item:hover,.team-card:hover,.smi-vcard:hover{
  border-color:rgba(235,213,162,.34);
  box-shadow:
    0 34px 64px -28px rgba(0,0,0,.95),
    0 0 30px -6px rgba(217,183,106,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.tier:hover{
  box-shadow:
    0 34px 64px -28px rgba(0,0,0,.95),
    0 0 34px -6px rgba(217,183,106,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
}


/* ----------------------------------------------------------------
   Карточки услуг («Наши услуги»): фото приближается при наведении
   (как в блоке «Коллекции»), а рамка карточки остаётся на месте.
   ---------------------------------------------------------------- */
.svc-card img,.svc-card .ph{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.svc-card:hover{transform:none}                 /* рамка не двигается */
.svc-card:hover img,.svc-card:hover .ph{transform:scale(1.06)}  /* фото «выезжает вперёд» */


/* ----------------------------------------------------------------
   Портфолио «Наши последние проекты»: сетка рядами вместо горизонтального
   слайдера. Кнопка «Смотреть все работы» догружает по 2 ряда, стрелки не нужны.
   ---------------------------------------------------------------- */
.portfolio .pf-track{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; overflow:visible; scroll-snap-type:none; padding-bottom:0; }
.portfolio .pf-item{ flex:0 0 auto; width:auto; scroll-snap-align:none; }
.portfolio .pf-slider .pf-arrow{ display:none; }

/* две кнопки под галереей: «Смотреть все работы» + «Свернуть» рядом, по центру */
.pf-all{ display:flex; gap:26px; justify-content:center; align-items:center; flex-wrap:wrap; }
.pf-all #pfLessBtn{ color:var(--text-2); }
.pf-all #pfLessBtn:hover{ color:var(--gold); }


/* ----------------------------------------------------------------
   Описание проекта в галерее: бегунок больше не налезает на текст.
   Резервируем место под скроллбар и делаем его тонким/золотистым.
   ---------------------------------------------------------------- */
.projm-desc{ padding-left:22px; padding-right:22px; scrollbar-gutter:stable both-edges;
  scrollbar-width:thin; scrollbar-color:rgba(217,183,106,.4) transparent; }
.projm-desc::-webkit-scrollbar{ width:8px; }
.projm-desc::-webkit-scrollbar-track{ background:transparent; }
.projm-desc::-webkit-scrollbar-thumb{ background:rgba(217,183,106,.38); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box; }
.projm-desc::-webkit-scrollbar-thumb:hover{ background:rgba(217,183,106,.6); background-clip:padding-box; }


/* ----------------------------------------------------------------
   Навигация «Услуги» → выпадающее меню (десктоп) + аккордеон (моб.)
   Три рубрики-хаба: Новогоднее оформление · Аренда · Купить ёлки и декор
   ---------------------------------------------------------------- */
.menu .has-drop{ position:relative; }
.menu .has-drop > a .caret{ font-style:normal; font-size:9px; margin-left:4px; opacity:.75; display:inline-block; }
/* невидимый «мостик», чтобы меню не закрывалось при переводе курсора вниз */
.menu .has-drop::after{ content:""; position:absolute; top:100%; left:0; right:0; height:14px; }
.menu .drop{
  position:absolute; top:100%; left:0; margin-top:12px; padding:8px; list-style:none; min-width:252px;
  background:rgba(10,25,19,.98); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 26px 50px -26px rgba(0,0,0,.9), 0 6px 16px -10px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px);
  transition:opacity .18s, transform .18s; z-index:70;
}
.menu .has-drop:hover .drop, .menu .has-drop:focus-within .drop{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.menu .drop li{ display:block; }
.menu .drop a{ display:block; padding:11px 15px; border-radius:8px; letter-spacing:.05em; color:var(--text-2); }
.menu .drop a:hover{ background:var(--card-2); color:var(--gold-2); }

/* мобильный аккордеон «Услуги» */
.mobile-menu .m-group{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.mobile-menu .m-acc{ background:none; border:none; cursor:pointer; font-family:var(--serif); font-size:26px;
  color:var(--text); display:inline-flex; align-items:center; gap:10px; }
.mobile-menu .m-acc i{ font-style:normal; font-size:15px; opacity:.7; transition:transform .2s; }
.mobile-menu .m-group.open .m-acc i{ transform:rotate(180deg); }
.mobile-menu .m-sub{ display:none; flex-direction:column; align-items:center; gap:14px; }
.mobile-menu .m-group.open .m-sub{ display:flex; }
.mobile-menu .m-sub a{ font-family:var(--serif); font-size:20px; color:var(--text-2); }


/* ----------------------------------------------------------------
   Хаб-страницы рубрик: карточки подразделов. Бейдж «Скоро» — для
   разделов, страницы которых ещё в работе (кликабельны на заявку).
   ---------------------------------------------------------------- */
.svc-badge{ position:absolute; top:14px; left:14px; z-index:3;
  background:rgba(217,183,106,.94); color:#0F241B;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:6px; }
.svc-card.svc-soon .cap h3{ color:#EDE7DA; }
.hub-grid.svc-grid{ margin-top:36px; }

/* блок «Услуги» на главной: 3 рубрики-хаба вместо 4 плоских карточек */
.services .svc-grid-rubrics{ grid-template-columns:repeat(3,1fr); }
@media(max-width:760px){ .services .svc-grid-rubrics{ grid-template-columns:1fr; } }

/* грид универсальной галереи покупательских страниц (тот же вид, что #arendaGrid) */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
@media(max-width:1100px){ .shop-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .shop-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }


/* ----------------------------------------------------------------
   FAQ на главной: «Ответы на популярные вопросы» — аккордеон на
   нативном <details>/<summary> (открытие без JS, стрелка поворачивается).
   ---------------------------------------------------------------- */
.faq{ padding:76px 0; background:var(--bg-3); }
.faq-list{ max-width:900px; margin:44px auto 0; display:flex; flex-direction:column; gap:14px; }
.faq-item{ border:1px solid var(--line-soft); border-radius:12px; background:var(--card);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9); overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 26px; font-family:var(--serif); font-size:clamp(18px,2vw,22px);
  color:var(--text); transition:color .2s; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover,.faq-item[open] summary{ color:var(--gold-2); }
.faq-chev{ width:22px; height:22px; flex:0 0 auto; color:var(--gold); transition:transform .28s ease; }
.faq-item[open] .faq-chev{ transform:rotate(180deg); }
.faq-a{ padding:0 26px 24px; color:var(--text-2); }
.faq-a p{ margin:0 0 12px; line-height:1.72; font-size:16px; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-a strong{ color:var(--gold-2); font-weight:600; }
@media(max-width:640px){ .faq{ padding:56px 0; } .faq-item summary{ padding:18px; font-size:17px; }
  .faq-a{ padding:0 18px 20px; } }