:root,
:root.light {
    --bg-color: var(--tg-theme-bg-color, #FFFFFF);
    --popover-bg-color: var(--tg-theme-bg-color, #FFFFFF);
    --text-color: var(--tg-theme-text-color, #333333);
    --accent-color: #54200C;
    --on-accent-color: #FFFFFF;
    --divider-color: #80808025;
    --ripple-color: #80808040;
    --success-color: #54200C;
    --warning-color: #FFD775;
    --error-color: #F45B55;
    --shimmer-color-1: #555555;
    --shimmer-color-2: #000000;
}

:root.dark {
    --bg-color: var(--tg-theme-secondary-bg-color, var(--tg-theme-bg-color, #121212));
    --popover-bg-color: var(--tg-theme-bg-color, #242424);
    --text-color: var(--tg-theme-text-color, #FFFFFF);
    --divider-color: #FFFFFF15;
    --ripple-color: #FFFFFF30;
    --shimmer-color-1: #D0D0D0;
    --shimmer-color-2: #FFFFFF;
}

body {
    margin: 0;
    color-scheme: var(--tg-color-scheme);
    color: var(--text-color);
    background-color: var(--bg-color);
}

h1 {
    width: fit-content;
    min-width: 45%;
    min-height: 1em;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 24px;
    border-radius: 8px;
    display: block;
}

h2 {
    width: fit-content;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 500;
    border-radius: 8px;
}

h3 {
    width: fit-content;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
}

h6 {
    width: fit-content;
    min-width: 45%;
    min-height: 1em;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
}

p {
    width: fit-content;
    min-width: 90%;
    min-height: 1em;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    white-space: wrap;
    opacity: 0.36;
    border-radius: 8px;
}

button {
    color: var(--text-color);
}

p.small {
    font-size: 11px;
}

.cover {
    width: 100%;
    height: calc(100vw * 3 / 4);
    object-fit: cover;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.page {
    width: 100vw;
    min-height: 100%;
    position: absolute;
    background-color: var(--bg-color);
    box-shadow: 0 4px 8px 0 rgba(160, 160, 160, 0.1), 0 6px 20px 0 rgba(160, 160, 160, 0.1);
}

.icon-button {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-color: inherit;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none;
}

.icon-button.small {
    width: 32px;
    height: 32px;
    font-size: 20px;
}



/* Cafe info */

.cafe-logo-container {
    position: absolute;
    width: 72px;
    height: 72px;
    right: 0;
    margin-right: 40px;
    margin-top: calc(100vw * 3 / 4 - 84px);
    border-radius: 36px;
    background-color: var(--popover-bg-color);
    box-shadow: inset 
        0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
        0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
        0 3.5px 6px hsla(230, 13%, 9%, 0.09);
    z-index: 2;
}

.cafe-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.cafe-info-container {
    position: relative;
    z-index: 1;
    width: 100vw - 32px;
    margin-left: 16px;
    margin-top: -48px;
    margin-right: 16px;
    border-radius: 24px;
    background-color: var(--popover-bg-color);
    box-shadow: inset 
        0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
        0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
        0 3.5px 6px hsla(230, 13%, 9%, 0.09);
    padding: 24px;
}

.cafe-kitchen-categories {
    min-height: 1em;
    margin-top: 2px;
}

.cafe-parameters-container {
    min-height: calc(1em + 4px);
    display: flex;
    margin-top: 12px;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
}

.cafe-parameter-container {
    display: flex;
    align-items: center;
}

.cafe-parameter-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.cafe-parameter-value {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    opacity: 0.72;
}

.cafe-status {
    padding: 4px 16px;
    background-color: var(--success-color);
    border-radius: 6px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}



/* Sections (e.g. categories or popular */

.cafe-section-container {
    margin-top: 24px;
}

.cafe-section-title {
    margin-left: 16px;
    margin-right: 16px;
}

.cafe-section-horizontal {
    padding: 12px 16px;
    overflow-x: scroll;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

.cafe-section-horizontal::-webkit-scrollbar {
    display: none;
}

.cafe-section-vertical {
    padding: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}



/* Category item */

.cafe-category-container {
    min-width: 56px;
    height: 56px;
    padding: 12px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cafe-category-icon {
    width: 32px;
    height: 32px;
    opacity: 0.36;
}

.cafe-category-name {
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #212427;
    opacity: .72;
}



/* Cafe item*/

.cafe-item-container {
    max-width: 224px;
    width: calc((100vw - 16px * 3) / 2);
}

.cafe-item-image {
    max-width: 224px;
    max-height: 168px;
    width: calc((100vw - 16px * 3) / 2);
    height: calc((100vw - 16px * 3) / 2 * 3 / 4);
    object-fit: cover;
    border-radius: 16px;
}

.cafe-item-name {
    margin-top: 8px;
    margin-bottom: 4px;
}

.cafe-item-description {
    margin-top: 2px;
}



/* Cafe item details */

.cafe-item-details-container {
    height: 100vh;
}

.cafe-item-details-content {
    /* Quantity selector container minmimum height x2 */
    padding-bottom: 128px;
}

.cafe-item-details-quantity-selector-value {
    padding: 8px 32px;
    background-color: var(--divider-color);
    border-radius: 16px;
}

.cafe-item-details-title-container {
    margin: 16px 16px 0 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.cafe-item-details-name {
    margin-right: 16px;
    flex-grow: 1;
}

.cafe-item-details-selected-variant-weight {
    min-width: 2em;
    opacity: .72;
}

.cafe-item-details-description {
    min-width: calc(100% - 32px);
    min-height: 3em;
    margin: 16px 16px 0 16px;
}

.cafe-item-details-section-title {
    margin: 16px 16px 0 16px;
}

.cafe-item-details-section-price {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 16px;
    padding: 0 16px;
}

.cafe-item-details-variants {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 8px;
}

.cafe-item-details-variant {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 8px 16px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    background-color: var(--bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    transition: background-color 0.3s linear;
}

.cafe-item-details-variant.selected {
    color: var(--on-accent-color);
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.cafe-item-details-selected-variant-price {
    min-width: 3em;
    min-height: 1em;
}

.cafe-item-details-quantity-selector-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 64px;
    background-color: var(--popover-bg-color);
    box-shadow: inset 
        0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
        0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
        0 3.5px 15px hsla(230, 13%, 9%, 0.09);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}



/* Cart item */

.cart-items-container {
    min-height: 0;
    padding-top: 8px;
}

.cart-item-container {
    display: flex;
    flex-wrap: nowrap;
    padding: 8px 16px;
}

.cart-item-image {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
}

.cart-item-info-container {
    flex: 1;
    padding: 0 16px;
    white-space: wrap;
}

.cart-item-name {
    margin-top: 4px;
}

.cart-item-description {
    margin-top: 2px;
}

.cart-item-cost {
    margin-top: 4px;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--accent-color);
}

.cart-item-quantity-container {
    height: 56px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.cart-item-quantity {
    min-width: 28px;
    height: 28px;
    margin: 0 12px;
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 28px;
    color: var(--on-accent-color);
    background-color: var(--accent-color);
    border-radius: 14px;
    text-align: center;
}

.cart-empty-placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: -88px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cart-empty-placeholder h3 {
    margin-top: -88px;
    text-align: center;
}

.cart-empty-placeholder p {
    margin-top: 4px;
    text-align: center;
}



/* Common (effect, animations, etc.) */

.snackbar {
    display: block;
    position: fixed;
    bottom: 16px;
    left: 0;
    right: 0;
    margin: 0 16px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: var(--on-accent-color);
    background-color: var(--accent-color);
    padding: 16px 24px;
    border-radius: 16px;
    z-index: 3;
    opacity: 0;
    transform: scale(0.24);
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--ripple-color);
    transform: scale(0);
}

.shimmer {
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, var(--shimmer-color-1) 8%, var(--shimmer-color-2) 18%, var(--shimmer-color-1) 33%);
    background-size: 1200px 100%;
    color: transparent;
    opacity: .075;
}
  
@-webkit-keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}

/* ---------- Granny Cinnamon: язык, оформление заказа, кнопка для браузера ---------- */
.lang-chooser {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background-color: var(--bg-color);
    text-align: center;
}
.lang-chooser-logo { width: 160px; height: 160px; object-fit: contain; }
.lang-chooser p { opacity: 0.6; margin-bottom: 12px; }
.lang-chooser button {
    width: 100%;
    max-width: 320px;
    height: 56px;
    border: none;
    border-radius: 16px;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #54200C;
}
.lang-switch {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.lang-pill, .lang-menu button {
    padding: 8px 14px;
    border: none;
    border-radius: 18px;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #54200C;
    background-color: #FFFFFFF0;
}
.lang-pill { box-shadow: 0 2px 8px #00000040; }
.lang-pill::after { content: ' ▾'; opacity: 0.6; }
.lang-menu {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 16px #00000040;
}
.lang-menu button { border-radius: 0; text-align: left; background-color: #FFFFFF; }
.lang-menu button + button { border-top: 1px solid #54200C20; }
.fallback-main-button {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    height: 56px;
    border: none;
    border-radius: 16px;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #54200C;
}
.fallback-main-button:disabled { opacity: 0.6; }
.lang-chooser, .lang-chooser button, .lang-switch, .fallback-main-button, .checkout-input, .checkout-container { font-family: 'Rubik', sans-serif; }
.checkout-container { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 128px 16px; }
.checkout-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--divider-color);
    border-radius: 14px;
    font: inherit;
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--popover-bg-color);
    resize: none;
}
.checkout-points { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.checkout-points input { width: 20px; height: 20px; accent-color: #54200C; }
.checkout-total { display: flex; justify-content: space-between; font-size: 20px; padding-top: 4px; }
.checkout-note { opacity: 0.6; }

/* Обложка главной: цветной логотип на фирменном коричневом, без обрезки */
#cafe-cover {
    object-fit: contain;
    box-sizing: border-box;
    padding: 48px 24px 60px 24px;
    /* кухня пекарни под коричневой полупрозрачной заливкой, сверху логотип */
    background: linear-gradient(rgba(84, 32, 12, 0.80), rgba(84, 32, 12, 0.80)), url('../images/kitchen.webp') center / cover #54200C;
}
.cafe-logo-container { display: none; }

/* ---------- бургер-меню и выезжающие разделы ---------- */
.burger {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 4;
    width: 40px;
    height: 36px;
    padding: 9px 10px;
    border: none;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #FFFFFFF0;
    box-shadow: 0 2px 8px #00000040;
}
.burger span { display: block; height: 2px; border-radius: 2px; background-color: #54200C; }
.drawer-shade {
    position: fixed;
    inset: 0;
    z-index: 6;
    background-color: #00000066;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.drawer-shade.open { opacity: 1; pointer-events: auto; }
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 7;
    width: 78%;
    max-width: 320px;
    padding: 24px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #54200C;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
.drawer.open { transform: translateX(0); }
.drawer-logo { width: 120px; height: 120px; object-fit: contain; align-self: center; }
.drawer-items { display: flex; flex-direction: column; }
.drawer-items button {
    padding: 16px 8px;
    border: none;
    border-bottom: 1px solid #FFFFFF25;
    text-align: left;
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #FFFFFF;
    background: none;
}
.sheet {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    font-family: 'Rubik', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.sheet.open { transform: translateY(0); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 0 16px 32px 16px; display: flex; flex-direction: column; gap: 12px; line-height: 1.45; }
.sheet-card { padding: 14px 16px; border-radius: 16px; background-color: var(--popover-bg-color); border: 1px solid var(--divider-color); display: flex; flex-direction: column; gap: 6px; }
.sheet-center { align-items: center; text-align: center; }
.sheet-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-stat { padding: 6px 0; border-bottom: 1px solid var(--divider-color); }
.sheet-badge { padding: 3px 10px; border-radius: 10px; font-size: 13px; color: #FFFFFF; background-color: #54200C; white-space: nowrap; }
.sheet-big { font-size: 34px; font-weight: 500; color: #54200C; }
.sheet-muted { opacity: 0.6; font-size: 14px; }
.sheet-link { padding: 12px 14px; border-radius: 12px; word-break: break-all; font-size: 14px; background-color: var(--popover-bg-color); border: 1px dashed #54200C80; }
.sheet-button { flex: 1; height: 48px; border: none; border-radius: 14px; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 500; color: #FFFFFF; background-color: #54200C; }
.sheet-button.secondary { color: #54200C; background-color: #54200C1A; }
.sheet-body p { margin: 0; font-size: 16px; color: var(--text-color); opacity: 0.85; }
.sheet-body h4 { margin: 8px 0 0 0; }

/* =====================================================================
   Стекло: оформление в духе новых интерфейсов Apple (Liquid Glass).
   Полупрозрачные панели с размытием фона, капсулы, мягкие блики.
   Тема одна, тёплая и светлая, независимо от темы Telegram — так стекло выглядит одинаково у всех.
   ===================================================================== */
:root, :root.light, :root.dark {
    --text-color: #2B1A12;
    --bg-color: #F6ECE1;
    --popover-bg-color: rgba(255, 255, 255, 0.46);
    --divider-color: rgba(84, 32, 12, 0.12);
    --ripple-color: rgba(84, 32, 12, 0.18);
    --shimmer-color-1: #E9D8C6;
    --shimmer-color-2: #F8EEE3;
    --glass-bg: rgba(255, 255, 255, 0.40);
    --glass-bg-strong: rgba(255, 255, 255, 0.62);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-blur: blur(22px) saturate(180%);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px rgba(84, 32, 12, 0.16);
    --brown-glass: rgba(84, 32, 12, 0.80);
    --font: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
    color-scheme: light;
}
html { background: #F6ECE1; }
body, .page, .sheet, .lang-chooser {
    /* тёплые цветные пятна под стеклом: без них размытию нечего преломлять */
    background:
        radial-gradient(70% 38% at 8% 4%, #FBD9AE 0%, rgba(251, 217, 174, 0) 62%),
        radial-gradient(60% 34% at 100% 30%, #EDB98C 0%, rgba(237, 185, 140, 0) 60%),
        radial-gradient(80% 40% at 0% 68%, #F3C9A8 0%, rgba(243, 201, 168, 0) 62%),
        radial-gradient(90% 46% at 70% 100%, #D9A27A 0%, rgba(217, 162, 122, 0) 66%),
        #F6ECE1;
}
.page { box-shadow: none; }
body, button, input, textarea, h1, h2, h3, h4, h6, p,
.cafe-parameter-value, .cafe-status, .cafe-category-name, .cafe-item-details-variant, .cart-item-cost, .cart-item-quantity,
.snackbar, .lang-chooser, .lang-chooser button, .lang-pill, .lang-menu button, .fallback-main-button,
.checkout-input, .checkout-container, .drawer-items button, .sheet, .sheet-button {
    font-family: var(--font);
}
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
h2 { font-weight: 700; letter-spacing: -0.3px; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
h6 { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; }
p { opacity: 0.58; }

/* общий рецепт стекла */
.cafe-info-container, .cafe-category-container, .cafe-item-container, .cart-item-container,
.cafe-item-details-quantity-selector-container, .checkout-input, .sheet-card, .sheet-link,
.lang-pill, .burger, .lang-menu, .cafe-item-details-variant {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* главная */
#cafe-cover { border-radius: 0 0 40px 40px; padding: 56px 24px 68px 24px; }
.cafe-info-container { margin-top: -56px; border-radius: 30px; background: var(--glass-bg-strong) !important; }
.cafe-status { padding: 5px 16px; border-radius: 999px; background: var(--brown-glass); font-weight: 600; }
.cafe-section-container { margin-top: 26px; }
.cafe-category-container { min-width: 64px; height: 64px; border-radius: 24px; }
.cafe-category-icon { opacity: 0.7; }
.cafe-category-name { color: var(--text-color); opacity: 0.8; font-size: 13px; font-weight: 500; }
.cafe-item-container { box-sizing: border-box; padding: 8px 8px 12px 8px; border-radius: 28px; }
.cafe-item-image { width: 100%; max-width: none; height: auto; max-height: none; aspect-ratio: 4 / 3; border-radius: 21px; }
.cafe-item-name, .cafe-item-description { margin-left: 6px; margin-right: 6px; white-space: normal; }
.cafe-section-horizontal { padding-top: 14px; padding-bottom: 22px; }

/* карточка товара */
.cover { border-radius: 0 0 36px 36px; }
.cafe-item-details-variant { padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text-color); }
.cafe-item-details-variant.selected { background: var(--brown-glass) !important; border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; }
.cafe-item-details-quantity-selector-container { left: 12px; width: calc(100% - 24px); bottom: 12px; border-radius: 32px; box-sizing: border-box; }
.cafe-item-details-quantity-selector-value { background: rgba(84, 32, 12, 0.10); border-radius: 999px; }
.icon-button { background: transparent; }

/* корзина и оформление */
.cart-item-container { margin: 8px 16px; padding: 10px 12px; border-radius: 26px; }
.cart-item-image { border-radius: 18px; }
.cart-item-quantity { background: var(--brown-glass); }
.checkout-input { border-radius: 20px; background: var(--glass-bg-strong) !important; }
.checkout-input::placeholder { color: rgba(43, 26, 18, 0.45); }
.checkout-total { font-weight: 700; }

/* плавающие элементы */
.lang-pill, .burger { color: var(--text-color); background: var(--glass-bg-strong) !important; }
.lang-pill { border-radius: 999px; }
.burger { width: 44px; height: 40px; border-radius: 999px; }
.burger span { background-color: var(--text-color); }
.lang-menu { border-radius: 22px; background: var(--glass-bg-strong) !important; }
.lang-menu button { background: transparent; color: var(--text-color); }
.lang-menu button + button { border-top: 1px solid var(--divider-color); }
.fallback-main-button, .lang-chooser button, .sheet-button {
    border-radius: 999px;
    background: var(--brown-glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 28px rgba(84, 32, 12, 0.32);
    font-weight: 600;
    letter-spacing: 0.2px;
}
.sheet-button.secondary { color: var(--text-color); background: var(--glass-bg-strong); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
.snackbar { border-radius: 999px; background: var(--brown-glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, 0.25); }

/* выезжающее меню — парящая стеклянная панель */
.drawer-shade { background-color: rgba(43, 26, 18, 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer {
    top: 10px;
    bottom: 10px;
    left: 10px;
    border-radius: 36px;
    background: rgba(84, 32, 12, 0.66);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 20px 50px rgba(43, 26, 18, 0.40);
    transform: translateX(-115%);
}
.drawer-items button { border-bottom-color: rgba(255, 255, 255, 0.16); font-weight: 600; }

/* разделы меню */
.sheet { -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.sheet-card { border-radius: 26px; }
.sheet-link { border-radius: 18px; border: 1px dashed rgba(84, 32, 12, 0.35); }
.sheet-badge { border-radius: 999px; background: var(--brown-glass); }
.sheet-big { font-weight: 700; letter-spacing: -0.8px; }
.sheet-body p { opacity: 0.8; }
.lang-chooser h2 { font-size: 26px; }
.cafe-item-details-selected-variant-price, .cafe-item-details-selected-variant-weight { white-space: nowrap; min-width: 0; }
.cafe-item-details-section-price { gap: 12px; }
/* в обычном браузере своя кнопка внизу — счётчик количества поднимаем над ней */
.no-tg .cafe-item-details-quantity-selector-container { bottom: 86px; }
.no-tg .cafe-item-details-content { padding-bottom: 190px; }

/* промокод в корзине */
.checkout-promo { display: flex; gap: 8px; }
.checkout-promo .checkout-input { flex: 1; min-width: 0; text-transform: uppercase; }
.checkout-promo .checkout-input::placeholder { text-transform: none; }
.checkout-promo-button {
    padding: 0 18px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--brown-glass);
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.checkout-promo-applied {
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 10px 16px;
    border-radius: 20px;
    font-weight: 600;
    color: #54200C;
    background: rgba(84, 32, 12, 0.10);
    border: 1px dashed rgba(84, 32, 12, 0.35);
}
.checkout-discount { justify-content: space-between; font-size: 16px; color: #54200C; }

/* бургер: панель по высоте содержимого, значки у пунктов, подпись внизу */
.drawer { bottom: auto; padding: 22px 16px 14px 16px; gap: 10px; }
.drawer-logo { width: 104px; height: 104px; }
.drawer-items button { display: flex; align-items: center; gap: 14px; padding: 14px 8px; }
.drawer-items button:last-child { border-bottom: none; }
.drawer-icon { font-size: 24px; width: 24px; opacity: 0.9; }
.drawer-since { padding-top: 6px; text-align: center; font-family: var(--font); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sheet-video { width: 100%; max-height: 62vh; border-radius: 26px; background: #2B1A12; object-fit: cover; box-shadow: var(--glass-shadow); }

/* подпись в меню: рукописный шрифт и одноцветный флаг */
.drawer-since {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    font-family: 'Marck Script', 'Snell Roundhand', cursive;
    font-size: 19px;
    letter-spacing: 0.2px;
    text-transform: none;
    color: rgba(255, 255, 255, 0.82);
}
.drawer-flag { width: 21px; height: 14px; flex: none; color: rgba(255, 255, 255, 0.82); }
.drawer-since { white-space: nowrap; gap: 7px; }
:lang(ru) .drawer-since { font-size: 16px; word-spacing: -2px; }

/* подпись в меню — мелко, без флага */
.drawer-since, :lang(ru) .drawer-since { font-size: 15px; word-spacing: 0; padding-top: 6px; color: rgba(255, 255, 255, 0.72); }
.drawer-icon-svg { height: 24px; }

/* кнопка «определить адрес» в корзине */
.checkout-geo {
    height: 48px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    color: #54200C;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.checkout-geo:disabled { opacity: 0.55; }
.checkout-promo-applied span { font-size: 14px; }

/* карта в корзине */
.checkout-map-open { border: none; background: none; padding: 2px 0; font-family: var(--font); font-size: 14px; color: #54200C; text-decoration: underline; text-underline-offset: 3px; }
.checkout-map-box { display: flex; flex-direction: column; gap: 8px; }
.checkout-map { height: 260px; border-radius: 26px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); background: #E9DDD0; z-index: 0; }
.checkout-map .leaflet-control-attribution { font-size: 9px; background: rgba(255, 255, 255, 0.7); border-radius: 8px 0 0 0; }
/* саму метку Leaflet двигает через transform, поэтому форму и поворот держит вложенный элемент */
.map-pin { background: none; border: none; }
.map-pin i { display: block; position: relative; width: 34px; height: 34px; box-sizing: border-box; background: #54200C; border: 3px solid #FFFFFF; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(43, 26, 18, 0.45); }
.map-pin i::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #FFFFFF; }