/* ==========================================================================
   Спільна шапка, меню-панель зліва і підвал — одні для всіх сторінок.
   Розмітка: _src/chrome/chrome.py (сторінки оновлює _src/chrome/apply.py).
   Поведінка: /js/site-chrome.js.
   Класи з префіксом sa- і достатньою вагою, щоб стилі сторінок їх не ламали.
   ========================================================================== */
:root{--sa-hdr-h:72px}
.sa-hdr,.sa-drawer,.sa-ftr{--ink:#221209;--ink2:#4a3424;--muted:#6b5440;--gold:#8a6d1e;--gold2:#b8952e;--cream:#F8E8C5;
  font-family:'EB Garamond',Georgia,serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.sa-hdr *,.sa-drawer *,.sa-ftr *{box-sizing:border-box}
/* Деякі сторінки мають загальні правила для button (ширина 100%, висота 52px) — наші кнопки від них захищені */
.sa-hdr button,.sa-drawer button{width:auto;min-height:0;max-width:none;letter-spacing:normal}
.sa-hdr a,.sa-drawer a,.sa-ftr a{text-decoration:none}
.sa-hdr :focus-visible,.sa-drawer :focus-visible,.sa-ftr :focus-visible{outline:2px solid #b8952e;outline-offset:2px;border-radius:3px}

/* Посилання «До вмісту» для клавіатури: видно лише у фокусі */
.sa-skip{position:fixed;left:12px;top:-60px;z-index:600;padding:10px 16px;border-radius:6px;background:#221209;color:#F8E8C5!important;
  font:600 16px/1 'EB Garamond',Georgia,serif;text-decoration:none;transition:top .2s}
.sa-skip:focus{top:12px}

/* ---------- Шапка ---------- */
.sa-hdr{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:clamp(12px,1.6vw,28px);
  width:100%;min-height:72px;margin:0;padding:10px clamp(16px,3.4vw,56px);
  /* той самий пергамент, що й фон сторінки: шапка не виглядає окремою смугою */
  background:#e8d5a3 url('/bg-parchment.jpg') center/cover fixed;
  border-bottom:1px solid rgba(138,109,30,.18);box-shadow:0 2px 12px rgba(34,18,9,.07);
  transition:box-shadow .25s,border-color .25s}
.sa-hdr.is-scrolled{border-bottom-color:rgba(138,109,30,.3);box-shadow:0 4px 18px rgba(34,18,9,.13)}

.sa-hdr .sa-menu-btn{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;height:44px;margin:0 0 0 -10px;padding:0 14px 0 10px;
  background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;color:var(--ink);
  font:600 13px/1 'Cinzel',Georgia,serif;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,border-color .2s}
.sa-hdr .sa-menu-btn:hover{border-color:rgba(138,109,30,.4);background:rgba(255,252,244,.32)}
.sa-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4.5px;width:22px}
.sa-burger i{display:block;height:1.7px;background:currentColor;border-radius:2px}

.sa-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ink)!important}
.sa-logo img{display:block;width:32px;height:33px}
.sa-logo span{font:600 16px/1 'Cinzel',Georgia,serif;letter-spacing:.16em;white-space:nowrap}

.sa-nav{display:flex;align-items:center;gap:clamp(18px,2.1vw,34px);margin:0 auto}
.sa-nav a{position:relative;padding:8px 0;font-size:18.5px;line-height:1.2;color:var(--ink2)!important;white-space:nowrap;transition:color .2s}
.sa-nav a::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1.5px;background:var(--gold2);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.sa-nav a:hover{color:var(--ink)!important}
.sa-nav a:hover::after,.sa-nav a[aria-current]::after{transform:scaleX(1)}
.sa-nav a[aria-current]{color:var(--ink)!important}

.sa-hdr-end{display:flex;align-items:center;gap:clamp(10px,1.3vw,20px);flex-shrink:0;margin-left:auto}
.sa-nav + .sa-hdr-end{margin-left:0}
.sa-hdr-lang .lang-sw a{min-width:36px;min-height:36px}
.sa-hdr .sa-acc{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;
  font:400 17.5px/1.2 'EB Garamond',Georgia,serif;color:var(--ink2)!important;white-space:nowrap;transition:color .2s}
