/ tags,
so the ".table td/.table th" fix above never reaches it. It ships with
its own white-background/grey-text colors, which is exactly our own
theme now - this override just aligns it to our *exact* palette
(panel white, our own text-dim/text tones) instead of leaving it on
whatever slightly different white/grey the vendor bundle used. Bold
text/headings get the darker, higher-emphasis text tone so row labels
("Происхождение" etc.) still stand out from their values. */
.tb-compare-page{ background:var(--tb-panel) !important; }
.tb-compare-page, .tb-compare-page div, .tb-compare-page span, .tb-compare-page p,
.tb-compare-page td, .tb-compare-page th, .tb-compare-page tr, .tb-compare-page table,
.tb-compare-page li, .tb-compare-page a{
background-color:var(--tb-panel) !important;
border-color:var(--tb-border) !important;
color:var(--tb-text-dim) !important;
}
.tb-compare-page h1, .tb-compare-page h2, .tb-compare-page h3, .tb-compare-page h4,
.tb-compare-page h5, .tb-compare-page h6, .tb-compare-page strong, .tb-compare-page b{
color:var(--tb-text) !important;
background-color:transparent !important;
}
.tb-compare-page a:hover{ color:var(--tb-gold-text) !important; }
.tb-compare-page img{ background-color:#fff !important; } /* product photos are on white backgrounds themselves */
/* login/auth modal field labels ("Email", "Пароль") */
.input-label, .input-label-secondary{ color:var(--tb-text-dim) !important; }
/* gold accent on every radio/checkbox (delivery method, payment method,
"запомнить меня" etc.) instead of the default browser blue */
input[type="radio"], input[type="checkbox"]{ accent-color:var(--tb-gold); }
/* ---------- forms (inputs everywhere: header search, filters, forms) ---------- */
.form-control, .custom-select, textarea, select, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="search"], input[type="number"]{
background:var(--tb-input) !important;
border:1px solid var(--tb-border-2) !important;
color:var(--tb-text) !important;
border-radius:var(--tb-radius-sm);
}
.form-control::placeholder{ color:var(--tb-text-faint); }
.form-control:focus{ box-shadow:0 0 0 2px rgba(201,162,39,.25); border-color:var(--tb-gold) !important; }
/* the quantity-selector number field is deliberately borderless/flush in
the vendor markup ("js-result form-control ... border-0 rounded-lg
p-0") - it already sits inside its own bordered "pill" wrapper, and
relies on that wrapper's own padding to keep the digit off the curve.
Our blanket .form-control rule above (background + border + its own,
smaller corner radius) was landing on it too and fighting the utility
classes, which drew a second, mismatched pill directly under the text
with no side padding - hence the number looking like it hangs over
the edge. Restore the vendor's intended transparent/flush look here. */
.js-result.form-control{ background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important; }
.input-group-text{ background:var(--tb-input) !important; border-color:var(--tb-border-2) !important; color:var(--tb-text-faint) !important; }
/* ---------- select2 (sort dropdown on catalog/search pages) ---------- */
/* select2.min.css ships its own light theme (white field, white dropdown
panel, blue highlighted row) - now that js/tabaks-extra.js actually
initializes it (it used to sit there invisible, opacity:0, see the
15th round), give it our exact palette (and gold highlight) instead of
the vendor's default off-white/blue. */
.select2-container--default .select2-selection--single{
background:var(--tb-input) !important; border:1px solid var(--tb-border-2) !important; border-radius:var(--tb-radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--tb-text); }
.select2-container--default.select2-container--disabled .select2-selection--single{ background:var(--tb-input) !important; }
.select2-dropdown{ background:var(--tb-panel) !important; border:1px solid var(--tb-border-2) !important; }
.select2-container--default .select2-search__field{ background:var(--tb-input) !important; color:var(--tb-text) !important; }
.select2-results__option{ background:var(--tb-panel); color:var(--tb-text); }
.select2-container--default .select2-results__option[aria-selected="true"]{ background:var(--tb-input) !important; color:var(--tb-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--tb-gold) !important; color:#0b0b0b !important; }
.select2-container--open .select2-dropdown{ border-color:var(--tb-gold) !important; }
/* ---------- buttons ---------- */
.btn{ border-radius:999px; font-weight:700; letter-spacing:.04em; }
.btn-primary, .btn-primary:hover, .btn-primary:focus{
background:var(--tb-gold) !important; border-color:var(--tb-gold) !important; color:#0b0b0b !important;
}
.btn-primary:hover{ background:var(--tb-gold-hover) !important; border-color:var(--tb-gold-hover) !important; }
.btn-outline-primary{ color:var(--tb-text-dim) !important; border-color:var(--tb-border-2) !important; background:transparent !important; }
.btn-outline-primary:hover{ color:var(--tb-gold-text) !important; border-color:var(--tb-gold) !important; background:transparent !important; }
.btn-soft-primary{ background:var(--tb-input) !important; color:var(--tb-text-dim) !important; border:1px solid var(--tb-border-2) !important; }
.btn-soft-primary:hover{ color:var(--tb-gold-text) !important; border-color:var(--tb-gold) !important; }
.btn-icon{ background:var(--tb-input); border:1px solid var(--tb-border-2); color:var(--tb-text-dim); }
.btn-icon:hover{ color:var(--tb-gold-text); border-color:var(--tb-gold); }
/* round gold "add to cart" action, mirrors mockup's circular + button */
.addToCartList, .addToCartFull{
border-radius:999px !important;
background:var(--tb-gold) !important;
border-color:var(--tb-gold) !important;
color:#0b0b0b !important;
}
.addToCartList:hover, .addToCartFull:hover{ background:var(--tb-gold-hover) !important; }
/* scoped to ".btn" on purpose: these classes are reused in two very
different contexts - a small circular icon-only button on product
cards (always carries .btn.btn-icon...) and a plain inline text link
on the product detail page ("В избранное"/"В сравнение", no .btn at
all). Without the ".btn" qualifier this rule boxed just the LINK TEXT
of that second case in a stray pill sitting next to its own
(differently-styled) icon - looked like a mismatched half-button. */
.btn.addToWishList, .btn.addToCompareList{
background:var(--tb-input) !important; border:1px solid var(--tb-border-2) !important; color:var(--tb-text-dim) !important;
}
.btn.addToWishList:hover, .btn.addToCompareList:hover{ color:var(--tb-gold-text) !important; border-color:var(--tb-gold) !important; }
.addToWishList:hover, .addToCompareList:hover{ color:var(--tb-gold-text) !important; }
/* ---------- header ---------- */
.tb-header{
position:sticky; top:0; z-index:1030;
background:rgba(255,255,255,.85);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--tb-border);
}
.tb-header-top{
max-width:1520px; margin:0 auto; padding:14px 20px;
display:flex; align-items:center; gap:22px;
}
/* flex-shrink:0 is the important part here: on a narrow phone, if the
header row (logo + actions) doesn't quite fit - which is more likely
once logged in, since the "Кабинет" pill is wider than a logged-out
guest's shorter controls - flexbox would otherwise shrink the logo's
own box narrower than the image's natural width. The image (fixed
height, width:auto) doesn't shrink to match, so it got stretched/
squished sideways ("the logo breaks"). Pinning the logo's box to its
own size means the row overflows into horizontal scroll instead, which
still looks correct, just scrollable, rather than visibly distorted. */
.tb-logo{ flex-shrink:0; }
.tb-logo img{ height:34px; width:auto; max-width:none; display:block; }
.tb-search{ flex:1; display:flex; justify-content:center; }
.tb-search-form{
display:flex; align-items:center; gap:10px;
background:var(--tb-input); border:1px solid var(--tb-border-2);
border-radius:999px; padding:9px 18px; width:100%; max-width:420px;
}
.tb-search-form input{ flex:1; background:transparent !important; border:0 !important; outline:0; color:var(--tb-text) !important; font-size:13px; padding:0; }
.tb-search-form .tb-search-icon{ color:var(--tb-text-faint); font-size:14px; }
.tb-search-form button{ background:transparent; border:0; color:var(--tb-text-faint); padding:0; }
.tb-phone{ font-size:14px; font-weight:700; letter-spacing:.02em; white-space:nowrap; color:var(--tb-text); }
.tb-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.tb-icon-btn{
width:38px; height:38px; border-radius:999px; border:1px solid var(--tb-border-2);
background:var(--tb-input); display:flex; align-items:center; justify-content:center;
color:var(--tb-text-dim); position:relative;
}
.tb-icon-btn:hover{ color:var(--tb-gold-text); border-color:var(--tb-gold); }
.tb-icon-btn .badge-count{
position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px;
border-radius:999px; background:var(--tb-gold); color:#0b0b0b; font-size:10px; font-weight:800;
display:flex; align-items:center; justify-content:center; line-height:1;
}
.tb-usersdisp{ display:flex; align-items:center; gap:8px; }
.tb-usersdisp a, .tb-usersdisp li{ list-style:none; }
.tb-usersdisp a{
height:38px; padding:0 16px; border-radius:999px; border:1px solid var(--tb-border-2);
background:var(--tb-input); display:inline-flex; align-items:center; font-size:12px;
font-weight:700; letter-spacing:.04em; color:var(--tb-text-dim); white-space:nowrap;
}
.tb-usersdisp a:hover{ color:var(--tb-gold-text); border-color:var(--tb-gold); }
.tb-usersdisp a.tb-auth-solid{ background:var(--tb-gold); border-color:var(--tb-gold); color:#0b0b0b; }
.tb-usersdisp a.tb-auth-solid:hover{ background:var(--tb-gold-hover); border-color:var(--tb-gold-hover); color:#0b0b0b; }
.tb-usersdisp a i{ margin-right:6px; font-size:11px; }
.tb-usersdisp .dropdown-menu{ min-width:220px; margin-top:10px !important; border:1px solid var(--tb-border); border-radius:var(--tb-radius-md); box-shadow:0 20px 40px rgba(33,29,21,.15); }
/* Cabinet nav list - shared by the small header dropdown (.tb-usersdisp,
wraps users_forma_enter.tpl) AND the full-width sidebar on /users/*
pages (users_page_list.tpl): both use the exact same ".navbar-vertical
.card > .nav.nav-tabs" markup from flow. The bundle's .nav-tabs rules
are built for horizontal tab bars (left accent border, negative
margins, a solid "active tab" background) - none of that makes sense
for a plain vertical menu, and it's what made items look uneven with
a stray highlight box. Flatten all of it to a plain, even list. */
/* !important on border here specifically: the generic ".card:hover{border-
color:gold!important}" product-card hover effect elsewhere in this file
also matches this reused .card inside the dropdown, and being !important
it would beat a plain "border:0" and draw a gold outline around the
whole "Кабинет" panel while the mouse is over it. */
.tb-usersdisp .dropdown-menu .card, .tb-usersdisp .dropdown-menu .card-body{ background:transparent !important; border:0 !important; padding:10px; }
.navbar-vertical .text-cap{ color:var(--tb-gold-text) !important; font-size:10px; letter-spacing:.15em; font-weight:800; }
.navbar-vertical .nav-tabs{ border-bottom:0; }
.navbar-vertical .nav-tabs .nav-item{ margin:0 !important; }
.navbar-vertical .nav-tabs .nav-link{
color:var(--tb-text-dim) !important; font-size:12px; font-weight:500; padding:9px 10px !important;
margin:0 !important; border:0 !important; border-radius:8px; background:transparent !important;
display:flex; align-items:center;
}
.navbar-vertical .nav-tabs .nav-link:hover,
.navbar-vertical .nav-tabs .nav-link:focus{ color:var(--tb-gold-text) !important; border:0 !important; }
.navbar-vertical .nav-tabs .nav-link.active,
.navbar-vertical .nav-tabs .nav-item.active .nav-link{ background:transparent !important; border:0 !important; color:var(--tb-gold-text) !important; }
.navbar-vertical .nav-icon{ width:18px; margin-right:8px; text-align:center; color:var(--tb-text-mute); }
.navbar-vertical .nav-link-badge{ margin-left:auto; background:var(--tb-panel-2); color:var(--tb-text-dim); }
.tb-cart-pill{
display:flex; align-items:center; gap:9px; height:38px; padding:0 18px; border-radius:999px;
background:var(--tb-gold); color:#0b0b0b !important; font-size:12px; font-weight:800; letter-spacing:.06em;
}
.tb-cart-pill:hover{ background:var(--tb-gold-hover); color:#0b0b0b !important; }
.tb-navrow{ max-width:1520px; margin:0 auto; padding:0 20px; display:flex; gap:28px; border-top:1px solid var(--tb-border); overflow-x:auto; }
.tb-navrow a{
padding:13px 0; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--tb-text-mute); white-space:nowrap;
}
.tb-navrow a:hover{ color:var(--tb-gold-text); }
.tb-navrow a.active{ color:var(--tb-gold-text); box-shadow:inset 0 -2px 0 var(--tb-gold); }
.tb-hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; cursor:pointer; flex-shrink:0; }
.tb-hamburger span{ display:block; height:2px; width:100%; background:var(--tb-text); border-radius:2px; }
.tb-mobile-search{ display:none; }
.tb-mobile-panel{ display:none; padding:16px 20px 20px; border-top:1px solid var(--tb-border); }
.tb-mobile-panel.open{ display:block; }
.tb-mobile-panel .tb-search-form{ max-width:none; margin-bottom:14px; }
.tb-mobile-panel a{ display:block; padding:12px 6px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--tb-text-dim); border-bottom:1px solid var(--tb-border); }
/* ---------- layout grid: sidebar + content ---------- */
.tb-page-grid{ max-width:1520px; margin:0 auto; padding:34px 30px 90px; display:grid; grid-template-columns:262px 1fr; gap:32px; align-items:start; }
/* ---------- category sidebar ---------- */
.tb-aside{ position:sticky; top:110px; border:1px solid var(--tb-border); border-radius:var(--tb-radius-md); background:var(--tb-panel); overflow:hidden; box-shadow:0 2px 10px rgba(33,29,21,.05); }
/* reverted back to white per your latest feedback - with the header AND
the Telegram block both cream, and only the plain row list white in
between, the whole sidebar read as one uniform tan block instead of
distinct sections. White here keeps the header visually with the row
list beneath it; the Telegram block stays cream lower down, so that's
still the one section that stands apart. */
.tb-aside-head{
padding:16px 20px; border-bottom:1px solid var(--tb-border); font-size:11px; font-weight:800;
letter-spacing:.2em; color:var(--tb-gold-text); display:flex; align-items:center; justify-content:space-between;
}
.tb-cat-list{ list-style:none; margin:0; padding:0; }
.tb-cat-list > li{ border-bottom:1px solid var(--tb-border-3); position:relative; }
.tb-cat-list .dropdown-nav-link{
display:flex !important; align-items:center; gap:10px; padding:10px 20px !important; font-size:12px;
font-weight:500; color:var(--tb-text-dim) !important; cursor:pointer;
}
.tb-cat-list .dropdown-nav-link:hover{ color:var(--tb-gold-text) !important; background:var(--tb-panel-2); }
.tb-cat-list .dropdown-nav-link:after{ margin-left:auto; }
/* vendor bundle draws the expand/collapse indicator as a low-contrast grey
SVG chevron (easy to mistake for a stray glyph) that just rotates
180deg when open. Swap it for a plain FontAwesome arrow (same icon
font used everywhere else on the site) that clearly points right when
collapsed and down when expanded. */
.dropdown-toggle-collapse::after{
background:none !important; width:auto !important; height:auto !important;
font:900 12px/1 "Font Awesome 5 Free" !important; content:"\f054" !important;
color:var(--tb-text-mute); transform:none !important; transition:color .2s;
}
.dropdown-toggle-collapse[aria-expanded="true"]::after{ content:"\f078" !important; }
.tb-cat-list .dropdown-nav-link:hover::after{ color:var(--tb-gold-text); }
.tb-cat-icon{
width:26px; height:26px; border-radius:8px; background:var(--tb-photo-bg); border:1px solid var(--tb-border-2);
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tb-cat-icon img{ width:15px; height:15px; object-fit:contain; }
.tb-cat-list .sidebarNav{ background:var(--tb-panel-2); }
.tb-cat-list .sidebarNav .dropdown-item{
color:var(--tb-text-mute) !important; font-size:12px; padding:8px 20px 8px 46px !important; background:transparent !important;
}
.tb-cat-list .sidebarNav .dropdown-item:hover{ color:var(--tb-gold-text) !important; }
.tb-cat-list .tb-cat-row:nth-child(n+9){ display:none; }
.tb-cat-list.tb-cats-expanded .tb-cat-row:nth-child(n+9){ display:block; }
.tb-cats-toggle{
width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
padding:13px 20px; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--tb-gold-text);
border:0; border-top:1px solid var(--tb-border-3); background:transparent; cursor:pointer;
}
.tb-cats-toggle:hover{ color:var(--tb-gold-hover); }
.tb-cats-toggle .tb-cats-toggle-arrow{ display:inline-block; font-size:11px; transition:transform .2s; }
/* same idea as the product cards: the plain category list above stays
white, this promo block gets a cream tint so it reads as its own
distinct section instead of blending into one continuous white card. */
.tb-aside-help{ padding:20px; border-top:1px solid var(--tb-border); }
.tb-aside-help .tb-label{ font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--tb-text-faint); }
.tb-aside-help .tb-text{ font-size:14px; font-weight:700; margin-top:8px; line-height:1.4; color:var(--tb-text); }
.tb-aside-help a{
margin-top:12px; height:40px; border-radius:999px; border:1px solid var(--tb-border-2);
display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
letter-spacing:.1em; color:var(--tb-text-dim);
}
.tb-aside-help a:hover{ border-color:var(--tb-gold); color:var(--tb-gold-text); }
/* ---------- hero ---------- */
.tb-hero{ position:relative; border-radius:var(--tb-radius-lg); overflow:hidden; border:1px solid var(--tb-border); background:var(--tb-panel-2); }
.tb-hero img, .tb-hero .slick-slide img{ width:100%; height:auto; display:block; }
.tb-hero .slick-slide > div{ line-height:0; }
.tb-hero-dots{ position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:7px; list-style:none; margin:0; padding:0; z-index:2; }
.tb-hero-dots li{ display:block; }
.tb-hero-dots li button{ width:6px; height:6px; padding:0; border:0; border-radius:999px; background:var(--tb-border-2); font-size:0; text-indent:-9999px; cursor:pointer; }
.tb-hero-dots li.slick-active button{ background:var(--tb-gold); width:22px; transition:width .2s; }
.tb-tagline{ text-align:center; margin-top:44px; }
.tb-tagline .kicker{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--tb-text-mute); font-size:11px; font-weight:700; letter-spacing:.3em; }
.tb-tagline .kicker span.line{ width:22px; height:1px; background:var(--tb-gold); display:block; }
.tb-tagline h1{ margin:16px 0 0; font-size:56px; line-height:.96; font-weight:700; letter-spacing:-.02em; }
.tb-tagline p{ margin:14px 0 0 !important; font-size:18px; color:var(--tb-text-dim) !important; font-weight:500; }
/* ---------- section headers ---------- */
.tb-section-head{ display:flex; align-items:flex-end; gap:16px; border-bottom:1px solid var(--tb-border); padding-bottom:16px; margin-top:56px; flex-wrap:wrap; }
.tb-section-head h2{ margin:0; font-size:26px; font-weight:700; letter-spacing:-.01em; }
.tb-section-head .tb-more{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--tb-gold-text); padding-bottom:4px; }
.tb-section-head .tb-more:hover{ color:var(--tb-gold-hover); }
/* the very first section on the page (Категории) has nothing above it any
more (hero/tagline were removed) - line its heading up with the top of
the category sidebar box instead of leaving the old 56px gap meant to
separate it from the hero. */
.tb-section-head-first{ margin-top:0; }
/* ---------- cart quantity stepper (order/product.tpl, plain table markup, no framework component) ---------- */
.cart-btn-wrap table{ border-collapse:separate; border-spacing:6px 0; }
.cart-btn-wrap .cart-minus, .cart-btn-wrap .cart-plus{
width:34px; height:34px; border-radius:999px; border:0;
background:var(--tb-input); color:var(--tb-text) !important; font-size:16px; font-weight:700;
line-height:1; cursor:pointer;
}
.cart-btn-wrap .cart-minus:hover, .cart-btn-wrap .cart-plus:hover{ background:var(--tb-panel-2); color:var(--tb-gold-text) !important; }
.cart-btn-wrap .cart-input{
width:46px; height:34px; text-align:center; background:var(--tb-input) !important;
border:0 !important; border-radius:8px; color:var(--tb-text) !important; font-weight:700;
}
/* ---------- checkout: address fields the JS injects into #userAdresData
(city/name/phone/street/house/etc, right after picking a saved
address) - was a long stack of full-width boxes; group them into a
tidy two-column grid instead. ---------- */
#userAdresData{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:10px; }
#userAdresData > *{ margin-bottom:0 !important; }
@media (max-width:767px){ #userAdresData{ grid-template-columns:1fr; } }
/* ---------- category tile grid (leftCatalTable) ---------- */
.tb-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin-top:24px; }
.tb-cat-grid .catalog-wrap{
border:1px solid var(--tb-border); border-radius:var(--tb-radius-md); overflow:hidden;
background:var(--tb-panel); height:100%;
}
.tb-cat-grid .catalog-wrap:hover{ border-color:var(--tb-gold); }
/* the real markup is - the is the
thing that actually holds the image+name, not the outer wrap. Putting
flex on the wrap alone (previous attempt) did nothing because
catalog-name isn't a direct child of it; the fix has to target the
. The grid row stretches every tile to match its tallest neighbor
(e.g. a two-line name next to a one-line one), the image has a fixed
aspect-ratio and doesn't grow, so without this the leftover height
showed as a stray strip of plain white (the wrap's own background)
below the shorter cream name block. */
.tb-cat-grid .catalog-wrap > a{ display:flex; flex-direction:column; height:100%; }
.tb-cat-grid .catalog-img{ aspect-ratio:4/3; overflow:hidden; background:var(--tb-photo-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tb-cat-grid .catalog-img img{ width:100%; height:100%; object-fit:cover; }
/* same neutral-photo/cream-label split as the product cards above: the
picture keeps its own colors untouched, the name strip underneath
gets the cream tone so the two halves read as distinct zones. flex:1
makes it reach the tile's real bottom edge (see the comment on the
rule above) instead of leaving a gap. */
.tb-cat-grid .catalog-name{ padding:14px 16px 16px; font-size:15px; font-weight:800; margin:0; color:var(--tb-text); flex:1; display:flex; align-items:center; }
/* ---------- sort/filter bar (product_page_list.tpl "Популярные/Дорогие/..." + grid-list toggle) ---------- */
/* Sits right under the category-tile grid above with no breathing room of
its own (the grid's margin-top only applies to itself) - push the sort
control and the grid/list icons down a bit so they don't crowd the
tiles above them. */
#filter-well-select + .select2-container{ margin-top:18px; }
#filter-well{ margin-top:18px; }
/* ---------- brand tiles (brands/top_brands_one.tpl, "shop by brand" block on category pages) ---------- */
.tb-brand-tile{
display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-start;
width:150px; margin:0 10px 16px 0; padding:16px 10px; text-align:center; vertical-align:top;
border:1px solid var(--tb-border); border-radius:var(--tb-radius-md); background:var(--tb-panel);
}
.tb-brand-tile:hover{ border-color:var(--tb-gold); }
.tb-brand-tile-img{ display:flex; align-items:center; justify-content:center; height:60px; width:100%; margin-bottom:10px; }
.tb-brand-tile-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.tb-brand-tile-img.d-none, .tb-brand-tile-img.hidden{ display:none; }
.tb-brand-tile-name{ display:block; font-size:12px; font-weight:700; color:var(--tb-text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tb-brand-tile-name.d-none, .tb-brand-tile-name.hidden{ display:none; }
/* ---------- product cards (Bootstrap .card re-skin, all product/main_product_forma_*.tpl) ---------- */
/* redesigned per the marketplace-style reference you sent: no visible
card border/shadow at rest - the card is just the grey photo box plus
plain text below, separated from its neighbors by grid gutter space
alone. A soft shadow only appears on hover, as a lift effect. */
/* per your request: a visible border again, plus a nicer animated hover
(border fades to gold, the card lifts slightly and gains a deeper
shadow) instead of the plain borderless/shadow-only look from before. */
.card.card-bordered, .card{
background:var(--tb-panel) !important; border:1px solid var(--tb-border) !important; border-radius:var(--tb-radius-md) !important;
overflow:hidden; box-shadow:none !important;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
/* card standardization: make every card a column that fills the full
height of its grid slot (Bootstrap's .row stretches columns to equal
height by default, but the .card inside a column only matches that
if it explicitly fills it). Combined with .card-body{flex:1} below,
this pins the price/cart-button row to the same bottom edge across
every card in a row, regardless of how long the product name is or
whether that particular product has a stock-status line at all. */
display:flex; flex-direction:column; height:100%;
}
.card:hover{
border-color:var(--tb-gold) !important;
box-shadow:0 12px 26px rgba(33,29,21,.12) !important;
transform:translateY(-4px);
}
/* same story for the orange/tan focus ring Bootstrap's dropdown-toggle
shows the instant you click it open (one of several per-color-theme
variants baked into the bundle) - most visible on the header's
"Кабинет" button. */
.dropdown-toggle:focus{ box-shadow:none !important; outline:0 !important; }
/* Standardize product photo size: source photos come in all shapes (tall
bottle, wide pack, portrait pen...), so without a fixed box every card
ends up a different height/crop. Fix every card image to the same
square box and letterbox the photo inside it (object-fit:contain) so
nothing gets cropped, instead of stretching/covering it. */
.card .card-img-top, .card .card-img{
aspect-ratio:1/1; width:100%; height:auto;
object-fit:contain; object-position:center;
/* per your latest feedback: no grey backdrop in the product card photo
box either - plain white, matching the rest of the (now fully
white) site. */
background:var(--tb-panel);
padding:14px; box-sizing:border-box;
}
.card .row.no-gutters .card-img{ aspect-ratio:1/1; }
/* reference layout: no divider color between photo and text, name/rating/
stock/price are plain left-aligned text under the grey photo box - the
grey-vs-white contrast alone marks where the photo ends. */
.card-footer, .card-body{ background:transparent !important; text-align:left !important; }
.card.text-center{ text-align:left !important; }
/* card standardization, continued: card-body grows to fill whatever
leftover height the card has (after the fixed-height photo box), and
the footer (price + cart button) never shrinks - so the footer always
sits flush with the bottom of the card, lined up with every other
card in the same row. */
.card-body{ flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch !important; }
.card-footer{ flex-shrink:0; }
.card .text-inherit, .card a.text-inherit{ color:var(--tb-text) !important; font-weight:700; }
.card .font-weight-bold, .card .h5, .card .h4{ color:var(--tb-text) !important; }
.rubznak{ color:var(--tb-text-mute) !important; font-weight:600; font-size:.85em; }
del, .price-old{ color:var(--tb-text-faint) !important; }
/* star ratings were removed from the product cards themselves (this
round), but the same "rating" widget is still used elsewhere - the
full product page and the reviews block - so this stays in place for
those, it just no longer applies to anything in the card grid. */
.rating .fa, .rating i{ color:var(--tb-gold-text) !important; }
/* product name: clamped to exactly 2 lines everywhere (a 1-line name
still reserves the same height a 2-line one would use, via min-height
at the same line-height) so the stock-status/price row below it lines
up at the same height across every card, no matter how long or short
the name is. Longer names are cut off with an ellipsis rather than
pushing the row below down. */
.tb-card-title{
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
overflow:hidden; line-height:1.35; min-height:2.7em;
}
/* stock-status line (@productSklad@, same tag the full product page
already uses) - green like the reference's "în stoc". Reserved height
here too, same idea as the name above: some products have no status
text at all (the tag renders empty), others do - without a fixed
height the row below would jump up or down depending on which. */
.tb-stock-status{ color:#2e7d4f; font-weight:600; display:block; min-height:1.4em; }
/* price + round icon-only cart button share one row, reference-style,
instead of a full-width pill button on its own line. Kept on one
line even when there's a struck-through old price next to the
current one (a discount) - without nowrap, that combination could
wrap onto two lines and make the row (and the button next to it)
taller only on discounted cards. */
.tb-card-bottom-row{ gap:8px; margin-top:auto; flex-wrap:nowrap; }
.tb-card-bottom-row .h5, .tb-card-bottom-row .font-weight-bold{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-cart-icon-btn{
width:38px; height:38px; min-width:38px; padding:0; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
background:var(--tb-gold) !important; border:0 !important; color:#0b0b0b !important;
}
.tb-cart-icon-btn:hover{ background:var(--tb-gold-hover) !important; }
.tb-cart-icon-btn i{ font-size:14px; }
/* the actual button/link text (@productSale@/@flowProductSale@) still
renders in the markup for screen readers and for whatever dynamic
label the CMS assigns (in cart, preorder, etc.) - visually hidden
here rather than removed, so nothing about the cart logic changes. */
.tb-cart-icon-btn .tb-cart-btn-text{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* spec/hit/new/promo badges rendered by the CMS as sale-icons */
.sale-icon-content, .position-absolute img, .position-absolute .label{ filter:none; }
.position-absolute span, .position-absolute .badge{
background:var(--tb-gold) !important; color:#0b0b0b !important; border-radius:999px !important;
font-weight:800; letter-spacing:.05em;
}
/* ---------- swiper / slick product carousels on the homepage ---------- */
.product-head.swiper-title, .swiper-title{ font-size:26px; font-weight:700; color:var(--tb-text); }
.swiper-button-prev-block, .swiper-button-next-block{ color:var(--tb-gold-text); }
/* ---------- product-card image now links to the product too ---------- */
/* previously only the title text under the image was a link, so tapping
the photo itself (the biggest, most obvious target on the card) did
nothing - wrapped the image in its own link in every card template
(product/main_product_forma_1..6, main_spec_forma_icon), same href as
the title. Needs display:block so the doesn't add the small
inline-element gap under the image that a plain would. */
.tb-card-img-link{ display:block; }
/* ---------- breadcrumbs ---------- */
.breadcrumb{ background:transparent !important; padding:0; font-family:var(--tb-mono); font-size:11px; letter-spacing:.08em; }
.breadcrumb a{ color:var(--tb-text-faint); }
.breadcrumb a:hover{ color:var(--tb-gold-text); }
.breadcrumb-item.active{ color:var(--tb-text-mute); }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--tb-text-ghost); }
/* ---------- pagination ---------- */
.pagination .page-link{ background:var(--tb-input) !important; border-color:var(--tb-border-2) !important; color:var(--tb-text-dim) !important; }
.pagination .page-item.active .page-link{ background:var(--tb-gold) !important; border-color:var(--tb-gold) !important; color:#0b0b0b !important; }
.pagination .page-link:hover{ color:var(--tb-gold-text) !important; }
/* ---------- modals ---------- */
.modal-content{ border:1px solid var(--tb-border-2) !important; border-radius:var(--tb-radius-md) !important; }
.modal-header, .modal-footer{ border-color:var(--tb-border) !important; }
.close{ color:var(--tb-text) !important; text-shadow:none !important; opacity:.7; }
.close:hover{ opacity:1; color:var(--tb-gold-text) !important; }
/* The vendor bundle's own dimming layer behind a modal is a faint
blue tint (".modal-backdrop{background-color:rgba(33,50,91,.125)}") -
too faint to properly dim a page and focus attention on the modal
above it, and its z-index (1004) is even lower than our sticky header
(1030), which then visually sits on top of the modal and its backdrop.
Fixes both: a real dark veil, and a z-index high enough to beat every
fixed/sticky element on the page. */
.modal-backdrop{ z-index:1085 !important; background-color:rgba(20,18,14,.5) !important; }
.modal{ z-index:1090 !important; }
/* Bootstrap opens every modal (login included) with a built-in 50px
"slide down into place" entrance (".modal.fade .modal-dialog{transform:
translate(0,-50px)}", animating to translate(0,0)) - reported as the
login window visibly "sliding" when you tap "Войти". Fade it in in
place instead of sliding it. */
.modal.fade .modal-dialog{ transform:none !important; transition:opacity .15s linear !important; }
/* ---------- footer ---------- */
.tb-footer{ border-top:1px solid var(--tb-border); background:var(--tb-bg-2) !important; }
.tb-footer-grid{ max-width:1520px; margin:0 auto; padding:52px 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.tb-footer-grid img{ height:30px; width:auto; display:block; }
.tb-footer-grid p{ margin:18px 0 0; font-size:13px; color:var(--tb-text-mute) !important; line-height:1.7; max-width:280px; }
.tb-footer-grid h5{ font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--tb-text-dim); text-transform:uppercase; margin:0; }
.tb-footer-grid ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.tb-footer-grid ul a, .tb-footer-grid ul li{ font-size:13px; color:var(--tb-text-dim) !important; }
.tb-footer-grid ul a:hover{ color:var(--tb-gold-text) !important; }
.tb-footer-bottom{ border-top:1px solid var(--tb-border); padding:18px 30px; text-align:center; font-size:11px; letter-spacing:.1em; color:var(--tb-text-faint); }
.tb-footer .btn-soft-primary{ width:30px; height:30px; padding:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
/* ---------- age gate ---------- */
.tb-age-gate{
position:fixed; inset:0; z-index:1090; background:rgba(20,18,14,.6); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center; padding:24px;
}
.tb-age-card{ max-width:420px; text-align:center; padding:40px 34px; border-radius:var(--tb-radius-lg); background:var(--tb-panel); border:1px solid var(--tb-border-2); box-shadow:0 20px 50px rgba(33,29,21,.18); }
.tb-age-card .tb-brand{ font-size:11px; font-weight:800; letter-spacing:.24em; color:var(--tb-gold-text); }
.tb-age-card h2{ font-size:28px; font-weight:700; margin-top:16px; }
.tb-age-card p{ font-size:13px; color:var(--tb-text-mute) !important; line-height:1.7; margin:12px 0 26px !important; }
.tb-age-actions{ display:flex; gap:12px; justify-content:center; }
.tb-age-yes{ height:46px; padding:0 26px; border-radius:999px; background:var(--tb-gold); color:#0b0b0b; font-size:12px; font-weight:800; letter-spacing:.12em; display:flex; align-items:center; }
.tb-age-yes:hover{ background:var(--tb-gold-hover); color:#0b0b0b; }
.tb-age-no{ height:46px; padding:0 26px; border-radius:999px; background:var(--tb-input); border:1px solid var(--tb-border-2); color:var(--tb-text-dim); font-size:12px; font-weight:800; letter-spacing:.12em; display:flex; align-items:center; }
/* ---------- floating buttons ---------- */
.tb-fab-stack{ position:fixed; right:22px; bottom:22px; z-index:1000; display:flex; flex-direction:column; gap:12px; }
.tb-fab{ width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 6px 16px rgba(33,29,21,.12); }
.tb-fab-search{ background:var(--tb-input); border:1px solid var(--tb-border-2); color:var(--tb-text-dim); }
.tb-fab-search:hover{ border-color:var(--tb-gold); color:var(--tb-gold-text); }
.tb-fab-top{ background:var(--tb-gold); color:#0b0b0b !important; }
.tb-fab-top:hover{ background:var(--tb-gold-hover); }
.go-to.js-go-to{ display:none !important; } /* replaced by tb-fab-top */
/* ---------- responsive ---------- */
@media (max-width:1039px){
.tb-hamburger{ display:flex; }
.tb-search{ display:none; }
.tb-phone{ display:none; }
.tb-navrow{ display:none; }
.tb-mobile-search{ display:flex; }
/* iOS Safari auto-zooms the whole page in when a focused text input's
font-size is under 16px, and does not reliably zoom back out again
once you leave the field. The mobile search field (opened from the
hamburger/magnifier icon) inherits the desktop header search's
13px, which is exactly what triggers it - 16px here is the fix, not
a size preference. */
.tb-mobile-panel .tb-search-form input{ font-size:16px; }
/* the "/search/" results page (search/search_page_list.tpl) - the
search field + category dropdown use the vendor's spacious desktop
".form-control" padding (~52px tall each), and the block wrapping
the category dropdown adds a huge 32px+32px of vendor spacing on
top of that ("space-top-1"/"space-bottom-1", built for a wide
desktop page). Add all that up on a narrow phone and the search
controls alone fill most of the screen before a single result is
visible - this is the "search eats half the page" bug. Tighten
just this page's controls here. */
.tb-search-page-form .form-control{ height:auto; padding:12px 14px; font-size:16px; }
.tb-search-page-form #helpBlock{ padding-top:12px !important; padding-bottom:12px !important; }
.tb-search-page-form .select2-container{ display:block; width:100% !important; }
.tb-page-grid{ grid-template-columns:1fr; padding:20px 16px 70px; }
.tb-aside{ position:static; }
.tb-tagline h1{ font-size:38px; }
.tb-usersdisp a{ padding:0 11px; font-size:11px; height:34px; }
.tb-usersdisp a i{ margin-right:4px; }
/* "Избранное"/"Сравнить" icons were part of what made the mobile header
row wider than the screen (see the html/body overflow-x note above) -
moved into the hamburger panel below instead of dropped, so nothing
is actually lost, just relocated out of the always-visible row. */
.tb-header-mobile-hide{ display:none !important; }
/* collapsed "КАТЕГОРИИ" sidebar toggle - removed from mobile everywhere
(homepage and catalog/product subpages alike) at your request. The
full category tiles on the homepage, reachable from "Главная" in the
hamburger menu, are still there if you need to switch categories. */
.tb-aside{ display:none; }
}
@media (min-width:1040px){
.tb-mobile-panel{ display:none !important; }
}
/* footer had a fixed 4-column grid with no fallback at all - on a phone
that's four unreadable slivers of text side by side. */
@media (max-width:900px){
.tb-footer-grid{ grid-template-columns:1fr 1fr; row-gap:34px; }
}
@media (max-width:560px){
.tb-footer-grid{ grid-template-columns:1fr; padding:36px 20px; gap:28px; }
.tb-footer-bottom{ padding:16px 20px; }
}
/* phones: tighten header, category/brand tiles and the cart pill so
nothing forces horizontal scrolling on a ~360-400px screen. */
@media (max-width:479px){
.tb-header-top{ padding:10px 14px; gap:8px; }
.tb-logo img{ height:26px; }
.tb-actions{ gap:6px; }
.tb-icon-btn{ width:34px; height:34px; }
.tb-cart-pill{ padding:0 12px; font-size:11px; gap:6px; }
.tb-cart-pill i{ font-size:12px; }
/* the "КОРЗИНА ·" word was what pushed the cart pill past the right
edge on the narrowest phones - icon + item count still reads as a
cart button on its own (same pattern most mobile shops use), so
drop just the label here rather than the whole pill. */
.tb-cart-label{ display:none; }
.tb-usersdisp a{ padding:0 9px; font-size:10px; height:32px; }
.tb-usersdisp .dropdown-menu{ max-width:calc(100vw - 24px); }
.tb-cat-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
.tb-cat-grid .catalog-name{ font-size:13px; padding:10px 12px 12px; }
#filter-well-select + .select2-container{ margin-top:12px; }
#filter-well{ margin-top:12px; }
.tb-brand-tile{ width:calc(50% - 6px); margin:0 0 12px; }
.tb-section-head h2{ font-size:20px; }
.tb-page-grid{ padding:16px 12px 60px; gap:20px; }
}
/* never let a wide fixed-width element (a stray table, an embedded map,
a long unbroken price line) push the whole page sideways. "html" is
added alongside "body" here on purpose: on some mobile browsers the
page's real horizontal scroll container is the element, not
, so overflow-x:hidden on body alone doesn't stop the page from
still being pannable sideways when something inside is too wide. */
html, body{ overflow-x:hidden; }
img, table{ max-width:100%; }
/* AJAX "loading more products" indicator under the product grid
(#ajaxInProgress gets a .progress-scroll class from JS while a page
is being fetched). Turn it into a small centered chip instead of
leaving the vendor's plain edge-to-edge bar. */
#ajaxInProgress.progress-scroll{ width:56px; height:56px; margin:18px auto 0; border-radius:14px; box-shadow:0 0 0 1px var(--tb-border-2); }
/* ===========================================================
PROMO BANNERS — homepage row of 3 hand-coded banners above
"Категории", for hand-picked featured products. White cards, same
look as every other panel on the site (.card: white background,
thin border, gold border on hover) — NOT the dark tiles from the
first draft, which the site owner asked to switch to white so the
row matches the rest of the light theme. Real cut-out product
photos (background removed) sit on a soft product-tinted backdrop,
each with a color-matched glow + gentle floating motion, and a slow
light sweep across the whole card, so the row still reads as
"alive" rather than a static graphic — just in the site's own
white/gold palette instead of dark panels. */
.tb-promo-banners{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
margin-bottom:44px;
}
.tb-promo-banner{
display:flex;
flex-direction:column;
background:var(--tb-panel) !important;
border:1px solid var(--tb-border) !important;
border-radius:var(--tb-radius-md) !important;
color:var(--tb-text) !important;
text-decoration:none !important;
position:relative;
overflow:hidden;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tb-promo-banner:hover{
border-color:var(--tb-gold) !important;
box-shadow:0 12px 26px rgba(33,29,21,.12) !important;
transform:translateY(-4px);
color:var(--tb-text) !important;
}
/* photo area: fixed height so all 3 cards line up regardless of each
product photo's own aspect ratio (object-fit:contain on the ![]() );
a soft product-tinted backdrop instead of plain white keeps the
photo from looking like it's floating on an empty page. */
.tb-promo-media{
position:relative;
height:172px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.tb-promo-banner-coal .tb-promo-media{ background:linear-gradient(160deg,#fdf1e2,#f7e7d2); }
.tb-promo-banner-vape .tb-promo-media{ background:linear-gradient(160deg,#eaf2fb,#dcebf9); }
.tb-promo-banner-hookah .tb-promo-media{ background:linear-gradient(160deg,#fbf3de,#f5e7c4); }
/* soft color-matched glow behind the photo, pulsing slowly */
.tb-promo-media::before{
content:"";
position:absolute;
width:140px; height:140px;
border-radius:50%;
filter:blur(20px);
animation:tbPromoGlow 3.6s ease-in-out infinite;
}
.tb-promo-banner-coal .tb-promo-media::before{ background:radial-gradient(circle, rgba(255,140,40,.45), transparent 70%); }
.tb-promo-banner-vape .tb-promo-media::before{ background:radial-gradient(circle, rgba(70,140,230,.4), transparent 70%); animation-delay:.5s; }
.tb-promo-banner-hookah .tb-promo-media::before{ background:radial-gradient(circle, rgba(201,162,39,.5), transparent 70%); animation-delay:1s; }
.tb-promo-photo{
position:relative;
z-index:2;
max-height:140px;
max-width:78%;
width:auto;
height:auto;
object-fit:contain;
filter:drop-shadow(0 10px 14px rgba(33,29,21,.22));
animation:tbPromoFloat 4.2s ease-in-out infinite;
}
.tb-promo-banner-vape .tb-promo-photo{ animation-delay:.4s; }
.tb-promo-banner-hookah .tb-promo-photo{ animation-delay:.8s; }
/* flex column that fills whatever's left of the card's height (all 3
cards are already the same height via CSS grid's default row
stretch) so the button always sits flush with the card's bottom
edge, no matter how many lines the description above it wraps to —
otherwise a 2-line description on one card pushes its button lower
than the other two, which is what "разные... местоположение" was
about. */
.tb-promo-body{ min-width:0; padding:16px 22px 22px; display:flex; flex-direction:column; flex:1 1 auto; }
.tb-promo-eyebrow{
text-transform:uppercase;
letter-spacing:.06em;
font-size:.72em;
font-weight:700;
color:var(--tb-gold-text);
margin-bottom:2px;
}
.tb-promo-title{
font-size:1.2em;
font-weight:800;
color:var(--tb-text);
line-height:1.2;
}
.tb-promo-subtitle{
font-size:.85em;
font-weight:700;
color:var(--tb-gold-text);
margin:2px 0 8px;
}
.tb-promo-desc{
font-size:.82em;
color:var(--tb-text-dim);
margin:0 0 12px;
line-height:1.4;
}
.tb-promo-btn{
display:inline-block;
align-self:flex-start;
margin-top:auto;
padding:8px 18px;
border-radius:999px;
background:var(--tb-gold);
color:#0b0b0b !important;
font-weight:700;
font-size:.82em;
white-space:nowrap;
transition:background .2s ease;
}
.tb-promo-banner:hover .tb-promo-btn{ background:var(--tb-gold-hover); }
/* slow diagonal light sweep across the whole card, looping — this is
the main "живой баннер" effect, on top of the glow + float above.
Gold-tinted (not white-on-white) so it actually shows on the white
card. */
.tb-promo-banner::after{
content:"";
position:absolute;
top:0; left:-60%;
width:35%; height:100%;
background:linear-gradient(115deg, transparent, rgba(201,162,39,.16), transparent);
transform:skewX(-20deg);
animation:tbPromoShine 6.5s ease-in-out infinite;
pointer-events:none;
z-index:3;
}
.tb-promo-banner-vape::after{ animation-delay:1.4s; }
.tb-promo-banner-hookah::after{ animation-delay:2.8s; }
@keyframes tbPromoGlow{
0%,100%{ opacity:.5; transform:scale(1); }
50%{ opacity:.9; transform:scale(1.18); }
}
@keyframes tbPromoFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-7px); }
}
@keyframes tbPromoShine{
0%{ left:-60%; }
35%{ left:130%; }
100%{ left:130%; }
}
@media (prefers-reduced-motion: reduce){
.tb-promo-photo, .tb-promo-media::before, .tb-promo-banner::after{ animation:none !important; }
}
@media (max-width:900px){
.tb-promo-banners{ grid-template-columns:1fr; }
}
|