/**
 * Шапка страницы магазина (product/shop_info.twig) — v10 tokens.
 * Раньше на мобильном (add.css, @media ≤480px) .organization-header__info
 * переключался на flex-direction:column — аватар, подпись и QR шли друг
 * под другом отдельными центрированными "этажами". Держим "аватар слева,
 * контент справа" на всех ширинах — это и убирает "ёлочку", и упрощает
 * адаптацию (не нужно по-разному собирать разметку на каждой ширине).
 *
 * QR-код превратили из всегда открытой картинки в кнопку-иконку с
 * всплывающей карточкой по клику (JS — redesign/shop-info.js) — так же
 * на любой ширине.
 *
 * Цвета — только уже существующие токены (variables.css) и --red, ничего
 * нового не вводим.
 */

/* ===== Общая раскладка — аватар слева, контент справа, всегда =====
 * .organization-caption (flex:1 из легаси) без min-width:0 отказывается
 * сжиматься уже своего контента — на узком экране это "выталкивало" соседний
 * .organization-logo почти до нуля по ширине и уводило контент за край
 * экрана. Раньше это было незаметно, потому что на мобильном стоял
 * flex-direction:column (без горизонтального сжатия), теперь, когда сделали
 * row на всех ширинах, классический flexbox-баг вылез наружу. */
/* У .breadcrumb (Bootstrap) нет своего margin-top — крошки шли вплотную
   к верхней границе (сразу под шапкой сайта, {{header}}), небольшой
   отступ сверху для дыхания. */
.organization-header .breadcrumb {
    margin-top: 16px;
}

/* Только десктоп — на мобильном свой (уже готовый) ряд бейджей, эту
   правку туда тянуть не нужно.
   На проде (tepsey.com) первым после заголовка идёт ряд плашек, а не
   бейджей, и отступ даёт h1{margin-bottom:30px} — у нас порядок обратный
   (бейджи первые), но чтобы визуальный ритм совпадал, ставим тот же 30px
   на первый ряд. !important — add.css с этим же селектором грузится позже
   shop-header.css и иначе перебивает. */
@media (min-width: 768px) {
    .organization-header .shop-info-labels {
        margin-top: 30px !important;
        /* Ряд плашек ниже (.organization-widget__list--desktop) начинается
           не от самого края колонки, а с отступом 8px — это запас под тень
           пилюль внутри их скролл-контейнера (иначе тень слева обрезается).
           Сдвигаем ряд бейджей на те же 8px, иначе их левые края не
           совпадают. */
        margin-left: 8px !important;
    }
}

/* Легаси (style.min.css) даёт шапке padding-bottom:60px — с сердечком
   под аватаркой на десктопе снова стало тесновато снизу. */
@media (min-width: 768px) {
    .organization-header {
        padding-bottom: 84px !important;
    }
}

.organization-header .organization-header__info {
    flex-direction: row !important;
    align-items: flex-start !important;
    /* Исходное (добеск-топное) значение — на мобильном не меняем. */
    column-gap: 16px !important;
    max-width: 100%;
    /* overflow:hidden сюда не возвращаем — обрезает сердечко под аватаркой
       (.shop-like-btn--under-logo, position:absolute; top:100%), оно
       специально выходит за пределы высоты лого. Тень пилюль теперь и так
       маленькая (см. .organization-widget override ниже) и в подстраховке
       через overflow не нуждается. */
}

/* Только десктоп. Точное значение с прода (tepsey.com):
   .organization-header__info{column-gap:40px}. */
@media (min-width: 768px) {
    .organization-header .organization-header__info {
        column-gap: 40px !important;
    }
}

.organization-header .organization-caption {
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
    /* Подстраховка от того, что строка с именем+сердечком+QR (или что-то
       ещё внутри) станет шире доступного места и вытолкнет всю колонку
       за экран — из-за этого лента пилюль могла визуально "не доскроллить"
       до самого начала. Ленту пилюль это не задевает — у неё свой
       overflow:auto с отдельным запасом под тень (см. ниже), это
       перекрытие не трогаем. */
    overflow-x: hidden;
}

