/* Bammat Shell — нижняя панель. * * Панель принадлежит Woodmart, мы её только переодеваем. Отсюда * `!important` на всём, что спорит с темой: её правила той же силы, * и спор решает порядок подключения, а наш файл идёт раньше. */ /* * ПАНЕЛЬ — ТОЛЬКО НА ТЕЛЕФОНЕ И ПЛАНШЕТЕ. * * У темы она спрятана правилом `@media(min-width:1025px){display:none}`, * а наше `display:flex !important` его перебивало — и на компьютере * появлялась поломанная панель, которой там быть не должно вовсе. * Поэтому всё наше оформление панели живёт внутри того же порога, * что у темы, а на широком экране мы её прячем сами и громко. */ @media (min-width: 1025px) { body.bm-shell .wd-toolbar, body.bm-shell .bm-toolbar-host { display: none !important; } } @media (max-width: 1024.98px) { body.bm-shell .wd-toolbar, .wd-toolbar.bm-toolbar { inset-inline: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: 90% !important; max-width: 560px !important; bottom: max(10px, env(safe-area-inset-bottom)) !important; height: 62px !important; padding: 0 6px !important; border: 0 !important; border-radius: 999px !important; background: var(--bmsh-blue, #517dfc) !important; box-shadow: 0 10px 30px rgba(18, 20, 26, .22) !important; overflow: visible !important; } /* ── появление: кружок в центре, который разворачивается ─────────── */ .wd-toolbar.bm-toolbar--intro { width: 62px !important; opacity: 0 !important; transition: width .42s cubic-bezier(.2, .8, .3, 1), opacity .2s ease !important; } .wd-toolbar.bm-toolbar--intro.bm-toolbar--in { width: 90% !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { /* Анимация во всю ширину экрана — ровно тот случай, ради которого эта настройка существует. Правило дублируется и в скрипте: там оно решает, ставить ли класс вовсе, здесь — страхует. */ .wd-toolbar.bm-toolbar, .wd-toolbar.bm-toolbar--intro { transition: none !important; width: 90% !important; opacity: 1 !important; } } /* * ПОЧЕМУ ОФОРМЛЕНИЕ ВИСИТ НА КЛАССЕ `body`, А НЕ НА КЛАССЕ ПАНЕЛИ. * * Класс `bm-toolbar` вешает скрипт, то есть после первой отрисовки. * До неё человек видел панель темы — маленькую, белую, с тремя * кнопками, — и она сменялась нашей рывком. Класс `bm-shell` печатает * сервер прямо в ``, и правило действует с первого кадра. */ /* ── четыре кнопки: меню · магазины · корзина · заказы ───────────── */ body.bm-shell .wd-toolbar { display: flex !important; align-items: center !important; justify-content: space-around !important; gap: 2px !important; } body.bm-shell .wd-toolbar-item, body.bm-shell .wd-header-cart, body.bm-shell .wd-toolbar-link { display: flex !important; align-items: center !important; justify-content: center !important; /* Ровно то, чего не хватало: у кнопок темы своя высота, и в нашей полосе они прижимались к верху. Считать её числом нельзя — высота зависит от того, показаны подписи или нет. */ height: 100% !important; margin: 0 !important; flex: 1 1 0 !important; } body.bm-shell .wd-toolbar-item > a, body.bm-shell .wd-header-cart > a, body.bm-shell .wd-toolbar-link > a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; width: 100% !important; height: 100% !important; padding: 0 4px !important; color: #fff !important; } body.bm-shell .wd-toolbar-label { position: static !important; display: block !important; color: #fff !important; font-size: 10px !important; line-height: 1.1 !important; } /* ── кнопка бокового меню ────────────────────────────────────────── */ /* * Слева на каждой панели — та самая кнопка, что открывала боковое * меню из прежней шапки. Своей копии меню мы не заводим: нажатие * передаётся кнопке темы, а она уже знает и про меню, и про языки * внутри него. */ .bm-toolbar__menu { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .18) !important; box-shadow: none !important; color: #fff !important; cursor: pointer !important; } .bm-toolbar__menu svg { width: 22px !important; height: 22px !important; } /* В режиме кнопок меню — такая же кнопка ряда, как остальные три, а не кружок поверх них: четыре одинаковых места, и рука не гадает, какое из них главнее. */ body.bm-shell .wd-toolbar:not(.bm-toolbar--bar) .bm-toolbar__menu { flex: 1 1 0 !important; width: auto !important; height: 100% !important; border-radius: 0 !important; background: none !important; } /* ── режим полосы выгоды ─────────────────────────────────────────── */ /* * Здесь панель — не одна пилюля, а две вещи рядом: круглая кнопка меню * и пилюля с полосой. Владелец просил именно так, и так честнее: меню * и корзина — разные вещи, а общая оболочка делает их на вид одной * кнопкой. * * Поэтому в этом режиме `.wd-toolbar` становится прозрачной обёрткой, * а фон, скругление и тень переезжают на кружок и на пилюлю. */ body.bm-shell .wd-toolbar.bm-toolbar--bar { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 90% !important; height: 62px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; } .bm-toolbar--bar .bm-toolbar__menu { background: var(--bmsh-blue, #517dfc) !important; box-shadow: 0 10px 26px rgba(18, 20, 26, .22) !important; width: 52px !important; height: 52px !important; } .bm-toolbar--bar .bm-toolbar-host { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 1 auto !important; /* Ширина элемента флекса по умолчанию равна ширине содержимого, и полоса не давала бы панели сжаться: карточка уезжала бы за край экрана. */ min-width: 0 !important; height: 52px !important; padding: 0 6px 0 16px !important; border-radius: 999px !important; background: var(--bmsh-blue, #517dfc) !important; box-shadow: 0 10px 26px rgba(18, 20, 26, .22) !important; } .bm-toolbar-host[hidden] { display: none !important; } /* * Между пилюлей и полосой стоит ещё один узел — тот самый, в который * рисует ядро. Ширина элемента флекса по умолчанию равна ширине * содержимого, и этот узел не давал панели сжаться: подпись * «Add 36,37 € more and delivery from this shop is free» выпирала * наружу, а кнопку корзины выдавливало за край экрана. * * Правило `min-width:0` стояло на самой полосе — но она внутри этого * узла, а не рядом с ним. Цепочку надо разжимать целиком. */ .bm-toolbar-host > .bm-toolbar-bar { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } /* * ПОЛОСА И ПОДПИСЬ НАД НЕЙ — ОДИН ЭЛЕМЕНТ. * * У Instacart в панели строка «Add $3.92 to get $0 delivery fee» * и линия под ней стоят вплотную и вместе по центру высоты. * Это не вкусовщина: они об одном и том же, и разнесённые к разным * краям читаются как две разные вещи. * * Порядок в разметке ядра обратный — сначала полоса, потом подпись, — * и переставлять его там нельзя: на странице корзины подпись стоит * под полосой правильно. Меняем порядок здесь, раскладкой: * `column-reverse` ставит подпись наверх, ничего не переписывая. */ .bm-toolbar-host .bmperk { display: flex !important; flex-direction: column-reverse !important; justify-content: center !important; gap: 6px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: #fff !important; font-size: 12px !important; cursor: pointer !important; } .bm-toolbar-host .bmperk-nudge { margin: 0 !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* * Подписи отметок в панели не показываются, и это решение, а не * упущение. В карточке корзины подпись — главное: там она называет * сумму и обещание. В шестидесяти пикселях высоты подписи под тремя * точками превращаются в кашу поверх подсказки — снимок в браузере * показал ровно это. * * `reserveTagRoom()` ядра меряет ВИДИМЫЕ подписи, поэтому места под * спрятанные не отводит: подпорок к высоте здесь не нужно. */ .bm-toolbar-host .bmperk-tag, .bm-toolbar-host .bmperk-stops { display: none !important; } .bm-toolbar-host .bmperk-rail { margin: 0 !important; padding-bottom: 0 !important; background: none !important; } .bm-toolbar-host .bmperk-track { height: 6px !important; border-radius: 999px !important; background: rgba(255, 255, 255, .32) !important; } .bm-toolbar-host .bmperk-fill { border-radius: 999px !important; background: #fff !important; } /* Карточки фактов, подарка и подсказки про подарок в панель не лезут: на них там нет ни места, ни повода — человек смотрит на витрину, а не на корзину. Полное место у них на странице корзины. */ .bm-toolbar-host .bmperk-facts, .bm-toolbar-host .bmperk-gift-slot, .bm-toolbar-host .bmperk-gift-hint { display: none !important; } /* ── кнопка корзины в панели ─────────────────────────────────────── */ .bm-toolbar__cart { position: relative !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .18) !important; color: #fff !important; text-decoration: none !important; } .bm-toolbar__cart svg { width: 22px !important; height: 22px !important; } .bm-toolbar__count { position: absolute !important; top: 0 !important; inset-inline-end: 0 !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; border-radius: 999px !important; background: #fff !important; color: var(--bmsh-blue, #517dfc) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 17px !important; text-align: center !important; } /* Пустая корзина — просто корзина, без нуля в кружке: ноль читается как ошибка, а не как «пусто». */ .bm-toolbar__count.is-empty { display: none !important; } /* Спрятанные кнопки темы остаются в разметке живыми: нажатием по корзине открывается боковая корзина темы, и её обработчик висит именно на этой разметке. */ .bm-toolbar .bm-toolbar__off { display: none !important; } } /* конец: панель только до 1024px */ /* ── боковое меню ────────────────────────────────────────────────── */ /* * Своя панель, потому что чужой на странице больше нет: прежняя шапка * Woodmart печатала и кнопку, и панель, а мы шапку заменили. Меню * при этом осталось единственным местом, где живут «О нас», * «Контакты» и переключатель языков на телефоне. * * Вне медиазапроса панели: её открывает кнопка, а кнопка есть только * на телефоне — значит и открыть панель на широком экране нечем. * Прятать её отдельным правилом было бы лишним обещанием. */ .bm-menu { position: fixed !important; inset: 0 !important; z-index: 100010 !important; display: flex !important; } .bm-menu[hidden] { display: none !important; } .bm-menu__scrim { position: absolute !important; inset: 0 !important; background: rgba(10, 12, 20, .5) !important; } .bm-menu__panel { position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; width: min(320px, 86vw) !important; height: 100% !important; background: var(--bmsh-bg, #fff) !important; box-shadow: 6px 0 30px rgba(18, 20, 26, .22) !important; animation: bm-menu-in .22s ease !important; } @keyframes bm-menu-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .bm-menu__panel { animation: none !important; } } .bm-menu__head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; border-bottom: 1px solid var(--bmsh-line, #e6e8ee) !important; } .bm-menu__title { font-size: 16px !important; font-weight: 700 !important; color: var(--bmsh-ink, #12141a) !important; } .bm-menu__x { width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--bmsh-tint, #f3f6ff) !important; box-shadow: none !important; color: var(--bmsh-ink, #12141a) !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; } .bm-menu__body { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 8px 8px 20px !important; } .bm-menu__list { margin: 0 !important; padding: 0 !important; list-style: none !important; } .bm-menu__list li { margin: 0 !important; list-style: none !important; } .bm-menu__list a { display: block !important; padding: 12px 12px !important; border-radius: 10px !important; color: var(--bmsh-ink, #12141a) !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; } .bm-menu__list a:hover, .bm-menu__list a:focus-visible { background: var(--bmsh-tint, #f3f6ff) !important; } .bm-menu__list .sub-menu { margin: 0 0 0 10px !important; padding: 0 !important; list-style: none !important; } .bm-menu__list .sub-menu a { font-weight: 500 !important; font-size: 14px !important; color: var(--bmsh-soft, #6b7280) !important; } .bm-menu__lang { margin-top: 10px !important; padding: 10px 12px 0 !important; border-top: 1px solid var(--bmsh-line, #e6e8ee) !important; }