/* =========================================================
   TABAKS.MD — custom theme skin for PHPShop
   Built on top of vanilla Bootstrap 4 + Font Awesome (from
   the "flow" base theme). This file is the ONLY visual layer:
   it re-skins flow's real, CMS-wired markup into the dark/gold
   "Tabaks MD" design instead of replacing the markup itself.
   ========================================================= */

:root{
  --tb-bg:#070707;
  --tb-bg-2:#080808;
  --tb-panel:#0d0d0d;
  --tb-panel-2:#101010;
  --tb-input:#111111;
  --tb-border:#1c1c1c;
  --tb-border-2:#242424;
  --tb-border-3:#151515;
  --tb-gold:#c9a227;
  --tb-gold-hover:#dbb63d;
  --tb-text:#f2f2f2;
  --tb-text-dim:#b4b4b4;
  --tb-text-mute:#8a8a8a;
  --tb-text-faint:#6e6e6e;
  --tb-text-ghost:#5c5c5c;
  --tb-radius-lg:20px;
  --tb-radius-md:16px;
  --tb-radius-sm:12px;
  --tb-font: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tb-mono: 'JetBrains Mono', monospace;
}

/* ---------- base ---------- */
html, body{ background:var(--tb-bg) !important; }
body{
  font-family:var(--tb-font) !important;
  color:var(--tb-text) !important;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--tb-text); text-decoration:none; }
a:hover, a:focus{ color:var(--tb-gold); text-decoration:none; }
::selection{ background:var(--tb-gold); color:#0b0b0b; }
/* vendor bundle darkens hovered link text toward near-black (#0d1323),
   which is fine on the original light background but on our dark theme
   makes the hovered text disappear - this is exactly what "hovering over
   Удалить in the cart makes the button vanish" was: that link carries
   .text-body, and ".text-body[href]:hover{color:#0d1323!important}" in
   the bundle out-specifies our plain "a:hover" rule above. Same family
   of bug hits any a.text-dark/a.text-primary link, the wishlist heart
   icon (a:hover .text-hover-primary) and a few nav/breadcrumb links. */
a:hover, a:focus,
a.text-dark:hover, a.text-dark:focus,
a.text-primary:hover, a.text-primary:focus,
.text-muted[href]:hover, .text-body[href]:hover,
a:hover .text-hover-primary, .text-hover-primary:hover,
.btn-link:hover,
.breadcrumb .breadcrumb-link:hover,
.list-separator .list-separator-link:hover,
.hs-nav-scroller-horizontal .hs-nav-scroller-arrow-link:hover{
  color:var(--tb-gold) !important;
}
/* Real heading tags AND the Bootstrap ".h1".."h6" size-only utility classes
   both need covering here: flow's templates constantly write
   <h1 class="h3 mb-0"> (an h1 sized down to look like an h3), and the
   theme bundle's OWN "h1,h2,...,.h1,.h2,..." rule sets a near-black
   color(#1e2022) on that .h3 class specifically. A plain "h1,h2,h3..."
   tag selector loses to that ".h3" class selector on specificity, so
   every such heading rendered dark-on-dark - hence !important here. */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--tb-text) !important; font-family:var(--tb-font); font-weight:700; letter-spacing:-.01em; }