.organization-header .organization-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    /* Позиционирующий контекст для .shop-like-btn--under-logo (position:absolute,
       см. ниже) — сердечко не должно участвовать в высоте этой колонки. */
    position: relative;
}

.organization-caption__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.organization-caption__head h1 {
    /* Раньше flex:1 заставлял заголовок растягиваться на всю ширину
       строки независимо от длины названия — на широком десктопе это
       отталкивало сердечко и QR к правому краю колонки, далеко от
       названия магазина, и на пустом фоне они смотрелись мелкими и
       "оторванными". Название теперь занимает только свою фактическую
       ширину (с усечением, если не помещается), а кнопки идут сразу
       следом за текстом. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Кнопка «В избранное» — вместо голого значка сердца понятная,
   современная плашка-кнопка: контур -> заливка + мягкая тень при лайке. */
.shop-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.shop-like-btn:hover {
    background: var(--gray-100);
}

.shop-like-btn:active {
    transform: scale(.93);
}

.shop-like-btn.disabled {
    opacity: .5;
    pointer-events: none;
}

.shop-like-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: fill .15s ease, stroke .15s ease;
}

.shop-like-btn[data-toggle="unlike"] {
    background: rgba(220, 38, 38, .07);
    border-color: rgba(220, 38, 38, .25);
    color: var(--red);
}

.shop-like-btn[data-toggle="unlike"] svg {
    fill: var(--red);
    stroke: var(--red);
}

/* ===== Кнопка QR =====
   На десктопе — пилюля "иконка + подпись", как у сердечка (со своим
   акцентным --blue, чтобы не путалась с серыми нейтральными элементами).
   На мобильном первый ряд шапки и так собирает лого+название+сердечко —
   подпись "QR-код" там только раздувает строку, а сердечко уже рядом
   даёт понять, что это вторая кнопка-действие, не просто картинка,
   поэтому на мобильном оставляем компактный кружок-иконку без текста. */
.shop-qr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    background: rgba(33, 70, 125, .08);
    border: 1px solid rgba(33, 70, 125, .25);
    color: var(--blue);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.shop-qr-btn svg {
    display: block;
    flex-shrink: 0;
}

.shop-qr-btn span {
    display: none;
}

.shop-qr-btn:hover {
    background: rgba(33, 70, 125, .14);
    border-color: rgba(33, 70, 125, .35);
}

.shop-qr-btn:active {
    transform: scale(.95);
}

/* ===== QR — рядом с названием на мобильном; на десктопе остаётся в той
   же строке, но уходит к правому краю (margin-left:auto), а не жмётся
   вплотную к названию — сердечко туда больше не встаёт (оно теперь под
   логотипом, см. ниже), так что у QR вся правая часть строки свободна. */
.shop-qr-btn--inline {
    display: inline-flex;
}

/* На десктопе рядом с крупным h1 и большим пустым пространством строки
   кнопки в 32px читались мелкими — увеличиваем сами кнопки и иконки
   внутри них (svg width/height через CSS перебивают inline-атрибуты). */
@media (min-width: 768px) {
    .shop-qr-btn--inline {
        width: auto;
        height: 40px;
        padding: 0 18px;
        justify-content: flex-start;
        gap: 8px;
        font-size: 14px;
        margin-left: auto;
    }

    .shop-qr-btn--inline span {
        display: inline;
    }

    .shop-qr-btn--inline svg {
        width: 19px;
        height: 19px;
    }
}

/* ===== Сердечко «в избранное» — на мобильном рядом с названием, на
   десктопе — под логотипом (там сейчас свободно, раз QR ушёл вправо, а
   сердечко не жмётся к названию вместе с ним). */
.shop-like-btn--inline {
    display: inline-flex;
}

.shop-like-btn--under-logo {
    display: none;
}

