теминий скрипт podbor_right_adaptive_height() пише height
інлайном — інлайн не перебити нічим, окрім !important.
========================================================================= */
.podbor{
display:block;
padding:0;margin:0 0 8px;
background:transparent;border:0;
}
.podbor_left{
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
margin:0 0 14px;padding:0;
}
.podbor_left p{
margin:0;
font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--bacar-ink);
}
.podbor_left span{
font-size:14px;color:var(--bacar-ink-2);
}
/* один ряд із горизонтальною прокруткою замість стіни в чотири ряди */
.podbor_right{
display:grid !important;
grid-auto-flow:column !important;
grid-auto-columns:132px !important;
grid-template-columns:none !important;
gap:10px !important;
overflow-x:auto;overflow-y:hidden;
padding:2px 2px 10px;margin:0;
list-style:none;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:var(--bacar-line) transparent;
}
.podbor_right::-webkit-scrollbar{height:6px}
.podbor_right::-webkit-scrollbar-thumb{background:var(--bacar-line);border-radius:999px}
.podbor_right::-webkit-scrollbar-track{background:transparent}
.podbor_right .item{
scroll-snap-align:start;
margin:0;padding:0;list-style:none;
}
.podbor_right .item a{
height:auto !important;
width:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
padding:16px 10px 12px;
border:1px solid var(--bacar-line);border-radius:var(--bacar-r-lg);
background:var(--bacar-surface);
text-decoration:none;
transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.podbor_right .item a:hover{
border-color:rgba(244,105,19,.45);
box-shadow:0 6px 18px -8px rgba(11,18,32,.18);
transform:translateY(-2px);
}
.podbor_right .item img{
height:40px;width:auto;max-width:76px;
object-fit:contain;
display:block;
}
/* підпис дописує JS із alt картинки */
.bacar-brand-name{
font-size:13px;font-weight:600;line-height:1.2;text-align:center;
color:var(--bacar-ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.podbor_right .item a:hover .bacar-brand-name{color:var(--ds-primary-color,#F46913)}
/* посилання «Усі марки», яке дописує JS */
.bacar-brands-all{
margin-left:auto;align-self:center;
font-size:14px;font-weight:600;text-decoration:none;
color:var(--ds-primary-color,#F46913);white-space:nowrap;
}
.bacar-brands-all:hover{text-decoration:underline;color:var(--ds-primary-color,#F46913)}
@media (max-width:767.98px){
.podbor_left p{font-size:18px}
.podbor_right{grid-auto-columns:112px !important}
.podbor_right .item img{height:34px}
}
/* =========================================================================
КАРТКИ ТОВАРІВ у добірках на головній
Прибираємо лічильник кількості з сітки. Заміряно: на головній їх вісім.
Кількість обирають у кошику, у списку це зайвий крок між людиною
і кнопкою «купити» — кнопка через нього займала менше половини рядка.
========================================================================= */
/* !important обовʼязковий: у лічильника стоїть Bootstrap-утиліта .d-flex,
а утиліти Bootstrap написані з !important. Перевірено на живому сайті —
без нього правило не діє, лічильники лишаються всі вісім. */
#common-home .ds-module-quantity{display:none !important}
/* Смуга кошика має justify-content:space-between. Коли лічильник зник,
єдина кнопка притискалась ліворуч — ставимо її до правого краю картки,
у лінію з ціною. */
#common-home .ds-module-cart{justify-content:flex-end !important}
/* Кнопку кошика на всю ширину зробити НЕ вдалося: тема тримає її розмір
поза каскадом — не діє навіть inline flex:1 !important. Лишаємо як є.
У варіанті, з яким порівнювали, кнопка теж маленька квадратна праворуч,
тож розбіжності тут немає. */
/* =========================================================================
Заголовки секцій
Тема виводить їх як , тобто це не
заголовки взагалі — на головній був рівно один тег H1 (наш) і жодного H2.
bacar-theme.js підміняє теги, а це — оформлення.
========================================================================= */
#common-home h2.bacar-sec{
margin:26px 0 12px;padding:0;
font-size:22px;font-weight:800;letter-spacing:-.01em;
color:var(--bacar-ink);line-height:1.2;
}
@media (max-width:767.98px){
#common-home h2.bacar-sec{font-size:18px;margin:18px 0 10px}
}
/* ---------- темна тема ---------- */
[data-bs-theme="dark"] .podbor_right .item a,
.dark-theme .podbor_right .item a{
background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10);
}
[data-bs-theme="dark"] .bacar-brand-name,
.dark-theme .bacar-brand-name{color:var(--bacar-d-ink)}
[data-bs-theme="dark"] .podbor_left p,
.dark-theme .podbor_left p,
[data-bs-theme="dark"] #common-home h2.bacar-sec,
.dark-theme #common-home h2.bacar-sec{color:var(--bacar-d-ink)}
/* =========================================================================
ВІДГУКИ на головній (.ds-last-reviews)
Було: вісім карток по 566×218 у дві колонки, блок 1132×929.
Стало: чотири в ряд, картка з рамкою, текст обрізаний на чотири рядки,
фото товару 88 → 56. Блок 1132×570 — на 359 px нижче, і відгуки
нарешті читаються з одного погляду, а не як стіна тексту.
========================================================================= */
@media (min-width:992px){
#common-home .ds-last-reviews > .ds-last-reviews-item{flex:0 0 25%;max-width:25%;width:25%}
}
@media (min-width:576px) and (max-width:991.98px){
#common-home .ds-last-reviews > .ds-last-reviews-item{flex:0 0 50%;max-width:50%;width:50%}
}
#common-home .ds-last-reviews-item .content-block{
border:1px solid var(--bacar-line);
border-radius:var(--bacar-r-lg);
padding:16px;
background:var(--bacar-surface);
}
/* Фото і бейдж «5 з 5».
Бейдж .ds-last-reviews-item-img-label тема ставить position:absolute
поверх фото — при рідних 88×88 він займав кут, а після того, як я стиснув
фото до 56, накривав його майже повністю. Тому виводимо бейдж із накладки
і ставимо ПІД фото: фото видно цілим, оцінку теж. */
#common-home .ds-last-reviews-item-img{
width:auto !important;height:auto !important;
display:flex;flex-direction:column;align-items:center;gap:6px;
flex:none;position:static !important;
}
#common-home .ds-last-reviews-item-img > a{display:block;line-height:0}
#common-home .ds-last-reviews-item-img img{
width:56px !important;height:56px !important;
border-radius:var(--bacar-r);object-fit:cover;
}
#common-home .ds-last-reviews-item-img-label{
position:static !important;
height:auto;padding:2px 7px;
font-size:12px;line-height:1.3;white-space:nowrap;
}
#common-home .ds-last-reviews-item-text{
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
overflow:hidden;
}
/* =========================================================================
СМУГА ПЕРЕВАГ (.ds-advantages) — модуль теми oct_benefits
Він УЖЕ стоїть у розкладці головної, позиція 3: одразу після добірок
товарів і перед відгуками. Саме там, де смуга довіри у варіанті,
з яким порівнювали. Але сам модуль вимкнено, тому в розмітці його немає.
Стилі пишу наперед — увімкнете, і смуга одразу стане на місце.
Це той самий урок, що й у версії 1.0: спершу дивимось, чи тема вже
вміє те, що ми збираємось будувати.
Робимо світлий ряд карток, а не темну смугу: іконки тут — завантажені
вами картинки, і на темному тлі темна іконка просто зникне.
========================================================================= */
#common-home .ds-advantages{
--bs-gutter-x:0.75rem;
margin:8px 0 4px;
}
#common-home .ds-advantages-item{flex:1 1 0;min-width:170px}
#common-home .ds-advantages-item > .content-block{
height:100%;
padding:16px 14px;
border:1px solid var(--bacar-line);
border-radius:var(--bacar-r-lg);
background:var(--bacar-surface);
transition:border-color .16s ease;
}
#common-home .ds-advantages-item > .content-block:hover{border-color:rgba(244,105,19,.4)}
#common-home .ds-advantages-item img{
width:34px;height:34px;object-fit:contain;flex:none;
}
#common-home a.ds-advantages-item-title,
#common-home span.ds-advantages-item-title{
font-size:15px;font-weight:700;line-height:1.25;color:var(--bacar-ink);
text-decoration:none;
}
#common-home a.ds-advantages-item-title:hover{color:var(--ds-primary-color,#F46913)}
/* у шаблоні теми цей клас стоїть і на обгортці, і на тексті — беремо саме span */
#common-home span.ds-advantages-item-text{
font-size:13px;line-height:1.45;color:var(--bacar-ink-2);
}
@media (max-width:575.98px){
#common-home .ds-advantages-item{flex:0 0 100%;min-width:0}
}
/* ---------- темна тема ---------- */
[data-bs-theme="dark"] #common-home .ds-last-reviews-item .content-block,
.dark-theme #common-home .ds-last-reviews-item .content-block,
[data-bs-theme="dark"] #common-home .ds-advantages-item > .content-block,
.dark-theme #common-home .ds-advantages-item > .content-block{
background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10);
}
[data-bs-theme="dark"] #common-home a.ds-advantages-item-title,
.dark-theme #common-home a.ds-advantages-item-title,
[data-bs-theme="dark"] #common-home span.ds-advantages-item-title,
.dark-theme #common-home span.ds-advantages-item-title{color:var(--bacar-d-ink)}
/* =========================================================================
МОБІЛЬНА ВЕРСІЯ ГОЛОВНОЇ ТА ПІДВАЛА
Заміряно на 390 px: сторінка була 7120 px — вісім із половиною екранів.
З них підвал 2057 і відгуки 2004, тобто майже пʼять екранів на два блоки,
повз які людина просто гортає.
========================================================================= */
/* ---------- плитки марок ----------
sdi.css підключається ПІСЛЯ нашого файла і ставить
@media(max-width:768px) .podbor_right{grid-template-columns:repeat(4,1fr)!important},
а на 480 — repeat(3,1fr)!important. Наш !important за рівної специфічності
програє йому за порядком файлів, тому селектор тут навмисно важчий:
.podbor ul.podbor_right — і рядок нарешті стає рядом, а не сіткою 3×N.
Без цього на телефоні виходило 307 px зі зсувом 42 і три вузькі колонки. */
.podbor.podbor{
padding:0 !important;
margin:16px 0 8px !important;
background:transparent !important;
border:0 !important;
}
.podbor ul.podbor_right{
grid-template-columns:none !important;
grid-auto-flow:column !important;
grid-auto-columns:132px !important;
gap:10px !important;
width:100% !important;
}
@media (max-width:767.98px){
.podbor ul.podbor_right{grid-auto-columns:112px !important}
.podbor .podbor_left{display:block !important;margin:0 0 12px !important}
/* ---------- відгуки ----------
Вісім відгуків на телефоні — це 2004 px, майже два з половиною екрани
суцільного тексту. Показуємо чотири.
Правильніше зменшити кількість у налаштуваннях самого модуля відгуків —
тоді решта не вантажиться взагалі. Тут ми лише ховаємо. */
#common-home .ds-last-reviews > .ds-last-reviews-item:nth-child(n+5){display:none}
/* ---------- підвал: колонки посилань згортаються ----------
Так само зроблено в макеті header_footer_v3.html — там мобільний підвал
має три згорнуті розділи замість чотирьох розгорнутих колонок. */
.bf-col .bf-ct{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin:0;padding:15px 0;
border-bottom:1px solid var(--bacar-d-line);
cursor:pointer;
}
.bf-col .bf-ct::before{display:none}
.bf-col .bf-ct::after{
content:"";flex:none;width:8px;height:8px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px);
opacity:.5;transition:transform .2s ease;
}
.bf-col.bf-open .bf-ct::after{transform:rotate(225deg) translate(-2px,-2px)}
.bf-col .bf-links{display:none}
.bf-col.bf-open .bf-links{display:flex;padding:4px 0 12px}
/* месенджери й картки довіри лишаються відкритими — це не список посилань */
.bf-col-soc .bf-ct{border-bottom:0;cursor:default}
.bf-col-soc .bf-ct::after{display:none}
/* ---------- підбір у підвалі ----------
Опис під заголовком на телефоні лише додає висоти: та сама форма
стоїть просто нижче і говорить сама за себе. */
.bf-fit-sub{display:none}
.bf-fit-card{padding:16px}
}
/* =========================================================================
«ВАШЕ АВТО» (.bh-mycar)
За задумом макета рядка немає, доки людина не скористалась підбором.
Тому за замовчуванням display:none — жодного стрибка верстки й жодного
порожнього рядка в тих, хто підбором не користувався.
Клас .bh-mycar-on вішає bacar-theme.js.
========================================================================= */
.bh-mycar{display:none}
.bh-mycar.bh-mycar-on{display:block}
.bh-mycar{
background:rgba(244,105,19,.08);
border-bottom:1px solid var(--bacar-line);
}
.bh-mycar .bh-wrap{display:flex;align-items:center;gap:10px;height:42px}
.bh-mycar-ic{flex:none;display:flex;color:var(--ds-primary-color,#F46913)}
.bh-mycar-lbl{
flex:none;font-size:13px;color:var(--bacar-ink-2);white-space:nowrap;
}
.bh-mycar-name{
flex:1;min-width:0;
font-size:14px;font-weight:700;color:var(--bacar-ink);text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bh-mycar-name:hover{color:var(--ds-primary-color,#F46913)}
.bh-mycar-x{
flex:none;width:30px;height:30px;border:0;background:transparent;
border-radius:var(--bacar-r);color:var(--bacar-ink-2);cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
.bh-mycar-x:hover{background:rgba(11,18,32,.06);color:var(--bacar-ink)}
@media (max-width:575.98px){
.bh-mycar-lbl{display:none}
}
[data-bs-theme="dark"] .bh-mycar,
.dark-theme .bh-mycar{background:rgba(244,105,19,.12);border-bottom-color:rgba(255,255,255,.08)}
[data-bs-theme="dark"] .bh-mycar-name,
.dark-theme .bh-mycar-name{color:var(--bacar-d-ink)}
/* =========================================================================
МЕНЮ КАТАЛОГУ НА ДЕСКТОПІ
Тема будувала цю панель під ВУЗЬКУ ліву колонку: список моделей
позиціонується через transform:translateX(100%), тобто зсувається рівно
на власну ширину. Коли панель на всю ширину екрана, він опиняється за
правим краєм — і його ще й обрізає overflow:hidden.
Заміряно на 1440: панель 1430×710, список моделей 1428 зі зсувом 1428 →
x=1429, повністю за екраном. Плюс список 34 марок мав висоту 1499
у панелі на 710 — низ був просто відрізаний.
ЧОМУ ПО КЛІКУ, А НЕ ПО НАВЕДЕННЮ.
Марки стоять у три стовпці. Коли список моделей відкривався наведенням,
дорога курсором від марки в першому стовпці до списку проходила над
другим і третім — і вони відкривали свої списки. Вибрати можна було
тільки з останнього стовпця.
Пробував лікувати геометрією: показувати список одразу праворуч від
СВОГО стовпця, щоб він накривав решту. Дорогу це закриває, але тоді
до марок у другому й третьому стовпці не дістатись узагалі, поки
відкритий чийсь список. Чистим CSS цю задачу не розвʼязати.
Тому на десктопі відкриття по кліку: жодна марка не відкривається
випадково, усі три стовпці доступні, поведінка передбачувана.
Перший пункт у списку моделей — «Усі магнітоли <Марка>», бо сам рядок
марки тепер відкриває список, а не веде на сторінку.
========================================================================= */
@media (min-width:1200px){
.bh .bh-cat > .ds-menu-catalog.ds-menu-main-catalog{
width:720px !important;
max-height:none !important;
bottom:auto !important;
padding-bottom:8px;
border-radius:var(--bacar-r-lg);
box-shadow:0 18px 50px rgba(11,18,32,.18);
}
/* Закрите меню не має розтягувати сторінку.
overflow:visible вище потрібен для випадних списків моделей, але разом
із ним у документ потрапляли і приховані списки — 1985 px невидимої
висоти, через які під підвалом лишався білий простір. Тому поки меню
закрите, воно згорнуте в нуль і нічого не тягне. */
.bh .bh-cat > .ds-menu-catalog.ds-menu-main-catalog:not(.active){
height:0 !important;
overflow:hidden !important;
}
.bh .bh-cat > .ds-menu-catalog.ds-menu-main-catalog.active{
height:auto !important;
overflow:visible !important;
}
/* Список моделей не має бути вищим за екран — інакше він знову тягне
сторінку вниз, уже у відкритому стані. */
.bh .bh-cat .ds-menu-main-catalog .ds-menu-catalog{
max-height:min(70vh,520px);
}
.bh .bh-cat .ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items{
display:grid !important;
grid-template-columns:1fr 1fr 1fr;
gap:0 8px;
}
.bh .bh-cat .ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item{
height:38px;
cursor:pointer;
}
.bh .bh-cat .ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item.bacar-open{
background:var(--bacar-soft);
border-radius:8px;
}
/* Наведення більше нічого не відкриває — перебиваємо правило теми. */
.bh .bh-cat .ds-menu-main-catalog .ds-menu-catalog-item:hover > .ds-menu-catalog{
opacity:0;
visibility:hidden;
}
/* Відкриває клас, який вішає bacar-theme.js */
.bh .bh-cat .ds-menu-main-catalog .ds-menu-catalog-item.bacar-open > .ds-menu-catalog{
opacity:1 !important;
visibility:visible !important;
overflow:auto !important;
}
.bh .bh-cat .ds-menu-main-catalog .ds-menu-catalog{
left:100% !important;
transform:none !important;
top:0 !important;
bottom:auto !important;
width:420px !important;
min-height:100%;
z-index:5;
border-radius:0 var(--bacar-r-lg) var(--bacar-r-lg) 0;
box-shadow:0 18px 50px rgba(11,18,32,.18);
}
}
/* =========================================================================
ГЕРОЙ — доопрацювання після порівняння варіантів
========================================================================= */
/* кикер над заголовком: каже, що це блок підбору, ще до читання заголовка */
.bhero-kick-top{
display:block;margin-bottom:10px;
font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--ds-primary-color,#F46913);
}
/* один акцент у заголовку — **слово** */
.bhero-em{color:var(--ds-primary-color,#F46913)}
/* ---------- переваги з другим рядком ---------- */
.bhero-tr{display:flex;flex-wrap:wrap;gap:0}
.bhero-tr span{
display:grid;
grid-template-columns:auto 1fr;
grid-template-rows:auto auto;
column-gap:8px;row-gap:2px;
align-items:start;
flex:1 1 0;min-width:150px;
padding:0 16px;
}
.bhero-tr span:first-child{padding-left:0}
.bhero-tr span + span{border-left:1px solid var(--bacar-d-line)}
.bhero-tr svg{grid-row:1;grid-column:1;margin-top:2px}
.bhero-tr b{
grid-row:1;grid-column:2;
font-size:13px;font-weight:700;color:var(--bacar-d-ink);line-height:1.25;
}
.bhero-tr em{
grid-row:2;grid-column:2;
font-style:normal;font-size:12px;color:var(--bacar-d-ink-2);line-height:1.35;
}
/* ---------- нумеровані кроки ---------- */
.bhero-fit label span{display:flex;align-items:center;gap:7px}
.bhero-fit label span i{
flex:none;width:17px;height:17px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(244,105,19,.16);color:var(--ds-primary-color,#F46913);
font-style:normal;font-size:11px;font-weight:800;line-height:1;
}
/* крок, до якого ще не дійшли, — приглушений */
.bhero-fit label:has(select:disabled) span i{
background:rgba(255,255,255,.07);color:var(--bacar-d-ink-2);
}
/* число в підказці виділяємо, щоб масштаб каталогу читався з погляду */
.bhero-hint{font-variant-numeric:tabular-nums}
/* ---------- телефон: стисла версія ----------
Заміряно: герой займав 662 px на екрані 390 — 78% першого екрана.
Опис і переваги тут прибираємо: опис повторює заголовок, а переваги
є і смугою нижче, і в підвалі. Форма лишається цілою — вона тут головна. */
@media (max-width:575.98px){
.bhero-lead{display:none}
.bhero-tr{display:none}
.bhero-kick-top{margin-bottom:8px;font-size:11px}
.bhero h1{font-size:21px;margin-bottom:14px}
.bhero-wrap{gap:14px}
.bhero-fit{padding:14px;gap:9px}
.bhero-row{gap:9px}
}
/* =========================================================================
ОСОБИСТИЙ КАБІНЕТ
Заводський текст-інструкція OpenCart («В особистому кабінеті ви можете
подивитися історію ваших замовлень, змінити адресу електронної пошти…»)
займав увесь перший екран і був синім, як посилання, хоча посиланням
не є. Його не читають: людина зайшла в кабінет, бо вже знає навіщо.
Ховаємо, а зверху ставимо числа.
========================================================================= */
#account-account #content > .content-block > .fsz-14.secondary-text.fw-300.mb-3{
display:none;
}
.ba-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:12px;
margin:0 0 16px;
}
.ba-stat{
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
padding:16px 18px;
border:1px solid var(--bacar-line);border-radius:var(--bacar-r-lg);
background:var(--bacar-surface);
text-decoration:none;
transition:border-color .16s ease,box-shadow .16s ease;
}
a.ba-stat:hover{
border-color:rgba(244,105,19,.45);
box-shadow:0 6px 18px -8px rgba(11,18,32,.18);
}
.ba-stat-ic{
display:flex;margin-bottom:8px;
color:var(--ds-primary-color,#F46913);
}
.ba-stat b{
font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;
color:var(--bacar-ink);font-variant-numeric:tabular-nums;
}
.ba-stat-t{font-size:13px;color:var(--bacar-ink-2)}
/* картка авто: без збереженого авто її немає взагалі */
.ba-car{display:none}
.ba-car.ba-car-on{display:flex}
.ba-car-name{
font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;
color:var(--bacar-ink);text-decoration:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.ba-car-name:hover{color:var(--ds-primary-color,#F46913)}
@media (max-width:575.98px){
.ba-stats{grid-template-columns:1fr 1fr;gap:8px}
.ba-stat{padding:12px 14px}
.ba-stat b{font-size:22px}
}
[data-bs-theme="dark"] .ba-stat,
.dark-theme .ba-stat{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10)}
[data-bs-theme="dark"] .ba-stat b,
.dark-theme .ba-stat b,
[data-bs-theme="dark"] .ba-car-name,
.dark-theme .ba-car-name{color:var(--bacar-d-ink)}
/* =========================================================================
ОСОБИСТИЙ КАБІНЕТ — усі сторінки
Їх двадцять шість: замовлення, адреси, закладки, повернення, бонуси,
вхід, реєстрація, відновлення пароля і решта. Усі побудовані на одних
і тих самих блоках — .content-block, .table, .form-control,
.ds-account-column-nav — тому шар один, а не двадцять шість.
Селектор [id^="account-"] бере всі сторінки кабінету за їхнім
контейнером і водночас нікуди більше не дістає.
========================================================================= */
/* ---------- каркас сторінки ---------- */
[id^="account-"] .ds-page-title h1{
font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
color:var(--bacar-ink);margin:0;
}
[id^="account-"] .ds-breadcrumb{margin-bottom:6px}
[id^="account-"] .content-block{
border:1px solid var(--bacar-line);
border-radius:var(--bacar-r-lg);
background:var(--bacar-surface);
padding:22px 24px;
box-shadow:none;
}
[id^="account-"] .content-block-title{
font-size:16px;font-weight:700;color:var(--bacar-ink);
border-bottom:1px solid var(--bacar-line);
padding-bottom:14px;margin-bottom:16px;
}
[id^="account-"] .content-block-title svg{margin-right:9px}
/* ---------- бічна навігація ----------
Головне тут — активний пункт. У теми його не було: людина не бачила,
у якому вона розділі. Клас вішає bacar-theme.js за адресою сторінки. */
[id^="account-"] .ds-account-column-nav{padding:8px !important}
[id^="account-"] .ds-account-column-nav li{margin:0}
[id^="account-"] .ds-account-column-nav-item{
gap:11px;padding:10px 12px;border-radius:var(--bacar-r);
text-decoration:none;
transition:background .14s ease,color .14s ease;
}
[id^="account-"] .ds-account-column-nav-item:hover{background:var(--bacar-soft)}
[id^="account-"] .ds-account-column-nav-item-icon{
width:32px;height:32px;place-items:center;flex:none;
background:var(--bacar-soft);border-radius:9px;
transition:background .14s ease;
}
[id^="account-"] .ds-account-column-nav-item-text{
font-size:14px;font-weight:500;color:var(--bacar-ink);
}
[id^="account-"] .ds-account-column-nav-item.ba-nav-on{background:rgba(244,105,19,.09)}
[id^="account-"] .ds-account-column-nav-item.ba-nav-on .ds-account-column-nav-item-icon{
background:rgba(244,105,19,.16);
}
[id^="account-"] .ds-account-column-nav-item.ba-nav-on .ds-account-column-nav-item-text{
color:var(--ds-primary-color,#F46913);font-weight:700;
}
[id^="account-"] .ds-account-column-nav-item.ba-nav-on svg path{fill:var(--ds-primary-color,#F46913)}
/* ---------- таблиці ----------
Товсті рамки й сірий заголовок — це і є той «2000 рік». Прибираємо
рамки, лишаємо волосяну лінію між рядками, заголовок робимо дрібним
і спокійним. */
[id^="account-"] .table{margin:0;border:0}
[id^="account-"] .table > :not(caption) > * > *{
border:0;border-bottom:1px solid var(--bacar-line);
padding:13px 14px;vertical-align:middle;background:transparent;
}
[id^="account-"] .table thead th,
[id^="account-"] .table .thead-dark th{
background:transparent;color:var(--bacar-ink-2);
font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
border-bottom:1px solid var(--bacar-line);
padding-top:0;
}
[id^="account-"] .table tbody tr:last-child > *{border-bottom:0}
[id^="account-"] .table-hover tbody tr:hover > *{background:var(--bacar-soft)}
[id^="account-"] .table td{font-size:14px;color:var(--bacar-ink)}
[id^="account-"] .table a{color:var(--ds-primary-color,#F46913);text-decoration:none}
[id^="account-"] .table a:hover{text-decoration:underline}
/* числа в колонках вирівнюємо по розряду */
[id^="account-"] .table td,
[id^="account-"] .table th{font-variant-numeric:tabular-nums}
/* ---------- таблиці на телефоні ----------
Горизонтальна прокрутка таблиці на телефоні — найгірше, що можна
зробити зі списком замовлень. Перетворюємо кожен рядок на картку,
а підпис колонки підставляємо перед значенням. Підписи бере з
і проставляє bacar-theme.js. */
@media (max-width:767.98px){
[id^="account-"] .table-responsive{overflow:visible}
[id^="account-"] .table thead{display:none}
[id^="account-"] .table,
[id^="account-"] .table tbody,
[id^="account-"] .table tr,
[id^="account-"] .table td{display:block;width:auto}
[id^="account-"] .table tr{
border:1px solid var(--bacar-line);border-radius:var(--bacar-r);
padding:6px 12px;margin-bottom:10px;background:var(--bacar-surface);
}
[id^="account-"] .table td{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:8px 0 !important;border-bottom:1px solid var(--bacar-line) !important;
text-align:right;
}
[id^="account-"] .table tr td:last-child{border-bottom:0 !important}
[id^="account-"] .table td[data-ba-label]::before{
content:attr(data-ba-label);
flex:none;text-align:left;
font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--bacar-ink-2);
}
}
/* ---------- форми ---------- */
[id^="account-"] .form-control,
[id^="account-"] select.form-select,
[id^="account-"] textarea.form-control{
height:auto;min-height:44px;
padding:10px 14px;
border:1px solid var(--bacar-line);border-radius:var(--bacar-r);
background:var(--bacar-surface);
font-size:15px;color:var(--bacar-ink);
box-shadow:none;
transition:border-color .16s ease,box-shadow .16s ease;
}
[id^="account-"] .form-control:focus,
[id^="account-"] select.form-select:focus{
border-color:var(--ds-primary-color,#F46913);
box-shadow:0 0 0 3px rgba(244,105,19,.14);
outline:0;
}
[id^="account-"] .form-control::placeholder{color:#9CA3AF}
[id^="account-"] label{margin-bottom:6px}
/* ---------- кнопки ---------- */
[id^="account-"] .button-primary,
[id^="account-"] .ds-btn-primary{
min-height:44px;padding:0 22px;border-radius:var(--bacar-r);
font-size:15px;font-weight:600;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
[id^="account-"] .button-outline{
min-height:44px;padding:0 20px;border-radius:var(--bacar-r);
font-size:15px;font-weight:600;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
/* ---------- вхід і реєстрація ----------
Це перше, що бачить новий клієнт. Тримаємо форму вужчою за екран,
щоб поля не розтягувались на всю ширину монітора. */
#account-login .content-block,
#account-register .content-block,
#account-forgotten .content-block,
#account-reset .content-block{max-width:640px}
@media (max-width:767.98px){
[id^="account-"] .ds-page-title h1{font-size:22px}
[id^="account-"] .content-block{padding:16px}
}
/* ---------- темна тема ---------- */
[data-bs-theme="dark"] [id^="account-"] .content-block,
.dark-theme [id^="account-"] .content-block,
[data-bs-theme="dark"] [id^="account-"] .table tr,
.dark-theme [id^="account-"] .table tr{
background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10);
}
[data-bs-theme="dark"] [id^="account-"] .ds-page-title h1,
.dark-theme [id^="account-"] .ds-page-title h1,
[data-bs-theme="dark"] [id^="account-"] .table td,
.dark-theme [id^="account-"] .table td,
[data-bs-theme="dark"] [id^="account-"] .ds-account-column-nav-item-text,
.dark-theme [id^="account-"] .ds-account-column-nav-item-text{color:var(--bacar-d-ink)}
[data-bs-theme="dark"] [id^="account-"] .form-control,
.dark-theme [id^="account-"] .form-control{
background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:var(--bacar-d-ink);
}
/* =========================================================================
ІКОНКА ПУНКТА «МЕНЮ» В НИЖНІЙ ПАНЕЛІ
Іконки теми — це не svg, а порожні коробки з CSS-маскою: mask-image малює
форму, а background-color її зафарбовує. У нашого пункту всередині
звичайний svg, маски немає — тому background-color: rgb(156,163,175)
зафарбовував увесь прямокутник, і замість іконки виходив сірий квадрат.
========================================================================= */
.bacar-nav-icon{
background:none !important;
-webkit-mask:none !important;
mask:none !important;
/* висота 26 — рівно як у теминих іконок-масок, інакше підпис нашого
пункту стоїть на 4 px вище за сусідні */
width:auto !important;height:26px !important;
color:var(--bacar-ink-2);
}
.bacar-nav-menu:hover .bacar-nav-icon,
.bacar-nav-menu:focus-visible .bacar-nav-icon{color:var(--ds-primary-color,#F46913)}
/* =========================================================================
ШТОРКА КОНТАКТІВ НА ТЕЛЕФОНІ (.bhc)
Відкривається зі слухавки в шапці й із пункту «Контакти» в нижній панелі.
Оформлення всередині — ті самі класи, що у випадаючому меню телефона на
ПК (.bh-row, .bh-dt, .bh-dphone…), тож два місця виглядають однаково.
========================================================================= */
.bhc-ovl{
position:fixed;inset:0;z-index:12400;
background:rgba(11,18,32,.45);
opacity:0;transition:opacity .22s ease;
}
.bhc-ovl.bhc-on{opacity:1}
.bhc{
position:fixed;left:0;right:0;bottom:0;z-index:12401;
display:flex;flex-direction:column;
max-height:88vh;
padding:8px 20px calc(18px + env(safe-area-inset-bottom));
background:var(--bacar-surface,#fff);
border-radius:18px 18px 0 0;
box-shadow:0 -18px 50px rgba(11,18,32,.22);
transform:translateY(100%);
transition:transform .26s cubic-bezier(.22,.8,.3,1);
visibility:hidden;
}
.bhc.bhc-on{transform:translateY(0);visibility:visible}
/* смужка-«ручка» — звичний для шторки натяк, що її можна закрити */
.bhc-grip{
flex:none;width:40px;height:4px;margin:4px auto 10px;
border-radius:3px;background:var(--bacar-line,#E6E9EE);
}
.bhc-head{
flex:none;display:flex;align-items:center;
padding-bottom:14px;margin-bottom:16px;
border-bottom:1px solid var(--bacar-line,#E6E9EE);
}
.bhc-head-t{font-size:17px;font-weight:800;color:var(--bacar-ink)}
.bhc-x{
margin-left:auto;flex:none;
width:34px;height:34px;display:flex;align-items:center;justify-content:center;
border:0;background:var(--bacar-soft,#F7F8FA);border-radius:50%;
color:var(--bacar-ink-2);cursor:pointer;
}
.bhc-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.bhc .bh-callback{
display:flex;align-items:center;justify-content:center;gap:9px;
width:100%;height:48px;margin-top:12px;padding:0 14px;
border:1.5px solid rgba(244,105,19,.55);border-radius:var(--bacar-r);
background:transparent;color:var(--ds-primary-color,#F46913);
font-size:15px;font-weight:600;font-family:inherit;text-decoration:none;cursor:pointer;
}
.bhc .bh-dsoc{grid-template-columns:1fr 1fr}
.bhc-row-top{padding-top:18px;border-top:1px solid var(--bacar-line,#E6E9EE)}
.bhc .bh-dgo{margin-bottom:4px}
/* На ПК шторки немає взагалі: там працює випадаюче меню телефона. */
@media (min-width:992px){
.bhc,.bhc-ovl{display:none !important}
}
[data-bs-theme="dark"] .bhc,
.dark-theme .bhc{background:#111C2F}
[data-bs-theme="dark"] .bhc-head,
.dark-theme .bhc-head{border-bottom-color:rgba(255,255,255,.10)}
[data-bs-theme="dark"] .bhc-head-t,
.dark-theme .bhc-head-t{color:var(--bacar-d-ink)}
[data-bs-theme="dark"] .bhc-x,
.dark-theme .bhc-x{background:rgba(255,255,255,.06);color:var(--bacar-d-ink-2)}
|