:root {
    --sgb-bg: #0c0b08;
    --sgb-bg-2: #14120f;
    --sgb-text: #f1efe7;
    --sgb-text-dim: #d7d2c5;
    --sgb-accent: #d1a85a;
    --sgb-accent-2: #7b5a2d;
    --sgb-border: rgba(255,255,255,.08);
    --sgb-radius: 14px;
    --sgb-radius-lg: 24px;
    --sgb-shadow: 0 10px 30px rgba(0,0,0,.35);
    --sgb-shadow-soft: 0 6px 18px rgba(0,0,0,.25);
    --sgb-font-sans: "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    --sgb-font-serif: "Playfair Display",Georgia,serif;
    --header-h: 70px;

    --hero-image: url("https://images.unsplash.com/photo-1542834369-f10ebf06d3cb?q=80&w=1600&auto=format&fit=crop");
    --about-image: url("https://spb.stargorodbrewery.ru/uploads/slides/ea83156b26e02e94e21fdccb37108526.jpg");
    --promo-image-1: url("https://spb.stargorodbrewery.ru/uploads/slides/0db4b99ae971ebccd2dc39583a7ef000.jpg");

    --beer-1: url("https://spb.stargorodbrewery.ru/uploads/category/pivo_lager.png");
    --beer-2: url("https://spb.stargorodbrewery.ru/uploads/category/pivo_chernoe.png");
    --beer-3: url("https://spb.stargorodbrewery.ru/uploads/category/pivo_pshenisch.png");
    --beer-4: url("https://spb.stargorodbrewery.ru/uploads/category/pivo_desyatka.png");

    --gal-1: url("https://spb.stargorodbrewery.ru/uploads/shows/1782906046/OozxJpYU53kBP8ueaevglxljNjut9kiySLB.jpg");
    --gal-2: url("https://spb.stargorodbrewery.ru/uploads/shows/1782906046/0c7l3Ohfx_dvNnWB-b0FAhez0MwkBTdZiHJ.jpg");
    --gal-3: url("https://spb.stargorodbrewery.ru/uploads/shows/1782906046/P9yMmzseRp1Hi9OdXW2w9LvZYFjgHfAi_5r.jpg");
    --gal-4: url("https://spb.stargorodbrewery.ru/uploads/shows/1782906046/HNkexPbFyLkOhj6KKIL9pnnap1iGmwet0hn.jpg");
    --gal-5: url("https://spb.stargorodbrewery.ru/uploads/shows/1782906046/Ro8zIR__Oxx__SPBOOJoxclvCCvgEq3IRNp.jpg");

    --logo: url("https://spb.stargorodbrewery.ru/public/img/logo.png");
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--sgb-bg);
}

.sgb-wrap {
    --pad-x: clamp(16px, 3vw, 36px);
    --max-w: {{1300}}px;
    position: relative;
    width: 100%;
    max-width: {{1300}}px;
    min-width: 0;
    margin: 0 auto;
    color: var(--sgb-text);
    background:
            radial-gradient(1000px 500px at 80% -100px,rgba(209,168,90,.08),transparent 60%),
            radial-gradient(800px 400px at 0% 10%,rgba(123,90,45,.08),transparent 60%),
            var(--sgb-bg);
    font-family: var(--sgb-font-sans);
}

.sgb-container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-right: var(--pad-x);
    padding-left: var(--pad-x);
}

.sgb-section {
    position: relative;
    padding: 12px 0;
}