@media (min-width: 768px) {
    .shop-like-btn {
        height: 40px;
        padding: 0 18px;
        gap: 8px;
        font-size: 14px;
    }

    .shop-like-btn svg {
        width: 19px;
        height: 19px;
    }

    .shop-like-btn--inline {
        display: none;
    }

    .shop-like-btn--under-logo {
        display: inline-flex;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 12px;
        z-index: 1;
    }

    /* .shop-like-btn:active перезаписал бы translateX(-50%) центрирования —
       уже разбирали этот баг с "прыжком" кнопки при клике. */
    .shop-like-btn--under-logo:active {
        transform: translateX(-50%) scale(.93);
    }
}

/* ===== "Сторис-кольцо" совместной корзины вокруг лого магазина =====
   Чисто статус-индикатор (не кликается) — показывает цветом кольца и
   реальными аватарками участников, что для этого магазина есть совместная
   сессия. Сама кнопка действия живёт в ленте условий доставки, первой
   плашкой (.shop-cart-widget, ниже) — там она заметнее и не наезжает на
   остальную шапку. .shop-avatar-wrap — тесная обёртка ТОЛЬКО вокруг
   картинки/буквы-заглушки (её реальный размер = размер аватарки), чтобы
   кольцо (position:absolute, inset:-3px) огибало именно картинку, а не
   весь .organization-logo. */
.shop-avatar-wrap {
    position: relative;
}

.shop-avatar-ring {
    --ring-r: 88px;
    --bubble-d: 24px;
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    /* Обычное состояние — ниже шапки сайта (топбар/поиск), как и раньше. Выше
       поднимаем только когда открыт сайдбар корзины (см. правило ниже) —
       статичный высокий z-index здесь ломал шапку сайта, пролезая поверх
       неё даже при закрытом сайдбаре. */
    z-index: 2;
}

/* Пока открыт сайдбар корзины (body.v10-cart-open, см. v10-cart.js::openSidebar())
   — поднимаем кольцо выше затемняющего оверлея (.v10-cart-overlay, z-index:1280,
   background: rgba(15,23,42,.5) + blur), иначе оно оказывается под этим
   полупрозрачным тёмным слоем, как и вся остальная страница позади сайдбара.
   Для большинства элементов это ожидаемо (оверлей затемняет фон специально),
   но у аватарок с более тёмным цветом из палитры (например, зелёный #16a34a)
   контраст после наложения тёмного слоя падает настолько, что кружок визуально
   сливается с фоном и выглядит "пропавшим". Кольцо — живой статус-индикатор,
   поэтому держим его читаемым и с открытым сайдбаром — но ТОЛЬКО пока он
   действительно открыт, а не постоянно (иначе кольцо перекрывает шапку сайта).
   Сайдбар (z-index:1300) и оверлей занимают разную область экрана (сайдбар
   справа, лого магазина слева), так что визуального наложения на сам сайдбар
   не будет. */
body.v10-cart-open .shop-avatar-ring {
    z-index: 1290;
}

.shop-avatar-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, var(--green, #16a34a), var(--green-light, #22c55e), var(--green, #16a34a));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Нейтральное состояние — то же кольцо, просто бледное сплошное (не пунктир —
   пунктир на глаз читается как "не загрузилось", а не как приглашение),
   с коротким пульсом один раз при заходе на страницу, не бесконечно. */
.shop-avatar-ring--none::before {
    background: none;
    border: 2px solid rgba(22, 163, 74, .32);
    padding: 0;
    animation: sc-ring-pulse 1.8s ease-in-out 2;
}

