.main-image {
background:none!important;
}
.thumbnail {
background:none!important;
}
#box-product form[name="buy_now_form"] {

    border: 1px solid var(--rs-border-ui)!important;
}
.img-thumbnail{
    border-color: rgb(122 162 255 / 45%) !important;
    background-color: #ffffff00!important;
}

#sidebar{
    border: 1px solid var(--rs-border) !important;
    border-color: rgb(122 162 255 / 45%) !important;
    border-radius: 10px;
}

.navbar-categories{
  display:flex;
  flex-wrap:wrap;            
  gap:4px;                    
  max-width:80%;
  margin:0 auto;
  list-style:none;          
  padding:0;
    align-items: center;
}
.product{
border: 1px solid #1f7aa3}
.navbar-categories > li{
  flex:1 1 0;                
  position:relative;
}

.navbar-categories > li > a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:40px;           
  padding:6px 4px;
  text-align:center;
  line-height:1.25;
  white-space:normal;
  overflow:hidden;
}

@media (min-width: 992px) {
    .offcanvas .offcanvas-body {
        justify-content: center!important;
border: 1px solid black;
border-radius:5px;
    }
}

  .nav-link {
        padding: 10px 5px!important;
    }
.navbar-categories {max-width:100%!important;}

.dropdown [data-toggle="dropdown"] {
    padding-inline-end: calc(var(--input-padding-x) + 1px) !important;
}


/* ─── мобильная колонка (< 768 px) ─── */
@media (max-width:767.98px){
  .navbar-categories{
    flex-direction:column;    /* колонна */
    gap:0;                    /* убираем промежутки, чтобы не рвались ряды */
    max-width:100%;           /* на всю ширину бургер-меню */
  }
  .navbar-categories > li{
    flex:1 1 100%;
  }
  .navbar-categories > li > a{
    align-items:flex-start;   /* текст прижат влево, как в мобильных списках */
    padding:10px 12px;
  }
}



/* Fonts */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/asap-v30-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/asap-v30-latin_latin-ext-700.woff2') format('woff2');
}
/* Variables */
:root {
  /* General */
  --border-radius: 8px;
  --gutter-x: 0.5rem;
  --gutter-y: 1rem;
  --link-text-color: #222;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --whitespace-color: #fff;
  --site-background-color: #f9fafc;
  --sidebar-width: 300px;
  /* Important Notice */
  --important-notice-background-color: #222;
  --important-notice-text-color: #fff;
  --header-background-color: transparent;
  --header-text-color: var(--default-text-color);
  /* Cookie Notice */
  --cookie-notice-background-color: rgba(45, 45, 56, 0.75);
  --cookie-notice-text-color: #fff;
  /* Navigation */
  --navigation-background-color: #d7dae3;
  --navigation-background-color-hover: rgba(0, 0, 0, 0.05);
  --navigation-background-color-active: rgba(0, 0, 0, 0.15);
  --navigation-text-color: #222;
  --navigation-text-color-hover: var(--navigation-text-color);
  --navigation-text-color-active: var(--navigation-text-color);
  /* Navigation */
  --offcanvas-background-color: var(--navigation-background-color);
  --offcanvas-text-color: var(--navigation-text-color);
  /* Defaults */
  --default-background-color: #edeff3;
  --default-border-color: #efeff9;
  --default-line-height: 1.3333;
  --default-text-font: 'Asap', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --default-text-color: #222;
  --default-text-size: 15px;
  /* Buttons */
  --default-button-background-color: #f9f9f9;
  --default-button-background-color-hover: #f3f3f3;
  --default-button-background-color-active: #f3f3f3;
  --default-button-border-color: rgba(0, 0, 0, 0.075);
  --default-button-text-color: #333;
  --primary-button-background-color: #2e9cd4;
  --primary-button-background-color-hover: #ddd;
  --primary-button-background-color-active: #bdbdbd;
  --primary-button-border-color: rgba(0, 0, 0, 0.075);
  --primary-button-text-color: #fff;
  --success-button-background-color: #98cc34;
  --success-button-background-color-hover: #9dcf3e;
  --success-button-background-color-active: #89b82e;
  --success-button-border-color: rgba(0, 0, 0, 0.075);
  --success-button-text-color: #fff;
  --warning-button-background-color: #f0ad4e;
  --warning-button-background-color-hover: #f2b866;
  --warning-button-background-color-active: #f1b25a;
  --warning-button-border-color: rgba(0, 0, 0, 0.1);
  --warning-button-text-color: #aa0000;
  --danger-button-background-color: #d9534f;
  --danger-button-background-color-hover: #de6764;
  --danger-button-background-color-active: #db5d59;
  --danger-button-border-color: rgba(0, 0, 0, 0.1);
  --danger-button-text-color: #fff;
  /* Notices */
  --default-notice-background-color: #e6e8ed;
  --default-notice-text-color: #000;
  --default-notice-border-color: #e6e8ed;
  --primary-notice-background-color: #3ba5c6;
  --primary-notice-text-color: #fff;
  --primary-notice-border-color: #3ba5c6;
  --success-notice-background-color: #98cc34;
  --success-notice-text-color: #fff;
  --success-notice-border-color: #98cc34;
  --warning-notice-background-color: #ffcc66;
  --warning-notice-text-color: #aa0000;
  --warning-notice-border-color: #ffcc66;
  --danger-notice-background-color: #d9534f;
  --danger-notice-text-color: #fff;
  --danger-notice-border-color: #d9534f;
  /* Breadcrumbs */
  --breadcrumbs-background-color: #ededf1;
  --breadcrumbs-text-color: #555;
  --breadcrumbs-border-color: transparent;
  /* Cards */
  --card-background-color: #fff;
  --card-text-color: var(--default-text-color);
  --card-border-color: var(--default-border-color);
  --card-header-background-color: transparent;
  --card-header-text-color: var(--card-text-color);
  --card-body-background-color: transparent;
  --card-footer-background-color: #fbfbfd;
  /* Input */
  --input-background-color: #fafafc;
  --input-padding-x: 1.5em;
  --input-padding-y: 0.5em;
  --input-text-color: #000;
  --input-border-radius: 1em;
  /* Pills */
  --pills-background-color: transparent;
  --pills-background-color-active: #d7dae3;
  --pills-background-color-hover: #f1f3f7;
  --pills-text-color: var(--default-text-color);
  --pills-text-color-active: #222;
  /* Tabs */
  --tabs-pane-background-color: #eff2f5;
  --tabs-pane-border-color: var(--tabs-pane-background-color);
  --tabs-background-color: #e8e8eb;
  --tabs-background-color-active: #fff;
  --tabs-text-color: #333;
  --tabs-text-color-active: var(--tabs-text-color);
  --tabs-border-color: var(--tabs-background-color);
  --tabs-border-color-active: var(--tabs-background-color-active);
  --tabs-content-background-color: #fff;
  /* Dropdowns */
  --dropdown-menu-background-color: #fff;
  --dropdown-menu-item-background-color: var(--dropdown-menu-background-color);
  --dropdown-menu-item-text-color: var(--default-text-color);
  /* Tables */
  --table-striped-row-background-odd: #f5f6f9;
  --table-striped-row-background-even: #fff;
  --table-row-hover-background: #ececec;
  /* Pagination */
  --pagination-background-color: var(--default-background-color);
  --pagination-background-color-active: #d7dae3;
  --pagination-background-color-hover: #e7e8ed;
  --pagination-text-color: var(--default-text-color);
  --pagination-text-color-active: var(--default-text-color);
  --pagination-text-color-hover: var(--default-text-color);
  --pagination-border-color: var(--default-border-color);
  /* Footer */
  --footer-background-color: #ededf1;
  --footer-title-color: var(--default-text-color);
  --footer-text-color: var(--default-text-color);
  /* Copyright */
  --copyright-background-color: #e2e2e7;
  --copyright-text-color: var(--default-text-color);
}
@media (min-width: 768px) {
  :root {
    --gutter-x: 1rem;
    --gutter-y: 1rem;
  }
}
@media (min-width: 992px) {
  :root {
    --gutter-x: 1.5rem;
    --gutter-y: 1.5rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --gutter-x: 2rem;
    --gutter-y: 2rem;
  }
}
.offcanvas-body{

}