.sgb-eyebrow {
    margin-bottom: 12px;
    color: var(--sgb-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sgb-h1,
.sgb-h2,
.sgb-h3 {
    font-family: var(--sgb-font-serif);
    line-height: 1.1;
}

.sgb-h1 {
    font-size: clamp(34px,5.4vw,56px);
    font-weight: 700;
}

.sgb-h2 {
    font-size: clamp(26px,3.8vw,36px);
    font-weight: 700;
}

.sgb-h3 {
    font-size: clamp(18px,2.6vw,22px);
    font-weight: 600;
}

.sgb-text-lg {
    color: var(--sgb-text-dim);
    font-size: clamp(15px,2.1vw,18px);
    line-height: 1.55;
}

.sgb-card {
    border: 1px solid var(--sgb-border);
    border-radius: var(--sgb-radius);
    background: linear-gradient(180deg,rgba(255,255,255,.04),transparent);
    backdrop-filter: blur(4px);
    box-shadow: var(--sgb-shadow-soft);
    transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
}

.sgb-card:hover {
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 12px 36px rgba(0,0,0,.4);
    transform: translateY(-3px);
}

.sgb-btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
            transform .2s ease,
            background-color .25s ease,
            box-shadow .25s ease,
            color .25s ease;
}

.sgb-btn:active {
    transform: translateY(1px);
}

.sgb-btn--primary {
    color: #1b140b;
    background: linear-gradient(180deg,var(--sgb-accent),#b3893f);
    box-shadow: 0 8px 24px rgba(209,168,90,.25);
}

.sgb-btn--primary:hover {
    box-shadow: 0 10px 30px rgba(209,168,90,.35);
    filter: saturate(1.05);
}

.sgb-btn--ghost {
    border: 1px solid var(--sgb-border);
    color: var(--sgb-text);
    background: transparent;
}

.sgb-btn--ghost:hover {
    border-color: rgba(255,255,255,.18);
}

/* HEADER */

.sgb-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(
            180deg,
            rgba(12,11,8,.92),
            rgba(12,11,8,.6),
            transparent
    );
    backdrop-filter: blur(6px);
    transition:
            background-color .25s ease,
            box-shadow .25s ease;
}

.sgb-header.is-scrolled {
    background: rgba(12,11,8,.96);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

.sgb-header__in {
    display: flex;
    width: 100%;
    min-height: var(--header-h);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 12px var(--pad-x);
}

.sgb-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sgb-text);
    text-decoration: none;
}

.sgb-logo__img {
    display: block;
    width: auto;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

.sgb-logo__txt {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.sgb-logo__title {
    font-family: var(--sgb-font-serif);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
}

.sgb-logo__sub {
    margin-top: 3px;
    color: var(--sgb-text-dim);
    font-size: 12px;
}

.sgb-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sgb-nav a,
.sgb-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--sgb-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition:
            background-color .2s ease,
            transform .2s ease;
}

.sgb-nav a:hover,
.sgb-nav__link:hover {
    background: rgba(255,255,255,.06);
    transform: translateY(-1px);
}

.sgb-nav__item {
    position: relative;
}

.sgb-caret {
    width: 14px;
    height: 14px;
    opacity: .8;
    transition: transform .2s ease;
}

.sgb-subnav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    min-width: 220px;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--sgb-border);
    border-radius: 12px;
    background: rgba(20,18,15,.96);
    box-shadow: var(--sgb-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
            opacity .2s ease,
            transform .2s ease;
}

@media (min-width:981px) {
    .sgb-nav__item:hover .sgb-subnav,
    .sgb-nav__item.is-open .sgb-subnav {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .sgb-nav__item:hover .sgb-caret,
    .sgb-nav__item.is-open .sgb-caret {
        transform: rotate(180deg);
    }
}

.sgb-subnav a {
    padding: 8px 10px;
}

.sgb-head-cta {
    margin-left: 6px;
}

.sgb-burger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sgb-border);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    cursor: pointer;
}

.sgb-burger span,
.sgb-burger::before,
.sgb-burger::after {
    display: block;
    width: 25px !important;
    height: 2px;
    border-radius: 2px;
    background: var(--sgb-text);
    content: "";
    transition:
            transform .2s ease,
            opacity .2s ease;
}
picture.sgm-hero-slide img {
     width:100%;
 }