.text-muted, .text-body, .text-secondary, p{ color:var(--tb-text-dim) !important; }
hr{ border-color:var(--tb-border); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#232323; border-radius:8px; }

/* kill any leftover light backgrounds from vendor css/inline styles */
.bg-light, .bg-white, .card, .card-header, .list-group-item, .modal-content, .dropdown-menu,
.breadcrumb, .pagination .page-link, .table, .panel, .panel-body{
  background-color:var(--tb-panel) !important;
  color:var(--tb-text);
}
.border, .border-top, .border-bottom, .border-left, .border-right{ border-color:var(--tb-border) !important; }
/* the vendor bundle also has its own ".border{border:.0625rem solid
   #e7eaf3!important}" (a near-white line, made for a white page) - same
   specificity as the rule above, so on some pages/caches it can win the
   cascade and draw a glaring bright border (seen around the quantity
   selector on the product page). Bump specificity with the sibling class
   that's always present alongside ".border" in this theme's markup so
   the dark color always wins regardless of stylesheet order. */
.border.rounded-lg{ border-color:var(--tb-border-2) !important; }
/* "dark on dark" utility text that's unreadable on our background
   (cart summary, order totals, account page labels...) */
.text-dark{ color:var(--tb-text) !important; }
.text-primary{ color:var(--tb-gold) !important; }

/* vendor bundle forces every table cell to a white background no matter
   what the surrounding page looks like (".table td,.table td{background-
   color:#fff!important}") plus a light-blue ".thead-light" header row -
   more specific than the plain ".table" rule above, so it wins and shows
   up as a glaring white plaque (e.g. the "Избранное"/favorites table). */
.table td, .table th, .thead-light th{
  background-color:var(--tb-panel) !important;
  color:var(--tb-text-dim) !important;
  border-color:var(--tb-border) !important;
}
.table thead th{ color:var(--tb-text) !important; font-weight:700; }

/* login/auth modal field labels ("Email", "Пароль") were near-black */
.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:#6e6e6e; }
.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:#6e6e6e !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) !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) !important; border-color:var(--tb-gold) !important; }
.btn-icon{ background:var(--tb-input); border:1px solid var(--tb-border-2); color:#c9c9c9; }
.btn-icon:hover{ color:var(--tb-gold); 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 dark/grey 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:#c9c9c9 !important;
}
.btn.addToWishList:hover, .btn.addToCompareList:hover{ color:var(--tb-gold) !important; border-color:var(--tb-gold) !important; }
.addToWishList:hover, .addToCompareList:hover{ color:var(--tb-gold) !important; }

/* ---------- header ---------- */
.tb-header{
  position:sticky; top:0; z-index:1030;
  background:rgba(8,8,8,.92);
  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:#6e6e6e; font-size:14px; }
.tb-search-form button{ background:transparent; border:0; color:#6e6e6e; 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:#c9c9c9; position:relative;
}
.tb-icon-btn:hover{ color:var(--tb-gold); 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); 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(0,0,0,.5); }

/* 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) !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:#c9c9c9 !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) !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) !important; }
.navbar-vertical .nav-icon{ width:18px; margin-right:8px; text-align:center; color:#7a7a7a; }
.navbar-vertical .nav-link-badge{ margin-left:auto; background:#1c1c1c; color:#c9c9c9; }
.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 #141414; overflow-x:auto; }
.tb-navrow a{
  padding:13px 0; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8f8f8f; white-space:nowrap;
}
.tb-navrow a:hover{ color:var(--tb-gold); }
.tb-navrow a.active{ color:var(--tb-gold); 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:#dcdcdc; 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:#dcdcdc; border-bottom:1px solid #161616; }

/* ---------- 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; }
.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); 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:#c4c4c4 !important; cursor:pointer;
}
.tb-cat-list .dropdown-nav-link:hover{ color:var(--tb-gold) !important; background:#111; }
.tb-cat-list .dropdown-nav-link:after{ margin-left:auto; }
/* vendor bundle draws the expand/collapse indicator as a low-contrast grey
   SVG chevron (barely visible on a dark row, 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); }
.tb-cat-icon{
  width:26px; height:26px; border-radius:8px; background:#161616; border:1px solid #232323;
  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:#0a0a0a; }
.tb-cat-list .sidebarNav .dropdown-item{
  color:#a9a9a9 !important; font-size:12px; padding:8px 20px 8px 46px !important; background:transparent !important;
}
.tb-cat-list .sidebarNav .dropdown-item:hover{ color:var(--tb-gold) !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);
  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; }
.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:#6e6e6e; }
.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:#e6e6e6;
}
.tb-aside-help a:hover{ border-color:var(--tb-gold); color:var(--tb-gold); }

/* ---------- 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:#2e2e2e; 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:#9a9a9a; 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:#b4b4b4 !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); 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) !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); display:block; height:100%;
}
.tb-cat-grid .catalog-wrap:hover{ border-color:var(--tb-gold); }
.tb-cat-grid .catalog-img{ aspect-ratio:4/3; overflow:hidden; background:repeating-linear-gradient(115deg,#171717 0 12px,#101010 12px 24px); display:flex; align-items:center; justify-content:center; }
.tb-cat-grid .catalog-img img{ width:100%; height:100%; object-fit:cover; }
.tb-cat-grid .catalog-name{ padding:14px 16px 16px; font-size:15px; font-weight:700; margin:0; color:var(--tb-text); }

/* ---------- 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) ---------- */
.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; }
.card:hover{ border-color:var(--tb-gold) !important; }
/* the vendor bundle puts a soft light-grey drop shadow under every .card
   (and an even stronger one on ".shadow-soft", used on the cart's
   "Стоимость" summary card) - meant to read as a subtle shadow on a white
   page, but on our near-black background it shows up as a pale glow/halo
   around the card. Kill it everywhere. */
.shadow-soft{ box-shadow:none !important; }
/* 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;
  background:var(--tb-panel-2);
  padding:14px; box-sizing:border-box;
}
.card .row.no-gutters .card-img{ aspect-ratio:1/1; }
.card-footer, .card-body{ background:transparent !important; border-color:var(--tb-border-3) !important; }
.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:#7d7d7d !important; font-weight:600; font-size:.85em; }
del, .price-old{ color:#6e6e6e !important; }
.rating .fa, .rating i{ color:var(--tb-gold) !important; }

/* 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); }

/* ---------- breadcrumbs ---------- */
.breadcrumb{ background:transparent !important; padding:0; font-family:var(--tb-mono); font-size:11px; letter-spacing:.08em; }
.breadcrumb a{ color:#6e6e6e; }
.breadcrumb a:hover{ color:var(--tb-gold); }
.breadcrumb-item.active{ color:#9e9e9e; }
.breadcrumb-item + .breadcrumb-item::before{ color:#4a4a4a; }

/* ---------- 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) !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) !important; }
/* The vendor bundle's dimming layer behind a modal was made for a white
   page (".modal-backdrop{background-color:rgba(33,50,91,.125)}") - on our
   dark background that faint blue tint is basically invisible, so the
   whole page stays fully readable "through" 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 (already-invisible) 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(4,4,4,.8) !important; }
.modal{ z-index:1090 !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:#8f8f8f !important; line-height:1.7; max-width:280px; }
.tb-footer-grid h5{ font-size:11px; font-weight:800; letter-spacing:.16em; color:#6b6b6b; 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:#c4c4c4 !important; }
.tb-footer-grid ul a:hover{ color:var(--tb-gold) !important; }
.tb-footer-bottom{ border-top:1px solid #141414; padding:18px 30px; text-align:center; font-size:11px; letter-spacing:.1em; color:#5f5f5f; }
.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(4,4,4,.93); 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); }
.tb-age-card .tb-brand{ font-size:11px; font-weight:800; letter-spacing:.24em; color:var(--tb-gold); }
.tb-age-card h2{ font-size:28px; font-weight:700; margin-top:16px; }
.tb-age-card p{ font-size:13px; color:#8f8f8f !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:#b6b6b6; 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; }
.tb-fab-search{ background:var(--tb-input); border:1px solid var(--tb-border-2); color:#dcdcdc; }
.tb-fab-search:hover{ border-color:var(--tb-gold); color:var(--tb-gold); }
.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; }
  .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; }
  .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 <html> element, not
   <body>, 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). The base theme draws it as a plain edge-to-edge
   white bar, which reads as a broken/unstyled strip on a dark page.
   Turn it into a small centered chip instead of restyling the vendor
   spinner image itself. */
#ajaxInProgress.progress-scroll{ width:56px; height:56px; margin:18px auto 0; border-radius:14px; box-shadow:0 0 0 1px var(--tb-border-2); }