:root{
    /* Brand */
    --brand: #2f9e63;       /* основной зелёный (чуть глубже/теплее) */
    --brand-soft: #eaf7f0;  /* мягкий hover */
    --page-bg: #f7f6f2;     /* “бумажный” фон */

    /* Layout offsets (fallbacks; JS перезапишет) */
    --header-h: 80px;       /* реальная высота fixed header */
    --letter-nav-h: 0px;    /* высота sticky ленты букв */
    --gap: 0px;            /* запас между header и лентой */
}

html, body { height: 100%; }

html {
    scroll-behavior: smooth;
}

body {
    background: var(--page-bg);
}

::selection {
    background: rgba(47, 158, 99, .18);
}

/* hide scrollbar for letter nav (optional) */
.letter-nav .flex::-webkit-scrollbar { display: none; }
.letter-nav .flex { -ms-overflow-style: none; scrollbar-width: none; }

/* main content always starts below fixed header (+ safe area for iOS notch) */
.site-main{
    padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}

/* sticky letter nav always sticks below header with safe gap */
.letter-nav{
    top: calc(var(--header-h) + env(safe-area-inset-top) + var(--gap));
}

/* when jumping to #letter-X, don't hide the title behind header + letter-nav */
.gmina-group{
    scroll-margin-top: calc(
        var(--header-h) + env(safe-area-inset-top) + var(--letter-nav-h) + 16px
    );
}

/* gmina */
/* Sticky blocks below fixed header */
.gmina-filterbar{
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top) + 12px);
    z-index: 40;
}

/* Active state for chips/toggles (важно: Tailwind CDN не “видит” классы, которые JS добавляет динамически) */
.g-chip.is-active{
    background: var(--brand-soft);
    border-color: rgba(47, 158, 99, .35);
    color: var(--brand);
}

.g-toggle.is-active{
    background: var(--brand-soft);
    border-color: rgba(47, 158, 99, .35);
    color: var(--brand);
}

/* Anchor jumps not hidden behind fixed header */
.scroll-target{
    scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top) + 14px);
}

/* hide horizontal scrollbar */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* Chips scroll affordance (mobile) */
.g-chipwrap{ position: relative; }

.g-chiprow{
    padding-right: 44px; /* место под подсказку */
    -webkit-overflow-scrolling: touch;
}

/* Gradient fades (видно, что можно свайпать) */
.g-chipwrap::before,
.g-chipwrap::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width: 22px;
    pointer-events:none;
    opacity: 0;
    transition: opacity .15s ease;
}

.g-chipwrap.is-overflow::after{ opacity: 1; }
.g-chipwrap.is-overflow:not(.at-start)::before{ opacity: 1; }

.g-chipwrap::before{
    left: 0;
    background: linear-gradient(to right, var(--page-bg) 40%, transparent);
}
.g-chipwrap::after{
    right: 0;
    background: linear-gradient(to left, var(--page-bg) 40%, transparent);
}

/* Hint */
.g-chiphint{
    position:absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #6b7280;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 999px;
    padding: 4px 8px;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.g-chipwrap.is-overflow .g-chiphint{ opacity: 1; }
.g-chipwrap.at-end .g-chiphint{ opacity: 0; }

/**/
/* Mobile chip scroller controls */
.g-chipwrap{ position: relative; }

.g-chiprow{
    -webkit-overflow-scrolling: touch;
}

/* Reserve space only when arrows are visible */
.g-chipwrap.has-right .g-chiprow{ padding-right: 44px; }
.g-chipwrap.has-left  .g-chiprow{ padding-left: 44px; }

.g-chipnav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 25px rgba(0,0,0,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    line-height:1;
    color:#374151;
}

.g-chipnav-left{ left: 6px; }
.g-chipnav-right{ right: 6px; }

.g-chipnav:active{ transform: translateY(-50%) translateY(1px); }

/* Desktop: no arrows ever */
@media (min-width: 768px){
    .g-chipnav{ display:none !important; }
}

/* это маленький фикс в свой CSS, чтобы скрыть полосу прокрутки в крошках, но оставить саму возможность скролла */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

html { scroll-behavior: smooth; }