.sgb-burger::before {
    transform: translateY(-6px);
}

.sgb-burger::after {
    transform: translateY(6px);
}

.sgb-burger.is-open span {
    opacity: 0;
}

.sgb-burger.is-open::before {
    transform: translateY(0) rotate(45deg);
}

.sgb-burger.is-open::after {
    transform: translateY(0) rotate(-45deg);
}

/* HERO */

.sgb-hero {
    position: relative;
    display: grid;
    min-height: auto;
    align-items: center;
    overflow: hidden;
    padding: 8px 0;
}

.sgb-hero__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
            linear-gradient(
                    180deg,
                    rgba(12,11,8,.6),
                    rgba(12,11,8,.65)
            ),
            radial-gradient(
                    60% 60% at 20% 10%,
                    rgba(209,168,90,.12),
                    transparent 60%
            ),
            var(--hero-image) center 30% / cover no-repeat;
    transform: scale(1.02);
    filter: saturate(.95) contrast(1.02);
}

.sgb-hero__in {
    position: relative;
    z-index: 1;
}

.sgb-hero__grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 8px;
}

.sgb-hero__lead {
    max-width: 890px;
}

.sgb-hero__lead > * + * {
    margin-top: 8px;
}

.sgb-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.sgb-hero__note {
    margin-top: 10px;
    color: var(--sgb-text-dim);
    font-size: 14px;
}

.sgb-hero__stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 12px;
}

.sgb-pill {
    padding: 10px;
    border: 1px solid var(--sgb-border);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    text-align: center;
}

.sgb-pill strong {
    display: block;
    font-family: var(--sgb-font-serif);
    font-size: 16px;
}

.sgb-hero__side {
    display: grid;
    align-self: stretch;
    gap: 8px;
}

.sgb-hero__tile {
    position: relative;
    min-height: 120px;
    overflow: hidden;
    border-radius: var(--sgb-radius);
    background:
            linear-gradient(180deg,rgba(255,255,255,.05),transparent);
}

.sgb-hero__tile-in {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(
            180deg,
            transparent,
            rgba(12,11,8,.4)
    );
}

.sgb-hero__tile h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.sgb-hero__tile p {
    margin: 0;
    color: var(--sgb-text-dim);
    font-size: 14px;
}

.sgb-hero__tile--events {
    background:
            linear-gradient(180deg,rgba(12,11,8,.15),rgba(12,11,8,.4)),
            url("https://spb.stargorodbrewery.ru/uploads/showslides/d450ce8b65492bc9bbbf1b9d81c29e07.jpg")
            center 40% / cover no-repeat;
}

.sgb-hero__tile--menu {
    background:
            linear-gradient(180deg,rgba(12,11,8,.2),rgba(12,11,8,.5)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d1a85a'/%3E%3Cstop offset='1' stop-color='%237b5a2d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23g)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Inter,Arial' font-size='160' font-weight='900' fill='%231b140b'%3E%D0%9C%D0%95%D0%9D%D0%AE%3C/text%3E%3C/svg%3E")
            center / cover no-repeat;
}

.sgb-hero__tile--beer {
    background:
            linear-gradient(180deg,rgba(12,11,8,.1),rgba(12,11,8,.45)),
            url("https://spb.stargorodbrewery.ru/uploads/slides/ea83156b26e02e94e21fdccb37108526.jpg")
            center 45% / cover no-repeat;
}

/* PROMO */

.sgb-promo {
    padding: 8px 0;
    border-bottom: 1px solid var(--sgb-border);
}

.sgb-promo__frame {
    position: relative;
    height: clamp(200px,40svh,420px);
    overflow: hidden;
    border: 1px solid var(--sgb-border);
    border-radius: var(--sgb-radius-lg);
    background: rgba(255,255,255,.03);
    box-shadow: var(--sgb-shadow);
}

.sgb-promo__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    height: 100%;
    overflow: hidden;
}

