

:root {
  --title-card: #E2E8F0;   
  --title-modal: #E5E7EB;  
}


.card .title {
  color: var(--title-card) !important;
}


.tile .tname {
  color: var(--title-card) !important;
}


.sheet-head .pd-title,
.product-dialog .pd-title {
  color: var(--title-modal) !important;
}


.tile .timg {
  background: #ffffff !important;           
  object-fit: contain !important;            
  padding: 6px !important;                   
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
}


.pd-img {
  background: #ffffff !important;
  object-fit: contain !important;
}


body {
  color: #f1f5f9; 
}



:root{
  --tb-backlight-height: 1cm;
  --tb-backlight-opacity: .30; 
  --tb-backlight-overscan: 24px; 
}
.topbar, [data-topbar]{ overflow: visible; } 

body.backlight-1cm .topbar::before,
body.backlight-1cm [data-topbar]::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--tb-backlight-overscan));
  right: calc(-1 * var(--tb-backlight-overscan));
  
  top: calc(100% - (var(--tb-backlight-height) / 2));
  height: var(--tb-backlight-height);
  pointer-events:none;
  opacity: var(--tb-backlight-opacity);
  
  background:
    radial-gradient(120% 200% at 50% 0%,
      var(--neon-core, #e8fbff) 10%,
      color-mix(in srgb, var(--neon-1, #60a5fa) 80%, transparent) 40%,
      color-mix(in srgb, var(--neon-2, #7c8cff) 65%, transparent) 60%,
      transparent 85%);
  filter: blur(22px) saturate(115%);
}



:root{
  --search-backlight-height: 1cm;
  --search-backlight-opacity: .30;
  --search-backlight-overscan: 18px; 
}


.topbar, [data-topbar]{ isolation:isolate; overflow:visible; }


body.backlight-search .search,
body.backlight-search .search-box,
body.backlight-search .searchbar,
body.backlight-search .top-search,
body.backlight-search .search-input,
body.backlight-search [data-search]{
  position: relative;
  z-index: 1;  
}

body.backlight-search .search::before,
body.backlight-search .search-box::before,
body.backlight-search .searchbar::before,
body.backlight-search .top-search::before,
body.backlight-search .search-input::before,
body.backlight-search [data-search]::before{
  content:"";
  position: absolute;
  left:  calc(-1 * var(--search-backlight-overscan));
  right: calc(-1 * var(--search-backlight-overscan));
  top: calc(100% - (var(--search-backlight-height) / 2));
  height: var(--search-backlight-height);
  pointer-events: none;
  opacity: var(--search-backlight-opacity);
  z-index: -1;             
  border-radius: 22px;     
  background:
    radial-gradient(120% 200% at 50% 0%,
      var(--neon-core, #e8fbff) 10%,
      color-mix(in srgb, var(--neon-1, #60a5fa) 80%, transparent) 40%,
      color-mix(in srgb, var(--neon-2, #7c8cff) 65%, transparent) 60%,
      transparent 85%);
  filter: blur(22px) saturate(115%);
}




:root{
  --search-belt-height: 3px;         
  --search-belt-opacity: .95;        
}


body.backlight-search .search::after,
body.backlight-search .search-box::after,
body.backlight-search .searchbar::after,
body.backlight-search .top-search::after,
body.backlight-search .search-input::after,
body.backlight-search [data-search]::after{
  content:"";
  position:absolute;
  left: -1px;
  right: -1px;
  top: calc(100% - var(--search-belt-height)); 
  height: var(--search-belt-height);
  pointer-events:none;
  z-index: 2; 
  border-radius: 4px;
  background: var(--neon-core, #e8fbff);
  box-shadow:
    0 0 2px var(--neon-core, #e8fbff),
    0 0 4px var(--neon-1, #60a5fa),
    0 0 6px var(--neon-2, #7c8cff);
  opacity: var(--search-belt-opacity);
}




:root{
  --cj-opacity: .32;
  --cj-spread: 14px;           
  --cj-core:   #e8fbff;        
  --cj-1:      #9ecbff;        
  --cj-2:      #7c8cff;        
  --topbar-front: #0b0f15;     
  --topbar-radius: 12px;
}
.topbar, [data-topbar]{
  position:relative; isolation:isolate; overflow:visible;
  background: var(--topbar-front); border-radius: var(--topbar-radius);
}

body.topbar-contrajour .topbar::before,
body.topbar-contrajour [data-topbar]::before{
  content:""; position:absolute; inset: calc(-1 * var(--cj-spread));
  border-radius: calc(var(--topbar-radius) + var(--cj-spread));
  pointer-events:none; z-index:-1; opacity: var(--cj-opacity);
  box-shadow:
    0 0 10px var(--cj-core),
    0 0 22px var(--cj-1),
    0 0 46px var(--cj-2);
  filter: saturate(115%) blur(4px);
}


.cart, .header-cart, [data-cart]{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .38rem .62rem; border-radius:999px;
  color:#dbeafe; background:rgba(13,18,26,.45);
  border:1px solid rgba(255,255,255,.05);
  transition: box-shadow .18s ease, transform .18s ease;
}
.cart:hover, .header-cart:hover, [data-cart]:hover{
  box-shadow:
    0 0 0 1px #60a5fa,
    0 0 10px rgba(96,165,250,.45),
    0 0 18px rgba(124,140,255,.35);
  transform: translateY(-1px);
}

.cart .count, .header-cart .count, [data-cart] .count{
  min-width: 18px; height:18px; padding:0 5px; border-radius:999px;
  font-size:11px; display:inline-grid; place-items:center;
  background:#2563eb; color:white;
  box-shadow: 0 0 8px rgba(37,99,235,.55);
}



:root{
  --outline-opacity: .34;      
  --outline-size: 22px;        
  --outline-core: #e8fbff;     
  --outline-1:   #60a5fa;      
  --outline-2:   #7c8cff;      
  --topbar-front: #0b0f15;     
  --topbar-radius: 12px;
}

.topbar, [data-topbar]{ position:relative; isolation:isolate; overflow:visible; background:var(--topbar-front); border-radius:var(--topbar-radius); }


body.topbar-outline .topbar::before,
body.topbar-outline [data-topbar]::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  border-radius:inherit; opacity: var(--outline-opacity);
  
  box-shadow:
    0 0 0 1px rgba(232,251,255,.35),
    0 0 calc(var(--outline-size)*.45) var(--outline-core),
    0 0 calc(var(--outline-size)*.9)  var(--outline-1),
    0 0 calc(var(--outline-size)*1.8) var(--outline-2);
  filter: saturate(115%);
}



:root{
  --outline-opacity: .38;   
  --outline-size: 24px;     
}
.topbar::before, [data-topbar]::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  border-radius:inherit; opacity: var(--outline-opacity);
  box-shadow:
    0 0 0 1px rgba(232,251,255,.35),
    0 0 calc(var(--outline-size)*.45) var(--outline-core, #e8fbff),
    0 0 calc(var(--outline-size)*.9)  var(--outline-1,   #60a5fa),
    0 0 calc(var(--outline-size)*1.8) var(--outline-2,   #7c8cff);
  filter: saturate(115%);
}



.cart-btn { display:flex; align-items:center; gap:8px; }
.cart-label {
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow:
    0 0 2px rgba(79, 147, 255, .9),
    0 0 6px rgba(79, 147, 255, .6),
    0 0 12px rgba(79, 147, 255, .35);
}


.cart-btn {
  margin-left: auto;
  font-weight: 800;
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 0 6px rgba(80,140,255,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  text-shadow: 0 0 2px rgba(80,140,255,.6);
}
.cart-btn:hover { box-shadow: 0 0 10px rgba(80,140,255,.55), inset 0 0 0 1px rgba(255,255,255,.14); transform: translateY(-1px); }
.cart-btn:active { transform: translateY(0); }



.mini-cart, .mini_cart, .cart-drawer, .cart_drawer, .cart-popup, .cart_popup {
  display: none !important;
  visibility: hidden !important;
}
/* === Breadcrumbs === */
#breadcrumbs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:8px 0 12px; font-size:14px; opacity:.95;
}
#breadcrumbs a,
#breadcrumbs .crumb{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none; white-space:nowrap;
}
#breadcrumbs a:hover{ background: rgba(255,255,255,.12); }
#breadcrumbs .sep{ margin:0 4px; opacity:.6; }

@media (max-width:560px){
  #breadcrumbs{ font-size:13px; gap:4px; }
}
/* скрыть "пилюлю" заголовка раздела */
#catPill { display: none !important; }
#filters,
#filtersResetWrap { margin: 0 !important; padding: 0 !important; }


/* === Fix: ровные квадраты групп, не тянется высота/ширина === */
#homeTiles .tiles { align-items: stretch; }
#homeTiles .tile { min-width: 0; width: 100%; }           /* не даём распирать колонку */
#homeTiles .tile > * { max-width: 100%; }                  /* всё внутри не шире плитки */

/* Картинка — идеальный квадрат, без обрезания */
#homeTiles .tile .timg{
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain !important;   /* было cover → из-за этого «резало» и прыгало */
  object-position: center;
  display: block;
}

/* Название — максимум 2 строки, дальше обрезаем */
#homeTiles .tile .tname{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;           /* длинные слова не растягивают плитку */
}