/* === Токены (светлая по умолчанию) === */
:root{
  --rs-bg:#ffffff;
  --rs-surface:#f7f8fa;
  --rs-text:#0e1116;
  --rs-muted:#6b7280;
  --rs-border:#e5e7eb;
  --rs-primary:#637bff;

  /* Популярные переменные дефолтной темы — на всякий случай: */
  --default-background-color: var(--rs-bg);
  --default-text-color: var(--rs-text);
  --default-button-background-color-active:#637bff;
}

/* Если пользователь ничего не выбирал — следуем системе */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) {
    color-scheme: dark;
  }
}


html[data-theme="dark"]{
     color-scheme: dark;
     --rs-bg:#0b0d12;
     --rs-surface:#12141a;
     --rs-text:#e6e8ef;
     --rs-muted:#a0a7b4;
     --rs-border:#1c2030;
     --rs-primary:#7aa2ff;
     --default-background-color: var(--rs-bg);
     --default-text-color: var(--rs-text);
     --default-button-background-color-active:#7aa2ff;
}
/* Базовые плоскости */
 html[data-theme="dark"] body{
     background:var(--rs-bg);
     color:var(--rs-text);
}
/* Каркасы/контейнеры/карточки/панели/хедер */
 html[data-theme="dark"] header, html[data-theme="dark"] .navbar, html[data-theme="dark"] .box, html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .listing .product, html[data-theme="dark"] .product .image, html[data-theme="dark"] .product .info{
     background:var(--rs-surface) !important;
     color:var(--rs-text) !important;
     border-color:var(--rs-border) !important;
}
/* Текст/границы/ссылки */
 html[data-theme="dark"] a{
     color:var(--rs-primary);
}
 html[data-theme="dark"] hr{
     border-color:var(--rs-border);
}
 html[data-theme="dark"] .muted, html[data-theme="dark"] .note{
     color:var(--rs-muted);
}
/* Формы */
 html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{
     background:#0f1117;
     color:var(--rs-text);
     border-color:var(--rs-border);
}
/* Кнопки */
 html[data-theme="dark"] .btn, html[data-theme="dark"] button, html[data-theme="dark"] [type="submit"]{
     background:var(--rs-surface);
     color:var(--rs-text);
     border-color:var(--rs-border);
}
 html[data-theme="dark"] .btn--primary, html[data-theme="dark"] .btn-primary{
     background:var(--rs-primary) !important;
     color:#0b0d12 !important;
     border-color:transparent !important;
}
/* Тумблер темы (якорь в правом нижнем углу) */
 .theme-toggle{
     position:fixed;
     right:16px;
     bottom:16px;
     z-index:9999;
     width:52px;
     height:32px;
     border-radius:999px;
     border:1px solid var(--rs-border);
     background:var(--rs-surface);
     display:inline-flex;
     align-items:center;
     padding:2px;
     cursor:pointer;
     box-shadow:0 6px 16px rgba(0,0,0,.25);
     user-select:none;
     -webkit-tap-highlight-color:transparent;
}
 .theme-toggle__knob{
     width:26px;
     height:26px;
     border-radius:50%;
     background:var(--rs-primary);
     transform:translateX(0);
     transition:transform .2s ease;
}
 html[data-theme="dark"] .theme-toggle__knob{
     transform:translateX(20px);
}
/* (опционально) Две версии логотипа */
 html[data-theme="dark"] .logo--light{
     display:none !important;
}
 html[data-theme="dark"] .logo--dark{
     display:inline-block !important;
}
/* === ЖИВОЙ тумблер темы (иконки, анимации, тултип) === */
 .theme-toggle{
     position:fixed;
     right:16px;
     bottom:16px;
     z-index:9999;
     width:72px;
     height:40px;
     border-radius:999px;
     border:1px solid var(--rs-border);
     background:var(--rs-surface);
     display:inline-flex;
     align-items:center;
     padding:4px;
     cursor:pointer;
     box-shadow:0 10px 24px rgba(0,0,0,.35);
     user-select:none;
     -webkit-tap-highlight-color:transparent;
     transition:transform .18s ease, box-shadow .18s ease;
}
 .theme-toggle:hover{
     transform:translateY(-1px);
     box-shadow:0 14px 30px rgba(0,0,0,.45);
}
 .theme-toggle:active{
     transform:translateY(0);
     box-shadow:0 8px 18px rgba(0,0,0,.35);
}
 .theme-toggle__knob{
     position:absolute;
     left:4px;
     top:4px;
     width:32px;
     height:32px;
     border-radius:999px;
     background-color:var(--rs-primary);
     background-image:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
     transform:translateX(0);
     transition:transform .25s ease, background-color .2s ease;
     box-shadow:inset 0 0 0 1px rgba(0,0,0,.07), 0 3px 8px rgba(0,0,0,.25);
}
 html[data-theme="dark"] .theme-toggle__knob{
     transform:translateX(32px);
}
 .theme-toggle__icon{
     position:absolute;
     font-size:14px;
     line-height:1;
     opacity:.82;
     pointer-events:none;
}
 .theme-toggle__icon--sun{
     left:12px;
}
 .theme-toggle__icon--moon{
     right:12px;
}
/* Тултип по ховеру/тапу */
 .theme-toggle[data-tooltip]::after{
     content:attr(data-tooltip);
     position:absolute;
     bottom:48px;
     right:0;
     white-space:nowrap;
     background:var(--rs-surface);
     color:var(--rs-text);
     border:1px solid var(--rs-border);
     border-radius:8px;
     padding:6px 8px;
     font-size:12px;
     line-height:1;
     opacity:0;
     transform:translateY(6px);
     transition:opacity .2s ease, transform .2s ease;
     box-shadow:0 8px 16px rgba(0,0,0,.3);
     pointer-events:none;
}
 .theme-toggle:hover::after{
     opacity:1;
     transform:translateY(0);
}
/* === Переменные для навигации/оффканваса/футера в DARK === */
 html[data-theme="dark"]{
     --navigation-background-color:#0f1117;
     --navigation-text-color:var(--rs-text);
     --offcanvas-background-color:#0f1117;
     --offcanvas-text-color:var(--rs-text);
     --footer-background-color:#0b0d12;
     --footer-text-color:var(--rs-text);
}
/* === ФУТЕР (фон тёмный, текст и ссылки читаемые) === */
 html[data-theme="dark"] #footer{
     background:#0b0d12 !important;
     color:var(--rs-text) !important;
     border-top:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] #footer .title{
     color:var(--rs-text) !important;
}
 html[data-theme="dark"] #footer a{
     color:var(--rs-primary) !important;
}
 html[data-theme="dark"] #footer .list-unstyled li{
     color:var(--rs-muted) !important;
}
/* Copyright полоса (если отдельный блок есть) */
 html[data-theme="dark"] .copyright, html[data-theme="dark"] #copyright{
     background:#0a0c11 !important;
     color:var(--rs-muted) !important;
     border-top:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] #copyright a{
     color:var(--rs-primary) !important;
}
/* === КАТЕГОРИИ (tile): убрать белые «плашки», дать мягкий тёмный вид === */
 html[data-theme="dark"] article.category .link{
     display:block;
     background:var(--rs-surface) !important;
     border:1px solid var(--rs-border) !important;
     border-radius:12px;
     overflow:hidden;
}
 html[data-theme="dark"] article.category .caption{
     background:linear-gradient(to top, rgba(11,13,18,.9) 0%, rgba(11,13,18,0) 60%) !important;
     color:var(--rs-text) !important;
}
 html[data-theme="dark"] article.category .name{
     color:var(--rs-text) !important;
}
/* === OFFCANVAS + NAV === */
 html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .offcanvas .offcanvas-body{
     background:var(--offcanvas-background-color) !important;
     color:var(--offcanvas-text-color) !important;
     border-color:var(--rs-border) !important;
}
 html[data-theme="dark"] .navbar-nav .nav-link, html[data-theme="dark"] .navbar-categories > li > a{
     color:var(--rs-text) !important;
}
 html[data-theme="dark"] .dropdown-menu{
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] .dropdown-menu .nav-link, html[data-theme="dark"] .dropdown-menu a{
     color:var(--rs-text) !important;
}
 html[data-theme="dark"] .dropdown-menu .nav-link:hover, html[data-theme="dark"] .dropdown-menu a:hover{
     background:rgba(255,255,255,.03) !important;
}
/* (опционально) Если яркая бирюзовая рамка у .product мешает в dark */
 html[data-theme="dark"] .product{
     border-color:var(--rs-border) !important;
}
/* === Breadcrumbs (тёмная тема) === */
 html[data-theme="dark"] .breadcrumb{
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
     border-radius:10px;
     padding:8px 12px;
     margin-bottom:12px;
}
 html[data-theme="dark"] .breadcrumb li{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .breadcrumb li:last-child{
     color:var(--rs-text) !important;
}
 html[data-theme="dark"] .breadcrumb a{
     color:var(--rs-primary) !important;
     text-decoration:none;
}
 html[data-theme="dark"] .breadcrumb a:hover{
     text-decoration:underline;
}
/* === Search (navbar-search) === */
 html[data-theme="dark"] .navbar-search .input-group{
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
     border-radius:12px;
     overflow:hidden;
}
 html[data-theme="dark"] .navbar-search .input-group-icon{
     color:var(--rs-muted) !important;
     display:inline-flex;
     align-items:center;
     padding-left:10px;
}
 html[data-theme="dark"] .navbar-search .form-control{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:none !important;
}
 html[data-theme="dark"] .navbar-search .form-control::placeholder{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .navbar-search .form-control:focus{
     outline:none;
     box-shadow:none;
}
/* === Quantity input === */
 html[data-theme="dark"] .input-group .form-control[type="number"]{
     background:#0f1117 !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border) !important;
     border-radius:10px !important;
}
 html[data-theme="dark"] .input-group .form-control[type="number"]::placeholder{
     color:var(--rs-muted) !important;
}
/* крутилки */
 html[data-theme="dark"] .input-group .form-control[type="number"]::-webkit-outer-spin-button, html[data-theme="dark"] .input-group .form-control[type="number"]::-webkit-inner-spin-button{
     filter: invert(70%);
    /* чтобы стрелочки не были чёрными */
}
/* === Add To Cart — читаемая, контрастная === */
 html[data-theme="dark"] .btn-success{
     background:var(--rs-primary) !important;
     color:#0b0d12 !important;
     border-color:transparent !important;
     box-shadow:0 6px 16px rgba(122,162,255,.35);
     text-shadow:0 1px 0 rgba(255,255,255,.18);
}
 html[data-theme="dark"] .btn-success:hover{
     filter:brightness(1.06);
}
 html[data-theme="dark"] .btn-success:active{
     transform:translateY(1px);
}
/* === PNG-иконки: быстрый вариант «под краску» (для <img class="icon-tint-primary">) === */
/* Работает, но тон может слегка отличаться. Если нужен идеал — см. SVG ниже. */
 .icon-tint-primary{
     filter: brightness(0) saturate(100%) invert(62%) sepia(58%) saturate(4140%) hue-rotate(209deg) brightness(103%) contrast(102%);
     opacity:.95;
}
 html[data-theme="dark"] .icon-tint-primary{
    /* немного «подсветим» в тёмной */
     filter: brightness(0) saturate(100%) invert(71%) sepia(22%) saturate(2057%) hue-rotate(198deg) brightness(105%) contrast(104%);
}
/* === Идеальный вариант (маска) — одна и та же раскраска в любой теме === */
/* Используй <span class="icon icon--telegram"></span> или .icon--home */
 .icon{
     display:inline-block;
     width:1.6em;
     height:1.6em;
     vertical-align:-0.2em;
     color:var(--rs-primary);
}
 .icon--telegram{
     -webkit-mask: url(/images/telegram.png) no-repeat center / contain;
     mask: url(/images/telegram.png) no-repeat center / contain;
     background: currentColor;
}
 .icon--home{
     -webkit-mask: url(/images/home2.png) no-repeat center / contain;
     mask: url(/images/home2.png) no-repeat center / contain;
     background: currentColor;
}
/* Если всё-таки используешь SVG — сделаем удобно: */
 .icon-svg{
     width:1.6em;
     height:1.6em;
     display:inline-block;
     vertical-align:-0.2em;
     color:var(--rs-primary);
}
 .icon-svg svg{
     width:100%;
     height:100%;
     display:block;
     fill:currentColor;
}
/* ===== 1) ИКОНКИ: цвет по теме (светлая — чёрные, тёмная — primary) ===== */
 :root{
     --icon-accent: #0e1116;
}
/* светлая */
 html[data-theme="dark"]{
     --icon-accent: var(--rs-primary);
}
/* тёмная */
/* Маска из PNG (рекомендовано): <span class="icon icon--telegram"></span> */
 .icon{
     display:inline-block;
     width:1.6em;
     height:1.6em;
     vertical-align:-0.2em;
     color:var(--icon-accent) !important;
}
 .icon--telegram{
     -webkit-mask: url(/images/telegram.png) no-repeat center / contain;
     mask: url(/images/telegram.png) no-repeat center / contain;
     background: currentColor;
}
 .icon--home{
     -webkit-mask: url(/images/home2.png) no-repeat center / contain;
     mask: url(/images/home2.png) no-repeat center / contain;
     background: currentColor;
}
/* Если остаёшься на <img>: добавь класс .icon-tint-primary к <img> */
 html:not([data-theme="dark"]) .icon-tint-primary{
    /* светлая: чёрные */
     filter: brightness(0) saturate(100%) !important;
     opacity:.95;
}
 html[data-theme="dark"] .icon-tint-primary{
    /* тёмная: primary-синий */
     filter: brightness(0) saturate(100%) invert(71%) sepia(22%) saturate(2057%) hue-rotate(198deg) brightness(105%) contrast(104%) !important;
}
/* ===== 2) DROPDOWN: тёмный фон + "кнопочки" внутри ===== */
 html[data-theme="dark"] ul.dropdown-menu{
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
     box-shadow:0 14px 28px rgba(0,0,0,.55) !important;
}
 html[data-theme="dark"] ul.dropdown-menu .nav-item{
     margin:2px 6px;
}
 html[data-theme="dark"] ul.dropdown-menu .nav-link{
     display:block;
     padding:8px 10px;
     border-radius:8px;
     color:var(--rs-text) !important;
     background:transparent !important;
     transition:background .15s ease, color .15s ease;
}
 html[data-theme="dark"] ul.dropdown-menu .nav-link:hover{
     background:rgba(122,162,255,.14) !important;
    /* лёгкая подсветка */
     color:var(--rs-primary) !important;
}
/* На светлой теме — чистая классика */
 html:not([data-theme="dark"]) ul.dropdown-menu .nav-link{
     color:#0e1116 !important;
}
 html:not([data-theme="dark"]) ul.dropdown-menu .nav-link:hover{
     background:rgba(0,0,0,.06) !important;
     color:#0e1116 !important;
}
/* ===== 3) ПОДНЯТЬ ТУМБЛЕР ===== */
 .theme-toggle{
     bottom: 88px !important;
}
/* было 16px;
 поднимем над "вверх"-кнопкой */
/* === CART ITEM === */
 html[data-theme="dark"] li.item{
     background: var(--rs-surface) !important;
     border: 1px solid var(--rs-border) !important;
     border-radius: 12px;
     padding: 10px;
}
 html[data-theme="dark"] li.item .thumbnail{
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] li.item .name a{
     color: var(--rs-text) !important;
}
 html[data-theme="dark"] li.item .options{
     color: var(--rs-muted) !important;
}
 html[data-theme="dark"] .unit-price, html[data-theme="dark"] .total-price{
     color: var(--rs-text) !important;
}
/* quantity-group (+/–, инпут) */
 html[data-theme="dark"] .quantity-group .form-control[type="number"]{
     background:#0f1117 !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border) !important;
     border-radius:10px !important;
}
 html[data-theme="dark"] .quantity-group .btn.btn-outline-secondary{
     background:#0f1117 !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] .quantity-group .btn.btn-outline-secondary:hover{
     background:rgba(255,255,255,.06) !important;
}
/* кнопки в корзине */
 html[data-theme="dark"] .btn-default{
     background:var(--rs-surface) !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] .btn-danger{
     background:#ef4444 !important;
     color:#0b0d12 !important;
     border-color:transparent !important;
}
/* === INPUTS (email и др.) === */
 html[data-theme="dark"] .form-control[type="email"], html[data-theme="dark"] .form-control[type="text"], html[data-theme="dark"] .form-control[type="search"]{
     background:#0f1117 !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border) !important;
     border-radius:10px !important;
}
 html[data-theme="dark"] .form-control::placeholder{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .form-control:focus{
     outline:2px solid rgba(122,162,255,.5);
     outline-offset:0;
     box-shadow:0 0 0 3px rgba(122,162,255,.15);
     border-color:var(--rs-primary) !important;
}
/* === TABLE (итоги заказа) === */
 html[data-theme="dark"] .table{
     background:var(--rs-surface) !important;
     color:var(--rs-text) !important;
     border-color:var(--rs-border) !important;
}
 html[data-theme="dark"] .table.table-bordered > :not(caption) > *{
     border-color:var(--rs-border) !important;
}
 html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd){
     background:#0e1219 !important;
}
 html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even){
     background:transparent !important;
}
 html[data-theme="dark"] .data-table tfoot tr{
     background:#10151f !important;
     border-top:1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] .data-table tfoot strong{
     color:var(--rs-text) !important;
}
 html[data-theme="dark"] .data-table .currency-amount{
     color:var(--rs-primary) !important;
}
/* выравниваем правый столбец */
 html[data-theme="dark"] .data-table td.text-end{
     color:var(--rs-text) !important;
}
/* === DROPDOWN внутри offcanvas (кнопочки-линки уже были, усилим контраст) === */
 html[data-theme="dark"] ul.dropdown-menu .nav-link{
     color:var(--rs-text) !important;
     border:1px solid transparent;
}
 html[data-theme="dark"] ul.dropdown-menu .nav-link:hover{
     background:rgba(122,162,255,.14) !important;
     color:var(--rs-primary) !important;
     border-color:rgba(122,162,255,.25);
}
/* === ИКОНКИ PNG через маску/цвет темы (светлая — чёрный, тёмная — primary) === */
 :root{
     --icon-accent:#0e1116;
}
 html[data-theme="dark"]{
     --icon-accent:var(--rs-primary);
}
 .icon{
     display:inline-block;
     width:1.6em;
     height:1.6em;
     vertical-align:-0.2em;
     color:var(--icon-accent) !important;
}
 .icon--telegram{
     -webkit-mask:url(/images/telegram.png) no-repeat center/contain;
     mask:url(/images/telegram.png) no-repeat center/contain;
     background:currentColor;
}
 .icon--home{
     -webkit-mask:url(/images/home2.png) no-repeat center/contain;
     mask:url(/images/home2.png) no-repeat center/contain;
     background:currentColor;
}
/* если оставляешь <img> — быстрый вариант оттенка */
 html:not([data-theme="dark"]) .icon-tint-primary{
     filter:brightness(0) saturate(100%) !important;
     opacity:.95;
}
 html[data-theme="dark"] .icon-tint-primary{
     filter:brightness(0) saturate(100%) invert(71%) sepia(22%) saturate(2057%) hue-rotate(198deg) brightness(105%) contrast(104%) !important;
}
/* === Subtotal footer === */
 html[data-theme="dark"] .card-footer.subtotal{
     background: var(--rs-surface) !important;
     color: var(--rs-text) !important;
     border-top: 1px solid var(--rs-border) !important;
}
 html[data-theme="dark"] .card-footer.subtotal .formatted-value{
     color: var(--rs-primary) !important;
}
/* === Quantity group (+/−) — убираем белые участки, делаем цельной капсулой === */
 html[data-theme="dark"] .quantity-group{
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
     border-radius:10px !important;
     overflow:hidden;
     display:flex;
     align-items:center;
}
 html[data-theme="dark"] .quantity-group .form-control[type="number"]{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:0 !important;
     border-radius:0 !important;
     box-shadow:none !important;
     text-align:center;
}
 html[data-theme="dark"] .quantity-group .btn{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:0 !important;
     border-radius:0 !important;
     height:100%;
}
 html[data-theme="dark"] .quantity-group .btn:hover{
     background:rgba(255,255,255,.06) !important;
}
 html[data-theme="dark"] .quantity-group .quantity-increase{
     margin-right:0 !important;
}
 html[data-theme="dark"] .quantity-group .fa{
     color:var(--rs-text) !important;
}
/* === Input groups (phone/email и т.п.) === */
 html[data-theme="dark"] .input-group:not(.quantity-group){
     background:#0f1117 !important;
     border:1px solid var(--rs-border) !important;
     border-radius:12px !important;
     overflow:hidden;
}
 html[data-theme="dark"] .input-group:not(.quantity-group) .input-group-text{
     background:transparent !important;
     border:0 !important;
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .input-group:not(.quantity-group) .fa{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .input-group:not(.quantity-group) .form-control{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:0 !important;
}
 html[data-theme="dark"] .input-group:not(.quantity-group) .form-control::placeholder{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .input-group:not(.quantity-group) .form-control:focus{
     box-shadow:none !important;
     outline:none !important;
}
/* ========================= BORDERS: 2 варианта на выбор ↓↓↓ ОСТАВЬ ОДНУ строку, вторую закомментируй ↓↓↓ ========================= */
 html[data-theme="dark"]{
    /* Вариант A: бордеры с лёгким primary-оттенком */
     --rs-border-ui: rgba(122,162,255,.38);
    /* Вариант B: бордеры «белые» (чуть прозрачные) */
    /* --rs-border-ui: rgba(255,255,255,.18);
     */
}
/* Применяем выбранный бордер ко всем ключевым оболочкам */
 html[data-theme="dark"] .input-group, html[data-theme="dark"] .form-control, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .dropdown-menu .nav-link, html[data-theme="dark"] .table, html[data-theme="dark"] .table > :not(caption) > *, html[data-theme="dark"] .card, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-footer, html[data-theme="dark"] .box, html[data-theme="dark"] .thumbnail, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .quantity-group, html[data-theme="dark"] .btn.btn-outline-secondary, html[data-theme="dark"] .btn.btn-default, html[data-theme="dark"] .navbar, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .offcanvas .offcanvas-body{
     border-color: var(--rs-border-ui) !important;
}
/* ========================= «Sort By» (div.form-control с dropdown’ом) ========================= */
 html[data-theme="dark"] .form-control[data-toggle="dropdown"]{
     background:#0f1117 !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border-ui) !important;
     border-radius:10px !important;
     cursor:pointer;
}
 html[data-theme="dark"] .form-control[data-toggle="dropdown"]:hover{
     background:#111521 !important;
}
 html[data-theme="dark"] .form-control[data-toggle="dropdown"][aria-expanded="true"]{
     border-color: var(--rs-primary) !important;
     box-shadow: 0 0 0 3px rgba(122,162,255,.15) !important;
}
/* ========================= Иконка поиска и generic input-group ========================= */
 html[data-theme="dark"] .input-group{
     background:#0f1117 !important;
     border:1px solid var(--rs-border-ui) !important;
     border-radius:12px !important;
     overflow:hidden;
}
 html[data-theme="dark"] .input-group .input-group-icon, html[data-theme="dark"] .input-group .input-group-text{
     background:transparent !important;
     border:0 !important;
     color:var(--rs-muted) !important;
     display:inline-flex;
     align-items:center;
     padding:0 10px;
}
 html[data-theme="dark"] .input-group .fa{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .input-group .form-control{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:0 !important;
}
 html[data-theme="dark"] .input-group .form-control::placeholder{
     color:var(--rs-muted) !important;
}
 html[data-theme="dark"] .input-group .form-control:focus{
     box-shadow:none !important;
     outline:none !important;
}
/* ========================= Quantity-group — без белых пятен ========================= */
 html[data-theme="dark"] .quantity-group{
     background:#0f1117 !important;
     border:1px solid var(--rs-border-ui) !important;
     border-radius:10px !important;
     overflow:hidden;
     display:flex;
     align-items:center;
}
 html[data-theme="dark"] .quantity-group .form-control[type="number"]{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:0 !important;
     border-radius:0 !important;
     box-shadow:none !important;
     text-align:center;
}
 html[data-theme="dark"] .quantity-group .btn{
     background:transparent !important;
     color:var(--rs-text) !important;
     border:0 !important;
     border-radius:0 !important;
     height:100%;
}
 html[data-theme="dark"] .quantity-group .btn:hover{
     background:rgba(255,255,255,.06) !important;
}
/* ========================= Subtotal footer — совпадение с темой ========================= */
 html[data-theme="dark"] .card-footer.subtotal{
     background: var(--rs-surface) !important;
     color: var(--rs-text) !important;
     border-top: 1px solid var(--rs-border-ui) !important;
}
 html[data-theme="dark"] .card-footer.subtotal .formatted-value{
     color: var(--rs-primary) !important;
}
/* === Category tile (dark) — primary-бордер, hover/фокус, читаемый caption === */
 html[data-theme="dark"] article.category .link{
     position: relative;
     display:block;
     background: var(--rs-surface) !important;
     border: 1px solid var(--rs-border-ui) !important;
    /* ← тот самый перв. вариант */
     border-radius: 12px;
     overflow: hidden;
     transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
 html[data-theme="dark"] article.category .link:hover{
     border-color: var(--rs-primary) !important;
     box-shadow: 0 10px 24px rgba(122,162,255,.15);
     transform: translateY(-2px);
}
 html[data-theme="dark"] article.category .link:focus-visible{
     outline: none;
     box-shadow: 0 0 0 3px rgba(122,162,255,.20);
}
/* картинка без «белых полей» + безопасный фон */
 html[data-theme="dark"] article.category img{
     display:block;
     width:100%;
     height:auto;
     background:#0f1117;
    /* если у превью прозрачность */
}
/* подпись поверх картинки с градиентом */
 html[data-theme="dark"] article.category .caption{
     position:absolute;
     left:0;
     right:0;
     bottom:0;
     padding:10px 12px;
     background: linear-gradient(to top, rgba(11,13,18,.92) 0%, rgba(11,13,18,0) 65%) !important;
     color: var(--rs-text) !important;
}
 html[data-theme="dark"] article.category .name{
     color: var(--rs-text) !important;
     font-weight: 700;
}
 html[data-theme="dark"] article.category .short-description{
     color: var(--rs-muted) !important;
}
/* === Side categories (stacked) — hover/active без белого фона === */
 html[data-theme="dark"] .nav.nav-stacked.nav-pills a, html[data-theme="dark"] .nav.nav-stacked a{
     display:block;
     background:transparent !important;
     color:var(--rs-text) !important;
     border:1px solid transparent;
    /* базово — без рамки */
     border-radius:10px;
     padding:8px 10px;
     transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* hover/focus: только бордер и цвет текста */
 html[data-theme="dark"] .nav.nav-stacked.nav-pills a:hover, html[data-theme="dark"] .nav.nav-stacked a:hover, html[data-theme="dark"] .nav.nav-stacked.nav-pills a:focus-visible, html[data-theme="dark"] .nav.nav-stacked a:focus-visible{
     background:transparent !important;
    /* не заливаем фон */
     border-color: rgb(122 162 255 / 80%) !important;
    /* primary-бордер */
     color: var(--rs-primary) !important;
     font-weight: 600;
    /* «чуть жирнее» */
     box-shadow: 0 0 0 3px rgba(122,162,255,.12);
    /* мягкий фокус */
     outline: none;
}
/* active/opened: как на hover, чтобы состояние фиксировалось */
 html[data-theme="dark"] .nav.nav-stacked li.active > a, html[data-theme="dark"] .nav.nav-stacked li.opened > a, html[data-theme="dark"] .nav.nav-stacked li.opened.active > a{
     background:transparent !important;
     border-color: rgb(122 162 255 / 80%) !important;
     color: var(--rs-primary) !important;
     font-weight: 600;
}
/* счётчики справа — серые обычно, на hover/active становятся primary */
 html[data-theme="dark"] .nav.nav-stacked a small{
     color: var(--rs-muted) !important;
}
 html[data-theme="dark"] .nav.nav-stacked a:hover small, html[data-theme="dark"] .nav.nav-stacked li.active > a small, html[data-theme="dark"] .nav.nav-stacked li.opened > a small{
     color: var(--rs-primary) !important;
     font-weight: 600;
}
/* стрелочки-иконки справа — тоже синхронизируем с состояниями */
 html[data-theme="dark"] .nav.nav-stacked a .fa{
     color: var(--rs-muted) !important;
}
 html[data-theme="dark"] .nav.nav-stacked a:hover .fa, html[data-theme="dark"] .nav.nav-stacked li.active > a .fa, html[data-theme="dark"] .nav.nav-stacked li.opened > a .fa{
     color: var(--rs-primary) !important;
}
/* вложенные списки — чуть отделим слева (без фона) */
 html[data-theme="dark"] .nav.nav-stacked .nav{
     margin-top:6px;
     margin-bottom:6px;
     padding-left:8px;
     border-left:1px dashed rgb(122 162 255 / 28%);
}
/* === Featherlight / flx — DARK THEME =============================== */
 html[data-theme="dark"] .featherlight{
    /* затемняем подложку */
     background: rgba(11,13,18,.92) !important;
     color-scheme: dark;
}
/* коробка контента */
 html[data-theme="dark"] .featherlight .featherlight-content{
     background:#0f1117 !important;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border-ui) !important;
    /* наш primary-бордер */
     border-radius:12px !important;
     box-shadow:0 24px 64px rgba(0,0,0,.6) !important;
     padding:0 !important;
    /* картинка до краёв, подпись отдельным блоком */
     max-width:95vw;
     max-height:92vh;
}
/* картинка, чтобы не было белых полей */
 html[data-theme="dark"] .featherlight .flx-img{
     display:block;
     max-width:100%;
     height:auto;
     background:#0f1117;
     border-bottom:1px solid var(--rs-border-ui);
     border-radius:12px 12px 0 0;
}
/* подпись под фото */
 html[data-theme="dark"] .featherlight .flx-caption{
     background:linear-gradient(to top, rgba(11,13,18,.95), rgba(11,13,18,.85));
     color:var(--rs-text) !important;
     padding:10px 14px;
     border-radius:0 0 12px 12px;
     border-top:1px solid var(--rs-border-ui);
     text-shadow:0 1px 0 rgba(0,0,0,.25);
}
/* кнопка закрытия */
 html[data-theme="dark"] .featherlight .featherlight-close-icon{
     position:absolute;
     top:10px;
     right:10px;
     width:36px;
     height:36px;
     line-height:36px;
     text-align:center;
     background:#0f1117;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border-ui);
     border-radius:10px;
     box-shadow:0 6px 16px rgba(0,0,0,.35);
     transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
 html[data-theme="dark"] .featherlight .featherlight-close-icon:hover{
     border-color:var(--rs-primary);
     color:var(--rs-primary) !important;
     transform:translateY(-1px);
}
/* стрелки-навигация */
 html[data-theme="dark"] .featherlight .flx-wrap{
     position:relative;
}
 html[data-theme="dark"] .featherlight .flx-nav{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     width:44px;
     height:44px;
     line-height:42px;
     background:#0f1117;
     color:var(--rs-text) !important;
     border:1px solid var(--rs-border-ui);
     border-radius:10px;
     box-shadow:0 8px 22px rgba(0,0,0,.4);
     cursor:pointer;
     user-select:none;
     transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
 html[data-theme="dark"] .featherlight .flx-prev{
     left:-64px;
}
 html[data-theme="dark"] .featherlight .flx-next{
     right:-64px;
}
 @media (max-width: 1024px){
     html[data-theme="dark"] .featherlight .flx-prev{
         left:10px;
    }
     html[data-theme="dark"] .featherlight .flx-next{
         right:10px;
    }
}
 html[data-theme="dark"] .featherlight .flx-nav:hover, html[data-theme="dark"] .featherlight .flx-nav:focus-visible{
     border-color: var(--rs-primary);
     color: var(--rs-primary) !important;
     outline: none;
     transform:translateY(-50%) translateY(-1px);
}
/* клавиатурный фокус */
 html[data-theme="dark"] .featherlight .flx-nav:focus-visible{
     box-shadow:0 0 0 3px rgba(122,162,255,.18), 0 8px 22px rgba(0,0,0,.4);
}
/* уберём «мигание» белых рамок от базовой темы */
 html[data-theme="dark"] .featherlight .featherlight-content *{
     border-color:var(--rs-border-ui) !important;
}
/* прячем тумблер темы поверх модалки, чтобы не мозолил глаз */
 html[data-theme="dark"]:has(.featherlight) .theme-toggle{
     opacity:0;
     pointer-events:none;
     transition:opacity .15s ease;
}
/* ==== FEATHERLIGHT SIZE (для обеих тем) ==== */
/* Быстрые ручки под себя: меняешь проценты — меняется ширина/высота лайтбокса */
 :root{
     --lb-max-w: clamp(480px, 60vw, 1100px);
    /* ~половина экрана на десктопе */
     --lb-max-h: clamp(360px, 72vh, 900px);
}
/* Контейнер модалки */
 .featherlight .featherlight-content{
     max-width: var(--lb-max-w) !important;
     width: auto !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding: 0 !important;
}
/* Обёртка картинки+подписи */
 .featherlight .flx-wrap{
     max-width: var(--lb-max-w);
     max-height: var(--lb-max-h);
}
/* Картинка никогда не выходит за рамки и не прилипает к белым полям */
 .featherlight .flx-img{
     display:block;
     width: 100%;
     height: auto;
     max-height: calc(var(--lb-max-h) - 48px);
    /* минус подпись */
     object-fit: contain;
     background:#0f1117;
    /* на случай прозрачности у JPEG/PNG */
}
/* Подпись — оставляем видимой, но компактной */
 .featherlight .flx-caption{
     font-size: 14px;
     line-height: 1.25;
}
/* Адаптив: на телефонах пусть почти во весь экран, чтобы не было «мелко» */
 @media (max-width: 768px){
     :root{
         --lb-max-w: 92vw;
         --lb-max-h: 78vh;
    }
     }



/* === Category tiles: bordер в dark как везде (primary-ish) === */
html[data-theme="dark"] .listing.categories article.category .link{
  border:1px solid var(--rs-border-ui) !important;   /* синеватый, как у тебя в UI */
  border-radius:12px; background:var(--rs-surface) !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .listing.categories article.category .link:hover{
  border-color:var(--rs-primary) !important;
  box-shadow:0 10px 24px rgba(122,162,255,.15);
}

/* === Mobile: когда img скрыт (hidden-xs/hidden-sm), делаем caption обычным блоком === */
@media (max-width: 640px){
  /* убираем абсолют, чтобы текст не «схлопывался» */
  html[data-theme="dark"] .listing.categories article.category .caption{
    position: static !important;
    background: transparent !important;   /* без градиента, т.к. картинки нет */
    padding: 12px !important;
  }
  /* сам линк — как карточка с фиксированным минимумом высоты */
  html[data-theme="dark"] .listing.categories article.category .link{
    display:block;
  }
  /* читаемые цвета текста */
  html[data-theme="dark"] .listing.categories article.category .name{
    color: var(--rs-text) !important;
    font-weight: 700; line-height: 1.25;
    text-shadow: none !important;
  }
  html[data-theme="dark"] .listing.categories article.category .short-description{
    color: var(--rs-muted) !important;
    line-height: 1.25;
  }
}

/* === Иконки внутри caption (если есть .fa, svg, img-иконки) — как «предыдущее» === */
html[data-theme="dark"] .listing.categories article.category .caption .fa,
html[data-theme="dark"] .listing.categories article.category .caption svg{
  color: var(--rs-primary) !important;
  opacity: .95;
}
/* если вдруг стоят png-иконки как <img> — слегка тонируем, как раньше */
html[data-theme="dark"] .listing.categories article.category .caption img.icon-tint-primary{
  filter: brightness(0) saturate(100%) invert(71%) sepia(22%) saturate(2057%) hue-rotate(198deg) brightness(105%) contrast(104%) !important;
}
/* === FIX: иконки quick-access на мобилке === */
@media (max-width: 991px){ /* до lg включительно */
  html[data-theme="dark"] .quick-access .navbar-icon i,
  html[data-theme="dark"] .quick-access .navbar-icon .fa,
  html[data-theme="dark"] .quick-access .navbar-icon .icon{
    color: var(--icon-accent) !important;
  }
}