.sgb-promo__slide {
    position: relative;
    background: var(--promo-image-1) center / cover no-repeat;
}

/* ABOUT */

.sgb-about__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 8px;
}

.sgb-about__box {
    display: grid;
    gap: 10px;
}

.sgb-about__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--sgb-border);
    border-radius: var(--sgb-radius-lg);
    background: var(--about-image) center 40% / cover no-repeat;
    box-shadow: var(--sgb-shadow);
}

.sgb-list {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
}

.sgb-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sgb-text-dim);
    list-style: none;
}

.sgb-list li::before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--sgb-accent);
    box-shadow: 0 0 0 2px rgba(209,168,90,.15);
    content: "";
}

/* BEER */

.sgb-beer__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 6px;
}

.sgb-beer__card {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 14px;
    overflow: hidden;
}

.sgb-beer__thumb {
    position: relative;
    width: 100%;
    height: 170px;
    flex: 0 0 auto;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--sgb-border);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
}

.sgb-beer__thumb--contain {
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.sgb-beer__meta {
    display: flex;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    padding-top: 5px;
}
.sgb-gallery__item i {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    transition: transform .4s,filter .4s;
}
section#legacy .sgb-h2 {
    padding-bottom: 30px;
}
.sgb-badge {
    padding: 4px 5px;
    border: 1px solid var(--sgb-border);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    min-height: 43px;
    margin: auto;
    display: flex;
    align-items: center;
}

/* MENU */

.sgb-menu__grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    justify-content: stretch;
    gap: 16px;
    margin-top: 6px;
}

.sgb-menu__card {
    display: grid;
    gap: 8px;
    padding: 16px;
    text-align: center;
}

.sgb-menu__thumb {
    height: 180px;
    border: 1px solid var(--sgb-border);
    border-radius: 12px;
    background: center / cover no-repeat;
}

.sgb-menu__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

/* EVENTS */

.sgb-slider {
    position: relative;
    margin: 6px 52px 0;
}

.sgb-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px,1fr);
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
}

.sgb-slider__track::-webkit-scrollbar {
    height: 8px;
}

.sgb-slider__track::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(255,255,255,.15);
}

.sgb-slide {
    display: grid;
    min-height: 220px;
    gap: 8px;
    padding: 14px;
    scroll-snap-align: start;
}

.sgb-slider__ctrl,
.sgb-promo__ctrl {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-content: center;
    border: 1px solid var(--sgb-border);
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.05);
    cursor: pointer;
}

.sgb-slider__ctrl {
    top: 50%;
    transform: translateY(-50%);
}

.sgb-slider__ctrl--prev {
    left: -52px;
}

.sgb-slider__ctrl--next {
    right: -52px;
}

.sgb-promo__ctrl {
    top: 50%;
    background: rgba(0,0,0,.35);
    transform: translateY(-50%);
}

.sgb-promo__ctrl--prev {
    left: 10px;
}

.sgb-promo__ctrl--next {
    right: 10px;
}

/* GALLERY */

.sgb-gallery__grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 8px;
    margin-top: 6px;
}

.sgb-gallery__item {
    position: relative;
    padding-top: 70%;
    overflow: hidden;
    border: 1px solid var(--sgb-border);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
}

.sgb-gallery__item > i {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    transition: transform .3s ease;
}

.sgb-gallery__item:hover > i {
    transform: scale(1.05);
}

.sgb-gallery__item:nth-child(1),
.sgb-gallery__item:nth-child(2) {
    grid-column: span 3;
}

.sgb-gallery__item:nth-child(3),
.sgb-gallery__item:nth-child(4),
.sgb-gallery__item:nth-child(5) {
    grid-column: span 2;
}

/* CONTACTS */

.sgb-contacts__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 8px;
}

.sgb-contacts__card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.sgb-contacts__row {
    display: grid;
    gap: 4px;
}