.sa-acc:hover{color:var(--ink)!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(138,109,30,.5)}
.sa-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:6px;
  background:linear-gradient(135deg,#2a1608,#4a2e1c);border:1px solid #6b4a20;color:#F8E8C5!important;
  font:600 17px/1 'EB Garamond',Georgia,serif;letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 2px 10px rgba(34,18,9,.18);transition:transform .2s,box-shadow .2s,filter .2s}
.sa-cta:hover{filter:brightness(1.12);box-shadow:0 4px 16px rgba(34,18,9,.26)}
.sa-cta:active{transform:translateY(1px)}
.sa-cta-short{display:none}

/* Менше місця: спершу «Мій кабінет» іде в панель, потім пункти меню */
@media (max-width:1320px){.sa-hdr .sa-acc{display:none}}
/* У кабінеті кнопка «Вийти» лишається видимою; на телефоні вона в панелі «Меню» */
.sa-hdr .sa-acc.sa-acc-out{display:inline-flex}
@media (max-width:720px){.sa-hdr .sa-acc.sa-acc-out{display:none}}
@media (max-width:1180px){
  .sa-nav{display:none}
  .sa-hdr-end,.sa-nav + .sa-hdr-end{margin-left:auto}
}
/* Планшет і телефон: фон сторінки тут не «фіксований», тож шапка — напівпрозорий пергамент */
@media (max-width:900px){
  .sa-hdr{background:rgba(232,213,163,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  :root{--sa-hdr-h:64px}
  .sa-hdr{min-height:64px;padding:8px 16px;gap:10px}
}
@media (max-width:720px){
  .sa-menu-txt{display:none}
  .sa-hdr .sa-menu-btn{width:44px;padding:0;justify-content:center;margin-left:-6px}
  .sa-hdr-lang{display:none}
  .sa-logo span{font-size:14px;letter-spacing:.13em}
  .sa-logo img{width:28px;height:29px}
  .sa-logo{gap:8px}
  .sa-cta{min-height:42px;padding:0 16px;font-size:16px}
}
@media (max-width:420px){
  .sa-cta-long{display:none}
  .sa-cta-short{display:inline}
  .sa-hdr{gap:6px;padding:8px 12px}
  .sa-logo span{font-size:13px;letter-spacing:.1em}
  .sa-cta{padding:0 14px}
}
@media (max-width:340px){.sa-logo span{display:none}}

/* ---------- Панель «Меню» (зліва) ---------- */
.sa-drawer{position:fixed;inset:0;z-index:500;visibility:hidden;transition:visibility 0s .32s}
.sa-drawer.is-open{visibility:visible;transition:visibility 0s}
.sa-drawer-bg{position:absolute;inset:0;background:rgba(34,18,9,.46);opacity:0;transition:opacity .3s}
.sa-drawer.is-open .sa-drawer-bg{opacity:1}
.sa-drawer-panel{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:min(390px,88vw);
  background:#f1dba2 url('/bg-parchment-tile.jpg') repeat;background-size:400px 400px;
  box-shadow:10px 0 36px rgba(34,18,9,.28);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transform:translateX(-104%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.sa-drawer.is-open .sa-drawer-panel{transform:none}
.sa-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 12px 10px 22px;
  border-bottom:1px solid rgba(138,109,30,.25)}
.sa-drawer .sa-drawer-x{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;
  background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;color:var(--ink);font-size:32px;line-height:1}
.sa-drawer-x:hover{border-color:rgba(138,109,30,.4);background:rgba(255,252,244,.32)}
.sa-drawer-cta{display:flex;margin:18px 22px 4px}
.sa-drawer-nav{padding:4px 0 10px}
.sa-dgroup{padding:16px 22px 4px}
.sa-dgroup-t{margin:0 0 4px;font:600 12px/1.2 'Cinzel',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sa-dgroup a{position:relative;display:flex;align-items:center;min-height:44px;padding:8px 0;
  font-size:19px;line-height:1.25;color:var(--ink)!important;border-bottom:1px solid rgba(138,109,30,.14);transition:color .2s,padding .2s}
.sa-dgroup a:last-child{border-bottom:0}
.sa-dgroup a:hover{color:var(--gold)!important;padding-left:6px}
.sa-dgroup a[aria-current]{color:var(--gold)!important;font-weight:600}
.sa-dgroup a[aria-current]::before{content:'';position:absolute;left:-22px;top:10px;bottom:10px;width:3px;border-radius:0 2px 2px 0;background:var(--gold2)}
.sa-drawer-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:auto;
  padding:16px 22px calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(138,109,30,.25)}
.sa-drawer .sa-drawer-acc{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer;
  font:400 18px/1.2 'EB Garamond',Georgia,serif;color:var(--ink2)!important;
  text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(138,109,30,.45)!important}
html.sa-lock,html.sa-lock body{overflow:hidden}

/* ---------- Підвал ---------- */
.sa-ftr{position:relative;margin:clamp(48px,6vw,96px) 0 0;padding:clamp(40px,4.4vw,64px) clamp(16px,5vw,72px) 26px;
  border-top:1px solid rgba(138,109,30,.32);background:rgba(255,248,230,.16);text-align:left}
.sa-ftr-in{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:clamp(22px,3vw,48px);max-width:1280px;margin:0 auto}
.sa-ftr-brand .sa-logo span{font-size:17px}
.sa-ftr-tag{margin:10px 0 0;font-style:italic;font-size:16px;color:var(--muted)}
.sa-ftr-desc{margin:14px 0 0;max-width:34ch;font-size:17px;line-height:1.55;color:var(--ink2)}
.sa-ftr-mail{display:inline-block;margin-top:16px;font-size:17px;color:var(--ink)!important;
  text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(138,109,30,.45)!important}
.sa-ftr-social{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.sa-ftr-social a{font-size:16px;color:var(--muted)!important}
.sa-ftr-social a:hover{color:var(--ink)!important}
.sa-ftr-t{margin:4px 0 12px;font:600 13px/1.2 'Cinzel',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.sa-ftr-col a{display:block;padding:6px 0;font-size:17px;line-height:1.35;color:var(--ink2)!important;transition:color .2s}
.sa-ftr-col a:hover{color:var(--ink)!important;text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(138,109,30,.5)!important}
.sa-ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;max-width:1280px;margin:34px auto 0;padding-top:18px;
  border-top:1px solid rgba(138,109,30,.2);font-size:15px;color:var(--muted)}
.sa-ftr-seller:empty{display:none}
.sa-ftr-note{max-width:1280px;margin:10px auto 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:1060px){
  .sa-ftr-in{grid-template-columns:repeat(4,1fr)}
  .sa-ftr-brand{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:28px;align-items:start}
  .sa-ftr-brand > *{grid-column:2}
  .sa-ftr-brand > .sa-logo{grid-column:1;grid-row:1/span 5}
  .sa-ftr-tag{margin-top:2px}
  .sa-ftr-desc{max-width:60ch}
}
@media (max-width:720px){
  .sa-ftr{padding:36px 18px 24px}
  .sa-ftr-in{grid-template-columns:1fr 1fr;gap:26px 20px}
  .sa-ftr-brand{display:block}
  .sa-ftr-col a{padding:8px 0;font-size:17px}
  .sa-ftr-bottom{flex-direction:column}
}
@media (max-width:360px){.sa-ftr-in{grid-template-columns:1fr}}

/* Вхід, реєстрація, 404: картка по центру між шапкою й підвалом */
body.sa-auth{display:block!important;padding:0!important}
.sa-auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:calc(100vh - var(--sa-hdr-h));padding:clamp(28px,5vw,72px) 16px}
.sa-auth-main:focus{outline:none}
body.sa-auth .sa-ftr{margin-top:0}

/* Перехід із меню до розділу: заголовок не ховається під липкою шапкою */
/* :where — нульова вага: власні правила сторінки (напр. у звіті) мають перевагу */
:where([id]){scroll-margin-top:calc(var(--sa-hdr-h) + 16px)}

@media (prefers-reduced-motion:reduce){
  .sa-drawer,.sa-drawer-bg,.sa-drawer-panel,.sa-nav a::after,.sa-dgroup a{transition:none!important}
}
@media print{.sa-hdr,.sa-drawer,.sa-skip,.sa-ftr{display:none!important}}
#sa-main:focus{outline:none}