.card {
  background: var(--card);
  padding: 28px;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  max-width: 420px;
}

.thumb-placeholder {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid #eee;
}
.thumb, .thumb-placeholder .thumb { font-size: 20px; }

.back-btn {
  background-color: var(--white);
  border-radius: 50px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.cat-card {
  background: var(--card);
  border-radius: var(--cat-card-radius);
  padding: 20px;
  box-shadow: var(--shadow);
  overflow: visible;
  transition: transform .12s ease;
  border: 1px solid var(--card-hover-border);
  z-index: 2;
}
.cat-card.open { transform: translateY(-4px); }

.cat-head { display: flex; gap: 10px; align-items: center; }
.cat-info { flex: 1; }
.cat-name { font-weight: 700; font-size: 14px; color: var(--text); }
.cat-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }

.toggle, .sub-toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #E1E1E1;
  background: var(--soft);
  font-size: 18px;
  cursor: pointer;
}
.period:focus, .leaf-link:focus {
  outline: 2px solid rgba(122, 122, 122, 0.14);
  border-radius: 50px;
}

.toggle img,
.sub-toggle img,
.toggle svg,
.sub-toggle svg {
  pointer-events: none;
  transition: transform .18s ease;
  transform-origin: 50% 50%;
}

.rotated img,
.rotated svg {
  transform: rotate(90deg);
}


.metric {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--soft);
  padding: 15px;
  border-radius: 10px;
  text-align: left;
  border: 1px solid var(--border-light);
}

.cat-metrics {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}


.metric .label { 
  font-size: 11px; 
  color: var(--muted); 
}

.metric .val { 
  font-weight: 600; 
  font-size: 16px; 
  color: var(--text); 
}

.sub-title-wrapper { display:flex; flex-direction:column; gap:5px; }
.goto { color: var(--muted); text-decoration: none; font-size: 18px; }
.leaf-link { color: #000; font-weight:600; text-decoration: none; }


.toggle:hover img,
.sub-toggle:hover img {
  transform: rotate(90deg) scale(1.06);
}

button, .btn, .nav-btn {
  transition: transform .14s ease, box-shadow .14s ease;
}
button:active, .btn:active, .nav-btn:active {
  transform: translateY(1px) scale(0.998);
  box-shadow: 0 6px 12px rgba(10,20,40,0.06);
}

.card.product-card:hover .card-img {
  transform: scale(1.03);
  transition: transform .28s cubic-bezier(.2,.9,.25,1);
}

.kaspi-btn, .btn-link {
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.kaspi-btn:hover, .btn-link:hover {
  transform: translateY(-3px);
  filter: saturate(1.05);
  box-shadow: 0 10px 24px rgba(31,31,31,0.12);
}