.sgb-map {
    min-height: 300px;
    overflow: hidden;
    border-radius: var(--sgb-radius-lg);
}

.sgb-cta {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--sgb-border);
    border-radius: var(--sgb-radius-lg);
    background: linear-gradient(
            180deg,
            rgba(209,168,90,.12),
            rgba(255,255,255,.02)
    );
    text-align: center;
}

.sgb-cta small {
    color: var(--sgb-text-dim);
}

/* FOOTER */

.sgb-footer {
    padding: 12px 0;
    border-top: 1px solid var(--sgb-border);
    color: var(--sgb-text-dim);
    font-size: 14px;
}

.sgb-footer__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sgb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sgb-text);
    text-decoration: none;
}

.sgb-brand img {
    width: auto;
    height: 32px;
    object-fit: contain;
}

.sgb-socials {
    display: inline-flex;
    gap: 8px;
}

.sgb-ico-btn {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--sgb-border);
    border-radius: 10px;
    color: var(--sgb-text);
    background: rgba(255,255,255,.05);
}

/* АНИМАЦИИ */

@keyframes sgbFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.will-animate {
    opacity: 0;
    transform: translateY(14px);
}

.is-in {
    animation: sgbFadeUp .6s cubic-bezier(.2,.6,.2,1) both;
}

/* MOBILE */

