/* Каркас: Sidebar 280 + Main 1160 = 1440 (Figma: Layout / Sidebar, Topbar, Footer) */
.l-shell{display:flex;align-items:flex-start;width:100%;min-height:100vh}
.l-main{flex:1 1 auto;min-width:0;background:var(--c-bg-page)}

/* ── Sidebar ───────────────────────────────────────────────── */
.l-sidebar{flex:0 0 var(--size-sidebar);width:var(--size-sidebar);align-self:stretch;
  background:var(--c-bg-sidebar);border-right:1px solid var(--c-border-subtle);
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.l-sidebar__inner{display:flex;flex-direction:column;align-items:center;padding:3.4rem 2.4rem 3.2rem}
.l-sidebar__logo{width:20.6rem;height:15.3rem;object-fit:contain;display:block}
.l-sidebar__slogan{width:23.2rem;margin-top:0;text-align:center;font:400 1.25rem/1.9rem var(--f-body);color:var(--c-text-muted)}
.l-sidebar__divider{width:23.2rem;height:0.1rem;background:var(--c-border-subtle);border:0;margin:0}
.l-sidebar__block{width:23.2rem}

.l-nav{width:23.2rem}
.l-nav__list,.l-nav__sub{display:flex;flex-direction:column;gap:0.2rem;list-style:none;margin:0;padding:0}
.l-nav__sub{margin-top:0.2rem}
.l-nav__li{display:block}
/* Авторський display у .l-nav__sub перебиває [hidden] з UA-стилів,
   тому ховаємо явно — інакше підменю згорнуте лише за атрибутом. */
.l-nav__sub[hidden]{display:none}
.l-nav__gap{height:1rem}
.l-nav__item{display:flex;align-items:center;gap:1.1rem;border-radius:1rem;color:var(--c-text-primary);text-decoration:none}
.l-nav__item:hover{background:var(--c-bg-cream);text-decoration:none}
.l-nav__item svg{flex:0 0 auto;color:var(--c-text-secondary)}
.l-nav__item--link{height:4.2rem;padding:0 1.2rem;font:500 1.5rem/2rem var(--f-body)}
.l-nav__item--link svg{width:1.9rem;height:1.9rem}
.l-nav__item--section{height:4.2rem;padding:0 1.2rem;font:600 1.4rem/2rem var(--f-body);letter-spacing:0.014rem}
.l-nav__item--section svg{width:1.9rem;height:1.9rem}
.l-nav__item--sub{height:3.6rem;padding:0 1.2rem 0 3.4rem;font:500 1.5rem/2rem var(--f-body)}
.l-nav__item--sub svg{width:1.8rem;height:1.8rem}
.l-nav__label{flex:1 1 auto;min-width:0}
.l-nav__chevron{width:1.6rem;height:1.6rem;flex:0 0 auto}
.l-nav__item.is-active{background:var(--c-brand-primary-soft);color:var(--c-brand-primary)}
.l-nav__item.is-active svg{color:var(--c-brand-primary)}

.l-side-group{display:flex;flex-direction:column;gap:1.4rem;width:23.2rem}
.l-side-group__title{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-secondary)}
.l-socials{display:flex;gap:1rem}
.l-socials__link{width:3.6rem;height:3.6rem;border-radius:var(--r-full);background:var(--c-brand-primary);
  color:#fff;display:flex;align-items:center;justify-content:center}
.l-socials__link svg{width:2.2rem;height:2.2rem}
.l-socials__link:hover{background:var(--c-brand-primary-hover)}

.l-contacts{display:flex;flex-direction:column;gap:0.8rem;width:23.2rem}
.l-contacts__mail{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-primary)}
.l-contacts__mail:hover{color:var(--c-brand-primary)}
.l-sidebar__copy{width:23.2rem;font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.l-sidebar__heart{width:3rem;height:3rem;display:grid;place-items:center;color:var(--c-brand-rose)}
.l-sidebar__heart svg{width:2.1rem;height:2rem;stroke-width:2.25}

/* ── Кнопки (Figma: Button) ────────────────────────────────── */
.c-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:1.2rem;text-decoration:none;white-space:nowrap}
.c-btn:hover{text-decoration:none}
.c-btn--m{height:4.8rem;padding:0 2.6rem;gap:0.9rem;font:600 1.5rem/2rem var(--f-body)}
.c-btn--s{height:3.8rem;padding:0 1.8rem;gap:0.7rem;font:600 1.3rem/1.8rem var(--f-body)}
.c-btn--primary{background:var(--c-brand-primary);color:var(--c-text-inverse)}
.c-btn--primary:hover{background:var(--c-brand-primary-hover)}
.c-btn--secondary{background:var(--c-bg-surface);color:var(--c-text-primary);box-shadow:inset 0 0 0 0.1rem var(--c-border-strong)}
.c-btn--secondary:hover{background:var(--c-bg-cream)}
.c-btn--tertiary{padding:0;color:var(--c-brand-primary)}
.c-btn--full{display:flex;width:100%}
.c-btn svg{width:1.8rem;height:1.8rem;flex:0 0 auto}