.shop-avatar-ring--frozen::before {
    background: conic-gradient(from 0deg, var(--amber, #FF9800), var(--amber-light, #fbbf24), var(--amber, #FF9800));
}

/* Приглашение — отдельный, более светлый янтарный тон: не активная сессия
   текущего пользователя (он туда ещё не вступил), но и не "оформляется" —
   должен визуально отличаться от обоих. */
.shop-avatar-ring--invite::before {
    background: conic-gradient(from 0deg, var(--amber-light, #fbbf24), #fde68a, var(--amber-light, #fbbf24));
}

@keyframes sc-ring-pulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* Активная (не замороженная) сессия — кольцо мягко "дышит" бесконечно, пока
   сессия живая. У --none пульс одноразовый (приглашение попробовать), тут —
   постоянный статус-индикатор, поэтому infinite, но медленный и плавный,
   без резких скачков. */
.shop-avatar-ring--session:not(.shop-avatar-ring--frozen)::before {
    animation: sc-ring-breathe 3s ease-in-out infinite;
}
@keyframes sc-ring-breathe {
    0%, 100% { opacity: .85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
    .shop-avatar-ring--session:not(.shop-avatar-ring--frozen)::before {
        animation: none;
    }
}

.shop-avatar-ring-bubble {
    --a: calc(360deg / var(--n) * var(--i));
    position: absolute;
    top: calc(50% - var(--ring-r) * cos(var(--a)));
    left: calc(50% + var(--ring-r) * sin(var(--a)));
    transform: translate(-50%, -50%);
    width: var(--bubble-d);
    height: var(--bubble-d);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--bubble-d) * .42);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* Сам .shop-avatar-ring — pointer-events:none (чисто декоративный, клики
       сквозь него не перехватываются), но каждый баблик по отдельности
       должен ловить наведение — включаем обратно точечно. */
    pointer-events: auto;
    cursor: default;
}

/* Рябь от каждого баблика — расходящееся кольцо, затухающее наружу.
   animation-delay сдвинут по --i, чтобы баблы "пульсировали" не хором,
   а каскадом друг за другом — живее смотрится. Чистая обводка (border),
   не заливка — не перекрывает инициал по центру бабла. */
.shop-avatar-ring-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    animation: sc-bubble-ripple 2.6s ease-out infinite;
    animation-delay: calc(var(--i) * .35s);
    pointer-events: none;
}
@keyframes sc-bubble-ripple {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-avatar-ring-bubble::after {
        animation: none;
    }
}

/* Появление нового участника — баблик "выпрыгивает", а не просто возникает.
   Класс вешает JS (shop-info.js) только на РЕАЛЬНО новый customer_id при
   очередном опросе — на баблах, которые уже были на экране, анимация не
   повторяется при каждой перерисовке. */
@keyframes sc-bubble-pop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.shop-avatar-ring-bubble--enter {
    animation: sc-bubble-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .shop-avatar-ring-bubble--enter {
        animation: none;
    }
}

.shop-avatar-ring-bubble:focus {
    outline: none;
}
.shop-avatar-ring-bubble:focus-visible {
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18), 0 0 0 3px rgba(255, 255, 255, .85);
}

/* Плашка с именем участника — всплывает над аватаркой при наведении/фокусе. */
.shop-avatar-ring-bubble-name {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translate(-50%, 4px);
    background: #1e293b;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 1;
}
.shop-avatar-ring-bubble-name::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}
.shop-avatar-ring-bubble:hover .shop-avatar-ring-bubble-name,
.shop-avatar-ring-bubble:focus-visible .shop-avatar-ring-bubble-name {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Боковые аватарки (слева/справа от центра кольца, --side проставляется на
   бэкенде и в JS-поллинге по той же тригонометрии, что и сама позиция бабла)
   — плашка с именем центрируется только у верхних/нижних. У боковых
   центрирование обрезает её краем экрана (баблик у самого края вьюпорта),
   поэтому растим плашку от края бабла в сторону от края экрана. */
.shop-avatar-ring-bubble--tip-left .shop-avatar-ring-bubble-name {
    left: 0;
    transform: translate(0, 4px);
}
.shop-avatar-ring-bubble--tip-left .shop-avatar-ring-bubble-name::after {
    left: 12px;
    transform: none;
}
.shop-avatar-ring-bubble--tip-left:hover .shop-avatar-ring-bubble-name,
.shop-avatar-ring-bubble--tip-left:focus-visible .shop-avatar-ring-bubble-name {
    transform: translate(0, 0);
}

.shop-avatar-ring-bubble--tip-right .shop-avatar-ring-bubble-name {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}
.shop-avatar-ring-bubble--tip-right .shop-avatar-ring-bubble-name::after {
    left: auto;
    right: 12px;
    transform: none;
}
.shop-avatar-ring-bubble--tip-right:hover .shop-avatar-ring-bubble-name,
.shop-avatar-ring-bubble--tip-right:focus-visible .shop-avatar-ring-bubble-name {
    transform: translate(0, 0);
}

/* ===== Пилюля "Купить вместе" — первая в ленте условий доставки =====
   Наследует ровно ту же визуальную "тяжесть", что и соседние плашки
   (.organization-widget, style.min.css): padding:6px 14px; min-height:40px;
   border-radius:10px; box-shadow одинаковая — так новая кнопка не выглядит
   чужеродной среди "Заказ от/Бесплатная доставка/СДЭК/Доставка магазина",
   а органично продолжает тот же ряд, просто первой. Иконка всегда одна и та
   же (человечки) во всех статусах.

   Свечение сделано через box-shadow на самой пилюле (а не отдельным
   blur-псевдоэлементом): box-shadow всегда точно повторяет border-radius
   элемента, без искажений на скруглённых углах — filter:blur() на отдельном
   слое давал на углах характерный артефакт (в угле меньше "массы" цвета,
   чем на прямой стороне, поэтому после блюра угол визуально казался более
   квадратным, даже при математически точной геометрии контура). box-shadow
   этой проблемы лишён в принципе. Первый слой тени — обычная лёгкая тень,
   как у соседних плашек; второй — цветное свечение, у каждого статуса свой
   цвет, у активной сессии — переливающееся между двумя оттенками. */
.shop-cart-widget {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}
.shop-cart-widget:active { transform: scale(.97); }
.shop-cart-widget.is-loading { opacity: .65; pointer-events: none; }

.organization-header .organization-widget__list .organization-widget.shop-cart-widget-surface {
    background-color: #fff;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    transition: background-color .15s, box-shadow .15s;
}
.organization-header .organization-widget__list .shop-cart-widget:hover .organization-widget.shop-cart-widget-surface {
    background-color: var(--gray-50, #f8fafc);
}

.shop-cart-widget-ic { width: 20px; height: 20px; flex-shrink: 0; }
.shop-cart-widget-text { font-size: 13px; text-wrap: nowrap; }

/* "Купить вместе" (сессии ещё нет) — фиолетово-розовый переливающийся акцент. */
.organization-header .organization-widget__list .shop-cart-widget--none .organization-widget.shop-cart-widget-surface {
    color: var(--violet, #7c3aed);
    animation: sc-glow-none 4s ease-in-out infinite;
}
@keyframes sc-glow-none {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 10px 2px rgba(124, 58, 237, .5); }
    50%      { box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 11px 2px rgba(236, 72, 153, .5); }
}

/* Активная (не замороженная) сессия — зелёно-бирюзовый акцент: явно "живое",
   идущее прямо сейчас состояние, максимально заметное среди всех статусов. */
.organization-header .organization-widget__list .shop-cart-widget--session:not(.shop-cart-widget--frozen) .organization-widget.shop-cart-widget-surface {
    color: #059669;
    animation: sc-glow-session 4s ease-in-out infinite;
}
@keyframes sc-glow-session {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 11px 2px rgba(16, 185, 129, .55); }
    50%      { box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 12px 3px rgba(6, 182, 212, .55); }
}

@media (prefers-reduced-motion: reduce) {
    .shop-cart-widget-surface { animation: none !important; }
}

/* Оформляется — оранжевый акцент, статично (сессия уже не активна для правок). */
.organization-header .organization-widget__list .shop-cart-widget--frozen .organization-widget.shop-cart-widget-surface {
    color: var(--amber, #FF9800);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 11px 2px rgba(255, 152, 0, .55);
}

/* Приглашение — более лёгкий янтарный акцент. */
.organization-header .organization-widget__list .shop-cart-widget--invite .organization-widget.shop-cart-widget-surface {
    color: #b45309;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 0 10px 2px rgba(251, 191, 36, .5);
}

@media (max-width: 480px) {
    .shop-avatar-ring {
        --ring-r: 35px;
        --bubble-d: 15px;
        inset: -2px;
    }

    /* На мобильной лого магазина стоит близко к левому краю экрана — даже
       "центрированная" (--tip-center, у верхнего/нижнего бабла) плашка с
       именем вылезает за левую границу viewport'а. Справа от кольца места
       всегда больше — поэтому на мобильной всегда растим плашку вправо,
       независимо от расчётной стороны. Специфичность правил --tip-left/
       --tip-right выше обычного .shop-avatar-ring-bubble-name (см. выше по
       файлу), поэтому здесь перекрываем явно все три варианта — иначе
       по специфичности победили бы они, несмотря на медиа-запрос. */
    .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble--tip-left .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble--tip-right .shop-avatar-ring-bubble-name {
        left: 0;
        right: auto;
        transform: translate(0, 4px);
    }
    .shop-avatar-ring-bubble-name::after,
    .shop-avatar-ring-bubble--tip-left .shop-avatar-ring-bubble-name::after,
    .shop-avatar-ring-bubble--tip-right .shop-avatar-ring-bubble-name::after {
        left: 12px;
        right: auto;
        transform: none;
    }
    .shop-avatar-ring-bubble:hover .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble:focus-visible .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble--tip-left:hover .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble--tip-left:focus-visible .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble--tip-right:hover .shop-avatar-ring-bubble-name,
    .shop-avatar-ring-bubble--tip-right:focus-visible .shop-avatar-ring-bubble-name {
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-avatar-ring--none::before {
        animation: none;
    }
}

/* ===== Всплывающая карточка с QR — простой центрированный попап, без
   зависимости от Bootstrap-модалок (те же грабли, что уже разбирали для
   #notification: backdrop/фокус/анимация). Чистый show-класс. */
.shop-qr-popover {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.shop-qr-popover.show {
    opacity: 1;
    pointer-events: auto;
}

.shop-qr-popover__inner {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
    max-width: calc(100vw - 32px);
    text-align: center;
    transform: scale(.92);
    transition: transform .2s ease;
}

.shop-qr-popover.show .shop-qr-popover__inner {
    transform: scale(1);
}

.shop-qr-popover__inner img {
    width: 200px;
    height: 200px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.shop-qr-popover__hint {
    margin-top: 14px;
    max-width: 220px;
    font-family: var(--font-roboto);
    font-size: 13px;
    line-height: 1.4;
    color: var(--gray-500);
}

.shop-qr-popover__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.shop-qr-popover__close:hover {
    background: var(--gray-200);
}

/* ===== Пилюли доставки — горизонтальный скролл вместо переноса на мобильном.
   overflow:auto тут уже был (style.min.css, тот же ≤600px), не хватало
   только nowrap — с wrap скролл не имел смысла, всё равно переносилось
   внутри контейнера. Берём тот же брейкпоинт, чтобы не разъезжались. */
/* Две копии ряда с доставкой — десктоп (внутри колонки, друг под другом
   с плашками) и мобильная (отдельная строка на всю ширину .container, со
   скроллом до края экрана). Показываем нужную по брейкпоинту. */
.organization-header .organization-widget__list--mobile {
    display: none;
}

/* Десктоп: отступ от блока с плашками сверху, без легаси-отрицательных
   боковых отступов (-20px из base-правила) — колонка узкая, бежать за её
   пределы тут не нужно. */
.organization-header .organization-widget__list--desktop {
    display: flex;
    /* На проде отступ между рядами (там между плашками и бейджами) — это
       .shop-info-labels{margin-top:1rem}, т.е. 16px. Отступ сверху (8px
       padding-top контейнера, см. ниже) добавляется к этим 8px margin. */
    margin: 8px 0 0;
    /* Тот же механизм, что и в мобильной версии — одна строка со скроллом
       (nowrap + overflow:auto), а не перенос на несколько строк. Перенос
       и был причиной "слипшихся" теней между рядами. У прода такого
       скролл-контейнера нет вовсе (там flex-wrap:wrap), поэтому тени там
       никогда не обрезаются — нам приходится резервировать под тень
       padding здесь. */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Запас под тень: базовая (0 2px 8px, как на проде) — снизу
       offset+blur=10px, сверху/слева/справа blur=8px. Плюс у пилюли
       "Купить вместе"/статусов совместной корзины — второй, цветной
       box-shadow (свечение), который шире (до ~13px) — округляем запас
       под него, иначе overflow-x:auto (единственная причина обрезки —
       на проде без скролл-контейнера тень никогда не резалась) обрежет
       именно это свечение в прямоугольник по границе паддинга. */
    padding: 12px 12px 14px 12px;
}

/* Тень пилюли НЕ трогаем — на проде (tepsey.com) она ровно такая же:
   0 2px 8px rgba(0,0,0,.12) из легаси style.min.css. Проблема была не в
   значении тени, а в том, что наш контейнер (overflow-x:auto — на проде
   его нет вовсе, там просто flex-wrap:wrap без обрезки) резал её по краю
   при нехватке padding — см. padding контейнера ниже. */

.organization-header .organization-widget__list--desktop .organization-widget {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .organization-header .organization-widget__list--desktop {
        display: none !important;
    }

    .organization-header .organization-widget__list--mobile {
        display: flex;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        /* Слева — вровень с логотипом (без отрицательного отступа, иначе
           первая пилюля уезжает левее аватара). Вправо тянем честно — это
           отдельная строка на всю ширину .container, гасим только правый
           padding .container (15px), чтобы список скроллился до правого
           края экрана. */
        margin: 10px -15px 0 0 !important;
        /* Сверху/снизу отступ обязателен — это скролл-контейнер
           (overflow:auto), без него мягкая тень пилюль обрезалась по
           верхней/нижней границе контейнера ВСЕГДА, а не только при
           скролле (то, что выглядело как "тень с углами" на фоне).
           Тень та же, что на десктопе (0 2px 8px .12) — снизу и слева
           запас увеличен до тех же значений, что и в десктопной версии
           (offset+blur=10 снизу, blur=8 слева), иначе тень слева/снизу
           заметно тусклее, чем на компьютере. Справа — по-прежнему больше,
           "надкушенная" последняя пилюля как подсказка, что список можно
           проскроллить дальше. Верх/лево увеличены до 12px — под цветное
           свечение статусов совместной корзины (см. .shop-cart-widget-surface),
           оно шире обычной тени плашек. */
        padding: 12px 24px 14px 12px !important;
    }

    .organization-header .organization-widget__list--mobile .organization-widget {
        flex-shrink: 0;
    }
}

/* Бейджи (рейтинг/промокод и т.д.) на ≤767px раньше центрировались
   (add.css) — под старую центрированную "ёлочку". Теперь всё слева. */
@media (max-width: 767px) {
    .shop-info-labels {
        justify-content: flex-start !important;
    }
}

/* ===== Мобильные размеры ===== */
@media (max-width: 480px) {
    /* Ограничение ширины — именно на тесную обёртку .shop-avatar-wrap (только
       картинка), а не на всю .organization-logo, чтобы не резать заодно
       что-то ещё, что окажется в той же флекс-колонке в будущем. */
    .organization-header .shop-avatar-wrap {
        max-width: 64px;
    }

    .organization-header h1 {
        font-size: 18px;
    }

    .organization-caption__head {
        gap: 6px 8px;
    }
}

/* add.css (≤480px) вешает на .organization-widget__list.hidden-scroll
   justify-content:center — центрирование в скроллящемся flex-контейнере:
   браузер распределяет "лишнее" содержимое по обе стороны от центра, и то,
   что уходит влево, обычным overflow-скроллом не достать — до начала
   списка "не доскроллить", сколько ни пытайся. Прижимаем к началу. */
@media (max-width: 600px) {
    .organization-header .organization-widget__list.hidden-scroll {
        justify-content: flex-start !important;
    }
}