@media (max-width:980px) {
    .sgb-nav {
        position: fixed;
        top: calc(var(--header-h) + 6px);
        right: var(--pad-x);
        left: var(--pad-x);
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 12px;
        border: 1px solid var(--sgb-border);
        border-radius: var(--sgb-radius);
        background: rgba(20,18,15,.95);
        box-shadow: var(--sgb-shadow);
    }

    .sgb-nav.is-open {
        display: flex;
    }

    .sgb-burger {
        display: inline-flex;
    }

    .sgb-head-cta {
        display: none;
    }

    .sgb-subnav {
        position: static;
        display: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .sgb-nav__item.is-open .sgb-subnav {
        display: grid;
    }

    .sgb-hero__grid,
    .sgb-about__grid,
    .sgb-contacts__grid {
        grid-template-columns: 1fr;
    }

    .sgb-hero__side {
        order: -1;
        grid-template-columns: repeat(2,1fr);
    }

    .sgb-beer__grid {
        grid-template-columns: repeat(2,1fr);
    }

    .sgb-slider__ctrl,
    .sgb-promo__ctrl {
        display: none;
    }
}

@media (max-width:560px) {
    :root {
        --header-h: 58px;
    }

    .sgb-wrap {
        --pad-x: 14px;
    }

    .sgb-header__in {
        padding: 8px var(--pad-x);
    }

    .sgb-logo__img {
        height: 34px;
    }

    .sgb-logo__title {
        font-size: 16px;
    }

    .sgb-logo__sub {
        display: none;
    }

    .sgb-nav {
        top: calc(var(--header-h) + 6px);
        right: 12px;
        left: 12px;
    }

    .sgb-nav a,
    .sgb-nav__link {
        padding: 12px 14px;
        font-size: 16px;
    }

    .sgb-hero__side,
    .sgb-beer__grid,
    .sgb-menu__grid {
        grid-template-columns: 1fr;
    }

    .sgb-hero__stats {
        grid-template-columns: repeat(2,1fr);
    }

    .sgb-promo__frame {
        height: clamp(180px,42svh,320px);
        border-radius: 16px;
    }

    .sgb-gallery__grid {
        grid-template-columns: repeat(2,1fr);
    }

    .sgb-gallery__item,
    .sgb-gallery__item:nth-child(1),
    .sgb-gallery__item:nth-child(2),
    .sgb-gallery__item:nth-child(3),
    .sgb-gallery__item:nth-child(4),
    .sgb-gallery__item:nth-child(5) {
        grid-column: span 2;
        padding-top: 60%;
    }

    .sgb-footer__in {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgb-btn {
        min-height: 44px;
        padding: 14px 18px;
        font-size: 15px;
    }
}

[id] {
    scroll-margin-top: calc(var(--header-h) + 12px);
}

/* СХЕМА ЗАЛА: СТЕНЫ, СЦЕНА И ПОДСВЕТКА СТОЛОВ */
.sgb-plan-table { cursor:pointer; outline:none; transform:none !important; transform-box:fill-box; transform-origin:center; transition:filter .2s ease; }
.sgb-plan-table:hover { transform:none !important; filter:brightness(1.12); }
.sgb-plan-table.is-selected { transform:none !important; filter:drop-shadow(0 0 5px rgba(255,241,157,.95)) brightness(1.25); }
.sgb-plan-table.is-selected .sgb-plan-table__shape { stroke:#fff3a8 !important; stroke-width:3 !important; }
.sgb-plan-table__number,.sgb-plan-table__capacity { pointer-events:none; }
.sgb-plan-table__shape { transition:fill .2s ease,stroke .2s ease,stroke-width .2s ease; }
.sgb-map-wall { fill:#63300f; stroke:#8a471b; stroke-width:2; }
.sgb-map-stage { fill:#713514; stroke:#a35418; stroke-width:2; }
.sgb-map-stage-text,.sgb-map-wc-text { fill:#f6e8b0; font-family:Arial,sans-serif; font-size:15px; font-weight:800; text-anchor:middle; dominant-baseline:middle; }
.sgb-map-wc { fill:#f0c72e; stroke:#a57e16; stroke-width:2; }
.sgb-map-bar { fill:#f2e3a1; stroke:#8d6c2c; stroke-width:2; }

/* ШИРИНА СТРАНИЦЫ ДО 1920 PX */
#stargorod { width:100%; max-width:{{1300}}px; min-width:0; margin:0 auto; }
#stargorod .sgb-container, #stargorod .sgb-header__in { width:100%; max-width:{{1300}}px; min-width:0; margin-left:auto; margin-right:auto; }
#stargorod .sgb-container { padding-left:var(--pad-x); padding-right:var(--pad-x); }
#stargorod .sgb-header__in { padding-left:var(--pad-x); padding-right:var(--pad-x); }
#stargorod .sgb-hero, #stargorod .sgb-promo, #stargorod .sgb-section, #stargorod .sgb-footer { width:100%; min-width:0; }
@media (min-width:1400px) { #stargorod { --pad-x:36px; } }

/* ДОПОЛНИТЕЛЬНАЯ ИНТЕРАКТИВНОСТЬ */
#stargorod .sgb-card,
#stargorod .sgb-hero__tile,
#stargorod .sgb-gallery__item,
#stargorod .sgb-pill {
    position: relative;
    overflow: hidden;
}
#stargorod .sgb-card::after,
#stargorod .sgb-hero__tile::after,
#stargorod .sgb-gallery__item::after,
#stargorod .sgb-pill::after {
    position:absolute; inset:0; pointer-events:none; content:"";
    border:1px solid transparent; border-radius:inherit;
    background:linear-gradient(120deg,transparent 20%,rgba(209,168,90,.16),transparent 75%) border-box;
    opacity:0; transition:opacity .35s ease;
}
#stargorod .sgb-card:hover::after,
#stargorod .sgb-hero__tile:hover::after,
#stargorod .sgb-gallery__item:hover::after,
#stargorod .sgb-pill:hover::after { opacity:1; }
#stargorod .sgb-card:hover,
#stargorod .sgb-hero__tile:hover { border-color:rgba(209,168,90,.42); box-shadow:0 14px 38px rgba(0,0,0,.48),0 0 22px rgba(209,168,90,.08); }
#stargorod .sgb-beer__card,
#stargorod .sgb-menu__card,
#stargorod .sgb-slide,
#stargorod .sgb-gallery__item { cursor:pointer; }
#stargorod .sgb-beer__thumb,
#stargorod .sgb-menu__thumb,
#stargorod .sgb-gallery__item > i { transition:transform .45s ease, filter .45s ease; }
#stargorod .sgb-beer__card:hover .sgb-beer__thumb,
#stargorod .sgb-menu__card:hover .sgb-menu__thumb,
#stargorod .sgb-gallery__item:hover > i { transform:scale(1.045); filter:saturate(1.12) brightness(1.08); }
#stargorod .sgb-ripple { position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.3); transform:scale(0); animation:sgbRipple .65s ease-out; }
@keyframes sgbRipple { to { transform:scale(4); opacity:0; } }
#stargorod .sgb-lightbox { position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.88); backdrop-filter:blur(8px); }
#stargorod .sgb-lightbox.is-open { display:flex; }
#stargorod .sgb-lightbox__image { max-width:min(1100px,94vw); max-height:88vh; border:1px solid rgba(209,168,90,.55); border-radius:16px; box-shadow:0 20px 80px #000; object-fit:contain; }
#stargorod .sgb-lightbox__close { position:absolute; top:18px; right:22px; width:44px; height:44px; border:1px solid rgba(255,255,255,.2); border-radius:12px; color:#fff; background:rgba(255,255,255,.08); font-size:28px; cursor:pointer; }
#stargorod .sgb-toast { position:fixed; right:20px; bottom:20px; z-index:100002; max-width:320px; padding:13px 16px; border:1px solid rgba(209,168,90,.45); border-radius:12px; color:#f1efe7; background:#211b12; box-shadow:0 12px 35px #000; opacity:0; transform:translateY(12px); transition:.25s ease; pointer-events:none; }
#stargorod .sgb-toast.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { #stargorod *,#stargorod *::before,#stargorod *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ДОПОЛНИТЕЛЬНЫЕ ПРАВКИ */
.sgb-club-panel { background:linear-gradient(180deg,rgba(12,11,8,.25),rgba(12,11,8,.78)),url("https://spb.stargorodbrewery.ru/uploads/star-guests/9b6e8aeacc7cc8b1e8b56f9d12181c34.jpg") center/cover no-repeat; }
.sgb-matches-panel { background:linear-gradient(180deg,rgba(12,11,8,.25),rgba(12,11,8,.78)),url("https://spb.stargorodbrewery.ru/uploads/showslides/d450ce8b65492bc9bbbf1b9d81c29e07.jpg") center/cover no-repeat; }
.sgb-club-panel,.sgb-matches-panel { min-height:190px; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.sgb-contacts__card { gap:8px; padding:13px; }
.sgb-contacts__row { grid-template-columns:105px minmax(0,1fr); align-items:center; gap:10px; }
.sgb-map { min-height:250px; }
.sgb-feedback-form__buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
.sgb-feedback-form__buttons .sgb-btn { width:100%; }
.sgb-footer__links { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
.sgb-footer__link { color:var(--sgb-text-dim); font-size:12px; text-decoration:none; }
.sgb-footer__link:hover { color:var(--sgb-accent); }
@media(max-width:700px){ .sgb-feedback-form__buttons{grid-template-columns:1fr;} .sgb-contacts__row{grid-template-columns:1fr;} }

/* Финальная настройка кнопок бронирования */
#stargorod .sgb-feedback-form__buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100%;
    gap: 10px;
    align-items: stretch;
}
#stargorod .sgb-feedback-form__buttons .sgb-btn {
    width: 100% !important;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
}
@media (max-width:700px) {
    #stargorod .sgb-feedback-form__buttons {
        grid-template-columns: 1fr !important;
    }
}

.slider-standalone-wrap .sgm-hero-carousel {

    height: clamp(230px,74vh,480px) !important;

}

.sgb-hero__note a{
    color:white;
}