/* ── Topbar ────────────────────────────────────────────────── */
.l-topbar{display:flex;align-items:center;gap:2rem;height:7.8rem;padding:0 4.8rem;
  background:var(--c-bg-sidebar);border-bottom:1px solid var(--c-border-subtle);
  position:sticky;top:0;z-index:20}
.l-search{display:flex;align-items:center;gap:1rem;width:36rem;height:4.6rem;padding:0 1.8rem;
  background:var(--c-bg-surface);border:1px solid var(--c-border-subtle);border-radius:var(--r-full)}
.l-search svg{width:1.8rem;height:1.8rem;color:var(--c-text-muted);flex:0 0 auto}
.l-search__input{flex:1 1 auto;min-width:0;border:0;background:none;outline:0;
  font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-primary)}
.l-search__input::placeholder{color:var(--c-text-muted)}
.l-topbar__spacer{flex:1 1 auto}
.l-lang{display:flex;align-items:center;gap:0.8rem;padding-left:0.8rem;position:relative}
.l-lang__current{display:flex;align-items:center;gap:0.8rem;font:600 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.l-lang__current svg{width:1.6rem;height:1.6rem}

/* ── Footer ────────────────────────────────────────────────── */
.l-footer{display:flex;flex-direction:column;gap:3rem;padding:5.2rem 4.8rem 3rem;background:var(--c-bg-cream)}
.l-footer__cols{display:flex;gap:4rem;align-items:flex-start}
.l-footer__colrow{display:contents}
.l-footer__brand{flex:0 0 32rem;width:32rem;display:flex;flex-direction:column;gap:1.4rem}
.l-footer__logo{width:19rem;height:14.1rem;object-fit:contain}
.l-footer__slogan{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.l-footer__socials{padding-top:0.4rem}
.l-footer__col{display:flex;flex-direction:column;gap:1.1rem}
.l-footer__col--sections{flex:0 0 19rem;width:19rem}
.l-footer__col--works{flex:0 0 16rem;width:16rem}
.l-footer__col--contacts{flex:1 1 auto}
.l-footer__title{font:600 1.2rem/1.6rem var(--f-body);letter-spacing:0.096rem;color:var(--c-text-primary);text-transform:uppercase}
.l-footer__space{height:0.4rem}
.l-footer__link{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.l-footer__link:hover{color:var(--c-brand-primary)}
.l-footer__link--strong{color:var(--c-text-primary)}
.l-footer__divider{height:0.1rem;background:var(--c-border-strong);border:0;margin:0}
.l-footer__bottom{display:flex;align-items:center;gap:2rem}
.l-footer__copy{flex:1 1 auto;font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.l-footer__legal{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.l-footer__legal a{color:inherit}
.l-footer__sign{text-align:center;font:400 2.2rem/3rem var(--f-script);color:var(--c-brand-primary)}

/* Підменю розділів: у макеті між групами 10 px, усередині групи — 2 px.
   Власний gap .l-nav дає 2, тому доповнюємо 8. */
/* Розділ меню: посилання зліва, кнопка розкриття справа — обидва
   всередині однієї «пігулки» з макета. Кнопка має повну висоту
   рядка, щоб у неї було легко влучити. */
.l-nav__row{position:relative;display:flex;align-items:center;border-radius:1rem}
.l-nav__row:hover{background:var(--c-bg-cream)}
.l-nav__row.is-active{background:var(--c-brand-primary-soft)}
.l-nav__row .l-nav__item--section{flex:1 1 auto;min-width:0;background:none;padding-right:0.4rem}
.l-nav__row:hover .l-nav__item--section{background:none}
.l-nav__toggle{flex:0 0 auto;width:4rem;height:4.2rem;display:grid;place-items:center;
  color:var(--c-text-secondary);border-radius:1rem}
.l-nav__row.is-active .l-nav__toggle{color:var(--c-brand-primary)}
.l-nav__toggle:hover{color:var(--c-brand-primary)}
.l-nav__toggle[aria-expanded="true"] .l-nav__chevron{transform:rotate(180deg)}
.l-nav__chevron{transition:transform .2s ease}

/* Перемикач мови (Figma «Layout / Topbar» → «Мова»). */
.l-lang__current{cursor:pointer;border-radius:0.8rem;padding:0.2rem 0.4rem}
.l-lang__current:hover{color:var(--c-brand-primary)}
.l-lang__current[aria-expanded="true"] svg{transform:rotate(180deg)}
.l-lang__list{position:absolute;top:calc(100% + 0.8rem);right:0;z-index:30;min-width:16rem;margin:0;padding:0.6rem;list-style:none;
  background:var(--c-bg-surface);border-radius:1.2rem;box-shadow:0 0.8rem 2.4rem rgba(74,48,32,.10)}
.l-lang__list[hidden]{display:none}
.l-lang__item{display:flex;align-items:center;gap:1rem;padding:0.8rem 1rem;border-radius:0.8rem;font:500 1.4rem/2rem var(--f-body);color:var(--c-text-primary);text-decoration:none}
.l-lang__item:hover{background:var(--c-bg-cream);text-decoration:none}
.l-lang__item.is-current{color:var(--c-brand-primary)}
.l-lang__code{min-width:2.4rem;font-weight:600}