:root {
  --ui-accent: #3b82f6;
  --chip-bg: #232a35;
  --chip-active: #2f3a49;
  --chip-border: rgba(255,255,255,0.10);
  --badge-bg: #ef4444;
  --badge-text: #fff;
}


.chip, .tag, .pill, [data-filter] {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
  cursor: pointer;
  user-select: none;
}
.chip:hover, .tag:hover, .pill:hover, [data-filter]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.chip.is-active, .tag.is-active, .pill.is-active, [data-filter].is-active {
  background: var(--chip-active);
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 0 2px rgba(59,130,246,.25) inset;
}
.chip:focus-visible, .tag:focus-visible, .pill:focus-visible, [data-filter]:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}


.product-card, .card, .item-card, .tile {
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.product-card:hover, .card:hover, .item-card:hover, .tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.product-card img, .card img, .item-card img, .tile img {
  display:block;
  border-radius: 12px 12px 0 0;
  image-rendering: -webkit-optimize-contrast;
}


.cart, .cart-button, .header-cart, [data-cart-count] {
  position: relative;
}
[data-cart-count]:after {
  content: attr(data-cart-count);
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transform: translateZ(0);
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


:root{
  --title-grey: #c2c9d3;
  --toast-bg: rgba(30, 37, 48, 0.98);
  --toast-text: #eaf1ff;
  --toast-shadow: 0 10px 28px rgba(0,0,0,.35);
}


.product-title, .item-title, .card-title, .product-card .title, .product-card h3, .tile .title, .tile h3 {
  color: var(--title-grey) !important;
}


.ui-toast {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 14px;
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: var(--toast-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font-size: 14px;
}
.ui-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.fly-clone {
  position: fixed;
  z-index: 9998;
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  pointer-events: none;
  transform: translateZ(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
  opacity: 1;
}
.fly-clone.is-done { opacity: 0; }


:root{ --title-grey: #c2c9d3; }
.product-card h1, .product-card h2, .product-card h3, .product-card .title, .product-card .name,
.card h1, .card h2, .card h3, .card .title, .card .name,
.tile h1, .tile h2, .tile h3, .tile .title, .tile .name,
.item-card h1, .item-card h2, .item-card h3, .item-card .title, .item-card .name,
.modal h1, .modal h2, .modal h3, .modal .title, .modal .name,
.product-modal h1, .product-modal h2, .product-modal h3, .product-modal .title, .product-modal .name,
[class*="product"] h1, [class*="product"] h2, [class*="product"] h3, [class*="product"] .title, [class*="product"] .name {
  color: var(--title-grey) !important;
}


:root{ --title-grey: #c2c9d3; }
body [class*="modal" i] :is(h1,h2,h3,.title,.name),
body [role="dialog"] :is(h1,h2,h3,.title,.name),
body [class*="dialog" i] :is(h1,h2,h3,.title,.name),
body [class*="overlay" i] :is(h1,h2,h3,.title,.name),
body [class*="sheet" i] :is(h1,h2,h3,.title,.name),
body [class*="product" i] :is(.product-title,.title,.name,h1,h2,h3) {
  color: var(--title-grey) !important;
}


:root{ --title-grey: #c2c9d3; } 
.cart h1, .cart h2, .cart h3, .cart .title, .cart .name, .cart__title,
.cart-page h1, .cart-page h2, .cart-page .title, .cart-page .name,
.basket h1, .basket h2, .basket .title, .basket .name, .basket__title,
.modal-cart h1, .modal-cart h2, .modal-cart .title,
[role="dialog"][data-modal="cart"] h1, [role="dialog"][data-modal="cart"] .title,
[data-page="cart"] h1, [data-page="cart"] h2, [data-page="cart"] .title, [data-page="cart"] .name,
[class*="cart" i] :is(h1, h2, h3, .title, .name) {
  color: var(--title-grey) !important;
}



.grid .tile img, .cards .tile img, .catalog .tile img, .category img, .categories img,
.catalog img, .groups img, .group img, .category-card img, .group-card img,
.card img, .tile img, .item-card img {
  border-radius: 0 !important;
  background: #fff; 
}

.tile .image, .tile .thumb, .card .image, .card .thumb, .item-card .image, .item-card .thumb,
.category .image, .category .thumb, .category-card .image, .category-card .thumb {
  border-radius: 12px !important;
  overflow: hidden;
  background: #fff;
}


:root { --thumb-pad: 12px; }

.category, .categories .tile, .category-card, .group-card, .groups .tile {
  
}
.category .image, .category .thumb, .categories .tile .image, .categories .tile .thumb,
.category-card .image, .category-card .thumb, .group-card .image, .group-card .thumb,
.groups .tile .image, .groups .tile .thumb {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  
  padding: var(--thumb-pad) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}


.category .image img, .category .thumb img, .categories .tile .image img, .categories .tile .thumb img,
.category-card .image img, .category-card .thumb img, .group-card .image img, .group-card .thumb img,
.groups .tile .image img, .groups .tile .thumb img,
.category img, .categories img, .category-card img, .group-card img, .groups img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  background: #fff !important;
  object-fit: contain !important;
}


.categories .tile, .groups .tile, .category-card, .group-card {
  background-clip: padding-box;
}



.mini-cart, .mini_cart, .cart-drawer, .cart_drawer, .cart-popup, .cart_popup {
  display: none !important;
  visibility: hidden !important;
}